/* ==========================================================================
   TecEnergy - style.css
   Sistema de design, componentes e secoes (mobile-first, BEM)
   --------------------------------------------------------------------------
   Sumario
   01. Design tokens (:root)
   02. Reset e base
   03. Tipografia
   04. Utilitarios e layout
   05. Botoes
   06. Formularios
   07. Header / Topbar / Navegacao / Mega menu
   08. Hero
   09. Cards e grids genericos
   10. Secao Diferenciais
   11. Secao Sobre + Contadores
   12. Secao Servicos (abas)
   13. Metodologia (timeline) e Tecnologias
   14. Projetos (filtro + galeria) e Lightbox
   15. Antes e Depois
   16. Equipe
   17. Clientes (marquee) e Certificacoes
   18. Depoimentos (carousel)
   19. FAQ (accordion)
   20. Blog
   21. CTA
   22. Contato e Mapa
   23. Footer
   24. Elementos globais (WhatsApp, topo, cookies, 404)
   25. Paginas internas (hero interno, breadcrumb, artigo)
   ========================================================================== */

/* ==========================================================================
   00. TIPOGRAFIA AUTO-HOSPEDADA

   Archivo variavel, eixo de peso 100-900 em dois arquivos (latin e
   latin-ext), 67 KB no total. Substitui Montserrat + Inter do Google Fonts:
   uma familia so, sem conexao externa, sem terceiro recebendo o IP de quem
   abre o site. A Archivo e uma grotesca de origem industrial, com numeral
   tabular de largura real e caixa alta estreita o bastante para rotulo de
   instrumento — e e isso que este site e.
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --------------------------------------------------------------------
     A RAMPA TERMICA

     A descoberta que define este site: a paleta da marca TecEnergy ja e
     uma rampa de falsa-cor. Numa termografia de quadro eletrico a escala
     corre do frio ao quente — e as cores do logotipo ocupam exatamente
     essas bandas, em ordem:

       vacuo    #0A0D13   fora de escala, o fundo do instrumento
       frio     #242454   azul-marinho do wordmark
       quente   #F0600C   laranja do simbolo solar
       pico     #FCC00C   ambar do simbolo solar
       saturado #FFFFFF

     A regra que torna isto um sistema e nao um enfeite: a rampa so
     aparece onde existe grandeza medida. Fora do dado, toda superficie e
     cor plana. Nenhum gradiente decorativo, nenhum texto em gradiente.
     -------------------------------------------------------------------- */
  --vp-vacuo: #0A0D13;               /* fundo do site */
  --vp-vacuo-900: #06080C;           /* o mais profundo: rodape, CTA */
  --vp-vacuo-700: #121826;           /* superficie elevada 1 */
  --vp-vacuo-600: #1A2234;           /* superficie elevada 2 */

  --vp-azul-noturno: #242454;        /* banda fria da rampa */
  --vp-azul-noturno-900: #161636;
  --vp-azul-noturno-700: #33337A;
  /* O azul-eletrico saiu do sistema. Ele era a cor de acao do site claro, e
     num mundo de vacuo azul nao e o ponto quente de nada: toda acao e todo
     estado ativo passaram para o ambar, que e o pico da rampa. Deixar o token
     orfao no :root era convidar a proxima pessoa a reabrir essa discussao. */

  --vp-laranja-marca: #F0600C;       /* banda quente (5,9:1 no vacuo) */
  --vp-laranja-solar: #FCA726;       /* 9,2:1 no vacuo */
  --vp-ambar-energia: #FCC00C;       /* pico da rampa (11,5:1 no vacuo) */

  /* Aco: a estrutura do instrumento. Rotulo, cota, fio de retícula. */
  --vp-aco: #8A96B5;                 /* 6,6:1 no vacuo — rotulo legivel */
  --vp-aco-600: #5C6788;             /* nao-texto: fio, moldura, cota */
  --vp-aco-800: #B9C2D8;

  --vp-branco: #FFFFFF;

  /* Nao ha mais primitivo do mundo claro aqui. Os oito que sobraram do site
     antigo (grafite, cinza-claro, laranja-escuro, o overlay do hero) foram
     removidos de proposito: token no :root sem nenhum uso nao e poeira
     inofensiva, e o proximo que precisar de "um cinza" vai pegar aquele e
     pintar grafite sobre vacuo — que foi exatamente a falha de 1,15:1 que
     este site ja teve uma vez. Quem precisar de cinza usa --vp-aco, que foi
     calibrado contra o vacuo. */

  /* --------------------------------------------------------------------
     Papeis semanticos

     Todos os pares abaixo foram verificados por calculo de luminancia
     relativa contra o vacuo. Nenhum fica abaixo de 4,5:1 para texto nem
     de 3:1 para elemento nao-textual.
     -------------------------------------------------------------------- */
  --vp-cor-fundo: var(--vp-vacuo);
  --vp-cor-fundo-alt: var(--vp-vacuo-700);
  --vp-cor-texto: #D7DCEA;           /* 14,1:1 */
  --vp-cor-texto-suave: #9AA5C2;     /* 7,9:1 */
  --vp-cor-titulo: var(--vp-branco); /* 19,3:1 */
  --vp-cor-primaria: var(--vp-ambar-energia);
  --vp-cor-primaria-hover: #FFD556;   /* o saturado, um passo acima do pico */
  --vp-cor-foco: var(--vp-ambar-energia);
  --vp-borda: rgba(138, 150, 181, .22);
  --vp-borda-escura: rgba(255, 255, 255, .14);
  --vp-moldura: rgba(138, 150, 181, .34);   /* moldura de janela de medicao */

  /* --------------------------------------------------------------------
     Tipografia

     Uma familia so, Archivo, no eixo 100-900. A hierarquia vem de peso,
     tamanho e entreletra — nunca de uma segunda fonte chamada para
     "parecer tecnica". Numeral tabular ligado globalmente: num site cujo
     assunto e medicao, numero que dança de largura e defeito.

     Escala de razao 1,25 no mobile abrindo para ~1,33 no desktop.
     -------------------------------------------------------------------- */
  --vp-fonte-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --vp-fonte-texto: "Archivo", "Segoe UI", system-ui, sans-serif;

  --vp-fs-display: clamp(2.75rem, 1.35rem + 5.8vw, 5.75rem);
  --vp-fs-h1: clamp(2.125rem, 1.4rem + 3.1vw, 3.5rem);
  --vp-fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
  --vp-fs-h3: clamp(1.3125rem, 1.12rem + .85vw, 1.75rem);
  --vp-fs-h4: clamp(1.125rem, 1.05rem + .33vw, 1.3125rem);
  --vp-fs-body: clamp(1rem, .96rem + .18vw, 1.0625rem);
  --vp-fs-sm: .9375rem;
  --vp-fs-xs: .8125rem;
  --vp-fs-rotulo: .75rem;             /* rotulo de instrumento, versalete */

  --vp-lh-display: .95;
  --vp-lh-titulo: 1.08;
  --vp-lh-h3: 1.22;
  --vp-lh-h4: 1.35;
  --vp-lh-texto: 1.65;
  --vp-lh-curto: 1.5;

  /* Archivo e estreita e tem altura-x alta: titulo grande aguenta -0,035em
     sem fechar os contratipos. Rotulo em caixa alta pede o oposto. */
  --vp-ls-display: -.035em;
  --vp-ls-titulo: -.028em;
  --vp-ls-h3: -.018em;
  --vp-ls-texto: 0;
  --vp-ls-rotulo: .18em;
  --vp-ls-botao: .01em;
  --vp-peso-display: 650;
  --vp-peso-titulo: 600;

  /* A Archivo tem o zero estreito, e `ch` mede o zero: 68ch nela rendia
     ~86 caracteres por linha, acima do teto de 80. 58ch devolve ~72. */
  --vp-medida: 58ch;
  --vp-medida-curta: 48ch;

  /* Espacamento */
  --vp-esp-1: .25rem;
  --vp-esp-2: .5rem;
  --vp-esp-3: .75rem;
  --vp-esp-4: 1rem;
  --vp-esp-5: 1.5rem;
  --vp-esp-6: 2rem;
  --vp-esp-7: 3rem;
  --vp-esp-8: 4rem;
  --vp-secao-y: clamp(4rem, 2rem + 7vw, 8.5rem);
  --vp-container: 1280px;
  --vp-container-estreito: 820px;
  --vp-gutter: clamp(1.125rem, .5rem + 2.2vw, 3.5rem);

  /* --------------------------------------------------------------------
     Forma

     Um instrumento de medicao nao tem canto arredondado de 24px. O raio
     cai para quase nada: 2px e a espessura de um canto usinado, nao um
     enfeite. Pilula sobrevive so no que e de fato redondo.
     -------------------------------------------------------------------- */
  --vp-raio-sm: 2px;
  --vp-raio: 2px;
  --vp-raio-lg: 3px;
  --vp-raio-xl: 4px;
  --vp-raio-pill: 999px;

  /* Sombra com deslocamento e desfoque. Halo de cor sem deslocamento e
     decoracao, nao profundidade — nao existe aqui. */
  --vp-sombra-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --vp-sombra: 0 4px 14px rgba(0, 0, 0, .46), 0 1px 3px rgba(0, 0, 0, .4);
  --vp-sombra-md: 0 14px 34px rgba(0, 0, 0, .52), 0 2px 8px rgba(0, 0, 0, .38);
  --vp-sombra-lg: 0 28px 70px rgba(0, 0, 0, .6);

  /* --------------------------------------------------------------------
     A rampa como dado

     --vp-rampa e a escala de falsa-cor. Entra na barra de escala, no
     campo do termograma e na barra de kWp do mapa: lugares onde a cor
     codifica magnitude. Em nenhum outro.
     -------------------------------------------------------------------- */
  --vp-rampa: linear-gradient(
    to top,
    var(--vp-vacuo) 0%,
    var(--vp-azul-noturno) 20%,
    #7A2E63 42%,
    var(--vp-laranja-marca) 64%,
    var(--vp-ambar-energia) 86%,
    var(--vp-branco) 100%);
  --vp-rampa-h: linear-gradient(
    to right,
    var(--vp-azul-noturno) 0%,
    #7A2E63 30%,
    var(--vp-laranja-marca) 62%,
    var(--vp-ambar-energia) 100%);

  /* Campo termico: a mancha de calor dentro da janela de medicao. Fica
     contida no elemento, nunca sangra para tras do texto. */
  --vp-campo-termico: radial-gradient(
    58% 64% at 54% 52%,
    var(--vp-branco) 0%,
    var(--vp-ambar-energia) 14%,
    var(--vp-laranja-marca) 34%,
    #7A2E63 56%,
    var(--vp-azul-noturno) 76%,
    var(--vp-vacuo-900) 100%);
  --vp-campo-frio: radial-gradient(
    58% 64% at 54% 52%,
    var(--vp-azul-noturno-700) 0%,
    var(--vp-azul-noturno) 36%,
    var(--vp-azul-noturno-900) 68%,
    var(--vp-vacuo-900) 100%);

  /* Nomes antigos de gradiente, mantidos para nao quebrar regras que
     ainda os chamam. Apontam para cor plana: o mundo novo nao tem
     gradiente fora do dado. */
  --vp-grad-eletrico: var(--vp-ambar-energia);
  --vp-grad-energia: var(--vp-ambar-energia);
  --vp-grad-noturno: var(--vp-vacuo-900);

  /* Reticula de medicao: o unico ornamento do site. 60px, como a grade de
     um visor termico. */
  --vp-grid-escuro:
    linear-gradient(rgba(138, 150, 181, .07) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(138, 150, 181, .07) 1px, transparent 1px) 0 0 / 60px 60px;
  --vp-grid-claro: var(--vp-grid-escuro);

  /* Seta dos selects, no aco dos rotulos. */
  --vp-seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* --------------------------------------------------------------------
     Movimento

     Um momento autoral: a janela de medicao esquentando quando o visitante
     pede a conta. O resto do site nao entra em cena, ja esta em cena.
     Ease-out exponencial, a partir de um estado ja visivel.
     -------------------------------------------------------------------- */
  --vp-trans-rapida: 140ms cubic-bezier(.33, 1, .68, 1);
  --vp-trans: 240ms cubic-bezier(.33, 1, .68, 1);
  --vp-trans-lenta: 900ms cubic-bezier(.16, 1, .3, 1);

  /* Camadas */
  --vp-z-base: 1;
  --vp-z-sticky: 100;
  --vp-z-header: 200;
  --vp-z-drawer: 300;
  --vp-z-flutuante: 400;
  --vp-z-modal: 500;
  --vp-z-cookies: 600;
  --vp-z-skip: 700;

  /* Alturas */
  --vp-h-topbar: 38px;
  --vp-h-nav: 72px;

  color-scheme: dark;
}

/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--vp-h-nav) + var(--vp-esp-5));
}

body {
  margin: 0;
  font-family: var(--vp-fonte-texto);
  font-size: var(--vp-fs-body);
  line-height: var(--vp-lh-texto);
  color: var(--vp-cor-texto);
  background-color: var(--vp-cor-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* tnum liga o numeral tabular da Archivo em todo o site. Num site cujo
     assunto e medicao, numero que muda de largura entre uma leitura e a
     seguinte e defeito: a coluna desalinha e a comparacao se perde. */
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img,
svg,
video,
iframe { display: block; max-width: 100%; }

img { height: auto; border: 0; }

a {
  color: var(--vp-ambar-energia);
  text-decoration: none;
  transition: color var(--vp-trans-rapida);
}
a:hover { color: var(--vp-cor-titulo); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--vp-borda); margin: var(--vp-esp-6) 0; }

/* ::selection vive na secao 34b, com o resto das superficies do navegador */

/* Foco visivel e consistente (acessibilidade) */
:focus-visible {
  outline: 3px solid var(--vp-cor-foco);
  outline-offset: 2px;
  border-radius: var(--vp-raio-sm);
}

/* Link pular para o conteudo */
.vp-skip-link {
  position: fixed;
  top: var(--vp-esp-3);
  left: var(--vp-esp-3);
  z-index: var(--vp-z-skip);
  padding: .75rem 1.25rem;
  background: var(--vp-ambar-energia);
  color: var(--vp-vacuo);
  font-weight: 600;
  border-radius: var(--vp-raio);
  box-shadow: var(--vp-sombra-md);
  transform: translateY(-160%);
  transition: transform var(--vp-trans);
}
.vp-skip-link:focus { transform: translateY(0); color: #fff; }

/* ==========================================================================
   03. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--vp-esp-4);
  font-family: var(--vp-fonte-titulo);
  font-weight: 700;
  line-height: var(--vp-lh-titulo);
  letter-spacing: var(--vp-ls-titulo);
  color: var(--vp-cor-titulo);
  text-wrap: balance;
  /* Evita que uma palavra longa estoure o contêiner em telas estreitas */
  overflow-wrap: break-word;
}
h1 { font-size: var(--vp-fs-h1); }
h2 { font-size: var(--vp-fs-h2); }
h3 {
  font-size: var(--vp-fs-h3);
  line-height: var(--vp-lh-h3);
  letter-spacing: var(--vp-ls-h3);
}
h4 {
  font-size: var(--vp-fs-h4);
  font-weight: 600;
  line-height: var(--vp-lh-h4);
  letter-spacing: var(--vp-ls-h3);
}
h5, h6 {
  font-size: var(--vp-fs-body);
  font-weight: 600;
  line-height: var(--vp-lh-h4);
  letter-spacing: 0;
}

p { margin: 0 0 var(--vp-esp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--vp-cor-titulo); }

/* A regra acima vale para o site em fundo claro, onde o navy e o que da
   enfase. Em superficie escura ela se vira contra si mesma: o navy do texto
   encosta no navy do fundo e o trecho em destaque some. No drawer do menu as
   duas cores eram literalmente a mesma (#242454 sobre #242454).

   Por isso toda superficie escura devolve o <strong> para branco. Mantenha
   esta lista junto com os fundos escuros: ao criar um bloco escuro novo com
   texto corrido, acrescente o seletor aqui.

   Sobrescritas mais especificas (rodape legal, premissas da calculadora,
   popup do mapa) continuam vencendo, por especificidade ou ordem. */
.vp-secao--escura strong,
.vp-footer strong,
.vp-drawer__painel strong,
.vp-cta strong,
.vp-hero strong,
.vp-hero-interno strong,
.vp-sidebar__bloco--escuro strong,
.vp-artigo-destaque strong,
.vp-404 strong,
.vp-calc__resultado strong {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Numerais
   Os contadores animados mudam de valor dezenas de vezes por segundo. Com
   algarismos de largura proporcional, o bloco "pula" a cada quadro. Numerais
   tabulares travam a largura e eliminam esse tremor. Valem tambem para
   tabelas, precos e qualquer dado alinhado em coluna.
   -------------------------------------------------------------------------- */
.vp-contador__valor,
.vp-indicador__valor,
.vp-sobre__selo-numero,
.vp-etapa__numero,
.vp-filtro__contagem,
.vp-horarios__hora,
.vp-cidade-card__dado,
.vp-lightbox__contador,
table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* O componente .vp-eyebrow saiu daqui junto com as 77 ocorrencias que ele
   servia. Nao ha substituto: o rotulo em caixa alta acima do titulo e
   proibido pelo piso de craft, e nenhuma das 77 dizia algo que o titulo
   abaixo nao dissesse melhor.

   Em troca, o rotulo de instrumento continua existindo — mas para o que ele
   de fato e: a legenda de uma leitura, ao lado de um numero medido, nunca
   acima de um titulo. Ele vive em .vp-rotulo, na secao 36. */

.vp-lead {
  max-width: var(--vp-medida);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -.004em;
  color: var(--vp-cor-texto-suave);
}

.vp-titulo-destaque { color: var(--vp-ambar-energia); }

/* Cabecalho padrao de secao */
.vp-secao__cabecalho {
  max-width: 760px;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.vp-secao__cabecalho--centro { margin-inline: auto; text-align: center; }
.vp-secao__titulo { margin-bottom: var(--vp-esp-4); }
.vp-secao__texto {
  max-width: var(--vp-medida);
  margin-bottom: 0;
  color: var(--vp-cor-texto-suave);
  font-size: clamp(1rem, .97rem + .3vw, 1.125rem);
  line-height: 1.6;
}
.vp-secao__cabecalho--centro .vp-secao__texto { margin-inline: auto; }

/* ==========================================================================
   04. UTILITARIOS E LAYOUT
   ========================================================================== */
.vp-container {
  width: 100%;
  max-width: var(--vp-container);
  margin-inline: auto;
  padding-inline: var(--vp-gutter);
}
.vp-container--estreito { max-width: var(--vp-container-estreito); }

.vp-secao { position: relative; padding-block: var(--vp-secao-y); }
.vp-secao--alt { background-color: var(--vp-cor-fundo-alt); }
.vp-secao--escura {
  background: var(--vp-grad-noturno);
  color: rgba(255, 255, 255, .82);
}
.vp-secao--escura h1,
.vp-secao--escura h2,
.vp-secao--escura h3,
.vp-secao--escura h4 { color: #fff; }
.vp-secao--escura .vp-secao__texto,
.vp-secao--escura .vp-lead { color: var(--vp-cor-texto-suave); }
/* :not(.vp-btn) importa: sem isso esta regra pintava o rotulo de um botao
   laranja com laranja (1,7:1), porque e mais especifica que .vp-btn. */
.vp-secao--escura a:not(.vp-btn) { color: var(--vp-laranja-solar); }

/* Textura de grid tecnico */
.vp-secao--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vp-grid-claro);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 85%);
  pointer-events: none;
}
.vp-secao--escura.vp-secao--grid::before { background: var(--vp-grid-escuro); }
.vp-secao > .vp-container { position: relative; z-index: var(--vp-z-base); }

.vp-grade { display: grid; gap: clamp(1.125rem, .75rem + 1.2vw, 1.75rem); }
.vp-grade--2,
.vp-grade--3,
.vp-grade--4 { grid-template-columns: 1fr; }

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

.vp-centro { text-align: center; }
.vp-mt-6 { margin-top: var(--vp-esp-6); }
.vp-mt-7 { margin-top: var(--vp-esp-7); }
[hidden] { display: none !important; }

/* Lista de checagem */
.vp-lista-check { display: grid; gap: var(--vp-esp-3); }
.vp-lista-check__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--vp-esp-3);
  align-items: start;
  font-size: var(--vp-fs-sm);
}
.vp-lista-check__icone {
  width: 22px;
  height: 22px;
  color: var(--vp-laranja-solar);
  flex: none;
  margin-top: 2px;
}
.vp-secao--escura .vp-lista-check__icone { color: var(--vp-ambar-energia); }

