/* ============================================================
   SOFI ROMANO · ASESORA OFICIAL ESSEN — estilos
   Colores del flyer de Sofi (crema, cobre, negro), serif editorial.
   Todo lo ajustable vive en :root (panel de ajuste: tecla T).
   ============================================================ */
:root{
  /* Tipografía */
  --heading-font:"Fraunces", Georgia, serif;
  --heading-italic:italic;          /* la palabra destacada de cada título */
  --h1-size:300px;                  /* el nombre gigante del hero */
  --h1-weight:300;
  --h1-tracking:-0.035em;
  --h1-leading:.9;
  --h2-size:84px;
  --h2-weight:400;
  --body-font:"DM Sans", system-ui, sans-serif;
  --body-size:18px;
  --body-leading:1.6;
  --body-tracking:0em;
  --label-size:12px;
  --label-tracking:.22em;
  --firma-font:"Allura", cursive;

  /* Color */
  --bg:#F3ECE2;           /* crema */
  --surface:#E8DDCD;      /* lino */
  --ink:#171311;          /* negro cálido */
  --muted:#5C5048;        /* 7:1 sobre crema */
  --line:rgba(23,19,17,.16);
  --accent:#9E5229;       /* cobre · 4.9:1 sobre crema */
  --accent-claro:#D9955F; /* cobre sobre negro */
  --papel:#FBF7F1;        /* etiquetas */

  /* Layout */
  --max-width:1320px;
  --pad:48px;
  --section-y:150px;
  --gap:32px;
  --radius:2px;
  --border:1px;
  --franja:max(64px, 10vh);

  /* Movimiento */
  --ease-cine:cubic-bezier(.76,0,.24,1);
  --ease-sale:cubic-bezier(.16,1,.3,1);
  --dur:4s;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--franja)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body-font); font-size:var(--body-size); line-height:var(--body-leading); letter-spacing:var(--body-tracking); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
::selection{background:var(--accent); color:var(--bg)}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
[hidden]{display:none !important}   /* si no, un display del CSS le gana al atributo hidden */
.saltar{position:absolute; left:16px; top:-60px; z-index:100; padding:12px 16px; background:var(--ink); color:var(--bg)}
.saltar:focus{top:12px}

/* modo borrador: lo que falta confirmar, en amarillo */
.borrador .falta{text-decoration:underline wavy #D9A400; text-decoration-thickness:1.5px; text-underline-offset:5px; text-decoration-skip-ink:none}
.borrador .falta-etq::after{content:"a confirmar"; display:inline-block; white-space:nowrap; margin-left:8px; padding:2px 6px; font:600 10px/1 var(--body-font); letter-spacing:.08em; text-transform:uppercase; background:#FACC15; color:#171311; vertical-align:middle}

/* ============================================================ BARRA */
.barra{position:fixed; inset:0 0 auto; z-index:40; height:var(--franja); display:flex; align-items:center; gap:max(16px, calc(var(--gap) * .8)); padding-inline:max(16px, var(--pad)); background:var(--ink); color:var(--bg)}
.marca{display:flex; align-items:center; gap:14px; text-decoration:none; min-height:44px; margin-right:auto}
.marca__logo{width:auto; height:calc(var(--franja) * .66)}
.marca__txt{display:flex; flex-direction:column; gap:5px; line-height:1}
.marca__nombre{font:500 15px/1 var(--body-font); letter-spacing:.14em; text-transform:uppercase}
.marca__rol{font:500 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-claro)}
.menu{display:flex; gap:max(16px, calc(var(--gap) * .9))}
.menu a{display:inline-flex; align-items:center; min-height:44px; font:500 14px/1 var(--body-font); letter-spacing:.03em; text-decoration:none; opacity:.72; transition:opacity .25s}
.menu a:hover{opacity:1}
.pedido-btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 4px 0 18px; margin-left:8px; border:0; border-left:1px solid rgba(243,236,226,.2); background:none; font:500 14px/1 var(--body-font)}
.pedido-btn__n{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:12px; background:var(--accent-claro); color:var(--ink); font-size:12px; font-weight:700; transition:transform .4s var(--ease-sale)}
.pedido-btn__n.late{transform:scale(1.35)}
.menu-btn{display:none; min-height:44px; padding:0 4px; border:0; background:none; font:500 14px/1 var(--body-font)}

/* ============================================================ 1 · HERO */
.plano{position:relative; height:100svh; min-height:640px; overflow:hidden; isolation:isolate; background:radial-gradient(70% 80% at 58% 72%, #F9F4EE 0%, var(--bg) 55%, var(--surface) 100%)}
.pose{position:absolute; inset:0; visibility:hidden}
.pose.activa,.pose.sale{visibility:visible}
.pose.sale{z-index:1} .pose.activa{z-index:2}

.gigante{position:absolute; z-index:1; left:0; right:0; top:calc(var(--franja) + 1vh); margin:0; text-align:center; font-family:var(--heading-font); font-style:italic; font-weight:var(--h1-weight); font-size:min(var(--h1-size), 21vw); line-height:var(--h1-leading); letter-spacing:var(--h1-tracking); color:var(--accent); white-space:nowrap}
.gigante span{display:inline-block; transform-origin:50% 100%}
.gigante--der{text-align:right; padding-right:max(16px, var(--pad))}
.gigante--der span{transform-origin:100% 100%}

.figura{position:absolute; z-index:2; bottom:0; left:var(--x, 55%); translate:-50% 0; height:calc(100% - var(--franja) - 5vh); margin:0}
.figura img{height:100%; width:auto; max-width:none}
.hilos{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.hilos path{fill:none; stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:2000; stroke-dashoffset:0}
.punto{position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--papel); border:2px solid var(--ink)}

/* etiqueta colgante: como la de precio, atada a la pieza con un hilo */
.etiqueta{position:absolute; z-index:3; width:172px; translate:-50% 0; rotate:var(--giro, 0deg); transform-origin:50% 0; padding:26px 16px 14px; background:var(--papel); color:var(--muted); font:400 13px/1.35 var(--body-font);
  clip-path:polygon(50% 0, 100% 16px, 100% 100%, 0 100%, 0 16px); filter:drop-shadow(0 6px 10px rgba(23,19,17,.12))}
.etiqueta::before{content:""; position:absolute; left:50%; top:10px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--surface); box-shadow:inset 0 1px 1px rgba(23,19,17,.35)}
.etiqueta b{display:block; margin-bottom:3px; font:italic 400 19px/1.1 var(--heading-font); color:var(--ink)}

.usos{position:absolute; z-index:3; left:max(16px, var(--pad)); bottom:7vh; max-width:360px}
.usos--der{left:auto; right:max(16px, var(--pad)); text-align:right}
.usos__tit{margin:0 0 10px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent)}
.usos ul{margin:0 0 22px; padding:0; list-style:none; font:400 44px/1.02 var(--heading-font); letter-spacing:-.015em}
.usos li:nth-child(2){font-style:italic; color:var(--accent)}
.enlace{display:inline-flex; align-items:center; gap:14px; min-height:44px; font:italic 400 21px/1 var(--heading-font); text-decoration:none; border-bottom:1px solid var(--line)}
.flecha{width:40px; height:12px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.6; transition:transform .45s var(--ease-sale)}
.enlace:hover .flecha,.enlace:focus-visible .flecha{transform:translateX(8px)}

