:root{
  --maroon:#6E0A0A;
  --maroon-dark:#3B0404;
  --maroon-light:#8F1D1D;
  --charcoal:#221D1D;
  --ink:#241F1E;
  --ink-soft:#5B534F;
  --gray:#58565A;
  --gray-mid:#8B898C;
  --gray-light:#B7B5B4;
  --gray-pale:#E7E3DE;
  --cream:#FBF7F1;
  --cream-deep:#F3EDE3;
  --white:#FFFFFF;
  --font-display:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:'Work Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--ink-soft);background:var(--cream);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
img{max-width:100%;display:block;}
/* O <picture> vira o item de layout no lugar do <img>; sem isto ele fica inline
   e acrescenta folga de baseline sob os logos. */
picture{display:block;}
a{text-decoration:none;color:var(--maroon);}
a:hover{color:var(--maroon-light);}
button{font-family:var(--font-body);cursor:pointer;}
svg{display:block;width:20px;height:20px;flex-shrink:0;}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 40px;}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:0.16em;font-size:12.5px;font-weight:600;color:var(--maroon);display:flex;align-items:center;gap:10px;}
.eyebrow .rule{width:28px;height:2px;background:var(--maroon);display:block;}
h1.display{font-family:var(--font-display);font-weight:700;line-height:1.08;color:var(--ink);letter-spacing:-0.01em;}
h2.section-title{font-family:var(--font-display);font-weight:700;font-size:2.2rem;line-height:1.2;color:var(--ink);}
h3.card-title{font-family:var(--font-display);font-weight:700;font-size:1.28rem;line-height:1.32;color:var(--ink);}
p.lede{font-size:1.18rem;line-height:1.65;color:var(--ink-soft);}
p.body-text{font-size:1rem;line-height:1.72;color:var(--ink-soft);}
.verse{font-family:var(--font-display);font-style:italic;color:var(--white);}
.btn-primary{display:inline-flex;align-items:center;white-space:nowrap;gap:10px;background:var(--maroon);color:var(--white);padding:15px 30px;font-size:0.95rem;font-weight:600;letter-spacing:0.02em;border:1.5px solid var(--maroon);border-radius:2px;transition:background 150ms var(--ease-out),color 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 160ms var(--ease-out);}
.btn-primary:hover{background:var(--maroon-dark);border-color:var(--maroon-dark);color:var(--white);}
.btn-secondary{display:inline-flex;align-items:center;white-space:nowrap;gap:10px;background:transparent;color:var(--maroon);padding:14px 28px;font-size:0.95rem;font-weight:600;border:1.5px solid var(--maroon);border-radius:2px;transition:background 150ms var(--ease-out),color 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 160ms var(--ease-out);}
.btn-secondary:hover{background:var(--maroon);color:var(--white);}
.btn-onDark{display:inline-flex;align-items:center;white-space:nowrap;gap:10px;background:transparent;color:var(--white);padding:14px 28px;font-size:0.95rem;font-weight:600;border:1.5px solid rgba(255,255,255,0.55);border-radius:2px;transition:background 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 160ms var(--ease-out);}
.btn-onDark:hover{background:rgba(255,255,255,0.12);border-color:#fff;}
.btn-onDark-solid{display:inline-flex;align-items:center;white-space:nowrap;gap:10px;background:var(--white);color:var(--maroon);padding:15px 30px;font-size:0.95rem;font-weight:600;border:1.5px solid var(--white);border-radius:2px;transition:background 150ms var(--ease-out),color 150ms var(--ease-out),transform 160ms var(--ease-out);}
.btn-onDark-solid:hover{background:var(--cream);color:var(--maroon-dark);}
.btn-primary svg,.btn-secondary svg,.btn-onDark svg,.btn-onDark-solid svg{width:16px;height:16px;}
.card{background:var(--white);border:1px solid var(--gray-pale);border-radius:3px;padding:30px;}
.icon-badge{width:52px;height:52px;border-radius:50%;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;color:var(--maroon);flex-shrink:0;}
.icon-badge svg{width:24px;height:24px;}
.tag-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--gray-pale);border-radius:20px;background:var(--white);font-size:0.86rem;font-weight:500;color:var(--ink);}
.tag-chip svg{width:15px;height:15px;color:var(--maroon);flex-shrink:0;}

