/* =====================================================================
   Alure · Gôndola e planograma
   Green lives on rails, edges and the action. Brown is the MDF.
   Beige is the gondola. Black and white carry the reading.
   ===================================================================== */
:root{
  --green-900:#0f3d2e;
  --green-700:#185a43;
  --green-500:#2f7d5c;
  --brown-800:#3d2a1c;
  --brown-600:#6b4a2f;
  --brown-400:#8a5a36;
  --brown-200:#c9a27a;
  --beige-50:#faf6ee;
  --beige-100:#f3ecdf;
  --beige-200:#e9dfcb;
  --beige-300:#d8c8aa;
  --black:#111111;
  --ink-soft:#4b4339;
  --white:#ffffff;
  --rail-h:72px;
  --gutter:clamp(20px, 5vw, 64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--rail-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--beige-50); color:var(--black);
  font-family:var(--font); font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
::selection{ background:var(--green-900); color:var(--white); }
h1,h2,h3{ margin:0; line-height:.98; letter-spacing:-.025em; text-wrap:balance; }
p{ margin:0; }
svg{ display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--black); outline-offset:3px; border-radius:4px; }
.aisle-dark :focus-visible, .close :focus-visible, .foot :focus-visible{ outline-color:var(--white); }
html{ scrollbar-color:var(--brown-400) var(--beige-100); }

.skip{
  position:absolute; left:16px; top:-80px; z-index:100;
  background:var(--black); color:var(--white); padding:13px 18px; border-radius:6px;
  font-weight:700; text-decoration:none; min-height:44px;
}
.skip:focus{ top:12px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 20px; border-radius:6px; border:2px solid transparent;
  font-weight:700; font-size:.98rem; letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn-lg{ min-height:58px; padding:0 28px; font-size:1.06rem; }
.btn-block{ width:100%; }
.btn-green{ background:var(--green-900); color:var(--white); box-shadow:0 10px 24px -14px rgba(15,61,46,.9); }
.btn-line{ background:transparent; border-color:var(--black); color:var(--black); }
.btn-white{ background:var(--white); color:var(--green-900); }
@media (hover:hover){
  .btn-green:hover{ background:var(--green-700); transform:translateY(-2px); }
  .btn-line:hover{ background:var(--black); color:var(--white); }
  .btn-white:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
}
.btn:active{ transform:translateY(1px); }

/* ---------- rail (header): the shelf edge that runs the whole store ---------- */
.rail{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--rail-h);
  display:flex; align-items:center; gap:24px;
  padding:0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background:var(--white);
  border-bottom:4px solid var(--green-900);
  box-shadow:0 10px 24px -18px rgba(61,42,28,.5);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; min-height:44px; }
.brand svg{ width:40px; height:40px; flex:none; }
.brand b{ display:block; font-weight:900; font-size:1.2rem; letter-spacing:-.02em; line-height:1; }
.brand small{ display:block; font-size:.74rem; font-weight:600; color:var(--ink-soft); margin-top:3px; }
.aisles{ display:flex; gap:4px; margin-left:auto; }
.aisles a, .menu a{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 12px;
  text-decoration:none; font-weight:600; font-size:.94rem; border-radius:6px;
  transition:background .2s;
}
.tag{
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:4px;
  background:var(--green-900); color:var(--white); font-size:.78rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.aisles a[aria-current="true"]{ background:var(--beige-100); }
@media (hover:hover){ .aisles a:hover{ background:var(--beige-100); } }
.menu-btn{ display:none; width:48px; height:48px; border:2px solid var(--black); border-radius:6px; background:var(--white); cursor:pointer; margin-left:auto; place-items:center; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after{ display:block; width:20px; height:2px; background:var(--black); position:relative; transition:transform .25s var(--ease); }
.menu-btn span::before, .menu-btn span::after{ content:''; position:absolute; left:0; }
.menu-btn span::before{ top:-6px; } .menu-btn span::after{ top:6px; }
.menu-btn[aria-expanded="true"] span{ background:transparent; }
.menu-btn[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }
.menu{
  position:fixed; inset:var(--rail-h) 0 auto; z-index:39; padding:16px var(--gutter) 24px;
  background:var(--white); border-bottom:4px solid var(--green-900); display:grid; gap:14px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.4);
}
.menu[hidden]{ display:none; }
.menu nav{ display:grid; }
.menu a{ font-size:1.15rem; min-height:52px; border-bottom:1px solid var(--beige-200); border-radius:0; }

/* ---------- OBRA: the store builds as you scroll ---------- */
.obra{ position:relative; height:500vh; background:var(--beige-100); }
.obra-sticky{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
#obraCanvas, #obraVideo{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.obra-fallback{ position:absolute; inset:0; background:
  linear-gradient(180deg, var(--white) 0 58%, var(--beige-200) 58% 100%); }
.obra-fallback[hidden]{ display:none; }

.hero{
  position:absolute; left:max(var(--gutter), env(safe-area-inset-left)); right:var(--gutter);
  bottom:clamp(36px, 9vh, 96px); max-width:860px;
  transition:opacity .4s linear, transform .5s var(--ease);
}
.hero h1{ font-size:clamp(3.4rem, 9.6vw, 9.4rem); font-weight:900; letter-spacing:-.045em; line-height:.88; color:var(--black); }
.h1-a, .h1-b{ display:block; }
.h1-b{ color:var(--green-900); }
.shelf-edge{
  position:relative; margin-top:22px; padding:16px 20px 16px;
  background:var(--white); border-top:6px solid var(--green-900);
  box-shadow:0 18px 30px -18px rgba(61,42,28,.55);
  max-width:620px;
}
.shelf-edge p{ font-size:clamp(1.02rem, 1.4vw, 1.18rem); color:var(--ink-soft); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.hero.is-gone{ opacity:0; transform:translateY(-24px); pointer-events:none; }

.stages{
  position:absolute; right:max(var(--gutter), env(safe-area-inset-right)); top:calc(var(--rail-h) + 32px);
  list-style:none; margin:0; padding:12px 16px; display:grid; gap:2px;
  background:var(--white); border-top:4px solid var(--green-900); border-radius:0 0 8px 8px;
  box-shadow:0 18px 40px -26px rgba(61,42,28,.7);
  font-size:.9rem; font-weight:600; color:var(--ink-soft);
}
.stages{ transition:opacity .4s, transform .5s var(--ease); }
.stages.is-tucked{ opacity:0; transform:translateY(-12px); pointer-events:none; }
.stages li{ display:flex; align-items:center; gap:10px; min-height:30px; transition:color .3s; }
.stages .mark{ width:18px; height:18px; border-radius:4px; border:2px solid var(--beige-300); display:grid; place-items:center; transition:background .3s, border-color .3s; }
.stages li.is-done{ color:var(--black); }
.stages li.is-done .mark{ background:var(--green-900); border-color:var(--green-900); }
.stages li.is-done .mark::after{ content:''; width:8px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); }
.stages li.is-now{ color:var(--black); font-weight:800; }
.stages li.is-now .mark{ border-color:var(--green-900); box-shadow:0 0 0 4px rgba(15,61,46,.15); }

.obra-note{
  position:absolute; right:calc(max(var(--gutter), env(safe-area-inset-right)) + 84px); bottom:22px;
  max-width:300px; padding:8px 12px; border-radius:6px;
  background:rgba(255,255,255,.92); font-size:.78rem; color:var(--ink-soft);
}
.obra-note{ transition:opacity .35s; }
.obra-note.is-quiet{ opacity:0; }
.obra-progress{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(17,17,17,.08); }
.obra-progress span{ display:block; height:100%; width:0; background:var(--green-900); }

.obra-steps{ position:relative; margin-top:-100vh; margin-top:-100dvh; pointer-events:none; }
.obra-step{ height:100vh; height:100dvh; display:flex; align-items:center; padding:0 var(--gutter); }
.obra-step:first-child .label-card{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.label-card{
  pointer-events:auto; max-width:380px; margin-top:22vh;
  background:var(--white); border-top:6px solid var(--green-900); padding:20px 22px 22px;
  box-shadow:0 26px 50px -26px rgba(61,42,28,.75);
}
.label-card h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); font-weight:900; margin-bottom:8px; }
.label-card p{ color:var(--ink-soft); }

