/* ====================================================================
   Colégio Cathedral — estilo do site
   --------------------------------------------------------------------
   Sem estilo embutido no HTML: style-src roda sem 'unsafe-inline'.

   O site nasceu sem JavaScript nenhum (script-src 'none'). Desde
   15/09/2026 a CSP aceita 'self', por causa do normativo e do blog, que
   são alimentados pelo Painel Cathedral — mas só as páginas deles
   carregam script. Todo o resto continua funcionando sem uma linha:
   o menu não abre, a sanfona é <details> nativo, e nenhum layout depende
   de script para se montar.

   O repertório visual usual de site de colégio (hero em vídeo, carrossel
   de programas, mega-menu, parallax) continua fora. O mesmo efeito é
   buscado por outros meios: tipografia com contraste de personalidade,
   ritmo vertical largo, e uma cor de marca usada com parcimônia.

   A página de manutenção continua com o css/manutencao.css dela, intacto.
   Este arquivo não a toca.
   ==================================================================== */

:root {

  /* ================================================================
     COR
     ================================================================ */

  /* ---- verde: a cor da marca --------------------------------------
     Os mesmos tokens do site da Faculdade, para as duas marcas ficarem
     reconhecíveis como a mesma instituição. */
  --green-marca:  #00A859;  /* a cor exata da logo e do favicon.
                               DECORATIVA: branco sobre ela dá ~2,6:1 e
                               reprova em texto. Nunca por baixo de letra. */
  --green-600:    #008046;  /* branco sobre ele = 5,03:1 · AA — é este que
                               carrega texto. Mesma matiz, outra luminosidade. */
  --green-700:    #00663a;
  --green-dark:   #31512d;  /* 8,95:1 com texto branco */
  --green-darker: #1f3a1c;
  --green-light:  #eaf4ed;  /* levemente mais quente que o #e8f5ee do www2,
                               para não brigar com o papel quente do fundo */

  /* ---- azul: a segunda cor do logotipo ---------------------------
     Estava quase sem uso. Passa a marcar o que é institucional e de
     apoio (Fundamental II, foco, informação de sistema), enquanto o
     verde fica com o que é ação e identidade. Duas cores com papel
     definido leem melhor que duas cores alternadas por gosto. */
  --blue-marca: #3D89BE;    /* decorativa — branco sobre ela dá 3,80:1 */
  --blue-600:   #33729F;    /* branco sobre ele = 5,19:1 · AA */
  --blue-700:   #285A7D;
  --blue-light: #eaf2f8;

  /* ---- ciano: a cor do hero de O Colégio ---------------------------
     ENTROU EM 18/09/2026, com o mockup que o cliente mandou (Homepage.pdf
     e O Colégio.pdf), para o cabeçalho E para o hero de O Colégio. No
     mesmo dia o cabeçalho voltou a ser papel com letra escura, a pedido,
     para ficar igual nas onze páginas — o ciano ficou só no hero.

     ⚠️ CONTRASTE, o que sobrou dele: branco sobre --cyan-marca dá 2,94:1,
     e reprova em texto (AA pede 4,5:1). Saiu do menu junto com a faixa,
     mas continua no hero de O Colégio, onde o degradê ainda clareia até
     --cyan-claro atrás do título branco (perto de 2,3:1, pior ponto). A
     cor está aqui como o cliente desenhou; --cyan-700 é o mesmo ciano no
     degrau que passa (5,15:1), para a troca ser de uma linha se o
     Colégio aprovar. Ver a pendência no LEIA-ME.md. */
  --cyan-marca: #02A3CF;    /* o tom fechado do degradê do hero */
  --cyan-claro: #8DE6FF;    /* o centro do degradê do hero de O Colégio */
  --cyan-700:   #00769F;    /* branco sobre ele = 5,15:1 · AA — a saída */

  /* O verde do título do hero da home, tirado do mockup. É mais azulado
     que o --green-700 (#00663a) e por isso não reaproveita o token — veio
     assim do mockup, que tinha a faixa ciano em cima e puxava o título
     para o mesmo lado. A faixa saiu em 18/09/2026; o tom ficou, porque é
     o do mockup e funciona sozinho. Sobre branco dá 6,07:1 · AA. */
  --green-hero: #116f5e;

  /* ---- a paleta é VERDE E AZUL, e só ---------------------------------
     Chegou a entrar um âmbar aqui, para dar a variação quente que as duas
     referências do cliente usam. Saiu no mesmo dia, a pedido: as cores da
     marca são verde e azul.

     A variação passa a vir de PROFUNDIDADE, não de matiz: tinta clara
     para fundo, tom médio para elemento, tom escuro para cartão com texto
     branco. Três degraus de cada cor dão três tratamentos distintos sem
     inventar uma quarta cor. */
  --blue-wash: #dce8f3;     /* azul um degrau mais fundo que o --blue-light */

  /* ---- neutros ----------------------------------------------------
     O fundo saiu do cinza-azulado (#f7f9fb) para um papel quente. A
     pesquisa sobre escolha de escola é consistente: a família avalia
     primeiro se o lugar é acolhedor e seguro, e só depois o prático.
     Neutro frio comunica clínica e banco; neutro quente comunica papel,
     sala, gente. É a mudança de menor custo e maior efeito percebido.

     --ink e --muted ficaram como estavam, já verificados. Sobre o papel
     quente, --muted dá 5,13:1 (era 5,44:1 no branco): continua AA. */
  --ink:    #1e2a24;        /* 13,9:1 sobre o papel */
  --muted:  #5f6d65;        /* 5,13:1 sobre o papel — é o piso do texto de
                               apoio; não clarear mais que isto */
  --border: #e6e3dc;        /* separador decorativo, na temperatura do papel */
  --border-strong: #7c8b82; /* limite de controle — 3,58:1 (WCAG não-texto) */
  --white:  #ffffff;
  --bg:     #faf8f4;        /* papel */

  /* ================================================================
     TIPOGRAFIA
     ----------------------------------------------------------------
     Duas famílias, com papéis separados:

     Fredoka (arredondada) nos títulos. Jost (geométrica) no corpo.

     ⚠️ MUDOU EM 15/09/2026. Os títulos eram Spectral, uma serifada
     escolhida para ecoar a capitular romana do logotipo. O argumento era
     bom e continua verdadeiro — mas o brief mudou: o cliente pediu uma
     parte gráfica mais infantil e trouxe duas referências do mesmo
     mercado, Adventista (Montserrat) e Claretiano (Poppins). As duas
     usam sem serifa geométrica, nenhuma usa serifada.

     Serifada lê tradição e autoridade; num colégio que começa no 1º ano
     do Fundamental, com criança de 6 anos, ela envelhece a marca.

     Fredoka e não Poppins/Montserrat de propósito: arredondada, ela
     carrega o tom lúdico que o brief pede E contrasta com a Jost do
     corpo, que é geométrica de terminação reta. Copiar a fonte das
     referências entregaria um site parecido com o dos concorrentes.

     Escala modular, e não tamanhos escolhidos um a um: com clamp, cada
     degrau cresce junto com a tela sem precisar de @media para cada
     título.
     ================================================================ */

  --fonte-titulo: "Fredoka", "Jost", "Segoe UI", system-ui, sans-serif;
  --fonte-texto:  "Jost", "Segoe UI", system-ui, sans-serif;

  --texto-xs:   .8125rem;                        /* 13px — rótulo, olho */
  --texto-sm:   .9375rem;                        /* 15px — apoio, nota */
  --texto-base: 1.0625rem;                       /* 17px — corpo */
  --texto-lg:   1.1875rem;                       /* 19px — corpo destacado */
  --texto-xl:   clamp(1.25rem, 1.6vw, 1.4375rem);/* h3 de cartão */
  --texto-2xl:  clamp(1.5rem, 2.4vw, 1.875rem);  /* h3 de seção */
  --texto-3xl:  clamp(1.875rem, 3.6vw, 2.75rem); /* h2 */
  --texto-4xl:  clamp(2.375rem, 5.4vw, 3.75rem); /* h1 */

  /* ================================================================
     ESPAÇO
     ----------------------------------------------------------------
     Escala de 8px (com um degrau de 4px no começo). Antes os espaços
     eram escolhidos um a um em rem, e o ritmo vertical variava de seção
     para seção sem motivo — é o tipo de coisa que não se percebe como
     defeito, só como "não parece profissional".
     ================================================================ */

  --space-1: .25rem;   /*  4 */
  --space-2: .5rem;    /*  8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---- medidas ---------------------------------------------------- */
  --largura: 1180px;
  --respiro: var(--space-5);
  --measure: 66ch;          /* 60–75 caracteres por linha */

  /* Cantos generosos. Eram .75rem e 1.25rem; as duas referências do
     cliente trabalham entre 12 e 30px, mais pílula. Canto redondo é o
     jeito mais barato de uma interface parecer acolhedora — e o que
     separa "escola" de "banco". */
  --raio:        1rem;
  --raio-grande: 1.75rem;
  --raio-pilula: 999px;
  /* O arco: canto de cima totalmente redondo, cúpula. É o gesto que o
     site da Adventista usa nas imagens (border-radius: 100% 100% 0 0) e
     o que mais rende ali — lê como janela, porta, escola. */
  --raio-arco:   100% 100% var(--raio) var(--raio) / 34% 34% var(--raio) var(--raio);

  /* Escala de elevação, em três degraus — e não uma sombra por
     componente. Cartão parado, cartão sob o cursor, e o que flutua. */
  --sombra-1: 0 1px 2px rgba(31, 42, 36, .04), 0 2px 8px rgba(31, 42, 36, .04);
  --sombra-2: 0 2px 4px rgba(31, 42, 36, .05), 0 12px 28px rgba(31, 42, 36, .07);
  --sombra-3: 0 4px 8px rgba(31, 42, 36, .06), 0 24px 48px rgba(31, 42, 36, .10);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* O cabeçalho gruda no topo a partir de 62rem; sem isto uma âncora
     para no topo da tela e o título fica escondido atrás dele. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

img, svg { max-width: 100%; }
img { height: auto; }

/* Títulos na serifada. `text-wrap: balance` evita a última linha
   sozinha — é progressivo: onde o navegador não entende, a quebra
   continua natural. */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); }
