/* ==========================================================================
   Colégio Criarte — Landing Page Matrículas 2027
   Tokens herdados do Design System oficial da campanha "Crescer, Aprender,
   Conquistar". Nenhum valor solto: cor, espaço e raio sempre via token.
   ========================================================================== */

:root {
  /* Laranja — captação, afeto, Infantil e Fundamental I */
  --c-orange-900: #CF2F07;
  --c-orange-700: #F7310D;
  --c-orange-600: #F4521B;
  --c-orange-500: #FF5B09;
  --c-orange-400: #FF8A3B;
  --c-orange-grad: linear-gradient(135deg, #FF8A3B 0%, #F4521B 45%, #CF2F07 100%);

  /* Navy — performance, maturidade, Fundamental II e Médio */
  --c-navy-900: #0E1B33;
  --c-navy-800: #172D5A;
  --c-navy-700: #1B305C;
  --c-navy-600: #20355F;
  --c-navy-500: #2B6292;
  --c-navy-grad: linear-gradient(135deg, #2B6292 0%, #1B305C 55%, #0E1B33 100%);

  /* Amarelo — EXCLUSIVO para ação. Nenhum uso decorativo. */
  --c-yellow-500: #FFC400;
  --c-yellow-600: #F5B800;

  /* Laranja de texto pequeno sobre fundo claro.
     O laranja de campanha (#F4521B) rende 3.3:1 sobre creme, o que passa em
     título grande mas reprova em tag, legenda e link (WCAG 2.2 AA exige 4.5:1
     abaixo de 18.66px bold). Este tom rende 6.9:1 e continua dentro da paleta. */
  --c-orange-text: #CF2F07;

  /* Neutros */
  --c-white: #FFFFFF;
  --c-cream: #FFF9F0;
  --c-ink: #1A1A1A;
  --c-gray-600: #5A5F6B;
  --c-gray-400: #8A8F9B;
  --c-gray-200: #E8E6E1;

  /* Semânticos */
  --c-error: #C62828;
  --c-error-bg: #FDECEA;
  --c-success: #1E7A4B;

  /* Escala tipográfica: cinco degraus com função definida.
     micro = legal e legenda · small = metadado e hint · body = texto de card
     lead = parágrafo de apoio · os títulos usam clamp próprio. */
  --t-micro: 11.5px;
  --t-small: 12.5px;
  --t-body:  14.5px;
  --t-base:  16px;
  --t-lead:  18px;

  /* Tipografia */
  --f-display: 'Archivo Black', 'Archivo', system-ui, -apple-system, sans-serif;
  --f-heading: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Raio */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Espaçamento — escala de 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Sombra */
  --sh-sm: 0 2px 8px rgba(14,27,51,.08);
  --sh-md: 0 8px 24px rgba(14,27,51,.12);
  --sh-lg: 0 16px 48px rgba(14,27,51,.18);
  --sh-cta: 0 6px 20px rgba(255,196,0,.42);

  /* Motion — funcional, nunca decorativo */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 220ms;

  /* Layout */
  --wrap: 1160px;
  --wrap-narrow: 780px;
}

/* ==========================================================================
   Reset e base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--s-6);
}

body {
  overflow-wrap: break-word;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Foco visível em todo interativo. Requisito WCAG 2.2 (2.4.11). */
:focus-visible {
  outline: 3px solid var(--c-yellow-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible { outline-color: var(--c-yellow-500); }

/* Pula para o conteúdo — primeiro elemento tabulável da página */
.skip-link {
  position: absolute; left: -9999px;
  top: var(--s-3); z-index: 999;
  background: var(--c-navy-900); color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--f-heading); font-weight: 700; font-size: 14.5px;
  text-decoration: none;
}
.skip-link:focus { left: var(--s-4); }

.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;
}

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

/* ==========================================================================
   Utilitários de layout
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--s-5); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s-8); position: relative; }
@media (min-width: 768px) { .section { padding-block: var(--s-9); } }

.bg-cream { background: var(--c-cream); }
.bg-white { background: var(--c-white); }
.bg-navy  { background: var(--c-navy-grad); color: #fff; }
.bg-navy-solid { background: var(--c-navy-900); color: #fff; }
.bg-orange { background: var(--c-orange-grad); color: #fff; }
/* Degradê claro, branco para cinza. Separa este bloco do creme das dobras
   vizinhas sem introduzir uma cor nova na paleta. */
.bg-soft { background: linear-gradient(168deg, #FFFFFF 0%, #FAF8F5 42%, #F1EEE9 100%); }

.h-display {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(30px, 5.2vw, 50px); line-height: 1.06;
  letter-spacing: -.01em; color: var(--c-navy-700);
}
.h2 {
  font-family: var(--f-heading); font-weight: 800;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.15;
  letter-spacing: -.01em; color: var(--c-navy-700);
}
.h3 {
  font-family: var(--f-heading); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 22px); line-height: 1.3;
  color: var(--c-navy-700);
}
.bg-navy .h2, .bg-navy .h3, .bg-orange .h2, .bg-orange .h3,
.bg-navy-solid .h2, .bg-navy-solid .h3 { color: #fff; }

/* Palavra em destaque, recurso de ênfase herdado do site institucional.
   A regra é invertida de propósito: laranja é o padrão e o amarelo é a exceção
   dos fundos escuros. Na forma anterior, cada seção clara nova precisava ser
   adicionada a uma lista, e quem esquecesse ganhava amarelo sobre creme a 1,5:1.
   Aconteceu três vezes. Assim o padrão é sempre o seguro. */
.hl { color: var(--c-orange-600); }
.on-dark .hl, .bg-navy .hl, .bg-navy-solid .hl, .bg-orange .hl,
.hero .hl, .cta-band .hl, .footer .hl { color: var(--c-yellow-500); }

.lead {
  font-size: clamp(16px, 2vw, 18px); line-height: 1.65;
  color: var(--c-gray-600); max-width: 62ch;
}
.bg-navy .lead, .bg-orange .lead, .bg-navy-solid .lead { color: rgba(255,255,255,.88); }

.section-head { margin-bottom: var(--s-7); max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Botões — amarelo é a única cor que significa "clique aqui"
   ========================================================================== */

.btn {
  font-family: var(--f-heading); font-weight: 800; font-size: 16px;
  padding: 17px 32px; border-radius: var(--r-pill);
  border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; /* alvo de toque confortável, acima do mínimo de 44px */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  text-align: center; line-height: 1.2;
}
.btn-primary { background: var(--c-yellow-500); color: var(--c-navy-900); box-shadow: var(--sh-cta); }
.btn-primary:hover { background: var(--c-yellow-600); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,196,0,.55); }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost-light {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.45);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.75); }

.btn-block { width: 100%; }

/* Varredura no hover de todo CTA primário de âncora. No botão de envio ela roda
   em loop; aqui só responde ao ponteiro, para a página não virar um campo de
   movimento constante competindo com a leitura. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary > * { position: relative; z-index: 1; }
a.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.62) 50%, transparent 64%);
  transform: translateX(-100%);
  pointer-events: none;
}
a.btn-primary:hover::after { animation: btn-sweep 900ms var(--ease); }
@media (prefers-reduced-motion: reduce) { a.btn-primary::after { display: none; } }

/* Varredura contínua no botão de envio. É o mesmo princípio de movimento do
   marquee da referência: uma faixa que atravessa em loop, com pausa no hover.
   Fica restrita ao botão de envio dos formulários: aplicada em todo CTA amarelo
   da página, viraria ruído e diluiria justamente o que ela existe para destacar.
   A faixa passa por baixo do texto, então o contraste do rótulo não muda. */
form[data-lead-form] button[type="submit"] { position: relative; overflow: hidden; }
form[data-lead-form] button[type="submit"] > * { position: relative; z-index: 1; }
form[data-lead-form] button[type="submit"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.72) 50%, transparent 64%);
  transform: translateX(-100%);
  animation: btn-sweep 3.2s var(--ease) infinite;
  pointer-events: none;
}
/* A pausa depois da passagem evita o efeito estroboscópico de um loop contínuo */
@keyframes btn-sweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
form[data-lead-form] button[type="submit"]:hover::after,
form[data-lead-form] button[type="submit"][disabled]::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  form[data-lead-form] button[type="submit"]::after { display: none; }
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Badge "Matrículas Abertas" — continuidade visual anúncio → página
   ========================================================================== */

