/* ==========================================================================
   juliohigidio.com — Hoja de estilos única.

   SISTEMA VISUAL
   Una sola marca paraguas (Julio Higidio) con cinco mundos de contenido.
   El azul petróleo #172B3A es la identidad; cada categoría aporta un código
   cromático secundario que nunca compite con ella.

   Proporción buscada en pantalla:
     80–90 %  blanco y neutros
      5–10 %  color de la categoría
      2–5 %   color de acento

   Se conserva del sistema editorial anterior todo lo que no es color:
   la escala tipográfica con tracking -0.025em, el ritmo vertical de 96–112px,
   los dos únicos radios (12px tarjetas e imágenes, 8px botones) y la ausencia
   total de sombras.

   Es un solo archivo a propósito: el sitio debe funcionar abriendo cualquier
   .html con doble clic (file://), sin servidor, sin build y sin @import.

   ÍNDICE
     1. Tokens: marca, neutros y categorías
     2. Asignación de categoría
     3. Reset
     4. Elementos base
     5. Layout
     6. Cabecera y navegación
     7. Componentes
     8. Pie
     9. Utilidades
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {

  /* --- MARCA ------------------------------------------------------------ */
  --marca-primario: #172B3A;
  --marca-primario-hover: #0F1D28;   /* derivado: #172B3A oscurecido */
  --marca-primario-suave: #E7EAED;   /* derivado: para fondos y bordes de marca */

  /* --- NEUTROS ---------------------------------------------------------- */
  --color-texto: #111827;            /* 17,74:1 sobre blanco */
  --color-texto-suave: #374151;      /* 10,31:1 sobre blanco */
  --color-fondo: #FFFFFF;
  --color-fondo-suave: #F7F8FA;

  --color-borde: #E5E7EB;            /* filete estructural */
  --color-borde-fuerte: #D1D5DB;     /* filete de énfasis */

  /* Texto sobre un relleno de color (botones, superposiciones). */
  --color-sobre-color: #FFFFFF;
  /* Error de formulario. Es un color de ESTADO, no de marca ni de categoría. */
  --color-error: #B3261E;

  /* Estado en vivo de la cabecera. Es un color de ESTADO reservado, no un
     color de marca ni de categoría: por eso no coincide con ninguno. */
  --color-estado-activo: #16A34A;

  /* --- CATEGORÍAS -------------------------------------------------------
     Tres valores por categoría: principal, fondo suave y acento.
     La variante `-texto` existe solo donde el color principal no alcanza
     4,5:1 como texto; se documenta en el bloque de cada categoría.        */

  /* Familia & Relaciones — terracota */
  --categoria-familia: #B85C5C;
  --categoria-familia-suave: #F3E4DE;
  --categoria-familia-acento: #D89A8C;
  --categoria-familia-texto: #A05050;   /* ajuste AA: el original da 4,45:1 */
  --categoria-familia-hover: #8C4646;   /* más oscuro que -texto: el hover debe notarse */

  /* Tecnología — azul */
  --categoria-tecnologia: #2563EB;
  --categoria-tecnologia-suave: #E8F0FE;
  --categoria-tecnologia-acento: #60A5FA;
  --categoria-tecnologia-texto: #2563EB;   /* 5,17:1 — sirve tal cual */
  --categoria-tecnologia-hover: #2157CF;

  /* Inteligencia Artificial — violeta */
  --categoria-ia: #7C3AED;
  --categoria-ia-suave: #F0E9FF;
  --categoria-ia-acento: #A78BFA;
  --categoria-ia-texto: #7C3AED;           /* 5,70:1 — sirve tal cual */
  --categoria-ia-hover: #6D33D1;

  /* Productividad — ámbar */
  --categoria-productividad: #D97706;
  --categoria-productividad-suave: #FFF3DD;
  --categoria-productividad-acento: #F59E0B;
  --categoria-productividad-texto: #A75C05; /* ajuste AA: el original da 3,19:1 */
  --categoria-productividad-hover: #8A4B04; /* más oscuro que -texto: el hover debe notarse */

  /* Voice Talent — verde petróleo */
  --categoria-voice: #0F766E;
  --categoria-voice-suave: #E3F4F1;
  --categoria-voice-acento: #2DD4BF;
  --categoria-voice-texto: #0F766E;        /* 5,47:1 — sirve tal cual */
  --categoria-voice-hover: #0D6861;

  /* --- CATEGORÍA ACTIVA -------------------------------------------------
     Los componentes leen SIEMPRE estos cuatro tokens, nunca un color con
     nombre. Por defecto valen marca: una página sin categoría sale en azul
     petróleo sin ninguna regla extra.                                     */
  --cat-color: var(--marca-primario);
  --cat-suave: var(--color-fondo-suave);
  --cat-acento: var(--marca-primario);
  --cat-texto: var(--marca-primario);
  --cat-hover: var(--marca-primario-hover);

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --text-caption: 0.875rem;
  --text-body: 1rem;
  --text-subheading: 1.25rem;
  --text-heading: clamp(1.5rem, 1.15rem + 1.6vw, 1.875rem);
  --text-heading-lg: clamp(2rem, 1.3rem + 3vw, 3rem);
  --text-display: clamp(2.5rem, 1rem + 6.6vw, 5.5rem);
  --text-display-xl: clamp(2.75rem, 1rem + 7.4vw, 6rem);

  --leading-caption: 1.43;
  --leading-body: 1.5;
  --leading-subheading: 1.4;
  --leading-heading: 1.2;
  --leading-display: 1;

  --tracking: -0.025em;

  /* --- Espaciado (base 8px) --------------------------------------------- */
  --spacing-8: 0.5rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-96: 6rem;
  --spacing-112: 7rem;
  --spacing-176: 11rem;

  /* --- Layout ----------------------------------------------------------- */
  --ancho-pagina: 1200px;
  --ancho-lectura: 68ch;

  --radio-tarjeta: 12px;
  --radio-boton: 8px;
  --radio-etiqueta: 9999px;

  --hairline: 1px solid var(--color-borde);
  --transicion: 160ms ease;
}


