@font-face{font-family:"Hang Display";src:url(../fonts/hang-display.woff2) format("woff2");font-weight:400 900;font-stretch:100% 151%;font-display:swap}
@font-face{font-family:"Hang Text";src:url(../fonts/hang-text.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* Complemento: caracteres que no traen los subconjuntos anteriores («» © – → ō …), tomados de Inter */
@font-face{font-family:"Hang Display";src:url(../fonts/hang-extra.woff2) format("woff2");font-weight:400 900;font-stretch:100% 151%;font-display:swap;unicode-range:U+00A9,U+00AB,U+00AE,U+00B0,U+00BB,U+00F7,U+014D,U+2013,U+2014,U+2022,U+2026,U+2039,U+203A,U+2122,U+2190-2193,U+2197}
@font-face{font-family:"Hang Text";src:url(../fonts/hang-extra.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+00A9,U+00AB,U+00AE,U+00B0,U+00BB,U+00F7,U+014D,U+2013,U+2014,U+2022,U+2026,U+2039,U+203A,U+2122,U+2190-2193,U+2197}
:root{
--yellow-200:#fffbc2;--ink-900:#0f0f0f;--ink-800:#1a1a1a;--ink-700:#242424;--ink-600:#3a3a3a;--ink-500:#5c5c5c;--ink-400:#8a8a8a;--ink-300:#b5b5b5;--ink-200:#d9d9d9;--ink-100:#ebebeb;--ink-50:#f4f4f4;--ink-0:#fff;
--yellow-500:#fff200;--yellow-400:#fff64d;--magenta:#ec008c;
--paper:#fafafa;--paper-deep:#f2f2f2;
--page:var(--paper-deep);--plate:#e7e7e7;
--font-display:"Hang Display","Google Sans Flex",system-ui,sans-serif;
--font-body:"Hang Text","Inter",system-ui,sans-serif;
--ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
--fast:120ms;--base:200ms;--slow:360ms;
--shadow-md:0 4px 14px rgba(15,15,15,.08);--shadow-lg:0 16px 40px rgba(15,15,15,.12);
--shadow-frame:0 18px 36px -12px rgba(15,15,15,.38);
--gutter:clamp(20px,4.4vw,56px);--max:1280px;
--z-sticky:10;--z-float:20;--z-scrim:30;--z-drawer:40;--z-toast:50;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px;scroll-padding-bottom:96px}
body{margin:0;background:var(--page);color:var(--ink-700);font:400 16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);color:var(--ink-900);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ico{width:20px;height:20px;flex:none}
.ico-16{width:16px;height:16px}.ico-24{width:24px;height:24px}
:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px;box-shadow:0 0 0 5px var(--yellow-500);border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* «(variante X)» de un título repetido: en la misma línea, más pequeño y con peso menor para separarlo del nombre (hang_title() / Hang.titleHTML()) */
.variant{font-size:max(var(--text-min),.8em);font-weight:400}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 26px;border-radius:var(--radius-pill);font:600 15px/1 var(--font-body);letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn-y{background:var(--yellow-500);color:var(--ink-900)}.btn-y:hover{background:var(--yellow-400)}
.btn-o{border:1.5px solid var(--ink-900);color:var(--ink-900)}.btn-o:hover{background:var(--ink-0)}
.btn-k{background:var(--ink-900);color:var(--ink-0)}.btn-k:hover{background:var(--ink-700)}
.btn-lg{height:56px;padding:0 34px;font-size:16px}
.btn .ico{transition:transform var(--base) var(--ease-out)}
.btn:hover .ico-arrow{transform:translateX(3px)}

/* Barra superior */
.topbar{background:var(--ink-900);color:var(--ink-100);font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar a,.topbar span{display:inline-flex;align-items:center;gap:6px}
.topbar a{min-height:var(--target-min)}
.topbar a:hover{color:var(--yellow-500)}
.topbar .contact{display:flex;gap:22px}
.topbar b{color:var(--ink-0);font-weight:600}

/* Header */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:var(--page);transition:box-shadow var(--base) var(--ease)}
.hdr.stuck{box-shadow:0 1px 0 var(--ink-200)}
.hdr-row{display:flex;align-items:center;gap:28px;height:76px}
.hdr-brand{display:flex;align-items:center;gap:36px;flex:none;min-width:0}
.nav{display:flex;gap:30px;font:500 14px/1 var(--font-body);color:var(--ink-600);flex:none}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink-900);transform:scaleX(0);transform-origin:left;transition:transform var(--base) var(--ease-out)}
.nav a:hover{color:var(--ink-900)}.nav a:hover::after{transform:scaleX(1)}
.logo{flex:none}
.logo img{height:40px;width:auto}
/* Botón de búsqueda del encabezado, con forma de campo de texto: toma el espacio que sobra entre la navegación y
   el carrito (máximo cómodo de lectura) y abre el panel de búsqueda de siempre (no es un campo real: no se escribe
   aquí). En pantallas angostas (<900px) se encoge a un icono redondo, igual que los demás .icon-btn. */
.hdr-search{flex:1 1 auto;min-width:0;max-width:440px;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:var(--radius-pill);background:var(--ink-100);text-align:left;cursor:pointer;transition:background-color var(--fast) var(--ease)}
.hdr-search:hover{background:var(--ink-200)}
.hdr-search .ico{width:18px;height:18px;color:var(--ink-500);flex:none}
.hdr-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px/1 var(--font-body);color:var(--ink-500)}
.hdr-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex:none;margin-left:auto}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);display:grid;place-items:center;color:var(--ink-900);transition:background-color var(--fast) var(--ease)}
.icon-btn:hover{background:var(--ink-100)}
.cart-btn{position:relative;width:52px;height:52px;background:var(--yellow-500);margin-left:6px}
.cart-btn:hover{background:var(--yellow-400)}
.cart-count{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);background:var(--ink-900);color:var(--ink-0);font:600 12px/20px var(--font-body);text-align:center}
.cart-count.pop{animation:pop .36s var(--ease-out)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.menu-btn{display:none}

/* Hero */
.hero{padding:40px 0 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
.kicker{display:flex;align-items:center;gap:14px;font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.kicker::after{content:"";width:88px;height:1px;background:var(--ink-400)}
.h1{margin:22px 0 22px;font-weight:800;font-stretch:120%;font-size:clamp(44px,6vw,86px);line-height:.94;letter-spacing:-.035em}
.h1 span{display:block}
.h1 .soft{color:var(--ink-500)}
.hero-sub{max-width:44ch;font-size:17px;color:var(--ink-600)}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-side{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:24px;align-items:start;padding-top:36px}
.hero-statement{font:700 clamp(22px,2.3vw,30px)/1.22 var(--font-display);font-stretch:118%;letter-spacing:-.02em;color:var(--ink-800)}
.rating{display:flex;align-items:center;gap:14px;margin-top:22px}
.stars{display:flex;gap:2px;color:var(--ink-900)}
.rating strong{font:700 30px/1 var(--font-display);color:var(--ink-900)}
.rating small{font-size:12px;line-height:1.3;color:var(--ink-500);max-width:19ch}
.hero-photo{display:block}
.hero-photo .af{transition:transform var(--slow) var(--ease)}
.hero-photo:hover .af{transform:scale(1.04)}
.dot-deco{width:42px;height:42px;border-radius:50%;background:var(--ink-200);margin:0 0 14px auto;display:grid;place-items:center;color:var(--ink-900)}

/* Escenario */
.stage{position:relative;padding:48px 0 24px;--stage-overlap:150px}
.stage-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.stage-arrow{display:inline-flex;align-items:center;gap:18px;font:700 clamp(22px,2.6vw,34px)/1 var(--font-display);font-stretch:125%;letter-spacing:-.02em;color:var(--ink-700);padding:10px 0}
.stage-arrow .ico{width:34px;height:34px;transition:transform var(--base) var(--ease-out)}
.stage-arrow.prev{justify-self:end;margin-right:clamp(16px,4vw,64px)}
.stage-arrow.next{justify-self:start;margin-left:clamp(16px,4vw,64px)}
.stage-arrow.prev:hover .ico{transform:translateX(-5px)}.stage-arrow.next:hover .ico{transform:translateX(5px)}
.stage-arrow span{transition:opacity var(--base) var(--ease)}
/* El cuadro grande siempre está por encima de «row» en el z-index; lo que lo mantiene «detrás» por
   defecto es que su imagen (.sh-layer, no .stage-hero mismo) se oculta justo donde empieza «row»
   (mismo valor --stage-overlap que usa el margin-top negativo de «row» más abajo, menos --row-pad: el
   padding-top que «row» tiene en tablet/móvil, para que el corte caiga justo en el borde de las pcard).
   Se usa mask-image (degradado a transparente) y no clip-path: un recorte con bordes rectos corta
   también cualquier sombra/difuminado que haya justo ahí (la sombra propia de .af, --shadow-frame,
   que se extiende ~40px bajo el marco) con un borde recto visible — un «degradado rectangular» que no
   estaba antes del recorte. Con mask-image el contenido se desvanece de forma gradual (24px) antes de
   desaparecer, así que cualquier sombra ahí se apaga junto con la imagen, sin corte visible.
   --hero-reveal (una custom property animable, @property más abajo) controla el desvanecido: en 0px
   el degradado termina justo en --stage-overlap (oculto, como el recorte de antes); en un valor mayor
   al alto del cuadro, ambos límites del degradado quedan más allá del 100%, así que no hay desvanecido
   en ningún punto visible (revelado por completo). Al ser una custom property con @property, SÍ se
   anima con transition, como el clip-path anterior.
   El disparador es solo «hover sobre una pcard» (no toda la fila ni .stage-top: si no, se revelaba
   con cualquier hover dentro del escenario, no solo sobre los cuadros pequeños). Para que no parpadee
   en bucle al revelarse justo encima de la pcard que se está mirando (el cuadro, ya visible, le
   taparía el mouse a esa pcard, la pcard perdería el hover, el cuadro se ocultaría de nuevo, la
   pcard volvería a tener hover, se revela otra vez…), .sh-layer pasa a pointer-events:none mientras
   está revelado: así el mouse siempre «atraviesa» el cuadro grande y sigue viendo la pcard debajo.
   .stage-hero (el contenedor) también necesita pointer-events:none SIEMPRE, no solo mientras está
   revelado: .stage-hero nunca tiene mask (solo su hijo .sh-layer la tiene), así que su caja completa
   (incluida la franja que se superpone con «row») siempre está ahí, encima de «row» en z-index, aunque
   esa franja no se vea. Sin este pointer-events:none, esa franja invisible seguía «tapando» el mouse —
   sobre todo en las 2 pcard del centro, justo debajo del cuadro grande — y apenas el cursor entraba en
   ella (aunque siguiera dentro del <article> de la pcard) la pcard perdía el `:hover`, el cuadro se
   ocultaba, y al ocultarse esa franja quedaba libre, la pcard recuperaba el hover, se revelaba de
   nuevo… un bucle. La interactividad real (el enlace al producto) vive en .sh-layer, que sí tiene
   pointer-events propio.
   La imagen de la máscara mide el doble del alto del cuadro (mask-size:100% 200%): su mitad de
   arriba (0%-50%) tiene el desvanecido (para el estado oculto) y su mitad de abajo (50%-100%) es
   opaca de punta a punta (para el estado revelado). mask-position desliza cuál mitad se ve —
   0%=arriba (oculto), 100%=abajo (revelado) — y a diferencia de una custom property con @property,
   mask-position es una propiedad estándar que anima con transition en cualquier navegador moderno. */
.stage-hero{position:relative;width:clamp(230px,27vw,350px);aspect-ratio:5/7;z-index:3;pointer-events:none}
.sh-layer{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;pointer-events:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(50% - var(--stage-overlap) + var(--row-pad,0px) - 24px),transparent calc(50% - var(--stage-overlap) + var(--row-pad,0px)),transparent 50%,#000 50%,#000 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(50% - var(--stage-overlap) + var(--row-pad,0px) - 24px),transparent calc(50% - var(--stage-overlap) + var(--row-pad,0px)),transparent 50%,#000 50%,#000 100%);
  -webkit-mask-size:100% 200%;mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0%;mask-position:0 0%;
  transition:opacity 480ms var(--ease),transform 640ms var(--ease-out),-webkit-mask-position .5s var(--ease),mask-position .5s var(--ease)}
.stage:has(.pcard:hover,.pcard:focus-within) .sh-layer{-webkit-mask-position:0 100%;mask-position:0 100%;pointer-events:none}
.sh-layer.enter{opacity:0;transform:translateY(14px) scale(.985)}
.sh-layer.leaving{opacity:0;transform:translateY(-8px);pointer-events:none}   /* la capa que sale se solapa con la nueva: no debe recibir toques ni clics (objetivos táctiles) */
.alb{width:100%;height:100%;container-type:inline-size;background:#efeee9;color:#0f0f0f}
.alb > div{height:100%;display:flex;flex-direction:column;padding:8cqw 8cqw 0}
.alb.dark{background:#111;color:#f2f2f2}.alb.cream{background:#f3ead7;color:#2a1f14}
.af .art .alb img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.alb b{margin-top:7cqw;font:800 9.5cqw/1 var(--font-display);font-stretch:120%;letter-spacing:-.02em}
.alb i{font-style:normal}
.alb span{display:flex;justify-content:space-between;margin-top:3.5cqw;padding-top:3cqw;border-top:1px solid currentColor;font:500 4.4cqw/1 var(--font-body);opacity:.85}
/* Sin sombra bajo el cuadro grande: ni el halo difuminado que antes tenía .stage-hero::before (no llevaba
   la máscara de .sh-layer, así que se veía sobre las pcard, sobre todo con marcos blancos o de roble) ni
   la sombra propia de .af (--shadow-frame), que aparecía bajo el marco al revelarse el cuadro completo. */
.sh-layer .af{box-shadow:none}
.stage-name{position:relative;z-index:2;text-align:center;margin-top:44px;font:800 clamp(26px,3vw,38px)/1 var(--font-display);font-stretch:125%;letter-spacing:-.02em;color:var(--ink-900)}
.stage-name span{display:block;margin-bottom:10px;font:500 13px/1 var(--font-body);letter-spacing:0;color:var(--ink-500)}
.stage-tabs{display:none}
/* Cada punto es un botón de 24 px de alto y al menos 24 de ancho (WCAG 2.2 · 2.5.8, objetivos táctiles); el punto que se ve se dibuja en ::before */
.stage-dots{display:flex;justify-content:center;gap:0;margin-top:12px;position:relative;z-index:2}
.stage-dots button{display:grid;place-items:center;min-width:24px;height:24px;padding:0;background:none;border-radius:var(--radius-pill)}
.stage-dots button::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--ink-300);transition:width var(--base) var(--ease-out),background-color var(--base) var(--ease)}
.stage-dots button[aria-current="true"]::before{width:22px;background:var(--ink-900)}
.row{position:relative;z-index:2;display:flex;justify-content:center;gap:20px;margin-top:calc(-1 * var(--stage-overlap));padding:0 var(--gutter)}
.pcard{position:relative;flex:0 1 232px;min-width:0}
.pcard .plate{position:relative;aspect-ratio:232/250;border-radius:var(--radius-lg);background:var(--plate);display:grid;place-items:center;padding:30px 36px 44px;transition:background-color var(--base) var(--ease),transform var(--slow) var(--ease-out),box-shadow var(--slow) var(--ease-out)}
.pcard .af{max-height:100%;transition:transform var(--slow) var(--ease)}
/* Toda la tarjeta es enlace al cuadro: .pcard-link cubre la placa (la etiqueta .tab es el enlace accesible con el mismo destino,
   por eso .pcard-link va oculto a lectores y sin tabulación); el botón de carrito y la etiqueta quedan por encima. */
.pcard .pcard-link{position:absolute;inset:0;border-radius:inherit;z-index:1}
.pcard .add,.pcard .tab{z-index:2}
.pcard.on .plate,.pcard:hover .plate{background:#fbfbfb;transform:translateY(-22px);box-shadow:0 30px 60px -28px rgba(15,15,15,.35)}
.pcard:hover .af{transform:scale(1.03)}
.pcard .tab{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);background:var(--ink-0);border-radius:var(--radius-sm);padding:9px 16px;font:700 13px/1.1 var(--font-display);font-stretch:112%;color:var(--ink-900);white-space:nowrap;box-shadow:0 6px 16px -8px rgba(15,15,15,.25);opacity:0;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease-out)}
.pcard.on .tab,.pcard:hover .tab,.pcard:focus-within .tab{opacity:1}
.pcard .add{position:absolute;left:50%;top:-24px;width:48px;height:48px;border-radius:50%;background:var(--yellow-500);display:grid;place-items:center;transform:translate(-50%,10px) scale(.8);opacity:0;transition:opacity var(--base) var(--ease),transform var(--slow) var(--ease-out),background-color var(--fast) var(--ease)}
.pcard.on .add,.pcard:hover .add,.pcard:focus-within .add{opacity:1;transform:translate(-50%,-22px) scale(1)}
.pcard .add:hover{background:var(--yellow-400)}
/* Oculto por decisión de diseño: en el escenario no se muestra el botón de agregar al carrito
   (display:none también lo saca del orden de tabulación). Para recuperarlo basta con borrar esta regla. */
.pcard .add{display:none}
.stage-foot{display:flex;justify-content:center;margin-top:28px}
.stage-note{text-align:center;font-size:13px;color:var(--ink-500);margin-top:12px}

/* Marco (ArtFrame) */
.af,.cf{
  --tex-t:url(../img/frames/black-top.png);--tex-b:url(../img/frames/black-bottom.png);
  --tex-l:url(../img/frames/black-left.png);--tex-r:url(../img/frames/black-right.png);--tone:#2a2a2a
}
.af.white,.cf.white{--tex-t:url(../img/frames/white-top.png);--tex-b:url(../img/frames/white-bottom.png);--tex-l:url(../img/frames/white-left.png);--tex-r:url(../img/frames/white-right.png);--tone:#f7f6f3}
.af.oak,.cf.oak{--tex-t:url(../img/frames/oak-top.png);--tex-b:url(../img/frames/oak-bottom.png);--tex-l:url(../img/frames/oak-left.png);--tex-r:url(../img/frames/oak-right.png);--tone:#d4b087}
.af.cream,.cf.cream{--tex-t:url(../img/frames/cream-top.png);--tex-b:url(../img/frames/cream-bottom.png);--tex-l:url(../img/frames/cream-left.png);--tex-r:url(../img/frames/cream-right.png);--tone:#c4b199}   /* Roble Crema (todas las medidas menos 20×25 y 25×20) */
.af.walnut,.cf.walnut{--tex-t:url(../img/frames/walnut-top.png);--tex-b:url(../img/frames/walnut-bottom.png);--tex-l:url(../img/frames/walnut-left.png);--tex-r:url(../img/frames/walnut-right.png);--tone:#663627}   /* Nogal Rojizo (solo 20×25 y 25×20) */
/* Brazos del marco: 4 piezas recortadas en diagonal (inglete a 45°) con la textura real de la moldura.
   Cada brazo cubre el cuadro completo y clip-path deja ver solo su franja + el corte a inglete en sus dos puntas;
   por eso el inglete es exacto sea cual sea el tamaño o la proporción del cuadro. */
.arm{position:absolute;inset:0;pointer-events:none;background-color:var(--tone);background-repeat:no-repeat}
.arm.t{background-image:var(--tex-t);background-size:auto var(--fw,10px);background-position:left top;background-repeat:repeat-x;clip-path:polygon(0 0,100% 0,calc(100% - var(--fw,10px)) var(--fw,10px),var(--fw,10px) var(--fw,10px))}
.arm.b{background-image:var(--tex-b);background-size:auto var(--fw,10px);background-position:left bottom;background-repeat:repeat-x;clip-path:polygon(var(--fw,10px) calc(100% - var(--fw,10px)),calc(100% - var(--fw,10px)) calc(100% - var(--fw,10px)),100% 100%,0 100%)}
.arm.l{background-image:var(--tex-l);background-size:var(--fw,10px) auto;background-position:left top;background-repeat:repeat-y;clip-path:polygon(0 0,var(--fw,10px) var(--fw,10px),var(--fw,10px) calc(100% - var(--fw,10px)),0 100%)}
.arm.r{background-image:var(--tex-r);background-size:var(--fw,10px) auto;background-position:right top;background-repeat:repeat-y;clip-path:polygon(100% 0,100% 100%,calc(100% - var(--fw,10px)) calc(100% - var(--fw,10px)),calc(100% - var(--fw,10px)) var(--fw,10px))}
.af{position:relative;padding:var(--fw,10px);border-radius:0;box-shadow:var(--shadow-frame)}
.af .art{overflow:hidden;background:var(--paper-deep);box-shadow:inset 0 0 0 1px rgba(15,15,15,.08)}
.af .art img,.af .art .field{width:100%;height:100%;object-fit:cover}
.af::after{content:"";position:absolute;inset:var(--fw,10px);background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 35%);pointer-events:none}
.af.mat .art{position:relative;padding:var(--mat-y,10%) var(--mat-x,10%);background:var(--ink-0)}
/* El arte se escala para entrar entero en la ventana del paspartú (nunca se corta): la ventana ya tiene su proporción (Hang.matWindow). */
.af.mat .art>img{object-fit:contain}
.af.mat.cover .art>img{object-fit:cover}   /* arte personalizado: el cliente eligió el encuadre */
/* Sombra de la ventana del paspartú: cae sobre el arte (un inset en la <img> queda tapado por la imagen). El margen en % es del ancho en los 4 lados, igual que el padding, así que la capa coincide con la ventana. */
.af.mat .art::after{content:"";position:absolute;inset:0;margin:var(--mat-y,10%) var(--mat-x,10%);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(15,15,15,.05),inset 0 calc(var(--fw,10px) * .2) calc(var(--fw,10px) * .7) rgba(15,15,15,.17)}

/* Lo más nuevo */
.sec{padding:clamp(80px,10vw,128px) 0 0}
.h2{font-weight:800;font-stretch:125%;font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:-.03em}
.h2 .soft{color:var(--ink-500)}
.lead{margin-top:16px;max-width:52ch;font-size:17px;color:var(--ink-600)}
.newest{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:24px;align-items:start}
.newest .intro{grid-column:1;grid-row:1;padding-top:8px}
.ncard{position:relative;border-radius:var(--radius-lg);background:var(--plate);overflow:visible;transition:opacity .7s ease-in-out}
.ncard.fade{opacity:0}
.ncard .pad{height:100%;display:grid;place-items:center;padding:40px}
.ncard .pad>a{display:contents}
.ncard .pad .af{transition:transform var(--slow) var(--ease)}
.ncard:hover .pad .af{transform:scale(1.03)}
.ncard .lbl{position:absolute;right:22px;bottom:-18px;background:var(--ink-0);border-radius:var(--radius-sm);padding:11px 16px;box-shadow:0 8px 20px -10px rgba(15,15,15,.3);font:700 14px/1.1 var(--font-display);font-stretch:112%;color:var(--ink-900);display:flex;gap:10px;align-items:baseline}
.ncard .lbl small{font:500 13px/1 var(--font-body);color:var(--ink-500)}
.ncard .mini{position:absolute;width:var(--target-touch);height:var(--target-touch);border-radius:50%;background:var(--ink-0);display:grid;place-items:center;box-shadow:var(--shadow-md);transition:background-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.ncard .mini:hover{background:var(--yellow-500)}
.ncard .mini:active{transform:scale(.92)}
.ncard .new{position:absolute;top:18px;right:18px;background:var(--magenta-badge,var(--magenta));color:var(--ink-0);font:600 12px/1 var(--font-body);padding:6px 10px;border-radius:var(--radius-pill)}
/* .n1 crece hacia arriba sin mover a las demás: su alto real es ~ancho×.98, pero el margin-top negativo
   (en % del ancho, igual que aspect-ratio) resta justo lo que excede del alto anterior (ancho/1.45). Así la
   fila 2 del grid se sigue midiendo con el alto de antes: el borde inferior de .n1, .n2, .n3 y «Ver los…»
   quedan donde estaban, y .n1 solo se extiende hacia arriba, en el espacio libre bajo el texto. */
.n1{grid-column:1;grid-row:2;aspect-ratio:1/.98;margin-top:calc(100% / 1.45 - 98%)}
.n1 .mini{left:18px;top:18px}
.n2{grid-column:2;grid-row:1/3;aspect-ratio:.78/1}
.n2 .mini{left:18px;top:18px}
.n3{grid-column:3;grid-row:1;aspect-ratio:1/1.02}
.n3 .mini{right:18px;bottom:48px}
.n4{grid-column:3;grid-row:2;align-self:end}
.see-all{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--ink-900);color:var(--ink-0);font:700 18px/1.2 var(--font-display);font-stretch:115%}
.see-all:hover .ico{transform:translate(3px,-3px)}
.see-all .ico{transition:transform var(--base) var(--ease-out);width:28px;height:28px;color:var(--yellow-500)}

/* Restauración */
.restore{margin-top:clamp(80px,10vw,128px);background:var(--ink-900);color:var(--ink-100)}
.restore .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(72px,8vw,112px)}
.restore .h2{color:var(--ink-0)}
.restore .lead{color:var(--ink-300)}
.badge-y{display:inline-flex;align-items:center;gap:6px;background:var(--yellow-500);color:var(--ink-900);font:600 12px/1 var(--font-body);padding:7px 12px;border-radius:var(--radius-pill);margin-bottom:22px}
.steps{list-style:none;margin:32px 0 36px;padding:0;display:grid;gap:18px;counter-reset:s}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink-600);display:grid;place-items:center;font:700 14px/1 var(--font-display);color:var(--ink-0)}
.steps b{display:block;color:var(--ink-0);font-weight:600;margin-bottom:2px}
.steps span{font-size:15px;color:var(--ink-300)}
.compare{position:relative;justify-self:center;width:min(100%,420px)}
.compare .af{--fw:14px;box-shadow:0 40px 70px -30px rgba(0,0,0,.8)}
.compare .cbox{position:relative}.compare .art{position:relative;aspect-ratio:760/1077}
.compare .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut,50%))}
.compare .line{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--yellow-500);transform:translateX(-1px);pointer-events:none}
.compare .knob{position:absolute;top:50%;left:var(--cut,50%);width:44px;height:44px;border-radius:50%;background:var(--yellow-500);color:var(--ink-900);display:grid;grid-auto-flow:column;place-content:center;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare .tags{display:flex;justify-content:space-between;margin-top:16px;font-size:13px;color:var(--ink-400)}
.compare .tags b{color:var(--ink-0);font-weight:600}

/* Personalizado */
.custom .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,88px);align-items:center}
.room{margin:0}
.wall{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:570/672;display:grid;place-items:center;background:#d9d3d4 url(../img/rooms/sala-sofa.webp) 73% 11%/214% auto no-repeat}
.cf{position:relative;padding:var(--fw,10px);border-radius:0;box-shadow:0 30px 50px -22px rgba(15,15,15,.55),0 6px 12px -6px rgba(15,15,15,.3);transition:width var(--slow) var(--ease-out),height var(--slow) var(--ease-out),padding var(--slow) var(--ease-out)}
.cf .mat{width:100%;height:100%;background:#fbfbf9;box-shadow:inset 0 1px 3px rgba(15,15,15,.18);transition:padding var(--slow) var(--ease-out)}
.cf .pic{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:0 0 0 1px rgba(15,15,15,.12)}
.cf .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--base) var(--ease)}
.cf .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 38%);pointer-events:none}
/* Sombra de la ventana del paspartú (solo con paspartú: los JS ponen .has-mat en .mat) */
.cf .pic::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--slow) var(--ease-out);box-shadow:inset 0 0 0 1px rgba(15,15,15,.05),inset 0 calc(var(--fw,10px) * .2) calc(var(--fw,10px) * .7) rgba(15,15,15,.17)}
.cf .mat.has-mat .pic::before{opacity:1}
.cf .mat.has-mat.fit .pic img{object-fit:contain}   /* la ficha: con paspartú el arte entra entero en la ventana */
.room figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px;color:var(--ink-500)}
.room figcaption b{color:var(--ink-900);font-weight:600}
.room figcaption > span:last-child{white-space:nowrap}
.cfg{margin-top:34px;display:grid;gap:28px}
.cfg legend{font:600 14px/1 var(--font-body);color:var(--ink-900);margin-bottom:12px;padding:0}
.orient{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center}
.orient + .orient{margin-top:10px}
.orient > span{font-size:13px;color:var(--ink-500);display:flex;align-items:center;gap:8px}
.orient > span i{display:inline-block;border:1.5px solid var(--ink-500);border-radius:2px}
.cfg fieldset{border:0;margin:0;padding:0;min-width:0}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt label{display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:var(--radius-pill);border:1.5px solid var(--ink-200);background:var(--ink-0);font:500 14px/1 var(--font-body);color:var(--ink-800);cursor:pointer;transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.opt.size label{padding:0 20px}
.opt label:hover{border-color:var(--ink-400)}
.opt input:checked + label{border-color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-900)}
.opt input:focus-visible + label{box-shadow:0 0 0 3px var(--yellow-500)}
.sw{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(15,15,15,.15)}
.sw.black{background:#2a2a2a}.sw.white{background:#f7f6f3}.sw.oak{background:#d4b087}.sw.cream{background:#c4b199}.sw.walnut{background:#663627}
.sw-mat{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:var(--radius);background:var(--ink-0);border:1.5px solid var(--ink-200)}
.sw-mat b{display:block;font-weight:600;color:var(--ink-900);font-size:14px}
.sw-mat span{font-size:13px;color:var(--ink-500)}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:var(--radius-pill);background:var(--ink-200);transition:background-color var(--base) var(--ease)}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink-0);box-shadow:0 1px 2px rgba(15,15,15,.2);transition:transform var(--base) var(--ease-out)}
.switch input:checked + i{background:var(--ink-900)}
.switch input:checked + i::after{transform:translateX(20px)}
.switch input:focus-visible + i{box-shadow:0 0 0 3px var(--yellow-500)}
.total{display:grid;gap:18px;padding-top:24px;border-top:1px solid var(--ink-200)}
.total .actions{display:flex;gap:10px;flex-wrap:wrap}
.tip{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 18px;border-radius:var(--radius);background:var(--ink-100);color:var(--ink-800);font-size:14px;line-height:1.45}
.tip .ico{flex:none;margin-top:1px;color:var(--ink-900)}
.tip b{font-weight:600;color:var(--ink-900)}


