/* ==========================================================================
   Conheça o Anglo Pinda — blocos exclusivos desta página.

   Só entra aqui o que não existe em sistema.css nem em site.css. Todo valor de
   cor, espaço, tipo, raio e sombra vem de token do sistema: se um número
   aparecer solto abaixo, é bug de contrato, não licença poética.

   Ordem de carga: site.css → hero-campanha.css → sistema.css → este arquivo.
   Por isso aqui não precisa de !important em lugar nenhum.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Galeria de espaços
   -------------------------------------------------------------------------- */
.espacos-secao {
  padding-block: var(--respiro-secao);
  background: var(--cor-papel);
}

/* Hierarquia da seção: h2 é a escola, este h3 é o par de unidades, e cada
   unidade traz um h4. Antes o "Duas unidades em Pindamonhangaba" era uma
   frase perdida dentro do parágrafo de apoio do cabeçalho. */
.unidades-titulo {
  margin: 0;
  font-size: var(--texto-3);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.unidades-lead {
  max-width: 60ch;
  margin: var(--espaco-3) 0 var(--espaco-7);
  color: var(--cor-apoio);
  font-size: var(--texto-0);
}

.unidade + .unidade {
  margin-top: var(--espaco-9);
}

/* Grade de duas trilhas, não flex com quebra: com `flex-wrap` o botão "Abrir
   rota" caía para a linha de baixo só na Unidade 2, porque o título dela é
   mais comprido, e as duas unidades ficavam com cabeçalhos diferentes. */
.unidade-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--espaco-5);
  padding-bottom: var(--espaco-5);
  margin-bottom: var(--espaco-6);
  border-bottom: 2px solid var(--cor-linha);
}

@media (max-width: 700px) {
  .unidade-cabeca {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

.unidade-selo {
  margin: 0;
  color: var(--cor-ciano-texto);
  font-size: var(--texto--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.unidade-cabeca :is(h3, h4) {
  margin: var(--espaco-2) 0 0;
  font-size: var(--texto-4);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.unidade-endereco {
  margin: var(--espaco-3) 0 0;
  max-width: 46ch;
  color: var(--cor-apoio);
  font-size: var(--texto-0);
}

/* auto-fit com mínimo de 260px: a grade vai de 1 a 3 colunas sozinha, sem
   breakpoint escrito à mão, e nenhuma célula fica menor que a legenda pede. */
.espaco-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espaco-5);
}

.espaco-galeria:not(.is-expanded) .espaco-item:nth-child(n + 9) {
  display: none;
}

.galeria-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: var(--espaco-6) auto 0;
  padding: var(--espaco-3) var(--espaco-5);
  border: 2px solid var(--cor-tinta);
  border-radius: 999px;
  color: var(--cor-tinta);
  background: transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.galeria-toggle:hover,
.galeria-toggle:focus-visible {
  color: var(--cor-branco);
  background: var(--cor-tinta);
}

.espaco-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio-sm);
  background: var(--cor-tinta);
  box-shadow: var(--sombra-sm);
}

.espaco-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}

.espaco-item:hover img,
.espaco-item:focus-within img {
  transform: scale(1.04);
}

/* A legenda tem fundo próprio porque fica sobre foto: sem ele o contraste
   depende do que a imagem tiver naquele canto, e isso não é medível. */
.espaco-item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--espaco-6) var(--espaco-4) var(--espaco-3);
  background: linear-gradient(transparent, rgb(16 22 31 / 88%) 55%);
  color: var(--cor-branco);
  font-size: var(--texto--1);
  font-weight: 700;
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  .espaco-item img { transition: none; }
  .espaco-item:hover img,
  .espaco-item:focus-within img { transform: none; }
}

@media (max-width: 599px) {
  .espaco-galeria:not(.is-expanded) .espaco-item:nth-child(n + 7) {
    display: none;
  }

  .galeria-toggle {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Segmentos
   -------------------------------------------------------------------------- */
.segmentos-secao {
  padding-block: var(--respiro-secao);
  background: var(--cor-branco);
}

.segmento-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--espaco-5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.segmento-card {
  display: flex;
}

.segmento-card > a {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-branco);
  color: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.segmento-card > a:hover,
.segmento-card > a:focus-visible {
  border-color: var(--cor-ciano);
  box-shadow: var(--sombra-sm);
  transform: translateY(-3px);
}

.segmento-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.segmento-card > a > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--espaco-5);
}

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