.sello{position:absolute; z-index:4; left:max(16px, var(--pad)); top:calc(var(--franja) + 4vh); width:132px; height:132px; display:grid; place-items:center}
.sello svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sello text{font:600 11px var(--body-font); letter-spacing:.12em; text-transform:uppercase; fill:var(--ink)}
.sello__n{display:grid; font:300 40px/1 var(--heading-font); color:var(--accent); margin-top:-8px}
.sello__n > span{grid-area:1/1; opacity:0; transition:opacity .5s}
.sello__n > span.activa{opacity:1}
.sello__de{position:absolute; top:84px; font:600 9px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

.plano__riel{position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px; background:var(--line)}
.plano__riel::after{content:""; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left}
.plano__riel.corre::after{animation:corre var(--dur) linear both}

@media (prefers-reduced-motion:no-preference){
  .js .barra{animation:baja-barra 1.1s var(--ease-cine) .1s both}
  .js .plano.arranca .sello svg{animation:gira 28s linear infinite}
  .js .pose.activa .gigante span{animation:condensa 1.3s var(--ease-sale) both; animation-delay:calc(var(--retraso, 0s) + .1s)}
  .js .pose.activa .figura img{animation:levanta 1.1s var(--ease-sale) both; animation-delay:calc(var(--retraso, 0s) + .15s)}
  .js .pose.sale .figura{animation:baja .6s var(--ease-cine) both}
  .js .pose.sale .gigante,.js .pose.sale .usos{animation:se-va .5s var(--ease-sale) both}
  .js .pose.activa .usos li{animation:sube .8s var(--ease-sale) both}
  .js .pose.activa .usos li:nth-child(1){animation-delay:calc(var(--retraso, 0s) + .45s)}
  .js .pose.activa .usos li:nth-child(2){animation-delay:calc(var(--retraso, 0s) + .6s)}
  .js .pose.activa .usos li:nth-child(3){animation-delay:calc(var(--retraso, 0s) + .75s)}
  .js .pose.activa .usos__tit,.js .pose.activa .enlace{animation:sube .8s var(--ease-sale) both; animation-delay:calc(var(--retraso, 0s) + .9s)}
  .js .pose.activa .punto{animation:aparece .3s ease both; animation-delay:calc(var(--retraso, 0s) + .9s)}
  .js .pose.activa .hilos path{animation:hilo .7s var(--ease-sale) both; animation-delay:calc(var(--retraso, 0s) + 1s)}
  .js .pose.activa .hilos path + path{animation-delay:calc(var(--retraso, 0s) + 1.25s)}
  .js .pose.activa .etiqueta{animation:cuelga 1.4s var(--ease-sale) both; animation-delay:calc(var(--retraso, 0s) + 1.4s)}
  .js .pose.activa .etiqueta + .etiqueta{animation-delay:calc(var(--retraso, 0s) + 1.65s)}
}
@keyframes baja-barra{from{translate:0 -100%}}
@keyframes condensa{from{opacity:0; transform:scaleX(1.28); filter:blur(10px); letter-spacing:.05em} 60%{opacity:1; filter:blur(0)}}
@keyframes levanta{from{opacity:0; transform:translateY(7%)}}
@keyframes baja{to{opacity:0; transform:translateY(5%)}}
@keyframes se-va{to{opacity:0}}
@keyframes sube{from{opacity:0; transform:translateY(14px)}}
@keyframes aparece{from{opacity:0; transform:scale(0)}}
@keyframes hilo{from{stroke-dashoffset:2000}}
@keyframes cuelga{0%{opacity:0; rotate:calc(var(--giro, 0deg) - 14deg); translate:-50% -10px} 35%{opacity:1} 60%{rotate:calc(var(--giro, 0deg) + 5deg)} 80%{rotate:calc(var(--giro, 0deg) - 2deg)} 100%{rotate:var(--giro, 0deg); translate:-50% 0}}
@keyframes corre{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes gira{to{transform:rotate(360deg)}}

/* ============================================================ SECCIONES: cabecera editorial */
.seccion{max-width:var(--max-width); margin:0 auto; padding:var(--section-y) max(16px, var(--pad))}
.cabeza{display:grid; grid-template-columns:120px minmax(0, 1.3fr) minmax(0, 1fr); gap:max(16px, var(--gap)); align-items:end; margin-bottom:max(40px, calc(var(--gap) * 2))}
.cabeza__n{margin:0; align-self:start; padding-top:18px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent)}
.cabeza__tit{margin:0; font:var(--h2-weight) min(var(--h2-size), 11vw)/.95 var(--heading-font); letter-spacing:-.025em}
.cabeza__tit em{font-style:var(--heading-italic); color:var(--accent)}
.cabeza__txt{margin:0; max-width:44ch; color:var(--muted)}

/* ============================================================ 2 · PROMO (cupón troquelado) */
.promo{padding:max(40px, calc(var(--gap) * 2)) max(16px, var(--pad)) 0}
.cupon{position:relative; max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:max(16px, var(--gap)); padding:30px max(24px, var(--gap)); background:var(--ink); color:var(--bg);
  -webkit-mask:radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right/51% 100% no-repeat}
.cupon__mes{margin:0; padding-right:max(16px, var(--gap)); border-right:1px dashed rgba(243,236,226,.35); display:flex; flex-direction:column; gap:6px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent-claro)}
.cupon__mes b{font:italic 400 30px/1 var(--heading-font); letter-spacing:0; text-transform:none; color:var(--bg)}
.cupon__tit{margin:0; font:400 26px/1.15 var(--heading-font)}
.cupon__det{grid-column:2; margin:-10px 0 0; font-size:15px; color:rgba(243,236,226,.78)}
.cupon__det .falta{text-decoration-color:#FACC15}
.cupon__cta{grid-row:1 / span 2; grid-column:3; display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border:1px solid var(--accent-claro); color:var(--bg); text-decoration:none; font:500 15px/1 var(--body-font); transition:background .3s, color .3s}
.cupon__cta:hover{background:var(--accent-claro); color:var(--ink)}

/* ============================================================ LA PIEZA FLOTANTE
   Adaptación de la plantilla "Objetos flotando en 3D" a piezas recortadas:
   flotan, proyectan sombra en el piso, se inclinan hacia el mouse y las
   recorre un brillo que pasa solo por arriba de la pieza. */
.flota{position:relative; display:flex; flex-direction:column; align-items:center; perspective:900px}
.flota__aire{position:relative; width:100%; display:grid; place-items:end center; aspect-ratio:var(--aire, 4/3)}
.flota__vaiven{width:100%; display:grid; place-items:end center; animation:vaiven var(--t, 6s) ease-in-out var(--d, 0s) infinite}
.flota__pieza{position:relative; width:var(--ancho, 88%); transform-style:preserve-3d;
  transform:rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg)) rotateZ(var(--rz, -2deg)); transition:transform .9s var(--ease-sale)}
.flota__pieza img{width:100%; height:auto; filter:drop-shadow(0 18px 18px rgba(23,19,17,.18))}
.flota__pieza img.brillo{position:absolute; inset:0; filter:brightness(1.9) saturate(.6); mix-blend-mode:screen; opacity:.55; pointer-events:none;
  -webkit-mask:linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%) var(--brillo, 120%) 0/300% 100% no-repeat;
          mask:linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%) var(--brillo, 120%) 0/300% 100% no-repeat;
  transition:-webkit-mask-position 1s var(--ease-sale), mask-position 1s var(--ease-sale)}
.flota__sombra{width:62%; height:18px; margin-top:10px; border-radius:50%; background:radial-gradient(closest-side, rgba(23,19,17,.42), rgba(23,19,17,0)); animation:sombra var(--t, 6s) ease-in-out var(--d, 0s) infinite}
.flota:hover .flota__pieza,.flota:focus-visible .flota__pieza{--ry:0deg; --rx:3deg; --rz:0deg}
.flota:hover .brillo{--brillo:-20%}
@keyframes vaiven{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
@keyframes sombra{0%,100%{transform:scaleX(1); opacity:.95} 50%{transform:scaleX(.8); opacity:.55}}

/* ============================================================ 3 · SERIES (muestrario) */
.muestras{list-style:none; margin:0; padding:70px 0 0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:78px max(14px, calc(var(--gap) * .6))}
.muestra{position:relative; width:100%; text-decoration:none; display:flex; flex-direction:column; min-height:260px; padding:0 20px 18px; border:0; border-radius:var(--radius); background:var(--c); color:var(--tinta); text-align:left; cursor:pointer; font:inherit;
  transition:transform .6s var(--ease-sale), box-shadow .6s var(--ease-sale)}
.muestra:hover,.muestra:focus-visible{transform:translateY(-8px); box-shadow:0 30px 40px -24px rgba(23,19,17,.5)}
.muestra[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--ink)}
.muestra .flota{margin:-70px -8px 0}
.muestra .flota__sombra{background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent)}
.muestra__n{margin-top:auto; font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; opacity:.85}
.muestra__nom{margin:8px 0 0; font:400 25px/1.02 var(--heading-font); letter-spacing:-.01em}
.muestra__nom em{display:block; font-style:italic; font-size:.8em; opacity:.9}
.elegida{margin-top:max(56px, calc(var(--gap) * 2.5)); padding-top:32px; border-top:1px solid var(--ink); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.4fr); gap:max(24px, var(--gap)); align-items:start}
.elegida h3{margin:0; font:400 44px/1 var(--heading-font); letter-spacing:-.015em}
.elegida h3 em{color:var(--accent)}
.elegida > div > p{margin:14px 0 0; color:var(--muted)}
.tira{list-style:none; margin:0; padding:0 0 12px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory}
.tira li{scroll-snap-align:start; text-align:center; font-size:14px}
.tira b{display:block; font:400 17px/1.2 var(--heading-font)}

