/* =========================================================
   OLHAR DA OBRA — Guia Visual de Patologias Construtivas
   Estética: dossiê técnico de obra. Grafite + amarelo técnico.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --grafite:      #15191B;
  --grafite-alt:  #1D2224;
  --grafite-line: #2E3538;
  --amarelo:      #F2B705;
  --amarelo-hi:   #FFC61C;
  --amarelo-lo:   #D9A404;
  --branco:       #F5F2EA;
  --claro:        #EEEAE0;
  --cinza:        #9B9D99;
  --texto:        #202426;
  --texto-mid:    #4A5052;

  --wrap: 1120px;
  --narrow: 760px;
  --gut: clamp(20px, 5vw, 40px);
  --pad-y: clamp(60px, 8vw, 112px);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --sh-sm: 0 1px 2px rgba(21,25,27,.08);
  --sh-md: 0 6px 18px rgba(21,25,27,.10);
  --sh-lg: 0 14px 40px rgba(21,25,27,.22);

  --ff-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315191B' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.2'/%3E%3C/svg%3E");
  --check-inv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B705' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.2'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* o atributo hidden precisa vencer os display:grid/flex definidos por classe */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--claro);
  color:var(--texto);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
h1,h2,h3{ margin:0 0 .5em; font-family:var(--ff-display); font-weight:800; line-height:1.08; letter-spacing:-.015em; }
s{ text-decoration-thickness:2px; }
a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--amarelo);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amarelo); color:var(--grafite);
  padding:12px 18px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:var(--narrow); }

.band{ position:relative; padding-block:var(--pad-y); }
.band--light{ background:var(--branco); }
.band--pale{ background:var(--claro); }
.band--dark{ background:var(--grafite); color:var(--branco); }
/* o conteúdo fica acima da malha técnica, que é apenas atmosfera */
.band--dark > .wrap{ position:relative; z-index:1; }

/* textura técnica sutil (grade de obra) */
.hero__mesh{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(242,183,5,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,183,5,.055) 1px, transparent 1px),
    radial-gradient(120% 80% at 50% 0%, rgba(242,183,5,.09), transparent 62%);
  background-size:72px 72px, 72px 72px, 100% 100%;
  mask-image:radial-gradient(130% 90% at 50% 20%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(130% 90% at 50% 20%, #000 25%, transparent 78%);
}

/* ---------- 4. Tipografia utilitária ---------- */
.h2{
  font-size:clamp(1.6rem, 1.05rem + 2.3vw, 2.6rem);
  max-width:20ch;
}
.h2--xl{ font-size:clamp(1.85rem, 1.1rem + 3.4vw, 3.15rem); max-width:17ch; }
.h2--invert{ color:var(--branco); }
.h2--center{ max-width:none; text-align:center; }

.body{ max-width:62ch; color:var(--texto-mid); }
.body--invert{ color:var(--cinza); }

.lead{
  font-size:clamp(1.02rem, .96rem + .35vw, 1.2rem);
  color:var(--texto-mid);
  max-width:64ch;
}

.fineprint{ font-size:.88rem; color:var(--texto-mid); margin:14px 0 0; }
.fineprint--dark{ color:var(--texto-mid); }
.fineprint--center{ text-align:center; }

/* selo do hero: grafite claro com fio amarelo, para não competir
   com a barra de escassez, que é o primeiro elemento amarelo da página */
.hero__seal{
  display:inline-block;
  background:#1F2528;
  border:1px solid rgba(242,183,5,.5);
  color:var(--branco);
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(.66rem,.62rem + .2vw,.74rem);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.45;
  padding:8px 15px;
  border-radius:8px;
  margin:0 0 26px;
  max-width:min(100%, 34ch);
}
.hero__seal-dot{ color:var(--amarelo); padding-inline:5px; }

/* destaque tipográfico da headline: só a cor muda */
.hl{ color:var(--amarelo); }

/* eyebrow com número de seção */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-display); font-weight:700;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto); margin:0 0 18px;
}
.eyebrow::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.22; max-width:120px;
}
.eyebrow--invert{ color:var(--branco); }

