/* =========================================================================
   Renata Maximina — Link da bio (paleta caramelo)
   Studio Maximina Design System: Maximina + Poppins, dois fundos por página,
   cantos retos, fio de 1px, sem sombra, sem gradiente de marca, sem emoji.
   ========================================================================= */

/* ---------------------------- Fonte própria ----------------------------- */
/* Maximina 1.010. Só os dois estilos que a página usa: título em regular e a
   palavra em itálico dentro dele. Os outros oito estilos estão no pacote da
   fonte, fora do site, para não pesar o carregamento. */
/* As três linhas de "override" abaixo não mudam o desenho da letra: elas
   corrigem a altura que o navegador reserva em volta dela. Sem isso o título
   ocupa mais espaço vertical do que a sua caixa e come o respiro do bloco
   seguinte. Os valores são as métricas do arquivo da fonte (sobe 783,
   desce 230, em mil unidades). */
@font-face{
  font-family:'Maximina';
  src:url('../fonts/Maximina-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  ascent-override:78.3%;
  descent-override:23%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Maximina';
  src:url('../fonts/Maximina-Italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
  ascent-override:78.3%;
  descent-override:23%;
  line-gap-override:0%;
}

/* Conserto de um vão da fonte, não de layout: no itálico da Maximina o par
   "i" + "j" não tem kerning e abre um buraco que parte "dirijo" em "diri jo".
   Enquanto a fonte não ganha esse par numa v1.2, esta classe fecha a
   distância à mão. Usada só onde a palavra aparece em itálico. */
.kern-ij{margin-left:-0.075em}

/* ------------------------------- Tokens -------------------------------- */
:root{
  /* Tipografia */
  --font-display:'Maximina', ui-serif, Georgia, serif;
  --font-sans:'Poppins', ui-sans-serif, system-ui, sans-serif;

  --text-body:1rem;
  --text-body-s:0.875rem;
  --text-kicker:0.75rem;

  --leading-tight:1.05;
  --leading-snug:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.7;

  --tracking-tight:-0.01em;
  --tracking-wide:0.08em;
  --tracking-widest:0.22em;

  /* Escala fluida 390px → 1280px */
  --size-h1:clamp(2.25rem, 1.70rem + 2.25vw, 3.5rem);      /* 36 → 56 */
  --size-h2:clamp(1.875rem, 1.16rem + 2.92vw, 3.5rem);     /* 30 → 56 */
  --size-h3:clamp(1.875rem, 1.71rem + 0.67vw, 2.25rem);    /* 30 → 36 */
  --size-faixa:clamp(1.5rem, 1.12rem + 1.57vw, 2.375rem);  /* 24 → 38 */
  --size-body-fluid:clamp(0.875rem, 0.766rem + 0.45vw, 1.125rem); /* 14 → 18 */
  --size-stat:clamp(2rem, 1.75rem + 1.01vw, 2.5625rem);    /* 32 → 41 */

  /* Espaçamento fluido */
  --pad-y:clamp(44px, 21px + 5.84vw, 96px);
  --pad-x:clamp(20px, 4px + 4.05vw, 56px);
  --pad-y-wide:clamp(44px, 13px + 7.87vw, 114px);
  --pad-x-wide:clamp(20px, 1px + 5.39vw, 68px);

  /* ---------------------------------------------------------------------
     Cores — paleta caramelo.
     Toda a paleta vive aqui: nenhuma cor é escrita fora deste bloco, nem no
     véu do hero, nem nos hovers, nem no CTA. Trocar de paleta é reescrever
     estas linhas.
     --------------------------------------------------------------------- */
  --surface-page:#F6F0E4;         /* creme */
  --surface-canvas:#EBDFC9;       /* bege — seções alternadas */
  --surface-canvas-deep:#E0D2B8;  /* bege um degrau abaixo — zona da foto */
  --surface-raised:#FBF6EB;       /* cards e rodapé */
  --surface-raised-hover:#F5EDDD;
  --surface-header:#F3EBDA;
  --surface-inverse:#463527;      /* marrom escuro do hero */
  --veil-rgb:70,53,39;            /* véu de legibilidade sobre a foto */

  --color-bark:#463525;
  --color-espresso:#2E2116;       /* o marrom mais escuro da escala */
  --color-cream:#F6F0E4;

  --text-primary:#3B2D1E;
  --text-secondary:#6E5B45;
  --text-inverse:#F6F0E4;
  --text-inverse-muted:var(--accent-light);
  --text-ink:#3B2D1E;

  --accent:#7E4A20;               /* conhaque — destaque principal */
  --accent-light:#E0C49A;         /* dourado — kicker e itálico do hero, faixa do CTA */
  --accent-light-deep:#D3B385;    /* o dourado um degrau abaixo, só no hover da faixa */

  /* Rodapé — marrom escuro, como o hero */
  --footer-surface:var(--surface-inverse);
  --footer-text:var(--text-inverse);
  --footer-accent:var(--accent-light);
  --footer-muted:#C7BAA6;
  --footer-rule:rgba(246,240,228,.20);

  --border-subtle:rgba(59,45,30,.18);
  --border-hover:rgba(59,45,30,.34);

  /* A coluna de conteúdo. Toda seção centraliza nela; em telas largas é ela
     que impede o texto de se esticar de ponta a ponta. */
  --content-max:1280px;

  --radius-sm:2px;
  --header-h:53px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Desacelera bem no fim — é a curva das entradas em cena e da intro */
  --ease-suave:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------- Reset --------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 8px);
}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
h1,h2,h3,p,dl,dd,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:2px;
}

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

