/* ============================================================
   CENATEC — estilo de TODO o site
   Construído sobre o design system do CENATEC (v1), publicado
   pelo Wagner em 24/10/2026. Cores, tipografia, espaçamento,
   raios e regras vêm de lá; nada aqui foi inventado.

   O design system mede para arte de 1080 px (rede social). Para
   web, as PROPORÇÕES da escala foram mantidas e ancoradas num
   corpo de 17 px, que é o tamanho de leitura confortável em tela.
   Os ratios do sistema (corpo = 1): título de capa 2,63 ·
   título interno 2,19 · subtítulo 1,25 · item de lista 1,06 ·
   botão 1,06 · pílula 0,81 · rótulo 0,78 · rodapé 0,81.

   Ordem:
     1. Tokens e temas    6. Topo das páginas internas
     2. Base              7. Blocos de conteúdo
     3. Tipografia        8. Blog
     4. Componentes       9. Chamada final e rodapé
     5. Cabeçalho        10. Flutuantes, animação, impressão
   ============================================================ */


/* ============ 1. TOKENS E TEMAS ============ */
:root{
  /* --- paleta, exatamente como no design system --- */
  --marinho:#031b4e;           /* cor da marca: cruz e nome do logotipo */
  --azul-royal:#0d3da4;        /* centro do degradê e card no tema marinho */
  --azul-cenatec:#004aad;      /* rótulo e ícone no tema claro */
  --celeste:#c1e4ff;           /* destaque e rótulo sobre marinho */
  --vermelho-cenatec:#ba1418;  /* vermelho do logotipo */
  --vermelho-vivo:#e60000;     /* destaque no tema marinho */
  --gelo:#f3f5f9;              /* base clara */
  --cinza-texto:#4b5671;       /* apoio sobre gelo e branco */
  --azul-acinzentado:#b9c6e0;  /* apoio sobre marinho e azul royal */
  --linha:#dde2ec;             /* divisória sobre gelo e branco */
  --branco:#fff;
  --veu-foto:rgba(3,27,78,.88);

  /* --- tipografia --- */
  --display:Bitter,Georgia,serif;
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;

  /* --- raios --- */
  --raio-pilula:999px;
  --raio-botao:24px;
  --raio-card:28px;
  --raio-marcacao:16px;

  /* --- sem sombra em nada: a profundidade vem do contraste --- */
  --sombra-nenhuma:none;

  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);
  --alt-hdr:96px;

  /* Valores padrão dos tokens de tema, iguais aos do tema claro.
     Sem isto, qualquer componente fora de uma seção com tema (o botão
     do cabeçalho, por exemplo) fica com `background:var(--destaque)`
     apontando para nada — e some. */
  --fundo:var(--gelo);
  --texto:var(--marinho);
  --texto-apoio:var(--cinza-texto);
  --destaque:var(--vermelho-cenatec);
  --sobre-destaque:var(--branco);
  --destaque-texto:var(--vermelho-cenatec);
  --apoio-azul:var(--azul-cenatec);
  --card:var(--branco);
  --divisoria:var(--linha);
}
@media(max-width:1080px){ :root{ --alt-hdr:80px } }

/* --- tema claro: conteúdo, matéria, informação --- */
.tema-claro{
  --fundo:var(--gelo);
  --texto:var(--marinho);
  --texto-apoio:var(--cinza-texto);
  --destaque:var(--vermelho-cenatec);
  --sobre-destaque:var(--branco);
  --destaque-texto:var(--vermelho-cenatec);
  --apoio-azul:var(--azul-cenatec);
  --card:var(--branco);
  --divisoria:var(--linha);
  background:var(--fundo);color:var(--texto);
}
/* o branco é a outra superfície clara do sistema (é o `card` do tema claro);
   os contrastes do tema claro são declarados sobre gelo E sobre branco */
.tema-claro.em-branco{--fundo:var(--branco);--card:var(--gelo)}

/* --- tema marinho: matrícula, oferta, posicionamento --- */
.tema-marinho{
  --fundo:var(--marinho);
  --texto:var(--branco);
  --texto-apoio:var(--azul-acinzentado);
  --destaque:var(--vermelho-vivo);
  --sobre-destaque:var(--branco);
  --destaque-texto:var(--celeste);
  --apoio-azul:var(--celeste);
  --card:var(--azul-royal);
  --divisoria:rgba(255,255,255,.22);
  background:var(--fundo);color:var(--texto);
}
/* degradê radial dos stories, o único fundo trabalhado que o sistema prevê */
.tema-marinho.com-degrade{
  background:radial-gradient(circle at 50% 42%,var(--azul-royal) 0%,var(--marinho) 78%);
}


/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--gelo);color:var(--marinho);
  font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.5;
  overflow-x:hidden;
}
body.sem-rolagem{overflow:hidden}
/* height:auto é obrigatório: com max-width e os atributos width/height no
   HTML, sem ele o navegador mantém a altura do atributo e estica a imagem.
   Foi o que esticou o logotipo do rodapé. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--destaque);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
main,[id]{scroll-margin-top:calc(var(--alt-hdr) + 14px)}

.pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--marinho);color:var(--branco);padding:14px 20px;
  border-radius:0 0 var(--raio-marcacao) 0;
  font-weight:700;font-size:.9rem;text-decoration:none;
}
.pular:focus{left:0}

.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ============ 3. TIPOGRAFIA ============ */
/* Bitter ExtraBold nos títulos, em caixa alta e baixa.
   Caixa alta SÓ no rótulo — regra do sistema. */
.titulo{
  font-family:var(--display);font-weight:800;
  letter-spacing:-.01em;line-height:1.1;margin:0;
  text-wrap:balance;
}
.titulo--capa{font-size:clamp(2rem,4.2vw,2.625rem);line-height:1.06}
.titulo--interno{font-size:clamp(1.6rem,3.2vw,2.1875rem)}
.titulo--bloco{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.12}

