/* ==========================================================================
   SOFÁ OSLO — Stela Giovenardi
   Mobile-first (360–430px como base). Desktop é expansão, não o contrário.
   ========================================================================== */

/* --------------------------------- tokens -------------------------------- */
:root{
  --offwhite:#FBF7F2;
  --cream:#F4ECE2;
  --sand:#EADFD0;
  --sand-2:#DECFBB;
  --clay:#B9906B;
  --terra:#9A5B3C;
  --choco:#2E211A;
  --choco-2:#3D2C22;
  --ink:#241A14;
  --ink-70:#5C4B40;
  --ink-50:#8A7767;
  --line:rgba(36,26,20,.14);
  --line-soft:rgba(36,26,20,.08);
  --green:#4E6B4A;

  /* Cormorant nos títulos, Poppins no texto. Ambas têm pesos reais.
     A Cormorant em 400 é delicada demais para headline de resposta direta;
     600 dá presença sem perder o ar editorial. Trocar aqui muda a página toda. */
  --ff-display:"Cormorant", "Cormorant Garamond", Garamond, Georgia, serif;
  --ff-body:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-display:600;

  --wrap:min(100% - 2.5rem, 68rem);
  --wrap-narrow:min(100% - 2.5rem, 44rem);
  --r:14px;
  --r-lg:20px;
  --tap:48px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--offwhite);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px;border-radius:6px}

.wrap{width:var(--wrap);margin-inline:auto}
.wrap--narrow{width:var(--wrap-narrow)}

section[id]{scroll-margin-top:66px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--choco);color:var(--offwhite);padding:.9rem 1.2rem;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* ------------------------------ tipografia ------------------------------- */
/* A Cormorant tem altura-x baixa e desenho estreito: pede corpo grande e
   entreletra quase neutra. Tracking negativo forte fecha as serifas. */
.h-display{
  font-family:var(--ff-display);
  font-weight:var(--fw-display);
  font-size:clamp(2.4rem,9.6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.006em;
  text-wrap:balance;
}
/* Sem itálico: nenhuma das duas famílias tem itálico real —
   o contraste é feito por cor. */
.h-display em{font-style:normal;color:var(--clay)}
.h-display--sm{font-size:clamp(2.1rem,8vw,3.5rem)}

.h2{
  font-family:var(--ff-display);
  font-weight:var(--fw-display);
  font-size:clamp(2rem,7.4vw,3rem);
  line-height:1.06;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.h2 em{font-style:normal;color:var(--terra)}
.h2--quote{letter-spacing:-.01em}
.sec--dark .h2 em{color:var(--clay)}

.h3{
  font-family:var(--ff-display);
  font-weight:var(--fw-display);
  font-size:clamp(1.35rem,5vw,1.8rem);
  line-height:1.18;
  letter-spacing:0;
}

.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);
}
.eyebrow--dark{color:var(--ink-50)}
.dot{opacity:.5;padding-inline:.15em}

.lede{
  margin-top:1rem;font-size:1.0625rem;color:var(--ink-70);max-width:34ch;
}
.lede--sm{font-size:.98rem}
.sec--dark .lede{color:rgba(251,247,242,.66)}

.prose>p+p{margin-top:.9rem}
.prose{margin-top:1.4rem;color:var(--ink-70);max-width:40ch}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--terra);text-underline-offset:3px}
.prose--rhythm p{color:var(--ink);font-size:1.15rem}
.prose--rhythm>p+p{margin-top:.35rem}

.microcopy{margin-top:.95rem;font-size:.82rem;color:rgba(251,247,242,.8);text-align:center}
.microcopy--dark{color:var(--ink-50)}
.fineprint{margin-top:.8rem;font-size:.76rem;line-height:1.5;color:var(--ink-50)}
.fineprint--light{color:rgba(251,247,242,.5)}
.ph{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.02em;
  color:var(--terra);background:rgba(154,91,60,.09);
  border:1px dashed rgba(154,91,60,.4);border-radius:6px;padding:.15rem .45rem;
}

/* -------------------------------- seções --------------------------------- */
.sec{padding:4.5rem 0}
.sec--tight{padding:2.75rem 0}
.sec--cream{background:var(--cream)}
.sec--sand{background:var(--sand)}
.sec--dark{background:var(--choco);color:var(--offwhite)}

/* -------------------------------- botões --------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:1rem 1.5rem;
  border:1px solid transparent;border-radius:999px;
  font-size:.84rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), opacity .2s;
}
.btn--block{display:flex;width:100%;margin-top:1.5rem}
.btn--sm{padding:.75rem 1.1rem;font-size:.75rem;min-height:44px;white-space:nowrap}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ── HIERARQUIA DE CTA ──────────────────────────────────────────────────
   PRIMÁRIO   .btn--primary  terracota cheio. Existe em DOIS lugares apenas:
                             o CTA de compra do fluxo e o CTA fixo. Não use
                             em mais nenhum ponto da página.
   SECUNDÁRIO .btn--ghost      contorno, fundo claro  (experiência, entrega, FAQ)
              .btn--ghost-inv  contorno, sobre foto   (hero, fechamento)
   TERCIÁRIO  .btn--outline    WhatsApp — nunca compete com a compra.
   Todos os secundários apontam para o mesmo destino: #montar.
   ──────────────────────────────────────────────────────────────────────── */
