/* ==========================================================================
   Formação em Pedagogia Sistêmica — Escola Sistêmica do Brasil
   Mundo visual: cartaz escolar serigrafado.
   Cantos retos em toda a página. Uma cor de ação: âmbar.
   ========================================================================== */

@font-face{font-family:Montserrat;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/montserrat-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/montserrat-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}

:root{
  /* tintas */
  --tinta:#2A1338;
  --tinta-2:#3A1B4E;
  --roxo:#5E2679;
  --magenta:#A62C60;
  --vermelho:#D6382C;
  --laranja:#F28C3C;
  --ambar:#FFC24D;
  --papel:#F7EDE2;
  --papel-fraco:rgba(247,237,226,.74);
  --papel-tenue:rgba(247,237,226,.16);

  --larg:1180px;
  --medida:62ch;
  --margem:28px;   /* respiro lateral do site — generoso de propósito */
  --chumbo:#3A3441;

  /* curvas: entrada rápida, sem ease-in em UI */
  --saida:cubic-bezier(.23,1,.32,1);
  --movimento:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--tinta);
  color:var(--papel);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
ul,ol,dl{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
a{color:inherit}

/* superfícies do navegador tratadas como parte do desenho */
::selection{background:var(--ambar);color:var(--tinta)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
html{scrollbar-color:var(--roxo) var(--tinta)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--tinta)}
::-webkit-scrollbar-thumb{background:var(--roxo)}

h1,h2,h3{margin:0 0 .5em;font-weight:900;letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(2.15rem,9vw,3.3rem);letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,6.2vw,3.1rem)}
h3{font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}

.medida{max-width:var(--medida)}
.centro{margin-inline:auto;text-align:center}
.centro .citacao{margin-inline:auto}
.quebra-desktop{display:none}
.apoio{color:var(--papel-fraco);font-size:1.03rem}
.camadas .apoio,.formacao .apoio,.vozes .apoio,.formacao .ganhos__nota{color:rgba(247,237,226,.88)}
.bloco{padding:clamp(72px,13vw,132px) var(--margem)}
section{position:relative}

.pular{position:absolute;left:-9999px;top:0;background:var(--ambar);color:var(--tinta);padding:12px 18px;font-weight:600;z-index:60}
.pular:focus{left:0}

/* ---------- Botão: chapa de tinta âmbar, canto reto ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:58px;padding:0 30px;
  background:var(--ambar);color:var(--tinta);
  font-weight:900;font-size:1rem;letter-spacing:-.01em;text-decoration:none;
  border:0;cursor:pointer;
  transition:transform .16s var(--saida),background-color .16s var(--saida);
}
.botao--largo{display:flex;width:100%}
.botao--mini{min-height:42px;padding:0 18px;font-size:.85rem}
.botao:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .botao:hover{background:#FFD37A}
}

/* ---------- Topo: nav secundária, só aparece depois do scroll ---------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--margem);
  background:rgba(42,19,56,.90);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transform:translateY(-100%);
  transition:opacity .22s var(--saida),transform .22s var(--saida);
}
.topo.visivel{opacity:1;pointer-events:auto;transform:translateY(0)}
.topo img{height:34px;width:auto}

/* ---------- 1. Capa ---------- */
.capa{
  position:relative;overflow:hidden;
  min-height:auto;
  display:flex;align-items:flex-end;
  padding:30px var(--margem) 26px;
  background:var(--tinta);
}
.capa__impressao{
  position:absolute;inset:0;
  background:url(images/sonho-hero-mobile.webp) center 42%/cover no-repeat;
  transform-origin:50% 40%;
}
.capa__impressao::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,19,56,.16) 0%,rgba(42,19,56,.22) 40%,rgba(42,19,56,.80) 92%);
}
.capa__texto{position:relative;z-index:2;width:100%;text-align:center}
.capa__marca{height:64px;width:auto;margin:0 auto 16px;display:block}
.capa h1{margin-bottom:.3em;text-wrap:balance;max-width:14ch;margin-inline:auto}
.capa p{max-width:34ch;color:var(--papel);font-size:1.01rem;margin:0 auto 1.1em;line-height:1.42}
.capa .botao{width:100%;min-height:50px}

