/* ==========================================================================
   CASJ — Estrutura visual (header, footer, componentes globais)
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--casj-cinza-texto);
  padding-top: 100px; /* altura fixa do header */
}

/* -------------------------------------------------------------------------
   Superheader (telefone, e-mail e redes sociais) — como em saea.org.br.
   Só em telas largas (>=1410px, mesmo limiar do menu desktop): abaixo
   disso o header já fica apertado com toggle + Área Restrita, então a
   barra de topo fica escondida pra não competir por espaço.
   ------------------------------------------------------------------------- */
.site-supheader {
  display: none;
  background: #325598;
  color: #fff;
}
.site-supheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 40px;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 24px;
}
.site-supheader__contact { display: flex; align-items: center; gap: 24px; }
.site-supheader__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  /* Reset de <button> nativo — o link de telefone continua sendo <a>
     (esses resets não mudam nada nele), mas o de e-mail agora é um
     <button> (abre o dropdown "Fale conosco"). */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-supheader__contact-link:hover { color: var(--casj-amarelo); }
.site-supheader__contact-link i { font-size: 13px; }
.site-supheader__social { display: flex; align-items: center; gap: 14px; }
.site-supheader__social-icon { display: inline-flex; align-items: center; justify-content: center; }
.site-supheader__social-icon span {
  display: block;
  background-color: #fff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.site-supheader__social-icon:hover span { background-color: var(--casj-amarelo); }
.site-supheader__social-icon--insta span { width: 16px; height: 16px; }
.site-supheader__social-icon--face span { width: 8px; height: 15px; }

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1030;
  background: #fff;
  box-shadow: var(--casj-shadow);
}
/* A barra do WordPress (#wpadminbar) também é fixa no topo, mas isso só
   empurra o fluxo normal da página (via margin-top no <html>) — um elemento
   com position:fixed do tema, como o header, ignora esse deslocamento e
   fica colado em cima dela. Reaplica manualmente a mesma altura da barra
   admin (32px no desktop, 46px no mobile — breakpoint do próprio WP). */
body.admin-bar .site-header { inset-block-start: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { inset-block-start: 46px; }
}

/* A partir de 1410px o superheader aparece em fluxo normal (não fixo) e
   rola junto com a página — igual ao
   https://agostinianomendel.com.br/. Pra isso o header vira "sticky" em
   vez de "fixed": ele nasce logo abaixo do superheader e só gruda no
   topo quando o scroll o alcança, cobrindo o espaço que o superheader
   deixa. Sem isso precisaria empurrar o header com padding/offset fixo,
   e o superheader nunca sumiria ao rolar. Precisa vir depois da regra
   base .site-header acima, senão a cascata (mesma especificidade, ordem
   de origem) reseta a mudança. */
