/* =========================================================================
   index-v2.css — camada visual adicional para index-v2.html
   Carregado DEPOIS de stylesindex.css e tailwind-build.css: só sobrescreve
   e adiciona, nunca duplica classes que o js/index.js e js/main.js dependem.
   ========================================================================= */

:root{
  --v2-p300:#6ee7b7; --v2-p400:#34d399; --v2-p500:#10b981; --v2-p600:#059669;
  --v2-line: rgba(238,247,242,.09);
  --v2-ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================================
   TIPOGRAFIA
   Plus Jakarta Sans nos títulos (mais arredondada e convidativa que Space
   Grotesk sozinha) · Space Grotesk reservado para acentos "técnicos"
   (kickers, números de estatística, nav) · Inter no corpo, como já era.
   ========================================================================= */
body.v2-page{ font-family:'Inter',sans-serif; }

body.v2-page .text-display,
body.v2-page .text-heading,
body.v2-page h1, body.v2-page h2, body.v2-page h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}

/* acento técnico: números, rótulos pequenos, navegação */
body.v2-page .v2-kicker,
body.v2-page .stats-card .counter,
body.v2-page #header .nav-link,
body.v2-page #header .dropdown-toggle,
body.v2-page .v2-ticker span{
  font-family:'Space Grotesk',sans-serif;
}

body.v2-page #hero-content-container h1.hero-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(3rem, 7.5vw, 6.2rem);
  font-weight:800;
  line-height:.98;
  background:linear-gradient(92deg,#ffffff 0%, #d7f5e8 45%, var(--v2-p300) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
  opacity:0; animation:v2rise .9s var(--v2-ease) .15s forwards;
}
body.v2-page #hero-content-container p.hero-subtitle{
  /* espaçamento acompanha o título, que também é fluido (clamp com vw) —
     em telas largas o h1 cresce bastante e uma margem fixa em px ficava
     desproporcionalmente pequena perto dele */
  margin-top:clamp(1.75rem, 4vw, 4rem) !important;
  margin-bottom:clamp(2.5rem, 6vw, 6rem) !important;
  opacity:0; animation:v2rise .9s var(--v2-ease) .32s forwards;
}
body.v2-page #hero-content-container p.hero-subtitle b{
  color:var(--v2-p300); font-weight:600;
}
body.v2-page #hero-content-container p.hero-subtitle .v2-hero-subtitle-italic{
  display:block; margin-top:.65rem;
  font-style:italic; color:#9ec5b5;
}
/* Os botões "Conheça Mais" / "Entre em Contato" que o js/index.js injeta em
   .hero-actions ficam ocultos na v2 — o rodapé do hero (.v2-hero-footer, com
   os chips temáticos) assume esse lugar. */
body.v2-page #hero-content-container .hero-actions{
  display:none !important;
}
@keyframes v2rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){
  body.v2-page #hero-content-container h1.hero-title,
  body.v2-page #hero-content-container p.hero-subtitle{ animation:none; opacity:1; }
}

/* seção "Pessoas": leve variação — um pouco mais arredondada/próxima, sem
   trocar de família (mantém harmonia), só ajusta peso e tracking */
body.v2-page #pessoas .pessoas-titulo{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600; letter-spacing:-0.01em;
}

/* =========================================================================
   FUNDO AURORA FIXO
   ========================================================================= */
/* Custo de performance: filter:blur() em elementos grandes é uma das coisas
   mais caras que dá pra pedir pro navegador renderizar — ainda mais ×4,
   continuamente, na página inteira. Raio de blur bem menor (o gradiente
   radial já dilui a borda sozinho, então o blur extra soma pouco ao
   resultado visual) + elementos um pouco menores. */
.v2-aurora{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.v2-blob{position:absolute; border-radius:50%; filter:blur(48px); opacity:.4; animation:v2drift 22s ease-in-out infinite alternate; will-change:transform}
.v2-blob.b1{width:44vw;height:44vw; background:radial-gradient(circle,#0d9668 0%,transparent 70%); top:-16vw; left:-10vw}
.v2-blob.b2{width:38vw;height:38vw; background:radial-gradient(circle,#0ea5a3 0%,transparent 70%); top:40vh; right:-12vw; animation-delay:-7s}
.v2-blob.b3{width:30vw;height:30vw; background:radial-gradient(circle,#0ea5a3 0%,transparent 70%); top:120vh; left:20%; animation-delay:-14s}
.v2-blob.b4{width:34vw;height:34vw; background:radial-gradient(circle,#0d9668 0%,transparent 70%); top:220vh; right:5%; animation-delay:-4s}
@keyframes v2drift{ from{transform:translate(0,0) scale(1)} to{transform:translate(5vw,-4vw) scale(1.12)} }
@media (prefers-reduced-motion:reduce){ .v2-blob{animation:none} }

/* Uma cor só, sólida (sem gradiente), pra TODA seção — inclusive a faixa do
   ticker logo abaixo. Antes cada seção tinha um tom ligeiramente diferente
   (alguns eram gradientes, o ticker usava outro valor ainda), e a costura
   entre uma seção e outra ficava visível/inconsistente. Uma cor fixa elimina
   esse problema de vez, não importa quantas seções existam.

   IMPORTANTE: a cor vai como "background" DIRETO na seção, não num ::before
   filho. Testado ao vivo: seções com conteúdo mais alto que 100dvh rolam
   por dentro (overflow-y:auto) — um ::before absolutamente posicionado
   dentro delas rola JUNTO com o conteúdo e some da tela ao descer, abrindo
   um vão sem cor de fundo. O background do próprio elemento não tem esse
   problema (fica fixo atrás do conteúdo que rola). */
:root{
  --v2-tone: rgba(8,14,12,.7);
  /* versão opaca da mesma cor, pra elementos que não podem ficar
     translúcidos (ex.: o card da UESPI, que não usa blur) */
  --v2-tone-solid: #0c1512;
}
/* Só no modo fullpage: lá cada seção é um "slide" que precisa de fundo
   próprio. Em páginas comuns isso repintaria todas as seções. */
html.v2-magnetic-root body main > section{ position:relative; z-index:1; background:var(--v2-tone) !important; }
/* a #energia-3d é a exceção: tem seu próprio céu (sky-top/mid/horizon), que
   já é opaco o bastante e muda de cor com o horário do dia — um overlay
   fixo por cima quebraria esse efeito. */
body.v2-page #energia-3d{ background:transparent !important; }
/* #giperts é uma seção própria, sempre em fundo branco — não segue o tom
   verde-escuro unificado do resto da v2 (pedido explícito de design). */
body.v2-page #giperts{ background:#fff !important; }
/* O rodapé (partials/footer-main.html) é compartilhado com o site "clássico"
   e vem com bg-gray-900 (um cinza-azulado do Tailwind) — nada a ver com o
   tom verde-escuro unificado da v2. Como ele mora dentro da última seção
   (#contato, pro scroll fullpage conseguir alcançá-lo), sem isso sobra bem
   visível a costura entre o fundo da seção e o do rodapé. */
body.v2-page #footer-wrapper footer{
  background:var(--v2-tone-solid) !important;
  border-top-color:rgba(110,231,183,.14) !important;
}
/* #contato usa "py-20" (padding-top E padding-bottom de 5rem). O padding de
   cima ainda faz sentido (respiro depois do breadcrumb), mas o de baixo
   sobra vazio depois do rodapé — que já tem o próprio respiro interno —
   deixando ~80px de nada antes do fim real do scroll. */
html.v2-magnetic-root body #contato{ padding-bottom:0; }
html.v2-magnetic-root body main > section + section{ border-top:1px solid var(--v2-line) }

/* =========================================================================
   NAVBAR — pílula flutuante em glass
   ========================================================================= */
body.v2-page #header{
  top:14px !important; left:50% !important; right:auto !important;
  transform:translateX(-50%);
  width:min(1180px, calc(100% - 28px));
  border-radius:20px;
  border:1px solid rgba(110,231,183,.14);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  transition: width .65s var(--v2-ease),
              left .65s var(--v2-ease),
              transform .65s var(--v2-ease),
              border-radius .65s var(--v2-ease),
              background-color .5s ease,
              box-shadow .5s ease,
              border-color .5s ease,
              padding .5s var(--v2-ease);
}
/* Nome "NUFPERPI" no header: anima suavemente */
body.v2-page #header .v2-header-name{
  display:inline; overflow:hidden;
  max-width:200px; opacity:1;
  transition: max-width .5s var(--v2-ease), opacity .35s ease .1s, margin .4s var(--v2-ease);
  white-space:nowrap;
}
body.v2-page #header.header-transparent{
  background-color:rgba(9,17,15,.45) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-color:rgba(110,231,183,.1);
}
body.v2-page #header.header-scrolled{
  background-color:rgba(9,17,15,.72) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-color:rgba(110,231,183,.22);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
body.v2-page #header .px-6.py-4{ padding-top:.65rem; padding-bottom:.65rem }
body.v2-page #header .nav-link{
  border-radius:12px; font-size:.88rem; position:relative;
}
body.v2-page #header .nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1.5px;
  background:var(--v2-p400); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--v2-ease);
}
body.v2-page #header .nav-link:hover::after{ transform:scaleX(1); }
body.v2-page #header .nav-link:hover,
body.v2-page #header .dropdown-toggle:hover{
  background:rgba(110,231,183,.09);
}
body.v2-page #header .dropdown-menu{
  background:rgba(13,23,20,.92); backdrop-filter:blur(10px);
  border-color:rgba(110,231,183,.16);
}
/* No fullpage o header flutua sobre o hero e não deve reservar espaço.
   Em páginas comuns o padding-top do <main> é justamente o que impede o
   conteúdo de ficar escondido atrás do header fixo — não pode ser zerado. */
