/* ============================================================
   PALETA — extraída pixel a pixel do logo oficial.
   navy #163864 · vinho #831838 · azul-claro #7C9FC9
   Todo o resto é derivado dessas três cores. Nada inventado.
   ============================================================ */
:root{
  --navy:      #163864;   /* arco e nó maiores do logo — cor institucional */
  --navy-esc:  #0F2745;   /* fundo escuro profundo (rodapé) */
  --navy-cl:   #1F4E8C;   /* links */
  --vinho:     #831838;   /* arco vinho — acento de ação (CTAs, eyebrows) */
  --vinho-esc: #6A1029;   /* hover do CTA */
  --azul:      #7C9FC9;   /* arco azul-claro — detalhes e texto sobre navy */
  --azul-cl:   #E9F0F8;   /* derivado */
  --azul-gelo: #F4F8FC;   /* derivado — seções alternadas */
  --texto:     #2C3E56;
  --texto-2:   #667992;
  --linha:     #DCE5F0;
  --branco:    #FFFFFF;

  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 4px;
  --sombra: 0 1px 2px rgba(22,56,100,.05), 0 14px 34px -14px rgba(22,56,100,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--branco); color:var(--texto);
  font-family:var(--sans); font-size:clamp(16px,.55vw + 14.5px,17.5px);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--vinho); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
/* visivel so para leitor de tela */
.sr-apenas{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; z-index:200}
.skip:focus{left:8px; top:8px}