/* Reseñas */
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.score{display:flex;align-items:center;gap:16px}
.score strong{font:800 64px/1 var(--font-display);font-stretch:120%;color:var(--ink-900);letter-spacing:-.03em}
.score small{display:block;font-size:13px;color:var(--ink-500);margin-top:6px}
.rev-nav{display:flex;gap:8px}
.rev-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink-900);display:grid;place-items:center;transition:background-color var(--fast) var(--ease)}
.rev-nav button:hover{background:var(--ink-0)}
.reviews{--edge:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,26vw,320px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px var(--edge) 12px;scrollbar-width:none;scroll-padding:0 var(--edge)}
.reviews::-webkit-scrollbar{display:none}
.rev{position:relative;scroll-snap-align:start;background:var(--ink-0);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--base) var(--ease),transform var(--base) var(--ease-out)}
/* Toda la tarjeta es enlace a la reseña original en Google: .rev-link la cubre (el texto accesible va dentro); el sello queda debajo */
.rev-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.rev-link:focus-visible{outline-offset:-3px}
.rev.has-link:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
/* Sello y botón: franja sobre la foto de la reseña (esquinas superiores); sin foto, fila encima del texto */
.rev-over{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;font-size:12px;line-height:1.2}
.rev.no-ph .rev-over{position:static;padding:16px 22px 0}
.g-seal{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 8px;border-radius:var(--radius-pill);background:var(--ink-0);box-shadow:0 2px 8px rgba(15,15,15,.18);font-weight:600;color:var(--ink-800)}
.rev.no-ph .g-seal{background:var(--ink-100);box-shadow:none}
.g-ico{width:18px;height:18px;flex:none}
.g-seal{white-space:nowrap}
.rev-go{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink-0);box-shadow:0 2px 8px rgba(15,15,15,.18);display:grid;place-items:center;color:var(--ink-900);transition:background-color var(--fast) var(--ease)}
.rev.no-ph .rev-go{background:var(--ink-100);box-shadow:none}
.rev.has-link:hover .rev-go{background:var(--yellow-500)}
.rev .ph{aspect-ratio:4/3.3;overflow:hidden;background:var(--plate)}
.rev .ph img{width:100%;height:100%;object-fit:cover}
.rev .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.rev q{quotes:"“" "”";font-size:15px;line-height:1.5;color:var(--ink-800)}
.rev .who{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-500)}.rev .top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.rev .who b{color:var(--ink-900);font-weight:600;display:block;font-size:14px}
.av{width:36px;height:36px;border-radius:50%;background:var(--ink-900);color:var(--yellow-500);display:grid;place-items:center;font:700 13px/1 var(--font-display);overflow:hidden;flex:none}
.av img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.verified{display:inline-flex;align-items:center;gap:4px;color:var(--text-success);font-size:12px;font-weight:600}