/* Campos de formulário — usados na página de matrícula. Primitivo, e não estilo
   inline, porque o estado :focus não é expressável em atributo style. */
.field-label{font-size:0.82rem;color:var(--ink);font-weight:500;display:block;margin-bottom:6px;}
.field{width:100%;background:var(--white);border:1px solid var(--gray-pale);border-radius:2px;padding:13px 16px;color:var(--ink);font-size:0.9rem;font-family:var(--font-body);line-height:1.45;transition:border-color 150ms var(--ease-out),box-shadow 150ms var(--ease-out);}
.field::placeholder{color:var(--gray-mid);}
.field:focus{outline:none;border-color:var(--maroon);box-shadow:0 0 0 3px rgba(110,10,10,0.12);}
textarea.field{resize:vertical;min-height:86px;}
select.field{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E0A0A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:15px 15px;}
.field-req{color:var(--maroon);}
.topbar{background:var(--charcoal);color:var(--gray-light);}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px;}
.topbar a{color:var(--gray-light);}
.topbar a:hover{color:var(--white);}
.topbar-item{display:flex;align-items:center;gap:7px;font-size:12.5px;}
.topbar-item svg{width:13px;height:13px;color:var(--maroon-light);}
.topbar-links-row{display:flex;align-items:center;gap:18px;}
.brandbar{height:6px;background:var(--maroon);}
.brandbar-thin{height:2px;background:var(--gray-light);}
nav.mainnav{background:var(--white);border-bottom:1px solid var(--gray-pale);}
nav.mainnav .container{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;}
.navlinks{display:flex;align-items:center;gap:34px;}
.navlinks a{font-size:0.93rem;font-weight:500;color:var(--ink);letter-spacing:0.01em;transition:color 120ms var(--ease-out);}
.navlinks a.active{color:var(--maroon);}
/* Menu mobile: o checkbox guarda o estado aberto/fechado sem JS.
   Ambos ficam ocultos no desktop. */
.navtoggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.navburger{display:none;}
.navlinks a:hover{color:var(--maroon);}
footer.sitefoot{background:var(--charcoal);color:var(--gray-light);}
footer.sitefoot a{color:var(--gray-light);}
footer.sitefoot a:hover{color:var(--white);}
footer.sitefoot .foot-title{font-family:var(--font-body);color:var(--white);font-weight:600;font-size:0.95rem;letter-spacing:0.03em;text-transform:uppercase;margin-bottom:18px;}
footer.sitefoot .foot-link{font-size:0.9rem;line-height:2.15;color:var(--gray-light);}
.social-dot{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;color:var(--white);transition:border-color 150ms var(--ease-out),background-color 150ms var(--ease-out);}
.social-dot:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
.social-dot svg{width:16px;height:16px;}
.section-cream{background:var(--cream);}
.section-white{background:var(--white);}
.section-deep{background:var(--cream-deep);}
.divider-line{height:1px;background:var(--gray-pale);width:100%;}

/* ==========================================================================
   MOVIMENTO
   Só feedback de interação e a entrada do hero. Nada de scroll reveal:
   o conteúdo institucional é denso e deve estar legível de imediato.
   ========================================================================== */

/* Press feedback — todo CTA leva a um page load; isto confirma o clique
   antes da próxima página pintar. */
.btn-primary:active,.btn-secondary:active,.btn-onDark:active,.btn-onDark-solid:active{transform:scale(0.97);}

/* A seta "→" acompanha o hover, indicando que o link leva a outro lugar. */
@media (hover:hover) and (pointer:fine){
  .btn-primary svg,.btn-secondary svg,.btn-onDark svg,.btn-onDark-solid svg{transition:transform 160ms var(--ease-out);}
  .btn-primary:hover svg,.btn-secondary:hover svg,.btn-onDark:hover svg,.btn-onDark-solid:hover svg{transform:translateX(3px);}
}

