/* ===========================================================
   Raízes Firmes, Negócios Fortes — landing
   =========================================================== */

:root{
  --bg:        #0A0908;
  --bg-2:      #0E0C0A;
  --panel:     #16130F;
  --gold:      #C9A44C;
  --gold-lt:   #E7CE8D;
  --gold-soft: #D9BB72;
  --gold-dim:  rgba(201,164,76,.28);
  --gold-line: rgba(201,164,76,.18);
  --text:      #F2EFE9;
  --muted:     #A7A099;
  --muted-2:   #8C857D;
  --container: 1140px;
  --serif: "Playfair", "Prata", Georgia, "Times New Roman", serif;
  --sans:  "Quicksand", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
.container--narrow{ max-width:820px; }
.container--faq{ max-width:900px; }
.center{ text-align:center; }
.center .lead{ max-width:663px; margin-inline:auto; }
.gold{ color:var(--gold-soft); }
.gold-warm{ color:var(--gold-soft); }

.section{ padding:clamp(72px,9vw,132px) 0; position:relative; }

/* ---------- typography ---------- */
.eyebrow{
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:.85;
  margin:0 0 18px;
  font-weight:500;
}
.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px,3.1vw,40px);
  line-height:1.26;
  letter-spacing:.005em;
  margin:0 0 22px;
  color:#fff;
}
.h2--left{ text-align:left; }
.split .h2{ font-size:clamp(26px,2.5vw,35px); }
.metodo .h2{ font-size:clamp(25px,2.3vw,32px); }
.sobre .h2{ font-size:clamp(28px,2.9vw,40px); }
.br-lg{ display:none; }
@media (min-width:961px){ .br-lg{ display:inline; } }
.h2--sm{ font-size:clamp(24px,2.4vw,30px); }
.h2--lg{ font-size:clamp(30px,3.5vw,45px); max-width:1060px; margin-inline:auto; }
.serif-gold{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(22px,2.2vw,28px);
  color:var(--gold-soft);
  margin:0 0 28px;
}
.lead{
  color:var(--muted);
  font-size:1rem;
  line-height:1.75;
  margin:0 0 20px;
  font-weight:400;
}
.lead--left{ text-align:left; }
.lead strong{ color:var(--text); font-weight:600; }
.lead strong.gold{ color:var(--gold-soft); }

.rule{
  display:block;
  width:52px; height:2px;
  background:var(--gold);
  opacity:.75;
  margin:26px auto 34px;
  border-radius:2px;
}
.rule--left{ margin-inline:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  text-decoration:none;
  font-family:var(--sans);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:20px 40px;
  border-radius:3px;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  cursor:pointer;
  border:0;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{
  background:linear-gradient(180deg,#D6B05A 0%, #C39A3F 100%);
  color:#100D08;
  box-shadow:0 10px 34px -14px rgba(201,164,76,.85);
}
.btn--gold:hover{ box-shadow:0 16px 40px -14px rgba(201,164,76,1); }
.btn--white{
  background:#fff; color:#15120D;
  box-shadow:0 10px 30px -16px rgba(0,0,0,.8);
  text-transform:none; letter-spacing:.01em; font-size:1rem; font-weight:600;
}
.btn--block{ display:block; width:100%; text-align:center; }
.plan .btn{ text-transform:none; letter-spacing:.01em; font-size:1rem; font-weight:600; padding:18px 24px; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative;
  min-height:min(94vh, 900px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:120px 0 90px;
  isolation:isolate;
  background:var(--bg) url("assets/hero-bg.webp?v=6") center/cover no-repeat;
}
.hero__inner{ position:relative; z-index:3; }
.hero__copy{ max-width:534px; }

.logo{
  width:290px; height:auto;
  margin:0 0 34px;
}
.logo--center{ margin:0 auto 34px; }

.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,3.85vw,54px);
  line-height:1.21;
  letter-spacing:.002em;
  margin:0 0 26px;
  color:#fff;
}
.hero__sub{
  color:#B9B2A9;
  font-size:1.02rem;
  line-height:1.72;
  margin:0 0 40px;
  max-width:494px;
}
.hero__note{
  margin:20px 0 0;
  color:var(--gold-soft);
  font-size:1rem;
  letter-spacing:.02em;
}

/* o casal fica por cima da arte do fundo */
.hero__art{
  position:absolute; z-index:2;
  right:0; bottom:0;
  width:min(58%, 1020px);
  height:100%;
  pointer-events:none;
}
.hero__man, .hero__woman{
  position:absolute; bottom:-2%;
  height:auto; width:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.8));
}
.hero__man{   left:3%;  width:57%; }
.hero__woman{ right:2%; width:55%; }

