/* ==========================================================================
   COLÉGIO PEREGRINOS — Sistema de design
   Valores extraídos direto do Figma "IMPLEMENTAÇÃO COLÉGIO PEREGRINOS".

   Duas referências de desenho:
     • PC / notebook  → frames de 1920 de largura  (hero 1920x800)
     • Tablet / mobile → frames de 1080 de largura  (hero 1080x1920)
   Regra: o número exato do Figma é o teto; vw só escala para baixo.
   ========================================================================== */

@font-face{
  font-family:"Erstoria";
  src:url("../fonts/Erstoria.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- cor: verde ---- */
  --green-950:#002418;
  --green-800:#023B28;

  /* ---- cor: dourado (gradiente de 3 stops) ---- */
  --gold-1:#9E7C2E;
  --gold-2:#E5B13C;
  --gold-border:#D19511;
  --gold-gradient:linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 55.23%, var(--gold-1) 110.44%);
  /* o indicador da hero usa o gradiente de 2 stops do Figma */
  --gold-gradient-2:linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);

  /* ---- cor: neutros ---- */
  --cream:#FBF9F3;
  --line-on-dark:rgba(255,255,255,.25);
  --glass-bg:rgba(2,59,40,.7);
  --glass-border:rgba(255,255,255,.2);

  /* ---- raio padrão de card, usado em todo o site (proposta, educação integral etc) ---- */
  --radius-card:20px;
  /* ---- raio dos cards compactos (etapas de ensino), valor próprio do Figma ---- */
  --radius-card-sm:15px;

  /* ---- véu sobre as fotos no tablet/mobile (Figma "Rectangle 12") ---- */
  --veu-mobile:linear-gradient(180deg, rgba(2,59,40,.14) 22%, rgba(2,59,40,.56) 59%, rgba(2,59,40,.96) 100%);

  /* ---- tipografia ---- */
  --font-display:"Erstoria", "Newsreader", Georgia, serif;
  --font-body:"Newsreader", Georgia, serif;
  --section-heading-content-gap:15px;
  --section-line-fade:linear-gradient(90deg, rgba(2,59,40,1) 0%, rgba(2,59,40,0) 100%);

  --ease:cubic-bezier(.22,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}

body{
  margin:0;
  background:var(--green-950);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.5;
  /* overflow-x:hidden fica só no html — duplicar aqui cria dois contêineres
     de scroll concorrentes e quebra o position:sticky da coluna de Etapas */
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; background:none; border:0; color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}
p,li{text-wrap:pretty}

.gold-text{
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ==========================================================================
   Animação de entrada — código do Gabriel (o mesmo usado no Elementor),
   aplicado aqui sem alteração de valores.
   ========================================================================== */

.scroll-left{
    opacity: 0;
        transition: 0.5s !important;
    transform: translate(-30px, 0);
}

.scroll-right{
    opacity: 0;
        transition: 0.5s !important;
    transform: translate(30px, 0);
}

.scroll-top{
    opacity: 0;
        transition: 0.5s !important;
    transform: translate(0, -30px);
}

.scroll-bottom{
    opacity: 0;
        transition: 0.5s !important;
    transform: translate(0, 30px);
}

.blur{
    transform: scale(0.9);
    opacity: 0;
    filter: blur(20px);
    transition: 0.5s !important;
}

.lista .elementor-icon-list-item{
    opacity: 0;
        transition: 0.5s all !important;
    transform: translate3d(-30px, 0, 0);
    filter: blur(10px);
}

.lista .elementor-icon-list-item.ativo{
    opacity: 1;
        transition: 0.5s all !important;
    transform: translate3d(0, 0, 0);
    filter: blur(0px);
}

.ativo{
    opacity: 1;
    transition: 0.5s ease all;
    transform: translate(0, 0);
    transform: scale(1);
    filter: blur(0px);
}

@media only screen and (min-width: 600px) {

.e1{
    transition-delay:0.5s !important;
}

.e2{
    transition-delay:1s !important;
}
.e3{
        transition-delay:1.5s !important;
}
.e4{
        transition-delay:2s !important;
}
.e5{
        transition-delay:2.5s !important;
}
}

/* ==========================================================================
   Botão dourado — Figma: h 37, raio 7, fonte 18, padding 7/16, gap 10
   ========================================================================== */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:clamp(7px,.5208vw,10px);
  background:var(--gold-gradient);
  background-size:220% 100%;
  background-position:0% 0%;
  color:var(--green-950);
  font-family:var(--font-display);
  font-size:clamp(15px,.9375vw,18px);
  line-height:1.527;
  text-transform:uppercase;
  letter-spacing:-.01em;
  padding:clamp(6px,.3646vw,7px) clamp(12px,.8333vw,16px);
  border-radius:7px;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.35);
  transition:background-position .5s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 46%, rgba(255,255,255,.55) 54%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.btn > *{position:relative; z-index:1}
.btn .seta{width:1.005em; height:1.005em; flex:none; transition:transform .35s var(--ease)}

.btn:hover{
  background-position:100% 0%;
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.45);
}
.btn:hover::after{transform:translateX(130%)}
.btn:hover .seta{transform:translate(3px,-2px)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--cream); outline-offset:3px}
.btn:not(.btn-nav){
  padding:clamp(7px,.46875vw,9px) clamp(14px,.9896vw,19px);
  font-size:clamp(14px,1.05vw,20px);
}

.hero-copy .btn{
  min-height:50px;
  padding:9px 23px;
  font-size:clamp(17px,1.05vw,20px);
  line-height:1.2;
}

/* ==========================================================================
   Menu (pílula de vidro flutuante)
   Figma PC: pílula 1279x90, padding 27/14.88, logo 146.34, links gap 34.33
   ========================================================================== */

.nav-wrap{
  position:fixed;
  top:clamp(24px,3.1719vw,61px);
  left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding-inline:20px;
  pointer-events:none;
}
.nav{
  position:relative;
  pointer-events:auto;
  width:min(66.6146vw,1279px);
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(10px,.775vw,14.88px) clamp(16px,1.4063vw,27px);
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:16px;
  transition:background .3s var(--ease);
}
.nav-logo{flex:none; width:clamp(96px,7.6217vw,146.337px)}
.nav-logo img{width:100%; height:auto}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.7880vw,34.33px);
  list-style:none;
  margin:0; padding:0;
  flex:none;
  min-width:0;
}
.nav-links a{
  position:relative;
  display:block;
  font-family:var(--font-display);
  font-size:clamp(14px,.8333vw,16px);
  letter-spacing:-.01em;
  color:var(--cream);
  white-space:nowrap;
  padding-block:5px;
  transition:color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:1px;
  border-radius:999px;
  background:var(--gold-gradient-2);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{opacity:1; transform:translateY(-2px)}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a.is-active{
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nav-links a.is-active::after{transform:scaleX(1); opacity:.75}

.btn-nav{
  flex:none;
  min-height:34px;
  padding:5px 16px;
  font-size:16.658px;
  line-height:1.2;
}
.nav-toggle{
  display:none;
  position:relative;
  width:28px;
  height:22px;
  padding:0;
  color:var(--cream);
}
.nav-toggle span{
  position:absolute;
  left:2px;
  width:24px;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
  transition:top .3s var(--ease), transform .3s var(--ease), opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:3px}
.nav-toggle span:nth-child(2){top:10px}
.nav-toggle span:nth-child(3){top:17px}
.nav-toggle.is-open span:nth-child(1){top:10px; transform:rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0; transform:scaleX(.35)}
.nav-toggle.is-open span:nth-child(3){top:10px; transform:rotate(-45deg)}

/* ==========================================================================
   Hero rotativo — PC/notebook (Figma 1920x800)
   ========================================================================== */

.hero{
  position:relative;
  width:100%;
  aspect-ratio:1920/800;
  min-height:520px;
  overflow:hidden;
  background:var(--green-800);
}

.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease), visibility 1s;
  z-index:0;
}
.hero-slide.is-active{opacity:1; visibility:visible; z-index:1}

.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* o fundo do hero virou <picture> pra que o celular baixe so a versao
   vertical e o desktop so a horizontal */
picture.hero-bg{display:block}
picture.hero-bg > img{width:100%; height:100%; object-fit:cover; display:block}

.hero-inner{position:absolute; inset:0; z-index:1}

/* bloco de texto: ritmo mais compacto e constante entre os três slides */
.hero-copy{
  position:absolute;
  left:min(19.6354vw, 377px);
  top:56.4375%;
  transform:translateY(-50%);
  width:min(19.7917vw, 380px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}

.hero-copy h1,.hero-copy h2{
  font-family:var(--font-display);
  font-size:clamp(40px,3.3854vw,65px);
  line-height:1.1;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
}
.hero-copy .lede{
  font-family:var(--font-body);
  font-size:clamp(19px,1.1458vw,22px);
  line-height:1.3;
  color:var(--cream);
  margin:0;
}
.hero-copy .lede b{font-weight:700; font-style:italic}

/* slide 3: título e texto menores no Figma (45px / 20px) */
.hero-slide--compact .hero-copy{
  left:min(22.3438vw, 429px);
  top:58.75%;
  width:min(22.6042vw, 434px);
}
.hero-slide--compact .hero-copy h1,.hero-slide--compact .hero-copy h2{font-size:clamp(26px,2.3438vw,45px)}
.hero-slide--compact .hero-copy .lede{font-size:clamp(14px,1.0417vw,20px)}

/* slide 2: mesma régua do slide 1, só muda a caixa */
.hero-slide--wide .hero-copy{
  left:min(22.2396vw, 427px);
  width:min(22.0313vw, 423px);
}

/* slide 1: usa a mesma régua horizontal dos demais e fecha o vazio central */
.hero-slide--video .hero-copy{
  left:min(22.2396vw, 427px);
  top:58.25%;
}

/* vídeo — Figma: 650x369, borda 4 #D19511, raio 20, em x=1000 y=260 */
.hero-media{
  position:absolute;
  left:min(52.0833vw, 1000px);
  top:32.5%;
  width:min(33.8542vw, 650px);
  aspect-ratio:650/369;
  border:clamp(2px,.2083vw,4px) solid var(--gold-border);
  border-radius:clamp(10px,1.0417vw,20px);
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.55);
}
.hero-slide--video .hero-media{left:min(49.4792vw, 950px)}
.hero-media iframe{width:100%; height:100%; display:block; border:0}

/* capa do video: o player do YouTube so entra na pagina depois do clique */
.hero-video-capa{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:#000;
  cursor:pointer;
}
.hero-video-capa img{width:100%; height:100%; display:block; object-fit:cover}
.hero-video-capa__play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(48px,3.6458vw,70px);
  aspect-ratio:70/49;
  border-radius:clamp(8px,.625vw,12px);
  background:rgba(18,18,18,.78);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hero-video-capa__play::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-42%,-50%);
  border-style:solid;
  border-width:clamp(7px,.5729vw,11px) 0 clamp(7px,.5729vw,11px) clamp(11px,.9375vw,18px);
  border-color:transparent transparent transparent #fff;
}
.hero-video-capa:hover .hero-video-capa__play,
.hero-video-capa:focus-visible .hero-video-capa__play{
  background:#c4302b;
  transform:translate(-50%,-50%) scale(1.06);
}

/* indicador — Figma: 42x4, raio 2, gap 12, 40px do rodapé */
.hero-dots{
  position:absolute;
  left:0; right:0;
  bottom:min(2.0833vw, 40px);
  z-index:2;
  display:flex; justify-content:center; gap:12px;
}
.hero-dot{
  width:clamp(28px,2.1875vw,42px); height:4px;
  border-radius:2px;
  background:var(--line-on-dark);
  transition:background .3s var(--ease);
}
.hero-dot.is-active{background:var(--gold-gradient-2)}

/* ==========================================================================
   Hero — tablet e mobile (Figma 1080x1920, mesmas imagens verticais)
   Os tetos em px equivalem ao desenho renderizado a 640 de largura, pra
   não gigantizar no tablet; abaixo disso tudo escala junto em vw.
   ========================================================================== */

@media (max-width:1024px){
  .hero{
    aspect-ratio:auto;
    height:100svh;
    min-height:560px;
  }

  /* véu por cima da foto, só aqui — é o que deixa o texto legível */
  .hero-slide::after{
    content:"";
    position:absolute; inset:0;
    z-index:0;
    background:var(--veu-mobile);
    pointer-events:none;
  }

  .hero-copy{
    left:50%;
    right:auto;
    top:auto;
    bottom:10%;
    transform:translateX(-50%);
    width:calc(100% - 10vw);
    max-width:466px;
    gap:clamp(15px,2.6vw,22px);
  }
  .hero-slide--video .hero-copy,
  .hero-slide--wide .hero-copy,
  .hero-slide--compact .hero-copy{
    left:50%;
    top:auto;
    transform:translateX(-50%);
    width:calc(100% - 10vw);
  }
  .hero-copy h1,.hero-copy h2{font-size:clamp(34px,8.8vw,60px)}
  .hero-copy .lede{font-size:clamp(15px,2.9vw,21px)}

  .hero-slide--wide .hero-copy{
    left:50%;
    max-width:444px;
  }
  .hero-slide--compact .hero-copy{
    left:50%;
    top:auto;
    max-width:466px;
  }
  .hero-slide--compact .hero-copy h1,.hero-slide--compact .hero-copy h2{font-size:clamp(30px,6.6vw,48px)}
  .hero-slide--compact .hero-copy .lede{font-size:clamp(15px,2.9vw,21px)}

  .hero-copy .btn{
    min-height:50px;
    max-width:100%;
    padding:9px 22px;
    font-size:clamp(15px,2.15vw,18px);
    gap:8px;
  }

  /* vídeo: em cima, na zona do ícone da logo */
  .hero-media{
    left:50%;
    top:22%;
    transform:translateX(-50%);
    width:min(80.0748vw, 513px);
    aspect-ratio:864.808/490.945;
    border-width:clamp(2px,.4928vw,4px);
    border-radius:clamp(10px,2.4638vw,17px);
  }

  .hero-dots{bottom:2.5%}
}

