/* Dial Supply — negro lacado y oro cepillado */
:root{
  --bg:#0d0b09; --bg-2:#14110d; --bg-3:#1d1914; --bg-4:#262019;
  --line:rgba(210,173,102,.16); --line-2:rgba(210,173,102,.34);
  --gold:#d2ad66; --gold-hi:#ecd9ae; --gold-lo:#9c7a3c;
  --text:#efe7d8; --muted:#a99d89; --faint:#9a8f7a;
  --ivory:#ebe3d3; --ivory-2:#e2d8c5; --ink:#1a150f; --ink-muted:#5b5042;
  --danger:#e79a83;
  --f-display:"Bodoni Moda", "Didot", "Bodoni 72", serif;
  --f-ui:"Hanken Grotesk", system-ui, sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --wrap:1240px; --gutter:clamp(16px,4vw,40px);
  --bar-h:96px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{display:block}
[hidden]{display:none!important}
::selection{background:var(--gold);color:var(--ink)}
input,textarea{caret-color:var(--gold)}
html{scrollbar-color:var(--bg-4) var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg-4);border:2px solid var(--bg);border-radius:10px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:3px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ---------- Logo (máscara del logo real) ---------- */
.logo{display:block;aspect-ratio:1400/190;width:clamp(210px,21vw,320px);background:#f4e6c3;filter:drop-shadow(0 0 .5px #f4e6c3) drop-shadow(0 1px 10px rgba(0,0,0,.6));
  -webkit-mask:url(img/logo.png) center/contain no-repeat;mask:url(img/logo.png) center/contain no-repeat}
.logo-foot{width:200px;margin-bottom:18px}
.logo-auth{width:150px;margin:0 auto 22px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:3px;border:1px solid var(--line-2);background:transparent;color:var(--text);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.01em;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn:active{transform:scale(.97)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.grow{flex:1}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){
  .btn.gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
  .btn.ghost:hover,.btn:not(.gold):hover{border-color:var(--gold);color:var(--gold-hi)}
}
.link-btn{background:none;border:0;padding:8px 4px;font-weight:600;font-size:14px;color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:text-decoration-color 200ms ease,color 200ms ease}
@media (hover:hover){.link-btn:hover{color:var(--gold-hi);text-decoration-color:var(--gold)}}

/* ---------- Barra superior ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:40;height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--gutter);
  transition:background-color 300ms ease,border-color 300ms ease;border-bottom:1px solid transparent}
.bar.solid{background:rgba(13,11,9,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.brandmark{justify-self:start;padding:8px 0}
.nav{display:flex;gap:34px}
.nav a{position:relative;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 0;transition:color 200ms ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease-out)}
.nav a[aria-current="page"]{color:var(--gold-hi)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.nav a:hover{color:var(--text)}.nav a:hover::after{transform:scaleX(1)}}
.bar-actions{justify-self:end;display:flex;align-items:center;gap:14px}
.bag{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;transition:transform 160ms var(--ease-out),border-color 200ms ease}
.bag:active{transform:scale(.95)}
.bag svg,.menu-btn svg,.x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bag-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;display:grid;place-items:center;transition:transform 300ms var(--ease-out)}
.bag-count.bump{animation:bump 420ms var(--ease-out)}
@keyframes bump{40%{transform:scale(1.35)}}
.bag-count[data-n="0"]{opacity:0;transform:scale(.6)}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;place-items:center}
.mobile-nav{position:fixed;inset:var(--bar-h) 0 auto;z-index:39;background:rgba(13,11,9,.97);border-bottom:1px solid var(--line);padding:8px var(--gutter) 20px;display:flex;flex-direction:column}
.mobile-nav a{font-family:var(--f-display);font-size:28px;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}

/* ---------- Hero 3D ---------- */
.hero{position:relative;--p:0}
.hero-stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;
  background:radial-gradient(60% 70% at 70% 52%,#2a2015 0%,#17120d 45%,var(--bg) 78%)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 700ms var(--ease-out)}
.ds-3d .hero-canvas{opacity:1}
/* Póster: el Seastar aparece al instante mientras carga el 3D, y se funde cuando el 3D está listo */
.hero-poster{position:absolute;right:max(4vw,24px);top:50%;width:min(36vw,520px);height:auto;transform:translateY(-44%) rotate(-4deg);filter:drop-shadow(0 40px 50px rgba(0,0,0,.7));transition:opacity 600ms ease;pointer-events:none}
.ds-3d .hero-poster{opacity:0}
.hero-fallback{position:absolute;right:6%;top:50%;width:min(42vw,520px);transform:translateY(-50%);border-radius:4px}
.hero-copy{position:absolute;left:var(--gutter);top:calc(50% + var(--bar-h) / 2);width:min(34rem,42vw);transform:translateY(-46%);z-index:2}
.hero-copy-a{opacity:clamp(0,calc(1 - (var(--p) - .22) * 4.5),1);transform:translateY(calc(-46% - var(--p) * 60px))}
.hero-copy-b{opacity:clamp(0,calc((var(--p) - .45) * 4),1);transform:translateY(calc(-46% + (1 - var(--p)) * 50px));pointer-events:none}
.hero.phase-b .hero-copy-b{pointer-events:auto}
.hero.phase-b .hero-copy-a{pointer-events:none}
.hero h1,.hero h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,6vw,5.4rem);line-height:1;letter-spacing:-.025em;margin:0 0 26px;text-wrap:balance;font-optical-sizing:auto}
.hero h1 em,.hero h2 em{font-style:normal;color:var(--gold-hi)}
.lead{font-size:clamp(16px,1.25vw,18px);color:var(--muted);max-width:46ch;margin:0 0 34px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
.door{position:relative;display:flex;flex-direction:column;gap:2px;padding:18px 52px 18px 20px;border:1px solid var(--line-2);border-radius:3px;text-decoration:none;background:rgba(20,17,13,.55);
  transition:transform 160ms var(--ease-out),background-color 250ms ease,border-color 250ms ease}
.door:active{transform:scale(.98)}
.door-name{font-family:var(--f-display);font-size:30px;line-height:1.1}
.door-meta{display:flex;flex-wrap:wrap;gap:0 10px;font-size:13px;color:var(--muted)}
.door-meta span{white-space:nowrap}
.door-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--gold);vertical-align:middle;margin:0 10px 2px 0}
.door-arrow{position:absolute;right:18px;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;stroke:var(--gold);stroke-width:1.4;transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .door:hover{background:rgba(210,173,102,.12);border-color:var(--gold)}
  .door:hover .door-arrow{transform:translateX(5px)}
}
.hero-tag{position:absolute;right:var(--gutter);bottom:28px;z-index:2;display:flex;align-items:baseline;gap:14px;padding:10px 0;text-decoration:none;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line-2);opacity:clamp(0,calc(1 - (var(--p) - .22) * 4.5),1);transition:border-color 200ms ease,color 200ms ease}
.hero-tag b{font-family:var(--f-display);font-weight:500;font-size:22px;color:var(--gold-hi)}
.hero.phase-b .hero-tag{pointer-events:none}
@media (hover:hover){.hero-tag:hover{color:var(--text);border-color:var(--gold)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);opacity:clamp(0,calc(1 - var(--p) * 6),1)}
.scroll-cue span{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Secciones ---------- */
.sec-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 40px;text-wrap:balance}

