/* ==========================================================================
   components.css — piezas reutilizables de la home
   ========================================================================== */

/* ── botones ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.92rem 1.7rem; border-radius:var(--r);
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; white-space:nowrap;
  border:1px solid transparent;
}
.btn-s{ padding:.6rem 1.15rem; font-size:var(--fs-etq); }
.btn-g{ padding:1.05rem 2.1rem; font-size:var(--fs-etq); }
.btn-p{ border-color:var(--linea-alta); color:var(--hueso); }
.btn-q{ border-color:transparent; color:var(--hueso-52); padding-left:0; }
.fl{ display:inline-block; }
.ctas{ display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; }
.bloque.centro .ctas{ justify-content:center; }

.escasez{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.19em; color:var(--hueso-30); margin-top:1.6rem;
}

/* ── bloque 2 · síntomas ──────────────────────────────── */
.sintomas{ margin:1.6rem 0 1.8rem; }
.sintomas li{
  padding:.55rem 0 .55rem 1.2rem;
  border-left:1px solid var(--espiga);
  font-size:var(--fs-lead); line-height:1.68; color:var(--hueso-70);
  margin-bottom:.5rem;
}
/* Los síntomas suben de texto corrido a entrada el 24 sep 2026. Regla del
   propietario: un <li> nunca baja del texto corrido, y sube si lo merece.
   Estos lo merecen: son el bloque entero, no una lista de apoyo. */
.cierre-b{ font-size:var(--fs-lead); line-height:1.72; color:var(--hueso-52); max-width:40ch; }

/* ── bloque 3 · infografías del manifiesto ────────────── */
.infografias{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.6rem);
  margin:2.6rem auto 2.2rem; max-width:960px;
}
.info figcaption{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--hueso-30); margin-top:.9rem;
}
.info-marco{
  aspect-ratio:4 / 3;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  padding:1.4rem 0;
  text-align:left;
}
/* Variante enmarcada: la que habia antes. Se elige por parametro segun
   si la imagen necesita caja o se integra con el fondo de la pagina. */
.info-marco.enmarcado{
  padding:1.4rem;
  border:1px solid var(--linea); border-radius:var(--r-card);
  background:linear-gradient(158deg, rgba(46,36,24,.72), rgba(18,16,10,.72));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.info-marco.enmarcado.info-b{ border-color:var(--linea-alta); }
.info-etq{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.24em; color:var(--espiga);
}
.info-t{ font-family:var(--display); font-size:var(--fs-md); line-height:1.2; }

/* Lienzo único de las dos losas 3D del manifiesto, ver web/public/js/losas.js.
   El marcado plano (.info-marco) es la reserva: solo se retira visualmente
   cuando el guion marca data-losas="activo", es decir, cuando el contexto
   WebGL se ha montado con éxito. Sin JS o sin WebGL, la reserva se queda. */
.infografias[data-losas]{ position:relative; }
.losa-lienzo{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; opacity:0; transition:opacity .6s var(--ease-entrada);
}
.infografias[data-losas="activo"] .losa-lienzo{ opacity:1; }
.infografias[data-losas="activo"] .info-marco{
  opacity:0; transition:opacity .3s var(--ease-ui);
}
.mantra{
  font-family:var(--display); font-style:italic;
  color:var(--espiga-alta);
  letter-spacing:.01em;
}
@media (max-width:900px){ .infografias{ grid-template-columns:1fr; } }

/* ── bloque 4 · bandas de producto estrella ───────────── */
/* auto-fit y no dos columnas fijas, desde el 24 sep 2026: el bloque 4 dejó de
   tener dos entradas y con `1fr 1fr` la tercera caía sola en una fila. Con
   auto-fit, la rejilla se acomoda al número de bandas que haya y no hay que
   volver aquí cada vez que cambie la oferta. */
.bandas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:2.4rem; }
.banda{
  padding:1.9rem 1.7rem;
  border:1px solid var(--linea); border-radius:var(--r-card);
  background:rgba(36,28,19,.58);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; flex-direction:column; text-align:left;
}
.insignia{
  align-self:flex-start;
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.22em; color:var(--espiga);
  border:1px solid var(--linea-alta); border-radius:var(--r);
  padding:.3rem .6rem; margin-bottom:1.1rem;
}
.banda h3{ margin-bottom:.7rem; }
.banda-p{ font-size:var(--fs-lead); line-height:1.7; color:var(--hueso-70); margin-bottom:1.2rem; }
.puntos{ margin-bottom:1.6rem; flex:1; }
.puntos li,.art-cuerpo ul li{
  position:relative; padding-left:1.3rem; margin-bottom:.6rem;
  font-size:var(--fs-lead); line-height:1.6; color:var(--hueso-52);
}
.puntos li::before,.art-cuerpo ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--espiga);
}
@media (max-width:900px){ .bandas{ grid-template-columns:1fr; } }

