/* =========================================================
   Protocolo Noite Tranquila — landing page
   Estética: clínica / editorial. Clara, sóbria, com uma
   única seção escura (o ciclo) para dar respiro e contraste.
   ========================================================= */

:root{
  /* superfícies claras */
  --paper:      #FAF8F5;   /* fundo geral, off-white quente */
  --paper-2:    #F2EEE8;   /* faixas alternadas */
  --card:       #FFFFFF;
  --line:       #E3DDD3;
  --line-2:     #CFC7B9;

  /* tinta */
  --ink:        #16181D;
  --ink-2:      #4A4E5A;
  --ink-3:      #7C8090;

  /* marca */
  --brand:      #1C2B4A;   /* azul meia-noite */
  --brand-2:    #2E4373;
  --brand-soft: #EDF0F6;
  --amber:      #B0783C;   /* luz de abajur */
  --amber-soft: #F6EFE4;

  /* seção escura */
  --night:      #101725;
  --night-2:    #18202F;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad:       clamp(1.15rem, 5vw, 2rem);
  --section-y: clamp(4rem, 9vw, 7rem);
  --r:         8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0;
  color:var(--brand);
}
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
strong{ font-weight:600; }
em{ font-style:italic; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:780px; }
.wrap--mid{ max-width:940px; }

/* compensa a altura do cabeçalho fixo ao pular por âncora */
:target,
section[id], header[id]{ scroll-margin-top:112px; }
@media (max-width:680px){ section[id], header[id]{ scroll-margin-top:96px; } }

.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--paper-2); border-block:1px solid var(--line); }
.section--brand{ background:var(--brand-soft); border-block:1px solid #DCE2EE; }

.br-desk{ display:none; }
@media (min-width:760px){ .br-desk{ display:inline; } }

/* ---------- rótulos e títulos ---------- */
.label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 .9rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.label::before{
  content:"";
  width:22px; height:1px;
  background:var(--amber);
  flex:none;
}
.label--center{ justify-content:center; }

.h2{
  font-size:clamp(1.7rem, 1.1rem + 2.5vw, 2.65rem);
  max-width:24ch;
  margin-bottom:1.1rem;
}
.h2--center{ text-align:center; margin-inline:auto; max-width:26ch; }

.sub{
  color:var(--ink-2);
  max-width:58ch;
  margin-bottom:2.75rem;
  font-size:1.05rem;
}
.sub--center{ text-align:center; margin-inline:auto; }

.prose{ color:var(--ink-2); max-width:62ch; }
.prose__lead{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 1rem + .95vw, 1.5rem);
  line-height:1.4;
  color:var(--brand);
  font-weight:400;
  padding-left:1.25rem;
  border-left:2px solid var(--amber);
  margin-block:1.8rem;
}

/* ---------- botões ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.005em;
  text-decoration:none;
  padding:1.05rem 2.15rem;
  border-radius:var(--r);
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn--primary{
  color:#fff;
  background:var(--brand);
  box-shadow:0 1px 2px rgba(22,24,29,.18);
}
.btn--primary:hover{ background:var(--brand-2); transform:translateY(-1px); }
.btn--amber{ color:#fff; background:var(--amber); }
.btn--amber:hover{ background:#9C6931; transform:translateY(-1px); }

/* botões laranja — compra (.btn--cta) e navegação para a oferta (.btn--go) */
.btn--cta,
.btn--go{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#E2702A;
  border-radius:10px;
  line-height:1.25;
  box-shadow:0 10px 26px -12px rgba(226,112,42,.85),
             0 1px 0 rgba(255,255,255,.25) inset;
  animation:cta-pulse 2.8s ease-in-out infinite;
}
.btn--cta{ padding:1.1rem 1.75rem; }
.btn--go{ padding:1rem 1.9rem; }

.btn--cta:hover,
.btn--go:hover{
  background:#C9601F;
  transform:translateY(-2px);
  animation-play-state:paused;
  box-shadow:0 16px 32px -12px rgba(226,112,42,.95);
}

/* brilho que atravessa o botão */
.btn--cta::after,
.btn--go::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-45%;
  width:32%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg);
  animation:shine 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{
  0%      { left:-45%; }
  55%,100%{ left:135%; }
}