/* Salas de marca (inicio) */
.rooms{padding:clamp(96px,12vw,160px) 0 clamp(80px,10vw,140px)}
.rooms-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 40px;margin-bottom:40px}
.rooms-head .sec-title{margin:0}
.rooms-head p{margin:0;color:var(--muted);max-width:40ch}
.rooms-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.room{display:block;text-decoration:none;perspective:1400px;--mx:0;--my:0;--gx:50%;--gy:30%}
.room-inner{position:relative;min-height:clamp(540px,46vw,640px);border-radius:4px;overflow:hidden;color:var(--text);
  background:radial-gradient(80% 70% at 75% 25%,rgba(210,173,102,.16),transparent 60%),linear-gradient(165deg,#221c15 0%,#120f0c 70%);
  border:1px solid var(--line-2);box-shadow:0 50px 90px -40px rgba(0,0,0,.95);
  transform:rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 7deg));transition:transform 700ms var(--ease-out),border-color 300ms ease;will-change:transform}
.room.is-tilting .room-inner{transition:transform 120ms linear,border-color 300ms ease;border-color:var(--gold)}
.room-inner::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 400ms ease;
  background:radial-gradient(40% 36% at var(--gx) var(--gy),rgba(236,217,174,.18),transparent 70%)}
.room.is-tilting .room-inner::after{opacity:1}
.room-word{position:absolute;left:clamp(18px,3vw,36px);top:clamp(10px,2vw,24px);font-family:var(--f-display);font-style:italic;font-size:clamp(5rem,10vw,9rem);line-height:1;letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(210,173,102,.28);
  transform:translate3d(calc(var(--mx) * -14px),calc(var(--my) * -8px),0);transition:transform 700ms var(--ease-out)}