.badge-matriculas {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--f-heading); font-weight: 900; line-height: 1.05;
}
.badge-matriculas .l1 { color: #fff; font-size: 14.5px; letter-spacing: .04em; }
.badge-matriculas .l2 {
  background: var(--c-yellow-500); color: var(--c-navy-900);
  font-size: 24px; padding: 2px 10px; margin-top: 3px;
  transform: skewX(-4deg);
}

/* Pegada do Léo — elemento gráfico assinatura, sempre decorativo e sutil.
   display:block é obrigatório: em <span> inline, width e height são ignorados. */
.paw {
  display: block;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='68' rx='26' ry='22'/%3E%3Cellipse cx='22' cy='38' rx='11' ry='15' transform='rotate(-20 22 38)'/%3E%3Cellipse cx='42' cy='20' rx='11' ry='15' transform='rotate(-8 42 20)'/%3E%3Cellipse cx='62' cy='20' rx='11' ry='15' transform='rotate(8 62 20)'/%3E%3Cellipse cx='80' cy='38' rx='11' ry='15' transform='rotate(20 80 38)'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='68' rx='26' ry='22'/%3E%3Cellipse cx='22' cy='38' rx='11' ry='15' transform='rotate(-20 22 38)'/%3E%3Cellipse cx='42' cy='20' rx='11' ry='15' transform='rotate(-8 42 20)'/%3E%3Cellipse cx='62' cy='20' rx='11' ry='15' transform='rotate(8 62 20)'/%3E%3Cellipse cx='80' cy='38' rx='11' ry='15' transform='rotate(20 80 38)'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   Barra de progresso de scroll — sinaliza que a página tem fim
   ========================================================================== */

.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 100; background: transparent;
  pointer-events: none;
}
.progress > i {
  display: block; height: 100%; width: 0;
  background: var(--c-yellow-500);
  transition: width 90ms linear;
}

/* ==========================================================================
   1 — HERO
   ========================================================================== */

.hero {
  background: var(--c-orange-grad);
  color: #fff; position: relative; overflow: hidden;
  padding-block: var(--s-6) var(--s-8);
}
/* Silhueta de leão em marca d'água, réplica da assinatura das peças */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  inset-block-start: -6%; inset-inline-end: -12%;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.16) 0%, transparent 62%);
  pointer-events: none;
}
.hero .paw-mark {
  position: absolute; z-index: 0; color: var(--c-yellow-500);
  width: 190px; height: 190px; opacity: .17;
  inset-block-start: 8%; inset-inline-end: 4%;
  pointer-events: none;
}

.hero-top {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  gap: var(--s-5); padding-block: var(--s-4) var(--s-5);
}
.hero-top .logo { width: 112px; height: auto; flex-shrink: 0; }
.hero-top .badge-matriculas { flex-shrink: 0; }
/* A linha de campanha ocupa o vão entre a marca e o badge, e é a régua dela que
   costura os dois lados do cabeçalho. */
.hero-top .campaign-line { flex: 1; min-width: 0; }

.campaign-line {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-heading); font-weight: 700;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.campaign-line .rule { flex: 1; height: 1px; background: rgba(255,255,255,.4); min-width: 20px; }
.campaign-line .end { white-space: nowrap; }