/* ===========================================================
   FAIXA DOURADA
   =========================================================== */
.strip{
  background:linear-gradient(90deg,#E0BE6B 0%, #C9A44C 45%, #8E7233 100%);
  padding:19px 24px;
  text-align:center;
}
.strip p{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(19px,2.1vw,27px);
  color:#FCF6E6;
  letter-spacing:.005em;
}

/* ===========================================================
   PROBLEMA
   =========================================================== */
.problema{ background:var(--bg); }
.truth{
  margin:56px auto 0;
  max-width:850px;
  border:1px solid var(--gold-dim);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(201,164,76,.075), rgba(201,164,76,.02));
  padding:38px 46px;
}
.truth p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(19px,2.1vw,26px);
  line-height:1.45;
}
.truth__white{ color:#fff; }
.truth__gold{ color:var(--gold-soft); }

/* ===========================================================
   A GRANDE VIRADA
   =========================================================== */
/* ---------- Dobra 3: arte unica atras da virada + metodologia ---------- */
.dobra3{
  position:relative;
  /* 100% 100% mantem o brilho exatamente onde o designer pos, em qualquer largura.
     A arte e um degrade suave, entao esticar nao aparece. */
  background:var(--bg) url("assets/dobra3-bg.webp?v=6") center/100% 100% no-repeat;
}
.virada, .metodo{ background:transparent; }
.virada{ padding-bottom:0; }
.metodo{ padding-top:clamp(48px,6vw,88px); }

.split{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.split--wide{ grid-template-columns:.85fr 1.15fr; align-items:center; }

.timeline{ list-style:none; margin:0; padding:0 0 0 26px; position:relative; }
.timeline::before{
  content:""; position:absolute; left:5px; top:14px; bottom:14px;
  width:1px; background:var(--gold-line);
}
.timeline li{ position:relative; margin-bottom:18px; }
.timeline__dot{
  position:absolute; left:-26px; top:22px;
  width:11px; height:11px; border-radius:50%;
  background:#5F4E28; border:1px solid var(--gold-dim);
}
.timeline p{
  margin:0;
  background:linear-gradient(180deg,#1A1714,#151210);
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  padding:18px 30px;
  color:#DED8D0;
  font-size:.97rem;
  line-height:1.55;
}

.metodo__art img{
  width:100%; max-width:430px; margin-inline:auto;
  filter:drop-shadow(0 0 60px rgba(201,164,76,.22));
}
.statement{
  font-family:var(--serif);
  font-size:clamp(18px,1.9vw,23px);
  line-height:1.55;
  margin:28px 0 0;
}
.statement__white{ color:#fff; }
.statement__gold{ color:var(--gold-soft); }

/* ===========================================================
   RESULTADOS
   =========================================================== */
.checks{ list-style:none; margin:44px auto 0; padding:0; display:grid; gap:14px; max-width:680px; }
.checks li{
  position:relative;
  text-align:left;
  background:linear-gradient(180deg,#1B1814,#141210);
  border:1px solid var(--gold-line);
  border-radius:6px;
  padding:20px 24px 20px 66px;
  color:#DCD6CE;
  font-size:.98rem;
}
.checks li::before{
  content:"";
  position:absolute; left:24px; top:50%; translate:0 -50%;
  width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--gold);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23C9A44C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ===========================================================
   7 FASES
   =========================================================== */
.jornada{ background:linear-gradient(180deg,#0A0908,#0D0B09 40%,#0A0908); }
/* emenda resultados -> 7 fases: os dois lados chegam vazios, 260px de vao era demais */
.resultados{ padding-bottom:clamp(48px,5.5vw,84px); }
.jornada{ padding-top:clamp(48px,5.5vw,84px); }
/* ---------- painel das 7 fases ---------- */
.fases{
  position:relative;
  width:100%; max-width:1460px;
  margin:70px auto 0;
  padding-inline:24px;
}
/* luz quente que vaza por tras do topo do painel */
.fases__luz{
  position:absolute; z-index:0;
  left:50%; top:-15%;
  width:58%; height:32%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(232,200,124,.30), rgba(201,164,76,.12) 46%, transparent 72%);
  filter:blur(30px);
  pointer-events:none;
}
.fases__painel{
  position:relative; z-index:1;
  width:88%; margin-inline:auto;
  aspect-ratio:1491 / 708;
  border-radius:20px;
  background:#0C0B09 url("assets/fases-panel.webp?v=6") center/cover no-repeat;
}
/* os cards passam da largura do painel, como no layout */
.fases__viewport{
  position:absolute; z-index:2;
  left:-6.8%; right:-6.8%;
  top:16%;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* esfuma os cards nas pontas em vez de corta-los no seco */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.fases__viewport::-webkit-scrollbar{ display:none; }
.fases__track{
  display:flex;
  gap:clamp(10px,1.15vw,18px);
  list-style:none; margin:0; padding:0;
  width:max-content;
}
.modcard{
  flex:0 0 clamp(168px,15vw,228px);
  line-height:0;
}
.modcard img{
  width:100%; height:auto;
  border-radius:13px;
  box-shadow:
    0 16px 32px rgba(0,0,0,.55),
    0 0 28px rgba(201,164,76,.22),
    0 0 0 1px rgba(201,164,76,.14);
  transition:transform .35s ease, box-shadow .35s ease;
}
.modcard img:hover{
  transform:translateY(-8px);
  box-shadow:
    0 22px 44px rgba(0,0,0,.6),
    0 0 44px rgba(201,164,76,.46),
    0 0 0 1px rgba(201,164,76,.34);
}

.fases__nav{
  position:absolute; z-index:3;
  left:0; right:0; top:79%;
  display:flex; gap:16px; justify-content:center;
}
.circ{
  width:clamp(44px,3.6vw,54px); aspect-ratio:1; border-radius:50%;
  border:1.8px solid rgba(201,164,76,.45);
  background:rgba(10,9,8,.35); color:var(--gold-soft);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.circ svg{
  width:40%; height:40%;
  fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.circ:hover{ background:rgba(201,164,76,.16); border-color:var(--gold); }
.circ:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.quotebox{
  margin:70px auto 0;
  max-width:980px;
  background:#fff;
  color:#1A1713;
  border-radius:12px;
  padding:44px 56px;
  text-align:center;
  font-size:1.06rem;
  line-height:1.7;
  font-weight:500;
}
.downarrow{ display:flex; justify-content:center; margin-top:46px; color:#EDE7DD; opacity:.8; }

/* ===========================================================
   PLANO DE APRENDIZAGEM
   =========================================================== */
.plano{
  background:#0B0A08;
  border-top:1px solid rgba(255,255,255,.05);
}
.plano::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:96px 96px; pointer-events:none;
}
.plano .container{ position:relative; z-index:1; }
.plano__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.plano__head > div{ max-width:640px; }
.plano__title{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(26px,3vw,38px);
  margin-bottom:16px;
}
.plano__badge{
  flex:none;
  width:62px; height:62px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#8E7233,#6B5526);
  color:#F6E9C8;
  border-radius:4px;
}

/* ---------- trilha das fases ---------- */
.trail{ position:relative; margin-top:72px; }

.trail__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0;
}
.trail__track{
  fill:none; stroke:rgba(201,164,76,.15);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.trail__line{
  fill:none; stroke:var(--gold); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(201,164,76,.6));
}
.trail.is-live .trail__line{ opacity:1; }
.trail__line{ opacity:0; }
.trail__head{
  fill:#F6E6BE; opacity:0;
  filter:drop-shadow(0 0 12px rgba(231,206,141,.95));
  transition:opacity .35s ease;
}

.trail__grid{
  position:relative; z-index:1;
  list-style:none; margin:0; padding:0 58px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px 56px;
}
.p1{ grid-column:1; grid-row:1; }
.p2{ grid-column:2; grid-row:1; }
.p3{ grid-column:2; grid-row:2; }
.p4{ grid-column:1; grid-row:2; }
.p5{ grid-column:1 / -1; grid-row:3; justify-self:center; width:min(100%,460px); }

.phase{ position:relative; }
/* escurece sem deixar translucido, senao a trilha aparece atraves da tarja */
.trail.is-live .phase{
  filter:brightness(.42) saturate(.85);
  transform:translateY(10px);
  transition:filter .55s ease, transform .55s ease;
}
.trail.is-live .phase.is-on{
  filter:brightness(1) saturate(1);
  transform:translateY(0);
}

.phase__tag{
  display:inline-flex; align-items:center; gap:11px;
  background:#2E2C29;
  position:relative; z-index:1;
  color:#F1EDE6;
  font-size:.85rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:14px 26px;
  border-radius:3px;
}
.phase__tag--gold{
  background:linear-gradient(180deg,#D3AC55,#B8913C);
  color:#fff;
}
.phase__dot{
  flex:none; width:11px; height:11px; border-radius:50%;
  background:#5B554E;
  box-shadow:0 0 0 3px rgba(201,164,76,.12);
  transition:background .45s ease, box-shadow .45s ease, transform .45s ease;
}
.phase.is-on .phase__dot{
  background:var(--gold-lt);
  box-shadow:0 0 0 4px rgba(201,164,76,.22), 0 0 14px rgba(231,206,141,.85);
  transform:scale(1.15);
}
.phase__tag--gold .phase__dot{ background:#F6E6BE; box-shadow:0 0 0 3px rgba(255,255,255,.22); }

.phase__mods{ padding:26px 0 0 2px; display:grid; gap:22px; }
.mod h4{
  margin:0 0 4px;
  font-family:var(--serif); font-weight:700;
  font-size:1.02rem; color:var(--gold-soft);
}
.mod p{ margin:0; font-size:.93rem; color:#D6D0C8; line-height:1.55; }
.mod__obj{ color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  .trail.is-live .phase{ filter:none; transform:none; transition:none; }
  .trail__head{ display:none; }
}

/* ===========================================================
   SOBRE
   =========================================================== */
.sobre{ background:var(--bg); }
.sobre .container{ max-width:1480px; }
.sobre__card{
  position:relative;
  display:flex; align-items:center;
  aspect-ratio:1510 / 787;
  border-radius:26px;
  overflow:hidden;
  background:#0A0908 url("assets/sobre-bg.webp?v=6") center/cover no-repeat;
}
/* veu leve so para firmar o texto; a arte ja chega escura na esquerda */
.sobre__card::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,.14) 40%, transparent 64%);
}
.sobre__text{
  position:relative; z-index:3;
  width:49%;
  padding-left:11%;
  padding-right:12px;
}
/* recorte do casal por cima da arte, encostado na base do card */
.sobre__photo{
  position:absolute; z-index:2;
  right:2%; bottom:0;
  width:43%;
  pointer-events:none;
}
.sobre__photo img{ width:100%; height:auto; display:block; }

/* ===========================================================
   DEPOIMENTOS
   =========================================================== */
.depo{ background:var(--bg); }
.videos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:1140px;
  margin:52px auto 0;
}
.videocard{ margin:0; }
.videocard__btn{
  position:relative;
  width:100%; aspect-ratio:9/16;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:#131110;
  cursor:pointer;
  display:grid; place-items:center; gap:0;
  transition:border-color .25s ease, background .25s ease;
}
.videocard__btn:hover{ border-color:var(--gold-dim); background:#171412; }
.videocard__play{
  width:60px; height:60px; border-radius:50%;
  border:1px solid var(--gold-dim);
  background:rgba(201,164,76,.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l12 7-12 7z' fill='%23D9BB72'/%3E%3C/svg%3E") 54% center/22px no-repeat;
}
.videocard__hint{
  position:absolute; left:50%; bottom:16%; translate:-50% 0;
  background:#fff; color:#111;
  font-size:.66rem; line-height:1.25; font-weight:600;
  padding:8px 12px; border-radius:4px; white-space:nowrap;
}

.quotes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:26px; max-width:900px; margin:64px auto 0;
}
.quote{
  margin:0;
  border:1px solid var(--gold-line);
  border-radius:6px;
  background:linear-gradient(180deg,#151310,#100E0C);
  padding:26px 24px 24px;
}
.stars{ color:var(--gold); font-size:.86rem; letter-spacing:.18em; display:block; margin-bottom:14px; }
.quote blockquote{ margin:0 0 18px; color:#CFC9C1; font-size:.92rem; line-height:1.65; }
.quote figcaption{ color:var(--gold-soft); font-size:.86rem; font-weight:600; }

/* ===========================================================
   PLANOS
   =========================================================== */
.planos{
  background:#0B0A08 url("assets/vendas-bg.webp?v=6") center/100% 100% no-repeat;
}
.planos .container{ position:relative; z-index:1; }
.pricing{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
  margin-top:54px;
}
.plan{ position:relative; display:flex; flex-direction:column; }
.plan__inner{
  background:linear-gradient(180deg,#2A2723,#1D1B18);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:44px 34px 38px;
  min-height:520px;
  flex:1;
  display:flex; flex-direction:column;
}
.plan--featured .plan__inner,
.plan--top .plan__inner{ border-radius:0 0 12px 12px; }
.plan--featured .plan__inner{
  background:linear-gradient(160deg,#E3C071 0%, #CDA24A 45%, #B8903C 100%);
  color:#181308;
  border:0;
  padding-top:52px;
  min-height:560px;
}
.plan--top .plan__inner{ background:linear-gradient(180deg,#2C2926,#201D1A); }
.plan__tab{
  position:static;
  margin:0;
  background:#F3F1EC; color:#1A1713;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 10px; text-align:center;
  border-radius:12px 12px 0 0;
}
.plan__tab--alt{ background:#E9E7E2; }
.plan__name{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(22px,2.3vw,29px); line-height:1.16;
  text-align:center; margin:0 0 26px; color:#fff;
}
.plan--featured .plan__name{ color:#171205; }
.plan__list{ list-style:none; margin:0 0 auto; padding:0; display:grid; gap:12px; }
.plan__list li{
  position:relative; padding-left:34px;
  font-size:.94rem; color:#D9D3CB;
}
.plan--featured .plan__list li{ color:#221A08; }
.plan__list li::before{
  content:""; position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%;
  background:#22C36A
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.plan__price{ margin:34px 0 2px; text-align:center; color:#fff; }
.plan--featured .plan__price{ color:#150F04; }
.plan__price strong{ font-size:2.15rem; font-weight:600; letter-spacing:-.01em; }
.plan__price--lg strong{ font-size:2.5rem; }
.plan__x{ font-size:.95rem; color:inherit; opacity:.9; }
.plan__full{ margin:0 0 26px; text-align:center; font-size:1.02rem; color:#CFC9C1; }
.plan--featured .plan__full{ color:#241B08; }

/* ===========================================================
   GARANTIA
   =========================================================== */
.garantia{ background:var(--bg); }
.seal{ display:flex; justify-content:center; margin-bottom:34px; }
.seal svg{ overflow:visible; max-width:100%; height:auto; }

.seal__arc{
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:4.4px;
}
/* GARANTIA tem menos letras: abre o rastreio para as duas curvas pesarem igual */
.seal__arc--topo{ letter-spacing:9px; }
.seal__num{
  font-family:var(--serif); font-size:74px; font-weight:700; fill:var(--gold-lt);
}
.seal__dias{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:5px; fill:var(--gold);
}

.seal__glow, .seal__ticks{ transform-box:view-box; transform-origin:50% 50%; }
.seal__glow { animation:selo-pulsa 5s ease-in-out infinite; }
.seal__ticks{ animation:selo-girar 70s linear infinite; }

/* o anel se desenha como se estivesse contando os 7 dias */
.seal__ring{
  transform-box:view-box; transform-origin:50% 50%;
  transform:rotate(-90deg);
  stroke-dasharray:389.6;
  stroke-dashoffset:389.6;
  animation:selo-traco 5s ease-in-out infinite;
}
@keyframes selo-girar{ to{ transform:rotate(360deg); } }
@keyframes selo-pulsa{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
@keyframes selo-traco{
  0%   { stroke-dashoffset:389.6; opacity:1; }
  52%  { stroke-dashoffset:0;     opacity:1; }
  84%  { stroke-dashoffset:0;     opacity:1; }
  97%  { stroke-dashoffset:0;     opacity:0; }
  100% { stroke-dashoffset:389.6; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .seal__glow, .seal__ticks{ animation:none; }
  .seal__ring{ animation:none; stroke-dashoffset:0; }
}

/* ===========================================================
   FAQ
   =========================================================== */
.faq{ background:#0A0908; padding-top:clamp(44px,5vw,76px); padding-bottom:clamp(40px,4.5vw,70px); }
.garantia{ padding-bottom:clamp(44px,5vw,76px); }
.garantia .lead{ text-wrap:balance; }
.acc{ margin-top:46px; display:grid; gap:14px; }
.acc__item{ border-radius:6px; overflow:hidden; background:#302D29; }
.acc__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:transparent; border:0;
  color:var(--gold-lt);
  font-family:var(--sans); font-size:.98rem; font-weight:500;
  text-align:left;
  padding:24px 28px;
  cursor:pointer;
}
.acc__ico{ position:relative; flex:none; width:16px; height:16px; }
.acc__ico::before,.acc__ico::after{
  content:""; position:absolute; background:var(--gold-soft);
  left:50%; top:50%; translate:-50% -50%;
}
.acc__ico::before{ width:14px; height:1.6px; }
.acc__ico::after{ width:1.6px; height:14px; transition:transform .28s ease; }
.acc__q[aria-expanded="true"] .acc__ico::after{ transform:scaleY(0); }
.acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease; }
.acc__a > p{ overflow:hidden; margin:0; padding:0 28px; color:#CDC7BF; font-size:.94rem; line-height:1.7; }
.acc__item.is-open .acc__a{ grid-template-rows:1fr; }
.acc__item.is-open .acc__a > p{ padding-bottom:26px; }

/* ===========================================================
   FECHAMENTO
   =========================================================== */
/* degrade so no fechamento: dourado embaixo, cor do FAQ em cima */
.fechamento{
  padding-top:clamp(40px,4.5vw,72px);
  background:linear-gradient(to top,
    #7A6330 0%, #564523 9%, #2E2514 25%, #161109 48%, #0A0908 76%);
}
.whats{
  background:#fff;
  color:#1A1713;
  border-radius:16px;
  max-width:760px;
  margin:70px auto 0;
  padding:44px 40px 46px;
  text-align:center;
}
.whats__ico{
  display:grid; place-items:center;
  width:76px; height:76px; border-radius:50%;
  background:linear-gradient(180deg,#D3AC55,#BE9740);
  margin:0 auto 22px;
}
.whats__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.5vw,31px); margin:0 0 14px; color:#1A1713;
}
.whats__title .gold-warm{ color:#C9A44C; }
.whats__text{ margin:0 0 28px; font-size:.94rem; line-height:1.6; color:#3C3830; }
.whats__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.whats__actions .btn{ padding:17px 20px; font-size:.7rem; letter-spacing:.08em; flex:1 1 auto; }
.btn--wa-light{ background:linear-gradient(180deg,#7CF0B4,#3FCE8A); color:#0C3A24; }
.btn--wa-dark{  background:linear-gradient(180deg,#0F7A46,#0A5C34); color:#fff; }

.footer{
  background:#0A0908;
  border-top:0;
  padding:34px 24px;
  text-align:center;
}
.footer p{ margin:0; color:var(--gold-soft); opacity:.8; font-size:.92rem; }

/* ===========================================================
   POPUP DE LIGAÇÃO
   =========================================================== */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:20px;
}
.modal__fundo{
  position:absolute; inset:0;
  background:rgba(5,4,3,.78);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal__caixa{
  position:relative; z-index:1;
  width:min(100%, 430px);
  max-height:92vh; overflow-y:auto;
  background:#fff; color:#1A1713;
  border-radius:16px;
  padding:38px 32px 32px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  animation:modal-entra .28s ease;
}
@keyframes modal-entra{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion: reduce){ .modal__caixa{ animation:none; } }
.modal__x{
  position:absolute; top:8px; right:14px;
  background:none; border:0; font-size:30px; line-height:1;
  color:#9A938A; cursor:pointer;
}
.modal__x:hover{ color:#1A1713; }
.modal__titulo{
  font-family:var(--serif); font-weight:400;
  font-size:1.5rem; margin:0 0 8px; color:#1A1713;
}
.modal__texto{ margin:0 0 22px; font-size:.92rem; line-height:1.5; color:#4A443C; }
.campo{ display:block; margin-bottom:14px; }
.campo span{
  display:block; font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:#6A635A; margin-bottom:6px;
}
.campo input{
  width:100%; padding:14px 16px;
  font-family:var(--sans); font-size:1rem;
  border:1px solid #D9D4CC; border-radius:8px;
  background:#FAF9F7; color:#1A1713;
}
.campo input::placeholder{ color:#A79F95; }
.campo input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.campo input[aria-invalid="true"]{ border-color:#C4443B; background:#FDF4F3; }
.modal__erro{ margin:2px 0 14px; color:#B3372F; font-size:.88rem; }
.modal__form .btn{ margin-top:8px; }
.campo--isca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.modal__ok[hidden]{ display:none; }
.modal__ok{ text-align:center; padding:6px 0 0; }
.modal__check{
  display:grid; place-items:center;
  width:62px; height:62px; border-radius:50%;
  background:#E8F6EE; color:#1E9E5F;
  margin:0 auto 16px;
}
.modal__ok h4{
  font-family:var(--serif); font-weight:400;
  font-size:1.35rem; margin:0 0 8px; color:#1A1713;
}
.modal__ok p{ margin:0 0 22px; font-size:.94rem; color:#4A443C; }
.btn[disabled]{ opacity:.6; cursor:progress; }
body.travado{ overflow:hidden; }

/* ===========================================================
   REVEAL
   =========================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===========================================================
   RESPONSIVO
   =========================================================== */
@media (max-width:1180px){
  .hero__art{ width:56%; opacity:.9; }
  .hero__copy{ max-width:470px; }
}

@media (max-width:960px){
  body{ font-size:16px; }
  /* no celular o bloco fica bem mais alto que a arte: esticar vira listra,
     entao recorta mantendo a proporcao e ancora no brilho da esquerda */
  /* ampliar ate cobrir deixava o quadriculado gigante.
     Aqui a arte entra no topo em escala menor e some num degrade. */
  .dobra3{
    background-image:
      linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,.25) 58%, var(--bg) 100%),
      url("assets/dobra3-bg.webp?v=6");
    background-repeat:no-repeat, no-repeat;
    background-size:100% 900px, 250% auto;
    background-position:center top, 16% top;
  }

  /* no celular a arte do fundo fica so no bloco da foto, o texto vem abaixo */
  .hero{ padding:0 0 0; min-height:auto; display:block; background-image:none; }
  .hero__inner{ padding-bottom:40px; padding-top:30px; }
  .hero__copy{ max-width:none; text-align:center; }
  .hero__title{ max-width:none; margin-inline:auto; }
  .hero__sub{ margin-inline:auto; }
  .logo{ width:250px; margin-inline:auto; }
  .hero__art{
    position:relative; width:100%; height:auto;
    aspect-ratio:16/13; margin-top:0;
    background-color:var(--bg);
    background-image:url("assets/hero-bg.webp?v=6");
    background-repeat:no-repeat;
    background-position:100% 44%;
    background-size:180% auto;
    -webkit-mask-image:linear-gradient(180deg,#000 80%, transparent 100%);
            mask-image:linear-gradient(180deg,#000 80%, transparent 100%);
  }
  .hero__man{ left:2%; width:56%; }
  .hero__woman{ right:2%; width:54%; }

  .split, .split--wide{ grid-template-columns:1fr; }
  .metodo__art{ order:-1; }
  .sobre__card{
    display:block; aspect-ratio:auto; border-radius:20px;
    background-position:64% center; background-size:200% auto;
  }
  .sobre__text{ width:auto; padding:clamp(28px,6vw,44px); }
  .sobre__photo{ position:relative; width:auto; right:auto; bottom:auto; display:flex; justify-content:center; }
  .sobre__photo img{
    width:auto; max-height:430px;
    -webkit-mask-image:linear-gradient(180deg,#000 74%, transparent 100%);
            mask-image:linear-gradient(180deg,#000 74%, transparent 100%);
  }
  .sobre__card::before{ background:linear-gradient(180deg,#0A0908 18%, rgba(10,9,8,.6) 60%, rgba(10,9,8,.2)); }

  .videos{ grid-template-columns:repeat(2,1fr); max-width:520px; }
  .quotes{ grid-template-columns:1fr; max-width:520px; }
  .planos{
    background-image:
      linear-gradient(180deg, rgba(11,10,8,0) 0%, rgba(11,10,8,.3) 60%, #0B0A08 100%),
      url("assets/vendas-bg.webp?v=6");
    background-repeat:no-repeat, no-repeat;
    background-size:100% 820px, 250% auto;
    background-position:center top, 20% top;
  }
  .pricing{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .plan--featured, .plan--top{ margin-top:0; }
  .plan__inner, .plan--featured .plan__inner{ min-height:0; padding:38px 26px 34px; }
  .plan__name{ font-size:30px; margin-bottom:28px; }
  .plan__list li{ font-size:1.02rem; padding-left:36px; }
  .plan__list li::before{ width:22px; height:22px; }
  .plan__price strong{ font-size:2.7rem; }
  .plan__price--lg strong{ font-size:3rem; }
  .plan__x{ font-size:1.05rem; }
  .plan__full{ font-size:1.12rem; }
  .plan__tab{ font-size:.86rem; padding:15px 10px; }
  .plan .btn{ font-size:1.06rem; padding:19px 24px; }

  .trail__grid{
    grid-template-columns:1fr;
    padding:0 34px;
    gap:52px;
  }
  .p1,.p2,.p3,.p4,.p5{ grid-column:1; grid-row:auto; justify-self:stretch; width:auto; }
  .phase__mods{ padding-top:20px; }
  .plano__head{ flex-direction:column; }
  .plano__badge{ display:none; }

  /* no celular o painel nao cabe na proporcao original: vira caixa fluida */
  .fases{ padding-inline:16px; margin-top:48px; }
  .fases__painel{
    width:100%;
    aspect-ratio:auto;
    padding:34px 0 96px;
    background-position:center top;
    background-size:260% auto;
  }
  .fases__luz{ width:86%; height:120px; top:-28px; filter:blur(26px); }
  .fases__viewport{
    position:static;
    left:auto; right:auto; top:auto;
    padding-inline:16px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  }
  .fases__nav{ top:auto; bottom:30px; }
  .modcard{ flex-basis:190px; }
  .quotebox{ padding:32px 26px; font-size:.98rem; }
  .truth{ padding:28px 24px; }
  .whats__actions .btn{ width:100%; }
}

@media (max-width:560px){
  .btn{ padding:17px 26px; font-size:.78rem; }
  .strip p{ font-size:1.05rem; }
  .videos{ grid-template-columns:1fr; max-width:280px; }
  .whats{ padding:34px 22px 36px; }
  .checks li{ padding:16px 18px 16px 56px; }
  .checks li::before{ left:18px; }
}