.room-photo{position:absolute;right:clamp(10px,3vw,40px);top:clamp(40px,6vw,80px);width:min(54%,340px);height:auto;aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 34px 34px rgba(0,0,0,.7));
  transform:translate3d(calc(var(--mx) * 24px),calc(var(--my) * 16px),0) rotate(calc(-4deg + var(--mx) * 3deg));transition:transform 700ms var(--ease-out)}
.room.is-tilting .room-word,.room.is-tilting .room-photo{transition:transform 120ms linear}
.room-info{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,3vw,40px)}
.room-info h3{font-family:var(--f-display);font-weight:500;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;margin:0 0 10px;letter-spacing:-.02em;color:var(--gold-hi)}
.room-info p{margin:0 0 22px;color:var(--muted);max-width:36ch}
.room-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 34px;margin:0 0 26px;padding-top:18px;border-top:1px solid var(--line)}
.room-facts dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.room-facts dd{margin:0;font-family:var(--f-display);font-size:26px;font-weight:500;color:var(--text)}
.room-cta{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--gold-hi);border-bottom:1px solid var(--gold);padding-bottom:4px}
.room-cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 300ms var(--ease-out)}
@media (hover:hover){.room:hover .room-cta svg{transform:translateX(5px)}}

/* Calculadora */
.calc-sec{background:var(--bg-2);border-block:1px solid var(--line);padding:clamp(80px,10vw,140px) 0}
.calc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:start}
.calc-head{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:end}
.calc-head .sec-title{margin:0}
.calc-head p{margin:0;color:var(--muted);max-width:52ch}
.calc{display:grid;gap:22px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend,.field>label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin:0 0 8px;padding:0}
.opt{font-weight:400;color:var(--faint)}
.seg{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line-2);border-radius:3px;padding:3px;gap:3px}
.seg-3{grid-template-columns:repeat(3,1fr)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:grid;place-items:center;min-height:44px;border-radius:2px;font-weight:600;font-size:15px;color:var(--muted);transition:background-color 200ms ease,color 200ms ease}
.seg input:checked+span{background:var(--gold);color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (hover:hover){.seg label:hover input:not(:checked)+span{color:var(--text)}}
.select{position:relative}
.select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);pointer-events:none}
select,input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input:not([type]),textarea{
  width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--line-2);border-radius:3px;background:var(--bg-3);color:var(--text);transition:border-color 200ms ease,background-color 200ms ease}