/* ==========================================================================
   2. ASIGNACIÓN DE CATEGORÍA

   Un solo punto de enganche para todo el sistema. Se puede poner en el
   <body> (página entera de categoría) o en un elemento suelto (una tarjeta
   dentro de la portada, donde conviven las cinco).

   Se aceptan tres formas equivalentes, para no tener que tocar el HTML ya
   escrito, que usaba data-marca:
       <body data-categoria="familia">
       <body data-marca="familia">
       <article class="categoria-familia">
   ========================================================================== */

[data-categoria="familia"],
[data-marca="familia"],
.categoria-familia {
  --cat-color: var(--categoria-familia);
  --cat-suave: var(--categoria-familia-suave);
  --cat-acento: var(--categoria-familia-acento);
  --cat-texto: var(--categoria-familia-texto);
  --cat-hover: var(--categoria-familia-hover);
}

[data-categoria="tecnologia"],
[data-marca="tecnologia"],
.categoria-tecnologia {
  --cat-color: var(--categoria-tecnologia);
  --cat-suave: var(--categoria-tecnologia-suave);
  --cat-acento: var(--categoria-tecnologia-acento);
  --cat-texto: var(--categoria-tecnologia-texto);
  --cat-hover: var(--categoria-tecnologia-hover);
}

[data-categoria="inteligencia-artificial"],
[data-marca="inteligencia-artificial"],
.categoria-ia {
  --cat-color: var(--categoria-ia);
  --cat-suave: var(--categoria-ia-suave);
  --cat-acento: var(--categoria-ia-acento);
  --cat-texto: var(--categoria-ia-texto);
  --cat-hover: var(--categoria-ia-hover);
}

[data-categoria="productividad"],
[data-marca="productividad"],
.categoria-productividad {
  --cat-color: var(--categoria-productividad);
  --cat-suave: var(--categoria-productividad-suave);
  --cat-acento: var(--categoria-productividad-acento);
  --cat-texto: var(--categoria-productividad-texto);
  --cat-hover: var(--categoria-productividad-hover);
}

[data-categoria="voice-talent"],
[data-marca="voice-talent"],
.categoria-voice {
  --cat-color: var(--categoria-voice);
  --cat-suave: var(--categoria-voice-suave);
  --cat-acento: var(--categoria-voice-acento);
  --cat-texto: var(--categoria-voice-texto);
  --cat-hover: var(--categoria-voice-hover);
}


/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* El foco toma el color de la categoría activa: es señal de interacción,
   y fuera de una categoría vuelve al azul de marca. */
:focus-visible {
  outline: 2px solid var(--cat-color);
  outline-offset: 3px;
}

[hidden] { display: none !important; }


/* ==========================================================================
   4. ELEMENTOS BASE
   ========================================================================== */

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  letter-spacing: var(--tracking);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  font-weight: var(--peso-bold);
  line-height: var(--leading-display);
}

