/*
Theme Name: Cómo Hago
Template: generatepress
Description: Tema hijo de GeneratePress. Diseño editorial para artículos sin imágenes: la tipografía y el color por categoría hacen el trabajo que normalmente hacen las fotos.
Author: SiteHco
Version: 1.1
*/

/* ============================================================
   Paleta
   ============================================================ */

:root {
  --papel:        #ffffff;
  --papel-tenue:  #f6f3ee;   /* fondo cálido: cansa menos que el gris azulado */
  --tinta:        #1e232b;
  --tinta-suave:  #59616e;
  --linea:        #e5e0d8;
  --acento:       #0d6e63;
  --acento-claro: #e6f1ef;

  /* Un color por sección. Sin imágenes, esto es lo que da identidad visual
     y permite orientarse de un vistazo. */
  --c-dinero:     #1f7a5c;
  --c-empleo:     #2557a7;
  --c-hogar:      #b4530a;
  --c-autos:      #7a2e6d;
  --c-tecnologia: #0f6b8c;
  --c-tramites:   #8a6d1f;

  --lectura: 40rem;
}

body {
  background: var(--papel-tenue);
  color: var(--tinta);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.site-content { padding-top: 30px; }
.separate-containers .site-main { margin: 0; }

/* ============================================================
   Cabecera
   ============================================================ */

.site-header {
  background: var(--papel);
  border-top: 4px solid var(--acento);
  border-bottom: 1px solid var(--linea);
}
.site-header .inside-header { padding: 26px 20px 20px; }

.site-branding .main-title a {
  font-size: 30px; font-weight: 800; letter-spacing: -.8px;
  color: var(--tinta); text-decoration: none;
}
.site-branding .main-title a .marca-acento { color: var(--acento); }
.site-description {
  font-size: 14.5px; color: var(--tinta-suave); margin-top: 4px;
}

.main-navigation {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.main-navigation .main-nav ul li a {
  font-size: 15px; font-weight: 600; color: var(--tinta-suave);
  padding: 0 18px; line-height: 54px;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
  color: var(--acento); background: transparent;
}
.main-navigation .main-nav ul li.current-menu-item > a {
  box-shadow: inset 0 -3px 0 var(--acento);
}

/* ============================================================
   Listado
   ============================================================ */

.blog article.post, .archive article.post, .search article.post {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--tinta-suave);
  border-radius: 14px;
  padding: 26px 30px 24px;
  margin-bottom: 18px;
  transition: box-shadow .16s ease, transform .16s ease;
}
.blog article.post:hover, .archive article.post:hover {
  box-shadow: 0 8px 26px rgba(30,35,43,.10);
  transform: translateY(-2px);
}

/* Con `article.category-x` no bastaba: la regla base `.blog article.post` tiene
   más especificidad y ganaba con el color por defecto. Hay que igualarla. */
article.post.category-dinero     { border-left-color: var(--c-dinero); }
article.post.category-empleo     { border-left-color: var(--c-empleo); }
article.post.category-hogar      { border-left-color: var(--c-hogar); }
article.post.category-autos      { border-left-color: var(--c-autos); }
article.post.category-tecnologia { border-left-color: var(--c-tecnologia); }
article.post.category-tramites   { border-left-color: var(--c-tramites); }

.etiqueta-cat {
  display: inline-block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--tinta-suave);
}
.category-dinero     .etiqueta-cat,
.tax-dinero     .etiqueta-cat { color: var(--c-dinero); }
.category-empleo     .etiqueta-cat { color: var(--c-empleo); }
.category-hogar      .etiqueta-cat { color: var(--c-hogar); }
.category-autos      .etiqueta-cat { color: var(--c-autos); }
.category-tecnologia .etiqueta-cat { color: var(--c-tecnologia); }
.category-tramites   .etiqueta-cat { color: var(--c-tramites); }

.blog .entry-title, .archive .entry-title, .search .entry-title {
  font-size: 25px; line-height: 1.28; letter-spacing: -.4px; margin-bottom: 10px;
}
.blog .entry-title a, .archive .entry-title a { color: var(--tinta); }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--acento); }

.entry-summary p { color: var(--tinta-suave); font-size: 17px; margin-bottom: 0; }
.seguir-leyendo { color: var(--acento); text-decoration: none; font-weight: 600; white-space: nowrap; }
.seguir-leyendo:hover { text-decoration: underline; }

.blog .entry-header .entry-meta, .archive .entry-header .entry-meta { display: none; }

/* Cabecera de categoría, del color de la sección */
.page-header {
  background: var(--papel); border: 1px solid var(--linea);
  border-top: 5px solid var(--acento);
  border-radius: 14px; padding: 28px 30px; margin-bottom: 20px;
}
.page-header h1 { font-size: 30px; margin-bottom: 8px; letter-spacing: -.6px; }
.page-header .taxonomy-description p { margin: 0; color: var(--tinta-suave); font-size: 17px; }

