/* ============================================================
   IBS · Instituto Brasileiro de Energia Solar
   Folha de estilo do site do ecossistema

   Marca: manual Santo Estudio + Dossie de Contexto Camada 1
   Azul Royal #0A30FF (primaria) · Navy #14266E · Navy profundo #15192D
   Tipografia Lato · Grafismo de assinatura: listras diagonais
   Dourado NAO e cor oficial e nao aparece aqui.

   Estrutura deste arquivo (mantenha a ordem):
     1. TOKENS        6. HERO           11. TOGGLE DE VISAO
     2. RESET         7. SECOES         12. TABELAS
     3. UTILITARIOS   8. CARDS          13. CONTATO
     4. GRAFISMO      9. NUMEROS        14. RODAPE
     5. CABECALHO    10. CAMINHOS       15. RESPONSIVO
   ============================================================ */

/* ===================== 1. TOKENS ===================== */
:root{
  /* ---- 1.1 Paleta institucional oficial (nao mexer) ---- */
  --royal:#0A30FF;
  --navy:#14266E;
  --navy-deep:#15192D;
  --white:#FFFFFF;
  --ice:#F5F6F8;

  /* ---- 1.2 Cores de frente (a cor segue o PRODUTO ofertado) ----
     REGRA: cor viva e PREENCHIMENTO (barra, borda, icone).
     A versao "-ink" e a unica que pode virar TEXTO.
     Escrever com --green ou --orange reprova contraste. */
  --green:#3AAA35;
  --green-lime:#C1D225;
  --green-deep:#044354;
  --orange:#F58220;        /* IBS Energia · hex provisorio */
  --green-ink:#2C8028;     /* 4,97:1 no branco */
  --orange-ink:#B95A07;    /* 4,64:1 no branco, mesmo matiz do --orange */

  /* ---- 1.3 Chao: fundos nomeados, sempre chapados ---- */
  --chao-branco:#FFFFFF;
  --chao-gelo:#F5F6F8;
  --chao-escuro:#15192D;

  /* ---- 1.4 Texto e superficie: SEMANTICOS ----
     Estes sao reescritos em bloco dentro de .escuro (secao 4).
     Use sempre estes tokens, nunca --navy-deep ou #4A5169 direto,
     senao o componente passa a depender de qual e o chao. */
  --txt-1:#15192D;              /* titulo                        */
  --txt-2:#4A5169;              /* corpo            7,86:1       */
  --txt-3:#666F8C;              /* nota, letra miuda 4,98:1      */
  --txt-acc:#0A30FF;            /* eyebrow           7,29:1      */
  --txt-num:#0A30FF;            /* numero grande                 */
  --sup-1:#FFFFFF;              /* superficie de card            */
  --sup-2:#FFFFFF;              /* superficie elevada            */
  --linha:#E3E8F2;
  --linha-forte:#CFD8EA;

  /* Apelidos dos nomes antigos: o HTML existente segue funcionando
     e passa a ser ciente do chao de graca. */
  --ink:var(--txt-1);
  --ink-soft:var(--txt-2);
  --ink-faint:var(--txt-3);
  --line:var(--linha);
  --line-dark:rgba(255,255,255,.13);

  /* ---- 1.5 Tipografia ---- */
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --t-display:clamp(40px,6.2vw,78px);
  --t-h1:clamp(31px,3.9vw,50px);
  --t-h2:clamp(24px,2.5vw,33px);
  --t-h3:20px;
  --t-h4:16.5px;
  --t-lead:clamp(17px,1.5vw,20px);
  --t-sm:15px;
  --t-xs:13.5px;
  --t-eyebrow:12.5px;
  --t-num:clamp(34px,3.8vw,56px);

  --tr-display:-.035em; --tr-h1:-.028em; --tr-h2:-.022em;
  --tr-h3:-.015em;      --tr-xs:.005em;  --tr-eyebrow:.17em;
  --tr-num:-.04em;

  /* ---- 1.6 Ritmo ---- */
  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --pad-sec:clamp(60px,6.2vw,92px);
  --pad-sec-compacta:clamp(44px,4.4vw,64px);
  --radius:16px;
  --radius-lg:24px;
  --radius-sm:10px;

  /* ---- 1.7 Grafismo ---- */
  --ang:-58deg;                        /* angulo de assinatura   */
  --listra-w:2px; --listra-gap:22px; --listra-a:.055;
  --cel:26px;                          /* passo da celula        */
  --cel-l:rgba(255,255,255,.045);      /* finger, no escuro      */
  --cel-b:rgba(255,255,255,.085);      /* busbar, no escuro      */
  --seam-h:56px;                       /* altura da costura      */
  --grad-irrad:radial-gradient(120% 78% at 76% -12%,
     rgba(10,48,255,.45) 0%, rgba(10,48,255,.14) 36%, transparent 68%);
  --grad-fio:linear-gradient(90deg,transparent,
     var(--royal) 20%,#5C7CFF 52%,var(--royal) 80%,transparent);

  /* ---- 1.8 Profundidade ----
     No claro, profundidade e sombra. No escuro, profundidade e luz:
     sombra escura sobre navy e invisivel. Os tokens --elev-2 e --elev-3
     sao REATRIBUIDOS dentro de .escuro, entao o componente e escrito
     uma vez so e fica certo nos dois chaos. */
  --elev-1:0 1px 0 rgba(20,38,110,.05);
  --elev-2:0 1px 2px rgba(21,25,45,.04),
           0 8px 16px -8px rgba(20,38,110,.14),
           0 24px 48px -24px rgba(20,38,110,.16);
  --elev-3:0 2px 4px rgba(21,25,45,.06),
           0 14px 28px -10px rgba(20,38,110,.20),
           0 40px 72px -32px rgba(10,48,255,.24);
  --elev-d2:inset 0 1px 0 rgba(255,255,255,.08),
            0 18px 40px -22px rgba(0,0,0,.80);
  --elev-d3:inset 0 1px 0 rgba(255,255,255,.14),
            0 24px 56px -24px rgba(0,0,0,.85),
            0 12px 40px -14px rgba(10,48,255,.40);
  --anel:0 0 0 1px rgba(10,48,255,.5),0 0 0 4px rgba(10,48,255,.16);
  --glow:0 10px 32px -10px rgba(10,48,255,.55);

  /* Apelidos antigos de sombra */
  --shadow-card:var(--elev-2);
  --shadow-card-hi:var(--elev-3);

  /* ---- 1.9 Movimento ---- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-1:.18s; --dur-2:.28s; --dur-3:.45s; --dur-corrente:4.2s;

  /* Altura do cabecalho. Usada pelo toggle sticky. */
  --header-h:76px;
}

/* ===================== 2. RESET ===================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  background:var(--navy-deep);   /* so aparece no overscroll, casa com o rodape */
}
body{
  font-family:var(--font);
  color:var(--txt-1);
  background:var(--chao-branco);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}
