/* ==========================================================================
   Lease & Layer: hoja unica del sitio.
   Orden: tokens, reset, anchuras, tipografia, firmas, cabecera, botones,
   bloques, interactivos, efectos, movimiento reducido.
   Reglas duras: seis colores (mas blanco y transparente), pesos <= 600,
   nunca transition:all, hover solo en puntero fino, nada aparcado en opacity:0.
   Comentarios en espanol sin acentos: esta hoja se pega tal cual en WordPress.
   ========================================================================== */

/* R16: fuentes alojadas en el propio sitio (latin, woff2). Antes venian de
   Google Fonts: una hoja que bloqueaba el pintado y dos dominios mas. */
@font-face{font-family:"Caveat";font-style:normal;font-weight:600 700;font-display:swap;src:url("../fonts/caveat-600-700.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/courierprime-700.woff2") format("woff2")}
@font-face{font-family:"Karla";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/karla-400i.woff2") format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/karla-400-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}


/* --------------------------------------------------------------------------
   1. Tokens. Seis colores. Un color con alfa sigue siendo ese color.
   -------------------------------------------------------------------------- */
:root{
  /* R16 (25 sep 2026): la paleta pasa a la del canal de YouTube. Los nombres
     viejos se quedan porque 1800 lineas los usan; cambia lo que valen:
     parchment = papel del canal, espresso = tinta de texto (navy sobreimpreso,
     10,2:1), clay = coral de texto (4,9:1), olive = teal de texto (5,3:1).
     (Se probo una version polvosa medida en los fotogramas; Kyara prefirio
     las tintas vivas.)
     Las tintas puras (navy, teal, sun, coral) viven en la capa de marca, al
     final, y solo pintan dibujos, fondos y letra grande. */
  --parchment:#F2EADB; --ivory:#FBF8F2; --espresso:#2B3452;
  --clay:#B8324A; --olive:#006B71; --stone:#D8CCBD;
  --display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --mono:"Courier Prime","Courier New",ui-monospace,monospace;
  --w-h1:700; --w-h2:700; --w-h3:600;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  color-scheme:only light;

  /* roles: quien manda sobre que. Todo sale de los seis de arriba. */
  --ground:#F2EADB; --surface:#FBF8F2;
  --ink:#2B3452; --ink-soft:#2B3452D8; --ink-faint:#2B3452A9;
  --accent:#B8324A; --accent-ink:#FBF8F2; --second:#006B71;
  --rule:#D8CCBD; --rule-soft:#D8CCBD66;

  /* escala de home.v1 mas --s5 para los numerales */
  --s-2:clamp(.75rem,.72rem + .09vw,.8rem);
  --s-1:clamp(14px,.77rem + .12vw,15px);
  --s0:clamp(1.05rem,1.01rem + .18vw,1.16rem);
  --s1:clamp(1.22rem,1.14rem + .36vw,1.46rem);
  --s2:clamp(1.5rem,1.33rem + .75vw,2.1rem);
  --s3:clamp(2.1rem,1.7rem + 1.8vw,3.4rem);
  --s4:clamp(2.8rem,2rem + 3.6vw,5.4rem);
  --s5:clamp(64px,10vw,128px);

  --sp-section:clamp(54px,7vw,104px);
  --sp-block:clamp(30px,4.5vw,58px);
  --sp-tight:clamp(16px,2vw,24px);
  --gut:clamp(16px,3vw,24px);

  /* alto real del masthead: lo escribe ll.js, sirve de ancla a la regla */
  --mh:72px;
}

/* Fondos. El BRIEF fija estas tres reglas; lo demas son roles derivados. */
.on-espresso{
  --ground:#3D5588;--ink:#F2EADB;--accent:#FFC94A;--accent-ink:#2B3452;
  background:radial-gradient(circle,#F2EADB24 0 .9px,transparent 1.3px) 0 0/4px 4px,#3D5588;color:#F2EADB;
  --surface:#3D5588;--ink-soft:#F2EADBE6;--ink-faint:#F2EADBCC;
  --second:#D8CCBD;--rule:#F2EADB3D;--rule-soft:#F2EADB24;
}
.on-olive{
  --ground:#0A6166;--ink:#F2EADB;--accent:#FFC94A;--accent-ink:#0A6166;
  background:radial-gradient(circle,#F2EADB21 0 .9px,transparent 1.3px) 0 0/4px 4px,#0A6166;color:#F2EADB;
  --surface:#006B71;--ink-soft:#F2EADB;--ink-faint:#F2EADB;
  --second:#F2EADB;--rule:#F2EADB44;--rule-soft:#F2EADB29;
}
.on-ivory{--ground:#FBF8F2;background:#FBF8F2;border-block:1px solid var(--stone)}

/* --------------------------------------------------------------------------
   2. Reset minimo
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--mh) + 16px)}
body{
  margin:0;background:var(--parchment);color:var(--espresso);
  font-family:var(--body);font-size:var(--s0);line-height:1.74;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
a{color:inherit}
p{margin:0 0 1.32em}
/* ningun elemento puede caer en 700 por herencia del navegador */
b,strong,th{font-weight:var(--w-h3)}
h1,h2,h3,h4,h5,h6{font-weight:var(--w-h2);margin:0 0 .4em}
button,input,select,textarea{font:inherit;color:inherit}
/* los controles nacen con gris de sistema: se apaga aqui o se cuela un septimo color */
button{background-color:transparent;border:0;cursor:pointer}
input,select,textarea{background-color:transparent;border-color:var(--rule)}
input[type="range"]{border:0}
option{color:var(--espresso);background-color:var(--ivory)}
hr{border:0;height:1px;background:var(--rule)}
/* un .btn oculto seguiria siendo inline-block si no se gana la pelea aqui */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--stone);color:var(--espresso)}
/* el datalist no se pinta, pero el auditor de color lo lee igual */
datalist,datalist option{color:var(--espresso);background-color:var(--parchment)}

/* --------------------------------------------------------------------------
   3. Anchuras
   -------------------------------------------------------------------------- */
.full{max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
/* El boton de guardar en Pinterest vive en su propia <section>, y una seccion
   trae 89,6 px de aire arriba y abajo. Para 44 px de boton eso son 179 px de
   aire propio SUMADOS al aire de las dos secciones vecinas: 402 px de hueco
   con un boton flotando en medio. Se le quita el suyo y el boton pasa a vivir
   dentro del hueco normal que ya habia entre esas dos secciones. */
.pin-only{padding-block:0}
.wide{max-width:1080px;margin-inline:auto;padding-inline:var(--gut)}
.col{max-width:68ch;margin-inline:auto;padding-inline:var(--gut)}
.full .col,.wide .col{padding-inline:0}
section{padding-block:var(--sp-section)}

/* --------------------------------------------------------------------------
   4. Tipografia. Playfair es didone: cuanto mas grande, mas ligera.
   -------------------------------------------------------------------------- */
h1{font-family:var(--display);font-weight:var(--w-h1);font-size:var(--s4);line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
h2{font-family:var(--display);font-weight:var(--w-h2);font-size:var(--s3);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h3{font-family:var(--display);font-weight:var(--w-h3);font-size:var(--s1);line-height:1.25}
h4{font-family:var(--mono);font-weight:500;font-size:var(--s-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.kicker,.eyebrow{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 var(--sp-tight)}
.lede{font-family:var(--display);font-size:var(--s2);font-weight:400;line-height:1.36;margin:0 0 1em;text-wrap:balance}
.fine{font-size:var(--s-1);color:var(--ink-faint);line-height:1.6}
.mono{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase}
.folio{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.pull{margin:0 0 var(--sp-tight);padding:clamp(26px,4vw,42px);background:var(--clay);color:var(--ivory);text-align:center}
.on-espresso .pull,.on-olive .pull{background:var(--parchment);color:var(--espresso)}
.pull p{margin:0;font-family:var(--display);font-size:var(--s2);line-height:1.28;font-weight:400;text-wrap:balance}
.note{margin:var(--sp-tight) 0;padding:22px 24px;border:1px solid var(--rule);font-size:var(--s-1);line-height:1.68;color:var(--ink-soft)}
.note strong{color:var(--ink)}
.math{font-family:var(--display);font-weight:400;font-size:var(--s2);font-variant-numeric:tabular-nums;text-align:center;padding:24px 16px;margin:0 0 var(--sp-tight);border-block:1px solid var(--rule);overflow-x:auto;white-space:nowrap}
.math b{color:var(--accent);font-weight:var(--w-h2)}

/* Capitular. Solo en cartas y guias, una por pagina. */
.dropcap::first-letter{
  font-family:var(--display);font-weight:400;font-size:3.3em;line-height:.82;
  float:left;margin:.06em .1em 0 0;color:var(--clay);
}

/* --------------------------------------------------------------------------
   5. Las seis firmas
   -------------------------------------------------------------------------- */

/* 5.1 Capas: mat de parchment, sombra corta, inclinacion de -1 a 2 grados.
   Ojo con la foto que va dentro: el auditor mide el rectangulo envolvente,
   y al girar una imagen ese rectangulo cambia de proporcion. Una 4:5 o una 1:1
   aguantan el rango entero; una panoramica 2.48 solo aguanta medio grado. */
.layer{
  padding:12px;background:var(--parchment);
  box-shadow:0 10px 30px -18px rgba(48,39,32,.45);
  transform:rotate(var(--tilt,-1deg));
  transition:transform 320ms var(--ease-out);
}
.layer>img,.layer>.slot{width:100%}

/* 5.2 Numerales: lo mas grande de su seccion, siempre. */
.numeral{
  font:400 var(--s5)/0.95 var(--display);
  letter-spacing:-.02em;font-variant-numeric:lining-nums;
  display:block;color:var(--ink);
}

/* 5.3 Diagramas del sprite. Contrato de A1 (img/diagrams.svg), tal cual:
   el sprite no lleva non-scaling-stroke porque en Chrome eso hace que el
   navegador calcule el guion ignorando pathLength, y los diagramas saldrian
   punteados en reposo. El grosor constante sale de --w, el ancho sin unidad. */
.dg{ display:block; max-width:100%; color:var(--espresso);
     stroke-dasharray:1; stroke-dashoffset:var(--dg-draw,0);
     fill-opacity:calc(1 - var(--dg-draw,0));
     transition:stroke-dashoffset 900ms var(--ease-out),
                fill-opacity 900ms var(--ease-out) }
.dg.n{ aspect-ratio:3/2; --dg-sw:calc(360 / var(--w)) }   /* 30 numeros, viewBox 240x160 */
.dg.r{ aspect-ratio:1/1; --dg-sw:calc(180 / var(--w)) }   /* 6 iconos de cuarto, viewBox 120x120 */
/* --w es el ancho de verdad: si no, el grosor calculado no coincide con el pintado */
.dg{width:calc(var(--w,200) * 1px)}
/* sobre fondo oscuro el trazo tiene que darse la vuelta */
.on-espresso .dg,.on-olive .dg{color:var(--parchment)}
/* El halo que lleva cada rotulo de cota tiene que ser del color del fondo
   sobre el que cae, o se ve un contorno claro alrededor de la cifra.
   Sirve para que la linea de cota se interrumpa debajo del numero, que es
   como se dibuja un plano y como se deja de leer un 24 con una raya encima. */
.dg{--dg-bg:var(--parchment)}
.on-espresso .dg{--dg-bg:var(--espresso)}
.on-olive .dg{--dg-bg:var(--olive)}

/* 5.4 Regla de carpintero: sustituye a cualquier hr. */
.ruler{
  height:12px;border:0;margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cg fill='%23302720' fill-opacity='.28'%3E%3Crect x='0' y='2' width='1' height='10'/%3E%3Crect x='8' y='6' width='1' height='6'/%3E%3Crect x='16' y='6' width='1' height='6'/%3E%3Crect x='24' y='6' width='1' height='6'/%3E%3Crect x='32' y='6' width='1' height='6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 bottom;
}
.on-espresso .ruler,.on-olive .ruler{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cg fill='%23F3EDE3' fill-opacity='.38'%3E%3Crect x='0' y='2' width='1' height='10'/%3E%3Crect x='8' y='6' width='1' height='6'/%3E%3Crect x='16' y='6' width='1' height='6'/%3E%3Crect x='24' y='6' width='1' height='6'/%3E%3Crect x='32' y='6' width='1' height='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* 5.5 Etiqueta de cinta. Una por pagina, en el hero. Extremos rasgados. */
/* Cinta de carrocero. Era un poligono de clip-path: funcionaba, pero de cerca
   se notaba que era geometria. Ahora es una cinta real escaneada, con sus
   fibras y sus bordes rasgados de verdad, montada con border-image para que
   los dos extremos rotos mantengan su tamaño y solo se estire el centro:
   asi una etiqueta corta y una larga se ven igual de reales. 20 KB, una vez,
   para todo el sitio. Si el navegador no soportara border-image, queda el
   fondo stone de respaldo y no se rompe nada. */
.tape{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--espresso);
  background:#D8CCBDD9;padding:9px 20px;transform:rotate(-1.5deg);
  border:0 solid transparent;border-width:14px 34px;
  border-image-source:url("../img/masking-tape-real.webp");
  border-image-slice:26 60 26 60 fill;
  border-image-repeat:stretch;
  margin:-14px -20px;
}
@supports (border-image-slice:1 fill){
  .tape{background:transparent;box-shadow:none}
}

/* 5.6 Grano de papel. Fijo, 4%, multiply, nunca un filtro en vivo. */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Borde rasgado entre parchment y espresso u olive. Amplitud 1 a 6 px,
   vertices irregulares a proposito: una onda perfecta se lee como plantilla. */
.torn{clip-path:polygon(
  0 5px, 7% 1px, 14% 4px, 22% 0, 31% 3px, 39% 6px, 47% 2px, 56% 5px,
  64% 1px, 72% 4px, 81% 0, 89% 3px, 96% 6px, 100% 2px,
  100% calc(100% - 4px), 94% calc(100% - 1px), 86% calc(100% - 5px),
  78% calc(100% - 2px), 69% calc(100% - 6px), 61% calc(100% - 3px),
  52% 100%, 44% calc(100% - 4px), 36% calc(100% - 1px),
  27% calc(100% - 5px), 19% calc(100% - 2px), 11% calc(100% - 6px),
  4% calc(100% - 3px), 0 calc(100% - 1px))}
.torn-top{clip-path:polygon(
  0 5px, 7% 1px, 14% 4px, 22% 0, 31% 3px, 39% 6px, 47% 2px, 56% 5px,
  64% 1px, 72% 4px, 81% 0, 89% 3px, 96% 6px, 100% 2px, 100% 100%, 0 100%)}
.torn-bottom{clip-path:polygon(
  0 0, 100% 0, 100% calc(100% - 4px), 94% calc(100% - 1px), 86% calc(100% - 5px),
  78% calc(100% - 2px), 69% calc(100% - 6px), 61% calc(100% - 3px),
  52% 100%, 44% calc(100% - 4px), 36% calc(100% - 1px),
  27% calc(100% - 5px), 19% calc(100% - 2px), 11% calc(100% - 6px),
  4% calc(100% - 3px), 0 calc(100% - 1px))}

/* --------------------------------------------------------------------------
   6. Cabecera: masthead, nav, buscador, conversor, regla de progreso
   -------------------------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:30;background:var(--espresso);color:var(--parchment)}
.masthead-in{
  max-width:1320px;margin-inline:auto;padding-inline:var(--gut);
  min-height:72px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  transition:min-height 220ms var(--ease-out);
}
.masthead.is-compact .masthead-in{min-height:56px}
.wordmark{
  font-family:var(--display);font-weight:400;font-size:1.22rem;letter-spacing:.02em;
  line-height:1;text-decoration:none;white-space:nowrap;flex:none;
  transform-origin:left center;
  transition:transform 220ms var(--ease-out);
}
.masthead.is-compact .wordmark{transform:scale(.9)}
.nav{display:flex;gap:18px;flex-wrap:wrap}
/* "The numbers" se partia en dos lineas a 400 px y engordaba el masthead de 44
   a 64. Con nowrap no se parte; y como entonces los seis podrian no caber, en
   pantallas estrechas la fila se desliza de lado en vez de apilarse. La barra
   se oculta pero el gesto funciona. */
.nav a{white-space:nowrap}
@media (max-width:560px){
  .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
       margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);gap:16px}
  .nav::-webkit-scrollbar{display:none}
}
.nav a{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;
  color:#F2EADBD0;text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center;
  transition:color 160ms var(--ease-out);
}
.nav a[aria-current="page"]{color:var(--parchment);box-shadow:inset 0 -1px 0 var(--stone)}

/* Buscador con sugerencias en datalist. Sin backend: lleva al indice de guias. */
.search{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 1 260px;min-width:0}
.search input{
  flex:1;min-width:0;font-family:var(--body);font-size:var(--s-1);
  background:#F2EADB14;border:1px solid #F2EADB33;color:var(--parchment);
  padding:9px 12px;min-height:44px;
  transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out);
}
.search input::placeholder{color:#F2EADB80}
.search input:focus{outline:0;border-color:var(--stone);background:#F2EADB1F}
/* El boton salia a 39,7 x 38,9: por debajo de 44 en las dos dimensiones, y es
   la unica forma de buscar en el sitio. Aqui no vale el truco de la zona tactil
   invisible, porque al lado esta el campo de texto y se pisarian. */
.search button{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid #F2EADB33;color:#F2EADBAD;padding:9px 11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out),transform 160ms var(--ease-out);
}
.search button:active{transform:scale(.97)}

/* Conversor global in/cm. Persiste en localStorage["ll-unit"]. */
.unit{display:flex;border:1px solid #F2EADB33;flex:none}
.unit button{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:0;color:#F2EADBAD;padding:9px 12px;cursor:pointer;position:relative;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 160ms var(--ease-out);
}
/* El conmutador vive en una barra estrecha: en vez de engordarlo hasta 44 y
   empujar el masthead, se le estira la zona tactil hacia arriba y hacia abajo.
   Mismo truco que .shop-dot. Solo en vertical, que si no los dos se pisan.
   El ancho si hubo que darlo de verdad: salia a 40,8 y son dos botones pegados,
   asi que estirar la zona tactil a los lados haria que al apuntar a "in" se
   pulsara "cm". En movil el conmutador vive dentro del panel del menu, donde
   sobra sitio, asi que no engorda la cabecera. */
.unit button{min-width:44px}
.unit button::before{content:"";position:absolute;inset:-5px 0}
.unit button[aria-pressed="true"]{background:var(--parchment);color:var(--espresso)}
.unit button:active{transform:scale(.97)}

/* 5.9 Masthead en movil: marca + buscador + Menu, y nada mas. Las secciones
   y el conversor bajan al panel, que cuelga de aria-expanded. Sin JS el panel
   queda abierto: se ve todo, solo ocupa mas, que es el estado correcto.
   En escritorio .masthead-menu es display:contents, asi que .nav y .unit
   siguen siendo hijos directos del flex y la fila no cambia. */
.masthead-menu{display:contents}
.menu-btn{display:none}
/* el orden de la fila no depende del DOM: marca, secciones, buscador, unidades */
.wordmark{order:1}
.nav{order:2}
.search{order:3}
.unit{order:4}


@media (max-width:860px){
  .masthead-in{padding-block:10px;gap:10px}
  .wordmark{flex:1}
  .search{order:3;flex:1 1 100%;margin-left:0}
  .nav{order:4;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:16px;padding-bottom:2px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  /* al bajar, el buscador se va y el titular recupera pantalla */
  .masthead.is-compact .search{display:none}
}

/* Requisito 10 del prompt: el header movil es logo + buscador + Menu. Va
   despues del bloque de arriba a proposito: sobrescribe .wordmark{flex:1},
   que estiraba la marca a la fila entera y empujaba todo lo demas abajo. */
@media (max-width:860px){
  .masthead-in{gap:10px 8px}
  .wordmark{order:1;flex:none;font-size:1.06rem}
  .search{order:2;flex:1 1 90px;margin-left:0}
  .search input{padding:8px 10px}
  .menu-btn{
    /* 44 px de alto minimo: es la unica puerta a las secciones en un movil,
       y sale a 39 con el padding solo. inline-flex para que el min-height
       mande de verdad sobre el texto en versales. */
    order:3;flex:none;display:inline-flex;align-items:center;min-height:44px;
    font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
    background:transparent;border:1px solid #F2EADB33;color:#F2EADBAD;padding:9px 11px;cursor:pointer;
    transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out);
  }
  .menu-btn:active{transform:scale(.97)}
  .menu-btn[aria-expanded="true"]{background:var(--parchment);border-color:var(--parchment);color:var(--espresso)}
  .masthead-menu{order:4;display:block;flex-basis:100%;padding-bottom:4px}
  /* Dentro del panel el nav ENVUELVE. Antes del menu, las seis secciones eran
     una fila que se deslizaba de lado, porque no cabian en 400 px y apilarlas
     engordaba la cabecera. Dentro de un panel que ya esta desplegado eso es al
     reves: el deslizamiento lateral esconde entradas dentro de algo que la
     lectora abrio precisamente para verlas enteras. Dos clases ganan a la regla
     de 560 px por especificidad, este donde este en la hoja. */
  .masthead-menu .nav{
    margin-bottom:10px;flex-wrap:wrap;overflow-x:visible;gap:10px 18px;
    margin-inline:0;padding-inline:0;padding-bottom:0;
  }
  /* Cada seccion, una fila entera con su linea: dentro de un panel
     desplegado una lista se lee mejor que una nube de palabras, y asi cada
     una tiene los 44 px que pide un dedo. */
  .masthead-menu .nav{
    flex-direction:column;flex-wrap:nowrap;gap:0;margin-bottom:6px;
  }
  .masthead-menu .nav a{
    display:flex;align-items:center;min-height:44px;padding:0;
    border-bottom:1px solid #F2EADB1F;
  }
  .masthead-menu .nav a:last-of-type{border-bottom:0}

  /* El panel se separa del boton y del resto: sin esto se desplegaba sobre
     el mismo fondo sin una sola linea, y abrirlo no se distinguia de no
     haberlo abierto. */
  .js .masthead-menu{
    margin-top:10px;padding-top:6px;padding-bottom:10px;
    border-top:1px solid #F2EADB33;
  }
  .masthead-menu .unit{display:inline-flex}
  .js .masthead-menu{display:none}
  .js .menu-btn[aria-expanded="true"] ~ .masthead-menu{display:block}
}

/* 5.10 Dos estados en la misma caja. Una sola mecanica para el antes/despues
   de DIY y para el cordon de la lampara: dos fotos del mismo encuadre, la
   misma caja exacta (nada de salto de maquetacion) y un control.
   Sin JS las dos fotos salen apiladas con su pie: se leen igual, solo ocupan
   mas. El control solo aparece cuando puede funcionar.
   prefers-reduced-motion lo cubre el bloque global: el cambio es instantaneo
   y el estado final es el mismo. */
.ll-two{margin:0}
.ll-two-box{position:relative;overflow:hidden;background:var(--stone);border:1px solid var(--rule)}
.ll-two-box img{display:block;width:100%;height:auto}
.ll-two-cap{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:8px 0 0}

/* con JS las dos fotos se superponen en la misma caja */
.js .ll-two-box{aspect-ratio:var(--ar,3/2)}
.js .ll-two-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El opacity:0 de aqui es intencional y el auditor lo marca mal. Ya lo reportaron
   tres agentes; verificado el 19 sep y NO se toca. Es el estado inicial del
   "despues" de un antes/despues: la lectora tiene que ver el antes primero. Va
   bajo .js, asi que sin JavaScript las dos fotos se apilan visibles con su pie
   de foto (medido: opacity 1, position static, caja de 1010 px, mandos ocultos).
   La foto es lazy y esta a 15978 px, asi que no cuesta un byte hasta que se
   llega. Medido con transition:none: 0 al abrir, 1 al pulsar, 0 al volver. */
.js .ll-two-b{opacity:0;transition:opacity 340ms var(--ease-out)}
.js .ll-two.is-on .ll-two-b{opacity:1}
/* modo scrub: la de despues se descubre con un corte vertical que sigue al dedo */
.js .ll-two[data-ll-two="scrub"] .ll-two-b{opacity:1;transition:none;clip-path:inset(0 calc(100% - var(--x,0%)) 0 0)}
.js .ll-two[data-ll-two="scrub"] .ll-two-box::after{content:"";position:absolute;top:0;bottom:0;left:var(--x,0%);width:1px;background:var(--ivory);box-shadow:0 0 0 1px #2B345240;pointer-events:none}

/* el control. Boton para click y teclado, rango para arrastre y dedo. */
.ll-two-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
html:not(.js) .ll-two-ctl{display:none}
.js .ll-two-nojs{display:none}
/* Los dos mandos cumplen los 44 px como el resto del sitio. El boton salia a
   41 con el padding solo; el rango, a 16, que es la altura de la pista nativa.
   Al rango se le da la altura en la caja y no en la pista: el navegador centra
   la pista dentro y el dedo gana 28 px de margen sin que cambie nada de lo que
   se ve. */
.ll-two-btn{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;background:transparent;border:1px solid var(--ink);color:var(--ink);padding:10px 15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.ll-two-btn[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.ll-two-btn:active{transform:scale(.97)}
.ll-two-range{flex:1 1 170px;min-width:130px;accent-color:var(--accent);height:44px;margin:0}
.ll-two-say{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:10px 0 0;min-height:1.2em}

/* 5.11 La tabla de compra, contextual. El encargo pide que el producto
   aparezca DESPUES de que la lectora sabe su medida, y que se diga por que
   encaja. La tabla ya decia el porque; lo que faltaba era senalar su fila.
   El control lo inyecta ll.js, asi que sin JavaScript no hay mando muerto:
   la tabla se lee entera como hasta ahora, que es la respuesta completa. */
.fits{margin:0 0 var(--sp-tight)}
.fits-q{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
.fits-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* 44 px como el resto de mandos del sitio. Salia a 38,9 con el padding solo:
   es el quinto que aparece por debajo, asi que si añades un control, midelo. */
.fits-opt{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;background:transparent;border:1px solid var(--rule);color:var(--ink);padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.fits-opt[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:var(--parchment)}
.fits-say{font-size:var(--s0);font-weight:500;line-height:1.45;color:var(--ink);margin:12px 0 0;max-width:52ch;border-left:2px solid var(--accent);padding-left:12px;min-height:1.4em}

/* la fila que le toca. Se marca con borde y fondo, no solo con color, para
   que se distinga sin depender de la vista del color. */
.buy-tbl tr.is-fit>td{background:var(--ivory);box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.buy-tbl tr.is-fit>td:first-child{box-shadow:inset 2px 0 0 var(--accent),inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.buy-tbl tr.is-fit>td:last-child{box-shadow:inset -2px 0 0 var(--accent),inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.buy-tbl tr.is-dim>td{opacity:.62}
/* Sobre fondo oscuro el marcado de arriba se da la vuelta y desaparece: pinta
   la fila de ivory mientras el texto sigue en parchment, 251,248,242 sobre
   243,237,227, que es contraste 1,05:1. Hoy las tres tablas estan sobre fondo
   claro, asi que es una trampa para el que mueva una seccion, no un fallo vivo.
   Misma familia que el .btn.is-done de BRIEF 12.1. */
.on-espresso .buy-tbl tr.is-fit>td,.on-olive .buy-tbl tr.is-fit>td{background:#F2EADB1F;color:var(--parchment)}
.on-espresso .fits-opt,.on-olive .fits-opt{color:var(--parchment);border-color:#F2EADB40}
.on-espresso .fits-opt[aria-pressed="true"],.on-olive .fits-opt[aria-pressed="true"]{background:var(--parchment);border-color:var(--parchment);color:var(--espresso)}
.on-espresso .fits-say,.on-olive .fits-say{color:var(--parchment)}
.on-espresso .fits-q,.on-olive .fits-q{color:#F2EADBAD}
.fits-tag{display:inline-block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}

/* 5.12 Objetos de margen. Cosas apoyadas en la hoja, como en un cuaderno de
   verdad: la esquina de una alfombra, un pliegue de lino, unos marcos. No son
   ilustracion ni relleno, son textura. Uno por seccion grande y nunca encima
   del texto, de un control ni del aviso de afiliados.
   En movil desaparecen: no valen un solo byte del camino critico. */
.cut{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}
.cut img{display:block;width:100%;height:auto}
@media (max-width:980px){.cut{display:none}}

/* 5.13 El indice de la guia. Las ocho guias miden entre 1 800 y 5 500
   palabras; quien entra por la mitad desde Pinterest no sabe que hay debajo
   ni puede volver a lo que le interesaba. Un solo <details class="toc"> sirve
   para las dos presentaciones, asi el marcado es identico en las ocho:
   - hasta 1099 px es un desplegable cerrado bajo la caja de la respuesta;
   - desde 1100 px es un carril fijo en el margen izquierdo.
   Sin JavaScript sigue siendo una lista de enlaces; lo unico que se pierde es
   la marca del capitulo activo, que la pone aria-current.
   En escritorio el carril se abre solo con ::details-content, no con JS. Donde
   el navegador no lo soporte (antes de Chrome 131 / Safari 18.4 / Firefox 139)
   el carril se queda como desplegable con su titulo y sigue abriendose de un
   clic: es lo unico que se degrada.
   Por que la pagina se corre y el carril no flota encima: a 1440 px el
   contenido mas a la izquierda de una guia empieza en 76 px (.full mide 1320)
   y a 1100 px no sobra ni un pixel. Un carril flotante taparia texto. Asi que
   body.has-toc reserva la columna con padding, y el masthead y el pie
   recuperan el ancho completo con un margen negativo del mismo tamano. Solo
   lo llevan las guias, que son las unicas con .has-toc. */
body.has-toc{--toc-w:clamp(172px,15vw,212px)}
.toc{
  margin:var(--sp-tight) auto 0;max-width:74ch;
  border:1px solid var(--rule);background:var(--surface);
}
.toc>summary{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;
  list-style:none;cursor:pointer;
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.toc>summary::-webkit-details-marker{display:none}
/* el signo dice el estado sin depender del triangulo del navegador */
.toc>summary::after{content:"+";margin-left:auto;font-size:var(--s0);line-height:1}
.toc[open]>summary::after{content:"\2013"}
.toc>summary:active{transform:scale(.97)}
.toc-in{padding:2px 16px 12px}
.toc-h{display:none}
.toc-l{list-style:none;margin:0;padding:0;counter-reset:t}
.toc-l li{border-top:1px solid var(--rule-soft)}
.toc-l li:first-child{border-top:0}
/* 44 px de alto reales en cada entrada, en carril y en desplegable */
.toc-l a{
  display:flex;gap:12px;align-items:baseline;min-height:44px;padding:9px 0;
  color:var(--ink-soft);text-decoration:none;
  font-size:var(--s-1);line-height:1.34;
}
.toc-l a::before{
  counter-increment:t;content:counter(t,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:var(--s-2);color:var(--ink-faint);
}
.toc-l a[aria-current]{color:var(--ink)}
.toc-l a[aria-current]::before{color:var(--accent)}
.toc-l a[aria-current]::after{
  content:"";flex:none;align-self:center;margin-left:auto;
  width:14px;height:1px;background:var(--accent);
}
/* EL CARRIL FIJO DE ESCRITORIO SE RETIRO. Por que, para que nadie lo vuelva a
   poner sin saberlo: reservaba su columna con `padding-inline-start` en el
   body, y eso empujaba las bandas de color. Medido a 1440 px:

     resto del sitio .... banda de   0 a 1425   (a sangre, que es el sello)
     guia con carril .... banda de 212 a 1425
     guia con carril .... masthead de 0 a 1425  (este si se salia con margen
                                                 negativo)

   O sea que dentro de la misma pantalla la cabecera llegaba al borde y la
   banda de debajo no. Eso no se lee como una decision, se lee como algo roto.
   Y no habia forma de arreglarlo sin perder una de las dos cosas: este sitio
   usa casi todo el ancho (el contenido empieza en x=76), asi que no existe un
   canal libre donde meter un carril sin quitarselo a alguien.
   El desplegable de abajo hace el mismo trabajo, en todas las anchuras, y no
   le cuesta un pixel al diseño. Los objetos de margen (5.12) vuelven a salir
   en las tres guias que los tenian. */
@media (hover:hover) and (pointer:fine){
  .toc-l a{transition:color 160ms var(--ease-out)}
  .toc-l a:hover{color:var(--ink)}
}

/* 5.14 La puerta a la guia siguiente. Hasta ahora una guia terminaba en el
   pie y la lectora que venia de Pinterest se iba: no habia ninguna salida
   hacia la guia que resuelve su problema siguiente. Esta tarjeta va al final
   de cada guia, justo antes del footer, y lleva la preview curiosa de la
   guia destino, la linea que hace la pregunta y un mando que nombra el pago.
   Se numera 5.14 y no 5.13 a proposito: 5.13 queda libre para el indice
   pegajoso de R6-F1c, que el plan maestro ya reservo con ese numero.
   R6-F6: la clase era .rn y chocaba con la nota de inquilina
   de numbers.html (que es anterior), asi que pasa a .rnx.
   Toda la tarjeta es el enlace, asi que la zona tactil es la tarjeta entera
   y solo hay una parada de foco. Una por pagina. */
.rnx{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(16px,2.6vw,32px);align-items:center;
  margin:var(--sp-block) 0 0;padding:clamp(16px,2.2vw,24px);
  border:1px solid var(--rule);background:var(--surface);
  color:inherit;text-decoration:none;
}
.rnx-fig{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--stone);border:1px solid var(--rule)}
.rnx-fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.rnx-k{display:block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
/* la pregunta, en cursiva y un paso por debajo del titulo, igual que en el
   indice de guides.html, para que las dos piezas se lean como una sola voz */
.rnx-c{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:var(--s0);line-height:1.34;color:var(--ink);margin:8px 0 0;max-width:34ch}
.rnx-t{display:block;font-family:var(--display);font-weight:400;font-size:var(--s1);
  line-height:1.24;margin:6px 0 0;text-wrap:balance}
/* el subrayado va en el texto, no en la caja: con border-bottom la raya cae
   al fondo de los 44 px de zona tactil y se lee como una regla suelta. */
.rnx-g{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.rnx:active{transform:scale(.97)}
@media (max-width:760px){
  .rnx{grid-template-columns:1fr;gap:var(--sp-tight);align-items:start}
}
@media (hover:hover) and (pointer:fine){
  .rnx-fig img{transition:transform 280ms var(--ease-out)}
  .rnx:hover .rnx-fig img{transform:scale(1.02)}
  .rnx-g{transition:color 160ms var(--ease-out)}
  .rnx:hover .rnx-g{color:var(--ink)}
}


/* Regla de lectura: 3 px justo debajo del masthead. Solo guias largas. */
.progress-ruler{
  position:fixed;left:0;right:0;top:var(--mh);height:3px;z-index:29;
  background:#D8CCBD66;pointer-events:none;
  transition:top 220ms var(--ease-out);
}
.progress-ruler i{
  display:block;height:100%;background:var(--espresso);
  transform:scaleX(var(--p,0));transform-origin:left center;
}

/* --------------------------------------------------------------------------
   7. Botones y enlaces
   -------------------------------------------------------------------------- */
/* min-height 44: el minimo tactil. Con padding solo se quedaba en 42 y ningun
   boton del sitio llegaba. inline-flex para que el texto siga centrado. */
.btn{
  font-family:var(--mono);display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;font-size:var(--s-2);letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;padding:12px 20px;text-decoration:none;
  white-space:nowrap;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out),transform 160ms var(--ease-out),filter 180ms var(--ease-out);
}
.btn:active{transform:scale(.97)}
/* .btn es inline-flex: el espacio antes de la flecha se pierde al final del
   texto y la flecha quedaba pegada ("SHELF↓") en los 52 botones que la
   llevan. El gap solo separa piezas, asi que los botones de solo texto no cambian. */
.btn{gap:.5em}
/* Los botones ya no dicen "See it on Amazon": dicen la medida entera, y con
   white-space:nowrap eso desbordaba la celda. En movil se les deja partir, y
   en cualquier anchura no pueden ser mas anchos que su contenedor. */
.btn{max-width:100%}
@media (max-width:760px){.btn{white-space:normal;text-align:center}}
.rows .buy .btn,.shop-row .buy .btn,.shop-card .btn{white-space:normal;text-align:center}
.btn-primary{background:var(--clay);border-color:var(--clay);color:var(--ivory)}
.on-espresso .btn-primary,.on-olive .btn-primary{background:var(--parchment);border-color:var(--parchment);color:var(--espresso)}
.btn-ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
/* Estado del boletin: cruza de "Send it" a "Sent" con blur. No es una alerta. */
.btn.is-done{background:var(--olive);border-color:var(--olive);color:var(--ivory)}
.btn.is-blur{filter:blur(2px)}

.link{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;font-weight:500;transition:color 160ms var(--ease-out)}
.newtab{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.08em;color:var(--ink-faint);margin-top:10px;display:block}

/* Subrayado que se dibuja de izquierda a derecha. Solo enlaces de texto.
   Dos capas: la fina de stone esta siempre (un enlace sin subrayado no es un
   enlace) y encima se dibuja la de color al pasar. */
.link-draw{
  color:inherit;text-decoration:none;font-weight:500;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(#D8CCBD,#D8CCBD);
  background-repeat:no-repeat,no-repeat;
  background-position:0 100%,0 100%;
  background-size:100% 1px,100% 1px;
  transition:background-size 200ms var(--ease-out),color 160ms var(--ease-out);
}
.link.link-draw{border-bottom:0}

/* --------------------------------------------------------------------------
   8. Bloques
   -------------------------------------------------------------------------- */

/* Hueco de imagen: dice que va dentro, para juzgar la composicion sin foto. */
.slot{
  background:repeating-linear-gradient(135deg,transparent 0 11px,#006B7114 11px 22px),var(--surface);
  border:1px dashed var(--rule);display:grid;place-content:center;align-content:center;gap:6px;
  text-align:center;padding:22px;width:100%;
}
.slot b{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--second);font-weight:500}
.slot i{font-style:normal;font-size:.74rem;line-height:1.45;color:var(--ink-faint);max-width:30ch}
.slot .r{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-faint)}

/* Divulgacion. Va SIEMPRE antes del primer link de afiliado: lo exige Amazon y
   lo exige la FTC. Lo que NO exige ninguna de las dos es que grite. Era una
   banda oliva a todo lo ancho, centrada, de seis lineas, y hacia que la pagina
   entera pareciera un anuncio. Ahora es una linea de credito: pequeña, al ras
   de la izquierda, bajo una regla fina, del mismo tamaño que la fecha. Sigue
   siendo legible y sigue estando antes del primer enlace, que es lo que se
   exige. El texto legal largo vive en disclosure.html. */
.disclosure{
  background:transparent;color:var(--ink-faint);
  border-top:1px solid var(--rule-soft);
  padding:10px 0 0;margin:0;font-size:var(--s-1);line-height:1.55;text-align:left;
}
.disclosure>*{max-width:78ch}
.disclosure b{font-family:var(--mono);font-weight:500;letter-spacing:.1em;color:var(--second)}
.disclosure a{color:inherit;border-bottom:1px solid var(--rule)}
/* La variante callada ya no se distingue de la base: se conserva porque 16
   paginas la nombran, y porque quita la regla de arriba donde no hace falta. */
.disclosure-quiet{border-top:0;padding-top:0}
/* Sobre fondo oscuro (el colofon) hereda los tokens del tema y sigue pasando. */
.on-espresso .disclosure,.on-olive .disclosure{color:var(--ink-soft)}
.on-espresso .disclosure b,.on-olive .disclosure b{color:var(--second)}

/* Tarjeta generica */
.card{background:var(--surface);border:1px solid var(--rule);padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0}
.card .why{font-size:var(--s-1);line-height:1.55;color:var(--ink-soft);margin:0}

/* Tile de cuarto. En tactil los tres numeros van visibles de serie. */
.tile{position:relative;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.tile-pic{position:relative;overflow:hidden}
.tile-pic img,.tile-pic .slot{width:100%;transition:transform 600ms var(--ease-out)}
.tile .tn{font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h3);line-height:1.2;transition:color 160ms var(--ease-out)}
.tile .td{font-size:var(--s-1);line-height:1.5;color:var(--ink-soft)}
.tile .tc{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.tile .dg{position:absolute;right:10px;top:10px;--w:44;z-index:2}
.tile-nums{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none}
.tile-nums li{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tile:active{transform:scale(.99)}

/* Tarjeta de numero: el numeral manda, el because lo sostiene. */
.num{display:flex;flex-direction:column;gap:8px;padding:26px 22px;background:var(--ground);border:1px solid var(--rule)}
.num .k{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.num .numeral{color:var(--ink)}
.num .rule{font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h3);line-height:1.25;margin:0}
.num .because{font-size:var(--s-1);line-height:1.55;color:var(--ink-soft);margin:0}
.num .renter{font-size:var(--s-1);line-height:1.55;color:var(--ink-soft);margin:0;padding-top:10px;border-top:1px solid var(--rule-soft)}
.num .renter b{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--second);display:block}
.num .dg{--w:150;margin-left:auto}
.num .go{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;margin-top:2px}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}

/* Chips de paleta. El color del material entra por --sw, siempre de la paleta
   en el sistema; en las paginas de Look el material real va en un svg. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{
  display:inline-flex;align-items:center;overflow:hidden;
  border:1px solid var(--rule);background:var(--surface);padding:5px;
  max-width:100%;
  transition:background-color 200ms var(--ease-out);
}
.chip .sw{width:30px;height:30px;flex:none;background:var(--sw,var(--stone));box-shadow:inset 0 0 0 1px #2B345226}
/* variante svg: el color de un material real es contenido, no sistema, asi que
   viaja en un fill y la hoja se queda con sus seis colores */
.chip svg.sw{background:none}
.chip svg.sw rect{stroke:none}
/* En tactil el nombre va visible de serie: alli el hover no existe.
   El ensanchado es max-width porque un ancho real no se puede fingir con transform. */
.chip .nm{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;overflow:hidden;max-width:16ch;padding-inline:10px;
  transition:max-width 220ms var(--ease-out),padding 220ms var(--ease-out);
}

/* Indice con previsualizacion. Desktop: nombres grandes + imagen fija. */
.index{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start}
.index-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.index-list li{border-bottom:1px solid var(--rule)}
.index-list a{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px 0;text-decoration:none;color:inherit;
  transition:color 180ms var(--ease-out),transform 220ms var(--ease-out);
}
.index-list .nm{font-family:var(--display);font-size:var(--s2);font-weight:var(--w-h2);line-height:1.1}
.index-list .co{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-left:auto}
.index-thumb{display:none}
.index-preview{position:relative;aspect-ratio:4/5;background:var(--surface);border:1px solid var(--rule)}
.index-fig{position:absolute;inset:0;display:none;opacity:0;filter:blur(2px);transition:opacity 200ms var(--ease-out),filter 200ms var(--ease-out)}
.index-fig.is-on{display:block;opacity:1;filter:blur(0)}
.index-fig img,.index-fig .slot{width:100%;height:100%;object-fit:cover}
/* Movil: tira con snap. Cada item lleva su propia miniatura. */
@media (max-width:860px){
  .index{display:block}
  .index-preview{display:none}
  .index-list{display:flex;gap:14px;overflow-x:auto;border:0;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
  .index-list::-webkit-scrollbar{display:none}
  .index-list li{flex:0 0 68%;scroll-snap-align:start;border-bottom:0}
  .index-list a{flex-direction:column;align-items:stretch;gap:8px;padding:0}
  .index-list .co{margin-left:0}
  .index-thumb{display:block;aspect-ratio:4/5;background:var(--surface);border:1px solid var(--rule);overflow:hidden}
  .index-thumb img,.index-thumb .slot{width:100%;height:100%;object-fit:cover}
}

/* Colofon: cierre editorial y prueba de vida. */
.colophon{padding-block:var(--sp-block) clamp(28px,4vw,44px)}
.colophon .said{font-family:var(--display);font-size:var(--s1);font-weight:400;line-height:1.5;max-width:46ch;margin:0 0 var(--sp-block)}
.colophon-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(20px,4vw,48px)}
.colophon-grid h4,.colophon-grid .fh{margin:0 0 12px}
/* El pie rotulaba sus tres columnas con h4 detras de un h2, un salto de nivel
   que salia en las 50 paginas. Pasan a h2 y esta clase les devuelve el
   aspecto exacto del h4: cero cambio visual. Lo reportaron tres auditores
   por separado en R12. */
.fh{font-family:var(--mono);font-weight:500;font-size:var(--s-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.colophon-grid a{display:block;font-size:var(--s-1);color:var(--ink-soft);text-decoration:none;padding:4px 0;transition:color 160ms var(--ease-out)}
.colophon .stamp{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin:var(--sp-block) 0 0}
@media (max-width:760px){.colophon-grid{grid-template-columns:1fr}}

/* Byline de Nora */
.byline{display:flex;align-items:center;justify-content:center;gap:13px;margin:26px auto 0}
.byline .avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--rule)}
.byline .who{font-size:var(--s-1);line-height:1.4;text-align:left;margin:0}
.byline .who b{font-weight:var(--w-h3)}
.byline .who span{display:block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* Figuras y pies */
figure{margin:0 auto var(--sp-block);max-width:1000px}
/* Con width:auto el max-height respeta la proporcion. Pero si una pagina pone
   width:100%, la altura tope deja de recortar y pasa a DEFORMAR la foto: el
   auditor lo marcaba como badImgs y costo encontrarlo. object-fit no hace nada
   cuando la caja ya coincide con la proporcion intrinseca, y recorta cuando no,
   que es justo lo que queremos en los dos casos. */
figure img{max-height:56vh;width:auto;margin-inline:auto;object-fit:cover}
/* Una figura a sangre no cabe en 1000 px. En vez de bajar el tope a todas, que
   cambiaria cada figura ya escrita, se pide explicitamente. */
figure.bleed{max-width:none}
@media (max-width:760px){figure img{max-height:none}}
figcaption{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.06em;color:var(--ink-faint);line-height:1.6;padding-top:12px;margin-top:12px;border-top:1px solid var(--rule-soft)}

/* Respuesta rapida arriba del pliegue */
.shortcut{
  max-width:680px;margin:26px auto 0;padding:14px 20px;
  border:1px solid var(--rule);background:var(--surface);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.shortcut .lbl{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.shortcut .val{font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h2);line-height:1.15}
.shortcut .val em{display:block;font-family:var(--mono);font-style:normal;font-size:var(--s-2);letter-spacing:.1em;color:var(--ink-faint);margin-top:3px}
.shortcut a{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;margin-left:auto;transition:color 160ms var(--ease-out)}

/* Filas de libro mayor */
.rows{margin:0 0 var(--sp-tight);border-top:1px solid var(--rule)}
.rows .row{display:grid;grid-template-columns:9rem 1fr auto;gap:8px 20px;align-items:center;padding:17px 0;border-bottom:1px solid var(--rule-soft)}
.rows .dim{font-family:var(--display);font-weight:var(--w-h3);font-size:var(--s1);font-variant-numeric:tabular-nums;line-height:1.2}
.rows .what{font-size:var(--s-1);line-height:1.55;color:var(--ink-soft)}
/* En movil la fila se apila entera. Antes quedaba en "1fr auto", y la columna
   auto la fijaba el boton de compra, que con white-space:normal pedia entre
   210 y 287 px de los 368 disponibles: el texto se quedaba en 61 a 138 px de
   ancho y 400 de alto. Es la misma clase de fallo que la columna de 42 px del
   piloto, y lo encontraron dos auditores por separado en R12, en cinco
   paginas distintas. Lo usan diez paginas, asi que se arregla aqui una vez. */
@media (max-width:560px){.rows .row{grid-template-columns:1fr}.rows .row>*{grid-column:1/-1}}

/* Pasos numerados */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 var(--sp-tight);padding:0;list-style:none}
.steps li{display:flex;flex-direction:column;gap:8px}
.steps .n{font-family:var(--display);font-size:var(--s2);font-weight:400;color:var(--accent);line-height:1}
.steps .t{font-size:var(--s-1);line-height:1.58;color:var(--ink-soft)}
@media (max-width:620px){.steps{grid-template-columns:1fr;gap:18px}}

/* Cierre "Where next": tres enlaces concretos antes del footer. */
.wherenext{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.wherenext a{background:var(--ground);padding:22px 20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;transition:background-color 180ms var(--ease-out)}
.wherenext .k{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.wherenext .t{font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h3);line-height:1.25}
.wherenext .g{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (max-width:760px){.wherenext{grid-template-columns:1fr}}

/* Boletin */
.signup{display:flex;gap:10px;flex-wrap:wrap;margin:var(--sp-tight) 0 10px}
.signup input{font-family:var(--body);font-size:var(--s0);color:var(--ink);background:transparent;border:1px solid var(--rule);padding:13px 15px;min-width:min(280px,100%);flex:1}
.signup input:focus{outline:0;border-color:var(--accent)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   9. Interactivos
   -------------------------------------------------------------------------- */

/* 9.1 Antes / despues. El range es el control real; el arrastre es un extra. */
.ba{--x:50%}
.ba-pane{position:relative;overflow:hidden;touch-action:pan-y;cursor:ew-resize;background:var(--surface)}
.ba-bottom,.ba-top{width:100%}
.ba-top{position:absolute;inset:0;clip-path:inset(0 var(--x) 0 0)}
.ba-bottom img,.ba-top img,.ba-bottom .slot,.ba-top .slot{width:100%;height:100%;object-fit:cover}
.ba-handle{
  position:absolute;top:0;bottom:0;left:calc(100% - var(--x));width:2px;
  background:var(--parchment);pointer-events:none;box-shadow:0 0 0 1px rgba(48,39,32,.25);
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:2px solid var(--parchment);border-radius:50%;background:#2B345259;
}
.ba-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding-top:10px}
.ba-range{width:100%;margin-top:8px;accent-color:var(--clay);background-color:transparent}

/* 9.2 Calculadora. Un modo por instancia: data-mode="living|dining|bedroom|curtains". */
.calc{border:1px solid var(--rule);background:var(--surface);margin:0 0 var(--sp-block)}
.calc-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--rule-soft)}
.calc-top .t{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.calc-units{display:flex;margin-left:auto;border:1px solid var(--rule)}
/* Salian a 59x39 y 75x39, por debajo de 44 en alto. Estos botones viven en
   nueve paginas (la home, la guia de alfombras y seis de cuarto), asi que el
   arreglo va aqui y no en el <style> de una sola. Decimo control por debajo
   encontrado en este proyecto: si añades un mando, midelo. */
.calc-units button{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:0;color:var(--ink-soft);padding:10px 14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 160ms var(--ease-out);
}
.calc-units button[aria-pressed="true"]{background:var(--espresso);color:var(--parchment)}
.calc-units button:active{transform:scale(.97)}
.calc-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.field{padding:20px 24px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--rule-soft)}
.field:last-child{border-right:0}
.field label{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.field .row{display:flex;align-items:baseline;gap:9px}
.field input,.field select{
  font-family:var(--display);font-size:var(--s2);font-weight:var(--w-h2);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:6px 0;
  -moz-appearance:textfield;
}
.field input{width:5.5ch}
.field select{width:100%;max-width:12ch;cursor:pointer}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input:focus,.field select:focus{outline:0;border-bottom-color:var(--accent)}
.field .u{font-family:var(--mono);font-size:var(--s-1);color:var(--ink-faint)}
@media (max-width:620px){.calc-body{grid-template-columns:1fr}.field{border-right:0;border-bottom:1px solid var(--rule-soft)}}
.calc-out{padding:24px;border-top:1px solid var(--rule-soft);display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
@media (max-width:760px){.calc-out{grid-template-columns:1fr;gap:16px;text-align:center;justify-items:center}}
.plan{width:190px;flex:none}
.plan svg{width:100%;height:auto;display:block;background:var(--parchment);border:1px solid var(--rule)}
/* grosor por variable, no non-scaling-stroke: el viewBox cambia con la sala y
   non-scaling-stroke hace que Chrome ignore pathLength, asi que el plano se
   dibujaria punteado. ll.js recalcula --plan-sw en cada redibujo. */
.plan rect{transition:x 420ms var(--ease-out),y 420ms var(--ease-out),width 420ms var(--ease-out),height 420ms var(--ease-out)}
/* min-height: el resultado cambia de texto sin que salte la caja */
.calc-res{min-height:96px;transition:filter 180ms var(--ease-out),transform 180ms var(--ease-out),opacity 180ms var(--ease-out)}
.calc-res.is-swap{filter:blur(2px);transform:scale(.98);opacity:.4}
.calc-res .sz{font-family:var(--display);font-size:var(--s3);font-weight:var(--w-h2);line-height:1;margin:0 0 8px}
.calc-res .cm{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.1em;color:var(--ink-faint);margin:0 0 9px}
.calc-res .why{font-size:var(--s-1);line-height:1.55;color:var(--ink-soft);margin:0}
.calc-res .warn{color:var(--clay)}
.calc-res .concession{font-size:var(--s-1);line-height:1.55;color:var(--ink-soft);margin:9px 0 0;padding-top:9px;border-top:1px solid var(--rule-soft)}
.calc-res .concession:empty{display:none}

/* Tarjetas de medida */
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 var(--sp-tight);align-items:stretch}
@media (max-width:1040px){.sizes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.sizes{grid-template-columns:repeat(2,1fr)}}
.size{
  background:var(--surface);border:1px solid var(--rule);padding:18px 14px 20px;
  display:flex;flex-direction:column;gap:10px;text-align:center;text-decoration:none;color:inherit;
  transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 160ms var(--ease-out);
}
.size:active{transform:scale(.978)}
.size svg{width:100%;height:auto;display:block}
.size .dim{font-family:var(--display);font-weight:var(--w-h2);font-size:var(--s2);line-height:1}
.size .for{font-size:var(--s-1);line-height:1.42;color:var(--ink-soft);flex:1}
.size .go{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--clay)}
.size.best{border-color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive);position:relative;padding-top:26px}
.size.best::before{content:"Most common";font-family:var(--mono);position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--olive);color:var(--ivory);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:3px 11px;white-space:nowrap}
.size.yours{box-shadow:inset 0 0 0 2px var(--accent);border-color:var(--accent)}
.size.yours::after{content:"Your size";font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}

/* 9.3 Acordeon: filas de grid, nunca height. */
.acc{border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule-soft)}
.acc-head{
  width:100%;display:flex;gap:16px;align-items:baseline;text-align:left;
  background:transparent;border:0;cursor:pointer;padding:20px 0;color:inherit;
  font-family:var(--display);font-weight:var(--w-h3);font-size:var(--s1);line-height:1.3;
  transition:color 160ms var(--ease-out);
}
.acc-head::before{content:"+";font-family:var(--mono);color:var(--accent);flex:none;font-weight:400}
.acc-item.is-open .acc-head::before{content:"\2013"}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms var(--ease-out)}
.acc-item.is-open .acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel .a{padding:0 0 20px 32px;font-size:var(--s-1);color:var(--ink-soft);line-height:1.72}
.acc-panel .a p{margin:0 0 .9em}
.acc-panel .a p:last-child{margin:0}
/* sin js el panel queda abierto: el contenido nunca se pierde */
html:not(.js) .acc-panel{grid-template-rows:1fr}

/* 9.4 Ticker: dice de que va el sitio sin que leas nada. */
.ticker{overflow:hidden;border-block:1px solid var(--rule);padding-block:12px;background:var(--ground)}
.ticker-track{display:flex;width:max-content;gap:0;will-change:transform}
.ticker.is-loop .ticker-track{animation:llTick 60s linear infinite}
.ticker-item{
  font-family:var(--mono);font-size:var(--s-1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;padding-inline:22px;
}
.ticker-item::after{content:"\00B7";margin-left:22px;color:var(--ink-faint)}
@keyframes llTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 9.5 Barra de respuesta de la guia. Fina, cerrable, nace apagada. */
.stick{
  position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--espresso);color:var(--parchment);
  display:none;align-items:center;gap:14px;padding:10px var(--gut);
  transform:translateY(100%);transition:transform 320ms var(--ease-out);
}
.stick.is-on{display:flex;transform:none}
.stick .l{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.18em;text-transform:uppercase;color:#F2EADB94}
.stick .v{font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h2);line-height:1}
.stick a{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;background:var(--stone);color:var(--espresso);padding:9px 15px;text-decoration:none;margin-left:auto;transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.stick a:active{transform:scale(.97)}
.stick button{background:transparent;border:0;color:#F2EADB94;font-size:1.2rem;line-height:1;cursor:pointer;padding:4px 8px}
@media (max-width:520px){.stick .l{display:none}}

/* --------------------------------------------------------------------------
   10. Efectos. Cada uno con su porque; ninguno decorativo.
   -------------------------------------------------------------------------- */

/* Reveal seguro: el estado oculto SOLO existe con js, y solo en imagenes.
   El texto no se oculta nunca. ll.js revela todo a los 1200 ms pase lo que pase. */
.js .reveal{clip-path:inset(0 0 100% 0)}
.js .reveal.in{clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--ease-out)}

/* Dibujo de diagramas. La firma de la casa: "te lo dibujo".
   --dg-draw vale 0 por defecto: sin js el diagrama se ve entero. El estado
   "sin dibujar" solo existe bajo html.js, igual que .reveal, y ll.js lo suelta
   con su red de seguridad de 1200 ms. El fill-opacity va en pareja con el
   trazo: sin eso las alfombras y las cotas aparecerian de golpe. */
.js .dg.draw{--dg-draw:1}
.js .dg.draw.in{--dg-draw:0}
/* svg propio de la pagina (no del sprite): necesita pathLength="1" por trazo,
   y solo si el navegador lo respeta, cosa que comprueba ll.js */
.js.can-draw .draw:not(.dg){stroke-dasharray:1;stroke-dashoffset:1}
.js.can-draw .draw.in:not(.dg){stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-out)}

/* Parallax del hero. Tres capas, factores -0.04 / -0.08 / -0.12. */
.parallax{will-change:transform}

/* Entrada escalonada. Solo transform: un opacity 0 aqui dejaria la lista
   invisible en una pestana de fondo, donde el navegador no corre animaciones,
   y la regla dura del BRIEF es que nada se aparca en opacity 0. El ritmo se
   mantiene con el desplazamiento. */
.js .stagger.in>*{animation:llStagger 300ms var(--ease-out) both}
.js .stagger.in>*:nth-child(2){animation-delay:60ms}
.js .stagger.in>*:nth-child(3){animation-delay:120ms}
.js .stagger.in>*:nth-child(4){animation-delay:180ms}
.js .stagger.in>*:nth-child(5){animation-delay:240ms}
.js .stagger.in>*:nth-child(6){animation-delay:300ms}
@keyframes llStagger{from{transform:translateY(8px)}to{transform:none}}

/* --------------------------------------------------------------------------
   11. Hover. Solo con puntero fino: en tactil lo que revela va visible.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--parchment)}
  .search button:hover{color:var(--parchment);border-color:var(--stone)}
  .unit button:hover{color:var(--parchment)}
  .btn-primary:hover{background:transparent;color:var(--clay)}
  .on-espresso .btn-primary:hover,.on-olive .btn-primary:hover{background:transparent;color:var(--parchment)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--ground)}
  .link:hover,.shortcut a:hover{color:var(--ink)}
  .link-draw{background-size:0% 1px,100% 1px}
  .link-draw:hover,.link-draw:focus-visible{background-size:100% 1px,100% 1px}
  .tile:hover .tile-pic img,.tile:hover .tile-pic .slot{transform:scale(1.03)}
  .tile:hover .tn{color:var(--accent)}
  .tile:hover .dg.draw,.num:hover .dg.draw{--dg-draw:0}
  .tile:hover .draw:not(.dg){stroke-dashoffset:0}
  .num:hover .dg,.rows .row:hover .dg,.tile:hover .dg{--dg-accent:var(--clay)}
  .tile-nums li{transform:translateY(6px);transition:transform 200ms var(--ease-out)}
  .tile:hover .tile-nums li{transform:none}
  .card:hover{background:var(--ground)}
  .index-list a:hover{color:var(--accent);transform:translateX(8px)}
  .chip .nm{max-width:0;padding-inline:0}
  .chip:hover{background:var(--ground)}
  .chip:hover .nm,.chip:focus-within .nm{max-width:16ch;padding-inline:10px}
  .size:hover{background:var(--clay);border-color:var(--clay);color:var(--ivory)}
  .size:hover .for,.size:hover .go{color:inherit}
  .wherenext a:hover{background:var(--surface)}
  .acc-head:hover{color:var(--accent)}
  .colophon-grid a:hover{color:var(--ink)}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .layer:hover{transform:rotate(0deg)}
  .stick a:hover{background:var(--parchment)}
}

/* --------------------------------------------------------------------------
   11.b Guia viva. Solo la usan components.html y diagrams.html, pero vive
        aqui porque el sitio tiene una sola hoja de estilos.
   -------------------------------------------------------------------------- */
.cmp{padding-block:var(--sp-block);border-top:1px solid var(--rule)}
.cmp>h2{font-size:var(--s2);margin-bottom:.2em}
.cmp .use{font-size:var(--s-1);line-height:1.6;color:var(--ink-soft);max-width:62ch;margin:0 0 var(--sp-tight)}
.cmp .cls{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.1em;color:var(--second)}
.cmp-demo{margin:0}
.code{
  font-family:var(--mono);font-size:.76rem;line-height:1.62;font-weight:400;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink-soft);
  padding:16px;margin:16px 0 0;overflow-x:auto;white-space:pre;
}

/* --------------------------------------------------------------------------
   12. Movimiento reducido: sin ticker, sin reveal, sin parallax, 1 ms.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important;
  }
  .js .reveal,.js .reveal.in{clip-path:none}
  .js .print,.js .print.in,.js .print figcaption{clip-path:none}
  .js .drop,.js .drop.in{transform:rotate(-2.5deg);animation:none}
  .dg{transition-duration:1ms}
  .js .dg.draw,.js .dg.draw.in{--dg-draw:0}
  .js.can-draw .draw:not(.dg),.js.can-draw .draw.in:not(.dg){stroke-dasharray:none;stroke-dashoffset:0}
  .ticker.is-loop .ticker-track{animation:none}
  .parallax{transform:none!important}
  .layer{transition:none}
  .js .stagger.in>*{animation:none}
}

/* --------------------------------------------------------------------------
   13. Renter DIY (B6). Solo lo usan diy.html y las dos paginas de proyecto,
       pero vive aqui porque el sitio tiene una sola hoja. Va despues del
       bloque de movimiento reducido a proposito: ese bloque gana con
       !important, asi que el orden no le quita nada, y anadir al final es la
       forma menos invasiva de tocar una hoja que comparten ocho agentes.
   -------------------------------------------------------------------------- */

/* El coste de un proyecto SIEMPRE va dentro de esta clase. Es un rango de
   materiales, no el precio de un listing: check.js solo tolera el signo de
   dolar aqui dentro, y ese es justo el limite que marca Amazon Associates. */
/* No fija familia a proposito: hereda la del sitio donde caiga (mono en un
   chip, Playfair dentro de un numeral) y solo aporta cifras tabulares. */
.diy-cost{font-variant-numeric:tabular-nums;white-space:nowrap}

/* 13.0 Cabecera del hub: 7/5, la foto grande a la izquierda y el titular a la
   derecha. La etiqueta de cinta pisa la esquina de la foto a proposito. */
.diy-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,60px);align-items:center}
.diy-hero .fig{position:relative}
@media (max-width:900px){.diy-hero{grid-template-columns:1fr;gap:clamp(20px,4vw,34px)}}

/* La frase honesta del limewash. Mono, sin mayusculas: es una frase larga y
   en versales de 11 px no la leeria nadie. */
.honest{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.03em;line-height:1.72;color:var(--ink-soft);margin:16px 0 0;max-width:56ch}
.honest b{color:var(--ink);font-weight:500}

/* 13.1 La triada: coste, tiempo, deshacer. Las tres respuestas que trae la
   compradora de DIY, en la primera pantalla. Los numerales van por debajo de
   --s5 porque tres columnas de 128 px no caben ni en 1320. */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0;padding:0;list-style:none}
.triad li{background:var(--ground);padding:clamp(18px,2.4vw,28px) clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:7px}
.triad .k{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.triad .numeral{font-size:clamp(28px,3.2vw,48px)}
.triad .n{font-size:var(--s-2);line-height:1.55;color:var(--ink-soft);margin:0}
@media (max-width:700px){.triad{grid-template-columns:1fr}}

/* 13.2 Filtros del hub. Botones de verdad con aria-pressed: sin js quedan
   todos los proyectos a la vista, que es el estado correcto. */
.filt-g{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.filt-lab{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);flex:0 0 5.4rem}
/* Los chips salian a unos 35 px de alto. Los usan seis paginas; cuatro se lo
   habian parcheado en su propio <style>, asi que arreglarlo aqui tambien limpia
   esos parches. */
.filt{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--ground);border:1px solid var(--rule);padding:9px 14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out),transform 160ms var(--ease-out);
}
.filt:active{transform:scale(.97)}
.filt[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:var(--parchment)}
.filt-count{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0}

/* 13.3 Filas de proyecto. Libro mayor, no rejilla de tarjetas iguales. */
.proj{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.proj>li{border-bottom:1px solid var(--rule-soft)}
.proj .p{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) minmax(0,1fr);gap:14px clamp(18px,3vw,44px);padding:clamp(22px,3vw,36px) 0;align-items:start}
/* la foto del resultado abre la fila: se ve lo que sale antes de leer
   cuanto cuesta. Va primera en el DOM, asi en movil sale arriba. */
.proj .p-fig{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--stone);border:1px solid var(--rule)}
.proj .p-fig img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.proj h3{font-family:var(--display);font-size:var(--s2);font-weight:var(--w-h2);line-height:1.12;margin:10px 0 0}
.proj .rm{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:10px 0 0}
.proj .sum{font-size:var(--s-1);line-height:1.6;color:var(--ink-soft);margin:10px 0 0;max-width:46ch}
.proj .tri{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0;padding:0;list-style:none}
.proj .tri li{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.proj .tri li span{display:block;font-size:var(--s-2);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.proj .flags{display:flex;flex-wrap:wrap;gap:6px 10px;margin:14px 0 0;padding:0;list-style:none}
.proj .flags li{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;color:var(--second);border:1px solid var(--rule);padding:5px 10px}
.proj .soon{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:12px 0 0}
@media (max-width:820px){.proj .p{grid-template-columns:1fr}.proj .p-fig{margin-bottom:4px}}

/* 13.4 El indice de deshacer. Ordenado por lo unico que importa al depositar
   la fianza: cuanto se tarda en dejarlo como estaba. */
.undo{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.undo li{background:var(--ground);display:grid;grid-template-columns:8rem minmax(0,1fr);gap:4px 26px;align-items:baseline;padding:20px clamp(16px,2vw,24px)}
.undo .numeral{font-size:clamp(30px,3.4vw,48px);line-height:1}
.undo .u{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-top:5px}
.undo b{display:block;font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h3);line-height:1.25;margin-bottom:5px}
.undo .w{font-size:var(--s-1);line-height:1.6;color:var(--ink-soft);margin:0}
@media (max-width:620px){.undo li{grid-template-columns:1fr}.undo .u{margin-bottom:8px}}

/* 13.5 Materiales. Nombre, variante, por que, la pega y el boton. Sin foto:
   no hay acceso a la API de Amazon y sus imagenes no se pueden alojar. */
.mat{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.mat>li{border-bottom:1px solid var(--rule-soft)}
.mat .m{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px clamp(18px,3vw,44px);align-items:start;padding:clamp(20px,2.6vw,32px) 0}
.mat h3{margin:0 0 5px;font-size:var(--s1)}
.mat .v{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:11px}
.mat p{margin:0 0 .7em;font-size:var(--s-1);line-height:1.6;color:var(--ink-soft);max-width:54ch}
.mat p:last-child{margin:0}
.mat .catch b{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--second);display:block}
@media (max-width:760px){.mat .m{grid-template-columns:1fr}}

/* Hueco de ASIN sin verificar. Se queda a la vista a proposito: un enlace de
   afiliado que no se abrio hoy no se publica. */
.missing{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.1em;line-height:1.6;color:var(--ink-faint);
  border:1px dashed var(--rule);padding:9px 13px;display:inline-block;max-width:44ch;
}

/* 13.6 Pasos. Numero en mono grande, y cada paso dice que sale mal. */
.how{list-style:none;margin:0;padding:0}
.how>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(18px,3vw,38px);padding:clamp(20px,2.6vw,32px) 0;border-top:1px solid var(--rule-soft)}
.how .s{font-family:var(--mono);font-weight:500;font-size:clamp(22px,2.6vw,34px);line-height:1.1;color:var(--accent);font-variant-numeric:lining-nums}
.how h3{margin:0 0 .4em}
.how p{margin:0 0 .9em;max-width:60ch}
.how .bad{font-size:var(--s-1);line-height:1.6;color:var(--ink-soft);margin:0;padding-top:11px;border-top:1px solid var(--rule-soft)}
.how .bad b{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--second);display:block;margin-bottom:3px}
.how figure{margin:16px 0 0;max-width:560px}
@media (max-width:620px){.how>li{grid-template-columns:1fr}}

/* Diagrama del sprite con su texto al lado. En movil se apila: 200 px de
   dibujo y 150 de texto no es una composicion, es un accidente. */
.dg-aside{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:center}
@media (max-width:620px){.dg-aside{grid-template-columns:1fr}}

/* 13.7 Tabla de rollos. La unica tabla del sitio: son tres columnas de
   numeros y cualquier otra cosa seria peor. Scroll propio en movil. */
.tbl-wrap{overflow-x:auto;margin:0 0 var(--sp-tight)}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--s-1);line-height:1.5}
.tbl th{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl td:first-child{font-family:var(--display);font-size:var(--s1);font-weight:var(--w-h3);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
/* Dentro de una tabla el boton parte de linea: con nowrap se llevaba 286 px
   de los 700 de la columna y dejaba el texto en 101. */
.tbl td .btn{white-space:normal;text-align:center}
/* Por debajo de 700 px la tabla deja de ser tabla. Cuatro columnas en un
   telefono dejan la de texto en unos 55 px, o sea una palabra por linea, y la
   alternativa que habia era desplazar a lo ancho para leer un parrafo, que es
   peor. Cada celda lleva el nombre de su columna en data-label, sacado del
   <th> de su propia tabla, asi que al apilar no se pierde el encabezado. */
@media (max-width:860px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tbl tr{border-bottom:1px solid var(--rule);padding:16px 0}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border-bottom:0;padding:0 0 8px}
  .tbl td:last-child{padding-bottom:0}
  .tbl td:first-child{white-space:normal;margin-bottom:4px}
  .tbl td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;
    font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:3px}
  /* la columna del enlace no tiene nombre que ensenar, solo el boton */
  .tbl td:last-child::before{content:none}
  .tbl td:last-child .btn{width:100%;text-align:center}
  .tbl-wrap{overflow-x:visible}
}

/* --------------------------------------------------------------------------
   14. Foto comprable (G2). Un punto numerado encima de cada objeto de la foto
       y, debajo, la lista numerada con los mismos productos. La lista es la
       version que funciona siempre; el punto es un extra.

   Uso:

     <div class="shop">
       <div class="shop-stage">
         <div class="shop-pic reveal"><img src="img/shop-nook.webp" ...></div>

         <div class="shop-pin" style="--x:34%;--y:61%">
           <button class="shop-dot" type="button"
                   data-shop="3" aria-expanded="false" aria-controls="shop-c3"
                   aria-label="Product 3: oak side table">3</button>
           <div class="card shop-card" id="shop-c3" data-shop="3" hidden>
             <button class="shop-x" type="button" aria-label="Close">&times;</button>
             <h3>...</h3><p class="why">...</p>
             <a class="shop-no" href="numbers.html#n23">No. 23 ...</a>
             <a class="btn btn-ghost" href="...">See it on Amazon</a>
           </div>
         </div>
         ... un .shop-pin por producto ...
       </div>

       <ol class="shop-list">
         <li class="shop-row" id="shop-r3" data-shop="3"><div class="r">
           <span class="no">03</span> <div>...</div> <div class="buy">...</div>
         </div></li>
       </ol>
     </div>

   Coordenadas: --x y --y van en PORCENTAJE y viven en el HTML, no aqui, para
   que sigan cuadrando cuando la foto se reescala. Se miden sobre el pixel de
   la imagen: centro del objeto dividido por el ancho y por el alto. En una
   1122 x 1402, un objeto centrado en (380, 855) es --x:34%;--y:61%.
   Si un dia se cambia la foto, solo se tocan esos dos numeros por punto.

   Los dos numeros van UNA sola vez, en el .shop-pin, y de ahi los heredan el
   punto y su tarjeta. El .shop-pin es display:contents: no genera caja, asi
   que no ocupa nada en la maqueta y sus dos hijos siguen colocandose contra
   el .shop-stage, que es quien tiene position:relative.

   El punto es un extra: sin js no hay tarjeta que abrir, asi que el punto se
   retira y la lista de abajo, que es la que lleva los enlaces, se queda
   entera. Nada se aparca en opacity 0: la tarjeta cerrada usa el atributo
   hidden, que el reset de esta hoja convierte en display:none.

   OJO, y es la razon de que ningun selector de aqui sea .shop a secas:
   look-organic.html y sus dos hermanas ya usan <ul class="shop"> para su
   lista de compra. Cualquier regla sobre .shop se les colaria encima. Aqui
   .shop es solo el gancho que busca ll.js; todo lo que pinta empieza por
   .shop-, y esos nombres no existen en ninguna otra pagina.

   El componente no sabe de que habitacion es: seis fotos shop-*.webp usan el
   mismo bloque cambiando la imagen, los porcentajes y las filas.
   -------------------------------------------------------------------------- */

.shop-stage{position:relative;margin:0}
.shop-pic{position:relative}
/* solo lleva las coordenadas: sin caja propia, el punto y la tarjeta se
   siguen colocando contra .shop-stage */
.shop-pin{display:contents}
.shop-pic img,.shop-pic .slot{width:100%;display:block}

/* El punto. 28 px, borde pergamino, relleno espresso al 85 %, numero en mono.
   El pulso suena una vez, 2 s, y para: un latido infinito es un anuncio.
   Sin fill-mode a proposito, para que al acabar la animacion suelte el
   transform y :active vuelva a mandar. */
.shop-dot{
  position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:3;
  width:28px;height:28px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;
  font-variant-numeric:lining-nums;
  color:var(--parchment);background:#2B3452D9;
  border:2px solid var(--parchment);
  box-shadow:0 2px 10px -4px rgba(48,39,32,.7);
  transform:translate(-50%,-50%);
  /* el circulo mide 28 px, pero el area tocable llega a 44 x 44 (minimo iOS/Material) */
  -webkit-tap-highlight-color:transparent;
  transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out),
             color 160ms var(--ease-out),border-color 160ms var(--ease-out);
}
.js .shop-dot{animation:llShopPulse 2s var(--ease-out) .8s 1}
@keyframes llShopPulse{
  0%,34%,70%,100%{transform:translate(-50%,-50%) scale(1)}
  17%,53%{transform:translate(-50%,-50%) scale(1.16)}
}
.shop-dot::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.shop-dot:active{transform:translate(-50%,-50%) scale(.92)}
/* Abierto: se da la vuelta. Sobre una foto el relleno claro con anillo oscuro
   es lo unico que se lee igual de bien encima de madera y encima de pared. */
.shop-dot[aria-expanded="true"]{
  background:var(--parchment);color:var(--espresso);border-color:var(--espresso);
  box-shadow:0 0 0 2px #2B3452D9,0 2px 10px -4px rgba(48,39,32,.7);
}
/* Sin js el punto no abre nada, asi que no se pinta ni se tabula. */
html:not(.js) .shop-dot,html:not(.js) .shop-hint{display:none}

/* La tarjeta. Es un .card del sistema con posicion. --cw entra en el clamp
   para que nunca sobresalga por los lados de la foto, y --dy decide si cuelga
   del punto o va encima, que es lo que evita que lo tape en tactil. */
.shop-card{
  --cw:min(300px,74%);--dy:22px;
  position:absolute;z-index:4;
  left:clamp(0px,calc(var(--x,50%) - var(--cw) / 2),calc(100% - var(--cw)));
  top:var(--y,50%);width:var(--cw);
  padding:15px 16px 17px;gap:9px;
  box-shadow:0 14px 34px -20px rgba(48,39,32,.75);
  transform:translateY(var(--dy));transform-origin:50% 0;
  animation:llShopCard 180ms var(--ease-out) 1;
}
.shop-card[data-side="up"]{--dy:calc(-100% - 22px);transform-origin:50% 100%}
/* La entrada solo toca la escala, y por 1,5 por ciento. Una pestana de fondo
   no corre animaciones, asi que el fotograma inicial de esta se queda puesto
   ahi para siempre: por eso el from tiene que ser una posicion CORRECTA. Con
   un desplazamiento en el from, la tarjeta se quedaria doce pixeles debajo de
   su punto en cuanto alguien abriera la pagina en otra pestana. */
@keyframes llShopCard{
  from{transform:translateY(var(--dy)) scale(.985)}
  to{transform:translateY(var(--dy)) scale(1)}
}
.shop-card h3{font-size:var(--s1);line-height:1.22;margin:0;padding-right:20px}
.shop-card .var{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.shop-card .why{font-size:var(--s-2);line-height:1.6;color:var(--ink-soft);margin:0}
.shop-card .btn{align-self:flex-start;padding:10px 15px}
.shop-no{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--second);text-decoration:none;border-bottom:1px solid var(--rule);
  align-self:flex-start;transition:color 160ms var(--ease-out);
}
.shop-x{
  position:absolute;top:3px;right:4px;padding:7px 9px;line-height:1;
  font-family:var(--mono);font-size:var(--s-1);color:var(--ink-faint);
  transition:color 160ms var(--ease-out),transform 160ms var(--ease-out);
}
.shop-x:active{transform:scale(.9)}
@media (max-width:560px){.shop-card{--cw:min(280px,90%)}}

/* La pista. Mono corto: dice que los puntos se tocan, y solo con js. */
.shop-hint{
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:14px 0 0;
}

/* La lista. Filas de libro mayor, la version que funciona siempre. */
.shop-list{list-style:none;margin:var(--sp-block) 0 0;padding:0;border-top:1px solid var(--rule)}
.shop-row{
  border-bottom:1px solid var(--rule-soft);
  transition:background-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out);
}
.shop-row .r{
  display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;
  gap:10px clamp(14px,2.4vw,38px);align-items:start;
  padding:clamp(18px,2.3vw,28px) clamp(10px,1.4vw,18px);
}
.shop-row .no{font-family:var(--mono);font-weight:400;font-size:var(--s2);line-height:1.1;
  color:var(--ink-faint);font-variant-numeric:lining-nums}
.shop-row h3{font-size:var(--s1);margin:0}
.shop-row .var{display:block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:7px}
.shop-row p{font-size:var(--s-1);line-height:1.62;color:var(--ink-soft);margin:11px 0 0;max-width:62ch}
.shop-row .catch b{display:block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--second)}
.shop-row .buy{justify-self:end;text-align:right}
/* Resaltada: es la fila del punto que acabas de tocar. Mismo gesto que
   .size.yours en la guia de alfombras, para que se lea igual en las dos. */
.shop-row.is-on{background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.shop-row.is-on .no{color:var(--accent)}
@media (max-width:700px){
  .shop-row .r{grid-template-columns:2.8rem minmax(0,1fr)}
  .shop-row .buy{grid-column:2;justify-self:start;text-align:left}
}

@media (hover:hover) and (pointer:fine){
  .shop-dot:hover{transform:translate(-50%,-50%) scale(1.14)}
  .shop-row:hover .no{color:var(--accent)}
  .shop-no:hover{color:var(--ink)}
  .shop-x:hover{color:var(--ink)}
  /* el .card generico se oscurece al pasar por encima; aqui la tarjeta esta
     sobre una foto y ese cambio se lee como un fallo, asi que se anula */
  .shop-card:hover{background:var(--surface)}
}

/* 15. Bandas de material (R6-F4, regla ampliada por R7-F0). Franja de altura
   fija, nunca a pagina completa y nunca con texto largo encima. La foto va en un
   <img loading=lazy> y no en background-image: un background se pide en cuanto
   la seccion entra en el arbol de pintado aunque este ocho pantallas abajo, y
   eso cargaria la primera pantalla movil. Con origen 4:1 y caja de 3.9:1 en
   movil y 8.6:1 en escritorio el recorte es casi todo vertical: lo que elige
   object-position por breakpoint es la altura del corte, no el lado.
   Sin datos de sobra no se pide la tela y queda el color plano, uno de los seis.
   Se llama matband y NO mat: .mat ya existe arriba (listas de materiales,
   <ul class="mat"> en siete paginas de proyecto) y darle altura fija con
   overflow hidden recortaba esa lista de 6239 px a 104, dejando cinco de seis
   materiales invisibles. Tampoco band, que ya se usa en el <style> de varias
   paginas. Antes de crear una clase compartida, busca el nombre en ll.css Y en
   los <style> de las paginas: check.js no detecta esta colision.

   R7-F0, 19 sep 2026: la banda pasa de "una y solo una por pagina" a
   BANDA COMO CAPITULO: hasta TRES por pagina, y cada una tiene que abrir un
   <h2> de verdad inmediatamente despues. La regla vieja era de R6 y se quedo
   corta: medido en movil, las guias largas tienen tramos de 6 a 11 pantallas
   sin nada visual y una sola banda cada 15 o 20 pantallas no los rompe. Lo
   que sigue prohibido es la banda decorativa: si detras no hay capitulo, no
   hay banda, y cuatro bandas son una plantilla otra vez. */
.matband{position:relative;height:104px;overflow:hidden;background:var(--stone)}
.matband>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin-inline:0;object-fit:cover;object-position:50% 50%}
.matband-limewash{background:var(--parchment)}.matband-walnut{background:var(--espresso)}
@media (min-width:760px){.matband{height:136px}.matband-limewash>img{object-position:50% 38%}.matband-linen>img{object-position:50% 42%}.matband-walnut>img{object-position:50% 74%}.matband-dropcloth>img{object-position:50% 58%}}
@media (min-width:1100px){.matband{height:168px}}
@media (prefers-reduced-data:reduce){.matband>img{display:none}}

/* 16. Modo guiado "Do it with me" (R6-F3a, subido aqui por R6-F6).
   Vivia repetido byte a byte en los cuatro proyectos largos porque cuando se
   escribio habia otros agentes dentro de esta hoja. Las cuatro copias eran
   identicas (3436 b), asi que subirlo no cambia ni un pixel y deja el
   componente listo para los seis mini proyectos. El script vive en ll.js y
   se rinde solo si no encuentra .gm[data-guide]. */
.gm{display:block}
.gm-tray{margin:0 0 var(--sp-tight)}
.gm-d{border:1px solid var(--rule);padding:0 clamp(13px,1.8vw,17px) clamp(8px,1.4vw,13px)}
.gm-sum,.wgw-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.gm-sum::-webkit-details-marker,.wgw-sum::-webkit-details-marker{display:none}
.gm-sum{color:var(--accent)}
.wgw-sum{color:var(--second)}
.gm-sum::after,.wgw-sum::after{content:"+";margin-left:auto;font-size:1.15em;line-height:1;color:var(--ink-faint)}
.gm-d[open] .gm-sum::after,.wgw[open] .wgw-sum::after{content:"\2212"}
.gm-mats{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--rule-soft)}
.gm-mats>li{padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.gm-mats .q{display:block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.gm-mats .t{display:block;font-size:var(--s-1);line-height:1.5;color:var(--ink-soft)}
.gm-mats li.is-have .q,.gm-mats li.is-have .t{text-decoration:line-through;color:var(--ink-faint)}
.gm-have,.gm-check{display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;cursor:pointer;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.gm-have input,.gm-check input{width:22px;height:22px;flex:none;accent-color:var(--accent);margin:0}
.gm-check{margin-top:6px;color:var(--ink-soft)}
.gm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-block:1px solid var(--rule)}
.gm-count{margin:0;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.gm-reset{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;background:transparent;border:1px solid var(--ink);color:var(--ink);padding:9px 15px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out)}
.gm-reset:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.gm-reset:hover{background:var(--ink);color:var(--ground)}}
.gm .is-done h3,.gm .is-done .s,.gm .is-done .numeral{color:var(--ink-faint)}
.wgw{margin:0;padding-top:4px;border-top:1px solid var(--rule-soft)}
.wgw p{margin:0 0 10px;font-size:var(--s-1);line-height:1.6;color:var(--ink-soft);max-width:60ch}
@media (min-width:1100px){
  .gm{display:grid;grid-template-columns:minmax(0,1fr) minmax(232px,292px);gap:clamp(26px,3vw,54px);align-items:start}
  /* la bandeja puede ser mas alta que la pantalla: se queda pegada con su
     propio desplazamiento en vez de arrastrar la pagina. */
  .gm-tray{order:2;position:sticky;top:92px;margin:0;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain}
  .gm-list{order:1;min-width:0}
}

/* ==========================================================================
   17. Sistema riso (R7-F0). Dos tintas planas sobre papel, grano visible,
   desajuste de un milimetro y linea de mano. La guia de dibujo entera esta
   en briefs/RISO.md; aqui solo estan las piezas.
   Reglas duras: dos tintas por escena (la tercera solo si la regla que se
   ensena la necesita), cero degradados, cero circulos perfectos, ningun
   texto dentro del svg, movimiento con steps() a 8-12 imagenes por segundo
   y una sola vez. Las cifras van en HTML al lado, con data-in.

   Por que todas las clases del dibujo llevan prefijo r: .k tenia 65 usos en
   el sitio y .sh otros 3. Una clase corta sin prefijo dentro de un svg es
   la colision de R6 otra vez.
   -------------------------------------------------------------------------- */
:root{
  --ink-1:var(--espresso); --ink-2:var(--clay); --ink-3:var(--olive);
  --riso-fps:100ms;   /* 10 imagenes por segundo: el tartamudeo es la firma */
  --riso-max:560px;   /* por encima de esto el trazo pasa de 3 px y se afea */
}

/* 17.1 La caja. El papel es parchment siempre, nunca ivory ni stone. */
.riso{margin:var(--sp-block) auto 0;padding:0;max-width:var(--riso-max)}
.riso-box{position:relative;background:var(--parchment);border:1px solid var(--rule)}
.riso-box>svg{display:block;width:100%;height:auto}
.riso figcaption{margin-top:14px}

/* 17.2 Las tintas. Se cruzan con multiply, que es como se comporta la tinta
   de verdad: donde dos se pisan sale el tercer color solo. */
.rx1,.rx2{mix-blend-mode:multiply}
.rbg{fill:var(--parchment)}
.rk{fill:none;stroke:var(--ink-1);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rkt{stroke-width:1.8}
.rkm{stroke-width:2.2}
.rld{stroke-width:1.1}
.rk2{fill:none;stroke:var(--ink-2);stroke-width:3;stroke-linecap:round}
.rs1{fill:var(--ink-1);stroke:none}
.rs2{fill:var(--ink-2);stroke:none}
.rs3{fill:var(--ink-3);stroke:none}
/* reserva: el canto de un libro, el hueco de un tirador. Papel, no blanco. */
.rpg{fill:none;stroke:var(--parchment);stroke-width:2;stroke-linecap:round}

/* 17.3 Trama, no degradado. El volumen y la sombra son puntos de radio
   distinto por zona. Los <pattern> viven en el bloque ll:riso-defs. */
.rsh{fill:url(#riso-dot-a);stroke:none}
.rsh-b{fill:url(#riso-dot-b);stroke:none}

/* 17.4 Grano. Se pinta sobre TODO el dibujo, tambien donde no hay trazo:
   una zona plana sin grano rompe la ilusion.
   Es una pastilla de 128 px en mosaico (img/riso-grain.png), NO el filtro.
   Medido en movil a 400 px reales con dpr 2: rasterizar la escena con
   feTurbulence costaba 26,3 ms, y 6,4 ms en el mejor caso pudiendo cachear.
   El encargo pone el limite en 4 ms y manda el recambio por png, asi que
   esta es la via buena. El filtro sigue definido en el bloque de defs para
   una marca suelta y quieta; detras de algo que se mueve, nunca. */
.riso-grain{fill:url(#riso-paper);mix-blend-mode:multiply;opacity:.62}

/* 17.5 Desajuste de tintas. Un milimetro, fijo, jamas animado: es lo que
   dice "impreso" en vez de "renderizado". */
.riso-off{transform:translate(1px,1px)}

/* 17.6 Animacion. Los frames van apilados y cada uno lleva su propio fondo
   de papel, asi que basta con encenderlos en orden: el de arriba tapa al de
   abajo y ninguno hay que apagarlo. Nada de opacity, que el auditor cuenta
   como elemento escondido; visibility no le molesta y hace lo mismo.
   Sin JS y con movimiento reducido se ve el ultimo frame, que por contrato
   es un dibujo terminado y legible solo. */
.riso-anim .rf{visibility:hidden}
.riso-anim:not(.is-go) .rf:last-of-type{visibility:visible}
.riso-anim.is-go .rf{
  visibility:hidden;
  animation:riso-play 1ms steps(1,end) 1 forwards;
  animation-delay:calc(var(--i,0) * var(--riso-fps));
}
@keyframes riso-play{to{visibility:visible}}

/* 17.7 El mando de repetir. El dibujo se ve una vez al entrar en pantalla;
   si la lectora quiere verlo otra vez, lo pide. Nunca en bucle al lado de
   un parrafo. Sin JS no hay mando y no hace falta: se ve el ultimo frame. */
.riso-replay{display:none}
.js .riso-replay{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;
  margin-top:12px;padding:9px 15px;cursor:pointer;
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--rule);color:var(--ink-soft);
  transition:border-color 180ms var(--ease-out),color 180ms var(--ease-out);
}
.riso-replay:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.riso-replay:hover{border-color:var(--ink);color:var(--ink)}}

/* 17.8 Movimiento reducido: quieto en el ultimo frame y sin mando. */
@media (prefers-reduced-motion:reduce){
  .riso-anim.is-go .rf{animation:none}
  .riso-anim .rf{visibility:hidden}
  .riso-anim .rf:last-of-type{visibility:visible}
  .js .riso-replay{display:none}
}

/* --------------------------------------------------------------------------
   18. .sil: la silueta a escala (R7-F0). El motivo que ninguna plantilla
   tiene: el sitio dice "measured" y la silueta lo demuestra. El viewBox va
   en pulgadas reales, asi que el sofa de 85 sale mas ancho que el de 72 sin
   redibujar nada. Solo --ink y --rule; aqui no entra la paleta riso.

   Ojo: guide-coffee-table.html ya tenia su propio .sil en un <style> de
   pagina (sofa y mesa, otro dibujo). Por eso TODAS las reglas de aqui piden
   ademas [data-w], que aquella figura no lleva: asi no se pisan.
   -------------------------------------------------------------------------- */
.sil[data-w]{
  --sil-ppi:3.2;            /* pixeles por pulgada; la pagina puede bajarlo */
  margin:var(--sp-block) 0 0;padding:0;display:grid;gap:12px;justify-items:start;
}
.sil[data-w] .sil-fig{
  display:block;height:auto;max-width:100%;
  width:calc(var(--w,60) * var(--sil-ppi) * 1px);
  /* el simbolo viene de un archivo aparte: ahi dentro solo entra lo que se
     hereda, asi que el trazo sale de color y el relleno de --sil-fill.
     El grosor se divide por la escala para que 85 in y 24 in salgan con la
     misma linea de 1,8 px, que es lo que hace que se comparen de verdad. */
  color:var(--ink); --sil-fill:var(--rule); --sil-void:var(--ground);
  --sil-sw:calc(1.8 / var(--sil-ppi));
  overflow:visible;
}
.sil[data-w] .sil-cota{fill:none;stroke:var(--ink);stroke-width:calc(1.4 / var(--sil-ppi));stroke-linecap:round}
.sil[data-w] figcaption{margin:0;font-size:var(--s-1);line-height:1.55;color:var(--ink-soft);max-width:52ch}
.sil[data-w] .sil-n{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block}
@media (max-width:560px){.sil[data-w]{--sil-ppi:2.5}}

/* La cota corta de G7: 260 ms, una sola vez, cuando el numero CAMBIA. No es
   la de .draw (900 ms y se repite al pasar por encima): esta acompana a una
   respuesta que se acaba de calcular y tiene que terminar antes que la lea. */
.cota-svg{display:block;width:100%;max-width:200px;height:12px;margin-top:10px;color:var(--accent)}
.ll-cota{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.js.can-draw .ll-cota{stroke-dasharray:1;stroke-dashoffset:1}
.js.can-draw .ll-cota.is-drawn{stroke-dashoffset:0;transition:stroke-dashoffset 260ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js.can-draw .ll-cota,.js.can-draw .ll-cota.is-drawn{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}

/* --------------------------------------------------------------------------
   19. .pin: guardar una figura en Pinterest (R7-F0). Sin script de terceros:
   el enlace es una URL que se construye en ll.js con url, media y la
   descripcion que trae data-pin. Cero cookies ajenas, cero peticiones a
   dominios de fuera hasta que la lectora pulsa. Sin JS no hay enlace: mejor
   nada que un enlace roto, y la figura se lee igual.
   -------------------------------------------------------------------------- */
.pin{display:none}
.js .pin{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  margin-top:10px;padding:8px 0;
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent;
  transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out);
}
.pin:active{transform:scale(.97)}
.pin .pin-ic{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){.pin:hover{color:var(--accent);border-bottom-color:var(--accent)}}

/* 20. Memoria del cuarto (ll-room). No pinta nada por si misma; solo el
   boton de olvidarla, que tiene que estar visible alla donde se muestre el
   cuarto guardado. Quien no puede borrar lo que guardo el sitio no ha dado
   permiso, ha perdido una discusion. */
.room-mem{display:none}
.js .room-mem[data-room-on]{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-block:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.room-forget{
  min-height:44px;display:inline-flex;align-items:center;cursor:pointer;
  padding:8px 14px;background:transparent;border:1px solid var(--rule);color:var(--ink-soft);
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  transition:border-color 180ms var(--ease-out),color 180ms var(--ease-out);
}
.room-forget:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.room-forget:hover{border-color:var(--accent);color:var(--accent)}}


/* ==========================================================================
   R12: zonas tactiles. Los tres objetivos que la auditoria encontro por
   debajo de los 44 px del dedo. Se agrandan sin mover nada de sitio, con
   un ::before transparente, que es el patron que .shop-dot ya usaba bien.
   ========================================================================== */
.shop-x{position:relative}
.shop-x::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.unit button{min-height:44px}
.wordmark{position:relative;display:inline-flex;align-items:center;min-height:44px}
.colophon-grid a{min-height:44px;display:flex;align-items:center;padding:0}

/* ==========================================================================
   R14. Dos componentes de recorrido: guardar en Pinterest, e ir a la tienda.
   ========================================================================== */

/* --- Guardar en Pinterest ------------------------------------------------
   Un enlace, no un boton con JavaScript: Pinterest abre su propio dialogo.
   El sitio vive de Pinterest y hasta ahora no habia forma de guardar nada.
   44 px de alto minimo, que es la regla tactil del resto del sitio. */
.pin-save{
  display:inline-flex;align-items:center;gap:.55em;
  min-height:44px;padding:0 1em;
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;
  background:transparent;
  transition:border-color 160ms ease-out,color 160ms ease-out;
}
.pin-save:hover{border-color:var(--clay);color:var(--clay)}
.pin-save:active{transform:scale(.97)}
.pin-save svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}

/* --- Tarjeta hacia la tienda --------------------------------------------
   Imagen mas una frase de Nora mas el enlace. Es a la vez la unica entrada
   que tienen las paginas de tienda desde las guias y un corte en el texto.
   A partir de 560 px la foto va al lado; por debajo, encima. */
.to-shop{
  container-type:inline-size;
  margin-block:var(--sp-block);
  padding:var(--sp-tight);
  background:var(--ivory);border:1px solid var(--stone);
}
/* La rejilla va en el hijo. Un elemento no puede consultarse a si mismo con
   @container: la regla de dos columnas puesta en .to-shop no se aplicaba nunca
   y la foto se estiraba a todo el ancho con un archivo de 480. */
.to-shop-in{display:grid;gap:var(--sp-tight)}
/* Mira su propio ancho, no el de la ventana. Con una media query la tarjeta
   se partia en dos columnas de 224 px dentro de una columna de texto, que es
   el defecto de las columnas degeneradas otra vez. 520 px es el ancho a
   partir del cual la foto y el texto caben de verdad uno al lado del otro. */
@container (min-width:520px){
  .to-shop-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
}
/* Sin soporte de container queries, una sola columna: se lee siempre bien. */
.to-shop img{display:block;width:100%;height:auto;border:1px solid var(--rule-soft)}
.to-shop-body{min-width:0}
.to-shop .eyebrow,.to-shop .kicker{color:var(--ink-faint)}
.to-shop h3{margin:0 0 .4em}
.to-shop p{margin:0 0 var(--sp-tight)}
.to-shop a.btn,.to-shop a.link-draw{min-height:44px;display:inline-flex;align-items:center}

/* --- Saltar al contenido -------------------------------------------------
   Solo existe para el teclado: fuera de foco no ocupa nada. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--espresso);color:var(--parchment);
  min-height:44px;display:inline-flex;align-items:center;
  padding:0 1.2em;text-decoration:none;
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

/* La respuesta corta de cada pagina (R15). Cada pagina trae su CSS en su
   <style>; esta regla solo iguala el ancho en escritorio, que sin ella iba de
   borde a borde (unos 127 caracteres por linea bajo un titulo centrado).
   .answer.answer para ganar al margin:0 de las reglas de cada pagina. */
.answer.answer{max-width:720px;margin-left:auto;margin-right:auto;box-sizing:border-box}

/* Atajos a los disenos (Kyara, 23 sep 2026: "si quieren comprar o hay
   intencion, mandar abajo donde estan los disenos"). Tres sitios:
   debajo de la respuesta corta, debajo del boton de la calculadora y en la
   barra fija de abajo. Todos son saltos internos, ningun producto se repite. */
.answer-more{margin:12px 0 0;font-size:var(--s-1)}
.calc-more{display:inline-block;margin-top:12px;font-size:var(--s-1)}
/* En la barra de rug hay dos enlaces: Amazon sigue siendo el relleno, el de
   los disenos va en linea fina para que no compitan. */
.stick .stick-alt{background:transparent;color:var(--parchment);box-shadow:inset 0 0 0 1px #F2EADB66}
.stick .stick-alt + a{margin-left:0}
@media (max-width:520px){.stick{gap:8px}.stick a{padding:9px 10px;letter-spacing:.1em}}
/* Entrada del catalogo de lamp: una fila de saltos por forma. 44 px de alto
   para el dedo. */
.shape-nav{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-tight) 0 0}
.shape-nav a{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 14px;
  border:1px solid var(--stone);color:var(--espresso);text-decoration:none;background:var(--ivory);
  font-family:var(--mono);font-size:var(--s-2);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.shape-nav a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.shape-nav a:hover{background:var(--parchment)}}
/* Textos largos y cortos de la barra: en el telefono "On Amazon" y "Shapes"
   para que quepan en una linea con la medida y la X. El nombre accesible
   del enlace de Amazon va en su aria-label, no depende de esto. */
.stick .stick-sm{display:none}
@media (max-width:520px){.stick .stick-lg{display:none}.stick .stick-sm{display:inline}}

/* SEO / velocidad (23 sep 2026). La foto principal de cada pagina
   (fetchpriority="high") no espera a la animacion de .reveal: recortada con
   clip-path, el navegador no la cuenta como pintada (LCP) hasta que el JS la
   destapa, y en un movil con 4G lento eso eran 6 a 7 s en la portada y en las
   tiendas. El resto de .reveal sigue igual. Sin :has, queda la animacion. */
.js .reveal:has(img[fetchpriority="high"]){clip-path:none;transition:none}

/* ==========================================================================
   Marca del canal (EP01, sep 2026): Lease and Layer, with Nora.
   Las cuatro tintas riso del canal entran como tokens de MARCA, no de
   interfaz: solo en el logo, los chips de calificacion y el acabado riso de
   los dibujos que explican una regla. Nada de botones ni texto en ellas.
   ========================================================================== */
:root{--ink-navy:#3D5588;--ink-teal:#00838A;--ink-sun:#FFB511;--ink-coral:#F15060}
/* Logo: Poppins con la sombra sun desregistrada, el and a mano en coral y
   with Nora a maquina debajo, como el banner del canal. */
.wordmark{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;color:var(--parchment)}
.wm-name{font-family:"Poppins",var(--sans,system-ui),sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:-.01em;line-height:1;text-shadow:1.5px 1.5px 0 var(--ink-sun)}
.wm-and{font-family:"Caveat",cursive;font-weight:600;font-size:1.22em;color:var(--ink-coral);text-shadow:none;margin:0 .06em;letter-spacing:0}
.wm-sub{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;line-height:1;color:#F2EADBB3}
@media (max-width:520px){.wm-name{font-size:1.02rem}.wm-sub{font-size:.58rem}}
.colophon .fh .wm-and{font-size:1.15em}
.fh-tag,.tagline{font-family:var(--mono);letter-spacing:.02em;margin:6px 0 10px}
.tagline{color:var(--ink-navy);font-size:.95rem;margin:14px 0 0}
/* Chip de calificacion: la misma tarjeta que en el video. Tres bandas con
   trama de puntos de las mezclas del canal, esquina doblada, sombra de
   puntos navy, grado a maquina, nombre y codigo en Poppins. */
.pchip{position:relative;display:inline-block;flex:none;width:92px;transform:rotate(-2.5deg)}
.pchip::after{content:"";position:absolute;inset:5px -5px -5px 5px;background:radial-gradient(circle,var(--ink-navy) 0 .75px,transparent 1.05px) 0 0/3px 3px;opacity:.55}
.pchip-card{position:relative;z-index:1;display:flex;flex-direction:column;padding:7px 7px 8px;background:#FBF8F2;box-shadow:0 0 0 1px #3D55881F}
.pchip-card::before{content:"";position:absolute;top:0;right:0;width:13px;height:13px;background:linear-gradient(225deg,var(--parchment) 50%,#DCD6CB 50%)}
.pchip-bands{display:grid;gap:2px;height:62px;box-shadow:-1px 1px 0 #FFB51180}
.pchip-bands i{display:block}
.pchip-word{margin-top:7px;font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1.1;letter-spacing:.04em;color:var(--ink-navy)}
.pchip-name{margin-top:2px;font-family:"Poppins",sans-serif;font-size:8.5px;line-height:1.2;color:var(--ink-navy)}
.pchip-code{font-family:"Poppins",sans-serif;font-size:7px;color:#3D558899}
.pchip-untested .pchip-bands i{border:1px dashed #3D558866;background:#FBF8F2}
.pchip-sage .pchip-bands i:nth-child(1){background:radial-gradient(circle,var(--ink-teal) 0 0.72px,transparent 1.02px) 0.8px -0.5px/3px 3px,radial-gradient(circle,var(--ink-sun) 0 0.65px,transparent 0.95px) -0.8px 0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-sage .pchip-bands i:nth-child(2){background:radial-gradient(circle,var(--ink-teal) 0 1.03px,transparent 1.33px) 0.8px -0.5px/3px 3px,radial-gradient(circle,var(--ink-sun) 0 0.86px,transparent 1.16px) -0.8px 0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-sage .pchip-bands i:nth-child(3){background:radial-gradient(circle,var(--ink-teal) 0 1.26px,transparent 1.56px) 0.8px -0.5px/3px 3px,radial-gradient(circle,var(--ink-sun) 0 1.03px,transparent 1.33px) -0.8px 0.5px/3px 3px,radial-gradient(circle,var(--ink-navy) 0 0.65px,transparent 0.95px) 0px 0px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-solid .pchip-bands i:nth-child(1){background:radial-gradient(circle,var(--ink-teal) 0 0.79px,transparent 1.09px) 0.8px -0.5px/3px 3px,radial-gradient(circle,var(--ink-sun) 0 0.65px,transparent 0.95px) -0.8px 0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-solid .pchip-bands i:nth-child(2){background:radial-gradient(circle,var(--ink-teal) 0 1.08px,transparent 1.38px) 0.8px -0.5px/3px 3px,radial-gradient(circle,var(--ink-sun) 0 0.86px,transparent 1.16px) -0.8px 0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-solid .pchip-bands i:nth-child(3){background:radial-gradient(circle,var(--ink-teal) 0 1.30px,transparent 1.60px) 0.8px -0.5px/3px 3px,radial-gradient(circle,var(--ink-sun) 0 1.03px,transparent 1.33px) -0.8px 0.5px/3px 3px,radial-gradient(circle,var(--ink-navy) 0 0.65px,transparent 0.95px) 0px 0px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-shaky .pchip-bands i:nth-child(1){background:radial-gradient(circle,var(--ink-sun) 0 0.86px,transparent 1.16px) -0.8px 0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-shaky .pchip-bands i:nth-child(2){background:radial-gradient(circle,var(--ink-sun) 0 1.17px,transparent 1.47px) -0.8px 0.5px/3px 3px,radial-gradient(circle,var(--ink-coral) 0 0.32px,transparent 0.62px) 0.5px 0.8px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-shaky .pchip-bands i:nth-child(3){background:radial-gradient(circle,var(--ink-sun) 0 1.45px,transparent 1.75px) -0.8px 0.5px/3px 3px,radial-gradient(circle,var(--ink-coral) 0 0.56px,transparent 0.86px) 0.5px 0.8px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-vibes .pchip-bands i:nth-child(1){background:radial-gradient(circle,var(--ink-coral) 0 0.50px,transparent 0.80px) 0.5px 0.8px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-vibes .pchip-bands i:nth-child(2){background:radial-gradient(circle,var(--ink-coral) 0 0.68px,transparent 0.98px) 0.5px 0.8px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-vibes .pchip-bands i:nth-child(3){background:radial-gradient(circle,var(--ink-coral) 0 0.86px,transparent 1.16px) 0.5px 0.8px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-works .pchip-bands i:nth-child(1){background:radial-gradient(circle,var(--ink-navy) 0 0.72px,transparent 1.02px) 0px 0px/3px 3px,radial-gradient(circle,var(--ink-teal) 0 0.32px,transparent 0.62px) 0.8px -0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-works .pchip-bands i:nth-child(2){background:radial-gradient(circle,var(--ink-navy) 0 1.03px,transparent 1.33px) 0px 0px/3px 3px,radial-gradient(circle,var(--ink-teal) 0 0.50px,transparent 0.80px) 0.8px -0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
.pchip-works .pchip-bands i:nth-child(3){background:radial-gradient(circle,var(--ink-navy) 0 1.26px,transparent 1.56px) 0px 0px/3px 3px,radial-gradient(circle,var(--ink-teal) 0 0.65px,transparent 0.95px) 0.8px -0.5px/3px 3px,#FBF8F2;background-blend-mode:multiply}
/* Lista de grados con chip: chip a la izquierda, frase a la derecha */
.grades.grades-chip li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin:0 0 6px}
/* Acabado riso para los dibujos que explican: fantasma coral desregistrado
   y trama navy encima (la trama la pone un rect con url(#riso-dots)). */
.riso svg{filter:drop-shadow(1.4px 1px 0 #F1506059)}
.riso-dots{mix-blend-mode:multiply;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pchip{transform:none}}
/* Pie: el nombre de la marca con el mismo estilo que el logo de la cabecera,
   no en mayusculas a maquina como los otros titulos del pie. */
.colophon-grid>div:first-child>.fh:first-child{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;text-transform:none;color:var(--ink);text-shadow:1.5px 1.5px 0 var(--ink-sun);margin-bottom:0}
.colophon-grid>div:first-child>.fh:first-child .wm-and{text-shadow:none}

/* ==========================================================================
   R16. Rediseno riso (25 sep 2026). Decidido con Kyara tras cuatro pruebas:
   - la base es VERDE (bosque y salvia), no azul: conversa con las fotos
     (butacas oliva, plantas, nogal) y es el Sage Whisper del canal;
   - terracota para comprar (complementario del verde: se ve sin gritar);
   - mostaza para cintas y acentos;
   - el color de las superficies va en TRAMA, como en el video: puntos de
     dos tintas sobre papel, nunca un plano liso. Las tramas son gradientes
     de CSS: cero bytes, nitidas a cualquier dpr;
   - el texto y el relleno de los botones van en tinta lisa para leerse en el
     celular; la trama vive en fondos, bordes, cintas y sombras;
   - nada de huecos de tinta (los puntos blancos): Kyara los descarto.
   Contrastes medidos: texto #23392F 11:1, titulos #2F5242 7,8:1, boton
   terracota con crema 5,9:1, teal de texto 5,4:1, todo sobre #F6F1E6.
   ========================================================================== */
:root{
  --parchment:#F6F1E6; --ivory:#FFFCF6; --espresso:#23392F;
  --clay:#A8452A; --olive:#3E6B55; --stone:#DDD5C3;
  --ground:#F6F1E6; --surface:#FFFCF6;
  --ink:#23392F; --ink-soft:#23392FD8; --ink-faint:#23392FC4;
  --accent:#A8452A; --accent-ink:#FFFCF6; --second:#3E6B55;
  --rule:#DDD5C3; --rule-soft:#DDD5C366;
  /* tintas del sitio: las del canal con el navy cambiado por bosque */
  --forest:#2F5242; --sage:#8FAE8B; --terra:#A8452A; --mustard:#E9B949; --coral-hand:#D9534A;
  --ink-navy:#2F5242; --ink-teal:#3E7A63; --ink-sun:#E9B949; --ink-coral:#D9534A;
  --ink-1:#2F5242; --ink-2:#D9534A; --ink-3:#3E7A63;
  --hand:"Caveat",cursive;
  /* Tramas: cada una son dos rejillas de puntos corridas medio paso, una por
     tinta, como dos pasadas de la riso. */
  --tr-forest:radial-gradient(circle,#223F32 0 1.25px,transparent 1.6px) 0 0/4px 4px,radial-gradient(circle,#6E7D3C 0 .6px,transparent .9px) 2px 2px/4px 4px,#2F5242;
  --tr-sage:radial-gradient(circle,#3E7A63 0 1px,transparent 1.35px) 0 0/4px 4px,radial-gradient(circle,#E9B949 0 .8px,transparent 1.1px) 2px 2px/4px 4px,#C9D7BF;
  --tr-terra:radial-gradient(circle,#A8452A 0 1.2px,transparent 1.6px) 0 0/4px 4px,radial-gradient(circle,#E9B949 0 .8px,transparent 1.1px) 2px 2px/4px 4px,#E7A184;
  --tr-mustard:radial-gradient(circle,#D39A22 0 1px,transparent 1.35px) 0 0/3.5px 3.5px,#F2CF73;
  --tr-shadow:radial-gradient(circle,#2F5242 0 .95px,transparent 1.3px) 0 0/3.5px 3.5px;
  --s4:clamp(2.15rem,1.55rem + 2.6vw,4.1rem);
  --s3:clamp(1.7rem,1.38rem + 1.5vw,2.7rem);
  --s2:clamp(1.3rem,1.17rem + .6vw,1.75rem);
}
/* Papel claro con cuadricula salvia, como la hoja de "house rule" */
body{background:repeating-linear-gradient(0deg,#5E8A6E24 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#5E8A6E24 0 1px,transparent 1px 28px),var(--parchment)}
::selection{background:#E9B94999;color:var(--ink)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}

/* Titulos: tinta bosque con el registro corrido (fantasma coral a un lado,
   mostaza al otro), como dos pasadas de la maquina que no calzan. */
h1,h2{color:var(--forest);text-shadow:-1.5px 1.1px 0 #D9534A66,1.4px 1.5px 0 #E9B94980}
h1{letter-spacing:-.025em;line-height:1.06}
h2{letter-spacing:-.018em;line-height:1.12}
h3{letter-spacing:-.008em}
h1 em,h2 em{font-style:normal;color:var(--terra)}
.on-espresso h1,.on-espresso h2,.on-olive h1,.on-olive h2{color:var(--ivory);text-shadow:1.5px 1.5px 0 #E9B94980}
/* El h1 de cada pagina es la tira de papel de las miniaturas, con sombra de
   trama y dos cintas mostaza en trama. */
main h1{position:relative;width:fit-content;background:var(--ivory);padding:.22em .42em .26em;transform:rotate(-1deg);box-shadow:5px 6px 0 #2F524224}
main h1::before,main h1::after{
  content:"";position:absolute;top:-.34em;width:2.1em;max-width:64px;height:.62em;max-height:20px;
  background:var(--tr-mustard);opacity:.9;transform:rotate(-7deg);
  clip-path:polygon(0 8%,6% 0,12% 10%,20% 2%,100% 0,94% 90%,88% 100%,80% 92%,0 100%,5% 50%);
}
main h1::before{left:-.5em}
main h1::after{right:-.5em;transform:rotate(8deg)}
.on-espresso h1,.on-olive h1{background:var(--ivory);color:var(--forest);text-shadow:-1.5px 1.1px 0 #D9534A66,1.4px 1.5px 0 #E9B94980}

/* Parrafos de entrada: Karla, no Poppins en bloque */
.lede{font-family:var(--body);font-size:var(--s1);font-weight:500;line-height:1.5}
.pull p{font-weight:600;font-size:var(--s1);line-height:1.35}
.colophon .said{font-family:var(--body);font-weight:500}
.pull{background:var(--tr-forest);color:var(--ivory);box-shadow:6px 6px 0 var(--mustard)}
.dropcap::first-letter{font-weight:700;color:var(--terra)}

/* Cinta mostaza en trama, con los cortes a mano en los extremos */
.tape{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--ink);
  background:var(--tr-mustard);border:0;border-image:none;padding:5px 14px 4px;margin:0;
  clip-path:polygon(0 10%,3% 0,97% 6%,100% 0,98% 50%,100% 100%,4% 94%,0 100%,2% 50%);
}
@supports (border-image-slice:1 fill){.tape{background:var(--tr-mustard)}}

/* Franjas oscuras: bosque en trama. La olivo pasa a salvia oscura. */
.on-espresso{
  --ground:#2F5242;--ink:#FFFCF6;--accent:#F2CF73;--accent-ink:#23392F;
  --surface:#2F5242;--ink-soft:#FFFCF6E6;--ink-faint:#FFFCF6CC;
  --second:#C9D7BF;--rule:#FFFCF63D;--rule-soft:#FFFCF624;
  background:var(--tr-forest);color:#FFFCF6;
}
.on-olive{
  --ground:#3E6B55;--ink:#FFFCF6;--accent:#F2CF73;--accent-ink:#23392F;
  --surface:#3E6B55;--ink-soft:#FFFCF6;--ink-faint:#FFFCF6;
  --second:#FFFCF6;--rule:#FFFCF644;--rule-soft:#FFFCF629;
  background:radial-gradient(circle,#2F5A47 0 1.25px,transparent 1.6px) 0 0/4px 4px,radial-gradient(circle,#7E8C45 0 .6px,transparent .9px) 2px 2px/4px 4px,#3E6B55;color:#FFFCF6;
}

/* Cabecera y barras fijas: bosque en trama; debajo, franja mostaza en trama */
.masthead,.stick{background:var(--tr-forest);color:var(--ivory)}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:var(--tr-mustard);pointer-events:none}
.wordmark{color:var(--ivory)}
.wm-name{text-shadow:-1.2px 1px 0 #D9534A99,1.5px 1.5px 0 var(--mustard)}
.wm-and{color:#F08A7E}
.wm-sub{color:#FFFCF6B3}
.nav a{color:#FFFCF6D9}
.nav a[aria-current="page"]{color:var(--ivory);box-shadow:inset 0 -3px 0 var(--mustard)}
.search input{background:#FFFCF614;border-color:#FFFCF640;color:var(--ivory)}
.search input::placeholder{color:#FFFCF699}
.search input:focus{border-color:var(--mustard);background:#FFFCF61F}
.search button,.unit{border-color:#FFFCF640}
.search button,.unit button{color:#FFFCF6C8}
.unit button[aria-pressed="true"]{background:var(--ivory);color:var(--forest)}
@media (max-width:860px){
  .menu-btn{border-color:#FFFCF640;color:#FFFCF6C8}
  .menu-btn[aria-expanded="true"]{background:var(--ivory);border-color:var(--ivory);color:var(--forest)}
}
/* Pie: franja salvia en trama arriba */
.colophon{position:relative}
.colophon::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--tr-sage);pointer-events:none}

/* Botones: relleno liso (se lee), sombra corrida en trama. El primario es
   terracota, el color de comprar; el resto, papel con borde bosque. Al
   tocar se hunde en el papel. */
.btn{
  font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:0;text-transform:none;
  border:2px solid var(--forest);color:var(--forest);background:var(--ivory);
  box-shadow:3px 3px 0 #2F524259;line-height:1.25;
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 140ms var(--ease-out),box-shadow 140ms var(--ease-out);
}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2F524259}
.btn-primary{background:var(--terra);border-color:var(--terra);color:var(--ivory);box-shadow:3px 3px 0 var(--mustard)}
.btn-primary:active{box-shadow:1px 1px 0 var(--mustard)}
.btn-ghost{border-color:#2F524266;box-shadow:none}
.btn.is-done{background:var(--olive);border-color:var(--olive);color:var(--ivory)}
.on-espresso .btn,.on-olive .btn{border-color:var(--ivory);color:var(--ivory);background:transparent;box-shadow:3px 3px 0 #0000002E}
.on-espresso .btn-primary,.on-olive .btn-primary{background:var(--terra);border-color:var(--terra);color:var(--ivory);box-shadow:3px 3px 0 var(--mustard)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{box-shadow:5px 5px 0 #2F524259;transform:translate(-1px,-1px)}
  .btn-primary:hover{background:#923B23;color:var(--ivory);box-shadow:5px 5px 0 var(--mustard)}
}

/* La respuesta corta es la ficha a maquina: filo salvia en trama arriba y
   sombra de puntos bosque (pseudo detras; .answer no crea contexto propio). */
.answer.answer{position:relative;background:var(--ivory);border:0}
.answer.answer::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--tr-sage)}
.answer.answer::after{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-1;background:var(--tr-shadow);opacity:.4}
.answer .answer-k{font-family:var(--mono);font-weight:700;color:var(--forest);letter-spacing:.08em}

/* Tarjetas: papel sobre papel con sombra de impresion */
.card,.shortcut,.toc,.num{box-shadow:4px 4px 0 #2F52421F}
.dg{color:var(--forest)}
.riso-box{background:var(--parchment)}
figcaption{letter-spacing:.02em}
/* Los chips de calificacion son objetos del canal: conservan sus tintas
   puras (Contractor Blue es azul aunque el sitio sea verde). */
.pchip{--ink-navy:#3D5588;--ink-teal:#00838A;--ink-sun:#FFB511;--ink-coral:#F15060}

/* R16: ilustracion riso de cada guia (tools/arte). Papel con sombra de
   puntos, como las fichas del canal; lazy, despues de la respuesta corta. */
.riso-arte{position:relative;max-width:720px;margin:34px auto 0}
.riso-arte img{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover;background:var(--parchment);box-shadow:0 0 0 1px #2F524229,7px 7px 0 #2F524229}
.riso-arte figcaption{font-family:var(--hand);font-weight:700;font-size:1.35rem;letter-spacing:0;line-height:1.25;color:var(--coral-hand);border-top:0;padding-top:10px;margin-top:0}

/* R16: movimiento riso. Una vez por elemento, solo transform y clip-path,
   nada escondido en opacity:0, y la red de 1200 ms de ll.js lo revela todo
   aunque el observer falle. Con movimiento reducido: todo quieto (arriba).
   - .print: la ilustracion entra como una pasada de rodillo, de izquierda a
     derecha, y luego la frase a mano se escribe (el mismo gesto de la
     riso: primero la tinta, despues la nota);
   - .drop: el chip de calificacion cae y rebota, como en el video;
   - la tira del h1 se asienta al cargar (solo giro: no retrasa el LCP). */
.js .print{clip-path:inset(0 100% 0 0)}
.js .print.in{clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease-in-out)}
.js .print figcaption{clip-path:inset(0 100% 0 0)}
.js .print.in figcaption{clip-path:inset(0 0 0 0);transition:clip-path 700ms steps(14,end) 750ms}
.js .drop{transform:translateY(-26px) rotate(-9deg)}
.js .drop.in{animation:llDrop 620ms cubic-bezier(.34,1.56,.64,1) both}
.js .grades-chip li:nth-child(2) .drop.in{animation-delay:90ms}
.js .grades-chip li:nth-child(3) .drop.in{animation-delay:180ms}
.js .grades-chip li:nth-child(4) .drop.in{animation-delay:270ms}
.js .grades-chip li:nth-child(5) .drop.in{animation-delay:360ms}
@keyframes llDrop{0%{transform:translateY(-26px) rotate(-9deg)}100%{transform:rotate(-2.5deg)}}
main h1{animation:llStrip 460ms var(--ease-out) both}
@keyframes llStrip{from{transform:translateY(-6px) rotate(-3deg)}to{transform:rotate(-1deg)}}

/* R16: la firma lleva el sticker de Nora (recorte con borde blanco, como en
   el cierre del episodio) en vez de la foto redonda. 10 KB. */
.byline .avatar{width:48px;height:62px;border-radius:0;object-fit:contain;box-shadow:none;filter:drop-shadow(2px 2px 0 #2F524238);transform:rotate(-3deg)}
/* Preguntas frecuentes: Nora responde con su sticker. Fondo CSS, asi solo se
   descarga al abrir una pregunta (el panel cerrado no pinta). */
#faq .acc-panel .a{position:relative;padding-left:62px;min-height:60px}
#faq .acc-panel .a::before{content:"";position:absolute;left:0;top:2px;width:46px;height:58px;background:url("../img/nora-sticker-complice.webp") center/contain no-repeat;filter:drop-shadow(2px 2px 0 #2F524238);transform:rotate(-4deg)}
/* Chenille, la gata del sitio, tambien en sticker: borde blanco de 3 px y
   sombra corrida, como Nora. Filtro sobre los PNG/WebP con alfa que ya
   existen: cero bytes nuevos. Las huellas (pawprints) son textura, no van. */
img[src*="chenille-"]:not([src*="pawprints"]){
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(3px 3px 0 #2F524238);
}

/* R16, rooms: los tres numeros de cada cuarto en tres columnas parejas, el
   dibujo arriba de su numero. Con la letra de maquina, mas ancha, la fila
   flex se partia en 2 + 1 y los dibujos flotaban; el plano grande del cuarto
   quedaba suelto a la derecha y repetia lo mismo, asi que se quita aqui. */
.rm .rm-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px;align-items:start}
.rm .rm-num{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.rm .rm-num .dg.n{order:-1;margin:0 0 8px}
.rm .rm-num .v{white-space:normal}
.rm .rm-num .k{letter-spacing:.05em;line-height:1.35}
.rm .rm-nums>.dg.r{display:none}
/* rooms 01: el numeral se monta en la esquina izquierda de la foto; con
   Poppins, mas grueso, chocaba con la cinta. La cinta pasa a la derecha. */
@media (min-width:561px){.rm .rm-1 .pf-tape{left:auto;right:15px;transform:rotate(1.5deg)}}

/* ==========================================================================
   R16b (25 sep 2026). Botones riso, chips que se voltean y variantes del
   arte.
   ========================================================================== */
/* Botones: la sombra es TRAMA de puntos corrida, como la de los chips del
   video, en un pseudo detras del boton. Todo .btn tiene fondo opaco, asi la
   trama nunca queda detras del texto. Al tocar, el boton baja a su sombra. */
.btn{position:relative;isolation:isolate;box-shadow:none}
.btn::after{content:"";position:absolute;inset:5px -6px -6px 5px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,#2F5242 0 1px,transparent 1.35px) 0 0/3.5px 3.5px;opacity:.5;
  transition:inset 140ms var(--ease-out)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn:active::after{inset:2px -3px -3px 2px}
.btn-primary,.btn-primary:active{box-shadow:none}
.btn-primary::after{background:radial-gradient(circle,#D39A22 0 1.2px,transparent 1.6px) 0 0/3.5px 3.5px;opacity:1}
.btn-ghost::after{content:none}
.on-espresso .btn,.on-olive .btn{background:var(--forest);box-shadow:none}
.on-espresso .btn::after,.on-olive .btn::after{background:radial-gradient(circle,#F2CF73 0 1px,transparent 1.35px) 0 0/3.5px 3.5px;opacity:.7}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.btn-primary:hover{box-shadow:none;transform:translate(-1px,-1px)}
  .btn:hover::after{inset:7px -8px -8px 7px}
}

/* Los enlaces a Amazon son ETIQUETAS DE PRECIO colgantes: mostaza, punta a
   la izquierda con su agujero. Se distinguen de un vistazo de los botones que
   llevan a otra parte del sitio. La forma la dibujan los dos pseudos con
   clip-path; el boton solo pone el texto. */
.btn[href*="amazon.com"]{background:transparent;border:0;color:#23392F;padding:12px 20px 12px 38px;font-weight:600}
.btn[href*="amazon.com"]::before,.btn[href*="amazon.com"]::after{
  content:"";position:absolute;pointer-events:none;
  clip-path:polygon(20px 0,100% 0,100% 100%,20px 100%,0 50%);
}
.btn[href*="amazon.com"]::before{inset:0;z-index:-1;
  background:radial-gradient(circle at 17px 50%,var(--parchment) 0 5px,#23392F 5.6px 6.8px,transparent 7.2px),
             radial-gradient(circle,#D39A22 0 .9px,transparent 1.2px) 0 0/3.5px 3.5px,#F2CF73}
.btn[href*="amazon.com"]::after{inset:5px -6px -6px 5px;z-index:-2;opacity:.5;
  background:radial-gradient(circle,#2F5242 0 1px,transparent 1.35px) 0 0/3.5px 3.5px}
.btn[href*="amazon.com"]:active::after{inset:2px -3px -3px 2px}
.btn-primary[href*="amazon.com"]{color:var(--ivory)}
.btn-primary[href*="amazon.com"]::before{background:radial-gradient(circle at 17px 50%,var(--parchment) 0 5px,#FFFCF6 5.6px 6.8px,transparent 7.2px),var(--terra)}
.on-espresso .btn[href*="amazon.com"],.on-olive .btn[href*="amazon.com"]{background:transparent;color:#23392F}
@media (hover:hover) and (pointer:fine){
  .btn[href*="amazon.com"]:hover{transform:translate(-1px,-1px) rotate(-1deg)}
}

/* Chips: se voltean al tocarlos y muestran el dorso, como en el video. */
.pchip{cursor:pointer;perspective:600px;-webkit-tap-highlight-color:transparent}
.pchip-flip{position:relative;display:block;z-index:1;transform-style:preserve-3d;transition:transform 520ms var(--ease-in-out)}
.pchip.is-flipped .pchip-flip{transform:rotateY(180deg)}
.pchip-card{backface-visibility:hidden}
.pchip-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px;
  background:#FBF8F2;box-shadow:0 0 0 1px #3D55881F;transform:rotateY(180deg);backface-visibility:hidden;
  font-family:var(--mono);font-weight:700;font-size:10px;line-height:1.2;letter-spacing:.04em;color:#3D5588}
.pchip-back i{font-style:normal;font-weight:400;font-size:9px;letter-spacing:0;opacity:.8}

/* Ilustracion con variantes (la alfombra): botones de tamano. */
.riso-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0}
.riso-opts[hidden]{display:none}
.riso-opt{min-height:44px;min-width:70px;padding:8px 14px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--forest);
  background:var(--ivory);border:2px solid var(--forest);
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 140ms var(--ease-out)}
.riso-opt:active{transform:translate(2px,2px)}
.riso-opt[aria-pressed="true"]{background:var(--forest);color:var(--ivory)}
.riso-says{flex-basis:100%;margin:2px 0 0;font-family:var(--hand);font-weight:700;font-size:1.3rem;line-height:1.25;color:var(--coral-hand)}

@media (prefers-reduced-motion:reduce){.pchip-flip{transition:none}}
/* con JS la frase vive en .riso-says y cambia con cada tamano */
.js .riso-arte[data-var] figcaption{display:none}
.riso-arte img.reprint{animation:llReprint 620ms var(--ease-in-out)}
@keyframes llReprint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.riso-arte img.reprint{animation:none}}
/* Correccion R16b: dentro del contexto aislado del boton, un pseudo con
   z-index:-1 pinta ENCIMA del fondo del propio boton, asi que la trama
   salia sobre el texto. El fondo y el borde pasan a ::before (z -1) y la
   sombra de trama a ::after (z -2), como en la etiqueta de Amazon. */
.btn:not([href*="amazon.com"]){--bb:var(--ivory);--bc:var(--forest);background:transparent;border-color:transparent}
.btn:not([href*="amazon.com"])::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:var(--bb);box-shadow:inset 0 0 0 2px var(--bc);transition:background-color 180ms var(--ease-out)}
.btn:not([href*="amazon.com"])::after{z-index:-2}
.btn-primary:not([href*="amazon.com"]){--bb:var(--terra);--bc:var(--terra)}
.btn-ghost:not([href*="amazon.com"]){--bc:#2F524266}
.btn.is-done{--bb:var(--olive);--bc:var(--olive);background:transparent}
.on-espresso .btn:not([href*="amazon.com"]),.on-olive .btn:not([href*="amazon.com"]){--bb:var(--forest);--bc:var(--ivory);background:transparent}
.on-espresso .btn-primary:not([href*="amazon.com"]),.on-olive .btn-primary:not([href*="amazon.com"]){--bb:var(--terra);--bc:var(--terra)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:not([href*="amazon.com"]):hover{--bb:#923B23;--bc:#923B23;background:transparent}
}

/* ==========================================================================
   R16c (25 sep 2026). Lampara con deslizador, cinta metrica de lectura,
   Chenille que se asoma y la mini lamina riso en el indice de guias.
   ========================================================================== */
/* Lampara: la sala de fondo y la lampara suelta encima, recortada en el
   piso (80 % del alto: el piso de la escena empieza en y = 720 de 900). */
.lamp-stage{position:relative;overflow:hidden}
.lamp-stage img{display:block}
.lamp-spr-clip{position:absolute;inset:0;clip-path:inset(0 0 20% 0);pointer-events:none}
.lamp-spr{position:absolute;inset:0;width:100%;height:100%;transition:transform 90ms linear}
.lamp-ctl{display:none}
.lamp-play.is-on .lamp-ctl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:14px 0 0}
.lamp-ctl label{font-family:var(--mono);font-weight:700;font-size:var(--s-2);letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.lamp-ctl input{width:100%;min-height:44px;accent-color:var(--terra);background:transparent}
.lamp-val{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--forest);min-width:3.6em;text-align:right}
.lamp-says{margin:6px 0 0;font-family:var(--hand);font-weight:700;font-size:1.3rem;line-height:1.25;color:var(--coral-hand)}
.lamp-play[data-k="ok"] .lamp-says{color:var(--forest)}
.js .lamp-play.is-on figcaption{display:none}

/* Regla de lectura: una cinta metrica mostaza con sus marcas. */
.progress-ruler{height:9px;background:transparent}
.progress-ruler i{background:repeating-linear-gradient(90deg,#2F5242 0 1.5px,transparent 1.5px 10px) 0 0/100% 4px no-repeat,
  repeating-linear-gradient(90deg,#2F5242 0 1.5px,transparent 1.5px 50px) 0 0/100% 7px no-repeat,#F2CF73;
  box-shadow:0 1px 0 #D39A22}

/* Chenille asomandose por el borde de abajo, a la izquierda. */
.chen-peek{position:fixed;left:14px;bottom:0;z-index:25;width:96px;height:auto;cursor:pointer;
  transform:translateY(100%);transition:transform 520ms cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(3px 3px 0 #2F524238)}
.chen-peek.up{transform:translateY(38%)}

/* Indice de guias: la lamina riso de cada guia como mini polaroid pegada
   sobre la esquina de su foto. */
.gd-fig{position:relative;display:block}
.gd-fig .riso-mini{position:absolute;right:-8px;bottom:-12px;width:42%;max-width:190px;height:auto;max-height:none;
  aspect-ratio:16/9;object-fit:cover;background:var(--ivory);padding:5px;transform:rotate(3deg);
  box-shadow:0 0 0 1px #2F524224,4px 4px 0 #2F524229;z-index:2}
@media (hover:hover) and (pointer:fine){.gd-fig .riso-mini{transition:transform 200ms var(--ease-out)}.gd-fig:hover .riso-mini{transform:rotate(-1deg) scale(1.04)}}
.riso-arte .lamp-spr{background:none;box-shadow:none;aspect-ratio:auto}
.chen-peek{z-index:19}
/* los dos botones de la respuesta corta con aire entre ellos (la sombra de trama necesita sitio) */
.answer .answer-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px}

/* ==========================================================================
   R16e (25 sep 2026). Mazo de tienda, glosario, hilo de lectura.
   ========================================================================== */
/* Mazo: solo en movil, bajo la foto. Tarjetas de papel con su numero, el
   dibujo en planta que ya tenia cada pieza, nombre y medida. */
.deck{display:none}
@media (max-width:760px){
  .deck{display:block;margin:18px calc(-1 * var(--gut)) 26px}
  .deck-hint{display:flex;justify-content:space-between;align-items:baseline;margin:0 var(--gut) 8px;
    font-family:var(--hand);font-weight:700;font-size:1.2rem;color:var(--coral-hand)}
  .deck-hint b{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--forest)}
  .deck-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 18px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .deck-track::-webkit-scrollbar{display:none}
  .deck-card{position:relative;isolation:isolate;flex:0 0 74%;scroll-snap-align:center;display:flex;flex-direction:column;gap:6px;
    padding:14px 14px 16px;background:var(--ivory);color:var(--ink);text-decoration:none;
    box-shadow:0 0 0 1px #2F524224;transform:rotate(-1deg);transition:transform 200ms var(--ease-out)}
  .deck-card:nth-child(even){transform:rotate(1deg)}
  .deck-card::after{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-1;
    background:radial-gradient(circle,#2F5242 0 1px,transparent 1.35px) 0 0/3.5px 3.5px;opacity:.4}
  .deck-card:active{transform:rotate(0) translate(2px,2px)}
  .deck-no{position:absolute;top:-10px;left:12px;padding:3px 10px 2px;font-family:var(--mono);font-weight:700;font-size:.8rem;
    letter-spacing:.08em;color:var(--ink);background:radial-gradient(circle,#D39A22 0 .9px,transparent 1.2px) 0 0/3px 3px,#F2CF73;transform:rotate(-3deg)}
  .deck-fig{display:block;margin:8px 0 2px}
  .deck-fig svg{display:block;width:100%;height:84px}
  .deck-t{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.25}
  .deck-s{font-family:var(--mono);font-size:.74rem;line-height:1.45;color:var(--ink-soft)}
  .deck-go{margin-top:auto;padding-top:6px;font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--terra)}
  .deck-card.ping{animation:llPing 520ms var(--ease-out)}
  @keyframes llPing{0%{transform:rotate(0) scale(1.04)}100%{transform:rotate(-1deg)}}
}

/* Glosario: el termino con subrayado ondulado coral; la ficha, a maquina. */
.gl{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:help;
  text-decoration:underline wavy #D9534A;text-decoration-thickness:1.5px;text-underline-offset:4px;
  -webkit-tap-highlight-color:transparent}
.gl[aria-expanded="true"]{background:#F2CF7366}
.gl:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.gl-card{position:fixed;z-index:40;padding:12px 14px 13px;background:var(--ivory);color:var(--ink);
  box-shadow:0 0 0 1px #2F524229,5px 5px 0 #2F524229;border-top:5px solid var(--sage);
  font-size:.92rem;line-height:1.5;animation:llGl 160ms var(--ease-out)}
.gl-card[hidden]{display:none}
.gl-card b{display:block;margin-bottom:3px;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
@keyframes llGl{from{transform:translateY(-4px) scale(.97)}to{transform:none}}

@media (prefers-reduced-motion:reduce){.gl-card{animation:none}}
/* mazo: el papel en ::before (z -1) y la trama en ::after (z -2); dentro del
   contexto aislado, un pseudo a z -1 pinta encima del fondo de la tarjeta */
@media (max-width:760px){
  .deck-card{background:transparent}
  .deck-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ivory);box-shadow:0 0 0 1px #2F524224}
  .deck-card::after{z-index:-2}
}
/* el termino del glosario es un boton EN LINEA: sin la altura tactil de los
   botones del sitio, que partia la linea */
.gl,button.gl{display:inline;min-height:0;min-width:0;line-height:inherit;vertical-align:baseline;letter-spacing:inherit;text-transform:none}
.gl-w{white-space:nowrap}

/* ==========================================================================
   R16f (25 sep 2026). My list y "The catch" como post-it.
   ========================================================================== */
/* "+ My list": pastilla chica junto a la etiqueta de Amazon. */
.mylist-add{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 0 12px;padding:6px 12px;cursor:pointer;vertical-align:middle;
  font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--forest);background:transparent;
  border:1.5px dashed #2F524280;border-radius:999px;transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.mylist-add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.mylist-add[aria-pressed="true"]{background:#F2CF7399;border:1.5px solid var(--forest)}
.mylist-add[aria-pressed="true"] svg{fill:var(--terra);stroke:var(--terra)}
.mylist-add:active{transform:scale(.96)}
.mylist-add.pop svg{animation:llPop 420ms cubic-bezier(.34,1.56,.64,1)}
@keyframes llPop{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (max-width:560px){.mylist-add{margin:10px 0 0}}

/* Pastilla flotante, abajo a la derecha, por encima de la barra fija. */
.mylist-pill{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:26;display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ivory);background:var(--forest);
  box-shadow:3px 3px 0 var(--mustard)}
.mylist-pill[hidden]{display:none}
.mylist-pill svg{width:16px;height:16px;fill:var(--mustard)}
.mylist-pill b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--terra);font-size:.8rem}
.mylist-pill.pop{animation:llPill 460ms cubic-bezier(.34,1.56,.64,1)}
@keyframes llPill{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-3deg)}100%{transform:scale(1)}}
body:has(.stick.is-on) .mylist-pill{bottom:calc(76px + env(safe-area-inset-bottom))}

/* La hoja: sube desde abajo en movil, tarjeta a la derecha en escritorio. */
.mylist-sheet{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:82vh;overflow:auto;padding:18px var(--gut) calc(22px + env(safe-area-inset-bottom));
  background:var(--ivory);box-shadow:0 -6px 0 var(--mustard),0 -1px 0 #2F524233;animation:llSheet 260ms var(--ease-out)}
.mylist-sheet[hidden]{display:none}
@keyframes llSheet{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:761px){.mylist-sheet{left:auto;right:20px;bottom:20px;width:400px;max-height:76vh;box-shadow:6px 6px 0 var(--mustard),0 0 0 1px #2F524233}}
.mylist-head{display:flex;align-items:center;justify-content:space-between}
.mylist-k{margin:0;font-family:var(--mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.mylist-x{min-width:44px;min-height:44px;border:0;background:none;font-size:1.6rem;line-height:1;color:var(--forest);cursor:pointer}
.mylist-sum{margin:4px 0 10px;font-family:var(--hand);font-weight:700;font-size:1.3rem;color:var(--coral-hand)}
.mylist-pg{margin:14px 0 4px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.mylist-sheet ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.mylist-sheet li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule-soft)}
.mylist-sheet li a{flex:1;padding:10px 0;font-size:.95rem;line-height:1.35;color:var(--ink);text-decoration:underline;text-decoration-color:#2F524255;text-underline-offset:3px}
.mylist-rm{min-width:44px;min-height:44px;border:0;background:none;font-size:1.3rem;color:var(--ink-faint);cursor:pointer}
.mylist-cart{display:flex;width:100%;margin:18px 0 0;white-space:normal;text-align:center}
.mylist-fine{margin:12px 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-faint)}

/* "The catch": el defecto admitido, como post-it coral que se estampa al
   aparecer. Admitir el defecto (con su por que) sube la credibilidad. */
main p[class*="-catch"]{position:relative;padding:14px 16px!important;background:#FBE3DF!important;border:0!important;
  box-shadow:3px 3px 0 #D9534A40;transform:rotate(-.6deg)}
main p[class*="-catch"] b{color:var(--terra)!important;font-family:var(--mono);font-weight:700}
.js p[class*="-catch"].stamp-in{animation:llStamp 420ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes llStamp{0%{transform:scale(1.08) rotate(-3deg);opacity:.4}100%{transform:rotate(-.6deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.mylist-sheet,.mylist-pill.pop,.mylist-add.pop svg,.js p[class*="-catch"].stamp-in{animation:none}}

/* ==========================================================================
   R16g. "Sound familiar?" en la portada: el error se tacha con una linea a
   mano coral al entrar en pantalla y el arreglo aparece debajo.
   ========================================================================== */
.fam-lede{max-width:52ch;color:var(--ink-soft)}
.fam{list-style:none;margin:var(--sp-tight) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 28px}
.fam-a{position:relative;isolation:isolate;display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px;color:var(--ink);text-decoration:none}
.fam-a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ivory);box-shadow:0 0 0 1px #2F524224}
.fam-a::after{content:"";position:absolute;inset:6px -6px -6px 6px;z-index:-2;background:var(--tr-shadow);opacity:.35}
.fam-pic{width:112px;height:auto;aspect-ratio:16/9;object-fit:cover;transform:rotate(-2deg);box-shadow:0 0 0 4px var(--ivory),2px 3px 0 4px #2F524224}
.fam-t{display:flex;flex-direction:column;gap:6px}
.fam-m{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.35;text-decoration:none;color:var(--ink);
  background:linear-gradient(transparent 52%,#D9534A 52% 62%,transparent 62%) no-repeat 0 0/100% 100%}
.fam-f{font-family:var(--hand);font-weight:700;font-size:1.3rem;line-height:1.2;color:var(--coral-hand)}
.fam-go{font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--forest)}
.fam-a:active{transform:translate(2px,2px)}
/* con JS: la tachadura se dibuja y el arreglo entra despues, una vez */
.js .fam-i:not(.in) .fam-m{background-size:0 100%}
.js .fam-i:not(.in) .fam-f{clip-path:inset(0 100% 0 0)}
.js .fam-i.in .fam-m{transition:background-size 520ms var(--ease-in-out)}
.js .fam-i.in .fam-f{transition:clip-path 600ms steps(12,end) 480ms}
@media (hover:hover) and (pointer:fine){.fam-a:hover .fam-go{text-decoration:underline}}
@media (prefers-reduced-motion:reduce){.js .fam-i .fam-m{background-size:100% 100%}.js .fam-i .fam-f{clip-path:none}}
.fam-mw{display:block}
.fam-m{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fam-m{color:#23392FB3;background-image:linear-gradient(transparent 46%,#D9534AE6 46% 64%,transparent 64%)}

/* ==========================================================================
   R16h. Build your room (portada) y Drag the sofa (guia de alfombras).
   ========================================================================== */
#build{display:none}
.js #build.is-on{display:block}
.bq-q{margin:22px 0 10px;font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.bq-row{display:flex;flex-wrap:wrap;gap:10px}
.bq-opt{min-height:44px;padding:8px 16px;cursor:pointer;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--forest);background:var(--ivory);border:1.5px solid #2F524266;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 140ms var(--ease-out)}
.bq-opt:active{transform:scale(.96)}
.bq-opt[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--ivory);box-shadow:2px 2px 0 var(--mustard)}
.bq-out{position:relative;isolation:isolate;margin:28px 0 0;padding:18px 18px 20px;max-width:640px}
.bq-out::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--parchment);border-top:6px solid var(--sage)}
.bq-out::after{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-2;background:var(--tr-shadow);opacity:.4}
.bq-out.in{animation:llBq 360ms var(--ease-out)}
@keyframes llBq{from{transform:translateY(8px) rotate(-.6deg)}to{transform:none}}
.bq-k{margin:0 0 6px;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.bq-say{margin:0 0 12px;font-family:var(--hand);font-weight:700;font-size:1.35rem;line-height:1.25;color:var(--coral-hand)}
.bq-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bq-steps a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;background:var(--ivory);color:var(--ink);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:.98rem;box-shadow:0 0 0 1px #2F524224}
.bq-steps b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--terra);color:var(--ivory);font-size:.9rem}
.bq-steps a:active{transform:translate(2px,2px)}

.rugplay{display:none;max-width:420px;margin:30px auto 0}
.js .rugplay.is-on{display:block}
.rp-k{margin:0 0 8px;font-family:var(--hand);font-weight:700;font-size:1.5rem;color:var(--coral-hand)}
.rugplay svg{display:block;width:100%;height:auto;touch-action:none;background:var(--ivory);box-shadow:0 0 0 1px #2F524229,6px 6px 0 #2F524224}
.rp-room{fill:#E7D6BD;stroke:#2F5242;stroke-width:1}
.rp-wall{fill:#2F5242}
.rp-rug{fill:#F2CF73;stroke:#2F5242;stroke-width:.8;stroke-dasharray:3 2;transition:x 200ms,y 200ms,width 200ms,height 200ms}
.rp-sofa{cursor:grab;outline:none}
.rp-sofa.grab{cursor:grabbing}
.rp-body{fill:#FBF8F2;stroke:#2F5242;stroke-width:1.2}
.rp-back{fill:#D8CCBD;stroke:#2F5242;stroke-width:1}
.rp-leg{fill:#2F5242;transition:fill 120ms}
.rp-leg.on{fill:#D9534A}
.rp-sofa:focus-visible .rp-body{stroke:#E9B949;stroke-width:3}
.rp-ctl{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.rp-size{min-height:44px;min-width:70px;padding:8px 14px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--forest);background:var(--ivory);border:2px solid var(--forest)}
.rp-size[aria-pressed="true"]{background:var(--forest);color:var(--ivory)}
.rp-say{min-height:3.2em;margin:12px 0 0;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.4;color:var(--ink)}
.rugplay[data-k="front"] .rp-say,.rugplay[data-k="all"] .rp-say{color:var(--forest)}
.rugplay[data-k="float"] .rp-say,.rugplay[data-k="back"] .rp-say{color:var(--terra)}
.rugplay figcaption{border-top:0;padding-top:4px;margin-top:0}
@media (prefers-reduced-motion:reduce){.bq-out.in{animation:none}.rp-rug{transition:none}}

/* ===================================================================
   R17: todo el recorrido termina en un producto.
   R17a: "Tick what you still need", la lista de compra del proyecto.
   =================================================================== */
.kitcart{padding-block:var(--sp-block)}
.kc-card{position:relative;isolation:isolate;max-width:680px;margin-inline:auto;padding:26px clamp(18px,4vw,34px) 24px}
.kc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--parchment);border-top:8px solid var(--terra)}
.kc-card::after{content:"";position:absolute;inset:9px -9px -9px 9px;z-index:-2;background:var(--tr-shadow);opacity:.45}
.kc-nora{position:absolute;top:-34px;right:clamp(4px,3vw,24px);width:82px;height:auto;transform:rotate(6deg);filter:drop-shadow(0 2px 3px rgba(35,57,47,.25))}
.kc-card .eyebrow{padding-right:96px}
.kc-card h2{font-size:var(--s2);max-width:15ch;margin:.1em 0 .2em}
.kc-sub{max-width:40ch;color:var(--ink-soft);margin:0 0 14px}
.kc-list{list-style:none;margin:0;padding:0;border-top:1px dashed rgba(35,57,47,.35)}
.kc-list li{border-bottom:1px dashed rgba(35,57,47,.35)}
.kc-list label{display:flex;align-items:center;gap:14px;min-height:48px;padding:8px 2px;cursor:pointer;line-height:1.35}
.kc-list input{appearance:none;-webkit-appearance:none;flex:0 0 26px;width:26px;height:26px;margin:0;border:2px solid var(--forest);border-radius:4px;background:var(--ivory);display:grid;place-content:center;cursor:pointer;transition:background 160ms var(--ease-out),transform 160ms var(--ease-out)}
.kc-list input::after{content:"";width:12px;height:7px;border:solid var(--ivory);border-width:0 0 3px 3px;transform:rotate(-45deg) scale(.6);opacity:0;transition:transform 180ms var(--ease-out),opacity 120ms}
.kc-list input:checked{background:var(--forest)}
.kc-list input:checked::after{opacity:1;transform:translateY(-2px) rotate(-45deg) scale(1)}
.kc-list input:active{transform:scale(.9)}
.kc-list input:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.kc-list input:not(:checked)+span{color:var(--ink-soft)}
.kc-go{margin:20px 0 8px}
.kc-cart[aria-disabled="true"]{opacity:.5;pointer-events:none}
.kc-cart.bump{animation:llKc 260ms var(--ease-out)}
@keyframes llKc{40%{transform:scale(1.04)}}
.kc-fine{max-width:52ch;margin:0}
@media (max-width:560px){.kc-nora{width:64px;top:-26px}.kc-card h2{max-width:12ch}}
@media (prefers-reduced-motion:reduce){.kc-cart.bump{animation:none}.kc-list input,.kc-list input::after{transition:none}}

/* R17b: franja "Shop a whole room" */
.shopstrip{padding-block:var(--sp-block)}
.shopstrip h2{font-size:var(--s2);max-width:22ch;margin:.1em 0 .2em}
.ss-sub{max-width:48ch;color:var(--ink-soft);margin:0 0 18px}
.ss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ss-card{position:relative;isolation:isolate;display:flex;flex-direction:column;text-decoration:none;color:var(--espresso);padding:8px 8px 12px;transition:transform 200ms var(--ease-out)}
.ss-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ivory)}
.ss-card::after{content:"";position:absolute;inset:6px -6px -6px 6px;z-index:-2;background:var(--tr-shadow);opacity:.35;transition:transform 200ms var(--ease-out)}
.ss-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ss-name{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.2;margin:10px 2px 2px}
.ss-n{font-family:var(--mono);font-size:.8rem;color:var(--terra);margin:0 2px}
.ss-card:nth-child(odd){transform:rotate(-.6deg)}
.ss-card:nth-child(even){transform:rotate(.5deg)}
@media (hover:hover){.ss-card:hover{transform:translateY(-3px) rotate(0)}.ss-card:hover::after{transform:translate(3px,3px)}}
.ss-card:active{transform:scale(.97)}
.ss-card:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
@media (max-width:760px){.ss-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (prefers-reduced-motion:reduce){.ss-card,.ss-card::after{transition:none}}

/* R17c: la prueba del sofa y "Build your room" terminan en compra */
.rp-buy{margin-top:12px}
.bq-steps li.bq-shop a{background:var(--terra);color:var(--ivory)}
.bq-steps li.bq-shop a b{background:var(--mustard);color:var(--espresso)}

/* R17d: la calculadora y el sofa llevan a los disenos; el enlace directo queda debajo */
.calc-more.btn{display:inline-flex;margin:0 0 12px;font-size:1rem}
.calc-direct{display:inline-block;font-size:var(--s-1)}
.rg-yours{display:inline-block;margin:6px 0 14px;padding:8px 14px;background:var(--mustard);color:var(--espresso);font-family:var(--display);font-weight:600;transform:rotate(-1deg);box-shadow:3px 3px 0 var(--forest)}
.rg-yours.in{animation:llKc 320ms var(--ease-out)}
.kc-all{margin:0 0 8px}
.kc-tickall{min-height:44px;padding:8px 16px;border:2px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font-family:var(--display);font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out)}
.kc-tickall:active{transform:scale(.96)}
.kc-tickall:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}

/* R17f: correo a una misma y la pagina /list */
.mylist-more{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0}
.mylist-more a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:600;color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.lp{position:relative;padding-block:clamp(34px,4.5vw,64px) var(--sp-block)}
.lp-nora{position:absolute;top:18px;right:clamp(8px,4vw,40px);width:clamp(84px,14vw,130px);height:auto;transform:rotate(5deg);filter:drop-shadow(0 2px 3px rgba(35,57,47,.25))}
.lp-sum{max-width:40ch;margin-top:var(--sp-tight)}
.lp-disc{max-width:56ch}
.lp-body{max-width:720px;margin-top:var(--sp-block)}
.lp-g{margin:0 0 26px}
.lp-pg{margin:0 0 6px;font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.lp-pg a{color:var(--terra);text-decoration:none}
.lp-list li{display:flex;align-items:center;gap:10px}
.lp-list label{flex:1;min-width:0}
.lp-amz{flex:none;font-size:.85rem;padding-inline:14px 12px}
.lp-cartbox{margin-top:10px}
@media (max-width:560px){.lp-nora{top:8px;width:74px}}

/* ===================================================================
   R18: auditoria visual (28 sep). Todo lo que Kyara marco como
   disonante: aviso bajo la firma, huecos entre secciones, jerarquia de
   letra, leyendas en maquina de escribir, "My list" que ocupaba una
   fila entera y botones de tabla que se salian.
   =================================================================== */

/* 1. El aviso de Amazon va con la firma: centrado, chico, una sola voz */
.byline + .disclosure,.byline ~ .disclosure-quiet{
  max-width:52ch!important;margin:10px auto 0!important;text-align:center;
  font-size:.8125rem;line-height:1.55;color:var(--ink-faint);border-top:0;padding-top:0}
.byline + .disclosure a,.byline ~ .disclosure-quiet a{color:var(--ink-soft)}

/* 2. Dos secciones seguidas del mismo papel no suman dos margenes */
main > section:not([class*="on-"]) + section:not([class*="on-"]):not(.torn){padding-top:0}
main > section.pin-only + section{padding-top:clamp(28px,4vw,48px)}

/* 3. Jerarquia: el h1 siempre manda sobre el h2, tambien en el telefono */
h1{font-size:clamp(2.05rem,1.5rem + 2.7vw,4.1rem)}
h2{font-size:clamp(1.55rem,1.3rem + 1.3vw,2.6rem)}
/* la entradilla habla con la voz de los titulos, no con la del cuerpo */
.lede{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.42;letter-spacing:-.005em;color:var(--forest)}
/* las leyendas largas se leen en el cuerpo; la maquina de escribir queda para etiquetas cortas */
figcaption.fine,p.fine,.fine figcaption{font-family:var(--body);font-style:italic;font-size:.875rem;letter-spacing:0;line-height:1.55}

/* 4. "My list" es un marcador junto a la etiqueta, no una fila propia */
.mylist-add{position:relative;width:40px;height:40px;min-height:40px;padding:0;margin:0 0 0 10px;justify-content:center;border-radius:50%;
  border:1.5px solid rgba(35,57,47,.28)!important;background:var(--ivory);vertical-align:middle;flex:none}
.mylist-add::before{content:"";position:absolute;inset:-4px}
.mylist-add span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mylist-add svg{width:16px!important;height:16px!important;max-width:none}
.mylist-add[aria-pressed="true"]{background:#F2CF73;border-color:var(--forest)!important}
@media (hover:hover){.mylist-add:hover{border-color:var(--forest)!important}}
@media (max-width:560px){.mylist-add{margin:0 0 0 8px}}

/* 5. Tablas de compra: el boton se parte en dos lineas antes que empujar la pagina */
.buy-tbl td:last-child{text-align:right;white-space:nowrap}
.buy-tbl td:last-child .btn{white-space:normal;max-width:210px;text-align:left}
@media (max-width:760px){.buy-tbl td:last-child{text-align:left}.buy-tbl td:last-child .btn{max-width:none}}
.tbl-wrap{max-width:100%}
@media (max-width:760px){.tbl td:last-child{display:flex;align-items:center;gap:0}.tbl td:last-child .btn{flex:1}}

/* R18b: la tabla de compra en el telefono, a la mitad de alto */
@media (max-width:760px){
  .buy-tbl tr{padding:14px 0}
  .buy-tbl td{padding:0 0 6px}
  .buy-tbl td:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:1.25rem;margin:0}
  .buy-tbl td:first-child br{display:none}
  .buy-tbl td:first-child .why{font-family:var(--body);font-size:.9rem;font-weight:400;color:var(--ink-soft)}
  .buy-tbl td:first-child .why::before{content:"\00b7\00a0"}
  .buy-tbl td:nth-child(2)::before{display:inline!important;margin-right:6px;font-size:.7rem}
  .buy-tbl td:nth-child(2) .why{display:block;font-size:.875rem;line-height:1.5;margin-top:2px}
  .buy-tbl td:last-child::before{display:none!important}
  .buy-tbl td:last-child{padding-top:4px}
}
.btn .bt,.btn .bt [data-in],.stick a .bt,.stick a .bt [data-in]{display:inline!important;font:inherit;color:inherit;margin:0;padding:0}
@media (min-width:761px){.buy-tbl td:last-child{width:auto;min-width:252px;padding-right:2px}.buy-tbl td:last-child .btn{max-width:190px}.buy-tbl{table-layout:auto}}

/* R18d: opciones por talla (mesas de centro): la eleccion es de diseno */
.opts{margin:clamp(22px,3vw,36px) 0 0;scroll-margin-top:calc(var(--mh,60px) + 16px)}
.op-h{font-size:var(--s1);max-width:30ch;margin:.1em 0 .25em}
.op-sub{max-width:56ch;color:var(--ink-soft);margin:0 0 16px}
.op-row{list-style:none;margin:0;padding:6px 10px 16px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.op-card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:10px 10px 14px}
.op-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ivory)}
.op-card::after{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-2;background:var(--tr-shadow);opacity:.35}
.op-card img{display:block;width:100%;height:auto;aspect-ratio:720/658;object-fit:cover;background:#FBFAF6}
.op-k{margin:10px 0 2px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--terra)}
.op-n{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.25}
.op-spec{margin:0 0 4px;font-size:.86rem;color:var(--ink);font-variant-numeric:tabular-nums}
.op-f{margin:0 0 8px;font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.op-c{margin:0 0 12px;font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.op-c b{font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-hand);margin-right:4px}
.op-go{margin:auto 0 0;display:flex;align-items:center}
.op-go .btn{font-size:.86rem;padding:10px 14px 10px 32px}
.op-fine{max-width:62ch;margin:6px 0 0}
@media (max-width:1100px){.op-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(230px,34%);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
  .op-card{scroll-snap-align:start}}
@media (max-width:620px){.op-row{grid-auto-columns:78%}}
.opts h4.op-n{font-family:var(--display)!important;font-weight:600!important;font-size:1rem!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--espresso)!important;line-height:1.25}
.op-swipe{display:none;margin:-6px 0 10px;font-family:var(--hand);font-size:1.25rem;color:var(--terra)}
@media (max-width:1100px){.op-swipe{display:block}}
@media (max-width:620px){.op-row{grid-auto-columns:74%;gap:14px}.op-c{margin-bottom:10px}}
.op-fig{position:relative;margin:0}
.op-ill{position:absolute;left:6px;top:6px;padding:2px 7px;background:rgba(251,250,246,.9);color:var(--ink-soft);font-family:var(--body);font-style:italic;font-size:.72rem;line-height:1.4;border-radius:2px}

/* R18e: pestanas de talla sobre las galerias */
.op-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:clamp(22px,3vw,36px) 0 0;scroll-margin-top:calc(var(--mh,60px) + 12px)}
.op-tabs-k{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin-right:4px}
.op-tabs [role=tab]{min-height:44px;padding:8px 16px;border:1.5px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font-family:var(--display);font-weight:600;font-size:.92rem;cursor:pointer;transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.op-tabs [role=tab][aria-selected=true]{background:var(--forest);color:var(--ivory);box-shadow:2px 2px 0 var(--mustard)}
.op-tabs [role=tab]:active{transform:scale(.96)}
.op-tabs [role=tab]:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.op-tabs + .opts{margin-top:14px}
.opts[role=tabpanel]{margin-top:14px}
/* R18f: insignia de encaje y compra de dos */
.op-b{display:inline-block;margin-right:6px;padding:1px 7px;border:1.5px solid var(--terra);border-radius:999px;color:var(--terra);font-size:.66rem;letter-spacing:.06em;vertical-align:1px}
.op-b-ok{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.op-q{margin:10px 0 0}
.op-q .btn{font-size:.86rem;padding:10px 14px;width:100%;justify-content:center;text-align:center}
@media (min-width:1101px){.op-row.op-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}}

/* R18h: el aviso de Amazon igual en TODAS las paginas (Kyara): chico,
   centrado, sin regla, debajo de lo que tenga encima. En disclosure.html
   el aviso es el contenido y se deja como estaba. */
main .disclosure,body > .full .disclosure,.disclosure{
  display:block;max-width:52ch!important;margin:10px auto 0!important;text-align:center!important;
  font-size:.8125rem!important;line-height:1.55;color:var(--ink-faint);border-top:0!important;padding-top:0!important}
.disclosure a{color:var(--ink-soft)}
.page-disclosure .disclosure{max-width:62ch!important;margin:0 0 1em!important;text-align:left!important;font-size:inherit!important}

/* R18j: el siguiente objeto del cuarto */
.nx-obj{position:relative;isolation:isolate;max-width:640px;margin:clamp(26px,4vw,44px) 0 0;padding:18px 20px 20px}
.nx-obj::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--parchment);border-left:6px solid var(--sage)}
.nx-k{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.nx-t{margin:4px 0 2px;font-family:var(--display);font-weight:600;font-size:var(--s1);line-height:1.25;color:var(--espresso)}
.nx-s{margin:0 0 14px;color:var(--ink-soft);max-width:52ch}

/* R18k: eleccion de forma en lamparas */
.lm-choose{padding-block:var(--sp-block) 0}
.lm-tabs [role=tab]{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;border-radius:14px;padding:8px 14px;line-height:1.2;text-align:left}
.lm-tabs [role=tab] small{font-family:var(--body);font-weight:400;font-size:.75rem;opacity:.8}
.lm-tabbed #pole-edit,.lm-tabbed #shoulder-edit,.lm-tabbed #arc-edit,.lm-tabbed #nofloor-edit{padding-top:clamp(20px,3vw,32px)}
.lm-tabbed .shape-nav{display:none}
.lamp-go{margin-top:12px}
@media (max-width:620px){.lm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lm-tabs .op-tabs-k{grid-column:1/-1}.lm-tabs [role=tab]{width:100%;padding:8px 10px}.lm-tabs [role=tab] b{font-size:.86rem}}

/* R18c: Mix your window (guia de cortinas) */
.mx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(18px,3vw,36px);align-items:start;margin:var(--sp-block) 0;padding:clamp(16px,2.5vw,26px);background:var(--ivory);position:relative;isolation:isolate}
.mx::after{content:"";position:absolute;inset:8px -8px -8px 8px;z-index:-1;background:var(--tr-shadow);opacity:.35}
.mx-stage{position:relative}
.mx-svg{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.mx-dn{display:flex;gap:6px;justify-content:center;margin-top:10px}
.mx-dn button,.mx-tabs button{min-height:40px;padding:6px 14px;border:1.5px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font-family:var(--display);font-weight:600;font-size:.85rem;cursor:pointer}
.mx-dn button[aria-pressed=true],.mx-tabs button[aria-pressed=true]{background:var(--forest);color:var(--ivory)}
.mx-k{margin:0}
.mx-title{font-family:var(--display);font-size:var(--s1);line-height:1.3;margin:4px 0 12px;color:var(--espresso)}
.mx-lab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.mx-sub{text-transform:none;letter-spacing:0;font-family:var(--body)}
.mx-tabs{display:inline-flex;gap:6px;text-transform:none;letter-spacing:0}
.mx-pairs{display:flex;flex-wrap:wrap;gap:6px}
.mx-pair{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:5px 12px 5px 6px;border:1.5px solid var(--rule);border-radius:999px;background:var(--parchment);font-family:var(--body);font-size:.82rem;color:var(--ink);cursor:pointer}
.mx-pair i{display:inline-block;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.mx-pair i + i{margin-left:-10px}
.mx-pair[aria-pressed=true]{border-color:var(--forest);background:#F2CF7355}
.mx-row{display:flex;flex-wrap:wrap;gap:6px}
.mx-sw{width:32px;height:32px;border-radius:50%;border:2px solid var(--ivory);background:var(--c);box-shadow:0 0 0 1px rgba(35,57,47,.3);cursor:pointer;transition:transform 140ms var(--ease-out)}
.mx-sw:active{transform:scale(.9)}
.mx-sw[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--forest);transform:scale(1.08)}
.mx-sw:focus-visible,.mx-pair:focus-visible,.mx-dn button:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.mx-buy{display:flex;flex-wrap:wrap;gap:10px 14px;margin:18px 0 8px}
.mx-fine{margin:0}
@media (max-width:760px){.mx{grid-template-columns:1fr}.mx-stage{max-width:320px;margin:0 auto}.mx-sw{width:36px;height:36px}}
.mx{background:transparent}
.mx::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ivory)}
.mx::after{z-index:-2}
@media (min-width:761px){.mx-stage{position:sticky;top:calc(var(--mh,60px) + 16px)}}
/* R18l: en el telefono el boton de la tabla y el marcador de My list van en una fila, sin salirse */
@media (max-width:760px){
  .tbl td:has(> .mylist-add){display:flex!important;align-items:center;gap:8px}
  .tbl td:has(> .mylist-add) > .btn{flex:1 1 auto;width:auto!important;min-width:0}
  .tbl td:has(> .mylist-add) > .mylist-add{margin:0;flex:none}
  .mx-stage{position:sticky;top:calc(var(--mh,60px) + 4px);z-index:2;background:var(--ivory);padding-bottom:6px}
  .mx-svg{max-height:36vh;width:auto;margin:0 auto}
}
@media (max-width:760px){.tbl td:has(> .mylist-add){flex-wrap:wrap}.tbl td:has(> .mylist-add) > .tbl-more{flex-basis:100%}}
/* nada decorativo (grano, regla de lectura, sombras de trama) debe crear scroll lateral */
html,body{overflow-x:clip}
/* R18m: arte (imagenes 4:3) */
.op-art .op-card img{aspect-ratio:4/3}
.art-pick .op-tabs{margin-top:18px}

/* R18o: galeria de cuadros. Puertas de entrada y "What does it hang over?" */
.gw-route{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:880px;margin:22px auto 6px}
.gw-rk{grid-column:1/-1;margin:0;font-family:var(--display);color:var(--forest);font-size:1.05rem;text-align:center}
.gw-route a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1.5px solid var(--forest);border-radius:14px;background:var(--ivory);color:var(--ink);text-decoration:none;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease}
.gw-route a b{font-size:.95rem;line-height:1.25}
.gw-route a small{color:var(--terra);font-size:.8rem}
.gw-route a:hover{background:var(--parchment)}
.gw-route a:active{transform:scale(.97)}
@media (max-width:760px){.gw-route{grid-template-columns:1fr;gap:8px}}
.gw-size{margin:18px 0 8px;padding:16px;border:1.5px dashed var(--forest);border-radius:16px;background:var(--ivory)}
.gw-q{margin:0 0 10px;font-family:var(--display);color:var(--forest);font-size:1.1rem}
.gw-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gw-opts button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:48px;padding:9px 12px;border:1.5px solid var(--forest);border-radius:12px;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease,color 160ms ease}
.gw-opts button small{font-size:.78rem;opacity:.8}
.gw-opts button:active{transform:scale(.97)}
.gw-opts button[aria-pressed=true]{background:var(--forest);color:var(--ivory)}
@media (max-width:760px){.gw-opts{grid-template-columns:1fr 1fr}}
.gw-out:empty{display:none}
.gw-out{margin-top:12px}
.gw-out p{margin:.3em 0}
.gw-aim b{color:var(--terra)}
.gw-out .gw-go{margin-top:10px}
.gw-b{animation:gw-in 220ms cubic-bezier(.23,1,.32,1)}
@keyframes gw-in{from{opacity:0;transform:scale(.95)}}
@media (prefers-reduced-motion:reduce){.gw-b{animation:none}.gw-route a,.gw-opts button{transition:none}}

/* R18p: el plano de la pared */
.gw-plan{margin-top:26px}
.gw-plan-app{padding:16px;border:1.5px solid var(--forest);border-radius:16px;background:var(--ivory)}
.gw-pl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.gw-pl-k{min-width:4.5em;font-family:var(--display);color:var(--forest);font-size:.9rem}
.gw-pl-row>div{display:flex;flex-wrap:wrap;gap:6px}
.gw-plan-app button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1.5px solid var(--forest);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.88rem;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease,color 160ms ease}
.gw-plan-app button small{opacity:.75;font-size:.78rem}
.gw-plan-app button:active{transform:scale(.97)}
.gw-plan-app button[aria-pressed=true]{background:var(--forest);color:var(--ivory)}
.gw-pl-sw i{display:inline-block;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px #0003}
.gw-pl-fig{margin:6px 0 0}
.gw-pl-fig svg{display:block;width:100%;height:auto;border-radius:10px}
.gw-pl-fig svg rect{transition:fill 200ms ease}
.gw-pl-cap{margin-top:6px;font-size:.8rem;color:var(--ink-soft);font-style:italic}
.gw-pl-out p{margin:.35em 0}
.gw-pl-nums b{color:var(--terra)}
.gw-pl-go{margin-top:12px!important}
.gw-pl-links{font-size:.88rem}
@media (max-width:760px){.gw-pl-k{min-width:100%}}
@media (prefers-reduced-motion:reduce){.gw-plan-app button,.gw-pl-fig svg rect{transition:none}}

/* R19a: /list, "Email me this list" */
.lp-mail{margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--rule)}
.lp-mail-k{margin:0 0 8px;font-family:var(--display);color:var(--forest);font-size:1rem}
.lp-mail-row{display:flex;gap:8px;flex-wrap:wrap}
.lp-mail-row input{flex:1 1 200px;min-height:48px;padding:10px 14px;border:1.5px solid var(--forest);border-radius:12px;background:var(--ivory);color:var(--ink);font:inherit;font-size:16px}
.lp-mail-row .btn{min-height:48px}
.lp-mail-fine{margin:8px 0 0}
.lp-mail-say:empty{display:none}
.lp-mail-say{margin:8px 0 0;color:var(--forest);font-weight:600}
.lp-mail-keep{display:block;margin-top:8px;font-weight:400;color:var(--ink)}
.lp-mail-copy{margin-left:6px;min-height:44px;padding:0 14px;border:1px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);font:inherit;font-weight:600;cursor:pointer}
.lp-mail.is-sent input{opacity:.6}
.lp-ok{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--forest);color:var(--ivory)}

/* R20: formularios de Kit (regalo y Chenille's Box) y tira de Chenille */
.kit-form{margin-top:18px}
.gift-form{max-width:560px;padding-top:16px;border-top:1.5px dashed currentColor}
.kit-check{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:.95rem;line-height:1.45;cursor:pointer}
.kit-check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--forest)}
.kit-ok{margin:var(--sp-tight) 0 0;max-width:46ch;padding:12px 16px;background:var(--ivory);border-left:5px solid var(--forest);color:var(--forest);font-weight:600}
.kit-ok[hidden]{display:none}
.gift-dl{display:flex;flex-wrap:wrap;gap:12px;margin:var(--sp-block) 0 12px}
.cb-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:var(--sp-block)}
.cb-pnl{margin:0;display:flex;flex-direction:column;gap:6px}
.cb-pnl svg{display:block;width:100%;height:auto;border:2px solid var(--forest)}
.cb-cap{font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(233,185,73,.8);padding:4px 7px 3px;color:var(--ink)}
.cb-bub{margin:0;text-align:center;font-family:var(--hand,cursive);font-size:1.15rem;line-height:1.15;color:#A8452A;background:#FFFCF6;border:1.5px solid var(--forest);border-radius:14px;padding:6px 10px}
@media (max-width:700px){.cb-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gift-form .lp-mail-k,.gift-form .lp-mail-say{color:inherit}

/* R21: episodio del canal (miniatura hasta que se toca play) */
.yt{margin:var(--sp-block) 0}
.yt-play,.yt iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:2px solid var(--forest);box-shadow:5px 5px 0 rgba(47,82,66,.35);background:#000}
.yt-play{padding:0;cursor:pointer}
.yt-play img{display:block;width:100%;height:100%;object-fit:cover}
.yt-btn{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#A8452A;box-shadow:4px 4px 0 #23392F;transition:transform 160ms ease-out}
.yt-btn::after{content:"";position:absolute;left:30px;top:22px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #FFFCF6}
.yt-play:hover .yt-btn,.yt-play:focus-visible .yt-btn{transform:scale(1.06)}
.yt-play:active .yt-btn{transform:scale(.97)}
.yt figcaption{margin-top:10px}
@media (prefers-reduced-motion:reduce){.yt-btn{transition:none}}

/* R22: aviso unico de Chenille's Box. Se ve como un pedacito del correo de
   bienvenida (franja mostaza con Chenille en su caja), sin sticker por encima. */
.cbx{position:fixed;z-index:60;right:20px;bottom:20px;width:min(380px,calc(100vw - 32px));background:var(--parchment);color:var(--ink);border:2px solid var(--forest);box-shadow:6px 6px 0 #A8452A;overflow:hidden;transform:translateY(calc(100% + 40px));opacity:0;transition:transform 320ms cubic-bezier(.23,1,.32,1),opacity 200ms ease-out}
.cbx.is-in{transform:none;opacity:1}
.cbx-top{position:relative;height:122px;background:#E9B949 radial-gradient(circle,rgba(255,252,246,.22) 0 1.1px,transparent 1.5px) 0 0/6px 6px;border-bottom:2px solid var(--forest);overflow:hidden}
.cbx-tag{position:absolute;left:18px;top:18px;padding:7px 11px 6px;background:#23392F;color:#F2EADB;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;transform:rotate(-1.5deg)}
.cbx-cal{position:absolute;left:24px;top:56px;width:54px;height:52px;background:#F2EADB;box-shadow:3px 3px 0 rgba(0,0,0,.22);transform:rotate(-5deg);text-align:center;font-family:var(--hand);font-weight:700;font-size:1.25rem;line-height:1;color:#A8452A;padding-top:22px;box-sizing:border-box}
.cbx-cal b{position:absolute;left:0;right:0;top:0;height:17px;background:var(--forest);color:#F2EADB;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;line-height:17px;text-transform:uppercase}
.cbx-cat{position:absolute;right:46px;bottom:-14px;width:150px;height:auto}
.cbx-x{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:transparent;font-size:28px;line-height:1;color:#23392F;cursor:pointer}
.cbx-in{padding:16px 20px 8px}
.cbx-h{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.15;color:var(--forest);text-wrap:balance}
.cbx-sub{margin:0 0 10px;font-size:.95rem;line-height:1.4}
.cbx-p{margin:0 0 12px;padding:0;list-style:none;font-size:.95rem;line-height:1.4}
.cbx-p li{position:relative;padding-left:22px;margin:0 0 5px}
.cbx-p li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;border:solid #A8452A;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.cbx .lp-mail-row input{min-height:46px}
.cbx-fine{margin:8px 0 0;font-size:.85rem;color:var(--ink-soft)}
.cbx-no{display:block;margin:2px auto 0;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--ink-soft);font:inherit;font-size:.9rem;text-decoration:underline;cursor:pointer}
@media (max-width:620px){.cbx{right:10px;left:10px;bottom:10px;width:auto}.cbx-top{height:74px}.cbx-cat{width:92px;right:46px;bottom:-10px}.cbx-cal{display:none}.cbx-tag{top:24px}.cbx-in{padding:12px 16px 4px}.cbx-h{font-size:1.15rem;margin-bottom:4px}.cbx-sub{font-size:.92rem;margin-bottom:10px}.cbx-p{display:none}.cbx-no{min-height:40px}}
@media (prefers-reduced-motion:reduce){.cbx{transition:opacity 150ms linear;transform:none}}

/* R23 (2 oct 2026): una linea de Chenille's Box dentro de cada guia, despues
   de la ultima seleccion de productos. Una por pagina, sin formulario: lleva a /box. */
.box-line{max-width:62ch;margin:var(--sp-block) 0 0;padding:14px 18px 14px 64px;position:relative;background:#F7EFD9;border:2px solid var(--forest);box-shadow:4px 4px 0 rgba(47,82,66,.3);font-size:var(--s-1);line-height:1.5}
.box-line::before{content:"";position:absolute;left:14px;top:50%;width:38px;height:38px;margin-top:-19px;background:url(../img/chenille-in-box.webp) center/contain no-repeat}
.box-line b{font-family:var(--mono);font-size:var(--s-2);letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
/* R23: la pieza "worth it" de cada guia. Tarjeta de texto, sin imagen: no hay
   foto del producto que podamos usar y no se generan imagenes de productos. */
.buy-once{max-width:640px;margin:var(--sp-block) 0;padding:18px 20px;background:#FFFCF6;border:2px solid var(--forest);box-shadow:6px 6px 0 #E9B949}
.buy-once .bo-k{display:inline-block;font-family:var(--mono);font-size:var(--s-2);letter-spacing:.16em;text-transform:uppercase;background:var(--forest);color:#F2EADB;padding:4px 9px;margin:0 0 10px}
.buy-once h4{margin:0 0 6px}
.buy-once .bo-spec{font-family:var(--mono);font-size:var(--s-1);color:var(--ink-soft);margin:0 0 8px}
.buy-once p{max-width:58ch}
/* .buy-once lleva su propio fondo claro: en bandas oscuras no hereda la tinta marfil */
.buy-once{color:#23392F;--ink:#23392F;--ink-soft:#4A5A50}
.buy-once :is(h4,p){color:#23392F}
.buy-once .bo-spec{color:#4A5A50}