/* a palavra em destaque: Bitter Bold Itálico, uma por título */
.titulo em,.titulo .dq{
  font-style:italic;font-weight:700;color:var(--destaque-texto);
}

/* rótulo: o chapéu em maiúsculas, em apoio-azul, sem ornamento */
.rotulo{
  font-family:var(--sans);font-weight:700;font-size:.78125rem;
  line-height:1.2;letter-spacing:.12em;text-transform:uppercase;
  color:var(--apoio-azul);margin:0 0 14px;
}
.rotulo--centro{text-align:center}

.subtitulo{
  font-weight:500;font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.3;
  color:var(--texto-apoio);
}
.corpo{font-size:1rem;line-height:1.5;color:var(--texto-apoio)}

section{padding-block:clamp(56px,7vw,96px)}
.secao-cola{padding-top:clamp(6px,1.4vw,18px)}

.sec-head{max-width:720px;margin-bottom:clamp(34px,4.5vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
/* :not(.rotulo) em todas estas: a regra de parágrafo é mais específica
   que .rotulo e pintava o rótulo de cinza de corpo em vez do azul de apoio */
.sec-head p:not(.rotulo){color:var(--texto-apoio);margin:16px 0 0}


/* ============ 4. COMPONENTES DO SISTEMA ============ */

/* ---- BotaoCTA: destaque com texto branco, retângulo arredondado ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--sans);font-weight:700;font-size:1.0625rem;line-height:1.2;
  padding:17px 30px;border-radius:var(--raio-botao);
  border:2px solid transparent;box-shadow:var(--sombra-nenhuma);
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .18s,background .18s,color .18s,border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.btn--destaque{background:var(--destaque);color:var(--sobre-destaque)}
.btn--destaque:hover{filter:brightness(.92)}
/* contorno: no claro em marinho, no marinho em branco */
.btn--contorno{border-color:var(--texto);color:var(--texto);background:transparent}
.btn--contorno:hover{background:var(--texto);color:var(--fundo)}
.btn--block{width:100%}

/* ---- Pilula e Tarja: destaque, cantos totalmente arredondados ---- */
.pilula,.tarja{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:var(--raio-pilula);
  background:var(--destaque);color:var(--sobre-destaque);
  font-weight:700;font-size:.8125rem;line-height:1.2;
}
.tarja{
  text-transform:uppercase;letter-spacing:.12em;font-size:.78125rem;
}

/* ---- ListaItens: check de traço 2.2 em apoio-azul, fio entre os itens ---- */
.lista{list-style:none;padding:0;margin:0;border-top:1px solid var(--divisoria)}
.lista li{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--divisoria);
  font-size:1.0625rem;line-height:1.3;
}
.lista svg{
  width:24px;height:24px;flex:none;margin-top:1px;
  fill:none;stroke:var(--apoio-azul);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- card: branco no claro, azul royal no marinho. Sem sombra. ---- */
.card{
  background:var(--card);border-radius:var(--raio-card);
  padding:clamp(26px,3.4vw,38px);box-shadow:var(--sombra-nenhuma);
}

/* ---- MarcacaoFoto ---- */
.marcacao{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:var(--raio-marcacao);
  background:rgba(3,12,32,.6);color:var(--branco);
  font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}


/* ============ 5. CABEÇALHO ============ */
.hdr{
  position:sticky;top:0;z-index:60;background:var(--branco);
  border-bottom:1px solid var(--linha);
}
.hdr__in{display:flex;align-items:center;gap:22px;min-height:var(--alt-hdr)}
.hdr__logo{flex:none}
.hdr__logo img{height:58px;width:auto}
.hdr__nav{display:flex;gap:20px;margin-left:auto;align-items:center}
/* o :not(.btn) é necessário: sem ele esta regra é mais específica que
   .btn--destaque e pinta o texto do botão de marinho sobre o vermelho */
.hdr__nav a:not(.btn){
  text-decoration:none;font-weight:700;font-size:.86rem;color:var(--marinho);
  padding:6px 0;border-bottom:2px solid transparent;transition:border-color .18s;
  white-space:nowrap;
}
.hdr__nav a:not(.btn):hover{border-bottom-color:var(--vermelho-cenatec)}
.hdr__nav a:not(.btn)[aria-current="page"]{border-bottom-color:var(--vermelho-cenatec)}
.hdr .btn{padding:13px 22px;font-size:.9rem;flex:none}

.hdr__btn-menu{
  display:none;margin-left:auto;flex:none;
  width:46px;height:46px;border-radius:var(--raio-marcacao);padding:0;
  background:var(--marinho);border:0;cursor:pointer;place-items:center;
}
.hdr__btn-menu:hover{background:var(--azul-royal)}
.hdr__btn-menu span{
  display:block;width:20px;height:2px;background:var(--branco);border-radius:2px;
  position:relative;transition:transform .22s,background .22s;
}
.hdr__btn-menu span::before,
.hdr__btn-menu span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--branco);border-radius:2px;transition:transform .22s,top .22s;
}
.hdr__btn-menu span::before{top:-6px}
.hdr__btn-menu span::after{top:6px}
.hdr__btn-menu[aria-expanded="true"] span{background:transparent}
.hdr__btn-menu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hdr__btn-menu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:1080px){
  .hdr__logo img{height:48px}
  .hdr .btn{display:none}
  .hdr__btn-menu{display:grid}

  /* Painel do menu em position:absolute de propósito: ancorado no .hdr,
     que é sticky e fica colado no topo, dá o mesmo efeito de um fixed
     sem depender de qual elemento é o bloco de contenção. */
  .hdr__nav{
    position:absolute;top:100%;left:0;right:0;z-index:59;
    height:calc(100vh - var(--alt-hdr));
    height:calc(100dvh - var(--alt-hdr));
    display:block;margin:0;overflow-y:auto;overscroll-behavior:contain;
    background:var(--marinho);
    padding:10px var(--pad) 40px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s,transform .22s,visibility .22s;
  }
  .hdr__nav.is-on{opacity:1;visibility:visible;transform:none}
  .hdr__nav a:not(.btn){
    display:block;color:var(--branco);font-size:1.06rem;font-weight:700;
    padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.22);
    white-space:normal;
  }
  .hdr__nav a:not(.btn):hover{border-bottom-color:rgba(255,255,255,.22);color:var(--celeste)}
  /* a página atual é marcada por um filete, não pela cor do texto:
     o vermelho vivo sobre marinho fica abaixo do mínimo para este corpo */
  .hdr__nav a:not(.btn)[aria-current="page"]{
    color:var(--branco);border-bottom-color:rgba(255,255,255,.22);
    position:relative;padding-left:15px;
  }
  .hdr__nav a:not(.btn)[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:22px;border-radius:2px;background:var(--vermelho-vivo);
  }
  .hdr__nav .btn{
    display:inline-flex;width:100%;margin-top:26px;
    padding:17px 26px;font-size:1rem;
    background:var(--vermelho-vivo);color:var(--branco);border-color:transparent;
  }
}