.segmento-card h3 {
  margin: var(--espaco-2) 0 var(--espaco-3);
  font-size: var(--texto-2);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.segmento-card p:not(.segmento-etapa) {
  margin: 0;
  color: var(--cor-apoio);
  font-size: var(--texto-0);
  line-height: 1.6;
}

.segmento-link {
  /* Medido a 1440px: com margem fixa os quatro "Ver a página" caíam em
     y=6089, 6109, 6117 e 6137, 48px de desalinho em cartões de 451px
     todos terminando na mesma linha. O link fecha o cartão, então desce. */
  margin-top: auto;
  padding-top: var(--espaco-5);
  color: var(--cor-ciano-texto);
  font-size: var(--texto--1);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .segmento-card > a { transition: none; }
  .segmento-card > a:hover,
  .segmento-card > a:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   Como chegar
   -------------------------------------------------------------------------- */
.mapa-secao {
  padding-block: var(--respiro-secao);
  background: var(--cor-branco);
}

.mapa-grade {
  display: grid;
  /* O `min()` é o que segura o piso quando a tela é menor que ele. A 320px o
     contêiner tem 284px de largura e o `minmax(320px, 1fr)` cru forçava uma
     trilha de 320: os dois cartões de mapa saíam 36px para fora e o documento
     ia a scrollWidth 338. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--espaco-6);
}

.mapa-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-branco);
}

.mapa-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.mapa-card figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-5);
}

.mapa-card strong {
  font-size: var(--texto-2);
  letter-spacing: -.03em;
}

.mapa-card span {
  color: var(--cor-apoio);
  font-size: var(--texto-0);
}

.mapa-card a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--cor-ciano-texto);
  font-size: var(--texto-0);
  font-weight: 700;
}

.mapa-card small {
  margin-top: var(--espaco-2);
  color: var(--cor-apoio);
  font-size: var(--texto--2);
}

/* --------------------------------------------------------------------------
   Herói institucional

   Nas cinco páginas de segmento o ciano marca o verbo ("Questionar",
   "Interpretar"). Aqui o título é a própria assinatura da campanha, e na peça
   oficial quem está em ciano é "Anglo Pinda!". A troca é só de cor, feita no
   escopo do herói desta página, sem tocar no componente compartilhado.
   -------------------------------------------------------------------------- */
.hero-campanha--institucional .hc-verbo { color: var(--cor-branco); }
.hero-campanha--institucional .hc-anglo { color: var(--cor-ciano); }

/* --------------------------------------------------------------------------
   Programa Internacional
   -------------------------------------------------------------------------- */
.internacional-secao {
  padding-block: var(--respiro-secao);
  background: var(--cor-tinta);
  color: var(--cor-branco);
}

.internacional-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(var(--espaco-6), 5vw, var(--espaco-8));
}

.eyebrow--light { color: var(--cor-amarelo); }

.internacional-copy h2 {
  margin: var(--espaco-3) 0 var(--espaco-5);
  max-width: 18ch;
  font-size: var(--texto-4);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.internacional-copy > p {
  max-width: 52ch;
  margin: 0;
  color: #c8d2dc;
  font-size: var(--texto-0);
  line-height: 1.65;
}

.internacional-etapas {
  display: grid;
  /* Duas por linha: a coluna de texto do bloco internacional não comporta
     três, e com três o quarto item ficava sozinho. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-4);
  padding: 0;
  margin: var(--espaco-6) 0;
  list-style: none;
}

.internacional-etapas li {
  padding-left: var(--espaco-4);
  border-left: 3px solid var(--cor-amarelo);
  color: #c8d2dc;
  font-size: var(--texto--1);
  line-height: 1.45;
}

.internacional-etapas strong {
  display: block;
  color: var(--cor-branco);
  font-size: var(--texto-0);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.internacional-foto {
  margin: 0;
}

.internacional-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
}

.internacional-foto figcaption {
  margin-top: var(--espaco-3);
  /* --cor-apoio mede 3,67:1 sobre --cor-tinta e reprova em AA. */
  color: #c8d2dc;
  font-size: var(--texto--1);
}

@media (max-width: 899px) {
  .internacional-grid { grid-template-columns: minmax(0, 1fr); }
  .internacional-copy h2 { max-width: none; }
}

@media (max-width: 560px) {
  #instalacoes .section-heading > p:last-child { font-size: var(--texto-0); }
}

/* ==========================================================================
   Órfãos de última linha

   `auto-fit` resolvia em três colunas em parte da faixa de larguras, e as
   listas de quatro itens ficavam 3 + 1. Quatro itens pedem uma linha de
   quatro ou duas de dois, nunca três e um.
   ========================================================================== */
@media (min-width: 640px) and (max-width: 1095px) {
  .segmento-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .internacional-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1096px) {
  .segmento-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A galeria tem 19 e 22 fotos. Em três colunas as duas terminam com um item
   sozinho; em quatro, sobram três e duas. */
@media (min-width: 1000px) {
  .espaco-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   BOTÃO COM ÍCONE

   `.button--light` era usado no HTML e não existia em folha nenhuma, e
   `.button svg` também não: a seta do CTA final saía como um triângulo preto
   de 85x85 (o `path` é geometria de traço e o padrão do SVG é preencher), o
   rótulo quebrava em três linhas e o botão media 227x115 contra os 56px de
   altura mínima do contrato. O Ensino Médio já tinha estas regras no site.css
   dele; aqui elas faltavam.
   ========================================================================== */
.button svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button--light {
  color: var(--cor-tinta);
  background: var(--cor-branco);
  box-shadow: none;
}

.button--light:hover,
.button--light:focus-visible {
  color: var(--cor-tinta);
  background: var(--cor-amarelo);
}

/* ==========================================================================
   ÍCONES

   Os três cartões de diferenciais eram texto puro. Um traço só, 24x24,
   `currentColor`, para a página ter uma linguagem de ícone em vez de um ícone
   por caso. O `.trust-icone` saiu junto com a faixa de dados.
   ========================================================================== */
.dif-icone svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O nome engana: `--cor-ciano-fundo` (#007bb8) é fundo para texto branco, não
   tinta clara. Com o traço em `--cor-ciano-texto` (#0072a8) por cima, os três
   ícones saíam como discos cianos de contraste 1,1:1, ilegíveis. A tinta é
   feita do próprio token, para o ciano continuar tendo uma fonte só. */
.dif-icone {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espaco-4);
  border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--cor-ciano) 12%, var(--cor-branco));
  color: var(--cor-ciano-texto);
}

.dif-icone svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   FILME DA CAMPANHA

   O filme entrava como uma laje de vídeo nu: `<video controls>` de 1376x774
   sem título, sem legenda e sem o `<track>` que carregasse o
   campanha-final.pt-BR.vtt que já estava na pasta.
   ========================================================================== */
/* O título "A escola em 57 segundos" e a nota de legenda saíram por pedido do
   usuário, e nada entrou no lugar: título explicativo genérico não resolve o
   problema, repete ele. Sobrou só o quadro do vídeo, em caixa estreita. Ver o
   comentário da seção no `index.html`. */

/* ==========================================================================
   PLATAFORMA DIGITAL ANGLO

   Mesmo cartão dos Anos Iniciais. Aqui a plataforma aparecia só como item de
   lista, sem prova nenhuma.
   ========================================================================== */
.plataforma-card {
  display: grid;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  background: var(--cor-branco);
  box-shadow: 0 10px 30px rgba(16, 22, 31, .05);
  gap: 1.5rem;
  grid-template-columns: 1fr;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.plataforma-card:hover {
  border-color: rgba(0, 194, 209, .4);
  box-shadow: 0 16px 40px rgba(16, 22, 31, .08);
  transform: translateY(-3px);
}

.plataforma-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: .5rem;
  color: var(--cor-ciano-texto);
  font-size: var(--texto--1);
  font-weight: 700;
  gap: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plataforma-titulo {
  margin: 0 0 .75rem;
  color: var(--cor-tinta);
  font-size: var(--texto-2);
  font-weight: 700;
  line-height: 1.25;
}

.plataforma-texto {
  max-width: 62ch;
  margin: 0;
  color: var(--cor-apoio);
  font-size: var(--texto-0);
  line-height: 1.6;
}

.plataforma-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plataforma-visual img {
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 190px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .08));
  object-fit: contain;
  transition: transform var(--transicao);
}

.plataforma-card:hover .plataforma-visual img {
  transform: scale(1.05) translateY(-2px);
}

@media (min-width: 900px) {
  .plataforma-card { grid-template-columns: 1fr 220px; gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .plataforma-card,
  .plataforma-visual img { transition: none; }
  .plataforma-card:hover { transform: none; }
  .plataforma-card:hover .plataforma-visual img { transform: none; }
}

/* Foto dentro do cartão de diferencial: a seção era três listas de texto. */
.dif-card-foto { margin: var(--espaco-4) 0; }
.dif-card-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}
.dif-card-foto figcaption {
  margin-top: var(--espaco-2);
  color: var(--cor-apoio);
  font-size: var(--texto--2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Duvidas

   O componente nao existia neste arquivo porque a pagina nao tinha secao de
   duvidas. Mesma receita visual das outras cinco paginas (cartao com borda,
   "+"/"-" no summary, cor de destaque na borda quando aberto), remontada com
   os tokens que este arquivo ja usa em .dif-card e .mapa-card, sem nenhuma
   cor, raio ou sombra novos.
   -------------------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.faq-list {
  display: grid;
  gap: var(--espaco-3);
}
.faq-list details {
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
  background: var(--cor-branco);
  overflow: hidden;
}
.faq-list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--espaco-4) 56px var(--espaco-4) var(--espaco-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: var(--espaco-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--texto-2);
  color: var(--cor-ciano-texto);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details[open] { border-color: var(--cor-ciano); }
.faq-list details p {
  margin: 0;
  padding: 0 var(--espaco-5) var(--espaco-5);
  color: var(--cor-apoio);
}
@media (max-width: 1099px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--espaco-6); }
}