/* Abaixo de 768px não existe vão para a régua costurar: logo (112) + selo (145)
   + 2 gaps já consomem a faixa inteira, e a campaign-line era espremida a 22px.
   Como o texto dela não é cortado, ele vazava da própria caixa e caía por cima
   do selo. A faixa passa a quebrar em duas linhas: marca e selo dividem a
   primeira, a linha de campanha ocupa a segunda inteira e mantém a régua.
   O corte é 767 e não 700 porque em linha única o conteúdo pede 700px justos:
   entre 701 e 767 o kicker ainda quebrava em duas linhas. */
@media (max-width: 767px) {
  .hero-top { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  .hero-top .logo { width: 96px; }
  .hero-top .badge-matriculas { margin-inline-start: auto; }
  .hero-top .campaign-line { flex: 1 0 100%; order: 3; letter-spacing: .12em; }
}

/* Medido, não arbitrado: o kicker em uma linha ocupa 253px e "Criarte 2027" 98px.
   Com 48px de padding e uma régua de 40px, a linha inteira só cabe a partir de
   463px de viewport. Abaixo disso "Criarte 2027" é a metade dispensável — sai o
   eco da campanha e ficam a assinatura e a régua, que é o que costura o topo. */
@media (max-width: 480px) {
  .hero-top .campaign-line .end { display: none; }
}

@media (max-width: 400px) {
  .badge-matriculas .l1 { font-size: 13px; }
  .badge-matriculas .l2 { font-size: 21px; }
}

/* Em 320px sobram 272px para a linha, e kicker (253) + gap (12) + régua mínima
   (20) davam 285. Quem empurrava a quebra era a régua, não o texto: afrouxar o
   tracking devolve os 20px que faltavam e a assinatura volta a caber em uma linha. */
@media (max-width: 360px) {
  .hero-top .campaign-line { letter-spacing: .06em; }
  .campaign-line .rule { min-width: 12px; }
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-6); align-items: center;
}
@media (min-width: 940px) {
  /* O hero inteiro dentro de uma tela: nada essencial exige rolagem. */
  .hero {
    min-height: 100dvh;
    display: flex; flex-direction: column;
    padding-block: var(--s-3) var(--s-5);
  }
  .hero > .wrap { flex: 1; display: flex; flex-direction: column; }
  .hero-grid {
    grid-template-columns: 1.02fr .98fr; gap: var(--s-7);
    align-items: center; flex: 1;
  }
  .hero h1 { font-size: clamp(34px, 3.9vw, 52px); }
  .hero .sub { font-size: 16px; margin-bottom: var(--s-5); }
}

.hero h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(33px, 7vw, 60px); line-height: 1.02;
  letter-spacing: -.015em; color: #fff;
  margin-block: 0 var(--s-4);
  text-wrap: balance;
}
.hero .sub {
  font-size: clamp(16px, 2.1vw, 19px); line-height: 1.6;
  color: rgba(255,255,255,.94); max-width: 46ch;
  margin-bottom: var(--s-6);
}
/* Prova social do hero — pilha de avatares + estrelas.
   Fotos reais de alunos do Criarte, na ordem do Infantil ao Médio. */
.social-proof {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
}

.avatars { list-style: none; display: flex; padding: 0; margin: 0; }
.avatars li { margin-inline-start: -12px; }
.avatars li:first-child { margin-inline-start: 0; }
.avatars img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; object-position: center center;
  border: 3px solid var(--c-white);
  box-shadow: 0 2px 6px rgba(14,27,51,.22);
  background: var(--c-gray-200);
}
/* O último rosto ganha o anel laranja da campanha, como na referência */
.avatars li:last-child img { border-color: var(--c-orange-400); }

/* As estrelas do hero tinham regra no bloco antigo de depoimentos e ficaram sem
   tamanho quando aquele CSS foi reescrito. SVG sem width/height explode para o
   tamanho padrão de elemento substituído e empurrou o formulário para fora da
   primeira dobra. Regra própria aqui, sem depender de outro bloco. */
.social-proof-text { display: flex; flex-direction: column; gap: 3px; }
.social-proof .stars { display: flex; gap: 3px; color: var(--c-yellow-500); }
.social-proof .stars svg { width: 16px; height: 16px; flex-shrink: 0; }
.social-proof-text p { font-size: 12.5px; color: rgba(255,255,255,.88); line-height: 1.35; margin: 0; }
.social-proof-text strong { color: var(--c-white); font-weight: 700; }

@media (max-width: 380px) {
  .social-proof { gap: var(--s-3); }
  .avatars img { width: 40px; height: 40px; border-width: 2.5px; }
  .social-proof-text p { font-size: 12.5px; }
}

/* Coluna do formulário no hero. Substituiu a foto: a primeira dobra passou a
   ter o ponto de conversão em vez de uma imagem, o que elimina as 14,8 telas
   de rolagem que separavam o visitante de alta intenção do formulário. */
.hero-form { position: relative; }

.form-card-hero { padding: var(--s-5); }
@media (min-width: 940px) { .form-card-hero { padding: var(--s-5) var(--s-6) var(--s-6); } }

.form-card-title {
  font-family: var(--f-heading); font-weight: 800;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25;
  color: var(--c-navy-700);
}
.form-card-sub {
  font-size: 14.5px; color: var(--c-gray-600);
  margin-block: var(--s-2) var(--s-5); line-height: 1.45;
}

/* No hero tudo é um pouco mais apertado, para o formulário inteiro caber na
   primeira dobra em tela de notebook, sem encolher o alvo de toque abaixo do
   confortável: o campo continua com 46px de altura. */
.form-card-hero .field label { font-size: 12.5px; margin-bottom: 4px; }
.form-card-hero .field input,
.form-card-hero .field select { padding: 11px var(--s-4); min-height: 46px; font-size: 16px; }
.form-card-hero .form-rows { gap: var(--s-3); }
.form-card-hero .btn { min-height: 52px; margin-top: var(--s-4); }
.form-card-hero .form-sla { margin-top: var(--s-3); font-size: 12.5px; }
.form-card-hero .form-lgpd { margin-top: var(--s-2); font-size: 11.5px; }
.form-card-hero .form-card-sub { margin-block: 4px var(--s-4); font-size: 12.5px; }