/* ---------- 1.1 Vídeo (VSL) ---------- */
.capa__video{margin:0 0 14px}
.video{position:relative;overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.4);cursor:pointer}
.video--16x9{aspect-ratio:16/9}
.video img,.video iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video--16x9 img{filter:brightness(.82);transition:filter .2s var(--saida)}
.video__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:var(--ambar);box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.video__play::after{
  content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--tinta);
}
@media (hover:hover) and (pointer:fine){
  .video--16x9:hover img{filter:brightness(.68)}
}
.video.is-tocando{cursor:default}

/* ---------- 2. Ficha técnica ---------- */
.ficha{background:var(--ambar);color:var(--tinta)}
.ficha dl{display:grid;grid-template-columns:1fr 1fr;max-width:var(--larg);margin:0 auto}
.ficha div{padding:22px;border-right:1px solid rgba(24,10,30,.22);border-bottom:1px solid rgba(24,10,30,.22)}
.ficha div:nth-child(2n){border-right:0}
.ficha div:nth-last-child(-n+2){border-bottom:0}
.ficha dt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin-bottom:4px}
.ficha dd{margin:0;font-size:1.35rem;font-weight:900;letter-spacing:-.03em}

/* ---------- 3. Reconhecimento ---------- */
.reconhecer{position:relative;overflow:hidden;background:var(--tinta)}
.reconhecer__impressao{
  position:absolute;inset:0;
  background:url(images/sonho-reconhecer.webp) center 38%/cover no-repeat;
}
.reconhecer__impressao::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,19,56,.58) 0%,rgba(42,19,56,.50) 100%);
}
.reconhecer__corpo{
  position:relative;z-index:2;
  padding:clamp(72px,13vw,132px) var(--margem);
}
.reconhecer__titulo{max-width:var(--medida)}
.reconhecer h2{max-width:15ch;text-wrap:balance}
.cenas-lista{margin-top:clamp(34px,6vw,58px);display:grid;gap:26px;max-width:var(--larg)}
.cenas-lista li{
  padding-left:26px;position:relative;
  font-size:1.04rem;color:var(--papel-fraco);max-width:46ch;
}
.cenas-lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:12px;height:2px;background:var(--laranja);
}

/* ---------- 4. Camadas: campo de tinta roxa ---------- */
.camadas{background:var(--roxo);padding:40px var(--margem) clamp(72px,13vw,132px)}
.camadas h2{max-width:14ch;margin-inline:auto}
.citacao{
  margin:0 0 30px;padding:18px 0 18px 20px;border-left:2px solid var(--ambar);
}
.centro .citacao{
  border-left:0;border-top:2px solid var(--ambar);
  padding:12px 0 0;display:inline-block;margin-bottom:22px;
}
.citacao__fala{
  display:block;font-size:1.2rem;font-weight:600;font-style:italic;
  color:var(--papel);line-height:1.4;margin-bottom:.4em;max-width:26ch;
}
.citacao__autora{display:block;font-size:.82rem;color:rgba(247,237,226,.68)}
.registro{
  position:relative;
  margin:clamp(38px,7vw,64px) 0 clamp(30px,5vw,48px);
  max-width:var(--larg);
}
.chapa{padding:30px 24px;position:relative}
.chapa img{width:64px;height:auto;margin-bottom:16px}
.chapa h3{margin-bottom:.4em}
.chapa p{margin:0;color:rgba(247,237,226,.86);font-size:.98rem;max-width:34ch}
.chapa--topo{background:var(--chumbo);z-index:2}
.chapa--fundo{background:var(--magenta);z-index:1}
.chapa--fundo p{color:rgba(247,237,226,.82)}

.resolucao{
  max-width:var(--larg);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  border-top:2px solid var(--ambar);padding-top:28px;margin-inline:auto;
}
.resolucao img{width:56px}
.resolucao p{margin:0;font-size:1.1rem;font-weight:600;max-width:38ch}

/* ---------- 5. Leituras ---------- */
/* ---------- Respiro: foto pura, sem texto, sem forma ---------- */
.respiro{line-height:0;background:var(--tinta-2)}
.respiro img{width:100%;height:340px;object-fit:cover;display:block}
.respiro--quadrada img{height:380px;object-position:center 22%}