.btn--primary{background:var(--terra);color:#fff;box-shadow:0 8px 22px -12px rgba(46,33,26,.55)}
.btn--primary:hover{background:#8A5034}
.btn--primary:active{transform:scale(.985)}

/* Só o CTA de compra do fluxo usa este tamanho. */
.btn--xl{padding:1.2rem 1.6rem;font-size:.92rem;min-height:58px}

.btn--outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--outline:hover{background:rgba(36,26,20,.05)}

.btn--ghost{
  background:transparent;color:var(--ink);border-color:rgba(36,26,20,.28);
}
.btn--ghost:hover{background:rgba(36,26,20,.06)}

/* Secundário sobre foto: precisa de véu próprio para não sumir na imagem. */
.btn--ghost-inv{
  background:rgba(251,247,242,.1);
  color:#fff;border-color:rgba(251,247,242,.55);
  backdrop-filter:blur(6px);
  text-shadow:0 1px 12px rgba(24,16,12,.5);
}
.btn--ghost-inv:hover{background:rgba(251,247,242,.2);border-color:rgba(251,247,242,.8)}

.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.linkbtn{
  display:block;margin:1rem auto 0;background:none;border:0;cursor:pointer;
  font-size:.82rem;color:var(--ink-50);text-decoration:underline;text-underline-offset:3px;
  min-height:44px;padding:.5rem 1rem;
}
.linkline{
  display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:600;
  color:var(--terra);text-decoration:underline;text-underline-offset:4px;
  min-height:44px;padding-block:.7rem;
}

/* -------------------------------- topbar --------------------------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(251,247,242,.9);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:1rem}
.brand{text-decoration:none;display:flex;align-items:center}
.brand__mark{display:flex;flex-direction:column;line-height:1}
.brand img{height:26px;width:auto}
.brand__l1{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.25rem;letter-spacing:.02em}
.brand__l2{font-size:.56rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-50)}
.topbar__cta{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--clay);
  padding:.55rem .1rem;
}

/* --------------------------------- hero ---------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--choco);color:var(--offwhite);
  min-height:88svh;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__img,
.hero__video video{
  width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  background:#8a6a52;
}
/* O vídeo entra por cima da imagem já pintada e faz cross-fade ao começar
   a tocar — nada de tela preta nem salto de layout. */
.hero__video{
  position:absolute;inset:0;
  opacity:0;transition:opacity .9s var(--ease);
}
.hero__video.is-ready{opacity:1}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(178deg, rgba(29,20,15,.46) 0%, rgba(29,20,15,.14) 20%, rgba(29,20,15,.62) 52%, rgba(29,20,15,.85) 80%, rgba(29,20,15,.9) 100%);
}
/* Degradê de saída: dissolve a imagem/vídeo na cor exata da próxima seção,
   eliminando o corte seco entre o hero e o bloco creme. */
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(6rem,20vh,12rem);
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(244,236,226,0) 0%,
    rgba(244,236,226,.06) 34%,
    rgba(244,236,226,.35) 62%,
    rgba(244,236,226,.78) 84%,
    var(--cream) 100%);
}
.hero__body{
  position:relative;
  padding-top:min(30vh,14rem);
  padding-bottom:clamp(5.5rem,18vh,10rem);
  text-shadow:0 1px 26px rgba(24,16,12,.55);
}
/* Sobre a parte clara da foto do sofá o clay perde contraste, mesmo em
   negrito: no hero e no fechamento o realce vai para um areia claro. */
