/* =========================================================================
   Rio Christian School — folha de estilo única do site. Carregada por todas
   as páginas: mexeu aqui, mudou em todas. Nenhuma página tem <style> próprio.
   ========================================================================= */

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#fff;
  color:#141414;
  -webkit-font-smoothing:antialiased;
}
img{display:block}

/* ---------- navbar branca com mega dropdown (porte do componente React) --------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:#fff;color:#000;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.nav-inner{
  max-width:1280px;margin-inline:auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:16px;
}
.nav-brand{display:flex;align-items:center;gap:10px;color:#000;text-decoration:none;flex:none}
.nav-brand img{width:36px;height:36px}
.nav-brand span{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:400px){.nav-brand span{font-size:.9rem;white-space:normal}}

.nav-menu{
  display:none;list-style:none;height:100%;position:relative;
  gap:24px;margin-inline:40px;
}
/* o menu de texto só entra a partir de 820px: entre 768 e ~790px a marca
   encostava em "Início"; abaixo disso fica o menu sanduíche */
@media(min-width:820px){.nav-menu{display:flex}}
/* os quatro itens ficam no centro exato da barra, independentemente da largura
   da marca à esquerda e do botão Entrar à direita */
.nav-inner{position:relative}
@media(min-width:820px){.nav-menu{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0}}
.nav-menu li{display:flex;align-items:center;height:100%}
.nav-menu a{
  padding-block:8px;font-size:.95rem;color:#000;text-decoration:none;
  transition:color .2s ease;
}
.nav-menu a:hover,.nav-menu li[data-open="true"] > a{color:#6b7280}
/* sublinhado único que desliza entre os itens (equivalente ao layoutId) */
.nav-menu li.nav-underline{
  display:block;position:absolute;bottom:0;left:0;width:0;height:2px;background:#000;
  opacity:0;pointer-events:none;
  transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}

.nav-actions{display:none;align-items:center;gap:12px;flex:none}
@media(min-width:820px){.nav-actions{display:flex}}
.nav-btn{
  display:inline-flex;align-items:center;
  padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
  background:transparent;color:#000;font-weight:700;font-size:.9rem;text-decoration:none;
  border:1px solid rgba(0,0,0,.35);
  /* a transição fica a cargo do JS magnético: ida rápida, volta com elástico */
  will-change:transform;
}
/* no drawer o botão precisa de contorno para não sumir no branco */
.nav-mobile-actions .nav-btn{justify-content:center}
/* botão "Entrar" escondido por enquanto (o HTML continua nas páginas) */
.nav-btn[href="/acesso/login/"]{display:none!important}

.nav-burger{
  display:flex;align-items:center;justify-content:center;
  padding:4px;background:none;border:none;color:#000;cursor:pointer;
}
@media(min-width:820px){.nav-burger{display:none}}
.nav-burger svg{width:24px;height:24px}

/* ---------- mega dropdown ---------- */
.nav-dropdown{
  display:none;position:absolute;top:64px;left:0;right:0;
  background:#fff;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
@media(min-width:820px){.nav-dropdown{display:block}}
.nav-dropdown[data-open="true"]{opacity:1;pointer-events:auto}
.nav-dropdown-inner{max-width:1280px;margin-inline:auto;padding:24px;will-change:transform,opacity}
.nav-dropdown-title{
  display:inline-block;margin-bottom:16px;
  font-size:1.125rem;font-weight:700;color:#000;text-decoration:none;
  transition:color .2s ease;
}
.nav-dropdown-title:hover{color:#6b7280}
.nav-dropdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media(min-width:768px){.nav-dropdown-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.nav-dropdown-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nav-dropdown-col h3{margin-bottom:8px;font-size:.875rem;font-weight:600;color:#6b7280}
.nav-dropdown-col ul{list-style:none}
.nav-dropdown-col li{margin-bottom:4px}
.nav-dropdown-col a{
  display:block;padding-block:4px;font-size:.875rem;color:#000;text-decoration:none;
  transition:color .2s ease;
}
.nav-dropdown-col a:hover{color:#6b7280}

/* ---------- drawer mobile ---------- */
.nav-mobile{position:fixed;inset:0;z-index:60;display:none}
.nav-mobile[data-open="true"]{display:block}
@media(min-width:820px){.nav-mobile{display:none}}
.nav-mobile-overlay{
  position:absolute;inset:0;background:rgba(255,255,255,.95);
  opacity:0;transition:opacity .3s ease;
}
.nav-mobile[data-shown="true"] .nav-mobile-overlay{opacity:1}
.nav-mobile-panel{
  position:absolute;top:0;right:0;height:100%;width:100%;
  display:flex;flex-direction:column;
  padding:24px;overflow-y:auto;
  background:#fff;color:#000;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.nav-mobile[data-shown="true"] .nav-mobile-panel{transform:translateX(0)}
.nav-mobile-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;color:#000;cursor:pointer;padding:4px;
}
.nav-mobile-close svg{width:24px;height:24px}
.nav-mobile-list{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:16px}
.nav-mobile-link,.nav-mobile-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding-block:8px;font-size:1rem;font-weight:700;
  background:none;border:none;color:#000;text-align:left;cursor:pointer;text-decoration:none;
}
.nav-mobile-toggle svg{width:16px;height:16px;transition:transform .2s ease}
.nav-mobile-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.nav-mobile-sub{height:0;overflow:hidden;transition:height .3s ease-in-out}
/* as colunas do dropdown do desktop viram uma lista só, com o mesmo espaço
   entre todos os itens (antes a margem de cada coluna formava grupinhos).
   O respiro de cima e de baixo é padding, não margem: o nav.js mede a altura
   do bloco pelo offsetHeight, e margem ficava de fora e cortava o último item */
.nav-mobile-sub-inner{display:flex;flex-direction:column;gap:4px;padding:8px 0 8px 16px;border-left:1px solid rgba(0,0,0,.15)}
.nav-mobile-col{margin:0}
.nav-mobile-col h4{margin-bottom:4px;font-size:.75rem;font-weight:600;color:#6b7280}
.nav-mobile-col ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.nav-mobile-col a{display:block;padding-block:4px;font-size:.875rem;color:#374151;text-decoration:none}
.nav-mobile-col a:hover{color:#000}
.nav-mobile-actions{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.12);display:flex;flex-direction:column;gap:12px}

/* ---------- conteúdo das páginas internas ---------- */
/* o padding-top reserva a faixa da navbar fixa */
.page-content{
  min-height:72vh;
  padding:104px 24px 80px;
  max-width:1180px;margin-inline:auto;width:100%;
}
@media(max-width:767px){
  .page-content{padding-top:92px}
}
body:has(> main.page-content):not(:has(main.page-content > *)){display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
main.page-content:not(:has(*)){flex:1 0 auto;min-height:0}

/* ---------- páginas de conteúdo: cabeçalho e seções ---------- */
.page-head{position:relative;max-width:820px;margin-bottom:64px}
.page-kicker{
  margin-bottom:12px;font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#6b7280;
}
.page-title{font-size:clamp(2rem,5vw,3.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.page-lead{margin-top:20px;max-width:65ch;font-size:1.05rem;line-height:1.6;color:#374151}
.section{margin-top:96px}
@media(max-width:767px){.section{margin-top:72px}}
.section-title{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.section-sub{margin-top:8px;max-width:60ch;color:#6b7280;line-height:1.6}

/* ---------- linha do tempo ---------- */
.timeline{display:flex;flex-direction:column;gap:96px}
.tl-head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 16px;
  padding-block:12px;background:#fff;
}
@media(min-width:768px){
  /* o ano acompanha a leitura do bloco, sob a navbar */
  .tl-head{position:sticky;top:64px;z-index:3}
}
.tl-year{font-size:clamp(2.5rem,7vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.tl-place{font-size:1.1rem;font-weight:600;color:#374151}
.tl-meta{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
.tl-badge{
  padding:4px 12px;border-radius:999px;background:#000;color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.tl-text{margin-top:20px;max-width:65ch;font-size:1rem;line-height:1.7;color:#374151}
.tl-list{margin-top:16px;max-width:65ch;list-style:none;display:flex;flex-direction:column;gap:8px}
.tl-list li{position:relative;padding-left:20px;line-height:1.6;color:#374151}
.tl-list li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#000}

/* ---------- carrossel de cards (porte do componente React, sem setas) ----------
   O trilho desliza sozinho o tempo todo: o JS duplica os cards e a animação
   arrasta exatamente metade da largura, então o laço é invisível. Passar o
   mouse congela o deslize — é o que dá tempo de ler o texto que sobe no card. */
/* sangra até as bordas da janela, saindo da coluna de texto. 100vw inclui a
   barra de rolagem, então --sbw (medido no JS) desconta a largura dela e evita
   rolagem horizontal onde a barra ocupa espaço. */
.cards{
  overflow:hidden;margin-top:32px;--cards-speed:46s;
  width:calc(100vw - var(--sbw, 0px));
  margin-inline:calc(50% - (100vw - var(--sbw, 0px)) / 2);
}
.cards-track{display:flex;gap:16px;width:max-content;animation:cards-drift var(--cards-speed) linear infinite}
.cards:hover .cards-track{animation-play-state:paused}
@keyframes cards-drift{ to{ transform:translateX(calc(-50% - 8px)) } }
@media(prefers-reduced-motion:reduce){
  .cards-track{animation:none}
  .cards{overflow-x:auto}
}
.card{
  position:relative;flex:0 0 clamp(250px,29vw,370px);
  border-radius:18px;overflow:hidden;background:#f3f4f6;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.45);
}
.card-media{width:100%;aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.06)}
/* o texto sobe cobrindo a foto, como no componente original */
.card-note{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:22px;background:rgba(0,0,0,.8);color:#fff;
  font-size:.9rem;line-height:1.55;
  transform:translateY(100%);transition:transform .35s ease;
}
.card:hover .card-note{transform:translateY(0)}
/* espaço reservado para foto que ainda não entrou */
.card-media .slot{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:#f3f4f6;border:1px dashed rgba(0,0,0,.18);
  color:#9ca3af;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- entrada por scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- texto editorial (sem cartões) ---------- */
.prose{margin-top:28px;max-width:68ch}
.prose p{font-size:1.02rem;line-height:1.75;color:#374151}
.prose p + p{margin-top:18px}
.prose a,.tl-list a{color:#000;font-weight:600}

/* ---------- lista que abre ao clicar (exames) ----------
   Só o nome aparece; o texto desce ancorado na própria linha. */
.accordion{margin-top:32px;border-top:1px solid rgba(0,0,0,.12)}
.acc-item{border-bottom:1px solid rgba(0,0,0,.12)}
.acc-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:20px 0;border:0;background:none;cursor:pointer;
  font:inherit;text-align:left;color:#111;
}
.acc-trigger span{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;transition:color .2s ease}
.acc-trigger:hover span{color:#6b7280}
.acc-trigger svg{width:20px;height:20px;flex:none;transition:transform .3s ease}
.acc-trigger[aria-expanded="true"] svg{transform:rotate(45deg)}
.acc-panel{height:0;overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1)}
.acc-inner{max-width:68ch;padding-bottom:24px}
.acc-tag{margin-bottom:10px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b7280}
.acc-inner p:not(.acc-tag){font-size:1.02rem;line-height:1.75;color:#374151}

/* ---------- logos de parceiros, sem legenda ---------- */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:40px 64px;margin-top:36px}
.logo-row img{width:180px;height:96px;object-fit:contain}
@media(max-width:600px){
  .logo-row{gap:28px 36px}
  .logo-row img{width:130px;height:72px}
}

/* ---------- números, roteiro e "o que está incluso" ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:36px}
.stat{padding:24px;border-radius:16px;background:#f6f6f7}
.stat-num{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat-label{margin-top:10px;font-size:.85rem;line-height:1.5;color:#6b7280}

.steps{margin-top:36px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:24px 0;border-top:1px solid rgba(0,0,0,.1);
}
.step:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
.step-num{
  width:34px;height:34px;border-radius:999px;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
}
.step-title{margin-bottom:6px;font-weight:700}
.step-text{color:#374151;line-height:1.65}

.checks{display:grid;gap:14px;margin-top:32px;grid-template-columns:1fr}
@media(min-width:768px){.checks{grid-template-columns:1fr 1fr}}
.check{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:18px;border-radius:14px;background:#f6f6f7}
.check svg{width:20px;height:20px;margin-top:2px;flex:none}
.check strong{display:block;margin-bottom:4px}
.check span{font-size:.9rem;line-height:1.5;color:#6b7280}

.figure{margin-top:36px}
.figure img{width:100%;border-radius:20px}
.figure figcaption{margin-top:12px;font-size:.85rem;color:#6b7280}
.partner-logo{height:40px;width:auto;margin-top:32px}

/* ---------- vídeo em destaque ---------- */
.video-slot{
  position:relative;margin-top:32px;width:100%;aspect-ratio:16/9;
  border-radius:22px;overflow:hidden;background:#0f0f0f;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);text-align:center;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.video-slot video{width:100%;height:100%;object-fit:cover}
/* vídeo do YouTube: mesma moldura do espaço reservado */
.video-embed{
  position:relative;margin-top:32px;width:100%;aspect-ratio:16/9;
  border-radius:22px;overflow:hidden;background:#0f0f0f;
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Spotify ---------- */
.split{display:grid;gap:36px;margin-top:36px;grid-template-columns:1fr}
.page-content > .split:first-child{margin-top:0}
@media(min-width:980px){
  .split{grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
  /* a coluna da direita acompanha a leitura do texto ao lado */
  .split-side{position:sticky;top:88px}
}
.split-text > p + p{margin-top:18px}
.split-text p{color:#374151;line-height:1.75}
.spotify-embed{
  width:100%;border:0;border-radius:16px;
  border:1px solid rgba(0,0,0,.1);background:#fff;
}
.spotify-row{display:grid;gap:20px;margin-top:32px;grid-template-columns:1fr}
@media(min-width:900px){.spotify-row{grid-template-columns:1fr 1fr}}
.spotify-row iframe{width:100%;border:0;border-radius:14px}

/* ---------- tela de login (porte do componente React) ----------
   Metade imagem, metade formulário; no mobile a imagem sai e sobra o
   formulário centralizado. */
.login-split{
  display:flex;width:100%;
  min-height:calc(100vh - 64px);margin-top:64px;
}
.login-media{display:none;flex:1;overflow:hidden}
@media(min-width:768px){.login-media{display:block}}
.login-media img{width:100%;height:100%;object-fit:cover}
.login-side{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px}
@media(min-width:768px){.login-media{flex:0 0 50%;position:relative}.login-media img{position:absolute;inset:0}}
.login-form{width:min(384px,100%);display:flex;flex-direction:column;align-items:center}
.login-title{font-size:2.25rem;font-weight:500;letter-spacing:-.02em;color:#111}
.login-sub{margin-top:12px;font-size:.875rem;color:rgba(107,114,128,.9);text-align:center}
.login-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:48px;margin-top:32px;border:none;border-radius:999px;
  background:rgba(107,114,128,.1);cursor:pointer;
  font-size:.9rem;font-weight:600;color:#111;
  transition:background .2s ease;
}
.login-google:hover{background:rgba(107,114,128,.16)}
.login-google svg{width:20px;height:20px}
.login-divider{display:flex;align-items:center;gap:16px;width:100%;margin-block:20px}
.login-divider i{flex:1;height:1px;background:rgba(209,213,219,.9)}
.login-divider span{font-size:.875rem;color:rgba(107,114,128,.9);white-space:nowrap}
.login-field{
  display:flex;align-items:center;gap:8px;
  width:100%;height:48px;padding-left:24px;overflow:hidden;
  border:1px solid rgba(209,213,219,.6);border-radius:999px;
  transition:border-color .2s ease;
}
.login-field:focus-within{border-color:rgba(0,0,0,.5)}
.login-field + .login-field{margin-top:24px}
.login-field input{
  flex:1;height:100%;border:none;background:transparent;outline:none;
  font-family:inherit;font-size:.875rem;color:#111;
}
.login-field input::placeholder{color:rgba(107,114,128,.8)}
.login-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;margin-top:32px;font-size:.875rem;color:rgba(107,114,128,.9);
}
.login-row label{display:flex;align-items:center;gap:8px;cursor:pointer}
.login-row a{color:inherit;text-decoration:underline}
.login-submit{
  width:100%;height:44px;margin-top:32px;border:none;border-radius:999px;
  background:#000;color:#fff;font-family:inherit;font-size:.9rem;font-weight:700;
  cursor:pointer;transition:opacity .2s ease;
}
.login-submit:hover{opacity:.9}
.login-help{margin-top:16px;font-size:.875rem;color:rgba(107,114,128,.9);text-align:center}
.login-help a{color:#111;font-weight:600}
/* A-48: aviso "Em breve" do login desarmado. Escondido até alguém tentar entrar;
   sem JavaScript, aparece quando o botão Entrar recebe foco. */
.login-aviso{display:none;margin-top:12px;font-size:.875rem;font-weight:600;color:#111;text-align:center}
.login-submit:focus + .login-aviso,.login-aviso.is-on{display:block}

/* ---------- páginas institucionais: tipografia editorial ---------- */
/* frase de impacto no meio do texto */
.statement{
  margin-block:96px;max-width:22ch;
  font-size:clamp(1.9rem,4.4vw,3.3rem);font-weight:600;letter-spacing:-.035em;line-height:1.12;color:#111;
}
.statement em{font-style:normal;color:#9ca3af}
@media(max-width:767px){.statement{margin-block:72px}}

/* versículo em destaque */
.verse{margin-block:72px;max-width:32ch}
.verse p{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:500;letter-spacing:-.025em;line-height:1.25;color:#111}
.verse cite{display:block;margin-top:18px;font-style:normal;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b7280}

/* quatro direções de Lucas 2:52: só um fio no topo de cada coluna */
.directions{display:grid;gap:36px;margin-top:48px;grid-template-columns:1fr}
@media(min-width:700px){.directions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.directions{grid-template-columns:repeat(4,minmax(0,1fr))}}
.direction{padding-top:20px;border-top:2px solid #111}
.direction h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.direction p{margin-top:10px;font-size:.95rem;line-height:1.65;color:#4b5563}

/* lista numerada editorial (valores, capítulos, passos do PEI) */
.numbered{margin-top:40px;border-top:1px solid rgba(0,0,0,.12)}
.num-item{display:grid;gap:8px 32px;padding:36px 0;border-bottom:1px solid rgba(0,0,0,.12)}
@media(min-width:760px){.num-item{grid-template-columns:120px minmax(0,1fr)}}
/* lista sem números (Base Cristã): o texto continua na mesma posição, com a
   coluna do número vazia à esquerda */
@media(min-width:760px){.numbered.is-plain .num-item > div{grid-column:2}}
.num{font-size:clamp(2.2rem,4vw,3rem);font-weight:300;letter-spacing:-.04em;line-height:1;color:#9ca3af;font-variant-numeric:tabular-nums}
.num-item h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.num-item p{margin-top:10px;max-width:64ch;font-size:1.02rem;line-height:1.75;color:#374151}
.num-item p + p{margin-top:14px}

/* pilar: nome grande grudado à esquerda, texto rolando à direita */
.pillar{display:grid;gap:24px 64px;padding-block:88px;border-top:1px solid rgba(0,0,0,.12)}
@media(min-width:980px){
  .pillar{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .pillar-head{position:sticky;top:104px;align-self:start}
}
.pillar-kicker{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b7280}
.pillar-name{margin-top:12px;font-size:clamp(2.3rem,5vw,3.8rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.pillar-pt{margin-top:14px;font-size:1.05rem;color:#6b7280}
.pillar-body .prose{margin-top:0}
.pillar-body .tl-list{margin-top:28px}
.pillar-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px}
/* mesmos botões do "Entrar" da navbar */
.pillar-links a{
  display:inline-flex;align-items:center;
  padding:8px 20px;border-radius:999px;border:1px solid rgba(0,0,0,.35);
  background:transparent;color:#000;font-weight:700;font-size:.9rem;text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
  will-change:transform;
}
.pillar-links a:hover{border-color:#000;background:rgba(0,0,0,.04)}

/* selo no alto da página */
.seal-figure{display:flex;justify-content:center;margin-block:40px 24px}
.seal-figure img{width:min(300px,68vw);height:auto;will-change:transform}

/* retrato ao lado do texto */
.portrait{display:grid;gap:32px 64px;align-items:center;margin-top:48px}
@media(min-width:900px){
  .portrait{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .portrait.is-flipped{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .portrait.is-flipped .portrait-media{order:2}
}
.portrait-media{aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#f3f4f6}
.portrait-media img{width:100%;height:100%;object-fit:cover}
.portrait-media .slot{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(0,0,0,.18);border-radius:22px;
  color:#9ca3af;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.portrait .prose{margin-top:0}

/* reportagem citada */
.press{margin-top:40px;max-width:68ch;padding-left:24px;border-left:2px solid #111}
.press-source{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b7280}
.press blockquote{margin-top:12px;font-size:1.3rem;font-weight:500;letter-spacing:-.02em;line-height:1.45;color:#111}
.press a{display:inline-block;margin-top:14px;font-weight:700;color:#000}

/* convite no fim da página */
/* botão padrão do site: pílula com o contorno cinza do "Entrar", texto preto em
   bold, mesmo tamanho em todas as páginas (só a distância de cima muda por seção).
   .is-claro é a versão para fundo escuro ou foto (texto e contorno brancos). */
.soft-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  padding:14px 26px;border-radius:999px;border:1px solid rgba(0,0,0,.35);background:transparent;
  font-size:1rem;line-height:1.2;font-weight:700;color:#000;text-decoration:none;cursor:pointer;transition:background .25s ease;
}
.soft-cta:hover{background:rgba(0,0,0,.05)}
.soft-cta.is-claro{color:#fff;border-color:rgba(255,255,255,.45)}
.soft-cta.is-claro:hover{background:rgba(255,255,255,.1)}

/* link para a próxima página da seção */
.next-page{display:block;margin-top:120px;padding-top:40px;border-top:1px solid rgba(0,0,0,.12);color:#111;text-decoration:none}
.next-page span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b7280}
.next-page strong{display:inline-block;margin-top:10px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-.035em;transition:transform .35s ease}
.next-page:hover strong{transform:translateX(10px)}
@media(max-width:767px){.next-page{margin-top:72px}}

.num-item a{color:#000;font-weight:600}
.press + .press{margin-top:32px}
.verse + .prose{margin-top:0}

/* ---------- texto só para leitor de tela ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- versículo na primeira tela (Missão e valores) ----------
   Ocupa só a altura visível abaixo da navbar fixa de 64px. A margem negativa
   devolve a parte do padding-top de .page-content que passa da navbar; sem
   ela, o versículo ficaria abaixo do centro da tela. svh desconta as barras do
   navegador no celular; quem não conhece svh fica com o vh da linha de cima. */
.verse-hero{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100vh - 64px);
  min-height:calc(100svh - 64px);
  margin-top:-40px;              /* 104px de padding − 64px da navbar */
  padding-block:32px;
  text-align:left;
}
@media(max-width:767px){
  .verse-hero{margin-top:-28px}  /* 92px de padding − 64px da navbar */
}
/* como no exemplo do Link Preview do Aceternity: bloco centralizado na tela,
   texto alinhado à esquerda dentro dele, corrido em peso leve; só as três
   expressões ganham negrito */
/* o bloco abraça o texto: a linha mais longa dita a largura, e a referência
   alinhada à direita cai exatamente no fim do versículo */
.verse-hero-quote{width:fit-content;max-width:100%}
.verse-hero-quote p{
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#111;
}
/* quebra depois de "pois": "no tempo próprio colheremos, se não desanimarmos"
   vira a linha mais longa, em duas linhas. No celular o texto quebra sozinho. */
@media(max-width:767px){.verse-break{display:none}}
.verse-hero-quote cite{
  display:block;margin-top:24px;font-style:normal;text-align:right;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b7280;
}
/* celular: com as três palavras em destaque abrindo linha, o texto à esquerda
   ficava em escadinha. Aqui ele fica centralizado, com linhas de tamanho
   parecido, e a referência centralizada embaixo */
@media(max-width:767px){
  .verse-hero-quote{text-align:center}
  .verse-hero-quote p{font-size:1.375rem;text-wrap:balance}
  .verse-hero-quote cite{text-align:center}
}

/* vídeo de fundo, de borda a borda da janela, visível desde o início */
.verse-hero-media{
  position:absolute;top:0;bottom:0;left:50%;z-index:-1;
  width:calc(100vw - var(--sbw, 0px));transform:translateX(-50%);
  overflow:hidden;background:#2b2b2b;
}
.verse-hero-video,.verse-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
/* mídia que já vem com filtro (Chapel, Prédio): sem o véu escuro por cima */
.verse-hero.no-veil .verse-hero-media::after{display:none}
/* palavras-chave em vermelho degradê, como o "fazer o bem" da Missão, mas sem
   abrir janela (não é link) */
.verse-accent{
  font-weight:700;background-image:linear-gradient(to bottom right,#b91c1c,#ef4444);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.verse-hero .verse-accent{background-image:linear-gradient(to bottom right,#ff8080,#f43f3f)}
/* o vídeo é claro (água em tons de cinza) e o texto é branco: o véu dá contraste */
.verse-hero-media::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.42)}
/* o versículo entra com um fade só, assim que a página abre */
.verse-hero-quote{animation:verse-hero-in .9s ease .15s both}
@keyframes verse-hero-in{from{opacity:0}to{opacity:1}}
.verse-hero-quote p,.verse-hero .lp-trigger{color:#fff}
.verse-hero-quote cite{color:rgba(255,255,255,.8)}
/* sobre a água escura, o vermelho escuro do degradê some: aqui ele é mais claro */
.verse-hero .lp-trigger.is-accent strong{background-image:linear-gradient(to bottom right,#ff8080,#f43f3f)}
@media(prefers-reduced-motion:reduce){
  .verse-hero-quote{animation:none}
}

/* palavra do versículo que abre a janela */
.lp-trigger{
  color:#000;cursor:pointer;text-decoration:none;
  /* numa linha só: a janela se centraliza na caixa da palavra, e uma expressão
     partida em duas linhas teria o centro no vazio */
  white-space:nowrap;
}
.lp-trigger strong{font-weight:700}
/* a primeira expressão leva o degradê; no original é roxo→rosa, aqui em vermelhos da marca */
.lp-trigger.is-accent strong{
  background-image:linear-gradient(to bottom right,#b91c1c,#ef4444);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lp-trigger:focus-visible{outline:2px solid #111;outline-offset:4px;border-radius:4px}

/* ---------- janela do versículo (porte do Link Preview do Aceternity) ----------
   O ui.js posiciona a janela como o Popper do Radix (fixed, 10px acima da
   palavra) e anima a parte interna com molas. Fechada, some e sai do Tab.
   Ela é movida para logo depois da palavra, dentro do parágrafo do versículo,
   por isso zera o que herdaria dele (tamanho, peso, tracking, centralização). */
.lp-card{
  position:fixed;top:0;left:0;z-index:40;   /* abaixo da navbar (50) */
  display:block;width:240px;
  visibility:hidden;pointer-events:none;
  font-size:.8rem;font-weight:400;letter-spacing:0;line-height:1.45;
  text-align:left;white-space:normal;color:#374151;text-decoration:none;
}
.lp-card.is-shown{visibility:visible}
.lp-card.is-open{pointer-events:auto}
.lp-card:focus{outline:none}
.lp-inner{
  display:block;padding:4px;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
  /* shadow-xl da moldura + shadow do cartão, somadas como no original */
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1),
             0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  /* estado inicial da entrada; daqui em diante quem escreve é o JS */
  opacity:0;transform:translateY(20px) scale(.6);
  transition:border-color .2s ease;
  will-change:transform,opacity;
}
.lp-card:hover .lp-inner{border-color:#e5e5e5}
.lp-card:focus-visible .lp-inner{outline:2px solid #111;outline-offset:2px}
.lp-media{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#f3f4f6}
/* escurece só a base da foto, para o título em branco ler em qualquer imagem */
.lp-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);pointer-events:none}
.lp-media img{width:100%;height:100%;object-fit:cover}
/* espaço reservado da foto, no mesmo desenho dos .slot do site */
.lp-slot{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border:1px dashed rgba(0,0,0,.18);border-radius:8px;
  color:#9ca3af;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
/* título dentro da foto, no canto inferior esquerdo; a legenda fica embaixo */
.lp-title{position:absolute;left:10px;bottom:8px;z-index:1;font-size:.9rem;font-weight:700;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.lp-caption{display:block;padding:8px 6px 4px}

/* seções que as janelas abrem: sem o Lenis, o scrollIntoView desconta a navbar */
.lp-target{scroll-margin-top:88px}
.lp-target:focus{outline:none}

/* ---------- A Chapel: seção principal de Missão e valores ----------
   Mais respiro antes, título e abertura maiores que os das outras seções. */
.section-feature{margin-top:160px}
.feature-title{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.04em;line-height:1.02}
.section-feature .portrait{margin-top:64px}

/* estudo bíblico da Chapel, sem cartões. O
   versículo abre o bloco como título; embaixo, no desktop, o tema fica à
   esquerda só do texto explicativo e acompanha a leitura. */
.study-list{margin-top:96px}
/* cada tema ganha uma foto de fundo de ponta a ponta da tela (assets/estudo-1…4.jpg,
   provisórias), escurecida para o texto em branco ser lido */
.study-block{position:relative;isolation:isolate;padding-block:96px}
.study-bg{position:absolute;top:0;bottom:0;left:50%;z-index:-1;width:calc(100vw - var(--sbw, 0px));transform:translateX(-50%);overflow:hidden;background:#2b2b2b}
.study-bg img{display:block;width:100%;height:100%;object-fit:cover}
.study-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.6)}
/* versículo no estilo do da hero, em tamanho menor: peso leve, letras próximas,
   referência alinhada à direita no fim do versículo */
/* o bloco do versículo fica no centro da página; o texto, alinhado à esquerda dentro dele */
.study-block .verse{margin:0 auto 40px;width:fit-content;max-width:min(100%,40rem)}
.study-block .verse p{text-align:left}
.study-block .verse p{font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:300;letter-spacing:-.02em;line-height:1.45;color:#111}
.study-block .verse cite{margin-top:24px;text-align:right}
.study-body{display:grid;gap:16px 64px}
.study-body h4{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#111}
@media(min-width:980px){
  .study-body{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .study-body h4{position:sticky;top:104px;align-self:start}
}
.study-block .prose{margin-top:0}
.chapel-invite{margin-top:96px}

/* fecho: a frase de impacto encosta no convite logo abaixo dela */
.page-close .statement{margin-bottom:0}

/* ---------- Famílias: relatos em colunas (porte do testimonials-columns-1) ----------
   Cada coluna é um trilho que sobe sem parar; o ui.js duplica os cartões e só
   então liga a animação (.is-looping). A máscara apaga as pontas, para os
   cartões surgirem e sumirem sem corte seco. */
.tcols-head{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  max-width:900px;margin-inline:auto;text-align:center;
  padding-top:0;
}
.tcols-tag{padding:4px 16px;border:1px solid rgba(0,0,0,.12);border-radius:8px;line-height:1.5}
/* cresce em degraus, como as classes de tamanho do original (xl até 5xl) */
.tcols-title{margin-top:20px;font-size:1.25rem;line-height:1.75rem;font-weight:700;letter-spacing:-.05em;color:#111}
.tcols-head > .tcols-title:first-child{margin-top:0}
@media(min-width:640px){.tcols-title{font-size:1.5rem;line-height:2rem}}
@media(min-width:768px){.tcols-title{font-size:1.875rem;line-height:2.25rem}}
@media(min-width:1024px){.tcols-title{font-size:2.25rem;line-height:2.5rem}}
@media(min-width:1280px){.tcols-title{font-size:3rem;line-height:1}}
.tcols-sub{margin-top:20px;max-width:62ch;font-size:1.05rem;line-height:1.6;opacity:.75}
.tcols-wrap{
  display:flex;justify-content:center;gap:24px;margin-top:80px;
  max-height:740px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
}
.tcols-col{flex:0 1 320px;min-width:0}
.tcols-col.is-md,.tcols-col.is-lg{display:none}
@media(min-width:768px){.tcols-col.is-md{display:block}}
@media(min-width:1024px){.tcols-col.is-lg{display:block}}
/* A-18: velocidade de cada coluna, antes em style="" no HTML (CSP sem unsafe-inline) */
.tcols-col--15s{--tcols-duration:15s}
.tcols-col--17s{--tcols-duration:17s}
.tcols-col--19s{--tcols-duration:19s}
/* padding-bottom igual ao gap: é o que faz o -50% cair exatamente no começo
   da cópia (a conta está no ui.js) */
.tcols-track{display:flex;flex-direction:column;gap:24px;padding-bottom:24px}
/* o movimento é feito no ui.js (requestAnimationFrame): roda sempre, desacelera
   com o mouse por cima e pode ser arrastado com o mouse */
.tcols-wrap.is-looping .tcols-track{will-change:transform}
@media(hover:hover){.tcols-wrap.is-looping{cursor:grab}}
.tcols-wrap.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.tcols-wrap:focus{outline:none}
.tcols-wrap:focus-visible{outline:2px solid #111;outline-offset:-2px}
.tcard{
  width:100%;max-width:320px;padding:40px;border-radius:24px;
  border:1px solid rgba(0,0,0,.1);background:#fff;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  line-height:1.5;color:#141414;
}
.tcard-foot{display:flex;align-items:center;gap:8px;margin-top:20px}
/* foto redonda; enquanto não há foto, as iniciais num círculo reservado */
.tcard-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:#f3f4f6;border:1px dashed rgba(0,0,0,.18);object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:.8rem}
img.tcard-avatar{border:0}
.tcard-who{display:flex;flex-direction:column}
.tcard-name{font-weight:500;letter-spacing:-.025em;line-height:1.25rem}
.tcard-role{letter-spacing:-.025em;line-height:1.25rem;opacity:.6}
@media(prefers-reduced-motion:reduce){
  /* parado não há laço: as cópias e a máscara das pontas só atrapalhariam a leitura */
  .tcols-wrap{max-height:none;-webkit-mask-image:none;mask-image:none}
  .tcols-track > [aria-hidden="true"]{display:none}
}

/* versículo numa linha só: o tamanho da letra acompanha a largura da coluna.
   O texto de Lucas 2:52 mede cerca de 35 vezes o tamanho da fonte; dividir a
   largura por 36,5 deixa folga. No celular ele quebra normalmente. */
@media(min-width:768px){
  .verse.is-one-line{max-width:none}
  .verse.is-one-line p{white-space:nowrap;font-size:calc((min(100vw - var(--sbw, 0px), 1180px) - 48px) / 36.5)}
}

/* texto corrido que ocupa a largura toda da coluna, sem o limite de leitura */
.prose.is-wide{max-width:none}

/* ---------- rodapé das páginas internas ---------- */
.site-footer{
  position:relative;width:100%;
  border-top:1px solid rgba(20,20,20,.08);
  background:#fff;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}
.site-footer-inner{
  max-width:1180px;margin-inline:auto;
  padding:40px 24px 24px;
  display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;
}
@media(min-width:768px){
  .site-footer-inner{flex-direction:row;justify-content:space-between;text-align:left}
}
.site-footer-brand{display:flex;align-items:center;gap:12px;color:#141414;text-decoration:none}
.site-footer-brand img{width:48px;height:48px}
.site-footer-brand span{font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.site-footer-social{display:flex;align-items:center;gap:12px}
.site-footer-social a{
  width:42px;height:42px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(20,20,20,.1);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.3);
  transition:transform .25s ease;
}
.site-footer-social a:hover{transform:translateY(-2px)}
.site-footer-social svg{width:20px;height:20px}
.site-footer-bottom{
  border-top:1px solid rgba(20,20,20,.06);
  padding:18px 24px 28px;text-align:center;
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(20,20,20,.45);
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:60;
  width:58px;height:58px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.18);
  transition:transform .3s ease,box-shadow .3s ease;
}
.wa-float:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 18px 40px -10px rgba(37,211,102,.65), 0 6px 16px rgba(0,0,0,.22);
}
.wa-float svg{width:30px;height:30px}
@media(max-width:767px){
  .wa-float{width:52px;height:52px}
  .wa-float svg{width:27px;height:27px}
}

/* =========================================================================
   Estilos da home (Scroll Parallax Layer): hero de scroll-reveal e rodapé
   cinematográfico. Só valem onde a marcação existe — as outras páginas
   carregam as regras mas nenhum seletor casa.
   ========================================================================= */

html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
/* CSS recomendado pelo Lenis: parado (menu mobile aberto) a página não rola;
   durante a rolagem suave, vídeo e player não roubam a roda do mouse */
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}
/* a home é a única com fundo escuro por baixo (o hero e o rodapé
   cinematográfico são brancos e cobrem a viewport inteira) */
body.home{background:#0f0f0f;color:#efeeec}

/* ================= Hero (scroll-reveal em todas as larguras) ================= */
.mhero{display:block;position:relative;width:100%;height:200vh}
@media(max-width:767px){
  /* como tudo abre de uma vez na primeira rolagem, não é preciso um trecho
     longo de scroll só para a animação acontecer */
  .mhero{height:140vh}
  /* no mobile a página termina no próprio hero: a frase, o botão e o
     copyright vivem dentro dele, então o rodapé longo é dispensado */
  .footer-curtain{display:none}
}
.mhero-sticky{
  position:sticky;top:0;left:0;height:100vh;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  /* padding-top reserva a faixa da navbar fixa (top + altura da pílula mobile):
     em telas baixas a centralização empurraria o título para trás dela */
  padding:76px 0 24px;
  /* branco com a mesma grade cinza-clara do rodapé, para dar continuidade */
  background-color:#fff;
  background-image:
    linear-gradient(to right, rgba(20,20,20,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,20,20,.035) 1px, transparent 1px);
  background-size:60px 60px;
}
/* título que começa como o monograma "RCS" e se abre em "Rio Christian School":
   os trechos .fill ("io ", "hristian ", "chool") crescem de largura 0 até a
   largura natural, empurrando R/C/S para os lados enquanto fazem fade in.
   flex + align-items:flex-end alinha tudo pela base (overflow:hidden quebraria
   o alinhamento por baseline se fosse inline-block). */
.mhero-title{
  display:flex;justify-content:center;align-items:flex-end;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:600;font-size:clamp(2.1rem,9vw,2.8rem);
  color:#141414;letter-spacing:-.02em;
  padding-inline:24px;
  /* fica acima da moldura da imagem, já que começa deslocado sobre ela */
  position:relative;z-index:2;
  /* a altura é fixada por JS no tamanho final: assim o font-size pode crescer
     durante a animação sem empurrar a imagem para baixo */
  will-change:transform;
}
/* estado inicial da entrada automática (o JS anima até 1 ao carregar) */
[data-mhero-title],[data-mhero-inset]{opacity:0}
.mhero-title span{display:block;line-height:1.05}
/* .fill é a "janela" que abre da largura 0 até a natural;
   .fi é o texto dentro dela, que desliza e desfoca ao entrar */
.mhero-title .fill{overflow:hidden;width:0}
.mhero-title .fill .fi{white-space:pre;opacity:0;transform:translateX(-10px);filter:blur(5px)}

/* galeria: no mobile só a imagem central existe; no wide o trilho ganha as
   laterais e vira arrastável */
.mhero-gallery{width:100%;display:flex;justify-content:center}
.mhero-track{display:flex;justify-content:center;align-items:center;width:100%}

/* A janela abre por ESCALA, não por clip-path: a moldura cresce de 0.1 até 1
   e a foto recebe a escala inversa, então ela aparenta ficar parada no tamanho
   real enquanto a "janela" se abre em volta. Tudo transform = composto na GPU,
   sem repaint — que era o que fazia a borda piscar no Safari do iPhone.
   O arredondamento vem de border-radius (que escala junto), não de clip-path. */
.mhero-inset{
  /* min(96%, 44vh): em telas baixas (SE etc.) limita a ALTURA da imagem
     (altura = largura × 1.25), para a coluna título+imagem+frase+botão caber */
  position:relative;width:min(96%,44vh);aspect-ratio:4/5;
  overflow:hidden;flex:none;
  will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:translate3d(0,0,0) scale(.1);
}
/* De propósito SEM will-change/backface aqui: promover a foto a camada
   própria faria o Safari rasterizá-la na escala dela (9×), gerando uma
   textura gigantesca e estourando a memória no iPhone. Sem promoção, ela é
   desenhada dentro da camada da moldura, na escala composta (~1×). */
.mhero-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(9);
}
.mhero-side{display:none}

/* linha fixa logo abaixo das fotos da hero, no celular e no desktop */
.mhero-claim{
  margin:0;text-align:center;padding-inline:24px;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:500;font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:-.01em;
  color:rgba(20,20,20,.62);
}

/* frase e botão entram em sequência (frase primeiro), cada um com sua opacidade */
.mhero-below{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;padding-inline:24px;
}
.mhero-tagline{
  display:flex;flex-direction:column;align-items:center;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:600;font-size:1.3rem;letter-spacing:-.03em;color:#141414;
  opacity:0;will-change:transform,opacity;
}
.mhero-legal{
  position:absolute;left:0;right:0;bottom:18px;
  text-align:center;opacity:0;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(20,20,20,.42);
}

/* wide: mesmo hero, mas o título abre só na horizontal (sem subir/crescer) e
   maior; a imagem central abre em uma GALERIA de arcos arrastável para os
   lados; frase/botão/copyright ficam por conta do rodapé cinematográfico */
@media(min-width:768px){
  .mhero-sticky{padding:80px 0 24px;gap:30px}
  .mhero-title{font-size:clamp(2.6rem,5.5vw,4.5rem)}

  /* recorta só na horizontal (para o loop) e deixa a vertical livre, senão o
     salto do dominó bate no limite da caixa e as fotos aparecem cortadas.
     "clip" é o que permite manter o outro eixo visible — com "hidden" o
     navegador força o eixo vizinho a auto e o corte volta */
  .mhero-gallery{cursor:grab;overflow-x:clip;overflow-y:visible}
  .mhero-gallery.dragging{cursor:grabbing}

  /* respiro entre o título e as fotos */
  .mhero-title{margin-top:-7px}
  .mhero-gallery{margin-top:7px}
  .mhero-track{width:max-content;gap:7px;will-change:transform}

  /* todas exatamente do mesmo tamanho e quadradas no fim; o arredondamento
     é animado no JS (arco → quadrado arredondado), igual para todas */
  .mhero-inset,.mhero-side{width:min(26vw,44vh);aspect-ratio:1/1}
  /* as laterais não passam pelo mecanismo de janela: nascem no tamanho final
     e entram pelo dominó, então não herdam a escala nem a contra-escala */
  .mhero-side{
    display:block;opacity:0;transform:none;
    will-change:transform,opacity;
  }
  .mhero-side .mhero-media{transform:translate3d(0,0,0) scale(1)}
  .mhero-media{user-select:none;-webkit-user-drag:none}

  .mhero-below,.mhero-legal{display:none}
}

/* ================= Cinematic Footer ================= */
.footer-curtain{
  /* bem mais alto que 100vh: cria um scroll longo e único, com espaço
     antes do conteúdo começar a aparecer aos poucos */
  position:relative;height:240vh;width:100%;
  clip-path:polygon(0% 0,100% 0%,100% 100%,0 100%);
}
.cine-footer{
  position:fixed;bottom:0;left:0;
  display:flex;flex-direction:column;justify-content:space-between;
  height:100vh;width:100%;overflow:hidden;
  /* fundo branco: a transição vem do fade branco no rodapé da imagem do hero */
  background:#fff;color:#141414;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
}

@keyframes footer-breathe{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.6}
  100%{transform:translate(-50%,-50%) scale(1.1);opacity:1}
}

.footer-aurora{
  position:absolute;left:50%;top:50%;
  width:80vw;height:60vh;
  transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(80px);
  /* bem mais sutil que na versão escura: sobre o branco, o vermelho vira
     mancha rosada com facilidade — aqui fica só como um calor de fundo */
  background:radial-gradient(circle at 50% 50%, rgba(210,35,42,.055) 0%, rgba(210,35,42,.022) 40%, transparent 70%);
  animation:footer-breathe 8s ease-in-out infinite alternate;
  pointer-events:none;z-index:0;
}
.footer-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:60px 60px;
  background-image:
    linear-gradient(to right, rgba(20,20,20,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,20,20,.035) 1px, transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

.footer-main{
  position:relative;z-index:10;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-inline:24px;margin-top:80px;width:100%;max-width:64rem;margin-inline:auto;
}
.footer-heading{
  position:relative;z-index:1; /* acima da aurora e da grade */
  display:flex;flex-direction:column;align-items:center;
  /* tamanho preso à largura da viewport para a frase mais longa caber */
  font-size:min(6.6vw,4.6rem);font-weight:600;letter-spacing:-.04em;
  text-align:center;margin-bottom:48px;
  color:#141414;
}
/* palavra que troca — mesmas cores e mesma mola do "Words changing";
   só a fonte é a daqui, herdada do rodapé */
.badge-word{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.16em .32em .1em;border-radius:.22em;
  line-height:1.3;font-weight:700;
}
.badge-pink{background:#FCDCD8;color:#C43323}
.badge-green{background:#ECF99A;color:#3C4B13}
/* O trilho não pode herdar a largura da linha de cima: dentro de um flex
   centralizado, width:100% vale a largura do irmão mais estreito, e a frase
   mais longa saía cortada. O JS insere uma cópia invisível da maior palavra
   em fluxo normal — ela dá ao trilho a largura e a altura reais, e as palavras
   animadas ficam por cima, em posição absoluta. */
.rotator{
  position:relative;display:flex;justify-content:center;
  overflow:hidden;text-align:center;
}
/* o medidor é o único que fica em fluxo — é dele que vêm largura e altura */
.rotator-sizer{visibility:hidden;white-space:nowrap;pointer-events:none}
.rotator > .badge-word:not(.rotator-sizer){
  position:absolute;font-size:1em;white-space:nowrap;
  will-change:transform,opacity;opacity:0;
}
.footer-bottom{
  position:relative;z-index:20;width:100%;padding:0 24px 32px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;
}
@media(min-width:768px){.footer-bottom{flex-direction:row;padding-inline:48px}}
.footer-rights{
  color:rgba(20,20,20,.5);font-size:.7rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;order:2;
}
@media(min-width:768px){.footer-rights{order:1;font-size:.75rem}}
.footer-totop{
  width:48px;height:48px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(20,20,20,.5);order:3;
  background:linear-gradient(145deg, rgba(20,20,20,.03) 0%, rgba(20,20,20,.01) 100%);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.6);
  border:1px solid rgba(20,20,20,.1);cursor:pointer;
  transition:color .3s ease;will-change:transform;
}
.footer-totop:hover{color:#141414}
.footer-totop svg{width:20px;height:20px;transition:transform .3s ease}
.footer-totop:hover svg{transform:translateY(-6px)}
/* a seta "voltar ao topo" ocupa o mesmo canto inferior direito do WhatsApp
   flutuante; desloca para a esquerda. Só no desktop: no mobile o rodapé é
   ocultado. */
@media(min-width:768px){
  .footer-totop{margin-right:78px}
}

/* Chapel: foto aberta de ponta a ponta da tela, com título e texto em branco
   por cima. A foto cobre o bloco inteiro; se o texto pedir mais altura que a
   proporção da foto, ela cresce e corta nas laterais. */
.chapel-banner{position:relative;isolation:isolate;margin:0 0 56px calc(50% - (100vw - var(--sbw, 0px)) / 2);width:calc(100vw - var(--sbw, 0px));min-height:calc((100vw - var(--sbw, 0px)) * 680 / 1620);display:flex;overflow:hidden;background:#1a1a1a}
.chapel-banner img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.chapel-banner::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.55);pointer-events:none}
.chapel-banner-content{width:100%;max-width:1180px;margin-inline:auto;padding:clamp(32px,5vw,64px) 24px}
.chapel-banner-title{margin:0;color:#fff}
.chapel-banner .prose{margin-top:28px}
.chapel-banner .prose p{color:rgba(255,255,255,.92)}
.chapel-banner .prose em{color:#fff}

/* estudo sobre foto: texto em branco (depois das regras de cor do .verse e do .prose) */
.study-block .verse p,.study-body h4{color:#fff}
.study-block .verse cite{color:rgba(255,255,255,.8)}
.study-block .prose p{color:rgba(255,255,255,.9)}

/* ---------- fecho em vídeo (Os três pilares) ----------
   Mesma receita da hero de Missão e valores: o vídeo ocupa a largura da tela
   por baixo, com véu escuro, e a frase fica em branco por cima. */
.video-statement{
  position:relative;isolation:isolate;display:flex;align-items:center;
  margin:120px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width:calc(100vw - var(--sbw, 0px));min-height:min(70svh,560px);
  padding-block:96px;overflow:hidden;background:#2b2b2b;
}
.video-statement-inner{display:flex;justify-content:center;width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
/* mesma tipografia do versículo da hero: peso leve, letras próximas, branco */
.video-statement .statement{
  margin:0;width:fit-content;max-width:100%;text-align:left;
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#fff;
}
.video-statement .statement em{font-style:normal;color:rgba(255,255,255,.72)}
/* uma frase por linha */
.video-statement .statement span,.video-statement .statement em{display:block}

/* ---------- fundo em shader (todas as páginas, ligado pelo nav.js) ----------
   O canvas fica fixo atrás de tudo; o conteúdo rola por cima dele. */
body.has-shader{background:transparent}
.shader-bg{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%}

/* atalhos internos descontam a navbar fixa */
.pillar{scroll-margin-top:88px}
/* primeiro pilar abre a página: sem o fio de cima */
.pillar.is-first{border-top:0}
/* em Os três pilares, cada pilar ocupa uma tela inteira no desktop (descontada
   a navbar) e fica centralizado nela; o nome alinha com o meio do texto. Com os
   textos curtos, é isso que mantém os três com o mesmo respiro. */
@media(min-width:980px){
  .pillar.is-first,.pillar.is-screen{min-height:calc(100svh - 104px);align-content:center;padding-block:48px}
  .pillar.is-first .pillar-head,.pillar.is-screen .pillar-head{position:static;align-self:center}
}
/* selo no fim dos pilares */
.pillar + .seal-figure{margin-block:96px 0}

/* fecho de Os três pilares: a frase direto sobre o shader, uma por linha,
   na tipografia do versículo da hero */
.pillars-close{display:flex;justify-content:center;padding-block:120px 0}
.pillars-close .statement{
  margin:0;width:fit-content;max-width:100%;text-align:center;
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#111;
}
.pillars-close .statement span,.pillars-close .statement em{display:block}
.pillars-close .statement em{font-style:normal;font-weight:500;color:#111}
@media(max-width:979px){.pillar{padding-block:48px}.pillar.is-first{padding-top:0}.pillar + .seal-figure{margin-top:48px}}
@media(max-width:767px){.pillar{padding-block:36px}.pillar + .seal-figure{margin-top:36px}.pillars-close{padding-top:72px}}

/* sobre o shader, navbar e rodapé ficam translúcidos, com desfoque, para o
   fundo aparecer por trás */
body.has-shader .nav,
body.has-shader .site-footer{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
/* com o dropdown aberto, navbar e painel viram uma peça só, em branco opaco:
   a navbar sai do translúcido para o branco no mesmo tempo em que o painel
   aparece (.3s), sem emenda nem sombra entre os dois */
body.has-shader .nav{transition:background-color .3s ease}
body.has-shader .nav:has(.nav-dropdown[data-open="true"]){background:#fff}
body.has-shader .nav-dropdown{background:#fff}

/* página da Chapel: a seção abre a página, sem o respiro grande de antes */
.section-feature.is-page-top{margin-top:0}

/* ---------- Nós (somos) a ponte ----------
   Os parênteses do nome vêm do logo do movimento (pincel laranja): aqui eles
   são o recurso visual do título. */
:root{--ponte-laranja:#ef6a2a}
.ponte-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:56px 48px}
.ponte-title{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .28em;
  font-size:clamp(2.2rem,5.5vw,4.4rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:#111;
}
.ponte-paren{display:inline-flex;align-items:baseline}
.ponte-somos{font-weight:300}
/* parênteses finos, maiores e um pouco inclinados, como o traço do pincel */
.ponte-p{
  display:inline-block;font-weight:200;font-size:1.25em;line-height:.8;
  background:linear-gradient(160deg,#f58a3c,var(--ponte-laranja) 55%,#d9481c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.ponte-p.is-open{margin-right:.04em;transform:rotate(-6deg)}
.ponte-p.is-close{margin-left:.04em;transform:rotate(6deg)}
/* na entrada, os parênteses se abrem para os lados e o "somos" aparece no meio */
@media(prefers-reduced-motion:no-preference){
  .ponte-p.is-open{animation:ponte-abre-esq .9s cubic-bezier(.2,.7,.3,1) .1s both}
  .ponte-p.is-close{animation:ponte-abre-dir .9s cubic-bezier(.2,.7,.3,1) .1s both}
  .ponte-somos{animation:ponte-somos .7s ease .45s both}
  .ponte-tagline{animation:ponte-somos .7s ease .7s both}
}
@keyframes ponte-abre-esq{from{opacity:0;transform:translateX(.5em) rotate(-6deg)}to{opacity:1;transform:rotate(-6deg)}}
@keyframes ponte-abre-dir{from{opacity:0;transform:translateX(-.5em) rotate(6deg)}to{opacity:1;transform:rotate(6deg)}}
@keyframes ponte-somos{from{opacity:0}to{opacity:1}}
.ponte-tagline{
  margin-top:28px;max-width:34ch;
  font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;letter-spacing:-.02em;line-height:1.4;color:#374151;
}
/* imagem no estilo dos posts: foto desfocada e escurecida, a ponte em traço
   laranja e o nome em laranja por cima, com um leve brilho */
.ponte-photo{position:relative;isolation:isolate;margin:0;aspect-ratio:16/7;border-radius:28px;overflow:hidden;background:#1a1a1a}
@media(max-width:767px){.ponte-photo{aspect-ratio:4/5}}
.ponte-photo-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.68) saturate(.9);transform:scale(1.03)}
.ponte-photo-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3vw,36px);padding:24px}
.ponte-bridge{width:min(46%,520px);height:auto;filter:drop-shadow(0 0 6px rgba(255,94,20,.45))}
@media(max-width:767px){.ponte-bridge{width:82%}}
.ponte-photo-text{
  display:flex;flex-direction:column;
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4.4vw,3.6rem);letter-spacing:-.075em;line-height:1.02;
  color:#ff5e14;text-shadow:0 0 14px rgba(255,94,20,.45);
}

/* frase do movimento: centralizada, na tipografia leve do versículo da hero */
.ponte-quote{display:flex;justify-content:center;padding-block:112px 24px}
.ponte-quote .statement{
  margin:0;max-width:none;text-align:center;
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#111;
}
.ponte-quote .statement span,.ponte-quote .statement em{display:block}
.ponte-quote .statement em{font-style:normal;font-weight:600;color:var(--ponte-laranja)}
@media(max-width:767px){.ponte-quote{padding-block:72px 0}}

.ponte-ctas{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.ponte-ctas .soft-cta{margin-top:0;will-change:transform}
.ponte-invite .prose{max-width:none}

/* ---------- O Anexo e O Prédio (Acadêmico) ----------
   Hero no formato da de Missão e valores (.verse-hero), segmentos no formato
   dos pilares e uma frase central. */
/* frase central, na tipografia leve do versículo da hero */
.quote-center{display:flex;justify-content:center;padding-block:112px 24px}
.quote-center .statement{
  margin:0;max-width:none;text-align:center;
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#111;
}
.quote-center .statement span,.quote-center .statement em{display:block}
.quote-center .statement em{font-style:normal;font-weight:600;color:#111}

.casa-ctas{display:flex;flex-wrap:wrap;gap:12px 16px}
.casa-ctas .soft-cta{margin-top:0;will-change:transform}

/* ---------- cards das quatro direções (Missão e valores) ----------
   Porte do resource-cards-grid: 1 coluna, 2 a partir de 640px e as 4 lado a
   lado a partir de 1024px. Entram em sequência (0,1s entre um e outro) quando
   o grupo aparece na tela, e crescem 3% no hover (98% no clique). */
.rcards{display:grid;grid-template-columns:1fr;gap:24px;margin-top:48px}
@media(min-width:640px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.rcards{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* o grupo não usa o fade padrão do data-reveal: quem anima são os cards */
.rcards[data-reveal]{opacity:1;transform:none}
.rcard{
  display:flex;flex-direction:column;height:100%;padding:24px;border-radius:12px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .25s ease,box-shadow .3s ease;
}
.rcard h3{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#111}
.rcard p{margin-top:8px;font-size:.92rem;line-height:1.6;color:#6b7280}
.rcard:hover{transform:scale(1.03);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.rcard:active{transform:scale(.98)}
.rcards:not(.is-in) .rcard{opacity:0}
.rcards.is-in .rcard{animation:rcard-in .5s ease backwards;animation-delay:calc(var(--i,0) * .1s)}
@keyframes rcard-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .rcards:not(.is-in) .rcard{opacity:1}
  .rcards.is-in .rcard{animation:none}
  .rcard:hover,.rcard:active{transform:none}
}

/* Lucas 2:52 (Missão e valores) na tipografia do versículo da hero: mesmo
   tamanho, peso leve e letras próximas, em preto; a referência fica à direita,
   no fim do versículo. Vem depois da regra antiga .is-one-line e a substitui. */
.verse.is-one-line{width:fit-content;max-width:100%}
.verse.is-one-line p{
  white-space:normal;
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#111;
}
.verse.is-one-line cite{margin-top:24px;text-align:right}

/* ---------- hero da Chapel ----------
   Usa o .verse-hero (vídeo de ponta a ponta com véu escuro); aqui só o texto:
   o nome grande no meio e "Welcome Home" menor embaixo, em branco. */
.chapel-hero-text{display:flex;flex-direction:column;align-items:center;text-align:center;animation:verse-hero-in .9s ease .15s both}
.chapel-hero-title{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff}
.chapel-hero-sub{margin-top:14px;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:600;letter-spacing:-.01em;color:#fff}
@media(prefers-reduced-motion:reduce){.chapel-hero-text{animation:none}}
/* o vídeo já vem com o filtro aplicado: aqui ele fica sem o véu escuro da hero */
.chapel-hero .verse-hero-media::after{display:none}

/* ---------- Chapel: blocos centralizados e faixa com fundo parado ----------
   Referência: hillsong.com/about. Os blocos têm título em cinza forte, em
   caixa alta, e um parágrafo leve. A faixa: o canvas é fixed (do tamanho da
   tela) e o clip-path da seção recorta ele só na área da faixa, então ao rolar
   o fundo fica estático e a faixa passa. Por isso a faixa não pode ter
   transform (nem data-reveal): isso prenderia o fixed dentro dela. */
/* medidas tiradas de hillsong.com/about: coluna de 800px, título 36px negrito
   cinza, parágrafo 18px leve, faixa de 423px e 100px entre os blocos */
/* 20/10: na coluna padrão das páginas (alinhado à esquerda, largura cheia) */
.chapel-block{margin:100px 0 0;text-align:left}
.chapel-block-title{
  font-size:clamp(1.6rem,2.6vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  text-transform:uppercase;color:#111;
}
.chapel-block p{margin:20px 0 0;font-size:1.125rem;font-weight:300;line-height:1.6;color:#111}
/* a frase que diz o essencial, antes do parágrafo */
.chapel-block .chapel-block-lead{margin-top:18px;font-size:clamp(1.3rem,2.1vw,1.65rem);font-weight:600;letter-spacing:-.02em;line-height:1.35;color:#2b2b2b}
.chapel-break{
  position:relative;isolation:isolate;clip-path:inset(0);
  margin:100px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width:calc(100vw - var(--sbw, 0px));
  background:#c3c7cd;
}
.auralis-bg{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100vh;height:100lvh;pointer-events:none}
/* os quatro temas lado a lado, separados por um fio: o tema grande e a
   referência do versículo pequena embaixo. Em grafite, porque o fundo é metade
   branco e o texto branco sumiria nas partes claras */
.chapel-break-inner{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;
  max-width:1180px;min-height:423px;margin-inline:auto;padding:56px 24px;color:#111;
}
.chapel-topic{padding:8px 28px;text-align:center}
.chapel-topic + .chapel-topic{border-left:1px solid rgba(0,0,0,.18)}
.chapel-topic h3{font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.chapel-ref{margin-top:12px;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#111}
@media(max-width:860px){
  .chapel-break-inner{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px;padding:48px 16px}
  .chapel-topic{padding:8px 12px}
  .chapel-ref{font-size:.66rem;letter-spacing:.08em;white-space:nowrap}
  .chapel-topic:nth-child(3){border-left:0}
}

/* ---------- vídeo vertical (Chapel) ----------
   Moldura do tamanho da tela de um celular (345 × 715px), cantos arredondados e
   nenhum controle por cima. O botão fica embaixo e troca play/pause. */
.phone-video{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:100px}
.phone-video-frame{
  width:min(345px,77vw);aspect-ratio:345/715;border-radius:42px;overflow:hidden;
  background:#111;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
}
.phone-video-frame video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.phone-video-btn{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;padding:0;
  /* mesmas cores e contorno do botão Entrar e dos botões de link: fundo
     transparente, contorno fino preto a 35%, ícone preto. appearance:none tira
     o estilo nativo do navegador (que pintava o ícone de azul no Safari) */
  -webkit-appearance:none;appearance:none;
  border-radius:50%;border:1px solid rgba(0,0,0,.35);background:transparent;color:#000;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,background-color .2s ease;will-change:transform;
}
.phone-video-btn svg path{fill:#000;stroke:#000}
.phone-video-btn:hover{border-color:#000;background:rgba(0,0,0,.04)}
.phone-video-btn svg{width:26px;height:26px}
/* triângulo maior e com as pontas arredondadas (o traço com junção redonda) */
.phone-video-btn .is-play{width:34px;height:34px;margin-left:3px}
.phone-video-btn .is-pause{display:none}
.phone-video.is-playing .phone-video-btn .is-play{display:none}
.phone-video.is-playing .phone-video-btn .is-pause{display:block}
@media(max-width:767px){.chapel-block,.chapel-break,.phone-video{margin-top:72px}}

/* ---------- Chapel: abertura com o vídeo (porte do Hero + VideoPlayer do 21st.dev) ----------
   Sem o fundo verde do componente. O player: barra de controles com degradê por
   baixo, que some 3s depois do último movimento do mouse enquanto toca
   (.is-oculto, ui.js [data-vp]). */
/* como no componente, tudo empilhado num bloco de até 72rem (max-w-6xl):
   CULTURA, o texto embaixo (os dois alinhados à esquerda) e o vídeo embaixo,
   na largura do bloco e na proporção do vídeo (pedido de 25/10). 64px do topo,
   100px até a faixa dos temas (.chapel-break) */
.ch-hero{max-width:72rem;margin:0 auto;padding-top:64px}
.ch-hero-t{margin-bottom:24px;text-align:left;font-size:clamp(1.6rem,2.6vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#111}
.ch-hero-txt{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.ch-hero-txt p{margin:0;font-size:16px;line-height:1.6;font-weight:300;color:#4b5563;text-align:left}
.ch-hero-video{width:100%;border:1px solid #e5e7eb;border-radius:24px;overflow:hidden;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
@media(max-width:899px){.ch-hero{padding-top:40px}}
@media(max-width:639px){
  .ch-hero-txt p{font-size:15px}
}

/* o vídeo da Chapel é 1920x1080 com faixas pretas de 241px dos lados: a imagem
   real é 1438x1080. O player tem essa proporção e o vídeo preenche a altura
   (cover), então só as faixas ficam de fora e a legenda embaixo aparece inteira */
.vp{position:relative;width:100%;aspect-ratio:1438/1080;background:#000;overflow:hidden;outline:none}
.vp:focus-visible{outline:2px solid #111;outline-offset:2px}
.vp video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.vp.is-oculto,.vp.is-oculto video{cursor:none}
.vp-centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s ease}
/* botão do meio igual ao do componente: vidro (branco a 20%, desfoque, borda a 30%) e ícone branco */
.vp-grande{display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;cursor:pointer;pointer-events:auto;-webkit-appearance:none;appearance:none;transition:background-color .2s ease}
.vp-grande:hover{background:rgba(255,255,255,.3)}
.vp-grande svg{width:24px;height:24px}
.vp-grande .is-play{transform:translateX(2px)}
.vp-grande .is-pause{display:none}
.vp.is-playing .vp-grande .is-play{display:none}
.vp.is-playing .vp-grande .is-pause{display:inline}
.vp-barra{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);pointer-events:none;transition:opacity .3s ease}
.vp.is-oculto .vp-centro,.vp.is-oculto .vp-barra{opacity:0}
.vp-linha,.vp-botoes{pointer-events:auto}
.vp-linha{display:flex;align-items:center;gap:8px;padding:16px 16px 0;color:#fff}
.vp-botoes{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 16px}
.vp-grupo,.vp-volume{display:flex;align-items:center;gap:8px}
.vp-tempo{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.vp-btn{display:inline-flex;padding:8px;border:0;border-radius:6px;background:transparent;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .15s ease}
.vp-btn:hover{background:rgba(255,255,255,.2)}
.vp-btn svg{width:16px;height:16px}
.vp-btn .is-pause,.vp-btn .is-mudo,.vp-btn .is-fechar{display:none}
.vp.is-playing .vp-btn .is-play{display:none}
.vp.is-playing .vp-btn .is-pause{display:inline}
.vp.is-mudo .vp-btn .is-som{display:none}
.vp.is-mudo .vp-btn .is-mudo{display:inline}
.vp.is-cheia .vp-btn .is-abrir{display:none}
.vp.is-cheia .vp-btn .is-fechar{display:inline}
.vp-volume-faixa{display:block;width:0;overflow:hidden;transition:width .2s ease}
.vp-volume:hover .vp-volume-faixa,.vp-volume:focus-within .vp-volume-faixa{width:80px}
.vp-progresso,.vp-volume-in{display:block;width:100%;height:4px;margin:0;border-radius:999px;background:rgba(255,255,255,.3);-webkit-appearance:none;appearance:none;cursor:pointer}
.vp-progresso{flex:1;min-width:0}
.vp-progresso:disabled{cursor:not-allowed}
.vp-progresso::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:transform .2s ease}
.vp-progresso:hover::-webkit-slider-thumb{transform:scale(1.25)}
.vp-volume-in::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#fff;cursor:pointer}
.vp-progresso::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.vp-volume-in::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
.vp:fullscreen{aspect-ratio:auto;width:100%;height:100%}
.vp:fullscreen video{object-fit:contain}
/* no celular o vídeo é baixo e a barra cobriria o botão do meio: ela só aparece
   depois do primeiro play (.is-iniciado) */
@media(max-width:639px){.vp:not(.is-iniciado) .vp-barra{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.vp-centro,.vp-barra,.vp-volume-faixa{transition:none}}

/* ---------- vídeo largo (Anexo e Prédio) ----------
   Mesma receita do vídeo vertical da Chapel, numa moldura 16:9 da largura da
   página, sem controle por cima; o botão play/pause fica embaixo. */
.wide-video{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:96px}
.wide-video-frame{
  width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;
  background:#111;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
}
.wide-video-frame video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}

/* ---------- fotos passando em sequência ----------
   Porte do "image auto slider" do 21st.dev: o trilho anda sem parar e as
   pontas somem num degradê. O ui.js duplica as fotos; o -50% cai exatamente
   no começo da cópia porque o espaço entre fotos é margem, não gap. */
.photo-strip{
  margin-top:40px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
}
.photo-strip-track{display:flex;width:max-content;will-change:transform}
.photo-strip.is-looping .photo-strip-track{animation:photo-strip var(--photo-strip-duration,40s) linear infinite}
@media(hover:hover){.photo-strip.is-looping:hover .photo-strip-track{animation-play-state:paused}}
.photo-strip img{
  flex:none;height:clamp(200px,30vw,400px);aspect-ratio:1/1;margin-right:24px;
  border-radius:20px;object-fit:cover;background:#f3f4f6;
}
@keyframes photo-strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .photo-strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .photo-strip.is-looping .photo-strip-track{animation:none}
  .photo-strip-track > [aria-hidden="true"]{display:none}
}

/* fecho das casas: só os botões, centralizados */
.casa-ctas.is-end{justify-content:center;margin-top:100px}
.cine + .casa-ctas.is-end{position:relative;z-index:3;margin-top:calc(96px - (100vh - min(76vh,620px)) / 2);margin-top:calc(96px - (100svh - min(76svh,620px)) / 2)}
@media(max-width:767px){.cine + .casa-ctas.is-end{margin-top:calc(138px - 50vh + min(58vh,520px) / 2);margin-top:calc(138px - 50svh + min(58svh,520px) / 2)}}

/* ---------- hero de capa (Anexo e Prédio) ----------
   Igual à de hillsong.com/conference: mídia de ponta a ponta passando por
   baixo da navbar translúcida; o nome da casa no canto inferior esquerdo de
   uma coluna de 896px, em 80px, peso 300 e letras próximas, branco sobre um
   degradê escuro no pé. */
.cover-hero{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:min(70svh,700px);
  margin:-104px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width:calc(100vw - var(--sbw, 0px));padding:160px 0 44px;overflow:hidden;background:#2b2b2b;
}
@media(max-width:767px){.cover-hero{margin-top:-92px;min-height:min(60svh,520px);padding-bottom:32px}}
.cover-hero-media{position:absolute;inset:0;z-index:-1}
.cover-hero-media img,.cover-hero-media video{display:block;width:100%;height:100%;object-fit:cover}
/* o vídeo do Prédio vem com uma faixa preta de 42px em cada lado, gravada no
   próprio arquivo (1364px de largura, com a imagem real em 1280px): um zoom
   de 8% deixa as faixas fora do quadro, sem mexer no arquivo */
.cover-hero-media video.is-pillarbox{transform:scale(1.08)}
/* o do Anexo (Drive, ANEXO/1. HERO) tem faixas de 150px num quadro de 1920px:
   zoom de 19% */
.cover-hero-media video.is-pillarbox-largo{transform:scale(1.19)}
/* fotos do Drive com faixas pretas gravadas no arquivo (quadros de vídeo):
   o arquivo fica como veio e um zoom deixa as faixas fora do quadro.
   faixa-lado: 7,8% de cada lado (150px em 1920, 300px em 3840);
   faixa-lado-larga: 12,5% de cada lado (240px em 1920);
   faixa-topo: 3,1% em cima e embaixo (34px em 1080) */
img.faixa-lado{transform:scale(1.19)}
img.faixa-lado-larga{transform:scale(1.34)}
img.faixa-topo{transform:scale(1.07)}
.cover-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
.cover-hero-inner{width:100%;max-width:896px;margin-inline:auto;padding-inline:24px}
.cover-hero{--cover-title:clamp(3rem,5.56vw,5rem)}   /* tamanho do nome: o rótulo abaixo usa para se alinhar */
.cover-hero-title{
  font-size:var(--cover-title);font-weight:300;letter-spacing:-.025em;line-height:1;color:#fff;
  animation:verse-hero-in .9s ease .15s both;
}
/* linha abaixo do nome da casa: o rótulo pequeno em caixa alta do site (o
   mesmo da referência do versículo na hero), em branco apagado. O margin-left
   compensa o espaço em branco que o "O" tem dentro da própria letra (5% do
   tamanho do nome), para o rótulo alinhar com o desenho da letra, não com a
   caixa dela. */
.cover-hero-sub{margin-top:14px;margin-left:calc(var(--cover-title) * .054);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);animation:verse-hero-in .9s ease .15s both}
@media(prefers-reduced-motion:reduce){.cover-hero-title,.cover-hero-sub{animation:none}}

/* a frase centralizada, fora da hero */
.casa-intro{margin-top:96px;text-align:center}
.casa-phrase{
  margin:0 auto;max-width:34ch;
  font-size:clamp(1.25rem,2.6vw,1.875rem);font-weight:300;letter-spacing:-.03em;line-height:1.35;color:#111;
}

/* moldura de celular no formato exato do vídeo (9:16), para ele caber inteiro */
.phone-video.is-916 .phone-video-frame{width:min(420px,84vw);aspect-ratio:9/16}
.phone-video.is-916{margin-top:96px}
/* a frase logo acima do vídeo do Anexo: mais perto dele */
.casa-intro + .phone-video.is-916{margin-top:48px}

/* janela só com a foto (texto do Prédio): sem o degradê que existe para
   dar leitura ao título sobre a imagem */
.lp-card.is-photo .lp-media::after{display:none}
/* e sem a moldura branca em volta: só a foto, com os cantos arredondados */
.lp-card.is-photo .lp-inner{padding:0;background:transparent;border:0;border-radius:12px;overflow:hidden}
.lp-card.is-photo .lp-media{border-radius:12px}
.casa-text + .casa-intro{margin-top:96px}
/* o texto antes da cena some ao rolar (ui.js); a transição só suaviza */
.casa-text:has(+ .cine){will-change:opacity,transform}

/* ---------- cena do celular (Prédio) ----------
   A seção é alta (o tanto que se rola com ela parada) e o palco gruda no topo
   da janela. O ui.js converte a rolagem em --p (0 a 1) e anima a frase, o
   celular e o giro com o mouse; as palavras e o quadro do WhatsApp seguem o
   tempo do vídeo (classe is-on). Sem fundo azul: a frase só fica fosca e o
   celular passa por cima dela. */
.cine{
  position:relative;height:370vh;margin:40px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width:calc(100vw - var(--sbw, 0px));
}
.cine-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;perspective:1500px;
}
.cine-phrase{
  position:absolute;z-index:1;max-width:min(30ch,88vw);margin:0;padding:0 24px;text-align:center;
  font-size:clamp(1.6rem,3.4vw,2.9rem);font-weight:300;letter-spacing:-.035em;line-height:1.25;color:#111;
  will-change:transform,filter,opacity;
}
.cine-phrase span{display:block}
.cine-l2{margin-top:.35em}
/* entrada da frase: desfoque e leve giro que viram nitidez; depois a segunda
   linha se revela da esquerda para a direita */
.cine-l1{
  opacity:0;transform:translateY(48px) scale(.88) rotateX(-20deg);filter:blur(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);
}
.cine-l2{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.77,0,.18,1) .25s}
.cine.is-intro .cine-l1{opacity:1;transform:none;filter:blur(0)}
.cine.is-intro .cine-l2{clip-path:inset(0 0 0 0)}

.cine-grid{
  position:relative;z-index:2;width:100%;max-width:1180px;height:100%;padding:0 24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:56px;
}
/* palavras da esquerda: entram uma a uma; a mais recente fica preta e as
   anteriores esmaecem */
.cine-left,.cine-right{list-style:none;margin:0;padding:0;opacity:var(--lados,0)}
.cine-left{display:flex;flex-direction:column;gap:14px}
.cine-left li{
  font-size:clamp(1rem,1.45vw,1.35rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:rgba(17,17,17,.42);
  opacity:0;transform:translateX(-40px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),color .6s ease;
}
.cine-left li.is-on{opacity:1;transform:none}
.cine-left li.is-now{color:#111}
/* as três da direita: maiores, leves, alinhadas à direita */
.cine-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.cine-right li{
  font-size:clamp(2rem,3.6vw,3.4rem);font-weight:300;letter-spacing:-.045em;line-height:1.05;color:#111;
  opacity:0;transform:translateX(50px) scale(.85);filter:blur(10px);transform-origin:right center;
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1);
}
.cine-right li.is-on{opacity:1;transform:none;filter:blur(0)}
.cine-right li:last-child.is-on{
  font-weight:700;background-image:linear-gradient(to bottom right,#b91c1c,#ef4444);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
@media(min-width:768px) and (max-width:1023px){.cine-grid{gap:32px}.cine-right li{font-size:clamp(1.5rem,3.4vw,3.4rem)}}

/* o celular: moldura escura, botões laterais, ilha e reflexo */
.cine-phone-wrap{position:relative;perspective:1000px}
.cine-phone{
  --ph:min(76svh,620px);
  position:relative;height:var(--ph);aspect-ratio:300/580;border-radius:calc(var(--ph) * .083);
  background:#111;transform-style:preserve-3d;will-change:transform,opacity;opacity:0;
  box-shadow:inset 0 0 0 2px #52525b,inset 0 0 0 7px #000,0 40px 80px -15px rgba(0,0,0,.55),0 15px 25px -5px rgba(0,0,0,.35);
}
.cine-btn{position:absolute;width:3px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#404040,#171717)}
.cine-btn.is-a{left:-3px;top:20%;height:4.3%}
.cine-btn.is-b{left:-3px;top:27.5%;height:7.8%}
.cine-btn.is-c{left:-3px;top:38%;height:7.8%}
.cine-btn.is-d{right:-3px;top:29%;height:12%;border-radius:0 3px 3px 0}
.cine-screen{position:absolute;inset:7px;border-radius:calc(var(--ph) * .072);overflow:hidden;background:#050914}
.cine-screen video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.cine-island{
  position:absolute;top:1.2%;left:50%;width:34%;height:4.8%;transform:translateX(-50%);
  border-radius:99px;background:#000;pointer-events:none;
}
.cine-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 45%)}

/* quadro do WhatsApp, embaixo à direita do celular, como o "Sponsor Update"
   do modelo, em vidro claro porque aqui o fundo é branco */
.cine-badge{
  position:absolute;right:-84px;bottom:13%;z-index:3;
  display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 25px 50px -12px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.9);
  color:#111;text-decoration:none;font-size:.95rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(80px) scale(.7) rotate(-10deg);
  transition:opacity .9s cubic-bezier(.34,1.56,.64,1),transform .9s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .9s;
}
.cine-badge.is-on{opacity:var(--lados,0);visibility:visible;transform:none;transition-delay:0s}
.cine-badge:hover{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 30px 56px -12px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.9)}
.cine-badge-icon{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:#25d366;box-shadow:inset 0 -2px 4px rgba(0,0,0,.15);
}
.cine-badge-icon svg{width:22px;height:22px}

/* celular: o aparelho no meio; as três palavras grandes em linha no alto e,
   embaixo, só a frase dita por último (uma substitui a outra) */
@media(max-width:767px){
  .cine{height:330vh}
  .cine-grid{
    display:flex;flex-direction:column;justify-content:center;gap:18px;padding:72px 16px 24px;
  }
  .cine-right{order:1;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
  .cine-right li{font-size:clamp(1.25rem,6vw,1.75rem)}
  .cine-phone-wrap{order:2}
  .cine-phone{--ph:min(58svh,520px)}
  .cine-left{order:3;display:grid;width:100%;min-height:1.5em;text-align:center}
  .cine-left li{grid-area:1/1;font-size:1.1rem;transform:translateY(12px)}
  .cine-left li.is-on{opacity:0}
  .cine-left li.is-now{opacity:1;transform:none}
  .cine-badge{right:-10px;bottom:9%;padding:10px 14px 10px 10px;gap:10px;font-size:.85rem}
  .cine-badge-icon{width:32px;height:32px}
  .cine-badge-icon svg{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){
  .cine-l1,.cine-l2,.cine-left li,.cine-right li,.cine-badge{transition:none}
  .cine-l1{opacity:1;transform:none;filter:none}
  .cine-l2{clip-path:none}
}

/* ---------- primeira tela parada (Prédio, [data-hold]) ----------
   A hero e o texto ficam parados enquanto se rola um trecho; o ui.js dá a
   altura extra da caixa, o top do sticky (para alinhar pelo pé quando a tela
   é mais baixa que o conteúdo) e o fosco do texto. */
.hold-inner{position:sticky;top:0}
/* o texto some no lugar e deixa um vão; a cena da frase sobe por cima dele
   para a frase chegar logo depois */
.hold + .cine{margin-top:-60vh}
/* a segunda linha da frase numa linha só ("E menos ainda" ao lado do
   destaque), centralizada mesmo passando da largura da primeira */
.cine-l2{white-space:nowrap;width:max-content;margin-left:50%;transform:translateX(-50%)}
@media(max-width:767px){.cine-l2{font-size:min(1em,5vw)}}
/* celular: as duas linhas com o MESMO tamanho de fonte (pedido do dono,
   02/11). 5vw é o tamanho em que a segunda linha do Prédio, a mais longa,
   cabe numa linha só; a primeira quebra em linhas de tamanho parecido, sem
   palavra sozinha no fim ("filho" no Anexo) */
@media(max-width:767px){
  .cine-phrase{font-size:min(1.6rem,5vw);max-width:none;padding:0 20px}
  .cine-l1{text-wrap:balance}
  .cine-l2{font-size:1em}
}

/* fim do vídeo: o app se fecha (encolhe para baixo, arredonda e some, como
   ao fechar um app no iPhone) e fica a tela inicial, branca, com o selo */
.cine-screen{background:#fff}
.cine-home{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.cine-home img{width:52%;height:auto;transform:scale(1.12);opacity:.6;transition:transform .9s cubic-bezier(.32,.72,0,1) .15s,opacity .6s ease .15s}
.cine-app{
  position:absolute;inset:0;overflow:hidden;background:#050914;border-radius:0;transform-origin:50% 92%;
  transition:transform .65s cubic-bezier(.32,.72,0,1),border-radius .65s cubic-bezier(.32,.72,0,1),opacity .45s ease .2s;
}
.cine.is-closed .cine-app{transform:translateY(6%) scale(.16);border-radius:28%;opacity:0;pointer-events:none}
.cine.is-closed .cine-home img{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.cine-app,.cine-home img{transition:opacity .3s ease}}

/* janela com um logo no lugar da foto (Be, National Geographic no Anexo):
   o logo inteiro, centralizado, sobre fundo liso; is-dark para logos com
   partes brancas */
.lp-card.is-logo .lp-media{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.lp-card.is-logo .lp-media img{object-fit:contain;padding:12% 16%}
.lp-card.is-logo.is-dark .lp-media{background:#1e2b5c;box-shadow:none}
.lp-card.is-logo.is-dark .lp-media img{padding:7% 14%}

/* hero com o vídeo parado (Anexo e Prédio): a mídia tem a altura da tela e o
   ui.js a mantém no topo da janela enquanto a hero sobe; o degradê do pé
   passa da mídia para a própria hero, para continuar no pé dela */
.hold .cover-hero-media,[data-hero-fixo] .cover-hero-media{bottom:auto;height:100vh;height:100lvh;will-change:transform}
.hold .cover-hero-media::after,[data-hero-fixo] .cover-hero-media::after{display:none}
.hold .cover-hero::after,.cover-hero[data-hero-fixo]::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}

/* ---------- cena da Ester (Inclusão, [data-incl]) ----------
   No fundo natural da página: as etapas na metade esquerda (uma por vez, no
   mesmo lugar) e o vídeo centralizado na metade direita, parado na tela a
   cena inteira. O ui.js dá a cada etapa a entrada do título (vem da
   esquerda e ganha cor) e a saída (sobe e some), arredonda os cantos do
   vídeo e o toca direto; é uma rolagem só, sem pausas. */
.incl{
  position:relative;height:560vh;margin:-104px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width:calc(100vw - var(--sbw, 0px));
}
.incl-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.incl-steps{position:relative;justify-self:end;width:min(36vw,560px);height:min(60svh,520px);margin-right:6vw}
.incl-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;will-change:transform,opacity}
/* a palavra que troca dentro da frase: na linha do texto, no verde do rodapé */
/* o quadro verde é a própria caixa, fixa no tamanho da maior palavra
   (o medidor); só a palavra troca dentro dele */
.incl .rotator{display:inline-flex;vertical-align:bottom;justify-content:center;background:#ECF99A;border-radius:.22em}
.incl .badge-word{font-size:.92em;line-height:1.15;background:transparent}
.incl-title{margin:0;font-size:clamp(3rem,7vw,7.5rem);font-weight:300;letter-spacing:-.05em;line-height:1;color:#111}
.incl-title.is-phrase{font-size:clamp(2.2rem,4.2vw,4.4rem);letter-spacing:-.04em;line-height:1.08}
/* o PEI menor que o título "Inclusão" */
.incl-title.is-sigla{font-size:clamp(2.4rem,4.6vw,4.8rem)}
/* o "Inclusão" entra no alto da coluna, não no meio */
.incl-step:first-child{justify-content:flex-start}
.incl-sub{margin-top:.5em;font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:#111}
/* palavras do PEI: entram uma a uma quando são ditas, como as do celular */
.incl-words{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.incl-words li{
  font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.02em;color:rgba(17,17,17,.42);
  opacity:0;transform:translateX(-40px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),color .6s ease;
}
.incl-words li.is-on{opacity:1;transform:none}
.incl-words li.is-now{color:#111}
/* o quadro do WhatsApp, no mesmo vidro claro do quadro do celular */
.incl-badge{
  align-self:flex-start;margin-top:28px;display:inline-flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 25px 50px -12px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.9);
  color:#111;text-decoration:none;font-size:.95rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  transition:box-shadow .2s ease;
}
.incl-badge:hover{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 30px 56px -12px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.9)}
.incl-media{position:relative;justify-self:center;will-change:transform}
/* o iPhone da cena do celular, já visível (lá ele entra pelo ui.js) */
.incl-media .cine-phone{--ph:min(78svh,700px);opacity:1}
@media(min-width:768px){.incl-steps{justify-self:start;margin-right:0;margin-left:max(calc(8vw - var(--sbw, 0px) / 2),calc((100vw - var(--sbw, 0px) - 1180px) / 2 + 24px))}.incl-media .cine-phone{--ph:min(78svh,700px,calc((50vw - 48px) * 580 / 300))}}
.incl-media .cine-screen video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.incl-hint{z-index:2}
.incl-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:8px 14px;border-radius:99px;
  background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.incl.is-muted .incl-hint{opacity:1}
@media(max-width:767px){
  .incl{margin-top:-92px;height:480vh}
  .incl-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding-top:84px;gap:12px}
  .incl-steps{justify-self:center;width:calc(100vw - 32px);height:min(30svh,230px);margin:0}
  .incl-step{align-items:center;text-align:center}
  .incl-title{font-size:clamp(2.6rem,13vw,3.6rem)}
  .incl-title.is-phrase{font-size:clamp(1.6rem,7.4vw,2.2rem)}
  .incl-title.is-sigla{font-size:clamp(2rem,9vw,2.6rem)}
  .incl-words{margin-top:12px;display:grid;gap:0}
  .incl-words li{grid-area:1/1;transform:translateY(10px)}
  .incl-words li.is-on{opacity:0}
  .incl-words li.is-now{opacity:1;transform:none}
  .incl-badge{align-self:center;margin-top:16px}
  .incl-media{align-self:start}
  .incl-media .cine-phone{--ph:min(52svh,480px)}
}

/* ---------- Hero das feiras: Morph Gallery (Feiras e projetos, [data-morph]) ----------
   Porte vanilla do Morph Gallery do 21st.dev (26/10): as fotos se dissolvem
   umas nas outras por um ruído (shader WebGL no canvas), com setas dos lados,
   miniaturas embaixo e troca automática. De ponta a ponta e por baixo da
   navbar, como as outras heros. As <img> ficam empilhadas por baixo: são a
   fonte das texturas e, sem WebGL (.is-sem-webgl), trocam num fade simples. */
.mg{position:relative;height:100svh;margin:-104px 0 96px calc(50% - (100vw - var(--sbw, 0px)) / 2);width:calc(100vw - var(--sbw, 0px));overflow:hidden;background:#000;outline:none}
@media(max-width:767px){.mg{margin-top:-92px;margin-bottom:72px}}
.mg-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .4s ease}
.mg.is-pronto .mg-canvas{opacity:1}
.mg-fotos img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .7s}
.mg:not(.is-sem-webgl) .mg-fotos{visibility:hidden}
.mg-fotos img.is-ativa{opacity:1}
.mg-sombra{position:absolute;left:0;right:0;bottom:0;z-index:5;height:14rem;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.65));pointer-events:none}
.mg-seta{position:absolute;top:50%;z-index:10;display:flex;align-items:center;justify-content:center;width:44px;height:44px;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;transition:background-color .15s}
.mg-seta:hover{background:rgba(255,255,255,.25)}
.mg-seta:focus-visible,.mg-miniaturas button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mg-seta.is-ant{left:16px}.mg-seta.is-prox{right:16px}
@media(min-width:640px){.mg-seta.is-ant{left:32px}.mg-seta.is-prox{right:32px}}
.mg-miniaturas{position:absolute;left:0;right:0;bottom:32px;z-index:10;display:flex;gap:8px;width:max-content;max-width:calc(100% - 2rem);margin:0 auto;padding:0 0 10px;list-style:none;overflow-x:auto;scroll-behavior:smooth}
.mg-miniaturas::-webkit-scrollbar{height:6px}
.mg-miniaturas::-webkit-scrollbar-track{border-radius:4px;background:rgba(255,255,255,.1)}
.mg-miniaturas::-webkit-scrollbar-thumb{border-radius:4px;background:rgba(255,255,255,.3)}
@media(max-width:639px){.mg-miniaturas{display:none}}
.mg-miniaturas li{flex:none}
.mg-miniaturas button{display:block;padding:0;overflow:hidden;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.mg-miniaturas button:hover{opacity:.85}
/* sem a moldura branca do original na miniatura da vez (27/10): ela só fica acesa */
.mg-miniaturas button[aria-current="true"]{opacity:1}
.mg-miniaturas img{display:block;width:80px;height:50px;max-width:none;object-fit:cover}
/* fotos das feiras de 2026 que vieram com faixas pretas dos lados (o
   conteúdo é 1620 de 1920 px de largura): o arquivo fica inteiro e a foto é
   ampliada só o bastante para as faixas saírem do quadro. Vale para a <img>
   (sem WebGL), para a miniatura e, pelo ui.js, que lê o --mg-zoom, para o
   shader. 1.19 = 1920/1620 com uma folga de meio pixel de borda */
.mg-faixas{--mg-zoom:1.19}
.mg-fotos img.mg-faixas,.mg-miniaturas img.mg-faixas{transform:scale(var(--mg-zoom))}
@media(prefers-reduced-motion:reduce){.mg-canvas,.mg-fotos img{transition:none}}
/* nome da página por cima das fotos (Academic Fairs): grande e fino como o
   das heros do Anexo e do Prédio, no centro da hero (27/10) */
.mg-nome{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:0 72px;text-align:center;pointer-events:none}
.mg-titulo{margin:0;font-size:clamp(3rem,5.56vw,5rem);font-weight:300;letter-spacing:-.025em;line-height:1;color:#fff;animation:verse-hero-in .9s ease .15s both}
@media(prefers-reduced-motion:reduce){.mg-titulo{animation:none}}
/* celular: as setas dos lados apertavam o título no meio da tela (em 360px
   "Academic" encostava nelas). Sem as miniaturas, elas descem para o pé da
   hero, lado a lado no centro (longe do botão do WhatsApp), e o título fica
   com a largura toda */
@media(max-width:639px){
  .mg-seta{top:auto;bottom:40px;transform:none}
  .mg-seta.is-ant{left:calc(50% - 52px)}
  .mg-seta.is-prox{right:calc(50% - 52px)}
  .mg-nome{padding:0 24px}
}

/* ---------- janela de vídeo em tela cheia (.bento-modal) ----------
   Nasceu com a galeria das feiras, que saiu em 26/10; segue em uso pela
   janela do YouTube da RCS Ponte ([data-mu-modal]). */
.bento-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.bento-modal[hidden]{display:none}
.bento-modal.is-open{opacity:1}
.bento-modal-box{width:100%;max-width:960px;padding:16px;transform:scale(.9) translateY(20px);transition:transform .3s ease}
.bento-modal.is-open .bento-modal-box{transform:none}
.bento-modal-box img,.bento-modal-box video{display:block;width:100%;height:auto;max-height:90vh;object-fit:contain;border-radius:10px}
.bento-modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;padding:10px;border:0;background:none;color:rgba(255,255,255,.8);cursor:pointer;-webkit-appearance:none;appearance:none}
.bento-modal-close:hover{color:#fff}

/* ---------- Feiras em abas verticais (Feiras e projetos, [data-vt]) ----------
   Porte vanilla do vertical-tabs do 21st.dev (26/10). À esquerda a lista das
   feiras (a ativa abre o texto); à direita a foto, que troca deslizando na
   vertical, em mola, a cada 5s (ui.js), com setas no canto. Sem a barra de
   tempo, os números /01 e o rótulo (SERVICES) do original, a pedido. No
   celular a foto vem antes da lista. */
.vt{padding:32px 0}
@media(min-width:768px){.vt{padding:64px 0}}
@media(min-width:1024px){.vt{padding:96px 0}}
.vt-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:1024px){.vt-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:64px}}
/* 27/10: as duas colunas alinhadas pelo topo (no original a foto ia para o
   pé da lista e subia e descia quando a feira aberta mudava de tamanho):
   o título da primeira feira começa na linha do topo da foto, e a foto fica
   parada */
.vt-texto{order:2;display:flex;flex-direction:column}
.vt-midia{order:1}
@media(min-width:1024px){.vt-texto{order:1;grid-column:span 5}.vt-midia{order:2;grid-column:span 7}}
.vt-lista{display:flex;flex-direction:column}
.vt-tab{display:flex;flex-direction:column;gap:8px;padding:24px 0;text-align:left;background:none;border:0;border-top:1px solid rgba(229,231,235,.5);font:inherit;color:rgba(107,114,128,.6);cursor:pointer;transition:color .5s}
.vt-tab:first-child{border-top:0}
@media(min-width:1024px){.vt-tab:first-child{padding-top:0}}
@media(min-width:768px){.vt-tab{padding:32px 0}}
.vt-tab:hover,.vt-tab.is-active{color:#141414}
.vt-tab-title{font-size:1.5rem;line-height:2rem;font-weight:400;letter-spacing:-.025em}
@media(min-width:768px){.vt-tab-title{font-size:1.875rem;line-height:2.25rem}}
@media(min-width:1024px){.vt-tab-title{font-size:2.25rem;line-height:2.5rem}}
/* o texto abre e fecha na altura (grid 0fr → 1fr), como o height:auto do original */
.vt-tab-desc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1)}
.vt-tab-desc>span{overflow:hidden}
.vt-tab.is-active .vt-tab-desc{grid-template-rows:1fr;opacity:1}
/* Academic Fairs: a frase final. A cena sobe 50vh por baixo do fim das abas
   e o palco gruda na tela; a frase entra com .is-in (ui.js), de desfocada e
   transparente para nítida. Fora isso a cena não pega clique, para as setas
   da foto das abas continuarem funcionando por cima dela. */
.af-cena{position:relative;height:170vh;margin-top:-50vh;pointer-events:none}
.af-palco{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.af-frase{max-width:920px;margin:0 auto;text-align:center;opacity:0;filter:blur(14px);transform:scale(.96);transition:opacity .9s ease,filter .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.af-cena.is-in{pointer-events:auto}
.af-cena.is-in .af-frase{opacity:1;filter:none;transform:none}
.af-frase p{font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.6;color:#374151}
.af-frase .badge-word{font-size:.95em;line-height:1.25}
/* a palavra que troca: caixa do tamanho da maior (o medidor), palavras
   alinhadas à esquerda dela, e "valor de" + palavra sempre na mesma linha */
.af-frase .rotator{display:inline-flex;vertical-align:bottom;justify-content:flex-start}
/* as palavras animadas no mesmo tamanho do medidor (a regra geral do trilho
   as deixa em 1em), senão a maior sai cortada */
.af-frase .rotator > .badge-word:not(.rotator-sizer){font-size:.95em}
.af-fim{white-space:nowrap}
.fhs-fim.af-contato{margin-top:0}
@media(prefers-reduced-motion:reduce){.af-frase{transition:none;filter:none;transform:none}}
/* 26/10: texto das feiras maior que o do original (pedido) */
.vt-tab-p{display:block;max-width:32rem;padding-bottom:8px;font-size:1.0625rem;line-height:1.6;font-weight:400;color:#4b5563}
@media(min-width:768px){.vt-tab-p{font-size:1.25rem}}
/* sem a borda clara do original em volta da foto (27/10) */
.vt-galeria{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:rgba(243,244,246,.3)}
@media(min-width:768px){.vt-galeria{aspect-ratio:4/3;border-radius:40px}}
@media(min-width:1024px){.vt-galeria{aspect-ratio:16/11}}
.vt-slide{position:absolute;inset:0;cursor:pointer;opacity:0;visibility:hidden}
.vt-slide.is-active,.vt-slide.is-saindo{visibility:visible}
.vt-slide.is-active{opacity:1;z-index:1}
.vt-slide img{display:block;width:100%;height:100%;margin:0;padding:0;object-fit:cover;transition:transform .7s}
.vt-slide img:hover{transform:scale(1.05)}
.vt-sombra{position:absolute;left:0;right:0;bottom:0;height:33.333%;background:linear-gradient(to top,rgba(0,0,0,.2),transparent);opacity:.6;pointer-events:none}
.vt-setas{position:absolute;right:24px;bottom:24px;z-index:20;display:flex;gap:8px}
@media(min-width:768px){.vt-setas{right:32px;bottom:32px;gap:12px}}
.vt-seta{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(229,231,235,.5);color:#141414;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
.vt-seta:hover{background:#fff}
.vt-seta:active{transform:scale(.9)}
.vt-seta svg{width:20px;height:20px}
@media(min-width:768px){.vt-seta{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.vt-tab,.vt-tab-desc,.vt-slide img{transition:none}}

/* ---------- RCS Ponte: página da banda, no modelo de hillsong.com/music ----------
   Coluna padrão das páginas (20/10), fundo claro do site, títulos de seção
   em 36px/700 e cartões de vidro claro. Destaques: cartão cinematográfico de
   250px com foto, degradê escuro da esquerda e texto branco; pontos à
   esquerda e setas à direita, embaixo. Lançamentos: fileira com scroll-snap
   de cartões de 170px (capa 1:1 e painel de vidro). Mais ouvidas: lista
   numerada; no hover a capa segue o mouse. */
.mu{padding:96px 0 0}
.mu-sec{margin-top:96px}
.mu-h2{font-size:clamp(1.8rem,3vw,2.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#111}
.mu-sub{margin-top:8px;font-size:.95rem;color:#4b5563}
.mu-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.mu-tabs{display:flex;gap:18px}
.mu-tab{padding:0;border:0;background:none;font:inherit;font-size:.9rem;font-weight:500;color:#6b7280;cursor:pointer;-webkit-appearance:none;appearance:none}
.mu-tab.is-on{font-weight:700;color:#111}
.mu-tab:hover{color:#111}
.mu-link{font-size:.9rem;font-weight:600;color:#111;text-decoration:underline;text-underline-offset:3px}
.mu-arrows{display:flex;gap:8px}
.mu-arrow{
  width:40px;height:40px;padding:9px;border-radius:50%;border:1px solid rgba(0,0,0,.35);background:transparent;color:#000;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease,background-color .2s ease,opacity .2s ease;
}
.mu-arrow:hover{border-color:#000;background:rgba(0,0,0,.04)}
.mu-arrow[disabled]{opacity:.3;cursor:default}
.mu-arrow svg{width:100%;height:100%}

/* destaques */
/* como na hillsong.com/music: o quadro fica parado; a foto nova esmaece por
   cima da antiga (0,55s) e o texto troca em dois tempos: o atual desliza
   20px e some, e o novo entra do outro lado, 20px, e assenta. O sentido
   (--de e --para) vem do ui.js: para a frente, sai pela esquerda e entra
   pela direita; para trás, o contrário. */
.mu-slides{position:relative;height:250px;border-radius:16px;overflow:hidden;background:#1a1a1a;--de:20px;--para:-20px}
.mu-slides .mu-slide{position:absolute;inset:0;background:transparent}
.mu-slides::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.78),rgba(0,0,0,.35) 55%,rgba(0,0,0,.05))}
.mu-slides .mu-slide img{opacity:0;transition:opacity .55s ease-in-out}
.mu-slides .mu-slide.is-on img{opacity:1}
.mu-slides .mu-slide-text{z-index:2;opacity:0;transform:translateX(var(--de));pointer-events:none;transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.mu-slides .mu-slide.is-on .mu-slide-text{opacity:1;transform:none;pointer-events:auto;transition-delay:.4s}
.mu-slides .mu-slide.is-out .mu-slide-text{opacity:0;transform:translateX(var(--para));transition-duration:.25s;transition-delay:0s}
.mu-slide{position:relative;overflow:hidden;background:#1a1a1a}
.mu-slide.is-single{height:250px;border-radius:16px}
.mu-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mu-slide.is-single::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.78),rgba(0,0,0,.35) 55%,rgba(0,0,0,.05))}
.mu-slide-text{position:absolute;left:28px;bottom:26px;right:28px;z-index:1;color:#fff;max-width:440px}
.mu-slide-text small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mu-slide-text h3{margin-top:6px;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.mu-slide-text p{margin-top:4px;font-size:.9rem;color:rgba(255,255,255,.85)}
/* o botão dos destaques segue o padrão (.soft-cta.is-claro); aqui só a distância */
.soft-cta.mu-pill{margin-top:16px}
.mu-feat-ctrl{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.mu-dots{display:flex;gap:8px}
.mu-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(0,0,0,.25);cursor:pointer;transition:width .3s ease,background-color .3s ease;-webkit-appearance:none;appearance:none}
.mu-dot.is-on{width:26px;background:#c62828}

/* fileiras (lançamentos e vídeos) */
.mu-row{display:flex;gap:14px;margin-top:18px;padding:4px 2px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.mu-row::-webkit-scrollbar{display:none}
.mu-rel{
  flex:0 0 170px;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;text-decoration:none;color:#111;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.18);transition:box-shadow .25s ease,transform .25s ease;
}
.mu-rel:hover{box-shadow:0 14px 28px -10px rgba(0,0,0,.3);transform:translateY(-2px)}
.mu-rel[hidden]{display:none}
.mu-rel img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#ddd}
.mu-rel-info{display:flex;flex-direction:column;gap:2px;flex:1;padding:8px 10px 10px;min-height:92px}
.mu-rel-info small{font-size:.72rem;font-weight:500;color:#6b7280}
.mu-rel-info strong{font-size:.875rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mu-rel-info em{margin-top:auto;font-style:normal;font-size:.72rem;color:#6b7280}
.mu-vid{flex:0 0 280px;scroll-snap-align:start;padding:0;border:0;background:none;text-align:left;font:inherit;color:#111;cursor:pointer;-webkit-appearance:none;appearance:none}
.mu-vid-media{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#ddd;box-shadow:0 4px 10px -4px rgba(0,0,0,.18)}
.mu-vid-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mu-vid:hover .mu-vid-media img{transform:scale(1.05)}
.mu-vid-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:12px 11px 12px 13px;border-radius:50%;background:rgba(255,255,255,.85);color:#111;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mu-vid-play svg{width:100%;height:100%}
.mu-vid-info{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.mu-vid-info strong{font-size:.9rem;font-weight:600;line-height:1.3}
.mu-vid-info em{font-style:normal;font-size:.75rem;color:#6b7280;white-space:nowrap}
.mu-modal-box{max-width:1000px}
.mu-modal-box iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}

/* quem é */
.mu-about p{margin-top:14px;max-width:62ch;font-size:1.1rem;font-weight:300;line-height:1.65;color:#111}
.mu-badges{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
/* no estilo do botão "Entrar" (.nav-btn), com o mesmo efeito magnético */
.mu-badges li{
  display:inline-flex;align-items:center;padding:8px 20px;border-radius:999px;
  border:1px solid rgba(0,0,0,.35);background:transparent;color:#000;font-size:.9rem;font-weight:700;
  cursor:default;will-change:transform;
}

/* mais ouvidas */
.mu-top{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid rgba(0,0,0,.1)}
.mu-top-row{display:grid;grid-template-columns:36px 1fr auto 40px;align-items:center;gap:14px;padding:12px 6px;border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer;transition:background-color .2s ease}
.mu-top-row:hover,.mu-top-row.is-playing{background:rgba(255,255,255,.45)}
.mu-top-n{font-size:.9rem;font-weight:600;color:#9ca3af;text-align:right}
.mu-top-row.is-playing .mu-top-n{color:#c62828}
.mu-top-t{display:flex;flex-direction:column;min-width:0}
.mu-top-t strong{font-size:1rem;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-top-t small{font-size:.8rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-top-d{font-size:.85rem;color:#6b7280;font-variant-numeric:tabular-nums}
.mu-top-play{width:36px;height:36px;padding:9px;border-radius:50%;border:1px solid rgba(0,0,0,.3);background:transparent;color:#111;cursor:pointer;-webkit-appearance:none;appearance:none}
.mu-top-play svg{width:100%;height:100%}
.mu-top-play .is-pause{display:none}
.mu-top-row.is-playing .mu-top-play .is-play{display:none}
.mu-top-row.is-playing .mu-top-play .is-pause{display:block}
.mu-top-cover{
  position:fixed;left:0;top:0;z-index:30;width:150px;height:150px;border-radius:10px;object-fit:cover;pointer-events:none;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.45);opacity:0;transform:scale(.8);transition:opacity .25s ease;will-change:transform,opacity;
}
.mu-top-cover.is-on{opacity:1}
@media(hover:none){.mu-top-cover{display:none}}

/* siga */
.mu-follow{margin-bottom:24px;text-align:center}
.mu-follow p{margin-top:10px;color:#4b5563}
.mu-follow-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}

@media(max-width:767px){
  .mu{padding-top:72px}
  .mu-sec{margin-top:72px}
  .mu-slides,.mu-slide.is-single{height:300px}
  .mu-slide-text{left:20px;right:20px;bottom:20px}
  .mu-rel{flex-basis:136px}
  .mu-vid{flex-basis:240px}
  .mu-top-row{grid-template-columns:24px 1fr 36px;gap:10px}
  .mu-top-d{display:none}
}
@media(prefers-reduced-motion:reduce){.mu-slides .mu-slide img,.mu-slides .mu-slide-text{transition:none}}

/* ---------- American High School (fhs-) ----------
   Inspirada em hillsong.com/australia, com o visual do site: hero com a foto
   parada, a frase central com entrada em cascata pelas durações (0,4s / 0,6s
   / 0,8s, subindo 50px, como na Hillsong), abas em pílula com o indicador
   vermelho deslizando e painéis em crossfade de 0,6s, uma faixa-janela com a
   foto parada e o selo da RCS, a frase da RCS, perguntas, a faixa cinza dos
   parceiros (como a dos ministérios da Hillsong) e o apelo final escuro,
   encostado nela e no rodapé. */
/* 20/10: American High School na coluna padrão das páginas (alinhado à esquerda, largura cheia) */
.fhs-col{max-width:none}
.fhs-h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:300;letter-spacing:-.03em;line-height:1.15;color:#111}
.fhs-intro{max-width:800px;margin:96px auto 0;text-align:center}
.fhs-statement{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:300;letter-spacing:-.03em;line-height:1.25;color:#111}
.fhs-red{color:#c62828;font-weight:400}
.fhs-sub{margin-top:16px;font-size:1.25rem;font-weight:300;color:#6b7280}
.fhs-intro .soft-cta{margin-top:32px}
.fhs-d4[data-reveal],.fhs-d6[data-reveal],.fhs-d8[data-reveal]{transform:translateY(50px);transition-property:opacity,transform;transition-timing-function:ease-out}
.fhs-d4[data-reveal]{transition-duration:.4s}
.fhs-d6[data-reveal]{transition-duration:.6s}
.fhs-d8[data-reveal]{transition-duration:.8s}
.fhs-d4[data-reveal].is-in,.fhs-d6[data-reveal].is-in,.fhs-d8[data-reveal].is-in{transform:none}

/* abas */
.fhs-tabbar{
  position:relative;display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:24px;padding:6px;border-radius:999px;
  background:transparent;border:1px solid rgba(0,0,0,.12);
}
.fhs-tab{
  position:relative;z-index:1;padding:8px 20px;border-radius:999px;border:1px solid transparent;background:none;
  font:inherit;font-size:.9rem;font-weight:700;color:#000;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:border-color .4s ease,color .3s ease;
}
.fhs-tab:hover{border-color:rgba(0,0,0,.15)}
.fhs-tab.is-on{color:#000;border-color:transparent}
.fhs-tab:focus-visible{outline:2px solid #111;outline-offset:2px}
.fhs-tab-ind{
  position:absolute;left:0;top:0;z-index:0;box-sizing:border-box;border-radius:999px;background:transparent;border:1px solid rgba(0,0,0,.35);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),width .5s cubic-bezier(.34,1.56,.64,1),height .5s cubic-bezier(.34,1.56,.64,1);
}
[data-fhs-tabs].is-pronto .fhs-tab-ind{opacity:1}
/* indicador transparente e contornado, como o botão Entrar; sem JS, a própria aba ativa ganha o contorno */
[data-fhs-tabs]:not(.is-pronto) .fhs-tab.is-on{border-color:rgba(0,0,0,.35)}
.fhs-panels{display:grid;margin-top:32px}
.fhs-panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.fhs-panel.is-on{opacity:1;visibility:visible;transition-delay:0s}
.fhs-panel p{max-width:62ch;font-size:1.125rem;font-weight:300;line-height:1.65;color:#111}
.fhs-pills{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;padding:0;list-style:none}
/* as pílulas seguem o botão "Entrar" (.nav-btn): contorno fino, letra em
   negrito e o efeito magnético (data-magnetic), sem link */
.fhs-pill{padding:12px 20px;border:1px solid rgba(0,0,0,.35);border-radius:999px;text-align:center;font-size:.9rem;font-weight:700;color:#000;cursor:default;will-change:transform}

/* a janela: faixa de ponta a ponta com a foto parada (ui.js, [data-hero-fixo]) */
.fhs-janela{
  position:relative;isolation:isolate;overflow:hidden;margin:96px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width:calc(100vw - var(--sbw, 0px));min-height:min(70vh,640px);display:grid;place-items:center;padding:100px 24px;background:#2b2b2b;
}
.fhs-janela .cover-hero-media{position:absolute;left:0;right:0;top:0;z-index:-2}
.fhs-janela .cover-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.fhs-janela::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.45)}
.fhs-janela-inner{max-width:800px;text-align:center;color:#fff}
.fhs-janela-inner p{margin-top:24px;font-size:1.125rem;line-height:1.5;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.fhs-selo{display:block;width:168px;height:168px;margin-inline:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}

@media(max-width:767px){
  .fhs-tabbar{border-radius:24px;justify-content:center;width:100%}
  .fhs-janela{min-height:520px;padding:72px 16px}
  .fhs-intro,.fhs-janela{margin-top:72px}
  .fhs-selo{width:124px;height:124px}
}
@media(prefers-reduced-motion:reduce){
  .fhs-d4[data-reveal],.fhs-d6[data-reveal],.fhs-d8[data-reveal]{opacity:1;transform:none;transition:none}
  .fhs-tab-ind,.fhs-panel,.fhs-tab{transition:none}
}

/* a frase da RCS, no lugar das duas listas */
.fhs-rcs{max-width:800px;margin-inline:auto;text-align:center}
.fhs-rcs-texto{max-width:60ch;margin:20px auto 0;font-size:1.125rem;font-weight:300;line-height:1.65;color:#4b5563}
.fhs-rcs .soft-cta{margin-top:32px}
/* parceiros: faixa cinza de ponta a ponta, colunas de 349px com 66px entre
   elas, logo, texto de 15px e pílula (medidas da Hillsong) */
.fhs-parc{position:relative;margin:96px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);width:calc(100vw - var(--sbw, 0px));padding:100px 24px;background:#eaeaea}
.fhs-parc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;justify-content:center;max-width:1132px;margin-inline:auto}
.fhs-the{display:block;height:72px;width:auto;max-width:100%}
.fhs-chi{display:block;height:84px;width:auto;max-width:100%;filter:brightness(0)}
.fhs-parc-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.fhs-parc-logo{width:349px;max-width:100%;height:131px;display:flex;align-items:center;justify-content:center}
.fhs-fac{display:inline-flex;align-items:center;gap:16px}
.fhs-fac img{width:72px;height:72px}
.fhs-fac span{font-size:30px;line-height:1.05;font-weight:600;letter-spacing:-.02em;color:#111;text-align:left}
/* o PNG da I Can Do It tem muita margem: a caixa mostra só a arte (x235-621, y112-318) */
.fhs-icdi{position:relative;display:block;height:131px;aspect-ratio:387/207;overflow:hidden}
.fhs-icdi img{display:block;width:100%;height:100%}
.fhs-parc-item p{flex-grow:1;margin-top:20px;font-size:15px;line-height:21px;font-weight:300;color:#464646}
/* botões no padrão do site (.soft-cta); só a distância muda */
.soft-cta.fhs-btn{margin-top:20px}
/* apelo final: faixa escura de ponta a ponta, encostada nos parceiros e no rodapé */
.fhs-fim{position:relative;margin:0 0 -80px calc(50% - (100vw - var(--sbw, 0px)) / 2);width:calc(100vw - var(--sbw, 0px));padding:100px 24px;background:#1f1f1f;text-align:center}
.fhs-fim-inner{max-width:800px;margin-inline:auto}
.fhs-fim h2{font-size:36px;line-height:44px;font-weight:300;letter-spacing:-.03em;color:#fff}
.fhs-fim p{margin-top:20px;font-size:18px;line-height:29px;font-weight:300;color:#eee}
/* o mesmo botão do site, em branco, na faixa escura */
.soft-cta.fhs-btn-claro{margin-top:32px;color:#fff;border-color:rgba(255,255,255,.45)}
.soft-cta.fhs-btn-claro:hover{background:rgba(255,255,255,.1)}
@media(max-width:1100px) and (min-width:768px){.fhs-parc-grid{grid-template-columns:repeat(2,minmax(0,320px));gap:64px 32px}}
@media(max-width:767px){
  .fhs-parc{margin-top:72px;padding:53px 24px}
  .fhs-parc-grid{grid-template-columns:minmax(0,1fr);gap:80px}
  .fhs-parc-logo{width:250px;height:94px}
  .fhs-the{height:56px}
  .fhs-icdi{height:94px}
  .fhs-chi{height:64px}
  .fhs-fac{gap:12px}
  .fhs-fac img{width:52px;height:52px}
  .fhs-fac span{font-size:22px}
  .fhs-fim{padding:53px 24px}
  .fhs-fim h2{font-size:21px;line-height:26px}
  .fhs-fim p{font-size:16px;line-height:25px}
}
/* a palavra que troca na frase de abertura: um quadro verde só, do tamanho
   da maior palavra, e só a palavra muda dentro dele (como em Inclusão) */
.fhs-rot{display:inline-flex;vertical-align:bottom;justify-content:center;background:#ECF99A;border-radius:.22em}
.fhs-rot .badge-word{font-size:.92em;line-height:1.2;background:transparent}

/* ---------- Internacional (intl-) ----------
   Inspirada em hillsong.com/college/college-life, com o visual do site:
   seções de 120px (72px no celular), títulos centrais em peso 300 (55px),
   card dividido do Career Counseling (com a linha dos exames), Programas
   Internacionais em abas, carrossel squeeze da feira ([data-intl-squeeze], ui.js), faixa dos parceiros e apelo final. */
.intl-hero-img{object-position:center 35%}
.intl-sec{margin-top:120px}
.intl-center{text-align:center}
/* 19/10: títulos no tamanho e peso das outras páginas (.section-title) */
.intl-h2{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#111;text-wrap:balance}
.intl-lead{max-width:60ch;margin:20px auto 0;font-size:1.125rem;font-weight:300;line-height:1.6;color:#4b5563;text-align:center;text-wrap:pretty}
.intl-p{margin-top:16px;max-width:62ch;font-size:1.125rem;font-weight:300;line-height:1.65;color:#111}
.intl-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:32px}
.intl-btns .soft-cta{margin-top:0}

/* Career Counseling: sem quadro; foto em carrossel à esquerda, título e abas à direita */
/* Career Counseling: quatro temas sobre texturas claras (Image Gallery), na
   largura toda da coluna, com 400px de altura; o texto fica centralizado na altura do tema: cada um tem 14rem e cresce para ocupar a faixa; com o mouse
   em cima, o tema vai a 100% em 0,5s e os outros estreitam. O texto tem largura
   fixa (não reflui durante a animação) e só aparece no tema aberto; o nome
   fica sempre. No celular, um embaixo do outro, com o texto à mostra. */
.intl-ccg{display:flex;gap:8px;height:400px;margin-top:40px}
.intl-ccg-item{position:relative;flex-grow:1;width:14rem;min-width:0;border-radius:8px;overflow:hidden;background:#d5d8d6;transition:width .5s ease}
.intl-ccg-item:hover,.intl-ccg-item:focus-visible{width:100%}
.intl-ccg-item:focus-visible{outline:2px solid #111;outline-offset:3px}
/* textura levemente borrada (o scale esconde a borda clara que o blur cria) */
.intl-ccg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(4px);transform:scale(1.06)}
.intl-ccg-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:28px}
/* fechado, o texto não ocupa espaço (o nome fica no meio da altura); aberto, ele
   entra acima do nome e o bloco todo fica centralizado na altura */
.intl-ccg-txt p{align-self:center;width:24rem;max-width:none;max-height:0;margin-bottom:0;overflow:hidden;font-size:1.25rem;line-height:1.5;text-align:center;font-weight:400;color:#111;opacity:0;transition:opacity .3s ease,max-height .4s ease,margin-bottom .4s ease}
/* o texto só aparece no tema aberto (com o mouse ou o foco); antes, só o nome */
.intl-ccg-item:hover .intl-ccg-txt p,.intl-ccg-item:focus-within .intl-ccg-txt p,.intl-ccg-item:focus .intl-ccg-txt p{max-height:14em;opacity:1;transition-delay:.2s,0s,0s}
/* o nome fica embaixo, dentro da imagem, como um rodapé; o texto, no meio da altura */
.intl-ccg-txt h3{position:absolute;left:28px;right:28px;bottom:26px;font-size:1.4rem;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:#111;transition:opacity .3s ease}
/* com um tema aberto, os estreitos ficam só com a textura */
.intl-ccg:hover .intl-ccg-item:not(:hover) h3{opacity:0}
@media(prefers-reduced-motion:reduce){.intl-ccg-item,.intl-ccg-txt p{transition:none}}
/* cor de cada tema (documento "Career Counseling" do Drive); nos dois escuros
   o texto fica branco para continuar legível */
.intl-ccg-item.is-counseling{background:#dc2929}
.intl-ccg-item.is-exames{background:#f6d1d1}
.intl-ccg-item.is-strategy{background:#EFFF8E}
.intl-ccg-item.is-programs{background:#455940}
.intl-ccg-item.is-counseling .intl-ccg-txt :is(p,h3),.intl-ccg-item.is-programs .intl-ccg-txt :is(p,h3){color:#fff}
/* International Universities Fair sem fotos por enquanto: só um gradiente, no
   rosa e azul do fundo da página, na altura que o carrossel ocupava */
.intl-feira-grad{margin-top:40px;height:clamp(180px,32vw,340px);border-radius:6px;background:linear-gradient(115deg,#f7a8b8 0%,#f6d1d1 28%,#f4eef4 52%,#cfe3f6 76%,#9fcdec 100%)}


/* feira: carrossel squeeze (Carousel Squeeze). O ui.js monta as fotos no
   trilho e dá a largura de cada uma; as larguras usam --sq-hero (bloco 16:9
   na altura da fileira) e --sq-room (o que sobra para as colunas 1 a 3). */
.sq{container-type:inline-size;margin-top:40px;--sq-h:clamp(180px,32cqi,340px);--sq-gap:16px;--sq-slat-gap:8px;--sq-slat:8px;--sq-radius:6px;--sq-ms:1000ms;--sq-ease:cubic-bezier(.16,1,.3,1);--sq-hero:calc(var(--sq-h) * 16 / 9)}
.sq-ctrl{display:flex;justify-content:flex-end;margin-bottom:16px}
.sq-janela{width:100%;height:var(--sq-h);overflow:hidden}
.sq-trilho{display:flex;height:100%;width:max-content;will-change:transform}
.sq-card{position:relative;isolation:isolate;flex:none;height:100%;margin:0;padding:0;border:0;overflow:hidden;background:#ddd;cursor:pointer;-webkit-appearance:none;appearance:none;transition-property:width,margin-left,border-radius;transition-timing-function:var(--sq-ease)}
.sq-card img{position:absolute;top:0;left:50%;height:100%;width:var(--sq-hero);min-width:100%;max-width:none;transform:translateX(-50%);object-fit:cover;-webkit-user-select:none;user-select:none}
.sq-card:focus-visible{outline:2px solid #111;outline-offset:2px}
/* 21/10: legendas escondidas a pedido do dono; os <p> continuam no HTML porque guardam a foto (data-src) e o nome de cada uma para o leitor de tela */
.sq-textos{display:none}
.sq-txt{grid-area:1/1;max-width:46rem;font-size:17px;line-height:1.6;text-wrap:balance;opacity:0;visibility:hidden;transition:opacity var(--sq-ms) var(--sq-ease),visibility var(--sq-ms)}
.sq-txt.is-on{opacity:1;visibility:visible}
.sq-t{color:#111}
.sq-d{color:#6b7280}
@media(prefers-reduced-motion:reduce){.sq{--sq-ms:0ms}}

/* parceiros */
.intl-sec.fhs-rcs{margin-top:96px}
/* THE e Dual Credit: abas centralizadas, texto centralizado embaixo */
.intl-abas{text-align:center}
.intl-abas .fhs-tabbar{margin-top:0;width:auto;border-radius:999px}
.intl-abas-barra{margin-top:32px}
.intl-abas-selo{width:64px;height:64px;margin-bottom:24px}
/* Programas Internacionais: imagem de cada programa com a logo no centro, numa
   fileira que desliza até a imagem da aba aberta */
.intl-prog-car{max-width:760px;margin:32px auto 0;overflow:hidden;border-radius:16px;touch-action:pan-y}
.intl-prog-trilho{display:flex;transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.intl-prog-slide{position:relative;flex:0 0 100%;min-width:0;aspect-ratio:16/9;overflow:hidden;background:#ddd}
.intl-prog-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}
.intl-prog-slide::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.32);pointer-events:none}
/* logo em branco, chapada, direto sobre a foto escurecida (sem placa) */
.intl-prog-logo{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.intl-prog-logo img{display:block;height:84px;width:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.35))}
.intl-prog-logo img.is-branca{filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.35))}
.intl-prog-logo img.is-selo{height:110px}
.intl-abas .fhs-panels{margin-top:28px}
@media(max-width:767px){.intl-prog-car{margin-top:24px;border-radius:12px}.intl-prog-logo img{height:52px}.intl-prog-logo img.is-selo{height:70px}}
@media(prefers-reduced-motion:reduce){.intl-prog-trilho{transition:none}}
.intl-abas-taylor{height:56px;width:auto;margin:4px 0 28px}
/* Intercâmbios: a logo da Taylor vem embaixo do texto de cada aba, maior */
.itc-taylor{height:110px;width:auto;margin-top:32px}
@media(max-width:767px){.itc-taylor{height:84px;margin-top:24px}}
.intl-abas .fhs-panel{display:flex;flex-direction:column;align-items:center}
.intl-abas .fhs-panel .intl-lead{margin-top:0;max-width:none}
.intl-abas-the{height:64px;width:auto;margin-bottom:24px}
.intl-abas-chi{height:64px;width:auto;margin-bottom:24px;filter:brightness(0)}
.fhs-fim.intl-fim h2{text-wrap:balance}
/* parcerias: discreto. Título pequeno, abas do American High School e logos
   baixos correndo numa faixa com as pontas apagadas (Logo Marquee) */
.intl-parcerias{margin-top:96px;margin-bottom:0;text-align:center}
/* conheça também: depois do apelo final, alinhado à esquerda como o "Faça parte" */
.fhs-fim.intl-fim{margin-top:120px;margin-bottom:0}
.section.intl-tambem{margin-top:96px}
/* 19/10: textos e títulos alinhados à esquerda, na largura toda da coluna,
   como em Missão e valores (.prose.is-wide). A faixa escura do fim e a faixa
   de logos continuam centralizadas. */
.intl-h2{text-align:left}
.intl-lead{max-width:none;margin:20px 0 0;text-align:left}
/* 21/10: frase de abertura centralizada, sozinha (sem texto nem botões embaixo) */
#intl-intro{max-width:800px;text-align:center}
.intl-abas{text-align:left}
/* abas e painéis dos Programas Internacionais: centralizados (título e introdução seguem à esquerda) */
.intl-abas-barra{text-align:center}
.intl-abas .fhs-panel{align-items:center;text-align:center}
.intl-abas .fhs-panel .intl-lead{max-width:70ch;margin-inline:auto;text-align:center}
/* Career Counseling: abas dentro do painel do card, alinhadas à esquerda */
[data-tabs-altura] .fhs-panels{transition:height .5s ease}
[data-tabs-altura] .fhs-panel{align-self:start}
@media(prefers-reduced-motion:reduce){[data-tabs-altura] .fhs-panels{transition:none}}
.intl-parcerias{text-align:left}
.intl-abas .badge-word{font-weight:600}
.intl-marquee{max-width:80rem;margin-inline:auto;overflow:hidden;padding-block:1rem;-webkit-mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent)}
.intl-marquee-trilho{display:flex;align-items:center;gap:64px;width:max-content;will-change:transform}
.intl-marquee-trilho img,.intl-mq-fac{flex:none;height:72px;width:auto;-webkit-user-select:none;user-select:none;pointer-events:none}
.intl-marquee-trilho img.intl-mq-chi{filter:brightness(0)}
/* DBU e ESPM são largas e pesam mais que as outras: ficam mais baixas */
.intl-marquee-trilho img.intl-mq-menor{height:46px}
.intl-mq-fac{display:inline-flex;align-items:center;gap:12px}
.intl-mq-fac img{height:56px}
.intl-mq-fac span{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:#111;white-space:nowrap}

@media(max-width:1023px) and (min-width:768px){
}
@media(max-width:767px){
  .intl-sec{margin-top:72px}
  .intl-ccg{flex-direction:column;width:auto;height:auto;margin-top:28px}
  .intl-ccg-item,.intl-ccg-item:hover,.intl-ccg-item:focus-visible{width:auto;min-height:220px}
  .intl-ccg-txt{position:relative;min-height:220px;padding:22px}
  .intl-ccg-txt p{width:auto}
  .intl-ccg-txt p{align-self:stretch;opacity:1;width:auto;max-width:100%;max-height:none;margin-bottom:14px;font-size:1.05rem;line-height:1.55;text-align:left}
  .intl-ccg-txt{justify-content:space-between}
  .intl-ccg-txt h3{position:static}
  .intl-btns{gap:10px}
  .intl-parcerias{margin-top:64px}
  .intl-abas .fhs-tabbar{flex-wrap:wrap;justify-content:center;gap:2px;border-radius:24px;max-width:100%}
  .intl-abas .fhs-tab{padding:8px 13px;font-size:.84rem;white-space:nowrap}
  .section.intl-tambem{margin-top:72px}
  .intl-marquee-trilho{gap:40px}
  .intl-marquee-trilho img,.intl-mq-fac{height:52px}
  .intl-mq-fac img{height:40px}
  .intl-marquee-trilho img.intl-mq-menor{height:34px}
  .intl-mq-fac span{font-size:1.2rem}
  .intl-hero-img{object-position:30% 20%}
  .sq-txt{font-size:15px}
  .fhs-fim.intl-fim{margin-top:72px}
}
@media(prefers-reduced-motion:reduce){
}

/* ===== Intercâmbios (itc-) =====
   Página refeita em 20/10 no ritmo de hillsong.com/college (hero com título
   e um botão, cards de programa, depoimentos em escada, apelo final), com a
   pele do site: Inter, preto/cinza/vermelho, fundo em shader, .soft-cta,
   [data-reveal] com fhs-d4/6/8 e a faixa .fhs-fim. O Summer Camp 2027 é a
   última seção, em abas no padrão dos Programas Internacionais (classes
   .intl-abas do bloco intl- e ui.js [data-fhs-tabs]); aqui só o roteiro.
   Animações portadas à mão do 21st.dev (Hero, Reveal on hover, Hero Video
   Dialog, Words Stagger, Testimonial carousel); o JS fica nos blocos
   [data-itc-...] de shared/ui.js. */
.itc-sec{margin-top:120px;scroll-margin-top:88px}

/* hero: título e botão centrados no meio da foto, como na Hillsong */
.cover-hero.itc-hero{align-items:center;justify-content:center;text-align:center;min-height:90vh;min-height:90svh;padding:140px 0 80px}
/* véu uniforme: o céu da foto é claro e o título fica no meio */
.cover-hero.itc-hero::after{background:rgba(0,0,0,.4)}
.itc-hero-img{object-position:center 40%}
.itc-hero-title{font-size:clamp(2.25rem,4.17vw,3.75rem);font-weight:800;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-wrap:balance;animation:itc-fadeup .4s ease-out both}
/* a entrada fica no embrulho do botão, nunca no <a>: o transform final da
   animação passaria por cima do transform do data-magnetic */
.itc-hero-cta{margin-top:20px;animation:itc-fadeup .8s ease-out both}
.itc-hero-cta .soft-cta{margin-top:0}
@keyframes itc-fadeup{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}

/* INCOMING+ da hero e "Fale com a gente" da faixa escura: 21/10, sem
   preenchimento nenhum no hover (nem o branco que entrava da esquerda, nem o
   fundo translúcido do .soft-cta.is-claro); fica só o movimento magnético
   (data-magnetic, nav.js) */
.soft-cta.itc-btn:hover{background:transparent}
/* os dois: contorno de foco em branco, que aparece sobre a foto e o escuro */
.soft-cta.itc-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Summer Camp 2027 (aba "2 weeks+"): o roteiro em três linhas, no corpo de
   texto dos painéis (.fhs-panel p), e a frase da alimentação logo abaixo */
.itc-roteiro{display:grid;gap:10px;max-width:70ch;margin:0 auto;padding:0;list-style:none;font-size:1.125rem;font-weight:300;line-height:1.65;color:#111;text-wrap:balance}
.itc-roteiro strong{font-weight:600}
.intl-abas .fhs-panel .itc-incluso{margin-top:20px}

/* intercâmbios passados: cards 3:2 com a legenda abaixo, como "Pick your program" */
.itc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;margin-top:48px}
.itc-card-media{position:relative;isolation:isolate;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#2b2b2b;box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.itc-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out}
.itc-card:first-child .itc-card-media img{object-position:center 45%}
.itc-card-media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,0);transition:background-color .3s ease-out}
.itc-card:hover .itc-card-media img,.itc-card:focus-within .itc-card-media img{transform:scale(1.05)}
.itc-card:hover .itc-card-media::after,.itc-card:focus-within .itc-card-media::after{background-color:rgba(0,0,0,.45)}
/* destaques que sobem no hover, um depois do outro */
.itc-card-dest{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;pointer-events:none}
.itc-card-dest li{padding:6px 12px;border:1px solid rgba(255,255,255,.6);border-radius:999px;font-size:.85rem;font-weight:600;line-height:1.2;color:#fff;opacity:0;transform:translateY(12px);transition:opacity .3s ease-out,transform .3s ease-out}
.itc-card-dest li:nth-child(2){transition-delay:60ms}
.itc-card-dest li:nth-child(3){transition-delay:120ms}
.itc-card-dest li:nth-child(4){transition-delay:180ms}
.itc-card:hover .itc-card-dest li,.itc-card:focus-within .itc-card-dest li{opacity:1;transform:none}
/* no toque não há hover: destaques sempre à mostra, sobre um degradê no pé */
@media(hover:none){
  .itc-card-dest li{opacity:1;transform:none}
  .itc-card-media::after{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
}
.itc-play{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#111;cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform .3s ease-out}
.itc-play svg{width:28px;height:28px;margin-left:4px;fill:currentColor}
.itc-play::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.9);pointer-events:none;animation:itc-pulso 2s ease-out infinite}
@keyframes itc-pulso{from{transform:scale(1);opacity:.5}to{transform:scale(1.35);opacity:0}}
.itc-card:hover .itc-play,.itc-play:focus-visible{transform:scale(1.08)}
.itc-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.itc-card-t{margin-top:14px;font-size:1.25rem;line-height:1.5;font-weight:800;text-transform:uppercase;color:#111}
.itc-card-ano{color:#c62828}
.itc-card-ano::after{content:' ·';color:#111}
/* ano depois do nome (2023): o ponto vem antes do ano */
.itc-card-ano.is-fim::after{content:none}
.itc-card-ano.is-fim::before{content:'· ';color:#111}
.itc-card-meta{margin-top:4px;font-size:.95rem;color:#4b5563}
.itc-card-txt{margin-top:10px;max-width:46ch;font-size:1rem;line-height:1.6;font-weight:300;color:#4b5563}

/* vídeo do The Commission em modal (o iframe só existe com ele aberto) */
.itc-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease-out}
.itc-modal[hidden]{display:none}
.itc-modal.is-open{opacity:1}
.itc-modal-box{position:relative;width:100%;max-width:1100px;transform:scale(.9) translateY(20px);transition:transform .3s ease-out}
.itc-modal.is-open .itc-modal-box{transform:none}
.itc-modal-frame{aspect-ratio:16/9;max-height:calc(100vh - 140px);margin-inline:auto;border-radius:20px;overflow:hidden;background:#000}
.itc-modal-frame iframe{display:block;width:100%;height:100%;border:0}
.itc-modal-x{position:absolute;right:0;bottom:calc(100% + 12px);width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:transparent;font:inherit;font-size:24px;line-height:1;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s ease}
.itc-modal-x:hover{background:rgba(255,255,255,.1)}
.itc-modal-x:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* depoimentos: pilha de palavras pequenas à direita + frase grande */
.itc-depo-tit{display:flex;align-items:center;gap:12px}
/* "Testemunhos" no padrão dos outros títulos (1.75rem, bold) */
.itc-depo-frase{min-width:0;font-size:1.75rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#111;text-wrap:balance}
/* palavra por palavra (o ui.js embrulha cada uma em .itc-w e põe o --i) */
.itc-w{display:inline-block;opacity:0;transform:translateY(20px);filter:blur(8px);transition:opacity .5s ease-out,transform .5s ease-out,filter .5s ease-out;transition-delay:calc(var(--i,0) * 80ms)}
.itc-depo-tit.is-in .itc-w{opacity:1;transform:none;filter:blur(0)}
/* carrossel: rolagem nativa com snap; setas e pontos no ui.js */
/* depoimentos: galeria expansível (Expandable Gallery). Com o mouse em cima,
   a foto vai a flex 2 e as outras a .5 (0,5s); as outras ficam com véu preto
   de 30% e a da vez sem véu, mostrando o depoimento. O clique abre em tela cheia. */
.itc-gal{display:flex;gap:8px;height:24rem;margin-top:48px}
.itc-gal-item{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:6px;overflow:hidden;background:#ddd;cursor:pointer;text-align:left;font:inherit;-webkit-appearance:none;appearance:none;transition:flex-grow .5s ease-in-out}
.itc-gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.itc-gal-item::after{content:'';position:absolute;inset:0;background:#000;opacity:.3;transition:opacity .3s ease}
.itc-gal.is-hover .itc-gal-item{flex-grow:.5}
.itc-gal.is-hover .itc-gal-item.is-on{flex-grow:2}
.itc-gal-item.is-on::after{opacity:0}
.itc-gal-item:focus-visible{outline:2px solid #111;outline-offset:3px}
.itc-gal-txt{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:10px;padding:56px 24px 22px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));color:#fff;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.itc-gal-item.is-on .itc-gal-txt{opacity:1;transform:none;transition-delay:.2s}
.itc-gal-txt q{font-size:1.05rem;line-height:1.5;font-weight:400;min-width:18rem;text-wrap:pretty}
.itc-gal-txt small{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
/* tela cheia: fundo claro a 95%, foto ampliada com o depoimento, setas e contador */
.itc-gal-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;gap:24px;padding:72px 24px;background:rgba(255,255,255,.98);opacity:0;transition:opacity .3s ease}
.itc-gal-modal[hidden]{display:none}
.itc-gal-modal.is-open{opacity:1}
.itc-gal-box{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:64rem;margin:0;transform:scale(.8);opacity:0;transition:transform .3s ease,opacity .3s ease}
.itc-gal-modal.is-open .itc-gal-box.is-in{transform:none;opacity:1}
.itc-gal-box img{display:block;max-width:100%;max-height:58vh;max-height:58svh;object-fit:contain;border-radius:6px}
/* em tela cheia a foto aparece inteira, então em vez do zoom as faixas são
   cortadas na exibição (o ui.js copia a classe da miniatura) */
.itc-gal-box img.faixa-lado{transform:none;clip-path:inset(0 7.8125% round 6px)}
.itc-gal-box figcaption{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:46rem;text-align:center}
.itc-gal-box q{font-size:1.25rem;line-height:1.5;font-weight:400;color:#111}
.itc-gal-box small{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
.itc-gal-x{position:absolute;top:16px;right:16px;width:44px;height:44px;padding:8px;border:0;background:none;color:#111;cursor:pointer;-webkit-appearance:none;appearance:none}
.itc-gal-x svg{width:100%;height:100%}
.itc-gal-prev,.itc-gal-next{flex:none}
.itc-gal-cont{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:.875rem;font-weight:600;color:#4b5563}

/* apelo final e "Conheça também" (como em Internacional) */
.fhs-fim.itc-fim{margin-top:120px;margin-bottom:0}
.fhs-fim.itc-fim h2{text-wrap:balance}
.section.itc-tambem{margin-top:96px}

@media(max-width:1023px) and (min-width:768px){
  .itc-cards{gap:40px}
}
/* cards menores (tablet e celular): destaques e play menores, sem se encostarem */
@media(max-width:1023px){
  .itc-card-dest{left:16px;right:16px;bottom:16px;gap:6px}
  .itc-card-dest li{padding:4px 10px;font-size:.75rem}
  .itc-play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .itc-play svg{width:22px;height:22px;margin-left:3px}
}
/* celular estreito: os destaques quebram em duas linhas e subiriam até o play
   (em 320px encostavam); o play fica um pouco menor e acima do centro */
@media(max-width:479px){
  .itc-play{top:42%;width:48px;height:48px;margin:-24px 0 0 -24px}
  .itc-play svg{width:20px;height:20px;margin-left:3px}
}
@media(max-width:767px){
  .itc-sec{margin-top:72px}
  .cover-hero.itc-hero{min-height:min(70svh,540px);padding:120px 0 56px}
  .itc-cards{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:36px}
  .itc-card-t{font-size:1.125rem}
  .itc-gal{height:20rem;margin-top:36px;gap:6px}
  .itc-gal-txt{padding:40px 16px 16px}
  .itc-gal-txt q{display:none}
  .itc-gal-box q{font-size:1.05rem}
  .itc-gal-modal{gap:8px;padding:64px 12px}
  .itc-gal-prev,.itc-gal-next{position:absolute;bottom:12px}
  .itc-gal-prev{left:16px}
  .itc-gal-next{right:16px}
  .itc-modal{padding:16px}
  .fhs-fim.itc-fim{margin-top:72px}
  .section.itc-tambem{margin-top:72px}
}
@media(prefers-reduced-motion:reduce){
  .itc-hero-title,.itc-hero-cta{animation:none}
  .itc-card-media img{transition:none}
  .itc-card:hover .itc-card-media img,.itc-card:focus-within .itc-card-media img{transform:none}
  .itc-card-dest li{transform:none;transition:opacity .2s ease}
  .itc-play,.itc-modal-box{transition:none}
  .itc-play::before{animation:none;opacity:0}
  .itc-card:hover .itc-play,.itc-play:focus-visible{transform:none}
  .itc-modal-box{transform:none}
  .itc-w{opacity:1;transform:none;filter:none;transition:none}
  .itc-gal-item,.itc-gal-txt,.itc-gal-modal,.itc-gal-box{transition:none}
  .itc-gal-box{transform:none}
}

/* ---------- Intercâmbios: abertura em zoom (Zoom Parallax) ----------
   Seção de 400vh com o palco grudado. O ui.js dá a escala de cada camada (de
   1 a 4, 5, 6, 5, 6, 8 e 9) nos primeiros 70% da rolagem: a foto do centro
   mede 25vw x 25vh e, a 4x, cobre a tela. Aí ela vira a hero: o título e o
   botão entram por cima (de 60px à esquerda e transparentes até o lugar) e o
   resto da seção é a hero parada, antes de a página seguir. */
.itc-zoom{position:relative;height:400vh;margin:-104px 0 0 calc(50% - (100vw - var(--sbw, 0px)) / 2);width:calc(100vw - var(--sbw, 0px))}
.itc-zoom-palco{position:sticky;top:0;height:100vh;overflow:hidden}
.itc-zoom-camada{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform;pointer-events:none}
.itc-zoom-foto{position:relative;width:25vw;height:25vh;overflow:hidden;background:#ddd}
.itc-zoom-foto img{width:100%;height:100%;object-fit:cover}
/* a do centro já nasce do tamanho da tela e começa a 1/4 (25vw x 25vh):
   assim, no fim do zoom, a hero fica nítida */
.itc-zoom-camada:first-child{transform:scale(.25)}
.itc-zoom-camada:nth-child(1) .itc-zoom-foto{width:100vw;height:100vh}
.itc-zoom-camada:nth-child(1) .itc-zoom-foto img{object-position:center 40%}
.itc-zoom-camada:nth-child(1) .itc-zoom-foto::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--itc-zoom-veu,0)}
.itc-zoom-camada:nth-child(2) .itc-zoom-foto{top:-30vh;left:5vw;width:35vw;height:30vh}
.itc-zoom-camada:nth-child(3) .itc-zoom-foto{top:-10vh;left:-25vw;width:20vw;height:45vh}
.itc-zoom-camada:nth-child(4) .itc-zoom-foto{left:27.5vw;width:25vw;height:25vh}
.itc-zoom-camada:nth-child(5) .itc-zoom-foto{top:27.5vh;left:5vw;width:20vw;height:25vh}
.itc-zoom-camada:nth-child(6) .itc-zoom-foto{top:27.5vh;left:-22.5vw;width:30vw;height:25vh}
.itc-zoom-camada:nth-child(7) .itc-zoom-foto{top:22.5vh;left:25vw;width:15vw;height:15vh}
.itc-zoom-hero{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;pointer-events:none}
.itc-zoom-hero .itc-hero-title,.itc-zoom-hero .itc-hero-cta{animation:none;opacity:0;will-change:transform,opacity}
.itc-zoom-hero .itc-hero-cta{pointer-events:auto}
@media(max-width:767px){.itc-zoom{margin-top:-92px}}
/* sem movimento: já abre no quadro final, com a hero à mostra */
@media(prefers-reduced-motion:reduce){
  .itc-zoom{height:100vh}
  .itc-zoom-camada:not(:first-child){display:none}
  .itc-zoom-camada:first-child{transform:none}
  .itc-zoom-camada:nth-child(1) .itc-zoom-foto::after{opacity:.4}
  .itc-zoom-hero .itc-hero-title,.itc-zoom-hero .itc-hero-cta{opacity:1}
}

/* ---------- WhatsApp flutuante x rodapé (todas as páginas) ----------
   No celular, folga no fim da página para o botão não cobrir o "© 2026".
   Fica no fim do arquivo para vencer o padding de .footer-bottom da home. */
@media(max-width:767px){
  .site-footer-bottom,.footer-bottom{padding-bottom:88px}
}

/* Missão e valores: "fazer o bem" com a cor das palavras da home, parado */
.verse-hero-quote .badge-word{line-height:1.15;padding:.08em .28em .02em}
.verse-junto{white-space:nowrap}

/* ================= Missão e valores: Base Cristã (.mvf-) =================
   porte do features-2 do 21st.dev: linhas de texto + foto que alternam de lado */
.mvf-cabeca{max-width:720px;margin:0 auto 32px;text-align:center}
.mvf-cabeca p{margin-top:18px;font-size:1.0625rem;line-height:1.7;color:#4b5563}
.mvf-row{display:flex;flex-direction:column;gap:40px;padding-block:64px;border-top:1px solid rgba(0,0,0,.1)}
.mvf-row:first-child{border-top:0}
.mvf-texto{flex:1;display:flex;flex-direction:column;gap:22px;min-width:0}
.mvf-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6b7280}
.mvf-texto h3{font-size:clamp(1.6rem,2.4vw,1.9rem);line-height:1.25;font-weight:700;letter-spacing:-.02em;color:#111}
.mvf-texto p{font-size:1rem;line-height:1.75;color:#4b5563}
.mvf-ref{display:flex;align-items:baseline;gap:10px;padding-top:20px;border-top:1px solid rgba(0,0,0,.1)}
.mvf-ref strong{font-size:1.125rem;font-weight:700;color:#111}
.mvf-ref span{font-size:.8125rem;color:#6b7280}
.mvf-midia{flex:1;position:relative;width:100%;aspect-ratio:4/3;margin:0;overflow:hidden;border-radius:10px;border:1px solid rgba(0,0,0,.1);background:#f3f4f6}
.mvf-midia img{width:100%;height:100%;object-fit:cover;display:block}
.mvf-midia figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;font-size:.75rem;font-weight:500;letter-spacing:.04em;color:#4b5563;background:rgba(255,255,255,.8);border-top:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(min-width:768px){
  .mvf-row{flex-direction:row;align-items:center;gap:80px}
  .mvf-row.is-invertida{flex-direction:row-reverse}
  .mvf-midia{max-width:26rem}
}
.fhs-fim.mv-contato{margin-top:96px}
@media(max-width:767px){.fhs-fim.mv-contato{margin-top:56px}.mvf-row{padding-block:44px}}