/* Home com história, alternando foto / creme / foto:
   topo (foto) → a conversa (creme) → dois pés esquerdos (foto) → o empurrão (creme) → quem já veio (foto) → três jeitos (creme) → onde fica (foto) */

/* topo: título grande, uma linha, um botão */
.hero h1{max-width:14ch;font-size:clamp(48px,6vw,88px)}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.link-leve{color:var(--creme);font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px dashed var(--neon);padding-bottom:2px}
.link-leve:hover{color:var(--neon)}

/* a conversa na cabeça: só texto, grande, com respiro */
.conversa{padding:128px 0}
.conversa h2{font-size:clamp(40px,5vw,74px);max-width:16ch;margin-bottom:28px}
.conversa .lead{max-width:48ch;font-size:21px}
.conversa .lead b{color:var(--roxo);font-weight:700}

/* dois pés esquerdos: foto grande, rosto à direita, texto à esquerda */
.promessa.hist>img{left:6%;width:146%;object-position:50% 30%}
.promessa.hist::after{background:linear-gradient(90deg,rgba(27,16,48,.9) 0%,rgba(27,16,48,.6) 38%,rgba(27,16,48,0) 64%),linear-gradient(180deg,rgba(27,16,48,0) 40%,rgba(27,16,48,.35) 70%,rgba(27,16,48,.9) 100%)}
.promessa.hist .eyebrow{color:var(--neon)}
.promessa.hist h2{max-width:20ch;font-size:clamp(38px,4vw,58px)}
.promessa.hist p{max-width:44ch;font-size:18px;line-height:1.5}

/* o empurrão */
.empurrao{background:var(--creme)}
.empurrao h2{max-width:14ch}
.empurrao .passos{margin-top:40px}
.empurrao .cta-dupla{margin-top:36px}

/* quem já veio: depoimentos grandes sobre a foto da sanfona */
.prova.fundo-foto{padding:120px 0}
.prova .fundo img{object-position:50% 40%}
.prova .fundo::after{background:linear-gradient(90deg,rgba(27,16,48,.9) 0%,rgba(27,16,48,.75) 50%,rgba(27,16,48,.45) 100%)}
.depos{display:grid;gap:30px;max-width:720px}
.depos blockquote{margin:0;padding:0 0 0 22px;border-left:3px solid var(--rosa)}
.depos p{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.25;color:var(--creme);margin:0 0 8px}
.depos footer{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--neon)}

/* três jeitos, no creme, com a roda de forró do lado */
.jeitos .duas{gap:72px;align-items:center}
.jeitos h2{margin-bottom:28px}
.jeitos .opcoes{max-width:560px}
.foto.quadrada{aspect-ratio:1/1;max-width:460px;justify-self:end}

/* onde fica, sobre a barraca de praia */
.onde.fundo-foto{padding:120px 0}
.onde .fundo img{object-position:50% 60%}
.onde .fundo::after{background:linear-gradient(90deg,rgba(27,16,48,.88) 0%,rgba(27,16,48,.7) 45%,rgba(27,16,48,.3) 100%)}
.onde .end{color:var(--creme);font-family:var(--display);font-size:clamp(26px,3vw,40px);line-height:1.1;margin:0 0 18px;max-width:18ch}
.onde p:not(.end):not(.eyebrow){max-width:46ch;font-size:18px}

@media(max-width:1000px){
  .jeitos .duas{grid-template-columns:1fr;gap:36px}
  .foto.quadrada{justify-self:start;max-width:420px}
}
@media(max-width:760px){
  .hero h1{font-size:clamp(40px,11.5vw,54px)}
  .hero .cta .btn{width:100%}
  .link-leve{font-size:15px}
  .conversa{padding:64px 0}
  .conversa h2{font-size:clamp(34px,10vw,44px);margin-bottom:18px}
  .conversa .lead{font-size:17px}
  .promessa.hist>img{left:0;width:100%;object-position:62% 30%}
  .promessa.hist::after{background:linear-gradient(180deg,rgba(27,16,48,0) 30%,rgba(27,16,48,.5) 62%,rgba(27,16,48,.94) 100%)}
  .promessa.hist h2{font-size:clamp(34px,10vw,44px)}
  .promessa.hist p{font-size:16px}
  .empurrao .passos{margin-top:26px}
  .empurrao .cta-dupla{margin-top:24px}
  .empurrao .cta-dupla .btn{width:100%}
  .prova.fundo-foto{padding:64px 0}
  .prova .fundo::after{background:linear-gradient(180deg,rgba(27,16,48,.85),rgba(27,16,48,.9))}
  .depos{gap:22px}
  .depos p{font-size:21px}
  .jeitos h2{margin-bottom:18px}
  .foto.quadrada{max-width:none;aspect-ratio:3/2;margin-top:10px}
  .onde.fundo-foto{padding:64px 0}
  .onde .fundo::after{background:linear-gradient(180deg,rgba(27,16,48,.82),rgba(27,16,48,.9))}
  .onde .end{font-size:26px}
  .onde p:not(.end):not(.eyebrow){font-size:16px}
  .onde .cta-dupla .btn{width:100%}
}