/* ============================================================ 4 · TIPOS (mosaico de platos) */
.mosaico{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:210px; gap:max(12px, calc(var(--gap) * .5))}
.casillero{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--surface)}
.casillero:nth-child(1){grid-column:span 3; grid-row:span 2; background:#E4D3C0}
.casillero:nth-child(2){grid-column:span 3; background:var(--ink); color:var(--bg)}
.casillero:nth-child(3){grid-column:span 2; background:#DCCAB6}
.casillero:nth-child(4){grid-column:span 1}
.casillero:nth-child(5){grid-column:span 2; grid-row:span 2; background:var(--accent); color:var(--papel)}
.casillero:nth-child(6){grid-column:span 2; background:#E9E0D3}
.casillero:nth-child(7){grid-column:span 2}
.casillero:nth-child(8){grid-column:span 2; background:#DCCAB6}
.casillero:nth-child(9){grid-column:span 2; background:var(--ink); color:var(--bg)}
.casillero a{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:22px 24px; color:inherit; text-decoration:none}
.plato{position:absolute; right:-10%; top:-26%; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.28) 0 38%, rgba(255,255,255,.12) 38.5% 60%, transparent 60.5%); transition:transform 1.2s var(--ease-sale)}
.casillero .flota{position:absolute; right:3%; top:6%; width:62%; transition:transform .8s var(--ease-sale)}
.casillero:nth-child(1) .flota{width:72%; right:3%; top:8%}
.casillero:nth-child(4) .flota{width:92%; right:4%}
.casillero a:hover .plato{transform:rotate(40deg) scale(1.06)}
.casillero a:hover .flota{transform:translateY(-10px)}
.cas__n{font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; opacity:.8}
.cas__nom{position:relative; z-index:1; font:400 30px/1 var(--heading-font); letter-spacing:-.015em}
.casillero:nth-child(1) .cas__nom{font-size:64px}
.casillero:nth-child(4) .cas__nom{font-size:22px}
.cas__dice{display:block; margin-top:10px; max-width:26ch; font:400 14px/1.4 var(--body-font); opacity:.9}

/* ============================================================ 5 · DESTACADAS (carrusel 3D) */
.destacadas{overflow:hidden}
.escenario3d{position:relative; height:470px; perspective:1400px; touch-action:pan-y}
.tarjeta{position:absolute; left:50%; top:0; width:330px; height:430px; margin-left:-165px; border:0; padding:0 26px 24px; border-radius:6px; background:var(--c); color:var(--tinta); text-align:left; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; justify-content:flex-end;
  transform:translateX(calc(var(--o) * 240px)) translateZ(calc(var(--a) * -180px)) rotateY(calc(var(--o) * -32deg));
  opacity:calc(1 - var(--a) * .22); z-index:calc(20 - var(--a));
  box-shadow:0 40px 60px -40px rgba(23,19,17,.6); transition:transform .8s var(--ease-cine), opacity .8s var(--ease-cine)}
.tarjeta[data-lejos]{opacity:0; pointer-events:none}
.tarjeta .flota{position:absolute; left:-8px; right:-8px; top:-30px}
.tarjeta .flota__sombra{background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent)}
.tarjeta__n{font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; opacity:.85}
.tarjeta__nom{margin:10px 0 12px; font:400 34px/.98 var(--heading-font); letter-spacing:-.015em}
.tarjeta__dice{font-size:14px; line-height:1.45; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .6s var(--ease-sale)}
/* la del medio invita a abrir la ficha */
.tarjeta__ver{display:inline-flex; align-items:center; gap:10px; margin-top:14px; font:500 11px/1 var(--body-font); letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .5s, transform .6s var(--ease-sale)}
.tarjeta__ver .flecha{width:26px; height:8px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .5s var(--ease-sale)}
.tarjeta[aria-current="true"] .tarjeta__ver{opacity:1; transform:none; transition-delay:.12s}
.tarjeta[aria-current="true"]:hover .tarjeta__ver .flecha{transform:translateX(6px)}
.tarjeta[aria-current="true"] .tarjeta__dice{opacity:.95; transform:none; transition-delay:.3s}
.mando{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:26px}
.mando button{width:52px; height:52px; border-radius:50%; border:1px solid var(--ink); background:transparent; cursor:pointer; font-size:20px; transition:background .3s, color .3s}
.mando button:hover{background:var(--ink); color:var(--bg)}
.mando__cual{min-width:220px; text-align:center; font:italic 400 21px/1.2 var(--heading-font)}



/* ---------------------------------------------------------- botón "Sumar" (vitrina, series, catálogo) */
.sumar{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 4px; border:0; background:none; font:500 14px/1 var(--body-font); color:inherit; cursor:pointer}
.sumar__mas{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid currentColor; font-size:18px; line-height:1; transition:background .3s, color .3s, transform .4s var(--ease-sale)}
.sumar:hover .sumar__mas{background:var(--ink); color:var(--bg); transform:rotate(90deg)}
.sumar.hecho .sumar__mas{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.oscuro .sumar:hover .sumar__mas,.vitrina .sumar:hover .sumar__mas{background:var(--bg); color:var(--ink)}

/* ============================================================ 6 · CATÁLOGO (dos puertas)
   Un solo recorrido: elegís buscar por color o por pieza, después la serie
   o el tipo, y entrás a la vitrina filtrada. Todo en la misma página, con
   transiciones: la puerta se abre a pantalla completa y un telón del color
   elegido crece desde la tarjeta que tocaste. Al tocar una pieza se abre
   su ficha en un panel lateral.
   ============================================================ */
.cat{position:relative; min-height:100svh}

/* ---- las transiciones entre pasos (todo en la misma página) */
.dos-puertas{transition:grid-template-columns .85s var(--ease-cine)}
.dp{min-width:0}
.cat.va-color .dos-puertas{grid-template-columns:1fr 0fr}
.cat.va-tipo .dos-puertas{grid-template-columns:0fr 1fr}
.cat.yendo .dp__txt{opacity:0; transform:translateY(16px); transition:opacity .35s, transform .5s var(--ease-sale)}
.cat.yendo .dp__mini img{transform:scale(1.15)}
.cat.yendo .dp__mini img,.cat.yendo .dp__dibujos{transition:transform .8s var(--ease-cine), opacity .5s}
.cat.yendo .dp__dibujos{opacity:0}
/* el telón: crece desde la tarjeta que tocaste y se abre ya dentro de la vitrina */
.telon{position:fixed; inset:0; z-index:45; display:grid; place-items:center; padding:max(16px, var(--pad)); text-align:center; background:var(--c, var(--ink)); color:var(--tinta, var(--bg)); pointer-events:none; clip-path:circle(0% at var(--x, 50%) var(--y, 50%)); opacity:1}
.telon.crece{animation:telon-crece 1s var(--ease-cine) forwards}
.telon.sale{animation:telon-sale .6s var(--ease-sale) forwards}
@keyframes telon-crece{to{clip-path:circle(150% at var(--x, 50%) var(--y, 50%))}}
@keyframes telon-sale{from{clip-path:circle(150% at var(--x, 50%) var(--y, 50%)); opacity:1} to{clip-path:circle(150% at var(--x, 50%) var(--y, 50%)); opacity:0}}
/* el nombre de la serie o del tipo, mientras el color tapa la pantalla */
.telon__nom{display:block; max-width:16ch; font:300 min(110px, 12vw)/.95 var(--heading-font); letter-spacing:-.03em; opacity:0}
.telon__nom em{display:block; font-size:.42em; font-style:italic; letter-spacing:-.01em; opacity:.85; margin-bottom:12px}
.telon__nom small{display:block; margin-top:22px; font:600 12px/1 var(--body-font); letter-spacing:.24em; text-transform:uppercase; opacity:.8}
.telon.crece .telon__nom{animation:telon-nom .9s var(--ease-sale) .5s both}
.telon.sale .telon__nom{animation:telon-nom-sale .45s var(--ease-sale) both}
@keyframes telon-nom{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@keyframes telon-nom-sale{from{opacity:1} to{opacity:0; transform:translateY(-14px)}}
/* la entrada de cada paso */
.paso.entra > *{animation:paso-entra .7s var(--ease-sale) both}
.paso.entra > *:nth-child(2){animation-delay:.06s}
.paso.entra > *:nth-child(3){animation-delay:.12s}
.paso.entra > *:nth-child(4){animation-delay:.18s}
.paso.entra .opciones > li{animation:paso-entra .7s var(--ease-sale) both}
.paso.entra .opciones > li:nth-child(2){animation-delay:.05s}
.paso.entra .opciones > li:nth-child(3){animation-delay:.1s}
.paso.entra .opciones > li:nth-child(4){animation-delay:.15s}
.paso.entra .opciones > li:nth-child(5){animation-delay:.2s}
.paso.entra .opciones > li:nth-child(n+6){animation-delay:.25s}
@keyframes paso-entra{from{opacity:0; transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){
  .dos-puertas,.telon,.paso.entra > *,.paso.entra .opciones > li{transition:none !important; animation:none !important}
}
/* ---- paso 1: las dos puertas */
.dos-puertas{display:grid; grid-template-columns:1fr 1fr; min-height:100svh}
.dp{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 60px; border:0; cursor:pointer; text-align:center; font:inherit; color:var(--bg); transition:flex-grow .6s}
.dp--color{background:var(--ink)}
.dp__franjas{position:absolute; inset:0; display:grid; grid-template-columns:repeat(5, 1fr); grid-template-rows:1fr 1fr}
.dp__franjas span{background:var(--c); transition:flex .5s}
.dp--color::after{content:""; position:absolute; inset:0; background:rgba(14,11,10,.45); transition:background .5s}
.dp--tipo{background:radial-gradient(70% 60% at 50% 30%, #3A2B22 0%, #1A1512 55%, #0E0B0A 100%)}
.dp:hover::after{background:rgba(14,11,10,.28)}
.dp__mini{position:absolute; inset:0 0 34%; display:grid; place-items:center; padding:8% 12% 0}
.dp__mini img{max-width:70%; max-height:100%; width:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation:vaiven 6s ease-in-out infinite}
.dp__dibujos{position:absolute; inset:0 0 34%; display:grid; grid-template-columns:repeat(2, 1fr); place-items:center; gap:10px; padding:8% 14% 0; color:var(--accent-claro)}
.dp__dibujos svg{width:100%; max-width:150px; height:auto}
.dp__dibujos svg *{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.dp__txt{position:relative; z-index:1}
.dp__et{display:block; margin-bottom:10px; font:600 11px/1 var(--body-font); letter-spacing:.22em; text-transform:uppercase; color:rgba(251,247,241,.75)}
.dp__tit{display:block; font:400 clamp(38px, 5vw, 72px)/.95 var(--heading-font); letter-spacing:-.02em}
.dp__tit em{font-style:italic; color:var(--accent-claro)}
.dp__sub{display:block; margin-top:14px; font-size:16px; color:rgba(251,247,241,.85)}
.dp__ir{display:inline-flex; align-items:center; gap:12px; margin-top:22px; font:italic 400 20px/1 var(--heading-font)}
.dp__ir svg{width:40px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .4s var(--ease-sale)}
.dp:hover .dp__ir svg{transform:translateX(8px)}

/* ---- paso 2: la elección */
.paso{display:none; padding:calc(var(--franja) + 60px) max(16px, var(--pad)) var(--section-y); max-width:var(--max-width); margin:0 auto}
.cat[data-paso="2"] .dos-puertas,.cat[data-paso="3"] .dos-puertas{display:none}
.cat[data-paso="2"] #paso-2{display:block}
.cat[data-paso="3"] #paso-3{display:block}
.migas{display:flex; align-items:center; gap:12px; margin-bottom:28px; font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.migas button{border:0; background:none; padding:0; min-height:44px; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer}
.paso h2{margin:0 0 12px; font:300 min(88px, 10vw)/.95 var(--heading-font); letter-spacing:-.03em}
.paso h2 em{font-style:italic; color:var(--accent)}
.paso > p{margin:0 0 44px; max-width:46ch; color:var(--muted); font-size:18px}
.opciones{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:60px max(14px, calc(var(--gap) * .6))}
.opciones--tipos{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:max(16px, var(--gap))}
.op-serie{position:relative; width:100%; min-height:240px; display:flex; flex-direction:column; justify-content:flex-end; padding:0 18px 16px; border:0; border-radius:var(--radius); background:var(--c); color:var(--tinta); text-align:left; cursor:pointer; font:inherit; transition:transform .6s var(--ease-sale), box-shadow .6s var(--ease-sale)}
.op-serie:hover{transform:translateY(-8px); box-shadow:0 30px 40px -24px rgba(23,19,17,.5)}
.op-serie .flota{margin:-66px -6px 0}
.op-serie b{font:400 22px/1.05 var(--heading-font)}
.op-serie b em{display:block; font-size:.72em; font-style:italic; opacity:.9}
.op-serie small{margin-top:auto; padding-top:10px; font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; opacity:.85}
.op-tipo{width:100%; display:grid; grid-template-columns:120px minmax(0, 1fr); align-items:center; gap:18px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-align:left; cursor:pointer; font:inherit; color:inherit; transition:border-color .3s, transform .5s var(--ease-sale)}
.op-tipo:hover{transform:translateY(-4px); border-color:var(--ink)}
.op-tipo img{width:100%; height:auto}
.op-tipo b{display:block; font:400 26px/1.05 var(--heading-font)}
.op-tipo span{font-size:14px; color:var(--muted)}
.op-tipo small{display:block; margin-top:8px; font:600 11px/1 var(--body-font); letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}

/* ---- paso 3: la vitrina */
#paso-3{max-width:none; padding:0}
.vitrina-3{padding:calc(var(--franja) + 50px) max(16px, var(--pad)) var(--section-y); background:radial-gradient(70% 45% at 50% 0%, #3A2B22 0%, #1A1512 45%, #0E0B0A 100%); color:var(--bg)}
.vitrina-3 .envase{max-width:var(--max-width); margin:0 auto}
.vitrina-3 .migas{color:rgba(243,236,226,.6)}
.vitrina-3 .migas button{color:var(--accent-claro)}
.cabeza-3{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:24px; margin-bottom:50px; padding-bottom:24px; border-bottom:1px solid rgba(243,236,226,.18)}
.cabeza-3 h2{margin:0; font:300 min(84px, 9vw)/.95 var(--heading-font); letter-spacing:-.03em}
.cabeza-3 h2 em{font-style:italic; color:var(--accent-claro)}
.cabeza-3 p{margin:10px 0 0; max-width:46ch; color:rgba(243,236,226,.78)}
.cabeza-3 .cuenta{font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:rgba(243,236,226,.6); white-space:nowrap}
.otras-3{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px}
.otras-3 button{min-height:40px; padding:0 14px; border:1px solid rgba(243,236,226,.24); border-radius:999px; background:none; color:rgba(243,236,226,.8); font:500 13px var(--body-font); cursor:pointer}
.otras-3 button:hover{border-color:var(--bg); color:var(--bg)}
.otras-3 button[aria-pressed="true"]{background:var(--accent-claro); border-color:var(--accent-claro); color:var(--ink)}

@media (max-width:900px){
  .dos-puertas{grid-template-columns:1fr; min-height:0}
  .dp{min-height:62svh}
  .opciones{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .opciones--tipos{grid-template-columns:1fr}
  .cabeza-3{grid-template-columns:1fr}
}

/* ---------------------------------------------------------- grilla de piezas */
.rejilla{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:56px max(16px, var(--gap))}
.rejilla--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.pza{display:flex; flex-direction:column; align-items:center; text-align:center; animation:sube .7s var(--ease-sale) both}
.pza__btn{width:100%; display:flex; flex-direction:column; align-items:center; border:0; background:none; padding:0; cursor:pointer; color:inherit; font:inherit}
.pza__btn > .flota{width:100%}
.pza__serie{margin:14px 0 6px; display:inline-flex; align-items:center; gap:8px; font:600 11px/1 var(--body-font); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.pza__serie i{width:9px; height:9px; border-radius:50%; background:var(--c)}
.pza__nom{margin:0; font:400 23px/1.1 var(--heading-font)}
/* el enlace a la ficha: aparece al pasar por la tarjeta, pero siempre está para el teclado */
.pza__ver{display:inline-flex; align-items:center; gap:10px; margin-top:8px; font:500 12px/1 var(--body-font); letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  opacity:0; transform:translateY(-4px); transition:opacity .4s, transform .5s var(--ease-sale)}
.pza__ver .flecha{width:26px; height:8px; fill:none; stroke:currentColor; stroke-width:1.4}
.pza__btn:hover .pza__ver,.pza__btn:focus-visible .pza__ver{opacity:1; transform:none}
@media (hover:none), (max-width:760px){ .pza__ver{opacity:1; transform:none} }
.pza__pie{display:flex; align-items:center; gap:14px; margin-top:8px; font-size:14px; color:var(--muted)}
.oscuro .pza__serie,.oscuro .pza__pie{color:rgba(243,236,226,.65)}
.oscuro .pza .flota__sombra{background:radial-gradient(closest-side, rgba(0,0,0,.8), transparent)}
.oscuro .pza .flota__pieza img{filter:drop-shadow(0 26px 26px rgba(0,0,0,.45))}
.oscuro .sumar:hover .sumar__mas{background:var(--bg); color:var(--ink)}

/* ---------------------------------------------------------- ficha (panel lateral) */
.velo-f{position:fixed; inset:0; z-index:58; background:rgba(14,11,10,.5); opacity:0; transition:opacity .4s}
.velo-f.abierto{opacity:1}
.ficha-p{position:fixed; top:0; right:0; bottom:0; z-index:59; width:min(560px, 100vw); display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  box-shadow:-40px 0 80px -40px rgba(23,19,17,.5); translate:100% 0; visibility:hidden; transition:translate .6s var(--ease-cine), visibility 0s .6s}
.ficha-p.abierto{translate:0 0; visibility:visible; transition:translate .6s var(--ease-cine)}
.ficha-p__cab{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 28px; border-bottom:1px solid var(--line)}
.ficha-p__cab p{margin:0; font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.ficha-p__cerrar{min-height:44px; border:0; background:none; font:500 14px var(--body-font); text-decoration:underline; cursor:pointer}
.ficha-p__cuerpo{flex:1; overflow:auto; padding:0 28px 28px}
.ficha-p__dice{margin:0; color:var(--muted)}   /* solo cuando Essen no trae descripción */
.ficha-p__colores{margin:22px 0 0}
.ficha-p__colores p{margin:0 0 10px; font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.ficha-p__colores div{display:flex; flex-wrap:wrap; gap:10px}
.ficha-p__colores button{width:42px; height:42px; border:0; border-radius:50%; background:var(--c); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(23,19,17,.15); transition:transform .3s var(--ease-sale)}
.ficha-p__colores button:hover{transform:scale(1.1)}
.ficha-p__colores button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--ink)}
/* la ficha completa */
/* ---- cabecera a color de la serie: la pieza sobre su propio color */
.ficha-p__cuerpo{padding:0}
.fcolor{position:relative; padding:0 28px 26px; background:var(--c, var(--ink)); color:var(--tinta, var(--bg)); overflow:hidden}
.fcolor::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(74% 58% at 50% 38%, transparent 42%, rgba(0,0,0,.16) 100%),
             linear-gradient(to top, rgba(0,0,0,.24), transparent 42%)}
.fcolor .flota__pieza img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.3))}
.fcolor__foto{position:relative; z-index:1; margin:0; padding:26px 0 6px}
.fcolor__foto .flota__sombra{background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent)}
.fcolor__serie{position:relative; z-index:1; margin:0 0 6px; font:600 11px/1 var(--body-font); letter-spacing:.22em; text-transform:uppercase; opacity:.78}
.fcolor__nom{position:relative; z-index:1; margin:0; font:300 clamp(34px, 6vw, 50px)/.98 var(--heading-font); letter-spacing:-.03em}
.fcolor__nom em{font-style:italic}
.fcolor__para{position:relative; z-index:1; margin:10px 0 0; font:500 12px/1 var(--body-font); letter-spacing:.14em; text-transform:uppercase; opacity:.8}

/* ---- las tres medidas, pegadas al color */
.ficha-p__datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:1px; margin:0 0 30px; background:var(--line); border-bottom:1px solid var(--line)}
.dato{display:grid; gap:3px; padding:18px 4px; background:var(--bg); text-align:center}
.dato b{font:400 clamp(24px, 4.4vw, 30px)/1.05 var(--heading-font); letter-spacing:-.01em}
.dato--largo b{font-size:clamp(17px, 3vw, 21px)}
.dato span{font:600 10px/1.2 var(--body-font); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ---- el resto del panel */
.ficha-p__sec{margin:0 0 32px; padding:0 28px}
.ficha-p__sec h3{margin:0 0 16px; font:600 11px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}

/* los puntos fuertes: numerados, con aire, es lo que tiene que quedar */
.pros{list-style:none; margin:0; padding:0; display:grid; gap:20px; counter-reset:pro}
.pros li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
.pros__n{font:400 15px/1 var(--heading-font); font-style:italic; color:var(--accent); padding-top:4px}
.pros p{margin:0; font-size:16px; line-height:1.55}
.pros li + li{padding-top:20px; border-top:1px solid var(--line)}
.ficha-p__fuente{margin:16px 0 0; font-size:12px; color:var(--muted)}

/* la ficha técnica: pares chicos en dos columnas, con menos peso */
.specs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; margin:0; background:var(--line); border:1px solid var(--line)}
.specs > div{display:grid; gap:3px; padding:12px 14px; background:var(--bg)}
.specs dt{font:600 10px/1.2 var(--body-font); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.specs dd{margin:0; font:400 17px/1.2 var(--heading-font)}
.ficha-p__aviso{margin:16px 0 0; padding:12px 14px; background:var(--surface); font-size:14px; line-height:1.5; color:var(--ink)}

.ficha-p__colores h3{margin-bottom:12px}
.ficha-p__sec:last-child{margin-bottom:28px}
.ficha-p__pie{padding:20px 28px; border-top:1px solid var(--line); display:grid; gap:12px}
.ficha-p__precio{margin:0; font:italic 400 22px/1.2 var(--heading-font)}
.ficha-p__precio small{display:block; font:500 13px var(--body-font); font-style:normal; color:var(--muted)}

@media (max-width:1100px){ .rejilla{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (max-width:760px){ .rejilla,.rejilla--3{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 14px} .pza__nom{font-size:18px} }

/* ============================================================ 7 · QUIZ (¿cuál me conviene?) */
.quiz{display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:max(32px, calc(var(--gap) * 2)); align-items:start; max-width:none; background:var(--ink); color:var(--bg); padding-inline:max(16px, var(--pad), calc((100vw - var(--max-width)) / 2 + var(--pad)))}
.quiz .cabeza__n{color:var(--accent-claro); padding-top:0; margin-bottom:28px}
.quiz .cabeza__tit em{color:var(--accent-claro)}
.quiz .cabeza__txt{margin-top:26px; color:rgba(243,236,226,.78)}
.quiz__pasos{display:flex; gap:10px; margin:36px 0 0; padding:0; list-style:none}
.quiz__pasos li{width:44px; height:2px; background:rgba(243,236,226,.2); transition:background .4s}
.quiz__pasos li.hecho{background:var(--accent-claro)}
.quiz__caja{min-height:420px; border-left:1px solid rgba(243,236,226,.16); padding-left:max(24px, calc(var(--gap) * 1.5))}
.quiz__num{margin:0 0 14px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent-claro)}
.quiz__preg{margin:0 0 26px; font:400 44px/1.05 var(--heading-font); letter-spacing:-.015em}
.quiz__ops{list-style:none; margin:0; padding:0}
.quiz__op{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:64px; padding:12px 0; border:0; border-top:1px solid rgba(243,236,226,.16); background:none; text-align:left; font:italic 300 30px/1.15 var(--heading-font); color:rgba(243,236,226,.86); transition:color .3s, transform .4s var(--ease-sale)}
.quiz__op:hover,.quiz__op:focus-visible{color:var(--bg); transform:translateX(14px)}
.quiz__op .flecha{stroke:var(--accent-claro); opacity:0; transition:opacity .3s, transform .45s var(--ease-sale)}
.quiz__op:hover .flecha,.quiz__op:focus-visible .flecha{opacity:1; transform:translateX(6px)}
.quiz__entra{animation:sube .6s var(--ease-sale) both}
.quiz__res{display:grid; grid-template-columns:minmax(0, 1fr) 230px; gap:24px; align-items:end}
.quiz__pieza{align-self:center}
.quiz__pieza .flota__sombra{background:radial-gradient(closest-side, rgba(0,0,0,.7), transparent)}
.quiz__pieza .flota__pieza img{filter:drop-shadow(0 22px 22px rgba(0,0,0,.4))}
.quiz__res-nombre{margin:6px 0 14px; font:400 64px/.95 var(--heading-font); letter-spacing:-.02em}
.quiz__res-nombre em{color:var(--accent-claro)}
.quiz__res p{color:rgba(243,236,226,.8); max-width:40ch}
.quiz__acc{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; margin-top:26px}
.quiz__otra{border:0; background:none; padding:0; min-height:44px; color:rgba(243,236,226,.72); text-decoration:underline; font:500 14px var(--body-font)}

/* ============================================================ 8 · APRENDÉ (cuidados) */
.consejos{list-style:none; margin:0 0 max(40px, calc(var(--gap) * 1.5)); padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:max(16px, calc(var(--gap) * 1.2))}
.consejo{position:relative; padding-top:150px}
.consejo__n{position:absolute; top:-14px; left:-6px; font:italic 200 150px/1 var(--heading-font); color:transparent; -webkit-text-stroke:1px var(--accent); letter-spacing:-.04em}
.consejo h3{position:relative; margin:0 0 12px; font:400 34px/1.05 var(--heading-font); letter-spacing:-.015em}
.consejo h3 em{color:var(--accent)}
.consejo p{margin:0; color:var(--muted); max-width:34ch}
.enlace--oscuro{color:var(--ink)}

/* ============================================================ 8b · CUIDADOS (la libreta con las tres piezas)
   La hoja de anotaciones de Sofi. Los tres consejos se leen todos, y el que
   tocás enciende su pieza a la derecha. Mezcla de las opciones 2 y 3. */
.cuid{padding-top:0}   /* el renglón del pasillo, arriba, ya deja su aire */
.hoja{position:relative; display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr); align-items:center;
  gap:max(16px, calc(var(--gap) * 1.2)); padding:max(24px, var(--gap)) max(18px, calc(var(--gap) * 1.1));
  background:var(--papel); border:var(--border) solid var(--line); box-shadow:0 30px 60px -40px rgba(23,19,17,.5)}
/* los renglones de la libreta */
.hoja::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, transparent 0 37px, var(--line) 37px 38px)}
/* el margen de la hoja, en cobre */
.hoja::after{content:""; position:absolute; top:0; bottom:0; left:max(18px, calc(var(--gap) * .55)); width:1px; background:var(--accent); opacity:.35}

.hoja__texto{position:relative; z-index:1; padding-left:max(10px, calc(var(--gap) * .5))}
.hoja__ojo{margin:0 0 4px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent)}
.hoja__tit{margin:0 0 max(14px, calc(var(--gap) * .6)); font:400 clamp(34px, 4.4vw, 58px)/1.02 var(--heading-font); letter-spacing:-.025em}
.hoja__tit span{display:block; font-family:var(--firma-font); font-size:1.22em; line-height:.9; color:var(--accent)}

.notas{list-style:none; margin:0; padding:0; display:grid; gap:max(8px, calc(var(--gap) * .3))}
.nota{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; width:100%; padding:6px 0; border:0; background:none;
  color:inherit; text-align:left; cursor:pointer; transition:opacity .5s}
.nota b{font:italic 400 21px/1.2 var(--heading-font); transition:color .4s}
.nota p{margin:4px 0 0; color:var(--muted); font-size:15px; line-height:1.55; max-width:44ch}
/* los tres se leen igual: lo que cambia es el tilde y el color del título */
.nota[aria-pressed="true"] b{color:var(--accent)}
/* el tilde, dibujado a mano */
.tilde{width:26px; height:26px; margin-top:4px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.3; transition:opacity .4s}
.nota[aria-pressed="true"] .tilde{opacity:1}
.nota:hover .tilde{opacity:.65}
.nota[aria-pressed="true"]:hover .tilde{opacity:1}
.tilde path{stroke-dasharray:44; stroke-dashoffset:0}
.nota[aria-pressed="true"] .tilde path{animation:tilde .7s var(--ease-sale) both}
@keyframes tilde{from{stroke-dashoffset:44} to{stroke-dashoffset:0}}

.hoja__firma{margin:max(16px, calc(var(--gap) * .7)) 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.hoja__firma span{font:400 34px/1 var(--firma-font); color:var(--ink)}
.hoja__firma a{display:inline-flex; align-items:center; min-height:44px; font:500 13px/1 var(--body-font); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}
.hoja__firma a:hover{color:var(--accent)}

/* las piezas: están las tres, se enciende la del consejo elegido */
.hoja__piezas{position:relative; z-index:1; display:grid; aspect-ratio:1/1}
.hoja__pieza{grid-area:1 / 1; display:grid; place-items:center; opacity:0; transform:rotate(-3deg) scale(.96);
  transition:opacity .7s var(--ease-sale), transform .9s var(--ease-sale); pointer-events:none}
.hoja__pieza.se-ve{opacity:1; transform:rotate(-3deg) scale(1); pointer-events:auto}

/* el papelito pegado con cinta */
.papelito{position:absolute; z-index:2; right:max(12px, calc(var(--gap) * .5)); top:max(12px, calc(var(--gap) * .5)); width:min(230px, 32vw); padding:14px 16px 16px;
  background:var(--surface); transform:rotate(2.5deg); box-shadow:0 12px 24px -16px rgba(23,19,17,.6)}
.papelito p{margin:0; font-size:14px; line-height:1.5; color:var(--ink)}
.papelito::before{content:""; position:absolute; top:-11px; left:50%; translate:-50% 0; width:74px; height:22px; background:var(--accent); opacity:.25}

/* ============================================================ inicio: el pasillo al catálogo
   Una sola puerta grande. Las piezas desfilan detrás del título y se frenan
   al pasar el mouse. Abajo, un renglón fino con lo secundario. */
.pasillo{position:relative; display:grid; place-items:center; min-height:min(72svh, 620px); padding:max(20px, var(--gap)) 0;
  background:var(--ink); color:var(--bg); overflow:hidden; text-decoration:none}
.riel{position:absolute; inset:auto 0 8%; display:flex; width:max-content; gap:max(20px, calc(var(--gap) * 1.4)); align-items:flex-end;
  animation:desfile 46s linear infinite; opacity:.8}
.pasillo:hover .riel,.pasillo:focus-visible .riel{animation-play-state:paused}
.riel .flota{width:clamp(120px, 14vw, 210px); flex:none}
.riel .flota__pieza img{filter:drop-shadow(0 20px 26px rgba(0,0,0,.6))}
@keyframes desfile{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .riel{animation:none} }

.pasillo__velo{position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 62%, rgba(23,19,17,.2) 0%, rgba(23,19,17,.78) 62%, var(--ink) 100%)}
.pasillo__velo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--ink) 0, transparent 14%, transparent 86%, var(--ink) 100%)}

.pasillo__centro{position:relative; text-align:center; padding:0 max(16px, var(--pad))}
.pasillo__ojo{display:block; margin:0 0 10px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent-claro)}
.pasillo__tit{margin:0; font:var(--h2-weight) clamp(46px, 8vw, 128px)/.9 var(--heading-font); letter-spacing:-.04em}
.pasillo__tit em{font-style:var(--heading-italic); color:var(--accent-claro)}
.pasillo__ir{display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:18px;
  font:500 12px/1 var(--body-font); letter-spacing:.2em; text-transform:uppercase; color:var(--bg)}
