/* ============================================================
   TUTORES — Landing pública (camada sobre o tutores-ui)
   ------------------------------------------------------------
   REGRA: este arquivo NÃO redeclara nenhum seletor que já exista
   em tutores-ui.css. Só classes novas (prefixo .lp- ou nomes que
   o DS não usa). Assim o tutores-ui.css continua re-sincronizável
   a partir de ../../tutores-ui/ sem risco de regressão aqui.

   O DS foi feito para ferramentas internas autenticadas (topbar com
   avatar, sidebar, tabelas, formulários de cadastro). Tudo que é
   gramática de landing — hero, seções de scroll, CTA fixo mobile,
   FAQ, banda de fechamento — nasce aqui.
   ============================================================ */

/* ---------- Base da página pública ---------- */
body.lp{background:var(--white)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--roxo-700);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:700;font-size:14px}
.skip-link:focus{left:0}

.lp-wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}

/* ---------- Header público sticky ----------
   O .top do DS assume avatar + botão "sair" (app autenticado). Aqui o
   header é institucional: marca à esquerda, ação à direita. */
.lp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--ink-200)}
.lp-header .lp-wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.lp-header__logo{height:34px;width:auto;display:block}
.lp-header__spacer{flex:1}
.lp-selo{display:inline-flex;align-items:center;gap:7px;font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--roxo-700);
  background:var(--roxo-100);border-radius:999px;padding:6px 13px}
.lp-selo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-700);flex:0 0 7px}
@media(max-width:720px){.lp-selo{display:none}}
@media(max-width:520px){.lp-header__acao{display:none}}

/* ---------- Seletor de unidade ----------
   Cada cidade tem o SEU formulário de inscrição. Este seletor nunca some
   no celular (ao contrário do selo e do botão do header): mandar o aluno
   pro formulário da cidade errada é o pior erro possível desta página. */
.lp-unit{position:relative;flex:0 0 auto}
.lp-unit__btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ink-200);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;font-weight:700;line-height:1.2;
  color:var(--roxo-900);cursor:pointer;white-space:nowrap}
.lp-unit__btn:hover{border-color:var(--roxo-500);background:var(--roxo-50)}
.lp-unit__btn:focus-visible{outline:3px solid var(--roxo-100);outline-offset:2px}
.lp-unit__btn svg{color:var(--roxo-700);flex:0 0 auto}
.lp-unit__menu{position:absolute;right:0;top:calc(100% + 9px);z-index:70;min-width:236px;padding:8px;
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(78,48,119,.18)}
.lp-unit__lab{margin:4px 8px 8px;font-family:"Plus Jakarta Sans",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.lp-unit__menu button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink-900);padding:10px;border-radius:9px;cursor:pointer}
.lp-unit__menu button:hover{background:var(--roxo-50);color:var(--roxo-900)}
.lp-unit__menu button.is-ativo{background:var(--roxo-100);color:var(--roxo-900);font-weight:700}
.lp-unit__menu button:focus-visible{outline:3px solid var(--roxo-100);outline-offset:-3px}
@media(max-width:400px){.lp-unit__btn{font-size:12.5px;padding:6px 10px}}

/* ---------- Faixa de escolha de cidade ----------
   Só para quem chega sem unidade na URL. Quem entra por /lagoa ou
   /samonte já vem resolvido e não vê nada disso. */
/* ---------- Portão de escolha da cidade ----------
   Aparece SÓ para quem chega sem cidade na URL e sem escolha anterior — na
   prática, quem digitou o domínio puro na primeira visita. Quem entra por
   /lagoa ou /samonte nunca vê esta tela, então os links já divulgados não
   pagam clique nenhum. É a mesma página, não um redirect: nada recarrega.
   O [hidden] precisa vencer o display:grid, daí a regra logo abaixo. */
.lp-escolha{position:fixed;inset:0;z-index:100;background:var(--roxo-900);color:#fff;
  display:grid;place-items:center;padding:32px 20px;overflow-y:auto}
