/* ==========================================================================
   Sistema Anglo Pinda — camada global das cinco landing pages.

   Este arquivo é IDÊNTICO nas cinco páginas. Ele existe porque a medição
   provou que a camada compartilhada tinha se bifurcado: quatro containers
   diferentes, quatro alturas de header para o mesmo componente e cinco
   conjuntos de token com nomes incompatíveis.

   Carrega DEPOIS do CSS do segmento, para que o contrato vença as
   divergências locais sem precisar de !important.

   Regras em `qa/CONTRATO-DESIGN.md`. Não edite só aqui: mudança de contrato
   muda o documento primeiro.
   ========================================================================== */

:root {
  --header-clearance: 140px;
  /* --- grid ---------------------------------------------------------- */
  --largura-container: 1180px;
  --largura-container-larga: 1380px;
  --gutter: clamp(1.1rem, 4vw, 2rem);

  /* --- ritmo vertical ------------------------------------------------- */
  --respiro-secao: clamp(3rem, 7vw, 6rem);

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

  /* --- tipografia ----------------------------------------------------- */
  --texto--2: clamp(11px, 0.68rem + 0.2vw, 12.5px);
  --texto--1: clamp(13px, 0.78rem + 0.25vw, 14px);
  --texto-0:  clamp(15px, 0.9rem + 0.3vw, 17px);
  --texto-1:  clamp(17px, 1rem + 0.4vw, 20px);
  --texto-2:  clamp(20px, 1.1rem + 0.9vw, 26px);
  --texto-3:  clamp(23px, 1.2rem + 1.4vw, 33px);
  --texto-4:  clamp(28px, 1.4rem + 2.2vw, 46px);
  --texto-5:  clamp(34px, 1.6rem + 3.4vw, 64px);
  --texto-6:  clamp(44px, 2rem + 5vw, 96px);

  /* --- header --------------------------------------------------------- */
  --altura-header: 76px;

  /* --- forma ---------------------------------------------------------- */
  --raio-sm: 14px;
  --raio-md: 24px;
  --raio-lg: 40px;
  --raio-pill: 999px;
  --sombra-sm: 0 12px 32px rgb(16 22 31 / 10%);
  --sombra-lg: 0 30px 80px rgb(16 22 31 / 22%);
  --transicao: 180ms cubic-bezier(.2, .8, .2, 1);

  /* --- cor ------------------------------------------------------------ */
  --cor-papel: #f7f7f2;
  --cor-branco: #ffffff;
  --cor-tinta: #10161f;
  --cor-ciano: #00aeed;
  --cor-ciano-fundo: #007bb8;
  /* Ciano da marca como TEXTO sobre fundo claro. #00aeed mede 2,36:1 no papel
     e reprova; este mede 4,92:1. O #00aeed segue valendo para preenchimento,
     borda, ícone e display grande. */
  --cor-ciano-texto: #0072a8;
  --cor-amarelo: #fddd02;
  --cor-linha: #d7dde4;
  --cor-apoio: #667181;

  /* ---------------------------------------------------------------------
     Aliases dos nomes legados.

     Cada página batizou os mesmos conceitos com um prefixo próprio. Em vez de
     reescrever centenas de regras, os nomes antigos passam a apontar para o
     token canônico. Uma mudança no contrato passa a valer nas cinco de uma vez.
     --------------------------------------------------------------------- */
  --ei-gutter: var(--gutter);
  --ai-gutter: var(--gutter);
  --ei-max: var(--largura-container);
  --ai-max: var(--largura-container);
  --container: var(--largura-container);
  --seg-container: var(--largura-container);
  --container-wide: var(--largura-container-larga);

  --ei-header-height: var(--altura-header);
  --ai-header-height: var(--altura-header);
  --seg-header: var(--altura-header);
  --header-height: var(--altura-header);
}

/* --------------------------------------------------------------------------
   Container: uma implementação só.
   Medição anterior encontrava 324/332/330 px de conteúdo em 360 px de tela,
   e 1180/1200 px no desktop, dependendo da página.
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--largura-container));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - (var(--gutter) * 2), var(--largura-container-larga));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Controles herdam a família da marca.

   Sem isto, `button` e `input` caem no Arial do agente de usuário. A medição
   pegou 27 elementos renderizando Arial, entre eles as abas do passeio pelos
   espaços e a navegação. Só a família é herdada: tamanho e peso continuam
   sob controle do CSS de cada página.
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea,
summary,
optgroup {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Foco de teclado sempre visível.

   `:where()` mantém a especificidade em zero, então qualquer regra de foco
   própria de uma página continua vencendo esta.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  border-radius: var(--raio-sm);
}

/* --------------------------------------------------------------------------
   Botão flutuante de contato.

   Medição pegou o botão coberto por conteúdo comum em 360px, porque o
   z-index local (70 na bilíngue, 90 nos finais) perdia para seções que criam
   contexto de empilhamento próprio. Um botão de ação flutuante precisa ficar
   acima do conteúdo e abaixo do link de pular para o conteúdo.
   -------------------------------------------------------------------------- */
.whatsapp-float,
.mobile-contact.whatsapp-float {
  z-index: 9990;
}

/* ==========================================================================
   COMPONENTE COMPARTILHADO: trilha do Programa Internacional
   ==========================================================================

   Por que este componente existe
   ------------------------------
   Antes, cada página contava a formação em inglês de um jeito. Infantil e
   Anos Iniciais tinham uma `<ol class="trilha">` com UM único passo dentro de
   uma grade feita para uma sequência, e o texto desse passo era igual nas
   duas páginas, contradizendo o parágrafo logo acima. Anos Finais tinha a
   versão certa, com quatro etapas. Ensino Médio tinha só um parágrafo.

   Agora as quatro páginas usam esta mesma trilha, com as mesmas quatro
   etapas, e cada página marca a sua com `aria-current="step"`. Quem lê
   entende onde está e o que vem depois, sem a página precisar repetir o
   percurso inteiro em prosa.

   Como usar
   ---------
   <ol class="ti-trilha">
     <li class="ti-etapa" aria-current="step">   <- só na etapa da página
       <span class="ti-quando">Infantil ao 6º ano</span>
       <strong class="ti-nome">Programa Bilíngue</strong>
       <p class="ti-texto">...</p>
     </li>
     ...
   </ol>

   Para adaptar a outra escola: as cores saem de `--cor-ciano` e
   `--cor-tinta`, então trocar os tokens no `:root` troca a trilha inteira.
   -------------------------------------------------------------------------- */