/* menu no tablet/mobile — Figma: pílula 898x172, logo 279.7, botão 292x65 */
@media (max-width:1024px){
  .nav-wrap{top:clamp(14px,5.5vw,42px); padding-inline:0}
  .nav{
    width:min(83.1687vw, 532px);
    max-width:none;
    padding:0 clamp(12px,3.5288vw,23px);
    min-height:clamp(52px,15.9259vw,102px);
    border-radius:clamp(12px,2.9260vw,19px);
  }
  .nav-logo{width:clamp(88px,25.8950vw,166px)}
  .btn-nav{
    font-size:clamp(10px,2.9477vw,19px);
    min-height:clamp(34px,6.3vw,48px);
    padding:clamp(6px,1.1vw,10px) clamp(10px,2.4vw,18px);
    border-radius:clamp(6px,1.1463vw,8px);
  }
  .nav-toggle{display:inline-flex}
  .nav-toggle{width:clamp(24px,4.5vw,29px); height:22px}
  .nav-toggle span{width:calc(100% - 4px)}

  .nav > nav{
    position:absolute;
    inset:0;
    pointer-events:none;
  }

  .nav-links{
    position:absolute;
    top:calc(100% + 8px);
    left:0; right:0;
    width:100%;
    background:rgba(0,36,24,.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    border-radius:14px;
    flex-direction:column; align-items:flex-start;
    gap:0; padding:6px 20px;
    box-shadow:0 22px 45px -28px rgba(0,0,0,.8);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    pointer-events:auto;
  }
  .nav-links.is-open{opacity:1; visibility:visible; transform:translateY(0)}
  .nav-links li{width:100%; border-bottom:1px solid var(--glass-border)}
  .nav-links li:last-child{border-bottom:none}
  .nav-links a{display:block; padding:13px 0; font-size:clamp(13px,1.9vw,16px)}
  .nav-links a::after{bottom:7px; right:auto; width:34px; transform-origin:left}
}

/* paisagem baixa (tablet deitado / celular deitado): aperta o vertical */
@media (max-width:1024px) and (max-height:680px){
  .hero-media{top:17%; width:min(52vw, 420px)}
  .hero-copy{bottom:6%; gap:15px}
  .hero-copy h1,.hero-copy h2{font-size:clamp(24px,5.2vw,40px)}
  .hero-copy .lede{font-size:clamp(13px,1.9vw,17px)}
}

/* ==========================================================================
   Faixa de marcadores — Figma: 1920x112, linha 3px, conteúdo 1164 a 19 do topo,
   itens empilhados (ícone 16x32 em cima, texto 20px embaixo), gap 5,
   100px entre itens com o divisor de 93px no meio
   ========================================================================== */

.faixa{
  position:relative;
  background:linear-gradient(93.925deg, var(--green-800) 17.4%, var(--green-950) 99.443%);
}
.faixa::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:var(--gold-gradient);
  z-index:1;
}
.faixa-inner{
  max-width:1164px;
  margin-inline:auto;
  padding:min(.9896vw,19px) 5vw min(.9896vw,19px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:min(5.2083vw, 100px);
}
.faixa-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding-block:min(.9375vw,18px);
}
.faixa-item:not(:first-child)::before{
  content:"";
  position:absolute;
  left:calc(-1 * min(2.6042vw, 50px));
  top:50%;
  translate:0 -50%;
  width:1px;
  height:min(4.8438vw, 93px);
  background:var(--line-on-dark);
}
.faixa-item img{
  width:clamp(11px,.8333vw,16px);
  height:auto;
}
.faixa-item span{
  font-family:var(--font-display);
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--cream);
  white-space:nowrap;
}

/* tablet e mobile: o Figma não tem faixa vertical, então empilha em 2 colunas */
@media (max-width:1024px){
  .faixa-inner{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(20px,4vw,34px) 5vw;
    padding:clamp(40px,15vw,110px) 5vw;
  }
  .faixa-item{
    padding-block:0;
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .faixa-item::before{display:none}
  .faixa-item span{white-space:normal; font-size:clamp(13px,2.1vw,19px)}
  .faixa-item img{width:clamp(13px,1.9vw,17px)}
}

/* ==========================================================================
   Quatro faixas responsivas: PC, notebook, tablet e celular
   ========================================================================== */

@media (min-width:1440px){
  .nav-wrap{top:60.883px}
}

@media (min-width:1025px) and (max-width:1439px){
  .nav-wrap{top:clamp(26px,3.1vw,45px)}
  .nav{
    width:min(66.6146vw, 1279px);
    max-width:none;
    padding:min(.775vw,14.88px) min(1.4063vw,27px);
  }
  .nav-logo{width:min(7.6217vw,146.337px)}
  .nav-links{gap:min(1.788vw,34.33px)}
  .nav-links a{font-size:clamp(14px,.8333vw,16px)}
  .btn-nav{
    min-height:min(1.7708vw,34px);
    padding:min(.2604vw,5px) min(.8333vw,16px);
    font-size:min(.8676vw,16.658px);
  }
  .hero-slide--video .hero-media{left:min(49vw,705px)}
  body > .colegio:last-of-type{
    padding-bottom:calc(min(5.2083vw,100px) + 20px);
  }
}

/* Menu: abaixo de 1600px a barra de 66,6vw nao comporta os 6 links + botao,
   entao a barra cresce em largura e logo/links/botao encolhem juntos. */
@media (min-width:1025px) and (max-width:1599px){
  .nav{
    width:min(92vw,1279px);
    padding:min(.775vw,14.88px) clamp(14px,1.25vw,27px);
  }
  .nav-logo{width:clamp(88px,6.6vw,146.337px)}
  .nav-links{gap:clamp(11px,1.15vw,34.33px)}
  .nav-links a{font-size:clamp(11.5px,.95vw,16px)}
  .btn-nav{
    min-height:min(1.7708vw,34px);
    padding:5px clamp(11px,.95vw,16px);
    font-size:clamp(11.5px,1.06vw,16.658px);
  }
}

/* De 1300px pra cima ja sobra espaco pra barra ficar nos 75vw pedidos. */
@media (min-width:1300px) and (max-width:1599px){
  .nav{width:min(75vw,1279px)}
}

@media (min-width:768px) and (max-width:1024px){
  .hero-slide--video .hero-copy{bottom:10.5%}
  .hero-slide--wide .hero-copy{bottom:9.5%}
  .hero-slide--compact .hero-copy{bottom:8%}
  .faixa-inner{
    max-width:700px;
    padding:clamp(40px,15vw,110px) 5vw;
  }
}

@media (max-width:767px){
  .hero{min-height:700px}
  .hero-slide--video .hero-copy{bottom:12%}
  .hero-slide--wide .hero-copy{bottom:11%}
  .hero-slide--compact .hero-copy{bottom:8%}
  .hero-copy{width:90vw}
  .hero-copy h1,.hero-copy h2{font-size:clamp(34px,9.4vw,43px)}
  .hero-copy .lede{font-size:clamp(15px,4.1vw,18px)}
  /* O slide 3 tem título de duas linhas mais um parágrafo longo: no celular
     esse bloco cobria quase toda a foto. Texto um pouco menor e mais junto
     devolve a imagem sem cortar nenhuma palavra. */
  .hero-slide--compact .hero-copy{gap:12px}
  .hero-slide--compact .hero-copy h1,.hero-slide--compact .hero-copy h2{font-size:clamp(26px,7.2vw,32px); line-height:1.12}
  .hero-slide--compact .hero-copy .lede{font-size:clamp(13.5px,3.6vw,16px); line-height:1.4}
  .hero-media{top:22%; width:80vw}
  .nav{
    width:calc(100% - 10vw);
    min-height:72px;
    padding-inline:14px;
    justify-content:flex-start;
    gap:10px;
  }
  .nav-logo{width:clamp(102px,28vw,124px)}
  .btn-nav{
    margin-left:auto;
    min-height:38px;
    padding-inline:10px;
    font-size:clamp(10px,2.75vw,12px);
  }
  .nav-toggle{
    display:inline-flex!important;
    flex:none;
  }
  .faixa-inner{
    grid-template-columns:1fr;
    max-width:340px;
    padding:clamp(40px,15vw,88px) 5vw;
    gap:20px;
  }
  .faixa-item{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .faixa-item img{width:18px; height:36px; object-fit:contain; flex:none}
  .faixa-item span{font-size:15px; line-height:1.2}
}

/* ======================================================================
   WhatsApp flutuante — componente global
   ====================================================================== */

.lfzap{
  position:fixed;
  right:16px;
  bottom:20px;
  z-index:9998;
  display:block;
  width:60px;
  height:60px;
  line-height:0;
  text-decoration:none!important;
}
.lfzap__img{
  display:block;
  position:relative;
  z-index:2;
  width:60px;
  height:60px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.lfzap:hover .lfzap__img{transform:scale(1.08)}
.lfzap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:50%;
  background:#25d366;
  opacity:.55;
  animation:lfzapPulso 2.4s ease-out infinite;
}
@keyframes lfzapPulso{
  0%{transform:scale(1); opacity:.55}
  70%,100%{transform:scale(1.55); opacity:0}
}
.lfzap__alerta{
  position:absolute;
  top:-2px;
  right:-2px;
  z-index:3;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e02b20;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  opacity:0;
  transform:scale(.4);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.lfzap.tem-alerta .lfzap__alerta{opacity:1; transform:scale(1)}
.lfzap-balao{
  position:fixed;
  right:88px;
  bottom:34px;
  z-index:9998;
  max-width:150px;
  padding:8px 12px;
  border:1px solid #e2e2e2;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  font-family:Arial,sans-serif;
  font-size:13px;
  line-height:1.25;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  text-align:left;
  text-decoration:none!important;
  opacity:0;
  visibility:hidden;
  transform:translateX(12px);
  transition:transform .45s ease, opacity .45s ease, visibility .45s;
}
.lfzap-balao.visivel{opacity:1; visibility:visible; transform:translateX(0)}
.lfzap-balao::after{
  content:"";
  position:absolute;
  right:-7px;
  bottom:14px;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:7px solid #fff;
}
@media (max-width:640px){
  .lfzap{right:14px; bottom:16px; width:54px; height:54px}
  .lfzap__img{width:54px; height:54px}
  .lfzap-balao{right:78px; bottom:28px; font-size:12px}
}

/* ==========================================================================
   Hero da página interna (O Colégio) — frame 18:522 do Figma
   Altura própria (448 no Figma), diferente da hero rotativa da home (800).
   Sem animação, imagem de fundo já vem com o desfoque/degradê aplicados.
   ========================================================================== */

.pg-hero{
  position:relative;
  width:100%;
  aspect-ratio:1920/448;
  min-height:220px;
  overflow:hidden;
  background:#004A31;
}
.pg-hero__fundo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pg-hero__brilho{
  position:absolute;
  width:min(17.1354vw,329px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,177,60,.55) 0%, rgba(229,177,60,0) 70%);
  mix-blend-mode:plus-lighter;
  filter:blur(6px);
  pointer-events:none;
}
.pg-hero__brilho--esquerda{left:max(-9.8958vw,-190px); top:min(13.3333vw,256px)}
.pg-hero__brilho--direita{right:max(-8.5417vw,-164px); top:max(-8.5417vw,-164px)}
.pg-hero__conteudo{
  position:absolute;
  left:50%;
  top:66%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:min(34.5313vw,663px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  text-align:center;
}
.pg-hero__conteudo h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px,3.3854vw,65px);
  line-height:1.1;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
}
.pg-hero__conteudo p{
  font-family:var(--font-body);
  font-weight:700;
  font-style:italic;
  font-size:clamp(26px,1.6667vw,32px);
  line-height:1.4;
  color:var(--cream);
  margin:0;
}

@media (max-width:767px){
  .pg-hero{min-height:260px}
  .pg-hero__brilho{display:none}
  .pg-hero__conteudo{width:88%; gap:15px}
  .pg-hero__conteudo h1{font-size:clamp(32px,8.5vw,50px)}
  .pg-hero__conteudo p{font-size:clamp(18px,4.5vw,24px)}
}

/* ==========================================================================
   O Colégio Peregrinos — frame 3:324 do Figma
   ========================================================================== */

.colegio{
  position:relative;
  overflow:hidden;
  background:var(--cream);
  padding:min(5.0521vw,97px) 5vw min(5.2083vw,100px);
  color:#45534E;
}
/* Em páginas internas, logo depois de uma hero estática (sem o respiro do
   carrossel/faixa da home), o padding-top padrão deixa um vão grande. */
.colegio--proximo-da-hero{padding-top:min(2.6042vw,50px)}
.colegio-inner{
  width:min(61.4583vw,1180px);
  max-width:1180px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:min(3.125vw,60px);
}
.colegio-copy{
  width:min(27.8125vw,534px);
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.colegio-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.colegio-heading__icon{width:33px; height:33px}
.colegio-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--green-800);
}
.colegio-texto{
  width:min(27.2917vw,524px);
  display:flex;
  flex-direction:column;
  gap:min(.9375vw,18px);
  font-size:clamp(15px,.9375vw,18px);
  line-height:1.4;
}
.colegio-texto strong{font-weight:700}
.colegio-cta-wrap{display:flex}
.colegio-cta{
  min-height:46px;
  padding:8px 19px;
  font-size:clamp(17px,1.05vw,20px);
}
.colegio-visual{
  position:relative;
  width:min(30.5208vw,586px);
  flex:none;
  margin:0;
}
.colegio-imagens{
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 20px rgba(0,36,24,.10))
         drop-shadow(0 28px 30px rgba(0,36,24,.08));
}
/* Em imagens sem transparência real (ex. colagem já composta em retângulo
   cheio), o filter:drop-shadow soma com o conteúdo da própria foto e mancha
   a borda de baixo. box-shadow no elemento não tem esse problema. */