/* --------------------------- Utilitários ------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface-page);color:var(--accent);
  padding:12px 20px;border:1px solid var(--accent);
  font-size:var(--text-kicker);font-weight:600;
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
}
.skip-link:focus{left:0}

.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* ------------------------- Padrões tipográficos ------------------------ */
.kick{
  font-family:var(--font-sans);
  font-size:var(--text-kicker);
  font-weight:600;
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  line-height:var(--leading-normal);
  color:var(--accent);
}
/* O kicker do hero é 3px menor que os outros no celular: sobre a foto, com
   o título logo abaixo, os 12px competiam com a primeira linha. */
.kick--inv{
  color:var(--text-inverse-muted);
  font-size:clamp(0.5625rem, 0.447rem + 0.577vw, 0.75rem);  /* 9 → 12 */
}

.section-title{
  font-family:var(--font-display);
  font-size:var(--size-h2);
  font-weight:400;
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  text-wrap:pretty;
}
.section-title em{font-style:italic;color:var(--accent)}

/* Itálico em tinta escura (Studio, atuação, comigo, Direção) */
.em-ink{font-style:italic;color:var(--text-ink)}
.section-title em.em-ink,
.card__title em.em-ink,
.hero__title em.em-ink{color:var(--text-ink)}

.body-l{
  font-size:var(--size-body-fluid);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
  max-width:46ch;
}
.body{
  font-size:var(--size-body-fluid);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}

/* ------------------------------- Botões --------------------------------
   Um só sólido na página — a Consultoria, que é a oferta principal. Os
   outros três caminhos ficam só no contorno conhaque, e o conhaque entra no
   hover: a hierarquia fica óbvia e o card respira.

   No hover a cor de destino entra varrendo da esquerda para a direita —
   uma troca de cor com direção. Nada de escala, elevação, sombra ou salto.

   O rótulo aparece duas vezes: uma na cor de repouso e outra, escondida
   dos leitores de tela, dentro da camada que é revelada. Assim o texto
   acompanha o preenchimento em vez de trocar de cor por cima dele.
   ----------------------------------------------------------------------- */
.btn{
  --btn-pad-y:14px;
  --btn-pad-x:20px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:52px;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  line-height:1.2;
  border-radius:var(--radius-sm);
  background:var(--btn-bg);
  color:var(--btn-text);
  border:1px solid var(--btn-border, var(--btn-bg));
  transition:border-color .26s var(--ease), opacity .18s var(--ease);
}

/* A camada de hover carrega o fundo E o rótulo já na cor final, e as duas
   coisas são reveladas juntas pelo mesmo recorte. É isso que impede o texto
   de lavar no meio da varredura: em qualquer quadro, cada pedaço do rótulo
   está sobre o fundo certo para a sua cor. O rótulo duplicado fica fora da
   árvore de acessibilidade (aria-hidden no HTML). */
.btn__wipe{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  background:var(--btn-hover);
  color:var(--btn-text-hover, var(--btn-text));
  clip-path:inset(0 100% 0 0);
  transition:clip-path .26s var(--ease);
}