b,strong{font-weight:700;}

/* Escala tipografica com tracking POR DEGRAU. Um valor unico para
   titulo de card de 20px e manchete de 66px deixa o grande solto
   e o pequeno apertado. */
h1,h2,h3,h4{font-weight:900;text-wrap:balance;}
h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:var(--tr-h1);}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:var(--tr-h2);}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:var(--tr-h3);}
h4{font-size:var(--t-h4);line-height:1.3;letter-spacing:-.005em;}
p{text-wrap:pretty;}

/* Foco visivel para navegacao por teclado */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--royal);outline-offset:3px;border-radius:4px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  /* Animacao INFINITA precisa de animation:none. Com duration .01ms ela
     apenas completa e reinicia sem parar, mantendo o compositor ocupado. */
  .selo,.fio-carga{animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ===================== 3. UTILITARIOS ===================== */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.wrap-slim{max-width:900px;margin:0 auto;padding:0 24px;}

/* Animacao de entrada. Curta e discreta de proposito: 24px e .7s lia
   como animacao de scroll parafusada por cima do layout. */
.reveal{
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}
.reveal.on{opacity:1;transform:none;}

/* Numeros sempre com largura tabular, para nao dancarem ao animar */
.tabular{font-variant-numeric:tabular-nums;}

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

/* ===================== 4. GRAFISMO ===================== */
/* A IBS nao vende placa, vende a fiacao entre uma usina e uma conta.
   Entao o site nao ilustra energia solar: ele DESENHA o modulo e o
   barramento. Todo chao escuro carrega a face de um modulo (fingers a
   cada --cel, busbar a cada quarta linha) mais a listra diagonal da
   marca, e recebe luz sempre do mesmo ponto, o canto superior direito.

   .listras = face de modulo sobre chao escuro
   .listras-luz = so a diagonal, sobre chao claro
      (chao claro NAO leva grade de celula: uma linha navy a 5% sobre
       o gelo derruba a letra miuda abaixo de 4,5:1) */
.listras{position:relative;overflow:hidden;overflow:clip;isolation:isolate;}
.listras::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(var(--ang),
      rgba(255,255,255,var(--listra-a)) 0 var(--listra-w),
      transparent var(--listra-w) var(--listra-gap)),
    repeating-linear-gradient(90deg, var(--cel-b) 0 1.5px,
      transparent 1.5px calc(var(--cel) * 4)),
    repeating-linear-gradient(90deg, var(--cel-l) 0 1px, transparent 1px var(--cel)),
    repeating-linear-gradient(0deg,  var(--cel-l) 0 1px, transparent 1px var(--cel));
  /* A textura desaparece na base, que e onde mora o corpo de texto e a
     letra miuda. Assim grafismo nunca come contraste. */
  -webkit-mask-image:linear-gradient(180deg,#000 0 52%,rgba(0,0,0,.28) 100%);
          mask-image:linear-gradient(180deg,#000 0 52%,rgba(0,0,0,.28) 100%);
}
.listras>*{position:relative;z-index:1;}

.listras-luz{position:relative;overflow:hidden;overflow:clip;}
.listras-luz::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(var(--ang),
    rgba(20,38,110,.045) 0 2px, transparent 2px 22px);
  -webkit-mask-image:linear-gradient(180deg,#000 0 46%,rgba(0,0,0,.2) 100%);
          mask-image:linear-gradient(180deg,#000 0 46%,rgba(0,0,0,.2) 100%);
}
.listras-luz>*{position:relative;z-index:1;}

/* .brilho agora e uma GARANTIA DE CONTENCAO, nao uma decoracao.
   O brilho em si virou o campo de irradiancia dentro de .escuro/.hero,
   entao ele entra sempre do mesmo canto em toda secao escura em vez de
   depender de o autor lembrar de juntar .brilho com .listras. */
.brilho{position:relative;overflow:hidden;overflow:clip;isolation:isolate;}

/* Fundo escuro institucional.
   Um bloco unico troca o site inteiro de chao claro para chao escuro.
   Isto substitui as regras ".escuro .alguma-coisa" que existiam antes:
   cada componente e escrito UMA vez, com token semantico, e fica certo
   nos dois chaos. O gradiente a 148deg saiu porque a cor da borda de
   baixo mudava conforme a altura da secao, o que impedia qualquer
   emenda deterministica entre secoes. A riqueza foi para a irradiancia. */
.escuro{
  --chao:var(--chao-escuro);
  --txt-1:#FFFFFF;
  --txt-2:rgba(255,255,255,.80);
  --txt-3:rgba(255,255,255,.60);
  --txt-acc:#9DB4FF;              /* 6,79:1 · azul para texto pequeno  */
  --txt-num:#5C7CFF;              /* so display, 24px/900 pra cima     */
  --sup-1:rgba(255,255,255,.045);
  --sup-2:rgba(255,255,255,.075);
  --linha:rgba(255,255,255,.13);
  --linha-forte:rgba(255,255,255,.22);
  --elev-2:var(--elev-d2);
  --elev-3:var(--elev-d3);
  /* Os apelidos TAMBEM precisam ser reescritos aqui. Custom property
     resolve na regra onde e declarada, entao "--ink-soft:var(--txt-2)"
     no :root congela o valor claro e desce herdado assim. Sem estas
     quatro linhas, todo style="color:var(--ink-soft)" dentro de um
     bloco escuro fica em 2,2:1. */
  --ink:var(--txt-1);
  --ink-soft:var(--txt-2);
  --ink-faint:var(--txt-3);
  --line:var(--linha);
  background:var(--chao-escuro);
  color:var(--txt-1);
}
/* O campo de irradiancia: a luz entra sempre pelo mesmo canto. */
.escuro::after,.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--grad-irrad);
}
.escuro>*{position:relative;z-index:1;}

/* ===================== 5. CABECALHO ===================== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(21,25,45,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s ease;
}
header.solid{background:rgba(21,25,45,.96);}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px;}
.nav-logo{flex:0 0 auto;}
.nav-logo img{height:38px;width:auto;}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{
  color:rgba(255,255,255,.84);text-decoration:none;font-size:14.5px;font-weight:700;
  letter-spacing:.01em;transition:color .2s;position:relative;padding:6px 0;white-space:nowrap;
}
.nav-links a:hover{color:var(--white);}
/* O CTA dentro da gaveta e um botao, nao um item de menu:
   precisa vencer a cor translucida de .nav-links a */
.nav-links a.btn-primary{color:var(--white);}
/* O CTA da gaveta existe SO no mobile. No desktop quem aparece e o
   .btn-nav ao lado do menu. Sem isto o botao duplica no cabecalho,
   e a copia dentro do <li> fica espremida contra a borda. */
.nav-links li .btn{display:none;}
/* Aba ativa: cada pagina marca seu proprio link com aria-current="page" */
.nav-links a[aria-current="page"]{color:var(--white);}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--royal);border-radius:2px;
  box-shadow:0 0 12px rgba(10,48,255,.9);
}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:10px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;border-radius:2px;transition:.3s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===================== BOTOES ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;letter-spacing:-.005em;
  padding:14px 28px;border-radius:100px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  cursor:pointer;border:none;
}
.btn svg{flex:0 0 auto;}
.btn-primary{background:var(--royal);color:var(--white);box-shadow:var(--glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(10,48,255,.75);}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.38);}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.07);}
.btn-escuro{background:var(--navy);color:var(--white);}
.btn-escuro:hover{background:#1B3390;transform:translateY(-2px);}
.btn-nav{padding:10px 22px;font-size:14.5px;}
.btn-bloco{width:100%;}

/* ===================== 6. HERO ===================== */
.hero{
  --txt-1:#FFFFFF; --txt-2:rgba(255,255,255,.80); --txt-3:rgba(255,255,255,.60);
  --txt-acc:#9DB4FF; --txt-num:#5C7CFF;
  --sup-1:rgba(255,255,255,.045); --linha:rgba(255,255,255,.13);
  --ink:var(--txt-1); --ink-soft:var(--txt-2); --ink-faint:var(--txt-3); --line:var(--linha);
  background:var(--chao-escuro);
  color:var(--txt-1);padding:calc(var(--header-h) + 76px) 0 0;position:relative;
}
.hero>*{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;padding-bottom:96px;}
.hero-solo{padding-bottom:88px;max-width:860px;}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(10,48,255,.18);border:1px solid rgba(10,48,255,.55);
  color:#9DB4FF;font-weight:900;
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  padding:9px 18px;border-radius:100px;margin-bottom:26px;
}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--royal);box-shadow:0 0 10px var(--royal);}
/* A voz de display usa DOIS PESOS da mesma familia: 300 prepara a frase,
   900 da o golpe. E de onde vem a personalidade sem uma segunda fonte.
   REGRA: peso 300 so de 40px para cima. Abaixo disso a Lato Light
   acinzenta e reprova contraste sem ninguem perceber. */