/* ============ 6. TOPO DAS PÁGINAS INTERNAS ============ */
.ptopo{position:relative;overflow:hidden;padding-block:clamp(38px,5.5vw,76px)}
.ptopo__in{position:relative;z-index:2}
.ptopo .titulo{margin-bottom:16px;max-width:19ch}
.ptopo__sub{max-width:56ch;margin:0}

.ptopo--post .ptopo__in{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4.5vw,56px);align-items:center;
}
.ptopo--post .titulo{max-width:none}
@media(max-width:900px){.ptopo--post .ptopo__in{grid-template-columns:1fr}}


/* ---- fundo de foto ou de vídeo numa faixa do tema marinho ----
   O que decide a legibilidade é o peso da mídia sobre o marinho.
   A faixa é marinho CHAPADO, e por isso basta UMA opacidade: compor
   `opacidade x mídia + (1 - opacidade) x marinho` dá exatamente o mesmo
   resultado que mídia mais véu por cima, com um número a menos para errar.
   (A chamada final ainda usa opacidade + véu porque ali o fundo é o
   degradê, e o véu também precisa abaixar o degradê.)
   O 0,38 foi medido arquivo por arquivo, na faixa onde o texto fica, nos
   pixels MAIS CLAROS de todos os quadros — é o pior caso, não a média:
     vídeo da aula ....... branco 5,6:1 no p99 · 4,6:1 no p99,9
     vídeo da mesa ....... branco 6,0:1 no p99 · 4,7:1 no p99,9
     foto das turmas ..... branco 4,8:1 no p99 · 4,7:1 no p99,9
   Trocou a foto ou o vídeo, refaça a conta com o calibrar.py. */
.com-midia{position:relative;overflow:hidden;isolation:isolate}
/* Todo vídeo de fundo tem uma FOTO atrás, um quadro dele. O vídeo começa
   invisível e só aparece quando começa a tocar de verdade; enquanto isso,
   e para sempre se ele nunca tocar, quem aparece é a foto.
   É o que salva o celular em modo de economia, os dados cortados, o
   autoplay recusado e o navegador sem JavaScript — casos em que um vídeo
   sozinho deixaria no lugar dele um retângulo vazio, às vezes com a barra
   de controle do navegador por cima.

   A opacidade fica no INVÓLUCRO, nunca em cada peça. Com a foto e o vídeo
   a 0,38 cada um, os dois somados dariam 0,62 de mídia sobre o marinho —
   quase o dobro do medido — e o texto cairia para 2:1. Aqui foto e vídeo
   ficam opacos, compõem entre si, e só o conjunto recebe o 0,38. */
.com-midia__fundo{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  opacity:.38;
}
.com-midia__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;
}
.com-midia__fundo .com-midia__filme{opacity:0;transition:opacity .5s ease}
.com-midia__fundo .com-midia__filme.is-tocando{opacity:1}
.com-midia>.wrap{position:relative;z-index:2}
/* sobre foto ou vídeo o design system manda o texto em `branco`: o celeste
   do rótulo e o azul-acinzentado de apoio caem para 3,4:1 nesses pixels */
.com-midia{--texto-apoio:var(--branco);--apoio-azul:var(--branco)}
/* o card é opaco: dentro dele valem de novo as cores do tema marinho */
.com-midia .hubcard{
  --texto-apoio:var(--azul-acinzentado);--apoio-azul:var(--celeste);
  --destaque-texto:var(--celeste);
}
/* ---- a mesma mídia no celular ----
   Desktop e celular pedem recortes diferentes da MESMA foto. Numa faixa
   larga e baixa o `cover` mostra o miolo da imagem e fica bom; numa tela
   de 390 px a mesma regra ampliaria tudo três, quatro vezes para preencher
   a altura, e sobraria uma tira vertical em que não dá para reconhecer
   nada — nem o laboratório, nem as pessoas, nem as ferramentas.
   No celular, então, a mídia deita no topo da faixa INTEIRA, na largura
   toda, e o texto desce para baixo dela. A caixa recebe a razão do próprio
   arquivo (--midia-razao, que o gerador escreve em cada página), e por
   isso não há corte nenhum. A borda de baixo desaparece num esmaecimento
   para o marinho, para não virar um corte reto no meio da faixa.

   Os dois limites são diferentes de propósito. A faixa do topo das páginas
   internas continua larga e baixa até uns 760 px, e ali o `cover` mostra a
   imagem bem. Já a seção "Por onde começar" tem seis cards: abaixo de
   1000 px eles caem para duas colunas ou uma, a seção dobra de altura e o
   vídeo passaria a ser ampliado quatro vezes para preencher — por isso ela
   vira tira num limite muito mais alto. */
