/* Home Redação e Dialogia — carregado só no template Home */
:root{
  --rosa-forte:#C4306F;
  /* Mesmos valores do rd-sistema.css. As duas folhas nunca carregam juntas,
     então a repetição é necessária — mas se mudar aqui, mude lá. */
  --logo-alt:clamp(28px,3vw,36px);
  --logo-alt-rodape:clamp(34px,4vw,46px);
  /* Altura do cabeçalho. UM valor para o topo do site e o da home — eram
     dois números diferentes (72px de min-height contra 11px de padding),
     e no celular a home ficava visivelmente mais baixa que o resto. */
  --topo-alt:clamp(62px,8vw,72px);

  --preto:#0D0C0B; --carvao:#16151A; --oliva:#2A2419;
  --laranja:#F99F34; --rosa:#EF519D; --azul:#75CDD8; --cinza:#DDDDDD;
  --papel:#FBFAF8; --papel-2:#F2F0EC; --tinta:#141312; --tinta-2:#5A554E;
  --claro-1:#FFFFFF; --claro-2:#B9B3AB; --linha-esc:rgba(255,255,255,.12); --linha-cl:#E4E0D9;
  --pad:url(data:image/png;base64,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);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:Asap,"Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.serif{font-family:"Bricolage Grotesque",sans-serif}
/* opsz é o eixo óptico da Bricolage: em corpo grande ela afina as junções
   e fecha o espacejamento sozinha. Sem isto, o título grande engorda. */
h1,h2,h3{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-optical-sizing:auto; letter-spacing:-.028em;
  text-wrap:balance; margin:0;
}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem); line-height:1.03}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem); line-height:1.12}
h3{font-size:1.22rem; line-height:1.28}
p{margin:0 0 16px}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

.olho{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:11px; margin:0 0 20px;
}
.olho::before{content:""; width:26px; height:2px; background:currentColor}

.btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:1rem;
  padding:15px 30px; border-radius:4px; text-decoration:none; border:2px solid transparent;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:focus-visible{outline:3px solid var(--azul); outline-offset:3px}
.btn-p{background:var(--laranja); color:var(--preto)}
.btn-p:hover{transform:translateY(-2px); background:#FFB253}
.btn-s{border-color:var(--linha-esc); color:var(--claro-1)}
.btn-s:hover{border-color:var(--azul); color:var(--azul)}
.btn-d{border-color:var(--tinta); color:var(--tinta)}
.btn-d:hover{background:var(--tinta); color:var(--papel)}

/* ---------- marca ---------- */
/* O logotipo virou o arquivo original. Nada de reproduzir a marca com
   webfont: o desenho é Baskerville Bold Italic e qualquer aproximação
   aparece como aproximação. */
/* flex:0 1 auto (e não flex:none) para a marca poder encolher quando o menu
   crescer. Com flex:none o cabeçalho estourava a largura e o conteúdo saía
   pela esquerda — era essa a "desalinhamento" que aparecia no desktop. */
.logo{
  display:inline-flex; align-items:center; text-decoration:none;
  flex:0 1 auto; min-width:0;
}
.logo img{display:block; height:var(--logo-alt); width:auto; max-width:100%}
.logo--rodape img{height:var(--logo-alt-rodape)}
@media(max-width:520px){.logo img{height:26px}}

/* O cabeçalho da home era desenhado aqui, com marcação própria (header,
   .nav, .abre-menu, .logo). Saiu: agora a home usa o mesmo rd_cabecalho()
   do resto do site, na variante escura, e a folha de estilo do cabeçalho é
   uma só — em rd-sistema.css. As regras de .logo abaixo ficam porque o
   rodapé da home ainda usa essa marcação.
   ------------------------------------------------------------------ */

@media(max-width:620px){
  .nav .zap{width:42px; height:42px; padding:0; border-radius:999px; justify-content:center; gap:0}
  .nav .zap .rd-b-txt{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .nav .rd-b-ico{display:block}
  .nav{gap:8px}
  .wrap{padding:0 clamp(16px,4.6vw,24px)}
  .logo img{height:28px}
}

/* Link de pular para o conteúdo: existia no resto do site e faltava aqui. */
.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--preto); color:var(--claro-1); padding:12px 20px;
}
.pular:focus{left:0}