.hero h1{
  font-size:var(--t-display);font-weight:300;line-height:.98;
  letter-spacing:var(--tr-display);margin-bottom:var(--sp-5);
}
.hero h1 em,.hero h1 strong{font-style:normal;font-weight:900;color:#5C7CFF;}
.hero-sub{font-size:var(--t-lead);line-height:1.55;color:var(--txt-2);max-width:600px;margin-bottom:36px;font-weight:400;}
.hero-sub strong{font-weight:700;color:var(--txt-1);}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:54px;}

/* Estatisticas como LEITURA DE INSTRUMENTO: o produto da IBS e uma
   grandeza medida virando dinheiro, entao o numero fica sobre uma
   regua com ticks em vez de flutuar solto. */
.hero-stats{display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);gap:0;}
.hstat{padding:24px 40px 0 0;margin-right:40px;position:relative;}
.hstat:last-child{margin-right:0;padding-right:0;}
.hstat b{
  display:block;font-size:clamp(28px,3vw,42px);font-weight:900;
  color:var(--txt-num);line-height:1;letter-spacing:var(--tr-num);
  font-variant-numeric:tabular-nums;
}
.hstat b::after{
  content:"";display:block;height:3px;width:44px;margin:10px 0 8px;border-radius:2px;
  background-image:
    linear-gradient(90deg,var(--royal) 0 60%,transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 8px),
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));
}
.hstat span{font-size:var(--t-xs);color:var(--txt-2);}