@media(max-width:1000px){
  section.com-midia>.com-midia__fundo{
    bottom:auto;height:calc(100vw / var(--midia-razao,1.78));
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
  }
  /* o texto começa 34 px antes do fim da tira, dentro do esmaecimento */
  section.com-midia{padding-top:calc(100vw / var(--midia-razao,1.78) - 34px)}
}
@media(max-width:760px){
  .ptopo.com-midia>.com-midia__fundo{
    bottom:auto;height:calc(100vw / var(--midia-razao,1.78));
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
  }
  .ptopo.com-midia{padding-top:calc(100vw / var(--midia-razao,1.78) - 34px)}
}


/* ---- cena: fundo de foto com um elemento ANCORADO nela ----
   Um `object-fit:cover` recorta a foto, mas não deixa rastro de onde
   cada parte dela foi parar: uma marcação posta por cima em
   porcentagem escorrega conforme a tela muda de largura.
   Aqui a .cena__caixa recebe a MESMA geometria que o cover daria, só
   que como caixa de verdade — e então qualquer coisa posicionada em
   porcentagem dentro dela cai sempre no mesmo ponto da foto, em
   qualquer tela. A caixa é alinhada pelo TOPO porque é lá que está o
   rosto; o que sobra de foto é cortado embaixo.
   As unidades cq são de 2023. Onde não houver, valem as duas linhas de
   reserva logo acima: a foto continua cobrindo, só a interrogação é que
   pode cair fora do lugar. */
.cena{
  position:absolute;inset:0;overflow:hidden;z-index:0;
  pointer-events:none;container-type:size;
}
.cena__caixa{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100%;height:100%;
  width:100cqw;height:calc(100cqw * 9 / 16);
  min-width:calc(100cqh * 16 / 9);min-height:100cqh;
}
/* no celular a foto deita inteira no topo, como as outras: sem o min-*,
   a caixa passa a valer a largura da tela e a altura que a razão pede.
   As interrogações continuam presas a ela, e por isso não saem do lugar. */
@media(max-width:760px){
  .cena__caixa{
    min-width:0;min-height:0;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
  }
  .ptopo--cena{padding-top:calc(100vw / var(--midia-razao,1.78) - 34px)}
}
/* A opacidade fica na CAIXA, não na foto: assim as marcações entram na
   mesma camada da imagem e recebem o mesmo 0,38. Elas ficam parte da cena,
   e não um desenho por cima dela.
   Efeito colateral bom: onde uma marcação cai, o fundo fica em celeste a
   38% sobre marinho — mais escuro que os pixels claros da foto. O texto
   branco ali fica em 5,7:1, acima dos 4,5:1 exigidos. Ou seja, a marcação
   nunca piora a leitura, em lugar nenhum da faixa. */
.cena__caixa{opacity:.38}
.cena__caixa>img{width:100%;height:100%;object-fit:cover;border:0}
.cena__marca{
  position:absolute;
  font-family:var(--display);font-weight:800;font-style:italic;line-height:1;
  color:var(--celeste);
  animation:boiar 7s ease-in-out infinite;
}
/* o repouso é o ponto MAIS ALTO, e a marcação desce e volta: assim ela
   nunca sai pela borda de cima da faixa, por mais baixa que a faixa fique */
@keyframes boiar{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(15px) rotate(5deg)}
}
/* As três interrogações da página de dúvidas. O left e o top são medidos
   SOBRE A FOTO, contando do canto superior esquerdo dela — por isso ficam
   no mesmo ponto em qualquer largura de tela. Cada uma tem seu tempo e seu
   atraso, para não boiarem todas juntas, que entregaria o truque. */
.cena__marca--a{left:61.5%;top:4%;font-size:clamp(3.2rem,6.5vw,5.5rem)}
.cena__marca--b{
  left:50.5%;top:.5%;font-size:clamp(2.1rem,4.2vw,3.5rem);
  animation-duration:9s;animation-delay:-3s;
}
.cena__marca--c{
  left:35%;top:13%;font-size:clamp(1.6rem,3.2vw,2.7rem);
  animation-duration:11s;animation-delay:-6s;
}
.ptopo--cena{padding-block:clamp(44px,6vw,92px)}

.crumbs{font-size:.8rem;margin:0 0 16px;color:var(--texto-apoio)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:8px;opacity:.5}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--divisoria)}
.crumbs a:hover{border-bottom-color:var(--apoio-azul)}


/* ============ 7. BLOCOS DE CONTEÚDO ============ */

/* ---- HERO ---- */
.hero{position:relative;overflow:hidden;padding-block:clamp(42px,6vw,80px)}

/* ---- slider da hero: texto e foto mudam juntos ---- */
.heroslide{position:relative;z-index:2}
/* slides empilhados na MESMA célula: o bloco fica com a altura do maior
   e não pula ao trocar de slide */
.heroslide__track{list-style:none;margin:0;padding:0;display:grid}
.heroslide__slide{
  grid-area:1/1;
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(30px,5vw,64px);align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .55s ease,visibility .55s;
}
.heroslide__slide.is-active{opacity:1;visibility:visible}
@media(max-width:900px){.heroslide__slide{grid-template-columns:1fr}}