a:hover { color: var(--green-600); }

/* Um foco visível e igual em tudo. Num site sem JavaScript o teclado é a
   única navegação alternativa que existe — se o foco some, some o site. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---- utilidades ----------------------------------------------------- */

.interno {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--respiro);
}

/* Some da tela, continua no leitor de tela. */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--respiro);
  top: -100%;
  z-index: 100;
  background: var(--white);
  color: var(--green-700);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: var(--sombra-3);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: 0; }

/* ====================================================================
   Marcador de rascunho
   --------------------------------------------------------------------
   Tudo que é suposição nossa e precisa de confirmação do Colégio aparece
   assim. O publicar-colegio.sh RECUSA publicar qualquer página que
   contenha "A CONFIRMAR" — texto provisório não chega ao ar por
   esquecimento.

   Ficou mais discreto do que era: continua impossível de não ver, mas
   não sequestra mais a leitura da página inteira. Com 94 marcas, o
   amarelo pesado virava o próprio design.
   ==================================================================== */

.pendente {
  display: inline-block;
  background: #fdf3d7;
  color: #6b4e00;           /* 8,1:1 sobre o amarelo */
  border-bottom: 2px solid #d9b64e;
  border-radius: 3px;
  padding: 0 .35em;
  font-family: var(--fonte-texto);
  font-size: .9375em;
}

/* ====================================================================
   Cabeçalho
   ==================================================================== */

/* No celular o cabeçalho NÃO gruda: ele ocupa duas ou três linhas lá, e
   preso no topo comeria quase 20% de uma tela de 812px o tempo todo.
   Acima de 62rem cabe numa linha só, com ~60px, e aí grudar compensa. */
/* UM cabeçalho só, igual nas onze páginas.
   --------------------------------------------------------------------
   Entre 15 e 18/09/2026 houve uma faixa ciano cheia aqui, com a logo
   branca, e `colegio.html` ficou de fora dela — o hero daquela página é
   uma faixa ciano inteira, e ciano sobre ciano apagava o limite entre
   navegar e ler. A exceção resolvia aquela página e criava outro
   problema: quem vinha de "O Colégio" via o cabeçalho trocar de cor, de
   logo e de tratamento no meio da navegação.

   Em 18/09/2026 a exceção virou a regra, a pedido: fundo papel
   translúcido, filete embaixo, logo original (`logo-colegio.svg`, a
   colorida) e os verdes da marca no menu e no botão — em toda página.

   ⚠️ Sobre hero claro (todas menos "O Colégio"), o que separa o
   cabeçalho do conteúdo é o FILETE, não a cor. Remover o
   `border-bottom` daqui funde os dois. */
.cabecalho {
  z-index: 50;
  background: rgba(250, 248, 244, .94);
  border-bottom: 1px solid var(--border);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
}

.cabecalho__marca  { order: 1; margin-right: auto; display: flex; }
.cabecalho__acesso { order: 2; }
.menu              { order: 3; flex-basis: 100%; }

.cabecalho__marca img {
  width: clamp(142px, 34vw, 180px);
  height: auto;
  display: block;
}

/* O "Acesso acadêmico" é de contorno — é a tarefa de quem já é da escola
   e não pode competir com a matrícula. */
.cabecalho__acesso.botao--contorno {
  color: var(--green-700);
  border-color: var(--green-600);
}
.cabecalho__acesso.botao--contorno:hover {
  background: var(--green-light);
  color: var(--green-700);
}

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

/* Alvo de toque: no celular cada link do menu passa de ~28px para ~45px
   de altura. A régua confortável de toque é 44px; a mínima da WCAG 2.2
   é 24px. Estava passando raspando na mínima e reprovando na
   confortável — num menu que é a única navegação do site. */
.menu__lista a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--texto-sm);
  border-bottom: 2px solid transparent;
}

.menu__lista a:hover { color: var(--green-700); border-bottom-color: var(--border); }

/* A página em que se está. aria-current é o que o leitor de tela
   anuncia; a sublinha verde é a mesma informação para quem enxerga. */
.menu__lista a[aria-current="page"] {
  color: var(--green-700);
  border-bottom-color: var(--green-marca);
}

/* ---- o sanduíche e a gaveta do celular — 18/09/2026 ----------------
   ⚠️ TUDO AQUI DEPENDE DE `.com-script` NO <html>, e isso é a regra que
   sustenta o desenho: quem está sem JavaScript não recebe nenhuma destas
   regras e continua vendo o menu de sempre, com os sete links visíveis
   em duas linhas. A gaveta é a MESMA <nav class="menu"> — nada é
   duplicado na marcação. Ver js/menu.js. */
.cabecalho__sanduiche {
  display: none;
  order: 2;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--green-600);
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--green-700);
  cursor: pointer;
}
.cabecalho__sanduiche:hover { background: var(--green-light); }

/* Criadas pelo script. Sem ele não existem — e, se existissem, não
   apareceriam. */
.menu__topo,
.menu__acoes { display: none; }

@media (max-width: 61.999rem) {
  .com-script .cabecalho__sanduiche { display: flex; }

  /* Gaveta: entra pela direita, ocupa a tela e fica sobre o cabeçalho.
     `visibility` acompanha o `transform` com atraso para que ela suma de
     verdade do caminho do Tab quando fechada — só `translateX` deixaria
     os links focáveis fora da tela. */
  .com-script .menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-basis: auto;
    overflow-y: auto;
    padding: 0 var(--space-5) var(--space-6);
    background: var(--green-darker);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .24s ease-out, visibility 0s linear .24s;
  }
  .com-script .menu--aberto {
    transform: translateX(0);
    visibility: visible;
    transition: transform .24s ease-out, visibility 0s;
  }

  .com-script .menu__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .com-script .menu__marca { width: 142px; height: auto; display: block; }
  .com-script .menu__fechar {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--raio-pilula);
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }
  .com-script .menu__fechar:hover { background: rgba(255, 255, 255, .12); }

  /* Um link por linha, com filete separando: é lista de navegação, e não
     mais a faixa que quebrava em duas linhas. */
  .com-script .menu__lista { display: block; }
  .com-script .menu__lista li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
  .com-script .menu__lista a {
    padding: var(--space-4) 0;
    font-size: var(--texto-base);
    color: var(--white);
    border-bottom: 0;
  }
  .com-script .menu__lista a:hover { color: var(--white); text-decoration: underline; }
  /* Sobre o verde-escuro o verde da marca não se distingue; a página
     atual é marcada pelo peso e por uma barra à esquerda. */
  .com-script .menu__lista a[aria-current="page"] {
    color: var(--white);
    font-weight: 700;
    border-bottom: 0;
    box-shadow: inset 3px 0 0 var(--green-marca);
    padding-left: var(--space-4);
  }

  .com-script .menu__acoes {
    display: block;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  /* O "Acesso acadêmico" vem para cá no celular (js/menu.js move o
     próprio botão, não uma cópia). Sobre o verde-escuro o contorno verde
     sumiria, então aqui ele é branco — o mesmo tratamento do rodapé. */
  .com-script .menu__acoes .cabecalho__acesso.botao--contorno {
    display: block;
    text-align: center;
    color: var(--white);
    border-color: rgba(255, 255, 255, .6);
  }
  .com-script .menu__acoes .cabecalho__acesso.botao--contorno:hover {
    background: var(--white);
    color: var(--green-700);
  }
}

@media (min-width: 62rem) {
  .cabecalho { position: sticky; top: 0; }

  /* O desfoque só entra aqui, junto com o `sticky`: ele existe porque o
     fundo é translúcido e o conteúdo passa por baixo ao rolar. No
     celular o cabeçalho não gruda, nada passa por baixo dele, e a
     camada de composição sairia de graça para ninguém. */
  .cabecalho { backdrop-filter: blur(8px); }
  .cabecalho__marca  { margin-right: 0; }
  .menu              { order: 2; flex-basis: auto; margin-inline: auto; }
  .cabecalho__acesso { order: 3; }
  .menu__lista a     { padding: var(--space-3) 0; font-size: var(--texto-base); }

  /* 24px em cima e embaixo, e não 12: são os 116px de altura do mockup,
     com a logo de 68px no meio. A folga veio com a faixa ciano e ficou
     depois dela — com o aperto de antes o cabeçalho lia como friso. No
     celular continua com 12: lá ele ocupa três linhas. */
  .cabecalho__interno { padding-block: var(--space-5); }
}

/* Faixa estreita do desktop: menu mais justo — 28/09/2026.
   Com o oitavo item (Calendário), logo + menu + "Acesso acadêmico" só
   cabiam numa linha a partir de ~1105px; abaixo disso o botão caía para
   baixo da logo e o cabeçalho ia de 117px para 163px — num iPad deitado
   (1024px), por exemplo. Com sete itens a quebra já existia entre 992 e
   999px. Aqui, entre 62 e 72rem, o espaço entre os links cai de 24 para
   12px e a letra de 17 para 15px: tudo cabe a partir dos 992px.

   As duas pontas foram medidas COM a barra de rolagem (15px no Windows),
   que a media query não desconta: aos 992px sobram ~17px; aos 1152px o
   menu do mockup volta com ~30px de folga. Acima de 72rem fica o menu do
   mockup, intacto. */
@media (min-width: 62rem) and (max-width: 71.999rem) {
  .menu__lista   { gap: 0 var(--space-3); }
  .menu__lista a { font-size: var(--texto-sm); }
}

/* ====================================================================
   Botões
   --------------------------------------------------------------------
   UM primário por tela. O botão cheio é reservado para a ação que a
   página quer que aconteça — quase sempre matrícula ou contato.

   O "Acesso acadêmico" do cabeçalho passou a ser de contorno. Ele é a
   tarefa de quem JÁ é da escola; enquanto era o único botão cheio do
   site, tinha o maior peso visual de todas as páginas e competia com a
   matrícula, que é o que a família em decisão veio fazer.
   ==================================================================== */

.botao {
  display: inline-block;
  padding: .875rem var(--space-6);
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--green-600);   /* e não o verde exato da marca: é este
                                     que carrega texto branco em AA */
  color: var(--white);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.botao:hover {
  background: var(--green-700);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--sombra-2);
}
.botao:active { transform: none; box-shadow: none; }