/* ── bandas en filas ──────────────────────────────────────
   Cada vía ocupa el ancho entero de la caja y se parte en dos: a la izquierda
   la etiqueta y el nombre, que es lo que se lee de un barrido; a la derecha lo
   que hay que leer despacio. Nace el 24 sep 2026, cuando el bloque 4 pasó de
   dos productos a tres vías y el propietario señaló que tres columnas
   estrechas no daban para el texto ni para el peso que tiene esa sección.

   La colocación se hace por selector y no envolviendo el marcado en divs: así
   el mismo componente sirve para las dos disposiciones y no hay dos árboles
   que mantener. */
.bandas.filas{ grid-template-columns:1fr; gap:1.5rem; }
.bandas.filas .banda{
  display:grid;
  grid-template-columns:minmax(13rem,.40fr) 1fr;
  column-gap:clamp(1.6rem,4vw,3.6rem);
  row-gap:0;
  padding:clamp(1.9rem,3vw,2.8rem);
  align-items:start;
}
/* En rejilla la cabecera no existe para el maquetado: los dos hijos siguen
   siendo hermanos del flex de .banda y todo queda como estaba. */
.banda-cab{ display:contents; }

.bandas.filas .banda-cab{ display:block; grid-column:1; grid-row:1 / -1; }
.bandas.filas .banda-cab h3{ font-size:var(--fs-lg); line-height:1.2; margin-bottom:0; }
.bandas.filas .banda > .banda-p{ grid-column:2; grid-row:1; margin-bottom:1.3rem; max-width:52ch; }
.bandas.filas .banda > .puntos{ grid-column:2; grid-row:2; margin-bottom:1.2rem; }
.bandas.filas .banda > :last-child{ grid-column:2; grid-row:3; justify-self:start; }

/* Por debajo de 760px la fila deja de tener dos columnas y vuelve al orden
   natural del marcado, que es el correcto: etiqueta, nombre, promesa, puntos,
   acción. */
/* El reset se escribe con los MISMOS selectores, no con `> *`: con el comodín
   la especificidad es menor que la de las reglas de arriba, la columna 2 seguía
   ganando sobre una rejilla de una sola columna y el texto se salía de la
   pantalla. Medido a 390px: el documento pedía 442. */
@media (max-width:760px){
  .bandas.filas .banda{ grid-template-columns:1fr; }
  .bandas.filas .banda-cab,
  .bandas.filas .banda > .banda-p,
  .bandas.filas .banda > .puntos,
  .bandas.filas .banda > :last-child{ grid-column:1; grid-row:auto; }
  .bandas.filas .banda > h3{ margin-bottom:.7rem; }
}