.heroslide__texto .subtitulo{margin:0 0 26px;max-width:50ch}
.heroslide__cta{display:flex;flex-wrap:wrap;gap:12px}

/* moldura da foto: sem sombra e sem filete colorido na lateral */
.heroslide__foto{margin:0;position:relative}
.moldura{
  position:relative;aspect-ratio:4/5;border-radius:var(--raio-card);
  overflow:hidden;background:var(--marinho);
  box-shadow:var(--sombra-nenhuma);
}
.moldura img{width:100%;height:100%;object-fit:cover}
/* véu da foto, como o sistema define: transparente até 45%, depois veu-foto */
.moldura__legenda{
  position:absolute;left:0;right:0;bottom:0;margin:0;z-index:2;
  padding:46% 22px 20px;color:var(--branco);
  font-size:.86rem;font-weight:700;line-height:1.3;
  display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(3,27,78,0) 0%,rgba(3,27,78,0) 45%,var(--veu-foto) 100%);
}

.heroslide__ctrl{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3.5vw,40px)}
.heroslide__nav,.heroslide__pausa{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);   /* 3,63:1 sobre marinho */
  background:rgba(255,255,255,.08);color:var(--branco);
  cursor:pointer;padding:0;flex:none;display:grid;place-items:center;
  transition:background .18s,border-color .18s,transform .18s;
}
.heroslide__nav:hover,.heroslide__pausa:hover{
  background:var(--destaque);border-color:var(--destaque);transform:scale(1.06);
}
.heroslide__nav svg{width:17px;height:17px}
.heroslide__pausa svg{width:15px;height:15px}
.heroslide__pausa{margin-left:6px}

.heroslide__dots{display:flex;gap:8px}
.heroslide__dot{
  width:34px;height:5px;border-radius:var(--raio-pilula);border:0;padding:0;
  cursor:pointer;background:rgba(255,255,255,.4);transition:background .2s;
}
/* a bolinha ativa é branca, não vermelha: sobre o degradê o vermelho vivo
   cai para 3,0:1 no ponto mais claro, e isso depende de onde a barra
   para na tela. Branco dá 9,5:1 em qualquer ponto do degradê, e o
   sistema reserva o vermelho para pílula, tarja e botão. */
.heroslide__dot[aria-current="true"]{background:var(--branco)}
.heroslide__dot:hover{background:rgba(255,255,255,.68)}
@media(max-width:520px){.heroslide__ctrl{gap:10px}.heroslide__dot{width:26px}}

/* ---- faixa de oferta: Tarja, nunca fundo vermelho chapado ---- */
.faixa{padding-block:26px}
.faixa__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;text-align:center}
/* :not(.tarja) de novo por especificidade: sem ele esta regra pinta o
   texto da tarja de cinza sobre o vermelho (1,1:1, praticamente invisível) */
.faixa span:not(.tarja):not(.ponto){font-size:.95rem;font-weight:500;color:var(--texto-apoio)}
.faixa .ponto{width:5px;height:5px;border-radius:50%;background:var(--divisoria)}
@media(max-width:640px){.faixa .ponto{display:none}}

/* ---- atalhos da home ---- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:20px}
.hubcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--divisoria);
  border-radius:var(--raio-card);padding:30px 28px 28px;
  box-shadow:var(--sombra-nenhuma);
  transition:transform .2s,border-color .2s;
}
.hubcard:hover{transform:translateY(-4px);border-color:var(--apoio-azul)}
.hubcard__n{
  font-family:var(--display);font-weight:800;font-size:.95rem;
  letter-spacing:.02em;color:var(--apoio-azul);display:block;margin-bottom:12px;
}
.hubcard .titulo{margin:0 0 10px}
.hubcard .titulo a{text-decoration:none}
.hubcard .titulo a::after{content:"";position:absolute;inset:0}
.hubcard p{margin:0 0 20px;font-size:.97rem;line-height:1.45;color:var(--texto-apoio)}
.hubcard__ir{
  margin-top:auto;font-size:.78125rem;font-weight:700;color:var(--destaque-texto);
  text-transform:uppercase;letter-spacing:.12em;display:inline-flex;align-items:center;gap:8px;
}
.hubcard__ir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hubcard:hover .hubcard__ir svg{transform:translateX(3px)}

/* ---- formulário ---- */
.apply__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:860px){.apply__in{grid-template-columns:1fr}}
.form-card{
  background:var(--card);border:1px solid var(--divisoria);
  border-radius:var(--raio-card);padding:clamp(24px,3vw,34px);
  box-shadow:var(--sombra-nenhuma);
}
.form-card .titulo{margin:0 0 6px}
.form-card__nota{font-size:.9rem;color:var(--texto-apoio);margin:0 0 22px}
.campo{margin-bottom:15px}
.campo label{
  display:block;font-size:.78125rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:7px;color:var(--apoio-azul);
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px 15px;border:1px solid var(--linha);
  border-radius:var(--raio-marcacao);
  font-family:var(--sans);font-weight:500;font-size:1rem;
  background:var(--branco);color:var(--marinho);
}
.campo textarea{resize:vertical;min-height:84px;line-height:1.45}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--azul-cenatec);outline:none;
  box-shadow:0 0 0 3px rgba(0,74,173,.18);
}
/* O hidden tem de valer sempre: um campo escondido que ainda fosse
   `required` travaria o envio sem mostrar erro nenhum — o navegador tenta
   focar um campo que não está na tela e desiste calado. Por isso o
   required desses dois campos é posto e tirado pelo script, nunca no HTML. */
[hidden]{display:none!important}
/* os dois campos que só aparecem para quem vem de outra instituição */
.campo--extra{
  animation:surgir .28s ease both;
  border-left:3px solid var(--apoio-azul);padding-left:14px;margin-left:-17px;
}
@keyframes surgir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.apply__caso .lista{margin-top:18px}
.apply__caso .lista li{padding:10px 0;font-size:.95rem}