html.v2-magnetic-root body main{ padding-top:0 }

/* Navbar sobre seção clara — a navbar é fixa e flutua por cima de qualquer
   seção; a maioria é escura (vidro escuro + texto claro funciona bem), mas
   #giperts é branca de propósito e esse mesmo vidro ficava quase ilegível
   em cima dela (cinza lavado, texto sem contraste). Sempre que a seção
   ativa marca data-header-theme="light" (ver updateNavbarState em
   index-v2-extra.js), a navbar inverte pra vidro claro + texto escuro. */
/* Dois jeitos de ligar o tema claro da navbar:
     - .v2-header-on-light no #header  -> dinâmico, na home (o JS liga ao
       entrar numa seção marcada com data-header-theme="light");
     - .v2-page-light no <body>        -> estático, em páginas que são
       claras do começo ao fim (ex.: giperts.html). */
body.v2-page #header.v2-header-on-light,
body.v2-page-light #header{
  border-color:rgba(15,23,20,.1);
}
body.v2-page #header.v2-header-on-light.header-transparent,
body.v2-page #header.v2-header-on-light.header-scrolled,
body.v2-page-light #header.header-transparent,
body.v2-page-light #header.header-scrolled{
  background-color:rgba(255,255,255,.75) !important;
  box-shadow:0 10px 40px rgba(15,23,20,.12);
}
body.v2-page #header.v2-header-on-light.v2-header-compact,
body.v2-page-light #header.v2-header-compact{
  background-color:rgba(255,255,255,.85) !important;
  border-color:rgba(15,23,20,.12);
  box-shadow:0 6px 24px rgba(15,23,20,.15);
}
body.v2-page #header.v2-header-on-light .v2-header-name,
body.v2-page #header.v2-header-on-light .nav-link,
body.v2-page #header.v2-header-on-light .dropdown-toggle,
body.v2-page-light #header .v2-header-name,
body.v2-page-light #header .nav-link,
body.v2-page-light #header .dropdown-toggle{
  color:#0f1512;
}
body.v2-page #header.v2-header-on-light .nav-link:hover,
body.v2-page #header.v2-header-on-light .dropdown-toggle:hover,
body.v2-page-light #header .nav-link:hover,
body.v2-page-light #header .dropdown-toggle:hover{
  background:rgba(5,150,105,.1);
  color:#0f1512;
}
body.v2-page #header.v2-header-on-light .dropdown-toggle i,
body.v2-page #header.v2-header-on-light #mobile-menu-button,
body.v2-page-light #header .dropdown-toggle i,
body.v2-page-light #header #mobile-menu-button{
  color:#0f1512;
}
body.v2-page #header.v2-header-on-light .h-6.w-px,
body.v2-page-light #header .h-6.w-px{
  background-color:rgba(15,23,20,.15);
}

/* =========================================================================
   HERO — selo de marca e rodapé com temas
   (os 2 botões "Conheça Mais" / "Entre em Contato" que o js/index.js injeta
   em #hero-content-container continuam existindo no HTML — são só
   escondidos via .hero-actions lá em cima, porque são gerados a partir do
   Firestore e não dá pra remover do lado do HTML sem mexer em js/index.js)
   ========================================================================= */

/* rótulo de contexto: nada de selo/pílula repetindo o logo do header (que já
   fica sempre visível, fixo no topo) — só um texto pequeno e discreto,
   coerente com o "kicker" usado no resto do site */
.v2-hero-kicker{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:clamp(20px, 2.4vw, 38px);
  padding:8px 18px 8px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(9,17,15,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--v2-p300);
  opacity:0; animation:v2rise .8s var(--v2-ease) 0s forwards;
}
/* ícone do kicker: silhueta preenchida do Piauí (images/piaui-mapa-solida.png),
   gerada a partir do contorno original — o contorno "vazado" (só a linha,
   sem preenchimento) ficava fino demais e sumia quando reduzido a ícone.
   Invertida pra branco (o preto sumia contra o painel glass escuro). */
.v2-hero-kicker img{
  width:20px; height:20px; object-fit:contain;
  filter:invert(1);
}
@media (prefers-reduced-motion:reduce){ .v2-hero-kicker{ animation:none; opacity:1 } }

/* rodapé do hero: ticker contínuo com as áreas de atuação, no lugar dos
   botões antigos. Motivo de ser um ticker (e não uma linha de chips fixa,
   como antes) — com as 4 novas frentes de pesquisa somando 8 tags ao todo,
   não cabia mais numa linha sem quebrar ou espremer a hero. */