.ti-trilha {
  display: grid;
  /* Colunas explícitas, não `auto-fit`. Com auto-fit as quatro etapas caíam
     como 3 + 1 sozinha na segunda linha, e a medida de linha do texto
     despencava para 18 caracteres. 1, 2 ou 4 colunas sempre fecham. */
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--espaco-3);
  margin: var(--espaco-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ti;
}

@media (min-width: 900px) {
  .ti-trilha { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Não existe quatro colunas aqui, e a conta explica por quê.
 *
 * O container tem 1180px. Em quatro colunas cada etapa fica com cerca de
 * 285px, e desses sobram 237px de texto depois do respiro interno. A medição
 * devolveu 24 caracteres por linha em seis linhas, contra os 45 que o
 * contrato pede para leitura. Para chegar a 45 caracteres em quatro colunas o
 * container precisaria de mais de 1800px, que não existe neste projeto.
 *
 * Em duas colunas cada etapa fica com cerca de 570px e a medida sobe para a
 * faixa de leitura. A sequência continua legível: são quatro etapas em duas
 * linhas, numeradas.
 *
 * Havia aqui uma regra de `repeat(4, 1fr)` a partir de 1040px. Ela saiu.
 */

.ti-etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--espaco-5) var(--espaco-5) var(--espaco-5);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
  background: var(--cor-branco);
  /* Cor declarada, nunca herdada. Dentro de uma faixa escura a etapa herdava
     branco e ficava branco sobre branco: contraste medido de 1:1. */
  color: var(--cor-tinta);
  counter-increment: ti;
}

/* Numeração vem do CSS, não do HTML: reordenar as etapas não obriga a
   renumerar na mão. */
.ti-etapa::before {
  content: counter(ti);
  display: grid;
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  border-radius: var(--raio-pill);
  background: var(--cor-tinta);
  color: var(--cor-branco);
  font-size: var(--texto--2);
  font-weight: 700;
  place-items: center;
}

.ti-quando {
  color: var(--cor-apoio);
  font-size: var(--texto--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ti-nome {
  font-size: var(--texto-2);
  line-height: 1.35;
}

.ti-texto {
  margin: 0;
  color: var(--cor-apoio);
  font-size: var(--texto--1);
  line-height: 1.5;
}

/* A etapa da página em que o leitor está. Fundo ciano com texto tinta mede
   7,16:1, bem acima de AA; branco sobre ciano mediria 2,54:1 e reprovaria. */
.ti-etapa[aria-current="step"] {
  /* Fundo tinta, não ciano: numa faixa que já é ciano o cartão desaparecia,
     com fundo idêntico ao da seção e borda transparente. Tinta contrasta
     sobre papel, sobre branco e sobre a faixa ciano. */
  border-color: transparent;
  background: var(--cor-tinta);
  color: var(--cor-branco);
}

.ti-etapa[aria-current="step"]::before { background: var(--cor-ciano); color: var(--cor-tinta); }

.ti-etapa[aria-current="step"]::after {
  content: "Você está aqui";
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: var(--raio-pill);
  background: var(--cor-ciano);
  color: var(--cor-tinta);
  font-size: var(--texto--2);
  font-weight: 700;
}

/* Dentro de uma faixa escura o cartão comum inverte, para não virar mancha
   branca no meio da faixa. */
.secx--tinta .ti-etapa,
.campo-escuro .ti-etapa,
.finals-support .ti-etapa {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 7%);
  color: inherit;
}

.secx--tinta .ti-etapa::before,
.campo-escuro .ti-etapa::before,
.finals-support .ti-etapa::before {
  background: var(--cor-ciano);
  color: var(--cor-tinta);
}

.secx--tinta .ti-etapa .ti-quando,
.secx--tinta .ti-etapa .ti-texto,
.campo-escuro .ti-etapa .ti-quando,
.campo-escuro .ti-etapa .ti-texto {
  color: rgb(255 255 255 / 78%);
}

/* ==========================================================================
   COMPONENTE COMPARTILHADO: diferenciais do segmento
   ==========================================================================

   Os diferenciais de cada etapa vêm do folder oficial do colégio. Este bloco
   existe para que as cinco páginas apresentem essa lista do mesmo jeito, em
   vez de cada uma inventar um formato.

   Estrutura mínima:
     <section class="dif-secao">
       <div class="container">
         <header class="dif-cabeca">…<h2>…</h2><p class="dif-lead">…</p></header>
         <ul class="dif-grade"><li class="dif-card">…</li></ul>
         <div class="dif-faixa">…</div>
       </div>
     </section>

   Para adaptar a outra escola: as cores saem dos tokens do `:root`. Trocar
   `--cor-ciano` e `--cor-tinta` troca o bloco inteiro, sem mexer aqui.
   -------------------------------------------------------------------------- */

.dif-secao {
  padding-block: var(--respiro-secao);
  background: var(--cor-papel);
}

.dif-cabeca {
  max-width: 46rem;
  margin-bottom: var(--espaco-7);
}

.dif-cabeca h2 {
  margin: var(--espaco-2) 0 var(--espaco-4);
  font-size: var(--texto-4);
  line-height: 1.1;
}

.dif-lead {
  margin: 0;
  color: var(--cor-apoio);
  font-size: var(--texto-1);
  line-height: 1.55;
}

.dif-grade {
  display: grid;
  /* Três cartões no desktop, um por linha no celular. `min(100%, 17rem)`
     impede que a coluna force estouro em 360px. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--espaco-4);
  margin: 0 0 var(--espaco-6);
  padding: 0;
  list-style: none;
}

.dif-card {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  /* `align-items: stretch` no grid pai já iguala a altura dos cartões da
     mesma linha; sem isso o bloco cai no defeito de cartões desiguais. */
  padding: var(--espaco-5);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
  background: var(--cor-branco);
}

.dif-tipo {
  margin: 0;
  color: var(--cor-ciano-texto);
  font-size: var(--texto--2);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dif-card h3 {
  margin: 0 0 var(--espaco-2);
  font-size: var(--texto-2);
  line-height: 1.2;
}

.dif-itens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.dif-itens li {
  position: relative;
  padding-left: 16px;
  color: var(--cor-apoio);
  font-size: var(--texto--1);
  line-height: 1.45;
}

/* Marcador desenhado no CSS: mantém o alinhamento do texto quando o item
   quebra em duas linhas, o que um `list-style` padrão não faz. */
.dif-itens li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-ciano);
}