.botao--contorno {
  background: transparent;
  color: var(--green-700);
  border-color: var(--green-600);
}
.botao--contorno:hover {
  background: var(--green-light);
  color: var(--green-700);
  box-shadow: none;
}

.botao--claro { background: var(--white); color: var(--green-700); }
.botao--claro:hover { background: var(--green-light); color: var(--green-700); }

.botao--pequeno { padding: .5rem var(--space-4); font-size: var(--texto-sm); }

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ====================================================================
   Faixas (seções)
   ==================================================================== */

/* 48px no celular, 64px no computador — e não 96px. Com 96px de cada
   lado sobravam 192px de branco entre uma seção e a seguinte, e a
   página inteira ficava frouxa. É a mesma medida que o site da
   Faculdade adotou no ajuste registrado no README-UX.md. */
.faixa { padding-block: clamp(var(--space-7), 6vw, var(--space-8)); }
.faixa--alt   { background: var(--white); }
.faixa--verde { background: var(--green-light); }

.secao-cabeca {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-7));
}
.secao-cabeca--centro { margin-inline: auto; text-align: center; }

/* O "olho" é o rótulo pequeno acima do título. Fica na sem serifa, em
   caixa alta e com entreletra aberta: é o contraste com a serifada do
   título que faz os dois lerem como coisas diferentes, e não como um
   título em dois tamanhos. */
.olho {
  display: block;
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: var(--space-3);
}

.secao-cabeca h2 { font-size: var(--texto-3xl); }
.secao-cabeca p  { color: var(--muted); font-size: var(--texto-lg); }

/* ====================================================================
   Hero
   --------------------------------------------------------------------
   Duas colunas a partir de 64rem: texto à esquerda, imagem à direita.
   A foto do hero é o elemento de maior peso de um site de colégio — é
   dela que a família tira a primeira impressão de "é acolhedor?". O
   espaço está reservado no formato final; o Colégio fornece a imagem
   depois e ela entra sem mexer no resto.
   ==================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(170deg, var(--green-light) 0%, var(--bg) 78%);
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}

/* A estrela do logotipo como marca-d'água. Não precisa de aria-hidden:
   é background, então não existe para o leitor de tela. */
.hero::after {
  content: "";
  position: absolute;
  top: -18%;
  left: 62%;
  width: clamp(280px, 40vw, 520px);
  aspect-ratio: 99 / 114;
  background: url("../assets/estrela.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}

.hero__interno { position: relative; z-index: 1; }

/* O limite de largura vai nos FILHOS, não neste elemento: ele carrega
   também a classe .interno, que tem max-width e `margin-inline: auto`.
   Um max-width menor aqui vencia por vir depois no arquivo, e o `auto`
   passava a centrar a caixa estreita — o título do hero nascia a 265px
   da borda enquanto a logo do cabeçalho ficava em 97px. */
.hero__interno > * { max-width: 44rem; }

.hero__titulo {
  font-size: var(--texto-4xl);
  font-weight: 700;
  letter-spacing: -.025em;
  margin-bottom: var(--space-5);
}

.hero__texto {
  font-size: var(--texto-lg);
  color: var(--muted);
  max-width: var(--measure);
}

/* Duas colunas SÓ onde existe imagem (hoje, a home): a home ganha o
   espaço reservado da foto à direita; as páginas internas seguem numa
   coluna. Sem o modificador, uma página sem imagem abriria uma segunda
   coluna vazia e o texto ficaria comprimido à esquerda sem motivo. */
/* No celular a foto do hero sai. Empilhada acima do texto ela empurraria
   título e botões para fora da primeira tela; abaixo deles, ninguém a vê.
   A primeira tela do celular tem uma tarefa só: dizer o que é a escola e
   levar à matrícula. */
.hero__midia { display: none; }

@media (min-width: 64rem) {
  .hero__midia { display: block; }

  .hero--midia .hero__interno {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-8);
    align-items: center;
  }
  .hero--midia .hero__interno > * { max-width: none; }
  .hero--midia .hero__texto-bloco > * { max-width: 34rem; }
  .hero::after { opacity: .04; }
}

/* ====================================================================
   Hero com arte — 18/09/2026
   --------------------------------------------------------------------
   O Colégio mandou as três imagens que faltavam, já recortadas e com o
   fundo dissolvido em transparência na esquerda e embaixo. É por isso
   que elas entram soltas, sem moldura e sem o `.midia` com arco: a
   própria imagem termina em nada, e qualquer caixa em volta brigaria com
   esse acabamento.

   As medidas vêm do mockup (Homepage.pdf / O Colégio.pdf), que foi
   desenhado numa tela de 1920px. Estão em porcentagem para acompanharem
   a largura em vez de valerem só naquela tela:

     home      arte com 58,7% da largura, hero com 847px de altura
     O Colégio arte com 68,1% da largura, hero com 771px de altura

   A arte é decorativa e não carrega informação: entra com alt vazio e
   fora do alcance do cursor.
   ==================================================================== */

/* No celular a arte ENTRA, empilhada embaixo do texto e de margem a
   margem. Ela não pode ficar atrás do texto como no computador: numa
   coluna só, o título passaria por cima das crianças.

   Embaixo e não em cima do texto: acima, empurraria título e botões para
   fora da primeira tela — a primeira tela do celular tem uma tarefa só,
   dizer o que é a escola e levar à matrícula. A imagem se dissolve em
   transparência no pé, então ela termina no fundo do hero sem borda. */
.hero__arte {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-6);
  pointer-events: none;
}

@media (min-width: 64rem) {
  .hero__arte {
    position: absolute;
    top: 0;
    height: 100%;
    margin-top: 0;

    /* A largura é a do mockup, em porcentagem — e é ela que MANDA. A
       primeira versão media a arte pela altura do hero (`width: auto`), e
       isso quebrava entre 1024 e 1150px: ali o texto quebra em mais linhas,
       o hero cresce, e a arte crescia junto até a borda esquerda dela
       alcançar o parágrafo. O `contain` mantém a proporção dentro da
       largura fixa e encosta a imagem no topo à direita; se sobrar altura,
       sobra embaixo — onde a arte já se dissolve em transparência e
       ninguém vê falta.

       O teto em pixel é o tamanho que ela tem no mockup: passando disso a
       imagem só perderia definição, porque o arquivo não tem mais pixel
       para dar. */
    width: min(58.7%, 1128px);
    object-fit: contain;
    object-position: top right;

    /* Ancorada na CAIXA de texto, não na borda da janela.
       No mockup (tela de 1920, caixa de 1180) a arte sangra 370px além da
       borda direita do texto — e até 1920 isso dá no mesmo que encostar na
       janela. Acima disso, não: a caixa continua com 1180px no meio da tela
       e a arte ia sozinha para o canto, abrindo um vão entre ela e o texto.
       Ancorando na caixa, a composição inteira continua centrada.

       A sangria é variável porque o hero de Segmentos tem DOIS planos com
       recuos diferentes: a fachada encosta na borda (370px) e o recorte
       dos três estudantes para 65px antes (305px). */
    right: max(0px, calc((100% - var(--largura)) / 2 - var(--arte-sangria, 370px)));
  }
}

/* ---- home ---------------------------------------------------------
   O hero deixou de ser faixa verde cheia com letra branca. Agora é
   branco, e quem carrega a cor é a foto. A altura mínima é a da arte
   (847/1920 = 44vw): sem ela o hero encolheria até o tamanho do texto e
   a foto, que acompanha essa altura, ficaria pequena demais. */
/* Coluna, e não linha: no celular a arte é o segundo item e desce para
   baixo do texto. No computador ela sai do fluxo (absoluta) e sobra um
   item só, que o `justify-content` centra na altura. */
.hero--arte {
  background: var(--white);
  min-height: min(44vw, 53rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(var(--space-7), 6vw, var(--space-8));
}

/* Sem a estrela d'água: quem ocupa o lado direito agora é a foto. */
.hero--arte::after { display: none; }

.hero--arte .hero__titulo { color: var(--green-hero); }

/* A faixa verde rente ao pé do hero. No mockup ela tem 36px de altura e
   36px de raio em cima — altura igual ao raio, então os cantos fecham
   redondos e ela lê como uma aba, não como uma barra. Fica ATRÁS da
   arte, como no mockup: as pernas das crianças passam por cima dela. */
.hero--arte::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* 1700px na tela de 1920 do mockup — 260px de sangria para cada lado da
     caixa de texto. O teto mantém essa relação em tela maior, pela mesma
     razão da arte: sem ele a faixa esticaria sozinha e a composição
     deixaria de ser centrada. */
  width: min(88.5%, 1700px);
  height: 2.25rem;
  background: var(--green-marca);
  border-radius: 2.25rem 2.25rem 0 0;
}

@media (min-width: 64rem) {
  /* A mesma medida de linha do hero de duas colunas: sem isto o título
     se esticaria até 44rem e deixaria de quebrar em três linhas. */
  .hero--arte .hero__texto-bloco > * { max-width: 34rem; }
}

/* ---- O Colégio ----------------------------------------------------
   Degradê radial do mesmo ciano do cabeçalho, com o claro no canto de
   cima à esquerda — atrás do título — e o tom cheio fechando embaixo e
   à direita. É a elipse do mockup: raio de 62,6% nos dois eixos.

   Aqui a arte é mais alta que o hero de propósito: ela desce 211px além
   do pé da faixa e o `overflow: hidden` do `.hero` corta. É o que põe a
   fachada grande atrás do texto em vez de espremida no canto. */
/* O tamanho da elipse sai por variável: cada mockup abriu o brilho de um
   jeito, e a conta é sempre a mesma — o raio do degradê dividido pela
   medida do hero. Em O Colégio deu 62,6%; em Segmentos, 92,6%. */
