@charset "utf-8";
/* ==========================================================================
   FAESB — sistema de design
   Identidade extraída do site anterior; variantes ajustadas para contraste AA.
   ========================================================================== */

/* --- Fontes auto-hospedadas (variáveis: um arquivo cobre 100-900) --------- */
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fontes/Roboto-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fontes/Roboto-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fontes/Montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fontes/Montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* marca */
  --marinho:#0C2544;        /* cor institucional dominante */
  --marinho-escuro:#061323;
  --azul-escuro:#15437C;
  --azul:#046EA4;           /* 5.57:1 em branco — AA */
  --azul-claro:#E8F1F7;
  --verde:#39B54A;          /* verde da marca: decorativo ou com texto marinho */
  --verde-forte:#277C33;    /* 5.23:1 com texto branco — AA */
  --verde-claro:#EAF6EC;

  /* neutros */
  --preto:#141A21;
  --texto:#333333;          /* 12.63:1 — AAA */
  --texto-suave:#5A6672;
  --borda:#DFE5EB;
  --fundo:#FFFFFF;
  --fundo-alt:#F5F7F9;

  /* tipografia */
  --fonte:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fonte-titulo:'Montserrat','Roboto',system-ui,sans-serif;

  /* escala fluida */
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem;
  --t-lg:clamp(1.125rem,.3vw + 1.05rem,1.25rem);
  --t-xl:clamp(1.375rem,.8vw + 1.2rem,1.75rem);
  --t-2xl:clamp(1.75rem,1.6vw + 1.4rem,2.5rem);
  --t-3xl:clamp(2.125rem,2.8vw + 1.5rem,3.25rem);

  /* ritmo */
  --gap:1rem; --gap-lg:2rem;
  --secao-y:clamp(2.5rem,5vw,4.5rem);
  --max:1200px; --max-texto:70ch;
  /* três raios apenas: marca de texto, controle, caixa */
  --raio-xs:4px; --raio-sm:8px; --raio:14px;
  /* sombras em duas camadas: um contorno curto que define a borda e um halo
     largo e claro que dá a profundidade */
  --sombra:0 1px 2px rgba(12,37,68,.05), 0 6px 20px -6px rgba(12,37,68,.14);
  --sombra-media:0 2px 4px rgba(12,37,68,.05), 0 12px 32px -10px rgba(12,37,68,.20);
  --sombra-forte:0 4px 8px rgba(12,37,68,.07), 0 24px 56px -16px rgba(12,37,68,.28);
  --topo:86px;              /* altura do cabeçalho fixo */
}

/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 1rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--fonte);font-size:var(--t-base);line-height:1.65;
  color:var(--texto);background:var(--fundo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,picture,video,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--fonte-titulo);color:var(--marinho);line-height:1.2;
  margin:0 0 .6em;text-wrap:balance;font-weight:600}
h1{font-size:var(--t-3xl);letter-spacing:-.02em}
h2{font-size:var(--t-2xl);letter-spacing:-.01em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p,ul,ol{margin:0 0 1.15em}
p{text-wrap:pretty}
a{color:var(--azul);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--azul-escuro)}
strong,b{font-weight:700;color:var(--marinho)}
hr{border:0;border-top:1px solid var(--borda);margin:var(--gap-lg) 0}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:var(--raio-xs)}