/* Moldura de midia com acento tecnico */
.vp-media {
  position: relative;
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  background: var(--vp-azul-noturno-700);
  box-shadow: var(--vp-sombra-md);
}
.vp-media img { width: 100%; height: 100%; object-fit: cover; }
.vp-media--alta { aspect-ratio: 4 / 5; }
.vp-media--larga { aspect-ratio: 16 / 10; }
.vp-media__legenda {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--vp-esp-6) var(--vp-esp-4) var(--vp-esp-4);
  background: linear-gradient(to top, rgba(10, 13, 19, .94), transparent);
  color: #fff;
  font-size: var(--vp-fs-xs);
  letter-spacing: .02em;
}

/* Placeholder aplicado por JS quando a imagem nao e encontrada */
.vp-img-fallback {
  position: relative;
  background-color: var(--vp-azul-noturno);
  background-image: var(--vp-grid-escuro);
}
.vp-img-fallback::after {
  content: attr(data-fallback-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--vp-fonte-titulo);
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
img.vp-img-fallback { min-height: 140px; object-fit: cover; }

/* Badge / pilula */
.vp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vp-esp-2);
  padding: .3rem .7rem;
  border-radius: var(--vp-raio-pill);
  background: rgba(36, 36, 84, .08);
  color: var(--vp-ambar-energia);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
}
.vp-badge--energia { background: rgba(252, 192, 12, .18); color: var(--vp-ambar-energia); }  /* 7,2:1 */
.vp-badge--escuro { background: rgba(255, 255, 255, .1); color: #fff; }

/* ==========================================================================
   05. BOTOES
   ========================================================================== */
.vp-btn {
  --btn-bg: var(--vp-cor-primaria);
  --btn-cor: var(--vp-vacuo);
  --btn-borda: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vp-esp-2);
  padding: .875rem 1.5rem;
  min-height: 48px;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--vp-ls-botao);
  text-align: center;
  color: var(--btn-cor);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-borda);
  border-radius: var(--vp-raio);
  cursor: pointer;
  transition: transform var(--vp-trans-rapida), box-shadow var(--vp-trans),
    background-color var(--vp-trans-rapida), color var(--vp-trans-rapida),
    border-color var(--vp-trans-rapida);
}
.vp-btn:active { transform: translateY(1px); }
.vp-btn__icone { width: 18px; height: 18px; flex: none; transition: transform var(--vp-trans); }
.vp-btn:hover .vp-btn__icone { transform: translateX(3px); }

/* Primaria: o pico da rampa. 11,5:1 — o par de maior contraste do site, e e
   de proposito que seja o botao que leva ao WhatsApp. */
.vp-btn--primario { --btn-bg: var(--vp-cor-primaria); --btn-cor: var(--vp-vacuo); }
.vp-btn--primario:hover { --btn-bg: var(--vp-cor-primaria-hover); }

/* Secundaria: fio de aco no vacuo. 3,5:1 no contorno, 14,1:1 no texto. */
.vp-btn--secundario {
  --btn-bg: transparent;
  --btn-cor: var(--vp-cor-texto);
  --btn-borda: var(--vp-aco-600);
}
.vp-btn--secundario:hover { --btn-borda: var(--vp-ambar-energia); --btn-cor: var(--vp-cor-titulo); }

.vp-btn--contorno-claro {
  --btn-bg: transparent;
  --btn-cor: #fff;
  --btn-borda: rgba(255, 255, 255, .38);
}
.vp-btn--contorno-claro:hover { --btn-bg: rgba(255, 255, 255, .08); --btn-borda: #fff; }

/* Banda quente: a acao de segunda ordem que ainda precisa ser vista. */
.vp-btn--energia { --btn-bg: var(--vp-laranja-marca); --btn-cor: var(--vp-vacuo); }  /* 5,9:1 */
.vp-btn--energia:hover { --btn-bg: var(--vp-laranja-solar); --btn-cor: var(--vp-vacuo); }

/* Desabilitado: sai da escala. Nao e opacidade no conjunto — e cor propria,
   para o rotulo continuar legivel enquanto o botao deixa de convidar. */
.vp-btn:disabled,
.vp-btn[aria-disabled="true"] {
  --btn-bg: var(--vp-vacuo-700);
  --btn-cor: var(--vp-cor-texto-suave);
  --btn-borda: rgba(138, 150, 181, .18);
  cursor: not-allowed;
}
.vp-btn:disabled:hover,
.vp-btn[aria-disabled="true"]:hover { --btn-bg: var(--vp-vacuo-700); }

/* Carregando: a propria barra de escala, em miniatura, correndo no rodape do
   botao. Reaproveita a rampa em vez de inventar um spinner. */
.vp-btn[data-carregando]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--vp-rampa-h);
  transform-origin: left;
  animation: vp-btn-medindo 1.1s cubic-bezier(.33, 1, .68, 1) infinite;
}
@keyframes vp-btn-medindo {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-btn[data-carregando]::after { animation: none; transform: scaleX(1); opacity: .7; }
}

.vp-btn--whatsapp { --btn-bg: #0E7A35; --btn-cor: #fff; }   /* 5,45:1 com branco */
.vp-btn--whatsapp:hover { --btn-bg: #0B6B2E; }              /* 6,65:1 */

.vp-btn--grande { padding: 1.0625rem 2rem; min-height: 56px; font-size: 1rem; }
.vp-btn--bloco { width: 100%; }

.vp-btn-grupo { display: flex; flex-wrap: wrap; gap: var(--vp-esp-3); }

/* Link com seta */
.vp-link-seta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-ambar-energia);
}
.vp-link-seta svg { width: 16px; height: 16px; transition: transform var(--vp-trans); }
.vp-link-seta:hover { color: var(--vp-cor-titulo); }
.vp-link-seta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   06. FORMULARIOS
   ========================================================================== */
.vp-form { display: grid; gap: var(--vp-esp-5); }
.vp-form__grade { display: grid; gap: var(--vp-esp-5); grid-template-columns: 1fr; }

.vp-campo { display: grid; gap: .4rem; }
.vp-campo__label {
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-cor-titulo);
}
.vp-campo__opcional { font-weight: 400; color: var(--vp-cor-texto-suave); }
.vp-campo__obrigatorio { color: var(--vp-ambar-energia); }

.vp-campo__controle {
  width: 100%;
  min-height: 50px;
  padding: .8rem 1rem;
  background: var(--vp-vacuo-600);
  color: var(--vp-cor-titulo);
  font: inherit;
  border: 1px solid var(--vp-aco-600);
  border-radius: var(--vp-raio);
  caret-color: var(--vp-ambar-energia);
  transition: border-color var(--vp-trans-rapida), background-color var(--vp-trans-rapida);
  appearance: none;
}
.vp-campo__controle::placeholder { color: var(--vp-cor-texto-suave); opacity: 1; }
select.vp-campo__controle {
  padding-right: 2.4rem;
  background-image: var(--vp-seta-select);
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px 18px;
}
.vp-campo__controle:hover { border-color: var(--vp-aco); }
.vp-campo__controle:focus-visible {
  outline: none;
  background: var(--vp-vacuo-700);
  border-color: var(--vp-ambar-energia);
  box-shadow: 0 0 0 3px rgba(252, 192, 12, .22);
}
.vp-campo__controle:disabled {
  background: var(--vp-vacuo-700);
  border-color: rgba(138, 150, 181, .18);
  color: var(--vp-cor-texto-suave);
  cursor: not-allowed;
}
.vp-campo__controle[aria-invalid="true"] { border-color: #FF8A80; }
textarea.vp-campo__controle { min-height: 140px; resize: vertical; line-height: 1.6; }

select.vp-campo__controle {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  cursor: pointer;
}

.vp-campo__ajuda { font-size: var(--vp-fs-xs); color: var(--vp-cor-texto-suave); }

.vp-campo__erro {
  display: none;
  align-items: center;
  gap: .35rem;
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  color: #FF8A80;
}
.vp-campo.is-invalido .vp-campo__erro { display: flex; }
.vp-campo.is-invalido .vp-campo__controle { border-color: #C62828; }
.vp-campo.is-invalido .vp-campo__controle:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .18); }
.vp-campo.is-valido .vp-campo__controle { border-color: #1DA851; }

/* Checkbox LGPD */
.vp-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--vp-esp-3);
  align-items: start;
  font-size: var(--vp-fs-sm);
  line-height: 1.55;
  color: var(--vp-cor-texto-suave);
  cursor: pointer;
}
.vp-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--vp-ambar-energia);
  cursor: pointer;
}
.vp-check a { font-weight: 600; text-decoration: underline; }

/* Retorno do formulario */
.vp-form__retorno {
  display: none;
  gap: var(--vp-esp-3);
  align-items: start;
  padding: var(--vp-esp-4) var(--vp-esp-5);
  border-radius: var(--vp-raio);
  font-size: var(--vp-fs-sm);
  border: 1.5px solid transparent;
}
.vp-form__retorno.is-visivel { display: flex; }
.vp-form__retorno--sucesso {
  background: rgba(29, 168, 81, .10);
  border-color: rgba(79, 209, 130, .45);
  color: #4FD182;                 /* 10,3:1 sobre o proprio fundo do bloco */
}
.vp-form__retorno--erro {
  background: rgba(255, 138, 128, .10);
  border-color: rgba(255, 138, 128, .40);
  color: #FF8A80;                 /* 8,5:1; o mesmo coral dos outros erros */
}
.vp-form__retorno svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* ==========================================================================
   07. HEADER / TOPBAR / NAVEGACAO / MEGA MENU
   ========================================================================== */
.vp-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--vp-z-header);
  transition: background-color var(--vp-trans), box-shadow var(--vp-trans), transform var(--vp-trans);
}
/* O degrade que escurecia o topo saiu junto com a foto do hero, que era o
   unico motivo para ele existir. No topo o header e transparente sobre o
   vacuo; ao rolar, ele fecha em vacuo com um fio de aco embaixo — a mesma
   cota que separa as leituras na escala do termograma. */
.vp-header.is-solido {
  background: rgba(10, 13, 19, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--vp-moldura), var(--vp-sombra);
}
.vp-header.is-oculto { transform: translateY(-100%); }

/* Topbar */
.vp-topbar {
  border-bottom: 1px solid var(--vp-borda);
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
}
.vp-topbar__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-4);
  min-height: var(--vp-h-topbar);
}
.vp-topbar__lista { display: flex; align-items: center; gap: var(--vp-esp-5); }
.vp-topbar__item { display: none; }
.vp-topbar__item--horario { display: block; }
.vp-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.vp-topbar__link:hover { color: #fff; }
.vp-topbar__link svg { width: 14px; height: 14px; color: var(--vp-laranja-solar); flex: none; }
.vp-topbar__horario {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--vp-ambar-energia);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Barra principal */
.vp-nav__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-5);
  min-height: var(--vp-h-nav);
}

/* Logo oficial TecEnergy */
.vp-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.vp-logo__imagem {
  width: auto;
  height: 34px;
  transition: opacity var(--vp-trans-rapida);
}
.vp-logo:hover .vp-logo__imagem { opacity: .85; }
.vp-logo:focus-visible { outline-offset: 6px; }

/* Menu desktop (oculto no mobile) */
.vp-menu { display: none; }

/* Acoes do header */
.vp-nav__acoes { display: flex; align-items: center; gap: var(--vp-esp-3); }
.vp-nav__cta { display: none; }

/* Botao hamburguer */
.vp-hamburguer {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: var(--vp-raio);
  color: #fff;
}
.vp-hamburguer:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.vp-hamburguer__barras { position: relative; width: 20px; height: 14px; }
.vp-hamburguer__barras span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--vp-trans), opacity var(--vp-trans-rapida);
}
.vp-hamburguer__barras span:nth-child(1) { top: 0; }
.vp-hamburguer__barras span:nth-child(2) { top: 6px; }
.vp-hamburguer__barras span:nth-child(3) { top: 12px; }
.vp-hamburguer[aria-expanded="true"] .vp-hamburguer__barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vp-hamburguer[aria-expanded="true"] .vp-hamburguer__barras span:nth-child(2) { opacity: 0; }
.vp-hamburguer[aria-expanded="true"] .vp-hamburguer__barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer mobile */
.vp-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--vp-z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.vp-drawer.is-aberto { visibility: visible; pointer-events: auto; }
.vp-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 19, .6);
  opacity: 0;
  transition: opacity var(--vp-trans);
}
.vp-drawer.is-aberto .vp-drawer__overlay { opacity: 1; }
.vp-drawer__painel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(92vw, 400px);
  display: flex;
  flex-direction: column;
  background: var(--vp-vacuo-900);
  background-image: var(--vp-grid-escuro);
  box-shadow: var(--vp-sombra-lg);
  transform: translateX(100%);
  transition: transform var(--vp-trans-lenta);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vp-drawer.is-aberto .vp-drawer__painel { transform: translateX(0); }
.vp-drawer__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-4);
  padding: var(--vp-esp-4) var(--vp-esp-5);
  border-bottom: 1px solid var(--vp-borda-escura);
}
.vp-drawer__fechar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--vp-raio);
  border: 1.5px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.vp-drawer__fechar:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.vp-drawer__fechar svg { width: 20px; height: 20px; }