.hero--ciano {
  background: radial-gradient(ellipse var(--hero-brilho, 62.6%) var(--hero-brilho, 62.6%)
                              at left top,
                              var(--cyan-claro), var(--cyan-marca));
  min-height: var(--hero-altura, min(40vw, 48rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--ciano::after { display: none; }

.hero--ciano .olho,
.hero--ciano .hero__titulo { color: var(--white); }
.hero--ciano .hero__texto  { color: rgba(255, 255, 255, .94); }

@media (min-width: 64rem) {
  .hero--ciano .hero__arte { width: min(68.1%, 1308px); }
}

/* ---- Segmentos: dois planos de arte no mesmo hero — 24/09/2026 ------
   O mockup de Segmentos usa a mesma faixa ciano de O Colégio, mais baixa
   (628px na tela de 1920 do desenho, contra 771px lá) e com o brilho bem
   mais aberto, e põe DOIS planos nela:

     fundo    a mesma fachada de `colegio.html`, encostada na borda
     frente   o recorte dos três estudantes, parando 65px antes

   A fachada reaproveita o arquivo em vez de ganhar um igual com outro
   nome: no mockup é a mesma imagem, e duplicar custaria 364KB para o
   visitante baixar duas vezes o mesmo prédio. */
.hero--ciano-largo {
  --hero-brilho: 92.6%;
  --hero-altura: min(32.7vw, 39.25rem);
}

@media (min-width: 64rem) {
  /* O recorte: 771px de largura no desenho de 1920 = 40,2%, e o teto é o
     tamanho real do arquivo. Ancorado no PÉ, e não no topo como as outras
     artes — são três pessoas de pé, e alinhadas pelo topo elas flutuariam
     sempre que o hero ficasse mais alto que a proporção do mockup. */
  .hero--ciano-largo .hero__arte {
    width: min(40.2%, 771px);
    object-position: bottom right;
    --arte-sangria: 305px;
  }

  .hero--ciano-largo .hero__arte--fundo {
    width: min(68.1%, 1308px);
    object-position: top right;
    --arte-sangria: 370px;
  }

  /* O texto encurta para não encostar nos estudantes. No desenho de 1920
     ele tem 44rem e passa raspando — mas a arte anda para a esquerda mais
     depressa que o texto encolhe, e por volta de 1100px o título já
     entrava por cima da menina da esquerda (a tinta dela começa a 4,7% da
     largura do arquivo, não na borda). Dois degraus resolvem sem apertar
     a linha onde não precisa. */
  .hero--ciano-largo .hero__interno > * { max-width: 34rem; }
}

@media (min-width: 80rem) {
  .hero--ciano-largo .hero__interno > * { max-width: 42rem; }
}

/* ---- Estrutura — 24/09/2026 ----------------------------------------
   A terceira faixa ciano, e a mais baixa das três: 458px na tela de 1920
   do mockup, porque o texto é curto. A arte tem 51,6% da largura e, na
   proporção do arquivo, fica mais alta que a faixa — desce além do pé e
   o `overflow: hidden` corta, como em O Colégio.

   Aqui NÃO é preciso desfazer a regra do celular: esta foto se dissolve
   em transparência embaixo (a última linha do arquivo não tem um pixel
   opaco), então ela some dentro do ciano e pode ficar acima do texto,
   como a fachada de O Colégio. A de Segmentos, que termina em corte
   reto, é que precisava da exceção. */
.hero--ciano-estrutura {
  --hero-altura: min(23.9vw, 28.6rem);
}

@media (min-width: 64rem) {
  /* `height: auto` desfaz o `height: 100%` das outras duas artes, e é a
     diferença que importa aqui: nas outras, a proporção do arquivo bate
     com a da faixa e a imagem cabe inteira. Nesta não — na largura do
     mockup ela fica 200px mais alta que a faixa, e é para ficar: desce
     além do pé e o `overflow: hidden` corta reto, que é o que o mockup
     mostra. Presa em `100%`, ela encolheria para caber e nasceria pequena
     no canto.

     O teto de 991px é a largura que ela tem no mockup, e não os 1266px do
     arquivo: com o teto do arquivo, em tela muito larga a arte crescia
     mais que a caixa de texto e avançava por cima dela — a caixa para de
     crescer em 1180px, a arte não. */
  .hero--ciano.hero--ciano-estrutura .hero__arte {
    width: min(51.6%, 991px);
    height: auto;
  }

  /* Pelo mesmo motivo das outras duas: sem encurtar, o parágrafo corre
     por cima da professora. O `.hero__texto` tem `max-width` próprio
     (66ch) que vence o limite geral do hero — por isso o seletor aqui
     leva duas classes, para passar na frente dos dois. */
  .hero--ciano-estrutura .hero__interno > * { max-width: 28rem; }
}

@media (min-width: 80rem) {
  .hero--ciano-estrutura .hero__interno > * { max-width: 34rem; }
}

/* No celular fica só o recorte. A fachada é plano de fundo: empilhada,
   ela viraria uma segunda foto solta, sem nada por trás para explicar o
   que está fazendo ali.

   E aqui o recorte volta para DEPOIS do texto, desfazendo a exceção que
   `colegio.html` pediu. O motivo é o acabamento do arquivo: a fachada de
   lá se dissolve em transparência e pode terminar no meio do ciano sem
   parecer defeito; este recorte termina em corte reto, na altura das
   pernas. Solto no meio da faixa, esse corte lê como imagem quebrada —
   encostado no pé do hero, ele coincide com o limite da seção e some. */
@media (max-width: 63.999rem) {
  .hero__arte--fundo { display: none; }

  /* As duas classes juntas no seletor, e não só a do modificador: as
     regras que estão sendo desfeitas têm o mesmo peso e vêm depois no
     arquivo, então empatar em especificidade significaria perder. */
  .hero--ciano.hero--ciano-largo {
    padding-top: clamp(var(--space-7), 8vw, var(--space-9));
    padding-bottom: 0;
  }

  .hero--ciano.hero--ciano-largo .hero__arte {
    order: 0;
    margin-top: var(--space-6);
    margin-bottom: 0;
  }
}

/* ---- em "O Colégio", no celular, a fachada vem ANTES do texto --------
   Pedido em 18/09/2026. É a exceção à regra que vale no hero da home, e
   a diferença entre as duas páginas é o que a justifica:

   na HOME a arte continua embaixo, porque lá a primeira tela tem uma
   tarefa — dizer o que é a escola e levar à matrícula —, e uma imagem em
   cima empurraria os dois botões para fora dela;

   em O COLÉGIO não há botão nenhum no hero. O que a imagem empurra é
   texto que continua rolando, e em troca a página abre mostrando a
   escola de que o texto fala.

   Encostada no cabeçalho (`padding-top: 0`): com o respiro do hero em
   cima, a foto nascia flutuando numa faixa de ciano, que lê como erro de
   alinhamento. A dissolução em transparência da imagem é EMBAIXO, então
   ela some dentro do ciano antes do texto — de cabeça para baixo não
   funcionaria.

   ⚠️ `order` muda só a ORDEM NA TELA; no HTML a imagem continua depois do
   texto. Aqui isso não separa ninguém do conteúdo: a arte é decorativa,
   tem `alt=""` e o leitor de tela passa direto por ela. */
@media (max-width: 63.999rem) {
  .hero--ciano { padding-top: 0; }
  .hero--ciano .hero__arte {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-6);
  }
}

/* ====================================================================
   Grade de cartões
   ==================================================================== */

.grade {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grade--dois { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* ---- grade de quatro -------------------------------------------------
   O `auto-fit` escolhe quantas colunas cabem PELA LARGURA e não olha
   quantos cartões existem. Com quatro cartões de mínimo 17rem numa
   caixa de 1132px, a conta dá três colunas — e o quarto cai sozinho na
   linha de baixo, com dois buracos brancos ao lado.

   É o mesmo defeito que o site da Faculdade já tinha corrigido (ver
   "Cartões sobrando na última linha", no README-UX.md da raiz), e a
   correção aqui é a mesma de lá: quando o conjunto é fechado e tem
   tamanho conhecido, a grade recebe a CONTAGEM em vez de adivinhar.

   Quatro na linha no computador, 2 e 2 no tablet, um por linha no
   celular. Nunca três — três é o único arranjo que não divide quatro. */
.grade--quatro { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grade--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .grade--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Em quatro colunas cada cartão fica com ~265px. O respiro interno de
     32px espremeria o texto; 24px mantém a linha legível. */
  .grade--quatro .cartao { padding: var(--space-5); }
}

/* ---- grade de três --------------------------------------------------
   Mesmo defeito, outra contagem: três cartões em duas colunas deixam o
   terceiro sozinho, com um buraco do lado. E três não divide por dois —
   não existe largura em que 2 colunas fechem a última linha.

   A saída é a que o site da Faculdade já usa onde a contagem não fecha
   (os sete tópicos de "Campo de atuação"): o último ocupa o espaço que
   sobrou. Assim a linha fecha, e ainda marca o terceiro item como o
   fim do conjunto em vez de um resto.

   Três colunas só a partir de 64rem: abaixo disso cada cartão ficaria
   com menos de 180px de texto útil, e o parágrafo quebraria em palavras
   soltas. */
.grade--tres { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--tres > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade--tres > :last-child { grid-column: auto; }
}

.cartao {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio-grande);
  padding: var(--space-6);
  box-shadow: var(--sombra-1);
  display: flex;
  flex-direction: column;
}
.faixa--alt .cartao { background: var(--bg); }

.cartao h3 { font-size: var(--texto-xl); }
.cartao p  { color: var(--muted); }
.cartao__pe { margin-top: auto; padding-top: var(--space-5); }

/* O cartão inteiro clicável, sem JavaScript: o link cobre o cartão por
   um pseudo-elemento. O nome acessível continua sendo só o texto do
   link — o leitor de tela não passa a ler o cartão inteiro de uma vez. */
.cartao--link { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.cartao--link:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.cartao--link a { text-decoration: none; color: inherit; }
.cartao--link a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-grande);
}
.cartao--link:hover h3 { color: var(--green-700); }
.cartao--link:focus-within { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* A tarja de cor no topo do cartão de segmento é decoração, não
   informação: o título logo abaixo diz qual segmento é. Por isso pode
   usar as cores exatas da marca, que não passam na régua de texto.

   `display: block` não é supérfluo: a tarja é um <span>, e dentro do
   .cartao ela vira item de flex (que já a blocaria). Fora dele — na
   .secao-cabeca de segmentos.html — continuaria inline, e largura e
   altura seriam simplesmente ignoradas. */
.cartao__tarja {
  display: block;
  height: 5px;
  width: 3.5rem;
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.cartao__tarja--verde   { background: var(--green-marca); }
.cartao__tarja--azul    { background: var(--blue-marca); }
.cartao__tarja--grafite { background: #373435; }

.cartao__serie {
  display: block;
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

/* ====================================================================
   Lista com marca de estrela
   ==================================================================== */

.lista {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.lista li {
  position: relative;
  padding-left: var(--space-6);
}

.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .6875rem;
  aspect-ratio: 99 / 114;
  background: url("../assets/estrela.svg") no-repeat center / contain;
}

/* ====================================================================
   Chamada (faixa de ação)
   ==================================================================== */

.chamada {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);   /* 8,95:1 com texto branco */
  color: var(--white);
  border-radius: var(--raio-grande);
  padding: clamp(var(--space-6), 5vw, var(--space-7));
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.chamada::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -40%;
  width: 16rem;
  aspect-ratio: 99 / 114;
  background: url("../assets/estrela.svg") no-repeat center / contain;
  opacity: .07;
  pointer-events: none;
}

.chamada > * { position: relative; z-index: 1; }
.chamada h2 { font-size: var(--texto-2xl); margin-bottom: var(--space-2); }
.chamada p  { color: rgba(255, 255, 255, .88); max-width: var(--measure); }
.chamada .acoes { margin-top: 0; }

@media (min-width: 52rem) {
  .chamada { grid-template-columns: 1fr auto; gap: var(--space-7); }
}

/* ====================================================================
   Passos numerados
   ==================================================================== */

.passos {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.passos li {
  counter-increment: passo;
  position: relative;
  padding-left: var(--space-9);
  min-height: 3rem;
}

.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-700);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--texto-xl);
}

.passos h3 { font-size: var(--texto-xl); margin-bottom: var(--space-1); }
.passos p  { color: var(--muted); }

/* ====================================================================
   Sanfona — <details> nativo
   --------------------------------------------------------------------
   Abre e fecha sem uma linha de JavaScript, já vem acessível pelo
   teclado e é anunciada corretamente por leitor de tela.

   Continua sendo <details> mesmo depois de a CSP passar a aceitar script:
   as páginas que a usam (matriculas.html, acesso.html) não carregam
   JavaScript nenhum, e não há motivo para passarem a carregar por causa
   de uma sanfona que o HTML já resolve.
   ==================================================================== */

.detalhe {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-2);
}
.faixa--alt .detalhe { background: var(--bg); }

.detalhe summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
  font-weight: 600;
  list-style: none;         /* tira o triângulo padrão do Chrome/Firefox */
  position: relative;
}
.detalhe summary::-webkit-details-marker { display: none; }  /* e do Safari */

/* A seta é desenhada com borda: duas linhas giradas. Não depende de
   fonte de ícone nem de arquivo, e gira sozinha quando o bloco abre. */
.detalhe summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.5rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--green-600);
  border-bottom: 2px solid var(--green-600);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.detalhe[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }

