/* ═════════════════════════════════════════════════════════════════════
   esquimo.es · maqueta v2
   Aplica el sistema visual de CACTUS descrito en
   ~/.claude/referencias/design-cactus-2026.md, destilado del código de
   cactus-magazine.pages.dev y de cactuslab.es.

   Lo que cambia respecto de la v1, y por qué:
     · la paleta, que llevaba el azul y la menta aproximados
     · los pesos, que iban a 700 y 800 (el sistema tiene dos: 400 y 600)
     · la tipografía, servida desde la propia carpeta y no desde Google
     · la retícula, a sangre y con un solo grosor de línea
     · el botón, la etiqueta y la tarjeta, que ahora son los de la casa
     · el movimiento, con los tokens del sistema en vez de valores sueltos
     · la ficha, que adopta el patrón de lector partido en dos
     · las reglas de impresión, que no había

   Lo que NO se calca del magazine, y por qué:
     · el alto de celda (27vw allí): está medido para titulares de tres
       líneas, y aquí una palabra ocupa una. Se recalcula.
     · el orden de lectura de la ficha, que lo manda el CLAUDE.md de este
       proyecto: la palabra, su descripción y al final el contexto.
   ═════════════════════════════════════════════════════════════════════ */

/* La tipografía vive DENTRO de la carpeta que se publica, no en un CDN:
   es la regla del sistema y además quita una dependencia externa. */
@font-face{
  font-family:'Manrope';
  src:url('assets/fonts/Manrope-VariableFont_wght.woff2') format('woff2-variations');
  font-weight:200 800; font-display:swap;
}