/* ---------- TIPOGRAFIA ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:-.015em; margin:0; color:var(--navy)}
h1{font-size:clamp(2.3rem,6vw,4.05rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.85rem)}
h3{font-size:clamp(1.28rem,2.1vw,1.58rem); line-height:1.25}
h4{font-size:1.1rem; line-height:1.3}
p{margin:0 0 1em}
.lead{font-size:clamp(1.06rem,1.4vw,1.26rem); color:var(--texto-2); line-height:1.6; max-width:62ch}
.eyebrow{
  font-family:var(--sans); font-size:.735rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--vinho);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; flex:none}
.eyebrow--claro{color:var(--azul)}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; border-radius:var(--r); border:1px solid transparent;
  font-weight:600; font-size:.97rem; text-decoration:none; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--vinho); color:#fff}
.btn--primario:hover{background:var(--vinho-esc); color:#fff}
.btn--contorno{border-color:var(--navy); color:var(--navy); background:transparent}
.btn--contorno:hover{background:var(--navy); color:#fff}
.btn--claro{border-color:rgba(255,255,255,.45); color:#fff}
.btn--claro:hover{background:#fff; color:var(--navy)}

/* ---------- LOGO ---------- */
.logo{width:34px; height:auto; flex:none}
.logo .arco{fill:none; stroke-linecap:butt}
.logo .a-navy{stroke:var(--navy)}
.logo .a-vinho{stroke:var(--vinho)}
.logo .a-azul{stroke:var(--azul)}
.logo .n-navy{fill:var(--navy)}
.logo .n-vinho{fill:var(--vinho)}
.logo .n-azul{fill:var(--azul)}
/* versão monocromática branca, para fundos navy — substitui a "marca branca" em PNG */
.logo--branco .a-navy,.logo--branco .a-vinho,.logo--branco .a-azul{stroke:#fff}
.logo--branco .n-navy,.logo--branco .n-vinho,.logo--branco .n-azul{fill:#fff}

/* ---------- FAIXA DO LOTE ---------- */
/* Acima do header, no fluxo normal: rola junto e deixa o menu sticky sozinho. */
.faixa-lote{background:var(--vinho); color:#fff; font-size:.88rem; line-height:1.4}
.faixa-lote__grid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.45rem 1.5rem; padding:.65rem 0;
}
.faixa-lote p{margin:0}
.faixa-lote strong{font-weight:700}
.faixa-lote__contador{
  display:flex; gap:.6rem; font-variant-numeric:tabular-nums;
  /* reserva a largura para o texto nao pular quando os digitos mudam */
  min-width:11.5rem; justify-content:center;
}
.faixa-lote__contador span{opacity:.75; font-size:.78rem; letter-spacing:.02em}
.faixa-lote__contador b{font-weight:700; font-size:1rem; opacity:1; margin-right:.1em}
.faixa-lote__cta{
  color:#fff; font-weight:600; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.55); padding-bottom:1px;
}
.faixa-lote__cta:hover{border-bottom-color:#fff}
.faixa-lote__cta:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:620px){
  .faixa-lote{font-size:.82rem}
  .faixa-lote__grid{gap:.3rem 1rem; padding:.55rem 0}
}

/* ---------- HEADER ---------- */
.topo{
  position:sticky; top:0; z-index:100;
  padding-block:.5rem;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.topo[data-scrolled="1"]{border-bottom-color:var(--linha); box-shadow:0 6px 24px -18px rgba(22,56,100,.6)}
.topo__grid{display:flex; align-items:center; gap:1.5rem; min-height:72px}
.marca{display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; flex:none}
.marca__txt{display:flex; flex-direction:column; line-height:1.05}
.marca__nome{font-family:var(--serif); font-size:1.3rem; color:var(--navy); letter-spacing:-.01em}
.marca__desc{font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; color:var(--texto-2)}
.nav{display:none}
.nav a{
  text-decoration:none; font-size:.94rem; font-weight:500; padding:.4rem 0; color:var(--navy);
  border-bottom:1.5px solid transparent; transition:border-color .2s, color .2s;
}
.nav a:hover{border-bottom-color:var(--vinho); color:var(--vinho)}
.topo .btn{padding:.7rem 1.25rem; font-size:.9rem; display:none}
.menu-btn{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:none; border:1px solid var(--linha);
  border-radius:var(--r); cursor:pointer;
}
.menu-btn span{display:block; height:1.5px; background:var(--navy); transition:transform .25s, opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.gaveta{
  position:fixed; inset:72px 0 0; background:var(--branco); z-index:99;
  padding:2rem var(--gut) 3rem; display:flex; flex-direction:column; gap:.25rem;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s; overflow-y:auto;
}
.gaveta[data-aberta="1"]{opacity:1; transform:none; pointer-events:auto}
.gaveta a{text-decoration:none; font-family:var(--serif); font-size:1.6rem; color:var(--navy); padding:.7rem 0; border-bottom:1px solid var(--linha)}
.gaveta .btn{margin-top:1.6rem; font-size:1rem; padding:1.05rem; color:#fff; border-bottom:0}
.gaveta__contato{margin-top:auto; padding-top:2rem; font-size:.92rem; color:var(--texto-2)}

/* ---------- HERO ---------- */
.hero{position:relative; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); overflow:hidden}
.hero__grid{display:grid; gap:2.5rem}
.hero h1{margin-bottom:1.4rem}
.hero h1 em{font-style:italic; color:var(--vinho)}
.hero__acoes{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.selos{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.8rem;
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--linha);
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-2);
}
.selos strong{color:var(--navy); font-weight:700}

/* HERO COM FOTO — a foto das coordenadoras ancora a seção.
   Mobile e desktop são composições diferentes, não a mesma encolhida:

   · mobile  — faixa panorâmica no topo, com máscara dissolvendo a base da
               foto no navy sólido. O texto fica sobre cor chapada, nunca
               sobre rosto. (cover num container alto ampliaria a foto 4x.)
   · ≥900px  — foto sangrada na seção inteira e véu navy no ::after, mesma
               mecânica da .espelho. A composição da foto colabora: a
               esquerda é cortina lisa, então o véu pesado cai onde o texto
               mora e as duas ficam limpas à direita. */
/* ---------- HERO: divisão firme ----------
   Texto à esquerda sobre fundo claro, foto à direita sangrando até a borda.
   Substituiu um hero com véu navy em degradê sobre a imagem: ali o texto
   branco só funcionava porque a foto era escurecida. Aqui nada se sobrepõe. */
/* align-items fica em stretch (padrao): a figura precisa ocupar a altura
   inteira da linha, senao o height:100% da imagem nao tem referencia e a
   foto deixa um vazio embaixo. O texto se centraliza por conta propria. */
.hero--divisao{
  display:grid; background:var(--azul-gelo); padding:0;
}
.hero--divisao .hero__texto{
  padding:clamp(2.4rem,5.5vw,3.8rem) var(--gut);
  display:flex; flex-direction:column; justify-content:center;
}
.hero--divisao h1{color:var(--navy); margin-bottom:1.3rem}
.hero--divisao h1 em{font-style:italic; color:var(--vinho)}
.hero--divisao .lead{max-width:44ch}
.hero--divisao .selos{margin-top:2.4rem}

.hero__foto{position:relative; margin:0; height:62vw; max-height:78vh}
.hero__foto img{width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block}
.hero__foto figcaption{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:2.4rem .9rem .7rem; font-size:.74rem; color:rgba(255,255,255,.92);
  /* o pé da foto é claro: sem este degradê curto a legenda some */
  background:linear-gradient(to top, rgba(15,39,69,.78), transparent);
}


/* ASSINATURA VISUAL: o próprio símbolo da marca, ampliado e em construção.
   O logo já é um sistema — nós ligados por arcos. Não inventei motivo nenhum. */
.sistema{width:100%; max-width:400px; margin-inline:auto; height:auto}
.sistema .arco{fill:none; stroke-linecap:butt}
.sistema .halo{fill:none; stroke:var(--azul); stroke-width:1.4; opacity:0}

/* ---------- BIFURCAÇÃO ---------- */
.portas{padding:clamp(2.5rem,5vw,4rem) 0}
.portas__grid{display:grid; gap:1.25rem}
.porta{
  display:block; text-decoration:none; background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--r); padding:clamp(1.6rem,3.5vw,2.4rem); position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.porta::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--azul); transition:background .2s;
}
.porta:hover{border-color:var(--azul); transform:translateY(-3px); box-shadow:var(--sombra)}
.porta:hover::before{background:var(--vinho)}
.porta h3{margin-bottom:.6rem}
.porta p{color:var(--texto-2); font-size:.97rem; margin-bottom:1.2rem}
.porta__cta{font-weight:600; color:var(--vinho); font-size:.93rem; display:inline-flex; align-items:center; gap:.45rem}
.porta:hover .porta__cta svg{transform:translateX(4px)}
.porta__cta svg{transition:transform .2s}
.porta__icone{width:36px; height:36px; margin-bottom:1.1rem; stroke:var(--navy); fill:none; stroke-width:1.3}

/* ---------- NÚMEROS ---------- */
.numeros{background:var(--navy); color:#fff; padding:clamp(3rem,6vw,4.5rem) 0}
.numeros h2{color:#fff; max-width:20ch}
.numeros__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; margin-top:2rem}
.num__valor{font-family:var(--serif); font-size:clamp(2.3rem,5vw,3.2rem); line-height:1; display:block; color:#fff}
.num__rot{font-size:.85rem; color:var(--azul); margin-top:.5rem; display:block; line-height:1.4}

/* título e legenda à esquerda, foto da turma à direita, na faixa navy */
.numeros__grid-foto{display:grid; gap:2.2rem; align-items:center; max-width:58rem}
@media (min-width:900px){
  .numeros__grid-foto{grid-template-columns:1fr .8fr; gap:3.2rem}
  .numeros h2{max-width:none}
}
.numeros__nota{
  margin:1.1rem 0 0; max-width:46ch; font-size:.9rem; line-height:1.6; color:var(--azul);
}

/* a foto fica presa por uma fita, como se pregada num mural. Aparece na
   proporção em que foi tirada: nada de object-fit cortando as pontas da
   turma para encaixar numa caixa. */
.turma{
  margin:0; position:relative; transform:rotate(-1.1deg);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.turma:hover, .turma:focus-within{transform:rotate(-.25deg) scale(1.025)}
.turma__zoom{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
}
.turma img{
  display:block; width:100%; height:auto;
  border:6px solid #fff;                       /* margem branca de fotografia */
  box-shadow:0 12px 30px -12px rgba(0,0,0,.55);
}
.turma__zoom:focus-visible{outline:3px solid #fff; outline-offset:4px; border-radius:2px}
.turma__fita{
  position:absolute; z-index:1; top:-13px; left:50%;
  width:112px; height:28px; transform:translateX(-50%) rotate(-2.4deg);
  background:rgba(255,255,255,.34);
  border-left:1px solid rgba(255,255,255,.16);
  border-right:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(1px);
}
@media (prefers-reduced-motion: reduce){
  .turma, .turma:hover, .turma:focus-within{transform:none; transition:none}
}

/* ---------- LUPA: imagem ampliada ----------
   O <dialog> nasce no primeiro clique, via JS, então nenhuma página carrega
   markup de pop-up que talvez ninguém abra. Esc e clique no fundo fecham. */
.lupa{
  border:0; padding:0; background:transparent; overflow:visible;
  max-width:min(1040px, 92vw); max-height:none;
}
.lupa::backdrop{background:rgba(9,22,40,.86)}
.lupa img{
  display:block; width:100%; height:auto; max-height:82vh; object-fit:contain;
  border:8px solid #fff; box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.lupa__legenda{
  margin:.9rem 0 0; color:rgba(255,255,255,.82); font-size:.85rem; line-height:1.5;
  max-width:70ch;
}
.lupa__x{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--navy); font-size:1.4rem; line-height:1;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
}
.lupa__x:focus-visible{outline:3px solid var(--azul); outline-offset:2px}

/* ---------- SEÇÕES ---------- */
.secao{padding:clamp(3.2rem,7vw,5.5rem) 0}
.secao--gelo{background:var(--azul-gelo)}
/* A medida de linha é de cada elemento, não do bloco.
   Antes o cabeçalho inteiro tinha max-width:64ch — e `ch` ali vale a largura
   do "0" no corpo do texto (Karla ~16px), ou seja ~665px. Esse limite existe
   para o parágrafo, onde 64 caracteres por linha é a medida certa. Só que o
   h2 herdava os mesmos 665px e, no corpo dele (serifada ~45px), isso dá só
   ~29 caracteres: títulos curtos quebravam sem precisar, deixando órfãs do
   tipo "da apostila" sozinhas na segunda linha.
   Agora o parágrafo guarda os 64ch na própria fonte, o título usa a largura
   da coluna, e quando precisa mesmo quebrar o text-wrap:balance divide as
   linhas por igual em vez de empurrar duas palavras para baixo. */
.secao__cabeca{margin-bottom:clamp(2rem,4vw,3rem)}
.secao__cabeca h2{text-wrap:balance}
.secao__cabeca p{margin-top:1rem; max-width:64ch}

/* eixos: nós ligados — são simultâneos, por isso NÃO são numerados */
.eixos{display:grid; gap:0}
/* Cada eixo ganhou um ícone no lugar do ponto ligado por uma linha vertical.
   A linha desenhava uma sequência — justamente o que o texto da seção nega
   ("não são módulos em sequência"). O ícone identifica, não ordena. */
.eixo{display:grid; grid-template-columns:auto 1fr; gap:0 1.4rem; padding:1.6rem 0; border-top:1px solid var(--linha)}
.eixo:last-child{border-bottom:1px solid var(--linha)}
.eixo__icone{
  grid-row:1/3; width:38px; height:38px; margin-top:.1rem;
  color:var(--azul); transition:color .25s;
}
.eixo:hover .eixo__icone{color:var(--vinho)}
.eixo h3{font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--vinho)}
.eixo p{margin:.45rem 0 0; color:var(--texto-2); font-size:.97rem}

/* ---------- SALA DE ESPELHOS ---------- */
/* ---------- PRÁTICA SUPERVISIONADA ----------
   Antes a foto da sala entrava como imagem de fundo sob um degradê navy quase
   opaco: não se via a sala, e o pouco que se via sujava o texto por cima. E a
   frase vinha com um "reflexo" invertido logo abaixo, que lido rápido parecia
   defeito de renderização. Agora o fundo é cor chapada, o texto fica limpo e a
   foto aparece inteira embaixo, do tamanho de quem é o argumento da seção. */
.espelho{background:var(--navy-esc); color:#fff; padding:clamp(3.5rem,7vw,6rem) 0}
.espelho h2,.espelho__frase{color:#fff}
.espelho__frase{
  font-family:var(--serif); font-size:clamp(1.55rem,4vw,2.5rem);
  line-height:1.25; max-width:19ch; margin:0;
}
.espelho p{color:#CBDAEC}
.espelho__grid{display:grid; gap:2rem}
.espelho__col2{margin-top:2.5rem}
.espelho__col2 p:first-child{margin-top:0}
.espelho__col2 .btn{margin-top:.6rem}

/* a cena: largura inteira da coluna, sem véu e sem recorte */
.espelho__cena{margin:clamp(2.4rem,5vw,3.6rem) 0 0}
.espelho__cena img{
  display:block; width:100%; height:auto;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
}
/* a foto é escura nos cantos e se dissolveria no fundo navy sem este fio;
   sobre fundo claro ele seria invisível e a sombra já basta */
.espelho .espelho__cena img{outline:1px solid rgba(255,255,255,.14); outline-offset:-1px}
/* No telefone a cena larga (2.36:1) encolhe para 142px de altura e vira um
   risco onde ninguem distingue nada. Ali ela e recortada em 16:9, puxada para
   a sala iluminada — e quem quiser ver o quadro inteiro toca e amplia. */
@media (max-width:699px){
  .espelho__cena img{aspect-ratio:16/9; object-fit:cover; object-position:55% 32%}
}
.espelho__cena button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
}
.espelho__cena button:focus-visible{outline:3px solid #fff; outline-offset:4px}
.espelho__cena figcaption{
  margin-top:1rem; max-width:58ch;
  font-size:.85rem; line-height:1.6; color:var(--azul);
}
.cena--clara figcaption{color:var(--texto-2)}
.cena--clara button:focus-visible{outline-color:var(--navy)}

/* ---------- DEPOIMENTOS ---------- */
/* Depoimentos escritos: grade que quebra em linhas, sem rolagem lateral.
   Era um carrossel horizontal — os depoimentos fora da primeira tela
   passavam despercebidos. Em telas largas sao 3 por linha (5 viram 3+2). */
/* minmax(0,1fr) e nao 1fr: com 1fr o nome longo empurra a coluna e as
   larguras saem desiguais. Assim cada cartao fica do tamanho de um video. */
.trilho{display:grid; gap:1rem; grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:600px){ .trilho{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .trilho{grid-template-columns:repeat(2,minmax(0,1fr))} }
.depo{margin:0; background:#fff; border:1px solid var(--linha); border-radius:var(--r); padding:1.3rem; display:flex; flex-direction:column}
.depo__estrelas{color:var(--vinho); letter-spacing:.15em; font-size:.85rem; margin-bottom:.9rem}
.depo blockquote{margin:0; font-family:var(--serif); font-size:1rem; line-height:1.5; color:var(--navy)}
/* foto + nome abrem o cartao; a citacao vem depois */
.depo figcaption{
  order:-1; margin:0 0 1.1rem; font-size:.82rem; color:var(--texto-2);
  display:flex; align-items:center; gap:.85rem;
}
.depo__foto{
  width:72px; height:72px; flex:none; object-fit:cover;
  /* forma organica: cantos irregulares, sem virar circulo */
  border-radius:64% 36% 57% 43% / 52% 62% 38% 48%;
}
.depo__quem{min-width:0; line-height:1.35}
.depo figcaption strong{display:block; color:var(--navy); font-size:.95rem; font-family:var(--sans)}

/* Depoimentos em video: gravados na vertical, exibidos em 9:16.
   Antes o CSS forcava 16/9 e recortava o retrato em paisagem. */
.videos{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2.5rem}
/* os depoimentos escritos vem logo abaixo dos videos e estavam colados */
.videos + .trilho{margin-top:2.6rem}
.video{position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:var(--navy)}
.video__botao{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
}
.video__botao:focus-visible{outline:2px solid var(--vinho); outline-offset:3px}
.video img{
  display:block; width:100%; aspect-ratio:9/16; object-fit:cover;
  transition:transform .35s, opacity .2s;
}
.video__botao:hover img{transform:scale(1.04); opacity:.85}
.video__play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.video__play span{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center}
.video__play svg{width:15px; height:15px; fill:var(--vinho); margin-left:2px}
.video__nome{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem .9rem .7rem; color:#fff; font-size:.83rem;
  background:linear-gradient(to top, rgba(15,39,69,.9), transparent);
}
/* nome e CRP dividem a linha: o nome pode quebrar, o registro nao. */
.video__nome{display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .45rem}
.video__crp{font-size:.7rem; color:rgba(255,255,255,.72); white-space:nowrap}
/* depois do clique, o iframe ocupa o mesmo quadro 9:16 */
.video iframe{display:block; width:100%; aspect-ratio:9/16; border:0}
@media (prefers-reduced-motion: reduce){
  .video img{transition:none}
  .video__botao:hover img{transform:none}
}

/* ---------- BOTAO DE LATTES ---------- */
.lattes{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .85rem; border:1px solid var(--linha); border-radius:99px;
  font-size:.8rem; font-weight:600; color:var(--navy); text-decoration:none;
  background:#fff; transition:border-color .18s, background .18s, color .18s;
}
.lattes svg{
  width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round;
}
.lattes:hover{border-color:var(--vinho); color:var(--vinho); background:#FDF2F5}
.lattes:focus-visible{outline:2px solid var(--vinho); outline-offset:2px}
.lattes--vazio{color:var(--texto-2); border-style:dashed; background:none; cursor:default}

/* ---------- CARROSSEL DO CORPO DOCENTE ---------- */
.carrossel{margin-top:1.8rem}
.carrossel__palco{display:grid; gap:1rem; grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){ .carrossel__palco{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .carrossel__palco{grid-template-columns:repeat(3,minmax(0,1fr))} }
.carrossel__palco:focus-visible{outline:2px solid var(--vinho); outline-offset:6px; border-radius:var(--r)}

/* display:flex venceria o [hidden] do navegador, e o carrossel mostraria
   todos os professores de uma vez. */
.prof[hidden]{display:none}
.prof{
  display:flex; flex-direction:column; gap:.5rem; margin:0;
  background:#fff; border:1px solid var(--linha); border-radius:var(--r);
  padding:1.3rem;
}
.prof h3{font-size:1.04rem; margin:0; color:var(--navy); line-height:1.3}
.prof__crp{
  margin:0; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vinho); font-weight:700;
}
.prof__bio{margin:0 0 .4rem; font-size:.88rem; line-height:1.6; color:var(--texto-2)}
.prof .lattes{align-self:flex-start; margin-top:auto}

.carrossel__controles{
  display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:1.4rem;
}
.carrossel__seta{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--linha); border-radius:50%; background:#fff; color:var(--navy);
  transition:border-color .18s, color .18s;
}
.carrossel__seta svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.carrossel__seta:hover{border-color:var(--vinho); color:var(--vinho)}
.carrossel__seta:focus-visible{outline:2px solid var(--vinho); outline-offset:2px}
.carrossel__contagem{
  margin:0; font-size:.8rem; color:var(--texto-2); font-variant-numeric:tabular-nums;
  min-width:7.5rem; text-align:center;
}

/* ---------- AGENDA ---------- */
.agenda{display:grid; gap:1rem}
.evento{
  display:grid; gap:.35rem 1.6rem; background:#fff;
  border:1px solid var(--linha); border-left:3px solid var(--vinho);
  border-radius:var(--r); padding:1.4rem 1.5rem; text-decoration:none;
  transition:box-shadow .2s, transform .2s;
}
.evento:hover{box-shadow:var(--sombra); transform:translateY(-2px)}
.evento__data{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--vinho)}
.evento h3{font-size:1.16rem}
.evento__meta{font-size:.9rem; color:var(--texto-2); margin:0}

/* ---------- COORDENAÇÃO ---------- */
.docentes{display:grid; gap:2rem}
.docente{display:grid; gap:1.2rem}
.docente img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
/* a foto da coordenação é panorâmica e tem duas pessoas: no recorte 4/5 do
   cartão da Denise, reenquadra no rosto dela em vez de cortar as duas ao meio */
.docente h3{font-size:1.24rem; margin-bottom:.15rem}
.docente__cargo{font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--vinho); margin:0 0 .8rem}
.docente p{font-size:.95rem; color:var(--texto-2)}
.docente a{color:var(--navy-cl)}

/* ---------- GALERIA ---------- */
.galeria{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
.galeria img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r)}

/* ---------- CREDENCIAIS ---------- */
.credenciais{display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem 2.8rem; margin-top:1.5rem}
/* Sem grayscale: IPGS, CFP e CRP ja vem tingidos de navy, entao o cinza so
   apagava. CFP e CRP sao desenhos de traco fino e sumiam a 54px. */
.credenciais img{height:68px; width:auto; object-fit:contain; opacity:.9; transition:opacity .25s}
.credenciais img:hover{opacity:1}

/* ---------- PUBLICAÇÕES ---------- */
.pubs{display:grid; gap:0}
.pub{border-top:1px solid var(--linha); padding:1.4rem 0; text-decoration:none; display:block; transition:padding-left .2s}
.pub:hover{padding-left:.6rem}
/* card de publicacao ainda sem dado real: sem afordancia de clique */
.pub--vazia{opacity:.55; cursor:default}
.pub--vazia:hover{padding-left:0}
.pub__tipo{font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vinho)}
.pub h3{font-size:1.1rem; margin:.4rem 0 .35rem}
.pub__autores{font-size:.9rem; color:var(--texto-2); font-style:italic; margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:72ch}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; position:relative; font-weight:600; font-size:1.02rem; color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:1.55rem; width:11px; height:11px;
  border-right:1.6px solid var(--vinho); border-bottom:1.6px solid var(--vinho);
  transform:rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 1rem 1.35rem 0; color:var(--texto-2); margin:0}

/* ---------- CONTATO ---------- */
.contato__grid{display:grid; gap:2.5rem}
.dado{border-top:1px solid var(--linha); padding:1.1rem 0}
.dado dt{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--texto-2)}
.dado dd{margin:.35rem 0 0; font-size:1.04rem; color:var(--navy)}
.dado a{text-decoration:none; border-bottom:1px solid var(--linha)}
.dado a:hover{border-bottom-color:var(--vinho); color:var(--vinho)}
/* Clinicas e Cursos dividem uma linha: sao dois contatos do mesmo tipo
   (WhatsApp) e empilhados ocupavam duas faixas quase vazias. Endereco e
   e-mail continuam ocupando a largura inteira. */
@media (min-width:560px){
  .dados{display:grid; grid-template-columns:1fr 1fr; column-gap:2.4rem}
  .dados > .dado{grid-column:1 / -1}
  .dados > .dado--meio{grid-column:auto}
}

.mapa{border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--azul-cl)}
.mapa iframe{width:100%; height:100%; border:0; display:block}

/* ---------- RODAPÉ ---------- */
.rodape{background:var(--navy-esc); color:#B9CBE0; padding:clamp(3rem,6vw,4.5rem) 0 7.5rem; font-size:.92rem}
.rodape__grid{display:grid; gap:2.2rem}
.rodape h4{color:#fff; font-family:var(--sans); font-size:.77rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.rodape a{text-decoration:none; opacity:.85}
.rodape a:hover{opacity:1; color:#fff}
.rodape .marca__nome{color:#fff}
.rodape .marca__desc{color:var(--azul)}
.rodape__base{margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; font-size:.83rem; opacity:.75}
.social{display:flex; gap:.8rem; margin-top:1.1rem}
.social a{width:40px; height:40px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r); display:grid; place-items:center; opacity:1}
.social a:hover{background:rgba(255,255,255,.1)}
.social svg{width:18px; height:18px; fill:currentColor}

/* ---------- BARRA FIXA MOBILE ---------- */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:grid; gap:.6rem; align-items:center;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-top:1px solid var(--linha); transform:translateY(110%); transition:transform .3s ease;
}
.barra[data-visivel="1"]{transform:none}
.barra .btn{width:100%; padding:.85rem 1rem}

/* ---------- ENVIO DO FORMULÁRIO ---------- */
.form__erro{
  margin:.35rem 0 0; font-size:.84rem; color:var(--vinho); display:none;
}
.campo[data-erro="1"] .form__erro{display:block}
.campo[data-erro="1"] input, .campo[data-erro="1"] select{border-color:var(--vinho)}
.form__status{
  margin:1rem 0 0; font-size:.92rem; line-height:1.5; display:none;
}
.form__status[data-tipo="erro"]{display:block; color:var(--vinho)}
.form__status[data-tipo="enviando"]{display:block; color:var(--texto-2)}
.form__ok{
  display:none; padding:1.4rem 0; text-align:center;
}
.form__ok h3{margin:0 0 .5rem}
.form__ok p{color:var(--texto-2); margin:0}
.form--enviado .form__ok{display:block}
.form--enviado .form__campos{display:none}
/* o mel: campo invisível que só robô preenche */
.form__mel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- REVELAÇÃO ---------- */
.rev{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rev[data-vis="1"]{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rev{opacity:1; transform:none}
  .sistema .halo{opacity:.35}
}

/* ============================================================
   BREAKPOINTS — um DOM só, fluido.
   O site atual duplica cada bloco (versão desktop + versão
   mobile no mesmo HTML). Aqui nada é duplicado.
   ============================================================ */
@media (min-width:600px){
  .portas__grid{grid-template-columns:1fr 1fr}
  .numeros__grid{grid-template-columns:repeat(4,1fr)}
  .evento{grid-template-columns:180px 1fr; align-items:baseline}
  .evento__data{grid-row:1/3}
  .rodape__grid{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(4,1fr)}
  .videos{grid-template-columns:repeat(4,1fr)}
  .docente{grid-template-columns:190px 1fr; align-items:start}
}
@media (min-width:900px){
  html{scroll-padding-top:96px}
  .logo{width:40px}
  .topo__grid{min-height:86px; gap:2.2rem}
  .nav{display:flex; gap:1.9rem; align-items:center}
  .topo .btn{display:inline-flex}
  .menu-btn,.gaveta{display:none}
  .hero__grid{grid-template-columns:1.05fr .95fr; align-items:center; gap:4rem}
  .sistema{max-width:none}
  .hero--divisao{
    grid-template-columns:1.2fr .8fr;
    min-height:clamp(500px,60vh,640px);
  }
  /* alinha o texto com o resto do site, mesmo o grid indo de borda a borda */
  .hero--divisao .hero__texto{
    padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
    padding-right:3.2rem;
  }
  .hero__foto{height:auto; max-height:none}
  .hero__foto figcaption{padding:2.6rem 1.2rem .9rem; font-size:.76rem}
  .espelho__grid{grid-template-columns:1fr 1fr; gap:4rem; align-items:start}
  .espelho__col2{margin-top:0}
  /* o mapa acompanha a altura da coluna de contatos: com align-items:start
     ele parava na propria proporcao 4/3 e sobrava um vao embaixo. */
  .contato__grid{grid-template-columns:1fr 1fr; gap:4rem; align-items:stretch}
  .contato__grid .mapa{aspect-ratio:auto; height:100%}
  .pubs{grid-template-columns:1fr 1fr; gap:0 3rem}
  .docentes{grid-template-columns:1fr 1fr; gap:3rem}
  .rodape{padding-bottom:4.5rem}
  .rodape__grid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem}
  .barra{display:none}
}

/* ============================================================
   ADIÇÕES DAS PÁGINAS INTERNAS
   ============================================================ */

/* imagem que falhou no carregamento vira bloco da marca, não ícone quebrado */
img[data-falhou="1"]{
  background:linear-gradient(135deg, var(--azul-cl), var(--azul)); min-height:120px;
  position:relative; border-radius:var(--r);
}

/* pendências de conteúdo — visíveis só no protótipo */
.todo{
  display:inline-block; background:#FDF2F5; color:var(--vinho);
  border:1px dashed var(--vinho); border-radius:2px;
  padding:.12em .5em; font-size:.82em; font-weight:600; font-family:var(--sans);
}

/* cabeçalho de página interna */
.capa{background:var(--azul-gelo); padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid var(--linha)}
.capa h1{font-size:clamp(2.1rem,5vw,3.4rem); margin-bottom:1.2rem}
.migalhas{font-size:.83rem; color:var(--texto-2); margin-bottom:1.4rem}
.migalhas a{text-decoration:none; border-bottom:1px solid var(--linha)}
.migalhas a:hover{color:var(--vinho)}
.migalhas span{opacity:.55; margin:0 .45rem}

/* AGUARDANDO FOTO NOVA — a capa da Pos esta sem imagem ate a coordenacao
   mandar uma melhor. As regras abaixo ficam prontas para quando ela chegar;
   o pos.html diz, em comentario, o que devolver na marcacao.

   Capa da Pos: a turma ao lado do texto. A foto e quadrada e fechada nas
   pessoas — o original e um retrato alto com forro, luminarias e um vao de
   chao que nao contam nada. Composicao de proposito diferente do hero da
   home (split de borda a borda), para as duas paginas nao se confundirem. */
.capa__grid{display:grid; gap:2.4rem}
.capa__cena{margin:0}
.capa__cena img{
  display:block; width:100%; height:auto;
  box-shadow:0 22px 50px -26px rgba(15,39,69,.55);
}
@media (min-width:900px){
  /* o titulo ocupa a largura inteira da secao; a divisao em duas colunas
     comeca abaixo dele, com a foto emparelhada aos topicos e aos botoes */
  /* a foto fecha exatamente na altura dos topicos + botoes: a coluna dela e
     estreita o bastante para o quadrado bater com esse bloco, e o stretch
     absorve a sobra de alguns pixels sem deformar nada */
  .capa__grid{grid-template-columns:2.6fr 1fr; gap:3.4rem; align-items:stretch}
  .capa--turma .capa__cena img{height:100%; object-fit:cover}
  .capa--turma h1{max-width:none}
}

/* Os quatro fatos da Pos, antes num paragrafo corrido. Cada um responde a
   uma duvida diferente de quem decide (reconhecimento, formato, carga,
   pratica), entao em lista eles sao lidos; em prosa, atropelam-se.
   Marcador: um tracinho vinho, nao um "check" — nao e checklist de recursos. */
.capa__pontos{list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.75rem; max-width:64ch}
.capa__pontos li{position:relative; padding-left:1.5rem; line-height:1.55; color:var(--texto)}
.capa__pontos li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:.68rem; height:2px; background:var(--vinho);
}
/* cartões genéricos */
/* cartões genéricos — continuam em uso na página de Clínicas */
.cartoes{display:grid; gap:1.1rem}
.cartao{background:#fff; border:1px solid var(--linha); border-radius:var(--r); padding:1.7rem}
.cartao h3{font-size:1.16rem; margin-bottom:.5rem}
.cartao p{color:var(--texto-2); font-size:.96rem; margin:0}
.cartao__tag{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vinho); display:block; margin-bottom:.7rem}

/* ---------- FRENTES PRÁTICAS ----------
   Seis painéis que abrem um por vez. No desktop ficam lado a lado e o mouse
   (ou o foco do teclado) decide qual cresce; no telefone empilham e a rolagem
   abre o que estiver no meio da tela. Quem muda a classe .frente--aberta é o
   JS, nos dois casos — com :hover puro o telefone ficaria sem comportamento e
   o teclado também. */
.frentes{display:grid; gap:.7rem}
.frente{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r); background:var(--navy-esc); color:#fff;
  min-width:0; min-height:210px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.3rem; cursor:default;
}
.frente__foto{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
/* a foto sozinha não sustenta texto branco: o véu escurece só o pé do quadro */
.frente::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(9,22,40,.93) 0%, rgba(9,22,40,.62) 42%, rgba(9,22,40,.18) 100%);
  transition:background .45s;
}
.frente--aberta .frente__foto{transform:scale(1.05)}
.frente--aberta::after{
  background:linear-gradient(to top, rgba(9,22,40,.95) 0%, rgba(9,22,40,.78) 55%, rgba(9,22,40,.4) 100%);
}
.frente h3{color:#fff; font-size:1.1rem; line-height:1.25; margin:0}
.frente__corpo{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.3,1), opacity .35s;
}
.frente--aberta .frente__corpo{max-height:18rem; opacity:1}
.frente__tag{
  display:block; margin:.8rem 0 .1rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--azul);
}
.frente p{margin:.3rem 0 0; font-size:.93rem; line-height:1.55; color:rgba(255,255,255,.9)}
.frente:focus-visible{outline:3px solid var(--navy); outline-offset:3px}