.labels{ position:absolute; inset:0; pointer-events:none; }
.callout{
  position:absolute; left:0; top:0; transform:translate(-50%, -100%);
  display:grid; justify-items:center; opacity:0; transition:opacity .35s;
}
.callout.is-on{ opacity:1; }
.callout b{
  display:block; white-space:nowrap; background:var(--white); color:var(--black);
  font-size:.8rem; font-weight:700; padding:6px 10px; border-top:3px solid var(--green-900);
  box-shadow:0 10px 20px -12px rgba(0,0,0,.5);
}
.callout small{ display:block; font-weight:600; color:var(--ink-soft); font-size:.72rem; font-variant-numeric:tabular-nums; }
.callout::after{ content:''; width:2px; height:34px; background:var(--black); }
.callout::before{ content:''; order:3; width:9px; height:9px; border-radius:50%; background:var(--black); margin-top:-2px; }

/* ---------- aisles (sections) ---------- */
.aisle{ position:relative; padding:clamp(88px, 12vw, 168px) max(var(--gutter), env(safe-area-inset-right)) clamp(88px, 12vw, 168px) max(var(--gutter), env(safe-area-inset-left)); }
.aisle-light{ background:var(--beige-50); }
.aisle-sand{ background:var(--beige-200); }
.aisle-beige{ background:var(--beige-100); }
.aisle-dark{ background:var(--black); color:var(--white); }
.aisle-head{
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:18px 22px; align-items:start;
  max-width:1200px; margin:0 auto clamp(48px, 6vw, 80px);
}
.aisle-no{
  display:grid; place-items:center; width:clamp(52px, 6vw, 72px); aspect-ratio:1; border-radius:8px;
  background:var(--green-900); color:var(--white); font-weight:900; font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-variant-numeric:tabular-nums; box-shadow:0 8px 18px -8px rgba(61,42,28,.55);
}
.aisle-dark .aisle-no{ background:var(--white); color:var(--black); box-shadow:0 8px 18px -8px rgba(0,0,0,.6); }
.aisle-head h2{ font-size:clamp(2.4rem, 6vw, 5rem); font-weight:900; }
.aisle-head p{ grid-column:2; max-width:58ch; font-size:clamp(1.05rem, 1.4vw, 1.2rem); color:var(--ink-soft); }
.aisle-dark .aisle-head p{ color:#cfc6b8; }

/* 1 · gondola: process steps stocked on a shelf */
.gondola{ position:relative; max-width:1200px; margin:0 auto; }
.gondola-track{
  list-style:none; margin:0; padding:0 0 64px; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; align-items:end;
  position:relative; z-index:1;
}
.facing{
  position:relative; display:flex; flex-direction:column; gap:10px;
  min-height:250px; padding:22px 18px 20px; background:var(--white);
  border:1px solid var(--beige-300); border-bottom:0; border-radius:8px 8px 0 0;
  box-shadow:inset 0 6px 0 var(--green-900);
}
.facing.tall{ min-height:310px; box-shadow:inset 0 6px 0 var(--brown-600); }
.facing .code{ font-weight:900; font-size:2.6rem; letter-spacing:-.04em; line-height:1; color:var(--brown-400); font-variant-numeric:tabular-nums; }
.facing h3{ font-size:1.35rem; font-weight:800; }
.facing p{ font-size:.95rem; color:var(--ink-soft); }
.price-rail{
  position:absolute; left:-1px; right:-1px; bottom:-52px; height:40px;
  display:flex; align-items:center; justify-content:center; padding:0 8px;
  background:var(--white); border-top:3px solid var(--green-900);
  font-size:.8rem; font-weight:700; text-align:center; line-height:1.1;
}
.shelf-board{
  position:absolute; left:-12px; right:-12px; bottom:0; height:64px; border-radius:4px;
  background:linear-gradient(180deg, var(--brown-400) 0 10px, var(--brown-600) 10px);
  box-shadow:0 22px 30px -18px rgba(61,42,28,.9);
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .facing{ animation:stock linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
    .facing:nth-child(2){ animation-range:entry 6% entry 76%; }
    .facing:nth-child(3){ animation-range:entry 12% entry 82%; }
    .facing:nth-child(4){ animation-range:entry 18% entry 88%; }
    .facing:nth-child(5){ animation-range:entry 24% entry 94%; }
  }
}
@keyframes stock{ from{ transform:translateY(-70px); opacity:0; } 70%{ opacity:1; } to{ transform:none; opacity:1; } }

/* 2 · planograma */
.plano{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-areas:"tabs map" "panel map"; gap:20px 48px; align-items:start; }
.plano-tabs{ grid-area:tabs; display:grid; gap:8px; }
.plano-tabs button{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:0 18px; text-align:left; cursor:pointer;
  background:var(--white); border:2px solid transparent; border-radius:8px; font-weight:700; font-size:1.02rem;
  transition:border-color .2s, background .2s;
}
.plano-tabs .dot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--green-900); flex:none; transition:background .2s; }
.plano-tabs button[aria-selected="true"]{ border-color:var(--black); }
.plano-tabs button[aria-selected="true"] .dot{ background:var(--green-900); }
@media (hover:hover){ .plano-tabs button:hover{ border-color:var(--beige-300); } .plano-tabs button[aria-selected="true"]:hover{ border-color:var(--black); } }
.plano-panel{ grid-area:panel; padding:22px; background:var(--white); border-top:6px solid var(--green-900); box-shadow:0 18px 30px -22px rgba(61,42,28,.5); }
.plano-panel h3{ font-size:1.5rem; font-weight:800; margin-bottom:8px; }
.plano-panel p{ color:var(--ink-soft); }
.plano-map{ grid-area:map; margin:0; background:var(--white); border-radius:10px; padding:16px; box-shadow:0 30px 60px -40px rgba(61,42,28,.8); }
.plano-map svg{ width:100%; height:auto; }
.plano-map .wall{ fill:var(--beige-50); stroke:var(--black); stroke-width:3; }
.plano-map .door{ stroke:var(--green-500); stroke-width:8; }
.plano-map .furn rect{ fill:var(--brown-200); stroke:var(--brown-600); stroke-width:1.5; }
.plano-map .furn .counter{ fill:var(--brown-600); }
.plano-map .lbl{ font:600 12px var(--font); fill:var(--ink-soft); }
.plano-map .lbl-inv{ fill:var(--white); }
.plano-map .z{ opacity:.07; transition:opacity .45s var(--ease); }
.plano-map[data-zone="fluxo"] .z-fluxo, .plano-map[data-zone="visao"] .z-visao, .plano-map[data-zone="impulso"] .z-impulso{ opacity:1; }
.plano-map .flow{ fill:none; stroke:var(--green-900); stroke-width:22; stroke-linecap:round; opacity:.14; }
.plano-map .flow-dash{ stroke-width:3; opacity:1; stroke-dasharray:10 9; animation:march 1.4s linear infinite; }
@keyframes march{ to{ stroke-dashoffset:-38; } }
.plano-map .cone{ fill:rgba(47,125,92,.2); stroke:var(--green-900); stroke-width:2; stroke-dasharray:6 6; }
.plano-map .imp{ fill:var(--green-900); }