.v2-hero-ticker-wrap{
  position:relative; z-index:1; width:min(720px, 100%);
  margin:clamp(48px, 7vw, 130px) auto 0;
  overflow:hidden; padding:12px 0;
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  opacity:0; animation:v2rise .9s var(--v2-ease) .5s forwards;
}
.v2-hero-ticker{ display:flex; gap:12px; width:max-content; animation:v2tick 32s linear infinite }
.v2-hero-ticker:hover{ animation-play-state:paused }
.v2-hero-chip{
  font-size:.82rem; font-weight:500; color:#dff5ea; white-space:nowrap;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px); transition:border-color .25s, background .25s, transform .25s;
}
.v2-hero-chip em{ color:var(--v2-p400); font-style:normal; margin-right:8px; }
.v2-hero-chip:hover{
  border-color:var(--v2-p400); background:rgba(52,211,153,.12); transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){ .v2-hero-ticker-wrap{ animation:none; opacity:1 } .v2-hero-ticker{ animation:none } }

/* convite pra rolar: fica ancorado no rodapé do hero, some assim que a
   seção deixa de ser a primeira (só faz sentido lá) */
.v2-hero-scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:20; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#dff5ea; border:1px solid rgba(255,255,255,.2); background:rgba(9,17,15,.35);
  backdrop-filter:blur(6px); cursor:pointer;
  animation:v2bounce 2.2s ease-in-out infinite;
  opacity:0; animation:v2rise .8s var(--v2-ease) .65s forwards, v2bounce 2.2s ease-in-out 1.4s infinite;
  transition:border-color .25s, background .25s;
}
.v2-hero-scroll-cue:hover{ border-color:var(--v2-p400); background:rgba(52,211,153,.14); }
@keyframes v2bounce{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(6px) } }
@media (max-width:640px){ .v2-hero-scroll-cue{ bottom:16px; width:32px; height:32px; } }
@media (prefers-reduced-motion:reduce){ .v2-hero-scroll-cue{ animation:none; opacity:1 } }

/* =========================================================================
   HERO — correção de vazamento vertical
   #inicio usa "flex items-center justify-center" (Tailwind) pra centralizar
   o conteúdo na tela toda. Isso ignora o #header, que é fixed e fica POR
   CIMA da seção (não reserva espaço no fluxo) — em telas mais baixas (ex.:
   notebook 1366×768, celular em paisagem) o bloco centralizado (kicker +
   h1 + parágrafo + ticker, com fontes grandes em clamp) fica mais alto que
   o espaço livre, e a metade de cima é empurrada pra trás do header: fica
   inacessível, porque a seção já começa com scrollTop 0 (não dá pra rolar
   "pra cima" e revelar o que passou do topo).
   Troca: padding-top/bottom reserva a área do header e do botão de rolar
   (que são fixed/absolute), e "margin:auto" no bloco de conteúdo faz a
   centralização ceder graciosamente pro topo — respeitando o padding —
   em vez de estourar por trás do header. Se ainda sobrar conteúdo, o
   overflow-y:auto que a seção já tem (ver "main.v2-magnetic > section"
   abaixo) resolve rolando pra baixo normalmente. */
#inicio{
  padding-top:104px; padding-bottom:72px;
  justify-content:flex-start;
}
#inicio > .relative.z-20{ margin-top:auto; margin-bottom:auto; }
@media (max-width:640px){ #inicio{ padding-top:88px; padding-bottom:56px; } }

/* Telas baixas (notebooks comuns, celular em paisagem): reduz a escala do
   clamp de fontes/margens do hero, que hoje só reage à largura (vw), não à
   altura — então em telas largas porém baixas continuava gigante demais. */
@media (max-height:920px){
  body.v2-page #hero-content-container h1.hero-title{ font-size:clamp(2.4rem, 6vw, 4.4rem); }
  body.v2-page #hero-content-container p.hero-subtitle{
    margin-top:clamp(.9rem, 2.2vw, 1.75rem) !important;
    margin-bottom:clamp(1.1rem, 2.8vw, 2rem) !important;
  }
  .v2-hero-kicker{ margin-bottom:clamp(12px, 1.6vw, 20px); }
  .v2-hero-ticker-wrap{ margin:clamp(20px, 4vw, 44px) auto 0; }
}
/* Extremo: celular em paisagem. Sem espaço nem pro ticker/seta de rolar —
   o miolo (kicker + título + texto) é o que importa aqui. */
@media (max-height:420px){
  .v2-hero-ticker-wrap, .v2-hero-scroll-cue{ display:none; }
}

/* =========================================================================
   FULLPAGE SCROLL — uma seção por vez
   Controlado via JS (index-v2-extra.js). Cada seção ocupa no MÍNIMO 100dvh
   (pode ser maior se o conteúdo precisar). O scroll do mouse muda de seção
   inteira com animação suave. Seções maiores que a tela rolam internamente.
   ========================================================================= */
html.v2-magnetic-root{
  overflow:hidden;
  height:100vh; height:100dvh;
}
/* ATENÇÃO: travar o scroll do body pertence ao MODO fullpage (só a home),
   não à identidade visual. Por isso depende de html.v2-magnetic-root, e não
   de body.v2-page — senão qualquer página que adote a identidade v2 ficaria
   sem rolagem nenhuma. */
html.v2-magnetic-root body{
  overflow:hidden;
  height:100vh; height:100dvh;
}
main.v2-magnetic{
  position:fixed;
  top:0; left:0; width:100%;
  transition: transform .85s var(--v2-ease);
  will-change:transform;
}
main.v2-magnetic > section{
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  display:flex; flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  position:relative;
  box-sizing:border-box;
  /* As 12 seções inteiras (com cards, imagens, blur etc.) ficam sempre no
     DOM — só uma por vez fica visível (as outras são "empurradas" pra fora
     da tela via transform no <main>). Sem isso, o navegador segue fazendo
     layout/paint das outras 11 o tempo todo. content-visibility:auto pula
     esse trabalho para o que está fora da viewport (o navegador detecta
     sozinho), o que é a maior economia de performance desta página. */
  content-visibility:auto;
  contain-intrinsic-size:auto 100dvh;
}
main.v2-magnetic > section::-webkit-scrollbar{ display:none; width:0; height:0; }
/* ticker e containers intermediários ocupam espaço mas não são "slides" */
main.v2-magnetic > .v2-ticker-wrap{ flex:none; }
main.v2-magnetic > div:not(.v2-ticker-wrap){ flex:none; }
@media (prefers-reduced-motion:reduce){
  main.v2-magnetic{ transition:none; }
}

/* =========================================================================
   SCROLLBAR CUSTOMIZADA
   Esconde completamente a barra de rolagem nativa (tanto o track/fundo
   quanto o thumb) em todos os navegadores, e mostra no lugar uma barra
   fina verde fixa à direita que preenche conforme a posição do scroll.
   ========================================================================= */
html{
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE / Edge Legacy */
}
html::-webkit-scrollbar{     /* Chrome, Safari, Edge Chromium */
  display:none; width:0; height:0;
}
body{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body::-webkit-scrollbar{
  display:none; width:0; height:0;
}

/* Track da barra customizada: totalmente transparente (invisível) */
.v2-scrollbar-track{
  position:fixed; top:0; right:0; width:4px; height:100vh; height:100dvh;
  z-index:9998; background:transparent; pointer-events:none;
}
/* Preenchimento verde que indica a posição do scroll */
.v2-scrollbar-fill{
  position:absolute; top:0; left:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--v2-p300), var(--v2-p600));
  box-shadow:0 0 14px rgba(52,211,153,.55);
  border-radius:2px;
  transition: height .85s var(--v2-ease);
}