.rule{
  display:block; width:64px; height:4px;
  background:var(--amarelo); border-radius:2px; margin:0 auto 26px;
}

/* ---------- 5. Botões ---------- */
.btn{
  /* inline-block em vez de flex: a seta acompanha a última linha
     do rótulo quando o texto quebra em telas estreitas */
  display:inline-block; text-align:center;
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(.95rem, .9rem + .25vw, 1.05rem);
  letter-spacing:.02em;
  text-decoration:none; text-align:center;
  padding:17px 28px; min-height:56px;
  border:2px solid transparent; border-radius:var(--r-md);
  cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn--primary{
  background:var(--amarelo); color:var(--grafite);
  box-shadow:0 3px 0 var(--amarelo-lo), var(--sh-sm);
}
.btn--primary:hover{ background:var(--amarelo-hi); transform:translateY(-2px); box-shadow:0 5px 0 var(--amarelo-lo), var(--sh-md); }
.btn--primary:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--amarelo-lo); }

.btn--ghost{
  background:transparent; color:var(--grafite);
  border-color:var(--grafite);
}
.btn--ghost:hover{ background:var(--grafite); color:var(--branco); transform:translateY(-2px); }
.btn--ghost:active{ transform:translateY(1px); }

.btn--block{ display:block; width:100%; }

.cta-row{ margin:30px 0 0; }
.cta-row--center{ display:flex; justify-content:center; }

/* ---------- 6. Barra superior ---------- */
.topbar{ background:var(--amarelo); }
.topbar__icon{
  display:inline-block; width:1.15em; height:1.15em;
  vertical-align:-.18em; margin-right:.5em;
}
.topbar__icon svg{ width:100%; height:100%; display:block; }
.topbar__text{
  margin:0; padding:11px var(--gut);
  text-align:center; color:var(--grafite);
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(.7rem, .64rem + .3vw, .82rem);
  letter-spacing:.1em; text-transform:uppercase;
  line-height:1.35;
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  /* flow-root impede que a margem negativa do mockup colapse com o hero:
     é isso que faz a imagem avançar sobre a faixa clara seguinte */
  display:flow-root;
  background:var(--grafite); color:var(--branco);
  padding-block:clamp(44px, 6vw, 76px) 0;
  text-align:center;
}
.hero__head{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}
.hero__title{
  font-size:clamp(1.72rem, 1.02rem + 3.1vw, 3.05rem);
  max-width:19ch;
  margin:0;
  text-wrap:balance;
}
.hero__figure{
  position:relative; z-index:2;
  margin:clamp(26px, 4vw, 44px) auto clamp(-120px, -9vw, -56px);
  width:min(88vw, 520px);
}
/* sem drop-shadow: sobre a faixa clara a sombra virava um borrão duro
   ao lado do texto. O próprio mockup já traz sombra na arte. */
.hero__figure img{ width:100%; height:auto; }

.hero-body{
  position:relative; z-index:0;
  background:var(--branco);
  padding-block:clamp(84px, 11vw, 168px) var(--pad-y);
}
.hero-body__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-body__inner .lead{ margin-bottom:28px; }

/* ---------- 8. Listas com check ---------- */
.checks{ display:grid; gap:12px; text-align:left; }
.checks li{
  position:relative; padding-left:34px;
  font-size:1rem; line-height:1.5;
}
.checks li::before{
  content:""; position:absolute; left:0; top:2px;
  width:22px; height:22px; border-radius:5px;
  background:var(--amarelo);
  -webkit-mask:none; mask:none;
  background-image:var(--check);
  background-size:15px 15px; background-position:center; background-repeat:no-repeat;
}
.checks--sm li{ font-size:.95rem; padding-left:30px; }
.checks--sm li::before{ width:19px; height:19px; background-size:13px 13px; }
.checks--two{ margin-bottom:6px; }
@media (min-width:720px){
  .checks--two{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:34px; }
}