.detalhe__corpo { padding-bottom: var(--space-5); color: var(--muted); }
.detalhe__corpo > :first-child { margin-top: 0; }

/* ====================================================================
   Espaço reservado para imagem
   --------------------------------------------------------------------
   O Colégio vai fornecer os criativos depois. Até lá o espaço fica
   VAZIO — um painel limpo, na proporção final, sem texto dentro e sem
   tracejado de "faltando algum arquivo". O layout já está no formato
   definitivo: quando a imagem chegar, ela substitui o bloco por um
   <img> e nada em volta se move.

   O aviso de que falta imagem não sumiu: virou comentário no HTML, com
   a marca "A CONFIRMAR". Assim ele continua travando a publicação sem
   aparecer na tela.
   ==================================================================== */

/* Foto entregue já recortada, com o fundo dissolvido em transparência.
   Ao contrário de `.midia`, não leva moldura, canto arredondado nem
   sombra: a imagem já termina em nada, e uma caixa em volta cortaria o
   recorte no meio. É o tratamento das três imagens de 18/09/2026. */
.foto-solta {
  display: block;
  width: 100%;
  height: auto;
}

/* O mapa de contato é o contrário das outras: imagem retangular cheia, sem
   recorte. Sem canto arredondado ela seria o único retângulo duro do site,
   e ela ocupa exatamente o lugar onde antes havia um bloco `.midia` — que
   tinha esse mesmo raio. O link em volta vira bloco para não sobrar a folga
   de linha que um `<a>` em linha deixa embaixo da imagem. */
.foto-solta--moldura {
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-1);

  /* O topo da imagem desce para encontrar a PRIMEIRA LETRA do texto ao
     lado — no caso, o "O" de "Onde estamos" —, e não o topo da caixa
     dele. Sem isso a imagem nasce acima da linha e a coluna inteira
     parece deslocada para cima, mesmo com os topos das duas colunas
     coincidindo no grid.

     A conta é a meia entrelinha do olho mais o que sobra entre o topo da
     caixa da letra e a altura da maiúscula: 13px de fonte em 21,45px de
     linha dá 4,2px, mais 0,4px. Medido depois: sobram 0,2px.

     ⚠️ O valor é calibrado para o OLHO (13px), não para o texto corrido
     (17px). Se esta imagem for parar ao lado de um parágrafo comum, a
     folga certa passa a ser ~7px. Quando a grade empilha no celular,
     estes 4,8px viram só um respiro a mais acima do mapa. */
  margin-top: .3rem;
}

a:has(> .foto-solta--moldura) { display: block; }

.midia {
  position: relative;
  border-radius: var(--raio-grande);
  background:
    radial-gradient(120% 120% at 70% 10%, var(--green-light) 0%, var(--blue-light) 100%);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: var(--sombra-1);
}

.midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/estrela.svg") no-repeat center / 38%;
  opacity: .09;
}

.midia--alta   { aspect-ratio: 3 / 4; }
.midia--larga  { aspect-ratio: 16 / 9; }
.midia--quadro { aspect-ratio: 1 / 1; }

/* Dentro de um cartão a mídia é a "capa": encosta no título logo abaixo
   se não separar, e perde o arredondado de baixo se não recortar. */
.cartao .midia {
  margin-bottom: var(--space-5);
  border-radius: var(--raio);
}

/* A foto de capa de um cartão — os seis espaços da estrutura, 24/09/2026.
   Sangra o respiro do cartão nos três lados de cima e acompanha o
   arredondado dele. Sem a sangria a foto nasceria 32px para dentro e o
   cartão viraria uma moldura em volta de outra moldura.

   `cover` com proporção fixa: as fotos vêm todas em 3:2, mas a coluna do
   cartão muda de largura com a tela — sem a proporção travada, uma fila
   de cartões teria capas de alturas diferentes. O raio desconta 1px, que
   é a borda do cartão. */
.cartao__capa {
  display: block;
  width: calc(100% + 2 * var(--space-6));
  /* Sem isto a sangria não acontece: o `img { max-width: 100% }` lá de
     cima cortava os 64px extras de volta para a largura do conteúdo, e a
     foto nascia exatamente dentro do respiro — a margem negativa
     aplicada, mas nada para sangrar. */
  max-width: none;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: calc(var(--raio-grande) - 1px) calc(var(--raio-grande) - 1px) 0 0;
}

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

.rodape {
  background: var(--green-darker);
  color: rgba(255, 255, 255, .82);   /* ~9:1 sobre o verde-escuro */
  padding-block: clamp(var(--space-7), 6vw, var(--space-8)) var(--space-6);
  margin-top: auto;
  font-size: var(--texto-sm);
}

.rodape__grade {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.rodape h2 {
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rodape a  { color: rgba(255, 255, 255, .82); text-decoration: none; }
.rodape a:hover { color: var(--white); text-decoration: underline; }

/* Alvo de toque também aqui: link de rodapé com 15px de fonte e nada de
   padding dá ~25px de altura, e é onde mora o telefone da escola. */
.rodape li a { display: inline-block; padding-block: var(--space-1); }

.rodape__marca img { width: 172px; height: auto; }
.rodape__local {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--texto-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* O pé do rodapé: assinatura de um lado, os três acessos do outro. Vira
   uma coluna no celular, onde os dois não cabem lado a lado. */
.rodape__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.rodape__assinatura {
  margin: 0;
  font-size: var(--texto-sm);
  color: rgba(255, 255, 255, .66);
}

/* ---- os três acessos administrativos — 25/09/2026 -------------------
   Voltaram a pedido do cliente, como estão na página de manutenção que
   está no ar. Três círculos sem rótulo, cada um com um link do
   `app.dropo.me`. Sem nome por decisão dele: é acesso administrativo, e o
   que cada um abre não precisa estar escrito na página.

   O `aria-label` não é enfeite. Um `<a>` sem nome acessível é anunciado
   como "link" e mais nada — e aí nem quem tem a senha consegue usar.

   A cor é a única coisa que distingue um do outro, então a régua aqui é a
   de elemento NÃO-TEXTUAL: 3:1 contra o fundo. Medido sobre o
   `--green-darker` do rodapé — verde 4,01:1, azul 3,29:1, grafite
   3,49:1. O `#373435` da tarja "grafite" dos cartões NÃO serve aqui:
   sobre o verde-escuro ele dá 1,2:1 e some.

   ⚠️ O `id` na URL é a própria credencial. Não ter rótulo esconde da
   vista, não do acesso: o endereço está no `href` e aparece na barra de
   status ao passar o mouse. Ver a pendência 8 do LEIA-ME. */
.rodape__acessos {
  display: flex;
  gap: var(--space-3);
}

.rodape__acesso {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--raio-pilula);
  transition: transform .15s ease;
}
.rodape__acesso:hover { transform: scale(1.15); }

.rodape__acesso--verde   { background: var(--green-marca); }
.rodape__acesso--azul    { background: var(--blue-marca); }
.rodape__acesso--grafite { background: var(--border-strong); }

/* ====================================================================
   Acesso ao acadêmico (acesso.html)
   --------------------------------------------------------------------
   O formulário envia direto para o Activesoft: nenhum dado digitado
   passa por este servidor.
   ==================================================================== */

.acesso {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-2);
  padding: clamp(var(--space-5), 4vw, var(--space-6));
  max-width: 27rem;
}

.acesso h2 { font-size: var(--texto-2xl); }
.acesso__quem { color: var(--muted); font-size: var(--texto-sm); }

.campo { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.campo__rotulo { font-size: var(--texto-sm); font-weight: 600; }

/* 16px no campo não é escolha estética: abaixo disso o Safari do iPhone
   dá zoom sozinho ao focar, e a página salta na cara de quem só quer
   digitar a senha. A altura fica em ~48px, acima da régua de toque. */
.campo__entrada {
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  color: var(--ink);
  background: var(--white);
  padding: .75rem var(--space-4);
  border: 1px solid var(--border-strong);  /* 3,58:1 — um campo de senha
                                              precisa de limite visível */
  border-radius: .5rem;
  width: 100%;
}
.campo__entrada:focus-visible { border-color: var(--blue-600); }

.acesso .botao { width: 100%; margin-top: var(--space-2); }

.acesso__ajuda { margin: var(--space-4) 0 0; text-align: center; font-size: var(--texto-sm); }

.acesso__origem {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--texto-sm);
  color: var(--muted);
}

/* ====================================================================
   Sistema Normativo (normativo.html)
   --------------------------------------------------------------------
   Uma lista só, com todos os documentos. Sem abas de categoria e sem
   seleção de ano — o site da Faculdade tem as duas coisas; aqui foi
   pedido mais simples.
   ==================================================================== */

.norm-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}