/* =========================================================================
   NAVBAR — modo compacto (minimizado) ao sair do hero
   Quando o usuário rola pra fora do hero, a navbar encolhe suavemente até
   virar uma pílula com apenas o logo no canto superior esquerdo. Clicar
   nela expande o menu completo de volta (sem mudar de seção).
   ========================================================================= */
/* Navegação e botões extras: escondem suavemente no modo compacto */
body.v2-page #header .v2-nav-collapsible{
  /* IMPORTANTE: overflow precisa ser "visible" enquanto a navbar está
     expandida. Os menus dropdown (Institucional, Ensino, Pesquisa,
     Acessibilidade, Idiomas) são absolutos e abrem ABAIXO desta faixa
     (que tem só ~42px de altura) — com overflow:hidden aqui eles eram
     recortados por completo e ficavam invisíveis, dando a impressão de
     que os botões não funcionavam. O recorte só é necessário no modo
     compacto, onde o max-width anima até 0 (regra abaixo). */
  overflow:visible;
  max-width:900px; opacity:1;
  transition: max-width .65s var(--v2-ease),
              opacity .4s ease .08s,
              margin .55s var(--v2-ease);
}
body.v2-page #header.v2-header-compact .v2-nav-collapsible{
  overflow:hidden;
  max-width:0; opacity:0; margin-left:0; margin-right:0;
  pointer-events:none;
}
/* Nome "NUFPERPI" ao lado do logo: esconde no compacto */
body.v2-page #header.v2-header-compact .v2-header-name{
  max-width:0; opacity:0; margin-left:0; margin-right:0;
}
/* Logo: um pouco maior no compacto para ficar mais clicável */
body.v2-page #header.v2-header-compact #header-logo-container{
  width:38px; height:38px;
  transition: width .5s var(--v2-ease), height .5s var(--v2-ease);
}
/* Modo compacto: pílula no canto superior esquerdo */
body.v2-page #header.v2-header-compact{
  width:auto !important;
  min-width:0;
  left:20px !important;
  transform:translateX(0);
  border-radius:999px;
  cursor:pointer;
  border-color:rgba(110,231,183,.22);
  background-color:rgba(9,17,15,.65) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(0,0,0,.4), 0 0 16px rgba(52,211,153,.08);
}
body.v2-page #header.v2-header-compact .px-6.py-4{
  padding:.45rem .7rem;
}
body.v2-page #header.v2-header-compact:hover{
  border-color:rgba(110,231,183,.45);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(52,211,153,.18);
  transform:translateX(0) scale(1.06);
}
/* separador vertical: some no compacto */
body.v2-page #header .h-6.w-px{ transition:opacity .4s ease, width .4s ease; }
body.v2-page #header.v2-header-compact .h-6.w-px{ opacity:0; width:0; }

/* botão mobile MENU: esconder no compacto */
body.v2-page #header.v2-header-compact #mobile-menu-button{
  max-width:0; opacity:0; overflow:hidden; padding:0; pointer-events:none;
  transition: max-width .4s ease, opacity .3s ease;
}

/* link do logo: tirar o space-x no compacto para não sobrar gap */
body.v2-page #header.v2-header-compact a[href*="inicio"]{
  gap:0;
}

@media (prefers-reduced-motion:reduce){
  body.v2-page #header,
  body.v2-page #header .v2-nav-collapsible,
  body.v2-page #header .v2-header-name{ transition:none; }
}

/* =========================================================================
   CABEÇALHO EDITORIAL DE SEÇÃO (kicker + título)
   ========================================================================= */
.v2-kicker{
  color:var(--v2-p400); font-weight:600; font-size:.8rem; letter-spacing:.28em;
  text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:12px;
}
.v2-kicker::after{
  content:""; flex:0 0 44px; height:1px; background:var(--v2-p600);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--v2-ease);
}
.fade-in-section.is-visible .v2-kicker::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .v2-kicker::after{ transform:scaleX(1); transition:none } }

/* =========================================================================
   CARDS — sistema visual único para TODO card do site
   Cobre .card (projetos, notícias, laboratórios, cursos, uespi), .faculty-card
   (docentes/equipe) e .developer-card, além das células novas do bento — todos
   com o mesmo fundo, borda, glow e comportamento de hover.
   ========================================================================= */
body.v2-page .card,
body.v2-page .faculty-card,
body.v2-page .developer-card,
body.v2-page .v2-glass-cell,
body.v2-page .v2-bento-side .stats-card,
body.v2-page .v2-bento-sobre .stats-card{
  position:relative; overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  /* preto translúcido de verdade (não gradiente cinza opaco) — é isso que
     faz o backdrop-filter abaixo ter algum efeito visível de vidro fosco */
  background:
    linear-gradient(160deg, rgba(16,185,129,.10), transparent 55%),
    rgba(6,12,11,.55);
  /* este é o efeito de vidro repetido em mais cards ao mesmo tempo na tela
     (grades de laboratórios, estatísticas, carrosséis) — raio bem menor que
     o resto do site pra manter a página fluida mesmo com vários cards juntos */
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;
  transition:transform .35s var(--v2-ease), border-color .35s, box-shadow .35s, background .35s;
}
body.v2-page .swiper-slide .card,
body.v2-page .swiper-slide > a.card{ border-radius:22px; }

/* barra de acento no topo: fica bem sutil em repouso e acende no hover —
   antes só existia em .card, agora todo o sistema de cards compartilha */
body.v2-page .card::before,
body.v2-page .faculty-card::before,
body.v2-page .developer-card::before,
body.v2-page .v2-glass-cell::before,
body.v2-page .v2-bento-side .stats-card::before,
body.v2-page .v2-bento-sobre .stats-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--v2-p600), var(--v2-p400));
  opacity:.35; transform:scaleX(.4); transform-origin:left;
  transition:transform .35s var(--v2-ease), opacity .35s;
}
body.v2-page .card:hover::before,
body.v2-page .faculty-card:hover::before,
body.v2-page .developer-card:hover::before,
body.v2-page .v2-glass-cell:hover::before,
body.v2-page .v2-bento-side .stats-card:hover::before,
body.v2-page .v2-bento-sobre .stats-card:hover::before{
  transform:scaleX(1); opacity:1;
}

/* hover: leve elevação + inclinação 3D, glow verde, borda acesa — em todo card */
body.v2-page .card:hover,
body.v2-page .faculty-card:hover,
body.v2-page .developer-card:hover,
body.v2-page .v2-glass-cell:hover,
body.v2-page .v2-bento-side .stats-card:hover,
body.v2-page .v2-bento-sobre .stats-card:hover{
  transform:translateY(-6px) rotateX(2deg);
  border-color:var(--v2-p500);
  box-shadow:0 24px 50px -16px rgba(16,185,129,.35);
}
@media (prefers-reduced-motion:reduce){
  body.v2-page .card, body.v2-page .faculty-card, body.v2-page .developer-card,
  body.v2-page .v2-glass-cell, body.v2-page .v2-bento-side .stats-card,
  body.v2-page .v2-bento-sobre .stats-card{ transition:none; }
  body.v2-page .card:hover, body.v2-page .faculty-card:hover, body.v2-page .developer-card:hover,
  body.v2-page .v2-glass-cell:hover, body.v2-page .v2-bento-side .stats-card:hover,
  body.v2-page .v2-bento-sobre .stats-card:hover{ transform:none; }
}

.v2-glass-cell{ padding:22px; }