.dashes{ display:grid; gap:10px; margin:0 0 1.2em; }
.dashes li{ position:relative; padding-left:24px; color:var(--texto-mid); }
.dashes li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:13px; height:3px; background:var(--amarelo); border-radius:2px;
}

/* ---------- 9. Trilhos (galerias) ---------- */
.rail{ margin-top:clamp(30px, 4vw, 46px); }
.rail--depo{ margin-top:clamp(28px,4vw,44px); }
.rail__viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-inline:max(var(--gut), calc((100% - var(--wrap)) / 2));
  scroll-padding-inline-start:max(20px, calc((100% - 1120px) / 2));
  padding-block:6px 18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail__viewport::-webkit-scrollbar{ display:none; }
.rail__track{ display:flex; gap:16px; align-items:flex-start; }
.rail__item{ flex:0 0 auto; scroll-snap-align:start; }
.rail__item img{
  border:1px solid rgba(32,36,38,.14);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  background:var(--claro);
}
.rail--fichas .rail__item{ width:min(74vw, 340px); }
.rail--uso .rail__item{ width:min(70vw, 300px); }
.rail--uso .rail__item img{ aspect-ratio:660 / 884; object-fit:cover; }

.rail__nav{ display:flex; gap:12px; justify-content:center; max-width:var(--wrap); margin:16px auto 0; padding-inline:var(--gut); }
.rail__btn{
  width:50px; height:50px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(32,36,38,.3);
  border-radius:var(--r-sm); cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.rail__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:square; }
.rail__btn:hover{ background:var(--amarelo); border-color:var(--amarelo); transform:translateY(-2px); }
.rail__btn[disabled]{ opacity:.32; cursor:default; transform:none; background:transparent; border-color:rgba(32,36,38,.3); }