@media (min-width:900px){
  .frentes{display:flex; gap:.7rem; height:clamp(330px,32vw,420px)}
  .frente{
    flex:1 1 0; min-height:0; cursor:pointer;
    transition:flex-grow .55s cubic-bezier(.2,.7,.3,1);
  }
  .frente--aberta{flex-grow:3.6}
}

@media (prefers-reduced-motion: reduce){
  .frente, .frente__foto, .frente__corpo, .frente::after{transition:none}
  .frente--aberta .frente__foto{transform:none}
}

/* tabela de investimento */
.tabela{width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.96rem}
.tabela th,.tabela td{text-align:left; padding:.95rem 1rem; border-bottom:1px solid var(--linha)}
.tabela th{font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-2); font-weight:700}
.tabela td:first-child{color:var(--navy); font-weight:600}
.tabela tr:hover td{background:var(--azul-gelo)}

/* formulário */
.form{background:#fff; border:1px solid var(--linha); border-radius:var(--r); padding:clamp(1.5rem,4vw,2.4rem)}
.campo{margin-bottom:1.1rem}
.campo label{display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{
  width:100%; padding:.8rem .9rem; border:1px solid var(--linha); border-radius:var(--r);
  font:inherit; font-size:.95rem; color:var(--texto); background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--vinho); outline-offset:1px; border-color:transparent}
.form .btn{width:100%; margin-top:.5rem}
.form__nota{font-size:.8rem; color:var(--texto-2); margin:.9rem 0 0; text-align:center}

/* lista de equipe */
.equipe{display:grid; gap:1.5rem}
.pessoa{display:grid; gap:.9rem}
.pessoa img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r)}
.pessoa h3{font-size:1.05rem; margin-bottom:.1rem}
.pessoa p{font-size:.85rem; color:var(--texto-2); margin:0}