/* ---- grid de horas ---- */
.horas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.hora{
  background:var(--card);border-radius:var(--raio-card);
  padding:30px 28px;border-top:4px solid var(--apoio-azul);
  box-shadow:var(--sombra-nenhuma);
}
.hora--destaque{border-top-color:var(--destaque)}
.hora .n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.3rem,4.4vw,3rem);line-height:1;letter-spacing:-.02em;
  color:var(--texto);display:block;
}
.hora--destaque .n{color:var(--destaque-texto)}
.hora .t{font-weight:700;font-size:1rem;margin:12px 0 6px;display:block}
.hora p{margin:0;font-size:.95rem;line-height:1.45;color:var(--texto-apoio)}

/* ---- a trilha dos módulos ---- */
.track{position:relative;overflow:hidden}
.track__stage{position:relative;margin-top:20px}
/* O traçado é um monitor cardíaco de verdade: a linha fica SEMPRE cheia,
   e o que anda é um VÃO que vai apagando na frente, em laço. É assim que
   um monitor se comporta — e é a diferença entre isto e um desenho que se
   escreve e some de uma vez.
   São dois caminhos iguais dentro do mesmo grupo: o traçado vermelho e,
   por cima, um apagador da cor do fundo. Os dois ficam DENTRO do grupo
   que leva o brilho, e não fora: assim o apagador tira a linha antes do
   desfoque e o brilho some junto. Apagador por fora deixaria um rastro de
   brilho no meio do vão.
   O brilho é um filtro de SVG (feGaussianBlur), não uma sombra de CSS. O
   design system proíbe sombra em card, botão e foto — isto aqui é o neon
   do próprio desenho, não uma sombra de profundidade.
   O --len é o comprimento do traçado, medido pelo script; o 1898 de
   reserva é o valor real deste desenho, para o caso de o script falhar. */
.bolt{width:100%;height:auto;display:block;overflow:visible}
.bolt path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* fino, porque neon grosso vira borrão */
.bolt .bolt__rastro{stroke:var(--destaque);stroke-width:3.4}
/* o apagador é da cor do fundo da faixa: onde ele passa, a linha some */
.bolt .bolt__apagador{stroke:var(--marinho);stroke-width:26;display:none}
.com-js .bolt .bolt__apagador{
  display:block;
  stroke-dasharray:var(--vao,228) calc(var(--len,1898) - var(--vao,228));
  stroke-dashoffset:var(--len,1898);
}
.track.is-on .bolt__apagador{animation:varrer var(--ciclo,3.6s) linear infinite}
/* fora da tela a varredura fica parada: não há por que repintar à toa */
.track:not(.track--visivel) .bolt path{animation-play-state:paused}
@keyframes varrer{
  from{stroke-dashoffset:var(--len,1898)}
  to{stroke-dashoffset:0}
}
/* quem pediu menos movimento vê o traçado inteiro, parado */
@media(prefers-reduced-motion:reduce){
  .bolt .bolt__apagador{display:none}
}
@media(max-width:820px){
  .track__stage .bolt .bolt__rastro{stroke-width:4}
  .track__stage .bolt .bolt__apagador{stroke-width:28}
}

.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-6px;position:relative;z-index:2}
@media(max-width:1080px){.mods{grid-template-columns:repeat(2,1fr);gap:20px}}
.mod{
  background:var(--card);border-radius:var(--raio-card);padding:28px 26px;
  box-shadow:var(--sombra-nenhuma);
}
.com-js .mod{opacity:0;transform:translateY(22px)}
.track.is-on .mod{animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.track.is-on .mod:nth-child(1){animation-delay:.45s}
.track.is-on .mod:nth-child(2){animation-delay:.8s}
.track.is-on .mod:nth-child(3){animation-delay:1.15s}
.track.is-on .mod:nth-child(4){animation-delay:1.5s}
@keyframes rise{to{opacity:1;transform:none}}
.mod__n{
  font-family:var(--sans);font-weight:700;font-size:.78125rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--apoio-azul);display:block;margin-bottom:12px;
}
.mod .titulo{margin:0 0 10px}
.mod p{margin:0;font-size:.97rem;line-height:1.45;color:var(--texto-apoio)}
.mod .lista{margin-top:16px;border-top-color:var(--divisoria)}
.mod .lista li{font-size:.92rem;padding:11px 0;gap:12px}
.mod .lista svg{width:19px;height:19px}
@media(max-width:820px){
  .mods{grid-template-columns:1fr;margin-top:26px}
  .track__stage .bolt{height:70px}
}

/* ---- certificações ---- */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
.cert{
  background:var(--card);border:1px solid var(--divisoria);
  border-radius:var(--raio-card);padding:28px 26px;
  box-shadow:var(--sombra-nenhuma);
  transition:transform .2s,border-color .2s;
}
.cert:hover{transform:translateY(-4px);border-color:var(--apoio-azul)}
.cert .titulo{margin:0 0 10px}
.cert p:not(.rotulo){margin:0;font-size:.95rem;line-height:1.45;color:var(--texto-apoio)}
.certs-nota{
  margin-top:26px;padding:20px 24px;
  background:var(--card);border-radius:var(--raio-card);
  font-size:.95rem;line-height:1.5;color:var(--texto-apoio);
}

/* ---- laboratório ---- */
.lab__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:860px){.lab__in{grid-template-columns:1fr}}
.lab__video{
  position:relative;border-radius:var(--raio-card);overflow:hidden;
  background:var(--marinho);max-width:340px;margin-inline:auto;
  box-shadow:var(--sombra-nenhuma);
}
/* a foto e o vídeo ocupam a mesma célula; o vídeo entra por cima quando
   começa a tocar, e some o problema do retângulo vazio com barra de
   controle quando ele não toca */