.vp-drawer__corpo { padding: var(--vp-esp-5); flex: 1; }
.vp-drawer__lista { display: grid; gap: 2px; }
.vp-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-3);
  width: 100%;
  padding: .9rem .25rem;
  font-family: var(--vp-fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: left;
}
.vp-drawer__link:hover,
.vp-drawer__link[aria-expanded="true"] { color: var(--vp-laranja-solar); }
.vp-drawer__link.is-ativo { color: var(--vp-laranja-solar); }
.vp-drawer__link svg { width: 18px; height: 18px; flex: none; transition: transform var(--vp-trans); }
.vp-drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.vp-drawer__sub {
  display: grid;
  gap: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--vp-trans-lenta);
}
.vp-drawer__sub[data-aberto="true"] { max-height: 720px; }
.vp-drawer__sub-titulo {
  padding: var(--vp-esp-4) .25rem .35rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vp-ambar-energia);
}
.vp-drawer__sub-link {
  padding: .6rem .25rem;
  font-size: var(--vp-fs-sm);
  color: rgba(255, 255, 255, .72);
}
.vp-drawer__sub-link:hover { color: #fff; }

.vp-drawer__rodape {
  padding: var(--vp-esp-5);
  border-top: 1px solid var(--vp-borda-escura);
  display: grid;
  gap: var(--vp-esp-4);
}
.vp-drawer__contato { display: grid; gap: var(--vp-esp-2); font-size: var(--vp-fs-sm); }
.vp-drawer__contato a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .78);
}
.vp-drawer__contato a:hover { color: #fff; }
.vp-drawer__contato svg { width: 16px; height: 16px; color: var(--vp-laranja-solar); flex: none; }

/* ==========================================================================
   08. HERO: a janela de medicao
   ==========================================================================

   O hero anterior era o arranjo que a categoria inteira usa: foto de usina em
   telhado, overlay escuro por cima para o texto caber, titulo prometendo
   precisao, dois botoes e tres itens de prova com icone de check. Funcionava e
   nao dizia nada que o site do concorrente nao dissesse igual.

   Este hero e um instrumento. A esquerda o titulo e o campo unico; a direita
   a janela de termograma com a barra de escala ao lado. Em repouso a janela
   le frio — e honesto: ainda nao houve medicao. Quando o visitante informa a
   conta, o campo esquenta e as quatro leituras ancoram na altura que lhes
   cabe na escala.

   Duas decisoes de contraste que a composicao resolve, nao um scrim:

   1. A rampa de falsa-cor fica CONTIDA na janela. Ela nunca sangra para tras
      do texto. Ambar sobre ambar e ilegivel, e um gradiente de fundo atras de
      texto e exatamente como se chega la.
   2. As leituras ficam FORA do campo quente, na coluna da escala, sobre
      vacuo. Cada par foi verificado por luminancia, nao por aparencia.
   -------------------------------------------------------------------------- */
.vp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 860px);
  padding-top: calc(var(--vp-h-nav) + clamp(1.5rem, 1rem + 2vw, 3rem));
  padding-bottom: clamp(2rem, 1rem + 2vw, 3rem);
  background: var(--vp-vacuo);
  overflow: hidden;
}

/* A reticula de medicao, o unico ornamento do site. Esmaece nas beiradas
   para nao virar papel de parede xadrez. */
.vp-hero__reticula {
  position: absolute;
  inset: 0;
  background-image: var(--vp-grid-escuro);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.vp-hero .vp-container { position: relative; width: 100%; }

.vp-hero__grade {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .vp-hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.vp-hero__conteudo { max-width: 42rem; }

.vp-hero__titulo {
  margin-bottom: var(--vp-esp-5);
  /* Menor que o display das outras aberturas: aqui o titulo divide a tela
     com o painel e precisa fechar em duas linhas, deixando o campo acima
     da dobra num notebook. */
  font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem);
  font-weight: var(--vp-peso-display);
  line-height: var(--vp-lh-display);
  letter-spacing: var(--vp-ls-display);
  color: var(--vp-branco);
  text-wrap: balance;
}
/* A palavra que o titulo mede fica no pico da rampa. Uma so. */
.vp-hero__titulo em {
  font-style: normal;
  color: var(--vp-ambar-energia);
}

.vp-hero__texto {
  max-width: 30rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--vp-cor-texto);
}

/* --------------------------------------------------------------- o campo
   Nao e uma caixa de input. E um valor sobre uma regua — a linha de base em
   ambar e a cota do instrumento, e o numero se apoia nela. */
.vp-medir { margin-bottom: clamp(1.25rem, .75rem + 1.5vw, 2rem); }

.vp-medir__rotulo { display: block; margin-bottom: var(--vp-esp-3); }

.vp-medir__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
}

.vp-medir__campo {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--vp-ambar-energia);
  transition: border-color var(--vp-trans-rapida);
}
/* A regua trocando de ambar para branco sozinha nao e sinal de foco: os dois
   estados ficam em 1,7:1 entre si. O anel abaixo da os 3:1 contra o vacuo. */
.vp-medir__campo:focus-within {
  border-bottom-color: var(--vp-branco);
  outline: 2px solid var(--vp-ambar-energia);
  outline-offset: 6px;
  border-radius: 1px;
}

.vp-medir__prefixo {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  font-weight: 500;
  color: var(--vp-cor-texto-suave);
}

.vp-medir__input {
  width: clamp(5.5rem, 22vw, 9rem);
  padding: 0;
  font-family: inherit;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.375rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--vp-branco);
  background: transparent;
  border: 0;
  caret-color: var(--vp-ambar-energia);
}
.vp-medir__input::placeholder { color: var(--vp-cor-texto-suave); opacity: 1; }
.vp-medir__input:focus-visible { outline: none; box-shadow: none; }

.vp-medir__dica {
  margin: var(--vp-esp-3) 0 0;
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
}
.vp-medir__dica[data-erro] { color: #FF8A80; font-weight: 500; }

/* A prova entra como UMA linha medida, com os numeros em tabular. Nao e a
   tira de quatro indicadores que todo site de servico usa: ali o numero
   grande chama atencao para si, aqui ele sustenta a frase. */
.vp-hero__prova {
  max-width: 34rem;
  margin: 0;
  padding-top: var(--vp-esp-4);
  font-size: var(--vp-fs-sm);
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}
.vp-hero__prova strong {
  font-weight: 600;
  color: var(--vp-branco);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   08b. O PAINEL DA CONTA
   ==========================================================================

   Substituiu a janela de termograma abstrata: uma mancha de calor nao dizia
   nada a quem chega querendo saber quanto vai pagar. Agora o painel mostra
   uma obra real do acervo em cima e, embaixo, a conta do proprio visitante
   em duas barras — hoje e com energia solar.

   As barras usam a rampa horizontal da marca porque aqui a cor codifica
   valor em reais: a conta de hoje vai ate o ambar; a conta com solar para
   antes, numa cor mais fria. O preenchimento das barras (900ms) e o momento
   de movimento do hero.
   -------------------------------------------------------------------------- */
.vp-comp {
  display: grid;
  border: 1px solid var(--vp-moldura);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-900);
  box-shadow: var(--vp-sombra-lg);
  overflow: hidden;
}

.vp-comp__foto {
  position: relative;
  margin: 0;
  height: clamp(130px, 24vh, 250px);
  background: var(--vp-vacuo-700);
  overflow: hidden;
}
.vp-comp__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 58%;
}
.vp-comp__legenda {
  position: absolute;
  left: .75rem;
  bottom: .65rem;
  padding: .25rem .55rem;
  border-radius: var(--vp-raio-sm);
  background: rgba(10, 13, 19, .8);
  font-size: var(--vp-fs-xs);
  line-height: 1.4;
  color: var(--vp-cor-texto);
}

.vp-comp__painel {
  display: grid;
  gap: .9rem;
  padding: clamp(1rem, .7rem + 1vw, 1.5rem);
}
.vp-comp__titulo { margin: 0; }

/* ------------------------------------------------------------- as barras */
.vp-comp__barras { display: grid; gap: .65rem; }

.vp-comp__linha {
  display: grid;
  grid-template-columns: 8.25rem minmax(0, 1fr) 6.25rem;
  align-items: center;
  gap: .85rem;
}
.vp-comp__nome {
  font-size: var(--vp-fs-sm);
  line-height: 1.3;
  color: var(--vp-cor-texto);
}
.vp-comp__trilho {
  position: relative;
  height: 14px;
  border: 1px solid var(--vp-moldura);
  border-radius: 2px;
  background: var(--vp-vacuo);
  overflow: hidden;
}
/* A barra ocupa o trilho inteiro e e recortada pela direita: assim a rampa
   fica fixa no trilho e uma barra mais curta termina numa cor mais fria,
   em vez de comprimir o gradiente inteiro no pedaco que sobrou. */
.vp-comp__barra {
  position: absolute;
  inset: 0;
  background: var(--vp-rampa-h);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--vp-trans-lenta);
}
.vp-comp.is-medido .vp-comp__barra--hoje { clip-path: inset(0 0 0 0); }
.vp-comp.is-medido .vp-comp__barra--solar {
  clip-path: inset(0 calc(100% - var(--p, 100%)) 0 0);
  transition-delay: 120ms;
}
.vp-comp__valor {
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: right;
  color: var(--vp-cor-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vp-comp.is-medido .vp-comp__valor { color: var(--vp-branco); }

.vp-comp__estado {
  margin: 0;
  font-size: var(--vp-fs-sm);
  font-weight: 500;
  color: var(--vp-cor-texto-suave);
}
.vp-comp.is-medido .vp-comp__estado {
  font-weight: 600;
  color: var(--vp-ambar-energia);
}

/* ------------------------------------------------------------ as leituras */
.vp-comp__leituras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: space-between;
  gap: .75rem 1.25rem;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--vp-borda);
}
.vp-leitura { display: grid; gap: .3rem; align-content: start; }
.vp-leitura dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--vp-cor-texto-suave);
  font-variant-numeric: tabular-nums;
  transition: color var(--vp-trans-lenta);
}
.vp-comp.is-medido .vp-leitura dd { color: var(--vp-branco); }
.vp-leitura--pico dd { font-size: 1.375rem; }
.vp-comp.is-medido .vp-leitura--pico dd { color: var(--vp-ambar-energia); }

.vp-comp__nota {
  margin: 0;
  font-size: var(--vp-fs-xs);
  line-height: 1.5;
  color: var(--vp-cor-texto-suave);
}
.vp-comp__nota a { color: var(--vp-ambar-energia); font-weight: 500; }
/* A nota so aparece depois do calculo, mas a linha dela fica reservada desde
   o inicio: sem isso o painel cresce ao medir e empurra o titulo ao lado. */
.vp-comp__nota[hidden] { display: block; visibility: hidden; }

/* Quatro leituras numa linha quando ha largura para os valores inteiros
   (o retorno chega a "3 anos e 5 meses"); senao, duas por linha. */
@media (min-width: 40rem) and (max-width: 1023px), (min-width: 1080px) {
  .vp-comp__leituras { grid-template-columns: repeat(4, auto); column-gap: 1rem; }
  .vp-leitura dd { white-space: nowrap; }
}

/* ------------------------------------------------------- rotulo de leitura
   O rotulo em caixa alta sobrevive ao banimento do eyebrow porque aqui ele e
   o que de fato e: a legenda de uma medicao, ao lado de um numero. Nunca
   acima de um titulo. */
.vp-rotulo {
  font-size: var(--vp-fs-rotulo);
  font-weight: 600;
  letter-spacing: var(--vp-ls-rotulo);
  text-transform: uppercase;
  color: var(--vp-aco);
}

/* Tela estreita: o rotulo da barra encolhe. */
@media (max-width: 30rem) {
  .vp-comp__linha { grid-template-columns: 5.5rem minmax(0, 1fr) 5.25rem; gap: .6rem; }
  .vp-comp__nome { font-size: var(--vp-fs-xs); }
  .vp-comp__valor { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-comp__barra,
  .vp-leitura dd { transition-duration: 1ms; transition-delay: 0s; }
}

/* ==========================================================================
   09. CARDS E GRIDS GENERICOS
   ========================================================================== */
.vp-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  row-gap: var(--vp-esp-3);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  transition: border-color var(--vp-trans), background-color var(--vp-trans);
}
/* O hover esquenta a moldura em vez de levitar o card. Um painel de
   instrumento nao se descola da superficie; ele entra em escala. */
.vp-card:hover {
  border-color: var(--vp-ambar-energia);
  background: var(--vp-vacuo-600);
}

/* Icone e titulo dividem a primeira linha. Todo filho restante vai para a
   coluna do texto, o que mantem o componente valido nos cards que tambem
   trazem rodape, lista ou link. */
.vp-card__icone {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-self: center;
  color: var(--vp-ambar-energia);
}
.vp-card__icone svg { width: 20px; height: 20px; }

.vp-card__titulo {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: var(--vp-fs-h4);
  color: var(--vp-branco);
}
.vp-card > *:not(.vp-card__icone):not(.vp-card__titulo) { grid-column: 2; }

.vp-card__texto { margin-bottom: 0; font-size: var(--vp-fs-sm); color: var(--vp-cor-texto-suave); }
.vp-card__rodape { margin-top: var(--vp-esp-2); padding-top: 0; }

/* Card sem icone: o titulo assume as duas colunas, para nao sobrar uma
   goteira vazia a esquerda. */
.vp-card:not(:has(.vp-card__icone)) { grid-template-columns: minmax(0, 1fr); }
/* .vp-card repetido de proposito: a regra geral acima (texto na coluna 2)
   tem especificidade 0,3,0 e ganhava desta, que tinha 0,2,0. O texto abria
   uma segunda coluna e o titulo ficava espremido, uma letra por linha. */
.vp-card.vp-card:not(:has(.vp-card__icone)) > * { grid-column: 1; }
.vp-card.vp-card:not(:has(.vp-card__icone)) > .vp-card__titulo { grid-row: auto; }

/* Variante escura */
.vp-card--escuro {
  background: rgba(255, 255, 255, .04);
  border-color: var(--vp-borda-escura);
  color: rgba(255, 255, 255, .78);
}
.vp-card--escuro:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .26); }
.vp-card--escuro .vp-card__titulo { color: #fff; }
.vp-card--escuro .vp-card__texto { color: rgba(255, 255, 255, .72); }
.vp-card--escuro .vp-card__icone {
  background: transparent;
  border-color: rgba(252, 167, 38, .3);
  color: var(--vp-laranja-solar);
}
.vp-card--escuro:hover .vp-card__icone { color: var(--vp-branco); }

/* ==========================================================================
   10. SECAO DIFERENCIAIS
   ========================================================================== */
/* O numero de sequencia decorativo (01-06 a 6% de opacidade atras de cada
   card) saiu do HTML junto com a grade de cards de diferencial. A regra
   tambem sai: CSS sem markup e o convite para o padrao voltar. */
.vp-diferenciais__normas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vp-esp-2);
  margin-top: var(--vp-esp-4);
}
.vp-diferenciais__norma {
  padding: .25rem .55rem;
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-sm);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--vp-cor-texto);
  background: var(--vp-vacuo-700);
}

/* ==========================================================================
   11. SECAO SOBRE + CONTADORES
   ========================================================================== */
.vp-sobre__layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.vp-sobre__midia { position: relative; }
.vp-sobre__selo {
  position: absolute;
  right: calc(-1 * var(--vp-esp-3));
  bottom: calc(-1 * var(--vp-esp-4));
  display: grid;
  gap: .1rem;
  padding: var(--vp-esp-4) var(--vp-esp-5);
  border-radius: var(--vp-raio);
  background: var(--vp-vacuo-700);
  box-shadow: var(--vp-sombra-lg);
  color: #fff;
  text-align: center;
}
.vp-sobre__selo-numero {
  font-family: var(--vp-fonte-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--vp-ambar-energia);
}
.vp-sobre__selo-texto { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

.vp-contadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vp-esp-5);
  margin-top: var(--vp-esp-6);
  padding-top: var(--vp-esp-6);
  border-top: 1px solid var(--vp-borda);
}
.vp-contador__valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;          /* em telas estreitas a unidade desce de linha */
  gap: .05em .12em;
  min-width: 0;             /* deixa o item encolher dentro da coluna do grid */
  font-family: var(--vp-fonte-titulo);
  font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--vp-ls-display);
  color: var(--vp-ambar-energia);
}

/* Unidade de medida: proporcional ao número, nunca do mesmo tamanho dele.
   Antes era um espaço dentro do <span>, que o layout flex descartava por
   estar no início do item — daí o "796kWp" colado estourando a coluna. */
.vp-contador__unidade {
  font-size: .42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--vp-laranja-solar);
}
.vp-secao--escura .vp-contador__unidade { color: var(--vp-laranja-solar); }
.vp-contador__rotulo {
  margin-top: .5rem;
  font-size: var(--vp-fs-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--vp-cor-texto-suave);
}
.vp-secao--escura .vp-contador__valor { color: var(--vp-laranja-solar); }
.vp-secao--escura .vp-contador__rotulo { color: rgba(255, 255, 255, .7); }
.vp-secao--escura .vp-contadores { border-top-color: var(--vp-borda-escura); }

/* ==========================================================================
   12. SECAO SERVICOS (ABAS)
   ========================================================================== */