select{appearance:none;-webkit-appearance:none;padding-right:44px;text-overflow:ellipsis}
select option{background:var(--bg-3);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--faint)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold);background:var(--bg-4)}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(210,173,102,.25)}
textarea{resize:vertical;min-height:90px}
.stepper{display:inline-grid;grid-template-columns:48px 64px 48px;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;height:50px}
.stepper button{border:0;background:var(--bg-3);font-size:20px;color:var(--gold);transition:background-color 200ms ease}
.stepper button:active{background:var(--bg-4)}
.stepper input{border:0;border-inline:1px solid var(--line-2);border-radius:0;text-align:center;padding:0;min-height:0;height:100%;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc-out{display:block;position:relative;padding:clamp(26px,3vw,40px);border:1px solid var(--line-2);border-radius:4px;background:
  radial-gradient(90% 80% at 85% 0%,rgba(210,173,102,.14),transparent 60%),var(--bg-3)}
.out-label{display:block;font-size:14px;font-weight:600;color:var(--muted)}
.out-big{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(3.6rem,8vw,6rem);line-height:1;letter-spacing:-.03em;color:var(--gold-hi);margin:6px 0 4px}
.out-big.neg{color:var(--danger)}
.out-per{display:block;color:var(--muted);font-size:15px;margin-bottom:26px}
.out-lines{margin:0 0 18px;border-top:1px solid var(--line)}
.out-lines div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.out-lines dt{color:var(--muted)}
.out-lines dd{margin:0;font-weight:600}
.out-note{font-size:13px;color:var(--faint);margin:0 0 22px}

/* Así se pide: carrusel 3D (gira de derecha a izquierda) */
.how{padding:clamp(96px,12vw,160px) 0 clamp(60px,8vw,100px);overflow:clip}
.how-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(24px,4vw,48px)}
.how-head .sec-title{margin:0}
.car-ctrl{display:flex;gap:10px}
.car-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--gold-hi);transition:transform 160ms var(--ease-out),border-color 200ms ease,background-color 200ms ease}
.car-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.car-btn:active{transform:scale(.94)}
@media (hover:hover){.car-btn:hover{border-color:var(--gold);background:rgba(210,173,102,.1)}}
.carousel{--w:min(420px,78vw);--r:calc(var(--w) * 1.32);position:relative;height:clamp(340px,40vw,380px);perspective:1600px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none}
.car-ring{position:absolute;inset:0;transform-style:preserve-3d;--a:0deg;transform:translateZ(calc(var(--r) * -1)) rotateY(var(--a));transition:transform 1000ms var(--ease-io)}
.car-card{position:absolute;left:50%;top:0;width:var(--w);height:clamp(300px,36vw,340px);margin-left:calc(var(--w) / -2);padding:clamp(26px,3vw,36px);border-radius:4px;
  background:linear-gradient(160deg,#241d16,#120f0c);border:1px solid var(--line-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  transform:rotateY(calc(var(--k) * 45deg)) translateZ(var(--r));backface-visibility:hidden;opacity:.18;transition:opacity 700ms ease,border-color 700ms ease}
.car-card.is-near{opacity:.5}
.car-card.is-active{opacity:1;border-color:var(--gold)}
.car-num{position:absolute;right:clamp(22px,3vw,32px);top:clamp(18px,2.5vw,26px);font-family:var(--f-display);font-size:clamp(3rem,6vw,4.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(210,173,102,.55)}
.car-ic{width:44px;height:44px;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:clamp(40px,6vw,70px)}
.car-card h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;margin:0 0 12px;color:var(--gold-hi)}
.car-card p{margin:0;color:var(--muted);max-width:34ch}
.car-dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.car-dots button{width:34px;height:3px;border:0;padding:0;border-radius:2px;background:var(--line-2);transition:background-color 300ms ease}
.car-dots button[aria-selected="true"]{background:var(--gold)}
.car-dots button::before{content:"";display:block;height:24px;margin-top:-10px}

/* Preguntas: escenario 3D con campo de estrellas */
.faq-sec{position:relative;overflow:hidden;padding:clamp(96px,12vw,170px) 0;isolation:isolate;
  background:radial-gradient(60% 70% at 70% 50%,rgba(210,173,102,.10),transparent 65%),radial-gradient(90% 90% at 50% 120%,#1b150f,var(--bg) 60%)}
.faq-stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,80px);align-items:center}
.faq-intro .sec-title{margin-bottom:16px}
.faq-intro p{margin:0;color:var(--muted);max-width:30ch}
.faq-stage{position:relative;perspective:1500px;--mx:0;--my:0}
.faq-orbit{position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(210,173,102,.22);pointer-events:none;
  transform:translate(-50%,-50%) rotateX(74deg) rotateZ(0deg);animation:orbit 38s linear infinite}
.faq-orbit::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 18px 4px rgba(236,217,174,.55)}
.faq-orbit-2{width:112%;border-color:rgba(210,173,102,.12);animation-duration:56s;animation-direction:reverse}
@keyframes orbit{to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(360deg)}}
.faq{position:relative;transform-style:preserve-3d;padding:clamp(14px,2vw,22px);border-radius:8px;
  background:linear-gradient(150deg,rgba(40,32,23,.92),rgba(16,13,10,.94));border:1px solid var(--line-2);
  box-shadow:0 80px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(236,217,174,.04) inset,0 1px 0 rgba(236,217,174,.12) inset;
  transform:rotateX(calc(9deg + var(--my) * -5deg)) rotateY(calc(-12deg + var(--mx) * 8deg));transition:transform 900ms var(--ease-out)}
.faq-stage.is-tilting .faq{transition:transform 160ms linear}
.faq::before{content:"";position:absolute;inset:-1px;border-radius:8px;pointer-events:none;
  background:radial-gradient(60% 40% at calc(50% + var(--mx) * 40%) 0%,rgba(236,217,174,.16),transparent 70%)}
.faq details{position:relative;border:1px solid transparent;border-radius:5px;padding:0 20px;margin:4px 0;background:rgba(13,11,9,.35);
  transform:translateZ(0);transition:transform 500ms var(--ease-out),background-color 300ms ease,border-color 300ms ease,box-shadow 500ms var(--ease-out)}