/* filtros de publicações */
/* quando cada taxa de matricula e cobrada */
.val-quando{font-size:.8rem; color:var(--texto-2); white-space:nowrap}
.lote-tag{
  display:inline-block; margin-left:.45rem; padding:.1em .5em; vertical-align:middle;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:#fff; background:var(--vinho); border-radius:99px;
}
.tabela__nota{margin:.9rem 0 0; font-size:.85rem; color:var(--texto-2); max-width:62ch}

/* aviso do lote vigente, abaixo da tabela de valores */
.lote-aviso{
  margin:1.6rem 0 0; padding:1rem 1.2rem; max-width:62ch;
  border-left:3px solid var(--vinho); background:#fff; border-radius:0 4px 4px 0;
  font-size:.95rem; line-height:1.6;
}
.lote-aviso strong{color:var(--navy)}

/* ---------- publicações: índice ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem}
.filtro span{opacity:.55; font-variant-numeric:tabular-nums; margin-left:.25rem}
.filtro[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.filtro[aria-pressed="true"] span{opacity:.7}

.busca-pub{margin-bottom:2.2rem; max-width:30rem}
.busca-pub input{
  width:100%; padding:.7rem .9rem; font:inherit; font-size:.95rem;
  border:1px solid var(--linha); border-radius:4px; background:#fff; color:var(--texto);
}
.busca-pub input:focus-visible{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}
.busca-pub__contagem{margin:.5rem 0 0; font-size:.85rem; color:var(--texto-2); min-height:1.2em}

.pubs--lista{display:block}
.pub-ano{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vinho);
  margin:2.4rem 0 .2rem; padding-bottom:.4rem; border-bottom:1px solid var(--linha);
  font-family:var(--sans); font-weight:700;
}
.pub-ano:first-child{margin-top:0}

/* ---------- publicações: página do trabalho ---------- */
.pub-capa__autoria{font-size:1rem; color:var(--texto-2)}
.pub-rotulo{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2);
  font-family:var(--sans); font-weight:700; margin:0 0 .8rem;
}
.pub-resumo{font-size:1.02rem; line-height:1.75; max-width:60ch; text-align:justify}
.selo-ia{
  margin:1.2rem 0 0; padding:.7rem .9rem; max-width:60ch;
  border-left:3px solid var(--azul); background:var(--azul-gelo);
  font-size:.85rem; line-height:1.5; color:var(--texto-2); border-radius:0 3px 3px 0;
}
.pub-grade{display:grid; gap:2.5rem; align-items:start}
@media (min-width:900px){ .pub-grade{grid-template-columns:1.6fr .9fr; gap:4rem} }
.pub-ficha{margin:0; padding:1.4rem 1.5rem; background:var(--azul-gelo); border-radius:5px}

