/* ============================================================
   POP CLIMA MARÉ — Portal público (one-page)
   v2 · "Marca turbinada": identidade artesanal (linocut) +
   movimento, profundidade 3D, glass sutil e gradientes vivos.
   Depende das variáveis definidas em app.css (:root)
   ============================================================ */

:root{
  --fx-blur: 14px;
  --glass: rgba(255,255,255,.10);
  --glass-brd: rgba(255,255,255,.18);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

.portal{ background: var(--creme-2); overflow-x: clip; }

/* Respeita quem pede menos movimento — sem deixar a página "morta":
   remove só o movimento contínuo/parallax; mantém transições curtas de hover/foco. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{ transition-duration:.2s !important; }
  /* desliga animações em laço e efeitos decorativos */
  .hero::before, #indicadores::before, .deco, .cc .ic,
  .hero-logo-img, .hero-badge .dot, .hero-waves .wv,
  .parceiros-track, .hero-scroll .mouse::before, .nav-cta::before{
    animation:none !important;
  }
  /* conteúdo entra sem deslocamento, mas visível */
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-badge, .hero-logo-img, .hero h1 .word, .hero p.lead,
  .hero-ctas, .hero-mini-stats .s{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}

/* ------------------------------------------------- Barra de progresso */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:200;
  background:transparent; pointer-events:none;
}
.scroll-progress > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--sol) 0%, var(--sol-2) 40%, var(--azul-2) 100%);
  box-shadow:0 0 14px rgba(245,166,35,.6);
  transition:width .1s linear;
}

/* ------------------------------------------------- Navbar */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; transition:padding .35s var(--ease-out), background .35s, box-shadow .35s;
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; width:min(1220px,92%); }
.nav .logo{ position:relative; display:inline-flex; align-items:center; }
/* Logo em destaque maior — troca clara/escura conforme o scroll */
.nav .logo img{
  height:60px; width:auto; display:block;
  transition:height .35s var(--ease-out), opacity .3s, transform .35s var(--ease-spring);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
}
.nav .logo .logo-mark{ position:absolute; left:0; top:0; opacity:0; filter:drop-shadow(0 3px 8px rgba(0,0,0,.14)); }
.nav .logo::after{ /* halo suave atrás da logo */
  content:""; position:absolute; inset:-16px -20px; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(245,166,35,.35), transparent 72%);
  opacity:0; transition:opacity .4s; filter:blur(6px);
}
.nav .logo:hover img{ transform:translateY(-2px) rotate(-1deg) scale(1.03); }
.nav .logo:hover::after{ opacity:1; }
.nav.solid{ padding:8px 0; background:rgba(251,249,243,.85); box-shadow:0 6px 30px rgba(0,60,120,.12); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); }
.nav.solid .logo img{ height:44px; }
.nav.solid .logo .logo-light{ opacity:0; }
.nav.solid .logo .logo-mark{ opacity:1; }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ position:relative; color:#fff; font-weight:600; font-size:.95rem; padding:4px 0; }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--sol-2); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease-out); border-radius:2px;
}
.nav-links a:not(.nav-cta):hover{ text-decoration:none; color:var(--sol-2); }
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav.solid .nav-links a{ color:var(--grafite); }
.nav.solid .nav-links a:hover{ color:var(--azul); }
.nav-cta{
  background:linear-gradient(135deg,var(--sol) 0%,var(--laranja) 100%);
  color:#fff !important; padding:10px 20px; border-radius:999px; font-weight:800;
  box-shadow:0 8px 20px rgba(240,138,0,.35); overflow:hidden; position:relative;
}
.nav-cta::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); transition:none; }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(240,138,0,.5); }
.nav-cta:hover::before{ animation:shine .9s ease; }
@keyframes shine{ to{ left:130%; } }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.9rem; cursor:pointer; line-height:1; }
.nav.solid .nav-toggle{ color:var(--grafite); }