.category-dinero     .page-header { border-top-color: var(--c-dinero); }
.category-empleo     .page-header { border-top-color: var(--c-empleo); }
.category-hogar      .page-header { border-top-color: var(--c-hogar); }
.category-autos      .page-header { border-top-color: var(--c-autos); }
.category-tecnologia .page-header { border-top-color: var(--c-tecnologia); }

/* ============================================================
   Artículo
   ============================================================ */

.single .site-main {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 5px solid var(--acento);
  border-radius: 14px;
  padding: 44px 54px 44px;
}
.single.category-dinero     .site-main { border-top-color: var(--c-dinero); }
.single.category-empleo     .site-main { border-top-color: var(--c-empleo); }
.single.category-hogar      .site-main { border-top-color: var(--c-hogar); }
.single.category-autos      .site-main { border-top-color: var(--c-autos); }
.single.category-tecnologia .site-main { border-top-color: var(--c-tecnologia); }

.single .entry-title {
  font-size: 42px; line-height: 1.14; letter-spacing: -1.2px; margin-bottom: 16px;
}
.single .entry-header .entry-meta {
  font-size: 14px; color: var(--tinta-suave);
  padding-bottom: 22px; border-bottom: 1px solid var(--linea); margin-bottom: 32px;
}

.entry-content { max-width: var(--lectura); }

/* La entradilla, más grande: fija el tono y engancha */
.entry-content > p:first-of-type { font-size: 21px; line-height: 1.6; }
.entry-content p { margin-bottom: 21px; }

.entry-content h2 {
  font-size: 27px; line-height: 1.26; letter-spacing: -.5px;
  margin: 46px 0 16px; padding-top: 14px;
  border-top: 2px solid var(--acento-claro);
}
.entry-content h3 { font-size: 20.5px; margin: 34px 0 12px; color: var(--acento); }

.entry-content ul, .entry-content ol { margin: 0 0 24px; padding-left: 0; }
.entry-content li { margin-bottom: 11px; padding-left: 28px; position: relative; list-style: none; }
.entry-content ul > li::before {
  content: ""; position: absolute; left: 5px; top: .68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
}
.entry-content ol { counter-reset: n; }
.entry-content ol > li { counter-increment: n; }
.entry-content ol > li::before {
  content: counter(n); position: absolute; left: 0; top: .05em;
  font-size: 13.5px; font-weight: 800; color: var(--acento);
  width: 20px; text-align: center;
}

.entry-content blockquote {
  margin: 0 0 26px; padding: 20px 24px;
  background: var(--acento-claro); border-left: 4px solid var(--acento);
  border-radius: 0 12px 12px 0; font-style: normal; color: var(--tinta);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content table { font-size: 16.5px; margin-bottom: 26px; width: 100%; }
.entry-content th {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tinta-suave); border-bottom: 2px solid var(--linea); text-align: left;
}
.entry-content td { border-bottom: 1px solid var(--linea); }
.entry-content th, .entry-content td { padding: 12px 15px; }
.entry-content tr:nth-child(even) td { background: var(--papel-tenue); }

.entry-content hr { border: 0; border-top: 1px solid var(--linea); margin: 38px 0; }
.entry-content a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.entry-content strong { font-weight: 700; }

/* El resumen final de cada artículo */
.resumen-final {
  background: var(--papel-tenue);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 28px 32px 12px;
  margin-top: 44px;
}
.resumen-final h2 {
  border-top: 0; margin: 0 0 18px; padding-top: 0;
  font-size: 15px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--acento);
}
.resumen-final ul { margin-bottom: 18px; }
.resumen-final p:last-child { margin-bottom: 18px; }

/* Artículos relacionados al final */
.relacionados { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--linea); }
.relacionados h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--tinta-suave); margin-bottom: 16px;
}
.relacionados a {
  display: block; padding: 15px 18px; margin-bottom: 10px;
  background: var(--papel-tenue); border: 1px solid var(--linea);
  border-radius: 12px; color: var(--tinta); text-decoration: none;
  font-weight: 600; font-size: 16.5px; line-height: 1.4;
}
.relacionados a:hover { border-color: var(--acento); color: var(--acento); }

/* ============================================================
   Pie
   ============================================================ */

.site-footer { background: var(--papel); border-top: 1px solid var(--linea); }
.site-info { font-size: 14px; color: var(--tinta-suave); padding: 28px 20px; }
.site-info a { color: var(--tinta-suave); }

/* ============================================================
   Teléfono
   ============================================================ */

@media (max-width: 768px) {
  body { font-size: 17px; }
  .single .site-main {
    padding: 28px 20px 30px; border-radius: 0; border-left: 0; border-right: 0;
  }
  .single .entry-title { font-size: 30px; letter-spacing: -.7px; }
  .entry-content > p:first-of-type { font-size: 19px; }
  .entry-content h2 { font-size: 23px; margin-top: 36px; }
  .blog article.post, .archive article.post { padding: 20px 20px; border-radius: 12px; }
  .blog .entry-title, .archive .entry-title { font-size: 21px; }
  .resumen-final { padding: 22px 20px 8px; }
  .page-header { padding: 22px 20px; }
}

/* ============================================================
   Imágenes generadas
   ============================================================ */