/* Grafismo de placas do hero institucional */
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;}
.painel{width:min(400px,100%);filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));}
.selo{position:absolute;bottom:-40px;right:4%;width:142px;height:142px;animation:girar 30s linear infinite;}
@keyframes girar{to{transform:rotate(360deg);}}
.selo-centro{
  position:absolute;bottom:-40px;right:4%;width:142px;height:142px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.selo-centro img{width:50px;height:auto;}

/* Faixa de declaracao abaixo do hero.
   Ela tem ARESTAS PROPRIAS: antes so lia como banda porque a secao
   seguinte era branca, e sumia contra qualquer vizinho escuro.
   Agora carrega busbar royal embaixo, filete em cima e grade de celula. */
.faixa{
  position:relative;overflow:hidden;overflow:clip;
  background:var(--chao-escuro);
  padding:26px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -2px 0 var(--royal);
}
.faixa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, var(--cel-b) 0 1.5px, transparent 1.5px calc(var(--cel) * 4)),
    repeating-linear-gradient(90deg, var(--cel-l) 0 1px, transparent 1px var(--cel));
}
.faixa .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;}
.faixa p{
  font-weight:300;color:var(--white);
  font-size:clamp(19px,2.4vw,29px);letter-spacing:var(--tr-h2);line-height:1.2;
}
.faixa p em{font-style:normal;font-weight:900;color:#5C7CFF;}

/* ===================== 7. SECOES ===================== */
/* ATENCAO, a regra mais importante da folha:
   toda <section> tem fundo PROPRIO e NOMEADO, nunca herdado.
   Antes, secao sem classe era transparente e dependia do body ser
   branco. Isso derrubou o build de revisao inteiro: 19 secoes viraram
   fundo escuro e os titulos, que sao --navy-deep, ficaram com contraste
   de 1,00:1, ou seja, exatamente da cor do fundo. Nao volte a depender
   de heranca aqui. */
section{
  --chao:var(--chao-branco);
  background:var(--chao);
  padding:var(--pad-sec) 0;
  position:relative;
}
section.compacta{padding:var(--pad-sec-compacta) 0;}
.claro{--chao:var(--chao-gelo);background:var(--chao);}

/* Eyebrow como etiqueta de esquema: o tracinho e a derivacao no
   barramento, amarrando a tipografia ao desenho do unifilar. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:900;font-size:var(--t-eyebrow);letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--txt-acc);margin-bottom:var(--sp-3);
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:currentColor;
  border-radius:1px;flex:0 0 auto;
}
.sec-title{font-size:var(--t-h1);color:var(--txt-1);margin-bottom:var(--sp-4);}
.sec-lead{font-size:var(--t-lead);line-height:1.55;color:var(--txt-2);max-width:700px;}
.sec-lead strong{font-weight:700;color:var(--txt-1);}
.sec-head{margin-bottom:var(--sp-7);}

/* Citacao com barra royal */
.citacao{
  border-left:4px solid var(--royal);padding:8px 0 8px 24px;
  font-weight:700;font-size:clamp(18px,1.9vw,23px);color:var(--txt-1);line-height:1.4;
}
.escuro .citacao{border-left-color:#5C7CFF;}

/* Nota de conformidade.
   Ela reprovava contraste (3,10:1) porque o chao debaixo dela era
   incerto: branco, ou gelo, ou gelo com listra por cima. A correcao e
   dar CHAO PROPRIO a letra juridica, nao escurecer o texto. Assim ela
   sobe para 4,98:1 sem ficar berrante, e a textura nunca a alcanca. */
.nota{
  font-size:var(--t-xs);line-height:1.6;letter-spacing:var(--tr-xs);
  color:var(--txt-3);
  background:var(--sup-1);
  border:1px solid var(--linha);
  border-left:3px solid rgba(10,48,255,.45);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:14px 18px;margin-top:var(--sp-5);max-width:78ch;
}
.nota-credito{
  font-size:var(--t-xs);color:var(--txt-3);line-height:1.6;
  border-top:1px solid var(--linha);padding-top:var(--sp-4);margin-top:var(--sp-6);
}

/* Selo de amparo legal */
.selo-legal{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-5);}
.selo-legal span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--txt-acc);
  background:rgba(10,48,255,.07);border:1px solid rgba(10,48,255,.25);
  padding:7px 14px;border-radius:100px;
}
.escuro .selo-legal span{background:rgba(10,48,255,.18);border-color:rgba(10,48,255,.45);}

