/* ═══════════════════════════════════════════════════════════════════════════
   EQUIPHARMA · LisinaEqui GH — PREVIEW
   Conceito: EQUINE PERFORMANCE LAB.
   Carbono e osso. O amarelo do produto é sinal, não decoração: aparece em
   marcador, régua, número e foco, nunca em borda, brilho ou gradiente.
   Nada de dourado ornamental.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --carbon:   #0A0B0B;
  --carbon-2: #141616;
  --bone:     #ECE5D8;
  --bone-2:   #DCD2C0;
  --steel:    #82878A;
  --amber:    #D89727;
  --brown:    #33251D;
  /* amostrado do rótulo no filme (frames 61, 73, 169) */
  --yellow:   #E3B318;

  --on-carbon:      #ECE5D8;
  --on-carbon-soft: #9DA1A3;   /* 7,0:1 sobre carbono */
  --ink:            #14161A;
  --ink-soft:       #50555A;   /* 5,0:1 sobre osso-2, medido */
  --line-d: rgba(236,229,216,.16);
  --line-l: rgba(20,22,26,.16);

  --disp: "Archivo", "Helvetica Neue", sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --e:  cubic-bezier(.22,.66,.24,1);
  --gut: 20px;
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; }
body{
  margin:0; background:var(--carbon); color:var(--on-carbon);
  font-family:var(--body); font-size:16.5px; line-height:1.6;
  overflow-x:clip; -webkit-text-size-adjust:100%;
}
body.is-loading{ overflow:hidden; height:100vh; }
/* height:auto é OBRIGATÓRIO aqui. Sem ele o atributo height="..." do HTML
   vira altura fixa em CSS, o width:100% estica a largura e a imagem DEFORMA.
   Foi o que aconteceu com a foto do produto: 1600x900 renderizando 493x941. */
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }
::selection{ background:var(--amber); color:var(--carbon); }

:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; border-radius:2px; }
.buy :focus-visible, .tec :focus-visible, .co-body :focus-visible{ outline-color:#6E4C00; }

.skip{ position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--amber); color:var(--carbon); padding:14px 20px; font-weight:700; }
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ── display condensado: o eixo de largura do Archivo faz o trabalho ── */
.h2,.h-hero,.h-materia,.h-produto,.h-perf,.h-rotina,.h-buy,.h-final{
  font-family:var(--disp);
  font-variation-settings:"wdth" 79, "wght" 800;
  line-height:.88; letter-spacing:-.018em; margin:0;
  text-transform:uppercase; text-wrap:balance;
}
.h2 em,.h-hero em,.h-materia em,.h-produto em,.h-perf em,.h-rotina em,
.h-buy em,.h-final em{ font-style:normal; color:var(--amber); }
/* display:block SÓ onde o <em> não vem precedido de <br>. Nos títulos que já
   quebram a linha no HTML, o block criava uma linha vazia extra.
   Sem isto o .h2 saía "FICHADO PRODUTO." em vez de "FICHA / DO PRODUTO."  */
.h2 em{ display:block; }
/* cena clara: âmbar sobre pó dá 1,9:1. O destaque passa a ser o peso. */
.ch-materia em{ color:var(--bone); opacity:.72; }
.h2{ font-size:clamp(2.6rem,11vw,3.6rem); }