.colegio-imagens--solida{
  filter:none;
  border-radius:12px;
  box-shadow:0 12px 20px rgba(0,36,24,.10), 0 28px 30px rgba(0,36,24,.08);
}
.colegio-selo{
  position:absolute;
  z-index:2;
  top:31.13%;
  right:-30px;
  width:min(7.1296vw,137px);
  aspect-ratio:1;
  border:1px solid rgba(158,124,46,.76);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(229,177,60,.68),rgba(158,124,46,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 28px rgba(0,36,24,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.colegio-selo__anel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:selo-giro 22s linear infinite;
}
.colegio-selo__logo{
  position:absolute;
  left:50%;
  top:50%;
  width:39.42%;
  height:auto;
  transform:translate(-50%,-50%);
}
@keyframes selo-giro{to{transform:rotate(360deg)}}

@media (min-width:768px) and (max-width:1024px){
  /* --- Espaços, recuos e elementos que encolhiam demais no tablet ---
     Tudo isso era calculado pela largura da tela, sem piso: num tablet de
     884px os respiros viravam 5 a 14px e o texto ficava empilhado. Valores
     fixos aqui, sem mexer no computador nem no celular. */
  .cta-matriculas{padding:64px 5vw 46px}
  .cta-matriculas__card{padding:0 40px 56px}
  .cta-matriculas__conteudo{gap:16px}
  .cta-matriculas__logo{width:82px; margin-top:-56px}
  .etapas-cards{gap:24px}
  .etapas-card__selo{width:60px}
  .galeria{padding:56px 5vw}
  .galeria-inner{gap:24px}
  .galeria-filtros{gap:9px}
  .colegio-texto{gap:14px}
  .historia-fotos{gap:14px}
  .historia-foto{width:calc(50% - 7px); height:auto; aspect-ratio:300/543}
  .mat-etapas-cards{gap:24px}
  .mat-etapas-card__selo{width:60px}
  .mat-etapas-card__text{padding:22px}
  .mat-hero__lista{gap:16px}
  .mat-formulario label{gap:16px}

  /* Larguras que eram calculadas pela tela e ficavam estreitas demais no
     tablet, forçando o texto a quebrar em linhas muito curtas. */
  .cta-matriculas__conteudo > p{max-width:min(100%,460px)}
  .colegio-copy{width:100%}
  .historia-copy{width:100%}
  .galeria-intro{width:min(100%,620px)}
  .galeria-outro{width:min(100%,520px)}
  .pg-hero__conteudo{width:min(88%,600px)}
  .colegio{padding:clamp(40px,15vw,110px) 5vw}
  .colegio-inner{
    width:100%;
    max-width:680px;
    flex-direction:column;
    align-items:flex-start;
    gap:52px;
  }
  .colegio-copy,
  .colegio-texto{width:100%}
  .colegio-copy{gap:15px}
  .colegio-heading h2{font-size:36px}
  .colegio-texto{font-size:18px; max-width:620px}
  .colegio-visual{width:min(100%,620px); align-self:center}
  .colegio-selo{width:124px; right:-22px}
}

@media (max-width:767px){
  .colegio{padding:clamp(40px,15vw,88px) 5vw}
  .colegio-inner{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:42px;
  }
  .colegio-copy,
  .colegio-texto{width:100%}
  .colegio-copy{gap:15px}
  .colegio-heading__icon{width:30px; height:30px}
  .colegio-heading h2{font-size:clamp(29px,8vw,36px)}
  .colegio-texto{font-size:16px; line-height:1.45; gap:17px}
  .hero-copy .btn{min-height:48px; padding:9px 20px; font-size:15px}
  .colegio-cta{min-height:44px; padding:8px 18px; font-size:15px}
  .colegio-visual{width:100%; align-self:center}
  .colegio-selo{
    width:clamp(88px,27vw,112px);
    right:-8px;
  }
}

/* ==========================================================================
   Nossa história (O Colégio) — frame 18:620 do Figma
   ========================================================================== */

.historia{
  position:relative;
  background:#F3EDE1;
  padding:min(3.3854vw,65px) 5vw min(4.3229vw,83px);
  color:#45534E;
}
.historia-inner{
  width:min(61.1979vw,1175px);
  margin-inline:auto;
  display:flex;
  align-items:flex-end;
  gap:min(2.0833vw,40px);
}
.historia-fotos{
  display:flex;
  align-items:center;
  gap:min(.875vw,17px);
  flex:none;
}
.historia-foto{
  width:min(15.6302vw,300px);
  height:min(28.2812vw,543px);
  object-fit:cover;
  border:2px solid var(--gold-1);
  border-radius:min(1.1667vw,22px);
  /* box-shadow, nunca filter:drop-shadow — em foto retangular sem alpha
     pré-recortado o drop-shadow ignora o border-radius do clip e sobra uma
     "pontinha" reta no canto; box-shadow acompanha o border-radius do
     próprio elemento sempre, sem exceção. */
  box-shadow:0 12px 20px rgba(0,36,24,.10), 0 28px 30px rgba(0,36,24,.08);
}
.historia-copy{
  display:flex;
  flex-direction:column;
  gap:15px;
  width:min(26.9792vw,518px);
  flex:none;
}
.historia-citacao{
  font-family:var(--font-body);
  font-weight:700;
  font-style:italic;
  font-size:clamp(19px,1.1458vw,22px);
  line-height:1.4;
  color:#45534E;
}
.historia-texto{width:100%}

@media (min-width:768px) and (max-width:1024px){
  .historia{padding:clamp(40px,15vw,88px) 5vw}
  .historia-inner{
    width:100%;
    max-width:640px;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
  .historia-fotos{align-self:center}
  .historia-copy,
  .historia-texto{width:100%}
  .historia-copy{align-items:flex-start}
}

@media (max-width:767px){
  .historia{padding:clamp(40px,15vw,64px) 5vw}
  .historia-inner{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
  }
  .historia-fotos{width:100%; justify-content:center; gap:12px}
  .historia-foto{width:calc(50% - 6px); height:auto; aspect-ratio:300/543}
  .historia-copy,
  .historia-texto{width:100%}
  .historia-citacao{font-size:18px}
}

/* ==========================================================================
   Missão, Visão e Valores (O Colégio) — frame 18:644 do Figma
   ========================================================================== */

/* Medidas exatas do Figma a 1920: cards Missão/Visão 487x202, card Valores
   1015x549. Tudo (largura, altura, padding, ícone, gap e FONTE) escala pelo
   mesmo fator vw a partir dessas medidas — se a fonte ficar fixa em px
   enquanto o card encolhe, o texto vaza pra fora do card no notebook. */
.mvv{
  position:relative;
  overflow:hidden;
  background:#004A31;
  padding:min(3.9063vw,75px) 5vw min(3.9583vw,76px);
}
.mvv-textura{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* mesmo PNG/webp de textura da seção "Educação Integral" da home — já sai
     do Figma com 15% de opacidade embutida no próprio arquivo. */
  opacity:1;
  pointer-events:none;
}
.mvv-inner{
  position:relative;
  z-index:1;
  width:min(52.8646vw,1015px);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:min(2.0833vw,40px);
}
.mvv-row{display:flex; gap:min(2.0833vw,40px)}
.mvv-card{
  position:relative;
  background:rgba(2,59,40,.65);
  border:1px solid var(--gold-1);
  border-radius:var(--radius-card);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:min(.5208vw,10px);
}
/* 487x202 no Figma: a largura sai do flex:1 dentro da linha de 1015 com
   gap 40 (= 487,5 cada). O padding lateral de 41px deixa o texto com os
   mesmos ~405px de linha do Figma, então a quebra de linha é idêntica.
   min-height, nunca height fixo: se alguma largura quebrar o texto em uma
   linha a mais que o previsto, o card cresce em vez de cortar o texto. */
.mvv-card--top{
  flex:1;
  min-height:min(10.5208vw,202px);
  padding:min(.7292vw,14px) min(2.1354vw,41px);
}
/* 1015x549 no Figma, conteúdo ancorado no topo (top:38). */
.mvv-card--valores{
  width:100%;
  min-height:min(28.5938vw,549px);
  padding:min(1.9792vw,38px) min(1.7188vw,33px);
  justify-content:flex-start;
}
.mvv-card__header{
  display:flex;
  align-items:center;
  gap:min(.5208vw,10px);
}
.mvv-card--valores .mvv-card__header{margin-bottom:min(1.0417vw,20px)}
.mvv-card__icon{height:min(1.9792vw,38px); width:auto; flex:none}
.mvv-card__titulo{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px,1.4583vw,28px);
  line-height:1.1;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}
.mvv-card__texto{
  font-family:var(--font-body);
  font-size:clamp(15px,.9375vw,18px);
  line-height:1.4;
  color:var(--cream);
}
/* 2 colunas de 464,157 com 20 de gap = 948,3 = 1015 menos os 33+33 de
   padding do card. */
.valores-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:min(1.0417vw,20px);
}
.valores-col{
  display:flex;
  flex-direction:column;
  gap:min(1.5625vw,30px);
}
.valor-item{
  display:flex;
  align-items:flex-start;
  gap:min(.6964vw,13px);
}
.valor-item__icon{
  width:min(3.1338vw,60px);
  height:auto;
  margin-top:min(.3646vw,7px);
  flex:none;
}
.valor-item__texto h4{
  font-family:var(--font-body);
  font-weight:700;
  font-style:italic;
  font-size:min(1.1938vw,22.92px);
  line-height:1.2;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0 0 min(.2083vw,4px);
}
.valor-item__texto p{
  font-family:var(--font-body);
  font-size:min(.9948vw,19.1px);
  line-height:1.2;
  color:var(--cream);
  margin:0;
}

/* Abaixo de 1025px a escala por vw deixaria a fonte pequena demais pra ler,
   então o layout empilha e a tipografia volta a valores fixos legíveis. */
@media (min-width:768px) and (max-width:1024px){
  .mvv{padding:clamp(40px,15vw,88px) 5vw}
  .mvv-inner{width:100%; max-width:680px; gap:28px}
  .mvv-row{flex-direction:column; gap:20px}
  .mvv-card{gap:10px}
  .mvv-card--top{width:100%; height:auto; padding:26px}
  .mvv-card--valores{height:auto; padding:30px}
  .mvv-card__header{gap:10px}
  .mvv-card--valores .mvv-card__header{margin-bottom:20px}
  .mvv-card__icon{height:34px}
  .mvv-card__titulo{font-size:26px}
  .mvv-card__texto{font-size:17px}
  .valores-grid{grid-template-columns:1fr; gap:24px}
  .valores-col{gap:24px}
  .valor-item{gap:14px}
  .valor-item__icon{width:52px; margin-top:6px}
  .valor-item__texto h4{font-size:20px; margin-bottom:4px}
  .valor-item__texto p{font-size:16px}
}

@media (max-width:767px){
  .mvv{padding:clamp(40px,15vw,64px) 5vw}
  .mvv-inner{width:100%; gap:24px}
  .mvv-row{flex-direction:column; gap:16px}
  .mvv-card{gap:10px}
  .mvv-card--top{width:100%; height:auto; padding:24px}
  .mvv-card--valores{height:auto; padding:24px}
  .mvv-card__header{gap:10px}
  .mvv-card--valores .mvv-card__header{margin-bottom:18px}
  .mvv-card__icon{height:30px}
  .mvv-card__titulo{font-size:22px}
  .mvv-card__texto{font-size:16px}
  .valores-grid{grid-template-columns:1fr; gap:20px}
  .valores-col{gap:20px}
  .valor-item{gap:12px}
  .valor-item__icon{width:42px; margin-top:5px}
  .valor-item__texto h4{font-size:18px; margin-bottom:4px}
  .valor-item__texto p{font-size:15px}
}

/* ======================================================================
   Proposta pedagógica — frame 5:439 do Figma
   ====================================================================== */

.proposta{
  position:relative;
  overflow:hidden;
  scroll-margin-top:130px;
  background:#f3ede1;
  padding:min(2.7604vw,53px) 5vw min(4.8438vw,93px);
  color:#45534e;
}
.proposta-inner{
  width:min(66.6225vw,1279.151px);
  max-width:1279.151px;
  margin-inline:auto;
}
.proposta-intro{
  width:min(32.8125vw,630px);
  margin:0 auto min(1.9792vw,38px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  text-align:center;
}
.proposta-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.proposta-heading__icon{width:33px; height:33px}
.proposta-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--green-800);
}
.proposta-intro > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
}
.proposta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:min(2.6341vw,50.576px);
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.10))
         drop-shadow(0 28px 14px rgba(0,0,0,.09));
}
.proposta-card-reveal{min-width:0}
.proposta-card{
  position:relative;
  isolation:isolate;
  aspect-ratio:392.6667 / 465;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:#004a31;
  box-shadow:0 18px 34px rgba(0,36,24,.15);
  transition:transform .36s cubic-bezier(.2,.75,.25,1), box-shadow .36s ease;
}
.proposta-card:hover{
  transform:translateY(-7px);
  box-shadow:0 28px 42px rgba(0,36,24,.22);
}
.proposta-card__image{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.proposta-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,74,49,.10);
  mix-blend-mode:darken;
  pointer-events:none;
}
.proposta-card__glass{
  position:absolute;
  left:-3px;
  right:-3px;
  bottom:-3px;
  min-height:calc(50.101% + 3px);
  padding:clamp(22px,1.9271vw,37px) clamp(20px,1.9271vw,37px) 28px;
  display:flex;
  flex-direction:column;
  gap:15px;
  border-top:1px solid rgba(255,255,255,.24);
  background:linear-gradient(115deg,rgba(0,36,24,.89),rgba(0,50,34,.72) 61%,rgba(222,207,166,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}
.proposta-card__glass h3{
  font-family:var(--font-display);
  font-size:clamp(22px,1.4583vw,28px);
  line-height:1.1;
  color:#d7a332;
}
.proposta-card__glass p{
  color:var(--cream);
  font-size:clamp(14px,.8854vw,17px);
  line-height:1.4;
}

@media (min-width:768px) and (max-width:1024px){
  .proposta{
    padding:clamp(40px,15vw,110px) 5vw;
  }
  .proposta-inner{width:100%; max-width:820px}
  .proposta-intro{width:min(100%,630px); margin-bottom:38px}
  .proposta-grid{grid-template-columns:repeat(2,1fr); gap:5vw}
  .proposta-card__glass{padding:clamp(22px,3.6vw,32px)}
}

@media (max-width:767px){
  .proposta{
    padding:clamp(40px,15vw,88px) 5vw;
  }
  .proposta-inner{width:100%}
  .proposta-intro{
    width:100%;
    margin-bottom:clamp(28px,8vw,38px);
    gap:15px;
  }
  .proposta-heading__icon{width:30px; height:30px}
  .proposta-heading h2{font-size:clamp(29px,8vw,36px)}
  .proposta-intro > p{font-size:clamp(16px,4.25vw,18px)}
  .proposta-grid{grid-template-columns:1fr; gap:7vw}
  .proposta-card{border-radius:var(--radius-card)}
  .proposta-card__glass{padding:clamp(22px,6.1vw,28px) clamp(20px,6.1vw,28px) 24px}
  .proposta-card__glass h3{font-size:clamp(22px,6.15vw,27px)}
  .proposta-card__glass p{font-size:clamp(14px,3.78vw,16px)}
}

/* ==========================================================================
   Equipe (O Colégio) — frame "5 e 6" do Figma. Carrossel com fotos
   placeholder até o Colégio enviar as fotos/nomes reais da equipe.
   O card (.equipe-card / .equipe-card__glass) é uma CÓPIA do estilo vidro
   de .proposta-card — mesmos valores, classes próprias, para não mexer em
   nada da seção Proposta pedagógica.
   ========================================================================== */

.equipe{
  position:relative;
  overflow:hidden;
  background:var(--cream);
  padding:min(1.6667vw,32px) 5vw min(4.8438vw,93px);
  color:#45534E;
}
.equipe-inner{
  width:min(69.375vw,1332px);
  max-width:1332px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.equipe-intro{
  width:min(41.4063vw,795px);
  margin:0 auto 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.equipe-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.equipe-heading__icon{width:33px; height:33px}
.equipe-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  background:linear-gradient(90deg, var(--gold-1) 40.694%, var(--gold-2) 50.348%, var(--gold-1) 60.001%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.equipe-intro__copy{
  display:flex;
  flex-direction:column;
  gap:28px;
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
}
.equipe-intro__copy strong{font-weight:700}

.equipe-carrossel{
  width:100%;
  display:flex;
  align-items:center;
  gap:20px;
}
.equipe-seta{
  flex:none;
  width:17px;
  height:31px;
  padding:0;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s var(--ease);
}
.equipe-seta:not(:disabled):hover{transform:scale(1.1)}
.equipe-seta:disabled{opacity:1; cursor:default}
.equipe-seta img{width:31px; height:17px; max-width:none}
.equipe-seta--prev img{transform:rotate(90deg)}
.equipe-seta--next img{transform:rotate(-90deg)}

.equipe-viewport{
  flex:1;
  min-width:0;
  overflow:hidden;
  padding:14px 0 46px;
  margin:-14px 0 -46px;
}
.equipe-track{
  --equipe-gap:min(2.0833vw,40px);
  display:flex;
  gap:var(--equipe-gap);
  list-style:none;
  margin:0;
  padding:0;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.10))
         drop-shadow(0 28px 14px rgba(0,0,0,.09));
  transition:transform .45s cubic-bezier(.2,.75,.25,1);
}

/* --- card: cópia fiel de .proposta-card / .proposta-card__glass --- */
.equipe-card{
  position:relative;
  isolation:isolate;
  flex:none;
  width:calc((100% - 2 * var(--equipe-gap)) / 3);
  aspect-ratio:392.6667 / 465;
  overflow:hidden;
  border-radius:var(--radius-card);
  border:3px solid rgba(255,255,255,.2);
  background:#004a31;
}
.equipe-card__image{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.equipe-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,74,49,.4);
  mix-blend-mode:darken;
  pointer-events:none;
}
.equipe-card__glass{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:156px;
  min-height:0;
  padding:37px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.24);
  background:linear-gradient(115deg,rgba(0,36,24,.89),rgba(0,50,34,.72) 61%,rgba(222,207,166,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}
.equipe-card__glass h3{
  font-family:var(--font-display);
  font-size:clamp(26px,1.6667vw,32px);
  line-height:1.1;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.equipe-card__glass p{
  color:var(--cream);
  font-size:clamp(15px,.9375vw,18px);
  line-height:1.4;
}

/* --- variante foto: a moldura dourada ja vem na propria imagem, entao o card
   nao leva borda, fundo, recorte nem veu verde por cima --- */
.equipe-card--foto{
  aspect-ratio:986 / 934;
  overflow:visible;
  border:none;
  background:none;
  border-radius:0;
}
.equipe-card--foto .equipe-card__image{
  position:static;
  z-index:auto;
  object-fit:contain;
}
.equipe-card--foto::after{content:none}

.equipe-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11.205px;
  margin-top:20px;
}
.equipe-dots button{
  width:7px;
  height:7px;
  border-radius:50%;
  border:0;
  padding:0;
  background:rgba(0,36,24,.25);
  cursor:pointer;
}
.equipe-dots button.is-active{background:var(--gold-1)}

@media (min-width:768px) and (max-width:1024px){
  .equipe{padding:clamp(40px,15vw,88px) 5vw}
  .equipe-inner{width:100%; max-width:700px}
  .equipe-intro{width:100%; margin-bottom:40px}
  .equipe-card{width:calc((100% - var(--equipe-gap)) / 2)}
  .equipe-track{--equipe-gap:24px}
  .equipe-card__glass{height:calc(33.55% + 3px); padding:clamp(24px,4vw,32px)}
}

@media (max-width:767px){
  .equipe{padding:clamp(40px,15vw,64px) 5vw}
  .equipe-inner{width:100%}
  .equipe-intro{width:100%; margin-bottom:32px; gap:20px}
  .equipe-heading__icon{width:30px; height:30px}
  .equipe-heading h2{font-size:clamp(29px,8vw,36px)}
  .equipe-intro__copy{gap:20px; font-size:clamp(16px,4.25vw,18px)}
  .equipe-carrossel{gap:10px}
  .equipe-seta{width:13px; height:24px}
  .equipe-seta img{width:24px; height:13px}
  .equipe-card{width:100%; border-radius:var(--radius-card)}
  .equipe-track{--equipe-gap:16px}
  .equipe-card__glass{height:33.55%; padding:clamp(22px,6.1vw,28px) clamp(20px,6.1vw,28px) 24px}
  .equipe-card__glass h3{font-size:clamp(22px,6.15vw,27px)}
  .equipe-card__glass p{font-size:clamp(14px,3.78vw,16px)}
}

/* ======================================================================
   Educação Integral — frame 5:749 do Figma
   ====================================================================== */

.integral{
  position:relative;
  overflow:hidden;
  background:#004A31;
  padding:min(4.1146vw,79px) 5vw;
}
.integral-textura{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* o PNG já sai do Figma com 15% de opacidade embutida no próprio alpha do
     arquivo — por isso aqui é opacity:1, senão multiplica .15 x .15 e some */
  opacity:1;
  pointer-events:none;
}
.integral-inner{
  position:relative;
  z-index:1;
  width:min(59.375vw,1140px);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:min(2.6042vw,50px);
}
.integral-intro{
  width:min(32.8125vw,630px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  text-align:center;
}
.integral-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.integral-heading__icon{width:33px; height:33px}
.integral-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--cream);
}
.integral-intro > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
  color:var(--cream);
}
.integral-intro strong{font-weight:700}

.integral-cards{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:min(2.0833vw,40px);
  filter:
    drop-shadow(0 253px 35.5px rgba(0,0,0,0))
    drop-shadow(0 162px 32.5px rgba(0,0,0,.01))
    drop-shadow(0 91px 27.5px rgba(0,0,0,.05))
    drop-shadow(0 40px 20px rgba(0,0,0,.09))
    drop-shadow(0 10px 11px rgba(0,0,0,.1));
}
.integral-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:15px;
  min-height:min(11.9792vw,230px);
  padding:min(1.7708vw,34px);
  background:var(--green-800);
  border:1px solid var(--gold-1);
  border-radius:var(--radius-card);
}
.integral-card__marca{
  position:absolute;
  z-index:-1;
  left:74.81%;
  top:max(-1.3302vw,-25.54px);
  width:33.16%;
  height:auto;
  opacity:.1;
  pointer-events:none;
}
.integral-card__icon{
  height:clamp(34px,2.6042vw,50px);
  width:auto;
}
.integral-card h3{
  font-family:var(--font-display);
  font-size:clamp(22px,1.4583vw,28px);
  line-height:1.1;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.integral-card p{
  font-size:clamp(14px,.8854vw,17px);
  line-height:1.4;
  color:var(--cream);
}
.integral-card strong{font-weight:700}

@media (min-width:768px) and (max-width:1024px){
  .integral{padding:clamp(40px,15vw,88px) 5vw}
  .integral-inner{width:100%; max-width:700px; gap:38px}
  .integral-intro{width:100%}
  .integral-heading h2{font-size:32px}
  .integral-intro > p{font-size:18px}
  .integral-cards{gap:28px}
  .integral-card{min-height:0; padding:28px}
}

@media (max-width:767px){
  .integral{padding:clamp(40px,15vw,64px) 5vw}
  .integral-inner{width:100%; gap:32px}
  .integral-intro{width:100%; gap:15px}
  .integral-heading__icon{width:30px; height:30px}
  .integral-heading h2{font-size:clamp(27px,7.4vw,32px)}
  .integral-intro > p{font-size:clamp(15px,4vw,17px)}
  .integral-cards{grid-template-columns:1fr; gap:20px}
  .integral-card{min-height:0; padding:24px; gap:15px}
  .integral-card h3{font-size:clamp(20px,5.6vw,23px)}
  .integral-card p{font-size:15px}
  .integral-card__marca{left:70%; width:38%}
}

/* ======================================================================
   Etapas de Ensino — frame 7:750 do Figma
   Coluna esquerda sticky no desktop/notebook (acompanha o scroll dos
   cards e volta no caminho inverso); no tablet/mobile empilha normal.
   ====================================================================== */

.etapas{
  /* sem overflow:hidden aqui — quebraria o position:sticky da coluna esquerda */
  position:relative;
  background:var(--cream);
  padding:min(4.0625vw,78px) 5vw;
}
.etapas-inner{
  width:min(53.3333vw,1024px);
  margin-inline:auto;
  display:flex;
  align-items:flex-start;
  gap:min(3.6458vw,70px);
}
.etapas-info{
  flex:none;
  width:clamp(300px,18.0729vw,347px);
  position:sticky;
  /* O menu flutuante termina perto de 150px no desktop. Este respiro
     mantém o selo e o título totalmente legíveis durante o sticky. */
  top:clamp(170px,9.8958vw,190px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.etapas-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.etapas-heading__icon{width:33px; height:33px}
.etapas-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--green-800);
}
.etapas-info > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
  color:#45534E;
  white-space:nowrap;
}
.etapas-info strong{font-weight:700}