.dif-faixa {
  margin-bottom: var(--espaco-4);
  padding: var(--espaco-6);
  border-radius: var(--raio-md);
  background: var(--cor-tinta);
  color: var(--cor-branco);
}

.dif-faixa h3 {
  margin: 0 0 var(--espaco-2);
  font-size: var(--texto-3);
  line-height: 1.15;
}

.dif-faixa-lead {
  margin: 0 0 var(--espaco-5);
  max-width: 46rem;
  color: rgb(255 255 255 / 80%);
  font-size: var(--texto-0);
  line-height: 1.55;
}

/* Variante clara, para quando duas faixas escuras ficariam encostadas. */
.dif-faixa--clara {
  border: 1px solid var(--cor-linha);
  background: var(--cor-branco);
  color: var(--cor-tinta);
}

.dif-chips {
  /* Bloco com filhos em linha, e não flex: são etiquetas de texto que
     quebram naturalmente, não cartões de uma grade. */
  margin: 0 0 var(--espaco-4);
  padding: 0;
  list-style: none;
  line-height: 2.4;
}

.dif-chips li {
  display: inline-block;
  margin-right: var(--espaco-2);
}

.dif-chips li {
  padding: 7px 14px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-pill);
  background: var(--cor-papel);
  /* A cor do texto é declarada AQUI de propósito.
     A etiqueta pinta o próprio fundo claro, mas herdava a cor do texto da
     faixa em volta. Dentro de `.dif-faixa--clara` isso dava tinta sobre papel
     e passava; dentro de `.dif-faixa`, que é escura, herdava BRANCO e a
     medição pegou 1,07:1, branco sobre #f7f7f2, ou seja etiqueta ilegível em
     quatro páginas. Quem pinta o próprio fundo precisa declarar a própria
     cor, senão o componente depende de onde foi colado. */
  color: var(--cor-tinta);
  font-size: var(--texto--1);
  font-weight: 700;
}

/* Informação restritiva fica aqui, no rodapé do bloco, e nunca perto do
   botão de contato. */
.dif-nota {
  margin: 0;
  color: var(--cor-apoio);
  font-size: var(--texto--1);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Provas visuais dentro do bloco de diferenciais.

   Duas fotos lado a lado no desktop, empilhadas no celular. A legenda diz o
   que a foto prova; sem isso a imagem vira enfeite.
   `aspect-ratio` fixo evita que a página pule enquanto a foto carrega.
   -------------------------------------------------------------------------- */
.dif-provas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--espaco-4);
  margin-top: var(--espaco-6);
}

.dif-prova {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
  background: var(--cor-branco);
}

.dif-prova img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.dif-prova figcaption {
  padding: var(--espaco-4) var(--espaco-5) var(--espaco-5);
  color: var(--cor-apoio);
  font-size: var(--texto--1);
  line-height: 1.5;
}

.dif-prova figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: var(--cor-tinta);
  font-size: var(--texto-0);
}

/* --------------------------------------------------------------------------
   Blindagem do componente contra o CSS da página que o hospeda.

   O Ensino Médio tem regras como `.international-teaser p { color: … }`, com
   especificidade 0,2,0, que venciam `.ti-texto` (0,1,0) e pintavam o texto de
   branco dentro do cartão branco: contraste medido de 1:1.

   Descer as declarações para `.ti-etapa .ti-*` empata a especificidade, e
   como sistema.css carrega depois, o componente ganha. Não é força bruta:
   é o componente declarando a própria cor em vez de torcer pela herança.
   -------------------------------------------------------------------------- */
.ti-etapa .ti-quando { color: var(--cor-apoio); }
.ti-etapa .ti-texto { color: var(--cor-apoio); }
.ti-etapa .ti-nome { color: var(--cor-tinta); line-height: 1.3; }

.ti-etapa[aria-current="step"] .ti-quando,
.ti-etapa[aria-current="step"] .ti-texto { color: rgb(255 255 255 / 80%); }
.ti-etapa[aria-current="step"] .ti-nome { color: var(--cor-branco); }

.secx--tinta .ti-etapa .ti-nome,
.campo-escuro .ti-etapa .ti-nome { color: var(--cor-branco); }

/* --------------------------------------------------------------------------
   Blindagem da faixa escura dos diferenciais.

   `.dif-faixa` tem fundo tinta e depende de herança para o texto claro. Mas
   uma regra direta do CSS do segmento, como `h3 { color: var(--ei-ink) }`,
   vence herança sempre, independentemente de especificidade. O resultado
   medido foi tinta sobre tinta, contraste de 1:1.

   Aqui cada papel declara a própria cor, em vez de torcer para herdar.
   -------------------------------------------------------------------------- */
.dif-faixa h3,
.dif-faixa strong { color: var(--cor-branco); }
.dif-faixa p,
.dif-faixa span { color: rgb(255 255 255 / 82%); }
.dif-faixa .dif-faixa-lead { color: rgb(255 255 255 / 82%); }

/* A variante clara volta ao contrário: tudo em tinta sobre branco. */
.dif-faixa--clara h3,
.dif-faixa--clara strong { color: var(--cor-tinta); }
.dif-faixa--clara p,
.dif-faixa--clara span,
.dif-faixa--clara .dif-faixa-lead { color: var(--cor-apoio); }
.dif-faixa--clara .dif-chips li { color: var(--cor-tinta); }

/* Cartão claro dentro de seção escura: cor declarada, não herdada. */
.dif-card h3 { color: var(--cor-tinta); }
.dif-card .dif-itens li { color: var(--cor-apoio); }

/* --------------------------------------------------------------------------
   Área de toque dos links de contato e de rodapé.

   A medição pegou 22 links com 31px de altura, entre eles telefone, WhatsApp,
   rota e redes sociais. No celular isso obriga a mirar. O piso é 44x44px.

   A altura mínima entra com `inline-flex` para que o link continue do
   tamanho do texto na horizontal e só cresça na vertical: assim o rodapé não
   vira uma coluna de blocos largos.
   -------------------------------------------------------------------------- */