/* ------------------------------------------------- HERO */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:#fff; overflow:hidden; isolation:isolate;
  /* alturas em vh: o hero cabe na tela e as ondas ficam visíveis sem rolar */
  --onda-h:clamp(130px,17vh,190px);
  padding:clamp(84px,10.5vh,116px) 0 calc(var(--onda-h) + clamp(14px,2.5vh,28px));
  background:linear-gradient(165deg,#00478F 0%,#003A73 55%,#00284f 100%);
}
/* malha de gradiente animada */
.hero::before{
  content:""; position:absolute; inset:-20%; z-index:0; opacity:.9; pointer-events:none;
  background:
    radial-gradient(38% 45% at 78% 12%, rgba(245,166,35,.55), transparent 60%),
    radial-gradient(40% 40% at 12% 22%, rgba(10,95,176,.75), transparent 62%),
    radial-gradient(45% 45% at 60% 88%, rgba(42,157,143,.40), transparent 60%);
  animation:meshMove 18s ease-in-out infinite alternate;
  filter:blur(8px);
}
@keyframes meshMove{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2%,-2%,0) scale(1.06); }
  100%{ transform:translate3d(-2%,1%,0) scale(1.02); }
}
/* canvas Three.js — confinado à faixa lateral direita (nunca sobre o texto) */
#heroCanvas{
  position:absolute; top:0; right:0; bottom:0; left:auto; z-index:1;
  width:42%; height:100%; pointer-events:none; opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%),linear-gradient(180deg,#000 68%,transparent 97%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 18%),linear-gradient(180deg,#000 68%,transparent 97%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* grão/textura linocut sutil */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .container{ position:relative; z-index:3; width:min(1220px,92%); }
.hero-texto{ max-width:760px; }

.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--glass); border:1px solid rgba(245,166,35,.55);
  color:var(--sol-2); font-weight:700; font-size:.8rem; padding:8px 16px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:22px; backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0; transform:translateY(14px); animation:heroIn .7s var(--ease-out) .1s forwards;
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--sol); box-shadow:0 0 0 0 rgba(245,166,35,.7); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(245,166,35,.6);} 70%,100%{ box-shadow:0 0 0 12px rgba(245,166,35,0);} }

/* Faixa lateral: logo em destaque junto dos objetos 3D */
.hero-side{
  position:absolute; top:0; right:0; bottom:0; width:42%; z-index:3;
  display:flex; align-items:flex-start; justify-content:center; padding-top:15vh;
  pointer-events:none;
}
.hero-logo-img{
  width:min(78%,420px); height:auto;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.5));
  opacity:0; transform:translateY(20px) scale(.96);
  animation:heroIn .9s var(--ease-spring) .15s forwards, floatLogo 6s ease-in-out 1.1s infinite;
}
@keyframes floatLogo{ 0%,100%{ transform:translateY(0) rotate(-.6deg);} 50%{ transform:translateY(-12px) rotate(.6deg);} }
@keyframes glowPulse{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.08);} }