/* Nos cards quem recebe o mouse é o card inteiro, não o rótulo */
.card:hover .btn__wipe,
.card:focus-visible .btn__wipe,
a.btn:hover .btn__wipe,
a.btn:focus-visible .btn__wipe,
button.btn:hover .btn__wipe,
button.btn:focus-visible .btn__wipe{clip-path:inset(0 0 0 0)}

.card:hover .btn,
.card:focus-visible .btn,
a.btn:hover,
a.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible{border-color:var(--btn-hover)}

/* --- Três variações: um sólido, um de contorno e o do hero --- */

/* Consultoria e newsletter — o único sólido da página */
.btn--primary{
  --btn-bg:var(--accent);
  --btn-text:var(--surface-canvas);
  --btn-hover:var(--color-espresso);
}
/* Studio — só o contorno conhaque; o conhaque entra no hover */
.btn--outline{
  --btn-bg:transparent;
  --btn-border:var(--accent);
  --btn-text:var(--accent);
  --btn-hover:var(--accent);
  --btn-text-hover:var(--color-cream);
}
/* Formações — ainda não existe destino: contorno apagado e sem varredura */
.btn--muted{
  --btn-bg:transparent;
  --btn-border:var(--border-subtle);
  --btn-text:var(--text-secondary);
  cursor:default;
}

button.btn{width:100%}
button.btn:disabled{opacity:.55;cursor:default}
button.btn:disabled .btn__wipe{clip-path:inset(0 100% 0 0)}

/* =============================== HEADER ================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--surface-header);
  border-bottom:1px solid var(--border-subtle);
}
.site-header__inner{
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;
  justify-content:center;
  padding:16px clamp(12px, 4vw, 48px);
}

/* Nav sem logotipo, centralizada. A escala vai de 10px a 12px para as cinco
   âncoras caberem numa linha só até nas telas mais estreitas. */
.site-nav{
  display:flex;
  justify-content:center;
  column-gap:clamp(8px, 2.4vw, 28px);
}
.site-nav a{
  font-size:clamp(0.625rem, 0.524rem + 0.43vw, 0.75rem);
  white-space:nowrap;
  font-weight:500;
  letter-spacing:clamp(0.05em, 0.02em + 0.08vw, 0.08em);
  text-transform:uppercase;
  color:var(--text-primary);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease), opacity .18s var(--ease);
}
.site-nav a:hover{border-bottom-color:var(--accent);opacity:.72}

/* ================================ HERO ================================= */
.hero{
  position:relative;
  display:flex;
  /* Guardada num token porque a intro precisa animar até ela */
  --hero-altura:600px;
  min-height:var(--hero-altura);
  background:var(--surface-inverse);
  overflow:hidden;
}
/* Duas fotos, uma por formato: a horizontal no desktop e a vertical no
   celular. Cada uma tem o seu enquadramento — é a única imagem da página
   que muda com a largura, e muda porque o recorte pede. */
.hero picture{position:absolute;inset:0}
.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:55% 22%;   /* vertical, no celular */
}
/* Um véu só, igual em qualquer largura */
.hero__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(var(--veil-rgb),.78) 0%,
    rgba(var(--veil-rgb),.58) 40%,
    rgba(var(--veil-rgb),.14) 70%,
    rgba(var(--veil-rgb),0) 100%);
}
.hero__content{
  position:relative;
  display:flex;
  flex-direction:column;
  /* Ancorado embaixo: o texto fecha o hero e deixa o rosto livre em cima. */
  justify-content:flex-end;
  gap:22px;
  padding:var(--pad-y) var(--pad-x);
  width:100%;
  /* Alinha o texto à mesma coluna dos cards: sem isso, numa tela larga ele
     fica colado na borda esquerda enquanto o resto da página está no meio. */
  max-width:calc(var(--content-max) + 2 * var(--pad-x));
  margin-inline:auto;
  color:var(--text-inverse);
}
.hero__title{
  font-family:var(--font-display);
  font-size:var(--size-h1);
  font-weight:400;
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  text-wrap:pretty;
}
.hero__title em{font-style:italic;color:var(--text-inverse-muted)}
/* O ponto final fecha a frase na mesma cor do itálico, não no creme do
   resto do título: é o que faz a linha terminar em vez de só parar. */
.hero__ponto{color:var(--text-inverse-muted)}