.pdf-visor{margin-top:3rem; display:none}
.pdf-visor object{width:100%; height:min(80vh,900px); border:1px solid var(--linha); border-radius:5px}
.pdf-visor__alt{padding:2rem; text-align:center; color:var(--texto-2)}
@media (min-width:900px){ .pdf-visor{display:block} }

.filtro{
  padding:.5rem 1.05rem; border:1px solid var(--linha); border-radius:100px; background:#fff;
  font-size:.87rem; font-weight:600; color:var(--texto-2); cursor:pointer; transition:all .18s;
}
.filtro:hover{border-color:var(--azul); color:var(--navy)}
.filtro[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}

/* texto longo */
/* A medida de linha é do parágrafo, não do bloco: com max-width no .prosa
   inteiro o h2 herdava a largura do texto corrido e quebrava cedo demais,
   o mesmo problema que o .secao__cabeca tinha. */
.prosa{max-width:none}
.prosa > p, .prosa > ul{max-width:none}
.prosa > h2, .prosa > h3{text-wrap:balance}
.prosa h3{margin:2.2rem 0 .7rem}
.prosa ul{padding-left:1.2rem; color:var(--texto-2)}
.prosa li{margin-bottom:.5rem}

@media (min-width:600px){
  .cartoes{grid-template-columns:repeat(2,1fr)}
  .equipe{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .cartoes{grid-template-columns:repeat(3,1fr)}
  .equipe{grid-template-columns:repeat(5,1fr)}
  .capa .lead{max-width:56ch}
}

/* ícone dos cartões de atividade — vocabulário do logo */
.cartao__icone{width:38px; height:38px; display:block; margin-bottom:1rem; color:var(--navy)}
.cartao:hover .cartao__icone{color:var(--vinho)}

/* imagem larga de apoio */
/* fundadoras: a foto das duas juntas à esquerda, as biografias à direita */
.fundadoras{display:grid; gap:2rem}
.fundadoras__foto{margin:0}
.fundadoras__foto img{
  display:block; width:100%; height:auto; border-radius:var(--r);
  box-shadow:0 18px 40px -22px rgba(15,39,69,.55);
}
.fundadoras__texto{display:grid; gap:2rem; align-content:center}
.fundadoras__texto h3{margin:0 0 .3rem}
.fundadoras__texto p{margin:0 0 .6rem; color:var(--texto-2); font-size:.97rem}
@media (min-width:860px){
  .fundadoras{grid-template-columns:.52fr 1fr; gap:3.2rem; align-items:center}
}

/* ---------- CAPA COM FOTO DE FUNDO (Sobre nós) ----------
   Diferente do véu que tiramos do hero da home: lá o degradê cobria a foto
   inteira e apagava a cena. Aqui ele é horizontal e só escurece a metade
   esquerda — cortina e parede, onde não há ninguém. As fundadoras ficam na
   direita, limpas. object-position empurra a foto para a direita para
   garantir isso em qualquer largura. */
.capa--foto{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-esc); color:#fff;
  display:flex; align-items:center;
  min-height:clamp(400px,48vw,560px);
  padding:clamp(2.6rem,6vw,4.4rem) 0; border-bottom:0;
}
.capa__fundo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:84% center;
}
.capa--foto::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(9,22,40,.95) 0%, rgba(9,22,40,.88) 28%,
    rgba(9,22,40,.42) 46%, rgba(9,22,40,.08) 64%, rgba(9,22,40,0) 82%);
}
.capa--foto h1{color:#fff; max-width:19ch}
.capa--foto .lead{color:#CBDAEC; max-width:42ch}
.capa--foto .migalhas{color:rgba(255,255,255,.72)}
.capa--foto .migalhas a{color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.3)}
.capa--foto .migalhas a:hover{color:#fff}

/* no telefone não há "metade vazia" onde o texto possa ficar sem cobrir os
   rostos. Em vez de deixar a foto como textura sob um véu quase opaco — que
   não mostra a cena nem ajuda a ler —, ela simplesmente sai: fica o navy. */
@media (max-width:760px){
  .capa__fundo{display:none}
  .capa--foto::after{display:none}
  .capa--foto{min-height:0}
  .capa--foto h1, .capa--foto .lead{max-width:none}
}

/* na capa a figura fecha o bloco, então a margem vai para cima */
.capa .figura-larga{margin:clamp(1.8rem,4vw,2.8rem) 0 0}
.figura-larga{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r); margin-bottom:2.2rem}
@media (max-width:600px){ .figura-larga{aspect-ratio:16/10} }

/* lockup no header e rodapé */
.marca__lockup{height:34px; width:auto; display:block}
@media (min-width:900px){ .marca__lockup{height:42px} }