.norm-campo {
  flex: 1 1 22rem;
  display: block;
  position: relative;
}

/* A lupa é desenhada com borda e um traço: um círculo (o aro) mais o
   cabo girado. Não depende de fonte de ícone nem de arquivo, e acompanha
   a cor do texto. aria-hidden não é preciso — é pseudo-elemento, então
   não existe para o leitor de tela. */
.norm-campo::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: .75rem;
  height: .75rem;
  margin-top: -.5rem;
  border: 2px solid var(--muted);
  border-radius: 50%;
  pointer-events: none;
}
.norm-campo::after {
  content: "";
  position: absolute;
  left: 1.7rem;
  top: 50%;
  width: 2px;
  height: .5rem;
  margin-top: .1rem;
  background: var(--muted);
  transform: rotate(-45deg);
  transform-origin: top center;
  pointer-events: none;
}

/* 16px no campo não é escolha estética: abaixo disso o Safari do iPhone
   dá zoom sozinho ao focar e a página salta. A altura fica em ~48px,
   acima da régua de toque. */
.norm-campo input {
  width: 100%;
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  color: var(--ink);
  background: var(--bg);
  padding: .75rem var(--space-4) .75rem 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.faixa--alt .norm-campo input { background: var(--white); }
.norm-campo input:focus-visible { border-color: var(--blue-600); }

/* O X de limpar que o Chrome põe no type="search" some no tema escuro do
   sistema; forçar a cor evita um botão invisível dentro do campo. */
.norm-campo input::-webkit-search-cancel-button { filter: grayscale(1); }

.norm-contagem {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- a lista ------------------------------------------------------- */

.docs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

/* Linha, e não cartão. São documentos para varrer com o olho e clicar —
   cartão com sombra viraria uma parede de caixas e daria a cada item um
   peso que ele não tem. */
.doc {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}

.doc__link {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  /* Alvo de toque: 44px de altura com o padding do .doc em volta. */
  padding-block: var(--space-1);
}
.doc__link:hover .doc__titulo { color: var(--green-700); text-decoration: underline; }

.doc__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
  line-height: 1.3;
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--muted);
}

/* Números em fonte tabular: código e ano alinham na vertical de um item
   para o outro em vez de dançarem conforme o dígito. */
.doc__codigo,
.doc__ano {
  font-variant-numeric: tabular-nums;
}

.doc__codigo {
  font-weight: 600;
  color: var(--ink);
}

.doc__etiqueta {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-700);
  font-size: var(--texto-xs);
  font-weight: 600;
}

.norm-vazio {
  margin: var(--space-6) 0 0;
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--raio);
  text-align: center;
  color: var(--muted);
}

.norm-rodape {
  margin-top: var(--space-6);
  font-size: var(--texto-sm);
  color: var(--muted);
}

/* ====================================================================
   Calendário Escolar (calendario.html) — 28/09/2026
   --------------------------------------------------------------------
   Portado do calendário do site da Faculdade, nos tokens daqui.

   Quatro tipos de data e a marca de sábado letivo, cinco cores. A cor
   NUNCA anda sozinha: cada marcação traz também o texto do tipo
   (visível na Agenda, para leitor de tela na vista Ano) — WCAG 1.4.1,
   nada depende só de cor.

   As cinco cores são as da Faculdade, onde já foram medidas: todas
   passam de 6:1 sobre branco e sobre o próprio fundo claro, porque
   carregam texto (a etiqueta do tipo), não só o ponto. A do sábado
   letivo é o --green-700 daqui.

   `--tipo` e `--tipo-bg` são resolvidos pelo atributo data-tipo e descem
   por herança: o mesmo par pinta o ponto na grade, a borda do item, a
   etiqueta e o cartão de "A seguir".
   ==================================================================== */

:root {
  --cal-feriado: #b3261e;        --cal-feriado-bg: #fdeceb;
  --cal-sabado:  var(--green-700); --cal-sabado-bg: #e8f5ee;
  --cal-aula:    #17548f;        --cal-aula-bg:    #e9f1fa;
  --cal-avaliacao: #8a5200;      --cal-avaliacao-bg: #fbf0e0;
  --cal-evento:  #653aa3;        --cal-evento-bg:  #f1ebfa;

  /* Altura do cabeçalho grudado no desktop (116px, ver .cabecalho).
     É o que a barra de filtros e as âncoras precisam descontar. */
  --cal-topo: 7.25rem;
}

[data-tipo="feriado"]   { --tipo: var(--cal-feriado);   --tipo-bg: var(--cal-feriado-bg); }
[data-tipo="sabado"]    { --tipo: var(--cal-sabado);    --tipo-bg: var(--cal-sabado-bg); }
[data-tipo="aula"]      { --tipo: var(--cal-aula);      --tipo-bg: var(--cal-aula-bg); }
[data-tipo="avaliacao"] { --tipo: var(--cal-avaliacao); --tipo-bg: var(--cal-avaliacao-bg); }
[data-tipo="evento"]    { --tipo: var(--cal-evento);    --tipo-bg: var(--cal-evento-bg); }

/* ---- cabeçalho ------------------------------------------------------ */

.cal-hero-ano { font-weight: 400; color: var(--green-700); }

.cal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}
/* Os três selos pedem mais que os 44rem dos outros filhos do hero. */
.hero__interno > .cal-hero-meta { max-width: none; }

.cal-hero-meta li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-1);
  padding: var(--space-2) var(--space-5);
  font-size: var(--texto-sm);
}
.cal-hero-meta b { font-weight: 600; color: var(--green-700); }
.cal-hero-meta span { color: var(--muted); }

/* ---- "A seguir": a tira que encosta no fim do hero ------------------
   Nasce vazia e só aparece enquanto o ano do calendário for o ano
   corrente — ver renderProximos() em js/calendario-page.js. */

.cal-prox {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--space-6) * -1);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: var(--space-4) var(--space-5);
}
.cal-prox-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}
.cal-prox-titulo svg { color: var(--green-700); }
.cal-prox-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cal-prox-item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: .625rem;
  border-left: 3px solid var(--tipo);
  background: var(--tipo-bg);
  text-decoration: none;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.cal-prox-item a:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.cal-prox-data {
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tipo);
}
.cal-prox-nome { font-size: var(--texto-sm); font-weight: 500; color: var(--ink); line-height: 1.3; }

/* ---- barra de controles --------------------------------------------- */

.cal-secao { padding-top: var(--space-7); }

.cal-barra {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
/* Grudar a barra no alto só compensa quando ela não come a tela: no
   telefone as doze grades precisam da altura toda (e lá o cabeçalho nem
   gruda). Fica abaixo do cabeçalho na pilha, nunca por cima dele. */
@media (min-width: 62rem) {
  .cal-barra {
    position: sticky;
    top: calc(var(--cal-topo) + var(--space-3));
    z-index: 40;
  }
}

.cal-barra-linha { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.cal-barra-linha-fim { justify-content: space-between; }

/* O campo é o .norm-campo do Sistema Normativo (lupa, altura, foco);
   aqui só o fundo muda, porque a barra já é branca. */
.cal-busca { flex: 1 1 18rem; }
.cal-busca input { background: var(--bg); }

.cal-semestre { flex: 0 1 auto; display: flex; }
.cal-semestre select {
  max-width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--border-strong);
  background: var(--white);
  font: inherit;
  font-size: var(--texto-sm);
  color: var(--ink);
  cursor: pointer;
}
.cal-semestre select:hover { border-color: var(--green-600); }

/* Alternador Ano / Agenda — um trilho, duas posições */
.cal-vistas {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--raio-pilula);
}
.cal-vista {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: none;
  background: none;
  border-radius: var(--raio-pilula);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.cal-vista:hover { color: var(--green-700); }
.cal-vista[aria-pressed="true"] { background: var(--green-700); color: var(--white); font-weight: 600; }

.cal-tipos { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; }
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--raio-pilula);
  background: var(--white);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
.cal-chip:hover { border-color: var(--green-600); color: var(--green-700); }
.cal-chip[aria-pressed="true"] { background: var(--green-700); border-color: var(--green-700); color: var(--white); }
.cal-chip .cal-ponto { width: 9px; height: 9px; }
.cal-chip[aria-pressed="true"] .cal-ponto { background: var(--white); }

.cal-acoes { display: flex; gap: var(--space-2); flex: none; }
/* O `display: inline-flex` do .botao vence o atributo `hidden` — sem
   isto, "Limpar filtros" aparecia sem filtro nenhum, e "Ir para hoje"
   continuaria na tela em 2027. O site não tem regra global de [hidden],
   então a correção fica aqui, onde o problema existe. */