.pasillo__ir i{display:inline-block; width:104px; height:1px; background:var(--accent-claro); transform:scaleX(.54); transform-origin:left center; transition:transform .8s var(--ease-cine)}
.pasillo:hover .pasillo__ir i,.pasillo:focus-visible .pasillo__ir i{transform:scaleX(1)}

.abajo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px;
  max-width:var(--max-width); margin:0 auto; padding:max(16px, calc(var(--gap) * .7)) max(16px, var(--pad)) var(--section-y)}
.abajo p{margin:0; color:var(--muted); font-size:15px}
.abajo__links{display:flex; flex-wrap:wrap; gap:8px 26px}
.abajo a{display:inline-flex; align-items:center; gap:10px; min-height:44px; font:italic 400 21px/1 var(--heading-font); color:var(--ink); text-decoration:none}
.abajo a::after{content:""; width:44px; height:1px; background:var(--accent); transform:scaleX(.59); transform-origin:left center; transition:transform .5s var(--ease-sale)}
.abajo a:hover{color:var(--accent)}
.abajo a:hover::after,.abajo a:focus-visible::after{transform:scaleX(1)}

/* ============================================================ 9 · QUIÉN SOY */
.soy{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:max(32px, calc(var(--gap) * 2.5)); align-items:center; padding-top:0}
.soy__foto{margin:0; aspect-ratio:4/5; border-radius:999px 999px 0 0; overflow:hidden; background:var(--surface)}
.soy__foto img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.soy__txt .cabeza__tit{margin:22px 0 28px}
.soy__txt > p:not(.cabeza__n):not(.firma){font-size:21px; line-height:1.55; max-width:36ch}
.firma{margin:14px 0 0; font:400 88px/1 var(--firma-font); color:var(--accent); rotate:-6deg; transform-origin:left}
.dichos{grid-column:1 / -1; list-style:none; margin:max(40px, calc(var(--gap) * 2)) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:max(16px, calc(var(--gap) * 1.2))}
.dicho{position:relative; padding:34px 0 0; border-top:1px solid var(--ink)}
.dicho::before{content:"\201C"; position:absolute; top:-6px; right:0; font:400 90px/1 var(--heading-font); color:var(--accent)}
.dicho blockquote{margin:0 0 16px; font:italic 300 24px/1.35 var(--heading-font)}
.dicho p{margin:0; font:600 var(--label-size)/1.4 var(--body-font); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* ============================================================ 10 · REUNIONES */
.reuniones{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:max(32px, calc(var(--gap) * 2.5)); align-items:center; padding-top:0}
.reuniones .cabeza__tit{margin:22px 0 26px}
.receta{list-style:none; margin:36px 0 38px; padding:0; border-top:1px dashed var(--line)}
.receta li{padding:16px 0; border-bottom:1px dashed var(--line); font-size:17px}
.receta b{font:italic 400 21px var(--heading-font); color:var(--accent); margin-right:8px}
.reuniones__foto{margin:0; rotate:2deg; padding:14px 14px 0; background:var(--papel); box-shadow:0 30px 60px -30px rgba(23,19,17,.45)}
.reuniones__foto img{aspect-ratio:641/760; object-fit:cover}
.reuniones__foto figcaption{padding:14px 4px 18px; font:400 30px/1 var(--firma-font); color:var(--muted); text-align:center}

.boton{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; background:var(--ink); color:var(--bg); text-decoration:none; font:500 15px/1 var(--body-font); letter-spacing:.02em; border-radius:var(--radius); border:0; cursor:pointer; transition:background .3s}
.boton:hover{background:var(--accent)}
.boton--claro{background:var(--bg); color:var(--ink)}
.boton--claro:hover{background:var(--accent-claro)}
.boton--ancho{width:100%}
/* apagado: hasta que no pongan el nombre, el pedido no se manda */
.boton--apagado{background:var(--line); color:var(--muted); cursor:not-allowed}
.boton--apagado:hover{background:var(--line)}
.pedido__pide{margin:-4px 0 0; font-size:13px; color:var(--accent)}
.campo--pide{border-color:var(--accent) !important; animation:pide .5s var(--ease-sale) 2}
@keyframes pide{0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)}}