/* ── bloque 5 · tarjetas por problema ─────────────────── */
.rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.2rem; }
.tarjeta{
  display:block; padding:1.5rem 1.3rem; text-align:left;
  border:1px solid var(--linea); border-radius:var(--r-card);
  background:rgba(36,28,19,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.t-n{
  display:block; font-family:var(--display); font-style:italic;
  font-size:var(--fs-body); color:var(--espiga); margin-bottom:.8rem;
}
.tarjeta h3{ font-size:var(--fs-md); margin-bottom:.55rem; }
.tarjeta p{ font-size:var(--fs-body); line-height:1.6; color:var(--hueso-52); }
.pie-b{ margin-top:1.8rem; }
@media (max-width:1080px){ .rejilla{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .rejilla{ grid-template-columns:1fr; } }

/* DESBORDAMIENTO HORIZONTAL EN MÓVIL, corregido el 23 sep 2026.
   Medido: a 390px de ancho el documento pedía 482px y la página se podía
   arrastrar de lado. El culpable es el CTA de la banda de producto: lleva
   `white-space:nowrap` y, dentro de una rejilla, un elemento NO encoge por
   debajo del ancho mínimo de su contenido —`min-width` vale `auto` por
   defecto—, así que un botón de 26 caracteres en versalita con
   letter-spacing ensanchaba la columna entera y con ella el documento.

   Dos medidas, y las dos hacen falta: la pista puede encogerse de verdad, y
   el botón puede partir en dos líneas cuando no cabe en una. Por debajo de
   560px un botón a dos líneas es normal; forzarlo a una es lo que rompía la
   página. */
@media (max-width:560px){
  .bandas,
  .rejilla,
  .resenas,
  .infografias{ grid-template-columns:minmax(0, 1fr); }
  .banda,
  .tarjeta,
  .resena,
  .info{ min-width:0; }
  .btn{ white-space:normal; text-align:center; }
}

/* ── bloque 6 · panel de transparencia y reseñas ──────── */
.panel{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
  margin:2.2rem 0 .9rem; padding-top:1.6rem;
  border-top:1px solid var(--linea); text-align:left;
}
.dato dt{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--espiga); margin-bottom:.45rem;
}
.dato dd{
  font-family:var(--display); font-weight:400;
  line-height:1;
}
.dato dd small{ color:var(--espiga); margin-left:.35em; letter-spacing:.02em; }
.metadato{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.19em; color:var(--hueso-30); text-align:left;
}
.resenas{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.4rem; text-align:left; }
.resena{
  padding:1.4rem 1.3rem;
  border:1px solid var(--linea); border-radius:var(--r-card);
  background:rgba(36,28,19,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.resena p{ font-family:var(--cuerpo); font-weight:300; font-style:italic; font-size:var(--fs-md); line-height:1.48; }
.resena figcaption{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.19em; color:var(--espiga); margin-top:1rem;
}
@media (max-width:900px){ .panel{ grid-template-columns:1fr 1fr; } .resenas{ grid-template-columns:1fr; } }

/* ── bloque 7 · persona ───────────────────────────────── */
.persona{ display:grid; grid-template-columns:150px 1fr; gap:1.8rem; align-items:start; margin-top:1rem; }
.foto{
  aspect-ratio:3 / 4; display:grid; place-items:center;
  border:1px solid var(--linea); border-radius:var(--r-card);
  background:rgba(36,28,19,.6);
  font-family:var(--etq); font-size:var(--fs-etq); letter-spacing:.22em;
  text-transform:uppercase; color:var(--hueso-30);
}
/* Cuando .foto es una imagen de verdad y no el marcador de posición, hay que
   sujetarla a su columna: el 24 sep 2026 entró la primera foto real, de
   300x400, y se renderizó a su tamaño intrínseco, saliéndose de la columna de
   150px y montándose encima del texto. El marcador nunca lo destapó porque un
   div vacío sí respeta la rejilla. */
img.foto{ width:100%; height:auto; object-fit:cover; display:block; }

@media (max-width:560px){ .persona{ grid-template-columns:1fr; } .foto{ max-width:150px; } }

/* ── bloque 8 · pruebas materiales ────────────────────── */
.pruebas{ display:grid; gap:1rem; margin-top:1.8rem; }
.pruebas li{
  display:flex; align-items:baseline; gap:.9rem;
  font-size:var(--fs-lead); color:var(--hueso-52);
  padding-bottom:.9rem; border-bottom:1px solid var(--linea);
}
.p-n{
  font-family:var(--display); font-size:var(--fs-lg); color:var(--hueso);
  min-width:4.2rem;
}

/* ── bloque 9 · cierre ────────────────────────────────── */
.sub{ padding:0 0 2.6rem; }
.sub-b{
  margin-top:2.6rem; padding-top:2.6rem;
  border-top:1px solid var(--linea);
}
.sub-b h3{ margin-bottom:1.4rem; }
.form{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; max-width:480px; margin-inline:auto; }
.input{
  flex:1 1 220px; min-width:0; padding:.9rem 1rem;
  background:rgba(18,16,10,.7);
  border:1px solid var(--linea-alta); border-radius:var(--r);
  color:var(--hueso); font-size:var(--fs-lead);
}
.input::placeholder{ color:var(--hueso-30); }
.input.mal{ border-color:#A65237; }
.legal{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.17em; color:var(--hueso-30); margin-top:1rem;
}
.legal a{ color:var(--hueso-52); border-bottom:1px solid var(--linea); }

/* ── aviso ────────────────────────────────────────────── */
.aviso{
  position:fixed; left:50%; bottom:2rem; z-index:80;
  transform:translate(-50%,150%);
  max-width:min(88vw,460px); padding:.95rem 1.35rem;
  background:rgba(20,16,10,.92);
  border:1px solid var(--linea-alta); border-radius:var(--r-card);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:var(--fs-body); color:var(--hueso);
  opacity:0; pointer-events:none;
}

@media (max-width:560px){
  .form{ flex-direction:column; }
  .btn{ width:100%; }
  .cabecera .btn{ width:auto; }
}

/* ── v1.6 · ajustes puntuales de los elementos señalados como pequeños ── */
.kicker{ font-size:var(--fs-etq); letter-spacing:.24em; }
.mantra{ font-size:var(--t-mantra); }
.t-n{ font-size:var(--fs-md); }
.tarjeta p{ font-size:var(--fs-body); line-height:1.62; }
.tarjeta h3{ font-size:var(--t-h3); }
.dato dd small{ font-size:.42em; letter-spacing:.04em; }
/* .42em de la cifra: 18,9px sobre una cifra de 45px. Es porcentaje del padre,
   no valor absoluto, así que la unidad escala si la cifra cambia de tamaño.
   Y queda por encima del cuerpo, que es el mínimo del sistema. */
.dato dd{ font-size:var(--fs-2xl); }
.resena p{ font-size:var(--fs-md); line-height:1.44; }
.resena figcaption{ font-size:var(--fs-etq); }

/* ── botón primario metálico ─────────────────────────────────────────
   Uno por pantalla visible. Nunca en cabecera. */
.btn-oro{
  position:relative; overflow:hidden; isolation:isolate;
  border:0;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--oro-metal-texto);
  background:var(--oro-metal);
  box-shadow:
    inset 0 1px 0 rgba(255,246,224,.62),   /* bisel superior */
    inset 0 -1px 0 rgba(74,50,12,.55),     /* bisel inferior */
    0 10px 26px -16px rgba(0,0,0,.9);      /* sombra neutra, nunca de color */
}
.btn-oro:hover{ transform:translateY(-2px); background:var(--oro-metal); }
.btn-oro-s{ padding:.62rem 1.15rem; }

/* la banda de reflejo: pinta sobre el fondo y bajo el texto */
.btn-oro::after{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  background:linear-gradient(102deg,
    transparent 38%,
    rgba(255,252,242,.30) 46%,
    rgba(255,255,255,.78) 50%,
    rgba(255,252,242,.30) 54%,
    transparent 62%);
  transform:translateX(-130%);
}
@keyframes brillo{
  from{ transform:translateX(-130%) }
  to  { transform:translateX(130%) }
}
/* Una sola pasada al entrar. forwards deja la banda fuera por la derecha:
   no vuelve con el ratón encima, y al salir desaparece sin deshacer. */
.btn-oro:hover::after{
  animation:brillo var(--brillo-dur) var(--brillo-ease) forwards;
}
@media (prefers-reduced-motion:reduce){
  .btn-oro:hover::after{ animation:none }
}

/* ── escalón xs, el menor de la escala ───────────────────────────────
   Derivado de la razón de ×1,4 que gobierna los demás escalones. */
.btn-xs{ padding:.42rem .85rem; }

/* Tamaños del primario metálico. Cada uno lleva +.02rem de padding vertical
   sobre su equivalente con filete: .btn-oro cambia el borde de 1px por
   border:0, y sin compensar el metálico queda más bajo que el secundario
   del mismo escalón. Un botón sin filete no usa las clases del que lo lleva. */
.btn-oro-xs{ padding:.44rem .85rem; }
.btn-oro-n { padding:.94rem 1.7rem; }
.btn-oro-g { padding:1.07rem 2.1rem; }

/* ── cifras fuera de párrafo ─────────────────────────────────────────
   Figuras de caja alta: todos los dígitos con la misma altura y línea
   de base. Se revierte cambiando el token --cifras a normal. */
h1,h2,h3,.p-n,.dato dd,.t-n{ font-variant-numeric:var(--cifras); }

/* ── estrellas de la reseña ──────────────────────────────────────────
   Caracteres tipográficos, no iconografía de biblioteca. */
.estrellas{
  display:block; color:var(--espiga); font-size:var(--fs-body);
  letter-spacing:.22em; margin-bottom:.7rem;
}

/* ══════════════════════════════════════════════════════════════════════
   PIEZAS QUE EL SISTEMA DEFINÍA Y NO EXISTÍAN EN CSS
   ══════════════════════════════════════════════════════════════════════ */

/* ── cita destacada · §3.2 ─────────────────────────────────────────────
   Filete de 2px, no de 1px: el motivo es el mismo que llevó los síntomas
   a 2px, que a 1px no se distingue sobre el fondo de la escena. */
.cita,.art-cuerpo blockquote{
  border-left:1px solid var(--espiga); padding-left:1.4rem;
  margin:1.8rem 0; max-width:56ch;
}
.cita p,.art-cuerpo blockquote p{
  font-family:var(--display); font-style:italic; font-size:var(--fs-md);
  line-height:1.5; color:var(--hueso);
}
.cita figcaption{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--hueso-30); margin-top:.9rem;
}

/* ── nota · §3.2 · aclaración bajo un elemento ─────────────────────── */
.nota{
  font-size:var(--fs-etq); line-height:1.55; color:var(--hueso-30);
  margin-top:.7rem; max-width:68ch;
}

/* ── etiqueta de categoría · §3.8 ──────────────────────────────────────
   La §3.8 la llamaba .tag. Se nombra .categoria porque la §3.10 exige
   español también en las clases, y .badge ya nos costó un renombrado. */
.categoria{
  display:inline-block; padding:.26rem .62rem;
  border:1px solid var(--linea); border-radius:var(--r);
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-52);
  transition:color .45s var(--ease-ui), border-color .45s var(--ease-ui);
}
/* cuando lleva destino es un <a>: mismo tratamiento que ya tenía a.tema */
a.categoria:hover,a.categoria:focus-visible{
  color:var(--espiga); border-color:var(--espiga);
}

/* ── etiqueta de tema · taxonomía fina del blog ────────────────────────
   Sin caja, frente a la caja de .categoria. Las dos pueden ir juntas en la
   cabecera de un artículo y tienen que distinguirse de un vistazo: la
   categoría es permanente y va enmarcada; el tema es mortal y va suelto,
   con el mismo guion corto dorado que la lista de puntos.
   No se llama .etiqueta: ese nombre es del componente tipográfico. */
.tema{
  display:inline-block; position:relative; padding-left:1.1rem;
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-52);
  transition:color .45s var(--ease-ui);
}
.tema::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--espiga);
}
a.tema:hover,a.tema:focus-visible{ color:var(--espiga); }