/* ---------- fundo escuro com padrão ---------- */
.escuro{position:relative; background:var(--preto); color:var(--claro-1); overflow:hidden}
.escuro::before{
  content:""; position:absolute; inset:0; background-image:var(--pad);
  background-size:520px auto; opacity:.02; mix-blend-mode:screen; pointer-events:none; z-index:1;
}
.escuro > *{position:relative; z-index:3}

/* Véu: poça escura sob o texto, para as letras nunca caírem sobre a textura clara.
   O padrão continua visível ao redor — a identidade fica, o ruído sai de baixo da leitura. */
.veu{position:absolute; inset:0; z-index:2; pointer-events:none}

/* ---------- hero ---------- */
/* O herói começava 132px abaixo do cabeçalho no desktop — numa tela de
   1080 isso é um oitavo da altura em preto antes da primeira palavra.
   76px mantém o ar e aproxima o título do topo. */
.hero{padding:clamp(56px,6vw,76px) 0 0}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(85% 70% at 88% 6%, rgba(249,159,52,.16) 0%, transparent 58%),
             linear-gradient(160deg,var(--oliva) 0%, var(--carvao) 44%, var(--preto) 100%);
  z-index:0;
}
.hero::before{opacity:.04}
.hero .veu{
  background:radial-gradient(115% 95% at 22% 46%, rgba(8,8,9,.94) 0%, rgba(8,8,9,.86) 34%,
             rgba(8,8,9,.55) 60%, rgba(8,8,9,0) 86%);
}
.hero .wrap{position:relative; z-index:2}
.hero .olho{color:#F79CC4}
.hero h1{max-width:16ch}
/* Mesmo caso da logo: em vez de inclinar a romana à força, o contraste vem
   do eixo de largura da própria Bricolage — estreita e leve contra a larga e
   pesada. É a mesma gramática das bandas escuras do resto do site. */
.hero h1 em{
  font-style:normal; color:var(--laranja);
  font-variation-settings:"wdth" 75,"wght" 400;
}
.hero .sub{font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--claro-2); max-width:56ch; margin:26px 0 34px; line-height:1.55}
.hero .sub b{color:var(--claro-1); font-weight:600}
.acoes{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px}
.micro{font-size:.9rem; color:#ADA69B; margin:0 0 clamp(56px,8vw,84px)}

/* ---------- placar ---------- */
.placar{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--linha-esc)}
.placar div{padding:26px 26px 30px; border-right:1px solid var(--linha-esc)}
.placar div:last-child{border-right:0}
.placar .n{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-optical-sizing:auto; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; display:block; font-variant-numeric:tabular-nums}
.placar .n.a{color:var(--laranja)} .placar .n.b{color:var(--azul)} .placar .n.c{color:var(--rosa)}
.placar .r{font-size:.79rem; color:var(--claro-2); display:block; margin-top:9px; line-height:1.4}
@media(max-width:780px){.placar{grid-template-columns:repeat(2,1fr)} .placar div{border-bottom:1px solid var(--linha-esc)} .placar div:nth-child(2n){border-right:0}}

/* ---------- seções ---------- */
/* -20px no limite superior: o cliente gosta de respiro, e ele continua —
   mas 110px entre seções quebrava a leitura em blocos desconexos. 90 mantém
   a separação e encurta o salto. Vale para todas as seções da home. */
section{padding:clamp(56px,8vw,90px) 0}
.claro{background:var(--papel)}
.claro-2{background:var(--papel-2)}
.cab{max-width:62ch; margin-bottom:clamp(36px,5vw,56px)}
.cab p{color:var(--tinta-2); font-size:1.08rem; margin:16px 0 0}
.escuro .cab p{color:var(--claro-2)}