h2 {
  font-size: var(--text-heading-lg);
  font-weight: var(--peso-semi);
  line-height: var(--leading-heading);
}

h3 {
  font-size: var(--text-heading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-heading);
}

h4 {
  font-size: var(--text-subheading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-subheading);
}

p, li { text-wrap: pretty; }

/* Enlaces generales: azul petróleo de marca.
   Dentro de una categoría heredan su color a través de --cat-texto. */
a {
  color: var(--cat-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicion);
}
a:hover { color: var(--cat-hover); }

small {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

strong { font-weight: var(--peso-semi); }

blockquote {
  font-size: var(--text-heading);
  font-weight: var(--peso-regular);
  border-left: 3px solid var(--cat-color);
  padding-left: var(--spacing-24);
}

code, pre {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  letter-spacing: 0;
}

pre {
  background-color: var(--color-fondo-suave);
  border-radius: var(--radio-tarjeta);
  padding: var(--spacing-24);
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--spacing-64) 0;
}

figcaption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-texto-suave);
  margin-top: var(--spacing-16);
}

::selection {
  background-color: var(--marca-primario);
  color: var(--color-sobre-color);
}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.contenedor--estrecho { max-width: 800px; }
.contenedor--lectura { max-width: var(--ancho-lectura); }

.seccion { padding-block: var(--spacing-96); }
.seccion--compacta { padding-block: var(--spacing-64); }
.seccion--amplia { padding-block: var(--spacing-112); }
.seccion--suave { background-color: var(--color-fondo-suave); }

@media (max-width: 767px) {
  .seccion { padding-block: var(--spacing-64); }
  .seccion--amplia { padding-block: var(--spacing-64); }
}

.rejilla {
  display: grid;
  gap: var(--spacing-32);
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  gap: var(--spacing-64);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.pila > * + * { margin-top: var(--spacing-16); }
.pila-32 > * + * { margin-top: var(--spacing-32); }
.pila-48 > * + * { margin-top: var(--spacing-48); }

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}
.fila--separada { justify-content: space-between; }
.fila--centrada { justify-content: center; }


/* ==========================================================================
   6. CABECERA Y NAVEGACIÓN

   La cabecera es siempre de MARCA, nunca de categoría: es lo que mantiene
   reconocible a Julio Higidio dentro de los cinco mundos. Las categorías
   solo aparecen ahí como puntos de color de 8px.
   ========================================================================== */

.cabecera {
  background-color: var(--color-fondo);
  border-bottom: var(--hairline);
  padding-top: env(safe-area-inset-top, 0px);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
  min-height: 64px;
  padding-block: var(--spacing-16);
}

.marca {
  font-size: var(--text-body);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking);
  color: var(--marca-primario);
  text-decoration: none;
  white-space: nowrap;
}
.marca:hover { color: var(--marca-primario-hover); }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body);
  font-weight: var(--peso-medio);
  color: var(--marca-primario);
  text-decoration: none;
}
.nav a:hover { color: var(--marca-primario-hover); text-decoration: underline; }

/* Página actual: subrayada en el color de su categoría si la tiene. */
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--cat-color);
  text-decoration-thickness: 2px;
}

/* Punto de color que identifica una categoría en el menú. Nunca va solo:
   siempre acompaña al nombre escrito de la categoría. */
.punto-categoria {
  width: 8px;
  height: 8px;
  border-radius: var(--radio-etiqueta);
  background-color: var(--cat-color);
  flex-shrink: 0;
}