/* ===================== 8. CARDS ===================== */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grade-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* Card escrito UMA vez. Como --sup-1, --linha, --txt-* e --elev-2 sao
   reatribuidos dentro de .escuro, o mesmo bloco fica certo nos dois
   chaos e as regras ".escuro .card ..." deixam de existir. */
.card{
  position:relative;overflow:hidden;
  background:var(--sup-1);border:1px solid var(--linha);border-radius:var(--radius);
  padding:30px 26px;box-shadow:var(--elev-2);
  transition:transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--elev-3);border-color:rgba(10,48,255,.30);}
.escuro .card:hover{background:var(--sup-2);border-color:rgba(10,48,255,.55);}
.card h3{font-size:var(--t-h3);color:var(--txt-1);margin-bottom:var(--sp-2);}
.card p{font-size:var(--t-sm);color:var(--txt-2);}
.card-ico{
  width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(10,48,255,.13),rgba(20,38,110,.09));margin-bottom:18px;
}
.escuro .card-ico{background:rgba(10,48,255,.2);border:1px solid rgba(10,48,255,.4);}

/* Hover nao so levanta: CONECTA. A barra royal que corre no topo do
   card e a derivacao do barramento. Vale nos dois chaos. */
.card::after,.caminho::after,.frente::after,.continue a::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-fio);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur-2) var(--ease-out);
}
.card:hover::after,.caminho:hover::after,
.frente:hover::after,.continue a:hover::after{transform:scaleX(1);}