/* rótulo micro: número, régua e palavra. A régua é a medida da marca. */
.lbl{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font-family:var(--body); font-size:12.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-carbon-soft);
}
.lbl b{ color:var(--amber); font-weight:700; }
.lbl i{
  width:38px; height:7px; flex:none; opacity:.55;
  background:repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 7px);
}
.lbl-dark{ color:var(--ink-soft); }
.lbl-dark b{ color:#6E4C00; }
.lbl-hero{ letter-spacing:.24em; }

/* ── botões: retos, sem raio, sem brilho ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:15px 30px;
  background:var(--amber); color:var(--carbon);
  font-family:var(--body); font-size:15px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  border:0; border-radius:0; cursor:pointer;
  transition:background-color .2s var(--e), transform .18s var(--e);
}
.btn:hover{ background:#F0AC33; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:progress; }
.btn-sm{ min-height:44px; padding:11px 20px; font-size:13px; }
.btn-lg{ min-height:60px; padding:18px 38px; font-size:16px; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:15px 2px;
  font-size:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:inherit; white-space:nowrap; border-bottom:1px solid currentColor;
}

/* ══════════════════════════ BADGE DE PREVIEW ══════════════════════════ */
/* No celular os capítulos são ancorados embaixo: a badge ali brigava com a
   última linha do texto. Sobe para o topo, colada ao cabeçalho.         */
.preview-badge{
  position:fixed; z-index:300; right:var(--gut); top:calc(56px + env(safe-area-inset-top));
  padding:6px 10px; background:var(--carbon); color:var(--amber);
  border:1px solid var(--amber);
  font-family:var(--body); font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; pointer-events:none;
  transition:opacity .2s linear;
}
/* com o checkout aberto a badge cobria o título da etapa. Ela some: o próprio
   checkout já se anuncia como demonstrativo em três lugares.            */
body.co-aberto .preview-badge{ opacity:0; }

/* ══════════════════════════ LOADER ══════════════════════════
   Um marcador de dose percorrendo uma régua. Sem spinner, sem sci-fi. */
#loader{
  position:fixed; inset:0; z-index:250; display:grid; place-items:center;
  background:var(--carbon);
  transition:opacity .6s var(--e), visibility .6s;
}
body.ready #loader{ opacity:0; visibility:hidden; }
.ld-in{ width:min(78vw, 460px); }
.ld-brand{
  margin:0 0 22px; font-family:var(--disp);
  font-variation-settings:"wdth" 79,"wght" 800;
  font-size:22px; letter-spacing:.26em; color:var(--on-carbon);
}
.ld-rule{ position:relative; }
.ld-track{ display:block; height:2px; background:var(--line-d); position:relative; }
.ld-track i{ display:block; height:100%; width:0; background:var(--amber); }
.ld-mark{
  position:absolute; top:-9px; left:0; width:2px; height:20px;
  background:var(--bone);
}
.ld-ticks{
  display:flex; justify-content:space-between; margin-top:14px;
  font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--steel);
}

/* ══════════════════════════ HEADER ══════════════════════════ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:120;
  display:flex; align-items:center; gap:16px; padding:14px var(--gut);
  background:transparent;
  transition:background-color .35s var(--e), border-color .35s var(--e);
  border-bottom:1px solid transparent;
}
.hdr.stuck{ background:rgba(10,11,11,.92); border-bottom-color:var(--line-d); }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; min-height:44px; }
.brand-mark{
  width:16px; height:16px; flex:none; background:var(--amber);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b{
  font-family:var(--disp); font-variation-settings:"wdth" 79,"wght" 800;
  font-size:17px; letter-spacing:.14em;
}
.brand-txt i{ font-style:normal; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.hdr-nav{ display:none; }
.hdr-cta{ display:none; }
.burger{ width:44px; height:44px; flex:none; padding:0; cursor:pointer;
  display:grid; place-content:center; gap:5px; background:none; border:0; }
.burger span{ display:block; width:20px; height:2px; background:var(--bone); }

.menu{
  position:fixed; inset:0; z-index:130; background:var(--carbon);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:0 var(--gut);
}
.menu a{
  display:flex; align-items:center; min-height:64px;
  font-family:var(--disp); font-variation-settings:"wdth" 79,"wght" 800;
  font-size:clamp(2rem,12vw,3rem); text-transform:uppercase; letter-spacing:-.01em;
}
.menu .menu-cta{ margin-top:26px; justify-content:center; }

/* ══════════════════════════ ATO ══════════════════════════ */
/* 860vh: com 760 as sete cenas ficavam corridas, sobrava pouco mais
   de 100vh por capítulo. Ajustado depois de ver o ritmo real.   */