/* lista de temas de la cabecera de artículo */
.temas{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }

/* ── etiqueta con color de acento · §3.10 ──────────────────────────── */
.etq-acento{ color:var(--espiga); }

/* ── rejilla de 2 y 3 columnas · §3.5 ──────────────────────────────── */
.rejilla-2{ grid-template-columns:repeat(2,1fr); }
.rejilla-3{ grid-template-columns:repeat(3,1fr); }

/* ── acordeón · §3.9 ───────────────────────────────────────────────────
   Sin JavaScript: <details name> da la exclusividad y la página sigue
   entendiéndose con el guion desactivado. */
.acordeon{ border-top:1px solid var(--linea); margin-top:1.6rem; interpolate-size:allow-keywords; }
.acordeon details{ border-bottom:1px solid var(--linea); }
.acordeon summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.15rem 0; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:var(--t-h3); color:var(--hueso);
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{
  content:"+"; flex:0 0 auto;
  font-family:var(--etq); font-size:var(--fs-md); color:var(--espiga);
}
.acordeon details[open] summary::after{ content:"–"; }
.acordeon details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .45s var(--ease-ui), content-visibility .45s allow-discrete;
}
.acordeon details[open]::details-content{ block-size:auto; }
.acordeon .respuesta{
  padding:0 0 1.3rem; color:var(--hueso-70);
  font-size:var(--t-body); line-height:1.76; max-width:68ch;
}