.cal-acoes .botao[hidden] { display: none; }

.cal-contagem {
  margin: 0 0 var(--space-5);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--muted);
}

/* ---- vista "Ano": doze cartões -------------------------------------- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.cal-mes {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--space-5);
  scroll-margin-top: calc(var(--cal-topo) + var(--space-8));
}
.cal-mes.is-atual { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-light); }
.cal-mes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.cal-mes-nome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--texto-xl);
}
.cal-agora {
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--green-700);
  color: var(--white);
  border-radius: var(--raio-pilula);
  padding: 2px 8px;
}
.cal-mes-meta,
.cal-bloco-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.cal-sem,
.cal-letivos {
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  border-radius: var(--raio-pilula);
  padding: 2px 10px;
}
.cal-sem { background: var(--green-light); color: var(--green-700); white-space: nowrap; }
.cal-letivos { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* A grade é uma <table> de verdade: o leitor de tela anuncia a coluna
   ("sábado") ao entrar na célula. */
.cal-grade { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: var(--space-4); }
.cal-grade th {
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .06em;
  padding-bottom: var(--space-2);
}
.cal-grade th abbr { text-decoration: none; cursor: help; }
.cal-grade td { padding: 1px; }

.cal-dia > .cal-dia-num,
.cal-dia-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 40px;
  border-radius: .625rem;
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.cal-dia.is-domingo > .cal-dia-num,
.cal-dia.is-domingo .cal-dia-btn { color: var(--muted); }
.cal-dia-btn {
  font-weight: 600;
  background: var(--tipo-bg);
  transition: box-shadow .15s ease-out, background-color .15s ease-out;
}
.cal-dia-btn:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--tipo); }
.cal-dia-pontos { display: flex; gap: 3px; align-items: center; min-height: 5px; }
.cal-ponto {
  display: inline-block;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tipo, var(--muted));
}
/* Hoje ganha anel, peso e cor — três sinais, não um */
.cal-dia.is-hoje > .cal-dia-num,
.cal-dia.is-hoje .cal-dia-btn {
  box-shadow: inset 0 0 0 2px var(--green-600);
  font-weight: 700;
  color: var(--green-700);
}

.cal-mes-lista,
.cal-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cal-mes-nada { margin: 0; font-size: var(--texto-sm); color: var(--muted); }

.cal-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: .625rem;
  border-left: 3px solid var(--tipo);
  background: var(--tipo-bg);
  scroll-margin-top: calc(var(--cal-topo) + var(--space-8));
}
/* Chegou por link vindo da grade: o item fica marcado */
.cal-item:target { box-shadow: 0 0 0 2px var(--tipo); }
.cal-item.is-hoje { box-shadow: 0 0 0 2px var(--green-600); }
.cal-item-data {
  flex: none;
  width: 3.4rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1.15;
}
.cal-item-data b { font-size: var(--texto-base); font-weight: 700; color: var(--tipo); font-variant-numeric: tabular-nums; }
.cal-item-data small { font-size: var(--texto-xs); color: var(--muted); letter-spacing: .04em; }
.cal-item-corpo { min-width: 0; }
.cal-item-titulo { margin: 0; font-size: var(--texto-sm); font-weight: 600; color: var(--ink); line-height: 1.35; }
.cal-item-det { margin: 2px 0 0; font-size: var(--texto-xs); color: var(--muted); }
.cal-item-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; }
.cal-tag {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--tipo);
  background: var(--white);
  border: 1px solid var(--tipo);
  border-radius: var(--raio-pilula);
  padding: 1px 10px;
}
/* Na vista Ano a legenda e a cor já dizem o tipo; a etiqueta vira ruído
   para quem enxerga, mas continua sendo lida em voz alta. A do sábado
   letivo fica: é informação que a cor do item não dá. */
.cal-mes-lista .cal-tag:not(.cal-tag-sabado) {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.cal-mes-lista .cal-item-tags:not(:has(.cal-tag-sabado)) { margin: 0; }

/* ---- vista "Agenda": tudo em ordem ---------------------------------- */

.cal-agenda { display: flex; flex-direction: column; gap: var(--space-6); max-width: 56rem; margin: 0 auto; }
.cal-bloco { scroll-margin-top: calc(var(--cal-topo) + var(--space-8)); }
.cal-bloco-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--green-light);
}
.cal-bloco-mes { font-size: var(--texto-2xl); color: var(--green-dark); }
.cal-lista .cal-item {
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tipo);
}
.cal-lista .cal-item.is-hoje { background: var(--tipo-bg); }
.cal-lista .cal-item-data { width: 4rem; }
.cal-lista .cal-item-data b { font-size: var(--texto-xl); }
.cal-lista .cal-item-titulo { font-size: var(--texto-base); }
.cal-lista .cal-item-det { font-size: var(--texto-sm); }

/* ---- legenda e fonte ------------------------------------------------ */

.cal-legenda-titulo { font-size: var(--texto-base); margin: var(--space-7) 0 var(--space-3); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.cal-legenda-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--texto-sm); color: var(--muted); }
.cal-legenda .cal-ponto { width: 10px; height: 10px; }
.cal-fonte { margin: var(--space-5) 0 0; font-size: var(--texto-sm); color: var(--muted); max-width: var(--measure); }

@media (max-width: 35rem) {
  /* Abaixo de 560px o cartão do mês fica com 40px por coluna de dia —
     cabe, desde que a grade perca o respiro lateral. */
  .cal-mes { padding: var(--space-4); }
  /* Em duas linhas, a pílula vira um ovo; o canto de cartão lê melhor. */
  .cal-hero-meta li { width: 100%; border-radius: var(--raio); }
  .cal-barra-linha-fim { flex-direction: column; align-items: stretch; }
  .cal-acoes .botao { flex: 1; }
  .cal-semestre, .cal-semestre select { width: 100%; }
  .cal-vistas { flex: 1 1 100%; }
  .cal-vista { flex: 1; justify-content: center; }
  .cal-item-data { width: 2.8rem; }
}

/* Impresso, o calendário vira folha de parede: sem controles, sem a tira
   de "A seguir", e cada mês inteiro sem quebra no meio. */
@media print {
  .cabecalho, .rodape, .pular,
  .cal-barra, .cal-prox, .cal-contagem { display: none !important; }
  .cal-grid { grid-template-columns: repeat(2, 1fr); gap: 12pt; }
  .cal-mes, .cal-bloco, .cal-item { break-inside: avoid; box-shadow: none; }
}

/* ====================================================================
   Blog (blog.html e postagem.html)
   ==================================================================== */

/* A capa sangra até a borda do cartão: o .cartao tem 32px de respiro, e
   uma imagem com moldura de 32px em volta parece recorte, não capa. */
.post .midia,
.post__capa {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  width: calc(100% + var(--space-6) * 2);
  max-width: none;
  border-radius: var(--raio-grande) var(--raio-grande) 0 0;
  display: block;
}
.post__capa { aspect-ratio: 16 / 9; object-fit: cover; }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--texto-xs);
}

.post__categoria {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-700);
  font-weight: 600;
}
.post__data { color: var(--muted); font-variant-numeric: tabular-nums; }

.post h3 { font-size: var(--texto-xl); }
.post h3 a { color: inherit; text-decoration: none; }

.post__pe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--texto-xs);
  color: var(--muted);
}

/* ---- a postagem ---------------------------------------------------- */

/* Texto corrido quer medida de leitura, não a largura da tela. O resto
   do site usa grades; aqui é uma coluna só, limitada. */
.postagem__interno { max-width: 46rem; }

.postagem__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  color: var(--muted);
  font-size: var(--texto-sm);
}
.postagem__data { font-variant-numeric: tabular-nums; }

.postagem__capa { margin-bottom: var(--space-6); }
.postagem__capa img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-grande);
}

/* O resumo é a entrada da notícia: maior que o corpo e mais escuro que
   um texto de apoio, para o olho começar por ele. */
.postagem__resumo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

/* O corpo vem do painel e é HTML de verdade: os seletores abaixo valem
   para o que o sanitize-html deixa passar (ver a lista em
   painel/src/content.mjs). Nada aqui depende de classe — com uma exceção,
   o bloco de vídeo (figure.video), que é o único elemento a que o painel
   dá classe e atributo próprios. */
.postagem__corpo { font-size: var(--texto-base); }
.postagem__corpo > :first-child { margin-top: 0; }
.postagem__corpo p { margin-bottom: var(--space-4); }
.postagem__corpo h2 { font-size: var(--texto-2xl); margin: var(--space-7) 0 var(--space-3); }
.postagem__corpo h3 { font-size: var(--texto-xl); margin: var(--space-6) 0 var(--space-2); }
.postagem__corpo h4 { font-size: var(--texto-lg); margin: var(--space-5) 0 var(--space-2); }
.postagem__corpo ul,
.postagem__corpo ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.postagem__corpo li { margin-bottom: var(--space-2); }

.postagem__corpo blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--green-marca);
  color: var(--muted);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
}

.postagem__corpo hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* Tabela do painel não tem classe e pode ser larga. O embrulho rolável
   é o único lugar do site onde rolagem horizontal é aceitável — e fica
   confinada à tabela, nunca à página. */
.postagem__corpo table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--texto-sm);
}
.postagem__corpo th,
.postagem__corpo td {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.postagem__corpo th { background: var(--green-light); font-weight: 600; }
.postagem__corpo { overflow-x: auto; }

/* Vídeo no meio do texto. Fachada: capa + botão, e o <iframe> do YouTube
   só é criado no clique (ver montarVideos em js/postagem-page.js), para que
   quem abre a publicação não carregue nada de terceiro sem pedir. */
.postagem__video { margin: var(--space-6) 0; }
.postagem__video-quadro {
  border-radius: var(--raio-grande);
  overflow: hidden;
  background: var(--green-darker);
  aspect-ratio: 16 / 9;
}
.postagem__video-quadro iframe { width: 100%; height: 100%; border: 0; display: block; }
.postagem__video-botao {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}
.postagem__video-botao img { width: 100%; height: 100%; object-fit: cover; }
.postagem__video-botao::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,40,30,.1), rgba(20,40,30,.62));
}
.postagem__video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--green-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: transform .2s ease-out, background-color .15s ease-out;
}
.postagem__video-botao:hover .postagem__video-play { transform: scale(1.08); background: var(--green-700); }
.postagem__video-rotulo {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 1;
  font-weight: 600;
  font-size: var(--texto-sm);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.postagem__video figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--texto-sm);
}

