/* ==========================================================================
   base.css — reset, capas fijas, estructura de bloques, cabecera y pie
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:var(--base); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--tierra-sombra);
  color:var(--hueso);
  font-family:var(--cuerpo);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,figure,dl,dd{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
canvas{ display:block; }
:focus-visible{ outline:1.5px solid var(--espiga); outline-offset:4px; }
.oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ── capas fijas de fondo ─────────────────────────────── */
#escena{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }
.respaldo{
  position:fixed; inset:0; z-index:0; display:none;
  background:linear-gradient(180deg,#2A1C0C 0%,#15110A 46%,var(--tierra-profunda) 100%);
}
.sin-3d .respaldo{ display:block; }
.sin-3d #escena{ display:none; }

.subsuelo{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,
    rgba(10,8,6,0) 0%, rgba(10,8,6,.66) 38%, rgba(6,5,3,.94) 100%);
}
.vineta{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 46%, transparent 48%, rgba(0,0,0,.62) 100%);
}
.grano{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── cabecera ─────────────────────────────────────────── */
.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1rem var(--pad-x);
  background:rgba(18,16,10,.58);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.marca{ display:inline-flex; align-items:center; gap:.65rem; }
.enso{ width:20px; height:20px; flex:0 0 auto; }
.marca-n{ font-family:var(--display); font-size:var(--fs-md); letter-spacing:.03em; font-weight:500; }
.menu{ display:flex; gap:1.7rem; align-items:center; }
.menu a{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-70);
  transition:color .45s var(--ease-ui);
}
.menu a:hover,.menu a:focus-visible{ color:var(--hueso); }

/* La página actual, 17 oct 2026 (D09). Sustituye a la entrada destacada del
   24 sep 2026, que marcaba «IA» en todas las páginas y hacía creer al lector
   que estaba en ella: ninguna entrada se resalta por diseño. La marca la pone
   la cabecera desde la ruta —aria-current="page"—, y es un estado, no un
   acento: el texto sube a --hueso y no pasa a dorado; el filete inferior en
   --espiga dice dónde estás. La marca de sección —aria-current="true", el
   padre de la página actual en el menú— solo sube el texto. */
/* Solo el primer nivel: los enlaces del panel del desplegable también cuelgan
   de .menu, y en una lista vertical el filete se leería como separador. */
.menu > a[aria-current="page"],
.menu .desplegable-cab[aria-current="page"]{
  color:var(--hueso);
  border-bottom:1px solid var(--espiga);
  padding-bottom:.25rem;
}
.menu > a[aria-current="true"],
.menu .desplegable-cab[aria-current="true"]{ color:var(--hueso); }
/* El menú sube de --hueso-52 a --hueso-70 el 24 sep 2026. Un menú principal
   no es metadato: es la navegación del sitio y su contraste tiene que
   corresponder a ese papel. A --hueso-52 se leía como un pie de foto. */
@media (max-width:1080px){
  .menu{ display:none; }
  /* Sin el menú, la cabecera son tres piezas y el hueco de 2rem entre ellas
     sobra: la fila es marca, hamburguesa y CTA. */
  .cabecera{ gap:1rem; }
}

/* DESBORDAMIENTO HORIZONTAL EN MÓVIL, corregido el 23 sep 2026.
   Medido: a 390px de ancho el documento pedía 482px, 92 de más, y se podía
   arrastrar la página de lado. La causa es la fila de la cabecera: el CTA
   lleva `white-space:nowrap` y con versalita y letter-spacing mide cerca de
   190px, que con la marca (~120), la hamburguesa (44), dos huecos y el
   relleno lateral no caben por debajo de unos 500px.

   El CTA se retira de la cabecera en pantalla estrecha y vive en el panel
   móvil, que es donde está el resto de la navegación. No desaparece: cambia
   de sitio. Se usa el corte de 560px, que es uno de los tres del sistema; no
   se añade ninguno nuevo. */
/* El CTA que baja al panel móvil. Secundario de forma, como el resto del
   panel: la cabecera nunca lleva primario, y el panel tampoco. */