.etapas-cards{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:min(1.5625vw,30px);
  filter:
    drop-shadow(min(9.6354vw,185px) min(8.8021vw,169px) min(1.8229vw,35px) rgba(0,0,0,0))
    drop-shadow(min(6.1458vw,118px) min(5.625vw,108px) min(1.6667vw,32px) rgba(0,0,0,.01))
    drop-shadow(min(3.4896vw,67px) min(3.1771vw,61px) min(1.4063vw,27px) rgba(0,0,0,.05))
    drop-shadow(min(1.5625vw,30px) min(1.4063vw,27px) min(1.0417vw,20px) rgba(0,0,0,.09))
    drop-shadow(min(.3646vw,7px) min(.3646vw,7px) min(.5729vw,11px) rgba(0,0,0,.1));
}
.etapas-card{position:relative}
.etapas-card__box{
  display:flex;
  /* era align-items:center — como a imagem tinha altura fixa (aspect-ratio)
     e o texto ao lado podia ficar mais alto que ela (ex. quando quebra em
     mais linhas no notebook), sobrava um respiro visível em cima/embaixo da
     foto. Com stretch a imagem sempre acompanha a altura real do texto. */
  align-items:stretch;
  margin-left:min(1.25vw,24px);
  margin-top:min(.8333vw,16px);
  background:#F3EDE1;
  border:1px solid var(--gold-border);
  border-radius:var(--radius-card-sm);
  overflow:hidden;
}
.etapas-card__img{
  position:relative;
  flex:none;
  width:min(12.1875vw,234px);
  min-height:min(9.0104vw,173px);
  overflow:hidden;
  border-radius:var(--radius-card-sm);
  isolation:isolate;
}
.etapas-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* A foto já vem tratada; a camada escura criava artefato preto nos cantos. */
.etapas-card__img::after{display:none}
.etapas-card__text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  /* texto alinhado à esquerda, centralizado só na vertical */
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  gap:15px;
  padding:min(1.4583vw,28px);
}
.etapas-card__text h3{
  font-family:var(--font-display);
  font-size:clamp(22px,1.4583vw,28px);
  line-height:1.1;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.etapas-card__text p{
  font-size:clamp(14px,.8854vw,17px);
  line-height:1.4;
  color:#45534E;
}

/* selo giratório — mesmo componente da seção "O Colégio", só reposicionado */
.etapas-card__selo{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:min(4.3035vw,82.627px);
  aspect-ratio:1;
  border:1px solid rgba(158,124,46,.76);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(229,177,60,.68),rgba(158,124,46,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 28px rgba(0,36,24,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.etapas-card__anel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:selo-giro 22s linear infinite;
}
.etapas-card__logo{
  position:absolute;
  left:50%;
  top:50%;
  width:39.42%;
  height:auto;
  transform:translate(-50%,-50%);
}

@media (min-width:768px) and (max-width:1024px){
  .etapas{padding:clamp(40px,15vw,88px) 5vw}
  .etapas-inner{width:100%; max-width:700px; flex-direction:column; gap:38px}
  .etapas-info{position:static; top:auto; width:100%}
  .etapas-cards{width:100%}
  .etapas-heading h2{font-size:32px}
  .etapas-info > p{font-size:18px}
  .etapas-card__img{width:200px}
  .etapas-card__text{padding:22px}
}

@media (max-width:767px){
  .etapas{padding:clamp(40px,15vw,64px) 5vw}
  .etapas-inner{width:100%; flex-direction:column; gap:28px}
  .etapas-info{position:static; top:auto; width:100%; gap:15px}
  .etapas-cards{width:100%; gap:20px}
  .etapas-heading__icon{width:30px; height:30px}
  .etapas-heading h2{font-size:clamp(27px,7.4vw,32px)}
  .etapas-info > p{font-size:clamp(15px,4vw,17px); white-space:normal}
  .etapas-card__box{flex-direction:column; align-items:stretch; margin-left:16px; margin-top:14px}
  .etapas-card__img{width:100%; aspect-ratio:16/9}
  /* No celular o card vira coluna e o texto ocupa a largura toda: tudo
     alinhado à esquerda, senão bloco de uma linha fica centralizado e o de
     duas linhas fica torto em relação ao anterior. */
  .etapas-card__text{padding:18px; align-items:flex-start; text-align:left}
  .etapas-card__text h3{font-size:clamp(19px,5.4vw,22px)}
  .etapas-card__text p{font-size:14px}
  .etapas-card__selo{width:54px}
}

/* ======================================================================
   A família é a primeira educadora — frame 11:2 do Figma
   ====================================================================== */

.familia{
  position:relative;
  z-index:1;
  min-height:0;
  overflow:hidden;
  background:#004A31;
  /* A família começa logo após a CTA. O lettering ocupa a transição,
     sem reservar uma faixa vazia antes do conteúdo. */
  padding:48px 5vw 80px;
}
.familia__inner{
  position:relative;
  z-index:1;
  width:min(100%,1176px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:582fr 534fr;
  align-items:start;
  gap:60px;
}
.familia__visual{
  position:relative;
  min-width:0;
}
.familia__visual > img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 13px 22px rgba(0,0,0,.14)) drop-shadow(0 42px 42px rgba(0,0,0,.10));
}
.familia__selo{
  position:absolute;
  z-index:2;
  left:4.9828%;
  top:38.546%;
  width:21.9581%;
  aspect-ratio:1;
  border:1px solid rgba(158,124,46,.76);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(229,177,60,.68),rgba(158,124,46,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 28px rgba(0,36,24,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.familia__anel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:selo-giro 22s linear infinite;
}
.familia__logo{
  position:absolute;
  left:50%;
  top:50%;
  width:39.42%;
  height:auto;
  transform:translate(-50%,-50%);
}
.familia__conteudo{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--section-heading-content-gap);
  color:var(--cream);
}
.familia__cabecalho{display:flex; flex-direction:column; gap:5px}
.familia__icone{width:33px; height:33px}
.familia__cabecalho h2{
  font-family:var(--font-display);
  font-size:36px;
  line-height:1.1;
  color:var(--cream);
}
.familia__texto{display:flex; flex-direction:column; gap:16px; font-size:18px; line-height:1.4}
.familia__texto strong,.familia__topicos strong{font-weight:700}
.familia__topicos{
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.familia__topicos li{
  display:grid;
  grid-template-columns:63px minmax(0,1fr);
  align-items:start;
  column-gap:14px;
  font-size:20px;
  line-height:1.2;
}
.familia__topicos li > img{width:63px; height:12px; margin-top:8px}
.familia__topicos strong{display:inline}

@media (min-width:768px) and (max-width:1024px){
  .familia{
    min-height:0;
    padding:clamp(64px,15vw,110px) 5vw;
  }
  .familia__inner{width:min(100%,700px); grid-template-columns:1fr; gap:58px}
  .familia__visual{width:min(100%,582px)}
  .familia__conteudo{width:100%}
}

@media (max-width:767px){
  .familia{
    min-height:0;
    padding:clamp(64px,20vw,90px) 5vw clamp(64px,15vw,90px);
  }
  .familia__inner{width:100%; grid-template-columns:1fr; gap:52px}
  .familia__conteudo{gap:15px}
  .familia__icone{width:30px; height:30px}
  .familia__cabecalho h2{font-size:clamp(28px,8vw,34px)}
  .familia__texto{gap:14px; font-size:clamp(16px,4.25vw,18px)}
  .familia__topicos{gap:24px}
  .familia__topicos li{
    grid-template-columns:clamp(43px,13vw,56px) minmax(0,1fr);
    column-gap:10px;
    font-size:clamp(16px,4.25vw,18px);
  }
  .familia__topicos li > img{width:100%; height:auto; margin-top:7px}
}

/* ======================================================================
   Além da sala de aula — frame 9:1102 do Figma (galeria em masonry)
   ====================================================================== */

.galeria{
  position:relative;
  background:#F3EDE1;
  padding:min(4.0625vw,78px) 5vw;
  overflow-x:hidden;
}
.galeria-inner{
  /* A galeria precisa conservar a largura editorial mesmo no notebook.
     O limite é o frame de 1280px do Figma; abaixo dele ela passa a ocupar
     toda a área útil da seção, sem criar faixas vazias entre as colunas. */
  width:min(100%,1280px);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:min(1.5625vw,30px);
}
.galeria-intro{
  width:min(35.8333vw,688px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  text-align:center;
}
.galeria-heading{display:flex; flex-direction:column; align-items:center; gap:5px}
.galeria-heading__icon{width:33px; height:33px}
.galeria-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
}
.galeria-heading__dark{color:var(--green-800)}
.galeria-intro > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
  color:#45534E;
}
.galeria-intro strong{font-weight:700}

.galeria-filtros{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:min(.5729vw,11px);
}
.galeria-filtro{
  padding:15px 20px;
  border-radius:10px;
  border:1px solid rgba(0,74,49,.4);
  background:none;
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  color:rgba(0,74,49,.6);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.galeria-filtro:hover{border-color:var(--green-800); color:var(--green-800)}
.galeria-filtro.is-active{
  background:#004A31;
  border-color:#004A31;
  color:var(--cream);
}

/* masonry real, balanceado via JS (ver main.js) — colunas flex em vez de
   column-count, que deixa buracos grandes quando um item alto não cabe
   e o navegador empurra ele inteiro pra próxima coluna */
.galeria-grid{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:clamp(12px,1.0417vw,20px);
}
.galeria-col{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.0417vw,20px);
  flex:1;
  min-width:0;
}
.galeria-item{
  position:relative;
  /* figure traz margem lateral do navegador por padrão. Ela fazia cada
     foto encolher dentro da própria coluna, deixando vazios artificiais. */
  width:100%;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--green-800);
  isolation:isolate;
}
.galeria-item img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.galeria-item[data-ratio="quadrado"] img{aspect-ratio:1/1}
.galeria-item[data-ratio="padrao"] img{aspect-ratio:4/5}
.galeria-item[data-ratio="largo"] img{aspect-ratio:5/4}
.galeria-item::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, transparent 55%, rgba(0,36,24,.6) 100%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.galeria-item:hover img{transform:scale(1.06)}
.galeria-item:hover::after{opacity:1}
.galeria-item.is-oculto{display:none}
.galeria-ver-mais{margin-top:4px}
.galeria-ver-mais[hidden]{display:none}

@media (max-width:767px){
  .galeria{padding:clamp(40px,15vw,64px) 5vw}
  .galeria-inner{gap:22px}
  .galeria-intro{width:100%; gap:15px}
  .galeria-heading__icon{width:30px; height:30px}
  .galeria-heading h2{font-size:clamp(27px,7.4vw,32px)}
  .galeria-intro > p{font-size:clamp(15px,4vw,17px)}
  .galeria-filtros{gap:8px}
  .galeria-filtro{padding:10px 14px; font-size:14px}
  .galeria-grid{gap:12px}
  .galeria-col{gap:12px}
  .galeria-item{border-radius:12px}
  .galeria-ver-mais{margin-top:2px}
}

.galeria-outro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
  width:min(25.6771vw,493px);
  margin-top:10px;
}
.galeria-outro > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
  color:#45534E;
}
.galeria-outro strong{font-weight:700}
.galeria-hashtag{
  font-family:var(--font-display);
  font-size:clamp(26px,1.6667vw,32px);
  line-height:1.1;
  color:var(--green-800);
}
@media (max-width:767px){
  .galeria-outro{width:100%}
  .galeria-outro > p{font-size:clamp(15px,4vw,17px)}
  .galeria-hashtag{font-size:clamp(20px,6.5vw,26px)}
}

