/* Anglo Pinda — Anos Finais
   Sistema visual derivado da LP de Educação Bilíngue e da campanha Leões 2027. */

@font-face{font-family:"Helvetica Neue LP";src:url("../fonts/HelveticaNeue-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LP";src:url("../fonts/HelveticaNeue-Medium.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LP";src:url("../fonts/HelveticaNeue-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LP";src:url("../fonts/HelveticaNeue-Black.woff2") format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue LP";src:url("../fonts/HelveticaNeue-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Boldonse;src:url("../fonts/Boldonse-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --er-blue:#00aeed;
  --er-blue-deep:#003d68;
  --er-navy:#10161f;
  --er-navy-2:#0d2d49;
  --er-yellow:#fddd02;
  --er-paper:#f8f7f1;
  --er-white:#fff;
  --er-ink:#102331;
  --er-muted:#5a6a75;
  --er-line:#dbe4e9;
  --er-radius:28px;
  --er-radius-sm:18px;
  --er-shadow:0 24px 70px rgba(7,23,37,.14);
  --er-shadow-sm:0 14px 34px rgba(7,23,37,.1);
  --header-height:78px;
  --container:1180px;
  --container-wide:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}
body{margin:0;color:var(--er-ink);background:var(--er-paper);font-family:"Helvetica Neue LP",Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
body::selection{color:var(--er-navy);background:var(--er-yellow)}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.section{position:relative;padding-block:clamp(78px,8vw,132px)}
.skip-link{position:fixed;z-index:9999;top:10px;left:10px;padding:10px 16px;border-radius:999px;color:#fff;background:var(--er-navy);transform:translateY(-150%)}
.skip-link:focus{transform:none}

.eyebrow,.campaign-label{color:var(--er-blue-deep);font-size:var(--texto--2);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.section-heading{max-width:790px;margin-bottom:clamp(36px,5vw,64px)}
.section-heading h2,.stage-copy h2,.project-copy h2,.process-intro h2,.life-copy h2,.family-copy h2,.visit-grid h2,.final-cta h2{margin-top:12px;font-size:var(--texto-6);font-weight:700;letter-spacing:-.065em;line-height:.98;text-wrap:balance}
.section-heading>p:last-child{max-width:680px;margin-top:22px;color:var(--er-muted);font-size:var(--texto-0)}

.site-header{position:sticky;z-index:100;top:0;height:var(--header-height);border-bottom:1px solid rgba(16,35,49,.08);background:rgba(255,255,255,.96);backdrop-filter:blur(16px)}
.header-inner{display:flex;height:100%;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:auto;height:50px;object-fit:contain}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px);font-size:var(--texto--2);font-weight:700}
.site-nav>a:not(.nav-cta){position:relative;padding-block:12px}
.site-nav>a:not(.nav-cta)::after{position:absolute;right:0;bottom:7px;left:0;height:2px;background:var(--er-blue);content:"";transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.site-nav>a:hover::after,.site-nav>a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-cta{padding:12px 20px;border-radius:999px;color:#fff;background:var(--er-navy);box-shadow:inset 0 -3px 0 var(--er-blue);transition:transform .25s var(--ease),background .25s}
.nav-cta:hover{background:#12334d;transform:translateY(-2px)}
.nav-toggle{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--er-navy);place-content:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;margin:3px auto;background:#fff;transition:.25s}

.button{display:inline-flex;min-height:56px;align-items:center;justify-content:center;gap:12px;padding:15px 25px;border:0;border-radius:999px;color:#fff;background:var(--er-navy);box-shadow:inset 0 -4px 0 var(--er-blue);font-size:var(--texto--1);font-weight:700;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.button:hover,.button:focus-visible{background:#12334d;box-shadow:inset 0 -4px 0 var(--er-yellow),0 12px 30px rgba(7,23,37,.17);transform:translateY(-3px)}
.button--yellow{color:var(--er-navy);background:var(--er-yellow);box-shadow:none}
.button--yellow:hover{color:#fff;background:var(--er-blue-deep)}

/* Hero: a mesma arquitetura editorial da página Bilíngue. */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 10% 15%,rgba(0,174,232,.11) 0 2px,transparent 2.5px) 0 0/18px 18px,var(--er-paper)}
.hero::before{position:absolute;inset:0 auto 0 0;width:8px;background:var(--er-blue);content:""}
.hero h1{max-width:690px;margin-top:8px;font-size:var(--texto-6);font-weight:700;letter-spacing:-.075em;line-height:.86}
.hero h1 span{display:inline;color:var(--er-blue-deep);background:linear-gradient(transparent 64%,var(--er-yellow) 64% 91%,transparent 91%)}
@keyframes marquee{to{transform:translateX(-50%)}}

.stage-copy p:not(.eyebrow):not(.lead){margin-top:20px;color:var(--er-muted)}
.section-heading--light .eyebrow{color:var(--er-yellow)}
.project-copy>p:not(.eyebrow){margin-top:24px}
.international-heading .eyebrow{color:var(--er-yellow)}
.life-copy .eyebrow{color:var(--er-yellow)}
.life-copy>p:not(.eyebrow){margin-top:25px;color:#d5ebf6}
.family-copy>p:not(.eyebrow){margin-top:24px}
.family-copy .button{margin-top:30px}
.visit-grid .eyebrow{color:var(--er-yellow)}
.faq-grid .section-heading{position:sticky;top:calc(var(--header-height) + 40px);align-self:start;margin:0}

.final-cta{position:relative;overflow:hidden;padding-block:clamp(72px,8vw,118px);color:#fff;background:var(--er-blue-deep)}
.final-cta::before{position:absolute;top:-180px;right:-120px;width:520px;height:520px;border:90px solid rgba(255,213,30,.11);border-radius:50%;content:""}
.final-cta-grid{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:60px}
.final-cta .eyebrow{color:var(--er-yellow)}
.final-cta h2{max-width:800px}
.final-cta p:not(.eyebrow){max-width:680px;margin-top:20px;color:#d4ebf5}

.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* O menu ocupa 86 px e o cabecalho tinha altura fixa de 76 px, entao os links
   caiam fora da faixa branca e ficavam com contraste de 1,42 sobre a secao
   final azul. Medido em qa2/report/_header-conheca.mjs. */
@media(min-width:1101px){
  .site-header{height:auto;min-height:var(--header-height)}
}

/* Entre 821 e 1100 px os links do menu eram escondidos mas o botao que abre o
   painel so aparecia a 820 px, entao nao havia como navegar. O painel e o
   botao passam a valer na mesma faixa. */
@media(max-width:1100px){
  .site-nav{gap:16px}
  .nav-cta{display:none}.nav-toggle{display:block}
  .site-nav{position:fixed;top:var(--header-height);right:12px;left:12px;display:none;align-items:stretch;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--er-shadow)}
  .site-nav[data-open="true"]{display:grid}
  .site-nav>a:not(.nav-cta){display:block;padding:12px}
  .site-nav .nav-cta{display:block;text-align:center}
}

@media(max-width:820px){
  :root{--header-height:68px}.section{padding-block:70px}
  .brand img{height:42px}.hero h1{font-size:var(--texto-6)}
  .process-intro,.faq-grid .section-heading{position:static}.final-cta-grid{grid-template-columns:1fr}
}

@media(max-width:520px){
  .section-heading h2,.stage-copy h2,.project-copy h2,.process-intro h2,.life-copy h2,.family-copy h2,.visit-grid h2,.final-cta h2{font-size:var(--texto-4)}.final-cta-grid{gap:35px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}

main section[id],main [id]{scroll-margin-top:96px}

:where(.brand, .inline-link, .visit-card > a, .footer-grid a) { min-height: 44px; }
:where(.inline-link, .visit-card > a, .footer-grid a) { display: inline-flex; align-items: center; }

/* ================================================================
   ANOS FINAIS 2027: mostrar a ação antes de descrevê-la
   ================================================================ */

.hero-film {
  padding: clamp(20px,3vw,42px) 0;
  color: #fff;
  background: #070c12;
}
/* Destaque controlado, não faixa de largura total. Com o container largo o
   vídeo media 989px de altura em 1440x900 e a página abria com dois blocos
   escuros de tela cheia em sequência. */
.hero-film .container { width: min(100% - (var(--gutter) * 2), 860px); }
.hero-film video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16/9;
  border-radius: clamp(14px,2vw,26px);
  background: #000;
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
  object-fit: cover;
}
.finals-tabs button:focus-visible,
.dose-tabs button:focus-visible,
.finals-panels:focus-visible {
  outline: 4px solid var(--er-yellow);
  outline-offset: 3px;
}
.finals-panels {
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--er-blue-deep);
  box-shadow: var(--er-shadow);
  touch-action: pan-y;
  user-select: none;
}
.finals-panels img { -webkit-user-drag: none; }
.js [data-switch-panel][data-active="false"] { display: none; }
.finals-panel-copy .eyebrow { color: var(--er-yellow); }
.finals-panel-copy > p:not(.eyebrow) { margin-top: 22px; color: #d4e7f1; }
.finals-material-grid > div > p:not(.eyebrow) { margin-top: 18px; color: var(--er-muted); }
.finals-support .eyebrow { color: var(--er-yellow); }
.finals-international .eyebrow { color: var(--er-yellow); }
.finals-life .eyebrow { color: var(--er-yellow); }
.finals-visit-grid .eyebrow { color: var(--er-yellow); }
.finals-visit-grid > div > p:not(.eyebrow) { margin-top: 20px; color: #c7e1ec; }
.finals-visit-grid .button { margin-top: 28px; }

html[data-media-focus="true"] .whatsapp-float {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(.82);
}

@media (max-width: 560px) {
  .hero-film { padding: 12px 0 24px; }
  .hero-film video { border-radius: 14px; }
}
/* A faixa `.trust-strip` (Etapas, Unidades, Inglês, Visitas) saiu da página a
   pedido do usuário, e com ela todo o CSS de `.trust-grid`, inclusive a
   correção de carrossel que ficava aqui. O dado de visita continua na página,
   na chamada final, onde a família já está decidindo agendar. */