/* estatísticas dentro do bento: grade 2x nas telas médias+ */
.v2-bento-side .stats-carousel-container{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  overflow:visible; scroll-snap-type:none; padding:0; margin:0;
}
.v2-bento-side .stats-card{ flex:auto; width:auto; border-radius:20px; padding:22px 16px; }
.v2-bento-side #uespi{ border-radius:22px; overflow:hidden }

/* revelação escalonada: cada célula/card entra com um pequeno atraso quando
   a seção-mãe fica visível, em vez de tudo aparecer de uma vez */
.fade-in-section .v2-glass-cell,
.fade-in-section .v2-bento-side .stats-card,
.fade-in-section .v2-bento-sobre .stats-card,
.fade-in-section #developers-container .developer-card,
.fade-in-section .swiper-slide{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--v2-ease), transform .55s var(--v2-ease);
}
.fade-in-section.is-visible .v2-glass-cell,
.fade-in-section.is-visible .v2-bento-side .stats-card,
.fade-in-section.is-visible .v2-bento-sobre .stats-card,
.fade-in-section.is-visible #developers-container .developer-card,
.fade-in-section.is-visible .swiper-slide{
  opacity:1; transform:translateY(0);
}
.fade-in-section.is-visible .v2-bento-side .stats-card:nth-child(1),
.fade-in-section.is-visible .v2-bento-sobre .stats-card:nth-child(1){ transition-delay:.05s }
.fade-in-section.is-visible .v2-bento-side .stats-card:nth-child(2),
.fade-in-section.is-visible .v2-bento-sobre .stats-card:nth-child(2){ transition-delay:.1s }
.fade-in-section.is-visible .v2-bento-side .stats-card:nth-child(3),
.fade-in-section.is-visible .v2-bento-sobre .stats-card:nth-child(3){ transition-delay:.15s }
.fade-in-section.is-visible .v2-bento-side .stats-card:nth-child(4),
.fade-in-section.is-visible .v2-bento-sobre .stats-card:nth-child(4){ transition-delay:.2s }
.fade-in-section.is-visible .v2-bento-side .stats-card:nth-child(5),
.fade-in-section.is-visible .v2-bento-sobre .stats-card:nth-child(5){ transition-delay:.25s }
.fade-in-section.is-visible #developers-container .developer-card:nth-child(1){ transition-delay:0s }
.fade-in-section.is-visible #developers-container .developer-card:nth-child(2){ transition-delay:.1s }
.fade-in-section.is-visible #developers-container .developer-card:nth-child(3){ transition-delay:.2s }
@media (prefers-reduced-motion:reduce){
  .fade-in-section .v2-glass-cell,
  .fade-in-section .v2-bento-side .stats-card,
  .fade-in-section .v2-bento-sobre .stats-card,
  .fade-in-section #developers-container .developer-card,
  .fade-in-section .swiper-slide{ opacity:1; transform:none; transition:none }
}

/* =========================================================================
   BENTO — seção "Sobre" reorganizada
   ========================================================================= */
.v2-bento-sobre{
  display:flex; flex-direction:column; gap:2.5rem; margin-top:2rem; width:100%;
}
.v2-about-grid{
  display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; width:100%;
}
@media (min-width:1024px){
  .v2-about-grid{ grid-template-columns:5fr 7fr; }
}
.v2-bento-sobre .stats-carousel-container{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:1rem;
  overflow:visible; padding:0; margin:0; width:100%;
}
.v2-bento-sobre .stats-card{ flex:auto; width:auto; border-radius:20px; padding:1.5rem 1rem; text-align:center; }

/* =========================================================================
   VÍDEO — player da seção "O núcleo", mesma linguagem de vidro/glow dos
   cards (borda sutil, glow verde no hover, controles em vidro fosco em vez
   da barra preta chapada que vinha do site clássico).
   ========================================================================= */
body.v2-page #video-wrapper{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .35s var(--v2-ease), box-shadow .35s var(--v2-ease);
}
body.v2-page #video-wrapper:hover{
  border-color:var(--v2-p500);
  box-shadow:0 24px 50px -16px rgba(16,185,129,.35);
}
body.v2-page #play-button > div{
  background:linear-gradient(135deg, var(--v2-p400), var(--v2-p600));
  box-shadow:0 10px 34px -8px rgba(16,185,129,.65);
}
body.v2-page .video-controls{
  background:linear-gradient(to top, rgba(6,12,11,.92) 0%, rgba(6,12,11,.55) 65%, transparent 100%);
  backdrop-filter:blur(8px) saturate(1.2);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  padding:0.85rem 1.1rem;
}
body.v2-page .video-control-btn:hover{ color:var(--v2-p400); }
body.v2-page #progress-container{ background:rgba(255,255,255,.14); }
body.v2-page #progress-bar{ background:linear-gradient(90deg, var(--v2-p600), var(--v2-p400)); }
body.v2-page #progress-bar::after{ background-color:var(--v2-p400); border-color:var(--v2-tone-solid); }
body.v2-page #volume-slider{ background:rgba(255,255,255,.2); }
body.v2-page #volume-slider::-webkit-slider-thumb,
body.v2-page #volume-slider::-moz-range-thumb{ background:var(--v2-p400); }
@media (prefers-reduced-motion:reduce){
  body.v2-page #video-wrapper{ transition:none; }
}
.v2-bento-sobre #uespi{ border-radius:22px; overflow:hidden; width:100%; }
/* o js/index.js injeta uma <section class="pt-20"> dentro do cartão UESPI;
   dentro do bento esse respiro extra vira um buraco — zera aqui */
body.v2-page #uespi-card-container section{ padding-top:0; }
/* Este card carrega a própria foto de fundo (não precisa do "vidro" da
   aurora) e, mais importante: backdrop-filter dentro de um ancestral com
   transform (main.v2-magnetic, usado pelo scroll fullpage) é um combo com
   bug conhecido no Chromium — o card pode renderizar em preto/vazio.
   Removendo o blur aqui evita o bug e também fica visualmente mais limpo. */
body.v2-page #uespi-card-container .card{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  /* mesma cor unificada das seções (var(--gray-800) do Tailwind destoava —
     era um cinza-azulado, criava uma "moldura" visível ao redor do card) */
  background:var(--v2-tone-solid);
}

/* =========================================================================
   DESTAQUE DE AUTORIA — "Por Trás do Código"
   O primeiro card renderizado (campo "order" no Firestore, coleção
   "developers") ganha um tratamento maior/em destaque — o resto da equipe
   continua listada normalmente. Ajuste a ordem no painel admin.
   ========================================================================= */
#developers-container{ align-items:stretch; }
#developers-container .developer-card:first-child{
  position:relative;
  padding:36px 34px !important;
  border:1px solid rgba(110,231,183,.3) !important;
  background:
    linear-gradient(160deg, rgba(16,185,129,.16), transparent 55%),
    rgba(6,12,11,.55) !important;
  box-shadow:0 20px 60px -20px rgba(16,185,129,.35);
  transform:scale(1.06);
}
#developers-container .developer-card:first-child .developer-card-img{
  width:132px; height:132px;
}
#developers-container .developer-card:first-child h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.6rem;
}
@media (min-width:768px){
  #developers-container .developer-card:first-child{ flex-basis:100%; max-width:380px; }
}

/* =========================================================================
   TICKER de áreas de pesquisa
   ========================================================================= */
