/* =========================================================================
   Polo UAB Pontal do Parana
   Paleta e tipografia vindas do manual de identidade da Prefeitura:
   azul #1e4382, azul claro #08a0df, verde-agua #03a687, amarelo #F1B51C,
   vermelho #C83E3D. Titulo em Gotham Black no manual - substituido por
   Montserrat 800, que e livre e tem a mesma pegada geometrica pesada.
   ========================================================================= */

@font-face{font-family:Montserrat;src:url(../fontes/montserrat-700.woff2) format('woff2');
           font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fontes/montserrat-800.woff2) format('woff2');
           font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fontes/inter-400.woff2) format('woff2');
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fontes/inter-500.woff2) format('woff2');
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fontes/inter-600.woff2) format('woff2');
           font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --azul:#1e4382;
  --azul-escuro:#14315f;
  --azul-claro:#08a0df;
  --verde:#03a687;
  --amarelo:#F1B51C;
  --vermelho:#C83E3D;

  --tinta:#16233a;
  --tinta-media:#465166;
  --tinta-fraca:#6b7688;
  --linha:#e2e7ee;
  --papel:#ffffff;
  --fundo:#f6f8fb;
  --fundo-azul:#eef3fa;

  --raio:14px;
  --raio-g:22px;
  --sombra:0 1px 2px rgba(16,35,58,.05), 0 8px 24px rgba(16,35,58,.07);
  --sombra-alta:0 18px 46px rgba(16,35,58,.14);
  --largura:1160px;
  --transicao:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Montserrat,Inter,sans-serif;font-weight:800;line-height:1.14;
            letter-spacing:-.02em;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}

:focus-visible{outline:3px solid var(--azul-claro);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 22px}
.pular{position:absolute;left:-9999px;top:0;background:var(--azul);color:#fff;
       padding:12px 20px;border-radius:0 0 var(--raio) 0;z-index:200;font-weight:600}
.pular:focus{left:0}

/* ---------------------------------------------------------------- topo --- */
.topo{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
      backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linha)}
.topo .container{display:flex;align-items:center;justify-content:space-between;
                 gap:20px;min-height:74px}
.marca{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;flex:none}
.marca:hover{text-decoration:none}
.marca img{height:42px;width:auto}
.marca-texto{display:flex;flex-direction:column;line-height:1.1}
.marca-texto strong{font-family:Montserrat,sans-serif;font-weight:800;font-size:15px;
                    color:var(--azul);letter-spacing:-.01em}
.marca-texto span{font-size:11.5px;color:var(--tinta-fraca);letter-spacing:.04em}

.menu{display:flex;align-items:center;gap:4px}
.menu a{padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:500;
        color:var(--tinta-media);transition:var(--transicao)}