.faq details[open]{transform:translateZ(54px);background:linear-gradient(150deg,#2a2219,#17130e);border-color:var(--gold);box-shadow:0 40px 60px -30px rgba(0,0,0,.9)}
@media (hover:hover) and (pointer:fine){.faq details:not([open]):hover{transform:translateZ(22px);border-color:var(--line-2);background:rgba(40,32,23,.6)}}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--gold),var(--gold)) center/100% 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1.5px 100% no-repeat;transition:transform 300ms var(--ease-out)}
.faq details[open] summary{color:var(--gold-hi)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 22px;color:var(--muted);max-width:60ch}

/* ---------- Sala (catálogo de una marca) ---------- */
.room-head{padding:calc(var(--bar-h) + clamp(48px,7vw,96px)) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--line);
  background:radial-gradient(50% 120% at 85% 0%,rgba(210,173,102,.12),transparent 70%)}
.room-head-wrap{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 32px}
.room-title{font-family:var(--f-display);font-weight:400;font-style:italic;font-size:clamp(4rem,13vw,10.5rem);line-height:.9;letter-spacing:-.04em;margin:0;grid-column:1/-1}
.room-sub{margin:0;color:var(--muted);font-size:17px;max-width:60ch}
.room-switch{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--gold-hi);border-bottom:1px solid var(--line-2);padding-bottom:4px;white-space:nowrap;transition:border-color 200ms ease}
.room-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 300ms var(--ease-out)}
@media (hover:hover){.room-switch:hover{border-color:var(--gold)}.room-switch:hover svg{transform:translateX(4px)}}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:26px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--line-2);background:transparent;font-size:14px;font-weight:500;color:var(--muted);transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media (hover:hover){.chip:hover:not([aria-pressed="true"]){color:var(--text);border-color:var(--gold)}}
.toolbar-r{display:flex;align-items:center;gap:16px}
.count-line{font-size:14px;color:var(--faint);white-space:nowrap}
.select-sm select{min-height:42px;font-size:14px;width:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.6vw,22px);padding-bottom:clamp(80px,10vw,140px)}
.empty{grid-column:1/-1;color:var(--muted);padding:60px 0;text-align:center}

/* Tarjeta de reloj */
.card{display:block;text-decoration:none;perspective:900px;--mx:0;--my:0;--gx:50%;--gy:20%;
  animation:card-in 560ms var(--ease-out) both;animation-delay:calc(min(var(--i,0),12) * 40ms)}
@keyframes card-in{from{opacity:0;transform:translateY(14px)}}
.card-in{height:100%;display:flex;flex-direction:column;border-radius:4px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;
  transform:rotateX(calc(var(--my) * -7deg)) rotateY(calc(var(--mx) * 9deg));transition:transform 600ms var(--ease-out),border-color 300ms ease}
.card.is-tilting .card-in{transition:transform 100ms linear,border-color 300ms ease;border-color:var(--line-2)}
.plate{position:relative;aspect-ratio:1;background:var(--ivory);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;transition:transform 600ms var(--ease-out)}
.plate svg{width:100%;height:100%;padding:9%}
.card.is-tilting .plate img,.card.is-tilting .plate svg{transform:translate3d(calc(var(--mx) * 8px),calc(var(--my) * 6px),0) scale(1.04)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 300ms ease;
  background:radial-gradient(50% 45% at var(--gx) var(--gy),rgba(255,255,255,.6),transparent 70%);mix-blend-mode:soft-light}