.act{ position:relative; height:860vh; }
.stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--carbon); }
.film{ position:absolute; inset:0; }
.film-poster,#cv{ position:absolute; inset:0; width:100%; height:100%; }
.film-poster{ object-fit:cover; object-position:50% 50%; }
#cv{ opacity:0; transition:opacity .45s var(--e); }
.stage.live #cv{ opacity:1; }
/* leve queda nas bordas: o filme já é escuro nos cantos, isso só firma o texto */
/* A vinheta é dinâmica: --vig sobe nas cenas CLARAS (pó macro e produto ao
   sol), onde o osso caía para 2,3:1. Medido quadro a quadro, não chutado.
   Não é tarja: é queda de borda, o mesmo recurso do próprio filme.      */
.vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(118% 92% at 50% 44%,
    transparent 34%, rgba(6,7,7, calc(var(--vig, .58))) 100%);
  transition:background .25s linear;
}

/* A vinheta é radial e o texto dos capítulos mora no meio, onde ela é fraca:
   medindo os pixels do canvas, o hero caía para 2,28:1 sobre o pó claro.
   Este scrim é DIRECIONAL, ligado só nas duas cenas claras e só do lado em
   que o texto assenta. Não é tarja: é queda graduada, some no meio do quadro.
   No celular o texto é ancorado embaixo, então a direção muda.            */
.scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:var(--scrim, 0); transition:opacity .25s linear;
  background:linear-gradient(to top,
    rgba(10,11,11,.90) 0%, rgba(10,11,11,.72) 34%,
    rgba(10,11,11,.28) 62%, rgba(10,11,11,0) 86%);
}

.ch{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:86px var(--gut) calc(46px + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; color:var(--on-carbon);
}
.ch.on{ visibility:visible; }
/* o rótulo dentro do capítulo usa osso, não aço: sobre o pó claro o aço
   dava 3,78:1 no celular. Medido no canvas, não estimado.              */
.ch .lbl{ color:var(--bone); }

/* S1 matéria: topo, o material fica livre embaixo */
.ch-materia{ justify-content:flex-start; padding-top:clamp(96px,17vh,180px); }
.h-materia{ font-size:clamp(2.7rem,14vw,4.2rem); }

/* HERO: tipografia monumental, linhas escalonadas */
.h-hero{ font-size:clamp(3.2rem,17vw,5.6rem); }
.h-hero span{ display:block; }
.h-hero span:nth-child(2){ margin-left:clamp(10px,5vw,52px); }
.h-hero span:nth-child(3){ margin-left:clamp(20px,10vw,104px); }
.hero-prod{
  margin:22px 0 0; font-family:var(--disp);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:15px; letter-spacing:.3em; text-transform:uppercase; color:var(--yellow);
}
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:24px; }

/* S3 produto: bloco à esquerda, o maior respiro do filme */
.ch-produto{ justify-content:center; }
.h-produto{ font-size:clamp(2.6rem,13vw,4.4rem); }
.h-produto em{ display:block; }
/* some abaixo de 720px: ali o balde ocupa o centro do recorte e a lista
   assentava em cima do rótulo dele. A mesma informação está na compra. */
