/* ==========================================================================
   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 entrada destacada del menú, 24 sep 2026. Es el servicio, y tiene que
   pesar más que las otras tres sin convertirse en un segundo botón: la
   cabecera nunca lleva primario. Color de acento y filete inferior, que es
   como el sistema marca lo importante en el resto del sitio. El filete va en
   `currentColor` para que siga al tono sin declararlo dos veces. */
.menu a.destacada{
  color:var(--espiga);
  border-bottom:1px solid currentColor;
  padding-bottom:.25rem;
}
.menu a.destacada:hover,
.menu a.destacada:focus-visible{ color:var(--espiga-alta); }
/* 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:var(--ancho); }

/* ── 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%; max-width:var(--ancho); margin-inline:auto;
  padding:8rem var(--pad-x) 6rem;
}
.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;
}
/* La entrada del hero es la única frase que se lee de pie, antes de decidir
   si se sigue bajando. Va un escalón por encima del resto de entradas. */
#hero .lead{ font-size:var(--fs-md); line-height:1.7; max-width:46ch; }
.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; }

/* ── 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{
  max-width:var(--ancho); margin-inline:auto;
  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{
  max-width:var(--ancho); margin-inline:auto;
  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 acompaña. Sin esto la caja crece y el texto no la
     llena: se queda en sus 44ch y el bloque se ve igual de estrecho, solo
     que con más aire a la derecha. */
  .bloque .caja:not(.ancha) .lead,
  .bloque .caja:not(.ancha) .body,
  .bloque .caja:not(.ancha) .cierre-b,
  .bloque .caja:not(.ancha) .puntos li,
  .bloque .caja:not(.ancha) .sintomas li{ max-width:68ch; }

  .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; }
.tramo-cuerpo{ padding-block:3rem 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. Es lo que cambia el 24 de septiembre
   de 2026. Hasta hoy la barra se pintaba en columna DERECHA en el listado, la
   paginación, la categoría y el tema, y FIJA sobre el borde derecho en el
   artículo. El componente era uno solo —y lo sigue siendo—, pero dos
   colocaciones de la misma pieza se leen como dos piezas distintas, y es lo
   que hacía que el blog se leyera como dos sitios.

   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 y después los índices.

   EL CORTE ES 1349px Y NO SALE DE UN OJO, SALE DE UNA SUMA MEDIDA EN PANTALLA:

       margen izquierdo, --pad-x en su máximo ....    72px
       barra, 17rem .............................    306px
       separación, 3.5rem .......................     63px
       columna de contenido, 68ch ...............    836px   ← medido
       margen derecho, --pad-x ..................     72px
       ────────────────────────────────────────── 1.349px

   Los 836px son los 68ch de `.art-cuerpo` medidos en el navegador, con DM Sans
   a los 18px que hereda del cuerpo. No se calcularon: se midieron.

   Por debajo de esa cifra 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 1400px, que se había introducido pieza a pieza y no
   estaba declarado en ninguna especificación.

   Y EN PANTALLAS MUY ANCHAS LA BARRA NO SE QUEDA PEGADA AL CANTO, porque
   obliga a girar la cabeza. El margen izquierdo crece absorbiendo UN TERCIO
   del excedente, hasta un máximo de 12rem que se alcanza a 1.781px. Un tercio
   y no la mitad: absorber la mitad es centrar, y el conjunto tiene que seguir
   leyéndose alineado a la izquierda. El máximo también está medido: en un
   monitor de 2.560px, centrar el conjunto —barra + separación + columna,
   1.205px— exigiría 678px de margen izquierdo; 216px es menos de un tercio de
   eso, así que el bloque queda demostrablemente descentrado a la izquierda. */
main:has(> .barra){
  --barra-w:17rem;
  --hueco-barra:3.5rem;
  --col-blog:68ch;
  --margen-blog:clamp(var(--pad-x), calc(var(--pad-x) + (100vw - 1349px) / 3), 12rem);
  padding-inline:var(--margen-blog) var(--pad-x);
}
/* El contenido suelta su tope de --ancho y su centrado: los márgenes los pone
   el contenedor, y la página cuelga del borde izquierdo a cualquier ancho. */
main:has(> .barra) > .pagina,
main:has(> .barra) > .tramos{
  max-width:var(--col-blog); margin-inline:0; padding-inline:0;
}
/* Plegada, la barra se alinea con la columna de contenido y no cruza la
   pantalla entera: el ancho de la caja lo da la columna, no la ventana. */
main:has(> .barra) > .barra{ margin-inline:0; max-width:var(--col-blog); }

@media (min-width:1349px){
  /* Dos columnas: la barra en la primera, todo lo demás en la segunda. La
     rejilla va en el <main> y no en .pagina, porque la barra es HERMANA de la
     página y no hija suya. `justify-content:start` es lo que mantiene el
     conjunto pegado a la izquierda en vez de repartir el sobrante. */
  main:has(> .barra){
    display:grid;
    grid-template-columns:var(--barra-w) minmax(0, var(--col-blog));
    column-gap:var(--hueco-barra);
    justify-content:start; align-items:start;
  }
  main:has(> .barra) > *{ grid-column:2; }
  /* La barra viene DESPUÉS en el marcado y se coloca en la primera columna y
     la primera fila. 8rem arriba para arrancar a la altura del contenido, que
     es el relleno superior de la página bajo la cabecera fija. */
  main:has(> .barra) > .barra{ grid-column:1; grid-row:1; margin-top:8rem; }
  /* El bloque de cierre del artículo no es columna de lectura: abarca las dos,
     como abarca la pantalla en el resto del sitio. */
  main:has(> .barra) > .bloque{ grid-column:1 / -1; }
}