/* Políticas */
.policies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px;border-top:1.5px solid var(--ink-900)}
.pol{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:10px}
.pol + .pol{padding-left:28px;border-left:1px solid var(--ink-200)}
.pol .ico{width:28px;height:28px;color:var(--ink-900)}
.pol h3{font:700 19px/1.2 var(--font-display);font-stretch:112%}
.pol p{font-size:15px;color:var(--ink-600)}
.pol a{font-size:14px;font-weight:600;color:var(--ink-900);text-decoration:underline;text-underline-offset:3px;margin-top:4px;display:inline-flex;align-items:center;min-height:var(--target-min)}
.pay{margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 26px;border-radius:var(--radius-lg);background:var(--ink-0)}
.pay-logos{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm{height:38px;min-width:58px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--ink-200);display:grid;place-items:center;font:800 13px/1 var(--font-display);font-stretch:112%;color:var(--ink-900);letter-spacing:-.01em}
.pm svg{height:22px;width:auto;fill:currentColor}
.pm.visa{color:#1a1f71}.pm.mc svg{height:22px;fill:#eb001b}.pm.amex{color:#2e77bc}.pm.mp{color:#00a3e0}
.pm.nequi{color:#200020}.pm.davi{color:#d0121c}.pm.pse{color:#004a99}
.seal{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-600)}
.seal .lockb{width:42px;height:42px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.seal b{display:block;color:var(--ink-900);font-size:14px}

/* FAQ */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-side p{margin-top:16px;color:var(--ink-600);max-width:34ch}
.faq-side .btn{margin-top:26px}
.qa{border-bottom:1px solid var(--ink-200)}
.qa:first-child{border-top:1px solid var(--ink-200)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font:700 18px/1.3 var(--font-display);font-stretch:108%;color:var(--ink-900)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{transition:transform var(--base) var(--ease-out);flex:none}
.qa[open] summary .ico{transform:rotate(45deg)}
.qa p{padding:0 48px 24px 0;color:var(--ink-600);max-width:62ch}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size var(--base) var(--ease-out),content-visibility var(--base) allow-discrete}
.qa[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* CTA final */
.cta{position:relative;overflow:hidden;text-align:center;padding:clamp(96px,12vw,160px) 0}
.cta .logo-sm{height:32px;width:auto;margin:0 auto 26px}
.cta .h2{font-size:clamp(38px,5.6vw,72px);max-width:13ch;margin:0 auto}
.cta p{max-width:42ch;margin:20px auto 0;color:var(--ink-600)}
.cta p strong{font-weight:600;color:var(--ink-900)}
.cta .badge-y{margin-bottom:18px}
.cta .fine{max-width:64ch;margin:14px auto 0;font-size:12px;line-height:1.5;color:var(--ink-500);text-wrap:balance}   /* balance: líneas parejas, sin renglón huérfano */
.cta .fine a{color:var(--ink-900);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}   /* «haz clic aquí» nunca se parte */
.follow{margin-top:34px}
.follow > span{display:block;font:600 15px/1 var(--font-body);color:var(--ink-900);margin-bottom:14px}
.follow--left .follow-btns{justify-content:flex-start}
.follow-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.follow-btns .btn svg{width:18px;height:18px;fill:var(--ink-900)}
.cta .peek{position:absolute;width:clamp(150px,16vw,230px);z-index:0}
/* Flote sutil en loop, como si el cuadro colgara suelto de la pared. Cada lado con su propia
   duración/retraso para que no se muevan en espejo perfecto. */
.cta .peek.l{left:-60px;top:22%;animation:peek-float-l 6.5s ease-in-out infinite}
.cta .peek.r{right:-50px;bottom:12%;animation:peek-float-r 7.5s ease-in-out infinite 1.1s}
@keyframes peek-float-l{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-14px)}}
@keyframes peek-float-r{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-14px)}}
.cta .wrap{position:relative;z-index:1}
.socials{display:flex;justify-content:center;gap:10px;margin-top:18px}
.socials a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink-900);display:grid;place-items:center;transition:background-color var(--fast) var(--ease)}
.socials a:hover{background:var(--ink-0)}
.socials svg{width:18px;height:18px;fill:currentColor}