/* 3 · fabricação */
.sheet{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:48px; align-items:center; --p:0; }
.sheet svg{ width:100%; height:auto; overflow:visible; }
.sheet .board{ fill:#a77a50; }
.sheet .pc rect{ fill:#b98a5e; stroke:#f3ecdf; stroke-width:2; stroke-dasharray:7 6; }
.sheet .pc text{ font:800 14px var(--font); fill:var(--white); text-anchor:middle; }
.sheet .pc{
  --k:clamp(0, calc(var(--p) * 9 - var(--i)), 1);
  transform:translate(calc(var(--k) * -6px), calc(var(--k) * -14px));
  filter:drop-shadow(0 calc(var(--k) * 14px) calc(var(--k) * 12px) rgba(0,0,0,.55));
}
.sheet .pc rect{ fill-opacity:calc(.55 + var(--k) * .45); }
.sheet-facts{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sheet-facts li{ padding:18px 20px; border-top:3px solid var(--green-500); background:#1b1b1b; }
.sheet-facts b{ display:block; font-size:1.15rem; margin-bottom:4px; }
.sheet-facts span{ color:#cfc6b8; font-size:.98rem; }

/* 4 · acabamentos */
.finishes{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); gap:20px 48px; align-items:center; }
.counter-preview{ margin:0; }
.counter-preview svg{ width:100%; height:auto; }
.cp-front{ fill:var(--front); transition:fill .45s var(--ease); }
.cp-side{ fill:var(--front); filter:brightness(.72); transition:fill .45s var(--ease); }
.cp-top{ fill:#7b5131; } .cp-top-face{ fill:#9b6a42; }
.cp-seam{ stroke:rgba(0,0,0,.25); stroke-width:2; }
.cp-caption{ margin-top:8px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.swatches{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.swatches button{
  display:grid; gap:4px; text-align:left; padding:10px 10px 12px; min-height:44px; cursor:pointer;
  background:var(--white); border:2px solid transparent; border-radius:8px; transition:border-color .2s, transform .25s var(--ease);
}
.swatches .chip{ display:block; aspect-ratio:4 / 3; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.swatches b{ font-size:.95rem; }
.swatches small{ font-size:.76rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.swatches button[aria-checked="true"]{ border-color:var(--black); }
@media (hover:hover){ .swatches button:hover{ transform:translateY(-2px); } }
.fine{ grid-column:1 / -1; font-size:.85rem; color:var(--ink-soft); }

/* 5 · parceiras */
.placeholder-flag{ max-width:1200px; margin:-36px auto 28px; display:flex; align-items:center; gap:10px; font-weight:600; font-size:.9rem; color:var(--brown-600); }
.placeholder-flag svg{ width:20px; height:20px; flex:none; }
.logos{ max-width:1200px; margin:0 auto; list-style:none; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.logos li{ display:grid; justify-items:center; gap:8px; padding:26px 12px; background:var(--white); border-radius:8px; font-size:.82rem; font-weight:600; color:var(--ink-soft); filter:grayscale(1); opacity:.8; }
.logos span{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:2px solid var(--brown-600); font-weight:900; color:var(--brown-600); }
.logos .you{ filter:none; opacity:1; border:2px dashed var(--green-900); background:transparent; color:var(--green-900); }
.logos .you span{ border-color:var(--green-900); color:var(--green-900); }

/* CTA */
.close{
  padding:clamp(96px, 14vw, 184px) var(--gutter); text-align:left;
  background:var(--brown-800);
  border-top:10px solid var(--brown-600);
  color:var(--white); display:grid; justify-items:start; gap:24px;
}
.close h2{ font-size:clamp(2.8rem, 8vw, 7.4rem); font-weight:900; letter-spacing:-.045em; line-height:.9; }
.close h2 span{ display:block; }
.close h2 span + span{ color:var(--beige-300); }
.close p{ max-width:52ch; font-size:1.15rem; color:#eadfcd; }

/* footer */
.foot{ background:var(--black); color:var(--white); padding:56px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.foot-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.14); }
.brand-foot small{ color:#bdb3a3; }
.foot-cols{ display:flex; flex-wrap:wrap; gap:16px 64px; }
.foot-h{ font-size:.8rem; font-weight:700; color:#bdb3a3; letter-spacing:.02em; margin-bottom:6px; }
.foot-cols a{ display:flex; align-items:center; min-height:44px; text-decoration:none; font-weight:600; }
@media (hover:hover){ .foot-cols a:hover{ text-decoration:underline; text-underline-offset:4px; } }
.foot-base{ padding-top:22px; font-size:.85rem; color:#bdb3a3; }

/* floating WhatsApp */
.fab{
  position:fixed; z-index:45; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));
  display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer;
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab-disc{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-900); color:var(--white); border:3px solid var(--white);
  box-shadow:0 14px 30px -12px rgba(15,61,46,.9);
  transition:transform .3s var(--ease);
}
.fab-disc svg{ width:30px; height:30px; }
.fab-tip{
  background:var(--black); color:var(--white); font-weight:700; font-size:.86rem; padding:9px 14px; border-radius:6px;
  opacity:0; transform:translateX(8px); transition:opacity .25s, transform .25s var(--ease);
}
@media (hover:hover){ .fab:hover .fab-disc{ transform:translateY(-3px); } .fab:hover .fab-tip{ opacity:1; transform:none; } }
.fab:focus-visible .fab-tip{ opacity:1; transform:none; }
.fab:active .fab-disc{ transform:scale(.95); }

/* modal */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(17,17,17,.6); animation:fade .3s var(--ease); }
.modal-box{
  position:relative; width:min(480px, 100%); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain;
  background:var(--white); border-radius:10px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  animation:rise .45s var(--ease);
}
.modal-rail{ height:8px; background:var(--green-900); }
.modal-x{ position:absolute; top:18px; right:14px; width:44px; height:44px; display:grid; place-items:center; border-radius:6px; border:0; background:var(--beige-100); cursor:pointer; }
.modal-x svg{ width:20px; height:20px; }
.modal-body{ padding:26px 26px 28px; }
.modal-body h2{ font-size:2rem; font-weight:900; padding-right:48px; }
#modalSub{ margin:8px 0 22px; color:var(--ink-soft); }
.field{ display:grid; gap:6px; margin-bottom:16px; }
.field label{ font-weight:700; font-size:.92rem; }
.field input{
  width:100%; min-width:0; min-height:52px; padding:0 14px; border-radius:6px;
  border:2px solid var(--beige-300); background:var(--beige-50); font:500 1rem var(--font); color:var(--black);
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#7a7064; }
.field input:focus{ outline:none; border-color:var(--green-900); box-shadow:0 0 0 4px rgba(15,61,46,.15); }
.field input[aria-invalid="true"]{ border-color:#a8321f; }
.err{ font-size:.85rem; color:#a8321f; font-weight:600; }
.err:empty{ display:none; }
.privacy{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:.82rem; color:var(--ink-soft); }
.privacy svg{ width:16px; height:16px; flex:none; margin-top:2px; }
.done{ text-align:center; display:grid; justify-items:center; gap:10px; padding:10px 0 4px; }
.done[hidden]{ display:none; }
.done:focus{ outline:none; }
.done-ring{ width:66px; height:66px; border-radius:50%; background:var(--green-900); color:var(--white); display:grid; place-items:center; }
.done-ring svg{ width:30px; height:30px; }
.done h3{ font-size:1.5rem; font-weight:900; }
.done p{ color:var(--ink-soft); max-width:34ch; margin-bottom:6px; }
.modal-box.is-done #modalSub{ display:none; }
@keyframes fade{ from{ opacity:0; } }
@keyframes rise{ from{ opacity:0; transform:translateY(24px) scale(.98); } }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .aisles{ display:none; }
  .menu-btn{ display:grid; }
  .rail-cta{ margin-left:auto; }
  .rail-cta + .menu-btn{ margin-left:0; }
  .gondola-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:0 var(--gutter) 64px; margin:0 calc(var(--gutter) * -1); scrollbar-width:none; align-items:flex-end; }
  .gondola-track::-webkit-scrollbar{ display:none; }
  .facing, .facing.tall{ flex:0 0 min(300px, 76%); scroll-snap-align:center; }
  .shelf-board{ left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1); border-radius:0; }
}
@media (max-width:820px){
  .plano, .sheet, .finishes{ grid-template-columns:minmax(0,1fr); grid-template-areas:"tabs" "map" "panel"; }
  .logos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .logos .you{ grid-column:1 / -1; }
}
@media (max-width:640px){
  :root{ --rail-h:64px; }
  .brand small{ display:none; }
  .rail-cta span{ display:none; }
  .rail-cta{ width:48px; padding:0; }
  .rail{ gap:10px; }
  .stages{ left:12px; right:12px; top:calc(var(--rail-h) + 10px); display:flex; gap:6px; padding:8px 10px; overflow-x:auto; scrollbar-width:none; font-size:.76rem; }
  .stages li{ flex:none; gap:6px; }
  .stages li:not(.is-now){ font-size:0; gap:0; }
  .stages li:not(.is-now) .mark{ width:14px; height:14px; }
  .hero{ bottom:calc(28px + env(safe-area-inset-bottom)); }
  .hero-actions .btn{ flex:1 1 auto; }
  .obra-note{ left:12px; right:84px; bottom:calc(10px + env(safe-area-inset-bottom)); max-width:none; font-size:.7rem; padding:6px 10px; }
  .label-card{ margin-top:auto; margin-bottom:calc(104px + env(safe-area-inset-bottom)); }
  .obra-step{ align-items:flex-end; }
  .aisle-head{ grid-template-columns:minmax(0,1fr); }
  .aisle-head p{ grid-column:1; }
  .swatches{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .modal{ place-items:end center; padding:0; }
  .modal-box{ width:100%; border-radius:16px 16px 0 0; max-height:92dvh; padding-bottom:env(safe-area-inset-bottom); }
  .fab-tip{ display:none; }
}
@media (orientation:landscape) and (max-height:520px){
  .hero h1{ font-size:clamp(2.4rem, 12vh, 3.6rem); }
  .shelf-edge{ display:none; }
  .stages{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .plano-map .flow-dash{ animation:none; }
}

/* =====================================================================
   Marcenaria curva — bordas boleadas (2026-10-08)
   Every surface is a piece of MDF with a rounded, banded edge. The green
   rule becomes an inner edge band that follows the curve; sections are
   rounded panels that slide over the one before, like drawers.
   ===================================================================== */
:root{
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:clamp(32px, 5vw, 64px);
  --band:inset 0 5px 0 var(--green-900);
  --shadow-1:0 1px 2px rgba(61,42,28,.06), 0 10px 24px -12px rgba(61,42,28,.28);
  --shadow-2:0 2px 6px rgba(61,42,28,.06), 0 30px 60px -28px rgba(61,42,28,.42);
  --spring:cubic-bezier(.34,1.4,.64,1);
}
:focus-visible{ border-radius:12px; }
.skip{ border-radius:999px; }

/* buttons: pills, pressed like a soft rubber edge */
.btn{ border-radius:999px; transition:background .3s var(--ease), color .3s, transform .45s var(--spring), box-shadow .3s; }
.btn-green{ background:linear-gradient(180deg, #1b5a43, var(--green-900)); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 26px -14px rgba(15,61,46,.95); }
.btn-line{ background:rgba(255,255,255,.55); }
@media (hover:hover){
  .btn-green:hover{ background:linear-gradient(180deg, #226b50, var(--green-700)); transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 32px -14px rgba(15,61,46,.95); }
  .btn-line:hover{ transform:translateY(-3px); }
}
.btn:active{ transform:translateY(1px) scale(.98); }

/* rail: a floating rounded shelf edge */
.rail{
  inset:12px clamp(10px, 2.2vw, 28px) auto; height:calc(var(--rail-h) - 12px);
  padding:0 10px 0 14px; border-bottom:0; border-radius:22px;
  box-shadow:inset 0 -3px 0 var(--green-900), var(--shadow-1);
}
.aisles a, .menu a{ border-radius:999px; }
.tag{ border-radius:50%; }
.menu-btn{ border-radius:14px; border-width:1.5px; }
.menu{ inset:calc(var(--rail-h) + 8px) clamp(10px, 2.2vw, 28px) auto; border-radius:24px; border-bottom:0; box-shadow:inset 0 -3px 0 var(--green-900), var(--shadow-2); }
.menu a{ border-bottom:0; }
.menu nav{ gap:2px; }
@media (hover:hover){ .menu a:hover{ background:var(--beige-100); } }

/* obra overlays */
.shelf-edge{ border-top:0; border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--band), var(--shadow-2); }
.stages{ border-top:0; border-radius:var(--r-md); padding:14px 18px; box-shadow:var(--band), var(--shadow-2); }
.stages .mark{ border-radius:50%; }
.obra-note{ border-radius:999px; padding:8px 14px; box-shadow:var(--shadow-1); }
.obra-progress{ height:5px; }
.obra-progress span{ border-radius:0 999px 999px 0; }
.label-card{ border-top:0; border-radius:var(--r-lg); padding:24px 26px 26px; box-shadow:var(--band), var(--shadow-2); }
.callout b{ border-top:0; border-radius:var(--r-sm); padding:8px 12px; box-shadow:inset 0 3px 0 var(--green-900), var(--shadow-1); }
.callout::after{ width:2px; border-radius:2px; }
.callout::before{ width:11px; height:11px; box-shadow:0 0 0 4px rgba(255,255,255,.85); }

/* sections: rounded drawers sliding over each other */
.aisle, .close, .foot{
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-top:calc(var(--r-xl) * -1);
  box-shadow:0 -28px 48px -36px rgba(61,42,28,.45);
}
.aisle-dark, .foot{ box-shadow:0 -28px 48px -30px rgba(0,0,0,.55); }
.aisle-light{ background:radial-gradient(120% 70% at 50% 0%, var(--white), var(--beige-50) 60%); }
.aisle-sand{ background:radial-gradient(110% 80% at 85% 10%, #f1e8d7, var(--beige-200) 60%); }
.aisle-beige{ background:radial-gradient(110% 80% at 15% 0%, #f8f2e6, var(--beige-100) 60%); }
.aisle-dark{ background:radial-gradient(120% 80% at 80% 0%, #1f1d1a, var(--black) 60%); }
.aisle-no{ border-radius:50%; box-shadow:0 0 0 7px rgba(15,61,46,.1), 0 12px 22px -10px rgba(61,42,28,.55); }
.aisle-dark .aisle-no{ box-shadow:0 0 0 7px rgba(255,255,255,.1), 0 12px 22px -10px rgba(0,0,0,.7); }

/* 1 · gondola facings: rounded fronts, banded top, lift on touch */
.facing{
  border:1px solid rgba(216,200,170,.7); border-radius:var(--r-md) var(--r-md) 14px 14px;
  box-shadow:var(--band), var(--shadow-1);
  transition:transform .5s var(--spring), box-shadow .4s var(--ease);
}
.facing.tall{ box-shadow:inset 0 5px 0 var(--brown-600), var(--shadow-1); }
@media (hover:hover){
  .facing:hover{ transform:translateY(-8px); box-shadow:var(--band), var(--shadow-2); }
  .facing.tall:hover{ box-shadow:inset 0 5px 0 var(--brown-600), var(--shadow-2); }
}
.price-rail{
  left:10px; right:10px; bottom:-50px; height:36px; border-top:0; border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--green-900), var(--shadow-1);
}
.shelf-board{ border-radius:22px; box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 26px 34px -20px rgba(61,42,28,.85); }

/* 2 · planograma */
.plano-tabs button{ border-radius:var(--r-md); box-shadow:var(--shadow-1); transition:border-color .2s, transform .45s var(--spring), box-shadow .3s; }
@media (hover:hover){ .plano-tabs button:hover{ transform:translateX(4px); } }
.plano-panel{ border-top:0; border-radius:var(--r-lg); padding:24px 26px; box-shadow:var(--band), var(--shadow-1); }
.plano-map{ border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-2); }
.plano-map .furn rect{ rx:8px; }
.plano-map .furn .counter{ rx:16px; }
.plano-map .wall{ rx:22px; }
.plano-map .imp{ rx:12px; }

/* 3 · fabricação */
.sheet .board{ rx:22px; }
.sheet .pc rect{ rx:12px; }
.sheet-facts li{ border-top:0; border-radius:var(--r-md); box-shadow:inset 0 4px 0 var(--green-500); padding:20px 22px; }

/* 4 · acabamentos */
.counter-preview{ padding:26px; border-radius:var(--r-lg); background:radial-gradient(90% 80% at 50% 30%, var(--white), var(--beige-100)); box-shadow:var(--shadow-1); }
.cp-front{ rx:14px; } .cp-top{ rx:8px; }
.cp-top-face{ stroke:#9b6a42; stroke-width:10; stroke-linejoin:round; }
.cp-side{ stroke:var(--front); stroke-width:8; stroke-linejoin:round; }
.swatches button{ border-radius:var(--r-md); padding:10px 10px 14px; box-shadow:var(--shadow-1); transition:border-color .2s, transform .45s var(--spring), box-shadow .3s; }
.swatches .chip{ border-radius:14px; }
@media (hover:hover){ .swatches button:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); } }

/* 5 · parceiras */
.logos li{ border-radius:var(--r-lg); box-shadow:var(--shadow-1); transition:transform .45s var(--spring), filter .3s, opacity .3s; }
@media (hover:hover){ .logos li:hover{ transform:translateY(-4px); filter:none; opacity:1; } }
.logos .you{ box-shadow:none; }

/* modal */
.modal-backdrop{ background:rgba(17,17,17,.55); }
.modal-box{ border-radius:var(--r-lg); box-shadow:0 50px 100px -40px rgba(0,0,0,.75); }
.modal-rail{ height:6px; }
.modal-x{ border-radius:50%; }
.field input{ border-radius:14px; }
.fab-tip{ border-radius:999px; }

/* content arrives as the drawer opens */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .aisle-head, .plano-map, .plano-panel, .sheet svg, .sheet-facts li, .counter-preview, .swatches, .logos li, .close h2, .close p{
      animation:arrive linear both; animation-timeline:view(); animation-range:entry 0% entry 85%;
    }
    .sheet-facts li:nth-child(2), .logos li:nth-child(2){ animation-range:entry 5% entry 90%; }
    .sheet-facts li:nth-child(3), .logos li:nth-child(3){ animation-range:entry 10% entry 95%; }
    .logos li:nth-child(4){ animation-range:entry 15% entry 100%; }
    .logos li:nth-child(5){ animation-range:entry 20% exit 0%; }
  }
}
@keyframes arrive{ from{ opacity:0; transform:translateY(48px) scale(.98); } to{ opacity:1; transform:none; } }

@media (max-width:640px){
  .rail{ inset:8px 8px auto; height:calc(var(--rail-h) - 8px); border-radius:18px; }
  .menu{ inset:calc(var(--rail-h) + 6px) 8px auto; }
  .stages{ border-radius:999px; padding:8px 14px; top:calc(var(--rail-h) + 10px); }
  .modal-box{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .label-card{ border-radius:var(--r-md); }
  .price-rail{ left:8px; right:8px; }
}

/* ---------- obra: every stage carries its own text (3D or real video) ---------- */
.obra-scrim{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:linear-gradient(90deg, rgba(17,17,17,.42) 0%, rgba(17,17,17,.12) 45%, transparent 70%),
             linear-gradient(0deg, rgba(17,17,17,.35), transparent 35%);
}
.obra.is-video .obra-scrim{ opacity:1; }
.label-card{ max-width:420px; }
.step-count{ display:inline-flex; align-items:baseline; gap:6px; margin-bottom:10px; font-size:.85rem; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.step-count span{ color:var(--white); background:var(--green-900); padding:3px 10px; border-radius:999px; }
.step-points{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.step-points li{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 10px; border-radius:999px;
  background:var(--beige-100); font-size:.84rem; font-weight:700;
}
.step-points li::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green-500); flex:none; }
.label-card .btn{ margin-top:18px; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .label-card{ animation:card-in linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
  }
}
@keyframes card-in{ from{ opacity:0; transform:translateY(60px) scale(.96); } to{ opacity:1; transform:none; } }

/* ---------- footer: the last shelf ---------- */
.foot{ position:relative; overflow:hidden; padding:clamp(64px, 8vw, 104px) var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.foot-top{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; padding-bottom:40px; }
.foot-brand{ display:grid; align-content:start; justify-items:start; gap:20px; }
.foot-pitch{ max-width:40ch; color:#cfc6b8; font-size:1.02rem; }
.foot-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:20px; }
.foot-cols a{ overflow-wrap:anywhere; }
.foot-cols > div{ display:grid; align-content:start; gap:2px; padding:20px; border-radius:var(--r-md); background:rgba(255,255,255,.04); box-shadow:inset 0 3px 0 var(--green-500); }
.foot-h{ margin:0 0 8px; }
.foot-cols a{ gap:10px; border-radius:12px; padding:0 8px; margin:0 -8px; transition:background .2s; }
.foot-cols a svg{ width:18px; height:18px; flex:none; }
.foot .tag{ width:22px; height:22px; font-size:.72rem; background:var(--green-500); }
@media (hover:hover){ .foot-cols a:hover{ background:rgba(255,255,255,.07); text-decoration:none; } }
.foot-note{ margin-top:10px; font-size:.85rem; color:#bdb3a3; }
.foot-word{
  max-width:1200px; margin:0 auto; font-weight:900; letter-spacing:-.06em; line-height:.78;
  font-size:clamp(5rem, 22vw, 19rem); color:transparent;
  background:linear-gradient(180deg, rgba(201,162,122,.32), rgba(201,162,122,.04)); -webkit-background-clip:text; background-clip:text;
  user-select:none;
}
.foot-base{ max-width:1200px; margin:18px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; color:#bdb3a3; }
.foot-up{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; color:var(--white); text-decoration:none; font-weight:700; background:rgba(255,255,255,.07); transition:background .2s, transform .45s var(--spring); }
.foot-up svg{ width:18px; height:18px; }
@media (hover:hover){ .foot-up:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); } }
@media (max-width:900px){
  .foot-top{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .foot-cols{ grid-template-columns:minmax(0,1fr); }
  .foot-base{ padding-bottom:72px; }
  .label-card{ max-width:none; }
}

/* video: while the headline owns the first viewport, a beige wash keeps the
   black/green type legible; the dark scrim takes over for the stage cards */
.obra.is-video.hero-on .obra-scrim{
  background:linear-gradient(90deg, rgba(250,246,238,.94) 0%, rgba(250,246,238,.78) 38%, rgba(250,246,238,0) 68%),
             linear-gradient(0deg, rgba(250,246,238,.55), rgba(250,246,238,0) 40%);
}
@media (max-width:640px){
  .obra.is-video.hero-on .obra-scrim{
    background:linear-gradient(0deg, rgba(250,246,238,.96) 0%, rgba(250,246,238,.85) 45%, rgba(250,246,238,0) 72%);
  }
}

/* =====================================================================
   1 · Processo: walking the gondola aisle. The section holds still and
   the scroll walks the shelf sideways; the facing at the centre is the
   step you are in. Static row without JS / reduced motion; swipe
   carousel on narrow screens. (Replaces the old drop-onto-shelf motion.)
   ===================================================================== */
.facing{ animation:none !important; }
.facing .code{ transition:color .35s var(--ease); }
.facing.is-active .code{ color:var(--green-900); }
.facing.is-active{ box-shadow:var(--band), var(--shadow-2); }
.walk-meter{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.walk-label{ font-weight:700; font-size:.92rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.walk-label b{ color:var(--black); }
.walk-dots{ list-style:none; margin:0; padding:0; display:flex; gap:8px; }
.walk-dots li{ width:10px; height:10px; border-radius:999px; background:var(--beige-300); transition:width .45s var(--spring), background .3s; }
.walk-dots li.is-on{ width:30px; background:var(--green-900); }

.aisle-walk.is-walking{ padding-top:0; padding-bottom:0; }
.walk.is-pinned{ position:relative; }
.walk.is-pinned .walk-sticky{
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--rail-h) + 28px) 0 32px;
}
.walk.is-pinned .aisle-head{ width:100%; margin-bottom:clamp(24px, 4vh, 48px); }
.walk.is-pinned .gondola{ max-width:none; margin:0 calc(var(--gutter) * -1); }
.walk.is-pinned .gondola-track{
  display:flex; grid-template-columns:none; gap:28px; width:max-content; align-items:flex-end;
  padding:0 var(--pad, 30vw) 64px; transform:translateX(var(--x, 0px)); will-change:transform;
}
.walk.is-pinned .facing{
  flex:0 0 clamp(300px, 28vw, 400px); min-height:clamp(260px, 36vh, 340px);
  transform:scale(var(--s, .9)); opacity:var(--o, .55); transform-origin:50% 100%;
  transition:box-shadow .35s var(--ease);
}
.walk.is-pinned .facing:hover{ transform:scale(var(--s, .9)); }
.walk.is-pinned .facing h3{ font-size:1.6rem; }
.walk.is-pinned .facing p{ font-size:1.02rem; }
.walk.is-pinned .facing .code{ font-size:3.4rem; }
.walk.is-pinned .shelf-board{ left:0; right:0; border-radius:0; }
@media (max-height:760px){ .walk.is-pinned .aisle-head p{ display:none; } }

/* =====================================================================
   Obra · video mode: documentary caption. No card: the type sits on the
   footage, holds still while the scroll scrubs, and swaps with a fade
   when the stage changes. A five-segment bar fills with the video.
   ===================================================================== */
.obra.is-video .obra-scrim{
  background:
    linear-gradient(0deg, rgba(12,12,11,.78) 0%, rgba(12,12,11,.42) 34%, rgba(12,12,11,0) 62%),
    linear-gradient(90deg, rgba(12,12,11,.38) 0%, rgba(12,12,11,0) 55%);
}
.obra.is-video .stages, .obra.is-video .obra-progress{ display:none; }
.obra.is-video .obra-step .label-card{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; box-shadow:none; animation:none; }

.caption{
  position:absolute; left:max(var(--gutter), env(safe-area-inset-left)); right:var(--gutter);
  bottom:clamp(28px, 7vh, 72px); max-width:820px; color:var(--white);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.caption[hidden]{ display:none; }
.obra.hero-on .caption{ opacity:0; transform:translateY(24px); pointer-events:none; }
.cap-body{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px clamp(18px, 2.4vw, 32px); align-items:end; }
.cap-no{
  font-weight:900; font-size:clamp(5.2rem, 11vw, 9.5rem); line-height:.74; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.88); font-variant-numeric:tabular-nums;
  text-shadow:0 12px 40px rgba(0,0,0,.25);
}
.cap-title{ font-weight:900; font-size:clamp(2.4rem, 5vw, 4.4rem); line-height:.92; letter-spacing:-.035em; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.cap-desc{ margin-top:12px; max-width:46ch; font-size:clamp(1rem, 1.3vw, 1.18rem); line-height:1.5; color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(0,0,0,.4); }
.cap-points{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cap-points li{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 11px; border-radius:999px;
  background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  font-size:.86rem; font-weight:700;
}
.cap-points li::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--brown-200); flex:none; }

/* the swap: old line lifts away, new line settles in */
.cap-body.is-out{ opacity:0; transform:translateY(-14px); filter:blur(4px); transition:opacity .22s ease-in, transform .22s ease-in, filter .22s ease-in; }
.cap-body.is-in{ animation:cap-in .7s var(--ease) both; }
.cap-body.is-in .cap-points li{ animation:cap-in .6s var(--ease) both; }
.cap-body.is-in .cap-points li:nth-child(2){ animation-delay:.06s; }
.cap-body.is-in .cap-points li:nth-child(3){ animation-delay:.12s; }
@keyframes cap-in{ from{ opacity:0; transform:translateY(18px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }

.cap-bar{ list-style:none; margin:clamp(22px, 3.4vh, 36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; max-width:640px; }
.cap-bar li{ display:grid; gap:8px; }
.cap-bar .seg{ display:block; height:4px; border-radius:999px; background:rgba(255,255,255,.26); overflow:hidden; }
.cap-bar .seg i{ display:block; height:100%; width:100%; border-radius:inherit; background:var(--white); transform-origin:0 50%; transform:scaleX(var(--f, 0)); }
.cap-bar em{ font-style:normal; font-size:.74rem; font-weight:700; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.cap-bar li.is-now em{ color:var(--white); }

.cap-cta{ position:absolute; right:max(var(--gutter), env(safe-area-inset-right)); bottom:clamp(28px, 7vh, 72px); transition:opacity .4s var(--ease), transform .5s var(--spring); }
.cap-cta[hidden]{ display:none; }

@media (max-width:640px){
  .caption{ left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); }
  .cap-body{ grid-template-columns:minmax(0,1fr); }
  .cap-no{ font-size:4.2rem; -webkit-text-stroke:1.5px rgba(255,255,255,.88); margin-bottom:-4px; }
  .cap-title{ font-size:2.3rem; }
  .cap-desc{ font-size:.98rem; margin-top:8px; }
  .cap-points{ margin-top:12px; }
  .cap-points li{ font-size:.78rem; padding:6px 11px 6px 9px; }
  .cap-bar{ margin-top:18px; gap:5px; max-width:calc(100% - 78px); }
  .cap-bar em{ display:none; }
  .cap-cta{ left:16px; right:auto; bottom:auto; top:calc(var(--rail-h) + 14px); min-height:48px; padding:0 18px; font-size:.95rem; }
  .obra.is-video .obra-note{ left:auto; right:12px; bottom:auto; top:calc(var(--rail-h) + 14px); }
  .obra.is-video .cap-cta:not([hidden]) ~ .obra-note, .obra.is-video.cap-final .obra-note{ display:none; }
}
@media (orientation:landscape) and (max-height:520px){
  .cap-points, .cap-desc{ display:none; }
  .cap-no{ font-size:4rem; }
  .cap-title{ font-size:2rem; }
}
@media (prefers-reduced-motion: reduce){
  .cap-body.is-in, .cap-body.is-in .cap-points li{ animation:none; }
  .cap-body.is-out{ transition:none; }
}

/* 2 · planograma: standard pharmacy floor (door in front, counter at the back) */
.plano-map .floor{ fill:var(--beige-50); }
.plano-map .wall-line{ fill:none; stroke:var(--black); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.plano-map .shelf-back{ fill:var(--brown-600); }
.plano-map .counter{ fill:var(--brown-400); }
.plano-map .counter-front{ fill:var(--green-900); }
.plano-map .shelf-wall{ fill:var(--brown-200); stroke:var(--brown-600); stroke-width:1.5; }
.plano-map .gondolas rect{ fill:var(--green-700); }
.plano-map .caixa{ fill:var(--brown-600); }
.plano-map .imp{ fill:var(--green-500); }
.plano-map .imp-zone{ fill:rgba(47,125,92,.16); stroke:var(--green-900); stroke-width:2; stroke-dasharray:6 6; }
.plano-map .door{ stroke:var(--green-500); stroke-width:6; stroke-linecap:round; }
.plano-map .door-glass{ stroke:var(--green-500); stroke-width:3; stroke-linecap:round; opacity:.55; }
.plano-map .lbl-sm{ font-size:10px; }
.plano-map .lbl-strong{ font-weight:800; fill:var(--black); }
.plano-map .lbl-flow{ font-weight:800; fill:var(--green-900); font-size:11px; }
.plano-map .flow{ stroke-width:26; }
.plano-map .arrow-head{ fill:var(--green-900); }
.plano-map .flow-back{ animation-delay:-.7s; }
.plano-map .cone{ fill:rgba(47,125,92,.14); }
.plano-map .flow.flow-dash{ stroke-width:3; opacity:1; }

/* 4 · acabamentos: true-to-joinery preview (no rounded corners a cabinet does not have) */
.piece-toggle{ display:inline-flex; gap:4px; padding:4px; margin:0 auto 18px; border-radius:999px; background:var(--beige-100); box-shadow:inset 0 0 0 1px var(--beige-200); }
.counter-preview{ display:grid; justify-items:center; }
.piece-toggle button{
  min-height:44px; padding:0 20px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font-weight:700; font-size:.95rem; color:var(--ink-soft); transition:background .25s, color .25s, box-shadow .25s;
}
.piece-toggle button[aria-checked="true"]{ background:var(--white); color:var(--black); box-shadow:var(--shadow-1); }
.pv-stage{ display:grid; width:100%; }
.pv-stage > .pv-piece{ grid-area:1 / 1; width:100%; height:auto; transition:opacity .35s var(--ease), transform .5s var(--spring); }
.pv-piece:not(.is-on){ opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; }
.pv-shadow{ fill:rgba(61,42,28,.16); }
.pv-front, .pv-door{ fill:var(--front); transition:fill .45s var(--ease); }
.pv-side{ fill:var(--front); filter:brightness(.7); transition:fill .45s var(--ease); }
.pv-top{ fill:var(--front); filter:brightness(1.18); transition:fill .45s var(--ease); }
.pv-door{ stroke:rgba(0,0,0,.22); stroke-width:1.5; }
.pv-seam{ stroke:rgba(0,0,0,.26); stroke-width:2; }
.pv-undershade{ fill:rgba(0,0,0,.2); }
.pv-handle{ fill:#d9d3c7; stroke:rgba(0,0,0,.25); stroke-width:1; }
.pv-plinth{ fill:#161616; } .pv-plinth-side{ fill:#0b0b0b; }
.pv-wood-top{ fill:#a8744a; } .pv-wood-edge{ fill:#7b5131; } .pv-wood-side{ fill:#64411f; }
.pv-back{ fill:var(--front); filter:brightness(.82); transition:fill .45s var(--ease); }
.pv-back-top{ fill:var(--front); filter:brightness(.95); transition:fill .45s var(--ease); }
.pv-shelf{ fill:var(--front); filter:brightness(1.12); transition:fill .45s var(--ease); }
.pv-prod{ stroke:rgba(0,0,0,.12); stroke-width:.8; }
@media (max-width:640px){ .piece-toggle button{ padding:0 14px; font-size:.9rem; } }

/* 5 · parceiras: endless logo carousel (pauses on hover/focus and by button) */
.logo-marquee{
  max-width:1200px; margin:0 auto; display:flex; gap:14px; overflow:hidden; padding:10px 0 18px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.logos.logos-track{ max-width:none; margin:0; display:flex; flex:none; gap:14px; grid-template-columns:none; animation:marquee 38s linear infinite; }
.logos-track li{ flex:0 0 clamp(150px, 16vw, 200px); animation:none !important; }
.logo-marquee:hover .logos-track, .logo-marquee:focus-within .logos-track, .logo-marquee.is-paused .logos-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(calc(-100% - 14px)); } }
.marquee-bar{ max-width:1200px; margin:8px auto 0; display:flex; justify-content:center; }
.marquee-toggle{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:999px; cursor:pointer;
  background:var(--white); box-shadow:var(--shadow-1); font-weight:700; font-size:.9rem; color:var(--ink-soft);
  transition:transform .45s var(--spring), box-shadow .3s;
}
.marquee-toggle svg{ width:16px; height:16px; }
.marquee-toggle .i-play{ display:none; }
.marquee-toggle[aria-pressed="true"] .i-play{ display:block; }
.marquee-toggle[aria-pressed="true"] .i-pause{ display:none; }
@media (hover:hover){ .marquee-toggle:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); } }
@media (prefers-reduced-motion: reduce){
  .logo-marquee{ -webkit-mask-image:none; mask-image:none; }
  .logos.logos-track{ animation:none; flex-wrap:wrap; flex:1; justify-content:center; }
  .logos-track[aria-hidden="true"], .marquee-bar{ display:none; }
}