/* ============================================================ 11 · SUMATE */
.sumate{position:relative; overflow:hidden; background:#86421F; color:var(--bg); padding:max(80px, calc(var(--section-y) * .75)) max(16px, var(--pad))}
.sumate .sumate__gigante{position:absolute; left:-2vw; bottom:-5vw; margin:0; max-width:none; font:italic 300 26vw/.8 var(--heading-font); letter-spacing:-.04em; color:rgba(23,19,17,.14); white-space:nowrap; pointer-events:none}
.sumate__txt{position:relative; max-width:var(--max-width); margin:0 auto; padding-left:min(40vw, 560px)}
.sumate h2{margin:0 0 20px; font:400 52px/1.02 var(--heading-font); letter-spacing:-.02em}
.sumate h2 em{color:#F6CFA8}   /* 5.3:1 sobre el cobre oscuro */
.sumate p{margin:0 0 30px; max-width:42ch; color:var(--papel)}

/* ============================================================ PIE */
.pie{display:grid; grid-template-columns:auto 1fr 1fr 1.2fr; gap:max(24px, calc(var(--gap) * 1.5)); padding:80px max(16px, var(--pad)) 40px; background:var(--ink); color:var(--bg)}
.pie__logo{width:112px}
.pie__col{display:flex; flex-direction:column; gap:8px; font-size:15px}
.pie__col a{text-decoration:none; opacity:.85; min-height:32px; display:inline-flex; align-items:center}
.pie__col a:hover{opacity:1; color:var(--accent-claro)}
.pie__col p{margin:0; opacity:.85}
.pie__tit{margin:0 0 6px !important; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent-claro); opacity:1 !important}
.pie__legal{grid-column:1 / -1; margin:30px 0 0; padding-top:24px; border-top:1px solid rgba(243,236,226,.14); font-size:13px; color:rgba(243,236,226,.62)}

/* ============================================================ PEDIDO (cajón) */
.velo{position:fixed; inset:0; z-index:60; background:rgba(23,19,17,.45); opacity:0; transition:opacity .4s}
.velo.abierto{opacity:1}
.pedido{position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(440px, 100vw); display:flex; flex-direction:column; background:var(--bg); box-shadow:-30px 0 60px -30px rgba(23,19,17,.4); translate:100% 0; visibility:hidden; transition:translate .55s var(--ease-cine), visibility 0s .55s}
.pedido.abierto{translate:0 0; visibility:visible; transition:translate .55s var(--ease-cine)}
.pedido__cab{display:flex; align-items:center; justify-content:space-between; padding:22px 28px; border-bottom:1px solid var(--line)}
.pedido__cab h2{margin:0; font:italic 400 32px/1 var(--heading-font)}
.pedido__cerrar{min-height:44px; border:0; background:none; font:500 14px var(--body-font); text-decoration:underline}
.pedido__lista{flex:1; overflow:auto; list-style:none; margin:0; padding:8px 28px}
.renglon{display:grid; grid-template-columns:64px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px dashed var(--line)}
.renglon img{width:64px; height:auto}
.renglon__n{margin:0; font:400 20px/1.1 var(--heading-font)}
.renglon__p{margin:2px 0 0; font-size:13px; color:var(--muted)}
.cant{display:flex; align-items:center; border:1px solid var(--line)}
.cant button{width:36px; height:36px; border:0; background:none; font-size:18px}
.cant span{min-width:22px; text-align:center; font-weight:600}
.pedido__lista:empty{flex:0}
.pedido__vacio{flex:1; padding:22px 28px; color:var(--muted)}
.pedido__pie{padding:20px 28px 28px; border-top:1px solid var(--line); display:grid; gap:12px}
.pedido__total{margin:0; font:italic 400 22px/1.2 var(--heading-font)}
.campo{display:grid; gap:4px; font-size:13px; color:var(--muted)}
.campo input{min-height:44px; padding:0 12px; border:1px solid var(--line); background:var(--papel); font:400 16px var(--body-font); color:var(--ink)}
.pedido__nota{margin:0; font-size:13px; color:var(--muted)}

/* ============================================================ SITIO DE VARIAS PÁGINAS */
/* la página en la que estás, en el menú */
.menu a[aria-current="page"]{opacity:1; box-shadow:inset 0 -2px 0 var(--accent-claro)}

/* cabecera de las páginas interiores (las que no tienen hero) */
.portada-pag{max-width:var(--max-width); margin:0 auto; padding:calc(var(--franja) + 96px) max(16px, var(--pad)) 40px; display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:24px max(24px, var(--gap)); align-items:end; border-bottom:1px solid var(--line)}
.portada-pag__n{grid-column:1 / -1; margin:0; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--accent)}
.portada-pag__tit{margin:0; font:300 min(112px, 12vw)/.92 var(--heading-font); letter-spacing:-.03em}
.portada-pag__tit em{font-style:italic; color:var(--accent)}
.portada-pag__txt{margin:0 0 10px; max-width:42ch; color:var(--muted); font-size:19px}
.portada-pag + .seccion{padding-top:max(64px, calc(var(--section-y) * .6))}