/* ── migas de pan · §3.7 ───────────────────────────────────────────── */
.migas{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-30);
}
.migas a{ color:var(--hueso-52); border-bottom:1px solid var(--linea); }
.migas .sep{ color:var(--linea-alta); }

/* ── paginación · §3.7 ─────────────────────────────────────────────── */
.paginacion{
  display:flex; align-items:center; justify-content:center; gap:1.6rem;
  margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid var(--linea);
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em;
}
.paginacion a{ color:var(--hueso-52); }
.paginacion .pos{ color:var(--hueso-30); }
.paginacion .inerte{ color:var(--hueso-30); opacity:.45; }

/* ── listado de entradas · §3.8 · filete entre entradas, sin tarjetas ── */
.entradas{ margin-top:2rem; border-top:1px solid var(--linea); }
.entradas li{
  display:grid; gap:.55rem; padding:1.7rem 0;
  border-bottom:1px solid var(--linea);
}
.entrada-meta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.entrada-fecha{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--hueso-30);
}
.entradas h3{ color:var(--hueso); }
.entradas h3 a{ color:inherit; }
.entrada-p{ color:var(--hueso-52); font-size:var(--fs-body); max-width:68ch; }

/* ── cabecera de artículo · §3.8 ───────────────────────────────────── */
.art-cab{ display:grid; gap:1rem; max-width:68ch; justify-items:start; }
.art-cab > *{ justify-self:stretch; }