/* Selos institucionais. Saíram da foto e passaram a acompanhar o formulário,
   que é onde a prova de autoridade trabalha melhor: reduz a ansiedade no exato
   momento em que a família decide se entrega os dados. */
.hero-authority {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3);
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.85);
}
.hero-authority img { height: 24px; width: auto; }
.hero-authority .sep { width: 1px; height: 16px; background: rgba(255,255,255,.35); }

/* ==========================================================================
   2 — BARRA DE CREDIBILIDADE
   ========================================================================== */

/* Faixa de números. Antes era uma laje navy que cortava o fluxo entre o hero
   laranja e a tensão creme. Agora é uma fita clara com fios de 1px: continua
   entregando autoridade, mas para de competir com as dobras vizinhas. */
.stats-band {
  background: var(--c-cream);
  border-block: 1px solid var(--c-gray-200);
  padding-block: var(--s-6) var(--s-5);
  overflow: hidden;
}

.marquee {
  display: flex; width: max-content;
  /* as bordas desbotam para o item não aparecer e sumir de forma abrupta */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
  flex-shrink: 0;
  animation: marquee-slide 46s linear infinite;
}
@keyframes marquee-slide { to { transform: translateX(-100%); } }

.stat {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-inline: var(--s-6);
  border-inline-end: 1px solid var(--c-gray-200);
  white-space: nowrap;
}
.stat-n {
  font-family: var(--f-heading); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-navy-700);
}
.stat-meta { display: flex; flex-direction: column; gap: 3px; }
.stat-label { font-size: 12.5px; color: var(--c-gray-600); line-height: 1.3; }
.stat-src {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--c-orange-text);
}

/* Sem movimento: a faixa vira uma tira rolável à mão, sem perder conteúdo. */
@media (prefers-reduced-motion: reduce) {
  .marquee { width: 100%; overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   4 — MECANISMO ÚNICO (cadeia causal, não lista)
   ========================================================================== */

.mech-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 940px) { .mech-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

.source-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9);
  margin-top: var(--s-5);
}

.chain { display: flex; flex-direction: column; gap: var(--s-2); }
.chain-step {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; gap: var(--s-4); align-items: flex-start;
}
.chain-step .num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-yellow-500); color: var(--c-navy-900);
  display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 900; font-size: 14.5px;
}
.chain-step h3 {
  font-family: var(--f-heading); font-weight: 700; font-size: 16px;
  color: #fff; margin-bottom: var(--s-1);
}
.chain-step p { font-size: 14.5px; color: rgba(255,255,255,.8); line-height: 1.55; }
.chain-arrow {
  width: 100%; display: grid; place-items: center;
  color: var(--c-yellow-500); height: 22px;
}

/* ==========================================================================
   3 — A JORNADA
   ========================================================================== */

.jornada { list-style: none; display: grid; gap: var(--s-6); margin: 0; padding: 0; position: relative; }

.jor-etapa { position: relative; display: grid; }

/* --- Foto em retrato: 3:4 dá presença de revista, muito acima do 168px de
   altura do formato antigo, que era a queixa legítima daquela versão. --- */
.jor-foto { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); }
.jor-foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  background: var(--c-gray-200);
}
/* Temperatura de cor progressiva: quente na infância, fria no Médio. É o mesmo
   significado do design system (laranja = afeto, navy = performance), mas dito
   na fotografia, onde variação de temperatura lê como grading e não como filtro.
   Na trilha, esse degradê embarrava no meio do percurso. */
.jor-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply;
}
.jor-etapa[data-fase="1"] .jor-foto::after { background: rgba(255,138,59,.20); }
.jor-etapa[data-fase="2"] .jor-foto::after { background: rgba(255,138,59,.09); }
.jor-etapa[data-fase="3"] .jor-foto::after { background: rgba(43,98,146,.10); }
.jor-etapa[data-fase="4"] .jor-foto::after { background: rgba(27,48,92,.20); }

.jor-marco {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-navy-700); color: #fff;
  font-family: var(--f-heading); font-weight: 800; font-size: 16px;
  border: 5px solid var(--c-cream);
  position: relative; z-index: 2;
}

.jor-txt h3 { font-family: var(--f-heading); font-weight: 800; font-size: 19px; color: var(--c-navy-700); }
.jor-idade {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-orange-text); margin-block: 4px var(--s-3);
}
.jor-gancho { font-family: var(--f-heading); font-weight: 700; font-size: 16px; color: var(--c-navy-700); margin-bottom: var(--s-2); }
.jor-desc { font-size: 14.5px; line-height: 1.55; color: var(--c-gray-600); }

/* --- Mobile: linha do tempo vertical, com trilho à esquerda. Num telefone o
   percurso lê melhor de cima para baixo do que em colunas espremidas. --- */
@media (max-width: 819px) {
  .jornada { gap: var(--s-5); }
  .jor-etapa {
    grid-template-columns: 46px 1fr; grid-template-areas: "marco foto" "rail txt";
    column-gap: var(--s-4); align-items: start;
  }
  .jor-foto { grid-area: foto; }
  .jor-marco { grid-area: marco; }
  .jor-txt   { grid-area: txt; padding-bottom: var(--s-4); }
  /* trilho descendo pela coluna dos marcadores */
  .jor-etapa::before {
    content: ""; grid-area: rail; justify-self: center;
    width: 3px; height: 100%; background: var(--c-gray-200); border-radius: var(--r-pill);
  }
  .jor-etapa:last-child::before { display: none; }
  .jor-foto img { aspect-ratio: 4 / 3; }
}