/* ---------- 10. Grid de características (seção 04) ---------- */
.feat{
  display:grid; gap:16px;
  margin:clamp(30px, 4vw, 46px) 0 0;
}
@media (min-width:820px){ .feat{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }

.feat__card{
  position:relative;
  padding:30px 26px 26px;
  border-radius:var(--r-lg);
  border:1px solid rgba(32,36,38,.14);
  background:var(--branco);
}
.feat__num{
  display:block;
  font-family:var(--ff-display); font-weight:800;
  font-size:2.4rem; line-height:1;
  opacity:.22; margin-bottom:14px;
}
.feat__title{ font-size:1.22rem; margin-bottom:.4em; }
.feat__card p{ margin:0; color:var(--texto-mid); font-size:1rem; }

.feat__card--dark{ background:var(--grafite); border-color:var(--grafite); color:var(--branco); }
.feat__card--dark .feat__num{ color:var(--amarelo); opacity:.85; }
.feat__card--dark p{ color:var(--cinza); }

.feat__card--accent{ background:var(--amarelo); border-color:var(--amarelo-lo); color:var(--grafite); }
.feat__card--accent .feat__num{ opacity:.4; }
.feat__card--accent p{ color:#3A2E02; }

.statement{
  margin:clamp(34px,4vw,50px) 0 0;
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(1.25rem, 1rem + 1.15vw, 1.85rem);
  line-height:1.18; letter-spacing:-.01em;
  text-transform:uppercase;
  text-align:center;
  border-top:1px solid rgba(32,36,38,.16);
  border-bottom:1px solid rgba(32,36,38,.16);
  padding-block:26px;
}

/* ---------- 11. Benefícios ---------- */
.benef{ display:grid; gap:34px; align-items:start; }
@media (min-width:940px){
  .benef{ grid-template-columns:0.9fr 1.1fr; gap:60px; }
}
.benef__list{ display:grid; gap:14px; }
.benef__list li{
  position:relative;
  padding:16px 18px 16px 46px;
  background:var(--branco);
  border:1px solid rgba(32,36,38,.13);
  border-left:3px solid var(--amarelo);
  border-radius:var(--r-sm);
  font-size:1rem; line-height:1.45;
}
.benef__list li::before{
  content:""; position:absolute; left:17px; top:21px;
  width:14px; height:14px; border-radius:3px;
  background:var(--amarelo);
  background-image:var(--check); background-size:11px 11px;
  background-position:center; background-repeat:no-repeat;
}
.cta-row--desk{ display:none; }
.cta-row--mob{ margin-top:34px; }
@media (min-width:940px){
  .cta-row--desk{ display:flex; }
  .cta-row--mob{ display:none; }
}

/* ---------- 12. Pergunta de transição ---------- */
.section--pergunta{ text-align:center; }
.section--pergunta .h2{ margin-inline:auto; text-wrap:balance; }
.section--pergunta .body{ margin-inline:auto; }

/* ---------- 13. Para quem é (fichas) ---------- */
.ficha-grid{ display:grid; gap:14px; margin-top:clamp(30px,4vw,46px); }
@media (min-width:700px){ .ficha-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .ficha-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }

.ficha{
  position:relative;
  background:var(--branco);
  border:1px solid rgba(32,36,38,.15);
  border-radius:var(--r-md);
  padding:26px 24px 24px;
  border-top:3px solid var(--grafite);
}
.ficha__idx{
  display:inline-block;
  font-family:var(--ff-display); font-weight:700; font-size:.72rem;
  letter-spacing:.14em;
  background:var(--amarelo); color:var(--grafite);
  padding:4px 8px; border-radius:4px; margin-bottom:14px;
}
.ficha__title{ font-size:1.1rem; margin-bottom:.45em; }
.ficha p{ margin:0; color:var(--texto-mid); font-size:.98rem; }

/* ---------- 14. Tudo o que você recebe ---------- */
.recebe{ display:grid; gap:34px; align-items:start; }
@media (min-width:900px){
  .recebe{ grid-template-columns:0.85fr 1.15fr; gap:56px; }
  .recebe__sticky{ position:sticky; top:32px; }
}
.recebe__media img{ margin-inline:auto; width:min(78vw, 420px); }
.section--recebe .h2{ text-transform:uppercase; font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem); }

/* ---------- 15. Chamada dos bônus ---------- */
.chamada{ display:grid; gap:20px; align-items:center; }
@media (min-width:800px){ .chamada{ grid-template-columns:auto 1fr; gap:48px; } }
.chamada__big{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(5rem, 3rem + 9vw, 10rem); line-height:.82;
  color:transparent;
  -webkit-text-stroke:2px var(--amarelo);
  display:block;
}
.chamada__body .h2{ max-width:22ch; }

/* ---------- 16. Bônus ---------- */
.bonus{ display:grid; gap:24px; align-items:center; }
.bonus + .bonus{ margin-top:clamp(44px, 6vw, 76px); }
@media (min-width:860px){
  .bonus{ grid-template-columns:1fr 1fr; gap:56px; }
  .bonus--flip .bonus__media{ order:2; }
}
.bonus__media img{ margin-inline:auto; width:min(84vw, 420px); }
.bonus__body .bonus__kicker{
  display:inline-block;
  font-family:var(--ff-display); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--grafite); color:var(--branco);
  padding:6px 12px; border-radius:4px; margin-bottom:16px;
}
.bonus__title{ font-size:clamp(1.3rem,1.05rem + 1.1vw,1.75rem); margin-bottom:.55em; }
.bonus__body > p{ color:var(--texto-mid); }
.bonus__price{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:8px 0 0; padding:11px 16px;
  background:var(--branco); border:1px solid rgba(32,36,38,.16);
  border-left:3px solid var(--amarelo);
  border-radius:var(--r-sm);
  font-size:.95rem; color:var(--texto-mid);
}
.bonus__price s{ color:var(--texto-mid); }
.bonus__price strong{
  font-family:var(--ff-display); font-weight:800; letter-spacing:.06em;
  background:var(--grafite); color:var(--amarelo);
  padding:3px 10px; border-radius:4px;
}