.v2-ticker-wrap{
  position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--v2-line); border-bottom:1px solid var(--v2-line);
  background:var(--v2-tone); backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.v2-ticker{ display:flex; gap:52px; width:max-content; padding:14px 0; animation:v2tick 28s linear infinite }
.v2-ticker span{ font-weight:700; font-size:1rem; color:#3d5f52; white-space:nowrap; letter-spacing:.04em }
.v2-ticker span em{ color:var(--v2-p500); font-style:normal; margin-right:52px }
@keyframes v2tick{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .v2-ticker{ animation:none } }

/* =========================================================================
   SEÇÃO SOLAR — rastreador fotovoltaico com ciclo dia/noite
   100% CSS (sem WebGL/Three.js) para funcionar em qualquer tamanho de tela.
   O progresso do dia (0..1) por padrão segue o relógio real do visitante;
   passar o mouse (ou arrastar, no touch) sobre a seção assume o controle
   (esquerda = manhã, direita = noite). Tudo isso é lido/escrito via custom
   properties abaixo por js/solar-day-cycle.js.
   ========================================================================= */
#energia-3d{
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  padding:0 !important;
  position:relative;
}
.v2-3d-wrap{
  position:relative; width:100%; height:100% !important; min-height:100dvh !important;
  border-radius:0; display:flex; align-items:center; cursor:pointer;
  --sky-top:#04252b; --sky-mid:#062f2a; --sky-horizon:#0a3b30;
  --sun-x:15%; --sun-y:85%; --sun-op:0;
  --moon-x:15%; --moon-y:85%; --moon-op:0;
  --night:.5; --cloud-op:.5; --cloud-bright:1; --dusk-op:0;
  --panel-tilt:0deg; --scene-light:1;
  --land-far:rgb(46,86,74); --sea-top:rgb(30,140,155); --sea-bottom:rgb(10,90,110); --sand-color:rgb(190,165,120);
}


.v2-3d-overlay{
  position:relative; z-index:2; padding:32px clamp(20px,3.4vw,40px); max-width:420px;
  /* mais afastado da borda da tela (antes ficava colado) — e menor, pra
     cobrir menos da cena 3D atrás (painéis, pás das turbinas) */
  margin:0 0 0 clamp(24px,6vw,72px);
  pointer-events:none;
  /* sol/lua/nuvens se movem por toda a cena (controlável pelo mouse) e podem
     passar bem atrás do texto em qualquer tamanho de tela — um véu sólido
     (não gradiente, pra não sobrar ponto fraco de contraste) garante leitura
     em qualquer horário, sem precisar prever onde os astros vão estar */
  /* NUNCA backdrop-filter aqui: este overlay vive dentro de main.v2-magnetic,
     que usa transform pro scroll fullpage — a combinação transform +
     backdrop-filter tem bug conhecido no Chromium (renderiza preto/vazio,
     já visto no card da UESPI). Opacidade sólida alta resolve sem o risco. */
  background:rgba(4, 9, 8, .88);
  border-radius:24px;
}
.v2-3d-overlay *{ pointer-events:auto }
.v2-3d-overlay h2{ font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:700; line-height:1.1; color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.6) }
.v2-3d-overlay p{ color:#cfe8dd; margin-top:12px; line-height:1.6; font-size:.9rem;
  text-shadow:0 2px 16px rgba(0,0,0,.7) }

.solar-time-readout{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'Space Grotesk',sans-serif; font-size:.85rem; color:#dff5ea;
  padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(6,14,12,.45); backdrop-filter:blur(8px);
}
.solar-time-sep{ opacity:.5 }
.solar-time-hint{ font-size:.72rem; opacity:.65; padding-left:10px; border-left:1px solid rgba(255,255,255,.18); }
@media (max-width:640px){ .solar-time-hint{ display:none } }

/* =========================================================================
   PAINEL DE DADOS AO VIVO da cena 3D — os números reagem à interação
   (horário do sol nas cenas solares; velocidade do vento na eólica).
   ========================================================================= */
.v2-3d-data{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
.v2-3d-data-item{
  padding:12px 14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(6,14,12,.55);
  display:flex; flex-direction:column; gap:3px;
}
/* a última métrica é sempre a potência gerada — o número que resume a cena */
.v2-3d-data-item.is-highlight{
  border-color:rgba(110,231,183,.4);
  background:linear-gradient(150deg, rgba(52,211,153,.16), rgba(6,14,12,.55));
}
.v2-3d-data-value{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(1rem,1.5vw,1.25rem); color:#fff; line-height:1.1;
  font-variant-numeric:tabular-nums; /* números não "dançam" ao atualizar */
}
.v2-3d-data-item.is-highlight .v2-3d-data-value{ color:var(--v2-p300); }
.v2-3d-data-label{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:#9ec5b5; line-height:1.2;
}
@media (max-width:640px){
  .v2-3d-data{ gap:7px; }
  .v2-3d-data-item{ padding:9px 10px; border-radius:13px; }
  .v2-3d-data-label{ font-size:.6rem; letter-spacing:.05em; }
}

/* modo manual (ligado por clique — ver js/solar-day-cycle.js): cursor muda
   pra deixar claro que mexer o mouse agora move o horário */
.v2-3d-wrap.solar-manual{ cursor:ew-resize; }

/* Cena 3D real (WebGL, js/energia-3d.js) por cima da ilustração CSS — fica
   escondida (display:none) até o three.js confirmar que carregou e a
   primeira cena estar pronta, pra nunca mostrar um canvas em branco. Só
   nesse momento a ilustração CSS abaixo dela é escondida. */
#energia-3d-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:none;
}
.v2-3d-wrap.three-ready .solar-sky,
.v2-3d-wrap.three-ready .solar-land{ display:none; }
.v2-3d-wrap.three-ready #energia-3d-canvas{ display:block; }

/* =========================================================================
   CONTROLES DA CENA 3D — alternar geração (PV / CSP+TES) + tela cheia
   Ficam escondidos (hidden no HTML) até js/energia-3d.js confirmar que a
   cena carregou; não fazem sentido sobre a ilustração CSS estática.
   ========================================================================= */
.v2-3d-controls{
  position:absolute; z-index:3; top:18px; right:18px;
  display:flex; align-items:center; gap:8px;
  pointer-events:auto;
  transition:top .45s var(--v2-ease);
}
/* Navbar expandida ocupa a faixa do topo inteira e passaria POR CIMA destes
   botões (ambos moram no topo/direita). Enquanto ela estiver aberta, os
   controles descem pra logo abaixo dela. Ver syncHeaderExpandedFlag() em
   js/index-v2-extra.js, que liga/desliga .v2-nav-expanded no <body>. */