.estado {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-left: auto;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.punto-estado {
  width: 8px;
  height: 8px;
  border-radius: var(--radio-etiqueta);
  background-color: var(--color-estado-activo);
  flex-shrink: 0;
}

.nav-alternar { display: none; }

@media (max-width: 899px) {
  .cabecera__interior { flex-wrap: wrap; gap: var(--spacing-16); }
  .nav-alternar {
    display: block;
    order: 3;
    margin-left: auto;
    padding: var(--spacing-8);
    font-size: var(--text-subheading);
    color: var(--marca-primario);
  }
  .estado { order: 2; margin-left: auto; }
  .nav {
    order: 4;
    width: 100%;
    display: none;
    padding-bottom: var(--spacing-16);
  }
  .nav[data-abierto="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
}


/* ==========================================================================
   7. COMPONENTES
   ========================================================================== */

/* --- Hero -------------------------------------------------------------
   El fondo suave de la categoría tiñe solo la franja del encabezado, no la
   página entera. Sin categoría activa queda en blanco.                  */

.hero { padding-block: var(--spacing-112) var(--spacing-96); }

.hero--tenido {
  background-color: var(--cat-suave);
  border-bottom: var(--hairline);
}

.hero__titulo {
  font-size: var(--text-display-xl);
  font-weight: var(--peso-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking);
  max-width: 16ch;
}

.hero__entradilla {
  margin-top: var(--spacing-32);
  font-size: var(--text-subheading);
  font-weight: var(--peso-regular);
  line-height: var(--leading-subheading);
  color: var(--color-texto-suave);
  max-width: 52ch;
}

@media (max-width: 767px) {
  .hero { padding-block: var(--spacing-64); }
  .hero__titulo { max-width: none; }
}

/* --- Titular de sección --- */
.titulo-seccion {
  font-size: var(--text-heading-lg);
  font-weight: var(--peso-semi);
  line-height: var(--leading-heading);
  margin-bottom: 0;
}
.titulo-seccion + * { margin-top: var(--spacing-48); }

/* --- Botones -----------------------------------------------------------
   Por defecto azul petróleo de marca. Dentro de una categoría, el botón
   toma su color a través de --cat-color. Estados completos.             */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  background-color: var(--marca-primario);
  color: var(--color-sobre-color);
  font-size: var(--text-body);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking);
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.boton:hover { background-color: var(--marca-primario-hover); color: var(--color-sobre-color); }
.boton:active { background-color: var(--marca-primario-hover); transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--marca-primario); outline-offset: 3px; }
.boton[disabled],
.boton[aria-disabled="true"] {
  background-color: var(--color-borde);
  color: var(--color-texto-suave);
  cursor: not-allowed;
  pointer-events: none;
}

/* Botón propio de una categoría.
   Usa --cat-texto, no --cat-color: el relleno lleva texto blanco encima y
   necesita 4,5:1. Con los colores principales, Familia se queda en 4,45:1 y
   Productividad en 3,19:1. Con la variante de texto las cinco pasan
   (5,03:1 la más ajustada). En Tecnología, IA y Voice Talent ambos tokens
   valen lo mismo, así que allí no cambia nada. */
.boton--categoria {
  background-color: var(--cat-texto);
}
.boton--categoria:hover,
.boton--categoria:active { background-color: var(--cat-hover); }
.boton--categoria:focus-visible { outline-color: var(--cat-color); }

/* Botón de contorno, para la acción secundaria. */
.boton--linea {
  background-color: transparent;
  color: var(--marca-primario);
  border-color: var(--color-borde-fuerte);
}
.boton--linea:hover {
  background-color: var(--color-fondo-suave);
  color: var(--marca-primario);
  border-color: var(--marca-primario);
}
.boton--linea:focus-visible { outline-color: var(--marca-primario); }

.boton--bloque { width: 100%; }

/* --- Etiqueta de categoría (badge) -------------------------------------
   El identificador principal de una pieza de contenido. Texto en el color
   de la categoría sobre su fondo suave: ambos verificados por encima de
   4,5:1 en el bloque de tokens.                                         */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radio-etiqueta);
  background-color: var(--cat-suave);
  color: var(--cat-texto);
  font-size: var(--text-caption);
  font-weight: var(--peso-semi);
  line-height: 1;
  text-decoration: none;
}
.etiqueta:hover { color: var(--cat-hover); }

/* Variante mínima: solo un punto de color y el nombre. */
.etiqueta--punto {
  background-color: transparent;
  padding-inline: 0;
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
}
.etiqueta--punto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radio-etiqueta);
  background-color: var(--cat-color);
  flex-shrink: 0;
}

/* --- Tarjetas ----------------------------------------------------------
   Nunca se colorea la tarjeta entera: superficie blanca, filete neutro y
   una línea superior de 3px en el color de la categoría. El título y el
   cuerpo se mantienen neutros.                                          */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-32);
  border: var(--hairline);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  min-height: 200px;
  transition: border-color var(--transicion), transform var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-2px);
  border-color: var(--cat-color);
}

/* Línea superior de categoría. */
.tarjeta--marca,
.tarjeta--azul,
.tarjeta--menta,
.tarjeta--rubor,
.tarjeta[data-categoria],
.tarjeta[class*="categoria-"] {
  border-top: 3px solid var(--cat-color);
  padding-top: calc(var(--spacing-32) - 2px);
}