.lab__video{display:grid}
.lab__video>img,.lab__video>video{
  grid-area:1/1;display:block;width:100%;height:auto;
  aspect-ratio:9/16;object-fit:cover;background:var(--marinho);
}
.lab__video>video{opacity:0;transition:opacity .5s ease}
.lab__video>video.is-tocando{opacity:1}
.painel{
  background:var(--card);border-radius:var(--raio-card);
  padding:clamp(28px,4vw,42px);box-shadow:var(--sombra-nenhuma);
}
.painel .titulo{margin:0 0 14px}
.painel p{margin:0;font-size:.97rem;line-height:1.5;color:var(--texto-apoio)}

/* ---- local ---- */
.place__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media(max-width:820px){.place__in{grid-template-columns:1fr}}
.addr{font-style:normal;font-size:1.0625rem;line-height:1.6;margin:0 0 22px}
.addr strong{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.12;letter-spacing:-.01em;
  color:var(--texto);margin-bottom:10px;
}
.mapa{
  border-radius:var(--raio-card);overflow:hidden;border:1px solid var(--divisoria);
  aspect-ratio:4/3;background:var(--card);
}
.mapa iframe{width:100%;height:100%;border:0;display:block}

/* ---- dúvidas ---- */
.acc{border-top:1px solid var(--divisoria);max-width:880px}
.acc--centro{margin-inline:auto}
.acc details{border-bottom:1px solid var(--divisoria)}
.acc summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-weight:700;font-size:1.0625rem;line-height:1.3;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--apoio-azul);border-bottom:2px solid var(--apoio-azul);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s;
}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc .a{padding:0 44px 24px 0;margin:0;color:var(--texto-apoio);font-size:1rem;line-height:1.5}
.acc .a a{color:var(--texto);border-bottom:1px solid var(--divisoria);text-decoration:none}
.acc .a a:hover{border-bottom-color:var(--apoio-azul)}

/* ---- caixa de destaque ---- */
.caixa{
  background:var(--card);border-radius:var(--raio-card);
  padding:26px 28px;margin:32px 0 0;box-shadow:var(--sombra-nenhuma);
}
.caixa .titulo{margin:0 0 12px}
.caixa p{margin:0;font-size:.97rem;line-height:1.5;color:var(--texto-apoio)}
.caixa p + p{margin-top:12px}

.duas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
@media(max-width:860px){.duas{grid-template-columns:1fr}}

/* ---- próxima página ---- */
.adiante{padding-block:clamp(38px,5vw,60px)}
.adiante__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px}
.adiante .rotulo{margin:0}
.adiante .titulo{margin:8px 0 0}


/* ============ 8. BLOG ============ */
.post{padding-block:clamp(44px,6vw,78px)}
.post__in{max-width:760px;margin-inline:auto}

.pmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:22px 0 0;font-size:.8125rem;font-weight:700;color:var(--texto-apoio);
}
.pmeta .ponto{width:5px;height:5px;border-radius:50%;background:var(--destaque);flex:none}

.pfoto{
  position:relative;border-radius:var(--raio-card);overflow:hidden;
  max-width:360px;margin-inline:auto;width:100%;
  background:var(--marinho);box-shadow:var(--sombra-nenhuma);
}
.pfoto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pfoto figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:46% 18px 15px;color:var(--branco);
  font-size:.8125rem;font-weight:700;line-height:1.3;
  display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(3,27,78,0) 0%,rgba(3,27,78,0) 45%,var(--veu-foto) 100%);
}

.prose{font-size:1.0625rem;line-height:1.65}
.prose > p{margin:0 0 20px}
.prose h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.45rem,2.8vw,1.9rem);line-height:1.1;letter-spacing:-.01em;
  margin:44px 0 16px;color:var(--texto);
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-weight:700;font-size:1.1rem;margin:30px 0 10px;color:var(--texto)}
.prose strong{font-weight:700;color:var(--texto)}
/* idem: sem o :not(.btn), o link do texto sobrescreve a cor do botão */
.prose a:not(.btn){
  color:var(--destaque-texto);text-decoration:none;
  border-bottom:1.5px solid currentColor;transition:opacity .18s;
}
.prose a:not(.btn):hover{opacity:.72}
.prose ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;
  border-radius:2px;background:var(--apoio-azul);
}

.resumo{
  background:var(--card);border-radius:var(--raio-card);
  padding:26px 28px;margin:0 0 36px;box-shadow:var(--sombra-nenhuma);
}
.resumo .rotulo{margin-bottom:14px}
.resumo ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.resumo li{position:relative;padding-left:26px;font-size:.97rem;line-height:1.45}
.resumo li::before{
  content:"";position:absolute;left:0;top:.56em;width:8px;height:8px;
  border-radius:2px;background:var(--destaque);
}

/* leva a classe tema-marinho no HTML: assim herda os tokens do tema
   em vez de redefini-los aqui, e continua conferível pelo teste */
.cardcenatec{
  border-radius:var(--raio-card);padding:clamp(26px,3.4vw,38px);margin:40px 0;
  box-shadow:var(--sombra-nenhuma);
}
.cardcenatec .titulo{margin:0 0 14px}
.cardcenatec p{margin:0 0 18px;color:var(--texto-apoio);font-size:1rem;line-height:1.5}
.cardcenatec .lista{margin-bottom:24px}

