/* ============================================================
   ARTÍCULO — Estilos de las páginas del blog.

   Va en un archivo aparte, no dentro de styles.css, para que
   nada de lo que se toque acá pueda afectar a la portada.

   Se carga DESPUÉS de styles.css, así que reutiliza todo lo
   que ya existe (barra, pie, botones, colores) y solo agrega
   lo propio de un texto largo.
   ============================================================ */


/* --- ANCHO DE LECTURA ---------------------------------------
   Un texto largo no se lee bien a todo el ancho de la pantalla:
   el ojo se pierde al saltar de una línea a la siguiente. Se
   limita a unos 68 caracteres, que es el largo cómodo.        */

/* El ancho y el tamaño de letra se suben JUNTOS, a propósito.
   Lo que cansa al leer no son los píxeles sino la cantidad de
   caracteres por línea: pasada cierta cantidad, el ojo pierde
   el comienzo de la línea siguiente. Al agrandar la letra, en
   la misma caja entran menos caracteres, así que se puede
   aprovechar el ancho de la pantalla sin perder legibilidad. */
.articulo {
  max-width: 1040px;
  margin-inline: auto;
  padding-block: var(--esp-12) var(--esp-24);
}

/* IMPORTANTE: styles.css le pone a TODO párrafo un tope de 65 caracteres
   (`p { max-width: 65ch }`). En la portada eso está bien, pero en el blog
   dejaba los párrafos cortos por más ancha que fuera la caja del artículo.
   Acá se libera: quien controla el ancho de lectura es el contenedor
   `.articulo`, no cada párrafo por separado. */
.articulo p,
.articulo li,
.listado p,
.listado li {
  max-width: none;
}


/* --- MIGAS DE PAN -------------------------------------------
   La línea "Inicio › Blog › ..." de arriba. Sirve para volver,
   y Google la usa para entender dónde está la página.          */

.migas {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin-bottom: var(--esp-6);
}
.migas a { color: var(--color-texto-sec); }
.migas a:hover { color: var(--color-texto); }
.migas span { margin-inline: var(--esp-2); opacity: .5; }


/* --- CABECERA DEL ARTÍCULO ---------------------------------- */

.articulo__cabecera {
  padding-bottom: var(--esp-8);
  margin-bottom: var(--esp-8);
  border-bottom: 1px solid var(--color-borde);
}

.articulo__titulo {
  font-size: var(--texto-2xl);
  line-height: 1.2;
  margin: 0 0 var(--esp-4);
}

/* El párrafo de entrada, más grande que el resto: resume el
   artículo completo para quien no va a leerlo entero. */
.articulo__bajada {
  font-size: var(--texto-lg);
  color: var(--color-texto-sec);
  margin: 0 0 var(--esp-6);
}

.articulo__meta {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  margin: 0;
}
.articulo__meta strong { color: var(--color-texto); font-weight: 600; }


/* --- CUERPO DEL TEXTO --------------------------------------- */

.articulo__cuerpo { font-size: var(--texto-base); line-height: 1.75; }

.articulo__cuerpo h2 {
  font-size: var(--texto-xl);
  line-height: 1.25;
  margin: var(--esp-16) 0 var(--esp-4);
}
.articulo__cuerpo h2:first-child { margin-top: 0; }

.articulo__cuerpo h3 {
  font-size: var(--texto-lg);
  margin: var(--esp-8) 0 var(--esp-3);
}

.articulo__cuerpo p  { margin: 0 0 var(--esp-4); }
.articulo__cuerpo ul,
.articulo__cuerpo ol { margin: 0 0 var(--esp-4); padding-left: var(--esp-6); }
.articulo__cuerpo li { margin-bottom: var(--esp-2); }

/* Los números de la lista de pasos, con algo más de aire para
   que se lean como una secuencia y no como un párrafo cortado. */
.articulo__pasos li { margin-bottom: var(--esp-4); }


/* --- DIAGRAMAS ----------------------------------------------
   Ilustraciones propias en SVG. Se estiran al ancho del texto y
   nunca desbordan la página. El pie explica qué muestra, para
   quien mira la imagen antes de leer.                          */