.card.is-tilting .plate::after{opacity:1}
.tag{position:absolute;left:10px;top:10px;z-index:1;padding:4px 9px;border-radius:12px;font-size:11px;font-weight:600;letter-spacing:.02em;background:rgba(26,21,15,.88);color:var(--gold-hi)}
.tag.order{background:rgba(26,21,15,.08);color:var(--ink-muted)}
.illus{position:absolute;right:10px;bottom:8px;font-size:12px;font-weight:600;color:var(--ink-muted)}
.card-bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:2px;flex:1}
.card-name{font-weight:600;font-size:16px;line-height:1.3;margin:0}
.card-type{font-size:13px;color:var(--faint);margin:0 0 12px}
.card-price{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.card-price span{font-size:12px;color:var(--muted)}
.card-price b{font-family:var(--f-display);font-weight:500;font-size:26px;line-height:1;color:var(--gold-hi)}

/* ---------- Ficha ---------- */
.pdp{padding-top:calc(var(--bar-h) + 28px);padding-bottom:clamp(80px,10vw,140px)}
.crumb{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:500;padding:8px 0;margin-bottom:18px;transition:color 200ms ease}
.crumb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 300ms var(--ease-out)}
@media (hover:hover){.crumb:hover{color:var(--gold-hi)}.crumb:hover svg{transform:translateX(-4px)}}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.pdp-media{position:sticky;top:calc(var(--bar-h) + 20px);perspective:1200px;--mx:0;--my:0;--gx:50%;--gy:30%}
.plate-xl{border-radius:4px;transform:rotateX(calc(var(--my) * -8deg)) rotateY(calc(var(--mx) * 10deg));transition:transform 700ms var(--ease-out);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.pdp-media.is-tilting .plate-xl{transition:transform 100ms linear}
.pdp-media.is-tilting .plate::after{opacity:1}
.pdp-media.is-tilting .plate img,.pdp-media.is-tilting .plate svg{transform:translate3d(calc(var(--mx) * 14px),calc(var(--my) * 10px),0) scale(1.06)}
.pdp-illus{font-size:14px;color:var(--muted);margin:12px 0 0}
.pdp-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.pdp-type{color:var(--muted);margin:0 0 28px}
.pdp-price{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 16px;padding:22px 0;border-block:1px solid var(--line);margin-bottom:24px}
.pdp-price span{font-size:14px;font-weight:600;color:var(--muted)}
.pdp-price b{font-family:var(--f-display);font-weight:500;font-size:clamp(2.8rem,5vw,3.8rem);line-height:1;color:var(--gold-hi);letter-spacing:-.02em;justify-self:end}
.pdp-price small{grid-column:1/-1;justify-self:end;color:var(--faint);font-size:13px}
.pdp-info .field{margin-bottom:16px}
.pdp-buy{display:flex;gap:12px;margin-bottom:14px}
.pdp-lock{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin:0 0 26px}
.pdp-lock svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.5}
.pdp-facts{margin:0 0 26px;border-top:1px solid var(--line)}
.pdp-facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.pdp-facts dt{color:var(--muted)}
.pdp-facts dd{margin:0;text-align:right;font-weight:500}