.vp-abas { display: grid; gap: var(--vp-esp-6); }
.vp-abas__lista {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-pill);
  background: var(--vp-vacuo-600);
  box-shadow: var(--vp-sombra-sm);
}
.vp-abas__lista--centro { margin-inline: auto; }
.vp-abas__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.15rem;
  border-radius: var(--vp-raio-pill);
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-cor-texto);
  white-space: nowrap;
  transition: background-color var(--vp-trans-rapida), color var(--vp-trans-rapida);
}
.vp-abas__btn svg { width: 17px; height: 17px; }
.vp-abas__btn:hover { color: var(--vp-cor-titulo); background: var(--vp-vacuo-600); }
.vp-abas__btn[aria-selected="true"] { background: var(--vp-ambar-energia); color: var(--vp-vacuo); }
.vp-abas__painel:focus-visible { outline-offset: 8px; }

/* Card de servico */
.vp-servico {
  display: flex;
  flex-direction: column;
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  transition: transform var(--vp-trans), box-shadow var(--vp-trans), border-color var(--vp-trans);
}
.vp-servico:hover { transform: translateY(-5px); box-shadow: var(--vp-sombra-md); border-color: var(--vp-ambar-energia); }
.vp-servico__midia { position: relative; aspect-ratio: 16 / 10; background: var(--vp-azul-noturno-700); overflow: hidden; }
.vp-servico__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vp-trans-lenta);
}
.vp-servico:hover .vp-servico__midia img { transform: scale(1.06); }
.vp-servico__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 13, 19, .6), transparent 60%);
}
.vp-servico__icone {
  position: absolute;
  left: var(--vp-esp-4);
  bottom: var(--vp-esp-4);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--vp-raio-sm);
  background: rgba(36, 36, 84, .78);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  color: var(--vp-laranja-solar);
}
.vp-servico__icone svg { width: 24px; height: 24px; }
.vp-servico__frente {
  position: absolute;
  right: var(--vp-esp-4);
  top: var(--vp-esp-4);
  z-index: 2;
  padding: .25rem .6rem;
  border-radius: var(--vp-raio-pill);
  background: rgba(10, 13, 19, .88);
  border-top: 1px solid var(--vp-moldura);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vp-cor-titulo);
}
.vp-servico__corpo { display: flex; flex-direction: column; flex: 1; padding: var(--vp-esp-5); }
.vp-servico__titulo { margin-bottom: var(--vp-esp-3); font-size: var(--vp-fs-h4); }
.vp-servico__texto {
  margin-bottom: var(--vp-esp-5);
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
  flex: 1;
}
.vp-servico__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--vp-esp-5); }
.vp-servico__tag {
  padding: .2rem .5rem;
  border-radius: var(--vp-raio-sm);
  background: var(--vp-vacuo-600);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--vp-cor-texto);
}

/* ==========================================================================
   13. METODOLOGIA (TIMELINE) E TECNOLOGIAS
   ========================================================================== */
.vp-timeline { position: relative; display: grid; gap: var(--vp-esp-5); }
.vp-etapa {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--vp-esp-4);
  padding-bottom: var(--vp-esp-5);
}
.vp-etapa:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: var(--vp-aco-600);   /* conector de etapa: estrutura, logo cor plana */
}
.vp-etapa__numero {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(252, 167, 38, .35);
  background: rgba(252, 167, 38, .08);
  font-family: var(--vp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--vp-laranja-solar);
  flex: none;
  transition: background-color var(--vp-trans), color var(--vp-trans), transform var(--vp-trans);
}
.vp-etapa.is-ativa .vp-etapa__numero,
.vp-etapa:hover .vp-etapa__numero {
  background: var(--vp-laranja-solar);
  color: var(--vp-cor-titulo);
  transform: scale(1.06);
}
.vp-etapa__conteudo { padding-top: .35rem; }
.vp-etapa__titulo { margin-bottom: var(--vp-esp-2); font-size: var(--vp-fs-h4); }
.vp-etapa__texto { margin-bottom: 0; font-size: var(--vp-fs-sm); }
.vp-etapa__entregas {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: var(--vp-esp-3);
}
.vp-etapa__entrega {
  padding: .2rem .55rem;
  border: 1px solid var(--vp-borda-escura);
  border-radius: var(--vp-raio-sm);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
}

/* Bloco de tecnologias */
.vp-tecnologias { display: grid; gap: var(--vp-esp-4); }
.vp-tecnologia {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--vp-esp-4);
  align-items: start;
  padding: var(--vp-esp-4);
  border: 1px solid var(--vp-borda-escura);
  border-radius: var(--vp-raio);
  background: rgba(255, 255, 255, .035);
  transition: background-color var(--vp-trans), border-color var(--vp-trans);
}
.vp-tecnologia:hover { background: rgba(255, 255, 255, .07); border-color: rgba(252, 167, 38, .4); }
.vp-tecnologia__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--vp-raio-sm);
  background: rgba(252, 167, 38, .12);
  color: var(--vp-laranja-solar);
}
.vp-tecnologia__icone svg { width: 22px; height: 22px; }
.vp-tecnologia__titulo { margin-bottom: .2rem; font-size: 1rem; color: #fff; }
.vp-tecnologia__texto { margin: 0; font-size: var(--vp-fs-xs); color: rgba(255, 255, 255, .68); line-height: 1.55; }

/* ==========================================================================
   14. PROJETOS (FILTRO + GALERIA) E LIGHTBOX
   ========================================================================== */
.vp-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
.vp-filtro__btn {
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--vp-borda);
  border-radius: var(--vp-raio-pill);
  background: var(--vp-vacuo-600);
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--vp-cor-texto);
  transition: all var(--vp-trans-rapida);
}
.vp-filtro__btn:hover { border-color: var(--vp-ambar-energia); color: var(--vp-ambar-energia); }
.vp-filtro__btn.is-ativo {
  background: var(--vp-ambar-energia);
  border-color: var(--vp-ambar-energia);
  color: var(--vp-vacuo);
}
.vp-filtro__contagem { margin-left: .4rem; opacity: .6; font-weight: 500; }

.vp-galeria { display: grid; gap: clamp(1.125rem, .75rem + 1.2vw, 1.75rem); }
.vp-galeria__item { transition: opacity var(--vp-trans), transform var(--vp-trans); }
.vp-galeria__item.is-oculto { display: none; }

.vp-projeto {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--vp-trans), box-shadow var(--vp-trans);
}
.vp-projeto:hover { transform: translateY(-5px); box-shadow: var(--vp-sombra-md); }
.vp-projeto__midia { position: relative; aspect-ratio: 4 / 3; background: var(--vp-azul-noturno-700); overflow: hidden; }
.vp-projeto__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vp-trans-lenta); }
.vp-projeto:hover .vp-projeto__midia img { transform: scale(1.07); }
.vp-projeto__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to top, rgba(10, 13, 19, .9) 0%, rgba(10, 13, 19, .18) 55%, transparent 100%);
  opacity: 0;
  transition: opacity var(--vp-trans);
}
.vp-projeto:hover .vp-projeto__overlay,
.vp-projeto:focus-visible .vp-projeto__overlay { opacity: 1; }
.vp-projeto__lupa {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(10, 13, 19, .88);
  color: var(--vp-cor-titulo);
  transform: scale(.85);
  transition: transform var(--vp-trans);
}
.vp-projeto:hover .vp-projeto__lupa { transform: scale(1); }
.vp-projeto__lupa svg { width: 22px; height: 22px; }
.vp-projeto__categoria {
  position: absolute;
  left: var(--vp-esp-4);
  top: var(--vp-esp-4);
  z-index: 2;
  padding: .25rem .6rem;
  border-radius: var(--vp-raio-pill);
  background: rgba(36, 36, 84, .82);
  backdrop-filter: blur(6px);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vp-laranja-solar);
}
.vp-projeto__corpo { padding: var(--vp-esp-5); }
.vp-projeto__titulo { margin-bottom: .35rem; font-size: 1.0625rem; }
.vp-projeto__local {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: var(--vp-esp-4);
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
}
.vp-projeto__local svg { width: 14px; height: 14px; flex: none; }
.vp-projeto__resultado {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-top: var(--vp-esp-3);
  border-top: 1px solid var(--vp-borda);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  color: var(--vp-laranja-solar);
}
.vp-projeto__resultado svg { width: 16px; height: 16px; flex: none; }

/* Lightbox */
.vp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--vp-z-modal);
  display: grid;
  place-items: center;
  padding: var(--vp-esp-4);
  background: rgba(10, 13, 19, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vp-trans), visibility var(--vp-trans);
}
.vp-lightbox.is-aberto { opacity: 1; visibility: visible; }
.vp-lightbox__painel {
  position: relative;
  width: min(100%, 1060px);
  max-height: 92vh;
  display: grid;
  background: var(--vp-vacuo-900);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  transform: scale(.96);
  transition: transform var(--vp-trans-lenta);
}
.vp-lightbox.is-aberto .vp-lightbox__painel { transform: scale(1); }
.vp-lightbox__midia { background: var(--vp-vacuo-900); aspect-ratio: 16 / 10; }
.vp-lightbox__midia img { width: 100%; height: 100%; object-fit: cover; }
.vp-lightbox__info { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); overflow-y: auto; }
.vp-lightbox__categoria { margin-bottom: var(--vp-esp-3); }
.vp-lightbox__titulo { margin-bottom: var(--vp-esp-4); font-size: var(--vp-fs-h3); }
.vp-lightbox__dados { display: grid; gap: var(--vp-esp-3); margin-bottom: var(--vp-esp-5); }
.vp-lightbox__dado { display: grid; gap: .15rem; font-size: var(--vp-fs-sm); }
.vp-lightbox__dado dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vp-cor-texto-suave);
}
.vp-lightbox__dado dd { margin: 0; color: var(--vp-cor-texto); }
.vp-lightbox__fechar {
  position: absolute;
  right: var(--vp-esp-3);
  top: var(--vp-esp-3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 13, 19, .72);
  color: #fff;
  transition: background-color var(--vp-trans-rapida);
}
.vp-lightbox__fechar:hover { background: var(--vp-ambar-energia); color: var(--vp-vacuo); }
.vp-lightbox__fechar svg { width: 20px; height: 20px; }
.vp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(10, 13, 19, .88);
  color: var(--vp-cor-titulo);
  box-shadow: var(--vp-sombra);
  transition: background-color var(--vp-trans-rapida), color var(--vp-trans-rapida);
}
.vp-lightbox__nav:hover { background: var(--vp-ambar-energia); color: var(--vp-vacuo); }
.vp-lightbox__nav svg { width: 20px; height: 20px; }
.vp-lightbox__nav--anterior { left: var(--vp-esp-3); }
.vp-lightbox__nav--proximo { right: var(--vp-esp-3); }
.vp-lightbox__contador {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--vp-esp-6));
  transform: translateX(-50%);
  font-size: var(--vp-fs-xs);
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   15. ANTES E DEPOIS
   ========================================================================== */
.vp-ad { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.vp-comparador {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  background: var(--vp-azul-noturno-700);
  box-shadow: var(--vp-sombra-md);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.vp-comparador__camada { position: absolute; inset: 0; }
.vp-comparador__camada img { width: 100%; height: 100%; object-fit: cover; }
.vp-comparador__camada--depois {
  clip-path: inset(0 0 0 var(--vp-ad-pos, 50%));
}
.vp-comparador__rotulo {
  position: absolute;
  bottom: var(--vp-esp-4);
  z-index: 3;
  padding: .3rem .75rem;
  border-radius: var(--vp-raio-pill);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.vp-comparador__rotulo--antes { left: var(--vp-esp-4); background: rgba(36, 36, 84, .82); color: rgba(255, 255, 255, .9); }
.vp-comparador__rotulo--depois { right: var(--vp-esp-4); background: rgba(252, 167, 38, .9); color: var(--vp-azul-noturno-900); }

.vp-comparador__alca {
  position: absolute;
  inset-block: 0;
  left: var(--vp-ad-pos, 50%);
  z-index: 4;
  width: 3px;
  margin-left: -1.5px;
  background: var(--vp-vacuo-600);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}
.vp-comparador__botao {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vp-vacuo-600);
  color: var(--vp-cor-titulo);
  box-shadow: var(--vp-sombra-md);
  cursor: ew-resize;
}
.vp-comparador__botao svg { width: 22px; height: 22px; pointer-events: none; }
.vp-comparador__botao:focus-visible { outline-offset: 4px; }

.vp-ad__seletor { display: grid; gap: var(--vp-esp-3); }
.vp-ad__opcao {
  display: grid;
  gap: .3rem;
  width: 100%;
  padding: var(--vp-esp-4);
  text-align: left;
  border: 1.5px solid var(--vp-borda);
  border-radius: var(--vp-raio);
  background: var(--vp-vacuo-700);
  transition: all var(--vp-trans-rapida);
}
.vp-ad__opcao:hover { border-color: var(--vp-ambar-energia); }
.vp-ad__opcao.is-ativo { border-color: var(--vp-ambar-energia); background: rgba(252, 192, 12, .08); }
.vp-ad__opcao-titulo { font-family: var(--vp-fonte-titulo); font-size: var(--vp-fs-sm); font-weight: 600; color: var(--vp-cor-titulo); }
.vp-ad__opcao-texto { font-size: var(--vp-fs-xs); color: var(--vp-cor-texto-suave); line-height: 1.5; }

/* ==========================================================================
   16. EQUIPE
   ========================================================================== */
.vp-pessoa {
  position: relative;
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  background: var(--vp-vacuo-700);
  transition: transform var(--vp-trans), box-shadow var(--vp-trans);
}
.vp-pessoa:hover { transform: translateY(-5px); box-shadow: var(--vp-sombra-md); }
.vp-pessoa__midia { position: relative; aspect-ratio: 1 / 1; background: var(--vp-azul-noturno-700); overflow: hidden; }
.vp-pessoa__midia img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform var(--vp-trans-lenta), filter var(--vp-trans); }
.vp-pessoa:hover .vp-pessoa__midia img { transform: scale(1.05); filter: saturate(1); }
.vp-pessoa__revelar {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--vp-esp-3);
  padding: var(--vp-esp-5);
  background: linear-gradient(to top, rgba(10, 13, 19, .97) 0%, rgba(10, 13, 19, .84) 45%, rgba(10, 13, 19, .12) 100%);
  opacity: 0;
  transition: opacity var(--vp-trans);
}
.vp-pessoa:hover .vp-pessoa__revelar,
.vp-pessoa:focus-within .vp-pessoa__revelar { opacity: 1; }
.vp-pessoa__curriculo { margin: 0; font-size: var(--vp-fs-xs); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.vp-pessoa__linkedin {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  padding: .4rem .8rem;
  border-radius: var(--vp-raio-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  color: #fff;
}
.vp-pessoa__linkedin:hover { background: #fff; color: var(--vp-azul-noturno); }
.vp-pessoa__linkedin svg { width: 15px; height: 15px; }
.vp-pessoa__corpo { padding: var(--vp-esp-5); }
.vp-pessoa__nome { margin-bottom: .2rem; font-size: 1.0625rem; }
.vp-pessoa__cargo { margin-bottom: var(--vp-esp-3); font-size: var(--vp-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vp-ambar-energia); }
.vp-pessoa__crea {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: var(--vp-esp-3);
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto);
}
.vp-pessoa__crea svg { width: 14px; height: 14px; color: var(--vp-laranja-solar); }
.vp-pessoa__certificacoes { display: flex; flex-wrap: wrap; gap: .3rem; }
.vp-pessoa__cert {
  padding: .18rem .5rem;
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-sm);
  background: var(--vp-vacuo-600);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--vp-cor-texto);
}

/* ==========================================================================
   17. CLIENTES (MARQUEE) E CERTIFICACOES
   ========================================================================== */
/* O carrossel de logotipos de cliente (34 linhas) saiu junto com os oito
   nomes ficticios que ele desfilava. A prova social desta secao agora e o
   numero real de clientes no titulo, que vem das ARTs. */

.vp-selos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vp-esp-4);
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}
/* Os selos seguem a mesma gramatica de .vp-ponto: sem caixa, sem borda e sem
   centralizar. O icone desce de 30px para 18px e senta na linha do titulo, e
   a leitura passa a ser da esquerda para a direita como qualquer texto — nao
   de cima para baixo como um cartao de feature. */
.vp-selo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icone titulo" ".     texto";
  column-gap: .625rem;
  row-gap: .4rem;
  align-content: start;
}
.vp-selo__titulo {
  grid-area: titulo;
  align-self: center;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-branco);
}
.vp-selo__icone { grid-area: icone; display: inline-flex; align-self: center; color: var(--vp-ambar-energia); }
.vp-selo__icone svg { width: 18px; height: 18px; }
.vp-selo__texto {
  grid-area: texto;
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
  line-height: 1.55;
  max-width: 32ch;
}

/* ==========================================================================
   18. DEPOIMENTOS (CAROUSEL)
   ========================================================================== */
.vp-carousel { position: relative; }
.vp-carousel__viewport { overflow: hidden; }
.vp-carousel__trilha {
  display: flex;
  transition: transform var(--vp-trans-lenta);
  will-change: transform;
}
.vp-carousel__slide { flex: 0 0 100%; padding-inline: 2px; box-sizing: border-box; }