.lp-escolha[hidden]{display:none}
.lp-escolha__caixa{width:100%;max-width:520px;text-align:center}
.lp-escolha__logo{display:block;height:38px;width:auto;margin:0 auto 26px}
.lp-escolha__eyebrow{margin:0 0 10px;font-family:"Plus Jakarta Sans",sans-serif;font-size:12.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--laranja-500)}
.lp-escolha__tit{margin:0 0 12px;font-family:"Plus Jakarta Sans",sans-serif;font-size:30px;
  font-weight:800;line-height:1.2;color:#fff}
.lp-escolha__sub{margin:0 0 28px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.lp-escolha__acoes{display:grid;gap:12px}
/* Alvo de toque grande de propósito: é a decisão mais cara da página, e o
   público é celular de entrada, uma mão só. */
.lp-escolha__cidade{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:58px;padding:14px 18px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.42);border-radius:var(--radius);
  font:inherit;font-size:16px;font-weight:700;color:#fff;cursor:pointer;
  transition:background .16s ease,border-color .16s ease}
.lp-escolha__cidade:hover{background:rgba(255,255,255,.20);border-color:#fff}
.lp-escolha__cidade:focus-visible{outline:3px solid rgba(255,255,255,.65);outline-offset:2px}
.lp-escolha__cidade svg{color:var(--laranja-500);flex:0 0 auto}
/* Trava o scroll do fundo enquanto o portão está aberto. */
body.lp-travado{overflow:hidden}
@media(max-width:420px){.lp-escolha__tit{font-size:25px}.lp-escolha__logo{height:32px}}

/* ---------- Aviso sem JavaScript ----------
   Sem JS a página serve a unidade padrão, então quem é da outra cidade
   precisa do link nomeado aqui em cima. */
.lp-noscript{background:var(--roxo-900);color:#fff;padding:14px 24px;text-align:center;font-size:14.5px}
.lp-noscript a{color:#fff;font-weight:700;text-decoration:underline;margin:0 9px;display:inline-block}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 130% at 88% -20%,var(--roxo-100),transparent 55%),
  linear-gradient(180deg,var(--roxo-50),var(--white) 78%)}
/* Régua diagonal do "T" do logo, em escala grande. Decorativa: vive num
   ::after, então fica fora da árvore de acessibilidade sem aria-hidden. */
.hero::after{content:"";position:absolute;right:-90px;top:-70px;width:300px;height:300px;
  background:var(--laranja-100);transform:skewX(-18deg);border-radius:26px;opacity:.55;z-index:0}
.hero-in{position:relative;z-index:1;padding:66px 0 60px;max-width:760px}
.hero h1{font-size:clamp(32px,5.4vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  margin:0 0 16px;color:var(--roxo-900)}
.hero .hero-sub{font-size:clamp(16px,2vw,18.5px);color:var(--ink-700);max-width:58ch;margin:0 0 30px;line-height:1.6}
.hero .hero-sub b{color:var(--roxo-700);font-weight:700}
@media(max-width:860px){.hero-in{padding:46px 0 44px}.hero::after{width:200px;height:200px;right:-70px;opacity:.4}}

/* ---------- Seções de scroll ----------
   A .page do DS é uma tela única de ferramenta; não empilha seções. */
.section{padding:70px 0;position:relative}
.section--tint{background:var(--roxo-50);border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100)}
.section--dark{background:var(--roxo-700);color:#fff}
.section h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  margin:0 0 12px;color:var(--roxo-900);max-width:26ch}
.section .section-lead{color:var(--ink-500);font-size:16.5px;max-width:62ch;margin:0 0 34px;line-height:1.6}
.section--dark h2,.section--dark .section-lead{color:#fff}
.section--dark .section-lead{color:rgba(255,255,255,.82)}
@media(max-width:860px){.section{padding:50px 0}}

/* ---------- Linha de CTAs ---------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-row--mt{margin-top:26px}
.cta-note{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:14.5px;color:var(--ink-700);
  font-weight:600;flex-wrap:wrap}
.cta-note svg{color:var(--roxo-700);flex:0 0 auto}
.cta-note .sep{color:var(--ink-300);font-weight:400}
.section--dark .cta-note{color:rgba(255,255,255,.9)}
.section--dark .cta-note svg{color:var(--laranja-500)}
.section--dark .cta-note .sep{color:rgba(255,255,255,.4)}
/* "Inscrição gratuita" — para um público que conta cada real, é a objeção
   silenciosa que mais trava o clique. Verde do DS, que passa em AA. */
.cta-note__free{color:var(--ok-700)}
.section--dark .cta-note__free{color:#fff}

/* Botão grande: alvo de toque de 48px nos pontos de maior intenção
   (hero, encerramento, barra mobile). O .btn do DS fica em ~40px. */
.btn--lg{font-size:16px;padding:15px 26px;min-height:52px;border-radius:11px}
/* Botões sobre fundo roxo (banda de fechamento). Classes novas — não
   sobrescrevem .btn--primary/.btn--secondary.
   O .btn--primary do DS é roxo: sobre a banda roxa ele sumiria. Aqui a ação
   principal inverte para branco, que é o maior contraste possível no fundo. */
.btn--light{background:#fff;color:var(--roxo-700);border-color:#fff}
.btn--light:hover{background:var(--roxo-50);border-color:var(--roxo-50);color:var(--roxo-900)}
.btn--onDark{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.btn--onDark:hover{background:rgba(255,255,255,.22);border-color:#fff}
.section--dark .btn:focus-visible{outline:3px solid rgba(255,255,255,.65);outline-offset:2px}

/* ---------- Faixa de credibilidade ---------- */
.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prova{display:flex;align-items:flex-start;gap:14px;padding:22px 20px;background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.prova__ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:0 0 44px;
  background:var(--roxo-100);color:var(--roxo-700)}
.prova:nth-child(2) .prova__ic{background:var(--laranja-100);color:#8A4700}
.prova:nth-child(3) .prova__ic{background:var(--teal-100);color:var(--teal-500)}
.prova__n{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:26px;line-height:1.1;
  color:var(--roxo-900);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prova__t{display:block;font-size:14px;color:var(--ink-500);margin-top:5px;line-height:1.45}
@media(max-width:860px){.provas{grid-template-columns:1fr}}

/* ---------- Cards com slot de imagem ----------
   Hoje o slot renderiza bloco de cor da marca + ícone + o corte diagonal.
   Quando houver foto, basta pôr <img class="lp-card__img"> dentro do
   .lp-card__media — o layout e o grid não mudam. */
.lp-grid{display:grid;gap:20px}
.lp-grid--3{grid-template-columns:repeat(3,1fr)}
/* Com um card escondido por unidade, sobraria coluna vazia à direita. Só no
   desktop: abaixo de 860px a grade já cai sozinha para 2 e depois 1 coluna,
   e esta regra não pode vencer aquelas. */
@media(min-width:861px){
  .lp-grid--3.lp-grid--n2{grid-template-columns:repeat(2,1fr);max-width:760px;
    margin-left:auto;margin-right:auto}
}
.lp-grid--2{grid-template-columns:repeat(2,1fr)}

.lp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-200);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .15s ease}
.lp-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(78,48,119,.16);border-color:var(--roxo-500)}

.lp-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--roxo-700),var(--roxo-500) 62%,var(--roxo-900));color:#fff}
.lp-card__media::after{content:"";position:absolute;right:-40px;bottom:-56px;width:150px;height:150px;
  background:rgba(255,255,255,.10);transform:skewX(-18deg);border-radius:18px}
.lp-card__media svg{position:relative;z-index:1;width:46px;height:46px;stroke-width:1.6;
  transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.lp-card:hover .lp-card__media svg{transform:scale(1.09) rotate(-4deg)}
/* Foto entra aqui depois, sem mexer no resto. */
.lp-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* Rotação de cor da marca: roxo → laranja → teal, como o DS já faz em .home-choose */
.lp-grid .lp-card:nth-child(3n+2) .lp-card__media{background:linear-gradient(150deg,#B85E0A,var(--laranja-500) 60%,#8A4700)}
.lp-grid .lp-card:nth-child(3n+3) .lp-card__media{background:linear-gradient(150deg,#0B7C72,var(--teal-500) 60%,#075E56)}

.lp-card__body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.lp-card__body h3{font-size:18.5px;font-weight:800;margin:0 0 7px;letter-spacing:-.01em;color:var(--roxo-900)}
.lp-card__body p{margin:0;color:var(--ink-500);font-size:14.5px;line-height:1.55}
.lp-card__kicker{font-family:"Plus Jakarta Sans",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--roxo-500);margin:0 0 6px}

/* Selo "Novo" — laranja só como fundo de bloco com texto escuro (contraste AA). */
.lp-novo{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:var(--laranja-500);color:#3A1D00;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}

/* Card largo: ocupa a linha inteira, foto à esquerda e texto à direita.
   Serve pra quebrar o ritmo do grid e dar espaço a uma foto boa. */
.lp-card--wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
.lp-card--wide .lp-card__media{aspect-ratio:auto;flex:0 0 42%;min-height:230px}
.lp-card--wide .lp-card__media svg{width:56px;height:56px}
.lp-card--wide .lp-card__body{justify-content:center;padding:28px 32px}
.lp-card--wide .lp-card__body h3{font-size:22px}
.lp-card--wide .lp-card__body p{font-size:15.5px;max-width:52ch}
@media(max-width:640px){
  .lp-card--wide{flex-direction:column}
  .lp-card--wide .lp-card__media{flex:none;aspect-ratio:16/10;min-height:0}
  .lp-card--wide .lp-card__body{padding:20px 22px 24px}
}

@media(max-width:860px){.lp-grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.lp-grid--3,.lp-grid--2{grid-template-columns:1fr}}

/* ---------- Caminho Tutores: linha do tempo "Da Base ao ENEM" ----------
   Eram três cards independentes; viraram uma linha do tempo, com um fio
   ligando as etapas para mostrar que uma leva à outra. O conteúdo fica
   direto sobre o fundo da .section--tint (sem card), pra que o fio apareça. */
.jornada{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* Nem toda unidade tem as três etapas — em Santo Antônio do Monte a Tutores é
   parceira só no Ensino Médio. Sem estas regras o card sobrevivente ficaria
   com 1/3 da largura, e o conector (que usa :not(:last-child), o qual CONTA
   elemento escondido) apontaria para um card invisível. O JS conta os
   visíveis e marca o último. */
.jornada--n1{grid-template-columns:1fr;max-width:560px}
.jornada--n2{grid-template-columns:repeat(2,1fr)}
.jornada-etapa.is-ultimo::before{display:none}
.jornada-etapa{position:relative;padding-right:10px}
/* O fio é desenhado por etapa, de um ícone ao seguinte, em vez de uma barra
   só no contêiner — assim ele encosta exatamente no centro de cada ícone e
   continua alinhado se um dia entrar uma quarta etapa.
   Vive no ::before, então é pintado ANTES do ícone: o ícone cobre a ponta
   naturalmente, sem precisar de z-index. */
.jornada-etapa:not(:last-child)::before{content:"";position:absolute;left:22px;top:21px;
  width:calc(100% + 28px);height:2px;border-radius:2px}
.jornada-etapa:nth-child(1)::before{background:linear-gradient(90deg,var(--roxo-700),var(--laranja-500))}
.jornada-etapa:nth-child(2)::before{background:linear-gradient(90deg,var(--laranja-500),var(--teal-500))}
/* O anel na cor do fundo da seção "corta" o fio, dando o efeito de parada. */
.jornada-etapa__ic{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--roxo-700);color:#fff;margin-bottom:16px;
  box-shadow:0 0 0 6px var(--roxo-50)}
.jornada-etapa:nth-child(2) .jornada-etapa__ic{background:var(--laranja-500);color:#3A1D00}
.jornada-etapa:nth-child(3) .jornada-etapa__ic{background:var(--teal-500)}
.jornada-etapa__ano{font-family:"Plus Jakarta Sans",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-500);margin:0 0 5px}
.jornada-etapa h3{font-size:20px;font-weight:800;margin:0 0 8px;letter-spacing:-.015em;color:var(--roxo-900)}
.jornada-etapa p{margin:0;color:var(--ink-500);font-size:14.5px;line-height:1.55}
/* margin-right porque um card pode ter mais de um selo (o Médio tem dois) e
   selo inline-flex não obedece gap do pai. */
.jornada-etapa__tag{display:inline-flex;align-items:center;gap:6px;margin-top:14px;margin-right:8px;
  font-size:12.5px;
  font-weight:700;color:var(--roxo-700);background:var(--roxo-100);border-radius:999px;padding:5px 11px}
/* No celular a linha vira vertical e corre por uma calha à esquerda, pra
   não passar por trás do texto. */
@media(max-width:860px){
  .jornada{grid-template-columns:1fr;gap:30px}
  .jornada-etapa{padding-left:64px;padding-right:0;min-height:44px}
  .jornada-etapa__ic{position:absolute;left:0;top:0;margin-bottom:0}
  /* Mesma régua, agora descendo do pé de um ícone até o topo do próximo. */
  .jornada-etapa:not(:last-child)::before{left:21px;top:44px;width:2px;height:calc(100% - 14px)}
  .jornada-etapa:nth-child(1)::before{background:linear-gradient(180deg,var(--roxo-700),var(--laranja-500))}
  .jornada-etapa:nth-child(2)::before{background:linear-gradient(180deg,var(--laranja-500),var(--teal-500))}
}

/* ---------- Texto de marca (Por que a Tutores) ---------- */
.manifesto{max-width:64ch}
.manifesto h3{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--roxo-900);margin:30px 0 10px}
.manifesto h3:first-child{margin-top:0}
.manifesto p{font-size:17px;line-height:1.7;color:var(--ink-700);margin:0 0 16px}
.manifesto p:last-child{margin-bottom:0}

/* O aviso do que a prova garante virou dois parágrafos: sem isto o navegador
   aplica a margem padrão do <p> e abre um buraco dentro da caixa. */
.callout p{margin:0 0 10px}
.callout p:last-child{margin-bottom:0}
.manifesto strong{color:var(--roxo-900);font-weight:700}

/* ---------- FAQ (details/summary nativo: teclado e foco de graça) ---------- */
.faq{max-width:64ch}
.faq-item{background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.faq-item[open]{border-color:var(--roxo-500);box-shadow:var(--shadow-sm)}
.faq-item summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;
  font-weight:700;font-size:15.5px;color:var(--roxo-900);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--roxo-50)}
.faq-item summary:focus-visible{outline:3px solid var(--roxo-100);outline-offset:-3px}
.faq-item summary::after{content:"";margin-left:auto;flex:0 0 10px;width:10px;height:10px;
  border-right:2.5px solid var(--roxo-700);border-bottom:2.5px solid var(--roxo-700);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-item .faq-a{padding:0 18px 18px;color:var(--ink-700);font-size:14.5px;line-height:1.65}
.faq-item .faq-a p{margin:0}

/* ---------- Banda de fechamento ---------- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--roxo-700),var(--roxo-900) 72%)}
.cta-band::after{content:"";position:absolute;left:-70px;bottom:-90px;width:280px;height:280px;
  background:rgba(245,130,31,.16);transform:skewX(-18deg);border-radius:26px}
.cta-band .lp-wrap{position:relative;z-index:1;padding-top:74px;padding-bottom:74px;text-align:center}
.cta-band h2{margin-left:auto;margin-right:auto;max-width:18ch}
.cta-band .cta-row{justify-content:center}
.cta-band .cta-note{justify-content:center}
@media(max-width:860px){.cta-band .lp-wrap{padding-top:54px;padding-bottom:54px}}

/* ---------- Contato ---------- */
.contact-block{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-item{display:flex;align-items:flex-start;gap:13px;padding:18px 20px;background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--radius)}
.contact-item svg{color:var(--roxo-700);flex:0 0 auto;margin-top:2px}
.contact-item .ct-l{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.contact-item .ct-v{display:block;font-size:15px;font-weight:600;color:var(--ink-900);margin-top:3px;line-height:1.4}
.contact-item a.ct-v:hover{text-decoration:underline}
@media(max-width:860px){.contact-block{grid-template-columns:1fr}}

/* ---------- Barra fixa mobile ---------- */
.mobile-cta{display:none}
@media(max-width:860px){
  .mobile-cta{display:flex;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--ink-200);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .mobile-cta .btn{flex:1;justify-content:center;min-height:48px;font-size:14.5px;padding:12px 10px}
  /* Espaço pro rodapé não ficar embaixo da barra. */
  body.lp{padding-bottom:82px}
}

/* ---------- Modal de escolha da cidade ----------
   Aparece no primeiro clique de inscrição. É a última barreira contra o
   pior erro possível da página: o aluno se inscrever na cidade errada. */
.lp-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.lp-modal__fundo{position:absolute;inset:0;background:rgba(30,20,50,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lp-modal__caixa{position:relative;z-index:1;width:100%;max-width:460px;background:#fff;
  border-radius:var(--radius);box-shadow:0 26px 70px rgba(30,20,50,.34);padding:30px 28px 26px;
  animation:subir .3s cubic-bezier(.2,.7,.3,1) both}
.lp-modal__caixa h2{font-size:clamp(21px,3.6vw,26px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;color:var(--roxo-900);margin:0 0 8px}
.lp-modal__sub{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--ink-500)}
.lp-modal__x{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;
  place-items:center;background:none;border:0;border-radius:9px;color:var(--ink-500);cursor:pointer}
.lp-modal__x:hover{background:var(--roxo-50);color:var(--roxo-900)}
.lp-modal__x:focus-visible{outline:3px solid var(--roxo-100);outline-offset:2px}

.lp-modal__ops{display:grid;gap:10px}
.lp-modal__op{display:flex;align-items:center;gap:13px;padding:15px 16px;background:#fff;
  border:1.5px solid var(--ink-200);border-radius:var(--radius-sm);text-decoration:none;
  color:var(--ink-900);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.lp-modal__op:hover{border-color:var(--roxo-500);background:var(--roxo-50);transform:translateX(2px)}
.lp-modal__op:focus-visible{outline:3px solid var(--roxo-100);outline-offset:2px}
.lp-modal__ic{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:var(--roxo-100);color:var(--roxo-700)}
.lp-modal__op:nth-child(2) .lp-modal__ic{background:var(--teal-100);color:var(--teal-500)}
.lp-modal__txt{flex:1;min-width:0}
.lp-modal__txt b{display:block;font-size:16px;font-weight:700;color:var(--roxo-900);line-height:1.25}
.lp-modal__txt small{display:block;font-size:12.5px;color:var(--ink-500);margin-top:3px;line-height:1.4}
.lp-modal__op>svg:last-child{flex:0 0 auto;color:var(--roxo-500)}
@media(max-width:520px){.lp-modal__caixa{padding:26px 20px 22px}}

/* ---------- Link da política no rodapé ----------
   Não some no celular: é exigência de LGPD estar sempre alcançável. */
.foot-link{font-size:13px;color:var(--ink-500);text-decoration:underline}
.foot-link:hover{color:var(--roxo-700)}

/* ---------- Faixa de cookies ----------
   Só aparece se houver GA4_ID no config. Sem aceite, nenhum script de
   medição carrega. No celular sobe acima da barra fixa, senão uma cobre
   a outra e o usuário não consegue nem aceitar nem recusar. */
.lp-cookies{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--radius);box-shadow:0 18px 44px rgba(30,20,50,.22)}
.lp-cookies p{margin:0;flex:1;min-width:230px;font-size:14px;line-height:1.55;color:var(--ink-700)}
.lp-cookies a{color:var(--roxo-700);font-weight:600;text-decoration:underline}
.lp-cookies__acoes{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:860px){.lp-cookies{bottom:96px}}

/* ---------- Entrada da página ----------
   Reaproveita o @keyframes subir do DS, disparado no LOAD (não no scroll).
   Sem IntersectionObserver: nada fica preso em opacity:0 se o JS falhar,
   e o prefers-reduced-motion global do DS já desliga tudo. */
.hero-in>*{animation:subir .55s cubic-bezier(.2,.7,.3,1) both}
.hero-in>*:nth-child(2){animation-delay:.06s}
.hero-in>*:nth-child(3){animation-delay:.12s}
.hero-in>*:nth-child(4){animation-delay:.18s}
.hero-in>*:nth-child(5){animation-delay:.24s}

/* ---------- Impressão ---------- */
@media print{
  .lp-header,.mobile-cta,.cta-row,.skip-link{display:none!important}
  body.lp{padding-bottom:0}
  .section,.hero-in{padding:18px 0}
}