/* --- Desktop: as quatro fases lado a lado, ligadas por um trilho contínuo que
   passa pelos marcadores. Ver o percurso inteiro de uma vez é o que comunica
   continuidade, que é a tese do bloco.

   O marcador vai para o TOPO do cartão, e não entre foto e texto: assim o trilho
   fica num deslocamento fixo e conhecido (metade da altura do marcador), em vez
   de depender da altura da foto, que varia com a largura da coluna. --- */
@media (min-width: 820px) {
  .jornada { grid-template-columns: repeat(4, 1fr); --jor-gap: var(--s-5); gap: var(--jor-gap); }
  .jor-etapa { grid-template-rows: auto auto 1fr; justify-items: start; }
  /* Marcador centralizado na coluna: assim o trilho vai de 12,5% a 87,5%, que
     são os centros da primeira e da última coluna numa grade de quatro, e fecha
     exato sem depender do valor do gap. */
  .jor-marco { grid-row: 1; justify-self: center; margin-bottom: var(--s-4); }
  .jor-foto  { grid-row: 2; width: 100%; margin-bottom: var(--s-4); }
  .jor-txt   { grid-row: 3; }
  /* trilho: sólido e neutro, porque a progressão de fase já está nas fotos */
  /* O centro da primeira coluna não é 12,5% quando há gap: numa grade de quatro,
     largura da coluna = (W - 3G)/4, então o centro fica em W/8 - 3G/8. Daí o
     desconto de 0.375 do gap em cada ponta. Amarrado à variável para acompanhar
     a troca de gap no breakpoint seguinte. */
  .jornada::before {
    content: ""; position: absolute; z-index: 0;
    inset-inline: calc(12.5% - 0.375 * var(--jor-gap));
    inset-block-start: 21px;
    height: 4px; background: var(--c-gray-200); border-radius: var(--r-pill);
  }
}

@media (min-width: 1000px) {
  .jor-txt h3 { font-size: 21px; }
  .jornada { --jor-gap: var(--s-6); }
}

/* ==========================================================================
   6 — DIFERENCIAIS
   ========================================================================== */

.cards { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.card-img {
  width: 100%; aspect-ratio: 760 / 448;
  object-fit: cover; display: block;
  background: var(--c-gray-200);
}
.card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.card-body h3 {
  font-family: var(--f-heading); font-weight: 700; font-size: 17.5px;
  color: var(--c-navy-700); line-height: 1.3;
}
.card-body p { font-size: 14.5px; line-height: 1.55; color: var(--c-gray-600); }

/* ==========================================================================
   6 — PROVA SOCIAL
   ========================================================================== */

.depo { padding-block: var(--s-8) var(--s-9); }

/* Estado base: grade estática, tudo visível. É o que aparece sem JS, em tela
   estreita ou com prefers-reduced-motion. */
.depo-grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px)  { .depo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .depo-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.depo-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0;
}
.dep-aspas { color: var(--c-orange-600); flex-shrink: 0; }
.depo-stars { display: flex; gap: 3px; color: var(--c-yellow-600); margin-top: var(--s-3); }
.depo-stars svg { width: 15px; height: 14px; }
.depo-card blockquote {
  font-size: 14.5px; line-height: 1.6; color: var(--c-gray-600);
  margin-block: var(--s-3) var(--s-5); flex: 1;
}
.depo-card figcaption { display: flex; align-items: center; gap: var(--s-3); }
/* Monograma no lugar de foto: não há retrato dos pais no acervo, e usar rosto de
   terceiro ao lado do nome de quem assinou o depoimento seria inventar registro. */
.depo-ini {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-navy-700); color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 800; font-size: 14.5px;
}
.depo-quem strong { display: block; font-family: var(--f-heading); font-weight: 700; font-size: 16px; color: var(--c-navy-700); }
.depo-quem span { font-size: 12.5px; color: var(--c-gray-600); line-height: 1.4; }

.depo-progresso { display: none; }

/* ---- Modo rolável: cada depoimento entra em cena por vez ---------------- */
@media (min-width: 900px) {
  .js-depo .depo-track { position: relative; height: var(--depo-h, auto); }
  .js-depo .depo-stage {
    position: sticky; inset-block-start: 0;
    min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--s-7);
  }
  .js-depo .depo-card {
    opacity: 0; transform: translateY(28px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  .js-depo .depo-card.is-in { opacity: 1; transform: translateY(0); }

  .js-depo .depo-progresso {
    display: block; text-align: center; margin-top: var(--s-6);
    font-family: var(--f-heading); font-weight: 700; font-size: 12.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--c-gray-600);
  }
  .js-depo .depo-progresso [data-depo-atual] { color: var(--c-orange-text); }
}

@media (prefers-reduced-motion: reduce) {
  .js-depo .depo-track { height: auto; }
  .js-depo .depo-stage { position: static; min-height: 0; padding-block: 0; }
  .js-depo .depo-card { opacity: 1; transform: none; transition: none; }
  .js-depo .depo-progresso { display: none; }
}

/* ==========================================================================
   7 — ESTRUTURA E UNIDADES
   ========================================================================== */

.campus-hero { margin-bottom: var(--s-6); }
.campus-hero img {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover;
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
}
.campus-hero figcaption {
  font-size: 12.5px; color: var(--c-gray-600);
  margin-top: var(--s-3); text-align: center;
}

.units { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
@media (min-width: 768px) { .units { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.unit {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.unit h3 { font-family: var(--f-heading); font-weight: 800; font-size: 19px; color: var(--c-navy-700); }
.unit-ages {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-orange-text); margin-block: var(--s-2) var(--s-3);
}
.unit-addr { font-size: 14.5px; line-height: 1.5; color: var(--c-gray-600); margin-bottom: var(--s-4); }
.unit-list { list-style: none; display: grid; gap: var(--s-2); }
.unit-list li { font-size: 14.5px; color: var(--c-ink); padding-inline-start: var(--s-5); position: relative; }
.unit-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange-500);
}

.campus-pendente { margin-bottom: var(--s-6); }

.campus-gallery { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
@media (min-width: 600px) { .campus-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .campus-gallery { grid-template-columns: repeat(6, 1fr); gap: var(--s-4); } }
.campus-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
  background: var(--c-gray-200);
}
.campus-gallery figcaption {
  font-size: 11.5px; color: var(--c-gray-600);
  margin-top: var(--s-2); text-align: center; line-height: 1.35;
}

.campus-map {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-gray-200); box-shadow: var(--sh-sm);
}
.campus-map iframe { width: 100%; height: 300px; border: 0; display: block; }