body.v2-nav-expanded .v2-3d-controls{ top:92px; }
.v2-3d-scene-btn{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:600;
  color:#cfe8dd; white-space:nowrap;
  padding:9px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(6,14,12,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  cursor:pointer; transition:background .25s, border-color .25s, color .25s, transform .2s;
}
.v2-3d-scene-btn:hover{ border-color:rgba(110,231,183,.4); transform:translateY(-1px); }
.v2-3d-scene-btn.is-active{
  color:#04120d; background:linear-gradient(135deg, var(--v2-p400), var(--v2-p600));
  border-color:transparent; box-shadow:0 6px 20px -6px rgba(16,185,129,.6);
}
.v2-3d-icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#dff5ea;
  border:1px solid rgba(255,255,255,.16); background:rgba(6,14,12,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  cursor:pointer; transition:border-color .25s, background .25s, transform .25s;
}
.v2-3d-icon-btn:hover{ border-color:var(--v2-p400); background:rgba(52,211,153,.16); transform:scale(1.06); }
@media (max-width:640px){
  .v2-3d-controls{ top:auto; bottom:18px; right:12px; left:12px; justify-content:flex-end; flex-wrap:wrap; }
  /* font-size:0 no botão colapsa o texto solto (sem span) a zero, sobrando
     só o ícone — que recupera o próprio tamanho na regra seguinte */
  .v2-3d-scene-btn{ padding:9px 11px; font-size:0; gap:0; }
  .v2-3d-scene-btn i{ font-size:.95rem; }
}

/* dica sutil de que dá pra clicar nos pontos da cena — some sozinha depois
   do primeiro clique num hotspot (ver js/energia-3d.js) */
.v2-3d-hotspot-hint{
  position:absolute; z-index:3; left:50%; bottom:18px; transform:translateX(-50%);
  font-family:'Space Grotesk',sans-serif; font-size:.74rem; color:#cfe8dd;
  padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(6,14,12,.55); backdrop-filter:blur(8px);
  opacity:.9; animation:v2HotspotHintPulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes v2HotspotHintPulse{ 0%,100%{ opacity:.65 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .v2-3d-hotspot-hint{ animation:none; opacity:.85 } }
@media (max-width:640px){ .v2-3d-hotspot-hint{ bottom:auto; top:18px; left:12px; right:12px; transform:none; text-align:center; } }

/* cartão de explicação de um componente clicado (heliostato, torre,
   tanque, tracker...) — mesma linguagem visual do overlay principal */
.v2-3d-info-card{
  position:absolute; z-index:4; right:18px; bottom:18px; max-width:320px;
  padding:18px 20px 20px; border-radius:20px;
  border:1px solid rgba(110,231,183,.28);
  background:rgba(4,12,10,.92);
  box-shadow:0 20px 50px -16px rgba(0,0,0,.65);
  pointer-events:none;
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .25s ease, transform .25s ease;
}
/* Fechado (mesmo antes do primeiro clique, antes do atributo "hidden" sair
   de cena) não pode capturar cliques — senão bloqueia hotspots e o
   clique-pra-controlar-horário embaixo dele, mesmo invisível. */
.v2-3d-info-card.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.v2-3d-info-card h4{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.02rem; font-weight:700;
  color:var(--v2-p300); margin:0 26px 8px 0;
}
.v2-3d-info-card p{ font-size:.86rem; line-height:1.55; color:#dfeee8; margin:0; }
.v2-3d-info-close{
  position:absolute; top:14px; right:14px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  color:#cfe8dd; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  cursor:pointer; transition:background .2s, color .2s;
}
.v2-3d-info-close:hover{ background:rgba(255,255,255,.14); color:#fff; }
@media (max-width:640px){
  .v2-3d-info-card{ left:12px; right:12px; bottom:12px; max-width:none; }
}

/* Fullscreen (js/energia-3d.js, Fullscreen API): o elemento vira a própria
   janela — reforça isso explicitamente pra evitar qualquer letterboxing
   default do navegador num <div>. */
.v2-3d-wrap:fullscreen,
.v2-3d-wrap:-webkit-full-screen{
  width:100vw; height:100vh; max-height:100vh;
}

/* céu: gradiente que interpola cores conforme o horário */
.solar-sky{
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-horizon) 100%);
}

/* estrelas: campo de pontos fixo; a opacidade acompanha --night */
.solar-stars{
  position:absolute; inset:0; opacity:var(--night); transition:opacity 1.2s linear;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 10% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 22% 8%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 32% 26%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 44% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 20%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 68% 6%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 78% 22%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 88% 14%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 6% 34%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 94% 30%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 50% 8%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 15% 42%, #fff, transparent);
}

.solar-sun{
  position:absolute; width:min(9vw, 84px); height:min(9vw, 84px); border-radius:50%;
  left:var(--sun-x); top:var(--sun-y); transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%, #fff9e6, #ffd679 45%, #ffab4a 100%);
  box-shadow:0 0 60px 18px rgba(255,190,90,.55), 0 0 140px 50px rgba(255,150,60,.25);
  opacity:var(--sun-op);
}
.solar-moon{
  position:absolute; width:min(6.5vw, 62px); height:min(6.5vw, 62px); border-radius:50%;
  left:var(--moon-x); top:var(--moon-y); transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 32%, #f4f6ef, #d9dde6 55%, #b9c0cf 100%);
  box-shadow:0 0 34px 8px rgba(210,220,235,.35), 0 0 80px 24px rgba(180,195,220,.12);
  opacity:var(--moon-op); overflow:hidden;
}
.solar-moon-crater{ position:absolute; border-radius:50%; background:rgba(150,158,175,.45); }
.solar-moon-crater.c1{ width:22%; height:22%; top:22%; left:28%; }
.solar-moon-crater.c2{ width:14%; height:14%; top:52%; left:58%; }
.solar-moon-crater.c3{ width:10%; height:10%; top:30%; left:64%; }

/* brilho quente no horizonte, visível só no nascer/pôr do sol (--dusk-op) */
.solar-horizon-glow{
  position:absolute; left:var(--sun-x); bottom:24%;
  width:70vw; height:44vh; transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 60% at center bottom,
    rgba(255,148,68,.5), rgba(255,110,70,.22) 45%, transparent 72%);
  opacity:var(--dusk-op); pointer-events:none;
}

/* nuvens: silhuetas SVG fofas (elipses agrupadas), em profundidades e
   velocidades diferentes; escurecem junto com o cair da noite via filtro */
.solar-clouds{ position:absolute; inset:0; opacity:var(--cloud-op); }
.solar-cloud{
  position:absolute; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='55' cy='62' rx='36' ry='20'/%3E%3Cellipse cx='100' cy='44' rx='44' ry='27'/%3E%3Cellipse cx='150' cy='52' rx='44' ry='24'/%3E%3Cellipse cx='192' cy='66' rx='30' ry='16'/%3E%3Cellipse cx='120' cy='70' rx='75' ry='18'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
  filter:blur(1px) brightness(var(--cloud-bright));
}
.solar-cloud.c1{ width:220px; height:82px; top:12%; left:-260px; animation:cloudDrift 52s linear infinite; }
.solar-cloud.c2{ width:150px; height:56px; top:25%; left:-260px; animation:cloudDrift 68s linear infinite; animation-delay:-24s; opacity:.8; }
.solar-cloud.c3{ width:280px; height:105px; top:5%;  left:-320px; animation:cloudDrift 84s linear infinite; animation-delay:-46s; opacity:.65; }
.solar-cloud.c4{ width:110px; height:41px; top:33%; left:-240px; animation:cloudDrift 42s linear infinite; animation-delay:-12s; opacity:.85; }
.solar-cloud.c5{ width:180px; height:67px; top:19%; left:-280px; animation:cloudDrift 60s linear infinite; animation-delay:-38s; opacity:.7; }
@keyframes cloudDrift{ from{ transform:translateX(0) } to{ transform:translateX(calc(100vw + 340px)) } }
/* seção fora da tela (ver IntersectionObserver em solar-day-cycle.js):
   pausa as animações CSS pra não gastar GPU à toa em segundo plano */
.solar-paused .solar-cloud, .solar-paused .solar-blades{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .solar-cloud{ animation:none; left:18%; }
  .solar-cloud.c2{ left:52%; } .solar-cloud.c3{ left:70%; }
  .solar-cloud.c4{ left:8%; }  .solar-cloud.c5{ left:38%; }
}

/* paisagem: litoral inspirado em Luís Correia (referência eólica no Piauí) —
   dunas distantes, mar e areia em camadas, turbinas e placas na faixa de
   areia. As cores de cada camada vêm de custom properties atualizadas pelo
   JS conforme o horário (dia → entardecer arroxeado → noite escura). */
.solar-land{ position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none; }

.solar-mountains{ position:absolute; left:0; right:0; bottom:0; }
.solar-mountains.far{
  height:55%;
  background:linear-gradient(180deg, var(--land-far), color-mix(in srgb, var(--land-far) 45%, black));
  clip-path:polygon(0 100%, 0 52%, 7% 36%, 15% 50%, 25% 26%, 35% 46%, 45% 22%,
    56% 44%, 66% 18%, 76% 42%, 86% 28%, 94% 45%, 100% 34%, 100% 100%);
}

/* mar: duas camadas de cor (horizonte mais claro, profundidade mais escura)
   + ondas sutis derivando, igual em espírito às nuvens */
.solar-sea{
  position:absolute; left:0; right:0; bottom:0; height:38%; overflow:hidden;
  background:linear-gradient(180deg, var(--sea-top), var(--sea-bottom));
}
.solar-sea::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.3);
}
.solar-wave{
  position:absolute; left:-20%; width:140%; height:3px; border-radius:50%;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 30px, transparent 30px 70px);
  opacity:.4;
}
.solar-wave.w1{ bottom:70%; animation:waveDrift 15s linear infinite; }
.solar-wave.w2{ bottom:42%; opacity:.3; animation:waveDrift 11s linear infinite reverse; }
.solar-wave.w3{ bottom:16%; opacity:.5; animation:waveDrift 8.5s linear infinite; }
@keyframes waveDrift{ from{ transform:translateX(0) } to{ transform:translateX(70px) } }
@media (prefers-reduced-motion:reduce){ .solar-wave{ animation:none } }