.site-footer a,
.footer-address a,
.footer-social a,
.footer-brand a,
.contact-list a,
.unidade-card a,
.visita-faixa a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* Ícone social continua quadrado, e agora com o alvo inteiro clicável. */
.footer-social a {
  min-width: 44px;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Faixa escura de abertura encostando no hero.

   Hero e filme institucional são os dois escuros e ficavam a 10px um do
   outro, o que faz os dois lerem como um bloco só. O contrato pede pelo
   menos 24px entre blocos de mesmo fundo.
   -------------------------------------------------------------------------- */
.campaign-opening-film,
.hero-film {
  padding-block: var(--espaco-6) var(--respiro-secao);
}

/* ==========================================================================
   RITMO VERTICAL: um respiro só entre seções
   ==========================================================================

   Este é o defeito que aparece na tela como "espaçamento aleatório". A
   medição encontrava de 7 a 9 valores distintos de respiro entre seções na
   mesma página, porque cada seção declarava o próprio `padding-block`. O
   contrato admite no máximo 4.

   A regra abaixo dá a todas as seções de conteúdo o mesmo respiro, tirado do
   token `--respiro-secao`. Ficam de fora, com espaçamento próprio e
   justificado:

     .hero-campanha e .hero        abrem a página e ocupam a altura da tela
     .campaign-opening-film        faixa de vídeo colada ao hero, de propósito
     .hero-film                    idem
     .trilha-anglo                 faixa de fechamento, mais compacta

   A especificidade vem dos `:not()`, não de `!important`: assim uma página
   ainda consegue sobrescrever com uma regra mais específica quando houver
   motivo, e o motivo fica visível no CSS dela.
   -------------------------------------------------------------------------- */
main > section:not(.hero-campanha):not(.hero):not(.campaign-opening-film):not(.hero-film):not(.trilha-anglo) {
  padding-block: var(--respiro-secao);
}

/* --------------------------------------------------------------------------
   `segment-trail` é a mesma faixa que as outras páginas chamam de
   `trilha-anglo`. Enquanto os dois nomes convivem, pelo menos o respiro é o
   mesmo, para não quebrar o ritmo da página. A consolidação dos dois nomes
   num só está anotada em qa/INVENTARIO.md.
   -------------------------------------------------------------------------- */
.segment-trail {
  padding-block: var(--respiro-secao);
}

/* --------------------------------------------------------------------------
   Links de ação dentro de painéis, com área de toque.

   "Ver mais atividades" e semelhantes ficavam com 19px de altura. Mesma
   regra dos links de rodapé: cresce só na vertical.
   -------------------------------------------------------------------------- */
.stage-panel-actions a,
.dif-secao .dif-faixa a,
.carousel-heading a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* ==========================================================================
   VÉU ATRÁS DE TEXTO SOBRE FOTO
   ==========================================================================

   Texto claro sobre fotografia só é legível por sorte: depende do pixel que
   estiver atrás dele. Se a escola trocar a foto por outra mais clara, a
   legenda some. A medição encontrou 22 lugares assim.

   A solução é um gradiente próprio, escuro embaixo e transparente em cima,
   pintado entre a foto e o texto. O texto continua sobre a imagem, e a imagem
   continua visível: o véu só garante o piso de contraste.

   `--veu` fica no `:root` para que outra escola ajuste a intensidade num
   lugar só, sem procurar cada legenda.
   -------------------------------------------------------------------------- */
:root {
  --veu: linear-gradient(to top,
          rgb(16 22 31 / 88%) 0%,
          rgb(16 22 31 / 62%) 45%,
          rgb(16 22 31 / 0%) 100%);
}

/* O véu serve a legenda que fica DENTRO da imagem. A dos Anos Iniciais saiu
   de cima da foto e passou a ficar embaixo dela, com contraste próprio sobre
   o campo escuro da seção, então ela não entra mais nesta lista: um gradiente
   escuro sobre o próprio fundo escuro só faria uma mancha. */
.stage-panel-media figcaption,
.tiger-context-shot figcaption,
.finals-visit figure figcaption,
.video-card .card-copy {
  background-image: var(--veu);
}

/* Blocos de texto que ficam por cima do painel de imagem precisam do véu no
   bloco inteiro, e não só na faixa de baixo. */
.finals-panel-copy,
.finals-switcher--inquiry .finals-switch-status {
  position: relative;
}

.finals-panel-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -16px;
  border-radius: var(--raio-sm);
  background: rgb(16 22 31 / 62%);
}

/* Título de seção sobre imagem de fundo: sombra de texto resolve sem colocar
   uma caixa por cima da composição. */
#estrutura-titulo,
.estrutura-section h2 {
  text-shadow: 0 2px 14px rgb(16 22 31 / 78%);
}

/* --------------------------------------------------------------------------
   Entrelinha padrão de título.

   Os títulos de seção dos Anos Finais não declaravam entrelinha e herdavam
   1,65 do corpo do texto, o que num título grande fica visivelmente frouxo.
   Este é um padrão de especificidade zero: qualquer regra da página, por
   mais simples que seja, continua vencendo.
   -------------------------------------------------------------------------- */
:where(h1, h2, h3) {
  line-height: 1.15;
}