/* ---------- Páginas de pedido ---------- */
.narrow{max-width:760px}
.narrow-2{max-width:1080px}
[data-view=checkout] .wrap,[data-view=done] .wrap,[data-view=orders] .wrap{padding-top:calc(var(--bar-h) + 32px);padding-bottom:clamp(80px,10vw,140px)}
.page-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;letter-spacing:-.025em;margin:0 0 14px}
.page-sub{color:var(--muted);margin:0 0 40px;max-width:62ch}
.co-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.co-form h2,.co-sum h2{font-family:var(--f-display);font-weight:500;font-size:26px;margin:0 0 20px}
.co-form .field{margin-bottom:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-sum{position:sticky;top:calc(var(--bar-h) + 20px);padding:26px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-2)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);margin:6px 0 14px;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1px solid var(--line-2);border-radius:2px;background:var(--bg-3);display:grid;place-items:center;transition:background-color 150ms ease}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{content:"";width:5px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.err{min-height:1.4em;margin:0 0 12px;color:var(--danger);font-size:14px}
.note{font-size:13px;color:var(--faint);margin:12px 0 0}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line .plate{border-radius:3px}
.line .plate img{padding:6%}
.line .plate svg{padding:8%}
.line b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.line small{display:block;color:var(--faint);font-size:13px}
.line .amt{font-weight:600;white-space:nowrap}
.rm{background:none;border:0;padding:4px 0 0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.rm:hover{color:var(--danger)}}
.totals{margin:16px 0 0}
.totals div{display:flex;justify-content:space-between;padding:6px 0;color:var(--muted)}
.totals dd{margin:0}
.totals .total{color:var(--text);font-size:18px;font-weight:600;padding-top:12px}
.totals .total dd{font-family:var(--f-display);font-size:30px;color:var(--gold-hi);font-weight:500}
.order-no{color:var(--gold-hi);letter-spacing:.04em}
.status{list-style:none;margin:0 0 36px;padding:0;position:relative}
.status li{position:relative;padding:0 0 26px 40px;color:var(--faint)}
.status li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg)}
.status li:not(:last-child)::after{content:"";position:absolute;left:8px;top:24px;bottom:2px;width:1px;background:var(--line-2)}
.status li.done{color:var(--muted)}
.status li.done::before{background:var(--gold);border-color:var(--gold)}
.status li.now{color:var(--text)}
.status li.now::before{border-color:var(--gold);box-shadow:0 0 0 4px rgba(210,173,102,.18)}
.status b{display:block;color:var(--text);font-weight:600}
.status li:not(.done):not(.now) b{color:var(--muted)}
.mail-box{padding:24px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-2);margin-bottom:28px}
.mail-box p{margin:0 0 16px}
.row-btns{display:flex;flex-wrap:wrap;gap:12px}
.summary{white-space:pre-wrap;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:16px;margin:18px 0 0;max-height:260px;overflow:auto}
.order{border:1px solid var(--line);border-radius:4px;padding:22px 24px;margin-bottom:16px;background:var(--bg-2)}
.order-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:baseline;margin-bottom:14px}
.order-top b{font-size:17px}
.pill{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600;background:rgba(210,173,102,.14);color:var(--gold-hi)}
.order ul{margin:0 0 14px;padding:0;list-style:none;color:var(--muted);font-size:14px}
.order-next{margin:0;font-size:14px;color:var(--muted)}
.empty-state{padding:40px 0;color:var(--muted)}
.guest{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guest-card{padding:clamp(22px,3vw,32px);border:1px solid var(--line-2);border-radius:6px;background:linear-gradient(160deg,#221c15,#120f0c)}
.guest-card h2{font-family:var(--f-display);font-weight:500;font-size:28px;margin:0 0 8px;color:var(--gold-hi)}
.guest-card p{margin:0 0 22px;color:var(--muted)}
@media (max-width:760px){.guest{grid-template-columns:1fr}}

/* ---------- Páginas legales ---------- */
[data-view=legal] .wrap{padding-top:calc(var(--bar-h) + 32px);padding-bottom:clamp(80px,10vw,140px)}
.legal-body{color:var(--muted);max-width:68ch}
.legal-body h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--text);margin:40px 0 12px}
.legal-body p,.legal-body li{margin:0 0 12px}
.legal-body ul,.legal-body ol{padding-left:20px;margin:0 0 16px}
.legal-body b{color:var(--text);font-weight:600}
.legal-body a{color:var(--gold-hi);text-underline-offset:3px}
.legal-date{margin-top:40px!important;font-size:14px;color:var(--faint)}
.check a{color:var(--gold-hi)}

/* ---------- Pie ---------- */
.foot{border-top:1px solid var(--line);padding:64px 0 48px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.foot p{color:var(--faint);font-size:14px;max-width:38ch;margin:0}
.foot h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.foot a{display:block;text-decoration:none;color:var(--text);font-size:15px;padding:4px 0;transition:color 200ms ease}
@media (hover:hover){.foot a:hover{color:var(--gold-hi)}}
.foot #foot-contact{margin-top:10px}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.foot .foot-legal a{font-size:13px;color:var(--muted);padding:2px 0}

/* ---------- Cajón y ventana ---------- */
dialog{color:var(--text);padding:0;border:0;max-width:none;max-height:none}
dialog::backdrop{background:rgba(5,4,3,.72);opacity:0;transition:opacity 300ms ease,display 300ms allow-discrete,overlay 300ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100vw);height:100dvh;background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform 420ms var(--ease-drawer),display 420ms allow-discrete,overlay 420ms allow-discrete}
.drawer[open]{transform:translateX(0)}
@starting-style{.drawer[open]{transform:translateX(100%)}}
.drawer-in{display:flex;flex-direction:column;height:100%}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--f-display);font-weight:500;font-size:28px;margin:0}
.bag-lines{flex:1;overflow:auto;padding:4px 24px}
.drawer-foot{padding:16px 24px 26px;border-top:1px solid var(--line)}
.drawer-foot .totals{margin:0 0 16px}
.bag-bar{height:3px;border-radius:2px;background:var(--line);margin:0 0 10px;overflow:hidden}
.bag-bar span{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(var(--fill,0));transition:transform 400ms var(--ease-out)}
.bag-min{margin:0 0 14px;font-size:14px;color:var(--muted)}
.bag-min b{color:var(--gold-hi)}
.x{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;transition:transform 160ms var(--ease-out),border-color 200ms ease}
.x:active{transform:scale(.94)}
@media (hover:hover){.x:hover{border-color:var(--gold)}}
.modal{width:min(460px,calc(100vw - 32px));border-radius:6px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  opacity:0;transform:scale(.96) translateY(8px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),display 260ms allow-discrete,overlay 260ms allow-discrete}
.modal[open]{opacity:1;transform:none}
@starting-style{.modal[open]{opacity:0;transform:scale(.96) translateY(8px)}}
.auth{position:relative;padding:36px clamp(22px,5vw,36px) 30px}
.auth .x{position:absolute;right:14px;top:14px}
.auth h2{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1.05;text-align:center;margin:0 0 8px}
.auth-why{text-align:center;color:var(--muted);margin:0 0 22px;font-size:15px}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{background:none;border:0;padding:12px 0;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 200ms ease,border-color 200ms ease}
.tabs button[aria-selected="true"]{color:var(--gold-hi);border-bottom-color:var(--gold)}
.auth .field{margin-bottom:14px}
.auth small{display:block;margin-top:6px;font-size:12px;color:var(--faint)}
.pass{position:relative}
.pass input{padding-right:64px}
.pass button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:8px 10px;font-size:13px;font-weight:600;color:var(--gold)}