.diagrama {
  margin: 0 0 var(--esp-8);
}

.diagrama svg {
  display: block;
  width: 100%;
  height: auto;
}

.diagrama figcaption {
  margin-top: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  text-align: left;
  hyphens: manual;
}


/* --- ÍNDICE DE CONTENIDOS -----------------------------------
   Va al principio de los artículos largos. Quien llega desde
   Google buscando una cosa puntual salta directo y no se va.
   Caja discreta: tiene que leerse como un atajo, no competir
   con el texto.                                                */

.articulo__indice {
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--esp-6);
  margin: 0 0 var(--esp-8);
}

.articulo__indice p {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-sm);
}

.articulo__indice ul {
  margin: 0;
  padding-left: var(--esp-4);
  list-style: none;
}

.articulo__indice li {
  margin-bottom: var(--esp-2);
  font-size: var(--texto-sm);
}

.articulo__indice li::before {
  content: "→";
  color: var(--color-acento);
  margin-right: var(--esp-2);
}

.articulo__indice a {
  color: var(--color-texto-sec);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.articulo__indice a:hover {
  color: var(--color-acento);
  border-bottom-color: var(--color-acento);
}


/* --- TABLAS -------------------------------------------------
   Las tablas de porcentajes son lo más consultado del artículo.
   En un celular no caben, así que cada una se mete en una caja
   que se desplaza sola de lado. La PÁGINA nunca se mueve en
   horizontal: solo la tabla, dentro de su propio marco.        */

.tabla-scroll {
  overflow-x: auto;
  margin: 0 0 var(--esp-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  -webkit-overflow-scrolling: touch;
}

.tabla-scroll table {
  width: 100%;
  min-width: 480px;      /* bajo esto, se desplaza en vez de apretarse */
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabla-scroll th,
.tabla-scroll td {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-scroll thead th {
  background: var(--color-fondo-alt);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  white-space: nowrap;
}

.tabla-scroll tbody tr:last-child td { border-bottom: 0; }

/* La fila del total, que es la que la gente viene a buscar. */
.tabla-scroll tr.destacada td {
  background: #F6E6D6;
  font-weight: 600;
}


/* --- BLOQUE DESTACADO ---------------------------------------
   Para el dato clave del artículo. Uno solo por texto: si se
   destaca todo, no se destaca nada.                            */

.destacado-dato {
  margin: var(--esp-8) 0;
  padding: var(--esp-6);
  background: var(--color-fondo-alt);
  border-left: 3px solid var(--color-acento);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
}
.destacado-dato p:last-child { margin-bottom: 0; }


/* --- PREGUNTAS FRECUENTES ----------------------------------- */

.articulo__faq h3 {
  font-size: var(--texto-base);
  font-weight: 600;
  margin-bottom: var(--esp-2);
}


/* --- CIERRE CON INVITACIÓN ---------------------------------- */

.articulo__cta {
  margin-top: var(--esp-16);
  padding: var(--esp-8);
  background: var(--color-superficie);
  border-radius: var(--radio-lg);
  color: #D5D9CE;
}
.articulo__cta h2 { color: #FFFFFF; margin: 0 0 var(--esp-4); font-size: var(--texto-xl); }
.articulo__cta p  { margin-bottom: var(--esp-4); }
.articulo__cta p:last-of-type { margin-bottom: var(--esp-6); }
.articulo__cta strong { color: #FFFFFF; }


/* --- FUENTES Y AVISO LEGAL ---------------------------------- */

.articulo__fuentes {
  margin-top: var(--esp-16);
  padding-top: var(--esp-8);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}
.articulo__fuentes h2 { font-size: var(--texto-base); margin-bottom: var(--esp-4); }
.articulo__fuentes li { margin-bottom: var(--esp-2); }

.articulo__aviso {
  margin-top: var(--esp-8);
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  font-style: italic;
}


/* ============================================================
   LISTADO DEL BLOG — la página /blog/
   ============================================================ */

.listado {
  max-width: 1040px;
  margin-inline: auto;
  padding-block: var(--esp-12) var(--esp-24);
}

.listado__cabecera {
  padding-bottom: var(--esp-8);
  margin-bottom: var(--esp-8);
  border-bottom: 1px solid var(--color-borde);
}
.listado__cabecera h1 { font-size: var(--texto-2xl); margin: 0 0 var(--esp-4); }

.listado__grilla { display: grid; gap: var(--esp-8); }

.tarjeta-post {
  padding-bottom: var(--esp-8);
  border-bottom: 1px solid var(--color-borde);
}
.tarjeta-post:last-child { border-bottom: 0; padding-bottom: 0; }

.tarjeta-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}

.tarjeta-post__titulo {
  font-size: var(--texto-xl);
  line-height: 1.25;
  margin: 0 0 var(--esp-3);
}
/* El título es el enlace: es el área más fácil de apuntar, sobre todo
   en un celular. Se pinta como texto normal y solo se subraya al pasar. */
.tarjeta-post__titulo a { color: var(--color-texto); text-decoration: none; }
.tarjeta-post__titulo a:hover { color: var(--color-acento-oscuro); text-decoration: underline; }

.tarjeta-post__resumen {
  margin: 0 0 var(--esp-4);
  color: var(--color-texto-sec);
}

/* Sin el color explícito, el navegador lo pinta con su azul de fábrica,
   que no es de la marca. */
.tarjeta-post__enlace { margin: 0; font-weight: 600; }
.tarjeta-post__enlace a { color: var(--color-acento-oscuro); text-decoration: none; }
.tarjeta-post__enlace a:hover { text-decoration: underline; }


/* --- ENLACES DENTRO DEL TEXTO -------------------------------
   Sin color propio el navegador los pinta con su azul de fábrica
   —y en morado los ya visitados—, que sobre el papel crema se lee
   como un error de la página. Pasaba en las cinco páginas de
   contenido: había regla para el pie, para las migas y para las
   tarjetas, pero no para un enlace suelto dentro de un párrafo.

   Terracota con subrayado fino y separado: tiene que verse que es
   un enlace sin gritar en medio de la lectura. Al pasar el mouse
   el subrayado se hace del mismo color que el texto.

   Los botones quedan fuera con :not(.boton) —ya tienen su forma de
   píldora— y las dos zonas que sí tienen diseño propio (el índice
   de contenidos y el "Ver el detalle" de las áreas) se reafirman
   más abajo, porque este selector les gana por especificidad.    */

.articulo__cuerpo a:not(.boton),
.listado__cabecera a:not(.boton) {
  color: var(--color-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(180, 80, 58, .4);
}

.articulo__cuerpo a:not(.boton):hover,
.articulo__cuerpo a:not(.boton):focus-visible,
.listado__cabecera a:not(.boton):hover {
  color: var(--color-acento-oscuro);
  text-decoration-color: currentColor;
}

/* Las dos excepciones: se ven distintas a propósito. */
.articulo__cuerpo .articulo__indice a {
  color: var(--color-texto-sec);
  text-decoration: none;
}
.articulo__cuerpo .articulo__indice a:hover {
  color: var(--color-acento);
}
.articulo__cuerpo .area p a { text-decoration: none; }
.articulo__cuerpo .area p a:hover { text-decoration: underline; }


@media (min-width: 768px) {
  .articulo { padding-block: var(--esp-16) var(--esp-24); }
  .articulo__cuerpo { font-size: var(--texto-lg); }
  .tabla-scroll table { font-size: var(--texto-base); }
  .listado { padding-block: var(--esp-16) var(--esp-24); }
}

/* En pantallas grandes la letra crece un punto más. Es lo que permite
   usar los 1040px de ancho sin que las líneas queden interminables. */
@media (min-width: 1100px) {
  .articulo__cuerpo { font-size: 1.25rem; line-height: 1.7; }
  .articulo__bajada { font-size: 1.35rem; }
  .articulo__cuerpo h2 { margin-top: var(--esp-16); }
  .tabla-scroll table { font-size: var(--texto-lg); }
  .tarjeta-post__resumen { font-size: var(--texto-lg); }
}