/* ======================================================================
   Lightbox da galeria
   ====================================================================== */

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,20,13,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-aberto{opacity:1; visibility:visible}
.lightbox-figure{
  max-width:90vw;
  max-height:86vh;
  margin:0;
  transform:scale(.94);
  opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.lightbox.is-aberto .lightbox-figure{transform:scale(1); opacity:1}
.lightbox-img{
  max-width:90vw;
  max-height:86vh;
  width:auto;
  height:auto;
  display:block;
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox-fechar,
.lightbox-nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:var(--cream);
  transition:background .25s;
}
.lightbox-fechar:hover,
.lightbox-nav:hover{background:rgba(255,255,255,.2)}
.lightbox-fechar{top:24px; right:24px; width:44px; height:44px}
.lightbox-fechar svg{width:20px; height:20px}
.lightbox-nav{top:50%; transform:translateY(-50%); width:52px; height:52px}
.lightbox-nav svg{width:24px; height:24px}
.lightbox-nav--prev{left:24px}
.lightbox-nav--next{right:24px}
.lightbox-nav[disabled]{opacity:.3; pointer-events:none}
@media (max-width:640px){
  .lightbox-fechar{top:14px; right:14px; width:38px; height:38px}
  .lightbox-nav{width:42px; height:42px}
  .lightbox-nav--prev{left:8px}
  .lightbox-nav--next{right:8px}
}

/* ======================================================================
   CTA Matrículas — frame 9:1141 do Figma
   Fundo verde é placeholder: a seção real de baixo ainda não veio do Figma
   ====================================================================== */

.cta-matriculas{
  position:relative;
  background:#FBF9F3;
  padding:min(4.5833vw,88px) 5vw min(3.125vw,60px);
  display:flex;
  justify-content:center;
  overflow:visible;
  z-index:2;
}
.cta-matriculas__card{
  /* sem overflow:hidden aqui — a logo 3D precisa poder ultrapassar pra fora,
     por cima da borda do card. Quem clipa a foto/gradiente é a __caixa. */
  position:relative;
  width:min(45.1042vw,866px);
  padding:0 min(2.8646vw,55px) min(4.0104vw,77px);
  text-align:center;
  isolation:isolate;
}
.cta-matriculas__caixa{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:var(--radius-card);
  border:2px solid var(--gold-1);
  overflow:hidden;
  background:linear-gradient(119.5deg, #023B28 27.7%, #012A1C 67.5%);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}
.cta-matriculas__fundo{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.4;
}
.cta-matriculas__caixa::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(1,42,28,.5) 0%, rgba(1,42,28,.85) 55%, #012A1C 100%);
}
.cta-matriculas__conteudo{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:min(1.0417vw,20px);
}
.cta-matriculas__logo{
  display:block;
  margin:max(-4.0104vw,-77px) auto 0;
  width:min(5.6771vw,109px);
  height:auto;
  filter:
    drop-shadow(0 min(4.6875vw,90px) min(1.3021vw,25px) rgba(0,0,0,.01))
    drop-shadow(0 min(3.0208vw,58px) min(1.1979vw,23px) rgba(0,0,0,.06))
    drop-shadow(0 min(1.6667vw,32px) min(.9896vw,19px) rgba(0,0,0,.22))
    drop-shadow(0 min(.7292vw,14px) min(.7292vw,14px) rgba(0,0,0,.37))
    drop-shadow(0 min(.2083vw,4px) min(.4167vw,8px) rgba(0,0,0,.11));
}
.cta-matriculas__conteudo h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,2.0833vw,40px);
  line-height:1.1;
}
.cta-matriculas__dark{color:var(--cream)}
.cta-matriculas__conteudo > p{
  font-size:clamp(19px,1.1458vw,22px);
  line-height:1.4;
  color:var(--cream);
  max-width:min(28.4896vw,547px);
}
.cta-matriculas__conteudo strong{font-weight:700}

@media (min-width:768px) and (max-width:1024px){
  .cta-matriculas__card{width:100%; max-width:640px; height:auto}
}
@media (max-width:767px){
  .cta-matriculas{
    padding:clamp(40px,15vw,64px) 5vw clamp(40px,15vw,64px);
  }
  .cta-matriculas__card{width:100%; height:auto; padding:0 24px 40px}
  .cta-matriculas__logo{margin-top:-40px; width:74px}
  .cta-matriculas__conteudo h2{font-size:clamp(24px,7vw,30px)}
  .cta-matriculas__conteudo > p{font-size:15px; max-width:100%}
}

/* ======================================================================
   Instituto Peregrinos — frame 12:268 do Figma
   ====================================================================== */

.instituto{
  position:relative;
  z-index:1;
  background:var(--cream);
  padding:clamp(110px,7vw,135px) 5vw;
}
.instituto__card{
  position:relative;
  width:min(100%,1104px);
  min-height:500px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,572px) minmax(400px,532px);
  overflow:hidden;
  border:2px solid var(--gold-1);
  border-radius:20px;
  background:#023B28;
  color:var(--cream);
  box-shadow:0 10px 24px rgba(0,36,24,.10), 0 30px 54px rgba(0,36,24,.07);
}
.instituto__ornamento{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  opacity:1;
  background:url("../icons/instituto-outline.svg") center/100% 100% no-repeat;
  pointer-events:none;
}
.instituto__conteudo{
  position:relative;
  z-index:1;
  width:452px;
  max-width:calc(100% - 80px);
  align-self:center;
  margin-left:63px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  font-size:clamp(15px,0.9375vw,18px);
  line-height:1.4;
}
.instituto__cabecalho{display:flex; flex-direction:column; gap:5px}
.instituto__icone{width:33px; height:33px}
.instituto__cabecalho h2{
  color:var(--cream);
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
}
.instituto__conteudo p + p{margin-top:2px}
.instituto__conteudo strong{font-weight:700}
.instituto__conteudo em.gold-text{font-style:italic}
.instituto__btn{margin-top:2px}
.instituto__imagem{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:496px;
  object-fit:cover;
  border-left:2px solid var(--gold-1);
}

/* ======================================================================
   Contato e FAQ — frame 12:312 do Figma
   ====================================================================== */

.contato{
  position:relative;
  overflow:hidden;
  background:#F3EDE1;
  padding:67px 5vw min(4.6354vw,89px);
}
.contato__inner{
  width:min(100%,1087px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:507px 520px;
  align-items:start;
  gap:60px;
}
.contato__formulario{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--section-heading-content-gap)}
/* Os botões do FAQ já têm padding próprio: 2px aqui equivale a 16px
   de respiro visual entre o título e a primeira pergunta. */