/* Chamada do hero — link de texto com fio, não botão */
.hero__cta{
  align-self:flex-start;
  /* No celular o hero fecha sem botão — a pessoa rola direto para os cards.
     Volta a aparecer no desktop, onde sobra espaço abaixo do título. */
  display:none;
  align-items:center;
  gap:12px;
  margin-top:4px;
  padding-bottom:7px;
  border-bottom:1px solid var(--text-inverse-muted);
  font-family:var(--font-sans);
  font-size:var(--text-kicker);
  font-weight:400;
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--text-inverse);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.hero__cta-arrow{
  font-size:15px;
  letter-spacing:0;
  transition:transform .2s var(--ease);
}
.hero__cta:hover{color:var(--text-inverse-muted)}
.hero__cta:hover .hero__cta-arrow{transform:translateX(5px)}

/* ------------------------------ Intro do hero --------------------------
   A foto abre ocupando a tela inteira, sem nada por cima — nem o menu —,
   recua até a faixa normal do hero e só então os elementos entram.

   A classe .intro vem de um script no <head>: se viesse do main.js, que é
   defer, a página teria pintado uma vez inteira antes de a foto cobrir.

   Todas as animações usam fill 'backwards': elas seguram o estado inicial
   durante o atraso e, no fim, devolvem o elemento ao CSS normal — o estado
   final de cada uma já é o natural, então não há salto. É isso que dispensa
   qualquer limpeza em JS depois.
   ----------------------------------------------------------------------- */
@keyframes hero-abre{
  from{height:100vh;margin-top:calc(-1 * var(--header-h))}
  to{height:var(--hero-altura);margin-top:0}
}
@keyframes hero-zoom{
  from{transform:scale(1.12)}
  to{transform:scale(1)}
}
@keyframes sobe-suave{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* Acima do header (z-index 50) para cobri-lo enquanto está puxado para cima */
.intro .hero{
  z-index:60;
  animation:hero-abre 1.1s var(--ease-suave) .4s backwards;
}
.intro .hero__img{animation:hero-zoom 2.2s var(--ease-suave) backwards}
.intro .site-header{animation:sobe-suave .7s var(--ease-suave) 1.35s backwards}
.intro .hero__content > *{animation:sobe-suave .9s var(--ease-suave) backwards}
.intro .hero__content .kick--inv{animation-delay:1.5s}
.intro .hero__title{animation-delay:1.65s}
.intro .hero__cta{animation-delay:1.8s}

/* ========================= ESCOLHA O CAMINHO =========================== */
/* Os cards entram deslocados para os lados; o clip evita que esse
   deslocamento vire rolagem lateral em telas mais estreitas. */
.caminhos{
  overflow-x:clip;
  background:var(--surface-canvas);
  padding:var(--pad-y) var(--pad-x);
}
.section-head{
  max-width:var(--content-max);
  margin:0 auto 24px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-subtle);
}
.cards{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  /* No celular o intervalo é o tempo de leitura: é ele que dá o percurso de
     rolagem entre um card travar e o próximo começar a cobri-lo. */
  gap:72px;
  /* Linhas iguais: se um card fosse mais baixo que o anterior, a sobra do de
     baixo apareceria embaixo dele mesmo travando na mesma altura. */
  grid-auto-rows:1fr;
}

/* No celular os cards empilham: todos travam na mesma altura, então o de cima
   cobre por inteiro o que ficou preso — nenhuma borda do anterior aparece.
   Como são sticky, o card seguinte já pinta sobre o anterior pela ordem do
   documento. No desktop voltam a ser estáticos, lado a lado. */
.card{
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  transition:background-color .18s var(--ease);
  position:sticky;
  top:calc(var(--header-h) + 20px);
}
/* Entrada em cena: o JS é que põe a classe .revelar, e só quando consegue
   observar o scroll — sem isso um card poderia ficar invisível para sempre.
   A transição fica no estado revelado, não em .revelar: na classe que esconde
   ela faria o card apagar em 0.8s antes de voltar a aparecer.
   A cor de fundo entra na lista porque esta regra substitui a transição do
   .card, e sem ela o hover perderia o esmaecido depois da entrada. */
.revelar{opacity:0;transform:translateY(20px)}
.revelar.revelado{
  opacity:1;
  transform:none;
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    background-color .18s var(--ease);
}