/* Aviso */
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,24px);opacity:0;pointer-events:none;padding:14px 20px;border-radius:3px;background:var(--ivory);color:var(--ink);font-weight:600;font-size:15px;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Cambio de vista */
.view{animation:view-in 420ms var(--ease-out)}
@keyframes view-in{from{opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav{display:none}
  .menu-btn{display:grid}
  .bar{grid-template-columns:1fr auto}
  .rooms-grid{grid-template-columns:1fr}
  .calc-wrap,.calc-head{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr}
  .faq{transform:rotateX(calc(6deg + var(--my) * -3deg)) rotateY(calc(-5deg + var(--mx) * 4deg))}
  .faq-orbit{width:150%}
  .pdp-grid,.co-grid{grid-template-columns:1fr}
  .pdp-media,.co-sum{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:980px){
  .hero-stage{background:radial-gradient(90% 55% at 50% 30%,#2a2015 0%,#17120d 50%,var(--bg) 85%)}
  .hero-copy{left:var(--gutter);right:var(--gutter);width:auto;max-width:640px;top:auto;bottom:max(28px,4svh)}
  .hero-copy-a{transform:translateY(calc(var(--p) * -40px))}
  .hero-copy-b{transform:translateY(calc((1 - var(--p)) * 40px))}
  .hero h1,.hero h2{font-size:clamp(2.2rem,6.4vw,3.6rem);margin-bottom:14px}
  .lead{margin-bottom:22px}
  .scroll-cue,.hero-tag{display:none}
}
@media (max-width:760px){
  :root{--bar-h:76px}
  .logo{width:min(200px,52vw)}
  .bar.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(13,11,9,.96)}
  .hero-poster{left:50%;right:auto;top:calc(var(--bar-h) + 2svh);width:min(66vw,320px);transform:translateX(-50%) rotate(-4deg)}
  .hero-stage{background:radial-gradient(90% 55% at 50% 30%,#2a2015 0%,#17120d 50%,var(--bg) 85%)}
  .hero-copy{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:max(28px,4svh)}
  .hero-copy-a{transform:translateY(calc(var(--p) * -40px))}
  .hero-copy-b{transform:translateY(calc((1 - var(--p)) * 40px))}
  .hero h1,.hero h2{font-size:clamp(2.2rem,10.5vw,3.2rem);margin-bottom:14px}
  .lead{font-size:15px;margin-bottom:20px}
  .door{padding:14px 40px 14px 16px}
  .door-name{font-size:24px}
  .door-meta{flex-direction:column}
  .door-meta span+span::before{display:none}
  .door-arrow{right:12px}
  .scroll-cue{display:none}
  .hero-tag{display:none}
  .hero-fallback{left:50%;right:auto;top:8%;width:62vw;transform:translateX(-50%)}
  .room-inner{min-height:600px}
  .room-photo{left:50%;right:auto;top:70px;width:min(64%,260px);transform:translate3d(-50%,0,0) rotate(-3deg)}
  .room-word{font-size:5rem}
  .bar-actions .link-btn{display:none}
  .room-facts{gap:0 22px}
  .room-facts dd{font-size:22px}
  .room-head-wrap{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar-r{justify-content:space-between}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card-bd{padding:12px 12px 14px}
  .card-name{font-size:14px}
  .card-type{font-size:12px;margin-bottom:8px}
  .card-price{flex-direction:column;align-items:flex-start;gap:2px}
  .card-price b{font-size:22px}
  .tag{left:6px;top:6px;font-size:10px;padding:3px 7px}

  .two{grid-template-columns:1fr}
  .seg-3 span{font-size:14px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .room-inner,.card-in,.plate-xl,.room-photo,.room-word,.plate img{transform:none!important}
  .car-ring{transition:none}
  .faq,.faq details[open]{transform:none!important}
  .faq-orbit{animation:none}
  .drawer{transition:opacity 200ms ease,display 200ms allow-discrete,overlay 200ms allow-discrete;transform:none}
  .drawer:not([open]){opacity:0}
  .modal{transform:none}
}