@media (min-width: 1410px) {
  .site-supheader { display: block; }
  .site-header { position: sticky; }
  body { padding-top: 0; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100px;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 24px;
}

.site-header__brand { flex-shrink: 0; }
.site-header__logo { height: 50px; width: auto; display: block; }

.site-nav { flex: 0 1 auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav__item { position: relative; }

/* O espaçamento entre itens (16px no Figma) vira padding-right em vez de
   "gap" no .site-nav__list — com gap, essa faixa fica sempre em branco,
   sem cobertura do azul de hover/ativo; como padding, o fundo do link
   cobre até a borda do próximo item, sem faixa "morta" entre as caixas. */
.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  background: none;
  border: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: var(--casj-cinza-texto);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
  text-transform: uppercase;
}
.site-nav__link:hover,
.site-nav__link.is-active {
  background: var(--casj-azul);
  color: #fff;
}

.site-nav__item--dropdown.is-open .site-nav__link {
  background: var(--casj-azul);
  color: #fff;
}

.site-nav__link--stacked {
  flex-direction: column;
  justify-content: center;
  gap: 0;
  line-height: 1.25;
  text-align: center;
}

/* SVG inline (Figma: dropdown-menu-arrow-Icon) com fill="currentColor" —
   evita mask-image/filter em SVG externo, que sob file:// é bloqueado por
   CORS e deixa a seta invisível mesmo com o include.js 100% offline. */
.site-nav__chevron {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.site-nav__chevron svg { display: block; width: 10px; height: 7px; }
.site-nav__item--dropdown.is-open .site-nav__chevron { transform: rotate(180deg); }

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  background: #fff;
  box-shadow: var(--casj-shadow);
  border-radius: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 10;
}
.site-nav__item--dropdown.is-open .site-nav__submenu {
  opacity: 1; visibility: visible;
}
.site-nav__submenu li + li { border-top: 1px solid #ececec; }
.site-nav__submenu a {
  display: block;
  padding: 14px 20px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.site-nav__submenu a:hover,
.site-nav__submenu a:focus,
.site-nav__submenu a.is-active {
  background: var(--casj-azul);
  color: #fff;
}

.site-header__restrita {
  flex-shrink: 0;
  border: 1px solid #000;
  border-radius: 100px;
  padding: 10px 20px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--casj-cinza-texto);
  text-decoration: none;
  white-space: nowrap;
  /* Reset do <button> nativo (o dropdown Bootstrap usa <button>, o
     fallback sem menu associado usa <a> — mesma classe pros dois). */
  background: none;
  cursor: pointer;
}
.site-header__restrita:hover,
.site-header__restrita.show {
  background: var(--casj-azul);
  border-color: var(--casj-azul);
  color: #fff;
}
.site-header__restrita.dropdown-toggle::after {
  margin-left: 8px;
  vertical-align: 2px;
}

.site-header__restrita-wrap { flex-shrink: 0; position: relative; }
.site-header__restrita-menu {
  /* data-bs-display="static" no botão (header.php) desliga o Popper —
     sem ele, o Bootstrap posiciona via CSS puro (top:100%), ancorado
     de verdade no botão, em vez do offset calculado pelo Popper que
     jogava o menu pra baixo do header em alguns navegadores/telas. */
  z-index: 1031;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 25, 44, .12);
}
.site-header__restrita-menu .dropdown-item {
  border-radius: 8px;
  padding: 10px 14px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--casj-cinza-texto);
}
.site-header__restrita-menu .dropdown-item:hover,
.site-header__restrita-menu .dropdown-item:focus,
.site-header__restrita-menu .dropdown-item.active {
  background: var(--casj-azul);
  color: #fff;
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  flex-shrink: 0;
}
.site-header__toggle span {
  display: block;
  height: 2px;
  background: var(--casj-cinza-texto);
  border-radius: 2px;
}

/* Botão da Área Restrita no mobile — ícone de pessoa (em vez do hamburguer,
   pra diferenciar visualmente do menu principal), separado na borda
   esquerda do header (mesmo padrão do site https://saea.org.br/), só
   visível abaixo do breakpoint mobile do header (ver media query abaixo). */
.site-header__restrita-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  flex-shrink: 0;
  color: var(--casj-cinza-texto);
  font-size: 24px;
}

/* Painel da Área Restrita no mobile (offcanvas à esquerda) — mesma largura
   total e mesmo ritmo de espaçamento do painel do menu principal
   (.site-nav__list / .site-nav__link, à direita). */
.site-header__restrita-offcanvas-title {
  margin: 48px 24px 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--casj-cinza-texto);
}
.site-header__restrita-offcanvas-list { list-style: none; margin: 0; padding: 0 0 12px; }
.site-header__restrita-offcanvas-list .dropdown-item {
  display: block;
  padding: 16px 24px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--casj-cinza-texto);
  text-decoration: none;
}
.site-header__restrita-offcanvas-list .dropdown-item:hover,
.site-header__restrita-offcanvas-list .dropdown-item:focus,
.site-header__restrita-offcanvas-list .dropdown-item.active {
  background: var(--casj-azul);
  color: #fff;
}

/* Painel mobile — o abrir/fechar (slide, foco, aria) é do Offcanvas do
   Bootstrap (classe base .offcanvas no <nav>, ver header.php); sem
   "offcanvas-xl" (seu breakpoint de 1200px é fixo e usa !important no CSS
   do Bootstrap, e o limiar aqui é 1410px). Controlamos a transição
   inteiramente com media queries próprias: aqui sobrepomos a
   largura/posição do painel pra cobrir a tela toda abaixo do header
   (Bootstrap por padrão usa um painel estreito de 400px). */
@media (max-width: 1409.98px) {
  .site-nav.offcanvas,
  .site-header__restrita-offcanvas {
    --bs-offcanvas-width: 100%;
    top: 100px !important;
    height: calc(100% - 100px) !important;
    overflow-y: auto;
  }
  .site-nav.offcanvas { border-left: 0; }
  .site-header__restrita-offcanvas { border-right: 0; }
}
.site-nav__close {
  position: absolute;
  top: 12px;
  right: 20px;
  z-index: 1;
}