/* Lista com marcador de check */
.lista{list-style:none;}
.lista li{font-size:var(--t-sm);color:var(--txt-1);padding:7px 0 7px 30px;position:relative;}
.lista li::before{
  content:"";position:absolute;left:0;top:11px;width:19px;height:19px;border-radius:50%;
  background-color:var(--royal);background-position:center;background-repeat:no-repeat;background-size:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.escuro .lista li{color:rgba(255,255,255,.86);}
.lista.verde li::before{background-color:var(--green);}

/* Card de frente (produto), com faixa de cor no topo */
.frente{
  position:relative;overflow:hidden;
  background:var(--sup-1);border:1px solid var(--linha);border-radius:var(--radius);
  box-shadow:var(--elev-2);display:flex;flex-direction:column;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.frente:hover{transform:translateY(-4px);box-shadow:var(--elev-3);}
.frente-topo{height:6px;}
.frente.azul .frente-topo{background:linear-gradient(90deg,var(--navy),var(--royal));}
.frente.verde .frente-topo{background:linear-gradient(90deg,var(--green-deep),var(--green));}
.frente.laranja .frente-topo{background:linear-gradient(90deg,#C4660A,var(--orange));}
.frente-corpo{padding:32px 28px 28px;display:flex;flex-direction:column;flex:1;}

/* Tag deixou de ser pilula tingida e virou ETIQUETA DE ESQUEMA:
   placa clara, borda colorida, texto na tinta -ink. O fundo tingido
   segurava laranja a 3,60:1 e verde a 4,28:1, os dois reprovados. */
.frente-tag{
  align-self:flex-start;font-weight:900;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;margin-bottom:18px;
  background:var(--chao-branco);border:1.5px solid currentColor;
}
.frente.azul .frente-tag{color:var(--royal);}
.frente.verde .frente-tag{color:var(--green-ink);}
.frente.laranja .frente-tag{color:var(--orange-ink);}
.frente h3{font-size:24px;color:var(--txt-1);margin-bottom:6px;letter-spacing:var(--tr-h3);}
.frente-para{font-size:13px;color:var(--txt-2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;}
.frente-heroi{font-weight:900;font-size:var(--t-h2);line-height:1.15;margin-bottom:12px;letter-spacing:var(--tr-h2);}
/* Cor viva e preenchimento. Texto usa a versao -ink. O laranja puro
   media 2,59:1 aqui, e este e o argumento principal da pagina. */
.frente.azul .frente-heroi{color:var(--royal);}
.frente.verde .frente-heroi{color:var(--green-ink);}
.frente.laranja .frente-heroi{color:var(--orange-ink);}
.frente p.desc{font-size:var(--t-sm);color:var(--txt-2);margin-bottom:18px;}
.frente .lista{margin-bottom:22px;}
/* Porta em evidencia no seletor da home: ocupa duas colunas da grade.
   Precisa voltar a uma coluna em 680px, senao o span cria uma coluna
   implicita na grade de 1fr e os cards vizinhos colapsam. */
.porta-destaque{grid-column:span 2;}
.frente-pe{margin-top:auto;}

/* ===================== 9. NUMEROS ===================== */
.num-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.num{
  border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:30px 24px;background:rgba(255,255,255,.035);
  transition:background .25s ease,border-color .25s ease;
}
.num:hover{background:rgba(255,255,255,.06);border-color:rgba(10,48,255,.4);}
.num b{
  display:block;font-weight:900;font-size:clamp(32px,3.3vw,48px);
  color:#5C7CFF;line-height:1.05;margin-bottom:8px;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.num span{font-size:14.5px;color:rgba(255,255,255,.76);}

/* ===================== 10. CAMINHOS ===================== */
/* Cards numerados usados no Mercado de Ativos e em passo a passo */
.caminho{
  background:var(--sup-1);border:1px solid var(--linha);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--elev-2);position:relative;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
}
.caminho:hover{transform:translateY(-4px);box-shadow:var(--elev-3);border-color:rgba(10,48,255,.30);}
/* 13px e texto normal, precisa de 4,5:1. O #5C7CFF media 3,4:1 sobre a
   superficie do card escuro, entao ele foi rebaixado para uso so em
   display e aqui entra --txt-acc. */
.caminho-n{
  font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--txt-acc);
  display:block;margin-bottom:10px;
}
.caminho h3{font-size:var(--t-h3);color:var(--txt-1);margin-bottom:8px;}
.caminho p{font-size:var(--t-sm);color:var(--txt-2);}
.caminho.destaque{border-color:transparent;box-shadow:var(--anel),var(--elev-3);}
.caminho .marca-rec{
  position:absolute;top:0;right:0;background:var(--royal);color:var(--white);
  font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 14px;border-bottom-left-radius:12px;z-index:2;
}

/* ---- LEITURA: o numero como instrumento medido ----
   O produto da IBS e uma grandeza (kWh compensado) virando dinheiro,
   entao o numero fica sobre uma regua com ticks, e nao solto.
   Resolve tambem um problema de conformidade: o trio de bandeiras usava
   verde, DOURADO e vermelho como TEXTO. Dourado nao e cor da marca e
   media 2,52:1. Agora os tres numeros usam a mesma tinta e a identidade
   da bandeira vai para um swatch, que e elemento nao textual. */
.leitura b{
  display:block;font-size:var(--t-num);font-weight:900;line-height:.95;
  letter-spacing:var(--tr-num);color:var(--txt-num);
  font-variant-numeric:tabular-nums;
}
.leitura b i{
  font-style:normal;font-size:.42em;font-weight:700;
  letter-spacing:0;margin-left:.06em;vertical-align:.42em;
}
.escala{
  display:block;height:4px;border-radius:2px;margin:var(--sp-3) 0 var(--sp-2);
  background-image:
    linear-gradient(90deg,var(--royal) 0 var(--v,50%),transparent var(--v,50%)),
    repeating-linear-gradient(90deg,var(--linha-forte) 0 1px,transparent 1px 13px),
    linear-gradient(var(--linha),var(--linha));
}
.leitura-rot{
  display:flex;align-items:center;gap:8px;
  font-size:var(--t-xs);font-weight:700;color:var(--txt-2);
}
.bandeira{
  width:11px;height:11px;border-radius:3px;flex:0 0 auto;
  border:1px solid rgba(21,25,45,.4);
}
.escuro .bandeira{border-color:rgba(255,255,255,.5);}
.bandeira.verde{background:#3AAA35;}
.bandeira.amarela{background:#F2C200;}
.bandeira.vermelha{background:#C0392B;}

/* Dobra dividida ao meio (pagamento) */
.dobra{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;}
.dobra-lado{
  /* Ilha escura dentro de secao clara. */
  --txt-1:#FFFFFF; --txt-2:rgba(255,255,255,.86); --txt-3:rgba(255,255,255,.66);
  --linha:rgba(255,255,255,.18);
  --ink:var(--txt-1); --ink-soft:var(--txt-2); --ink-faint:var(--txt-3); --line:var(--linha);
  padding:48px 44px;display:flex;flex-direction:column;
}
.dobra-lado.a{background:linear-gradient(158deg,var(--royal),#0726C4);color:var(--white);}
.dobra-lado.b{background:linear-gradient(158deg,var(--navy),var(--navy-deep));color:var(--white);}
.dobra-tag{
  font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  opacity:.82;margin-bottom:14px;
}
.dobra-num{font-size:clamp(52px,7vw,86px);font-weight:900;line-height:.94;letter-spacing:-.045em;margin-bottom:6px;}
.dobra-taxa{font-size:clamp(20px,2.2vw,28px);font-weight:900;margin-bottom:18px;letter-spacing:-.02em;}
.dobra-lado h3{font-size:21px;margin-bottom:10px;}
.dobra-lado p{font-size:15px;opacity:.86;margin-bottom:20px;}
.dobra-lado .lista li{color:rgba(255,255,255,.9);font-size:14.5px;}
.dobra-lado .lista li::before{background-color:rgba(255,255,255,.28);}
.dobra-lado .btn{margin-top:auto;}
.dobra-lado.a .btn{background:var(--white);color:var(--royal);}
.dobra-lado.b .btn{background:var(--royal);color:var(--white);}

/* ===================== 11. IMPRESSAO ===================== */
/* Aqui vivia o TOGGLE DE VISAO da Cooperativa (data-visao no <html>,
   .so-consumidor, .so-investidor, .toggle-trilho, .variante-rotulo).
   Removido em 14/08/2026: com o site organizado por publico, consumidor
   e dono de usina viraram paginas separadas (economizar.html e
   conectar-usina.html), entao nao ha mais dois conteudos disputando o
   mesmo esqueleto. Ver PADRAO.md.

   Os arquivos *.backup-2026-08-14.html ainda usam essas classes. Eles
   guardam a copy antiga e nao sao paginas vivas, entao abrem sem o
   toggle. E esperado.

   O que sobrou daqui e util: no papel, cabecalho e botao flutuante so
   gastam tinta. O comercial imprime a pagina para levar na reuniao. */
@media print{
  header,.whats-float{display:none !important;}
}

/* ===================== 12. TABELAS ===================== */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* ILHA DE SUPERFICIE.
   A tabela crava fundo branco, inclusive dentro de secao escura, entao
   ela precisa RESETAR os tokens de texto para o jogo claro. Sem isto o
   texto herda a tinta clara de .escuro e vira branco sobre branco.
   Regra geral: quem forca o proprio fundo tem que forcar os proprios
   tokens de texto junto. */
table.ibs{
  --txt-1:#15192D; --txt-2:#4A5169; --txt-3:#666F8C;
  --linha:#E3E8F2; --linha-forte:#CFD8EA;
  width:100%;border-collapse:collapse;min-width:640px;
  background:var(--chao-branco);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--elev-2);
}
table.ibs th,table.ibs td{padding:16px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--linha);}
table.ibs th{background:var(--navy);color:var(--white);font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
table.ibs td{color:var(--txt-2);}
table.ibs td:first-child{color:var(--txt-1);font-weight:700;}
table.ibs tr:last-child td{border-bottom:none;}
table.ibs tr.destaque td{background:rgba(10,48,255,.055);}
table.ibs tr.destaque td:first-child{box-shadow:inset 3px 0 0 var(--royal);}

/* ===================== 13. CONTATO ===================== */
.contato-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
/* Ilha escura dentro de secao clara: forca o jogo de tokens escuro. */
.contato-card{
  --txt-1:#FFFFFF; --txt-2:rgba(255,255,255,.80); --txt-3:rgba(255,255,255,.60);
  --txt-acc:#9DB4FF; --linha:rgba(255,255,255,.13);
  --ink:var(--txt-1); --ink-soft:var(--txt-2); --ink-faint:var(--txt-3); --line:var(--linha);
  background:linear-gradient(148deg,var(--navy-deep),var(--navy));
  border-radius:var(--radius-lg);padding:48px 44px;color:var(--txt-1);
  position:relative;overflow:hidden;
}
.contato-card h3{font-size:clamp(23px,2.3vw,30px);margin-bottom:10px;}
.contato-card>p{color:rgba(255,255,255,.8);margin-bottom:28px;}
.contato-lista{list-style:none;display:flex;flex-direction:column;gap:18px;}
.contato-lista li{display:flex;gap:15px;align-items:flex-start;}
.contato-lista .ico{
  flex:0 0 42px;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(10,48,255,.22);border:1px solid rgba(10,48,255,.45);
}
.contato-lista b{display:block;font-weight:900;font-size:15px;color:var(--white);}
.contato-lista a,.contato-lista span{color:rgba(255,255,255,.76);font-size:14.5px;text-decoration:none;}
.contato-lista a:hover{color:#7FA0FF;}
.ig-linha{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
.ig-pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  border:1px solid rgba(255,255,255,.24);font-size:13.5px;font-weight:700;
  color:rgba(255,255,255,.88);text-decoration:none;transition:.2s;
}
.ig-pill:hover{border-color:var(--royal);background:rgba(10,48,255,.18);}

/* Bloco de continuidade entre abas */
.continue{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.continue a{
  display:block;position:relative;overflow:hidden;text-decoration:none;background:var(--sup-1);
  border:1px solid var(--linha);border-radius:var(--radius);padding:26px 24px;
  box-shadow:var(--elev-2);
  transition:transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
}
.continue a:hover{transform:translateY(-4px);box-shadow:var(--elev-3);border-color:rgba(10,48,255,.30);}
.continue .k{font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-acc);display:block;margin-bottom:8px;}
.continue h3{font-size:var(--t-h3);color:var(--txt-1);margin-bottom:6px;}
.continue p{font-size:14.5px;color:var(--txt-2);}

/* ===================== 14. RODAPE ===================== */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:60px 0 0;}
.pe-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:44px;}
.pe-grid img.pe-logo{height:48px;width:auto;margin-bottom:20px;}
.pe-grid p{font-size:14.5px;max-width:340px;}
.pe-grid h4{color:var(--white);font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
.pe-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.pe-grid ul a{color:rgba(255,255,255,.66);text-decoration:none;font-size:14.5px;transition:.2s;}
.pe-grid ul a:hover{color:#7FA0FF;}
/* O aviso legal do rodape media 4,30:1 a 12,5px. Sobe para .60 de
   opacidade (6,19:1) e 13,5px, que e onde letra juridica deveria estar. */
.pe-aviso{
  border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
  font-size:var(--t-xs);letter-spacing:var(--tr-xs);
  color:rgba(255,255,255,.60);line-height:1.6;
}
.pe-base{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.5);
}
.pe-selo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.pe-selo::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--royal);box-shadow:0 0 10px var(--royal);}

/* WhatsApp flutuante */
.whats-float{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.6);transition:transform .2s ease;
}
.whats-float:hover{transform:scale(1.08);}

/* ===================== 15. RESPONSIVO ===================== */
@media(max-width:1320px){
  .pe-base{padding-right:92px;}
}
@media(max-width:1020px){
  .grade-3,.continue{grid-template-columns:repeat(2,1fr);}
  .grade-4,.num-grade{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-art{display:none;}
  .contato-grid{grid-template-columns:1fr;gap:36px;}
  .pe-grid{grid-template-columns:1fr 1fr;}
  .dobra{grid-template-columns:1fr;}
  .dobra-lado{padding:40px 32px;}
}
@media(max-width:680px){
  :root{--header-h:64px;}
  body{font-size:16px;}
  section{padding:68px 0;}
  section.compacta{padding:52px 0;}
  .wrap,.wrap-slim{padding:0 20px;}

  /* Menu mobile: gaveta lateral completa, com o CTA de WhatsApp dentro */
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--navy-deep);border-left:1px solid rgba(255,255,255,.12);
    padding:calc(var(--header-h) + 20px) 24px 24px;
    transform:translateX(100%);transition:transform .3s ease;
    box-shadow:-20px 0 50px rgba(0,0,0,.4);overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links li{width:100%;border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-links a{display:block;padding:16px 0;font-size:16px;}
  .nav-links a[aria-current="page"]::after{display:none;}
  .nav-links a[aria-current="page"]{color:#7FA0FF;}
  .nav-links li .btn{display:inline-flex;margin-top:22px;width:100%;}
  .hamburger{display:block;z-index:101;}
  .nav>.btn-nav{display:none;}   /* o CTA passa para dentro da gaveta */
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(10,13,26,.6);z-index:99;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .nav-backdrop.on{opacity:1;pointer-events:auto;}

  .hero{padding-top:calc(var(--header-h) + 48px);}
  .hstat{padding-right:22px;margin-right:22px;}
  .grade-3,.grade-2,.grade-4,.num-grade,.continue{grid-template-columns:1fr;}
  .porta-destaque{grid-column:auto;}
  .pe-grid{grid-template-columns:1fr;}
  .contato-card{padding:36px 26px;}
  .whats-float{width:52px;height:52px;bottom:16px;right:16px;}
}