.vp-depoimento {
  display: flex;
  flex-direction: column;
  gap: var(--vp-esp-5);
  height: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  box-shadow: var(--vp-sombra-sm);
}
.vp-depoimento__estrelas { display: flex; gap: .15rem; color: var(--vp-ambar-energia); }
.vp-depoimento__estrelas svg { width: 18px; height: 18px; }
.vp-depoimento__texto {
  flex: 1;
  margin: 0;
  font-size: clamp(1rem, .97rem + .35vw, 1.125rem);
  line-height: 1.65;
  color: var(--vp-cor-texto);
}
.vp-depoimento__texto::before { content: "\201C"; }
.vp-depoimento__texto::after { content: "\201D"; }
.vp-depoimento__autor {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--vp-esp-4);
  align-items: center;
  padding-top: var(--vp-esp-5);
  border-top: 1px solid var(--vp-borda);
}
.vp-depoimento__foto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vp-azul-noturno-700);
}
.vp-depoimento__nome { font-family: var(--vp-fonte-titulo); font-size: 1rem; font-weight: 600; color: var(--vp-cor-titulo); }
.vp-depoimento__cargo { font-size: var(--vp-fs-xs); color: var(--vp-cor-texto-suave); line-height: 1.45; }

.vp-carousel__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-4);
  margin-top: var(--vp-esp-6);
}
.vp-carousel__botoes { display: flex; gap: var(--vp-esp-2); }
.vp-carousel__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--vp-borda);
  border-radius: 50%;
  background: var(--vp-vacuo-600);
  color: var(--vp-cor-titulo);
  transition: all var(--vp-trans-rapida);
}
.vp-carousel__btn:hover { background: var(--vp-vacuo-600); border-color: var(--vp-vacuo-600); color: #fff; }
.vp-carousel__btn svg { width: 19px; height: 19px; }
.vp-carousel__pontos { display: flex; gap: .4rem; }
.vp-carousel__ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vp-aco-600);
  transition: all var(--vp-trans);
}
.vp-carousel__ponto.is-ativo { width: 28px; border-radius: var(--vp-raio-pill); background: var(--vp-ambar-energia); }

/* ==========================================================================
   19. FAQ (ACCORDION)
   ========================================================================== */
.vp-faq { display: grid; gap: var(--vp-esp-3); }
.vp-faq__item {
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio);
  background: var(--vp-vacuo-700);
  overflow: hidden;
  transition: border-color var(--vp-trans), box-shadow var(--vp-trans);
}
.vp-faq__item.is-aberto { border-color: var(--vp-ambar-energia); box-shadow: var(--vp-sombra-sm); }
.vp-faq__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-4);
  width: 100%;
  padding: var(--vp-esp-5);
  text-align: left;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-body);
  font-weight: 600;
  color: var(--vp-cor-titulo);
  transition: color var(--vp-trans-rapida);
}
.vp-faq__gatilho:hover { color: var(--vp-ambar-energia); }
.vp-faq__icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vp-vacuo-600);
  color: var(--vp-ambar-energia);
  flex: none;
  transition: background-color var(--vp-trans), color var(--vp-trans), transform var(--vp-trans);
}
.vp-faq__icone::before,
.vp-faq__icone::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--vp-trans), opacity var(--vp-trans-rapida);
}
.vp-faq__icone::before { width: 12px; height: 2px; }
.vp-faq__icone::after { width: 2px; height: 12px; }
.vp-faq__item.is-aberto .vp-faq__icone { background: var(--vp-ambar-energia); color: var(--vp-vacuo); }
.vp-faq__item.is-aberto .vp-faq__icone::after { transform: rotate(90deg); opacity: 0; }
.vp-faq__painel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--vp-trans-lenta);
}
.vp-faq__conteudo {
  padding: 0 var(--vp-esp-5) var(--vp-esp-5);
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
}
.vp-faq__conteudo p + p { margin-top: var(--vp-esp-3); }

/* ==========================================================================
   20. BLOG
   ========================================================================== */
.vp-artigo-card {
  display: flex;
  flex-direction: column;
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  transition: transform var(--vp-trans), box-shadow var(--vp-trans);
}
.vp-artigo-card:hover { transform: translateY(-5px); box-shadow: var(--vp-sombra-md); }
.vp-artigo-card__midia { position: relative; aspect-ratio: 16 / 9; background: var(--vp-azul-noturno-700); overflow: hidden; }
.vp-artigo-card__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vp-trans-lenta); }
.vp-artigo-card:hover .vp-artigo-card__midia img { transform: scale(1.05); }
.vp-artigo-card__categoria {
  position: absolute;
  left: var(--vp-esp-4);
  top: var(--vp-esp-4);
  z-index: 2;
  padding: .25rem .6rem;
  border-radius: var(--vp-raio-pill);
  background: rgba(10, 13, 19, .88);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vp-ambar-energia);
}
.vp-artigo-card__corpo { display: flex; flex-direction: column; flex: 1; padding: var(--vp-esp-5); }
.vp-artigo-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--vp-esp-3);
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
}
.vp-artigo-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.vp-artigo-card__meta svg { width: 13px; height: 13px; }
.vp-artigo-card__titulo { margin-bottom: var(--vp-esp-3); font-size: var(--vp-fs-h4); }
.vp-artigo-card__titulo a { color: inherit; }
.vp-artigo-card__titulo a:hover { color: var(--vp-ambar-energia); }
.vp-artigo-card__resumo { flex: 1; margin-bottom: var(--vp-esp-5); font-size: var(--vp-fs-sm); color: var(--vp-cor-texto-suave); }

/* Artigo em destaque */
.vp-artigo-destaque {
  display: grid;
  gap: 0;
  background: var(--vp-vacuo-700);
  background-image: var(--vp-grid-escuro);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.vp-artigo-destaque__midia { aspect-ratio: 16 / 9; background: var(--vp-azul-noturno-700); }
.vp-artigo-destaque__midia img { width: 100%; height: 100%; object-fit: cover; }
.vp-artigo-destaque__corpo { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); color: rgba(255, 255, 255, .8); }
.vp-artigo-destaque__titulo { color: #fff; font-size: var(--vp-fs-h3); margin-bottom: var(--vp-esp-4); }
.vp-artigo-destaque__titulo a { color: inherit; }
.vp-artigo-destaque__titulo a:hover { color: var(--vp-laranja-solar); }

/* ==========================================================================
   21. CTA
   ========================================================================== */
.vp-cta { position: relative; overflow: hidden; background: var(--vp-vacuo-900); }
.vp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Duas lavagens radiais saíram: gradiente fora do dado. O CTA ganha
       profundidade pela cota de ambar no topo, nao por mancha de cor. */
    var(--vp-vacuo-900);
}
.vp-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vp-grid-escuro);
  opacity: .8;
}
.vp-cta > .vp-container { position: relative; z-index: 2; }
.vp-cta__conteudo { max-width: 720px; }
.vp-cta__titulo {
  margin-bottom: var(--vp-esp-4);
  font-size: var(--vp-fs-h1);
  color: #fff;
  letter-spacing: -.03em;
}
.vp-cta__texto { margin-bottom: var(--vp-esp-6); font-size: clamp(1rem, .97rem + .4vw, 1.1875rem); color: rgba(255, 255, 255, .8); }
.vp-cta__nota {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--vp-esp-5);
  font-size: var(--vp-fs-xs);
  color: rgba(255, 255, 255, .62);
}
.vp-cta__nota svg { width: 15px; height: 15px; color: var(--vp-ambar-energia); flex: none; }

/* ==========================================================================
   22. CONTATO E MAPA
   ========================================================================== */
.vp-contato__layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.vp-contato__painel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  box-shadow: var(--vp-sombra);
}

.vp-info { display: grid; gap: var(--vp-esp-5); }
.vp-info__item { display: grid; grid-template-columns: 44px 1fr; gap: var(--vp-esp-4); align-items: start; }
.vp-info__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--vp-raio-sm);
  background: rgba(36, 36, 84, .08);
  border: 1px solid rgba(36, 36, 84, .14);
  color: var(--vp-ambar-energia);
}
.vp-info__icone svg { width: 21px; height: 21px; }
.vp-info__rotulo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vp-cor-texto-suave);
  margin-bottom: .15rem;
}
.vp-info__valor { font-size: var(--vp-fs-sm); color: var(--vp-cor-texto); line-height: 1.55; }
.vp-info__valor a { font-weight: 600; }

.vp-horario-atendimento {
  display: grid;
  gap: var(--vp-esp-3);
  padding: var(--vp-esp-5);
  border-radius: var(--vp-raio);
  background: var(--vp-vacuo-700);
  background-image: var(--vp-grid-escuro);
  color: rgba(255, 255, 255, .8);
}
.vp-horario-atendimento__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vp-ambar-energia);
}
.vp-horario-atendimento__titulo svg { width: 18px; height: 18px; }
.vp-horario-atendimento__texto { margin: 0; font-size: var(--vp-fs-xs); line-height: 1.6; color: rgba(255, 255, 255, .75); }
.vp-horario-atendimento__numero {
  font-family: var(--vp-fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.vp-horario-atendimento__numero:hover { color: var(--vp-ambar-energia); }

.vp-horarios { display: grid; gap: .5rem; }
.vp-horarios__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--vp-esp-4);
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--vp-borda);
  font-size: var(--vp-fs-sm);
}
.vp-horarios__linha:last-child { border-bottom: 0; padding-bottom: 0; }
.vp-horarios__dia { color: var(--vp-cor-texto-suave); }
.vp-horarios__hora { font-weight: 600; color: var(--vp-cor-titulo); }

.vp-mapa {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  border: 1px solid var(--vp-borda);
  background: var(--vp-vacuo-700);
}
.vp-mapa iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.vp-footer {
  position: relative;
  background: var(--vp-vacuo-900);
  background-image: var(--vp-grid-escuro);
  color: rgba(255, 255, 255, .68);
  font-size: var(--vp-fs-sm);
}
.vp-footer__topo { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.vp-footer__grade { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); }
.vp-footer__marca { max-width: 360px; }
.vp-footer__slogan {
  margin: var(--vp-esp-4) 0 0;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--vp-laranja-solar);
}
.vp-footer__texto { margin: var(--vp-esp-5) 0; font-size: var(--vp-fs-sm); line-height: 1.7; color: rgba(255, 255, 255, .66); }
.vp-footer__titulo {
  margin-bottom: var(--vp-esp-5);
  font-family: var(--vp-fonte-titulo);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.vp-footer__lista { display: grid; gap: .65rem; }
.vp-footer__link { color: rgba(255, 255, 255, .66); }
.vp-footer__link:hover { color: var(--vp-laranja-solar); padding-left: 3px; transition: all var(--vp-trans-rapida); }

.vp-footer__contato { display: grid; gap: var(--vp-esp-4); }
.vp-footer__contato-item { display: grid; grid-template-columns: 18px 1fr; gap: .65rem; align-items: start; }
.vp-footer__contato-item svg { width: 18px; height: 18px; color: var(--vp-laranja-solar); flex: none; margin-top: 3px; }
.vp-footer__contato-item a { color: rgba(255, 255, 255, .78); }
.vp-footer__contato-item a:hover { color: #fff; }

.vp-sociais { display: flex; gap: var(--vp-esp-3); }
.vp-sociais__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--vp-raio-sm);
  color: rgba(255, 255, 255, .78);
  transition: all var(--vp-trans-rapida);
}
.vp-sociais__link:hover { background: var(--vp-ambar-energia); border-color: var(--vp-ambar-energia); color: var(--vp-vacuo); transform: translateY(-2px); }
.vp-sociais__link svg { width: 19px; height: 19px; }

.vp-footer__base {
  padding-block: var(--vp-esp-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.vp-footer__base-interno {
  display: grid;
  gap: var(--vp-esp-4);
  font-size: var(--vp-fs-xs);
  color: rgba(255, 255, 255, .55);
}
.vp-footer__legal { display: grid; gap: .35rem; }
.vp-footer__legal strong { color: rgba(255, 255, 255, .8); font-weight: 600; }
.vp-footer__base-links { display: flex; flex-wrap: wrap; gap: var(--vp-esp-4); }
.vp-footer__base-links a { color: rgba(255, 255, 255, .62); }
.vp-footer__base-links a:hover { color: #fff; }

/* ==========================================================================
   24. ELEMENTOS GLOBAIS
   ========================================================================== */
/* WhatsApp flutuante */
.vp-whatsapp {
  position: fixed;
  right: var(--vp-esp-4);
  bottom: var(--vp-esp-4);
  z-index: var(--vp-z-flutuante);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem;
  border-radius: var(--vp-raio-pill);
  background: #0E7A35;
  color: #fff;
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  box-shadow: var(--vp-sombra);
  transition: transform var(--vp-trans), box-shadow var(--vp-trans), background-color var(--vp-trans-rapida);
}
.vp-whatsapp:hover { background: #0B6B2E; color: #fff; transform: translateY(-3px); box-shadow: var(--vp-sombra-md); }
.vp-whatsapp svg { width: 28px; height: 28px; flex: none; }
.vp-whatsapp__texto { display: none; padding-right: .4rem; }

/* Voltar ao topo */
.vp-topo {
  position: fixed;
  right: var(--vp-esp-4);
  bottom: calc(var(--vp-esp-4) + 68px);
  z-index: var(--vp-z-flutuante);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--vp-borda);
  border-radius: 50%;
  background: var(--vp-vacuo-600);
  color: var(--vp-cor-titulo);
  box-shadow: var(--vp-sombra-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--vp-trans);
}
.vp-topo.is-visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.vp-topo:hover { background: var(--vp-ambar-energia); color: var(--vp-vacuo); }
.vp-topo svg { width: 20px; height: 20px; }

/* Banner de cookies (LGPD) */
.vp-cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--vp-z-cookies);
  padding: var(--vp-esp-5) 0;
  background: var(--vp-vacuo-700);
  border-top: 2px solid var(--vp-ambar-energia);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  transform: translateY(110%);
  transition: transform var(--vp-trans-lenta);
}
.vp-cookies.is-visivel { transform: translateY(0); }
.vp-cookies__interno { display: grid; gap: var(--vp-esp-5); align-items: center; }
.vp-cookies__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: 1rem;
  color: #fff;
}
.vp-cookies__titulo svg { width: 20px; height: 20px; color: var(--vp-ambar-energia); }
.vp-cookies__texto { margin: 0; font-size: var(--vp-fs-xs); line-height: 1.6; color: rgba(255, 255, 255, .72); }
.vp-cookies__texto a { color: var(--vp-laranja-solar); text-decoration: underline; }
.vp-cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--vp-esp-3); }

/* Pagina 404 */
.vp-404 {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--vp-h-nav) + 4rem) 0 4rem;
  text-align: center;
  background: var(--vp-vacuo);
  background-image: var(--vp-grid-escuro);
  color: rgba(255, 255, 255, .78);
}
.vp-404__codigo {
  /* Aqui havia background-clip:text + -webkit-text-fill-color:transparent,
     pintando o numero com um gradiente. Hoje o token aponta para cor plana,
     entao a maquinaria nao fazia nada — mas continuava armada: bastava
     alguem devolver um gradiente ao token para o site ter texto em
     gradiente, que e banido. Cor direta. */
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: var(--vp-peso-display);
  line-height: 1;
  letter-spacing: var(--vp-ls-display);
  color: var(--vp-ambar-energia);
}
.vp-404__titulo { margin-top: var(--vp-esp-5); color: #fff; }
.vp-404__texto { max-width: 520px; margin: 0 auto var(--vp-esp-6); color: rgba(255, 255, 255, .72); }
.vp-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vp-esp-4);
  margin-top: var(--vp-esp-7);
  padding-top: var(--vp-esp-6);
  border-top: 1px solid var(--vp-borda-escura);
  font-size: var(--vp-fs-sm);
}

/* ==========================================================================
   25. PAGINAS INTERNAS
   ========================================================================== */
.vp-hero-interno {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 48vh, 540px);
  padding-top: calc(var(--vp-h-nav) + var(--vp-h-topbar) + 3rem);
  padding-bottom: clamp(2rem, 1rem + 4vw, 3.5rem);
  background: var(--vp-vacuo);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  isolation: isolate;
}
.vp-hero-interno__midia { position: absolute; inset: 0; z-index: -2; }
.vp-hero-interno__midia img { width: 100%; height: 100%; object-fit: cover; }
.vp-hero-interno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Scrim sobre FOTO, que e o unico caso em que ele se justifica: aqui a
     composicao nao pode resolver o contraste porque o fundo e uma imagem que
     nao controlo. Passa do marinho para o vacuo, para nao abrir um segundo
     mundo de cor em toda pagina interna. */
  background: linear-gradient(95deg, rgba(10, 13, 19, .96) 0%, rgba(10, 13, 19, .84) 55%, rgba(10, 13, 19, .5) 100%);
}
.vp-hero-interno__conteudo { max-width: 760px; }
.vp-hero-interno__titulo {
  margin-bottom: var(--vp-esp-4);
  font-size: var(--vp-fs-h1);
  color: #fff;
}
.vp-hero-interno__texto {
  margin: 0;
  max-width: var(--vp-medida-curta);
  font-size: clamp(1rem, .97rem + .4vw, 1.1875rem);
  color: rgba(255, 255, 255, .82);
}