/* Footer */
.ftr{background:var(--ink-900);color:var(--ink-300);font-size:14px}
.ftr .top{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px;padding:72px 0 48px}
.ftr .logo img{height:30px}
.ftr p{margin-top:16px;max-width:30ch}
.ftr h3{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);margin-bottom:18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ftr a:hover{color:var(--yellow-500)}
.ftr li a,.ftr li span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-100)}
.ftr li a{min-height:var(--target-min)}
@media (pointer:coarse){.ftr ul{gap:0}.ftr li a{min-height:var(--target-touch)}}
.ftr .mid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--ink-700)}
.ftr .mid .pay-logos .pm{background:var(--ink-0);border-color:var(--ink-0)}
.ftr .socials{margin:0}
.ftr .socials a{border-color:var(--ink-600);color:var(--ink-0)}
.ftr .socials a:hover{background:var(--ink-700)}
.ftr li.hours{display:flex;align-items:flex-start;gap:8px;color:var(--ink-100)}.ftr li.hours .ico{margin-top:2px}.ftr li.hours span{display:block;line-height:1.5}
.ftr .bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 92px;border-top:1px solid var(--ink-700);font-size:13px;color:var(--ink-400)}
.ftr .bot nav{display:flex;gap:20px;flex-wrap:wrap}
.ftr .bot nav a{display:inline-flex;align-items:center;min-height:var(--target-min)}
@media (pointer:coarse){.ftr .bot nav a{min-height:var(--target-touch)}}