.menu a:hover{background:var(--fundo-azul);color:var(--azul);text-decoration:none}
.menu a.destaque{background:var(--azul);color:#fff;font-weight:600;margin-left:8px;padding:11px 20px}
.menu a.destaque:hover{background:var(--azul-escuro)}

.abrir-menu{display:none;background:none;border:1px solid var(--linha);border-radius:10px;
            width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.abrir-menu span{display:block;width:20px;height:2px;background:var(--azul);position:relative}
.abrir-menu span::before,.abrir-menu span::after{content:'';position:absolute;left:0;width:20px;
            height:2px;background:var(--azul);transition:var(--transicao)}
.abrir-menu span::before{top:-6px}
.abrir-menu span::after{top:6px}
.abrir-menu[aria-expanded="true"] span{background:transparent}
.abrir-menu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.abrir-menu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------------------------------------------------------------- hero --- */
/* O fundo do hero e feito de quatro camadas, todas em CSS - nenhuma imagem:
   1. gradiente base, do azul institucional ao azul profundo
   2. dois halos de luz (azul claro e verde-agua), as cores complementares
   3. a malha de pontos da identidade da Prefeitura, discreta
   4. um brilho diagonal frio, que tira a chapa do gradiente reto           */
.hero{position:relative;color:#fff;overflow:hidden;padding:92px 0 130px;
  background:
    radial-gradient(1100px 520px at 76% -6%, rgba(8,160,223,.46), transparent 58%),
    radial-gradient(820px 460px at 2% 96%, rgba(3,166,135,.34), transparent 62%),
    linear-gradient(152deg,#0d2447 0%,#14315f 30%,#1e4382 62%,#2a5ba8 100%);
}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 95% at 72% 8%, #000 12%, transparent 68%);
  mask-image:radial-gradient(120% 95% at 72% 8%, #000 12%, transparent 68%);
  opacity:.55}
.hero::after{content:'';position:absolute;inset:-20% -10%;pointer-events:none;
  background:linear-gradient(108deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%);
  transform:rotate(-2deg)}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
                 gap:56px;align-items:center}
.hero .texto{max-width:640px}
.hero .selo{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.13);
            border:1px solid rgba(255,255,255,.26);border-radius:100px;padding:7px 17px;
            font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
            margin-bottom:26px}
.hero .selo i{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none}
.hero h1{font-size:clamp(2.3rem,5.6vw,4rem);margin-bottom:18px;color:#fff}
.hero .sub{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600;color:#bcd8f5;margin-bottom:14px}
.hero p.apoio{font-size:clamp(1rem,1.6vw,1.15rem);color:#d6e6f8;max-width:640px;margin-bottom:34px}
.hero-botoes{display:flex;flex-wrap:wrap;gap:14px}
.onda{position:absolute;bottom:-1px;left:0;width:100%;height:90px;z-index:1;display:block}

/* --------------------------------------------------------- foto do polo --- */
.hero-foto{position:relative}
.hero-foto img{border-radius:var(--raio-g);box-shadow:0 30px 70px rgba(4,20,42,.42);
               width:100%;aspect-ratio:11/8;object-fit:cover}
.hero-foto .selo-foto{position:absolute;left:-18px;bottom:-20px;background:#fff;color:var(--azul);
        border-radius:16px;padding:14px 20px;box-shadow:var(--sombra-alta);max-width:260px}
.hero-foto .selo-foto b{display:block;font-family:Montserrat,sans-serif;font-weight:800;
        font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul-claro);margin-bottom:3px}
.hero-foto .selo-foto span{font-size:13.5px;line-height:1.4;color:var(--tinta-media);display:block}

/* --------------------------------------------------------------- botao --- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;
       padding:15px 28px;border-radius:100px;font-weight:600;font-size:15.5px;
       border:2px solid transparent;cursor:pointer;transition:var(--transicao);
       font-family:Inter,sans-serif;text-align:center}
.botao:hover{text-decoration:none;transform:translateY(-2px)}
.botao svg{width:18px;height:18px;flex:none}
.botao-primario{background:var(--amarelo);color:#2b2000;box-shadow:0 8px 22px rgba(241,181,28,.34)}
.botao-primario:hover{background:#ffc634}
.botao-claro{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.42)}
.botao-claro:hover{background:rgba(255,255,255,.19)}
.botao-azul{background:var(--azul);color:#fff}
.botao-azul:hover{background:var(--azul-escuro)}
.botao-verde{background:var(--verde);color:#fff}
.botao-verde:hover{background:#02916f}
.botao-vazado{border-color:var(--linha);color:var(--azul);background:var(--papel)}
.botao-vazado:hover{border-color:var(--azul);background:var(--fundo-azul)}
.botao-p{padding:10px 18px;font-size:14px}

/* --------------------------------------------------------------- secao --- */
.secao{padding:88px 0}
.secao-clara{background:var(--fundo)}
.secao-azul{background:var(--fundo-azul)}
.cabeca{max-width:740px;margin-bottom:48px}
.cabeca.centro{margin-left:auto;margin-right:auto;text-align:center}
.etiqueta{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
          text-transform:uppercase;color:var(--azul-claro);margin-bottom:14px}
.cabeca h2{font-size:clamp(1.75rem,3.6vw,2.6rem);color:var(--azul)}
.cabeca p{font-size:1.08rem;color:var(--tinta-media);margin-bottom:0}

/* ------------------------------------------------------------- numeros --- */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:46px}
.numero{position:relative;background:var(--papel);border:1px solid var(--linha);
        border-radius:var(--raio-g);padding:32px 26px 30px;box-shadow:var(--sombra);overflow:hidden;
        --cor:var(--azul)}
.numero::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--cor)}
.numeros .numero:nth-child(1){--cor:#1e4382}
.numeros .numero:nth-child(2){--cor:#08a0df}
.numeros .numero:nth-child(3){--cor:#03a687}
.numeros .numero:nth-child(4){--cor:#d99a00}
.numero b{color:var(--cor)}
.numero b{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:2.6rem;
          line-height:1;color:var(--azul);letter-spacing:-.03em;margin-bottom:8px}
.numero span{font-size:14.5px;color:var(--tinta-media);font-weight:500}
.numero.destacado{background:linear-gradient(150deg,var(--azul),#2a5ba8);border-color:transparent}
.numero.destacado b,.numero.destacado span{color:#fff}
.numero.destacado span{color:#c6dcf6}

.modalidades{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.modalidade{display:inline-flex;align-items:center;gap:9px;background:var(--papel);
            border:1px solid var(--linha);border-radius:100px;padding:10px 20px;
            font-size:14.5px;font-weight:600;color:var(--azul)}
.modalidade i{width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none}

/* --------------------------------------------------------------- duas --- */
.duas{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.painel-uab{background:linear-gradient(150deg,var(--azul-escuro),var(--azul));color:#fff;
            border-radius:var(--raio-g);padding:38px 36px;box-shadow:var(--sombra-alta)}
.painel-uab h3{color:#fff;font-size:1.3rem;margin-bottom:18px}
.painel-uab ul{list-style:none;padding:0;margin:0}
.painel-uab li{display:flex;gap:13px;padding:13px 0;border-top:1px solid rgba(255,255,255,.15);
               font-size:15px;color:#d6e6f8}
.painel-uab li:first-child{border-top:0;padding-top:0}
.painel-uab li svg{width:20px;height:20px;flex:none;color:var(--amarelo);margin-top:2px}

/* -------------------------------------------------------------- cursos --- */
.instituicao{margin-bottom:46px}
.instituicao-cabeca{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
                    padding-bottom:16px;margin-bottom:22px;border-bottom:2px solid var(--linha)}
.instituicao-sigla{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.35rem;
                   color:var(--azul);letter-spacing:-.02em}
.instituicao-nome{font-size:14.5px;color:var(--tinta-fraca);flex:1;min-width:200px}
.instituicao-esfera{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
                    color:var(--verde);background:rgba(3,166,135,.1);padding:5px 12px;border-radius:100px}

.cursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
/* Cada nivel tem a sua cor: a faixa no topo, o rotulo e o brilho do hover.
   Antes os 12 cards eram identicos e a pagina virava uma parede cinza. */
.curso{position:relative;background:var(--papel);border:1px solid var(--linha);
       border-radius:var(--raio-g);padding:28px 24px 24px;display:flex;flex-direction:column;
       gap:13px;transition:var(--transicao);overflow:hidden;--cor:var(--azul)}
.curso::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--cor)}
.curso::after{content:'';position:absolute;top:-70px;right:-70px;width:180px;height:180px;
       border-radius:50%;background:var(--cor);opacity:.06;transition:var(--transicao)}
.curso:hover{box-shadow:0 20px 46px rgba(16,35,58,.16);transform:translateY(-4px);border-color:transparent}
.curso:hover::after{transform:scale(1.5);opacity:.11}
.curso[data-nivel="Graduacao"]{--cor:#1e4382}
.curso[data-nivel="Pos-graduacao"]{--cor:#03a687}
.curso[data-nivel="Tecnico"]{--cor:#08a0df}
.curso[data-nivel="Qualificacao"]{--cor:#d99a00}
.curso .nivel{color:var(--cor);font-weight:700}
.curso h3{position:relative;z-index:1}
.curso .topo-curso{position:relative;z-index:1;display:flex;align-items:flex-start;
                    justify-content:space-between;gap:12px}
.curso p,.curso .acoes{position:relative;z-index:1}
.curso .nivel{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.curso h3{font-size:1.12rem;margin:0;line-height:1.32;color:var(--tinta)}
.curso p{font-size:14.5px;color:var(--tinta-media);margin:0;flex:1}
.curso .acoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}

.situacao{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
          letter-spacing:.07em;text-transform:uppercase;padding:6px 13px;border-radius:100px;
          white-space:nowrap;flex:none}
.situacao i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.situacao.aberta{background:rgba(3,166,135,.13);color:#01805f}
.situacao.breve{background:rgba(241,181,28,.18);color:#8a6400}
.situacao.andamento{background:rgba(8,160,223,.14);color:#0270a0}
.situacao.encerrado{background:#eef1f5;color:var(--tinta-fraca)}

.aviso-vazio{background:var(--papel);border:1px dashed var(--linha);border-radius:var(--raio-g);
             padding:44px;text-align:center;color:var(--tinta-fraca)}

/* -------------------------------------------------------------- faixa --- */
/* Faixa de imagem que corta a pagina inteira. Existe para dar respiro entre
   dois blocos de texto e para o site mostrar gente - foi o pedido do Elisio.
   A foto e de estudante adulta numa sala simples, nao a turminha sorrindo no
   gramado que todo site institucional usa. */
.faixa{position:relative;overflow:hidden;isolation:isolate}
.faixa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.faixa::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(13,36,71,.94) 0%, rgba(30,67,130,.86) 46%, rgba(8,64,120,.62) 100%)}
.faixa .dentro{padding:86px 0;color:#fff;max-width:720px}
.faixa .frase{font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.16;margin:0 0 16px;color:#fff}
.faixa p.apoio-faixa{font-size:clamp(1rem,1.7vw,1.15rem);color:#cfe2f7;margin:0 0 30px;max-width:580px}
.faixa .pontos{display:flex;flex-wrap:wrap;gap:12px}
.faixa .ponto{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);border-radius:100px;padding:9px 18px;font-size:14px;font-weight:600}
.faixa .ponto i{width:7px;height:7px;border-radius:50%;background:var(--amarelo);flex:none}

/* ------------------------------------------------- bloco com foto + painel */
.composto{position:relative}
.composto .retrato{margin:0;border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-alta)}
.composto .retrato img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.composto .painel-uab{margin:-58px 0 0 34px;position:relative;z-index:2}

/* ------------------------------------------------------- como funciona --- */
.funciona{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.funciona-foto{margin:0;border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-alta);
  position:relative}
.funciona-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.funciona-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 24px 20px;color:#fff;
  font-size:14.5px;font-weight:600;
  background:linear-gradient(to top, rgba(10,30,60,.86), transparent)}
.funciona .passos{grid-template-columns:repeat(2,1fr)}

/* ------------------------------------------------------------- passos --- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:22px}
.passo{position:relative;background:var(--papel);border:1px solid var(--linha);
       border-radius:var(--raio-g);padding:32px 26px 28px}
.passo{--cor:var(--azul)}
.passo:nth-child(1){--cor:#1e4382}
.passo:nth-child(2){--cor:#08a0df}
.passo:nth-child(3){--cor:#03a687}
.passo:nth-child(4){--cor:#d99a00}
.passo::before{content:'';position:absolute;top:0;left:26px;right:26px;height:4px;
               background:var(--cor);border-radius:0 0 4px 4px}
.passo b{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:2.4rem;
         line-height:1;color:var(--cor);opacity:.22;margin-bottom:14px;letter-spacing:-.04em}
.passo h3{color:var(--cor)}
.passo h3{font-size:1.08rem;margin-bottom:9px;color:var(--azul)}
.passo p{font-size:14.5px;color:var(--tinta-media);margin:0}

/* ----------------------------------------------------------- noticias --- */
.noticias{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.noticia{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);
         overflow:hidden;display:flex;flex-direction:column;transition:var(--transicao)}
.noticia:hover{box-shadow:var(--sombra-alta);transform:translateY(-3px)}
.noticia .capa{aspect-ratio:16/9;background:var(--fundo-azul);object-fit:cover;width:100%}
.noticia .corpo{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.noticia .meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--tinta-fraca)}
.noticia .tipo{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro)}
.noticia h3{font-size:1.08rem;margin:0;line-height:1.34}
.noticia p{font-size:14.5px;color:var(--tinta-media);margin:0;flex:1}

/* ---------------------------------------------------------------- faq --- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
             margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:22px 26px;font-weight:600;font-size:16.5px;
             list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:11px;height:11px;border-right:2.5px solid var(--azul);
                    border-bottom:2.5px solid var(--azul);transform:rotate(45deg);
                    transition:var(--transicao);flex:none;margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq details[open] summary{color:var(--azul)}
.faq .resposta{padding:0 26px 24px;color:var(--tinta-media);font-size:15.5px}
.faq .resposta p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ contato --- */
.contato-grade{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.contato-cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);
                padding:34px;box-shadow:var(--sombra)}
.contato-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--linha)}
.contato-item:first-of-type{border-top:0;padding-top:0}
.contato-item .icone{width:44px;height:44px;border-radius:12px;background:var(--fundo-azul);
                     display:flex;align-items:center;justify-content:center;flex:none;color:var(--azul)}
.contato-item .icone svg{width:21px;height:21px}
.contato-item strong{display:block;font-size:12px;font-weight:700;letter-spacing:.11em;
                     text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:3px}
.contato-item div p{margin:0;font-size:15.5px;line-height:1.5}
.contato-botoes{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.mapa{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--raio-g);
      box-shadow:var(--sombra);background:var(--fundo-azul)}

/* ------------------------------------------------------------- rodape --- */
.rodape{background:var(--azul-escuro);color:#c6d6ea;padding:62px 0 0;font-size:14.5px}
.rodape a{color:#c6d6ea}
.rodape a:hover{color:#fff}
.rodape-grade{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:44px;padding-bottom:44px}
.rodape h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
           margin-bottom:18px;font-family:Inter,sans-serif}
.rodape .lema{font-family:Montserrat,sans-serif;font-weight:800;color:#fff;font-size:1.22rem;
              line-height:1.3;margin:0 0 16px;letter-spacing:-.02em}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{padding:5px 0}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:26px 0;
       border-top:1px solid rgba(255,255,255,.13)}
.logos img{height:46px;width:auto;background:#fff;border-radius:10px;padding:8px 12px}
.logos .vazio{height:46px;display:flex;align-items:center;padding:0 16px;border:1px dashed rgba(255,255,255,.3);
              border-radius:10px;font-size:12px;color:#8fa8c6}
.rodape-fim{border-top:1px solid rgba(255,255,255,.13);padding:22px 0;display:flex;
            flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:#8fa8c6}

/* ----------------------------------------------------------- whatsapp --- */
.zap{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;
     background:#25D366;display:flex;align-items:center;justify-content:center;
     box-shadow:0 12px 30px rgba(37,211,102,.44);transition:var(--transicao)}
.zap::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;
     opacity:.5;animation:pulso 2.6s cubic-bezier(.4,0,.6,1) infinite;z-index:-1}
.zap:hover{transform:scale(1.08);box-shadow:0 16px 38px rgba(37,211,102,.55)}
.zap svg{width:34px;height:34px;fill:#fff}
@keyframes pulso{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* --------------------------------------------------------- responsivo --- */
@media (max-width:940px){
  .funciona{grid-template-columns:1fr;gap:34px}
  .funciona-foto img{aspect-ratio:16/10}
  .composto .painel-uab{margin:-40px 14px 0}
  .faixa .dentro{padding:62px 0}
  .hero .container{grid-template-columns:1fr;gap:40px}
  .hero .texto{max-width:none}
  .hero-foto .selo-foto{left:auto;right:14px;bottom:-16px;max-width:230px}
  .duas,.contato-grade{grid-template-columns:1fr;gap:34px}
  .rodape-grade{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:760px){
  body{font-size:16px}
  /* A marca era flex:none e nao cedia espaco: com o botao do menu ao lado, a
     linha do cabecalho ficava 12px mais larga que a tela e a pagina inteira
     ganhava rolagem horizontal. Medido em 375px antes de mexer. */
  .topo .container{gap:12px;min-height:64px}
  .marca{flex:1 1 auto;min-width:0}
  .marca img{height:34px}
  .marca-texto{min-width:0}
  .marca-texto strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .marca-texto span{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .abrir-menu{flex:none;width:42px;height:42px}
  .menu{inset:64px 0 auto}
  .secao{padding:62px 0}
  .hero{padding:62px 0 104px}
  .abrir-menu{display:flex}
  .menu{position:fixed;inset:74px 0 auto;background:var(--papel);flex-direction:column;
        align-items:stretch;gap:2px;padding:14px 18px 22px;border-bottom:1px solid var(--linha);
        box-shadow:var(--sombra-alta);display:none}
  .menu.aberto{display:flex}
  .menu a{padding:13px 14px;font-size:16px}
  .menu a.destaque{margin:8px 0 0;text-align:center}
  .rodape-grade{grid-template-columns:1fr}
  .hero-botoes .botao{flex:1 1 100%}
  .funciona .passos{grid-template-columns:1fr}
  .composto .painel-uab{margin:-30px 0 0}
  .hero-foto .selo-foto{position:static;max-width:none;margin-top:14px;box-shadow:var(--sombra)}
}

/* ------------------------------------------------------------ animacao --- */
/* Regra de ouro: o conteudo e visivel por padrao. So ganha o estado escondido
   quando o JS confirma que vai animar (classe .anima no html). Sem isso, quem
   nao roda JS ficaria com a pagina em branco. */
.anima .surge{opacity:0;transform:translateY(26px)}
.anima .surge.visivel{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.anima .surge.d1{transition-delay:.08s}
.anima .surge.d2{transition-delay:.16s}
.anima .surge.d3{transition-delay:.24s}
.anima .surge.d4{transition-delay:.32s}
.anima .surge.d5{transition-delay:.40s}

/* Entrada do hero: nao espera scroll, acontece no carregamento. */
.anima .hero .entra{opacity:0;transform:translateY(30px);
  animation:entrar .9s cubic-bezier(.22,1,.36,1) forwards}
.anima .hero .entra.a1{animation-delay:.10s}
.anima .hero .entra.a2{animation-delay:.20s}
.anima .hero .entra.a3{animation-delay:.30s}
.anima .hero .entra.a4{animation-delay:.40s}
.anima .hero .entra.a5{animation-delay:.50s}
.anima .hero .entra.a6{animation-delay:.35s}
@keyframes entrar{to{opacity:1;transform:none}}

/* A onda do hero respira devagar - o litoral do briefing, sem virar enfeite. */
.anima .onda path:last-child{animation:mare 13s ease-in-out infinite alternate}
@keyframes mare{from{transform:translateX(0)}to{transform:translateX(-26px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .botao:hover,.curso:hover,.noticia:hover,.zap:hover{transform:none}
  .anima .surge,.anima .hero .entra{opacity:1!important;transform:none!important;animation:none!important}
  .zap::before,.anima .onda path:last-child{animation:none!important}
}

@media print{
  .topo,.zap,.hero-botoes,.contato-botoes{display:none}
  .hero{background:none;color:#000;padding:20px 0}
  .hero h1,.hero .sub,.hero p.apoio{color:#000}
}