/* Entrada do hero da home: uma vez por visita, escalonada em 4 tempos.
   A coluna do vídeo NÃO anima — é o ponto focal e moldura em movimento
   durante o load barateia o efeito. */
@keyframes hero-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.hero-rise>*{animation:hero-rise 460ms var(--ease-out) both;}
.hero-rise>*:nth-child(1){animation-delay:0ms;}
.hero-rise>*:nth-child(2){animation-delay:60ms;}
.hero-rise>*:nth-child(3){animation-delay:120ms;}
.hero-rise>*:nth-child(4){animation-delay:180ms;}

@media (prefers-reduced-motion:reduce){
  .btn-primary,.btn-secondary,.btn-onDark,.btn-onDark-solid,.navlinks a,.social-dot,
  .btn-primary svg,.btn-secondary svg,.btn-onDark svg,.btn-onDark-solid svg{transition-duration:1ms;}
  .btn-primary:active,.btn-secondary:active,.btn-onDark:active,.btn-onDark-solid:active{transform:none;}
  .btn-primary:hover svg,.btn-secondary:hover svg,.btn-onDark:hover svg,.btn-onDark-solid:hover svg{transform:none;}
  /* Mantém a entrada, mas só como fade: sem deslocamento. */
  @keyframes hero-rise{from{opacity:0;}to{opacity:1;}}
  .hero-rise>*{animation-duration:200ms;}
}

/* ==========================================================================
   RESPONSIVO
   O layout deste mockup vive em atributos style="" inline, que vencem
   qualquer seletor por especificidade. Por isso as regras abaixo usam
   !important — é o único jeito de sobrescrever inline sem reescrever as
   cinco páginas. Os seletores de atributo casam com os padrões inline
   exatos do HTML; ao editar um style="" inline, confira se algum seletor
   daqui dependia dele.
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .container{padding:0 28px;}
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1.3fr 0.8fr 0.8fr 1fr"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
  [style*="gap:64px"]{gap:40px!important;}
  [style*="gap:56px"]{gap:36px!important;}
}

/* ---------- Mobile ---------- */
@media (max-width:880px){
  /* Topbar: o endereço longo e os links secundários saem; sobram os contatos. */
  .topbar .container{flex-wrap:wrap;justify-content:center;gap:6px 20px;}
  .topbar .container>div:last-child{display:none!important;}
  .topbar-item:nth-child(3){display:none!important;}
  .topbar-item{white-space:nowrap;}

  /* Nav: logo + hambúrguer na primeira linha; o painel abre em fluxo,
     empurrando a página para baixo. O estado vem do checkbox .navtoggle,
     que precede os irmãos no DOM — daí os seletores com "~". */
  nav.mainnav .container{flex-wrap:wrap;gap:0;}
  nav.mainnav .container>a:first-of-type{flex-shrink:0;}
  nav.mainnav .container img{height:42px!important;}

  .navburger{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-4px -10px -4px 0;color:var(--ink);cursor:pointer;}
  .navburger svg{width:26px;height:26px;stroke-width:2;}
  .navburger .ico-close{display:none;}
  .navtoggle:checked~.navburger .ico-open{display:none;}
  .navtoggle:checked~.navburger .ico-close{display:block;}
  /* O checkbox é invisível mas focável; o anel de foco vai no ícone. */
  .navtoggle:focus-visible~.navburger{outline:2px solid var(--maroon);outline-offset:2px;}

  .navlinks{order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    display:none;border-top:1px solid var(--gray-pale);margin-top:14px;}
  .navtoggle:checked~.navlinks{display:flex;}
  .navlinks a{padding:17px 2px;font-size:1.02rem;border-bottom:1px solid var(--gray-pale);}

  /* No mobile o CTA desce para o fim do painel, em largura total. */
  nav.mainnav .container>.btn-primary{order:4;width:100%;display:none;
    justify-content:center;margin:18px 0 6px;padding:15px 24px!important;font-size:0.95rem!important;}
  nav.mainnav .container>.navtoggle:checked~.btn-primary{display:inline-flex;}

  /* Todo grid multi-coluna passa a uma coluna. minmax(0,1fr) e não 1fr:
     1fr equivale a minmax(auto,1fr), e o min-content de textos longos
     (e-mail institucional, endereço) estoura a track e gera scroll lateral. */
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}

  /* Textos longos sem espaço quebram em vez de empurrar o layout.
     "anywhere" e não "break-word": só o primeiro reduz o min-content,
     que é o que permite a track do grid/flex encolher de fato. */
  footer.sitefoot span,footer.sitefoot .foot-link,.container p,.topbar-item span{overflow-wrap:anywhere;}
  footer.sitefoot [style*="display:flex"]>span{min-width:0;}
  /* Em linhas ícone + texto, o bloco de texto precisa poder encolher. */
  [style*="display:flex"][style*="gap:16px"]>div,
  [style*="display:flex"][style*="gap:18px"]>div,
  [style*="display:flex"][style*="gap:14px"]>div,
  [style*="display:flex"][style*="gap:12px"]>div{min-width:0;}
  [style*="gap:64px"],[style*="gap:56px"],[style*="gap:48px"]{gap:32px!important;}

  /* Linhas de cards lado a lado (pais de filhos flex:1) empilham. */
  [style*="display:flex"]:has(>[style*="flex:1"]){flex-direction:column!important;}

  /* Hero da home: texto e celular empilhados e centralizados. */
  [style*="gap:56px"]{flex-direction:column!important;align-items:center!important;}
  [style*="gap:56px"]>div:first-child{max-width:none!important;}

  /* Bandas de CTA que já usam flex-wrap ficam alinhadas à esquerda. */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"]{align-items:flex-start!important;}

  /* Tipografia */
  h1.display{font-size:2.05rem!important;}
  h2.section-title{font-size:1.65rem!important;}
  p.lede{font-size:1.05rem!important;}

  /* Respiro vertical das seções */
  [style*="padding-top:96px"],[style*="padding-top:88px"],
  [style*="padding-top:76px"],[style*="padding-top:72px"]{padding-top:56px!important;padding-bottom:56px!important;}

  .card{padding:24px;}
  [style*="padding:44px"]{padding:26px!important;}
  [style*="padding:52px 56px"]{padding:28px 24px!important;}
}