/* Flotantes */
.wa{position:fixed;right:20px;bottom:20px;z-index:var(--z-float);display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:var(--radius-pill);background:var(--ink-900);color:var(--ink-0);font:600 14px/1 var(--font-body);box-shadow:var(--shadow-lg);transition:transform var(--base) var(--ease-out),background-color var(--fast) var(--ease)}
.wa:hover{background:var(--ink-700);transform:translateY(-2px)}
/* Sello de confianza (esquina inferior izquierda, frente al WhatsApp de la derecha): pago seguro con Wompi. Ojo: `.seal` ya es el «Sitio seguro SSL» de la portada. */
.trust-seal{position:fixed;left:20px;bottom:20px;z-index:var(--z-float);display:flex;align-items:center;gap:9px;padding:8px 16px 8px 11px;border-radius:var(--radius);background:var(--ink-0);color:var(--ink-900);border:1px solid var(--ink-200);box-shadow:var(--shadow-lg);transition:transform var(--base) var(--ease-out),border-color var(--base) var(--ease)}
.trust-seal:hover{transform:translateY(-2px);border-color:var(--ink-300)}
.trust-seal .ico{width:22px;height:22px;flex:none;color:var(--ok,#0f8a3c)}
.trust-seal span{display:grid;gap:4px}
.trust-seal small{font:500 12px/1 var(--font-body);color:var(--ink-600)}
.trust-seal img{display:block;height:14px;width:auto}
.wa svg{width:22px;height:22px;fill:#25d366}
.toast{position:fixed;left:50%;bottom:32px;z-index:var(--z-toast);display:flex;align-items:center;gap:10px;background:var(--ink-900);color:var(--ink-0);padding:14px 20px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease),transform var(--slow) var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ico{color:var(--yellow-500)}

/* Carrito */
.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(15,15,15,.72);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:min(420px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--slow) var(--ease-out);visibility:hidden}
.cart-open .scrim{opacity:1;pointer-events:auto}
.cart-open .drawer{transform:none;visibility:visible}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--ink-200)}
.drawer h2{font:700 22px/1 var(--font-display);font-stretch:115%}
.ship-bar{padding:14px 24px;background:var(--ink-0);font-size:13px;color:var(--ink-600);display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--ink-200)}
.ship-bar b{color:var(--ink-900)}
.lines{flex:1;overflow:auto;padding:8px 24px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ink-100)}
.line .af{--fw:4px;box-shadow:0 8px 14px -8px rgba(15,15,15,.4)}
.line .art{aspect-ratio:4/5}
.line b{display:block;font:700 15px/1.2 var(--font-display);color:var(--ink-900)}
.line small{color:var(--ink-500);font-size:13px}
.qty{display:flex;align-items:center;gap:4px;margin-top:8px}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--ink-200);display:grid;place-items:center}
.qty button:hover{background:var(--ink-0)}
.qty span{min-width:22px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.line .lp{font:700 15px/1 var(--font-display);color:var(--ink-900);align-self:start;padding-top:4px}
.empty{padding:48px 0;text-align:center;color:var(--ink-500)}
.empty .ico{width:40px;height:40px;margin:0 auto 12px;color:var(--ink-300)}
.drawer footer{padding:20px 24px 24px;border-top:1px solid var(--ink-200);background:var(--ink-0);display:grid;gap:12px}
.sum{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-600)}
.sum.t{font:800 20px/1 var(--font-display);color:var(--ink-900)}
.drawer .note{font-size:12px;color:var(--ink-500);text-align:right;margin-top:-6px}
.drawer .safe{display:flex;justify-content:center;align-items:center;gap:6px;font-size:12px;color:var(--ink-500)}

