/* =========================================================
   SEJA SEU FAROL, o programa: página de vendas (home)
   Só a home e a página de obrigado usam este arquivo.
   Cores, tipo e medidas vêm de css/tokens.css (--pg-*).
   ========================================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-padding-top:calc(var(--pg-topo) + 16px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body.programa{
  margin:0;
  padding-top:var(--pg-topo);
  background:var(--pg-base);
  color:var(--cafe);
  font-family:var(--pg-sans);
  font-size:var(--pg-t-texto);
  line-height:1.6;
  overflow-x:hidden;
}

.programa img{ display:block; max-width:100%; }
.programa a{ color:var(--cafe); transition:color .25s ease, background-color .25s ease, border-color .25s ease; }
.programa a:hover{ color:var(--bordo); }
.programa :focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; }

.programa h1,.programa h2,.programa p,.programa ul,.programa ol{ margin:0; }

/* tipo */
.sf{ font-family:var(--pg-serif); font-weight:400; }
.it{ font-style:italic; }
.vs{
  font-family:var(--pg-sans);
  font-size:var(--pg-t-versalete);
  font-variant-caps:all-small-caps;
  letter-spacing:.22em;
  font-weight:500;
  line-height:1.4;
}
.acento{ color:var(--bordo); }

/* botão reto, borda de 1px, versalete */
.btn{
  display:inline-block;
  padding:15px 32px 17px;
  border:var(--fio) solid currentColor;
  border-radius:var(--raio-bloco);
  background:transparent;
  font-family:var(--pg-sans);
  font-size:var(--pg-t-versalete);
  font-variant-caps:all-small-caps;
  letter-spacing:.2em;
  font-weight:500;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.programa .btn--bordo{ color:var(--pg-base); background:var(--bordo); border-color:var(--bordo); }
.programa .btn--bordo:hover{ color:var(--pg-base); background:var(--cafe); border-color:var(--cafe); }
.programa .btn--cafe{ color:var(--pg-base); background:var(--cafe); border-color:var(--cafe); }
.programa .btn--cafe:hover{ color:var(--cafe); background:var(--pg-base); border-color:var(--pg-base); }
.programa .btn--linha{ color:var(--cafe); }
.programa .btn--linha:hover{ color:var(--pg-base); background:var(--cafe); border-color:var(--cafe); }

/* fio duplo */
.duplo{
  height:4px;
  border-top:var(--fio) solid currentColor;
  border-bottom:var(--fio) solid currentColor;
  opacity:.45;
}
.duplo-wrap{ padding:0 48px; }

/* foto: fundo neutro enquanto carrega ou se o arquivo faltar */
.foto{ background:var(--pg-foto); overflow:hidden; }
.foto picture,.foto img{ display:block; width:100%; height:100%; }
.foto img{ object-fit:cover; }

/* ---------- cabeçalho ---------- */
.pg-topo{
  position:fixed; inset:0 0 auto 0; z-index:20;
  height:var(--pg-topo);
  padding:0 48px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:var(--pg-base);
  border-bottom:var(--fio) solid transparent;
  transition:border-color .3s ease;
}
.pg-topo.rolou{ border-bottom-color:var(--pg-fio-topo); }
.pg-marca{
  font-family:var(--pg-serif);
  font-size:var(--pg-t-marca);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.programa .pg-marca{ color:var(--cafe); }
.pg-nav{ display:flex; gap:32px; align-items:center; }
.pg-nav a{ text-decoration:none; white-space:nowrap; }
.programa .pg-nav .pg-nav-lista{ border-bottom:var(--fio) solid var(--cafe); padding-bottom:2px; }

/* ---------- 1. abertura ---------- */
.abertura{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:clamp(640px, calc(100svh - var(--pg-topo)), 880px);
}
.abertura-texto{
  align-self:end;
  padding:48px 48px 56px;
  max-width:688px;
}
.abertura .vs{ margin-bottom:20px; }
.abertura h1{
  font-size:var(--pg-t-hero);
  line-height:1;
  letter-spacing:-.015em;
}
.abertura-corpo{
  display:flex; flex-direction:column; gap:24px;
  margin-top:32px; padding-top:24px;
  border-top:var(--fio) solid var(--pg-fio-hero);
}
.abertura-corpo p{ font-size:var(--pg-t-lead); line-height:1.6; max-width:520px; }
.abertura-acoes{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.abertura-acoes .vs{ margin:0; text-underline-offset:4px; }

/* passe-partout */
.capa{ padding:22px; background:var(--block); min-height:0; }
.capa .foto{ height:100%; }
.capa img{ object-position:60% center; }

/* ---------- 2. reconhecimento ---------- */
.reconhecimento{ padding:140px 48px 120px; display:flex; gap:96px; }
.reconhecimento > .vs{ flex:0 0 220px; }
.reconhecimento-corpo{ max-width:860px; display:flex; flex-direction:column; gap:28px; }
.abre{ font-size:var(--pg-t-abre); line-height:1.1; }
.abre::first-letter{
  float:left;
  font-size:var(--pg-t-capitular);
  line-height:.8;
  padding:8px 14px 0 0;
  color:var(--bordo);
}
.texto{ font-size:var(--pg-t-lead); line-height:1.75; max-width:680px; }
.frase{
  margin-top:12px !important;
  font-size:var(--pg-t-destaque);
  line-height:1.25;
  color:var(--bordo);
  max-width:740px;
}

/* ---------- 3. depois ---------- */
.depois{ padding:120px 48px; display:flex; gap:96px; align-items:flex-start; }
.depois-titulo{ flex:0 0 420px; display:flex; flex-direction:column; gap:20px; }
.programa h2{ font-family:var(--pg-serif); font-weight:400; font-size:var(--pg-t-secao); line-height:1.04; }
.depois ul{ flex:1; list-style:none; padding:0; border-top:var(--fio) solid var(--pg-fio); }
.depois li{
  font-family:var(--pg-serif);
  font-size:var(--pg-t-item);
  line-height:1.3;
  padding:22px 0;
  border-bottom:var(--fio) solid var(--pg-fio);
}

/* ---------- 4. o caminho ---------- */
.caminho{
  padding:120px 48px;
  background:var(--cafe);
  color:var(--pg-base);
  display:flex; gap:96px; align-items:flex-start;
}
.caminho-foto{ flex:0 0 400px; background:var(--block); padding:22px 22px 64px; }
.caminho-foto .foto{ height:560px; }
.caminho-foto img{ object-position:center 40%; filter:grayscale(1) contrast(1.05); }
.caminho-foto figcaption{
  margin-top:18px;
  font-size:var(--pg-t-legenda);
  color:var(--pg-tinta-apoio);
  text-align:center;
}
.caminho-foto figure{ margin:0; }
.caminho-corpo{ flex:1; display:flex; flex-direction:column; gap:24px; }
.caminho .vs{ color:var(--pg-argila); }
.caminho ol{ list-style:none; padding:0; margin-top:8px; border-top:var(--fio) solid var(--pg-fio-claro); }
.caminho li{
  display:grid;
  grid-template-columns:40px 210px 1fr;
  gap:16px;
  align-items:baseline;
  padding:22px 0;
  border-bottom:var(--fio) solid var(--pg-fio-claro);
}
.passo-nome{ font-size:var(--pg-t-passo); line-height:1.1; }
.passo-texto{ font-size:var(--pg-t-texto); line-height:1.6; color:var(--pg-claro-86); }
.caminho-fim{ margin-top:8px !important; font-size:var(--pg-t-legenda); line-height:1.65; color:var(--pg-claro-86); max-width:640px; }
.caminho-fim .sf{ font-size:var(--pg-t-card); color:var(--pg-base); }

/* ---------- 5. a travessia ---------- */
.travessia{ padding:120px 48px; display:flex; flex-direction:column; gap:56px; }
.travessia h2{ max-width:780px; }
.travessia-grade{ display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--fio) solid var(--pg-fio); }
.item{ padding:32px 28px; border-right:var(--fio) solid var(--pg-fio); display:flex; flex-direction:column; gap:16px; }
.item:first-child{ padding-left:0; }
.item:last-child{ padding-right:0; border-right:0; }
.item-titulo{ font-size:var(--pg-t-card); line-height:1.2; }
.item-texto{ font-size:var(--pg-t-apoio); line-height:1.65; color:var(--pg-tinta-apoio); }

/* ---------- 6. seu mapa ---------- */
.mapa{
  padding:100px 48px;
  background:var(--pg-apoio);
  display:flex; justify-content:space-between; align-items:center; gap:64px;
}
.mapa-texto{ max-width:740px; display:flex; flex-direction:column; gap:18px; }
.mapa-texto h2{ font-size:var(--pg-t-abre); line-height:1.06; }
.mapa-texto p:last-child{ font-size:var(--pg-t-corpo); line-height:1.65; color:var(--pg-tinta-apoio); }
.mapa .btn{ flex:0 0 auto; }

/* ---------- 7. quem conduz ---------- */
.conduz{ padding:120px 48px; display:flex; gap:96px; align-items:center; }
.retrato{ flex:0 0 420px; height:540px; border-radius:var(--pg-raio-arco); }
.retrato img{ object-position:center 30%; }
.conduz-texto{ max-width:620px; display:flex; flex-direction:column; gap:22px; }
.conduz-texto h2{ font-size:var(--pg-t-abre); line-height:1.06; }
.conduz-texto p{ font-size:var(--pg-t-corpo); line-height:1.75; }
.programa .conduz-texto .assina{ font-size:var(--pg-t-card); line-height:1.3; }
.assina a{ text-decoration:none; }

/* ---------- 8. próxima turma ---------- */
.turma{
  padding:120px 48px;
  background:var(--bordo);
  color:var(--pg-base);
  display:grid; grid-template-columns:1fr 1fr; gap:96px;
}
.turma-texto{ display:flex; flex-direction:column; gap:22px; }
.turma .vs{ color:var(--pg-rosa); }
.turma-texto p:not(.vs){ font-size:var(--pg-t-corpo); line-height:1.75; color:var(--pg-claro-90); }
.turma ol{ list-style:none; padding:0; border-top:var(--fio) solid var(--pg-fio-claro-forte); align-self:center; }
.turma li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0;
  border-bottom:var(--fio) solid var(--pg-fio-claro-forte);
}
.turma li .sf{ font-size:var(--pg-t-data); line-height:1.2; }
.turma li .vs{ color:var(--pg-base); white-space:nowrap; }
.programa .turma li.turma-nota{ display:block; border:0; padding:14px 0 0; font-size:var(--pg-t-miudo); color:var(--pg-claro-78); }

/* ---------- 9. lista de espera ---------- */
.lista{ padding:120px 48px; display:grid; grid-template-columns:1fr 1fr; gap:96px; }
.lista-texto{ display:flex; flex-direction:column; gap:20px; }
.lista-texto p:last-child{ font-size:var(--pg-t-corpo); line-height:1.75; color:var(--pg-tinta-apoio); }
.lista form{ display:flex; flex-direction:column; gap:22px; align-self:center; }
.campo{ display:flex; flex-direction:column; gap:10px; }
.campo input{
  border:0;
  border-bottom:var(--fio) solid var(--cafe);
  border-radius:var(--raio-bloco);
  background:transparent;
  padding:10px 0;
  font-family:var(--pg-sans);
  font-size:var(--pg-t-texto);
  font-variant-caps:normal;
  letter-spacing:normal;
  color:var(--cafe);
}
.consente{ display:flex; gap:10px; align-items:flex-start; font-size:var(--pg-t-miudo); line-height:1.5; color:var(--pg-tinta-apoio); }
.consente input{ margin:3px 0 0; flex:0 0 auto; accent-color:var(--bordo); width:16px; height:16px; }
.programa .consente a{ color:var(--pg-tinta-apoio); }
.lista form .btn{ align-self:flex-start; }
.mel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 10. perguntas ---------- */
.perguntas{ padding:120px 48px; display:flex; gap:96px; }
.perguntas h2{ flex:0 0 360px; font-size:var(--pg-t-abre); }
.perguntas-lista{ flex:1; border-top:var(--fio) solid var(--pg-fio); }
.pergunta{ padding:24px 0; border-bottom:var(--fio) solid var(--pg-fio); }
.pergunta h3{ margin:0 0 10px; font-family:var(--pg-serif); font-weight:400; font-size:var(--pg-t-card); line-height:1.25; }
.pergunta p{ font-size:var(--pg-t-texto); line-height:1.7; color:var(--pg-tinta-apoio); max-width:720px; }

/* ---------- 11. chamada final (único lugar do terracota) ---------- */
.chamada{
  padding:110px 48px;
  background:var(--terracota);
  color:var(--pg-base);
  display:flex; justify-content:space-between; align-items:center; gap:48px;
}
.chamada h2{ max-width:860px; }
.chamada .btn{ flex:0 0 auto; }

/* ---------- 12. rodapé ---------- */
.pg-rodape{
  background:var(--cafe);
  color:var(--pg-base);
  padding:72px 48px 40px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  text-align:center;
}
.monograma{ color:var(--pg-argila); }
.monograma text{ font-family:var(--pg-serif); font-style:italic; font-size:34px; fill:currentColor; }
.pg-rodape > .vs{ color:var(--pg-claro-60); }
.pg-rodape-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 36px; list-style:none; padding:0; margin:0; }
.programa .pg-rodape a{ color:var(--pg-base); }
.programa .pg-rodape a:hover{ color:var(--pg-argila); }
.pg-rodape-links a{ text-decoration:none; }
.pg-rodape .duplo{ width:100%; color:var(--pg-base); }
.pg-rodape-nota{ font-size:var(--pg-t-nota); color:var(--pg-claro-72); }