/* areia: faixa clara em primeiro plano, onde turbinas e placas "pisam" */
.solar-sand{
  position:absolute; left:0; right:0; bottom:0; height:16%;
  background:linear-gradient(180deg, var(--sand-color), color-mix(in srgb, var(--sand-color) 55%, black));
}

/* turbinas eólicas: torre + nacele + 3 pás girando, escurecem à noite */
.solar-turbine{
  --th:150px; --blade:52px;
  position:absolute; bottom:3%; width:6px; height:var(--th);
  filter:brightness(var(--scene-light));
}
.solar-turbine.t1{ left:46%; --th:140px; --blade:48px; }
.solar-turbine.t2{ left:60%; --th:108px; --blade:37px; bottom:5%; }
.solar-turbine.t3{ left:35%; --th:82px; --blade:28px; bottom:6%; }
.solar-turbine.t4{ left:70%; --th:70px; --blade:24px; bottom:7%; }
.solar-turbine::before{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:5px; height:100%;
  background:linear-gradient(180deg, #e8efe9, #97a5a0);
  clip-path:polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.solar-hub{
  position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:12px; height:10px; border-radius:40%;
  background:linear-gradient(#f4f8f4,#c2cdc7); z-index:2;
}
.solar-blades{
  position:absolute; top:0; left:50%; width:0; height:0; z-index:1;
  animation:bladeSpin 3.4s linear infinite;
}
.solar-turbine.t2 .solar-blades{ animation-duration:4.2s; }
.solar-turbine.t3 .solar-blades{ animation-duration:2.9s; }
.solar-blades i{
  position:absolute; top:0; left:-2px; width:4px; height:var(--blade);
  border-radius:45% 45% 50% 50%; background:linear-gradient(180deg, #f2f7f2, #cfdad4);
  transform-origin:top center;
}
.solar-blades i:nth-child(1){ transform:rotate(0deg); }
.solar-blades i:nth-child(2){ transform:rotate(120deg); }
.solar-blades i:nth-child(3){ transform:rotate(240deg); }
@keyframes bladeSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .solar-blades{ animation:none } }

/* placas fotovoltaicas com rastreador (giram seguindo o sol). São 3 grupos
   em profundidades diferentes — uma "usina" de verdade, não uma placa só —
   todas seguem o mesmo --panel-tilt (herdado do :root, sem JS extra). */
.solar-array{
  position:absolute; bottom:4%; transform-origin:50% 100%;
  transform:rotate(var(--panel-tilt));
  transition:transform 1.4s var(--v2-ease);
  filter:brightness(var(--scene-light));
}
.solar-array-front{ right:8%; width:min(34vw, 270px); bottom:4%; z-index:3; }
.solar-array-mid{ right:34%; width:min(20vw, 150px); bottom:6%; z-index:2; opacity:.92; }
.solar-array-back{ right:52%; width:min(12vw, 90px); bottom:8%; z-index:1; opacity:.8; }
.solar-pole{
  position:absolute; left:50%; bottom:-16px; width:6px; height:34px; transform:translateX(-50%);
  background:linear-gradient(#95a2ad,#4d5a63); border-radius:2px;
}
.solar-array-mid .solar-pole{ height:24px; bottom:-12px; }
.solar-array-back .solar-pole{ height:16px; bottom:-8px; width:4px; }
.solar-panel-row{ display:flex; gap:5px; position:relative; z-index:1; }
.solar-panel-row + .solar-panel-row{ margin-top:4px; }
.solar-panel{
  flex:1; aspect-ratio:1.45/1; border-radius:3px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.28) 0%, transparent 32%),
    repeating-linear-gradient(90deg, rgba(160,200,255,.16) 0 2px, transparent 2px 25%),
    repeating-linear-gradient(0deg, rgba(160,200,255,.1) 0 2px, transparent 2px 46%),
    linear-gradient(160deg, #16436b, #0a2138);
  border:1px solid rgba(190,220,255,.3);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
@media (max-width:640px){
  .solar-array-front{ right:4%; width:min(50vw, 200px); }
  .solar-array-mid{ right:38%; width:min(24vw, 110px); }
  .solar-array-back{ display:none; } /* tela estreita: evita amontoar demais */
  .solar-turbine.t1{ --th:96px; --blade:32px; }
  .solar-turbine.t2{ --th:74px; --blade:25px; }
  .solar-turbine.t3{ --th:56px; --blade:19px; }
  .solar-turbine.t4{ --th:48px; --blade:16px; }

  /* Em telas estreitas o texto ocupa a largura toda e pode coincidir com a
     posição do sol/lua atrás dele (que se move por toda a cena). Em vez de
     tentar prever/evitar a posição deles, garante legibilidade com um
     painel translúcido atrás do texto — resolve para qualquer horário. */
  /* a regra base (.v2-3d-overlay, lá em cima) já cobre opacidade/legibilidade
     em qualquer tela — aqui só o respiro lateral que a tela estreita pede */
  .v2-3d-overlay{ margin:0 14px; }
}

@media (max-width:400px){
  body.v2-page #header{ width:calc(100% - 16px); top:10px }
}