/* --- Utilitários de layout ------------------------------------------------ */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.secao{padding-block:var(--secao-y)}
.secao--alt{background:var(--fundo-alt)}
.secao--marinho{background:var(--marinho);color:#E6ECF3}
.secao--marinho h2,.secao--marinho h3{color:#fff}
.secao--marinho a{color:#8FD0F0}
.prosa{max-width:var(--max-texto);margin-inline:auto}
.prosa :where(h2,h3){margin-top:1.8em}
.grade{display:grid;gap:clamp(1rem,2.5vw,1.75rem)}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grade--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.centro{text-align:center}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Pular para o conteúdo ------------------------------------------------ */
.pular{position:absolute;left:50%;translate:-50% -140%;z-index:999;
  background:var(--marinho);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--raio) var(--raio);
  font-weight:500;text-decoration:none;transition:translate .15s}
.pular:focus{translate:-50% 0;color:#fff}

/* --- Botões --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;border-radius:var(--raio-sm);border:2px solid transparent;
  font:inherit;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s,transform .1s;min-height:44px}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--verde-forte);color:#fff}
.btn--primario:hover{background:#1F6429;color:#fff}
.btn--marinho{background:var(--marinho);color:#fff}
.btn--marinho:hover{background:var(--azul-escuro);color:#fff}
.btn--contorno{border-color:currentColor;color:var(--marinho);background:transparent}
.btn--contorno:hover{background:var(--marinho);color:#fff;border-color:var(--marinho)}
.btn--claro{background:#fff;color:var(--marinho)}
.btn--claro:hover{background:var(--azul-claro);color:var(--marinho)}

/* --- Cabeçalho ------------------------------------------------------------ */
.cabecalho{position:sticky;top:0;z-index:100;background:var(--marinho);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.cabecalho__barra{display:flex;align-items:center;gap:var(--gap);min-height:var(--topo);
  padding-block:.4rem}
.cabecalho__logo{display:flex;align-items:center;gap:.7rem;flex:0 0 auto;
  text-decoration:none;color:#fff;padding-block:.5rem}
.cabecalho__logo img{height:clamp(46px,5.2vw,70px);width:auto}
.cabecalho__nome{display:none;font-family:var(--fonte-titulo);font-weight:700;
  font-size:1.05rem;line-height:1.1}
.cabecalho__nome small{display:block;font-family:var(--fonte);font-weight:400;
  font-size:.7rem;opacity:.8;letter-spacing:.02em}
@media (min-width:380px){.cabecalho__nome{display:block}}
.cabecalho__acoes{margin-left:auto;display:flex;align-items:center;gap:.5rem}

/* --- Navegação ------------------------------------------------------------ */
.nav{margin-left:auto}
.nav__lista{list-style:none;margin:0;padding:0;display:flex;gap:.15rem}
.nav__link{display:flex;align-items:center;gap:.3rem;padding:.65rem .8rem;border-radius:var(--raio-sm);
  color:#E6ECF3;text-decoration:none;font-size:var(--t-sm);font-weight:500;white-space:nowrap;
  background:none;border:0;font-family:inherit;cursor:pointer;min-height:44px}
.nav__link:hover,.nav__link[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff}
.nav__link[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--verde)}
.nav__seta{width:.6em;height:.6em;flex:0 0 auto;transition:rotate .15s}
.nav__link[aria-expanded="true"] .nav__seta{rotate:180deg}
.nav__item{position:relative}
.nav__sub{list-style:none;margin:0;padding:.4rem;position:absolute;top:calc(100% + .3rem);left:0;
  min-width:260px;background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-forte);
  border:1px solid var(--borda)}
/* O painel fica .3rem abaixo do botão. Sem esta ponte invisível, o ponteiro
   atravessa o vão a caminho do submenu, dispara o mouseleave do item e o
   painel fecha antes de a pessoa chegar nele. */
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-.45rem;height:.45rem}
/* Submenu que estouraria a borda direita da tela é ancorado pela direita. */
.nav__sub--direita{left:auto;right:0}
.nav__sub a{display:block;padding:.6rem .8rem;border-radius:var(--raio-sm);color:var(--texto);
  text-decoration:none;font-size:var(--t-sm)}
.nav__sub a:hover{background:var(--azul-claro);color:var(--marinho)}
.nav__sub a[aria-current="page"]{background:var(--azul-claro);color:var(--marinho);font-weight:500}
.nav__alternar{display:none}

/* navegação em telas estreitas */
@media (max-width:1100px){
  /* o .nav vira painel fixo no celular e deixa de ocupar espaço na barra,
     então é o próprio botão que precisa ser empurrado para a direita */
  .nav__alternar{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;
    color:#fff;font:inherit;font-size:var(--t-sm);font-weight:500;padding:.6rem .7rem;
    border-radius:var(--raio-sm);cursor:pointer;min-height:44px;
    margin-left:auto;order:2}
  .nav__alternar:hover{background:rgba(255,255,255,.12)}
  .nav{position:fixed;inset:var(--topo) 0 0 auto;width:min(94vw,400px);background:var(--marinho);
    overflow-y:auto;padding:1rem;margin:0;border-left:1px solid rgba(255,255,255,.12);
    translate:100% 0;transition:translate .2s ease;box-shadow:var(--sombra-forte)}
  .nav[data-aberto="true"]{translate:0 0}
  .nav__lista{flex-direction:column;gap:.1rem}
  .nav__link{width:100%;justify-content:space-between;font-size:var(--t-base)}
  .nav__sub{position:static;min-width:0;background:rgba(255,255,255,.06);box-shadow:none;
    border:0;margin:.15rem 0 .4rem .6rem;padding:.2rem}
  .nav__sub a{color:#D8E2EC}
  .nav__sub a:hover{background:rgba(255,255,255,.12);color:#fff}
  .nav__sub a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
  .nav__sub[hidden]{display:none}
}
@media (min-width:1101px){
  .nav__sub[hidden]{display:none}
}

/* --- Topo de página ------------------------------------------------------- */
.topo-pagina{background:var(--marinho);color:#fff;padding-block:clamp(2rem,4vw,3.25rem)}
.topo-pagina h1{color:#fff;margin-bottom:.3em}
.topo-pagina p{color:#C8D4E2;max-width:60ch;margin:0;font-size:var(--t-lg)}
.migalhas{font-size:var(--t-sm);margin-bottom:.9rem}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin:0;padding:0}
.migalhas a{color:#A9C4DD}
.migalhas li+li::before{content:"›";margin-right:.5rem;color:#6E86A0}
.migalhas [aria-current="page"]{color:#fff}

/* --- Cartões -------------------------------------------------------------- */
.cartao{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);
  transition:box-shadow .25s ease,transform .25s ease}
.cartao:hover{box-shadow:var(--sombra-media);transform:translateY(-3px)}
.cartao__midia{aspect-ratio:16/10;background:var(--azul-claro);overflow:hidden}
.cartao__midia img{width:100%;height:100%;object-fit:cover}
.cartao__corpo{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cartao__corpo h3{margin:0;font-size:var(--t-lg)}
.cartao__corpo p{margin:0;font-size:var(--t-sm);color:var(--texto-suave)}
.cartao__rodape{margin-top:auto;padding-top:.5rem}
.cartao a::after{content:"";position:absolute;inset:0}
.cartao{position:relative}

/* etiqueta de ato regulatório */
.etiqueta{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-xs);
  font-weight:500;padding:.25rem .6rem;border-radius:100px;
  background:var(--verde-claro);color:#1F6429;border:1px solid #BEE3C4}
.etiqueta--azul{background:var(--azul-claro);color:var(--azul-escuro);border-color:#C3DCEC}
.etiqueta--neutra{background:var(--fundo-alt);color:var(--texto-suave);border-color:var(--borda)}

/* --- Ficha técnica de curso ----------------------------------------------- */
.ficha{display:grid;gap:0;border:1px solid var(--borda);border-radius:var(--raio);
  overflow:hidden;background:#fff;margin-block:var(--gap-lg)}
.ficha__item{display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:1rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--borda)}
.ficha__item:last-child{border-bottom:0}
.ficha__item:nth-child(odd){background:var(--fundo-alt)}
.ficha__rotulo{font-weight:500;color:var(--marinho);font-size:var(--t-sm)}
.ficha__valor{margin:0}
@media (max-width:560px){
  .ficha__item{grid-template-columns:1fr;gap:.2rem}
}

/* --- Acordeão ------------------------------------------------------------- */
.acordeao{border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;background:#fff}
.acordeao+.acordeao{margin-top:.6rem}
.acordeao summary{padding:1rem 1.25rem;cursor:pointer;font-weight:500;color:var(--marinho);
  font-family:var(--fonte-titulo);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;min-height:44px}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--azul);flex:0 0 auto}
.acordeao[open] summary::after{content:"−"}
.acordeao summary:hover{background:var(--fundo-alt)}
.acordeao__corpo{padding:0 1.25rem 1.25rem}

/* --- Lista de documentos -------------------------------------------------- */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.doc{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.15rem;background:#fff;
  border:1px solid var(--borda);border-radius:var(--raio);transition:border-color .15s,box-shadow .15s}
.doc:hover{border-color:var(--azul);box-shadow:var(--sombra)}
.doc__icone{flex:0 0 auto;width:22px;height:22px;color:var(--azul);margin-top:.15rem}
.doc__texto{flex:1;min-width:0}
.doc__titulo{font-weight:500;color:var(--marinho);text-decoration:none;display:block}
.doc__titulo:hover{text-decoration:underline}
.doc__meta{font-size:var(--t-xs);color:var(--texto-suave);margin:.15rem 0 0}

/* --- Aviso / caixa de destaque -------------------------------------------- */
.aviso{border-left:4px solid var(--azul);background:var(--azul-claro);
  padding:1.1rem 1.35rem;border-radius:0 var(--raio-sm) var(--raio-sm) 0;margin-block:1.5rem}
.aviso>:last-child{margin-bottom:0}
.aviso--verde{border-left-color:var(--verde-forte);background:var(--verde-claro)}

/* --- Rodapé --------------------------------------------------------------- */
.rodape{background:var(--marinho-escuro);color:#B9C6D4;padding-block:var(--secao-y) 0;
  font-size:var(--t-sm);margin-top:var(--secao-y)}
.rodape h2,.rodape h3{color:#fff;font-size:var(--t-xl);margin-bottom:.7em;
  font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.rodape a{color:#B9C6D4;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.rodape__marca img{height:72px;margin-bottom:1rem}
.rodape__contato{display:grid;gap:.45rem;font-style:normal}
.rodape__base{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--gap-lg);
  padding-block:1.35rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;justify-content:space-between;font-size:var(--t-xs)}
.rodape__redes{display:flex;gap:.5rem}
.rodape__redes a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff}
.rodape__redes a:hover{background:var(--azul)}
.rodape__redes svg{width:19px;height:19px}

/* --- Impressão ------------------------------------------------------------ */
@media print{
  .cabecalho,.nav,.rodape__redes,.pular,.btn{display:none!important}
  body{color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}

/* --- Capa da página inicial ----------------------------------------------- */
.capa{background:linear-gradient(135deg,var(--marinho) 0%,var(--azul-escuro) 100%);
  color:#fff;position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(57,181,74,.18),transparent 65%);pointer-events:none}
.capa__interno{position:relative;z-index:1;padding-block:clamp(3rem,9vw,6.5rem)}
.capa__texto{max-width:46rem}
.capa__olho{font-size:var(--t-sm);font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--verde);margin:0 0 .75rem}
.capa h1{color:#fff;font-size:var(--t-3xl);margin-bottom:.4em}
.capa__chamada{font-size:var(--t-lg);color:#C8D4E2;max-width:48ch;margin-bottom:0}
.capa__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}

/* --- Tabelas -------------------------------------------------------------- */
.prosa table,.acordeao__corpo table{width:100%;border-collapse:collapse;margin-block:1.5rem;
  font-size:var(--t-sm);background:#fff;border:1px solid var(--borda);border-radius:var(--raio)}
.prosa th,.prosa td,.acordeao__corpo th,.acordeao__corpo td{
  padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--borda);vertical-align:top}
.prosa thead th,.acordeao__corpo thead th{background:var(--marinho);color:#fff;
  font-weight:500;font-family:var(--fonte);letter-spacing:.02em}
.prosa tbody tr:last-child td,.acordeao__corpo tbody tr:last-child td{border-bottom:0}
.prosa tbody tr:nth-child(even),.acordeao__corpo tbody tr:nth-child(even){background:var(--fundo-alt)}
/* tabela larga rola sozinha em vez de empurrar a página */
.prosa>table,.acordeao__corpo>table{display:block;overflow-x:auto;white-space:normal}
@media (min-width:640px){.prosa>table,.acordeao__corpo>table{display:table}}

/* listas dentro da prosa */
.prosa ul,.prosa ol,.acordeao__corpo ul,.acordeao__corpo ol{padding-left:1.4rem}
.prosa li+li,.acordeao__corpo li+li{margin-top:.35rem}

/* Seções claras consecutivas não somam espaçamento: o de baixo abre o respiro. */
.secao:not(.secao--alt):not(.secao--marinho) + .secao:not(.secao--alt):not(.secao--marinho){
  padding-top:0}
/* Bloco de aviso logo após texto não precisa de respiro extra. */
.secao + .secao > .container > .prosa > .aviso:first-child{margin-top:0}

/* --- Galeria de fotos ----------------------------------------------------- */
.galeria{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.galeria li{margin:0;border-radius:var(--raio);overflow:hidden;background:var(--fundo-alt);
  border:1px solid var(--borda)}
.galeria img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .3s}
.galeria li:hover img{transform:scale(1.04)}

/* Coluna única de leitura: título e conteúdo compartilham o mesmo eixo. */
.coluna{max-width:var(--max-texto);margin-inline:auto}

/* --- Formulários ---------------------------------------------------------- */
.formulario{margin-top:1.5rem}
.formulario__linha{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.campo-f{margin:0 0 1.1rem;display:block}
.campo-f label{display:block;font-weight:500;font-size:var(--t-sm);
  margin-bottom:.3rem;color:var(--marinho)}
.campo-f input,.campo-f textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--borda);
  border-radius:var(--raio-sm);font:inherit;font-size:var(--t-base);background:#fff;
  color:var(--texto);min-height:46px}
.campo-f textarea{min-height:140px;resize:vertical}
.campo-f input:focus,.campo-f textarea:focus{border-color:var(--azul)}
.campo-f input:invalid:not(:placeholder-shown){border-color:#B02A2A}
/* armadilha para robôs: fora da tela, nunca focável por quem navega */
.campo-armadilha{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==== Partes compartilhadas por todas as páginas ==== */
/* --- Barra superior ------------------------------------------------------- */
.barra-topo{background:var(--marinho-escuro);color:#C6D3E1;font-size:var(--t-xs)}
.barra-topo__interno{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;
  align-items:center;justify-content:flex-end;min-height:38px;padding-block:.35rem}
.barra-topo a{color:#C6D3E1;text-decoration:none;display:inline-flex;align-items:center;
  gap:.4rem;padding:.25rem 0}
.barra-topo a:hover{color:#fff;text-decoration:underline}
.barra-topo svg{width:14px;height:14px;flex:0 0 auto}


/* --- Rodapé em quatro colunas --------------------------------------------- */
.rodape__grade{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
/* O iframe é item flex e tem largura intrínseca de 300 px; com min-width:auto
   ele se recusa a encolher e transborda para a coluna vizinha. Posicionamento
   absoluto dentro de uma caixa com proporção resolve de vez. */
.rodape__mapa{position:relative;border-radius:var(--raio);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#1A2B40}
.rodape__mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.rodape__emec{display:flex;gap:.85rem;align-items:center;margin-top:1.25rem}
.rodape__emec img{width:74px;height:auto;border-radius:var(--raio-xs);background:#fff;padding:3px}
.rodape__emec p{margin:0;font-size:var(--t-xs);line-height:1.5}
.rodape__links a{display:flex;align-items:center;gap:.55rem}
.rodape__links svg{width:12px;height:12px;color:var(--verde);flex:0 0 auto}


/* ==== Etapa 2 — celular ==================================================== */

/* B1: a barra superior guarda só o telefone em tela estreita; os outros dois
   atalhos passam a viver dentro do menu. */
@media (max-width:700px){
  /* precisa casar a especificidade de ".barra-topo a", senão o display:none
     desta regra perde para o display:inline-flex daquela */
  .barra-topo a.barra-topo__extra{display:none}
  .barra-topo__interno{justify-content:center;min-height:34px}
}
/* os atalhos do painel só existem enquanto o menu é lateral */
.nav__lista--atalhos{display:none}
@media (max-width:1100px){
  .nav__lista--atalhos{display:grid;margin-top:.75rem;padding-top:.75rem;
    border-top:1px solid rgba(255,255,255,.14)}
  .nav__lista--atalhos .nav__link{color:#AFC2D6;font-size:var(--t-sm)}
}

/* B5: grupo que contém a página aberta fica marcado */
.nav__link--secao{color:#fff}
@media (min-width:1101px){
  .nav__link--secao{box-shadow:inset 0 -3px 0 rgba(57,181,74,.55)}
}
@media (max-width:1100px){
  .nav__link--secao{background:rgba(255,255,255,.08)}
}

/* B2: barra de ação fixa, só no celular ---------------------------------- */
.acoes-celular{display:none}
@media (max-width:760px){
  .acoes-celular{position:fixed;left:0;right:0;bottom:0;z-index:95;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;
    background:rgba(12,37,68,.18);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(100%);transition:transform .22s ease;
    box-shadow:0 -2px 6px rgba(6,19,35,.08), 0 -12px 28px -8px rgba(6,19,35,.24)}
  .acoes-celular[data-visivel="sim"]{transform:translateY(0)}
  /* sem JS para controlá-la, a barra não entra: o atributo hidden tem de valer
     mesmo com o display:grid declarado acima */
  .acoes-celular[hidden]{display:none}

  .acoes-celular__btn{display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:54px;padding:.6rem 1rem;text-decoration:none;font-weight:600;
    font-size:var(--t-sm);font-family:var(--fonte)}
  .acoes-celular__btn svg{width:19px;height:19px;flex:0 0 auto}
  .acoes-celular__btn--principal{background:var(--verde-forte);color:#fff}
  .acoes-celular__btn--principal:active{background:#1F6429}
  .acoes-celular__btn--zap{background:var(--marinho);color:#fff}
  .acoes-celular__btn--zap:active{background:var(--azul-escuro)}

  /* o respiro vai dentro do rodapé: no body deixaria uma faixa branca
     embaixo do marinho */
  .rodape{padding-bottom:calc(54px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .acoes-celular{transition:none}
}

/* ==== Etapa 3 — proporção reservada e acabamento ========================== */

/* C5: o espaço da imagem já é reservado pelos atributos width/height somados
   ao "height:auto" do reset lá em cima — que tem especificidade baixa de
   propósito, para qualquer regra de componente poder fixar a altura.
   Um seletor de atributo aqui venceria essas regras e esticaria o logo. */

/* Enquanto a imagem não chega, o lugar dela não fica em branco cru. */
.cartao__midia,.curso-card__capa,.dupla__figura img,.trilha img,.galeria li{
  background-color:var(--azul-claro)}

/* C2: controles ganham a mesma transição suave dos cartões */
.btn{transition:background-color .18s ease,color .18s ease,
     border-color .18s ease,box-shadow .18s ease,transform .1s ease}
.btn--primario,.btn--marinho{box-shadow:var(--sombra)}
.btn--primario:hover,.btn--marinho:hover{box-shadow:var(--sombra-media)}

/* C1: a lista de documentos acompanha o raio das caixas */
.doc:hover{border-color:var(--azul);box-shadow:var(--sombra-media)}

/* ==== Etapa 5 — acabamento ================================================ */

/* C3: a entrada só existe quando o JS confirma que pode animar. Sem a classe
   em <html>, nada fica escondido — importante para quem navega sem script e
   para os buscadores. */
.com-entrada :is(.secao,.destaques,.pilares,.ficha){
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease-out,transform .5s ease-out}
.com-entrada :is(.secao,.destaques,.pilares,.ficha).entrou{
  opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .com-entrada :is(.secao,.destaques,.pilares,.ficha){
    opacity:1;transform:none;transition:none}
}
/* Na impressão não há rolagem para disparar a entrada: o que estivesse abaixo
   da dobra sairia em branco no papel. */
@media print{
  .com-entrada :is(.secao,.destaques,.pilares,.ficha){
    opacity:1!important;transform:none!important;transition:none!important}
}

/* C4: mais distância entre título e corpo, e corpo um pouco menor no celular,
   onde a linha é curta. */
:root{
  --t-2xl:clamp(1.85rem,2vw + 1.3rem,2.9rem);
  --t-3xl:clamp(2.25rem,3.4vw + 1.5rem,3.6rem);
}
@media (max-width:600px){
  :root{--t-base:1rem}
}
h2{letter-spacing:-.015em}

/* ==== Rodapé: ajustes para o formato do original ========================== */

/* O mapa do original era alto e quase quadrado. Numa caixa mais estreita o
   Google recorta a vista e o pino sai de quadro. */
.rodape__mapa{aspect-ratio:4/5;max-width:360px}
@media (max-width:919px){
  .rodape__mapa{aspect-ratio:16/11;max-width:none}
}
.rodape__endereco{font-style:normal;margin-top:.9rem;line-height:1.6;font-size:var(--t-sm)}

/* contatos logo abaixo do formulário, com ícone — era onde estavam no original */
.rodape__contatos{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.1rem}
.rodape__contatos a{display:flex;align-items:center;gap:.65rem;padding:.42rem 0;
  text-decoration:none;font-size:var(--t-sm)}
.rodape__contatos svg{width:19px;height:19px;flex:0 0 auto;color:var(--verde)}
.rodape__contatos small{color:#8EA0B4;font-size:var(--t-xs);margin-left:.1rem}

/* as setas dos links voltam a ter peso */
.rodape__links a{gap:.6rem;padding:.42rem 0;font-size:var(--t-sm)}
.rodape__links svg{width:14px;height:14px;color:var(--verde)}

/* selo do e-MEC com a chamada em destaque, como no original */
.rodape__emec{display:flex;gap:.9rem;align-items:center;margin-top:1.4rem;
  text-decoration:none;max-width:22rem}
.rodape__emec img{width:86px;height:auto;border-radius:var(--raio-xs);
  background:#fff;padding:3px;flex:0 0 auto}
.rodape__emec span{font-size:var(--t-sm);font-weight:600;line-height:1.45;color:#fff}
.rodape__emec:hover span{text-decoration:underline}

.rodape__marca img{height:76px;width:auto;margin-bottom:1rem}
.rodape__redes{margin:0 0 .25rem}

/* --- Figura larga (organograma, diagramas) ------------------------------- */
.figura{margin:1.75rem 0 0;text-align:center}
.figura img{width:100%;max-width:1100px;margin-inline:auto;border-radius:var(--raio);
  border:1px solid var(--borda);background:#fff;box-shadow:var(--sombra)}
.figura figcaption{margin-top:.75rem;font-size:var(--t-sm);color:var(--texto-suave)}
/* num diagrama largo, encolher demais torna o texto ilegível: rola de lado */
@media (max-width:760px){
  .figura{overflow-x:auto;margin-inline:calc(-1 * clamp(1rem,4vw,2rem));
    padding-inline:clamp(1rem,4vw,2rem)}
  .figura img{max-width:none;width:860px}
  .figura figcaption{width:100%;position:sticky;left:0}
}

/* ==== Organograma ========================================================= */
/* Árvore em listas aninhadas. Os traços são bordas de pseudoelementos: nada de
   imagem, e o conjunto continua sendo uma hierarquia para quem usa leitor de
   tela. */

/* O diagrama é mais largo que a coluna de texto: sai do container e se centra
   na tela, até um teto. Preso aos 1200 px do container, ele transbordava por
   algumas dezenas de pixels justamente nas telas grandes. */
.organo{margin-top:2rem;overflow-x:auto;padding-bottom:.5rem;
  position:relative;left:50%;translate:-50% 0;
  width:min(100vw - 2rem, 1320px);
  padding-inline:1rem}
.organo__nivel{list-style:none;margin:0;padding:0;display:flex;justify-content:center;
  gap:0}
/* O respiro entre irmãos vem de padding, não de gap: com gap, a barra que liga
   os irmãos é interrompida no vão e a linha aparece quebrada. */
.organo__ramo{position:relative;display:flex;flex-direction:column;align-items:center;
  padding-top:1.35rem;padding-inline:clamp(.25rem,.6vw,.5rem)}
.organo__nivel--raiz > .organo__ramo{padding-top:0}

.organo__caixa + .organo__nivel{position:relative;padding-top:1.35rem}
.organo__caixa + .organo__nivel::before{content:"";position:absolute;top:0;left:50%;
  translate:-50% 0;width:2px;height:1.35rem;background:var(--borda)}

/* traço que sobe de cada filho e a barra que liga os irmãos */
.organo__ramo::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:2px;height:1.35rem;background:var(--borda)}
.organo__nivel--raiz > .organo__ramo::before{display:none}
.organo__ramo::after{content:"";position:absolute;top:0;height:2px;background:var(--borda)}
.organo__ramo:not(:first-child):not(:last-child)::after{left:0;right:0}
.organo__ramo:first-child:not(:last-child)::after{left:50%;right:0}
.organo__ramo:last-child:not(:first-child)::after{left:0;right:50%}
.organo__ramo:only-child::after{display:none}

/* caixas */
.organo__caixa{background:#fff;border:1.5px solid var(--borda);border-radius:var(--raio-sm);
  /* largura fixa: com vw a árvore cresce junto com a tela, mas o container
     para em 1200 px, e aí ela passava a transbordar justamente nas telas
     grandes, onde havia espaço de sobra */
  padding:.5rem .7rem;min-width:126px;text-align:center;
  box-shadow:var(--sombra);transition:box-shadow .2s ease,transform .2s ease}
.organo__caixa strong{display:block;font-family:var(--fonte-titulo);font-weight:600;
  font-size:var(--t-xs);color:var(--marinho);line-height:1.25;letter-spacing:-.01em}
.organo__caixa small{display:block;margin-top:.15rem;font-size:.72rem;
  color:var(--texto-suave);line-height:1.3}
.organo__caixa a{text-decoration:none;color:inherit;display:block}
.organo__caixa:has(a):hover{box-shadow:var(--sombra-media);transform:translateY(-2px);
  border-color:var(--azul)}

.organo__caixa--topo{background:var(--marinho);border-color:var(--marinho);
  padding:.7rem 1.3rem}
.organo__caixa--topo strong{color:#fff;font-size:var(--t-sm)}
.organo__caixa--curso{background:var(--azul-escuro);border-color:var(--azul-escuro)}
.organo__caixa--curso strong{color:#fff}
.organo__caixa--destaque{background:var(--verde-claro);border-color:#BEE3C4}
.organo__caixa--destaque strong{color:#1F6429}

/* agrupamentos explicativos do rodapé do diagrama */
.organo__notas{display:grid;gap:1rem;margin-top:2.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.organo__nota{background:var(--fundo-alt);border:1px solid var(--borda);
  border-radius:var(--raio);padding:1.1rem 1.25rem}
.organo__nota h3{margin:0 0 .3rem;font-size:var(--t-sm);text-transform:uppercase;
  letter-spacing:.05em;font-family:var(--fonte);color:var(--texto-suave)}
.organo__nota p{margin:0;font-size:var(--t-sm);color:var(--marinho);font-weight:500}
.organo__pdf{margin-top:2rem}

/* No celular a árvore vira lista recuada, com trilho à esquerda: espremer um
   diagrama largo em 390 px deixa tudo ilegível. */
@media (max-width:720px){
  .organo{overflow:visible}
  .organo__nivel{flex-direction:column;align-items:stretch;gap:.5rem}
  .organo__ramo{align-items:stretch;padding-top:0}
  .organo__ramo::before,.organo__ramo::after{display:none}
  .organo__caixa{text-align:left;min-width:0}
  .organo__ramo{padding-inline:0}
  .organo__caixa + .organo__nivel{padding-top:.5rem;padding-left:1.25rem;
    margin-left:.75rem;border-left:2px solid var(--borda)}
  .organo__caixa + .organo__nivel::before{display:none}
}

/* Identificação jurídica no pé do rodapé: mantenedora, CNPJ e ato de
   credenciamento. É o bloco que avaliadores e candidatos procuram. */
.rodape__juridico{margin:var(--gap-lg) 0 0;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);font-size:var(--t-xs);
  line-height:1.6;color:#9FB2C6}
.rodape__juridico + .rodape__base{border-top:0;margin-top:.35rem;padding-top:.6rem}