/* ── fila de taxonomía · la palabra que dice cuál es cuál ──────────────
   La categoría y los temas se distinguían entre sí pero no se identificaban:
   el filete y el guion dicen «no somos lo mismo», no cuál es la sección y
   cuál la herramienta. La palabra delante lo dice. Va en .metadato, que ya
   existe: dato sobre el contenido, sin oro, porque el oro es acento.
   La fila estira para que una lista larga de temas envuelva bien; las piezas
   son inline-block y no crecen con ella. */
.taxo{ display:flex; align-items:center; gap:.6rem 1rem; flex-wrap:wrap; }
.taxo .metadato{ flex:none; }
/* ── cuerpo de artículo · fuera del sistema de bloques ─────────────────
   Columna de 68ch: la cuarta excepción declarada a la medida de 44ch, por
   debajo del máximo absoluto de 72. Lo escribe Markdown, así que sus
   elementos desnudos entran en las declaraciones que ya tienen las piezas del
   sistema —el párrafo en .body, la lista en .puntos, la cita en .cita— en vez
   de estrenar valores propios. Los encabezados van PLANOS: sin destacado y
   sin cursiva dorada, que es lo que separa el cuerpo del sistema de bloques. */
.art-cuerpo{ max-width:68ch; margin-top:2.8rem; }
.art-cuerpo > * + *{ margin-top:1.5rem; }
.art-cuerpo p{ max-width:none; }
.art-cuerpo h2,.art-cuerpo h3{
  font-family:var(--display); font-weight:300; color:var(--hueso);
  max-width:none; margin-top:2.8rem; letter-spacing:-.01em;
}
.art-cuerpo h2{ font-size:var(--t-h3); line-height:1.18; }
.art-cuerpo h3{ font-size:var(--fs-md); line-height:1.28; }
.art-cuerpo a{ color:var(--espiga); text-decoration:underline; text-underline-offset:.22em; }