.btn__arrow{
  display:inline-block;
  margin-left:.45rem;
  transition:transform .22s ease;
}
.btn--go:hover .btn__arrow{ transform:translateX(4px); }

/* bloco de CTA no meio das seções */
.cta-inline{ text-align:center; margin-top:clamp(2.25rem,5vw,3rem); }
.cta-inline__note{
  margin:.9rem 0 0;
  font-size:.85rem;
  color:var(--ink-3);
}
.night .cta-inline__note{ color:#8792A8; }
.btn__main{
  display:block;
  font-size:clamp(1rem,.97rem + .3vw,1.12rem);
  font-weight:700;
  letter-spacing:.01em;
}
.btn__sub{
  display:block;
  font-size:.8rem;
  font-weight:400;
  opacity:.92;
  margin-top:.3rem;
}
@keyframes cta-pulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.018); }
}
.btn--block{ display:block; width:100%; text-align:center; }
.btn__note{
  margin:.9rem 0 0;
  font-size:.84rem;
  color:var(--ink-3);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{ position:sticky; top:0; z-index:40; }

/* barra de oferta */
.announce{
  background:var(--brand);
  color:#E8EDF7;
  font-size:.8rem;
  line-height:1.35;
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:38px;
  padding-block:.45rem;
  text-align:center;
  flex-wrap:wrap;
}
.announce__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#E2702A;
  flex:none;
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{ opacity:1;  box-shadow:0 0 0 0 rgba(226,112,42,.7); }
  70%    { opacity:.85; box-shadow:0 0 0 7px rgba(226,112,42,0); }
}
.announce__text{ margin:0; }
.announce__text strong{ color:#fff; font-weight:600; }
.announce__link{
  color:#fff;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.announce__link:hover{ color:#F0B27A; }
@media (max-width:680px){
  .announce{ font-size:.74rem; }
  .announce__long{ display:none; }
}

.topbar{
  background:rgba(250,248,245,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:64px;
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand__mark{
  width:30px; height:30px;
  flex:none;
  border-radius:50%;
  border:1px solid var(--line-2);
  display:grid; place-items:center;
  color:var(--brand);
}
.brand__name{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.02rem;
  color:var(--brand);
  letter-spacing:-.01em;
  line-height:1.1;
}
.topbar .btn{ padding:.62rem 1.15rem; font-size:.88rem; }
@media (max-width:620px){ .topbar__cta{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding-block:clamp(2.75rem,7vw,4.75rem) clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--line);
}
/* mobile: uma coluna, na ordem do HTML — headline, imagem, subtítulo, CTA */
.hero__grid{ display:grid; gap:1.6rem; }

/* desktop: duas colunas, com a imagem ocupando a direita inteira */
@media (min-width:940px){
  .hero__grid{
    grid-template-columns:1.08fr .92fr;
    grid-template-areas:
      "head  img"
      "body  img";
    column-gap:clamp(2.25rem,5vw,3.5rem);
    row-gap:1.6rem;
    align-content:center;
  }
  .hero__head{ grid-area:head; align-self:end; }
  .hero__body{ grid-area:body; align-self:start; }
  .frame--hero{ grid-area:img; align-self:center; }
}

.hero__credential{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.82rem;
  line-height:1.35;
  font-weight:400;
  color:var(--ink-2);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:100px;
  padding:.4rem 1.1rem .4rem .4rem;
  margin-bottom:1.5rem;
  text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hero__credential:hover{
  border-color:var(--line-2);
  box-shadow:0 4px 14px -8px rgba(28,43,74,.35);
}
.hero__credential img{
  width:38px; height:38px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
}
.hero__credential strong{ color:var(--brand); font-weight:600; }
.hero__credential-role{ color:var(--ink-3); font-size:.78rem; }
.br-mob{ display:none; }
@media (max-width:420px){ .br-mob{ display:inline; } }

.hero h1{
  font-size:clamp(2rem, 1.2rem + 3.5vw, 3.4rem);
  max-width:17ch;
  margin-bottom:1.3rem;
}
.hero__sub{
  color:var(--ink-2);
  max-width:50ch;
  font-size:clamp(1.02rem,.99rem + .3vw,1.14rem);
  margin-bottom:2rem;
}
.hero__cta{ margin-bottom:1.75rem; }

.hero__trust{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.86rem;
  color:var(--ink-3);
}
.hero__trust li{ display:flex; align-items:center; gap:.5rem; }
.hero__trust svg{ color:var(--amber); flex:none; }

/* moldura de imagem */
.frame{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  overflow:hidden;
}
.frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.frame--hero{ aspect-ratio:4/5; }
.frame--hero img{ object-position:center 45%; }
.frame--author img{ object-position:center 22%; }
/* no mobile a foto vira um corte deitado: ocupa menos altura e mantém
   o CTA visível sem precisar rolar */
@media (max-width:939px){
  .frame--hero{ aspect-ratio:5/4; max-width:540px; margin-inline:auto; }
}
@media (max-width:520px){
  .frame--hero{ aspect-ratio:3/2; }
}

/* placeholder honesto de imagem */
.ph{
  position:absolute; inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  gap:.4rem;
  background:linear-gradient(160deg,#F4F1EB 0%,#E9E4DA 100%);
  color:var(--ink-3);
  padding:1.5rem;
}
.ph strong{
  display:block;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:600;
}
.ph span{ font-size:.82rem; line-height:1.5; max-width:28ch; }

/* =========================================================
   PROVA SOCIAL (topo)
   ========================================================= */
.proof{ padding-block:var(--section-y); }
.proof .h2{ margin-bottom:2.5rem; }
.proof__item{ background:var(--card); }
.proof__grid{ display:grid; gap:1rem; }
@media (min-width:760px){ .proof__grid{ grid-template-columns:repeat(3,1fr); } }

.proof__item{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.6rem 1.5rem;
}
.proof__stars,
.feature__stars{ display:flex; gap:2px; color:#E0A63C; margin-bottom:.9rem; }

.proof__quote{
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:1.35rem;
  flex:1;
}

.proof__who,
.feature figcaption{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.82rem;
  line-height:1.4;
  color:var(--ink-3);
  font-family:var(--sans);
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.proof__who strong,
.feature figcaption strong{ color:var(--ink); font-weight:600; font-size:.9rem; }

.proof__avatar,
.feature__avatar{
  flex:none;
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.02em;
  border:1px solid #DCE2EE;
  object-fit:cover;
}

.proof__note{
  margin:1.75rem 0 0;
  text-align:center;
  font-size:.8rem;
  color:var(--ink-3);
  line-height:1.55;
}

/* depoimento em destaque */
.feature{
  margin:clamp(2.5rem,6vw,3.5rem) 0 0;
  padding:clamp(1.75rem,4vw,2.5rem);
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--card);
  box-shadow:0 24px 60px -46px rgba(28,43,74,.5);
}
.feature blockquote{ margin:0 0 1.5rem; }
.feature blockquote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.08rem,1rem + .55vw,1.3rem);
  line-height:1.55;
  color:var(--ink);
}
.feature__avatar{ width:46px; height:46px; font-size:1rem; }

/* =========================================================
   CICLO — seção escura
   ========================================================= */
.night{
  background:var(--night);
  color:#DDE3EE;
  padding-block:var(--section-y);
}
.night h2,.night h3{ color:#F4F6FA; }
.night .label{ color:#C79A5E; }
.night .label::before{ background:#C79A5E; }
.night .sub{ color:#9AA4B8; }

.cycle{ display:grid; gap:.9rem; margin-bottom:2.75rem; }
@media (min-width:700px){ .cycle{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.cycle__item{
  position:relative;
  padding:1.5rem 1.4rem;
  border:1px solid rgba(221,227,238,.14);
  border-radius:var(--r);
  background:var(--night-2);
}
.cycle__num{
  font-family:var(--serif);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.12em;
  color:#C79A5E;
  display:block;
  margin-bottom:.6rem;
}
.cycle__item h3{ font-size:1.12rem; margin-bottom:.45rem; }
.cycle__item p{ margin:0; font-size:.92rem; color:#98A2B6; line-height:1.6; }
.cycle__item--loop{ border-color:rgba(199,154,94,.4); }
.cycle__item--loop h3{ color:#E8C89A; }

.cycle__punch{
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.12rem,1rem + .95vw,1.5rem);
  line-height:1.45;
  color:#F4F6FA;
  max-width:48ch;
  margin-inline:auto;
  margin-bottom:0;
}

/* =========================================================
   MECANISMO
   ========================================================= */
.mech{ display:grid; gap:clamp(2.25rem,5vw,4rem); align-items:center; }
@media (min-width:940px){ .mech{ grid-template-columns:1.1fr .9fr; } }

.steps{ display:grid; gap:.8rem; margin-top:2.25rem; }
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.1rem;
  align-items:start;
  padding:1.25rem 1.35rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
}
.step__time{
  font-family:var(--serif);
  font-weight:600;
  font-size:.85rem;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:4px;
  padding:.3rem .6rem;
  white-space:nowrap;
  margin-top:.12rem;
}
.step h3{ font-size:1.05rem; margin-bottom:.25rem; }
.step p{ margin:0; font-size:.92rem; color:var(--ink-2); line-height:1.58; }

.mech__clock{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  padding:clamp(2.5rem,6vw,3.5rem) 1.5rem;
  text-align:center;
}
.mech__clock-num{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(4rem,10vw,6rem);
  line-height:1;
  color:var(--brand);
}
.mech__clock-label{
  display:block;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--amber);
  margin-top:.6rem;
}
.mech__clock-note{
  margin:1.25rem 0 0;
  font-size:.88rem;
  color:var(--ink-3);
  line-height:1.55;
}

/* =========================================================
   AUTORIDADE
   ========================================================= */
.author{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:860px){ .author{ grid-template-columns:.85fr 1.15fr; } }
.frame--author{ aspect-ratio:4/5; max-width:420px; margin-inline:auto; width:100%; }

.author h2{ font-size:clamp(1.6rem,1.1rem + 2.1vw,2.4rem); margin-bottom:1.2rem; }
/* assinatura */
.author__sign{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  color:var(--brand);
  margin:1.6rem 0 0;
  line-height:1;
}

.author__cred{
  display:grid;
  gap:.7rem;
  margin:1.6rem 0 0;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.author__cred li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  font-size:.95rem;
  color:var(--ink-2);
  line-height:1.55;
}
.author__cred svg{ color:var(--amber); flex:none; margin-top:.28rem; }

/* =========================================================
   CARDS DE ENTREGA
   ========================================================= */
.cards{ display:grid; gap:1rem; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .cards{ grid-template-columns:repeat(4,1fr); } }

.card{
  padding:1.85rem 1.55rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.card__ico{
  width:38px; height:38px;
  border-radius:6px;
  background:var(--brand-soft);
  color:var(--brand);
  display:grid; place-items:center;
  margin-bottom:1rem;
}
.card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.card p{ margin:0; font-size:.92rem; color:var(--ink-2); line-height:1.58; }

/* =========================================================
   VOCÊ VAI APRENDER — checklist densa
   ========================================================= */
.learn{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.5rem);
}
.learn__title{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
  color:var(--brand);
  margin-bottom:1.4rem;
}
.learn ul{ display:grid; gap:.1rem; }
@media (min-width:780px){ .learn ul{ grid-template-columns:1fr 1fr; gap:.1rem 2.25rem; } }
.learn li{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
  font-size:.96rem;
  color:var(--ink-2);
  line-height:1.5;
}
.learn li svg{ color:var(--amber); flex:none; margin-top:.3rem; }
.learn__more{
  margin:1.4rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-3);
  font-size:1rem;
}

/* =========================================================
   ANTES / DEPOIS
   ========================================================= */
.contrast{ display:grid; gap:1.15rem; }
@media (min-width:860px){ .contrast{ grid-template-columns:1fr 1fr; } }
.contrast__col{
  padding:1.9rem 1.7rem;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--card);
}
.contrast__col h3{ font-size:1.2rem; margin-bottom:1.3rem; line-height:1.3; }
.contrast__col ul{ display:grid; gap:.95rem; }
.contrast__col li{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  font-size:.96rem;
  line-height:1.55;
  color:var(--ink-2);
}
.contrast__col svg{ flex:none; margin-top:.25rem; }
.contrast__col--before{ background:#F7F4F0; }
.contrast__col--before h3{ color:var(--ink-2); }
.contrast__col--before svg{ color:#B4795F; }
.contrast__col--after{ border-color:#DCE2EE; background:var(--brand-soft); }
.contrast__col--after svg{ color:var(--brand); }
.contrast__col--after li{ color:var(--ink); }

.disclaimer{
  font-size:.85rem;
  color:var(--ink-3);
  line-height:1.6;
  padding:1.05rem 1.2rem;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--card);
  margin:1.75rem 0 0;
}

/* =========================================================
   PARA QUEM É — personas
   ========================================================= */
.personas{ display:grid; gap:1rem; }
@media (min-width:700px){ .personas{ grid-template-columns:repeat(2,1fr); } }
.persona{
  padding:1.75rem 1.6rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
}
.persona__n{
  font-family:var(--serif);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--amber);
  display:block;
  margin-bottom:.65rem;
}
.persona h3{ font-size:1.1rem; margin-bottom:.5rem; }
.persona p{ margin:0; font-size:.93rem; color:var(--ink-2); line-height:1.58; }

.notfor{
  margin-top:1.75rem;
  padding:1.6rem 1.7rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#F7F4F0;
}
.notfor h3{ font-size:1.05rem; color:var(--ink-2); margin-bottom:1rem; }
.notfor ul{ display:grid; gap:.75rem; }
@media (min-width:760px){ .notfor ul{ grid-template-columns:1fr 1fr; gap:.75rem 2rem; } }
.notfor li{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:.93rem; color:var(--ink-3); line-height:1.5;
}
.notfor svg{ flex:none; margin-top:.28rem; color:var(--ink-3); }

/* =========================================================
   OFERTA
   ========================================================= */
.offer{
  border:1px solid var(--line-2);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 24px 60px -40px rgba(28,43,74,.45);
}
.offer__head{
  background:var(--brand);
  color:#fff;
  padding:1.5rem clamp(1.4rem,4vw,2.25rem);
  text-align:center;
}
.offer__head h3{
  color:#fff;
  font-size:1.2rem;
  margin-bottom:.3rem;
}
.offer__head p{
  margin:0;
  font-size:.9rem;
  color:#B9C4DA;
}

.stack{ padding:clamp(1.4rem,4vw,2.25rem); display:grid; gap:1.1rem; }
.stack__row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.25rem;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.stack__row:last-child{ border-bottom:0; padding-bottom:0; }
.stack__info{ flex:1 1 17rem; min-width:0; }
.stack__kicker{
  display:inline-block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.24rem .55rem;
  border-radius:4px;
  margin-bottom:.5rem;
  background:var(--brand-soft);
  color:var(--brand);
}
.stack__kicker--bonus{ background:var(--amber-soft); color:var(--amber); }
.stack__info h4{ font-size:1.06rem; margin-bottom:.25rem; }
.stack__info p{ margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.55; }
.stack__value{
  flex:none;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.08rem;
  color:var(--brand);
  white-space:nowrap;
}
.stack__value s{ color:var(--ink-3); font-weight:400; margin-right:.4rem; }
.stack__free{ color:var(--amber); }

.included{
  padding:clamp(1.3rem,3.5vw,1.85rem) clamp(1.4rem,4vw,2.25rem);
  border-top:1px solid var(--line);
  background:var(--paper-2);
}
.included__title{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:1rem;
}
.included ul{ display:grid; gap:.7rem; }
@media (min-width:620px){ .included ul{ grid-template-columns:1fr 1fr; gap:.75rem 1.75rem; } }
.included li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.94rem; color:var(--ink-2); line-height:1.5;
}
.included svg{ color:var(--brand); flex:none; margin-top:.28rem; }

.price{
  padding:clamp(1.75rem,4vw,2.5rem);
  text-align:center;
  border-top:1px solid var(--line);
}
.price__scarcity{
  font-size:.87rem;
  line-height:1.55;
  color:#8A4B1B;
  background:var(--amber-soft);
  border:1px solid #E8D4B8;
  border-radius:6px;
  padding:.85rem 1.1rem;
  margin-bottom:1.75rem;
  text-align:center;
}
.price__scarcity strong{ color:#7A3F13; }

.price__total{
  font-size:1rem;
  color:var(--ink-2);
  margin-bottom:.5rem;
}
.price__total strong{ color:var(--brand); font-family:var(--serif); font-size:1.15rem; }
.price__logic{
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-3);
  max-width:46ch;
  margin-inline:auto;
  margin-bottom:1.75rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.price__save{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#1E6B45;
  background:#E6F2EB;
  border:1px solid #C7E2D3;
  border-radius:4px;
  padding:.35rem .8rem;
  margin:0 0 1.6rem;
}
.price__from{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.4rem;
}
.price__value{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(3rem,2rem + 5vw,4.2rem);
  line-height:1;
  margin:0 0 .4rem;
  color:var(--brand);
}
.price__value span{ font-size:.36em; vertical-align:super; margin-right:.12em; color:var(--amber); }
.price__value small{ font-size:.34em; font-weight:600; letter-spacing:-.01em; }

.price__installment{
  font-size:1.05rem;
  color:var(--ink-2);
  margin-bottom:1rem;
}
.price__installment strong{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--brand);
}

.price__cond{ font-size:.9rem; color:var(--ink-3); margin-bottom:1.6rem; }
.price__why{
  margin:1.5rem 0 0;
  padding-top:1.35rem;
  border-top:1px solid var(--line);
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:44ch;
  margin-inline:auto;
}

/* =========================================================
   GARANTIA
   ========================================================= */
.guarantee{
  display:grid;
  gap:1.6rem;
  align-items:center;
  padding:clamp(1.6rem,4vw,2.5rem);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  text-align:center;
}
@media (min-width:700px){
  .guarantee{ grid-template-columns:auto 1fr; text-align:left; gap:2.25rem; }
}
.guarantee__seal{
  width:104px; height:104px;
  margin-inline:auto;
  border-radius:50%;
  display:grid; place-content:center; text-align:center;
  border:1px solid var(--line-2);
  background:var(--amber-soft);
  color:var(--amber);
}
.guarantee__seal span{
  font-family:var(--serif);
  font-weight:600;
  font-size:2.4rem;
  line-height:1;
}
.guarantee__seal small{
  display:block;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-top:.25rem;
}
.guarantee h2{ font-size:1.55rem; margin-bottom:.6rem; }
.guarantee p{ margin:0; color:var(--ink-2); font-size:.97rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:.55rem; }
.faq details{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  overflow:hidden;
}
.faq details[open]{ border-color:var(--line-2); }
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.15rem 3.1rem 1.15rem 1.35rem;
  font-size:1rem;
  font-weight:500;
  color:var(--brand);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  position:absolute;
  right:1.35rem; top:50%;
  width:9px; height:9px;
  border-right:1.5px solid var(--amber);
  border-bottom:1.5px solid var(--amber);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq details p{
  margin:0;
  padding:0 1.35rem 1.35rem;
  color:var(--ink-2);
  font-size:.95rem;
  line-height:1.65;
}

/* =========================================================
   FECHAMENTO + FOOTER
   ========================================================= */
.close{ text-align:center; }
.close .h2{ margin-inline:auto; }
.close__cta{ margin-top:2rem; }

.footer{
  background:var(--night);
  color:#9AA4B8;
  padding-block:3rem 3.5rem;
  text-align:center;
  font-size:.85rem;
}
.footer__brand{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.05rem;
  color:#F4F6FA;
  margin-bottom:1rem;
}
.footer__legal{ line-height:1.65; max-width:62ch; margin-inline:auto; margin-bottom:1.4rem; font-size:.8rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:1.3rem; justify-content:center; margin-bottom:1rem; }
.footer__links a{ color:#C3CCDC; text-decoration:none; }
.footer__links a:hover{ color:#fff; text-decoration:underline; }
.footer__copy{ font-size:.78rem; margin:0; color:#78829A; }

/* =========================================================
   CTA FIXA (mobile)
   ========================================================= */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:.75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .3s ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .btn{ padding-block:.85rem; }
@media (min-width:820px){ .sticky-cta{ display:none; } }

/* =========================================================
   REVEAL / A11Y
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

:where(a,summary,button):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}