.escuro:not(.hero) .veu{
  background:linear-gradient(180deg, rgba(8,8,9,.72) 0%, rgba(8,8,9,.62) 55%, rgba(8,8,9,.72) 100%);
}

/* resultados */
.res{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center}
.salto{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; border:1px solid var(--linha-esc); border-radius:10px; padding:30px 26px; background:rgba(255,255,255,.03)}
.salto .box{text-align:center}
.salto .v{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-optical-sizing:auto; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1; display:block; font-variant-numeric:tabular-nums}
.salto .antes .v{color:var(--claro-2)}
.salto .depois .v{color:var(--laranja)}
.salto .lb{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#ADA69B; display:block; margin-top:10px}
.salto .seta{color:var(--rosa); font-size:1.6rem; line-height:1}
.fonte{font-size:.85rem; color:#ADA69B; margin:18px 0 0}
@media(max-width:860px){.res{grid-template-columns:1fr}}

/* acervo */
/* Cartões de coleção na home.
   Sem imagem, de propósito: as capas antigas eram artes de TEMAS individuais,
   e não existe arte por pasta. Card com foto genérica é pior que card sem
   foto — promete um conteúdo que a imagem não representa. O que diferencia
   uma pasta da outra é o nome e o que tem dentro; é isso que o cartão mostra. */
.pastas-home{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px; margin-bottom:30px;
}
.pasta-home{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 22px 24px; background:#fff; text-decoration:none;
  border:1px solid var(--linha-cl); border-radius:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pasta-home:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,19,18,.12); border-color:var(--rosa)}
.pasta-home h3{font-size:1.12rem; margin:0; line-height:1.18}
.pasta-home .cat{
  font-size:.72rem; line-height:1.45; color:var(--tinta-2);
  letter-spacing:.02em;
}
.acervo-pe{display:flex; flex-wrap:wrap; gap:14px; margin:0}
@media(max-width:560px){.pastas-home{grid-template-columns:1fr}}

.filtros{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px}
.chip{
  font-size:.83rem; font-weight:600; padding:9px 17px; border-radius:999px;
  border:1px solid var(--linha-cl); background:#fff; color:var(--tinta-2);
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.chip:hover{background:var(--rosa-forte); border-color:var(--rosa-forte); color:#fff; transform:translateY(-1px)}
.chip.on{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.chip.on:hover{background:var(--tinta); border-color:var(--tinta); color:var(--papel)}

/* A busca virou formulário: era uma div decorativa, e quem digitava
   nela não recebia nada de volta. */
.busca{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--linha-cl); background:#fff; border-radius:8px;
  padding:6px 6px 6px 18px; margin-bottom:22px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.busca:focus-within{border-color:var(--tinta); box-shadow:0 0 0 3px rgba(25,23,19,.06)}
.busca input{
  flex:1; border:0; outline:0; background:transparent; min-width:0;
  padding:11px 0; font:inherit; font-size:1rem; color:var(--tinta);
}
.busca input::placeholder{color:var(--tinta-2); opacity:.85}
.busca button{
  flex:none; border:0; cursor:pointer; border-radius:6px;
  padding:11px 20px; font:inherit; font-size:.9rem; font-weight:600;
  background:var(--tinta); color:var(--papel);
  transition:background .18s ease;
}
.busca button:hover{background:var(--rosa-forte)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* planos */
.planos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.plano{border:1px solid var(--linha-cl); border-radius:10px; padding:30px 28px 34px; background:#fff; display:flex; flex-direction:column}
.plano.destaque{border-color:var(--tinta); box-shadow:0 0 0 1px var(--tinta)}
.plano .selo{font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa); margin-bottom:14px}
.plano .preco{font-family:"Bricolage Grotesque",sans-serif; font-size:2.2rem; font-weight:800; font-optical-sizing:auto; margin:16px 0 4px; line-height:1}
.plano .por{font-size:.85rem; color:var(--tinta-2)}
.plano ul{list-style:none; padding:0; margin:20px 0 26px; font-size:.94rem; color:var(--tinta-2)}
.plano li{padding-left:24px; position:relative; margin-bottom:10px}
.plano li::before{content:""; position:absolute; left:0; top:.55em; width:11px; height:2px; background:var(--laranja)}
.plano .btn{margin-top:auto; justify-content:center}
@media(max-width:900px){.planos{grid-template-columns:1fr}}

/* equipe */
/* auto-fit em vez de 3 fixas: a grade acompanha o tamanho da equipe,
   sem deixar coluna vazia quando alguém entra ou sai. */
.equipe{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,3vw,40px)}
.pessoa{
  border-top:3px solid var(--tinta); padding-top:22px;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
}
/* Redonda e pequena: dá rosto ao nome sem competir com o texto.
   aspect-ratio + object-fit garantem o círculo mesmo se a foto não for
   quadrada — sem isso, um retrato retangular vira uma elipse. */
.pessoa .avatar{
  width:76px; height:76px;
  border-radius:50%; object-fit:cover; object-position:center top;
  border:2px solid var(--papel); box-shadow:0 0 0 1px var(--linha-cl);
}
@media(max-width:520px){
  .pessoa{grid-template-columns:1fr; gap:14px}
  .pessoa .avatar{width:64px; height:64px}
}
.pessoa .cred{font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--rosa); margin-bottom:9px}
.pessoa p{font-size:.95rem; color:var(--tinta-2); margin:10px 0 0}
@media(max-width:900px){.equipe{grid-template-columns:1fr}}

/* Saída do resumo da equipe para a página completa. */
.equipe-saiba{margin:clamp(30px,3.6vw,44px) 0 0}

/* depoimentos */
.provas{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.prova{border:1px solid var(--linha-esc); border-radius:10px; padding:28px 26px 26px; background:rgba(255,255,255,.035); display:flex; flex-direction:column}
.prova .res-al{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.3rem; line-height:1.2; margin-bottom:16px}
.prova .res-al span{display:block; font-family:Asap,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--azul); margin-bottom:8px}
.prova blockquote{margin:0; font-size:.96rem; color:var(--claro-2); line-height:1.62; flex:1}
.prova .quem{margin-top:20px; padding-top:16px; border-top:1px solid var(--linha-esc); font-size:.86rem; font-weight:600}
/* No celular a grade vira fileira que desliza no dedo, com encaixe.
   Não é carrossel: nada gira sozinho, nada esconde o que vem depois — a
   borda do próximo cartão fica visível, que é o que diz ao dedo que há
   mais. Empilhado, três depoimentos custavam quase uma tela inteira de
   rolagem; aqui custam um cartão. */
@media(max-width:900px){
  .provas{
    grid-template-columns:none;
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* sangra até a borda da tela e devolve a goteira por dentro, para o
       cartão seguinte aparecer cortado em vez de parar no meio do nada */
    margin-inline:calc(var(--gut, 22px) * -1);
    padding-inline:var(--gut, 22px);
    padding-bottom:4px;
  }
  .provas::-webkit-scrollbar{display:none}
  .prova{
    flex:0 0 min(84%, 330px);
    scroll-snap-align:start;
  }
}

/* faq */
details{border-bottom:1px solid var(--linha-cl); padding:20px 0}
summary{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.12rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--rosa); font-family:Asap,sans-serif; font-weight:700; font-size:1.4rem; line-height:1}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0; color:var(--tinta-2); max-width:70ch}

/* cta final */
.cta-final{text-align:center}
.cta-final h2{max-width:20ch; margin:0 auto 20px}
.cta-final h2 em{font-style:normal; color:var(--azul); font-variation-settings:"wdth" 75,"wght" 400}
.cta-final p{color:var(--claro-2); max-width:52ch; margin:0 auto 32px}

/* rodapé */
footer{background:var(--carvao); color:var(--claro-2); padding:56px 0 34px; font-size:.9rem}
.frodape{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; padding-bottom:34px; border-bottom:1px solid var(--linha-esc)}
footer h4{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--claro-1); margin:0 0 14px; font-family:Asap,sans-serif; font-weight:700}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:9px}
footer a{text-decoration:none} footer a:hover{color:var(--azul)}
.fim{padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.84rem; color:#9C958A}
.fim a{font-size:inherit}
/* o botão de cookies vive nesta linha como se fosse texto dela: a cor vem
   do próprio rodapé, e o realce no hover é o azul da home, não o rosa */
.fim .rd-cookies-link{color:inherit}
.fim .rd-cookies-link:hover{color:var(--azul)}
.fim .rd-cookies-link:focus-visible{outline-color:var(--azul)}
.fim .credito{margin-left:auto}
.fim .credito a{color:var(--claro-1); border-bottom:1px solid rgba(255,255,255,.18); font-weight:600; letter-spacing:.04em}
.fim .credito a:hover{color:var(--azul); border-bottom-color:var(--azul)}
@media(max-width:700px){.fim .credito{margin-left:0; width:100%}}
@media(max-width:860px){.frodape{grid-template-columns:1fr}}

/* barra mobile */
/* A barra fixa de WhatsApp foi removida do HTML: no celular ela dividia a
   tela com o botão flutuante do Joinchat e ainda comia 78px de altura útil.
   O CSS dela ficou órfão aqui, e o `body{padding-bottom:78px}` continuava
   reservando espaço para um elemento que não existe — era a faixa clara
   embaixo do rodapé. Removido junto. */

.rd-proposta{margin:30px 0 0; max-width:66ch; color:var(--tinta-2); font-size:1.02rem}
.rd-proposta b{color:var(--tinta); font-weight:600}
.nota-editor{background:var(--papel-2); border-left:3px solid var(--rosa); padding:16px 20px; margin:0 0 0; font-size:.88rem; color:var(--tinta-2)}

/* =============================================================================
   HERÓI EM DUAS COLUNAS

   A direita traz rostos de aprovados de verdade, com nome e onde passaram.
   A escolha não é decorativa: é o único ativo visual que nenhum concorrente
   copia. Foto de banco de imagens diria o contrário do que a página inteira
   argumenta.
   ========================================================================== */
.hero-grade{
  display:grid; gap:clamp(30px,4vw,64px); align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
}
@media(max-width:900px){
  .hero-grade{grid-template-columns:1fr}
  .hero-caras{order:2}
}

.hero-caras{display:flex; flex-direction:column; gap:14px; margin:0}

/* Cada rosto é um cartão largo com o retrato redondo à esquerda. Redondo
   porque recorta o fundo da capa do vídeo e sobra o rosto. */
.cara{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
  border-radius:999px; padding:10px 22px 10px 10px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.cara:nth-child(2){margin-left:clamp(0px,3vw,34px)}
.cara:nth-child(3){margin-left:clamp(0px,6vw,68px)}
.cara:hover{
  background:rgba(255,255,255,.1); border-color:var(--laranja);
  transform:translateX(-4px);
}
.cara img{
  width:clamp(54px,7vw,68px); height:clamp(54px,7vw,68px);
  border-radius:50%; object-fit:cover; object-position:26% 42%;
  flex:none; background:var(--carvao);
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.cara-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.cara-txt b{
  font-size:.95rem; font-weight:700; color:var(--claro-1);
  line-height:1.2; overflow-wrap:anywhere;
  /* Quando o título não tem nome extraível, cai o título inteiro aqui.
     Duas linhas no máximo, para o cartão não crescer sem controle. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cara-txt i{
  font-style:normal; font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--laranja); font-weight:700;
  line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.caras-pe{
  margin:8px 0 0; font-size:.8rem; color:var(--claro-2);
  padding-left:clamp(0px,6vw,68px);
}
.caras-pe a{color:var(--azul); border-bottom:1px solid rgba(117,205,216,.4)}
.caras-pe a:hover{color:var(--claro-1); border-bottom-color:currentColor}