.meta-produto{ display:none; }
@media (min-width:720px){ .meta-produto{ margin:26px 0 0; display:grid; gap:12px; } }
.meta-produto div{ display:flex; gap:12px; align-items:baseline; }
.meta-produto dt{
  min-width:112px; font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.meta-produto dd{ margin:0; font-size:15.5px; font-weight:600; }
.pend{ color:var(--steel); font-style:italic; font-weight:400; }

/* S4 performance: interface some, headline monumental no topo */
.ch-perf{ justify-content:flex-start; padding-top:clamp(92px,15vh,160px); }
.h-perf{ font-size:clamp(2.7rem,13.5vw,4.8rem); }

/* S5 contexto: canto inferior, linha curta */
.h-contexto{
  margin:0; max-width:32ch; font-size:clamp(1rem,4.2vw,1.42rem);
  line-height:1.38; font-weight:700; color:var(--bone);
}

/* S6 rotina: topo escuro */
.ch-rotina{ justify-content:flex-start; padding-top:clamp(92px,15vh,170px); }
.h-rotina{ font-size:clamp(2.5rem,12.5vw,4.2rem); }

/* ══════════════════════════ COMPRA ══════════════════════════
   O filme segura o último quadro e este bloco nasce por cima dele: o topo é
   transparente e vira osso, então o produto atravessa da cena para a loja. */
.sec{ position:relative; z-index:6; }
.buy{
  position:relative;
  /* A queda é em PIXEL, não em porcentagem: o bloco tem 1344px no desktop e
     1736px no celular, e com 40% o rótulo "05 / COMPRAR" caía em 35,9% —
     texto escuro sobre fundo escuro. Em pixel o ponto é o mesmo nos dois.
     Sem cor sólida por baixo, senão o topo nasce opaco e vira linha dura
     contra o quadro final do filme.                                      */
  background:linear-gradient(to bottom,
    transparent 0 var(--fade), var(--bone) var(--fade));
  --fade:340px;
  color:var(--ink);
  padding:clamp(140px,26vw,260px) 0 clamp(64px,10vw,110px);
  margin-top:-42vh;                    /* sobe sobre o quadro final        */
  /* --nasce vai de 0 a 1 nos últimos 16% do ato: o produto atravessa da
     cena para a loja sem passar por tela preta                          */
  opacity:calc(.15 + var(--nasce, 1) * .85);
  transform:translateY(calc((1 - var(--nasce, 1)) * 26px));
}
/* o esmaecido do carbono para o osso, atrás do conteúdo */
.buy::before{
  content:''; position:absolute; left:0; right:0; top:0; height:var(--fade);
  background:linear-gradient(to bottom,
    rgba(10,11,11,0) 0%, rgba(12,12,12,.30) 26%,
    rgba(80,76,66,.62) 62%, var(--bone) 100%);
  pointer-events:none;
}
.buy-grid{ position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; gap:30px; }
/* A fonte é 16:9 e numa coluna de metade da tela o produto ficava com 277px
   de altura. Recorte para retrato com object-fit: o balde está no centro do
   quadro, então o corte tira só as bordas do cenário.                    */
.buy-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 50%; }
.h-buy{ font-size:clamp(2.6rem,12vw,3.8rem); color:var(--ink); }
.h-buy em{ display:block; color:#6E4C00; }
.buy-cat{ margin:10px 0 0; font-size:12.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); }

.preco{ margin:26px 0 0; }
.preco-v{ font-family:var(--disp); font-variation-settings:"wdth" 88,"wght" 800;
  font-size:2.4rem; line-height:1; color:var(--ink); }
.preco-pend{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; background:var(--bone-2); border-left:3px solid #6E4C00;
  font-size:14.5px; font-weight:600; color:var(--ink-soft);
}