.card__media{aspect-ratio:3/2;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 20px 30px;
  flex:1;
}
.card__kick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--accent)}
.card__title{
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:400;
  line-height:var(--leading-snug);
}
.card__title em{font-style:italic;color:var(--accent)}
.card__text{
  font-size:var(--text-body-s);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
  flex:1;
}
/* Sem sublinhado no título: o card se anuncia pelo fundo e pelo botão */
.card:hover{background:var(--surface-raised-hover)}
/* Card sem destino ainda: não finge ser clicável */
.card--soon,
.card--soon:hover{background:var(--surface-raised);cursor:default}

.badge{
  display:inline-block;
  padding:4px 8px;
  font-size:var(--text-kicker);
  font-weight:600;
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  line-height:1.3;
}
/* O selo da oferta principal e o unico tracejado da pagina: o fio picotado
   diz "vaga limitada" sem precisar de mais uma cor. */
.badge--accent{background:transparent;border:1px dashed var(--accent);color:var(--accent)}
.badge--outline{border:1px solid var(--border-subtle);background:var(--color-cream);color:var(--text-primary)}

/* ================================ SOBRE ================================
   Duas zonas de tom lado a lado: a foto sobre um bege um degrau mais escuro
   que o da seção de cima — é esse degrau que marca onde o Sobre começa — e o
   texto sobre um painel creme que sangra até a borda direita.
   A faixa da prova fica no creme, abaixo das duas zonas.
   --------------------------------------------------------------------- */
/* As duas zonas sangram com margem negativa calculada em 100vw, que ignora a
   barra de rolagem; sem o clip isso vira alguns pixels de rolagem lateral. */
.sobre{background:var(--surface-canvas);overflow-x:clip}

.sobre__grid{
  max-width:calc(var(--content-max) + 2 * var(--pad-x-wide));
  margin-inline:auto;
  padding-inline:var(--pad-x-wide);
  display:flex;
  flex-direction:column;
}

/* Sangra até as duas bordas para o tom virar uma faixa, e não um retângulo
   com sobra de bege dos lados. */
.sobre__panel{
  display:flex;
  align-items:center;
  background:var(--surface-canvas-deep);
  margin-inline:calc(-1 * var(--pad-x-wide));
  padding:var(--pad-y-wide) var(--pad-x-wide);
}
.sobre__media{
  /* Proporção nativa do retrato (900×1333): assim a foto entra inteira,
     sem o corte que o 4/5 fazia em cima e embaixo. */
  aspect-ratio:27/40;
  overflow:hidden;
  width:100%;
  max-width:420px;
  margin-inline:auto;
}
.sobre__media img{width:100%;height:100%;object-fit:cover}

/* A foto do Sobre não esmaece como os outros blocos: ela é descoberta de
   baixo para cima, e a imagem acompanha com um leve deslize, o que dá
   profundidade em vez de parecer uma cortina numa foto parada. */