.hero h1{
  font-family:'Bebas Neue','Anton',var(--fonte-display); font-weight:400;
  font-size:clamp(2.2rem,4.6vw,3.9rem); line-height:1.12;
  text-transform:uppercase; margin-bottom:clamp(12px,1.8vh,20px); letter-spacing:1.5px;
  text-wrap:balance;
}
.hero h1 .word{ display:inline-block; opacity:0; transform:translateY(26px) rotate(4deg); }
.hero h1 .amarelo{
  background:linear-gradient(120deg,var(--sol) 0%,var(--sol-2) 55%,#fff 120%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.hero p.lead{ font-size:clamp(1rem,1.15vw,1.12rem); color:#dce8f6; max-width:600px; margin-bottom:clamp(18px,2.6vh,28px); opacity:0; transform:translateY(16px); animation:heroIn .8s var(--ease-out) .5s forwards; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(16px); animation:heroIn .8s var(--ease-out) .65s forwards; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.hero-mini-stats{ display:flex; gap:14px; margin-top:clamp(20px,3.2vh,34px); flex-wrap:wrap; }
.hero-mini-stats .s{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22); border-radius:18px; padding:16px 22px 15px;
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  min-width:168px; opacity:0; transform:translateY(18px);
  box-shadow:0 10px 30px rgba(0,20,45,.28), inset 0 1px 0 rgba(255,255,255,.25);
  animation:heroIn .7s var(--ease-out) forwards;
  transition:transform .32s var(--ease-out), box-shadow .32s, border-color .32s;
}
/* faixa de acento no topo do card */
.hero-mini-stats .s::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--sol),var(--sol-2),transparent);
  transform:scaleX(.35); transform-origin:left; transition:transform .4s var(--ease-out);
}
.hero-mini-stats .s:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(0,20,45,.4), inset 0 1px 0 rgba(255,255,255,.3); border-color:rgba(245,166,35,.55); }
.hero-mini-stats .s:hover::before{ transform:scaleX(1); }
.hero-mini-stats .s:nth-child(1){ animation-delay:.8s; }
.hero-mini-stats .s:nth-child(2){ animation-delay:.92s; }
.hero-mini-stats .s:nth-child(3){ animation-delay:1.04s; }
/* valor: número grande + unidade menor alinhados pela base */
.hero-mini-stats .s .v{
  display:flex; align-items:baseline; gap:.28em; line-height:1; margin-bottom:7px;
  font-family:'Bebas Neue','Anton',var(--fonte-display); font-weight:400;
  font-size:clamp(2.1rem,3.2vh,2.7rem); letter-spacing:.5px;
  background:linear-gradient(120deg,var(--sol-2) 10%,#fff 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--sol-2);
  font-variant-numeric:tabular-nums;
}
.hero-mini-stats .s .v .u{ font-style:normal; font-size:.42em; letter-spacing:1.4px; text-transform:uppercase; opacity:.92; }
.hero-mini-stats .s .l{
  display:block; font-family:var(--fonte-texto); font-size:.8rem; font-weight:500;
  color:#c3d8ee; letter-spacing:.5px; line-height:1.35;
}

/* Ondas animadas do hero (tiles SVG em background-position — loop perfeito) */
.hero-waves{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; height:var(--onda-h,190px); pointer-events:none; }
.hero-waves .wv{ position:absolute; left:0; right:0; bottom:0; height:100%; background-repeat:repeat-x; background-position:0 bottom; will-change:background-position; }
.hero-waves .wv1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 230' preserveAspectRatio='none'%3E%3Cpath fill='%230A5FB0' fill-opacity='.45' d='M0,105 C180,35 540,35 720,105 C900,175 1260,175 1440,105 L1440,230 L0,230 Z'/%3E%3C/svg%3E"); background-size:1440px 100%; animation:waveMove 15s linear infinite; }
.hero-waves .wv2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 230' preserveAspectRatio='none'%3E%3Cpath fill='%232A9D8F' fill-opacity='.35' d='M0,130 C220,60 520,200 720,130 C960,48 1180,200 1440,130 L1440,230 L0,230 Z'/%3E%3C/svg%3E"); background-size:1200px 100%; animation:waveMoveR 11s linear infinite; }
.hero-waves .wv3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 230' preserveAspectRatio='none'%3E%3Cpath fill='%23FBF9F3' d='M0,155 C200,100 500,100 720,150 C960,205 1180,112 1440,158 L1440,230 L0,230 Z'/%3E%3C/svg%3E"); background-size:1440px 100%; animation:waveMove 8s linear infinite; }
@keyframes waveMove{ 0%{ background-position:0 bottom;} 100%{ background-position:1440px bottom;} }
@keyframes waveMoveR{ 0%{ background-position:0 bottom;} 100%{ background-position:-1200px bottom;} }

/* Indicador de scroll */
.hero-scroll{
  position:absolute; left:50%; bottom:calc(var(--onda-h,190px) - 18px); transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:#cfe0f2; font-size:.72rem;
  letter-spacing:1.5px; text-transform:uppercase; opacity:0; animation:heroIn 1s ease 1.3s forwards;
}
.hero-scroll .mouse{ width:24px; height:38px; border:2px solid rgba(255,255,255,.6); border-radius:14px; position:relative; }
.hero-scroll .mouse::before{ content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; border-radius:2px; background:var(--sol-2); transform:translateX(-50%); animation:scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,12px);} }