.qtd{ margin:26px 0 24px; }
.qtd-lbl{ display:block; margin-bottom:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.qtd-ctl{ display:inline-flex; align-items:stretch; border:1px solid var(--line-l); }
.qtd-b{ width:52px; min-height:52px; background:none; border:0; cursor:pointer;
  font-size:22px; line-height:1; color:var(--ink); }
.qtd-b:hover{ background:var(--bone-2); }
.qtd-n{ display:grid; place-items:center; min-width:56px; font-family:var(--disp);
  font-variation-settings:"wdth" 88,"wght" 700; font-size:19px;
  border-inline:1px solid var(--line-l); }
.buy-nota{ margin:18px 0 0; max-width:46ch; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.buy-nota b{ color:var(--ink); }

/* ══════════════════════════ TÉCNICO ══════════════════════════ */
.tec{ background:var(--bone-2); color:var(--ink); padding-block:clamp(60px,12vw,100px); }
.tec .h2{ color:var(--ink); }
.tec .h2 em{ color:#6E4C00; }
.tec-lista{ margin:34px 0 0; display:grid; gap:0; }
.tec-lista div{ display:grid; grid-template-columns:1fr; gap:4px;
  padding:16px 0; border-top:1px solid var(--line-l); }
.tec-lista dt{ font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); }
.tec-lista dd{ margin:0; font-size:16px; font-weight:600; }
.tec-nota{ margin:26px 0 0; padding-left:16px; border-left:3px solid #6E4C00;
  font-size:14.5px; line-height:1.55; color:var(--ink-soft); max-width:62ch; }

/* ══════════════════════════ FINAL ══════════════════════════ */
.final{ background:var(--carbon); padding-block:clamp(70px,13vw,120px); }
.final-grid{ width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut); display:grid; gap:34px; align-items:center; }
.h-final{ font-size:clamp(2.7rem,13vw,4.6rem); margin-bottom:30px; }
.final-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 50%; }

/* ══════════════════════════ RODAPÉ ══════════════════════════ */
.ft{ background:var(--carbon-2); color:var(--on-carbon-soft);
  border-top:1px solid var(--line-d); padding-block:32px 40px; }
.ft-in{ display:grid; gap:14px; }
.ft p{ margin:0; font-size:14px; }
.ft-brand{ display:flex; align-items:center; gap:10px; color:var(--on-carbon);
  font-family:var(--disp); font-variation-settings:"wdth" 79,"wght" 800;
  font-size:17px; letter-spacing:.14em; }