.leituras{background:var(--tinta-2)}
.leituras h2{max-width:18ch;margin-inline:auto}
.leitura{
  max-width:var(--larg);
  margin-top:clamp(40px,6vw,64px);
  padding-top:26px;border-top:1px solid var(--papel-tenue);
}
.leitura__fala{
  font-size:clamp(1.4rem,4.6vw,2rem);font-weight:900;letter-spacing:-.03em;
  line-height:1.1;margin-bottom:.6em;max-width:20ch;
}
.leitura__auto{color:var(--papel-fraco);font-size:.98rem;max-width:46ch}
.leitura__nova{
  font-size:1.02rem;max-width:52ch;margin:0;
  padding-left:18px;border-left:2px solid var(--laranja);
}

/* ---------- 6. Formação: campo magenta ---------- */
.formacao{background:var(--magenta);padding:clamp(72px,13vw,132px) var(--margem)}
.formacao__corpo{max-width:var(--larg);margin-top:clamp(36px,6vw,60px);display:grid;gap:clamp(40px,6vw,72px)}
.indice li{
  display:flex;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(247,237,226,.22);
  font-weight:600;font-size:1.02rem;
}
.indice li:last-child{border-bottom:0}
.indice span{font-size:.82rem;font-weight:900;color:var(--ambar);min-width:26px;letter-spacing:.02em}
.ganhos{text-align:center}
.ganhos h3{margin-bottom:1.8em;line-height:1.3}
.ganhos__lista{display:grid;gap:34px;max-width:340px;margin-inline:auto}
.ganhos__lista li{display:flex;flex-direction:column;align-items:center;gap:12px}
.ganhos__lista img{width:64px;height:auto}
.ganhos__lista p{margin:0;font-size:1.02rem;color:rgba(247,237,226,.92);max-width:26ch}
.ganhos__nota{margin-top:30px;font-size:.92rem}

/* ---------- 7. Materiais ---------- */
.materiais{background:linear-gradient(175deg,#3F9469 0%,#296A4A 100%)}
.prateleira{
  max-width:var(--larg);margin:clamp(40px,6vw,66px) auto 0;
  display:grid;gap:clamp(44px,6vw,56px);
  text-align:center;justify-items:center;
}
.material{margin:0}
.material__moldura{
  height:230px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.material img{
  width:auto;max-height:100%;max-width:100%;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.4));
}
.material h3{margin-bottom:.45em}
.material p{margin:0 auto;color:rgba(247,237,226,.86);font-size:.97rem;max-width:34ch}

/* ---------- 8. Depoimentos ---------- */
.vozes{background:var(--vermelho);padding:clamp(72px,13vw,132px) 0}
.vozes .medida{padding:0 var(--margem);max-width:var(--medida)}
.tira{
  margin-top:clamp(32px,5vw,52px);
  display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--margem) 16px;
}
.tira figure{margin:0;scroll-snap-align:center}
.tira video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.tira figcaption{margin-top:10px;font-size:.95rem;font-weight:600;color:rgba(247,237,226,.92)}

/* ---------- 9. Autora ---------- */
.autora{background:var(--tinta-2);display:grid;gap:32px;text-align:center}
.autora__retrato img{width:210px;height:210px;border-radius:50%;object-fit:cover;display:block;margin-inline:auto}
.autora p{color:var(--papel-fraco);max-width:52ch;margin-inline:auto}
.autora blockquote{
  margin:26px auto 0;padding:18px 0 0;border-left:0;border-top:2px solid var(--ambar);
  font-size:1.08rem;font-weight:600;color:var(--papel);max-width:44ch;display:inline-block;
}