/* En el listado: la portada arriba, a sangre dentro de la tarjeta */
.blog article.post, .archive article.post, .search article.post {
  padding: 0 0 24px;
  overflow: hidden;
}
.blog .post-image, .archive .post-image, .search .post-image {
  margin: 0 0 20px;
}
.blog .post-image img, .archive .post-image img, .search .post-image img {
  width: 100%; height: auto; display: block;
}
.blog .entry-header, .archive .entry-header,
.blog .entry-summary, .archive .entry-summary { padding: 0 30px; }
.blog .entry-header, .archive .entry-header { padding-top: 0; }

/* En el artículo */
.single .post-image { margin: 0 0 34px; }
.single .post-image img {
  width: 100%; height: auto; display: block; border-radius: 12px;
}

/* Marca en la cabecera */
.marca-enlace { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-simbolo { flex-shrink: 0; border-radius: 12px; }
.marca-texto {
  font-size: 29px; font-weight: 800; letter-spacing: -.9px; color: var(--tinta);
  line-height: 1;
}
.marca-acento { color: var(--acento); }
.site-header .inside-header { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Icono junto al nombre de la sección */
.etiqueta-cat { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.etiqueta-cat:hover { text-decoration: underline; }
.icono-cat { flex-shrink: 0; }

@media (max-width: 768px) {
  .blog .entry-header, .archive .entry-header,
  .blog .entry-summary, .archive .entry-summary { padding: 0 20px; }
  .marca-texto { font-size: 25px; }
  .single .post-image { margin-bottom: 26px; }
  .single .post-image img { border-radius: 8px; }
}

/* ============================================================
   Rejilla de dos columnas en los listados
   ============================================================
   Con una sola columna a 900px quedaba media pantalla vacía en escritorio.
   En el artículo se mantiene una columna estrecha, porque ahí lo que importa
   es la comodidad de lectura, no llenar el ancho. */

@media (min-width: 900px) {
  .blog .site-main > .post,
  .archive .site-main > .post { margin-bottom: 0; }

  .blog .site-main,
  .archive .site-main,
  .search .site-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
    background: transparent;
    border: 0;
    padding: 0;
  }
  /* La paginación y la cabecera de categoría ocupan la fila entera */
  .blog .site-main > .paging-navigation,
  .archive .site-main > .paging-navigation,
  .archive .site-main > .page-header { grid-column: 1 / -1; }

  /* El artículo suelto sigue en una columna cómoda de leer */
  .single .site-main { display: block; max-width: 860px; margin: 0 auto; }
}

/* La portada, en proporción constante */
.blog .post-image img, .archive .post-image img, .search .post-image img {
  aspect-ratio: 1200 / 630; object-fit: cover;
}

/* Imagen arriba y título debajo: es el orden que espera cualquiera que haya
   visto una tarjeta de noticias. Al revés se leía raro. */
.blog article.post, .archive article.post { display: flex; flex-direction: column; }
.blog article.post .post-image, .archive article.post .post-image { order: -1; }

/* ============================================================
   Ancho
   ============================================================
   GeneratePress guarda su CSS en caché y no lo rehace al cambiar la opción
   por código. Este respaldo asegura el ancho pase lo que pase con esa caché. */

@media (min-width: 1200px) {
  .grid-container { max-width: 1320px; }
}

/* En pantallas grandes, tres columnas: con dos, las tarjetas quedaban
   demasiado altas y sobraba espacio a los lados. */
@media (min-width: 1400px) {
  .blog .site-main, .archive .site-main, .search .site-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Crédito de la foto */
.credito-foto {
  font-size: 13px; color: var(--tinta-suave); margin: -22px 0 30px;
}
.credito-foto a { color: var(--tinta-suave); text-decoration: underline; }
.credito-foto a:hover { color: var(--acento); }

/* Bloque de anuncio: separado del contenido para que no se confunda con él */
.bloque-anuncio {
  margin: 34px 0 6px; padding-top: 20px;
  border-top: 1px solid var(--linea);
  min-height: 100px;
}

/* Pie */
.pie-enlaces { margin-bottom: 8px; }
.pie-enlaces a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.pie-enlaces a:hover { color: var(--acento); text-decoration: underline; }
.pie-aviso { font-size: 13px; opacity: .75; margin: 0; }

/* Páginas legales: columna estrecha, más cómoda de leer */
.page .site-main {
  background: var(--papel); border: 1px solid var(--linea);
  border-top: 5px solid var(--acento); border-radius: 14px;
  padding: 44px 54px; max-width: 820px; margin: 0 auto;
}
.page .entry-title { font-size: 34px; line-height: 1.2; margin-bottom: 24px; letter-spacing: -.8px; }
.page .entry-content h2 { font-size: 23px; margin: 36px 0 12px; padding-top: 12px;
  border-top: 2px solid var(--acento-claro); }
@media (max-width: 768px) {
  .page .site-main { padding: 26px 20px; border-radius: 0; border-left: 0; border-right: 0; }
  .page .entry-title { font-size: 27px; }
}