.hero .h-display em,
.close .h-display em{color:#EDD2AF}
.hero__body .eyebrow{color:#E4C8A8}
.hero h1{margin-top:.7rem}
.hero__sub{
  margin-top:1.15rem;font-size:.98rem;line-height:1.62;
  color:rgba(251,247,242,.86);max-width:38ch;
}
.hero__sub strong{color:#fff;font-weight:600}
/* Microcopy do hero cai sobre a parte alta do degradê: reforço de sombra
   para o contraste não depender do ponto exato do gradiente. */
.hero .microcopy{color:rgba(251,247,242,.92);text-shadow:0 1px 16px rgba(24,16,12,.8)}
.hero__bullets{
  display:flex;flex-wrap:wrap;gap:.4rem .55rem;margin-top:1.3rem;
  font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.hero__bullets li{
  border:1px solid rgba(251,247,242,.3);border-radius:999px;padding:.42rem .75rem;
  color:rgba(251,247,242,.92);backdrop-filter:blur(2px);
}
/* Faixa de prova: saiu de cima do vídeo e passou para o topo da seção creme,
   onde o contraste é sólido em vez de depender do degradê. */
.sec--afterhero{padding-top:1.75rem}
.proofstrip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  padding-bottom:1.75rem;margin-bottom:2.5rem;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.proofstrip b{
  display:block;font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:1.6rem;line-height:1.05;letter-spacing:-.005em;color:var(--terra);
}
.proofstrip span{display:block;margin-top:.2rem;font-size:.74rem;color:var(--ink-50);line-height:1.3}

/* ------------------------------ cards desejo ----------------------------- */
.cards3{display:grid;gap:.85rem;margin-top:2.25rem}
/* --------------------------- camadas / mecanismo ------------------------- */
.layers__grid{margin-top:2.5rem}
.layers__viz{margin-bottom:2rem}
.viz{
  border:1px solid rgba(251,247,242,.16);border-radius:var(--r-lg);
  padding:.85rem;background:rgba(251,247,242,.04);
}
.viz__band{
  position:relative;border-radius:10px;margin-bottom:.4rem;overflow:hidden;
  display:flex;align-items:center;padding:0 .85rem;
  opacity:.4;transition:opacity .45s var(--ease), transform .45s var(--ease);
  transform:translateY(4px);
}
.viz__band.is-active{opacity:1;transform:none}
.viz__tag{
  position:relative;z-index:2;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.viz__band--foam{height:74px;background:linear-gradient(180deg,#C79E77,#A97A54)}
.viz__band--pocket{height:44px;background:linear-gradient(180deg,#8E6446,#7A5238)}
.viz__band--bonnel{height:30px;background:repeating-linear-gradient(90deg,#6E4A32 0 10px,#5C3D29 10px 20px)}
.viz__band--strap{height:22px;background:repeating-linear-gradient(90deg,#4A3224 0 14px,#5E4130 14px 28px)}
.viz__band--back{height:52px;margin-top:.9rem;background:linear-gradient(180deg,#D9C0A5,#BE9D7E)}
.viz__band--back .viz__tag{color:#31221A;text-shadow:none}
.viz__springs{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;opacity:.5}
.viz__springs i{width:7px;height:26px;border-radius:4px;background:rgba(255,255,255,.5)}
.viz__note{margin-top:.7rem;font-size:.68rem;color:rgba(251,247,242,.42);text-align:center}

.layers__list{display:grid;gap:.15rem}
.layer{
  display:flex;gap:1rem;padding:1.15rem 0;border-top:1px solid rgba(251,247,242,.14);
  transition:opacity .4s var(--ease);
}
.layer:last-child{border-bottom:1px solid rgba(251,247,242,.14)}
.layer__n{
  font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.65rem;line-height:1;letter-spacing:0;color:var(--clay);
  min-width:2rem;padding-top:.15rem;
}
.layer__t{font-size:.86rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.layer__d{margin-top:.4rem;font-size:.95rem;color:rgba(251,247,242,.7)}
.layer.is-active .layer__n{color:#E9C9A6}

/* ------------------------------ comparação ------------------------------- */
.cmp{
  margin-top:2rem;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;
}
.cmp__head{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.cmp__col{
  padding:.85rem .9rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.cmp__col--a{color:var(--ink-50);background:var(--cream)}
.cmp__col--b{color:#fff;background:var(--choco)}
.cmp__row{padding:1rem .9rem;border-bottom:1px solid var(--line-soft)}
.cmp__row:last-child{border-bottom:0}
.cmp__row dt{
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:.55rem;
}
.cmp__row dd{position:relative;padding-left:1.3rem;font-size:.95rem;line-height:1.45}
.cmp__row dd+dd{margin-top:.4rem}
.cmp__a{color:var(--ink-50)}
.cmp__a::before{
  content:"–";position:absolute;left:0;color:var(--ink-50);
}
.cmp__b{color:var(--ink);font-weight:500}
.cmp__b::before{
  content:"";position:absolute;left:.15rem;top:.55em;width:.62rem;height:.34rem;
  border-left:2px solid var(--terra);border-bottom:2px solid var(--terra);
  transform:rotate(-45deg);
}

/* ------------------------------ experiência ------------------------------ */
.video{margin:2rem 0 0}
.video__btn{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--choco);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(46,33,26,.7);
}
.video__poster{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 45%}
.video__btn video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000}
.video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;color:var(--choco);
  background:rgba(251,247,242,.94);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
.video__btn:hover .video__play{transform:translate(-50%,-50%) scale(1.06)}
.video__play svg{margin-left:3px}
.video__hint{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem .9rem .9rem;
  font-size:.78rem;color:rgba(255,255,255,.9);text-align:center;
  background:linear-gradient(0deg,rgba(20,13,9,.72),transparent);
}
.video__hint b{font-weight:400;opacity:.7}
.video.is-playing .video__play,.video.is-playing .video__hint{display:none}

.pullquote{
  margin-top:2rem;font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(1.6rem,5.8vw,2.25rem);
  line-height:1.16;letter-spacing:-.005em;color:var(--ink);text-wrap:balance;
}
.pullquote em{font-style:normal;color:var(--terra);display:block}

/* ------------------- fluxo único: monte o seu Oslo ----------------------- */
.flow__card{
  margin-top:1.75rem;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:1.15rem 1.15rem 1.6rem;
  box-shadow:0 20px 44px -34px rgba(46,33,26,.45);
}

/* Trilha de passos: mostra onde a pessoa está e permite voltar para trocar
   uma escolha sem recomeçar. */
.flow__nav{display:flex;gap:.25rem;margin-bottom:.9rem}
.flow__nav li{flex:1;min-width:0}
.flow__nav button{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:none;border:0;padding:.35rem .1rem;cursor:default;
  color:var(--ink-50);
}
.flow__nav i{
  display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;
  font-style:normal;font-size:.76rem;font-weight:600;
  background:var(--sand);color:var(--ink-50);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.flow__nav span{
  font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* concluído: clicável para revisar */
.flow__nav .is-done button{cursor:pointer;color:var(--terra)}
.flow__nav .is-done i{background:var(--terra);color:#fff}
.flow__nav .is-done button:hover i{transform:scale(1.08)}
/* atual */
.flow__nav .is-now button{color:var(--ink)}
.flow__nav .is-now i{background:var(--choco);color:#fff}

.flow__bar{height:3px;border-radius:3px;background:var(--sand);overflow:hidden;margin-bottom:1.5rem}
.flow__bar span{display:block;height:100%;width:0;background:var(--terra);transition:width .45s var(--ease)}

.flow__step{border:0;padding:0;margin:0;animation:stepIn .45s var(--ease) both}
.flow__q{
  padding:0;font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:1.4rem;line-height:1.24;letter-spacing:0;
}

.opts{display:grid;gap:.55rem;margin-top:1.15rem}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:flex;align-items:center;min-height:var(--tap);
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.98rem;background:var(--offwhite);
  transition:border-color .2s, background-color .2s, transform .2s var(--ease);
}
.opt:active span{transform:scale(.99)}
.opt input:checked+span{
  border-color:var(--terra);background:rgba(154,91,60,.07);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--terra);
}
.opt input:focus-visible+span{outline:2.5px solid var(--terra);outline-offset:2px}

.measure{
  margin-top:1.15rem;padding:1.1rem;border-radius:var(--r);
  background:var(--cream);border:1px solid var(--line-soft);
  animation:stepIn .4s var(--ease) both;
}
.measure__t{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.22rem;line-height:1.26;letter-spacing:0}
.measure__steps{margin-top:.8rem;display:grid;gap:.6rem;counter-reset:m}
.measure__steps li{
  counter-increment:m;position:relative;padding-left:1.9rem;font-size:.92rem;color:var(--ink-70);
}
.measure__steps li::before{
  content:counter(m);position:absolute;left:0;top:.05rem;
  width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sand-2);color:var(--ink);font-size:.7rem;font-weight:600;
}
.measure__specs{margin-top:.8rem;font-size:.9rem}
.measure__specs:empty{display:none}

.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-top:1.15rem}
.sw{position:relative;display:block;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw__box{
  display:block;border-radius:calc(var(--r) + 4px);overflow:hidden;border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
  background:var(--sand);
  box-shadow:0 8px 18px -16px rgba(46,33,26,.5);
}
.sw__img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sw__lb{
  display:block;padding:.6rem .3rem;text-align:center;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;background:#fff;
}
.sw:hover .sw__box{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(46,33,26,.55)}
.sw input:checked+.sw__box{
  border-color:var(--terra);box-shadow:0 0 0 2px var(--terra), 0 12px 26px -16px rgba(46,33,26,.6);
  transform:translateY(-2px);
}
.sw input:checked+.sw__box .sw__lb{background:var(--terra);color:#fff}
.sw input:focus-visible+.sw__box{outline:2.5px solid var(--choco);outline-offset:3px}
.sw__check{
  position:absolute;top:.55rem;right:.55rem;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--terra);color:#fff;display:grid;place-items:center;font-size:.72rem;
  opacity:0;transform:scale(.6);transition:.25s var(--ease);
  box-shadow:0 4px 10px -4px rgba(46,33,26,.6);
}
.sw input:checked~.sw__check{opacity:1;transform:none}

@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sizes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.15rem}
.size{position:relative;display:block;cursor:pointer}
.size input{position:absolute;opacity:0;width:0;height:0}
.size__box{
  display:flex;flex-direction:column;gap:.55rem;height:100%;
  padding:1.05rem .95rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:.25s var(--ease);
}
.size__n{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.85rem;line-height:1;letter-spacing:-.005em}
.size__u{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.size__rule{height:26px;display:flex;align-items:flex-end;gap:2px}
.size__rule i{display:block;flex:1;background:var(--sand-2);border-radius:1px}
.size__note{font-size:.8rem;line-height:1.4;color:var(--ink-70)}
.size__dims{font-size:.74rem;color:var(--ink-50)}
.size input:checked+.size__box{
  border-color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra);background:rgba(154,91,60,.05);
}
.size input:checked+.size__box .size__rule i{background:var(--clay)}
.size input:focus-visible+.size__box{outline:2.5px solid var(--terra);outline-offset:3px}

/* resultado */
.result{
  margin-top:1.15rem;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line-soft);box-shadow:0 24px 50px -38px rgba(46,33,26,.55);
  overflow:hidden;
}
.result__empty{padding:1.6rem 1.3rem;color:var(--ink-70);font-size:.95rem}
.result__edit{margin-top:.6rem;font-size:.8rem;color:var(--ink-50)}
.result__edit button{
  background:none;border:0;padding:.4rem 0;cursor:pointer;
  color:var(--terra);text-decoration:underline;text-underline-offset:3px;font-size:.8rem;
}
.result__empty b{color:var(--ink)}
.result__full{padding:1.3rem}
.result__swatch{
  margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand);
  aspect-ratio:3/1;
}
.result__swatch img{width:100%;height:100%;object-fit:cover}
.result__kicker{
  margin-top:1.1rem;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);
}
.result__spec{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.85rem;line-height:1.1;letter-spacing:-.005em;margin-top:.4rem}

.result__price{
  margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;
}
/* Preço na Poppins 600: é o número mais importante da página e o negrito
   real da Poppins sustenta melhor que a serifada em corpo grande. */
.price__main{font-family:var(--ff-body);font-weight:600;font-size:2.1rem;line-height:1.1;letter-spacing:-.02em}
.price__main.is-ph{font-family:var(--ff-body);font-size:1.05rem;color:var(--terra)}
.price__inst{margin-top:.5rem;font-size:.98rem;color:var(--ink-70)}
.price__inst b{color:var(--ink);font-weight:600}
.price__pix{
  margin-top:.6rem;display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;border-radius:999px;background:rgba(78,107,74,.1);
  color:#3C5439;font-size:.9rem;font-weight:600;
}
.price__note{margin-top:.6rem;font-size:.76rem;color:var(--ink-50)}
.price__note:empty{display:none}

.avail{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line-soft)}
.avail__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.avail__badge::before{
  content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor;
}
.avail__badge.is-ready{color:var(--green)}
.avail__badge.is-order{color:var(--clay)}
.avail__badge.is-unknown{color:var(--ink-50)}
.avail__lead{margin-top:.4rem;font-size:.95rem;color:var(--ink-70)}
.avail__warn{
  margin-top:.75rem;padding:.8rem .9rem;border-radius:var(--r);
  background:var(--cream);border:1px solid var(--line-soft);
  font-size:.86rem;line-height:1.5;color:var(--ink-70);
}

.result__incl{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem;
  padding-top:1.15rem;border-top:1px solid var(--line-soft);
}
.result__incl li{
  font-size:.73rem;color:var(--ink-70);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;
}

/* ------------------------------- whatsapp -------------------------------- */
.wa__box{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.25rem;
  background:var(--offwhite);
}
.wa__box p{margin-top:.7rem;font-size:.95rem;color:var(--ink-70)}
.wa__box .btn{margin-top:1.2rem;width:100%}
.wa__box .fineprint:empty{display:none}

/* ------------------------------- condições ------------------------------- */
.conds{display:grid;gap:.6rem;margin-top:2rem}
.cond{
  padding:1.15rem 1.2rem;border-radius:var(--r);
  background:var(--cream);border:1px solid var(--line-soft);
}
.cond h3{
  font-family:var(--ff-body);font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--terra);
}
.cond p{margin-top:.4rem;font-size:.95rem;color:var(--ink-70)}

/* ----------------------------- prova social ------------------------------ */
.score{
  display:flex;gap:1.25rem;align-items:center;margin-top:2rem;
  padding:1.3rem;border-radius:var(--r-lg);
  border:1px solid rgba(251,247,242,.18);background:rgba(251,247,242,.05);
}
.score__n{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:2.7rem;line-height:1;letter-spacing:-.008em}
.score__a .score__n{color:#F0D3AE}
.score__l{margin-top:.2rem;font-size:.76rem;color:rgba(251,247,242,.62);line-height:1.35}
.score__b{padding-left:1.25rem;border-left:1px solid rgba(251,247,242,.18)}

.reviews{display:grid;gap:.7rem;margin-top:1.5rem}
.rev{
  padding:1.2rem;border-radius:var(--r-lg);
  background:rgba(251,247,242,.06);border:1px solid rgba(251,247,242,.16);
}
.rev__top{display:flex;align-items:center;gap:.7rem}
.rev__av{
  width:2.3rem;height:2.3rem;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--clay);color:#2B1D15;font-weight:600;font-size:.95rem;
}
.rev__nm{font-size:.92rem;font-weight:600}
.rev__mt{font-size:.7rem;color:rgba(251,247,242,.5)}
.rev__st{margin-top:.7rem;font-size:.8rem;color:#F0C98A;letter-spacing:.1em}
.rev__st span{color:rgba(251,247,242,.45);letter-spacing:0;margin-left:.5rem;font-size:.72rem}
.rev__tx{margin-top:.6rem;font-size:.9rem;line-height:1.55;color:rgba(251,247,242,.82)}
.rev__src{
  margin-top:.8rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(251,247,242,.42);
}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.5rem;text-align:center}
.stats li{padding:1.1rem .4rem;border-radius:var(--r);background:rgba(251,247,242,.05);border:1px solid rgba(251,247,242,.14)}
.stats b{display:block;font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.7rem;line-height:1.05;letter-spacing:-.005em;color:#F0D3AE}
.stats span{display:block;margin-top:.35rem;font-size:.7rem;color:rgba(251,247,242,.6);line-height:1.3}

/* --------------------------------- lojas --------------------------------- */
.storeList{display:grid;gap:.7rem;margin-top:2rem}
.store{
  border:1px solid rgba(36,26,20,.16);border-radius:var(--r-lg);overflow:hidden;
  background:var(--offwhite);
}
.store__ph{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sand-2)}
.store__body{padding:1.15rem 1.2rem}
.store__tag{
  display:inline-block;font-size:.63rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--terra);
  border-radius:999px;padding:.28rem .6rem;margin-bottom:.6rem;
}
.store__nm{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.45rem;line-height:1.16;letter-spacing:0}
.store__ct{margin-top:.25rem;font-size:.85rem;color:var(--ink-70)}
.store__ad{margin-top:.5rem;font-size:.85rem;color:var(--ink-70)}
.store__lk{
  display:inline-block;margin-top:.7rem;font-size:.78rem;font-weight:600;
  color:var(--terra);text-decoration:underline;text-underline-offset:3px;
  min-height:44px;padding-block:.75rem;
}

.sec--cream .btn--ghost{margin-top:1.5rem}

/* -------------------------------- garantia ------------------------------- */
.warranty{
  padding:1.4rem 1.3rem;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--cream);
}
.warranty__list{margin-top:.9rem;display:grid;gap:.4rem}
.warranty__list li{position:relative;padding-left:1.1rem;font-size:.95rem;color:var(--ink-70)}
.warranty__list li::before{
  content:"";position:absolute;left:0;top:.6em;width:.35rem;height:.35rem;border-radius:50%;background:var(--clay);
}

/* ---------------------------------- faq ---------------------------------- */
.faq__list{margin-top:1.75rem;border-top:1px solid var(--line)}
.faq .btn{margin-top:2rem}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem .25rem;min-height:var(--tap);
  font-size:1rem;font-weight:600;line-height:1.35;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:0 0 auto;width:.72rem;height:.72rem;margin-top:.35rem;
  border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(225deg)}
.qa__a{padding:0 .25rem 1.25rem;font-size:.95rem;line-height:1.6;color:var(--ink-70);max-width:52ch}
.qa__a>p+p{margin-top:.7rem}
.qa__a a{color:var(--terra)}
.qa[open] .qa__a{animation:stepIn .35s var(--ease) both}

/* ------------------------------- fechamento ------------------------------ */
.close{position:relative;isolation:isolate;background:var(--choco);color:var(--offwhite)}
.close__media{position:absolute;inset:0;z-index:-1}
.close__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.close__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,20,15,.55) 0%,rgba(29,20,15,.35) 30%,rgba(29,20,15,.88) 100%);
}
.close__body{padding:min(38vh,15rem) 0 4rem;text-shadow:0 1px 20px rgba(24,16,12,.45)}
.close__sub{margin-top:1.1rem;font-size:.98rem;color:rgba(251,247,242,.85);max-width:40ch}

/* --------------------------------- footer -------------------------------- */
.foot{background:var(--choco-2);color:rgba(251,247,242,.62);padding:2.5rem 0 6.5rem;text-align:center}
.foot__brand{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;color:var(--offwhite)}
.foot__l{margin-top:.6rem;font-size:.78rem;line-height:1.6}
.foot__l--ph{margin-top:1.1rem}
.foot .ph{color:#E4C0A2;background:rgba(228,192,162,.1);border-color:rgba(228,192,162,.35)}

/* ------------------------------- dock (CTA) ------------------------------ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:.6rem max(.75rem,env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(251,247,242,.94);
  backdrop-filter:blur(12px) saturate(1.2);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .4s var(--ease);
}
.dock.is-vis{transform:none}
.dock__in{
  width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:.85rem;
}
.dock__txt{min-width:0}
.dock__l{
  display:block;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dock__v{
  display:block;font-family:var(--ff-body);font-weight:600;font-size:.94rem;line-height:1.25;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ------------------------------- reveal ---------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}

/* ============================ 480px + ============================ */
@media (min-width:30em){
  .swatches{gap:.75rem}
  .cards3,.conds,.storeList{gap:.9rem}
}

/* ============================ 640px + ============================ */
@media (min-width:40em){
  body{font-size:1.09375rem}
  .sec{padding:6rem 0}
  .cards3{grid-template-columns:repeat(3,1fr)}
  .conds{grid-template-columns:repeat(2,1fr)}
  .swatches{grid-template-columns:repeat(6,1fr)}
  .btn--block{width:auto;display:inline-flex;min-width:min(100%,26rem)}
  .flow__card{padding:1.6rem 1.9rem 2.25rem}
  .flow__nav span{font-size:.68rem}
  .flow__q{font-size:1.6rem}
  .result__full{padding:1.9rem}
  .result__swatch{aspect-ratio:4/1}
  .hero__body{padding-top:min(30vh,16rem)}
  .proofstrip{gap:1rem}
  .proofstrip b{font-size:1.8rem}
  .microcopy{text-align:left}
  .storeList{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:1fr 1fr;gap:.9rem}
  .video__poster{aspect-ratio:16/10}
  .video__btn video{aspect-ratio:9/16;max-height:78vh;margin-inline:auto;width:auto}
}

/* ============================ 900px + ============================ */
@media (min-width:56em){
  .sec{padding:7.5rem 0}
  .h2{font-size:clamp(2.4rem,4.3vw,3.2rem)}
  .lede{font-size:1.15rem}
  .conds{grid-template-columns:repeat(5,1fr)}
  .cond{padding:1.4rem 1.3rem}
  .layers__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
  .layers__viz{position:sticky;top:6rem;margin-bottom:0}
  .viz__band--foam{height:110px}
  .viz__band--pocket{height:64px}
  .viz__band--bonnel{height:40px}
  .viz__band--strap{height:28px}
  .viz__band--back{height:72px}
  .cmp__row{display:grid;grid-template-columns:14rem 1fr 1fr;gap:1.5rem;align-items:baseline;padding:1.2rem 1.1rem}
  .cmp__row dt{margin-bottom:0}
  .cmp__row dd+dd{margin-top:0}
  .cmp__head{grid-template-columns:14rem 1fr 1fr;gap:1.5rem;padding-inline:1.1rem}
  .cmp__head::before{content:""}
  .cmp__col{background:transparent!important;padding:.9rem 0}
  .cmp__col--a{color:var(--ink-50)}
  .cmp__col--b{color:var(--terra)}
  .sizes{grid-template-columns:repeat(2,minmax(0,18rem))}
  .result__full{
    display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;align-items:start;
    padding:2.25rem;
  }
  .result__swatch{grid-column:1;aspect-ratio:4/3;border-radius:var(--r-lg)}
  .result__id{grid-column:1;margin-top:1.25rem}
  .result__price{grid-column:2;grid-row:1/3;margin-top:0;padding-top:0;border-top:0}
  .avail{grid-column:2;padding-top:1.5rem}
  .result__full .btn{grid-column:2;margin-top:1.5rem;width:100%}
  .result__full .microcopy{grid-column:2}
  .result__incl{grid-column:1/-1}
  .hero__body{padding-top:min(32vh,20rem)}
  .hero{min-height:92svh}
  .proofstrip{grid-template-columns:repeat(3,minmax(0,14rem));text-align:left;gap:2.5rem}
  .proofstrip b{font-size:2rem}
  .hero__sub{font-size:1.09375rem}
  .score{gap:2.5rem;padding:2rem 2.25rem}
  .score__n{font-size:3.4rem}
  .stats{max-width:44rem}
  .close__body{padding:min(42vh,20rem) 0 5rem}
  .dock__in{width:var(--wrap)}
  .foot{padding-bottom:7rem}
}

/* ============================ 1200px + ============================ */
@media (min-width:75em){
  .reviews{grid-template-columns:repeat(4,1fr);gap:1rem}
  .hero__media img{object-position:52% 50%}
}

/* ==========================================================================
   MOBILE: TEXTO CENTRALIZADO
   Vale só até 640px. Acima disso a página volta a ser alinhada à esquerda,
   porque linha longa centralizada custa legibilidade (a borda esquerda do
   texto deixa de ser previsível para o olho).
   Fica no fim do arquivo de propósito: precisa vencer as media queries de
   min-width acima em viewports pequenos.
   ========================================================================== */
@media (max-width:39.999em){
  .hero__body,
  .sec .wrap,
  .close__body,
  .cond,
  .store__body,
  .wa__box,
  .warranty,
  .result__full,
  .result__empty,
  .size__box,
  .rev,
  .qa__a,
  .flow__q,
  .measure{
    text-align:center;
  }

  /* Blocos com largura máxima precisam de margem automática para o
     text-align:center do pai realmente centralizar a caixa. */
  .prose,.lede,.hero__sub,.close__sub,.qa__a,.result__empty p{
    margin-inline:auto;
  }

  .hero__bullets,
  .hero__ctas,
  .result__incl,
  .cmp__head,
  .rev__top{
    justify-content:center;
  }

  .opt span{justify-content:center}
  .viz__tag{width:100%;text-align:center}
  .viz__band{justify-content:center}

  /* Itens com marcador posicionado à esquerda: o marcador vira inline,
     senão o texto centralizado descola dele. */
  .measure__steps li{padding-left:0}
  .measure__steps li::before{
    position:static;display:inline-grid;vertical-align:.05em;margin-right:.45rem;
  }
  .warranty__list li{padding-left:0}
  .warranty__list li::before{
    position:static;display:inline-block;vertical-align:.18em;margin-right:.5rem;
  }
  .cmp__row dd{padding-left:0}
  .cmp__a::before{position:static;margin-right:.35rem}
  .cmp__b::before{
    position:static;display:inline-block;vertical-align:.28em;margin-right:.5rem;
  }

  /* Camadas: cards de 2 em 2, para encurtar a página. */
  .layers__list{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .layer{
    flex-direction:column;align-items:center;text-align:center;gap:.3rem;
    border-top:0;padding:1rem .7rem;
    border:1px solid rgba(251,247,242,.14);border-radius:var(--r-lg);
    background:rgba(251,247,242,.04);
  }
  .layer__n{min-width:0;padding-top:0;font-size:1.35rem}
  .layer__t{font-size:.72rem}
  .layer__d{font-size:.82rem;margin-top:.3rem}

  /* Avaliação no Google: lado a lado, versão compacta. */
  .score{gap:1rem;padding:1rem;text-align:center}
  .score__n{font-size:2rem}
  .score__l{font-size:.68rem}
  .score__b{padding-left:1rem}

  /* FAQ: pergunta centralizada com a seta logo depois do texto. */
  .qa summary{justify-content:center;text-align:center;gap:.6rem}
  .qa summary::after{margin-top:.5rem}

  .avail__lead,.avail__warn,.price__note,.fineprint,.result__edit{text-align:center}

  /* A barra fixa e o topo continuam alinhados: são interface, não texto
     corrido — centralizar quebraria a relação com o botão ao lado. */
}

/* ==========================================================================
   DINAMISMO — micro-interações e movimento de entrada
   Tudo aqui respeita a mesma régua do resto do site: sutil, com --ease,
   e neutralizado por completo no bloco "motion reduzido" abaixo (que usa
   !important e sempre vence, então não precisa repetir a checagem aqui).
   ========================================================================== */

/* Hero: leve parallax entre a foto/vídeo de fundo e o texto por cima —
   dá profundidade sem custo de layout. --hero-py é escrito via app.js
   (rAF, com teto de deslocamento) e o scale garante que a borda nunca
   apareça enquanto a camada se move. */
.hero__media{
  transform:scale(1.12) translateY(var(--hero-py, 0px));
  transform-origin:center;
}

/* Botões primários: elevação no hover + brilho diagonal que atravessa,
   reforçando o único CTA de compra sem virar banner. */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.3) 50%, transparent 68%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(46,33,26,.65)}
.btn--outline:active,.btn--ghost:active,.btn--ghost-inv:active{transform:scale(.98)}

/* Cartões e listas: elevação no hover — só em ponteiro com hover real,
   pra não deixar o cartão "preso" no estado de toque em celular. */
@media (hover:hover){
  .cond{transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
  .cond:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(46,33,26,.45);border-color:rgba(154,91,60,.3)}

  .store{transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
  .store:hover{transform:translateY(-3px);box-shadow:0 18px 32px -22px rgba(46,33,26,.35)}

  .stats li{transition:transform .3s var(--ease), background-color .3s var(--ease)}
  .stats li:hover{transform:translateY(-2px);background:rgba(251,247,242,.09)}

  .reviewsImgs img{transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
  .reviewsImgs img:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px -12px rgba(0,0,0,.35)}
}

/* Seleção de tamanho/tecido: um "pop" rápido no instante da escolha —
   soma-se ao estado final (translateY/borda) que já existia. */
@keyframes selectPop{0%{transform:scale(.94)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.sw input:checked+.sw__box{animation:selectPop .3s var(--ease)}
.size input:checked+.size__box{animation:selectPop .3s var(--ease)}

/* Resumo (preço/disponibilidade): sobe com fade sempre que o passo é
   exibido, reaproveitando o keyframe que os próprios passos já usam. */
.result__full{animation:stepIn .5s var(--ease) both}

/* Contadores numéricos (prova social) — ver app.js. */
.score__n,.stats b{font-variant-numeric:tabular-nums}

/* --------------------------- motion reduzido ----------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .viz__band{opacity:1;transform:none}
  .dock{transform:none}
  .dock:not(.is-vis){display:none}
  .hero__media{transform:none}
  .btn--primary::after{display:none}
}