:root{
  /* COLOR DE MARCA — los cinco del sistema, sin variantes */
  --blue:  #1800D8;
  --ice:   #EEEEFF;
  --paper: #FFFFFF;
  --mist:  #5A5CFF;
  --mint:  #A1FFC7;
  --pitch: #06002B;

  /* COLOR DE DATO — los cinco ámbitos del diccionario. No son colores de
     marca: distinguen contenido, van con nombre propio y aparecen solo en
     marcas pequeñas. La tinta sigue siendo el azul de la casa. */
  --olivar:   #7f9a12;
  --sierra:   #b0571f;
  --donana:   #a8850f;
  --pesca:    #1d7fa0;
  --campina:  #834b8a;
  --sans:'Manrope',-apple-system,'Helvetica Neue',Arial,sans-serif;

  /* Los seis escalones del sistema, sin añadir ninguno */
  --t-cap:  13px;
  --t-ui:   clamp(15px,1.2vw,18px);
  --t-body: clamp(1.32rem,1.65vw,1.75rem);
  --t-lg:   clamp(2.35rem,4.2vw,4.1rem);
  --t-md:   clamp(1.85rem,3vw,3rem);
  --t-lista:clamp(32px,2.8vw,44px);

  --w-body:400;
  --w-emph:600;
  --lh-title:1.08;
  --lh-body:1.6;

  --margen:21px;
  --nav-h:56px;
  --linea:2px;
  --press:5px;
  --pad:clamp(20px,4vw,56px);
  --gap-para:clamp(22px,3vh,36px);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-press:.16s;
  --dur-swap:.3s;
  --dur-enter:.6s;
  --dur-reveal:1s;
  --dur-viaje:1.1s;
  --dur-velo:1.15s;
  --dist-reveal-y:56px;
  --blur-reveal:10px;
  --dist-leve-y:14px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-weight:var(--w-body);
  background-color:var(--paper); color:var(--blue);
  font-size:var(--t-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
button{font-family:var(--sans)}
::selection{background-color:var(--mint); color:var(--blue)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* El texto que se lee va en azul rebajado contra el fondo, con color-mix
   y nunca con opacidad: la opacidad es de los estados y choca con las
   reglas de entrada. En este sitio no hay texto negro. */
.suave{color:color-mix(in srgb,var(--blue) 90%,var(--paper))}

/* ── El velo ────────────────────────────────────────────────────────
   La página se abre bajo una lámina de su propio color de fondo. Va en
   el HTML y lo mueve una animación CSS, nunca el JavaScript: así se
   retira aunque el JS no llegue. En linear, no en la curva de la casa:
   un fundido se reparte por igual. */
.velo{
  position:fixed; inset:0; z-index:9998;
  background-color:var(--paper); pointer-events:none;
  animation:velo-se-va var(--dur-velo) linear both;
}
@keyframes velo-se-va{from{opacity:1} to{opacity:0}}

/* ── La barra ───────────────────────────────────────────────────────
   Altura fija (--nav-h), siempre. Se aparta al bajar y vuelve al subir,
   que es lo que hace falta en un teléfono para no perder un tercio de
   pantalla mientras se lee. */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 var(--margen);
  background-color:var(--paper);
  border-bottom:1px solid color-mix(in srgb,var(--blue) 14%,transparent);
  transition:transform var(--dur-swap) var(--ease);
}
.nav.escondida{transform:translateY(-101%)}
.nav__brand{font-size:var(--t-ui); font-weight:var(--w-emph); letter-spacing:-.01em}
.nav__cuenta{
  font-size:var(--t-cap); font-weight:var(--w-emph);
  letter-spacing:.06em; color:var(--blue); opacity:.65;
}

/* ── El botón ───────────────────────────────────────────────────────
   Uno solo para todo el sitio. Esquina viva, nunca redondeada, y al
   señalarlo la pieza se levanta y deja detrás una sombra azul maciza. */
.boton{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--sans); font-size:var(--t-cap);
  font-weight:var(--w-emph); letter-spacing:1.5px;
  color:var(--blue); background:none;
  border:1px solid var(--blue); border-radius:0;
  padding:10px 18px; cursor:pointer;
  transition:transform var(--dur-press) var(--ease),
             box-shadow var(--dur-press) var(--ease),
             background var(--dur-swap) var(--ease),
             color var(--dur-swap) var(--ease);
}
.boton:hover,.boton:focus-visible{
  outline:none; transform:translate(-2px,-2px);
  box-shadow:var(--press) var(--press) 0 0 var(--blue);
}
.boton:active{transform:translate(0,0); box-shadow:2px 2px 0 0 var(--blue)}
.boton--solido{background-color:var(--blue); color:var(--ice)}
.boton[disabled]{opacity:.35; cursor:default; pointer-events:none}
/* background-color y no el atajo `background`: con el atajo el navegador
   no expande el valor y gana el `background:none` de arriba. */
.boton.is-on{background-color:var(--blue); color:var(--ice)}

/* ── La etiqueta ────────────────────────────────────────────────────
   Pastilla de menta con texto azul. Es una marca, no un enlace. */
.etiqueta{
  display:inline-block;
  font-size:var(--t-cap); font-weight:var(--w-emph); color:var(--blue);
  letter-spacing:.06em; line-height:1.3;
  background-color:var(--mint); padding:7px 12px;
}

/* ── El bloque de sección ───────────────────────────────────────────
   Barra gruesa por encima, titular, frase a 60ch y botonera. La barra
   abre el bloque; debajo del titular no marcaría nada. */
.bloque{margin:0 var(--margen); padding-top:clamp(40px,6vh,80px)}
.bloque__barra{display:block; width:148px; height:14px; background-color:var(--blue); margin-bottom:22px}
.bloque__titulo{
  font-size:calc(var(--t-lg) * 1.15); font-weight:var(--w-emph);
  line-height:1.02; letter-spacing:-.03em;
}
.bloque__body{font-size:var(--t-ui); line-height:1.4; max-width:60ch; margin-top:18px}

/* ── Buscar y filtrar ───────────────────────────────────────────────
   Viven en un panel que sube desde abajo, no en una barra arriba. Dos
   razones: con el dedo se llega a la mitad baja de la pantalla y no al
   filo de arriba, y cuando entren el estado de uso y el filtro por «qué
   nombra» serán más de tres grupos, que en una barra no caben.
   El botón se queda fijo, así que buscar está a un toque desde donde
   estés, sin volver arriba del todo. */
.mandos-abrir{
  position:fixed; left:clamp(20px,4vw,56px); bottom:clamp(20px,4vw,56px); z-index:240;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:var(--t-cap);
  font-weight:var(--w-emph); letter-spacing:1.5px;
  background-color:var(--blue); color:var(--ice);
  border:1px solid var(--blue); border-radius:0;
  padding:16px 20px; cursor:pointer;
  box-shadow:var(--press) var(--press) 0 0 var(--mint);
  transition:transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
}
.mandos-abrir:hover,.mandos-abrir:focus-visible{
  outline:none; transform:translate(-2px,-2px);
  box-shadow:calc(var(--press) + 2px) calc(var(--press) + 2px) 0 0 var(--mint);
}
.mandos-abrir:active{transform:none; box-shadow:2px 2px 0 0 var(--mint)}
/* Cuántas quedan con lo que hay puesto: se ve sin abrir el panel. */
.mandos-abrir__n{
  background-color:var(--mint); color:var(--blue);
  padding:3px 8px; letter-spacing:.06em;
}

/* El botón flota sobre el final de la página: el pie del índice se hace
   más alto para que no le tape ninguna línea. */
#v-indice .pie{padding-bottom:clamp(90px,14vh,130px)}

.panel{position:fixed; inset:0; z-index:250}
.panel__fondo{
  position:absolute; inset:0;
  background-color:color-mix(in srgb,var(--pitch) 55%,transparent);
  opacity:0; transition:opacity var(--dur-swap) var(--ease);
}
.panel.abierto .panel__fondo{opacity:1}
.panel__caja{
  position:absolute; left:0; right:0; bottom:0;
  max-height:min(80vh,720px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background-color:var(--paper);
  border-top:var(--linea) solid var(--blue);
  padding:clamp(18px,3vw,28px) var(--margen) clamp(24px,4vh,40px);
  transform:translateY(100%);
  transition:transform var(--dur-swap) var(--ease);
}
.panel.abierto .panel__caja{transform:none}
.panel__cabecera{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:20px;
}
.panel__titulo{font-size:var(--t-cap); font-weight:var(--w-emph); letter-spacing:1.5px}
.panel__cerrar{
  width:44px; height:44px; margin-right:-10px;   /* el dibujo, a ras del margen */
  display:grid; place-items:center;
  background:none; border:0; color:var(--blue);
  font-size:20px; line-height:1; cursor:pointer;
}
.panel__cerrar:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.panel__ver{width:100%; justify-content:center; margin-top:24px}
/* Con el panel abierto, la página de detrás se queda quieta: si no, al
   arrastrar sobre él se scrollea el índice y al cerrar estás en otro
   sitio. */
html.panel-abierto, html.panel-abierto body{overflow:hidden}

.mandos{display:flex; flex-direction:column; gap:14px}
.mandos input{
  font-family:var(--sans); font-size:var(--t-ui); font-weight:var(--w-body);
  color:var(--blue); width:100%;
  background:var(--paper); border:1px solid var(--blue); border-radius:0;
  padding:14px 16px;
}
.mandos input::placeholder{color:color-mix(in srgb,var(--blue) 45%,var(--paper))}
.filtro{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
/* El chip de ámbito lleva su color de dato en un filete de 3px a la
   izquierda: distingue sin robarle el azul al botón. */
.filtro .boton[data-amb]{border-left:3px solid var(--c,var(--blue))}
.bloque--indice{padding-bottom:clamp(30px,5vh,56px)}

/* ── La rejilla ─────────────────────────────────────────────────────
   A SANGRE, de borde a borde, sin margen lateral: es lo que separa la
   superficie del texto y le da al sitio su aire de revista.
   Las líneas no se dibujan dos veces: el contenedor pone la de arriba y
   la de la izquierda, y cada celda la suya de la derecha y la de abajo.
   Así todas miden y pesan igual. */
.rejilla{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:var(--linea) solid var(--blue);
  border-left:var(--linea) solid var(--blue);
}
.tarjeta{
  container-type:inline-size;
  display:flex; flex-direction:column;
  /* la portada va centrada y la tarjeta no se centra con ella: es la
     misma pieza que en el índice y se lee igual en los dos sitios */
  text-align:left;
  padding:18px 20px 0;
  /* 27vw en el magazine es para titulares de tres líneas. Una palabra
     ocupa una, así que la celda se recalcula: bastante para que respire
     y no tanto que quede medio vacía. */
  min-height:clamp(200px,16vw,270px);
  border-right:var(--linea) solid var(--blue);
  border-bottom:var(--linea) solid var(--blue);
}
/* El ámbito ocupa el sitio de la fecha en la tarjeta del magazine, y es
   quien lleva el color de dato. El filete de color por celda que tenía
   la v1 se retira: rompía la uniformidad de la retícula. */
.tarjeta__ambito{
  font-size:var(--t-cap); font-weight:var(--w-emph);
  letter-spacing:.06em; color:var(--c,var(--blue));
}
.tarjeta__palabra{
  display:block; margin-top:clamp(14px,2.4vw,26px);
  font-size:var(--t-lista); font-weight:var(--w-emph); color:var(--blue);
  line-height:1.08; letter-spacing:-.02em;
  overflow-wrap:break-word; hyphens:auto;
}
.tarjeta__def{
  margin-top:10px; font-size:var(--t-ui); line-height:1.4;
  color:color-mix(in srgb,var(--blue) 78%,var(--paper));
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.tarjeta__pie{
  margin-top:auto; padding:clamp(18px,2.6vw,30px) 0 16px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
/* EL NÚMERO DE ENTRADA
   El de inventario: se pone cuando la palabra entra al diccionario y no
   cambia nunca. Va en el sitio de menos peso de la celda, la esquina de
   abajo a la derecha, porque la palabra manda sobre todo lo demás. Sin
   denominador: el total crece cada semana y se dice una sola vez arriba,
   no cuatrocientas en la retícula. */
.tarjeta__num{
  font-family:var(--sans); font-size:var(--t-cap); font-weight:var(--w-emph);
  letter-spacing:.04em; color:color-mix(in srgb,var(--blue) 45%,var(--paper));
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* LA ESTELA
   La celda se tiñe al pisarla y se apaga sola en 1,2s al soltarla, así
   que barrer la rejilla deja detrás un rastro de por dónde has pasado.
   Va por animación y no por transición porque la tarjeta hereda la del
   reveal, que es más específica y se comería el color. */
@keyframes estela-se-apaga{from{background-color:var(--mint)} to{background-color:transparent}}
@keyframes estela-etiqueta{
  from{background-color:var(--blue); color:var(--mint)}
  to  {background-color:var(--mint); color:var(--blue)}
}
.js .rejilla .tarjeta.calor{background-color:var(--mint)}
.js .rejilla .tarjeta.enfriando{animation:estela-se-apaga 1.2s var(--ease) both}
/* menta sobre menta sería un agujero: la pastilla se invierte mientras
   la celda está caliente, y vuelve con ella */
.js .rejilla .tarjeta.calor .etiqueta{background-color:var(--blue); color:var(--mint)}
.js .rejilla .tarjeta.calor .tarjeta__num{color:var(--blue)}
.js .rejilla .tarjeta.enfriando .etiqueta{animation:estela-etiqueta 1.2s var(--ease) both}

/* Celda de relleno: el índice completa la última fila con cajas tachadas.
   Las palabras relacionadas no usan relleno: solo existen las tarjetas reales. */
.tarjeta--vacia{
  border-right:var(--linea) solid var(--blue);
  border-bottom:var(--linea) solid var(--blue);
  padding:0; min-height:clamp(200px,16vw,270px);
}
.tarjeta--vacia svg{display:block; width:100%; height:100%; stroke:var(--blue); stroke-width:var(--linea)}

.rejilla--sueltas{
  display:flex; flex-wrap:wrap; gap:12px; border:0;
}
.rejilla--sueltas .tarjeta{
  flex:0 1 270px; min-height:250px; border:var(--linea) solid var(--blue);
}
@media (max-width:640px){.rejilla--sueltas .tarjeta{flex-basis:100%;min-height:0}}

@media (max-width:980px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .tarjeta,.tarjeta--vacia{min-height:38vw}
}
@media (max-width:640px){
  .rejilla{grid-template-columns:1fr}
  .tarjeta{min-height:0}
  .tarjeta--vacia{display:none}
}

.vacio{padding:40px var(--margen); font-size:var(--t-ui)}

/* ── Portada ────────────────────────────────────────────────────────
   Pantalla completa con la ficha girando en el medio, que es como estaba
   en la maqueta validada y como se ha decidido que siga.

   Aquí NO va el rótulo a sangre del magazine: probado, empujaba la
   ruleta a un lado y la dejaba de acompañante. Esta portada tiene su
   propio gancho, y el gancho es la ficha que gira. El sistema pone la
   letra, el color y los objetos; la jerarquía de esta página la manda la
   funcionalidad que se decidió para ella. */
#v-portada{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.8rem; padding:3rem var(--margen) 2rem; text-align:center;
}
.titular{
  font-size:var(--t-md); font-weight:var(--w-emph);
  line-height:1.12; letter-spacing:-.03em;
  max-width:20ch; margin:0; text-wrap:balance;
}
.portada__cierre{font-size:var(--t-ui); line-height:1.5; max-width:44ch; margin:0}
.firma{font-size:var(--t-cap); letter-spacing:.06em; opacity:.7; margin:0}
.firma a{text-decoration:underline; text-decoration-color:var(--mint); text-underline-offset:3px}

/* El rodillo, con las medidas de la maqueta validada: ficha de 17rem de
   ancho por 24 de alto, y el botón del mismo ancho que la ficha. */
:root{--ancho-ficha:min(17rem,100%)}
#b-entrar{width:var(--ancho-ficha); justify-content:center}
.rodillo{--h:24rem; width:var(--ancho-ficha); height:var(--h); overflow:hidden;
  border-top:var(--linea) solid var(--blue); border-left:var(--linea) solid var(--blue)}
.tira{display:flex; flex-direction:column; will-change:transform}
/* Menos el borde de arriba del rodillo: si la ficha mide el alto entero,
   sobresale esos dos píxeles y el recorte se come su línea de abajo, y la
   tarjeta se ve abierta por el pie. */
.tira > *{flex:0 0 calc(var(--h) - var(--linea)); min-height:0}
/* Rueda a velocidad constante hasta el 43% del tiempo y a partir de ahí
   frena. La curva del frenado arranca a la velocidad que traía, así que
   se ve un solo movimiento que se para. */
@keyframes rodar{
  0%    {transform:translateY(0);         animation-timing-function:linear}
  43.2% {transform:translateY(var(--y1)); animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  100%  {transform:translateY(var(--y2))}
}

/* ── La ficha de una palabra ────────────────────────────────────────
   Patrón de lector del magazine: columna fija a la izquierda con lo que
   no es texto, contenido a la derecha. Colapsa a una sola columna en
   860px, que es donde colapsa el suyo.
   El orden lo manda el CLAUDE.md de este proyecto: la palabra primero,
   su descripción después y el contexto al final. Apilado en el teléfono
   sale en ese orden exacto. */
.article{padding:clamp(24px,4vh,44px) clamp(20px,4vw,56px) 0}
.article__in{
  display:grid; grid-template-columns:minmax(290px,40%) 1fr;
  align-items:start; padding-bottom:clamp(40px,8vh,120px);
}
.article__aside{
  position:sticky; top:calc(var(--nav-h) + clamp(10px,1.6vh,24px));
  align-self:start; padding-right:clamp(26px,3.6vw,60px);
  display:flex; flex-direction:column;
}
.article__kicker{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:var(--t-cap); font-weight:var(--w-emph);
  letter-spacing:.06em; color:var(--c,var(--blue));
  margin-bottom:clamp(12px,2vh,20px);
}
/* El número de entrada comparte línea con el ámbito, arriba y a la
   derecha, que es donde no le quita sitio a la palabra. En azul tenue y
   no en el color del ámbito: es un dato de inventario, no de contenido. */
.article__num{
  color:color-mix(in srgb,var(--blue) 45%,var(--paper));
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.palabra{
  font-size:max(44px,var(--t-lg)); font-weight:var(--w-emph);
  line-height:.98; letter-spacing:-.035em;
  overflow-wrap:break-word; hyphens:auto;
  margin-bottom:clamp(12px,2vh,20px);
}
.variantes{font-size:var(--t-ui); line-height:1.4; opacity:.8}
.article__datos{display:flex; flex-wrap:wrap; gap:6px; margin-top:clamp(14px,2vh,20px)}
.volver{margin-top:clamp(22px,3.4vh,38px)}

/* Compartir: aquí pesa más que en el magazine, porque una palabra se
   manda por WhatsApp en mitad de una conversación. */
.article__share{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:18px;
  margin-top:clamp(28px,4vh,48px); padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--blue) 30%,transparent);
  font-size:var(--t-cap);
}
.article__share-label{font-weight:var(--w-emph); letter-spacing:.08em; opacity:.65}
.article__share-link{
  font-family:var(--sans); font-size:var(--t-cap); font-weight:var(--w-emph);
  color:var(--blue); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-align:left;
}
.article__share-link:hover,.article__share-link:focus-visible{opacity:.65}

.definicion{
  font-size:var(--t-body); font-weight:var(--w-emph);
  line-height:1.5; letter-spacing:-.01em;
  margin-bottom:clamp(28px,5vh,52px);
  margin-left:1.4em;   /* en em: el sangrado encoge con la letra */
}
.definicion br{content:""}
.definicion b,.definicion strong{font-weight:700}
.definicion u{text-underline-offset:.16em}
.dicho{
  border-left:1px solid var(--blue);
  padding:4px 0 4px clamp(20px,3vw,32px);
  margin:clamp(28px,4vh,44px) 0;
  font-style:italic; font-size:var(--t-body); line-height:1.5;
  color:color-mix(in srgb,var(--blue) 90%,var(--paper));
}
.dicho span{
  display:block; font-style:normal;
  font-size:var(--t-cap); font-weight:var(--w-emph);
  letter-spacing:.06em; opacity:.6; margin-top:.6rem;
}
/* El aviso dice lo que falta, y por eso se ve: se marca con la menta,
   que es el acento del sistema, sin inventar un color de alerta. */
.aviso{
  margin:clamp(24px,4vh,40px) 0; padding:14px 16px 14px 18px;
  border-left:3px solid var(--mint);
  background-color:color-mix(in srgb,var(--mint) 22%,var(--paper));
  font-size:var(--t-ui); line-height:1.5;
}
.datos{
  margin-top:clamp(34px,6vh,64px); padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid var(--blue);
  display:grid; grid-template-columns:1fr; gap:clamp(14px,2vh,22px);
}
@media (min-width:34rem){.datos{grid-template-columns:1fr 1fr; gap:22px 40px}}
.datos dt{
  font-size:var(--t-cap); font-weight:var(--w-emph);
  letter-spacing:.1em; text-transform:uppercase; opacity:.55; margin-bottom:4px;
}
.datos dd{font-size:var(--t-ui); line-height:1.35}
.datos a{text-decoration:underline; text-decoration-color:var(--mint); text-underline-offset:3px}

.hermanas{margin-top:clamp(40px,7vh,80px)}
.hermanas__label{
  font-size:var(--t-cap); font-weight:var(--w-emph); letter-spacing:1.5px;
  margin:0 0 15px;
}
.saltos{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(34px,6vh,64px); padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid color-mix(in srgb,var(--blue) 30%,transparent);
}

/* Apilado, el orden lo manda el CLAUDE.md del proyecto: la palabra, su
   descripción y al final el contexto. Con `volver` y `compartir` donde
   los pone el escritorio, la definición se iba fuera de la primera
   pantalla del teléfono. `display:contents` disuelve la columna y deja
   ordenar sus piezas sin duplicar una línea de HTML. */
@media (max-width:860px){
  .article__in{grid-template-columns:1fr}
  .article__aside{display:contents}
  .article__kicker{order:1}
  .palabra{order:2}
  .variantes{order:3}
  .article__datos{order:4; margin-bottom:clamp(22px,4vh,36px)}
  .article__main{order:5}
  .volver{order:6; margin-top:clamp(28px,5vh,44px)}
  .article__share{order:7}
}
/* En 390px el cuerpo a 21px deja la línea en 33 caracteres, por debajo
   de lo cómodo. A 18 se pone en 39. Solo el texto que se lee: los
   titulares y las etiquetas no se tocan. */
@media (max-width:640px){
  .definicion,.dicho{font-size:18px}
  .palabra{font-size:38px; line-height:1.06; letter-spacing:-.02em}
  .definicion{margin-left:0; padding-left:14px; border-left:2px solid var(--mint)}
}
@media (max-width:360px){
  .definicion,.dicho{font-size:16px}
  .palabra{font-size:32px}
  .bloque__titulo{font-size:38px}
}

/* ── La nota y el pie ───────────────────────────────────────────── */
.zona-cierre{margin:clamp(40px,7vh,80px) var(--margen) 0}
.nota{
  border:1px solid var(--blue); box-shadow:var(--press) var(--press) 0 0 var(--blue);
  padding:clamp(18px,2.4vw,28px); max-width:52rem;
  font-size:var(--t-ui); line-height:1.5;
}
.nota b{font-weight:var(--w-emph)}
.nota ul{margin:.6rem 0 0; padding-left:1.1rem}
.pie{
  margin-top:clamp(40px,7vh,80px);
  background-color:var(--blue); color:var(--ice);
  padding:clamp(40px,6vh,72px) var(--pad) 28px;
  line-height:1.4;
}
.pie__slogan{font-size:var(--t-md); font-weight:var(--w-emph); line-height:1.05; max-width:14ch}
.pie__meta{margin-top:clamp(30px,5vh,56px); font-size:var(--t-cap); opacity:.7}
.pie a{text-decoration:underline; text-underline-offset:3px}

/* ── Volver arriba ──────────────────────────────────────────────── */
.totop{
  position:fixed; right:clamp(20px,4vw,56px); bottom:clamp(20px,4vw,56px); z-index:230;
  width:56px; height:56px; border-radius:0;
  display:grid; place-items:center; appearance:none; -webkit-appearance:none;
  background:var(--paper); color:var(--blue); border:1.5px solid var(--blue);
  cursor:pointer; font-size:29px; line-height:1;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             box-shadow var(--dur-press) var(--ease);
}
.totop.is-on{opacity:1; transform:none; pointer-events:auto}
.totop:hover,.totop:focus-visible{outline:none; box-shadow:var(--press) var(--press) 0 0 var(--blue)}

/* ── El cursor ──────────────────────────────────────────────────────
   El blob de menta de la casa, en multiply. La flecha del sistema se
   queda visible por encima. En táctil no hay puntero al que seguir. */
.cursor{
  position:fixed; top:0; left:0; width:64px; height:64px;
  border-radius:50%; background:var(--mint);
  mix-blend-mode:multiply; pointer-events:none; z-index:9999;
  will-change:transform; opacity:0;
  transition:opacity .3s ease, width .25s var(--ease), height .25s var(--ease);
}
.cursor.is-active{opacity:1}
.cursor.is-hover{width:110px; height:110px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── La entrada ─────────────────────────────────────────────────────
   Opacidad, recorrido y desenfoque, disparado una vez por
   IntersectionObserver, sin librerías. Va detrás de `.js`, que se pone
   en el <head> antes de pintar: sin JavaScript no se esconde nada y el
   texto no puede quedarse invisible esperando a nadie. */
.js [data-reveal]{
  opacity:0; transform:translateY(var(--dist-reveal-y));
  filter:blur(var(--blur-reveal));
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-viaje) var(--ease),
             filter var(--dur-reveal) var(--ease);
  transition-delay:var(--retardo,0ms);
  will-change:transform,opacity,filter;
}
.js [data-reveal].in{opacity:1; transform:none; filter:blur(0)}
.js [data-reveal].in.asentado{will-change:auto}
/* Lo que ya se veía al abrir no viaja: está puesto y lo descubre el velo. */
.js [data-reveal].sin-gesto{transition:none!important}
/* El cuerpo de lectura, en voz baja: sube un tercio y no se desenfoca.
   El gesto fuerte se guarda para las junturas. */
.js .article__main [data-reveal]{
  transform:translateY(var(--dist-leve-y)); filter:none;
  transition:opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease);
}
.js .article__main [data-reveal].in{transform:none}

/* Con el dedo: lo que se pulsa necesita 44px. Se agranda la zona que
   recibe el toque, no el dibujo. */
@media (hover:none),(pointer:coarse){
  .boton{padding:13px 18px}
  .article__share{gap:4px 20px}
  .article__share-link{padding:12px 0}
}

/* La regla del respeto: con movimiento reducido esto no es una web
   degradada, es la misma web quieta. Todo visible, nada viajando. */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .article__main [data-reveal]{
    opacity:1!important; transform:none!important;
    filter:none!important; transition:none!important;
  }
  .velo{display:none}
  .boton,.nav,.totop,.panel__caja,.panel__fondo,.mandos-abrir{transition:none!important}
  .boton:hover,.boton:focus-visible{transform:none}
  /* La ruleta NO se para: es la funcionalidad de la portada, decidida
     así, y no un adorno. En esta página el movimiento reducido se lleva
     el desenfoque de las entradas, no el gancho. */
  .js .rejilla .tarjeta.calor,.js .rejilla .tarjeta.enfriando{
    background-color:transparent; animation:none;
  }
  .js .rejilla .tarjeta.calor .etiqueta,.js .rejilla .tarjeta.enfriando .etiqueta{
    background-color:var(--mint); color:var(--blue); animation:none;
  }
}

/* ═══ IMPRESIÓN ══════════════════════════════════════════════════════
   En papel no hay barra, ni cursor, ni velo, ni botones: la palabra y
   lo que se sabe de ella. Una ficha impresa es una ficha de campo. */
@media print{
  @page{margin:18mm 16mm}
  .nav,.velo,.cursor,.totop,.mandos,.saltos,.article__share,.volver,
  .hermanas,.rodillo,.portada__acciones,.bloque__barra{display:none!important}
  /* Nada puede quedarse esperando a entrar: al imprimir no hay scroll
     que dispare nada. Sin esto, media hoja saldría en blanco. */
  [data-reveal],[data-reveal].in{
    opacity:1!important; transform:none!important;
    filter:none!important; animation:none!important; transition:none!important;
  }
  html,body{background:#fff!important; color:#000!important}
  .article{padding-top:0!important}
  .article__in{display:block!important}
  .article__aside{position:static!important; padding-right:0!important; margin-bottom:10mm}
  .palabra{font-size:24pt!important; line-height:1.1!important}
  .definicion,.dicho,.datos dd{font-size:11pt!important}
  .definicion{margin-left:0!important}
  .etiqueta{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .datos,.dicho,.aviso,.nota{break-inside:avoid}
  .pie{background:none!important; color:#000!important; padding:0!important}
  a{text-decoration:underline}
}

/* Navegación pública añadida al separar el diccionario de la portada-juego. */
.nav__publica{display:flex;align-items:center;gap:20px;font-size:var(--t-cap);font-weight:var(--w-emph)}
.nav__publica a{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:4px;text-underline-offset:4px}
@media(max-width:640px){.nav__publica{gap:12px}.nav__publica .nav__cuenta{display:none}}