/* Prompt de conversão nos picos de motivação: fim da prova social, dentro da
   oferta e depois do FAQ. Antes, o desktop passava 16 telas sem nenhum pedido de
   ação, e o CTA fixo é escondido acima de 900px. */
.bloco-cta {
  text-align: center;
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-gray-200);
}
.bloco-cta p {
  font-size: 16px; line-height: 1.5; color: var(--c-gray-600);
  max-width: 48ch; margin: 0 auto var(--s-4);
}
.bg-orange .bloco-cta { border-top-color: rgba(255,255,255,.28); padding-top: var(--s-5); margin-top: var(--s-5); }
/* Sobre o laranja da campanha, texto de corpo em branco rende 3,4:1 e reprova em
   AA. A caixa de escassez logo acima já cumpre o papel de linha de apoio, então
   aqui fica só o botão, que tem contraste próprio. */
.bg-orange .bloco-cta p { display: none; }

/* ==========================================================================
   9 — OFERTA
   ========================================================================== */

.offer-grid { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
.offer-card {
  background: #fff; border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--sh-lg); display: flex; flex-direction: column; gap: var(--s-3);
}
.offer-card .kicker {
  font-family: var(--f-heading); font-weight: 800; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-orange-text);
}
.offer-card h3 { font-family: var(--f-heading); font-weight: 800; font-size: 21px; color: var(--c-navy-700); line-height: 1.25; }
.offer-card p { font-size: 14.5px; color: var(--c-gray-600); line-height: 1.6; flex: 1; }
/* Marcação de pendência. Fora do escopo do card de oferta de propósito: qualquer
   texto à espera de dado do cliente precisa parecer marcação, nunca copy final. */
.to-fill {
  background: var(--c-cream); border: 1px dashed var(--c-orange-400);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  font-size: 12.5px; color: var(--c-orange-900); font-weight: 600;
}

.scarcity {
  margin-top: var(--s-6); background: rgba(14,27,51,.22);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; gap: var(--s-4); align-items: flex-start;
}
.scarcity svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--c-yellow-500); }
.scarcity strong { font-family: var(--f-heading); font-weight: 800; font-size: 16px; display: block; margin-bottom: var(--s-1); }
.scarcity p { font-size: 14.5px; color: rgba(255,255,255,.86); line-height: 1.55; }

/* ==========================================================================
   10 — FORMULÁRIO
   ========================================================================== */

/* No mobile a ordem é: chamada curta, FORMULÁRIO, depois os reforços.
   Empilhar os três bullets e o selo de privacidade antes do primeiro campo
   custava uma tela inteira de rolagem entre o clique no CTA e a digitação,
   justamente no momento de maior intenção. No desktop as duas colunas voltam,
   e o reforço volta a ser lido antes de preencher. */
.form-grid { display: grid; gap: var(--s-6); align-items: start; }
.form-intro   { order: 1; }
.form-card    { order: 2; }
.form-reassure{ order: 3; }

@media (min-width: 940px) {
  .form-grid {
    grid-template-columns: .85fr 1.15fr;
    grid-template-areas: "intro card" "reassure card";
    gap: var(--s-6) var(--s-8);
  }
  .form-intro    { grid-area: intro; }
  .form-reassure { grid-area: reassure; }
  .form-card     { grid-area: card; }
}

.form-reassure .whylist { list-style: none; display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.form-reassure .whylist li { display: flex; gap: var(--s-3); align-items: flex-start; }
.form-reassure .whylist svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--c-orange-text); }
.form-reassure .whylist strong { display: block; font-family: var(--f-heading); font-weight: 700; font-size: 16px; color: var(--c-navy-700); }
.form-reassure .whylist span { font-size: 14.5px; color: var(--c-gray-600); line-height: 1.5; }

.privacy-note {
  display: flex; gap: var(--s-3); align-items: center;
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--s-4);
  font-size: 12.5px; color: var(--c-gray-600); line-height: 1.5;
}
.privacy-note svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--c-success); }

.form-card {
  background: #fff; border-radius: var(--r-xl);
  padding: var(--s-6); box-shadow: var(--sh-lg); border: 1px solid var(--c-gray-200);
}
@media (min-width: 768px) { .form-card { padding: var(--s-7); } }

/* Agrupar reduz o comprimento percebido sem remover campo nenhum */
.fieldset { border: none; margin-bottom: var(--s-6); }
.fieldset legend {
  font-family: var(--f-heading); font-weight: 800; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-orange-text);
  margin-bottom: var(--s-4); padding: 0;
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
}
.fieldset legend::after { content: ""; flex: 1; height: 1px; background: var(--c-gray-200); }