/* página de una serie */
.serie{background:var(--c, var(--accent)); color:var(--tinta, var(--bg))}
.serie__cabeza{max-width:var(--max-width); margin:0 auto; padding:calc(var(--franja) + 70px) max(16px, var(--pad)) 60px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:max(24px, var(--gap)); align-items:center; min-height:min(720px, 92svh)}
.serie__migas{margin:0 0 30px; font:600 var(--label-size)/1 var(--body-font); letter-spacing:var(--label-tracking); text-transform:uppercase; opacity:.8}
.serie__migas a{text-decoration:none; border-bottom:1px solid currentColor}
.serie__tit{margin:0 0 24px; font:300 min(120px, 13vw)/.9 var(--heading-font); letter-spacing:-.03em}
.serie__tit em{display:block; font-size:.42em; font-style:italic; letter-spacing:-.01em; opacity:.9; margin-bottom:10px}
.serie__dice{margin:0 0 18px; max-width:36ch; font-size:20px; line-height:1.5}
.serie__cuenta{margin:0; font:600 var(--label-size)/1.4 var(--body-font); letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.serie__pieza .flota__sombra{height:28px; background:radial-gradient(closest-side, rgba(0,0,0,.4), transparent)}
.serie__pieza .flota__pieza img{filter:drop-shadow(0 40px 40px rgba(0,0,0,.3))}
.vitrina--clara .obj__serie{color:var(--muted)}
.vitrina--clara .obj__pie{color:var(--muted)}
.vitrina--clara .obj .flota__sombra{background:radial-gradient(closest-side, rgba(23,19,17,.4), transparent)}
.vitrina--clara .obj .flota__pieza img{filter:drop-shadow(0 20px 20px rgba(23,19,17,.2))}
.vitrina--clara .obj .sumar:hover .sumar__mas{background:var(--ink); color:var(--bg)}
.otras{padding-top:0}
.otras__tit{margin:0 0 26px; padding-top:40px; border-top:1px solid var(--ink); font:400 44px/1 var(--heading-font); letter-spacing:-.015em}
.otras__tit em{color:var(--accent)}
.otras__lista{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 max(16px, var(--gap))}
.otra{display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; font:400 22px/1.2 var(--heading-font)}
.otra small{margin-left:auto; font:500 13px var(--body-font); color:var(--muted)}
.otra__color{flex:none; width:30px; height:30px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(23,19,17,.15); transition:transform .5s var(--ease-sale)}
.otra:hover .otra__color{transform:scale(1.25)}

/* Sofi: la página arranca con "Hola, soy Sofi" */
.soy--pagina{padding-top:calc(var(--franja) + 70px)}

/* pie: series con su color */
.pie__series{display:grid; gap:2px}
.pie__series a{display:inline-flex; align-items:center; gap:10px; min-height:30px; text-decoration:none; opacity:.85}
.pie__series a:hover{opacity:1; color:var(--accent-claro)}
.pie__series i{width:10px; height:10px; border-radius:50%; background:var(--c)}

/* ============================================================ APARICIÓN AL SCROLLEAR */
@media (prefers-reduced-motion:no-preference){
  .js .revela{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-sale), transform 1.1s var(--ease-sale)}
  .js .revela.visto{opacity:1; transform:none}
}