:where(h4, h5, h6) {
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Entrelinha de botão.

   Botões e abas herdavam 1,65 do corpo do texto, o que num rótulo de duas
   linhas fica solto e desalinha o centro vertical da caixa. Padrão de
   especificidade zero: qualquer regra da página continua vencendo.
   -------------------------------------------------------------------------- */
:where(button, .button, .hc-btn, .nav-cta, [role="tab"], [role="button"]) {
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Piso de área de toque para todo controle com cara de botão.

   Os que sobraram estavam entre 38 e 42px: perto, mas abaixo dos 44px que o
   dedo pede. `:where()` mantém a especificidade em zero, e `min-height` só
   cresce a caixa, nunca encolhe.

   Ficam de fora os controles de ícone que já têm dimensão própria e o botão
   de menu, que tem tamanho definido pelo desenho do header.
   -------------------------------------------------------------------------- */
:where(a.button, a[class*="btn"], .hc-btn, .nav-cta, [role="tab"], [role="button"]) {
  min-height: 44px;
}

:where(a.button, a[class*="btn"], .hc-btn, .nav-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Últimos pares de cor abaixo de AA, cada um com o fundo real medido.

   Nenhum destes muda a cor institucional. O que muda é o tom usado como
   texto sobre um fundo específico, que é onde a leitura falha.
   -------------------------------------------------------------------------- */

/* Destaque dentro do título, sobre papel claro.
   O ciano cheio mede 2,36:1; o ciano de texto mede 4,92:1. */
.secx:not(.secx--ciano):not(.secx--tinta) .secx-cabeca h2 b {
  color: var(--cor-ciano-texto);
}

/* Destaque dentro do título, sobre a faixa ciano.
   Branco sobre ciano mede 2,54:1; tinta sobre ciano mede 7,16:1. */
.secx--ciano .secx-cabeca h2 b {
  color: var(--cor-tinta);
}

/* Eyebrow dentro do cartão escuro do laboratório.
   O azul escuro mede 3,54:1 sobre a tinta; este tom mede 7,79:1. */
.enrichment-card--lab .eyebrow {
  color: #35b6e8;
}

/* Eyebrow amarelo sobre a faixa azul do Ensino Médio.
   Amarelo mede 4,12:1 ali; branco mede 5,58:1 no mesmo fundo. */
.international-teaser .medio-kicker,
.final-cta .eyebrow {
  color: var(--cor-branco);
}

/* --------------------------------------------------------------------------
   Cabeçalho de carrossel que não espreme o título.

   Em 390px o título dividia a linha com os dois botões de seta e sobrava
   cerca de 150px para ele: "Mais de 40 redações acima de 900 pontos em 2025"
   virava uma coluna de sete linhas. Com quebra permitida, o título ocupa a
   largura toda e os controles descem para a linha seguinte.
   -------------------------------------------------------------------------- */
.proof-heading {
  flex-wrap: wrap;
}

.proof-heading > :first-child {
  flex: 1 1 100%;
}

@media (min-width: 720px) {
  .proof-heading > :first-child { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Bloco de provas recolhido.

   Usado nas redações do Ensino Médio: o número já é a informação, e as artes
   ficam a um toque de distância em vez de empilhar um segundo trilho igual
   ao de cima.
   -------------------------------------------------------------------------- */
.proof-collapse {
  margin-top: var(--espaco-6);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-branco);
}

.proof-collapse-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--espaco-5) var(--espaco-6);
  cursor: pointer;
  list-style: none;
}

.proof-collapse-summary::-webkit-details-marker { display: none; }

.proof-collapse-title {
  font-size: var(--texto-3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* A dica de ação diz o que acontece ao abrir, e troca de texto quando abre. */
.proof-collapse-dica {
  margin-top: var(--espaco-2);
  color: var(--cor-ciano-texto);
  font-size: var(--texto--1);
  font-weight: 700;
}

.proof-collapse-dica::after { content: " ▾"; }
.proof-collapse[open] .proof-collapse-dica::after { content: " ▴"; }
.proof-collapse[open] .proof-collapse-dica { font-size: 0; }
.proof-collapse[open] .proof-collapse-dica::before {
  content: "recolher";
  font-size: var(--texto--1);
}

.proof-collapse .proof-track {
  padding: 0 var(--espaco-6) var(--espaco-6);
}

/* ==========================================================================
   RODAPÉ COMPARTILHADO
   ==========================================================================

   Antes desta camada a medição encontrou, no MESMO bloco: três cores de fundo
   (#10161f, #06111b, #071019), cinco grades de coluna diferentes e altura
   variando de 263px a 443px entre as cinco páginas.

   O HTML do rodapé agora é idêntico nas cinco (só muda a linha que nomeia o
   segmento) e todo o estilo dele mora aqui. Como `sistema.css` carrega depois
   do CSS de cada página, estas regras vencem as locais na mesma
   especificidade, sem precisar de `!important`.

   Para adaptar a outra escola: o fundo sai de `--cor-tinta` e o destaque sai
   de `--cor-ciano`. Trocar os dois tokens no `:root` troca o rodapé inteiro.
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--cor-tinta);
  /* Cor sólida, não branco com alfa: alfa sobre fundo variável foi uma das
     causas de as cinco páginas terem contraste diferente no mesmo texto.
     #c8d2dc sobre #10161f mede 11,3:1. */
  color: #c8d2dc;
  padding-block: var(--respiro-secao) var(--espaco-5);
}

.site-footer .footer-grid {
  display: grid;
  gap: var(--espaco-7) var(--espaco-6);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Duas colunas quando cabem duas colunas de texto sem apertar a medida. */
@media (min-width: 600px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}

/* A marca ocupa mais largura porque leva a assinatura em duas linhas. */
@media (min-width: 960px) {
  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
  }
  .site-footer .footer-brand { grid-column: auto; }
}

.site-footer .footer-brand img {
  display: block;
  width: min(220px, 100%);
  height: auto;
  /* Infantil e Anos Iniciais desenhavam uma placa branca atrás do logo, porque
     usavam a versão colorida da marca sobre fundo escuro. Com a versão branca
     do lockup, essa placa deixaria o logo invisível: branco sobre branco. Os
     zeros abaixo desligam a placa nas cinco páginas. */
  padding: 0;
  background: none;
  border-radius: 0;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   As colunas do rodapé são pilhas verticais, e cada página resolvia isso de um
   jeito diferente. A medição pegou `.footer-social` com 48px numa página (os
   quatro links em linha), 132px em outra e 236px numa terceira, com o MESMO
   HTML dentro. Declarar a pilha aqui encerra a divergência.
   -------------------------------------------------------------------------- */
.site-footer .footer-address,
.site-footer .footer-social {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.site-footer .footer-brand p {
  margin: var(--espaco-4) 0 0;
  font-size: var(--texto--1);
  line-height: 1.55;
  max-width: 34ch;
}

.site-footer .footer-address strong,
.site-footer .footer-social strong {
  display: block;
  margin-bottom: var(--espaco-3);
  color: var(--cor-branco);
  font-size: var(--texto-0);
  font-weight: 700;
  line-height: 1.3;
}

.site-footer .footer-address p {
  margin: 0 0 var(--espaco-3);
  font-size: var(--texto--1);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Links do rodapé.

   `display: flex` com altura mínima resolve o alvo de toque sem inventar
   espaçamento: o link cresce para os 44px pedidos pela diretriz e o texto
   continua centrado dentro dele. Antes eram links em linha de 17px de altura.
   -------------------------------------------------------------------------- */
.site-footer .footer-address a,
.site-footer .footer-social a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #e8eef4;
  font-size: var(--texto--1);
  line-height: 1.35;
  text-decoration: none;
}

.site-footer .footer-address a:hover,
.site-footer .footer-social a:hover,
.site-footer .footer-address a:focus-visible,
.site-footer .footer-social a:focus-visible {
  color: var(--cor-branco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer .footer-bottom {
  margin-top: var(--espaco-7);
  padding-top: var(--espaco-5);
  border-top: 1px solid rgb(255 255 255 / 14%);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-6);
  justify-content: space-between;
}

.site-footer .footer-bottom p {
  margin: 0;
  font-size: var(--texto--2);
  line-height: 1.5;
  color: #b3c0cc; /* 8,4:1 sobre #10161f */
}

/* --------------------------------------------------------------------------
   Alvos de toque que a medição ainda pegava curtos.

   Todos abaixo dos 44px pedidos pela diretriz, medidos em 390px:
     a.brand (logo do header)     178 x 38    infantil, iniciais, bilíngue
     #site-nav > a                 93 x 38,9  bilíngue
     .partner-row a               180 x 42,1  bilíngue
     .direct-contacts p > a       314 x 43,9  bilíngue

   Os quatro casos são links de texto que só precisam de caixa mais alta. O
   padrão aqui é o mesmo já usado no rodapé: a caixa cresce na vertical e o
   texto continua centrado dentro dela. Nada muda de tamanho visual.
   -------------------------------------------------------------------------- */
.site-header a.brand,
.site-nav > a,
.partner-row > a,
.direct-contacts p > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Faixa de destaque: respiro menor no celular.

   Com 32px de respiro de cada lado, sobravam 291px para o texto numa tela de
   390px e a medida caía para 25 a 27 caracteres por linha, abaixo dos 28 que o
   contrato aceita no celular. O respiro grande é bonito no desktop e come a
   linha no celular.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .dif-faixa { padding: var(--espaco-5) var(--espaco-4); }
}

/* --------------------------------------------------------------------------
   Título dos blocos que aparecem em mais de uma página.

   Medido em 360px: o título do FAQ com 42,9px nos Anos Finais e 35,1px na
   Bilíngue; o da chamada final com 42,9px nos Anos Finais e 35,2px no Ensino
   Médio. É o mesmo bloco, e quem abre duas páginas vê dois sistemas.

   A causa era cada página ter a própria fórmula: os Anos Finais usavam
   `clamp(2.05rem, 11vw, 3.15rem)` no celular, com 11vw de inclinação, contra
   `4.8vw` do Ensino Médio. Aqui os dois passam a usar o degrau
   `--texto-5` da escala, que é o mesmo nas cinco páginas.
   -------------------------------------------------------------------------- */
.faq-section h2,
.final-cta h2 {
  font-size: var(--texto-5);
  line-height: 1.05;
}

/* Prova visual solta, fora da grade de duas colunas do `.dif-provas`.
   Usada quando a seção tem uma foto só. */
.international-prova {
  margin: var(--espaco-6) 0 var(--espaco-5);
  max-width: 720px;
}

/* ==========================================================================
   PROGRAMA INTERNACIONAL — identidade Mizzou

   A cor institucional informada pela escola é #f1b830. Ela entra como campo
   de cor e acento; sobre esse fundo, a leitura usa tinta escura.
   ========================================================================== */
:root {
  --cor-internacional: #f1b830;
  --cor-internacional-viva: #f1b830;
  --cor-internacional-clara: #fff1c7;
  --cor-mu-dourado: #f1b830;
}

.dif-faixa--internacional {
  background: var(--cor-internacional);
  color: #14181d;
}

.dif-faixa--internacional h3,
.dif-faixa--internacional strong { color: #14181d; }

/* A etapa internacional em destaque usa a mesma assinatura laranja das
   faixas Middle e High School. O seletor combina o estado e a variação para
   vencer o fundo tinta do cartão atual sem depender de força bruta. */
.ti-etapa[aria-current="step"].dif-faixa--internacional {
  background: #14181d;
  color: #fff;
}

.ti-etapa[aria-current="step"].dif-faixa--internacional .ti-nome,
.ti-etapa[aria-current="step"].dif-faixa--internacional .ti-quando,
.ti-etapa[aria-current="step"].dif-faixa--internacional .ti-texto {
  color: #fff;
}

.ti-etapa[aria-current="step"].dif-faixa--internacional::before,
.ti-etapa[aria-current="step"].dif-faixa--internacional::after {
  background: #14181d;
  color: #fff;
}

/* Texto corrido usa tinta escura para manter contraste sobre o dourado. */
.dif-faixa--internacional p,
.dif-faixa--internacional span,
.dif-faixa--internacional .dif-faixa-lead { color: #2c3035; }

.dif-faixa--internacional .dif-detalhes span { color: #14181d; }

/* As páginas de segmento têm regras mais específicas para seus cabeçalhos.
   Estas variações mantêm todo o texto escuro sobre o campo dourado. */
section.dif-faixa--internacional .eyebrow,
section.dif-faixa--internacional .finals-heading > p:last-child,
section.dif-faixa--internacional h2 { color: #14181d; }

/* Chips escuros criam contraste e evitam dourado sobre dourado. */
.dif-faixa--internacional .dif-chips li {
  background: #14181d;
  color: #fff;
  border-color: #14181d;
}

.dif-faixa--internacional .dif-detalhes li {
  border-left-color: var(--cor-mu-dourado);
}


/* ==========================================================================
   TÍTULO NÃO EMPURRA A PÁGINA

   Medido na página institucional a 360 px: o h2 "Duas unidades em
   Pindamonhangaba." tinha scrollWidth 359 contra clientWidth 325, e a página
   inteira passava a rolar na horizontal (scrollWidth 376 contra 360). Um
   substantivo próprio de 16 letras não cabe em 325 px na escala de display.

   `break-word` só age quando a palavra realmente não cabe, então títulos
   normais continuam sem hifenização.
   ========================================================================== */
h1, h2, h3, h4,
.hc-titulo, .section-heading h2 { overflow-wrap: break-word; }

/* Papel global compartilhado: o título de material mantém a mesma hierarquia
   nas páginas em que o bloco aparece, sem apagar a personalidade da seção. */
#material h2 {
  font-size: var(--texto-5);
  line-height: 1.05;
}

/* ==========================================================================
   TRILHA DE SEGMENTOS (.trilha-anglo): o bloco que faz as páginas conversarem

   Antes, cada LP era uma ilha. Uma família que chegava na Educação Infantil
   não tinha como descobrir que existe Anos Iniciais depois, nem que o
   Programa Internacional atravessa tudo. Isso custa navegação, SEO interno
   e, principalmente, matrícula: quem tem dois filhos de idades diferentes
   não via a escola inteira.

   O bloco mostra a trajetória completa, marca onde a pessoa está e leva para
   as outras. A etapa atual não é link, é um estado.

   Por que mora aqui e não no CSS de cada página: estava copiado dentro do
   `secoes.css` de quatro páginas e do `refinement.css` da Internacional, e o
   Ensino Médio sequer carrega o `secoes.css`. A trilha entrava lá sem estilo
   nenhum, com os três spans em linha, sobrepostos, e alvo de toque de 15px.
   Bloco compartilhado mora na camada compartilhada.
   ========================================================================== */
/* Trilha de segmentos: continuidade escolar e estado atual da página. */
.trilha-anglo {
  --t-tinta: var(--seg-ink, var(--ai-ink, var(--ei-ink, #10161f)));
  --t-ciano: var(--seg-cyan, var(--ai-cyan, var(--ei-cyan, #00aeed)));
  --t-linha: rgb(255 255 255 / 16%);
  /* O respiro é o da página, não um clamp próprio. O valor local dava 88px
     onde as outras seções davam 89,6px, e a página passava a ter cinco
     ritmos verticais distintos contra os quatro do contrato. */
  padding-block: var(--respiro-secao);
  color: #fff;
  background: var(--t-tinta);
}
.trilha-anglo-cabeca {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.trilha-anglo-cabeca p {
  margin: 0 0 10px;
  color: var(--t-ciano);
  font-size: var(--texto--2);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.trilha-anglo-cabeca h2 {
  /* A faixa é escura e a cor vem por herança. Uma regra `h2` direta do CSS
     do segmento vencia a herança e deixava o título na cor do fundo. */
  color: inherit;
  margin: 0;
  font-size: var(--texto-5);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.02;
  text-wrap: balance;
}
.trilha-anglo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 12px;
  align-items: stretch;
}
/* As etapas são sempre quatro, nas cinco páginas: Infantil, Anos Iniciais,
   Anos Finais e Ensino Médio. O `auto-fit` não sabe disso e abria seis
   trilhos de 187px dentro do container de 1180px, então as quatro etapas
   ocupavam quatro e sobravam dois vazios à direita do Ensino Médio. Medido em
   1440px: última etapa terminando em x=914 num container que vai até 1310. */
@media (min-width: 860px) {
  .trilha-anglo-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trilha-etapa {
  display: flex;
  min-height: 100%;
  padding: 20px 18px 22px;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  border: 1px solid var(--t-linha);
  border-radius: 16px;
  background: rgb(255 255 255 / 5%);
  text-decoration: none;
  transition: background-color .22s ease, transform .22s ease, border-color .22s ease;
}
a.trilha-etapa:hover,
a.trilha-etapa:focus-visible {
  border-color: var(--t-ciano);
  background: rgb(255 255 255 / 11%);
  transform: translateY(-3px);
}
.trilha-etapa-idade {
  color: var(--t-ciano);
  font-size: var(--texto--2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trilha-etapa-nome {
  font-size: var(--texto-0);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
}
.trilha-etapa-linha {
  margin-top: auto;
  padding-top: 10px;
  color: rgb(255 255 255 / 68%);
  font-size: var(--texto--2);
  line-height: 1.45;
}
.trilha-etapa--atual {
  color: #04212c;
  border-color: transparent;
  background: var(--t-ciano);
}
.trilha-etapa--atual .trilha-etapa-idade,
.trilha-etapa--atual .trilha-etapa-linha { color: #04384a; }
.trilha-etapa--atual .trilha-etapa-aqui {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 10px;
  color: #fff;
  border-radius: 999px;
  background: #04212c;
  font-size: var(--texto--2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trilha-etapa--internacional {
  grid-column: 1 / -1;
  min-height: 0;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  border-color: var(--t-ciano);
  background: rgb(0 174 237 / 12%);
}
.trilha-etapa--internacional .trilha-etapa-idade,
.trilha-etapa--internacional .trilha-etapa-nome { margin: 0; }
.trilha-etapa--internacional .trilha-etapa-linha { margin-left: auto; }
@media (max-width: 680px) {
  .trilha-etapa--internacional { align-items: flex-start; flex-direction: column; }
  .trilha-etapa--internacional .trilha-etapa-linha { margin-left: 0; }
}
.trilha-anglo-nota {
  max-width: 46rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  color: rgb(255 255 255 / 62%);
  font-size: var(--texto--1);
  line-height: 1.6;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  a.trilha-etapa:hover,
  a.trilha-etapa:focus-visible { transform: none; }
}


/* --------------------------------------------------------------------------
   Medida de leitura da linha de apoio da seção.

   Medido em 768px: `#integral .section-intro` nos Anos Iniciais devolvia 88
   caracteres por linha, contra o teto de 85 do contrato. O cabeçalho da seção
   tem 44rem e, nessa largura, a linha de apoio ocupa tudo. O texto não é longo
   demais: a coluna é que é larga demais para uma linha de apoio.
   -------------------------------------------------------------------------- */
.section-intro {
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Texto só para leitor de tela.

   A classe era declarada em duas páginas e usada em três. Na Educação Infantil
   não havia declaração nenhuma, então o `<output aria-live>` do passeio pelos
   espaços renderizava como um bloco de 731x29 de texto cinza visível abaixo
   das abas: "Espaço 1 de 6: Sala e ateliê". Utilitário de acessibilidade é da
   camada global.

   Sem `!important`: este arquivo carrega depois do CSS de segmento, então a
   regra vence por ordem. Se alguma página precisar de `!important` aqui, o
   problema está na regra de lá.
   -------------------------------------------------------------------------- */
.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fundação: alvos medidos, navegação completa e distância real do cabeçalho. */
html { scroll-padding-top: 0; }
main [id], :where(a,button,input,select,textarea,summary):focus {
  scroll-margin-top: var(--header-clearance, 140px);
}
.site-nav a, .cta-unidade a, .international-copy a, .international-link,
main p > a, .contact-info a, .hc-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid #0072a8;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #fff;
}
.contact-action {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  vertical-align: middle;
}
.contact-hours {
  display: block;
  max-width: 38ch;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}
.site-header .contact-hours { max-width: 28ch; }
.site-header .contact-action:has(.header-cta) { margin-left: auto; }
.site-footer .contact-action { display: flex; }
.site-footer .contact-hours { color: #b3c0cc; }
.site-nav { max-height: calc(100dvh - var(--header-clearance)); overflow-y: auto; }
@media (min-width: 1101px) {
  .site-header .header-inner { flex-wrap: wrap; gap: 4px 24px; padding-block: 8px; }
  .site-header .site-nav { order: 3; flex-basis: 100%; margin: 0; }
  .site-header .site-nav, .site-header .site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
  .site-header .site-nav li { margin: 0; }
}
@media (max-width: 1100px) {
  .site-header .contact-action:has(.header-cta) { display: none; }
  .site-header .site-nav { overscroll-behavior: contain; }
}
.whatsapp-float.is-media-context { visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}
.site-footer .footer-brand > a { display: inline-flex; align-items: center; min-height: 44px; color: #b3c0cc; }
.hc-acoes:has(> .contact-action), .hero-actions:has(> .contact-action) { align-items: flex-start; }
.js [data-reveal]:focus-within, .js [data-surge]:focus-within { opacity: 1; transform: none; visibility: visible; transition: none; }
html[data-foundation] main [id] { scroll-margin-top: var(--header-clearance, 170px); }
/* Video em tela cheia nativa: os cards inline forcam aspect-ratio e
   object-fit:cover para preencher o quadro do card (correto ali). Sem esta
   regra, o mesmo object-fit:cover persiste quando o elemento video entra em
   tela cheia via requestFullscreen/controle nativo, e um video vertical
   aparece cortado, zoom no meio do quadro, dentro de uma caixa paisagem.
   Aqui a caixa some (o video ocupa a tela inteira, 100% x 100%) e o
   conteudo aparece inteiro, com barras pretas nas laterais quando vertical. */
video:fullscreen,
:fullscreen video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #000;
}
video:-webkit-full-screen,
:-webkit-full-screen video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #000;
}
.glightbox-container .gslide-image img {
  object-fit: contain !important;
}
a.media-lightbox-trigger {
  display: contents;
}
a.glightbox.media-lightbox-trigger {
  display: block;
  width: 100%;
}
a.glightbox.media-lightbox-trigger:focus-visible {
  outline: 3px solid #0072a8;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #fff;
}
a.media-lightbox-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}
a.media-lightbox-trigger:focus-visible img {
  outline: 3px solid #0072a8;
  outline-offset: 4px;
}

/* ==========================================================================
   Integração com o site anglopinda.com.br (06/11/2026).

   Quem chega numa LP pelo menu do site precisa conseguir voltar e trocar de
   etapa sem depender do botão "voltar" do navegador. A barra fica ANTES do
   cabeçalho, no fluxo: aparece no topo e sai ao rolar, então o cabeçalho
   fixo continua com a mesma altura e a folga das âncoras não muda.
   Os links são HTML estático de propósito: buscadores e IAs seguem esses
   links para entender as seis páginas como um só site.
   ========================================================================== */
.site-barra {
  background: var(--cor-tinta);
  color: #c8d2dc; /* 11,3:1 sobre #10161f */
  font-size: var(--texto--1);
  line-height: 1.2;
}

.site-barra-inner {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  width: min(100% - (var(--gutter) * 2), var(--largura-container-larga));
  margin-inline: auto;
}

.site-barra ul {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.site-barra a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 10px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.site-barra .site-barra-inicio {
  gap: 6px;
  padding-left: 0;
  color: var(--cor-branco);
  font-weight: 700;
}

.site-barra .site-barra-inicio { flex: none; }
.site-barra .site-barra-inicio svg { flex: none; }

.site-barra a:hover,
.site-barra a:focus-visible {
  color: var(--cor-branco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-barra a:focus-visible {
  outline-color: var(--cor-ciano);
  outline-offset: -3px;
  box-shadow: none;
}

.site-barra a[aria-current="page"] {
  color: var(--cor-branco);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--cor-ciano);
}

/* Abaixo de 1200px os nove links não cabem numa linha: a lista vira uma
   faixa que rola na horizontal, com o "Início" sempre visível à esquerda. */
@media (max-width: 1199px) {
  .site-barra-inner { gap: var(--espaco-2); }
  .site-barra ul {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .site-barra ul::-webkit-scrollbar { display: none; }
  .site-barra .site-barra-inicio {
    padding-right: var(--espaco-3);
    border-right: 1px solid rgb(255 255 255 / 18%);
  }
}

@media print { .site-barra { display: none; } }

/* Coluna "Site" no rodapé: mesmo desenho das colunas de endereço e redes. */
.site-footer .footer-site strong {
  display: block;
  margin-bottom: var(--espaco-3);
  color: var(--cor-branco);
  font-size: var(--texto-0);
  font-weight: 700;
  line-height: 1.3;
}

.site-footer .footer-site ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--espaco-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-site a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #e8eef4;
  font-size: var(--texto--1);
  line-height: 1.35;
  text-decoration: none;
}

.site-footer .footer-site a:hover,
.site-footer .footer-site a:focus-visible,
.site-footer .footer-site a[aria-current="page"] {
  color: var(--cor-branco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A partir de 600px a coluna vira uma faixa inteira no fim do rodapé, com
   a lista em 3 e depois 4 colunas: onze links numa coluna só ficariam
   mais altos que as unidades. */
@media (min-width: 600px) {
  .site-footer .footer-site {
    grid-column: 1 / -1;
    order: 1;
    padding-top: var(--espaco-4);
    border-top: 1px solid rgb(255 255 255 / 12%);
  }
  .site-footer .footer-site ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .site-footer .footer-site ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}