/* ---------- 10. Inscrição ---------- */
.inscricao{background:var(--roxo);padding:clamp(72px,13vw,132px) var(--margem)}
.placa{
  max-width:560px;margin:0 auto;
  background:var(--papel);color:var(--tinta);
  padding:34px 26px;
}
.placa h2{font-size:clamp(1.5rem,5.4vw,2rem);margin-bottom:.7em}
.placa__lista{display:grid;gap:11px;margin-bottom:28px}
.placa__lista li{position:relative;padding-left:26px;font-size:.97rem}
.placa__lista li::before{
  content:"";position:absolute;left:2px;top:.44em;width:11px;height:6px;
  border-left:2px solid var(--vermelho);border-bottom:2px solid var(--vermelho);
  transform:rotate(-45deg);
}
.placa__acao{text-align:center}
.placa__preco{
  margin:0;font-size:clamp(3.4rem,15vw,4.6rem);font-weight:900;
  letter-spacing:-.05em;line-height:.92;
}
.placa__preco span{font-size:.34em;vertical-align:.62em;margin-right:.1em;color:var(--vermelho)}
.placa__parcela{margin:6px 0 26px;font-weight:600;color:#5A4A52}
.placa__nota{margin:14px 0 0;font-size:.82rem;color:#5A4A52}
.placa__garantia{
  margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(24,10,30,.16);
  font-size:.9rem;color:#5A4A52;text-align:left;
}
.placa__garantia strong{color:var(--tinta)}

/* ---------- 11. Dúvidas ---------- */
.duvidas{background:var(--tinta)}
.duvidas .medida{max-width:760px;margin-inline:auto}
details{border-bottom:1px solid var(--papel-tenue)}
summary{
  list-style:none;cursor:pointer;position:relative;
  padding:20px 40px 20px 0;font-weight:600;font-size:1.01rem;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:6px;top:calc(50% - 6px);
  width:12px;height:2px;background:var(--ambar);
}
summary::before{
  content:"";position:absolute;right:11px;top:calc(50% - 11px);
  width:2px;height:12px;background:var(--ambar);
  transition:transform .2s var(--saida);
}
details[open] summary::before{transform:scaleY(0)}
details p{margin:0 0 22px;color:var(--papel-fraco);font-size:.97rem;max-width:60ch}

/* ---------- 12. Contato ---------- */
.contato{background:var(--tinta-2);padding:clamp(64px,10vw,104px) var(--margem)}
.whats{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:28px;padding:18px 30px;
  background:#25D366;color:#0B2013;
  font-weight:900;font-size:1.05rem;text-decoration:none;
  transition:transform .16s var(--saida),background-color .16s var(--saida);
}
.whats__icone{width:26px;height:26px;fill:#0B2013;flex:0 0 auto}
@media (hover:hover) and (pointer:fine){ .whats:hover{background:#2FE377} }
.whats:active{transform:scale(.985)}

/* ---------- Rodapé ---------- */
.rodape{
  background:var(--tinta);border-top:1px solid var(--papel-tenue);
  padding:44px var(--margem) 112px;
  display:grid;justify-items:center;gap:18px;
  text-align:center;font-size:.82rem;color:var(--papel-fraco);
}
.rodape img{height:58px;width:auto}
.rodape__razao{font-size:.72rem;letter-spacing:-.01em;white-space:nowrap}
.rodape p{margin:0 0 8px}
.rodape a{margin:0 8px}
.rodape__aviso{opacity:.62;max-width:52ch;margin-inline:auto}

/* ---------- Barra fixa ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--ambar);color:var(--tinta);
  transform:translateY(110%);transition:transform .28s var(--saida);
}
.barra.visivel{transform:translateY(0)}
.barra p{margin:0;line-height:1.1}
.barra strong{display:block;font-size:1.1rem;font-weight:900;letter-spacing:-.02em}
.barra span{font-size:.68rem}
.barra .botao{flex:1;min-height:48px;font-size:.92rem;background:var(--tinta);color:var(--ambar)}
@media (hover:hover) and (pointer:fine){ .barra .botao:hover{background:#2E1338} }

/* ---------- Revelação (só quando o GSAP assume) ---------- */
.gsap-pronto .revelar{opacity:0}

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width:900px){
  :root{--margem:48px}
  body{font-size:18px}
  .quebra-desktop{display:inline}
  .respiro img{height:480px}
  .respiro--quadrada img{height:560px}
  .bloco{padding:clamp(110px,9vw,150px) var(--margem)}
  .medida{max-width:var(--medida)}

  .topo{padding:20px var(--margem)}
  .topo img{height:38px}

  /* Capa: tudo centralizado, vídeo grande — a foto é só atmosfera de fundo */
  .capa{padding:56px var(--margem) 64px;align-items:center;min-height:auto}
  .capa__impressao{
    left:0;right:0;width:100%;
    background-image:url(images/sonho-hero-desktop.webp);
    background-position:center;
  }
  .capa__impressao::after{
    background:linear-gradient(180deg,rgba(42,19,56,.52) 0%,rgba(42,19,56,.40) 45%,rgba(42,19,56,.74) 100%);
  }
  .capa__texto{max-width:800px;margin:0 auto;width:100%;text-align:center}
  .capa__marca{margin:0 auto 24px;height:auto;width:150px}
  .capa h1{font-size:clamp(2.5rem,3.6vw,3.4rem);max-width:16ch;margin-inline:auto;margin-bottom:.4em}
  .capa p{font-size:1.14rem;max-width:52ch;margin:0 auto 1.6em}
  .capa__video{max-width:720px;margin:0 auto 30px;width:100%}
  .capa .botao{width:auto;min-height:64px;padding:0 44px;font-size:1.08rem}

  .ficha dl{grid-template-columns:repeat(2,1fr);max-width:520px}
  .ficha div{border-bottom:0;padding:26px 30px}
  .ficha div:nth-child(2n){border-right:0}
  .ficha div:last-child{border-right:0}
  .ficha dd{font-size:1.6rem}

  /* Reconhecimento: título e lista na mesma linha de topo */
  .reconhecer__corpo{
    display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;
    align-items:start;max-width:var(--larg);margin:0 auto;
  }
  .reconhecer__titulo{max-width:none}
  .cenas-lista{grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:0;max-width:none}

  .camadas{padding:56px var(--margem) clamp(110px,9vw,150px)}
  /* registro de impressão: a chapa de cima cobre a de baixo e desliza */
  .registro{min-height:340px;margin-inline:auto}
  .chapa{position:absolute;top:0;width:53%;padding:38px 34px}
  .chapa--fundo{left:auto;right:0;top:74px;padding-left:84px}
  .chapa p{font-size:1rem}
  .resolucao{margin-inline:auto;gap:16px;padding-top:34px}
  .resolucao img{width:60px}
  .resolucao p{font-size:1.24rem}

  /* Leituras: fala e texto puxados para o centro, composição mais compacta */
  .leitura{
    display:grid;grid-template-columns:.62fr .8fr;gap:0 40px;
    align-items:start;padding-top:34px;
    max-width:960px;margin-inline:auto;
  }
  .leitura__fala{grid-row:span 2;margin:0 0 0 auto;max-width:13ch;text-align:right}
  .leitura__auto{margin-bottom:14px}

  .formacao{padding:clamp(110px,9vw,150px) var(--margem)}
  .formacao__corpo{grid-template-columns:1.15fr .85fr;gap:72px;margin-inline:auto;align-items:center}
  .indice li{font-size:1.06rem;padding:18px 0}
  .ganhos__lista{max-width:300px}
  .ganhos__lista img{width:72px}

  .prateleira{grid-template-columns:repeat(3,1fr);gap:44px;align-items:start;margin-inline:auto}
  .material__moldura{height:280px}

  .vozes .medida{padding:0 var(--margem);margin-inline:auto;max-width:var(--larg)}
  .tira{
    grid-auto-flow:row;grid-template-columns:repeat(4,1fr);
    overflow:visible;gap:20px;padding:0 var(--margem);
    max-width:var(--larg);margin-inline:auto;
  }

  .autora{grid-template-columns:260px 1fr;gap:64px;align-items:center;max-width:var(--larg);margin-inline:auto;text-align:left}
  .autora__retrato img{margin-inline:0}
  .autora p{margin-inline:0}
  .autora blockquote{margin:26px 0 0;padding:18px 0 18px 20px;border-left:2px solid var(--ambar);border-top:0;display:block}
  .autora__retrato img{width:260px;height:260px}

  .inscricao{padding:clamp(110px,9vw,150px) var(--margem)}
  .placa{
    max-width:940px;padding:52px 48px;
    display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  }
  .placa h2{margin-bottom:.8em}
  .placa__lista{margin-bottom:0}
  .placa__preco{font-size:5rem}
  .placa__acao{border-left:2px solid rgba(24,10,30,.12);padding-left:44px}

  .contato{padding:clamp(96px,8vw,130px) var(--margem)}
  .contato .medida{margin-inline:auto}

  .rodape{padding:52px var(--margem)}
  .rodape img{height:64px}

  .barra{display:none}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .gsap-pronto .revelar{opacity:1}
}