/* ------------------------------------------------- Seções base */
.secao{ padding:96px 0; position:relative; overflow:hidden; }
.secao.creme{ background:var(--creme); }
.secao-titulo{ text-align:center; max-width:740px; margin:0 auto 54px; position:relative; z-index:2; }
.secao-titulo .tag{
  display:inline-block; color:var(--azul); font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:.8rem;
  padding:5px 14px; border-radius:999px; background:var(--azul-cl); margin-bottom:10px;
}
.secao.escuro .secao-titulo .tag{ color:var(--sol-2); background:rgba(245,166,35,.14); }
.secao-titulo h2{ font-family:var(--fonte-display); font-size:clamp(1.9rem,4vw,2.9rem); text-transform:uppercase; margin:6px 0 14px; }
.secao-titulo h2 .grad{ background:linear-gradient(120deg,var(--azul-2),var(--sol)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.secao-titulo p{ color:var(--cinza); font-size:1.06rem; }
.secao.escuro{ background:linear-gradient(160deg,#003A73,#00223f); color:#fff; }
.secao.escuro .secao-titulo p{ color:#cfe0f2; }

/* Formas decorativas flutuantes da marca (parallax leve) */
.deco{ position:absolute; z-index:0; pointer-events:none; opacity:.5; will-change:transform; }
.deco.sol{ width:130px; height:130px; border-radius:50%; background:radial-gradient(circle at 35% 35%,var(--sol-2),var(--sol) 65%,var(--laranja)); filter:blur(1px); box-shadow:0 0 60px rgba(245,166,35,.5); }
.deco.ring{ width:120px; height:120px; border-radius:50%; border:10px solid rgba(0,71,143,.14); }
.deco.blob{ width:180px; height:180px; border-radius:44% 56% 60% 40%/48% 42% 58% 52%; background:rgba(42,157,143,.12); animation:blobMorph 12s ease-in-out infinite; }
@keyframes blobMorph{ 0%,100%{ border-radius:44% 56% 60% 40%/48% 42% 58% 52%;} 50%{ border-radius:60% 40% 42% 58%/56% 60% 40% 44%;} }
.deco.float{ animation:floatY 9s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-22px);} }

/* Divisor de onda entre seções */
.wave-divider{ position:relative; line-height:0; margin-top:-1px; }
.wave-divider svg{ width:100%; height:80px; display:block; }

/* ------------------------------------------------- Reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change:opacity,transform; }
.reveal.left{ transform:translateX(-40px); }
.reveal.right{ transform:translateX(40px); }
.reveal.scale{ transform:scale(.92); }
.reveal.visivel{ opacity:1; transform:none; }

/* ------------------------------------------------- Cards de conteúdo (O Projeto) */
.cards-conteudo{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:2; }
.cc{
  background:#fff; border:1px solid var(--cinza-cl); border-radius:20px; padding:30px 26px;
  position:relative; overflow:hidden; transform-style:preserve-3d; transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.cc::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--sol),var(--laranja)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.cc::after{ content:""; position:absolute; width:220px; height:220px; top:var(--my,50%); left:var(--mx,50%); transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(245,166,35,.14), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none; }
.cc:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,71,143,.16); border-color:transparent; }
.cc:hover::before{ transform:scaleX(1); }
.cc:hover::after{ opacity:1; }
.cc .ic{
  display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:16px;
  background:linear-gradient(135deg,var(--azul-cl),#fff); font-size:1.9rem; margin-bottom:16px;
  box-shadow:0 8px 20px rgba(0,71,143,.12); animation:floatY 7s ease-in-out infinite;
}
.cc:nth-child(even) .ic{ animation-delay:-2s; }
.cc h3{ font-size:1.18rem; margin-bottom:8px; }
.cc p{ color:var(--cinza); font-size:.96rem; margin:0; }

/* ------------------------------------------------- Objetivos */
.objetivos{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; z-index:2; }
.obj{ text-align:center; padding:30px 16px; border-radius:20px; background:#fff; border:1px solid var(--cinza-cl); transition:transform .3s var(--ease-out), background .3s, box-shadow .3s; position:relative; overflow:hidden; }
.obj::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,var(--azul),var(--azul-esc)); opacity:0; transition:opacity .3s; z-index:0; }
.obj>*{ position:relative; z-index:1; }
.obj:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 20px 40px rgba(0,71,143,.22); }
.obj:hover::before{ opacity:1; }
.obj:hover, .obj:hover p{ color:#fff; }
.obj:hover p{ color:#dbe7f5; }
.obj .emoji{ font-size:2.5rem; display:block; margin-bottom:12px; transition:transform .3s var(--ease-spring); }
.obj:hover .emoji{ transform:scale(1.25) rotate(-6deg); }
.obj h4{ font-size:1rem; margin-bottom:6px; }
.obj p{ font-size:.85rem; color:var(--cinza); margin:0; }

/* ------------------------------------------------- A Maré */
.mare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; position:relative; z-index:2; }
.mare-texto p{ color:var(--cinza); font-size:1.04rem; }
.mare-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px; }
.mare-stat{
  position:relative; overflow:hidden; background:#fff; border:1px solid #dbe7f5; border-radius:18px;
  padding:22px 22px 20px 26px; transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
/* barra lateral de acento */
.mare-stat::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--azul-2),var(--azul)); transform:scaleY(.4); transform-origin:top;
  transition:transform .35s var(--ease-out);
}
.mare-stat:hover{ transform:translateY(-5px); border-color:var(--azul-2); box-shadow:0 18px 38px rgba(0,71,143,.16); }
.mare-stat:hover::before{ transform:scaleY(1); }
.mare-stat .v{
  display:flex; align-items:baseline; gap:.26em; line-height:1; margin-bottom:8px;
  font-family:'Bebas Neue','Anton',var(--fonte-display); font-weight:400;
  font-size:2.9rem; letter-spacing:.5px; color:var(--azul); font-variant-numeric:tabular-nums;
}
.mare-stat .v .u{ font-style:normal; font-size:.4em; letter-spacing:1.4px; text-transform:uppercase; color:var(--azul-2); }
.mare-stat .l{ display:block; font-size:.78rem; font-weight:600; color:var(--cinza); text-transform:uppercase; letter-spacing:1px; }
.mare-riscos{ display:flex; flex-direction:column; gap:14px; }
.risco{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--cinza-cl); border-radius:16px; padding:18px 20px; transition:transform .3s var(--ease-out), box-shadow .3s; }
.risco:hover{ transform:translateX(6px); box-shadow:0 12px 26px rgba(0,0,0,.08); }
.risco .rico{ font-size:1.8rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--creme); flex:none; }
.risco b{ display:block; }
.risco span{ color:var(--cinza); font-size:.9rem; }