@media (max-width: 1409.98px) {
  .site-nav__list { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 48px 0 12px; }
  .site-nav__link { height: auto; padding: 16px 24px; justify-content: space-between; }
  /* Links sem dropdown (CASJ INTERNATIONAL, ROTINA ESCOLAR, NOVOS ALUNOS) não
     têm chevron pra empurrar pro outro lado — sem isso, o space-between do
     .site-nav__link acima espalha as duas palavras nas pontas do menu. */
  .site-nav__link--stacked { flex-direction: row; justify-content: flex-start; gap: 4px; }
  .site-nav__link--stacked span:not(:last-child)::after { content: " "; }
  .site-nav__submenu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; display: none; background: #f8f9fb; }
  .site-nav__item--dropdown.is-open .site-nav__submenu { display: block; }
  .site-header__restrita,
  .site-header__restrita-wrap { display: none; }
  .site-header__inner { position: relative; justify-content: center; gap: 16px; }
  /* Logo centralizado, toggle fixo na borda direita (Figma: mobile) — o
     toggle sai do fluxo flex pra não empurrar o logo pro lado. */
  .site-header__toggle {
    display: flex;
    position: absolute;
    right: 24px;
    top: 50%;
    translate: 0 -50%;
  }
  /* Área Restrita: hamburguer próprio na borda esquerda, separado do menu
     principal (à direita) — mesmo padrão do https://saea.org.br/. */
  .site-header__restrita-toggle {
    display: flex;
    position: absolute;
    left: 24px;
    top: 50%;
    translate: 0 -50%;
  }
  /* Logo um pouco menor no mobile pra abrir espaço pros dois hamburguers
     nas bordas. .site-header__brand img cobre também o logo customizado via
     Customizer (the_custom_logo()), que não carrega a classe .site-header__logo. */
  .site-header__brand img { height: 40px; width: auto; }
}
@media (min-width: 1410px) {
  /* Logo fixo à esquerda, botão "Área Restrita" fixo à direita, e o menu
     centralizado no espaço que sobra entre os dois — com o flex simples
     (justify-content:center) de antes, o grupo logo+nav+restrita inteiro
     é que ficava centralizado, então o menu só parecia centralizado por
     coincidência (largura da logo ≈ largura do botão). */
  .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; }
  .site-header__brand { grid-column: 1; }
  .site-nav { grid-column: 2; display: flex; flex-direction: row; align-items: center; justify-content: center; }
  .site-header__restrita-wrap,
  .site-header__inner > .site-header__restrita { grid-column: 3; justify-self: end; }

  .site-nav__close { display: none; }
  /* A classe base .offcanvas (necessária para o JS do Bootstrap fechar o
     painel sem erro — sem ela, .btn-close/.hide() quebra) deixa o elemento
     permanentemente fixed+hidden mesmo em telas grandes, já que essa regra
     do Bootstrap não tem media query. Devolvemos o layout normal aqui a
     partir do nosso breakpoint customizado (1410px). */
  .site-nav.offcanvas {
    position: static;
    visibility: visible;
    transform: none;
    width: auto;
    height: auto;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
    border-left: 0;
  }
}
/* Entre 1410 e 1500px o menu horizontal ainda fica um pouco apertado —
   reduz só a fonte dos links e do botão "Área Restrita". De 1500px pra
   cima fica exatamente como no Figma, sem nenhuma redução. */