/* ---------- 17. Oferta ---------- */
.scarcity{
  display:block; width:fit-content; margin:0 auto 22px;
  background:var(--amarelo); color:var(--grafite);
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(.72rem,.66rem + .3vw,.84rem);
  letter-spacing:.1em; text-transform:uppercase;
  padding:9px 16px; border-radius:var(--r-sm);
  text-align:center;
}
.section--oferta .h2{ margin-bottom:clamp(30px,4vw,48px); }

.planos{ display:grid; gap:14px; }
/* Básico e faixa de 92% andam juntos: a faixa fica colada logo
   abaixo do card, tanto no celular quanto no desktop */
.planos__col{ display:flex; flex-direction:column; gap:0; }
@media (min-width:1000px){
  .planos{ grid-template-columns:0.92fr 1.4fr; gap:28px; align-items:center; }
}

.plano{
  background:var(--branco); color:var(--texto);
  border:1px solid rgba(245,242,234,.18);
  border-radius:var(--r-lg);
  padding:30px 24px;
  display:flex; flex-direction:column;
}
.plano__name{
  font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.7em;
}
.plano__media{ margin:0 0 20px; }
.plano__media img{ margin-inline:auto; width:min(60vw, 230px); }
.plano__media--wide img{ width:min(84vw, 420px); }
.plano__intro{ font-weight:600; margin-bottom:.7em; font-size:.95rem; }
.plano__from{ margin:20px 0 2px; color:var(--texto-mid); font-size:.95rem; }
.plano__price{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(2.1rem,1.6rem + 2vw,2.7rem); line-height:1;
  margin:0 0 6px; letter-spacing:-.02em;
}
.plano__price--xl{ font-size:clamp(2.7rem,1.9rem + 3.4vw,4rem); }
.plano__inst{ margin:0 0 10px; font-size:.94rem; color:var(--texto-mid); }
/* selo informativo discreto: o botão amarelo continua sendo
   o único elemento com aparência clara de ação nesta área */
.plano__save{
  display:block; width:fit-content;
  background:#FFF3C4; color:#343638;
  border:1px solid #E5C75B; border-radius:999px;
  padding:7px 14px; margin:0 0 20px;
  font-size:.94rem; font-weight:600;
  box-shadow:none;
}
/* selo informativo discreto: o botão amarelo continua sendo
   o único elemento com aparência clara de ação nesta área */


.plano--basico{ padding:26px 22px; }
.plano--basico .plano__name{ color:var(--texto-mid); }

.plano--completo{
  position:relative;
  border:2px solid var(--amarelo);
  box-shadow:var(--sh-lg);
  padding:34px 26px 30px;
}
.plano__badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--amarelo); color:var(--grafite);
  font-family:var(--ff-display); font-weight:800;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 16px; border-radius:var(--r-sm);
  white-space:nowrap; margin:0;
  box-shadow:var(--sh-sm);
}
.plano__pay{ width:min(78vw,360px); margin:18px auto 0; opacity:.85; }