/* Variante de fondo suave, para destacar una tarjeta concreta. */
.tarjeta--destacada {
  background-color: var(--cat-suave);
  border-color: transparent;
  border-top: 3px solid var(--cat-color);
}

.tarjeta__titulo {
  font-size: var(--text-subheading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-subheading);
  color: var(--color-texto);
}
.tarjeta__titulo a { text-decoration: none; color: inherit; }
.tarjeta__titulo a:hover { color: var(--cat-texto); }

.tarjeta__texto {
  font-size: var(--text-body);
  color: var(--color-texto-suave);
}

/* El icono sí toma el color de su categoría. */
.tarjeta__icono {
  margin-top: auto;
  margin-left: auto;
  width: 24px;
  height: 24px;
  color: var(--cat-color);
}

.tarjeta__pie { margin-top: auto; }

/* --- Tarjeta con imagen a sangre --- */
.tarjeta-imagen {
  position: relative;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.tarjeta-imagen img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.tarjeta-imagen__texto {
  position: absolute;
  top: var(--spacing-24);
  left: var(--spacing-24);
  right: var(--spacing-24);
  color: var(--color-sobre-color);
}
.tarjeta-imagen__titulo {
  font-size: var(--text-subheading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-subheading);
}
.tarjeta-imagen__credito {
  font-size: var(--text-caption);
  font-weight: var(--peso-regular);
  line-height: var(--leading-caption);
}

/* --- Tarjeta de producto --- */
.tarjeta-producto { display: flex; flex-direction: column; gap: var(--spacing-16); }
.tarjeta-producto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
  border: var(--hairline);
}

/* --- Entrada de blog en lista ------------------------------------------
   Identidad por etiqueta y por una barra lateral fina, no por fondo.    */
.entrada-lista {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-32) var(--spacing-24);
  border-bottom: var(--hairline);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.entrada-lista:first-of-type { border-top: var(--hairline); }
.entrada-lista:hover {
  border-left-color: var(--cat-color);
  background-color: var(--color-fondo-suave);
}
.entrada-lista__cuerpo { flex: 1; min-width: 0; }
.entrada-lista__titulo {
  display: block;
  font-size: var(--text-subheading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-subheading);
  color: var(--color-texto);
}
.entrada-lista__meta {
  display: block;
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-texto-suave);
}
.entrada-lista__media {
  width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
  flex-shrink: 0;
}
@media (max-width: 599px) {
  .entrada-lista { gap: var(--spacing-16); }
  .entrada-lista__media { width: 80px; }
}

/* --- Cifras --------------------------------------------------------------
   Cifras proporcionales a propósito: `tabular-nums` iguala el ancho de cada
   dígito al del cero y a 48px deja los números sueltos.                   */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-32);
}
.cifras__dato {
  display: block;
  font-size: var(--text-heading-lg);
  font-weight: var(--peso-semi);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking);
  color: var(--cat-color);
}
.cifras__etiqueta {
  display: block;
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-texto-suave);
}

/* --- Cita destacada --- */
.cita-destacada {
  font-size: var(--text-heading-lg);
  font-weight: var(--peso-semi);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking);
  max-width: 20ch;
}
.cita-destacada em {
  font-style: italic;
  font-weight: var(--peso-regular);
  color: var(--cat-texto);
}

/* --- Precio --- */
.precio {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-16);
}
.precio__actual {
  font-size: var(--text-heading-lg);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking);
}
.precio__anterior {
  font-size: var(--text-subheading);
  text-decoration: line-through;
  color: var(--color-texto-suave);
}

/* --- Lista con filete --- */
.lista-filete {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-filete li {
  padding-block: var(--spacing-24);
  border-bottom: var(--hairline);
}
.lista-filete li:first-child { border-top: var(--hairline); }

/* --- Testimonio --- */
.testimonio__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
  filter: grayscale(1);
}
.testimonio__comilla {
  font-size: var(--text-heading-lg);
  line-height: 1;
  margin-bottom: var(--spacing-16);
  color: var(--cat-acento);
}
.testimonio__cita {
  font-size: var(--text-heading);
  font-weight: var(--peso-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking);
  border: 0;
  padding: 0;
}
.testimonio__autor {
  margin-top: var(--spacing-32);
  font-size: var(--text-body);
  font-weight: var(--peso-semi);
}

/* --- Retrato de autor --- */
.foto-perfil {
  width: 100%;
  border-radius: var(--radio-tarjeta);
}

