:root{--azul:#00335b;--vermelho:#d93f31;--amarelo:#ffd869;--creme:#fff4d5;--gelo:#e9edf3;--texto:#48484a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.55 Arial,"Liberation Sans",Helvetica,sans-serif;color:var(--texto);background:#fff}
img{display:block;width:100%;height:auto}
h1,h2,h3,.tit{font-family:Rubik,Arial,sans-serif;font-weight:800;text-transform:uppercase;line-height:1.05;margin:0}
strong{color:var(--azul)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.faixa{display:block;background:var(--vermelho);color:#fff;padding:.12em .35em;margin:.12em -.35em 0}

.topo{display:flex;align-items:center;gap:8px 12px;padding:14px 20px;max-width:960px;margin:0 auto;font:800 .8rem/1 Rubik,Arial,sans-serif;text-transform:uppercase;color:var(--azul);letter-spacing:.02em}
.topo b{background:var(--vermelho);color:#fff;padding:7px 10px;border-radius:4px}
.topo a{color:inherit;text-decoration:none}
.topo .marca{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:1 1 auto;min-width:0}
.topo .blog{padding:7px 0;border-bottom:3px solid var(--vermelho)}
.topo .ig{display:flex;padding:4px}
a:focus-visible{outline:3px solid var(--vermelho);outline-offset:3px}

.hero{background:var(--azul);color:#fff;text-align:center}
.hero .wrap{padding-top:36px;padding-bottom:32px}
.hero .olho{color:var(--amarelo);font-size:clamp(1.5rem,6vw,2.6rem)}
.hero h1{font-size:clamp(1.9rem,8.2vw,4rem);margin-top:.15em}
.hero h1 .faixa{font-size:1.28em;margin-left:-20px;margin-right:-20px}
figure{margin:0}
figcaption{font-size:.7rem;color:#86888a;text-align:right;padding:4px 20px 0}

.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.btn{font:800 1rem/1 Rubik,Arial,sans-serif;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;padding:16px 22px;border-radius:6px;background:var(--amarelo);color:var(--azul)}
.btn.sec{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn:focus-visible{outline:3px solid var(--vermelho);outline-offset:3px}

section{padding:48px 0}
section h2{font-size:clamp(1.6rem,6vw,2.6rem);color:var(--azul);margin-bottom:.5em}
.citacao{font-size:1.2rem;border-left:6px solid var(--vermelho);padding:6px 0 6px 18px;margin:0 0 28px}
.citacao q{font-family:Rubik,Arial,sans-serif;font-weight:700;color:var(--azul);font-size:1.25em;line-height:1.2;display:block;margin:.2em 0}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--gelo);border-left:5px solid var(--vermelho);padding:18px 20px}
.card:nth-child(even){background:var(--creme)}
.card h3{font-size:1.1rem;color:var(--vermelho);margin-bottom:.45em;line-height:1.15}
.card p{margin:0}
.card.alerta{background:var(--vermelho);color:#fff;border-left-color:var(--azul)}
.card.alerta h3,.card.alerta strong{color:#fff}

.casos{background:var(--azul);color:#fff}
.casos h2{color:#fff}
.casos h2 .faixa{display:inline-block;margin:.1em 0 0}
.casos .sub{color:var(--amarelo);font:700 1.15rem/1.3 Rubik,Arial,sans-serif;margin:0 0 26px}
.casos .card{background:#fff;color:var(--texto)}
.casos .card:nth-child(even){background:var(--creme)}
.num{font:800 2.6rem/1 Rubik,Arial,sans-serif;color:var(--vermelho);display:block}
.num small{font-size:.38em;display:block;color:var(--azul);margin:.35em 0 .7em;letter-spacing:.03em}
.fecho{margin:26px 0 0;background:var(--amarelo);color:var(--azul);font:800 1.2rem/1.3 Rubik,Arial,sans-serif;padding:20px 22px}

.defender{background:var(--amarelo)}
.defender ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.defender li{background:#fff;color:var(--azul);font:800 1.05rem/1.2 Rubik,Arial,sans-serif;text-transform:uppercase;padding:18px 18px 18px 46px;position:relative}
.defender li::before{content:"";position:absolute;left:18px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--vermelho)}

.agir{text-align:center}
.agir p{font-size:1.2rem;max-width:640px;margin:0 auto}
.agir .btn{background:var(--azul);color:#fff}
.agir .btn.sec{background:transparent;color:var(--azul);box-shadow:inset 0 0 0 2px var(--azul)}
.agir .btn.ig{background:var(--amarelo);color:var(--azul)}

footer{background:var(--azul);color:#fff;text-align:center;padding:40px 20px;font-size:.85rem}
footer .tit{font-size:clamp(1.4rem,6vw,2.2rem)}
footer .tit span{display:inline-block;background:var(--amarelo);color:var(--azul);padding:.1em .4em;margin-top:.15em}
footer p{margin:18px 0 0;opacity:.85}
footer .ig{font-size:1rem;opacity:1}
footer .ig a{color:var(--amarelo);font-weight:700}

/* blog: lista de matérias (home, /blog/ e "leia também") */
.noticias{background:var(--gelo)}
.posts{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.post{display:flex;flex-direction:column;background:#fff;color:var(--texto);text-decoration:none;border-bottom:5px solid var(--vermelho)}
.post img{aspect-ratio:1200/630;object-fit:cover}
.post div{padding:16px 18px 20px}
.post .data{font:700 .75rem/1 Rubik,Arial,sans-serif;color:var(--vermelho);text-transform:uppercase;letter-spacing:.04em}
.post h3{font-size:1.1rem;color:var(--azul);margin:.55em 0 .5em;line-height:1.15}
.post p{margin:0;font-size:.95rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.post:hover h3{text-decoration:underline}
.noticias .btns .btn{background:var(--azul);color:#fff}

/* blog: página da matéria */
.capa{background:var(--azul);color:#fff}
.capa .wrap{max-width:800px;padding-top:34px;padding-bottom:34px}
.capa .olho{color:var(--amarelo);font:700 .85rem/1 Rubik,Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px}
.capa .olho a{color:inherit}
.capa h1{font-size:clamp(1.6rem,5.4vw,2.7rem)}
.capa .linha{font-size:1.15rem;line-height:1.45;margin:16px 0 0}
.materia{max-width:800px;margin:0 auto;padding:0 20px 8px}
.materia figure{margin:0 -20px}
.texto{font-size:1.125rem;line-height:1.7;padding-top:28px}
.texto p{margin:0 0 1.15em}
.texto h2{font-size:clamp(1.3rem,4.4vw,1.7rem);color:var(--azul);border-left:6px solid var(--vermelho);padding-left:14px;margin:1.9em 0 .8em}
.texto h3{font-size:1.1rem;color:var(--vermelho);margin:1.6em 0 .6em}
.texto ul{padding-left:1.2em;margin:0 0 1.15em}
.texto li{margin-bottom:.8em}
.texto li::marker{color:var(--vermelho)}
.texto a{color:var(--vermelho);font-weight:700}
.texto figure{margin:1.6em 0}
.texto figure img{border:1px solid var(--gelo)}
.texto figcaption{text-align:left;padding:8px 0 0;font-size:.85rem}

/* movimento: só acréscimo. O estado final de toda animação é o layout de sempre, e quem pede
   menos movimento no sistema (prefers-reduced-motion) recebe o site parado, como era. */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
@keyframes sobe{from{opacity:0;transform:translateY(26px)}}
@keyframes entra{from{opacity:0;transform:translateX(-26px)}}
@keyframes varre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes assenta{from{transform:scale(1.1)}}
@keyframes respira{to{transform:scale(1.045)}}
@keyframes carimbo{from{opacity:0;transform:scale(1.5)}}
@keyframes brota{from{transform:scale(0)}}
@keyframes pulso{from{box-shadow:0 0 0 0 var(--pulso)}60%,to{box-shadow:0 0 0 16px transparent}}
@keyframes progresso{to{transform:scaleX(1)}}

/* barra de leitura no topo: só onde o navegador liga animação à rolagem */
@supports (animation-timeline:scroll()){
body::before{content:"";position:fixed;inset:0 0 auto;height:4px;z-index:9;background:var(--vermelho);transform:scaleX(0);transform-origin:0 50%;animation:progresso linear both;animation-timeline:scroll()}
}

/* entrada da página: topo, chamada da home e capa das matérias */
.topo{animation:sobe .5s backwards}
.hero .olho,.hero h1,.hero .btns,.capa .olho,.capa h1,.capa .linha{animation:sobe .7s cubic-bezier(.2,.7,.2,1) backwards}
.hero h1,.capa h1{animation-delay:.12s}
.capa .linha{animation-delay:.26s}
.hero h1 .faixa{animation:varre .6s .4s cubic-bezier(.2,.7,.2,1) backwards}
.hero .btns{animation-delay:.65s}
.hero .btn:not(.sec),.agir .btn:first-child{--pulso:rgba(255,216,105,.55);animation:pulso 2.4s 1.8s infinite}
.agir .btn:first-child{--pulso:rgba(0,51,91,.35)}

/* as duas fotos largas da home: chegam assentando e seguem num zoom lento. As do blog ficam paradas
   porque a barra do Comitê e o aviso de IA estão na borda da própria imagem e o zoom cortaria. */
.hero figure,main>figure{overflow:hidden}
.hero figure img,main>figure.in img{animation:assenta 2.4s cubic-bezier(.2,.7,.2,1) backwards,respira 16s 2.4s ease-in-out infinite alternate}

/* blocos que o site.js marca com .in quando entram na tela (a lista de quem entra está lá) */
.in{animation:sobe .7s cubic-bezier(.2,.7,.2,1) backwards}
.citacao.in{animation-name:entra}
h2.in .faixa{animation:varre .6s .25s cubic-bezier(.2,.7,.2,1) backwards}
.card.in .num{transform-origin:0 60%;animation:carimbo .5s .3s cubic-bezier(.2,.7,.2,1) backwards}
.defender li.in::before{animation:brota .45s .35s cubic-bezier(.3,1.6,.5,1) backwards}

/* resposta ao toque e ao mouse */
.btn,.card,.post,.defender li,.topo .ig svg{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,filter .25s}
.btn:active{transform:scale(.96)}
@media (hover:hover){
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.card:hover,.post:hover,.defender li:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.18)}
.topo .ig:hover svg{transform:scale(1.15) rotate(-8deg)}
}
}