.nav-movil .cta-movil{
  margin-top:1.2rem; padding:.7rem 0;
  border-top:1px solid var(--linea);
  color:var(--espiga); letter-spacing:.18em;
}

@media (max-width:560px){
  .cabecera > .btn{ display:none; }
  .cabecera{ gap:.75rem; }
  .marca-n{ font-size:var(--fs-body); }
}

/* ── indicadores fijos ────────────────────────────────── */
.contador{
  position:fixed; right:var(--pad-x); bottom:1.6rem; z-index:20;
  font-family:var(--etq); font-size:var(--fs-etq); letter-spacing:.2em;
  text-transform:uppercase; color:var(--hueso-30);
  opacity:0; transition:opacity .6s linear; pointer-events:none;
}
.pista{
  position:fixed; left:50%; bottom:1.6rem; z-index:20; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  pointer-events:none; transition:opacity .6s linear;
}
.pista-l{
  width:1px; height:34px;
  background:linear-gradient(180deg, transparent, var(--espiga));
}
@media (max-width:900px){ .contador{ display:none; } }

/* ── bloques ──────────────────────────────────────────── */
main{ position:relative; z-index:10; }
.bloque{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:7rem var(--pad-x) 6rem;
}
.bloque.der{ justify-content:flex-end; }
.bloque.centro{ justify-content:center; text-align:center; }
.caja{
  width:100%; max-width:40ch;
  text-shadow:0 2px 30px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.55);
}
.caja.ancha{ max-width:none; }
/* UN SOLO SISTEMA DE ANCHOS, 18 oct 2026 (D12, decisión de Ro). La caja ancha
   llevaba el tope de --ancho, 1.180px, y en un bloque centrado se quedaba en
   mitad de la pantalla: a 1440 arrancaba a 130px del borde mientras la
   cabecera arranca a 72. Ahora ocupa todo lo que hay entre los dos márgenes
   --pad-x del bloque, como la cabecera. */

/* ── página a --ancho ─────────────────────────────────────
   Contenedor de las páginas que no son un descenso narrativo. Las cinco del
   blog son las primeras del sitio. NO se usa .bloque aquí: impone la altura
   de la pantalla, que es lo que da ritmo a la home y lo que estorba en un
   listado. El padding superior deja pasar la cabecera fija. */
.pagina{
  position:relative; z-index:10;
  width:100%;
  padding:8rem var(--pad-x) 6rem;
}
/* Sin caja centrada de --ancho desde el 18 oct 2026 (D12): la página cuelga
   del margen --pad-x, como la cabecera. La medida de lectura la siguen dando
   sus piezas —entradilla, cuerpo—, no el contenedor. */
.bloque.centro .caja{ margin-inline:auto; }

/* ── tipografía de bloque ─────────────────────────────── */
.kicker{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.28em; color:var(--espiga);
}
.etq{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--hueso-30);
}
h1{
  font-family:var(--display); font-weight:300; font-size:var(--t-h1);
  line-height:1.02; letter-spacing:-.02em; margin:1.3rem 0 0; max-width:22ch;
}
h2{
  font-family:var(--display); font-weight:300; font-size:var(--t-h2);
  line-height:1.10; letter-spacing:-.015em; margin:.9rem 0 1rem; max-width:24ch;
}
.bloque.centro h2, .bloque.centro h1{ margin-inline:auto; }
h3{ font-family:var(--display); font-weight:400; font-size:var(--t-h3); line-height:1.24; }
em{ font-style:italic; color:var(--espiga-alta); }
.lead{
  font-size:var(--t-lead); line-height:1.78; color:var(--hueso-70);
  margin:1.5rem 0 2.1rem; max-width:44ch;
}
.lead.centrado{ margin-inline:auto; }
.body,.art-cuerpo p{ font-size:var(--t-body); line-height:1.76; color:var(--hueso-70); max-width:44ch; }
.bloque.centro .body{ margin-inline:auto; }