.bio__rol {
  font-size: var(--text-subheading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-subheading);
}

/* --- FAQ --- */
.faq details {
  border-bottom: var(--hairline);
  padding-block: var(--spacing-24);
}
.faq details:first-of-type { border-top: var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-subheading);
  font-weight: var(--peso-semi);
  line-height: var(--leading-subheading);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-16);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: var(--peso-regular); color: var(--cat-color); }
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) {
  margin-top: var(--spacing-16);
  color: var(--color-texto-suave);
  max-width: var(--ancho-lectura);
}

/* --- Formularios --- */
.campo { display: flex; flex-direction: column; gap: var(--spacing-8); }
.campo label {
  font-size: var(--text-caption);
  font-weight: var(--peso-semi);
  line-height: var(--leading-caption);
}
.campo input,
.campo textarea,
.campo select {
  padding: var(--spacing-16);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-boton);
  background-color: var(--color-fondo);
  letter-spacing: var(--tracking);
  transition: border-color var(--transicion);
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus { border-color: var(--cat-color); }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--color-texto-suave); }
.campo__ayuda,
.campo__error {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-texto-suave);
}
.campo__error:not(:empty) { color: var(--color-error); font-weight: var(--peso-semi); }
.campo [aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }

.suscripcion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  align-items: flex-start;
}
.suscripcion .campo { flex: 1 1 260px; }

/* --- Migas de pan --- */
.migas {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-texto-suave);
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  list-style: none;
  padding: 0;
  margin: 0;
}
.migas li + li::before { content: "/"; margin-right: var(--spacing-8); }
.migas a { color: var(--color-texto-suave); }
.migas a:hover { color: var(--cat-texto); }

/* --- Artículo --- */
.articulo { max-width: var(--ancho-lectura); }
.articulo > * + * { margin-top: var(--spacing-24); }
.articulo h2 {
  font-size: var(--text-heading);
  margin-top: var(--spacing-64);
}
.articulo h3 { font-size: var(--text-subheading); margin-top: var(--spacing-48); }
.articulo img { border-radius: var(--radio-tarjeta); }
.articulo ul, .articulo ol { padding-left: var(--spacing-24); }

/* --- Bloque destacado dentro de un artículo --- */
.bloque-destacado {
  padding: var(--spacing-32);
  border-radius: var(--radio-tarjeta);
  background-color: var(--cat-suave);
  border-left: 3px solid var(--cat-color);
}
.bloque-destacado > * + * { margin-top: var(--spacing-16); }

/* --- Aviso de cookies --- */
.aviso-cookies {
  position: fixed;
  left: var(--spacing-16);
  right: var(--spacing-16);
  bottom: calc(var(--spacing-16) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding: var(--spacing-24);
  border-radius: var(--radio-tarjeta);
  background-color: var(--color-fondo);
  border: 1px solid var(--color-borde-fuerte);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.aviso-cookies p { flex: 1 1 240px; margin: 0; }
.aviso-cookies .boton { padding: var(--spacing-8) var(--spacing-16); }

.desbordable { overflow-x: auto; }


/* ==========================================================================
   8. PIE
   Siempre de marca, como la cabecera.
   ========================================================================== */

.pie {
  border-top: var(--hairline);
  margin-top: var(--spacing-96);
  padding-top: var(--spacing-96);
  padding-bottom: calc(var(--spacing-64) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-fondo-suave);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li + li { margin-top: var(--spacing-8); }
.pie a { color: var(--marca-primario); }
.pie a:hover { color: var(--marca-primario-hover); }
.pie__titulo {
  font-weight: var(--peso-semi);
  color: var(--marca-primario);
  margin-bottom: var(--spacing-16);
}
.pie__base {
  margin-top: var(--spacing-64);
  color: var(--color-texto-suave);
}


/* ==========================================================================
   9. UTILIDADES
   ========================================================================== */

.texto-suave { color: var(--color-texto-suave); }
.texto-centro { text-align: center; }
.texto-categoria { color: var(--cat-texto); }
.centrado { margin-inline: auto; }
.sin-margen { margin: 0; }
.mt-16 { margin-top: var(--spacing-16); }
.mt-32 { margin-top: var(--spacing-32); }
.mt-48 { margin-top: var(--spacing-48); }
.mt-64 { margin-top: var(--spacing-64); }

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: var(--spacing-16);
  top: var(--spacing-16);
  z-index: 100;
  background-color: var(--color-fondo);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radio-boton);
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}