/* Credito da foto, exigido pelas licencas CC BY das fotos ilustrativas. */
.vp-hero-interno__credito {
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  z-index: 1;
  padding: .15rem .45rem;
  border-radius: var(--vp-raio-sm);
  background: rgba(10, 13, 19, .88);
  font-size: var(--vp-fs-rotulo);
  line-height: 1.4;
  color: var(--vp-cor-texto);
}

/* ----------------------------------------- A foto AO LADO do titulo
   Em tela larga a foto sai do fundo (onde ficava sob um scrim de 96% e mal
   aparecia) e vira uma moldura a direita, na mesma altura do titulo. O
   markup nao muda: a midia continua antes do container e so o
   posicionamento troca, entao vale para todas as paginas internas.

   Pagina cuja foto ainda nao existe: o main.js marca a imagem com
   .vp-img-fallback, e a moldura some em vez de mostrar uma caixa vazia ao
   lado do titulo. */
@media (min-width: 64rem) {
  .vp-hero-interno {
    align-items: center;
    min-height: clamp(380px, 52vh, 520px);
  }
  .vp-hero-interno::before { display: none; }

  .vp-hero-interno__midia {
    inset: auto;
    top: calc(var(--vp-h-nav) + var(--vp-h-topbar) + 1.75rem);
    bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    right: max(var(--vp-gutter), calc((100vw - var(--vp-container)) / 2 + var(--vp-gutter)));
    width: min(40vw, 540px);
    z-index: 0;
    border: 1px solid var(--vp-moldura);
    border-radius: var(--vp-raio-lg);
    background: var(--vp-vacuo-700);
    box-shadow: var(--vp-sombra-lg);
    overflow: hidden;
  }
  .vp-hero-interno__midia:has(.vp-img-fallback) { display: none; }

  /* O texto para antes da foto. 540px de foto + respiro de 3rem. */
  .vp-hero-interno:has(.vp-hero-interno__midia img:not(.vp-img-fallback)) .vp-hero-interno__conteudo {
    max-width: min(760px, calc(100% - min(40vw, 540px) - 3rem));
  }
}

/* No celular a foto continua no fundo, sob o scrim. O credito fica no pe
   do hero, na faixa do padding inferior, abaixo do texto. */
@media (max-width: 63.99rem) {
  .vp-hero-interno__credito { bottom: .45rem; right: var(--vp-gutter); }
}

/* Breadcrumb */
.vp-breadcrumb { margin-bottom: var(--vp-esp-5); font-size: var(--vp-fs-xs); }
.vp-breadcrumb__lista { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.vp-breadcrumb__item { display: flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .58); }
.vp-breadcrumb__item a { color: rgba(255, 255, 255, .78); }
.vp-breadcrumb__item a:hover { color: var(--vp-laranja-solar); }
.vp-breadcrumb__item svg { width: 13px; height: 13px; opacity: .5; }
.vp-breadcrumb__item[aria-current="page"] { color: var(--vp-laranja-solar); font-weight: 600; }

/* Layout de conteudo com sidebar */
.vp-conteudo { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
.vp-sidebar { display: grid; gap: var(--vp-esp-5); }
.vp-sidebar__bloco {
  padding: var(--vp-esp-5);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-700);
}
.vp-sidebar__bloco--escuro {
  background: var(--vp-vacuo-700);
  background-image: var(--vp-grid-escuro);
  border-color: transparent;
  color: rgba(255, 255, 255, .78);
}
.vp-sidebar__bloco--escuro h3 { color: #fff; }
.vp-sidebar__titulo {
  margin-bottom: var(--vp-esp-4);
  font-size: var(--vp-fs-h4);
}
.vp-sidebar__lista { display: grid; gap: .1rem; }
.vp-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vp-esp-3);
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--vp-borda);
  font-size: var(--vp-fs-sm);
  font-weight: 500;
  color: var(--vp-cor-texto-suave);
}
.vp-sidebar__link:last-child { border-bottom: 0; }
.vp-sidebar__link svg { width: 15px; height: 15px; flex: none; opacity: .5; transition: transform var(--vp-trans), opacity var(--vp-trans); }
.vp-sidebar__link:hover { color: var(--vp-ambar-energia); }
.vp-sidebar__link:hover svg { transform: translateX(3px); opacity: 1; }
.vp-sidebar__link.is-ativo { color: var(--vp-ambar-energia); font-weight: 600; }

/* Texto rico (prosa) */
.vp-prosa {
  font-size: var(--vp-fs-body);
  line-height: var(--vp-lh-texto);
  color: var(--vp-cor-texto);
}
.vp-prosa > p,
.vp-prosa > ul,
.vp-prosa > ol,
.vp-prosa > blockquote { max-width: var(--vp-medida); }
.vp-prosa > * + * { margin-top: var(--vp-esp-5); }
.vp-prosa h2 { margin-top: var(--vp-esp-7); font-size: var(--vp-fs-h3); }
.vp-prosa h3 { margin-top: var(--vp-esp-6); font-size: var(--vp-fs-h4); }
.vp-prosa h2:first-child,
.vp-prosa h3:first-child { margin-top: 0; }
.vp-prosa p { margin-bottom: 0; }
.vp-prosa ul,
.vp-prosa ol { display: grid; gap: .65rem; padding-left: 0; }
.vp-prosa li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
}
.vp-prosa ul li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .62rem;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--vp-grad-eletrico);
}
.vp-prosa ol { counter-reset: vp-ol; }
.vp-prosa ol li { counter-increment: vp-ol; }
.vp-prosa ol li::before {
  content: counter(vp-ol);
  position: absolute;
  left: 0;
  top: .1rem;
  font-family: var(--vp-fonte-titulo);
  font-size: .75rem;
  font-weight: 700;
  color: var(--vp-ambar-energia);
}
/* Sem border-left colorido: e o tell que o piso de craft proibe por nome. A
   citacao se distingue por recuo, corpo maior e peso — do jeito que uma
   citacao se distingue em pagina impressa, sem precisar de tarja. */
.vp-prosa blockquote {
  margin: var(--vp-esp-6) 0;
  padding: 0 0 0 var(--vp-esp-6);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--vp-branco);
  text-wrap: pretty;
}
.vp-prosa figure { margin: 0; }
.vp-prosa figcaption {
  margin-top: .65rem;
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
  text-align: center;
}
/* table-layout: fixed e o que faz a tabela caber em 390px. Sem ele a tabela
   assume a largura do seu conteudo e o artigo inteiro estoura o viewport por
   10px — foi o que o escaneamento em 390 apontou. Com largura travada em 100%%
   e quebra dentro da celula, o cabecalho longo ocupa duas linhas em vez de
   empurrar a pagina. */
.vp-prosa table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--vp-fs-sm);
}
.vp-prosa th,
.vp-prosa td {
  padding: .75rem;
  text-align: left;
  border-bottom: 1px solid var(--vp-borda);
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Em tela estreita o respiro da celula cede antes do texto. */
@media (max-width: 30rem) {
  .vp-prosa th,
  .vp-prosa td { padding: .5rem; }   /* 8px e o piso para texto de 13px */
}
.vp-prosa th { font-family: var(--vp-fonte-titulo); font-size: var(--vp-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--vp-cor-titulo); background: var(--vp-vacuo-600); }

/* Tabela responsiva */
.vp-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Caixa de destaque tecnico */
.vp-nota {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--vp-esp-4);
  padding: var(--vp-esp-5);
  border: 1px solid rgba(36, 36, 84, .2);
  border-radius: var(--vp-raio);
  background: rgba(36, 36, 84, .04);
  font-size: var(--vp-fs-sm);
}
.vp-nota svg { width: 24px; height: 24px; color: var(--vp-ambar-energia); flex: none; }
.vp-nota__titulo { font-family: var(--vp-fonte-titulo); font-weight: 600; color: var(--vp-cor-titulo); margin-bottom: .25rem; }

/* Normas aplicaveis */
.vp-normas { display: grid; gap: var(--vp-esp-3); }
.vp-norma {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vp-esp-4);
  align-items: baseline;
  padding: var(--vp-esp-4);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio);
  background: var(--vp-vacuo-700);
}
.vp-norma__codigo {
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 700;
  color: var(--vp-ambar-energia);
  white-space: nowrap;
}
.vp-norma__texto { font-size: var(--vp-fs-xs); color: var(--vp-cor-texto-suave); line-height: 1.6; }

/* Artigo do blog */
.vp-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vp-esp-4);
  margin-bottom: var(--vp-esp-6);
  padding-bottom: var(--vp-esp-5);
  border-bottom: 1px solid var(--vp-borda);
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
}
.vp-post__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.vp-post__meta svg { width: 15px; height: 15px; }
.vp-post__autor { display: flex; align-items: center; gap: .6rem; }
.vp-post__autor img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--vp-vacuo-600); }
.vp-post__autor-nome { font-weight: 600; color: var(--vp-cor-titulo); font-size: var(--vp-fs-sm); }

.vp-sumario { padding: var(--vp-esp-5); border: 1px solid var(--vp-borda); border-radius: var(--vp-raio); background: var(--vp-vacuo-700); }
.vp-sumario__titulo {
  margin-bottom: var(--vp-esp-4);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vp-cor-titulo);
}
.vp-sumario__lista { display: grid; gap: .55rem; counter-reset: vp-sum; }
.vp-sumario__lista li { counter-increment: vp-sum; }
.vp-sumario__lista a {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: .5rem;
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
}
.vp-sumario__lista a::before {
  content: counter(vp-sum) ".";
  font-family: var(--vp-fonte-titulo);
  font-weight: 700;
  color: var(--vp-ambar-energia);
}
.vp-sumario__lista a:hover { color: var(--vp-ambar-energia); }

.vp-compartilhar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vp-esp-3);
  margin-top: var(--vp-esp-7);
  padding-top: var(--vp-esp-5);
  border-top: 1px solid var(--vp-borda);
}
.vp-compartilhar__rotulo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vp-cor-texto-suave);
}
.vp-compartilhar__botoes { display: flex; gap: .5rem; }
.vp-compartilhar__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-sm);
  color: var(--vp-cor-texto);
  background: var(--vp-vacuo-600);
  transition: all var(--vp-trans-rapida);
}
.vp-compartilhar__btn:hover { background: var(--vp-vacuo-600); border-color: var(--vp-vacuo-600); color: #fff; }
.vp-compartilhar__btn svg { width: 18px; height: 18px; }

/* Vagas (trabalhe conosco) */
.vp-vaga {
  display: grid;
  gap: var(--vp-esp-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-700);
  transition: border-color var(--vp-trans), box-shadow var(--vp-trans);
}
.vp-vaga:hover { border-color: var(--vp-ambar-energia); box-shadow: var(--vp-sombra-sm); }
.vp-vaga__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vp-esp-3); }
.vp-vaga__titulo { margin: 0; font-size: var(--vp-fs-h4); flex: 1; min-width: 200px; }
.vp-vaga__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.vp-vaga__requisitos { display: grid; gap: .5rem; }
.vp-vaga__requisito {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
}
.vp-vaga__requisito::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vp-laranja-solar);
}

/* Valores / politica (lista numerada de blocos) */
.vp-politica__indice {
  display: grid;
  gap: .5rem;
  padding: var(--vp-esp-5);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio);
  background: var(--vp-vacuo-700);
  margin-bottom: var(--vp-esp-7);
}

/* ==========================================================================
   26. BARRA DE PROGRESSO DE LEITURA (artigos do blog)
   ========================================================================== */
.vp-progresso {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: calc(var(--vp-z-header) + 1);
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.vp-progresso__barra {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--vp-grad-energia);
  will-change: transform;
}

/* Imagem de capa do artigo */
.vp-post__capa {
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  background: var(--vp-azul-noturno-700);
  aspect-ratio: 16 / 9;
}
.vp-post__capa img { width: 100%; height: 100%; object-fit: cover; }

/* Caixa de autor no fim do artigo */
.vp-autor-box {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--vp-esp-5);
  align-items: start;
  margin-top: var(--vp-esp-7);
  padding: var(--vp-esp-5);
  border: 1px solid var(--vp-borda);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-700);
}
.vp-autor-box img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vp-vacuo-700);
}
.vp-autor-box__nome { margin-bottom: .15rem; font-size: 1.0625rem; }
.vp-autor-box__cargo {
  margin-bottom: var(--vp-esp-3);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vp-ambar-energia);
}
.vp-autor-box__bio { margin: 0; font-size: var(--vp-fs-sm); color: var(--vp-cor-texto-suave); }

/* ==========================================================================
   27. BLOCOS ESTRUTURAIS (containers cujos elementos filhos levam o estilo)
   ========================================================================== */
.vp-nav { position: relative; }
.vp-contador { min-width: 0; }   /* impede overflow na coluna do grid */

/* ==========================================================================
   28. MAPA 3D DAS INSTALAÇÕES
   ========================================================================== */
.vp-mapa3d { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.vp-mapa3d__quadro {
  position: relative;
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--vp-vacuo-900);
  box-shadow: var(--vp-sombra-lg);
}

/* Luz do sol sobre o mapa: um brilho quente que desce do alto. Em soft-light
   ele aquece a areia e o mar sem lavar os rótulos nem os controles. */
.vp-mapa3d__quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(115% 80% at 76% -14%, rgba(252, 192, 12, .62), rgba(252, 192, 12, 0) 60%),
    linear-gradient(198deg, rgba(252, 167, 38, .28) 0%, rgba(252, 167, 38, 0) 48%);
}

.vp-mapa3d__canvas {
  width: 100%;
  height: clamp(340px, 52vh, 560px);
  /* Placeholder claro: acompanha a base do mapa e evita o flash escuro */
  background:
    radial-gradient(circle at 76% 12%, rgba(252, 167, 38, .22), transparent 62%),  /* laranja-solar: ja na rampa */
    #FAF2E1;
  transition: opacity var(--vp-trans-lenta);
}
.vp-mapa3d__canvas.is-pronto { background-image: none; }

.vp-mapa3d__status {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0 auto;
  max-width: 34ch;
  padding: var(--vp-esp-4) var(--vp-esp-5);
  border-radius: var(--vp-raio);
  background: rgba(10, 13, 19, .92);
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .88);
  font-size: var(--vp-fs-sm);
  text-align: center;
  box-shadow: var(--vp-sombra-md);
}
.vp-mapa3d__status--erro { border-color: rgba(252, 167, 38, .5); }

.vp-mapa3d__legenda {
  position: absolute;
  left: var(--vp-esp-4);
  bottom: var(--vp-esp-6);
  z-index: 2;
  display: grid;
  gap: .4rem;
  padding: .7rem .9rem;
  border-radius: var(--vp-raio-sm);
  background: rgba(10, 13, 19, .86);
  border: 1px solid var(--vp-borda-escura);
  backdrop-filter: blur(6px);
  font-size: .6875rem;
  color: rgba(255, 255, 255, .78);
}
.vp-mapa3d__legenda-titulo {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.vp-mapa3d__escala {
  width: 130px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 224, 138, .6), #FFC21A 55%, var(--vp-laranja-marca));
}
.vp-mapa3d__escala-rotulos { display: flex; justify-content: space-between; }

.vp-mapa3d__controles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.vp-mapa3d__filtro {
  padding: .45rem .9rem;
  border: 1.5px solid var(--vp-borda-escura);
  border-radius: var(--vp-raio-pill);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .8);
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  transition: all var(--vp-trans-rapida);
}
.vp-mapa3d__filtro:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vp-mapa3d__filtro.is-ativo {
  background: var(--vp-ambar-energia);
  border-color: var(--vp-ambar-energia);
  color: #2B1E00;
}

.vp-mapa3d__nota {
  margin: 0;
  font-size: var(--vp-fs-xs);
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
}

/* Resumo por cidade: é o conteúdo base, visível sem JavaScript */
.vp-mapa3d__cidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--vp-esp-3);
}
.vp-cidade-card {
  padding: var(--vp-esp-4);
  border: 1px solid var(--vp-borda-escura);
  border-radius: var(--vp-raio);
  background: rgba(255, 255, 255, .04);
}
.vp-cidade-card__nome {
  font-family: var(--vp-fonte-titulo);
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: #fff;
  margin-bottom: .2rem;
}
.vp-cidade-card__dado { font-size: var(--vp-fs-xs); color: var(--vp-laranja-solar); font-weight: 600; }
.vp-cidade-card__uf { font-size: .6875rem; color: rgba(255, 255, 255, .5); letter-spacing: .08em; }

/* Popup do MapLibre alinhado ao design */
.vp-mapa3d__popup .maplibregl-popup-content {
  padding: .75rem .9rem;
  border-radius: var(--vp-raio-sm);
  background: var(--vp-vacuo-700);
  color: rgba(255, 255, 255, .85);
  font-family: var(--vp-fonte-texto);
  font-size: var(--vp-fs-xs);
  line-height: 1.6;
  box-shadow: var(--vp-sombra-lg);
}
.vp-mapa3d__popup .maplibregl-popup-content strong { color: var(--vp-ambar-energia); font-size: 1rem; }
.vp-mapa3d__popup .maplibregl-popup-tip { border-top-color: var(--vp-vacuo-700); }
.vp-mapa3d__popup .maplibregl-popup-close-button { color: rgba(255, 255, 255, .7); font-size: 1.1rem; }