.field { margin-bottom: var(--s-4); }
.field label {
  display: block; font-family: var(--f-heading); font-weight: 700;
  font-size: 14.5px; color: var(--c-navy-700); margin-bottom: 6px;
}
.field label .opt { font-family: var(--f-body); font-weight: 400; font-size: 12.5px; color: var(--c-gray-600); }
.field input, .field select {
  width: 100%; padding: 14px var(--s-4); min-height: 52px;
  border: 1.5px solid var(--c-gray-200); border-radius: var(--r-sm);
  font-family: var(--f-body); font-size: 16px; /* 16px evita zoom automático no iOS */
  color: var(--c-ink); background: var(--c-cream);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field select { appearance: none; cursor: pointer; padding-inline-end: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F6B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 18px;
}
.field input:focus, .field select:focus { border-color: var(--c-orange-600); background: #fff; }
.field .hint { font-size: 12.5px; color: var(--c-gray-600); margin-top: 5px; line-height: 1.45; }

/* Regra não escopada em .field de propósito: o erro do consentimento vive fora
   de um .field, e precisa herdar o mesmo estado oculto e o mesmo tamanho de ícone. */
.err { display: none; color: var(--c-error); font-size: 12.5px; font-weight: 600; margin-top: 6px; align-items: center; gap: 5px; line-height: 1.4; }
.err svg { width: 15px; height: 15px; flex-shrink: 0; }
[data-field].is-error > input, [data-field].is-error > select,
.field.is-error input, .field.is-error select { border-color: var(--c-error); background: var(--c-error-bg); }
[data-field].is-error > .err, .field.is-error .err { display: flex; }

/* Todos os campos num grid só, em vez de linhas avulsas. Sete campos em três
   linhas e meia no lugar de quatro, que é a altura que faltava para o hero caber
   na primeira dobra. align-items:end alinha pela base: sem isso, um rótulo que
   quebra em duas linhas empurra o campo e desalinha o par ao lado. */
.form-rows { display: grid; gap: var(--s-3); }
@media (min-width: 540px) {
  .form-rows { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); align-items: end; }
  .form-rows .field-wide { grid-column: 1 / -1; }
}
.form-rows .field { margin-bottom: 0; }

/* Aviso de LGPD junto ao botão, no lugar do antigo checkbox. O envio é o ato
   de consentimento, então o texto precisa estar visível antes do clique. */
/* gray-600 e não gray-400: este é o texto que sustenta o consentimento de LGPD,
   e a 11,5px o cinza claro rendia 3,2:1. É o último lugar da página onde vale
   trocar legibilidade por discrição. */
.form-lgpd {
  font-size: 11.5px; line-height: 1.45; color: var(--c-gray-600);
  text-align: center; margin-top: var(--s-3);
}
.form-lgpd a { color: var(--c-gray-600); text-decoration: underline; text-underline-offset: 2px; }
.form-lgpd a:hover { color: var(--c-orange-text); }

/* Honeypot — invisível ao humano, preenchido por bot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; pointer-events: none; }

.form-sla {
  text-align: center; font-size: 12.5px; color: var(--c-gray-600);
  margin-top: var(--s-4); display: flex; align-items: center; justify-content: center; gap: var(--s-2);
}
.form-sla svg { width: 16px; height: 16px; color: var(--c-success); }

.spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(14,27,51,.25);
  border-top-color: var(--c-navy-900); border-radius: 50%;
  animation: spin .7s linear infinite; display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading .spinner { display: block; }
.btn.is-loading .label { opacity: .7; }

.form-alert {
  display: none; gap: var(--s-3); align-items: flex-start;
  background: var(--c-error-bg); border: 1px solid rgba(198,40,40,.3);
  color: var(--c-error); border-radius: var(--r-md);
  padding: var(--s-4); margin-bottom: var(--s-5); font-size: 14.5px; line-height: 1.5;
}
.form-alert.is-visible { display: flex; }
.form-alert svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ==========================================================================
   11 — FAQ
   ========================================================================== */

.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); margin-bottom: var(--s-3); overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--c-orange-400); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5);
  font-family: var(--f-heading); font-weight: 700; font-size: 16px;
  color: var(--c-navy-700); display: flex; justify-content: space-between;
  align-items: center; gap: var(--s-4); min-height: 60px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 22px; height: 22px;
  background: currentColor; color: var(--c-orange-600);
  transition: transform var(--dur) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .answer { padding: 0 var(--s-5) var(--s-5); font-size: 16px; line-height: 1.65; color: var(--c-gray-600); }
.faq .answer p + p { margin-top: var(--s-3); }

/* ==========================================================================
   12 — LOCALIZAÇÃO E CTA FINAL
   ========================================================================== */



/* Faixa de CTA. Assinatura e botão na mesma linha, com o mínimo de altura: o
   bloco tem uma função só, e altura de sobra ali só afasta o botão do conteúdo
   que o antecede. Em tela estreita empilha e volta a centralizar. */
/* Gradiente e não sólido: o rodapé logo abaixo é navy-900 chapado, e duas
   superfícies idênticas coladas viram uma laje só. O gradiente termina claro na
   direita e cria a emenda. */
.cta-band { background: var(--c-navy-grad); padding-block: var(--s-5); }
.final-cta {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5) var(--s-6); flex-wrap: wrap; text-align: center;
}
.final-cta .sig {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(19px, 2.4vw, 27px); line-height: 1.2;
  color: #fff; margin: 0; text-wrap: balance;
}
.final-cta .sig em { font-style: normal; color: var(--c-yellow-500); }

/* ==========================================================================
   Rodapé
   ========================================================================== */

/* ==========================================================================
   Rodapé institucional
   Hierarquia em três camadas: marca e endereços em corpo legível, selos numa
   faixa própria, e o legal em corpo miúdo. Detalhe é detalhe.
   ========================================================================== */

.footer {
  background: var(--c-navy-900); color: rgba(255,255,255,.62);
  padding-block: var(--s-8) var(--s-6);
  border-top: 1px solid rgba(255,255,255,.1);
}

.footer-main { display: grid; gap: var(--s-6); padding-bottom: var(--s-6); }
@media (min-width: 700px)  { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-main { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-5); } }

.footer-brand img { width: 130px; height: auto; margin-bottom: var(--s-4); }
.footer-brand p { font-size: 12.5px; line-height: 1.6; max-width: 34ch; }

.footer-col h2 {
  font-family: var(--f-heading); font-weight: 700; font-size: 12.5px;
  color: var(--c-white); margin-bottom: var(--s-3);
}
.footer-col address {
  font-style: normal; font-size: 12.5px; line-height: 1.65;
  color: rgba(255,255,255,.62);
}
.footer-note { font-size: 12.5px; line-height: 1.65; }
.footer-note + .footer-note { margin-top: var(--s-3); }