/* ------------------------------------------------- Indicadores (escuro) */
#indicadores::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.6;
  background:radial-gradient(40% 50% at 15% 20%, rgba(10,95,176,.6), transparent 60%),
            radial-gradient(40% 50% at 85% 80%, rgba(245,166,35,.22), transparent 60%);
  animation:meshMove 20s ease-in-out infinite alternate; }
.indicadores{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:2; }
.ind{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:20px; padding:34px 22px; text-align:center; backdrop-filter:blur(6px); transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s; }
.ind:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(0,0,0,.3); border-color:rgba(245,166,35,.5); }
.ind .num{ font-family:var(--fonte-display); font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; background:linear-gradient(120deg,var(--sol),var(--sol-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ind .un{ font-size:1rem; color:var(--sol-2); }
.ind .rot{ margin-top:10px; font-weight:600; color:#eaf2fb; text-transform:uppercase; letter-spacing:.6px; font-size:.82rem; }
.metas-strip{ display:flex; justify-content:center; gap:44px; flex-wrap:wrap; margin-top:50px; padding-top:36px; border-top:1px solid rgba(255,255,255,.15); position:relative; z-index:2; }
.metas-strip .m{ text-align:center; min-width:150px; }
.metas-strip .m .v{
  display:block; font-family:'Bebas Neue','Anton',var(--fonte-display); font-weight:400;
  font-size:2.6rem; line-height:1; color:#fff; letter-spacing:.5px; margin-bottom:6px; font-variant-numeric:tabular-nums;
}
.metas-strip .m .l{ display:block; font-size:.76rem; color:#bcd3ea; text-transform:uppercase; letter-spacing:1px; line-height:1.4; }

/* ------------------------------------------------- Mapa */
#mapaPortal{ height:470px; border-radius:20px; border:1px solid var(--cinza-cl); z-index:1; box-shadow:0 20px 50px rgba(0,71,143,.12); }
.legenda-mapa{ display:flex; gap:20px; justify-content:center; margin-top:18px; flex-wrap:wrap; font-size:.88rem; color:var(--cinza); }
.legenda-mapa i{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }

/* ------------------------------------------------- Notícias */
.noticias-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:2; }
.noticia-card{ background:#fff; border:1px solid var(--cinza-cl); border-radius:20px; overflow:hidden; transition:transform .3s var(--ease-out), box-shadow .3s; display:flex; flex-direction:column; }
.noticia-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,71,143,.16); }
.noticia-card .capa-wrap{ overflow:hidden; aspect-ratio:16/10; }
.noticia-card .capa{ width:100%; height:100%; object-fit:cover; background:var(--cinza-bg); transition:transform .5s var(--ease-out); }
.noticia-card:hover .capa{ transform:scale(1.08); }
.noticia-card .corpo{ padding:20px 22px; flex:1; display:flex; flex-direction:column; }
.noticia-card .data{ font-size:.78rem; color:var(--azul); font-weight:700; text-transform:uppercase; }
.noticia-card h3{ font-size:1.12rem; margin:6px 0 8px; }
.noticia-card p{ color:var(--cinza); font-size:.92rem; flex:1; }

/* ------------------------------------------------- Parceiros (marquee) */
.parceiros-marquee{
  position:relative; overflow:hidden; padding:6px 0 26px; /* espaço p/ a sombra do hover não ser cortada */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.parceiros-track{ display:flex; gap:22px; width:max-content; animation:marquee 38s linear infinite; }
.parceiros-marquee:hover .parceiros-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.parceiro{
  background:#fff; border:1px solid var(--cinza-cl); border-radius:18px;
  padding:20px 26px; min-width:210px; min-height:112px; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
  transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.parceiro:hover{ transform:translateY(-5px); border-color:var(--azul-2); box-shadow:0 18px 38px rgba(0,71,143,.14); text-decoration:none; }
.parceiro img{ max-height:56px; max-width:158px; filter:grayscale(1); opacity:.7; transition:filter .3s, opacity .3s; }
.parceiro:hover img{ filter:none; opacity:1; }
/* selo com as iniciais quando não há logo */
.parceiro .sigla{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:linear-gradient(140deg,var(--azul),var(--azul-2)); color:#fff;
  font-family:'Bebas Neue','Anton',var(--fonte-display); font-size:1.28rem; letter-spacing:1.2px; line-height:1;
  box-shadow:0 8px 18px rgba(0,71,143,.28); transition:transform .3s var(--ease-spring);
}
.parceiro:hover .sigla{ transform:scale(1.08) rotate(-3deg); }
.parceiro .nome{
  font-family:var(--fonte-texto); font-weight:700; font-size:.9rem; color:var(--grafite);
  letter-spacing:.2px; line-height:1.3;
}

/* ------------------------------------------------- Transparência */
.docs-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; position:relative; z-index:2; }
.doc-item{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--cinza-cl); border-radius:16px; padding:18px 20px; transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.doc-item:hover{ transform:translateY(-3px); border-color:var(--azul); box-shadow:0 12px 26px rgba(0,71,143,.12); }
.doc-item .fic{ font-size:1.6rem; width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--azul-cl); flex:none; }
.doc-item b{ display:block; }
.doc-item span{ color:var(--cinza); font-size:.85rem; }

/* ------------------------------------------------- Contato */
.contato-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; position:relative; z-index:2; }
.contato-info .linha{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.contato-info .linha .ic{ width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--azul-cl),#fff); color:var(--azul); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:none; box-shadow:0 6px 16px rgba(0,71,143,.1); }
.contato-grid .card{ background:#fff; border:1px solid var(--cinza-cl); border-radius:20px; padding:28px; box-shadow:0 20px 50px rgba(0,71,143,.1); }
.contato-grid .card input, .contato-grid .card textarea{ transition:border-color .2s, box-shadow .2s; }
.contato-grid .card input:focus, .contato-grid .card textarea:focus{ border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,71,143,.12); outline:none; }

/* ------------------------------------------------- Rodapé */
.rodape{ background:var(--preto); color:#c7cdd4; padding:64px 0 28px; position:relative; }
.rodape .grid-rod{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px; }
.rodape img.logo-rod{ height:76px; margin-bottom:18px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.rodape h5{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.rodape a{ color:#c7cdd4; display:block; margin-bottom:8px; font-size:.92rem; transition:color .2s, transform .2s; }
.rodape a:hover{ color:var(--sol-2); transform:translateX(4px); text-decoration:none; }
.rodape .base{ border-top:1px solid #2a2a2a; margin-top:36px; padding-top:22px; font-size:.82rem; color:#8b929b; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ------------------------------------------------- Botão "voltar ao topo" */
.to-top{ position:fixed; right:22px; bottom:22px; z-index:120; width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--azul),var(--azul-2)); color:#fff; font-size:1.3rem; box-shadow:0 12px 28px rgba(0,71,143,.4);
  display:grid; place-items:center; opacity:0; transform:translateY(20px) scale(.8); pointer-events:none; transition:.35s var(--ease-spring); }
.to-top.on{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ transform:translateY(-4px) scale(1.06); }

/* ------------------------------------------------- Responsivo */
@media (max-width:960px){
  /* o hero deixa de ser flex-row: a logo empilha ACIMA do texto (não vira coluna ao lado) */
  .hero{ display:block; min-height:auto; padding:96px 0 calc(var(--onda-h) + 20px); text-align:left; }
  /* no mobile o texto ocupa a largura toda: esconde a cena 3D para nunca sobrepor */
  #heroCanvas{ display:none; }
  /* a logo volta para o fluxo, centralizada acima do texto */
  .hero-side{ position:static; width:100%; padding:0 0 18px; justify-content:center; }
  .hero-side .hero-logo-img{ width:min(64%,260px); margin:0; }
  .hero-texto{ max-width:none; }
  .hero-scroll{ display:none; }
  .cards-conteudo{ grid-template-columns:1fr 1fr; }
  .objetivos{ grid-template-columns:repeat(2,1fr); }
  .mare-grid, .contato-grid{ grid-template-columns:1fr; }
  .indicadores{ grid-template-columns:1fr 1fr; }
  .noticias-grid{ grid-template-columns:1fr; }
  .docs-lista{ grid-template-columns:1fr; }
  .rodape .grid-rod{ grid-template-columns:1fr; }
  .deco{ display:none; }
  .nav-links{
    position:fixed; top:0; right:-100%; height:100dvh; width:78%; max-width:340px; background:var(--creme-2); flex-direction:column;
    padding:96px 30px; gap:22px; transition:right .35s var(--ease-out); box-shadow:-12px 0 44px rgba(0,0,0,.25); align-items:flex-start;
  }
  .nav-links.aberto{ right:0; }
  .nav-links a{ color:var(--grafite)!important; font-size:1.12rem; }
  .nav-links a::after{ display:none; }
  .nav-cta{ color:#fff!important; }
  .nav-toggle{ display:block; }
}
@media (max-width:560px){
  .cards-conteudo, .objetivos, .indicadores{ grid-template-columns:1fr; }
  .secao{ padding:58px 0; }
  .secao-titulo{ margin-bottom:34px; }
  .secao-titulo h2{ font-size:clamp(1.65rem,7.6vw,2.1rem); }
  .secao-titulo p{ font-size:.96rem; }

  /* ---- navbar */
  .nav{ padding:10px 0; }
  .nav .logo img{ height:46px; }
  .nav.solid .logo img{ height:40px; }

  /* ---- hero */
  /* 112px: a logo nova é mais larga e, com 88px, a do menu encostava na do hero */
  .hero{ padding:112px 0 calc(var(--onda-h) + 16px); }
  .hero-side{ padding-bottom:14px; }
  .hero-side .hero-logo-img{ width:min(72%,230px); }
  .hero-badge{ font-size:.68rem; padding:7px 13px; letter-spacing:.5px; margin-bottom:16px; }
  .hero h1{ font-size:clamp(1.9rem,8.6vw,2.5rem); line-height:1.1; letter-spacing:1px; margin-bottom:12px; }
  .hero p.lead{ font-size:1rem; line-height:1.55; margin-bottom:22px; }
  /* CTAs em bloco, com área de toque confortável */
  .hero-ctas{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-ctas .btn{ width:100%; padding:15px 20px; font-size:1rem; }

  /* mini-stats: número e rótulo lado a lado, ocupando a largura toda */
  .hero-mini-stats{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .hero-mini-stats .s{
    display:flex; align-items:center; gap:14px; min-width:0; padding:13px 16px; border-radius:14px;
  }
  .hero-mini-stats .s .v{ margin-bottom:0; font-size:1.9rem; flex:none; }
  .hero-mini-stats .s .v .u{ font-size:.5em; }
  .hero-mini-stats .s .l{ font-size:.82rem; line-height:1.3; }

  /* ---- A Maré */
  .mare-stats{ grid-template-columns:1fr 1fr; gap:12px; }
  .mare-stat{ padding:16px 14px 14px 18px; border-radius:14px; }
  .mare-stat .v{ font-size:2rem; margin-bottom:5px; }
  .mare-stat .l{ font-size:.68rem; letter-spacing:.6px; }
  .mare-texto p{ font-size:.98rem; }
  .risco{ padding:14px 16px; gap:13px; }
  .risco .rico{ width:44px; height:44px; font-size:1.4rem; }
  .risco b{ font-size:.95rem; }
  .risco span{ font-size:.84rem; }

  /* ---- indicadores / metas */
  .ind{ padding:24px 18px; }
  .metas-strip{ display:grid; grid-template-columns:1fr 1fr; gap:22px 14px; margin-top:34px; padding-top:26px; }
  .metas-strip .m{ min-width:0; }
  .metas-strip .m .v{ font-size:2rem; }
  .metas-strip .m .l{ font-size:.68rem; letter-spacing:.6px; }

  /* ---- conteúdo geral */
  .cc{ padding:22px 20px; }
  .cc .ic{ width:52px; height:52px; font-size:1.6rem; margin-bottom:12px; }
  .obj{ padding:22px 14px; }
  #mapaPortal{ height:340px; }
  .parceiro{ min-width:170px; min-height:98px; padding:16px 20px; }
  .parceiro .sigla{ width:40px; height:40px; font-size:1.1rem; }
  .parceiro .nome{ font-size:.84rem; }
  .doc-item{ padding:14px 16px; }
  .contato-grid .card{ padding:20px 18px; }
  .contato-info .linha{ gap:13px; margin-bottom:16px; }
  .rodape{ padding:44px 0 24px; }
  .rodape .base{ flex-direction:column; gap:8px; }
  .to-top{ right:16px; bottom:16px; width:46px; height:46px; }
}

/* ------------------------------------------------- Aviso: loja em construção */
.aviso-topo{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:linear-gradient(100deg, var(--sol) 0%, var(--sol-2) 55%, #FFD79A 100%);
  color:#1A1200; box-shadow:0 2px 16px rgba(0,0,0,.18);
}
.aviso-topo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; opacity:.32;
  background:repeating-linear-gradient(135deg,#1A1200 0 10px,transparent 10px 20px);
}
.aviso-topo .container{
  width:min(1220px,92%); margin:0 auto; padding:10px 0;
  display:flex; align-items:center; gap:12px;
}
.aviso-topo .ic{ flex:none; font-size:1.15rem; line-height:1; }
.aviso-topo .txt{ flex:1 1 auto; margin:0; font-size:.92rem; font-weight:600; line-height:1.35; }
.aviso-topo .txt .curto{ display:none; }
.aviso-topo .txt b{ font-weight:800; }
.aviso-topo .tag{
  flex:none; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  background:rgba(26,18,0,.12); border:1px solid rgba(26,18,0,.18);
}
.aviso-topo .fechar{
  flex:none; width:32px; height:32px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(26,18,0,.10); color:#1A1200; font-size:.95rem; line-height:1;
  transition:background .2s var(--ease-out), transform .25s var(--ease-out);
}
.aviso-topo .fechar:hover{ background:rgba(26,18,0,.2); transform:rotate(90deg); }
.aviso-topo .fechar:focus-visible{ outline:2px solid #1A1200; outline-offset:2px; }

/* Com a faixa visível, a navbar e a barra de progresso descem */
body.com-aviso .nav{ top:var(--aviso-h,44px); }
body.com-aviso .scroll-progress{ top:var(--aviso-h,44px); }

@media (max-width:640px){
  .aviso-topo .container{ padding:8px 0; gap:8px; }
  .aviso-topo .txt{ font-size:.84rem; }
  .aviso-topo .txt .det{ display:none; }
  .aviso-topo .txt .curto{ display:inline; }
  .aviso-topo .tag{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .aviso-topo .fechar:hover{ transform:none; }
}