/* Faixa de indicadores reais */
.vp-indicadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vp-esp-4);
}
.vp-indicador {
  padding: var(--vp-esp-5);
  border: 1px solid var(--vp-borda-escura);
  border-radius: var(--vp-raio);
  background: rgba(255, 255, 255, .04);
}
.vp-indicador__valor {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  font-family: var(--vp-fonte-titulo);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--vp-ambar-energia);
}
.vp-indicador__unidade { font-size: .5em; font-weight: 600; color: var(--vp-laranja-solar); }
.vp-indicador__rotulo {
  margin-top: .5rem;
  font-size: var(--vp-fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   29. CALCULADORA SOLAR
   ========================================================================== */

/* -------------------------------------------------- Mini-calculadora do hero
   Cartão translúcido sobre a foto. Não calcula nada: leva o valor até o
   simulador completo, que é quem tem o motor de cálculo. */
/* A mini-calculadora do hero antigo (57 linhas) saiu junto com o hero que a
   continha. O campo unico de agora e .vp-medir, na secao 08, e ele mede em
   vez de encaminhar: nao havia o que preservar aqui. */

/* ------------------------------------------------------ Simulador completo */
#calculadora { scroll-margin-top: 5.5rem; }

.vp-calc {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  /* stretch, e nao start: as duas colunas sobem ate a altura da mais alta,
     entao a foto acompanha o formulario em vez de parar no meio dele. Como a
     figura e position:absolute dentro do painel, ela preenche essa altura
     sozinha, com object-fit: cover. */
  align-items: stretch;
}
@media (min-width: 62rem) {
  .vp-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.vp-calc__form {
  display: grid;
  gap: var(--vp-esp-4);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-700);
  border: 1px solid var(--vp-moldura);
  box-shadow: var(--vp-sombra);
}
.vp-calc__campo { display: grid; gap: .4rem; }
.vp-calc__rotulo {
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-cor-titulo);
}
.vp-calc__entrada {
  display: flex;
  align-items: center;
  background: var(--vp-vacuo-600);
  border: 1px solid var(--vp-aco-600);
  border-radius: var(--vp-raio);
  transition: border-color var(--vp-trans-rapida), background-color var(--vp-trans-rapida);
}
.vp-calc__entrada:focus-within {
  background: var(--vp-vacuo);
  border-color: var(--vp-ambar-energia);
  box-shadow: 0 0 0 3px rgba(252, 192, 12, .22);
}
.vp-calc__prefixo {
  padding-inline: .9rem 0;
  font-weight: 700;
  color: var(--vp-cor-texto-suave);
}
.vp-calc__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: .8rem .9rem;
  border: 0;
  background: transparent;
  color: var(--vp-branco);
  font-family: var(--vp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  caret-color: var(--vp-ambar-energia);
}
.vp-calc__input::placeholder { color: var(--vp-cor-texto-suave); opacity: 1; }
.vp-calc__input:focus-visible { outline: none; box-shadow: none; }
.vp-calc__select {
  width: 100%;
  min-height: 50px;
  padding: .8rem 2.4rem .8rem 1rem;
  border: 1px solid var(--vp-aco-600);
  border-radius: var(--vp-raio);
  background-color: var(--vp-vacuo-600);
  background-image: var(--vp-seta-select);
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px 18px;
  color: var(--vp-cor-texto);
  appearance: none;
  transition: border-color var(--vp-trans-rapida), box-shadow var(--vp-trans-rapida);
}
.vp-calc__select:hover { border-color: var(--vp-aco); }
.vp-calc__select:focus-visible {
  outline: none;
  border-color: var(--vp-ambar-energia);
  box-shadow: 0 0 0 3px rgba(252, 192, 12, .22);
}
/* O menu nativo do select herda a cor do sistema, nao a nossa. Declarar a
   cor das options e o unico jeito de a lista aberta nao sair branca. */
.vp-calc__select option {
  background: var(--vp-vacuo-700);
  color: var(--vp-cor-texto);
}
.vp-calc__ajuda {
  font-size: var(--vp-fs-xs);
  line-height: 1.5;
  color: var(--vp-cor-texto-suave);
}
.vp-calc__acoes { margin-top: var(--vp-esp-2); }
.vp-calc__acoes .vp-btn { width: 100%; justify-content: center; }
.vp-calc__erro {
  margin: 0;
  padding: var(--vp-esp-3) var(--vp-esp-4);
  border-radius: var(--vp-raio);
  background: rgba(255, 138, 128, .10);
  border: 1px solid rgba(255, 138, 128, .38);
  font-size: var(--vp-fs-sm);
  line-height: 1.55;
  color: #FF8A80;                 /* 7,2:1 sobre o proprio fundo do bloco */
}

/* ------------------------------------------------------------- Resultado */
.vp-calc__resultado {
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--vp-raio-lg);
  /* O halo radial ambar que ficava aqui era gradiente fora do dado: a
     unica regra inviolavel desta paleta. O cartao agora e vacuo chapado com
     uma cota de aco no topo, e quem carrega a rampa e a propria leitura. */
  background: var(--vp-vacuo-900);
  border: 1px solid var(--vp-moldura);
  border-top: 2px solid var(--vp-ambar-energia);
  color: var(--vp-cor-texto);
  box-shadow: var(--vp-sombra-md);
}
.vp-calc__resultado:focus-visible {
  outline: 2px solid var(--vp-ambar-energia);
  outline-offset: 3px;
}
.vp-calc__destaque-rotulo {
  margin: 0;
  font-size: var(--vp-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vp-laranja-solar);
}
.vp-calc__destaque {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .05em .18em;
  margin: .3rem 0 0;
  font-family: var(--vp-fonte-titulo);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: var(--vp-ls-display);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.vp-calc__unidade {
  font-size: .34em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--vp-ambar-energia);
}
.vp-calc__destaque-apoio {
  margin: .4rem 0 0;
  font-size: var(--vp-fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
}

.vp-calc__itens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1px;
  margin: var(--vp-esp-5) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--vp-raio);
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.vp-calc__item {
  display: grid;
  gap: .25rem;
  padding: .85rem 1rem;
  background: var(--vp-vacuo-900);
}
.vp-calc__item-rotulo {
  font-size: var(--vp-fs-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, .62);
}
.vp-calc__item-valor {
  font-family: var(--vp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.vp-calc__item-valor--forte {
  font-size: 1.375rem;
  color: var(--vp-ambar-energia);
}

.vp-calc__whatsapp {
  width: 100%;
  justify-content: center;
  margin-top: var(--vp-esp-5);
}

.vp-calc__premissas {
  margin-top: var(--vp-esp-5);
  padding-top: var(--vp-esp-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--vp-fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .64);
}
.vp-calc__premissas summary {
  cursor: pointer;
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
}
.vp-calc__premissas summary:focus-visible {
  outline: 2px solid var(--vp-ambar-energia);
  outline-offset: 3px;
  border-radius: var(--vp-raio-sm);
}
.vp-calc__premissas ul {
  margin: var(--vp-esp-3) 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .55rem;
}
.vp-calc__premissas strong { color: rgba(255, 255, 255, .92); }

/* ==========================================================================
   30. MEDIDA E ALINHAMENTO DO TEXTO CORRIDO
   ========================================================================== */

/* --------------------------------------------------------- Medida de leitura
   Boa parte dos paragrafos de corpo foi escrita como <p> puro, sem classe.
   Eles herdavam so a margem: ficavam sem max-width e corriam a largura inteira
   do container, enquanto o paragrafo de abertura ao lado (.vp-secao__texto)
   parava em 68 caracteres. O resultado eram blocos com bordas direitas
   diferentes dentro da mesma secao.

   A regra abaixo fica dentro de :where() de proposito: assim ela vale zero em
   especificidade e qualquer componente que ja estilize seus proprios <p>
   (.vp-prosa, .vp-nota, .vp-faq__conteudo, cards) continua ganhando dela. */
:where(.vp-secao p:not([class])) {
  max-width: var(--vp-medida);
}

/* ------------------------------------------------------------- Justificado
   Justificar so compensa quando a linha e longa o bastante para o navegador
   distribuir o espaco sem abrir buracos. Por isso:

   - vale a partir de 48rem de viewport; no celular o texto segue alinhado a
     esquerda, que e onde o justificado estraga a leitura;
   - vem sempre acompanhado de hyphens:auto, que e o que evita os "rios" de
     espaco em branco. A hifenizacao usa o lang="pt-BR" do <html>;
   - fica restrito a texto corrido. Card, nota, etapa de timeline e rotulo
     tem duas ou tres linhas curtas: justificar ali so produziria vao enorme
     entre palavras. */
@media (min-width: 48rem) {
  .vp-secao__texto,
  .vp-prosa > p,
  .vp-faq__conteudo p,
  :where(.vp-secao p:not([class])) {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* Hifenizar nome tecnico, sigla e codigo deixa a leitura pior, nao melhor.
     O link saiu desta lista: nenhum link do site mostra URL cru como texto —
     todos tem rotulo em prosa — e desligar a hifenizacao dentro de um
     paragrafo justificado criava um trecho inline com regra diferente da do
     paragrafo que o contem. */
  code, kbd, samp, abbr {
    -webkit-hyphens: none;
    hyphens: none;
  }

  /* A nota em destaque e uma caixa estreita de tres ou quatro linhas, ao lado
     de um icone. Justificar ali abre vao entre as palavras em vez de alinhar
     nada, entao ela fica de fora. */
  .vp-nota p {
    text-align: left;
    -webkit-hyphens: none;
    hyphens: none;
  }
}

/* Cabecalhos centralizados continuam centralizados: a regra de justificar
   acima e aplicada direto no .vp-secao__texto e venceria o text-align
   herdado do pai. Estas duas devolvem a centralizacao, com especificidade
   maior. */
.vp-secao__cabecalho--centro .vp-secao__texto,
.vp-centro .vp-secao__texto,
.vp-centro p {
  text-align: center;
  -webkit-hyphens: none;
  hyphens: none;
}

/* ==========================================================================
   31. PAINEL DA CALCULADORA: FOTO QUE ESMAECE AO CALCULAR
   ==========================================================================

   A coluna da direita tem dois estados no mesmo espaco:

   1. antes do calculo  -> a foto da obra ocupa a coluna inteira;
   2. depois do calculo -> a foto continua ali, esmaecida, e o resultado
                           aparece por cima dela.

   A troca e feita por .is-calculado, que o calculadora.js poe no painel.

   O detalhe que faz a transicao ser suave: a figura e position:absolute
   DESDE O INICIO, nunca muda de posicionamento. Se ela saisse do fluxo so no
   segundo estado, as propriedades position e aspect-ratio mudariam de valor
   de uma vez (sao discretas, nao interpolam) e a foto daria um salto no
   primeiro quadro, antes de o opacity ter tempo de animar. Com ela sempre
   fora do fluxo, a unica coisa que muda e a opacidade -- e ai o esmaecimento
   acontece de verdade, quadro a quadro.

   Quem reserva a altura da coluna no primeiro estado e o min-height do
   painel; no segundo, e a propria altura do resultado.
   -------------------------------------------------------------------------- */
.vp-calc__painel {
  position: relative;
  min-height: min(26rem, 72vw);
}

/* -------------------------------------------------------------------- Foto */
.vp-calc__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border-radius: var(--vp-raio-lg);
  overflow: hidden;
  background: var(--vp-vacuo-700);
  box-shadow: var(--vp-sombra-md);
  transition:
    opacity 700ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 700ms cubic-bezier(.4, 0, .2, 1);
}
.vp-calc__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Legenda sobre a foto, num degrade que garante contraste do texto branco
   mesmo quando a parte de baixo da imagem for clara. */
.vp-calc__foto-legenda {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(to top, rgba(10, 13, 19, .9), transparent);
  color: #fff;
  font-size: var(--vp-fs-xs);
  line-height: 1.45;
  transition: opacity 400ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------- Estado: ja calculou */
.vp-calc__painel.is-calculado .vp-calc__foto {
  opacity: .45;
  box-shadow: none;
  pointer-events: none;
}

/* A legenda sai primeiro: sobre o cartao do resultado ela so atrapalharia */
.vp-calc__painel.is-calculado .vp-calc__foto-legenda {
  opacity: 0;
}

/* ---------------------------------------------------------------- Resultado
   Fica acima da foto. O fundo deixa de ser opaco e vira um vidro escuro, para
   a obra aparecer por tras sem custar contraste: o navy a 92% sobre a foto ja
   mantem o texto branco acima de 12:1. */
.vp-calc__resultado {
  position: relative;
  z-index: 1;
}
.vp-calc__painel.is-calculado .vp-calc__resultado {
  /* Aqui estava o halo radial ambar de verdade. A secao 29 tinha removido o
     dele e eu dei o caso por encerrado; esta regra, 300 linhas abaixo, o
     recolocava no unico estado que o visitante efetivamente ve. Cor plana. */
  background: rgba(10, 13, 19, .94);
  backdrop-filter: blur(4px);
  animation: vp-resultado-surge 560ms cubic-bezier(.22, 1, .36, 1) both;
}

/* O resultado sai de hidden (display:none), que nao transiciona. Por isso ele
   entra com animacao, e nao com transition: a animacao dispara sozinha no
   momento em que o elemento passa a ser renderizado. */
@keyframes vp-resultado-surge {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- Menos movimento
   Quem pediu reducao de movimento recebe a troca sem deslocamento, mas o
   esmaecimento continua: ele e a informacao de que o estado mudou, nao
   enfeite. So fica mais curto. */
@media (prefers-reduced-motion: reduce) {
  .vp-calc__foto,
  .vp-calc__foto-legenda {
    transition-duration: 200ms;
  }
  .vp-calc__painel.is-calculado .vp-calc__resultado {
    animation-duration: 200ms;
  }
  @keyframes vp-resultado-surge {
    from { opacity: 0; transform: none; }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   32. SIMULADOR COMPACTO: CABER NA TELA SEM ROLAR
   ==========================================================================

   O simulador e a unica secao do site cuja utilidade depende de o visitante
   ver o formulario inteiro de uma vez: se o botao "Calcular" fica abaixo da
   dobra, a secao vira um bloco de texto que ninguem completa.

   Numa tela de 1080p sobram cerca de 940px de viewport depois da barra do
   navegador, e o cabecalho fixo come 110px. Com o --vp-secao-y de 7,5rem das
   telas largas, so o respiro da secao gastava 240px. Este bloco recupera esse
   espaco em cinco frentes: padding da secao, margem do cabecalho, padding e
   gap do formulario, altura dos campos e corpo das legendas de ajuda.

   Os textos tambem foram encurtados no HTML: cada legenda que passava de uma
   linha custava ~20px de altura.
   -------------------------------------------------------------------------- */
#calculadora {
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
}
#calculadora .vp-secao__cabecalho {
  margin-bottom: clamp(1.25rem, .8rem + 1.5vw, 2rem);
}

.vp-calc__form {
  gap: .8rem;
  padding: clamp(1.1rem, .9rem + 1vw, 1.5rem);
}
.vp-calc__campo { gap: .3rem; }

.vp-calc__input,
.vp-calc__select {
  min-height: 46px;
  padding-block: .65rem;
}

.vp-calc__ajuda {
  font-size: .75rem;
  line-height: 1.4;
}

.vp-calc__acoes { margin-top: .25rem; }

/* O painel so precisa de altura minima quando esta sozinho na coluna, ou
   seja, no empilhamento mobile. A partir de 64rem quem manda na altura e o
   formulario ao lado, pelo align-items: stretch da grade. */
@media (min-width: 64rem) {
  .vp-calc__painel { min-height: 0; }
}

/* --------------------------------------------- O simulador numa tela so
   Meta: titulo, formulario e resultado inteiros entre o menu e o pe da tela
   de um notebook (cerca de 550px uteis). Tres decisoes fazem caber:

   1. os quatro campos em grade 2x2, com legendas de uma linha;
   2. o kWp e a frase de apoio na mesma linha do resultado;
   3. os oito numeros do resultado em 4 colunas x 2 linhas.

   Vale a partir de 64rem; no celular a secao rola normalmente, campo abaixo
   de campo, porque ali empilhar e o certo. */
@media (min-width: 64rem) {
  #calculadora { padding-block: clamp(1.5rem, 1rem + 2vh, 2.5rem); }
  #calculadora .vp-secao__cabecalho {
    max-width: none;
    margin-bottom: clamp(.75rem, .5rem + 1.5vh, 1.5rem);
  }
  #calculadora .vp-secao__titulo {
    margin-bottom: .35rem;
    font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.125rem);
  }
  #calculadora .vp-secao__texto { margin: 0; font-size: var(--vp-fs-sm); }

  .vp-calc { gap: 1.5rem; }

  .vp-calc__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
    align-content: start;
    gap: .9rem 1rem;
    padding: 1.25rem;
  }
  .vp-calc__acoes,
  .vp-calc__erro { grid-column: 1 / -1; }
  /* Sem isto o campo sem legenda (cidade) estica e o select desce em
     relacao ao vizinho da mesma linha. */
  .vp-calc__campo { align-content: start; }
  .vp-calc__acoes { margin-top: .15rem; }
  .vp-calc__input,
  .vp-calc__select { min-height: 44px; padding-block: .55rem; }

  .vp-calc__resultado { padding: 1.25rem; }
  .vp-calc__destaque-rotulo { font-size: .6875rem; }
  .vp-calc__destaque {
    font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
    margin-top: .15rem;
  }
  .vp-calc__destaque-apoio { margin-top: .15rem; }

  .vp-calc__itens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
  }
  .vp-calc__item { padding: .6rem .75rem; gap: .15rem; }
  .vp-calc__item-rotulo { font-size: .6875rem; line-height: 1.3; }
  .vp-calc__item-valor { font-size: 1rem; }
  .vp-calc__item-valor--forte { font-size: 1.125rem; }

  .vp-calc__whatsapp { margin-top: 1rem; min-height: 46px; padding-block: .6rem; }
  .vp-calc__premissas { margin-top: .75rem; padding-top: .6rem; }
}