/* ---------- obrigado ---------- */
.obrigado{
  min-height:calc(100svh - var(--pg-topo));
  padding:120px 48px;
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  max-width:860px;
}
.obrigado h1{ font-size:var(--pg-t-secao); line-height:1.04; font-family:var(--pg-serif); font-weight:400; }
.obrigado p:not(.vs){ font-size:var(--pg-t-corpo); line-height:1.75; color:var(--pg-tinta-apoio); max-width:620px; }
.obrigado-acoes{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.obrigado-acoes .vs{ text-underline-offset:4px; }

/* ---------- esmaecimento de entrada ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .esmaece{ opacity:0; transition:opacity .9s ease; }
  .js .esmaece.visivel{ opacity:1; }
}

/* ---------- telas médias ---------- */
@media (max-width:1180px){
  .pg-nav{ gap:22px; }
  .reconhecimento,.depois,.caminho,.conduz,.perguntas{ gap:64px; }
  .turma,.lista{ gap:64px; }
  .depois-titulo{ flex-basis:340px; }
  .caminho-foto{ flex-basis:320px; }
  .caminho-foto .foto{ height:440px; }
  .caminho li{ grid-template-columns:32px 170px 1fr; }
  .travessia-grade{ grid-template-columns:repeat(2,1fr); }
  .item{ padding:32px 28px; border-bottom:var(--fio) solid var(--pg-fio); }
  .item:nth-child(odd){ padding-left:0; }
  .item:nth-child(even){ padding-right:0; border-right:0; }
  .retrato{ flex-basis:340px; height:440px; }
  .perguntas h2{ flex-basis:280px; }
}

/* ---------- tablet e celular: tudo empilha ---------- */
@media (max-width:900px){
  .pg-topo{ padding:0 20px; }
  .pg-nav a:not(.pg-nav-lista){ display:none; }

  .duplo-wrap{ padding:0 20px; }

  .abertura{ display:flex; flex-direction:column-reverse; height:auto; }
  .capa{ padding:12px; }
  .capa .foto{ height:auto; aspect-ratio:3 / 2; }
  .abertura-texto{ padding:40px 20px 64px; max-width:none; }

  .reconhecimento,.depois,.caminho,.conduz,.perguntas,.mapa,.chamada{
    flex-direction:column; align-items:stretch; gap:40px;
  }
  .reconhecimento{ padding:88px 20px 80px; gap:24px; }
  .reconhecimento > .vs,.depois-titulo,.caminho-foto,.retrato,.perguntas h2{ flex:0 0 auto; }
  .depois,.caminho,.travessia,.conduz,.turma,.lista,.perguntas{ padding:88px 20px; }
  .mapa{ padding:72px 20px; align-items:flex-start; }
  .chamada{ padding:80px 20px; align-items:flex-start; }

  .caminho-foto{ width:100%; max-width:420px; padding:14px 14px 48px; }
  .caminho-foto .foto{ height:auto; aspect-ratio:4 / 5; }
  .caminho li{ grid-template-columns:32px 1fr; row-gap:8px; }
  .passo-texto{ grid-column:2; }

  .travessia{ gap:40px; }
  .travessia-grade{ grid-template-columns:1fr; }
  .item,.item:nth-child(odd),.item:nth-child(even),.item:first-child,.item:last-child{
    padding:28px 0; border-right:0; border-bottom:var(--fio) solid var(--pg-fio);
  }

  .retrato{ width:100%; max-width:360px; height:auto; aspect-ratio:420 / 540; }

  .turma,.lista{ grid-template-columns:1fr; gap:48px; }

  .pg-rodape{ padding:64px 20px 36px; }
  .pg-rodape-links{ flex-direction:column; gap:14px; }

  .obrigado{ padding:72px 20px; }
}

@media (max-width:600px){
  body.programa{ padding-top:var(--pg-topo-celular); }
  html{ scroll-padding-top:calc(var(--pg-topo-celular) + 12px); }
  .pg-topo{ height:var(--pg-topo-celular); }
  .pg-marca{ font-size:var(--pg-t-data); }
  .abertura-acoes{ flex-direction:column; align-items:flex-start; gap:20px; }
  .btn{ padding:14px 24px 16px; }
  .abertura-acoes .btn,.lista form .btn,.chamada .btn,.mapa .btn{ align-self:stretch; }
  .turma li .sf{ font-size:var(--pg-t-card); }
  .obrigado{ min-height:calc(100svh - var(--pg-topo-celular)); }
}