@media (prefers-reduced-motion: reduce) {
  .postagem__video-play { transition: none; }
}

.postagem__fonte { margin-top: var(--space-6); font-size: var(--texto-sm); }

/* ====================================================================
   A camada lúdica
   --------------------------------------------------------------------
   Acrescentada em 15/09/2026, a pedido: "o público-alvo são os pais de
   alunos, mas precisa ter uma parte gráfica mais infantil, com cores,
   efeitos".

   Duas referências do cliente orientaram o trabalho: a Escola Adventista
   de Boa Vista (arco nas imagens, faixas de cor cheia, Montserrat) e o
   Claretiano Boa Vista (cantos de 12 a 30px, pílulas, Poppins, título em
   tom de conversa). O que foi emprestado foram os GESTOS; a paleta de
   cada uma é a marca delas.

   O ajuste de mira que foi feito, e vale registrar: o Colégio atende do
   1º ano do Fundamental à 3ª série do Médio — de 6 a 17 anos. Design de
   Educação Infantil (mascote, balão, tipografia de gibi) alegraria a
   página e diria uma coisa falsa sobre a escola, além de constranger o
   aluno de Médio. A régua usada foi: **cor e forma podem ser alegres; o
   texto e a informação continuam adultos**, porque quem decide matrícula
   é o pai, e ele está avaliando se confia.

   ⚠️ SÓ VERDE E AZUL. A variação vem de profundidade, não de matiz.

   Nada aqui depende de JavaScript.
   ==================================================================== */

/* ---- o arco ---------------------------------------------------------
   O gesto emprestado da Adventista (border-radius: 100% 100% 0 0).
   Usado nas imagens reservadas: dá silhueta de janela/porta e tira o ar
   de "retângulo de sistema". */
.midia--arco { border-radius: var(--raio-arco); }

/* Dentro de um cartão o arco precisa desta linha para valer: a regra
   `.cartao .midia` (duas classes) vence `.midia--arco` (uma só) por
   especificidade, e os seis blocos da estrutura.html saíam com o canto
   comum de 16px, sem arco nenhum. */
.cartao .midia--arco { border-radius: var(--raio-arco); }

/* ---- faixas de cor --------------------------------------------------
   Antes o site alternava só papel e branco. Agora alterna também as duas
   tintas de marca, o que dá ritmo à rolagem. */
.faixa--azul { background: var(--blue-light); }

/* ---- onda ------------------------------------------------------------
   Divisor curvo entre faixas, desenhado em CSS puro: um elemento largo
   com 50% de raio, deslocado para fora. Sem arquivo, sem SVG, e a cor
   acompanha a faixa de destino por variável.

   `--onda-cor` é definida por quem usa. Sem ela a onda não aparece —
   preferível a aparecer na cor errada. */
.onda {
  position: relative;
  height: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
.onda::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 200%;
  border-radius: 50% 50% 0 0;
  background: var(--onda-cor, transparent);
}
.onda--branco { --onda-cor: var(--white); }
.onda--papel  { --onda-cor: var(--bg); }
.onda--verde  { --onda-cor: var(--green-light); }
.onda--azul   { --onda-cor: var(--blue-light); }

/* ---- confete de estrelas --------------------------------------------
   A estrela do logotipo espalhada como enfeite — o elemento lúdico que
   a marca já tem, em vez de um desenho inventado. É `background`, então
   não existe para leitor de tela e não entra na ordem de tabulação.
   Opacidade baixa: alegre de longe, invisível quando se está lendo. */
.confete { position: relative; overflow: hidden; }
.confete > * { position: relative; z-index: 1; }
.confete::before,
.confete::after {
  content: "";
  position: absolute;
  background: url("../assets/estrela.svg") no-repeat center / contain;
  aspect-ratio: 99 / 114;
  pointer-events: none;
}
.confete::before { width: 4.5rem; top: 10%;     left: -1.5rem; opacity: .16; transform: rotate(-12deg); }
.confete::after  { width: 7rem;   bottom: -2rem; right: 4%;    opacity: .10; transform: rotate(8deg); }

/* ---- pílula de destaque ---------------------------------------------
   Rótulo colorido, onde o "olho" precisa de mais presença. */
.pilula {
  display: inline-block;
  padding: .3125rem .875rem;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pilula--verde { background: var(--green-light); color: var(--green-700); }
.pilula--azul  { background: var(--blue-light);  color: var(--blue-700); }
.pilula--clara { background: rgba(255,255,255,.22); color: var(--white); }

/* ---- cartão de segmento, versão colorida ----------------------------
   Antes a única diferença entre os três era uma tarja de 5px. Agora o
   cartão inteiro tem temperatura — e os três se distinguem por
   PROFUNDIDADE, dentro de verde e azul:

     Fundamental I  verde claro,  texto escuro
     Fundamental II azul claro,   texto escuro
     Ensino Médio   verde escuro, texto branco  (8,95:1)

   O Médio escuro não é só variedade: ele é a etapa que a família olha
   com mais atenção, e o contraste o destaca sem precisar de outra cor. */
.segmento { position: relative; border: 0; overflow: hidden; }
.segmento--verde  { background: var(--green-light); }
.segmento--azul   { background: var(--blue-light); }
.segmento--escuro { background: var(--green-dark); }

.faixa--alt .segmento--verde  { background: var(--green-light); }
.faixa--alt .segmento--azul   { background: var(--blue-light); }
.faixa--alt .segmento--escuro { background: var(--green-dark); }

/* `h3` E `h3 a`: a primeira versão mirava só `h3 a`, e os cartões que
   NÃO são links — os pilares pedagógicos do colegio.html — ficaram com
   título --ink (#1e2a24) sobre o verde escuro (#31512d). Cerca de 1,4:1,
   ilegível, e do tipo que não salta aos olhos num print porque as duas
   cores são escuras. */
.segmento--escuro h3,
.segmento--escuro h3 a,
.segmento--escuro .cartao__serie { color: var(--white); }
.segmento--escuro p { color: rgba(255, 255, 255, .88); }
.segmento--escuro .cartao__serie { color: rgba(255, 255, 255, .78); }
.cartao--link.segmento--escuro:hover h3 a { color: var(--white); text-decoration: underline; }

/* O algarismo grande atrás do conteúdo. Decoração pura: vem de
   `content` num pseudo-elemento, então não é lido nem copiado. */
.segmento::after {
  content: attr(data-ordem);
  position: absolute;
  right: -.25rem;
  bottom: -2.75rem;
  font-family: var(--fonte-titulo);
  font-size: 9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  opacity: .5;
  pointer-events: none;
}
.segmento--escuro::after { color: var(--green-darker); opacity: .55; }
.segmento > * { position: relative; z-index: 1; }

/* ---- movimento -------------------------------------------------------
   Poucos efeitos, e cada um com motivo. O guarda de prefers-reduced-motion
   no topo do arquivo zera a duração de todos eles.

   Nada de entrada por rolagem: dependeria de JavaScript, e as páginas que
   não carregam script ficariam com conteúdo invisível se ele falhasse. */
.cartao--link .midia { transition: transform .25s ease; }
.cartao--link:hover .midia { transform: scale(1.02); }
.botao:hover { transform: translateY(-2px) scale(1.02); }

/* ---- números da escola ----------------------------------------------
   Faixa de destaque numérica, no espírito da Adventista ("339 unidades,
   2.330.305 alunos"). Aqui os números ainda não existem — entram
   marcados. */
.numeros {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  text-align: center;
}
.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--green-700);
}
.numero__rotulo {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--texto-sm);
  color: var(--muted);
}

/* ---- hero colorido ---------------------------------------------------
   Faixa de cor CHEIA, como na referência da Adventista.

   A primeira tentativa foi um degradê entre as duas tintas claras
   (--green-light → --blue-light) com texto escuro. Na tela ficou lavado:
   o pedido era mais cor, e o resultado era quase branco. A pílula, que é
   verde-clara, sumia dentro dele.

   Agora é o degradê entre os dois tons que CARREGAM TEXTO, com branco por
   cima. Os dois extremos passam na régua:
     branco sobre --green-600 (#008046) = 5,03:1 · AA
     branco sobre --blue-700  (#285A7D) = 7,0:1  · AA
   Como todo ponto do degradê fica entre eles, não existe faixa que
   reprove — que é o cuidado que um degradê com texto por cima exige. */
.hero--cor {
  background-image: linear-gradient(135deg, var(--green-600) 0%, var(--blue-700) 100%);
  color: var(--white);
}
.hero--cor .hero__titulo { color: var(--white); }
.hero--cor .hero__texto  { color: rgba(255, 255, 255, .92); }

/* A estrela de marca-d'água é verde: sobre o fundo escuro ela sumiria.
   O filtro a torna branca sem precisar de um segundo arquivo SVG. */
.hero--cor::after { filter: brightness(0) invert(1); opacity: .10; }

/* O botão cheio verde sobre fundo verde desapareceria. Na faixa colorida
   o primário vira branco, e o secundário ganha contorno branco. */
.hero--cor .botao {
  background: var(--white);
  color: var(--green-700);
  border-color: var(--white);
}
.hero--cor .botao:hover { background: var(--green-light); color: var(--green-700); }
.hero--cor .botao--contorno {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .7);
}
.hero--cor .botao--contorno:hover { background: rgba(255, 255, 255, .14); color: var(--white); }

/* A pílula clara é a única que se lê sobre a faixa. */
.hero--cor .pilula {
  background: rgba(255, 255, 255, .18);
  color: var(--white);
}

/* O espaço reservado da foto precisa se distinguir da faixa: sobre cor
   cheia, o degradê pálido dele encostava no fundo e sumia. */
.hero--cor .midia {
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.hero--cor .midia::after { filter: brightness(0) invert(1); opacity: .22; }