.fontes__in{max-width:860px;margin-inline:auto}
.fontes ol{margin:0;padding-left:20px;display:grid;gap:14px;font-size:.95rem;line-height:1.5;color:var(--texto-apoio)}
.fontes li::marker{color:var(--apoio-azul);font-weight:700}
.fontes a{color:var(--texto);font-weight:700;text-decoration:none;border-bottom:1px solid var(--divisoria)}
.fontes a:hover{border-bottom-color:var(--apoio-azul)}
.fontes__nota{margin:24px 0 0;font-size:.875rem;line-height:1.5;color:var(--texto-apoio)}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.pcard{
  position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--divisoria);border-radius:var(--raio-card);overflow:hidden;
  box-shadow:var(--sombra-nenhuma);transition:transform .2s,border-color .2s;
}
.pcard:hover{transform:translateY(-4px);border-color:var(--apoio-azul)}
.pcard__img{aspect-ratio:16/9;overflow:hidden;background:var(--marinho)}
.pcard__img img{width:100%;height:100%;object-fit:cover}
.pcard__corpo{padding:24px;display:flex;flex-direction:column;flex:1}
.pcard .rotulo{margin-bottom:12px}
.pcard .titulo{margin:0 0 10px}
.pcard .titulo a{text-decoration:none}
.pcard .titulo a::after{content:"";position:absolute;inset:0}
.pcard p:not(.rotulo){margin:0 0 18px;font-size:.95rem;line-height:1.45;color:var(--texto-apoio)}
.pcard__pe{
  margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:.8125rem;font-weight:700;color:var(--texto-apoio);
}
.pcard__pe .ponto{width:5px;height:5px;border-radius:50%;background:var(--destaque);flex:none}


/* ============ 9. CHAMADA FINAL E RODAPÉ ============ */
.final{text-align:center;position:relative;overflow:hidden;isolation:isolate}
/* Vídeo de fundo e véu, calibrados medindo o próprio arquivo.
   O que decide a legibilidade é o peso efetivo do vídeo: opacidade x (1 - véu).
   Antes: 0,16 x (1 - 0,90) = 1,6% — o vídeo sumia.
   Agora: 0,60 x (1 - 0,42) = 34,8%.
   Medido nos 19 quadros do arquivo, na faixa onde o texto fica: o texto
   branco fica em 5,3:1 no percentil 99 e 4,9:1 no 99,9 dos pixels mais
   claros do vídeo. Trocando o vídeo por um mais claro, refaça a conta. */
/* mesma ideia das outras: a foto fica atrás, o vídeo entra quando toca,
   e a opacidade é do invólucro, não de cada peça */
.final__fundo{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  opacity:.6;
}
.final__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
}
.final__fundo .final__filme{opacity:0;transition:opacity .5s ease}
.final__fundo .final__filme.is-tocando{opacity:1}
.final__veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(3,27,78,.42);
}
.final .wrap{position:relative;z-index:2}
.final .titulo{margin-bottom:16px}
/* sobre foto ou vídeo o design system manda o texto em `branco`,
   e não no azul-acinzentado de apoio */
.final p{max-width:56ch;margin:0 auto 28px;color:var(--branco)}

.ft{padding-block:52px 28px;font-size:.95rem;line-height:1.5}
.ft__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.ft img{max-width:200px;height:auto;margin-bottom:18px}
.ft p{color:var(--texto-apoio);margin:0}
.ft h2{
  font-family:var(--sans);font-weight:700;font-size:.78125rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--apoio-azul);margin:0 0 16px;
}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;color:var(--texto-apoio)}
.ft a{text-decoration:none;transition:color .18s}
.ft a:hover{color:var(--celeste)}
.ft__bottom{
  border-top:1px solid var(--divisoria);margin-top:40px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.8125rem;color:var(--texto-apoio);
}
@media(max-width:980px){.ft__in{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:620px){.ft__in{grid-template-columns:1fr;gap:28px}}


/* ============ 10. FLUTUANTES, ANIMAÇÃO, IMPRESSÃO ============ */
/* O botão do WhatsApp usa `destaque`, não o verde do app: o sistema
   proíbe verde na identidade. O ícone de balão fica. */
.float{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:grid;place-items:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--vermelho-vivo);color:var(--branco);text-decoration:none;
  box-shadow:var(--sombra-nenhuma);
  transition:transform .18s,background .18s;
}
.float:hover{transform:scale(1.07);background:var(--vermelho-cenatec)}
.float svg{width:29px;height:29px}
@media(max-width:520px){.float{width:54px;height:54px;right:16px;bottom:16px}.float svg{width:26px;height:26px}}

.topo{
  position:fixed;right:20px;bottom:92px;z-index:79;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--marinho);color:var(--branco);border:1px solid rgba(255,255,255,.4);
  cursor:pointer;padding:0;box-shadow:var(--sombra-nenhuma);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,background .18s;
}
.topo.is-on{opacity:1;visibility:visible;transform:none}
.topo:hover{background:var(--azul-royal)}
.topo:focus-visible{outline:3px solid var(--vermelho-vivo);outline-offset:3px}
.topo svg{width:20px;height:20px}
@media(max-width:520px){.topo{right:16px;bottom:82px;width:42px;height:42px}.topo svg{width:18px;height:18px}}

.com-js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.com-js .rv.is-on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .rv,.mod{opacity:1;transform:none}
  .bolt path{stroke-dashoffset:0}
}

@media print{
  .hdr,.float,.topo,.final,.pular,.adiante,.heroslide__ctrl{display:none!important}
  .tema-marinho,.tema-marinho.com-degrade,.hero,.ptopo,.track{background:#fff!important;color:#000!important}
  .heroslide__track{display:block}
  .heroslide__slide{opacity:1!important;visibility:visible!important;break-inside:avoid}
  .prose a,.fontes a{color:#000;border:0}
  .mod,.acc details,.cert,.hubcard{break-inside:avoid}
}