/* ── jerarquía de tres niveles ────────────────────────────
   18 oct 2026 (D12, decisión de Ro), en las páginas de bloques: menos texto
   corrido, más grande y fácil de escanear.
     · Nivel 1, el titular de sección: el h2 de siempre. No cambia.
     · Nivel 2, el subtítulo: la entradilla de cada bloque —el primer párrafo,
       que va como .lead— y los puntos de los síntomas.
     · Nivel 3: lo que sigue —párrafos de cuerpo, frase de cierre, frase de
       tarjeta, puntos de las vías y el nombre de cada cifra de las pruebas—.
   Va colgado de .bloque y no de la clase sola: el texto corrido se queda en
   el cuerpo del blog, en las legales y en las respuestas de las preguntas
   frecuentes, que viven fuera de un bloque o en piezas que esto no toca.
   Sustituye al escalón propio de la entrada del hero y a la subida a 68ch de
   las cajas de media pantalla. */
.bloque .lead,
.bloque .sintomas li{
  font-size:var(--t-sub); font-weight:400; line-height:1.42;
  color:var(--hueso-88); max-width:34ch;
}
.bloque.hero .lead{ max-width:40ch; }
.bloque .body,
.bloque .tarjeta p,
.bloque .puntos li,
.bloque .pruebas li{
  font-size:var(--t-n3); font-weight:400; line-height:1.5;
  color:var(--hueso-72); max-width:44ch;
}
/* La frase de cierre de bloque NO es nivel 3: va en display cursiva, como en
   la maqueta aprobada. Ajuste de Ro del 18 oct 2026 tras revisar la fase A.
   No es el mantra ni cuenta para su límite de uno por página: es una
   variante tipográfica de .cierre-b. Su tema claro, en estratos.css. */
.bloque .cierre-b{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:var(--t-cierre); line-height:1.3; letter-spacing:.01em;
  color:var(--espiga-alta); max-width:32ch;
}
/* El párrafo de nivel 3 que cierra el texto antes de los botones —el hero y
   la puerta, desde que su entrada se parte en dos— recoge la separación que
   antes ponía la entrada. */
.bloque .body + .ctas,
.bloque .body + .btn{ margin-top:2.1rem; }

/* ── pie ──────────────────────────────────────────────── */
.pie{
  position:relative; z-index:10;
  border-top:1px solid var(--linea);
  background:rgba(10,8,6,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:3.5rem var(--pad-x) 0;
}
.pie-rej{
  /* Sin caja centrada de 1.180px desde el 18 oct 2026 (D12): las columnas se
     reparten entre los dos márgenes --pad-x, como la cabecera. */
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.4rem;
  padding-bottom:2.8rem;
}
.pie .marca{ margin-bottom:.9rem; }
.pie-t{ font-size:var(--fs-body); line-height:1.7; color:var(--hueso-52); max-width:34ch; }
.pie-h{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.24em; color:var(--espiga); margin-bottom:1rem;
}
.pie-l li{ margin-bottom:.65rem; }
.pie-l a{ font-size:var(--fs-body); color:var(--hueso-52); transition:color .45s var(--ease-ui); }
.pie-l a:hover{ color:var(--hueso); }
.pie-bajo{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:1.4rem 0 1.6rem; border-top:1px solid var(--linea);
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-30);
}

@media (max-width:900px){
  .pie-rej{ grid-template-columns:1fr 1fr; }
  .pie-rej > :first-child{ grid-column:1 / -1; }
  .bloque{ padding-top:6rem; }
}
@media (max-width:560px){
  .pie-rej{ grid-template-columns:1fr; }
  .pie-bajo{ flex-direction:column; gap:.5rem; }
}


/* ── v1.5 · NINGÚN BLOQUE DE COLUMNA BAJA DEL 50% ─────────────────────
   Sustituye a las reglas v1.2 y v1.3, que daban el 50% a cuatro bloques
   nombrándolos uno a uno por su id: hero, pain, persona y creo.

   Por qué se generaliza, medido el 24 sep 2026 a 1440px: los tres bloques
   de «por dónde empezar», que nacieron el día anterior, se quedaron en
   480px, un 33% de la pantalla, porque nadie se acordó de añadir sus id a
   esa lista. Una regla que hay que ampliar cada vez que nace un bloque
   produce exactamente este fallo, y lo produce en silencio: el bloque sale
   estrecho y no avisa nadie.

   Ahora el 50% es el comportamiento por defecto de toda caja de columna, y
   la excepción es la caja ancha, que se declara con su clase. Un bloque
   nuevo nace bien sin que nadie toque esta hoja.

   Los bloques de rejilla no se tocan: llevan `.ancha` y cada columna
   necesita su sitio. Móvil sin cambios: la regla entra a partir de 900px. */