/* Movimiento: carga inicial y aparición al hacer scroll */
@media (prefers-reduced-motion:no-preference){
  .in{animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms)}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .row.swap .pcard{animation:rise .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms + 120ms)}
  @supports (animation-timeline:view()){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes reveal{from{transform:translateY(56px)}to{transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
}

/* Responsive */
@media (max-width:1080px){
  .nav{gap:20px}
  .hdr-brand{gap:24px}
  .hdr-search{max-width:280px}
  .hero-side{grid-template-columns:1fr 140px}
  .policies{grid-template-columns:1fr 1fr}
  .pol:nth-child(3){padding-left:0;border-left:0}
  .pol:nth-child(n+3){border-top:1px solid var(--ink-200)}
}
@media (max-width:900px){
  .topbar .hide-m{display:none}
  .nav{display:none}
  .menu-btn{display:grid}
  .hdr-row{height:64px;gap:8px}
  .hdr-brand{gap:8px}
  /* La lupa pasa al lado del carrito (margin-left:auto la empuja a la derecha) y lleva un círculo gris claro: icono ink-900 sobre ink-200 = 13:1 (mínimo 3:1 para iconos). */
  .hdr-search{flex:none;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;background:var(--ink-200);margin-left:auto}
  .hdr-search:hover{background:var(--ink-300)}
  .hdr-search .ico{width:20px;height:20px;color:var(--ink-900)}
  .hdr-search span{display:none}
  .hdr-actions{margin-left:0}
  .cart-btn{margin-left:0;width:44px;height:44px}   /* mismo tamaño que la lupa (44 px) */
  .hero .wrap,.restore .wrap,.custom .wrap,.faq .wrap{grid-template-columns:1fr}
  .hero-side{padding-top:0}
  .stage-arrow{font-size:18px;gap:10px}.stage-arrow .ico{width:24px;height:24px}
  .stage-arrow.prev{margin-right:14px}.stage-arrow.next{margin-left:14px}
  .stage{--stage-overlap:146px;--row-pad:84px}
  .row{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-top:var(--row-pad);margin-top:calc(-1 * var(--stage-overlap));padding-bottom:28px;scrollbar-width:none}
  .row::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 62%;scroll-snap-align:center}
  .newest{grid-template-columns:1fr 1fr}
  .newest .intro{grid-column:1/-1}
  .n1{grid-column:1;grid-row:auto;margin-top:0;aspect-ratio:1.45/1}.n2{grid-column:2;grid-row:auto}.n3{grid-column:1;grid-row:auto}.n4{grid-column:2;grid-row:auto}
  .n2{aspect-ratio:auto;height:100%}
  .compare{order:-1}
  .ftr .top{grid-template-columns:1fr 1fr}
  .ftr .top > div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .topbar .wrap{justify-content:center}
  .topbar .contact{display:none}
  .hdr-actions .icon-btn.hide-s{display:none}
  .h1{font-stretch:112%}
  .hero-side{grid-template-columns:1fr 112px;gap:16px}
  .stage-top{grid-template-columns:1fr}
  .stage-arrow{display:none}
  .stage-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gutter) 28px;justify-content:safe center}
  .stage-tabs::-webkit-scrollbar{display:none}
  .stage-tabs{gap:6px}
  .stage-tabs button{flex:none;height:44px;padding:0 16px;border-radius:var(--radius-pill);border:1.5px solid var(--ink-200);background:var(--ink-0);font:600 14px/1 var(--font-body);color:var(--ink-700);transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
  .stage-tabs button[aria-selected="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--ink-0)}
  .stage-dots{display:none}
  .stage-name{margin-top:24px}
  .stage-hero{touch-action:pan-y}
  .stage-hero{margin:0 auto;width:62%}
  .row{overflow:visible;scroll-snap-type:none;justify-content:center;gap:12px}
  .pcard{flex:1 1 0}
  .pcard:nth-child(n+3){display:none}
  .pcard .plate{padding:22px 20px 36px;border-radius:var(--radius-lg)}
  .pcard .tab{font-size:12px;padding:8px 12px;max-width:92%;white-space:normal;text-align:center}
  .pcard .add{width:44px;height:44px}
  .newest{grid-template-columns:1fr;gap:36px}
  .n1,.n2,.n3,.n4{grid-column:1}
  .n1,.n2,.n3{aspect-ratio:.9/1;height:auto}   /* las 3 ncard del mismo tamaño en móvil */
  .policies{grid-template-columns:1fr}
  .pol,.pol + .pol{padding:24px 0 8px;border-left:0}
  .pol + .pol{border-top:1px solid var(--ink-200)}
  .pay{padding:20px}
  .qa p{padding-right:0}
  .cta .peek{width:120px;opacity:.9}
  .cta .fine{max-width:32ch}   /* que el texto no choque con el cuadro de Fight Club */
  .cta .peek.l{left:-56px;top:6%}.cta .peek.r{right:-50px;bottom:4%}
  .ftr .top{grid-template-columns:1fr}
  .wa span{display:none}.wa{padding:0;width:52px;justify-content:center}
  .trust-seal{left:12px;bottom:12px;padding:7px 12px 7px 9px}
  .total .btn{width:100%}
  .orient{grid-template-columns:1fr}
  .hero-cta{flex-wrap:nowrap}.hero-cta .btn{flex:1;height:52px;padding:0 14px;font-size:15px}
}

/* ───── Tablet vertical (641–900 px) ─────
   Antes este rango heredaba el diseño de móvil a 2× (una sola columna, tarjetas gigantes, escenario con la fila
   desplazable y tarjetas al 62 %). Ahora vuelve al diseño de escritorio a escala: dos columnas donde caben y la fila
   de colecciones completa. Va al final para ganar a las reglas de max-width:900px sin tocar móvil ni escritorio. */
@media (min-width:641px) and (max-width:900px){
  .hero .wrap{gap:28px}
  .hero-side{grid-template-columns:minmax(0,1fr) 150px;padding-top:4px;align-items:center}
  /* Escenario: la fila vuelve a ser de 4 tarjetas sin desplazamiento, como en escritorio, y el cuadro grande
     se solapa con ellas en la misma proporción (≈60 % del alto de la tarjeta) */
  .stage{--stage-overlap:clamp(100px,14vw,126px);--row-pad:0px}
  .stage-hero{width:clamp(220px,34vw,290px)}
  .row{overflow:visible;scroll-snap-type:none;justify-content:center;gap:14px;padding-top:0;padding-bottom:0}
  .pcard{flex:1 1 0;max-width:200px}
  .pcard .plate{padding:22px 22px 32px;border-radius:var(--radius-lg)}
  .pcard.on .plate,.pcard:hover .plate{transform:translateY(-16px)}
  /* width:max-content: con left:50% el ancho disponible sería solo la mitad de la tarjeta y el título se partía letra a letra */
  .pcard .tab{font-size:12px;padding:8px 12px;width:max-content;max-width:94%;white-space:normal;text-align:center}
  .stage-name{margin-top:52px}
  /* Recién colgados: título arriba, 3 tarjetas iguales en fila y «Ver los N cuadros» a lo ancho */
  .newest{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .newest .intro{grid-column:1/-1;grid-row:auto;padding-top:0}
  .n1,.n2,.n3{grid-column:auto;grid-row:auto;margin-top:0;aspect-ratio:4/5;height:auto}
  .n1 .mini,.n2 .mini,.n3 .mini{left:14px;top:14px;right:auto;bottom:auto}
  .n4{grid-column:1/-1;grid-row:auto;align-self:auto;margin-top:14px}
  .ncard .pad{padding:28px 24px}
  .ncard .new{top:14px;right:14px}
  .ncard .lbl{right:12px;max-width:calc(100% - 24px);padding:9px 12px;font-size:13px}
  /* Restauración y «Tu arte, tu marco»: dos columnas, como en escritorio */
  .restore .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  .compare{order:0}
  .custom .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .custom .room{position:sticky;top:80px}   /* la vista previa acompaña mientras se baja por las opciones */
  .orient{grid-template-columns:1fr}
}