/* Lista ordenada del cuerpo. Misma métrica que .puntos, pero con numeral en
   Display y en --espiga en lugar del guion dorado: una secuencia tiene que
   leerse como secuencia, y el guion no dice en qué orden van los pasos.
   El contador es CSS porque la lista del sistema va sin marcador. */
.art-cuerpo ol{ counter-reset:paso; }
.art-cuerpo ol li{
  position:relative; padding-left:1.9rem; margin-bottom:.6rem;
  font-size:var(--fs-lead); line-height:1.6; color:var(--hueso-52);
}
.art-cuerpo ol li::before{
  counter-increment:paso; content:counter(paso) ".";
  position:absolute; left:0; top:0;
  font-family:var(--display); font-variant-numeric:var(--cifras);
  color:var(--espiga);
}

.art-meta{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--hueso-30);
}

/* ── formulario largo · §3.6 · una pregunta por pantalla ───────────── */
.form-largo{
  max-width:620px; padding:2.2rem 2rem;
  border:1px solid var(--linea); border-radius:var(--r-card);
  background:rgba(36,28,19,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.form-largo .paso{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.22em; color:var(--espiga); margin-bottom:1rem;
}
.form-largo .pregunta{
  font-family:var(--display); font-size:var(--t-h3); color:var(--hueso);
  line-height:1.3; margin-bottom:1.3rem; max-width:34ch;
}
.form-largo .avance{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.6rem;
}

/* ── panel de cifras con fondo opcional ──────────────────────────────
   Por defecto va sin fondo, como retícula abierta. Con fondo se comporta
   como el resto de piezas con material, igual que el marco enmarcado. */
.panel.con-fondo{
  padding:1.8rem 1.6rem;
  border:1px solid var(--linea); border-top:1px solid var(--linea);
  border-radius:var(--r-card);
  background:rgba(36,28,19,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* ══════════════════════════════════════════════════════════════════════
   NAVEGACIÓN · desplegable de escritorio y panel móvil
   ══════════════════════════════════════════════════════════════════════ */

/* ── desplegable ────────────────────────────────────────────────────── */
.desplegable{ position:relative; display:inline-flex; }
.desplegable-cab{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-52);
  transition:color .45s var(--ease-ui);
}
.desplegable-cab::after{
  content:"+"; font-size:.8em; color:var(--espiga);
  transition:transform .3s var(--ease-ui);
}
.desplegable:hover .desplegable-cab,
.desplegable:focus-within .desplegable-cab{ color:var(--hueso); }
.desplegable[data-abierto] .desplegable-cab::after{ transform:rotate(45deg); }

.desplegable-panel{
  position:absolute; top:calc(100% + 1.1rem); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:15rem; padding:.7rem 0;
  background:rgba(20,16,10,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--linea); border-radius:var(--r-card);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease-ui), transform .3s var(--ease-ui), visibility .3s;
}
/* Puente sobre el hueco. El panel se coloca 1.1rem por debajo del encabezado
   y .desplegable solo mide lo que mide el boton: sin esto, al bajar hacia los
   enlaces el puntero sale del grupo, se pierde el :hover y el panel se cierra
   antes de que llegues. El hueco visual se queda; deja de ser un agujero.
   El puente hereda el pointer-events del panel, asi que con el panel cerrado
   tampoco recibe puntero y no abre nada al pasar por debajo de la cabecera. */
.desplegable-panel::before{
  content:""; position:absolute; left:0; right:0;
  top:-1.1rem; height:1.1rem;
}
.desplegable:hover .desplegable-panel,
.desplegable:focus-within .desplegable-panel,
.desplegable[data-abierto] .desplegable-panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.desplegable-panel a{
  display:block; padding:.62rem 1.3rem; white-space:nowrap;
  color:var(--hueso-52);
}
.desplegable-panel a:hover,.desplegable-panel a:focus-visible{ color:var(--hueso); }
.desplegable-panel .hub{
  margin-top:.5rem; padding-top:.85rem;
  border-top:1px solid var(--linea); color:var(--espiga);
}

/* ── hamburguesa · solo con JavaScript, y solo en pantalla estrecha ─── */
.hamburguesa{
  display:none; width:44px; height:44px; flex:0 0 auto;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--linea-alta); border-radius:var(--r);
  cursor:pointer;
}
.hamburguesa span,
.hamburguesa span::before,
.hamburguesa span::after{
  display:block; width:20px; height:1px; background:var(--hueso);
  transition:transform .3s var(--ease-ui), opacity .3s var(--ease-ui);
}
.hamburguesa span{ position:relative; }
.hamburguesa span::before,.hamburguesa span::after{ content:""; position:absolute; left:0; }
.hamburguesa span::before{ top:-6px; }
.hamburguesa span::after{ top:6px; }
.hamburguesa[aria-expanded="true"] span{ background:transparent; }
.hamburguesa[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ── panel móvil · entra desde la izquierda ─────────────────────────── */
.velo{
  position:fixed; inset:0; z-index:35; display:none;
  background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease-ui), visibility .45s;
}
.velo[data-abierto]{ opacity:1; visibility:visible; }
.nav-movil{
  position:fixed; top:0; bottom:0; left:0; z-index:36; display:none;
  width:min(84vw,360px);
  padding:6rem var(--pad-x) 2.4rem;
  background:rgba(20,16,10,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-right:1px solid var(--linea);
  transform:translateX(-100%);
  transition:transform .45s var(--ease-entrada);
  overflow-y:auto;
}
.nav-movil[data-abierto]{ transform:none; }
.nav-movil a{
  display:block; padding:.75rem 0;
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso-52);
}
.nav-movil a:hover,.nav-movil a:focus-visible{ color:var(--hueso); }
.nav-movil .grupo{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.18em; color:var(--hueso); padding:.75rem 0 .2rem;
}
.nav-movil .hijo{ padding-left:1.2rem; border-left:1px solid var(--linea); }
.nav-movil .hijo.hub{ color:var(--espiga); }

@media (max-width:1080px){
  .con-js .hamburguesa{ display:inline-flex; }
  .con-js .velo,.con-js .nav-movil{ display:block; }
}

/* ── barra lateral · pieza estructural reutilizable ─────────────────────
   Contenedor: columna, material y plegado. No sabe qué lleva dentro.
   Material de .banda —rgba(36,28,19,.58) y desenfoque 8px—, que es el valor
   de las piezas de más peso: la barra puede ir sobre la escena y tiene que
   separarse de ella. No se inventa ningún valor nuevo.

   Va SIEMPRE después del contenido en el marcado. Por debajo de 1400px se
   queda ahí, debajo; a partir de 1400px el CSS la coloca al lado. Ese orden
   es el que hace que sin JavaScript se lea primero el artículo. */
.barra{
  margin-top:3rem; padding:1.5rem;
  background:rgba(36,28,19,.58);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--linea); border-radius:3px;
  display:grid; gap:1.8rem; align-content:start;
}
.barra-t{ color:var(--hueso-52); }

/* bloque: título en .metadato y contenido debajo. Sin material propio: lo
   pone la barra. Dos materiales serían corcho sobre corcho. */
.barra-b{ display:grid; gap:.7rem; }
.barra-l{ display:grid; gap:.55rem; }
.barra-l li{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.barra-l a{ color:var(--hueso-70); transition:color .45s var(--ease-ui); }
.barra-l a:hover,.barra-l a:focus-visible{ color:var(--espiga); }
.barra-l [aria-current="page"]{ color:var(--hueso-30); }
.barra-n{
  flex:none; font-family:var(--etq); font-size:var(--fs-etq);
  color:var(--hueso-30);
}
/* últimas entradas: el título manda y la fecha va debajo, no al lado: a esta
   anchura un título de 90 caracteres no comparte línea con nada. */
.barra-u li{ display:grid; gap:.2rem; }
.barra-f{
  font-family:var(--etq); font-size:var(--fs-etq); text-transform:uppercase;
  letter-spacing:.2em; color:var(--hueso-30);
}

/* temas de una entrada del listado · anatomía de cinco elementos */
.entrada-temas{ margin-top:.15rem; }