@media (min-width:900px){
  .bloque .caja:not(.ancha){ max-width:calc(50vw - var(--pad-x)); }

  /* La medida interna ya no sube a 68ch aquí: desde el 18 oct 2026 (D12) la
     dan los tres niveles —34ch el subtítulo, 44ch el nivel 3—, que son más
     grandes y llenan la caja con menos caracteres por línea. */

  .bloque .caja:not(.ancha) h2{ max-width:26ch; }
}

/* ── v1.4 · página con la escena al lado, no detrás ───────────────────
   El artículo se maqueta como la home: texto pegado a la izquierda y media
   pantalla libre a la derecha para la escena.

   Por encima de 900px la página SUELTA el tope de --ancho y su centrado, para
   que su padding cuelgue del borde de la ventana igual que el de .bloque. Con
   --ancho puesto el margen se mide desde una caja de 1180px, no desde la
   ventana: la columna arrancaría desplazada y terminaría más allá del centro,
   tanto más cuanto más ancha es la pantalla. No se devuelve.

   La medida es la primitiva de media pantalla que ya toman el hero, Pain,
   Persona y En qué creo. No se inventa ninguna.

   Por debajo de 900px el modificador es inerte: la escena se retira y el
   texto ocupa el contenedor entero. Es el mismo corte de siempre. */
.pagina.con-escena{
  text-shadow:0 2px 30px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.55);
}
@media (min-width:900px){
  .pagina.con-escena{ max-width:none; margin-inline:0; }

  /* la cabecera del artículo llega hasta el centro exacto de la ventana */
  .pagina.con-escena .art-cab{ max-width:calc(50vw - var(--pad-x)); }

  /* el cuerpo conserva sus 68ch dentro de esa mitad, nunca por encima de 72 */
  .pagina.con-escena .art-cuerpo{ max-width:min(68ch, calc(50vw - var(--pad-x))); }

  /* la entradilla acompaña al cuerpo: a 44ch no llena la columna, igual que
     no la llenaba en Pain, Persona y En qué creo */
  .pagina.con-escena .art-cab .lead{ max-width:min(68ch, calc(50vw - var(--pad-x))); }
}

/* ── el artículo en tramos de tono ────────────────────────────────────────
   Una página que cambia de tono por el camino se sirve en TRAMOS, y cada
   tramo es una sección real con su `data-b`: es lo que la capa de estratos
   sabe medir. El modificador retira el relleno vertical de `.pagina`, que
   pasa a llevarlo el tramo que le toque —el primero arriba, el último
   abajo—: el relleno se REPARTE entre los tramos, no se repite en cada uno.
   Con dos tramos y el relleno repetido, entre la entradilla y el primer
   párrafo del artículo quedarían 14rem de nada. */
.tramos{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--pad-x); }
.tramo{ padding-block:0; }
.tramo-cabecera{ padding-top:8rem; }
/* El cuerpo NO lleva relleno arriba, corregido el 15 oct 2026 a petición del
   propietario: entre la fecha y el primer párrafo había 320px en escritorio.
   Lo que separa la cabecera del texto es el margen de `.art-cuerpo`, 2,8rem,
   el mismo que lleva un subtítulo del cuerpo sobre lo que tiene encima. */
.tramo-cuerpo{ padding-block:0 6rem; }

/* La entradilla acompaña al cuerpo y sube de 44ch a 68ch. El criterio es el
   mismo con que sube en Pain, Persona y En qué creo: a 44ch no llena la
   columna. Hasta hoy colgaba del modificador `.con-escena`; el artículo ya no
   lo lleva, y el motivo sobrevive a la escena, así que pasa a ser del tramo. */
.tramo-cabecera .art-cab .lead{ max-width:68ch; }