/* Tela baixa: o paragrafo de apoio do titulo e o primeiro a sair. */
@media (min-width: 64rem) and (max-height: 46rem) {
  #calculadora .vp-secao__texto { display: none; }
  #calculadora .vp-secao__titulo { margin-bottom: 0; }
}

/* ==========================================================================
   33. SECAO "QUEM SOMOS" DA HOME: CABER EM UMA TELA
   ==========================================================================

   Quem manda na altura desta secao e a foto, nao o texto. Com aspect-ratio
   4/5 numa coluna de ~620px ela sozinha ocupa 775px; somados os 240px de
   respiro da secao nas telas largas, a secao pedia 1015px contra os ~830px
   que sobram num monitor de 1080p depois do cabecalho fixo.

   Orcamento novo: 112px de respiro + no maximo 640px de foto = 752px. A
   coluna de texto fica em ~600px, abaixo disso, entao a foto continua sendo
   quem define a altura -- so que agora dentro da tela.

   A foto nao muda de proporcao: ela e recortada pelo max-height, com
   object-fit: cover. O assunto (maos, catraca e modulo) esta no centro do
   quadro e sobrevive ao corte.
   -------------------------------------------------------------------------- */
section[aria-labelledby="sobre-titulo"] {
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

@media (min-width: 64rem) {
  /* A foto preenche a coluna inteira e acompanha a altura do texto ao lado.
     Antes a proporcao 4:5 somada ao max-height encolhia a LARGURA da foto,
     que ficava estreita e com o selo solto no vazio. */
  section[aria-labelledby="sobre-titulo"] .vp-sobre__midia { align-self: stretch; }
  section[aria-labelledby="sobre-titulo"] .vp-media--alta {
    aspect-ratio: auto;
    height: 100%;
    min-height: 26rem;
  }
  section[aria-labelledby="sobre-titulo"] .vp-media--alta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* o bloco de contadores fecha a coluna de texto; aqui ele pode respirar
     menos sem encostar no paragrafo de cima */
  section[aria-labelledby="sobre-titulo"] .vp-contadores {
    margin-top: var(--vp-esp-5);
    padding-top: var(--vp-esp-5);
  }
  section[aria-labelledby="sobre-titulo"] .vp-nota {
    padding: var(--vp-esp-4);
  }
}

/* Telas baixas: aperta a foto mais um pouco. */
@media (min-width: 64rem) and (max-height: 50rem) {
  section[aria-labelledby="sobre-titulo"] {
    padding-block: 2rem;
  }

}

/* ==========================================================================
   34. SUPERFICIE: o escuro deixou de ser excecao
   ==========================================================================

   Esta secao existia para consertar o texto nas poucas superficies escuras de
   um site claro: cinco blocos declaravam fundo escuro e nenhuma cor de texto,
   e os filhos herdavam o grafite do body — 1,15:1, invisivel.

   Com o redesign o site inteiro e o vacuo do instrumento, e esses papeis
   subiram para o :root da secao 01. Nao ha mais dois mundos para reconciliar,
   entao o remapeamento por seletor saiu junto com o problema que ele resolvia:
   um remapeamento que repete o padrao e so uma forma de a folha discordar de
   si mesma mais tarde.

   O que sobrou aqui e o inverso: as poucas ilhas que continuam CLARAS por
   motivo proprio. Um input de formulario e uma delas — campo de digitacao com
   fundo branco e caret escuro e o que o visitante espera de um campo onde
   precisa conferir o que escreveu, e um campo preto num site preto desaparece.
   Nessas ilhas os papeis voltam ao significado claro, explicitamente.
   -------------------------------------------------------------------------- */

/* Nao sobrou ilha clara nenhuma. A primeira versao desta secao devolvia o
   campo de formulario ao fundo branco, por habito de formulario; a secao 06
   agora resolve o campo no proprio mundo, com fio de aco e foco em ambar. O
   que fica aqui e so o que o navegador pinta por conta propria. */

/* ==========================================================================
   34b. SUPERFICIES DO NAVEGADOR

   O craft floor e direto: as partes que nao desenhei continuam carregando o
   design. Selecao, caret, scrollbar, anel de foco e offset de sublinhado saem
   de fabrica pertencendo a design system nenhum. Aqui elas entram na paleta.
   -------------------------------------------------------------------------- */
::selection {
  background: var(--vp-ambar-energia);
  color: var(--vp-vacuo);
  text-shadow: none;
}
::target-text {
  background: var(--vp-laranja-marca);
  color: var(--vp-branco);
}

html {
  scrollbar-color: var(--vp-aco-600) var(--vp-vacuo-900);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--vp-vacuo-900); }
::-webkit-scrollbar-thumb {
  background: var(--vp-aco-600);
  border: 3px solid var(--vp-vacuo-900);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--vp-aco); }
::-webkit-scrollbar-corner { background: var(--vp-vacuo-900); }

/* Anel de foco em ambar: o pico da rampa, 11,5:1 no vacuo. Dois aneis para
   sobreviver tanto no vacuo quanto sobre uma superficie clara. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vp-ambar-energia);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(10, 13, 19, .85);
}

/* Sublinhado que respeita as descendentes em vez de cortar o p e o g. */
a:where(:not([class])) {
  text-underline-offset: .22em;
  text-decoration-thickness: from-font;
  text-decoration-color: var(--vp-aco);
}
a:where(:not([class])):hover { text-decoration-color: var(--vp-ambar-energia); }

/* Marca de medicao dentro do texto corrido: numero e unidade em tabular,
   com a unidade um passo mais fraca que o valor. */
.vp-medida-inline { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-medida-inline u {
  text-decoration: none;
  color: var(--vp-cor-texto-suave);
  font-weight: 400;
}

/* ==========================================================================
   35. DERIVA DO SISTEMA: estilos inline viram classe  (/impeccable polish)
   ==========================================================================

   Havia 44 declaracoes inline no HTML, 20 distintas. Estilo inline nao e so
   feio: ele escapa do sistema de tokens, nao responde a tema e tem de ser
   editado arquivo por arquivo. Aqui cada repeticao vira a classe que ja
   deveria existir.

   O caso mais util e o do texto de apoio da sidebar. Ele aparecia em duas
   versoes inline — uma com rgba(255,255,255,.78) para o bloco escuro, outra
   com --vp-cor-texto-suave para o claro. Com o remapeamento de token da
   secao 34, UMA classe serve aos dois mundos: o token resolve sozinho
   conforme a superficie. Nove declaracoes viram uma regra.
   -------------------------------------------------------------------------- */

/* Centralizar o conteudo de um container flex. O .vp-centro existente cuida
   do text-align; este cuida do eixo principal. */
.vp-centro-flex { justify-content: center; }

/* Texto de apoio dentro dos blocos de sidebar, claro ou escuro */
.vp-sidebar__texto {
  margin-bottom: 0;
  font-size: var(--vp-fs-sm);
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}

/* Titulo que segue a superficie: navy no claro, branco no escuro, pelo token */
.vp-sidebar__titulo,
.vp-etapa__titulo {
  color: var(--vp-cor-titulo);
}
.vp-secao--escura .vp-campo__label,
.vp-sidebar__bloco--escuro .vp-campo__label {
  color: var(--vp-cor-titulo);
}

/* Hero de artigo e de pagina curta: altura menor que a do hero de servico */
.vp-hero-interno--curto { min-height: clamp(320px, 40vh, 460px); }

/* Cabecalho de secao com respiro menor, e titulo um passo abaixo na escala */
.vp-secao__cabecalho--compacto { margin-bottom: var(--vp-esp-6); }
.vp-secao__titulo--menor { font-size: var(--vp-fs-h3); }

/* A regua de escala do MapLibre vem com 10px e a cor do tema claro. Como
   qualquer superficie que o navegador ou a biblioteca desenha por conta
   propria, ela entra na paleta em vez de ficar de fabrica. */
/* O CSS do MapLibre carrega depois do nosso, entao um seletor de uma classe
   perde para o dele. .vp-mapa3d na frente resolve sem !important. */
.vp-mapa3d .maplibregl-ctrl-scale,
.vp-mapa3d .maplibregl-ctrl-attrib-inner,
.vp-mapa3d .maplibregl-ctrl-attrib-inner a {
  font-family: var(--vp-fonte-texto);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--vp-cor-titulo);
  background: rgba(10, 13, 19, .8);
  border-color: var(--vp-aco-600);
}
.vp-mapa3d .maplibregl-ctrl-attrib-inner a { color: var(--vp-cor-titulo); text-decoration: underline; }

/* ==========================================================================
   36. OS PONTOS: o que substituiu a grade de cards de diferencial
   ==========================================================================

   Sem fundo, sem borda, sem pastilha de icone e sem numero de sequencia. O
   icone desce de 52px de pastilha para 20px em linha, ao lado do titulo. A
   hierarquia e brilho e espaco: titulo em branco, texto em aco.
   -------------------------------------------------------------------------- */
.vp-ponto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icone titulo" ".     texto";
  column-gap: .75rem;
  row-gap: var(--vp-esp-3);
  align-content: start;
}

.vp-ponto__titulo {
  grid-area: titulo;
  align-self: center;
  margin: 0;
  font-size: var(--vp-fs-h4);
  font-weight: var(--vp-peso-titulo);
  line-height: var(--vp-lh-h4);
  letter-spacing: var(--vp-ls-h3);
  color: var(--vp-branco);
}

.vp-ponto__icone {
  grid-area: icone;
  display: inline-flex;
  align-self: center;
  color: var(--vp-ambar-energia);
}
.vp-ponto__icone svg { width: 20px; height: 20px; }

/* Qualquer filho alem dos tres nomeados (a lista de normas, por exemplo)
   desce na coluna do texto. Sem isto ele caia na coluna de 20px do icone e
   espremia o titulo ate uma letra por linha. */
.vp-ponto > :not(.vp-ponto__icone):not(.vp-ponto__titulo):not(.vp-ponto__texto) {
  grid-column: 2;
  min-width: 0;
}
.vp-ponto > .vp-diferenciais__normas { margin-top: var(--vp-esp-1, .25rem); }

.vp-ponto__texto {
  grid-area: texto;
  margin: 0;
  max-width: 34ch;
  font-size: var(--vp-fs-sm);
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}

/* ==========================================================================
   37. ELETROPOSTO COMO NEGOCIO
   ==========================================================================
   Tabela com os quatro cenarios de ocupacao e, ao lado, a decomposicao de
   cada kWh vendido. As barras sao dado: a largura de cada parte e o valor
   em centavos (--v) sobre os R$ 2,00 do kWh. O lucro e a unica parte em
   ambar; custos ficam em aco, energia na banda fria da marca.
   -------------------------------------------------------------------------- */
.vp-negocio {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .vp-negocio { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.vp-tabela-negocio {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vp-fs-sm);
  font-variant-numeric: tabular-nums;
}
.vp-tabela-negocio caption,
.vp-negocio__kwh > figcaption {
  margin-bottom: var(--vp-esp-3);
  text-align: left;
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-cor-texto);
}
.vp-negocio__kwh > figcaption { margin: 0; }
.vp-tabela-negocio th,
.vp-tabela-negocio td {
  padding: .85rem .75rem;
  border-bottom: 1px solid var(--vp-borda);
  text-align: right;
  color: var(--vp-cor-texto);
}
.vp-tabela-negocio thead th {
  font-size: var(--vp-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  vertical-align: bottom;
  color: var(--vp-cor-texto-suave);
}
.vp-tabela-negocio th[scope="row"],
.vp-tabela-negocio thead th:first-child { text-align: left; }
.vp-tabela-negocio th[scope="row"] { font-weight: 700; color: var(--vp-branco); }
.vp-tabela-negocio__solar { font-weight: 700; color: var(--vp-ambar-energia) !important; }
.vp-tabela-negocio tbody tr:hover td,
.vp-tabela-negocio tbody tr:hover th { background: var(--vp-vacuo-600); }
.vp-tabela-negocio td { white-space: nowrap; }
/* No celular a coluna de kWh sai: ocupacao, faturamento e os dois lucros
   bastam para a comparacao, e cabem sem quebrar o "R$" do numero. */
@media (max-width: 40rem) {
  .vp-tabela-negocio th,
  .vp-tabela-negocio td { padding: .65rem .4rem; font-size: var(--vp-fs-xs); }
  .vp-tabela-negocio tr > :nth-child(2) { display: none; }
}

.vp-negocio__nota {
  max-width: 68ch;
  margin: var(--vp-esp-4) 0 0;
  font-size: var(--vp-fs-xs);
  line-height: 1.55;
  color: var(--vp-cor-texto-suave);
}

/* ------------------------------------------------ o kWh decomposto */
.vp-negocio__kwh {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border: 1px solid var(--vp-moldura);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-900);
}
.vp-negocio__cenario { display: grid; gap: .45rem; }
.vp-negocio__cenario-nome {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: var(--vp-fs-sm);
  font-weight: 600;
  color: var(--vp-branco);
}
.vp-negocio__cenario-nome span { font-weight: 500; color: var(--vp-cor-texto-suave); font-variant-numeric: tabular-nums; }
.vp-negocio__barra {
  display: flex;
  height: 18px;
  border: 1px solid var(--vp-moldura);
  border-radius: 2px;
  overflow: hidden;
}
.vp-negocio__parte { flex: var(--v) 0 0; }
.vp-negocio__parte + .vp-negocio__parte { border-left: 1px solid var(--vp-vacuo-900); }
.vp-negocio__parte--energia { background: var(--vp-azul-noturno, #242454); }
.vp-negocio__parte--custo { background: var(--vp-aco-600); }
.vp-negocio__parte--custo2 { background: var(--vp-aco); }
.vp-negocio__parte--lucro { background: var(--vp-ambar-energia); }
.vp-negocio__lucro {
  margin: 0;
  font-size: var(--vp-fs-sm);
  color: var(--vp-cor-texto-suave);
}
.vp-negocio__lucro strong { color: var(--vp-ambar-energia); font-variant-numeric: tabular-nums; }

.vp-negocio__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--vp-fs-xs);
  color: var(--vp-cor-texto-suave);
}
.vp-negocio__legenda li { display: inline-flex; align-items: center; gap: .4rem; }
.vp-negocio__legenda i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--vp-moldura); }

.vp-negocio__premissas {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: .9rem 0 0 1.1rem;
  border-top: 1px solid var(--vp-borda);
  font-size: var(--vp-fs-xs);
  line-height: 1.5;
  color: var(--vp-cor-texto-suave);
}
.vp-negocio__cta { justify-content: center; }

/* Segunda tabela do eletroposto (investimento e retorno). No celular a regra
   da primeira tabela esconderia a 2a coluna, que aqui e o retorno com a rede:
   devolvemos a 2a e escondemos a 3a (tamanho da usina), que e detalhe. */
@media (max-width: 40rem) {
  .vp-tabela-negocio--retorno tr > :nth-child(2) { display: table-cell; }
  .vp-tabela-negocio--retorno tr > :nth-child(3) { display: none; }
  .vp-tabela-negocio--retorno td { white-space: normal; }
}

/* ==========================================================================
   38. AVALIACOES DO GOOGLE
   Nota do perfil a esquerda e as avaliacoes reais ao lado. Sem carrossel:
   com poucas avaliacoes, tudo fica visivel de uma vez.
   ========================================================================== */
.vp-google {
  display: grid;
  gap: var(--vp-esp-5);
  align-items: stretch;
}
@media (min-width: 56rem) {
  .vp-google { grid-template-columns: minmax(14rem, .7fr) repeat(2, minmax(0, 1fr)); }
}
.vp-google__nota {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--vp-esp-3);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--vp-moldura);
  border-radius: var(--vp-raio-lg);
  background: var(--vp-vacuo-900);
}
.vp-google__numero {
  margin: 0;
  font-size: clamp(3rem, 2rem + 3vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--vp-branco);
  font-variant-numeric: tabular-nums;
}
.vp-google__total { margin: 0 0 var(--vp-esp-2); font-size: var(--vp-fs-sm); color: var(--vp-cor-texto-suave); }
.vp-depoimento__inicial {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vp-azul-noturno);
  font-weight: 700;
  color: var(--vp-branco);
}
.vp-google > .vp-depoimento { margin: 0; }