.footer-seals {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-block: var(--s-5);
  border-block: 1px solid rgba(255,255,255,.1);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.75);
}
/* Chip branco atrás dos selos: o wordmark da Edua é navy escuro e sumia no
   fundo do rodapé. É também como o design system especifica o selo. */
.footer-seals img {
  height: 30px; width: auto;
  background: var(--c-white); border-radius: var(--r-sm);
  padding: 4px 8px; box-sizing: content-box;
}
.footer-seals .sep { width: 1px; height: 16px; background: rgba(255,255,255,.22); }

/* Copyright e crédito na mesma linha, como manda o rodapé institucional: um
   ancorado à esquerda, o outro à direita, sobre a mesma base. No mobile empilha. */
.footer-legal {
  padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-2) var(--s-5);
}
/* .52 e não .45: a 11,5px o texto legal precisa de 4,5:1, e .45 rendia 4,43. */
.footer-legal p { font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.52); margin: 0; }
.footer-legal p:last-child { text-align: end; }
@media (max-width: 720px) { .footer-legal p:last-child { text-align: start; } }
/* Escopado no pai para vencer .footer-legal a, que é mais específico que a
   classe sozinha e estava sobrescrevendo a cor de destaque. */
.footer-legal .footer-aka { font-weight: 700; color: rgba(255,255,255,.82); }
.footer-legal .footer-aka:hover { color: var(--c-yellow-500); }
.footer-legal a { color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--c-yellow-500); }

/* ==========================================================================
   CTA persistente mobile — a página tem 12 dobras, o CTA não pode sumir
   ========================================================================== */

.sticky-cta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-gray-200);
  padding: var(--s-3) var(--s-4);
  padding-block-end: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 280ms var(--ease);
  box-shadow: 0 -6px 24px rgba(14,27,51,.12);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { min-height: 52px; font-size: 16px; padding-inline: var(--s-5); }
/* No desktop vira uma pílula flutuante no canto, não uma barra: a barra inteira
   rouba área útil sem necessidade numa tela larga, mas some do olhar do usuário
   é pior ainda numa página de 17 telas. */
@media (min-width: 900px) {
  .sticky-cta {
    inset-inline: auto var(--s-6); inset-block-end: var(--s-6);
    background: none; border: 0; box-shadow: none; padding: 0;
    transform: translateY(24px); opacity: 0;
    transition: transform 280ms var(--ease), opacity 280ms var(--ease);
  }
  .sticky-cta.is-visible { transform: translateY(0); opacity: 1; }
  .sticky-cta .btn { box-shadow: var(--sh-lg), var(--sh-cta); }
}
body.has-sticky { padding-bottom: 84px; }
@media (min-width: 900px) { body.has-sticky { padding-bottom: 0; } }

/* ==========================================================================
   Progresso do formulário
   ========================================================================== */

.form-prog { margin-bottom: var(--s-4); }
.form-prog-bar {
  height: 4px; border-radius: var(--r-pill);
  background: var(--c-gray-200); overflow: hidden;
}
.form-prog-bar i {
  display: block; height: 100%; width: 0;
  background: var(--c-orange-500); border-radius: var(--r-pill);
  transition: width 320ms var(--ease);
}
.form-prog-bar.is-full i { background: var(--c-success); }
.form-prog-txt {
  font-size: 11.5px; color: var(--c-gray-600); margin-top: 6px;
  font-weight: 500;
}
.form-prog-txt [data-prog-txt] { font-weight: 700; color: var(--c-navy-700); }
@media (prefers-reduced-motion: reduce) { .form-prog-bar i { transition: none; } }

/* ==========================================================================
   Página de obrigado
   ========================================================================== */

.ty { min-height: 100dvh; display: grid; place-items: center; background: var(--c-orange-grad); padding: var(--s-6) var(--s-5); position: relative; overflow: hidden; }
.ty::before { content: ""; position: absolute; inset-block-start: -10%; inset-inline-end: -10%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 65%); }
.ty-card {
  background: #fff; border-radius: var(--r-xl); padding: var(--s-7) var(--s-6);
  max-width: 620px; width: 100%; box-shadow: var(--sh-lg); text-align: center; position: relative; z-index: 1;
}
@media (min-width: 640px) { .ty-card { padding: var(--s-8) var(--s-7); } }
.ty-check {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(30,122,75,.1);
  display: grid; place-items: center; margin: 0 auto var(--s-5); color: var(--c-success);
}
.ty-check svg { width: 38px; height: 38px; }
.ty-card h1 { font-family: var(--f-display); font-size: clamp(25px, 5vw, 34px); line-height: 1.12; color: var(--c-navy-700); margin-bottom: var(--s-4); }
.ty-card > p { color: var(--c-gray-600); font-size: 16px; max-width: 46ch; margin: 0 auto var(--s-6); line-height: 1.6; }
.ty-steps { list-style: none; text-align: start; display: grid; gap: var(--s-4); background: var(--c-cream); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-6); }
.ty-steps li { display: flex; gap: var(--s-4); align-items: flex-start; }
.ty-steps .n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--c-orange-text); color: #fff; display: grid; place-items: center; font-family: var(--f-heading); font-weight: 900; font-size: 14.5px; }
.ty-steps strong { display: block; font-family: var(--f-heading); font-weight: 700; font-size: 14.5px; color: var(--c-navy-700); margin-bottom: 2px; }
.ty-steps span { font-size: 14.5px; color: var(--c-gray-600); line-height: 1.5; }
.ty-seals { display: flex; gap: var(--s-5); align-items: center; justify-content: center; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-gray-200); }
.ty-seals img { height: 34px; width: auto; }
/* O logo Criarte é quadrado e empilhado: a 34px o nome não se lê.
   Os selos parceiros ficam menores, como manda a hierarquia de marca. */
.ty-seals img:first-child { height: 56px; }