/* ---------- Telefone estreito ---------- */
@media (max-width:560px){
  .container{padding:0 20px;}
  h1.display{font-size:1.72rem!important;}
  h2.section-title{font-size:1.4rem!important;}
  .eyebrow{font-size:11.5px;}
  .btn-primary,.btn-onDark-solid{padding:14px 22px;font-size:0.9rem;}
  .btn-secondary,.btn-onDark{padding:13px 20px;font-size:0.9rem;}
  /* Rótulos longos ("Ver proposta pedagógica completa") precisam quebrar:
     as classes de botão trazem white-space:nowrap e alguns têm flex-shrink:0. */
  .btn-primary,.btn-secondary,.btn-onDark,.btn-onDark-solid{white-space:normal;text-align:center;}
  .btn-primary[style*="flex-shrink:0"],.btn-secondary[style*="flex-shrink:0"],
  .btn-onDark[style*="flex-shrink:0"],.btn-onDark-solid[style*="flex-shrink:0"]{flex-shrink:1!important;}
  /* Dois botões apertados lado a lado empilham em largura total. */
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"]{width:100%;gap:12px!important;}
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"]>.btn-primary,
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"]>.btn-secondary,
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"]>.btn-onDark,
  [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"]>.btn-onDark-solid{width:100%;justify-content:center;}
  /* O e-mail institucional é longo demais para telas estreitas. */
  .topbar-item:nth-child(2){display:none!important;}
  [style*="padding-top:96px"],[style*="padding-top:88px"],
  [style*="padding-top:76px"],[style*="padding-top:72px"]{padding-top:44px!important;padding-bottom:44px!important;}
}

/* ---------- Telas muito estreitas (320px) ---------- */
@media (max-width:380px){
  /* O quadro do celular do hero tem 286x596 fixos e não cabe aqui.
     Reduz mantendo a proporção 9:16 do vídeo. */
  [style*="width:286px"]{width:238px!important;height:496px!important;}
}