.ft-links{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.ft-links a{ display:inline-flex; align-items:center; min-height:44px;
  font-weight:600; color:var(--on-carbon); text-decoration:underline; text-underline-offset:4px; }
.ft-note{ font-size:12.5px; line-height:1.55; max-width:64ch; opacity:.82; }

/* ══════════════════════════ CHECKOUT ══════════════════════════
   Daqui em diante o movimento cai. Sem scrub, sem parallax, sem brilho:
   campo estável, rótulo legível, erro ao lado do que errou.             */
.co{ position:fixed; inset:0; z-index:200; display:grid; place-items:end center; }
.co-bd{ position:absolute; inset:0; background:rgba(6,7,7,.86); }
.co-box{
  position:relative; z-index:2; width:min(720px,100%);
  max-height:100dvh; display:flex; flex-direction:column;
  background:var(--bone); color:var(--ink);
}
.co-hd{ position:relative; padding:22px var(--gut) 0; border-bottom:1px solid var(--line-l); }
.co-tag{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#6E4C00; }
.co-t{ margin:6px 0 0; font-family:var(--disp);
  font-variation-settings:"wdth" 82,"wght" 800; font-size:1.7rem;
  text-transform:uppercase; letter-spacing:-.01em; }
.co-x{ position:absolute; right:10px; top:14px; width:46px; height:46px;
  background:none; border:0; font-size:26px; line-height:1; color:var(--ink); cursor:pointer; }
.co-steps{ list-style:none; display:flex; gap:4px; margin:16px 0 0; padding:0; }
.co-steps li{ flex:1; padding-bottom:10px; border-bottom:2px solid var(--line-l);
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); }
.co-steps li.on{ border-bottom-color:#6E4C00; color:var(--ink); }
.co-steps li.done{ border-bottom-color:#6E4C00; color:var(--ink-soft); }
.co-body{ padding:22px var(--gut) calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch; }

.f-grid{ display:grid; gap:16px; }
.fld label{ display:block; margin-bottom:6px; font-size:13px; font-weight:700;
  letter-spacing:.02em; }
.fld input, .fld select{
  width:100%; min-height:52px; padding:13px 14px;
  font-family:var(--body); font-size:16.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line-l); border-radius:0;
}
.fld input:focus{ border-color:#6E4C00; }
.fld input[aria-invalid="true"]{ border-color:#A32B2B; }
.f-err{ margin:6px 0 0; font-size:13.5px; font-weight:600; color:#A32B2B; }
.f-row{ display:grid; gap:16px; }
.pay-opts{ display:grid; gap:10px; margin:0 0 20px; padding:0; border:0; }
.pay-opt{ position:relative; }
.pay-opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.pay-opt span{ display:flex; align-items:center; gap:12px; min-height:58px; padding:14px 16px;
  border:1px solid var(--line-l); font-weight:700; font-size:15.5px; }
.pay-opt span::before{ content:''; width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid var(--ink-soft); }
.pay-opt input:checked + span{ border-color:#6E4C00; }
.pay-opt input:checked + span::before{ border-color:#6E4C00; box-shadow:inset 0 0 0 3px #6E4C00; }
.pay-opt input:focus-visible + span{ outline:3px solid #6E4C00; outline-offset:2px; }

.pix-demo{ display:grid; justify-items:center; gap:14px; padding:22px 0; }
.pix-qr{ width:168px; height:168px; background:#fff; padding:10px; }
.pix-aviso, .card-aviso{
  margin:0; padding:13px 15px; background:var(--bone-2); border-left:3px solid #6E4C00;
  font-size:14px; line-height:1.5; color:var(--ink-soft); max-width:52ch;
}
.co-resumo{ margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line-l);
  display:grid; gap:8px; font-size:14.5px; }
.co-resumo div{ display:flex; justify-content:space-between; gap:16px; }
.co-resumo b{ font-weight:700; }
.co-acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.btn-sec{ background:none; color:var(--ink); border:1px solid var(--line-l);
  min-height:54px; padding:15px 24px; font-family:var(--body); font-size:14px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; }

/* sucesso simulado */
.ok-demo{ text-align:center; padding:26px 0 10px; }
.ok-demo h3{ margin:0 0 12px; font-family:var(--disp);
  font-variation-settings:"wdth" 82,"wght" 800; font-size:clamp(2rem,9vw,2.8rem);
  text-transform:uppercase; line-height:.92; }
.ok-demo h3 em{ font-style:normal; color:#6E4C00; display:block; }
.ok-demo p{ margin:0 auto 20px; max-width:44ch; font-size:15.5px; color:var(--ink-soft); }
.ok-id{ font-family:var(--body); font-size:13px; letter-spacing:.06em; color:var(--ink-soft); }

/* acessível ao leitor de tela, invisível na tela */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* FAQ: existe pronta, aparece quando houver resposta validada */
.faq{ background:var(--bone); color:var(--ink); padding-block:clamp(60px,12vw,100px); }
.faq .h2{ color:var(--ink); } .faq .h2 em{ color:#6E4C00; }
.faq-lista{ margin-top:34px; }
.faq details{ border-top:1px solid var(--line-l); }
.faq details:last-child{ border-bottom:1px solid var(--line-l); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:60px; padding:14px 0; cursor:pointer; list-style:none;
  font-size:16.5px; font-weight:700;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:24px; color:#6E4C00; line-height:1; }
.faq details[open] summary::after{ content:'\2013'; }
.faq details p{ margin:0 0 20px; max-width:62ch; font-size:16px; line-height:1.6; color:var(--ink-soft); }

/* ══════════════════════════ ≥720px ══════════════════════════ */
@media (min-width:720px){
  :root{ --gut:36px; }
  .f-row{ grid-template-columns:1fr 1fr; }
  .f-row-3{ grid-template-columns:1fr 1fr 1fr; }
  .tec-lista div{ grid-template-columns:200px 1fr; gap:20px; align-items:baseline; }
  .buy-grid{ grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
  /* no desktop a coluna é estreita: o retrato devolve presença ao produto */
  .buy-media img{ aspect-ratio:4/5; }
  .final-media img{ aspect-ratio:3/4; }
  .final-grid{ grid-template-columns:1fr 1fr; gap:48px; }
  .h2{ font-size:clamp(3rem,7vw,4rem); }
}

/* ══════════════════════════ ≥1000px ══════════════════════════ */
@media (min-width:1000px){
  :root{ --gut:52px; }
  .preview-badge{ right:auto; left:var(--gut); top:auto;
                  bottom:calc(14px + env(safe-area-inset-bottom)); }
  .burger,.menu{ display:none !important; }
  .hdr-nav{ display:flex; align-items:center; gap:28px; }
  .hdr-nav a{ display:flex; align-items:center; min-height:44px; font-size:13px;
    font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-carbon); }
  .hdr-nav a:hover{ color:var(--amber); }
  .hdr-cta{ display:inline-flex; margin-left:10px; }

  /* no desktop o texto vive na coluna esquerda: a queda vem de lá */
  .scrim{ background:linear-gradient(97deg,
    rgba(10,11,11,.88) 0%, rgba(10,11,11,.70) 26%,
    rgba(10,11,11,.26) 54%, rgba(10,11,11,0) 76%); }
  .ch{ padding:0 var(--gut); justify-content:center; }
  .ch > *{ max-width:min(50vw,680px); }
  .ch-materia,.ch-perf,.ch-rotina{ justify-content:flex-start;
    padding-top:clamp(140px,20vh,240px); }
  .ch-contexto{ justify-content:flex-end; align-items:flex-end;
    padding-bottom:clamp(50px,9vh,110px); }
  .stage:has(.ch-contexto[style*='opacity: 1']) .scrim{ transform:scaleX(-1); }
  .ch-contexto > *{ text-align:right; }
  .h-hero{ font-size:clamp(4.6rem,8.4vw,9rem); }
  .h-materia{ font-size:clamp(3.6rem,5.6vw,6rem); }
  .h-perf{ font-size:clamp(3.8rem,6.2vw,6.6rem); }
  .h-produto{ font-size:clamp(3.4rem,5.4vw,5.6rem); }
  .h-rotina{ font-size:clamp(3.2rem,5vw,5.2rem); }
  .h-final{ font-size:clamp(3.4rem,5.4vw,5.4rem); }
  .co{ place-items:center; }
  .co-box{ max-height:92dvh; }
}

@media (min-width:1500px){ :root{ --maxw:1360px; } }

/* ══════════════════════════ tela baixa / deitado ══════════════════════════ */
@media (max-height:560px) and (orientation:landscape){
  .act{ height:700vh; }
  .ch{ padding:62px var(--gut) 20px; justify-content:center; align-items:flex-start; }
  .ch > *{ max-width:min(58vw,560px); }
  .h-hero{ font-size:clamp(2rem,5.6vw,3rem); }
  .h-materia,.h-perf,.h-produto,.h-rotina{ font-size:clamp(1.9rem,5vw,2.7rem); }
  .hero-cta{ margin-top:14px; }
  .hero-cta .btn,.btn-ghost{ min-height:46px; padding-block:11px; font-size:13px; }
  .ch-materia,.ch-perf,.ch-rotina{ padding-top:70px; }
  .preview-badge{ left:auto; right:var(--gut); }
}

/* ══════════════════════════ movimento reduzido ══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .act{ height:auto; }
  .stage{ position:relative; height:auto; }
  .film{ position:relative; inset:auto; aspect-ratio:16/9; }
  #cv{ display:none; }
  .vignette,.scrim{ display:none; }
  .ch{ position:relative; inset:auto; opacity:1 !important; visibility:visible !important;
       padding:42px var(--gut); max-width:none; }
  .ch > *{ max-width:none !important; }
  .h-hero span{ margin-left:0 !important; }
  .buy{ margin-top:0; padding-top:clamp(60px,10vw,90px);
        background:var(--bone); opacity:1 !important; transform:none !important; }
  .buy::before{ display:none; }
}