.sobre__media.revelar{opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
.sobre__media.revelar img{transform:scale(1.06) translateY(3%)}
.sobre__media.revelar.revelado{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s var(--ease-suave);
}
.sobre__media.revelar.revelado img{
  transform:none;
  transition:transform 1.3s var(--ease-suave);
}

/* Tom próprio, entre o bege do painel da foto e o creme da faixa da prova.
   Sem isso o painel e a faixa ficam no mesmo creme, se fundem, e só o bege
   mostra uma borda embaixo — o que faz a coluna da foto parecer cortada. */
.sobre__text{
  background:var(--surface-header);
  margin-inline:calc(-1 * var(--pad-x-wide));
  padding:var(--pad-y-wide) var(--pad-x-wide);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.sobre__text .section-title{max-width:24ch}
/* Dentro do painel o parágrafo usa a coluna inteira: a medida de 46ch vale
   para texto solto sobre a página, não para um bloco que já tem largura. */
.sobre__text .body-l{max-width:none}
/* Entre parágrafos o respiro é menor que o gap do painel, que separa blocos. */
.sobre__copy{display:flex;flex-direction:column;gap:14px}

.sobre__prova{
  background:var(--surface-page);
  padding:var(--pad-y-wide) var(--pad-x-wide);
}

/* Prova numérica: superfície própria, um degrau acima do creme da faixa */
.stats{
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  padding:0 clamp(20px, 2.4vw, 32px);
  border:1px solid var(--border-subtle);
}
.stats__item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:20px 0;
  border-bottom:1px solid var(--border-subtle);
}
.stats__item:last-child{border-bottom:0}
.stats__num{
  flex:0 0 auto;        /* nunca deixa o número quebrar no meio */
  /* Dígitos de mesma largura: sem isso o número treme enquanto o contador
     sobe, porque 1 e 4 não ocupam o mesmo espaço. */
  font-variant-numeric:tabular-nums;
  font-family:var(--font-display);
  font-size:var(--size-stat);
  font-weight:400;
  line-height:1;
  color:var(--accent);
}
.stats__label{margin:0;color:var(--text-primary)}

/* ============================= DEPOIMENTOS =============================
   Colunas que sobem em laço contínuo, cada uma na sua velocidade. O laço é
   CSS puro: o JS duplica o conteúdo de cada coluna e a trilha anda -50%, o
   que recoloca a segunda cópia exatamente onde a primeira começou. O
   padding-bottom da trilha vale o gap — sem ele o -50% cai no meio do
   intervalo entre cards e o laço dá um salto visível a cada volta.
   ----------------------------------------------------------------------- */
.depo{
  background:var(--surface-raised);
  padding:var(--pad-y) var(--pad-x);
}
.depo__head{
  max-width:var(--content-max);
  margin:0 auto 40px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.depo__head .section-title{max-width:24ch}

.depo__cols{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-height:min(660px, 82vh);
  overflow:hidden;
  /* Some no topo e no pé, em vez de cortar o card numa linha reta */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.depo__col{overflow:hidden}
.depo__trilha{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:24px;
  animation:depo-sobe var(--depo-dur, 36s) linear infinite;
}
@keyframes depo-sobe{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
/* Parar no hover e no foco do teclado: sem isso não dá para ler um
   depoimento inteiro nem alcançar o texto com o leitor de tela. */
.depo__cols:hover .depo__trilha,
.depo__cols:focus-within .depo__trilha{animation-play-state:paused}

/* Sem JS — e com movimento reduzido — os cards ficam em grade estática */
.depo__lista{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.depo-card{
  margin:0;
  background:var(--surface-page);
  border:1px solid var(--border-subtle);
  padding:clamp(20px, 2.4vw, 28px);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.depo-card__texto{
  margin:0;
  font-size:var(--size-body-fluid);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}
.depo-card__texto p{margin:0}
.depo-card__autor{display:flex;align-items:center;gap:12px}
/* Serve para o monograma (span) e para a foto (img), sem trocar de regra */
.depo-card__foto{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  display:grid;
  place-items:center;
  background:var(--surface-canvas-deep);
  color:var(--accent);
  font-size:var(--text-body-s);
  letter-spacing:var(--tracking-wide);
}
.depo-card__quem{display:flex;flex-direction:column;gap:3px;min-width:0}
.depo-card__nome{
  font-size:var(--size-body-fluid);
  line-height:1.2;
  color:var(--text-primary);
}
/* Menor que o nome e em tinta secundária: identifica sem competir com ele */
.depo-card__segmento{
  font-size:var(--text-kicker);
  line-height:1.2;
  color:var(--text-secondary);
}

@media (prefers-reduced-motion:reduce){
  .depo__trilha,
  .cta__band-arrow,
  .cta__cursor{animation:none}
}

/* ============================= NEWSLETTER ============================== */
.newsletter{
  background:var(--surface-canvas);
  padding:var(--pad-y) var(--pad-x);
}
.newsletter__inner{
  max-width:640px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}
.newsletter .body{max-width:52ch}

.nl-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  margin-top:4px;
  text-align:left;
}
.field{
  min-height:52px;
  width:100%;
  padding:0 18px;
  background:var(--surface-page);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:var(--tracking-wide);
  color:var(--text-primary);
  transition:border-color .18s var(--ease);
}
.field::placeholder{color:var(--text-secondary);text-transform:uppercase}
.field:hover{border-color:var(--border-hover)}
.field[aria-invalid="true"]{border-color:var(--accent)}

.nl-form__msg{
  margin:0;
  min-height:1.2em;
  font-size:var(--text-body-s);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
  text-align:center;
}
.nl-form__msg[data-state="error"]{color:var(--accent)}
.nl-form__msg[data-state="success"]{color:var(--accent)}

/* ============================== CTA FINAL ==============================
   O CTA não tem cor nem tipografia próprias: é uma seção creme como a do
   Sobre, com o mesmo título de seção na Maximina. O peso de fechamento
   vem da faixa conhaque no pé — o botão primário em largura total —, e não
   de uma superfície inventada só para ela.
   ----------------------------------------------------------------------- */
.cta{background:var(--surface-page);color:var(--text-primary)}
/* O fio corre de ponta a ponta — por isso a faixa é full width e o recuo
   lateral leva o texto até a coluna de conteúdo, em vez de limitar a caixa. */
.cta__strip{
  padding:var(--pad-y) max(var(--pad-x), (100% - var(--content-max)) / 2) 18px;
  border-bottom:1px solid var(--border-subtle);
}
.cta__block{
  max-width:calc(var(--content-max) + 2 * var(--pad-x));
  margin:0 auto;
  padding:40px var(--pad-x) 40px;
}
.cta__title{
  font-family:var(--font-display);
  font-size:var(--size-h2);
  font-weight:400;
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  max-width:20ch;
  text-wrap:pretty;
}
.cta__title em{font-style:italic;color:var(--accent)}
.cta__text{
  margin-top:20px;
  max-width:52ch;
  font-size:var(--size-body-fluid);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}

/* A faixa é o botão primário em largura total */
.cta__band{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  /* Fundo de ponta a ponta: o padding lateral cresce com a tela para que o
     texto continue na coluna, mas o conhaque vai até a borda. Aqui a conta
     usa 100% da seção, e não 100vw, porque o vw inclui a barra de rolagem e
     jogaria o texto uns 7px à direita da coluna. */
  padding:26px max(var(--pad-x), (100% - var(--content-max)) / 2);
  /* Dourado com texto escuro. O hover desce um degrau dentro do próprio
     dourado, e não para o conhaque: assim o texto continua escuro o tempo
     todo, sem o meio de transição em que ele fica ilegível. */
  background:var(--accent-light);
  color:var(--text-primary);
  transition:background-color .18s var(--ease);
}
.cta__band:hover{background:var(--accent-light-deep)}
.cta__band-text{
  font-family:var(--font-display);
  font-size:var(--size-faixa);
  font-weight:400;
  line-height:1.15;
}
.cta__band-arrow{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:18px;
  /* Vaivém contínuo, em vez de só reagir ao hover: é o que dá vida à faixa.
     O hover acelera — não desloca —, senão a transformação do hover brigaria
     com a da animação, que sempre vence. */
  animation:seta-vaivem 1.9s var(--ease) infinite;
}
.cta__band:hover .cta__band-arrow{animation-duration:.9s}
@keyframes seta-vaivem{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(7px)}
}

/* Cursor do título que é digitado; o JS o remove quando termina */
.cta__cursor{
  display:inline-block;
  width:2px;
  height:.8em;
  margin-left:.06em;
  background:var(--accent);
  animation:pisca 1s steps(1) infinite;
}
@keyframes pisca{50%{opacity:0}}

/* =============================== RODAPÉ ================================ */
.site-footer{
  background:var(--footer-surface);
  color:var(--footer-text);
  border-top:1px solid var(--footer-rule);
  padding:36px var(--pad-x) 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.to-top{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:24px;
  color:var(--footer-accent);
  transition:opacity .18s var(--ease);
}
.to-top:hover{opacity:.72}
.to-top__circle{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--footer-accent);
  border-radius:50%;
}
.footer-links{
  width:100%;
  max-width:var(--content-max);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px 24px;
  padding:20px 0;
  border-top:1px solid var(--footer-rule);
  border-bottom:1px solid var(--footer-rule);
}
.footer-links a{color:var(--footer-text);transition:opacity .18s var(--ease)}
.footer-links a:hover{opacity:.72}
/* No celular cada pedaço fica na sua linha — nome, direitos e política —
   em vez de a frase quebrar onde a largura mandar. */
.site-footer__legal{
  width:100%;
  max-width:var(--content-max);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-top:22px;
  font-size:var(--text-body-s);
  color:var(--footer-muted);
  text-align:center;
}
.site-footer__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.site-footer__legal a{
  font-size:var(--text-body-s);
  color:var(--footer-muted);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity .18s var(--ease);
}
.site-footer__legal a:hover{opacity:.72}

/* No celular o rodapé encurta: sai o WhatsApp, que já está no botão do CTA,
   e sai a política, que deixaria o bloco legal em três linhas. */
.so-desktop{display:none}

/* ======================================================================= */
/*                            BREAKPOINT  ≥ 840px                          */
/* ======================================================================= */
@media (min-width: 840px){
  :root{--header-h:61px}

  .site-header__inner{padding:20px 48px}

  .hero{--hero-altura:min(703px, 78vh)}
  .hero__img{object-position:50% 28%}   /* horizontal, no desktop */
  .hero__content{
    gap:26px;
    padding:112px var(--pad-x);
  }
  .hero__title{max-width:22ch}
  .hero__cta{display:inline-flex}

  .section-head{margin-bottom:40px;padding-bottom:16px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;grid-auto-rows:auto}
  .card{position:static}

  /* No desktop os cards entram por lados opostos, um da esquerda e o seguinte
     da direita, em vez de subirem. O estado revelado precisa desta mesma
     especificidade para vencer as duas regras acima e zerar o deslocamento. */
  .card.revelar:nth-child(odd){transform:translateX(-64px)}
  .card.revelar:nth-child(even){transform:translateX(64px)}
  .card.revelar.revelado{transform:none}
  .card__body{padding:32px}

  /* Formações fecha a grade ocupando a linha toda: a imagem fica à esquerda,
     na largura de uma coluna, e o texto ao lado. */
  #formacoes{grid-column:1 / -1;flex-direction:row}
  #formacoes .card__media{flex:0 0 calc(50% - 12px);align-self:flex-start}

  /* Sem gap: as duas zonas se encostam, e cada uma recua o próprio conteúdo. */
  .sobre__grid{
    display:grid;
    grid-template-columns:2fr 3fr;
    gap:0;
    align-items:stretch;
  }

  /* A zona bege sangra até a borda esquerda em qualquer largura. */
  .sobre__panel{
    --col-esq:max(var(--pad-x-wide), (100vw - var(--content-max)) / 2);
    margin-inline:calc(-1 * var(--col-esq)) 0;
    padding-left:var(--col-esq);
    padding-right:clamp(32px, 4vw, 64px);
  }
  /* A coluna de texto ficou alta; o retrato cresce junto para as duas zonas
     terem peso parecido, sem passar da altura do painel. */
  .sobre__media{max-width:440px;max-height:100%}

  /* A zona creme sangra até a borda direita, e o texto termina na mesma
     linha em que a faixa da prova termina. */
  .sobre__text{
    --col-dir:max(var(--pad-x-wide), (100vw - var(--content-max)) / 2);
    margin-inline:0;
    margin-right:calc(-1 * var(--col-dir));
    padding:var(--pad-y-wide) var(--col-dir) var(--pad-y-wide) clamp(32px, 4vw, 64px);
  }

  .stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .stats__item{
    padding:43px 0;
    border-bottom:0;
    border-right:1px solid var(--border-subtle);
  }
  .stats__item + .stats__item{padding-left:24px;padding-right:24px}
  .stats__item:last-child{border-right:0}

  .depo__cols,
  .depo__lista{grid-template-columns:repeat(3,minmax(0,1fr))}

  .newsletter__inner{gap:18px}
  .nl-form{gap:12px;margin-top:8px}

  .cta__strip{padding-bottom:22px}
  .cta__block{padding:76px var(--pad-x) 72px}
  .cta__text{margin-top:28px}
  .cta__band{
    gap:32px;
    padding:38px max(var(--pad-x), (100% - var(--content-max)) / 2);
  }
  .cta__band-arrow{width:64px;height:64px;font-size:22px}

  .site-footer{padding:56px var(--pad-x)}
  .footer-links{gap:32px;padding:26px 0}
  .so-desktop{display:inline}
  /* Copyright numa ponta, política na outra, nas bordas da coluna. No
     celular eles voltam a empilhar centralizados, porque lado a lado não
     cabem. */
  .site-footer__legal{
    padding-top:26px;
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
  /* No desktop os dois pedaços voltam a ser uma frase só */
  .site-footer__copy{flex-direction:row;gap:.35em}
}

/* O antigo breakpoint de 1280px saiu daqui: ele cravava padding-left/right
   em 56px e anulava tanto o max() da faixa do CTA quanto o clamp do header.
   Como --pad-x já satura em 56px a partir de 1280, ele só fazia estrago. */