.faq{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.contato__cabecalho{display:flex; flex-direction:column; gap:5px}
.contato__icone{width:33px; height:33px}
.contato__cabecalho h2{
  font-family:var(--font-display);
  font-size:36px;
  line-height:1.1;
  color:var(--green-800);
}
.contato__introducao{
  width:472px;
  max-width:100%;
  color:#45534E;
  font-size:20px;
  line-height:1.4;
}
.contato__introducao strong{font-weight:700}
.contato__paragraph-break{display:block; height:12px}
.formulario{
  width:100%;
  min-height:622px;
  padding:35px 41px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:30px;
  margin-top:0;
  border-radius:20px;
  background:#FBF9F3;
  box-shadow:
    0 7px 8px rgba(0,0,0,.1),
    0 22px 13px rgba(0,0,0,.09),
    0 51px 18px rgba(0,0,0,.05),
    0 90px 21px rgba(0,0,0,.01);
}
.formulario label{
  display:flex;
  flex-direction:column;
  gap:20px;
  color:var(--gold-1);
  font-family:var(--font-display);
  font-size:14px;
  line-height:1.2;
  /* mesmo tracking do formulário de Matrículas: em .4em as letras ficavam
     soltas demais nos títulos longos dos campos */
  letter-spacing:.12em;
  text-transform:uppercase;
}
.formulario input,.formulario select,.formulario textarea{
  width:100%;
  padding:0 4px 7px 0;
  border:0;
  background-color:transparent;
  background-image:var(--section-line-fade);
  background-position:left bottom;
  background-repeat:no-repeat;
  background-size:100% 1px;
  border-radius:0;
  outline:0;
  color:#45534E;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  resize:none;
}
.formulario input::placeholder,.formulario textarea::placeholder{color:#45534E; opacity:1}
.formulario select{appearance:auto; cursor:pointer}
.formulario textarea{min-height:94px; padding-bottom:7px}
.formulario__enviar{align-self:flex-start; margin-top:auto}
.formulario__botcheck{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
.formulario__enviar:disabled{cursor:wait; opacity:.72}
.formulario__status{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.4;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:opacity .3s var(--ease), max-height .3s var(--ease);
}
.formulario__status.is-visivel{max-height:80px; opacity:1}
.formulario__status.is-sucesso{color:var(--green-800)}
.formulario__status.is-erro{color:#B3261E}
.faq__lista{width:100%; display:flex; flex-direction:column; gap:10px}
/* A linha desaparece suavemente à direita, igual ao traçado do Figma. */
.faq__item{
  border:0;
  background-image:var(--section-line-fade);
  background-position:left bottom;
  background-repeat:no-repeat;
  background-size:100% 1px;
}
.faq__item h3{font-weight:400}
.faq__item h3 button{
  width:100%;
  min-height:55px;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#45534E;
  text-align:left;
  font-family:var(--font-body);
  font-size:16px;
  font-style:italic;
  font-weight:700;
  line-height:1.35;
}
.faq__item h3 button span{min-width:0}
.faq__item h3 button b{
  flex:none;
  color:var(--gold-2);
  font-family:var(--font-body);
  font-size:22px;
  font-style:normal;
  font-weight:400;
  transition:transform .3s var(--ease);
}
.faq__item.is-aberta h3 button b{transform:rotate(45deg)}
.faq__resposta{
  display:grid;
  grid-template-rows:0fr;
  color:#45534E;
  font-size:15px;
  line-height:1.4;
  transition:grid-template-rows .35s var(--ease), padding .35s var(--ease);
}
.faq__resposta > p{overflow:hidden}
.faq__item.is-aberta .faq__resposta{grid-template-rows:1fr; padding:0 42px 18px 0}

/* Só na home: no Figma o card do CTA (frame "CTA", y:7744-8202) sobrepõe de
   verdade a costura entre a seção "6" (bg #F3EDE1, termina em y:8005) e a
   seção "7" (bg #004A31, começa em y:8005), então o fundo reproduz esse corte.
   Vale em todas as larguras: no celular o card também precisa ficar montado
   na emenda, e não sobre um bloco creme inteiro. Na O Colégio não existe
   frame de CTA no Figma, então lá o fundo continua liso #FBF9F3. */
.cta-matriculas--home{background:linear-gradient(180deg, #F3EDE1 0 52%, #004A31 52% 100%)}
/* Com o card em altura automática a emenda desce um pouco para continuar
   passando por dentro dele. */
@media (min-width:768px) and (max-width:1024px){
  .cta-matriculas--home{background:linear-gradient(180deg, #F3EDE1 0 50%, #004A31 50% 100%)}
}
@media (max-width:767px){
  .cta-matriculas--home{background:linear-gradient(180deg, #F3EDE1 0 46%, #004A31 46% 100%)}
}


/* Notebook (1025–1599px): o texto do card encolhe (clamp/vw) mas com card
   mais baixo (350px) do que no desktop cheio, senão sobra vão vazio.
   Conferido via DevTools: uma janela de notebook real mediu 1456px — por
   isso o corte precisa ficar acima disso, não em 1440. Vale pra home e pra
   O Colégio, que reaproveita a mesma classe. */
@media (min-width:1025px) and (max-width:1599px){
  .cta-matriculas__card{height:350px;}
}

/* Desktop cheio (≥1600px): altura maior, já validada em monitor grande. */
@media (min-width:1600px){
  .cta-matriculas__card{height:435px;}
}

@media (min-width:768px) and (max-width:1024px){
  .instituto{padding:clamp(64px,15vw,110px) 5vw}
  .instituto__card{width:min(100%,700px); min-height:0; grid-template-columns:1fr}
  .instituto__imagem{order:-1; min-height:0; aspect-ratio:532/300; border:0; border-bottom:2px solid var(--gold-1)}
  .instituto__conteudo{width:auto; max-width:none; margin:0; padding:clamp(52px,8vw,64px) 50px}
  .contato{padding:clamp(64px,15vw,110px) 5vw}
  .contato__inner{width:min(100%,700px); grid-template-columns:1fr; gap:70px}
}

@media (max-width:767px){
  .instituto{padding:clamp(40px,15vw,64px) 5vw}
  .instituto__card{grid-template-columns:1fr; min-height:0; border-radius:16px}
  .instituto__imagem{order:-1; min-height:0; aspect-ratio:532/300; border:0; border-bottom:2px solid var(--gold-1)}
  .instituto__conteudo{width:auto; max-width:none; margin:0; padding:clamp(44px,11vw,56px) clamp(28px,8vw,36px); gap:15px; font-size:clamp(16px,4.25vw,18px)}
  .instituto__icone{width:30px; height:30px}
  .instituto__cabecalho h2{font-size:clamp(28px,8vw,34px)}
  .instituto__btn{white-space:normal}
  .contato{padding:clamp(40px,15vw,64px) 5vw}
  .contato__inner{width:100%; grid-template-columns:1fr; gap:56px}
  .contato__formulario{gap:var(--section-heading-content-gap)}
  .faq{gap:2px}
  .contato__icone{width:30px; height:30px}
  .contato__cabecalho h2{font-size:clamp(28px,8vw,34px)}
  .contato__introducao{font-size:clamp(16px,4.25vw,18px)}
  .formulario{min-height:0; padding:clamp(26px,8vw,34px) clamp(22px,7vw,30px)}
  .formulario input,.formulario select,.formulario textarea{font-size:17px}
  .faq__item h3 button{font-size:16px}
  .faq__resposta{font-size:clamp(15px,3.7vw,16px)}
}

/* ======================================================================
   Footer e pós-footer — frames 16:423 e 16:515 do Figma
   ====================================================================== */
.site-footer{
  background:linear-gradient(91.08deg,#023B28 17.4%,#002418 99.44%);
  color:var(--cream);
  padding:52px 5vw;
}
.site-footer__inner{
  width:min(100%,1277px);
  min-height:297px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:231px 132px 207px 213px;
  align-items:start;
  justify-content:space-between;
  gap:40px;
}
.site-footer h2{
  margin:0;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:400;
  line-height:20px;
  color:transparent;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
}
.site-footer__logo{display:block; width:231px; max-width:100%}
.site-footer__logo img{display:block; width:100%; height:auto}
.site-footer__menu{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.site-footer__menu h2{margin-bottom:5px}
.site-footer__menu a,
.footer-contato__item,
.site-footer__redes p,
.site-footer__redes p a{
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  font-style:italic;
  line-height:1.51;
  text-decoration:none;
}
.site-footer__menu a{
  width:max-content;
  white-space:nowrap;
  font-weight:400;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.site-footer__menu a:hover,.site-footer__menu a:focus-visible{color:var(--gold-2); transform:translateX(4px)}
.site-footer__matriculas{font-weight:700; color:var(--gold-2)!important}
.site-footer__contato{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.footer-contato__item{width:100%; display:flex; align-items:flex-start; gap:13px; font-size:15px; line-height:1.35}
a.footer-contato__item{transition:opacity .25s var(--ease)}
a.footer-contato__item:hover,a.footer-contato__item:focus-visible{opacity:.75}
.footer-contato__item img{width:46px; height:46px; flex:none; object-fit:contain}
.footer-contato__item span{display:flex; flex-direction:column; gap:7px; max-width:210px}
.footer-contato__item strong{
  font-family:var(--font-display);
  font-size:16px;
  font-style:normal;
  font-weight:400;
  line-height:1;
  color:transparent;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
}
.site-footer__redes{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.site-footer__instagram{display:block; width:44px; height:44px; transition:transform .25s var(--ease)}
.site-footer__instagram:hover,.site-footer__instagram:focus-visible{transform:translateY(-3px)}
.site-footer__instagram img{display:block; width:100%; height:100%}
.site-footer__redes p{margin:0; font-family:var(--font-display); font-size:15px; font-style:normal}
.site-footer__redes p a{font-family:inherit; font-size:inherit; font-style:normal; color:transparent; background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text}
.pos-footer{background:#004A31; border-top:1px solid rgba(255,255,255,.2); color:#fff}
.pos-footer__inner{
  width:min(100%,1280px);
  min-height:77px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font-family:var(--font-body);
  font-size:14px;
  line-height:16px;
}
.pos-footer p{margin:0}
.pos-footer nav{display:flex; align-items:center; gap:12px; white-space:nowrap}
.pos-footer a{color:#fff; text-decoration:none; transition:color .25s var(--ease)}
.pos-footer a:hover,.pos-footer a:focus-visible{color:var(--gold-2)}

@media (min-width:768px) and (max-width:1024px){
  .site-footer{padding:clamp(64px,15vw,110px) 5vw}
  .site-footer__inner{width:min(100%,700px); min-height:0; grid-template-columns:1fr 1fr; gap:64px 80px}
  .pos-footer__inner{width:min(100%,700px); min-height:0; padding:26px 0; align-items:flex-start; flex-direction:column; gap:16px}
}
@media (max-width:767px){
  .site-footer{padding:clamp(56px,15vw,72px) 5vw}
  .site-footer__inner{width:100%; min-height:0; grid-template-columns:1fr; gap:42px}
  .site-footer__logo{width:min(231px,72vw)}
  .site-footer__menu{gap:9px}
  .site-footer__contato{gap:18px}
  .site-footer__redes{gap:16px}
  .pos-footer__inner{width:100%; min-height:0; padding:24px 5vw; align-items:flex-start; flex-direction:column; gap:16px; font-size:13px}
  .pos-footer nav{flex-wrap:wrap; column-gap:9px; row-gap:6px; white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-left,
  .scroll-right,
  .scroll-top,
  .scroll-bottom,
  .blur{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .colegio-selo__anel,
  .etapas-card__anel{animation:none}
  .lfzap::before{animation:none; opacity:0}
  .lfzap__img,
  .lfzap__alerta,
  .lfzap-balao{transition-duration:.01ms!important}
}

/* ======================================================================
   Instituto Peregrinos — frames 21:1249 a 21:1549 do Figma
   ====================================================================== */
.instituto-apresentacao{
  background:var(--cream);
  color:#45534E;
  padding:65px 5vw 68px;
}
.instituto-apresentacao,.instituto-formacao,.instituto-peregrinos,.instituto-participar{overflow-x:clip}
.instituto-apresentacao__inner{
  width:min(100%,950px);
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:50px;
}
.instituto-copy{display:flex; flex-direction:column; align-items:flex-start; gap:20px; min-width:0}
.instituto-apresentacao .instituto-copy{width:496px; flex:none}
.instituto-heading{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.instituto-heading__icon{width:33px; height:33px; object-fit:contain}
.instituto-heading h2{font-family:var(--font-display); font-weight:400; font-size:clamp(27px,1.875vw,36px); line-height:1.1; color:var(--green-800); letter-spacing:-.02em}
.instituto-texto{font-size:clamp(15px,0.9375vw,18px); line-height:1.4; color:#45534E; display:flex; flex-direction:column; gap:18px}
.instituto-texto strong,.instituto-peregrinos__texto strong{font-weight:700}
/* carrossel automatico: as fotos ja vem com moldura dourada, so trocamos
   uma pela outra em fade */
.instituto-carrossel{width:404px; flex:none}
.instituto-carrossel__track{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  aspect-ratio:986 / 930;
  filter:drop-shadow(16px 16px 24px rgba(0,36,24,.28));
}
.instituto-carrossel__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.instituto-carrossel__slide.is-ativo{opacity:1}
.instituto-carrossel__slide img{width:100%; height:100%; display:block; object-fit:contain}
.instituto-carrossel__controles{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:18px;
}
.instituto-carrossel__seta{
  flex:none;
  width:17px;
  height:31px;
  padding:0;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s var(--ease);
}
.instituto-carrossel__seta:hover{transform:scale(1.1)}
.instituto-carrossel__seta img{width:31px; height:17px; max-width:none}
.instituto-carrossel__seta--prev img{transform:rotate(90deg)}
.instituto-carrossel__seta--next img{transform:rotate(-90deg)}
.instituto-carrossel__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11.205px;
}
.instituto-carrossel__dots span{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(0,74,49,.25);
  transition:background .3s var(--ease);
}
.instituto-carrossel__dots span.is-ativo{background:var(--gold-1)}

.instituto-formacao{background:#F3EDE1; color:#45534E; padding:70px 5vw 88px}
.instituto-formacao__inner{width:min(100%,1076px); margin-inline:auto; display:flex; align-items:center; gap:60px}
.instituto-formacao__imagem{width:506px; height:324px; flex:none; margin:0; overflow:hidden; border:3px solid var(--gold-1); border-radius:20px; box-shadow:24px 22px 30px -24px rgba(0,36,24,.45)}
.instituto-formacao__imagem img{width:100%; height:100%; object-fit:cover; object-position:center 36%}
.instituto-formacao__copy{width:510px; flex:none; gap:15px}
.instituto-formacao__copy .instituto-texto{gap:18px}

.instituto-peregrinos{position:relative; min-height:624px; overflow:hidden; color:var(--cream); background:var(--green-950)}
.instituto-peregrinos__imagem,.instituto-peregrinos__imagem img{position:absolute; inset:0; width:100%; height:100%; display:block}
.instituto-peregrinos__imagem img{object-fit:cover; object-position:center}
.instituto-peregrinos__inner{position:relative; z-index:1; width:min(100% - 10vw,606px); min-height:624px; margin-left:calc(50% - min(30%,575px)); padding:46px 0 45px; display:flex; flex-direction:column; gap:15px}
.instituto-heading--claro h2{color:var(--cream)}
.instituto-peregrinos__texto{display:flex; flex-direction:column; gap:18px; font-size:clamp(15px,0.9375vw,18px); line-height:1.4}
.instituto-peregrinos__citacao{font-size:clamp(19px,1.1458vw,22px); line-height:1.4; font-weight:700; font-style:italic; color:transparent; background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text}

.instituto-participar{background:var(--cream); color:#45534E; padding:65px 5vw 129px}
.instituto-participar__inner{width:min(100%,1258px); margin-inline:auto; display:flex; flex-direction:column; gap:40px; align-items:center}
.instituto-participar__intro{width:min(100%,635px); display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center}
.instituto-heading--central{align-items:center}
.instituto-participar__intro>p{font-size:clamp(17px,1.0417vw,20px); line-height:1.4}
.instituto-participar__cards{width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px}
.instituto-card{position:relative; height:465px; overflow:hidden; border:3px solid rgba(255,255,255,.2); border-radius:19px; background:var(--green-800); box-shadow:0 16px 34px -27px rgba(0,36,24,.55)}
.instituto-card__imagem{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.instituto-card:nth-child(1) .instituto-card__imagem{object-position:center 38%}
.instituto-card:nth-child(2) .instituto-card__imagem{object-position:center 27%}
.instituto-card:nth-child(3) .instituto-card__imagem{object-position:center 27%}
.instituto-card::after{content:""; position:absolute; inset:0; background:rgba(0,74,49,.4); mix-blend-mode:multiply; pointer-events:none}
.instituto-card__glass{position:absolute; z-index:1; right:0; bottom:0; left:0; min-height:213px; padding:40px 37px 39px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:linear-gradient(180deg,rgba(2,59,40,.56),rgba(0,36,24,.85)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.instituto-card__glass h3{font-family:var(--font-display); font-size:clamp(22px,1.4583vw,28px); line-height:1.1; font-weight:400; color:transparent; background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text}
.instituto-card__glass p{font-size:clamp(14px,0.8333vw,16px); line-height:1.4; color:var(--cream)}
.instituto-card__btn{min-height:37px!important; padding:7px 16px!important; font-size:clamp(15px,0.9375vw,18px)!important; line-height:1.2!important; margin-top:auto}

@media (min-width:1025px) and (max-width:1599px){
  .instituto-apresentacao__inner{width:min(78vw,950px)}
  .instituto-formacao__inner{width:min(84vw,1076px)}
  /* O bloco de texto fica centralizado na faixa verde à esquerda da figura,
     respeitando o recuo padrão de 5vw das laterais do site. */
  .instituto-peregrinos__inner{
    margin-left:max(5vw, calc((50% - min(100% - 10vw, 606px)) / 2));
  }
}
@media (max-width:1024px){
  .instituto-apresentacao,.instituto-formacao{padding:clamp(40px, 15vw, 110px) 5vw}
  .instituto-apresentacao__inner,.instituto-formacao__inner{width:100%; flex-direction:column; gap:clamp(36px,7vw,60px); align-items:flex-start}
  .instituto-apresentacao .instituto-copy,.instituto-formacao__copy{width:min(100%,620px); order:1}
  .instituto-carrossel{width:min(100%,550px); align-self:center; order:2}
  .instituto-formacao__imagem{width:min(100%,620px); height:clamp(270px,50vw,380px); align-self:center; order:2}
  .instituto-formacao__copy{order:1}
  .instituto-heading h2{font-size:clamp(30px,5vw,36px)}
  .instituto-texto,.instituto-peregrinos__texto{font-size:clamp(17px,2.4vw,19px)}
  /* Igual à hero no mobile: a foto ocupa a faixa de cima e o texto vem
     depois, já sobre o verde. A passagem de uma coisa pra outra é um
     degradê (mesma ideia do --veu-mobile), não um corte reto — era o
     "retângulo verde" que aparecia antes. */
  .instituto-peregrinos{
    position:relative;
    min-height:0;
    display:block;
    background:var(--green-950);
    --faixa-foto:clamp(280px,64vw,460px);
  }
  .instituto-peregrinos__imagem,
  .instituto-peregrinos__imagem img{
    position:absolute;
    top:0; left:0; right:0;
    width:100%;
    height:var(--faixa-foto);
  }
  .instituto-peregrinos__imagem img{object-fit:cover; object-position:center top}
  .instituto-peregrinos::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:var(--faixa-foto);
    z-index:0;
    background:linear-gradient(180deg,
      rgba(2,59,40,.10) 0%,
      rgba(2,59,40,.30) 55%,
      rgba(0,36,24,.85) 85%,
      var(--green-950) 100%);
    pointer-events:none;
  }
  .instituto-peregrinos__inner{
    width:100%;
    min-height:0;
    margin:0;
    /* o texto começa logo abaixo da faixa da foto */
    padding:calc(var(--faixa-foto) - clamp(24px,6vw,48px)) 5vw clamp(54px,15vw,110px);
    background:transparent;
  }
  .instituto-participar{padding:clamp(40px, 15vw, 110px) 5vw}
  .instituto-participar__cards{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px,5vw,40px)}
  .instituto-card:nth-child(3){grid-column:1 / -1; width:calc((100% - clamp(24px,5vw,40px)) / 2); justify-self:center}
}
@media (max-width:767px){
  .instituto-heading h2{font-size:clamp(29px,8vw,36px)}
  .instituto-heading__icon{width:30px; height:30px}
  .instituto-copy{gap:15px}
  .instituto-texto{gap:16px; font-size:clamp(17px,4.5vw,19px)}
  .instituto-carrossel__controles{margin-top:14px; gap:14px}
  .instituto-carrossel__seta{width:13px; height:24px}
  .instituto-carrossel__seta img{width:24px; height:13px}
  .instituto-formacao__imagem{height:clamp(220px,64vw,330px); border-radius:15px}
  .instituto-peregrinos__texto{gap:16px; font-size:clamp(17px,4.5vw,19px)}
  .instituto-peregrinos__citacao{font-size:clamp(20px,5.2vw,22px)}
  .instituto-participar__inner{gap:32px}
  .instituto-participar__intro{gap:15px}
  .instituto-participar__intro>p{font-size:clamp(18px,4.8vw,20px)}
  .instituto-participar__cards{grid-template-columns:1fr; gap:24px}
  .instituto-card,.instituto-card:nth-child(3){width:100%; height:465px; grid-column:auto}
  .instituto-card__glass{padding:37px 30px 36px}
  .instituto-card__glass h3{font-size:clamp(25px,7vw,28px)}
}

/* ==========================================================================
   MATRÍCULAS — frame 25:1553 do Figma.
   Tudo aqui é CÓPIA de componentes que já existem no site (Etapas de Ensino,
   card de vidro da Proposta em carrossel e o formulário do Contato), com as
   medidas do Figma desta página. Classes próprias .mat-* de propósito: nada
   nesta página compartilha CSS com as outras.
   ========================================================================== */

/* ---------- HERO + formulário (banner 1920x800) ---------- */
.mat-hero{
  position:relative;
  width:100%;
  min-height:min(41.6667vw,800px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#004A31;
}
.mat-hero__fundo,
.mat-hero__fundo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.mat-hero__fundo img{object-fit:cover}
.mat-hero__inner{
  position:relative;
  z-index:1;
  width:min(62.8125vw,1206px);
  margin-inline:auto;
  padding:min(7.8125vw,150px) 0 min(3.125vw,60px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:min(3.75vw,72px);
}
.mat-hero__copy{
  width:min(25.8854vw,497px);
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.mat-hero__copy h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px,2.8646vw,55px);
  line-height:1.1;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
}
.mat-hero__lede{
  font-size:clamp(19px,1.1458vw,22px);
  line-height:1.3;
  color:var(--cream);
}
.mat-hero__lede strong{font-weight:700}
.mat-hero__destaque{
  font-weight:700;
  font-style:italic;
  font-size:clamp(19px,1.1458vw,22px);
  line-height:1.3;
  color:var(--cream);
}
.mat-hero__lista{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:min(1.0417vw,20px);
}
.mat-hero__lista li{
  display:flex;
  align-items:center;
  gap:12px;
  font-style:italic;
  font-size:clamp(14px,.78125vw,15px);
  line-height:1.58;
  color:var(--cream);
}
.mat-hero__lista li::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  border-radius:3px;
  background:var(--gold-gradient);
  animation:mat-ponto-pulso 2.6s ease-in-out infinite;
}
.mat-hero__lista li:nth-child(2)::before{animation-delay:.35s}
.mat-hero__lista li:nth-child(3)::before{animation-delay:.7s}
@keyframes mat-ponto-pulso{
  0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(229,177,60,.45)}
  50%{transform:scale(1.35); box-shadow:0 0 0 5px rgba(229,177,60,0)}
}
@media (prefers-reduced-motion:reduce){
  .mat-hero__lista li::before{animation:none}
}

/* formulário — cópia do .formulario do Contato, em 2 colunas (637x441) */
.mat-formulario{
  width:min(33.1771vw,637px);
  flex:none;
  padding:min(1.875vw,36px) min(2.0833vw,40px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:min(1.5625vw,30px) min(2.0833vw,40px);
  align-content:start;
  border-radius:20px;
  background:#FBF9F3;
  box-shadow:
    0 7px 8px rgba(0,0,0,.1),
    0 22px 13px rgba(0,0,0,.09),
    0 51px 18px rgba(0,0,0,.05),
    0 90px 21px rgba(0,0,0,.01);
}
/* label igual ao do formulário de Contato: dourado sólido. Gradiente com
   background-clip:text aqui vazaria por trás do input, que é filho do label.
   O tracking é menor que o .4em do Figma — naquele valor as letras ficavam
   soltas demais nos títulos longos ("Como conheceu o Colégio"). */
.mat-formulario label{
  display:flex;
  flex-direction:column;
  gap:min(1.0417vw,20px);
  color:var(--gold-1);
  font-family:var(--font-display);
  font-size:14px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mat-formulario input,
.mat-formulario select{
  width:100%;
  padding:0 4px 7px 0;
  border:0;
  background-color:transparent;
  background-image:var(--section-line-fade);
  background-position:left bottom;
  background-repeat:no-repeat;
  background-size:100% 1px;
  border-radius:0;
  outline:0;
  color:#45534E;
  -webkit-text-fill-color:#45534E;
  font-family:var(--font-body);
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
}
.mat-formulario input::placeholder{color:#45534E; opacity:1}
.mat-formulario select{appearance:auto; cursor:pointer}
.mat-formulario__enviar{
  align-self:end;
  justify-self:start;
  min-height:37px;
  padding:7px 18px;
  font-size:clamp(15px,.9375vw,18px);
}
.mat-formulario__enviar:disabled{cursor:wait; opacity:.72}
.mat-formulario__botcheck{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
.mat-formulario__status{
  grid-column:1 / -1;
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.4;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:opacity .3s var(--ease), max-height .3s var(--ease);
}
.mat-formulario__status.is-visivel{max-height:80px; opacity:1}
.mat-formulario__status.is-sucesso{color:var(--green-800)}
.mat-formulario__status.is-erro{color:#B3261E}

/* ---------- Seção 2: cópia da "Etapas de Ensino" ---------- */
.mat-etapas{
  position:relative;
  background:var(--cream);
  padding:min(3.75vw,72px) 5vw min(3.75vw,72px);
}
.mat-etapas-inner{
  width:min(56.3021vw,1081px);
  margin-inline:auto;
  display:flex;
  align-items:flex-start;
  gap:min(3.6458vw,70px);
}
.mat-etapas-info{
  flex:none;
  width:min(21.0417vw,404px);
  position:sticky;
  top:clamp(170px,9.8958vw,190px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.mat-etapas-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.mat-etapas-heading__icon{width:33px; height:33px}
.mat-etapas-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--green-800);
}
.mat-etapas-heading__dark{color:var(--green-800)}
.mat-etapas-info > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
  color:#45534E;
}
.mat-etapas-info strong{font-weight:700}
.mat-etapas-cta{
  min-height:37px;
  padding:7px 16px;
  font-size:clamp(14px,.8854vw,17px);
}

.mat-etapas-cards{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:min(1.5625vw,30px);
  filter:
    drop-shadow(min(9.6354vw,185px) min(8.8021vw,169px) min(1.8229vw,35px) rgba(0,0,0,0))
    drop-shadow(min(6.1458vw,118px) min(5.625vw,108px) min(1.6667vw,32px) rgba(0,0,0,.01))
    drop-shadow(min(3.4896vw,67px) min(3.1771vw,61px) min(1.4063vw,27px) rgba(0,0,0,.05))
    drop-shadow(min(1.5625vw,30px) min(1.4063vw,27px) min(1.0417vw,20px) rgba(0,0,0,.09))
    drop-shadow(min(.3646vw,7px) min(.3646vw,7px) min(.5729vw,11px) rgba(0,0,0,.1));
}
.mat-etapas-card{position:relative}
.mat-etapas-card__box{
  display:flex;
  align-items:stretch;
  margin-left:min(1.25vw,24px);
  margin-top:min(.8333vw,16px);
  background:#F3EDE1;
  border:1px solid var(--gold-border);
  border-radius:var(--radius-card-sm);
  overflow:hidden;
}
.mat-etapas-card__img{
  position:relative;
  flex:none;
  width:min(12.1875vw,234px);
  min-height:min(9.0104vw,173px);
  overflow:hidden;
  border-radius:var(--radius-card-sm);
  isolation:isolate;
}
.mat-etapas-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mat-etapas-card__text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:min(1.4583vw,28px);
}
.mat-etapas-card__text h3{
  font-family:var(--font-display);
  font-size:clamp(19px,1.25vw,24px);
  line-height:1.1;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mat-etapas-card__text p{
  font-size:clamp(14px,.8333vw,16px);
  line-height:1.4;
  color:#45534E;
}
.mat-etapas-card__selo{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:min(4.3035vw,82.627px);
  aspect-ratio:1;
  border:1px solid rgba(158,124,46,.76);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(229,177,60,.68),rgba(158,124,46,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 12px 28px rgba(0,36,24,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mat-etapas-card__anel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:selo-giro 22s linear infinite;
}
.mat-etapas-card__logo{
  position:absolute;
  left:50%;
  top:50%;
  width:39.42%;
  height:auto;
  transform:translate(-50%,-50%);
}

/* ---------- Seção 3: card de vidro (Proposta) em carrossel ---------- */
.mat-porque{
  position:relative;
  overflow:hidden;
  background:#F3EDE1;
  padding:min(2.6563vw,51px) 5vw min(2.7604vw,53px);
  color:#45534E;
}
.mat-porque__inner{
  width:min(69.375vw,1332px);
  max-width:1332px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mat-porque-intro{
  width:min(32.8125vw,630px);
  margin:0 auto min(1.9792vw,38px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.mat-porque-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.mat-porque-heading__icon{width:33px; height:33px}
.mat-porque-heading h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--green-800);
}

/* setas e pontos: mesmo padrão do carrossel da Equipe (página O Colégio) */
.mat-carrossel{
  width:100%;
  display:flex;
  align-items:center;
  gap:20px;
}
.mat-seta{
  flex:none;
  width:17px;
  height:31px;
  padding:0;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .25s var(--ease);
}
.mat-seta:not(:disabled):hover{transform:scale(1.1)}
.mat-seta:disabled{opacity:1; cursor:default}
.mat-seta img{width:31px; height:17px; max-width:none}
.mat-seta--prev img{transform:rotate(90deg)}
.mat-seta--next img{transform:rotate(-90deg)}
/* O padding/margem negativa dá respiro pra sombra dos cards aparecer inteira:
   sem isso o overflow:hidden corta a sombra rente à borda do carrossel. */
.mat-viewport{
  flex:1;
  min-width:0;
  overflow:hidden;
  padding:14px 0 46px;
  margin:-14px 0 -46px;
}
.mat-track{
  --mat-gap:min(2.6341vw,50.576px);
  display:flex;
  gap:var(--mat-gap);
  list-style:none;
  margin:0;
  padding:0;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.10))
         drop-shadow(0 28px 14px rgba(0,0,0,.09));
  transition:transform .45s cubic-bezier(.2,.75,.25,1);
}
.mat-vidro-card{
  position:relative;
  isolation:isolate;
  flex:none;
  /* 3 cards inteiros por página: a largura sai do próprio carrossel, então
     nunca sobra um card cortado na borda. */
  width:calc((100% - 2 * var(--mat-gap)) / 3);
  aspect-ratio:392.6667 / 465;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:#004a31;
  box-shadow:0 18px 34px rgba(0,36,24,.15);
}
.mat-vidro-card__image{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.mat-vidro-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,74,49,.10);
  mix-blend-mode:darken;
  pointer-events:none;
}
.mat-vidro-card__glass{
  position:absolute;
  left:-3px;
  right:-3px;
  bottom:-3px;
  min-height:calc(50.101% + 3px);
  padding:clamp(22px,1.9271vw,37px) clamp(20px,1.9271vw,37px) 28px;
  display:flex;
  flex-direction:column;
  gap:15px;
  border-top:1px solid rgba(255,255,255,.24);
  background:linear-gradient(115deg,rgba(0,36,24,.89),rgba(0,50,34,.72) 61%,rgba(222,207,166,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}
.mat-vidro-card__glass h3{
  font-family:var(--font-display);
  font-size:clamp(21px,1.3542vw,26px);
  line-height:1.1;
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mat-vidro-card__glass p{
  color:var(--cream);
  font-size:clamp(14px,.8854vw,17px);
  line-height:1.4;
}
.mat-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11.205px;
  margin-top:20px;
}
.mat-dots button{
  width:7px;
  height:7px;
  border-radius:50%;
  border:0;
  padding:0;
  background:rgba(0,36,24,.25);
  cursor:pointer;
}
.mat-dots button.is-active{background:var(--gold-1)}
.mat-porque__cta{
  margin-top:min(1.9792vw,38px);
  min-height:37px;
  padding:7px 18px;
  font-size:clamp(15px,.9375vw,18px);
}

/* ---------- Seção 4: contato sobre fundo verde texturizado ---------- */
.mat-contato{
  position:relative;
  overflow:hidden;
  background:#004A31;
  padding:min(4.6875vw,90px) 5vw min(4.9479vw,95px);
  /* respiro para o menu flutuante não cobrir o título quando os botões
     "Quero matricular meu filho" ancoram aqui */
  scroll-margin-top:130px;
}
.mat-contato__textura{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  pointer-events:none;
}
.mat-contato__inner{
  position:relative;
  z-index:1;
  width:min(59.5313vw,1143px);
  margin-inline:auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:min(3.125vw,60px);
}
.mat-contato__copy{
  width:min(23.2292vw,446px);
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:min(1.0417vw,20px);
  color:var(--cream);
}
.mat-contato__cabecalho{display:flex; flex-direction:column; gap:5px}
.mat-contato__icone{width:33px; height:33px}
.mat-contato__cabecalho h2{
  font-family:var(--font-display);
  font-size:clamp(27px,1.875vw,36px);
  line-height:1.1;
  color:var(--cream);
}
.mat-contato__copy > p{
  font-size:clamp(17px,1.0417vw,20px);
  line-height:1.4;
  color:var(--cream);
}
.mat-contato__copy strong{font-weight:700}
.mat-contatos{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:min(1.0417vw,20px);
  width:100%;
}
.mat-contatos li{
  display:flex;
  align-items:flex-start;
}
/* link igual ao do rodapé: sem sublinhado, esmaece no hover.
   Ícone à esquerda e informação à direita em qualquer largura de tela. */
/* GRID de 2 colunas: ícone na coluna 1, texto na coluna 2. Grid não tem
   quebra de linha como o flex, então é impossível o texto cair para baixo
   do ícone, em qualquer largura de tela. */
.mat-contatos__item{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:start;
  column-gap:min(.6021vw,11.56px);
  width:100%;
  color:inherit;
  text-decoration:none;
  transition:opacity .25s var(--ease);
}
a.mat-contatos__item:hover,
a.mat-contatos__item:focus-visible{opacity:.75}
.mat-contatos p a{
  color:inherit;
  text-decoration:none;
  transition:color .25s var(--ease);
}
.mat-contatos p a:hover,
.mat-contatos p a:focus-visible{color:var(--gold-2)}
.mat-contatos li img{
  flex:none;
  width:min(2.0833vw,40px);
  height:auto;
}
/* Só a caixa de TEXTO empilha (rótulo em cima, informação embaixo).
   Antes o seletor era `.mat-contatos li > div`, que também pegava a caixa do
   item de e-mails (ela é uma div, e não um link como as outras duas) e jogava
   o ícone para cima do texto. Agora o alvo é sempre o filho do item. */
.mat-contatos__item > div{
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:min(.3vw,5.78px);
  min-width:0;
}
.mat-contatos__item > img{grid-column:1; grid-row:1}
.mat-contatos span{
  font-family:var(--font-display);
  font-size:clamp(14px,.8854vw,17px);
  line-height:1;
}
.mat-contatos p{
  /* e-mail é uma palavra longa sem espaços: sem isso ele vaza para fora da
     caixa em tela estreita */
  overflow-wrap:anywhere;
  font-style:italic;
  font-size:clamp(14px,.78125vw,15px);
  line-height:1.3;
  letter-spacing:-.01em;
  color:#fff;
}

/* ---------- Tablet ---------- */
@media (min-width:768px) and (max-width:1024px){
  .mat-hero{min-height:0}
  .mat-hero__inner{
    width:min(100%,700px);
    flex-direction:column;
    align-items:stretch;
    gap:40px;
    padding:clamp(130px,20vw,170px) 0 clamp(48px,8vw,64px);
  }
  .mat-hero__copy{width:100%}
  .mat-hero__copy h1{font-size:clamp(38px,6vw,48px)}
  .mat-hero__lede,.mat-hero__destaque{font-size:19px}
  .mat-hero__lista li{font-size:16px}
  .mat-formulario{width:100%; padding:32px; gap:26px 32px}
  .mat-formulario input,.mat-formulario select{font-size:18px}

  .mat-etapas{padding:clamp(48px,10vw,72px) 5vw}
  .mat-etapas-inner{width:100%; max-width:700px; flex-direction:column; gap:36px}
  .mat-etapas-info{position:static; width:100%; gap:15px}
  .mat-etapas-heading h2{font-size:32px}
  .mat-etapas-info > p{font-size:18px}
  .mat-etapas-cta{font-size:16px}
  .mat-etapas-card__img{width:200px}
  .mat-etapas-card__text h3{font-size:22px}
  .mat-etapas-card__text p{font-size:16px}

  .mat-porque{padding:clamp(48px,10vw,72px) 5vw}
  .mat-porque__inner{width:100%; max-width:700px}
  .mat-porque-intro{width:100%}
  .mat-porque-heading h2{font-size:32px}
  .mat-vidro-card{width:calc((100% - var(--mat-gap)) / 2)}
  .mat-track{--mat-gap:24px}
  .mat-vidro-card__glass h3{font-size:24px}
  .mat-vidro-card__glass p{font-size:16px}
  .mat-porque__cta{font-size:16px}

  .mat-contato{padding:clamp(48px,10vw,80px) 5vw}
  .mat-contato__inner{width:100%; max-width:700px; flex-direction:column; gap:40px}
  .mat-contato__copy{width:100%; gap:20px}
  .mat-contato__cabecalho{gap:8px}
  .mat-contatos{gap:22px}
  .mat-contatos__item{column-gap:14px}
  .mat-contatos__item > div{gap:6px}
  .mat-contato__cabecalho h2{font-size:32px}
  .mat-contato__copy > p{font-size:18px}
  .mat-contatos span{font-size:17px}
  .mat-contatos p{font-size:15px}
  .mat-contatos li img{width:38px}
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .mat-hero{min-height:0}
  .mat-hero__inner{
    width:90%;
    flex-direction:column;
    align-items:stretch;
    gap:32px;
    padding:clamp(120px,32vw,160px) 0 clamp(40px,12vw,56px);
  }
  .mat-hero__copy{width:100%}
  .mat-hero__copy h1{font-size:clamp(32px,8.6vw,42px)}
  .mat-hero__lede,.mat-hero__destaque{font-size:clamp(16px,4.4vw,18px)}
  .mat-hero__lista{gap:12px}
  .mat-hero__lista li{font-size:clamp(14px,3.9vw,16px)}

  .mat-formulario{
    width:100%;
    padding:26px 22px;
    grid-template-columns:1fr;
    gap:24px;
  }
  .mat-formulario label{font-size:13px; gap:14px}
  .mat-formulario input,.mat-formulario select{font-size:17px}
  /* no celular o botão ocupa a largura toda: precisa centralizar o conteúdo
     (o .btn só centraliza na vertical) e ganhar altura de toque confortável */
  .mat-formulario__enviar{
    justify-self:stretch;
    justify-content:center;
    min-height:48px;
    padding:12px 20px;
    font-size:16px;
  }

  .mat-etapas{padding:clamp(40px,12vw,64px) 5vw}
  .mat-etapas-inner{width:100%; flex-direction:column; gap:30px}
  .mat-etapas-info{position:static; width:100%}
  .mat-etapas-heading__icon{width:30px; height:30px}
  .mat-etapas-heading h2{font-size:clamp(27px,7.4vw,32px)}
  .mat-etapas-info > p{font-size:clamp(15px,4vw,17px)}
  .mat-etapas-cta{font-size:15px; white-space:normal}
  .mat-etapas-card__box{flex-direction:column; align-items:stretch; margin-left:16px; margin-top:14px}
  .mat-etapas-card__img{width:100%; aspect-ratio:16/9; min-height:0}
  .mat-etapas-card__text{padding:22px}
  .mat-etapas-card__text h3{font-size:clamp(19px,5.4vw,22px)}
  .mat-etapas-card__text p{font-size:15px}
  .mat-etapas-card__selo{width:54px}

  .mat-porque{padding:clamp(40px,12vw,64px) 5vw}
  .mat-porque__inner{width:100%}
  .mat-porque-intro{width:100%; margin-bottom:28px}
  .mat-porque-heading__icon{width:30px; height:30px}
  .mat-porque-heading h2{font-size:clamp(27px,7.4vw,32px)}
  .mat-carrossel{gap:12px}
  .mat-seta{width:14px; height:26px}
  .mat-seta img{width:26px; height:14px}
  .mat-vidro-card{width:100%}
  .mat-track{--mat-gap:16px}
  .mat-vidro-card__glass{padding:clamp(22px,6.1vw,28px) clamp(20px,6.1vw,28px) 24px}
  .mat-vidro-card__glass h3{font-size:clamp(22px,6.15vw,26px)}
  .mat-vidro-card__glass p{font-size:clamp(14px,3.78vw,16px)}
  .mat-porque__cta{font-size:15px; white-space:normal; text-align:center}

  .mat-contato{padding:clamp(40px,12vw,64px) 5vw}
  .mat-contato__inner{width:100%; flex-direction:column; gap:36px}
  /* Os espaçamentos da seção são calculados por largura de tela e no celular
     virariam 4px, 2px e até 1px, deixando tudo grudado. Aqui passam a ser
     valores fixos de respiro. */
  .mat-contato__copy{width:100%; gap:20px}
  .mat-contato__cabecalho{gap:8px}
  .mat-contatos{gap:20px}
  .mat-contatos__item{column-gap:12px}
  .mat-contatos__item > div{gap:6px}
  .mat-contato__icone{width:30px; height:30px}
  .mat-contato__cabecalho h2{font-size:clamp(27px,7.4vw,32px)}
  .mat-contato__copy > p{font-size:clamp(16px,4.25vw,18px)}
  .mat-contatos li img{width:34px}
  .mat-contatos span{font-size:16px}
  .mat-contatos p{font-size:14px}
}

/* ==========================================================================
   Hovers dos blocos de conteúdo
   Mesma linguagem do card da Proposta (sobe um pouco + sombra mais funda),
   com o dourado da marca reagindo junto. Nada de efeito chamativo: o card
   levanta, a borda acende e o ícone respira.
   ========================================================================== */

/* --- faixa de marcadores (home) --- */
.faixa-item{
  transition:transform .35s var(--ease);
}
.faixa-item img{
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.faixa-item span{
  transition:color .35s var(--ease);
}
.faixa-item:hover{transform:translateY(-3px)}
.faixa-item:hover img{
  transform:translateY(-2px) scale(1.14);
  filter:drop-shadow(0 0 9px rgba(229,177,60,.6));
}
.faixa-item:hover span{color:var(--gold-2)}

/* --- cards da Educação Integral (home) --- */
.integral-card{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.integral-card__marca{
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.integral-card__icon{
  transition:transform .4s var(--ease), filter .4s var(--ease);
}
.integral-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-2);
  box-shadow:0 18px 34px rgba(0,36,24,.28);
}
.integral-card:hover .integral-card__marca{opacity:.2; transform:translateY(4px) scale(1.05)}
.integral-card:hover .integral-card__icon{
  transform:translateY(-3px) scale(1.07);
  filter:drop-shadow(0 6px 14px rgba(229,177,60,.35));
}

/* --- cards de Missão, Visão e Valores (O Colégio) — mesmo estilo --- */
.mvv-card{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .4s var(--ease), background-color .4s var(--ease);
}
.mvv-card__icon{
  transition:transform .4s var(--ease), filter .4s var(--ease);
}
.mvv-card:hover{
  border-color:var(--gold-2);
  background-color:rgba(2,59,40,.78);
  box-shadow:0 18px 34px rgba(0,36,24,.26);
}
.mvv-card--top:hover{transform:translateY(-6px)}
/* o card de Valores é bem alto: sobe menos pra não parecer que "pula" */
.mvv-card--valores:hover{transform:translateY(-3px)}
.mvv-card:hover .mvv-card__icon{
  transform:scale(1.08);
  filter:drop-shadow(0 6px 14px rgba(229,177,60,.35));
}

/* --- card do Instituto Peregrinos (home) --- */
.instituto__card{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.instituto__imagem{
  transition:transform .7s var(--ease);
}
.instituto__ornamento{
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.instituto__card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-2);
  box-shadow:0 18px 34px rgba(0,36,24,.18), 0 40px 70px rgba(0,36,24,.12);
}
.instituto__card:hover .instituto__imagem{transform:scale(1.04)}
.instituto__card:hover .instituto__ornamento{transform:scale(1.03)}

/* --- cards "Como fazer parte" (página Instituto) --- */
.instituto-card{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.instituto-card__imagem{
  transition:transform .7s var(--ease);
}
.instituto-card__glass{
  transition:background .45s var(--ease);
}
.instituto-card__glass h3{
  transition:transform .4s var(--ease);
}
.instituto-card:hover{
  transform:translateY(-6px);
  border-color:rgba(229,177,60,.55);
  box-shadow:0 26px 44px -22px rgba(0,36,24,.75);
}
.instituto-card:hover .instituto-card__imagem{transform:scale(1.06)}
.instituto-card:hover .instituto-card__glass{
  background:linear-gradient(180deg,rgba(2,59,40,.62),rgba(0,36,24,.92));
}
.instituto-card:hover .instituto-card__glass h3{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .faixa-item,.faixa-item img,.faixa-item span,
  .integral-card,.integral-card__marca,.integral-card__icon,
  .mvv-card,.mvv-card__icon,
  .instituto__card,.instituto__imagem,.instituto__ornamento,
  .instituto-card,.instituto-card__imagem,.instituto-card__glass,.instituto-card__glass h3{
    transition:none;
  }
  .faixa-item:hover,.integral-card:hover,.mvv-card--top:hover,
  .mvv-card--valores:hover,.instituto__card:hover,.instituto-card:hover{transform:none}
}