/* Faixa de transição do Básico para o Completo: área única clicável */
.upsell{
  display:block; text-decoration:none; color:inherit;
  cursor:pointer; margin-inline:4px;
  border-radius:14px;
}
/* fio vertical que amarra Básico -> faixa -> Completo */
.upsell__link{
  display:block; width:3px; height:10px; margin:0 auto;
  background:var(--amarelo); border-radius:2px;
}
.upsell__band{
  display:flex; align-items:center; gap:16px;
  min-height:80px; padding:16px 18px;
  background:#232A2D;
  border:1px solid rgba(242,183,5,.65);
  border-radius:12px;
  transition:background-color .16s ease, border-color .16s ease;
}
.upsell__value{
  flex:0 0 auto;
  font-family:var(--ff-display); font-weight:800; line-height:.95;
  font-size:clamp(2.35rem,1.9rem + 2vw,3rem);
  color:var(--amarelo); letter-spacing:-.02em;
}
.upsell__text{
  color:var(--branco); line-height:1.3;
  font-size:clamp(.95rem,.9rem + .22vw,1.06rem);
}
.upsell__arrow{ display:block; text-align:center; margin-top:6px; }
.upsell__arrow svg{
  width:30px; height:30px; display:inline-block;
  stroke:var(--amarelo);
  animation:upsell-nudge 1.25s ease-in-out infinite;
}
@keyframes upsell-nudge{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(7px); }
}
.upsell:hover .upsell__band{ background:#2A3235; border-color:var(--amarelo); }
.upsell:focus-visible{ outline:3px solid var(--amarelo); outline-offset:4px; }

/* margem de rolagem para o selo "Mais vendido" não ficar escondido */
#plano-completo{ scroll-margin-top:34px; }


/* ---------- 18. Depoimentos ---------- */
.rail__viewport--depo{
  padding-inline:0;
  scroll-padding-inline-start:0;
}
.depo{
  display:flex; gap:16px;
  align-items:stretch;
}
.depo__card{
  flex:0 0 82%; scroll-snap-align:center;
  background:var(--claro);
  border:1px solid rgba(32,36,38,.14);
  border-radius:var(--r-md);
  padding:26px 24px;
}
@media (min-width:900px){
  .depo{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .depo__card{ flex:none; }
  .rail--depo .rail__nav{ display:none; }
  .rail__viewport--depo{ overflow:visible; }
}
.depo__rule{ display:block; width:38px; height:3px; background:var(--amarelo); border-radius:2px; margin-bottom:18px; }
.depo__card blockquote{ margin:0; }
.depo__card blockquote p{ margin:0 0 18px; font-size:1rem; line-height:1.55; }
.depo__name{
  margin:0; font-family:var(--ff-display); font-weight:700;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-mid);
}

/* ---------- 19. Garantia ---------- */
.section--garantia{ border-top:6px solid var(--amarelo); }
.garantia{ display:grid; gap:28px; align-items:start; }
@media (min-width:860px){ .garantia{ grid-template-columns:auto 1fr; gap:52px; } }
.garantia__seal img{ width:clamp(210px,44vw,330px); margin-inline:auto; }
.garantia__body .h2{ max-width:22ch; }

/* ---------- 20. Passo a passo ---------- */
.passos{
  display:grid; gap:0; margin:clamp(30px,4vw,48px) 0 0;
  counter-reset:passo;
}
.passo{ position:relative; padding:0 0 30px 62px; }
.passo:last-child{ padding-bottom:0; }
.passo::before{
  content:""; position:absolute; left:21px; top:46px; bottom:6px;
  width:1px; background:linear-gradient(var(--amarelo), rgba(242,183,5,.18));
}
.passo:last-child::before{ display:none; }
.passo__num{
  position:absolute; left:0; top:0;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--amarelo); border-radius:50%;
  color:var(--amarelo); font-family:var(--ff-display); font-weight:800;
}
.passo__title{ font-size:1.12rem; margin-bottom:.35em; color:var(--branco); padding-top:9px; }
.passo p{ margin:0; color:var(--cinza); font-size:.98rem; }

@media (min-width:900px){
  .passos{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
  .passo{ padding:0; }
  .passo::before{ left:56px; right:0; top:22px; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, var(--amarelo), rgba(242,183,5,.18)); }
  .passo__num{ position:static; margin-bottom:22px; }
  .passo__title{ padding-top:0; }
}

/* ---------- 21. FAQ ---------- */
.faq{ margin-top:clamp(26px,3vw,40px); border-top:1px solid rgba(32,36,38,.16); }
.faq__item{ border-bottom:1px solid rgba(32,36,38,.16); }
.faq__item h3{ margin:0; font-size:1rem; }
.faq__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:none; border:0; cursor:pointer;
  padding:20px 4px; text-align:left;
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1rem,.96rem + .25vw,1.1rem); line-height:1.3;
  color:var(--texto);
  transition:color .16s ease;
}
.faq__btn:hover{ color:var(--amarelo-lo); }
.faq__icon{
  position:relative; flex:0 0 auto;
  width:26px; height:26px; border:1px solid rgba(32,36,38,.35); border-radius:5px;
}
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--texto);
  transform:translate(-50%,-50%); transition:transform .2s ease, opacity .2s ease;
}
.faq__icon::before{ width:12px; height:2px; }
.faq__icon::after{ width:2px; height:12px; }
.faq__btn[aria-expanded="true"] .faq__icon{ background:var(--amarelo); border-color:var(--amarelo-lo); }
.faq__btn[aria-expanded="true"] .faq__icon::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }

.faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease; }
.faq__panel.is-open{ grid-template-rows:1fr; }
.faq__inner{ overflow:hidden; }
.faq__inner p{ margin:0; padding:0 4px 22px; color:var(--texto-mid); max-width:70ch; }

/* ---------- 22. Rodapé ---------- */
.footer{ background:var(--grafite); color:var(--cinza); padding-block:clamp(40px,6vw,64px); }
.footer__brand{
  font-family:var(--ff-display); font-weight:700; color:var(--branco);
  font-size:1rem; margin-bottom:18px;
}
.footer__line{ margin:0 0 10px; font-size:.86rem; line-height:1.55; }
.footer__line:last-child{ margin-bottom:0; }


/* ---------- 23. Popup de upgrade ---------- */
.modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:flex-start; justify-content:center;
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  overflow:hidden;
}
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(13,16,18,.78);
  animation:modal-fade .2s ease-out;
}
/* blur só onde há suporte; sem ele o overlay opaco já dá o contraste */
@supports (backdrop-filter: blur(4px)){
  .modal__backdrop{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
}
.modal__dialog{
  position:relative;
  width:100%; max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  background:var(--branco); color:var(--texto);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(13,16,18,.45);
  display:flex; flex-direction:column;
  animation:modal-in .2s ease-out;
}
.modal__dialog:focus{ outline:none; }
.modal__scroll{
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:20px 18px 20px;
}
@media (min-width:768px){
  .modal{ align-items:center; padding:24px; }
  .modal__dialog{
    max-width:min(560px, calc(100vw - 48px));
    max-height:calc(100vh - 48px);
    max-height:calc(100dvh - 48px);
  }
  .modal__scroll{ padding:30px 30px 28px; }
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes modal-fade{ from{ opacity:0; } to{ opacity:1; } }

/* botão de fechar: fica no diálogo, não no scroll, para seguir visível */
.modal__close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--claro); color:var(--grafite);
  border:1px solid rgba(21,25,27,.14); border-radius:12px;
  cursor:pointer;
}
.modal__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.modal__close:hover{ background:#E2DDD1; }

.modal__kicker{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(.7rem,.68rem + .1vw,.78rem);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--texto); margin:0 0 9px; padding-right:46px;
}
.modal__badge{
  display:inline-block;
  background:var(--grafite); color:var(--amarelo);
  font-family:var(--ff-display); font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin:0 0 10px;
}
.modal__title{
  font-size:clamp(1.5rem,1.32rem + .9vw,1.95rem);
  line-height:1.1; margin:0 0 9px; max-width:20ch;
}
/* âmbar escuro: amarelo puro não teria contraste sobre o fundo claro */
.modal__title-hl{ color:#7A5D02; }
.modal__lead{ color:var(--texto-mid); font-size:.9rem; line-height:1.45; margin:0 0 12px; }

.modal__bonus{ display:grid; gap:8px; margin:0 0 13px; }
.modal__bonus li{
  position:relative; padding-left:29px;
  font-size:clamp(.86rem,.83rem + .16vw,1rem); line-height:1.35;
}
.modal__bonus li::before{
  content:""; position:absolute; left:0; top:.1em;
  width:20px; height:20px; border-radius:50%;
  background:var(--amarelo);
  background-image:var(--check);
  background-size:12px 12px; background-position:center; background-repeat:no-repeat;
}

.modal__diff{
  display:block; width:fit-content; margin:0 auto 13px;
  background:#FFF3C4; color:#343638;
  border:1px solid #E5C75B; border-radius:999px;
  padding:7px 13px;
  font-size:.84rem; font-weight:600; text-align:center;
  box-shadow:none;
}

.modal__pricebox{
  background:var(--grafite);
  border-radius:18px; padding:15px 16px;
  text-align:center; margin:0 0 13px;
  box-shadow:0 8px 22px rgba(13,16,18,.18);
}
.modal__was{ color:var(--cinza); font-size:.82rem; margin:0 0 5px; }
/* o valor riscado quebra junto, nunca partido no meio */
.modal__was s{ white-space:nowrap; }
.modal__now{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(2.65rem,2.45rem + .85vw,3.15rem); line-height:1;
  color:var(--amarelo); letter-spacing:-.02em;
  white-space:nowrap; margin:0 0 6px;
}
.modal__access{ color:var(--branco); font-size:.8rem; margin:0; }
/* abaixo de 360px o preço não cabe em uma linha no tamanho cheio */
@media (max-width:359px){
  .modal__now{ font-size:2.3rem; }
  .modal__scroll{ padding-inline:14px; }
}
/* Telas curtas (iPhone SE e afins): compacta mais um pouco para que o botão
   do Plano Básico continue visível já na primeira abertura, sem rolar. */
@media (max-height:700px){
  .modal__scroll{ padding-block:15px 15px; }
  .modal__kicker{ margin-bottom:7px; }
  .modal__badge{ margin-bottom:8px; padding:4px 11px; }
  .modal__title{ font-size:1.35rem; margin-bottom:7px; }
  .modal__lead{ font-size:.84rem; margin-bottom:9px; }
  .modal__bonus{ gap:6px; margin-bottom:10px; }
  .modal__bonus li{ font-size:.8rem; line-height:1.3; }
  .modal__diff{ font-size:.78rem; padding:6px 12px; margin-bottom:10px; }
  .modal__pricebox{ padding:12px 14px; margin-bottom:10px; }
  .modal__was{ font-size:.76rem; margin-bottom:3px; }
  .modal__now{ font-size:2.1rem; margin-bottom:4px; }
  .modal__access{ font-size:.74rem; }
  .modal__cta{ min-height:48px; padding:11px 12px; font-size:.79rem; }
  .modal__secondary{ min-height:42px; padding:9px 10px; font-size:.7rem; margin-top:8px; }
  .modal__note{ font-size:.72rem; margin-top:9px; }
}

.modal__cta{
  display:block; width:100%; min-height:54px;
  padding:14px 14px; border-radius:15px;
  background:var(--amarelo); color:var(--grafite);
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(.83rem,.79rem + .2vw,1rem); line-height:1.25;
  letter-spacing:.01em; text-transform:uppercase;
  text-align:center; text-decoration:none;
  box-shadow:0 3px 0 var(--amarelo-lo), var(--sh-sm);
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.modal__cta:hover{ background:var(--amarelo-hi); box-shadow:0 5px 0 var(--amarelo-lo), var(--sh-md); }
.modal__cta:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--amarelo-lo); }

.modal__secondary{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:46px; margin:9px 0 0;
  padding:10px 12px; border-radius:15px;
  background:transparent; border:2px solid var(--cinza);
  color:var(--texto);
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(.72rem,.69rem + .16vw,.86rem); line-height:1.25;
  letter-spacing:.01em; text-transform:uppercase;
  text-align:center; text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease;
}
.modal__secondary:hover{ background:rgba(21,25,27,.06); border-color:var(--texto-mid); }

.modal__note{
  margin:11px 0 0; text-align:center;
  font-size:.78rem; line-height:1.4; color:var(--texto-mid);
}

body.is-locked{ overflow:hidden; }

/* ---------- 25. Reveal ---------- */
.js-reveal .reveal{ opacity:0; transform:translateY(16px); }
.js-reveal .reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s ease;
}

/* ---------- 26. Movimento 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;
  }
  .js-reveal .reveal{ opacity:1; transform:none; }
  .rail__viewport{ scroll-behavior:auto; }
}