@media (min-width: 1410px) and (max-width: 1500px) {
  .site-nav__link { font-size: 13px; }
  .site-header__restrita { font-size: 13px; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--casj-azul-rodape-bar); color: #fff; }
.site-footer__top { padding-top: 100px; }
.site-footer__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.site-footer__brand-label { font-family: var(--font-body); font-size: 16px; margin: 0; }
.site-footer__brand-logos { display: flex; align-items: center; gap: 32px; }
.site-footer__logo { flex-shrink: 0; }
.site-footer__logo--saea { height: 81px; width: auto; }
.site-footer__logo--agostiniano { height: 57px; width: auto; }

.site-footer__follow { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.site-footer__follow span { font-family: var(--font-body); font-size: 16px; }
.site-footer__follow-icons { display: flex; gap: 8px; }
.site-footer__follow-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.site-footer__follow-icon:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.site-footer__follow-icon--insta img { width: 18px; height: 18px; display: block; }
.site-footer__follow-icon--face img { width: 9px; height: 16px; display: block; }
.site-footer__follow-icon--linkedin img { width: 15px; height: 13px; display: block; }
.site-footer__follow-icon--youtube img { width: 15px; height: 11px; display: block; }

.site-footer__divider { border-top: 1px solid rgba(255,255,255,.25); margin-block: 40px; padding: 0; }

.site-footer__row--contacts { padding-bottom: 60px; }

.site-footer__ctas { display: flex; gap: 48px; flex-wrap: wrap; }
.site-footer__cta {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 66px;
  width: 394px;
  max-width: 100%;
  padding-inline: 20px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease;
}
.site-footer__cta--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
}
.site-footer__cta--outline:hover {
  background: var(--casj-azul);
  border-color: var(--casj-azul);
}
.site-footer__cta--solid {
  background: rgba(146, 172, 207, .8);
  border: 1px solid transparent;
}
.site-footer__cta--solid:hover { background: rgba(146, 172, 207, 1); }
.site-footer__cta-icon { flex-shrink: 0; display: flex; }
.site-footer__cta-icon img { width: 28px; height: 28px; }
.site-footer__cta-text { display: flex; flex-direction: column; color: #fff; }
.site-footer__cta-text strong { font-size: 18px; font-weight: 600; }
.site-footer__cta-text span { font-size: 18px; }
.site-footer__cta-arrow { margin-left: auto; flex-shrink: 0; display: flex; }
.site-footer__cta-arrow img { width: 38px; height: 38px; transform: rotate(90deg); }
/* Dentro do dropdown "Fale conosco" a seta indica abrir/fechar o menu
   (pra baixo), não mais navegação (pro lado). */
.fale-conosco-dropdown .site-footer__cta-arrow img { transform: rotate(180deg); }

.site-footer__bottom {
  background: var(--casj-azul);
  text-align: center;
  padding: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
}
.site-footer__bottom a { color: #fff; }

.site-footer__ctas > .fale-conosco-dropdown { width: 394px; max-width: 100%; }
.site-footer__ctas > .fale-conosco-dropdown .site-footer__cta { width: 100%; }
@media (max-width: 991.98px) {
  .site-footer__row { justify-content: center; text-align: center; }
  .site-footer__follow { align-items: center; }
  .site-footer__ctas { width: 100%; justify-content: center; }
  .site-footer__cta { width: 100%; }
  .site-footer__ctas > .fale-conosco-dropdown { width: 100%; }
}
.site-footer__logo-divider { display: none; }
@media (max-width: 575.98px) {
  .site-footer__brand-block { align-items: center; }
  .site-footer__brand-logos { flex-direction: column; gap: 20px; }
  /* Figma (frame mobile, "Line 4"): traço fino entre os dois logos, só
     quando eles ficam empilhados. */
  .site-footer__logo-divider {
    display: block;
    width: 132px;
    height: 1px;
    background: rgba(255, 255, 255, .25);
  }

  /* Botões "Fale conosco" / "Agende uma visita" só aparecem no desktop —
     no frame mobile do Figma (ex: node 3689:6760) essa seção não existe.
     O .site-footer__divider some junto — sem os botões, ele ficaria "solto"
     entre o bloco de logos e a barra de copyright, sem nada pra separar. */
  .site-footer__row--contacts,
  .site-footer__divider { display: none; }
  /* Sem o divider/contacts (que davam o respiro de baixo), o bloco de
     logos + ícones sociais ficava colado na barra de copyright. */
  .site-footer__top { padding-bottom: 48px; }
}

/* -------------------------------------------------------------------------
   Botões flutuantes
   ------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: var(--casj-shadow);
  z-index: 1020;
}
.whatsapp-float:hover { color: #fff; filter: brightness(1.05); }

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 90px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--casj-azul);
  color: #fff;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 1020;
}
.back-to-top.is-visible { display: flex; }

/* -------------------------------------------------------------------------
   Botão CASJ (Figma: layer "BOTOES" — BOTAO 1 / hover BOTAO 1.1)
   ------------------------------------------------------------------------- */
/* Preenchido de azul sólido por padrão — sem variante vazada/outline. */
.btn-casj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 10px 36px;
  border: 2px solid var(--casj-azul);
  border-radius: 8px;
  background: var(--casj-azul);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-casj:hover {
  background: var(--casj-azul-escuro);
  border-color: var(--casj-azul-escuro);
  color: #fff;
}
/* .btn-casj--solid mantido por compatibilidade — hoje é idêntico ao padrão. */
.btn-casj--solid { background: var(--casj-azul); color: #fff; }
.btn-casj--solid:hover { background: var(--casj-azul-escuro); color: #fff; }

.btn-casj--outline { background: transparent; color: var(--casj-azul); }
.btn-casj--outline:hover { background: var(--casj-azul); border-color: var(--casj-azul); color: #fff; }

.btn-casj--vermelho { background: var(--casj-vermelho); border-color: var(--casj-vermelho); color: #fff; }
.btn-casj--vermelho:hover { background: var(--casj-azul-escuro); border-color: var(--casj-azul-escuro); color: #fff; }

/* Dropdown do botão "Fale conosco" (rodapé) — mesma linguagem visual do
   menu de Área Restrita no header (.site-header__restrita-menu). */
.fale-conosco-dropdown { position: relative; display: inline-block; }
.fale-conosco-menu {
  width: 100%;
  z-index: 1031;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  /* Mesmo tom translúcido do botão que abre o menu (.site-footer__cta--outline). */
  background: rgba(146, 172, 207, .95);
  box-shadow: 0 12px 32px rgba(11, 25, 44, .12);
}
/* Sem data-bs-display="static": o Popper decide a posição (e o
   Bootstrap marca isso em data-popper-placement no próprio menu), então
   quando não cabe embaixo ele vira "dropup" sozinho — só precisa inverter
   a margem pro espaçamento ficar do lado certo do botão. */
.fale-conosco-menu[data-popper-placement^="top"] { margin-top: 0; margin-bottom: 10px; }
.fale-conosco-menu__item {
  border-radius: 8px;
  padding: 10px 14px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  white-space: normal;
}
.fale-conosco-menu__item:hover,
.fale-conosco-menu__item:focus {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

/* -------------------------------------------------------------------------
   Card de vídeo com play (Figma: "CARD VIDEO") — reaproveitado na Home
   ("Bem-vindo") e em Sobre | Vídeo Institucional. A miniatura é definida
   por página via style="background-image:url(...)" na própria tag.
   ------------------------------------------------------------------------- */
.welcome-video {
  position: relative;
  max-width: 819px;
  margin: 48px auto 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 819 / 424;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-video::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.1); }
.welcome-video__play {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--casj-vermelho);
  font-size: 38px;
  transition: background-color .2s ease;
}
.welcome-video__play i { margin-left: 4px; }
.welcome-video:hover .welcome-video__play,
.welcome-video__play:hover {
  background: #fff;
}
@media (max-width: 575.98px) {
  /* Figma (frame mobile): o card de vídeo é quadrado no mobile (382x382),
     não a proporção larga (819/424) usada no desktop. */
  .welcome-video { aspect-ratio: 1 / 1; }
}

/* Placeholder "Em breve" — quando o vídeo institucional ainda não tem
   link/capa preenchidos no Customizer (ver casj_tem_video_institucional()). */
.welcome-video--placeholder { background: #eef2f7; cursor: default; }
.welcome-video__placeholder-text {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--casj-azul);
}

/* -------------------------------------------------------------------------
   Genéricos de página interna
   ------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,69,137,.55), rgba(18,69,137,.85));
}
.page-hero__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}

/* Variante de capa baixa (Figma: páginas de Ensino) — a foto de fundo já
   sai da exportação do Figma com o duotone azul aplicado, por isso remove
   o gradiente extra do .page-hero::before para não escurecer em dobro. */
.page-hero--solid::before { content: none; }

/* Altura fixa da capa em todas as páginas internas (Figma: "Capa-Paginasinternas",
   200px no Desktop e 95px no Mobile, node 3707:7438) — mesma altura pras duas
   variantes (com ou sem gradiente). */
@media (max-width: 767.98px) {
  .page-hero { height: 95px; }
  .page-hero__title { font-size: 16px; }
}

.section-eyebrow {
  display: inline-block;
  background: var(--casj-azul);
  color: #fff;
  border-radius: 100px;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  font-size: 36px;
}
@media (max-width: 991px) {
  .section-title { font-size: 28px; }
}

/* -------------------------------------------------------------------------
   Badge + título (Figma: "Mini title" + "Título" — pill azul, título 36px)
   ------------------------------------------------------------------------- */
.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--casj-azul);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 100px;
  margin-bottom: 12px;
}
/* Variante para usar sobre fundos escuros (ex: seção SAEA) */
.section-badge--inverse { background: #fff; color: var(--casj-azul); }
/* Variante amarela (Figma: páginas de Ensino, ex. "Educação Infantil") */
.section-badge--amber { background: var(--casj-amarelo); color: #fff; }
/* Variante ciano (Figma: páginas de Ensino, ex. "Ensino Fundamental Anos Iniciais") */
.section-badge--ciano { background: #87d5ea; color: #fff; }
/* Variante vermelha (Figma: páginas de Ensino, ex. "Ensino Fundamental Anos Finais") */
.section-badge--vermelho { background: var(--casj-vermelho); color: #fff; }
.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  font-size: 36px;
}
@media (max-width: 991px) {
  .section-heading { font-size: 28px; }
}