/* ============================================================ TABLET */
@media (max-width:1100px){
  .muestras{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .mosaico{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .casillero:nth-child(n){grid-column:span 1; grid-row:span 1}
  .casillero:nth-child(1){grid-column:span 2; grid-row:span 2}
  .portada-pag{grid-template-columns:minmax(0, 1fr)}
  .serie__cabeza{grid-template-columns:minmax(0, 1fr); min-height:0}
  .otras__lista{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pie{grid-template-columns:1fr 1fr}
  .menu{display:none}
  .menu-btn{display:inline-flex; align-items:center}
  .menu.abierto{display:flex; position:fixed; top:var(--franja); left:0; right:0; flex-direction:column; gap:0; padding:12px max(16px, var(--pad)) 24px; background:var(--ink)}
  .menu.abierto a{min-height:52px; font-size:20px; opacity:1; border-bottom:1px solid rgba(243,236,226,.1)}
  .cabeza{grid-template-columns:minmax(0, 1fr)}
  .cabeza__n{padding-top:0}
  .quiz{grid-template-columns:minmax(0, 1fr)}
  .quiz__caja{border-left:0; padding-left:0}
  .sumate__txt{padding-left:0}
  .hoja{grid-template-columns:minmax(0, 1fr)}
  .hoja__piezas{order:-1; aspect-ratio:16/9}
  .hoja__pieza .flota__aire{aspect-ratio:16/9}
  .papelito{position:static; width:auto; transform:none; margin-top:16px}
  .papelito::before{display:none}
}

/* ============================================================ CELULAR */
@media (max-width:760px){
  .riel{bottom:4%; opacity:.6}
  .pasillo__ir{flex-direction:column; gap:10px; text-align:center}
  .riel .flota{width:clamp(96px, 26vw, 150px)}
  .pasillo{min-height:min(58svh, 460px)}
  .abajo{justify-content:flex-start}
  .hoja__tit{font-size:34px}
  .nota p{font-size:14px}
  :root{--pad:20px; --section-y:96px; --franja:max(60px, 8vh); --h2-size:54px}
  .marca__rol{display:none}
  .marca__nombre{font-size:13px; white-space:nowrap; letter-spacing:.1em}
  .pedido-btn{padding-left:12px; margin-left:0}

  .gigante{font-size:30vw; top:calc(var(--franja) + 2vh)}
  .figura{height:auto; width:142vw; left:52%}
  .figura img{width:100%; height:auto}
  .pose[data-p="1"] .figura{width:150vw; left:46%}
  .hilos,.punto,.etiqueta{display:none}
  .usos,.usos--der{left:var(--pad); right:auto; text-align:left; bottom:auto; top:calc(var(--franja) + 2vh + 30vw); max-width:none}
  .usos ul{font-size:28px; margin-bottom:6px; display:flex; gap:8px; flex-wrap:wrap}
  .usos .enlace{display:none}
  .sello{display:none}   /* en celu queda encima de ella: los datos ya están en el cupón */

  .cupon{grid-template-columns:minmax(0, 1fr); text-align:left; padding:28px 26px}
  .cupon__mes{border-right:0; border-bottom:1px dashed rgba(243,236,226,.35); padding:0 0 14px}
  .cupon__det{grid-column:1; margin:0}
  .cupon__cta{grid-row:auto; grid-column:1; justify-self:start}

  .muestras{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:70px}
  .muestra{min-height:220px; padding:0 14px 14px}
  .muestra__nom{font-size:20px}
  .elegida{grid-template-columns:1fr}
  .mosaico{grid-auto-rows:190px}
  .casillero:nth-child(1) .cas__nom{font-size:40px}
  .cas__nom{font-size:22px}
  .cas__dice{display:none}
  .casillero:nth-child(1) .cas__dice{display:block}
  .escenario3d{height:400px}
  .tarjeta{width:250px; height:360px; margin-left:-125px; transform:translateX(calc(var(--o) * 165px)) translateZ(calc(var(--a) * -200px)) rotateY(calc(var(--o) * -34deg))}
  .tarjeta__nom{font-size:26px}
  .mando__cual{min-width:0; font-size:17px}
  .vitrina{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:44px}
  .obj__nom{font-size:19px}
  .quiz__preg{font-size:32px}
  .quiz__op{font-size:23px}
  .quiz__res{grid-template-columns:minmax(0, 1fr)}
  .quiz__res-nombre{font-size:46px}
  .consejos,.dichos{grid-template-columns:minmax(0, 1fr); row-gap:48px}
  .soy,.reuniones{grid-template-columns:minmax(0, 1fr)}
  .firma{font-size:70px}
  .sumate h2{font-size:38px}
  .pie{grid-template-columns:minmax(0, 1fr)}
  .portada-pag{padding-top:calc(var(--franja) + 60px)}
  .portada-pag__txt{font-size:17px}
  .serie__cabeza{padding-top:calc(var(--franja) + 40px)}
  .serie__dice{font-size:17px}
  .otras__lista{grid-template-columns:minmax(0, 1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .plano__riel::after{transform:scaleX(1)}
}