/* ── barra lateral: colocación ────────────────────────────────────────────
   UNA SOLA COLOCACIÓN EN TODO EL SITIO, desde el 24 sep 2026: listado,
   paginación, categoría, tema y artículo. La barra va DESPUÉS del contenido
   en el marcado, siempre; aquí solo se decide dónde se pinta. Colocar es de
   la hoja de estilos; el orden es del documento, y es lo que hace que sin
   JavaScript, y en un lector de pantalla, se lea primero el artículo.

   18 oct 2026 (D12, decisión de Ro), un solo sistema de anchos:
     · La barra arranca donde arranca el logo, en --pad-x. Se retira el margen
       izquierdo que crecía hasta 12rem (a 1440 la dejaba en 102px).
     · Crece a 18rem —324px, «unos 320»— y sus textos pasan a nivel 3.
     · La columna de 68ch se centra EN LA PÁGINA, no en el hueco que deja la
       barra.

   CÓMO SE CENTRA SIN PISAR LA BARRA. Tres pistas: la primera con un mínimo de
   barra + separación y flexible, la del centro a 68ch, la tercera flexible.
   El relleno del <main> es --pad-x a los dos lados, así que con las dos
   flexibles iguales la columna cae en el centro exacto de la ventana. Cuando
   la mitad del sobrante no llega al mínimo de la primera —a 1440, por
   ejemplo—, la rejilla congela esa pista en su mínimo y da el resto a la
   tercera: la columna se queda lo más cerca del centro que permite la barra,
   a 3.5rem de ella. Lo resuelve el algoritmo de la rejilla, sin cálculo.

   EL CORTE ES 1360px Y SALE DE UNA SUMA, como salía el de 1349:

       margen izquierdo, 5vw a ese ancho ........     68px
       barra, 18rem .............................    324px
       separación, 3.5rem .......................     63px
       columna de contenido, 68ch ...............    836px   ← medido
       margen derecho, 5vw ......................     68px

   0,9·W ≥ 324 + 63 + 836 = 1.223  →  W ≥ 1.359. Por debajo, las dos columnas
   no caben sin recortar la medida de lectura o la barra, y antes se pliega la
   barra que se recorta un título. Sustituye al corte de 1349px. */
main:has(> .barra){
  --barra-w:18rem;
  --hueco-barra:3.5rem;
  --col-blog:68ch;
  padding-inline:var(--pad-x);
}
/* El contenido suelta su tope de --ancho y su relleno: los márgenes los pone
   el contenedor. Plegada la barra, columna y barra se centran juntas en la
   página, con el mismo ancho, hasta que llenan el hueco entre márgenes. */
main:has(> .barra) > .pagina,
main:has(> .barra) > .tramos{
  max-width:var(--col-blog); margin-inline:auto; padding-inline:0;
}
main:has(> .barra) > .barra{ margin-inline:auto; max-width:var(--col-blog); }

@media (min-width:1360px){
  main:has(> .barra){
    display:grid;
    grid-template-columns:
      minmax(calc(var(--barra-w) + var(--hueco-barra)), 1fr)
      minmax(0, var(--col-blog))
      minmax(0, 1fr);
    align-items:start;
  }
  main:has(> .barra) > *{ grid-column:2; }
  main:has(> .barra) > .pagina,
  main:has(> .barra) > .tramos{ margin-inline:0; }
  /* La barra viene DESPUÉS en el marcado y se coloca en la primera pista y la
     primera fila, pegada al margen. 8rem arriba para arrancar a la altura del
     contenido, que es el relleno superior de la página bajo la cabecera. */
  main:has(> .barra) > .barra{
    grid-column:1; grid-row:1; justify-self:start;
    width:var(--barra-w); max-width:none; margin:8rem 0 0;
  }
  /* El bloque de cierre del artículo no es columna de lectura: abarca la
     PANTALLA, como en el resto del sitio. Ocupa las tres pistas y se come el
     relleno del <main> a los dos lados, que es el mismo: ya no hace falta
     medir el contenedor como cuando el margen izquierdo era mayor. */
  main:has(> .barra) > .bloque{
    grid-column:1 / -1;
    margin-inline:calc(-1 * var(--pad-x));
  }
}