/* ==========================================================================
   TecEnergy · VITRINE
   ==========================================================================

   Mundo visual do redesign de 19/10/2026, com direção fixada pelo cliente a
   partir da referência voltaicbrasil.com.br: cada solução ganha a tela
   inteira, com foto de ponta a ponta, título grande centrado e duas ações.

   Esta folha carrega por último e redefine os tokens do site inteiro. Os
   componentes antigos (calculadora, FAQ, mapa, formulários, artigos) passam a
   ler preto, branco e cinza neutro sem precisar ser reescritos; os blocos
   próprios do mundo novo usam o prefixo .vt-.

   Cor: preto como chão, branco no texto e nas ações, cinza neutro no
   secundário. O laranja e o âmbar da marca só aparecem em número e estado
   ativo. Gradiente só como véu sobre foto, para garantir leitura.
   ========================================================================== */

/* -------------------------------------------------------------- fonte */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/urbanist-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: "Urbanist";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/urbanist-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    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;
}

/* ------------------------------------------------------------- tokens
   Pares verificados por luminância contra #000:
   #FFFFFF 21:1 · #D0D0D0 14,0:1 · #A3A3A3 8,4:1 · #FCC00C 12,6:1 ·
   #F0600C 6,6:1. Sobre #141414: #A3A3A3 7,4:1. */
:root {
  --vp-vacuo: #000000;
  --vp-vacuo-900: #000000;
  --vp-vacuo-700: #121212;
  --vp-vacuo-600: #1C1C1C;

  --vp-aco: #A3A3A3;
  --vp-aco-600: #5A5A5A;
  --vp-aco-800: #C4C4C4;

  --vp-cor-fundo: #000000;
  --vp-cor-fundo-alt: #0B0B0C;
  --vp-cor-texto: #D0D0D0;
  --vp-cor-texto-suave: #A3A3A3;
  --vp-cor-titulo: #FFFFFF;
  --vp-cor-primaria: #FFFFFF;
  --vp-cor-primaria-hover: #E2E2E2;
  --vp-cor-foco: #FCC00C;
  --vp-borda: rgba(255, 255, 255, .10);
  --vp-borda-escura: rgba(255, 255, 255, .12);
  --vp-moldura: rgba(255, 255, 255, .16);

  --vp-fonte-titulo: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --vp-fonte-texto: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --vp-peso-display: 600;
  --vp-peso-titulo: 600;
  --vp-ls-display: -.03em;
  --vp-ls-titulo: -.022em;
  --vp-ls-h3: -.012em;
  --vp-ls-rotulo: .16em;
  --vp-medida: 64ch;

  --vp-raio-sm: 4px;
  --vp-raio: 4px;
  --vp-raio-lg: 6px;
  --vp-raio-xl: 8px;

  --vp-h-topbar: 0px;
  --vp-h-nav: 76px;

  --vt-titulo: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --vt-display: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  --vt-texto-solto: rgba(255, 255, 255, .82);
}

html { background: #000; }
body {
  background: #000;
  font-family: var(--vp-fonte-texto);
  font-weight: 400;
  letter-spacing: .005em;
}
h1, h2, h3, h4 { font-family: var(--vp-fonte-titulo); }

::selection { background: #FFFFFF; color: #000; }

/* Superfícies "alt" e "escura" deixam de ser azuladas: grafite neutro. */
.vp-secao--alt,
.vp-secao--escura { background: #0B0B0C; }
.vp-secao--grid::before { display: none; }

/* --------------------------------------------------------------- botões
   Primário branco com texto preto, como na referência. Secundário com fio
   branco translúcido. Raio de 4px. */
.vp-btn {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 4px;
  border-width: 1px;
}
.vp-btn--primario { --btn-bg: #FFFFFF; --btn-cor: #000000; }
.vp-btn--primario:hover { --btn-bg: #E2E2E2; }
.vp-btn--secundario { --btn-cor: #FFFFFF; --btn-borda: rgba(255, 255, 255, .32); }
.vp-btn--secundario:hover { --btn-borda: #FFFFFF; --btn-cor: #FFFFFF; --btn-bg: rgba(255, 255, 255, .06); }
.vp-btn--contorno-claro { --btn-bg: rgba(0, 0, 0, .25); --btn-borda: rgba(255, 255, 255, .45); }
.vp-btn--contorno-claro:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-borda: #FFFFFF; }
.vp-btn--energia { --btn-bg: #FFFFFF; --btn-cor: #000000; }
.vp-btn--energia:hover { --btn-bg: #E2E2E2; --btn-cor: #000000; }
.vp-btn--grande { padding: 1rem 2.25rem; min-height: 54px; font-size: 1rem; }
.vp-btn__icone { display: none; }

/* ---------------------------------------------------------- navegação
   Transparente sobre a foto; preta ao rolar. Sem topbar: telefone e
   horário moram no rodapé e no menu do celular. */
.vp-topbar { display: none; }
.vp-header { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.vp-header.is-solido {
  background: rgba(0, 0, 0, .94);
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.vp-logo__imagem { height: 30px; }
.vp-menu__link {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .86);
}
.vp-menu__link:hover,
.vp-menu__link.is-ativo { color: #FFFFFF; }
.vp-menu__link.is-ativo::after { background: #FFFFFF; }
.vp-nav__cta { min-height: 42px; padding: .6rem 1.25rem; font-size: .875rem; }
.vp-hamburguer { border-color: rgba(255, 255, 255, .3); border-radius: 4px; }
@media (min-width: 64rem) {
  .vp-nav__interno { display: grid; grid-template-columns: 1fr auto 1fr; }
  .vp-nav__acoes { justify-self: end; }
}

/* ============================================================== vitrine
   Uma seção = uma tela. Foto sangrada, véu escuro na base para a leitura,
   título grande centrado, texto curto e duas ações. */
.vt-vitrine {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 100svh;
  padding: calc(var(--vp-h-nav) + 3rem) var(--vp-gutter) clamp(4.5rem, 3rem + 7vh, 8rem);
  overflow: hidden;
  background: #000;
  color: #FFFFFF;
  text-align: center;
}
.vt-vitrine__foto,
.vt-vitrine__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vt-vitrine__foto { z-index: -2; }
.vt-vitrine__foto img { object-fit: cover; object-position: 50% 50%; }
/* O véu: escurece a metade de baixo, onde mora o texto, e uma faixa fina
   no topo para a navegação. Medido no pior caso (foto clara ao meio-dia):
   o texto de apoio fica acima de 7:1. */
.vt-vitrine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 30%, rgba(0, 0, 0, .18) 58%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 18%);
}
.vt-vitrine__conteudo {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 58rem;
}
.vt-vitrine__titulo {
  margin: 0;
  font-size: var(--vt-titulo);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.vt-vitrine--abertura .vt-vitrine__titulo {
  font-size: var(--vt-display);
  line-height: .98;
  letter-spacing: -.035em;
}
.vt-vitrine__texto {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--vt-texto-solto);
  text-wrap: pretty;
}
.vt-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .875rem;
  margin-top: .5rem;
}
.vt-acoes .vp-btn { min-width: 13.5rem; }
.vt-vitrine__prova {
  margin: .5rem 0 0;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
}
.vt-vitrine__prova strong { font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.vt-vitrine__rotulo {
  position: absolute;
  left: var(--vp-gutter);
  bottom: 1rem;
  font-size: .75rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
}

/* Indicador de rolagem da abertura */
.vt-role {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  display: grid;
  justify-items: center;
  gap: .5rem;
  transform: translateX(-50%);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.vt-role::after {
  content: "";
  width: 1px;
  height: 2.25rem;
  background: rgba(255, 255, 255, .5);
}
.vt-role:hover { color: #FFFFFF; }
@media (max-height: 44rem) { .vt-role { display: none; } }

/* Celular: a foto continua em tela cheia, o texto aperta e os botões
   empilham em largura total, como na referência. */
@media (max-width: 47.99rem) {
  .vt-vitrine { padding-bottom: 4.25rem; }
  .vt-vitrine__foto img { object-position: 60% 50%; }
  .vt-acoes { width: 100%; flex-direction: column; }
  .vt-acoes .vp-btn { width: 100%; min-width: 0; }
  .vt-vitrine__rotulo { bottom: .6rem; }
  .vt-role { display: none; }
}

/* O momento de movimento da página: a foto assenta (de 1,06 a 1) quando a
   seção entra na tela. Conteúdo sempre visível; sem JS a foto já está no
   lugar. */
.js .vt-vitrine__foto img {
  transform: scale(1.06);
  transition: transform 1.8s cubic-bezier(.16, 1, .3, 1);
}
.js .vt-vitrine.is-na-tela .vt-vitrine__foto img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .js .vt-vitrine__foto img { transform: none; transition: none; }
}

/* ============================================================ títulos
   Título de seção sem foto: centrado, grande, sem rótulo acima. */
.vt-titulo {
  max-width: 22ch;
  margin: 0 auto;
  font-size: var(--vt-titulo);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-align: center;
  color: #FFFFFF;
  text-wrap: balance;
}
.vp-secao__titulo { font-weight: 600; letter-spacing: -.022em; }

/* ======================================================== três pilares */
.vt-pilares {
  padding-block: clamp(5rem, 3rem + 8vw, 9rem);
  background: #000;
}
.vt-pilares__grade {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (min-width: 56rem) {
  .vt-pilares__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vt-pilar { text-align: center; }
.vt-pilar__titulo {
  margin: 0 0 .9rem;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.vt-pilar p {
  max-width: 32ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}

/* ============================================================ fechamento */
.vt-fecho {
  display: grid;
  align-content: center;
  min-height: 80svh;
  padding-block: clamp(5rem, 3rem + 8vw, 9rem);
  background: #0B0B0C;
  text-align: center;
}
.vt-fecho__texto {
  max-width: 38rem;
  margin: 1.5rem auto 2rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}

/* =========================================================== calculadora
   Ganha a segunda tela inteira, em preto, com o mesmo título centrado. */
#calculadora { background: #000; }
#calculadora .vp-secao__cabecalho { text-align: center; margin-inline: auto; }
#calculadora .vp-secao__titulo {
  font-size: var(--vt-titulo);
  max-width: 20ch;
  margin-inline: auto;
}
#calculadora .vp-secao__texto { margin-inline: auto; }
.vp-calc__form,
.vp-calc__resultado { border-radius: 8px; }
.vp-calc__resultado { border-top-color: rgba(255, 255, 255, .16); }
.vp-calc__item-valor--forte,
.vp-calc__destaque-rotulo { color: var(--vp-ambar-energia); }

/* ================================================ cabeçalho de seção
   Nas seções antigas (FAQ, avaliações, mapa) o cabeçalho passa a ser
   centrado, no mesmo desenho da vitrine. */
.vp-secao__cabecalho:not(.vp-secao__cabecalho--esquerda) { text-align: center; margin-inline: auto; }
.vp-secao__cabecalho .vp-secao__texto { margin-inline: auto; text-align: center; }

/* ============================================ abertura das páginas internas
   Mesma linguagem da home: foto sangrada de ponta a ponta, título grande e
   texto centrado no terço de baixo. Substitui a moldura lateral. */
.vp-hero-interno {
  min-height: min(88svh, 52rem);
  align-items: flex-end;
  padding-bottom: clamp(3.5rem, 2rem + 6vh, 6rem);
  text-align: center;
  background: #000;
}
.vp-hero-interno .vp-container { width: 100%; }
.vp-hero-interno__midia {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
.vp-hero-interno__midia img { width: 100%; height: 100%; object-fit: cover; }
.vp-hero-interno__midia:has(.vp-img-fallback) { display: block; }
.vp-hero-interno::before {
  display: block;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 34%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, .1) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 20%);
}
.vp-hero-interno__conteudo,
.vp-hero-interno:has(.vp-hero-interno__midia img:not(.vp-img-fallback)) .vp-hero-interno__conteudo {
  max-width: 54rem;
  margin-inline: auto;
}
.vp-hero-interno__titulo {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.vp-hero-interno__texto {
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 300;
  color: var(--vt-texto-solto);
}
.vp-breadcrumb__lista { justify-content: center; }
.vp-breadcrumb__item[aria-current="page"] { color: #FFFFFF; }
.vp-breadcrumb__item a:hover { color: #FFFFFF; }
.vp-hero-interno .vp-badge { display: none; }
.vp-hero-interno__credito {
  right: auto;
  left: var(--vp-gutter);
  bottom: 1rem;
  top: auto;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, .62);
}

/* =================================================== peças recoloridas */
.vp-badge { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.vp-card,
.vp-depoimento,
.vp-google__nota,
.vp-faq__item {
  border-radius: 8px;
  background: #0F0F10;
  border-color: rgba(255, 255, 255, .09);
}
.vp-card:hover { border-color: rgba(255, 255, 255, .3); background: #141415; }
.vp-faq__item.is-aberto { border-color: rgba(255, 255, 255, .3); }
.vp-depoimento__inicial { background: #1F1F21; }
.vp-ponto__icone,
.vp-card__icone,
.vp-selo__icone { color: #FFFFFF; }

/* Rodapé: preto, fino, como na referência. */
.vp-footer { background: #000; border-top: 1px solid rgba(255, 255, 255, .08); }

/* Crédito da foto acima do véu: a mídia deixa de criar o próprio contexto
   de empilhamento e só a imagem desce para trás. */
.vp-hero-interno__midia { z-index: auto; background: transparent; pointer-events: none; }
.vp-hero-interno .vp-container { position: relative; z-index: 1; }
.vp-hero-interno__midia picture,
.vp-hero-interno__midia > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.vp-hero-interno__midia picture img { width: 100%; height: 100%; object-fit: cover; }
.vp-hero-interno__credito { z-index: 1; }

/* Filtros do mapa: estado ativo em branco, como os botões. */
.vp-mapa3d__filtro { border-width: 1px; }
.vp-mapa3d__filtro.is-ativo { background: #FFFFFF; border-color: #FFFFFF; color: #000000; }

.vt-fecho { min-height: 70svh; }

.vp-negocio__nota { max-width: 62ch; }
.vp-prosa li { max-width: 72ch; }

/* Texto pequeno sobre foto: branco cheio com sombra curta, que segura o
   contraste mesmo quando a foto clareia atrás (céu, telhado). */
.vp-hero-interno .vp-breadcrumb__item,
.vp-hero-interno .vp-breadcrumb__item a,
.vp-hero-interno__credito,
.vt-vitrine__rotulo {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 1px rgba(0, 0, 0, .9);
}
.vp-prosa li { max-width: 62ch; }
.vp-prosa > p, .vp-prosa p { max-width: 64ch; }

/* =====================================================================
   REVISÃO DE ACABAMENTO — a metade de baixo volta ao mundo da vitrine:
   nada de caixa; linhas finas sobre preto e troca de fundo entre seções.
   ===================================================================== */

/* Pilares: três linhas com fio, palavra grande à esquerda, texto à direita */
.vt-pilares__lista { margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0; max-width: 64rem; }
.vt-pilar {
  display: grid;
  gap: .5rem 3rem;
  padding-block: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
}
.vt-pilar:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 48rem) { .vt-pilar { grid-template-columns: 16rem minmax(0, 1fr); align-items: baseline; } }
.vt-pilar__titulo { margin: 0; }
.vt-pilar dd {
  margin: 0;
  max-width: 52ch;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}

/* Mapa: cidades em linhas, sem cartão */
.vp-mapa3d__cidades { gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.vp-cidade-card {
  padding: .9rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  background: transparent;
}
.vp-cidade-card__dado { color: var(--vp-ambar-energia); }
/* "Ocultar potências" é chave liga/desliga, não filtro: texto sublinhado à parte */
.vp-mapa3d__filtro[data-mapa-rotulos],
.vp-mapa3d__filtro[data-mapa-rotulos].is-ativo {
  margin-left: auto;
  padding-inline: .25rem;
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, .86);
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* Avaliações: sem cartões; a nota e cada avaliação são colunas com fio */
.vp-google__nota,
.vp-google > .vp-depoimento {
  padding: 1.75rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  box-shadow: none;
}
.vp-depoimento__autor { border-top: 0; padding-top: 0; }

/* FAQ: linhas com fio, resposta alinhada à esquerda e na largura da linha */
.vp-faq__item,
.vp-faq__item.is-aberto {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  box-shadow: none;
}
.vp-faq__item:first-child { border-top: 1px solid rgba(255, 255, 255, .14); }
.vp-faq__gatilho { padding-inline: 0; font-size: 1.125rem; }
.vp-faq__gatilho:hover { color: #FFFFFF; }
.vp-faq__conteudo { padding-inline: 0; max-width: 68ch; }
.vp-faq__conteudo p { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.vp-faq__icone { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF; }
.vp-faq__item.is-aberto .vp-faq__icone { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }

/* Fechamento em preto puro: troca de fundo depois do FAQ grafite */
.vt-fecho { background: #000; }

/* Laranja só em número: slogan e links em branco */
.vp-footer__slogan { color: #FFFFFF; }
.vt-link { color: #FFFFFF; text-decoration: underline; text-underline-offset: .25em; }

/* Menu: destaque achatado como coluna; descrição sempre em linha própria */
.vp-mega__destaque {
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  box-shadow: none;
}
.vp-mega__link > span:last-child { display: grid; gap: .15rem; }
.vp-mega__nome,
.vp-mega__desc { display: block; }

/* Fotos escuras demais (câmeras, wallbox): a foto clareia; o véu continua
   só embaixo, onde mora o texto. */
#seguranca .vt-vitrine__foto img,
#wallbox .vt-vitrine__foto img,
.vp-hero-interno__midia img[src*="vitrine/cftv"],
.vp-hero-interno__midia img[src*="vitrine/wallbox"] { filter: brightness(1.45) contrast(1.04); }

/* Celular: a foto ocupa o alto da tela e o texto desce para o preto, para o
   assunto da foto (a casa, o carregador) não ficar atrás dos botões. */
@media (max-width: 47.99rem) {
  .vt-vitrine { padding-top: 0; }
  .vt-vitrine__foto { bottom: auto; height: 58%; }
  .vt-vitrine__foto img { object-position: 50% 62%; }
  .vt-vitrine::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 14%,
      rgba(0, 0, 0, 0) 38%, #000 58%, #000 100%);
  }
  .vt-vitrine__rotulo { top: calc(58% - 2.4rem); bottom: auto; }
}
@media (max-width: 47.99rem) { .vt-vitrine__rotulo { top: calc(var(--vp-h-nav) + .25rem); bottom: auto; left: auto; right: var(--vp-gutter); } }

/* Navegação rolada totalmente opaca: nada da seção de baixo aparece atrás. */
.vp-header.is-solido { background: #000000; }

/* Cidades: nome e UF na mesma linha; duas colunas no celular. */
.vp-cidade-card { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: baseline; }
.vp-cidade-card__nome { grid-column: 1; margin: 0; }
.vp-cidade-card__uf { grid-column: 2; grid-row: 1; }
.vp-cidade-card__dado { grid-column: 1 / -1; }
@media (max-width: 47.99rem) {
  .vp-mapa3d__cidades { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
}

/* Calculadora recolhida até o clique em "Calcular minha economia".
   Ao abrir, entra com um deslize curto a partir de já visível. */
.js #calculadora:not(.is-aberta) { display: none; }
#calculadora.is-aberta { animation: vt-abre-calc .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes vt-abre-calc { from { opacity: .4; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #calculadora.is-aberta { animation: none; } }

/* Abertura: a usina tem o horizonte no terço de cima; no celular a foto
   mostra o sol e as turbinas acima do título. */
.vt-vitrine--abertura .vt-vitrine__foto img { object-position: 50% 40%; }
@media (max-width: 47.99rem) { .vt-vitrine--abertura .vt-vitrine__foto img { object-position: 30% 50%; } }

/* =====================================================================
   AJUSTE DE 19/10/2026 (pedido do cliente)
   1. Fundo: sai o preto genérico; entra o azul-noite das próprias fotos
      (o céu do fim de tarde e da hora azul das imagens), puxado para o
      azul-marinho da marca. O véu das fotos desce para a mesma cor, então
      foto e fundo se emendam sem corte.
   2. Botões num padrão só: branco (principal) e contorno (secundário). O
      verde do WhatsApp sai dos botões; o ícone continua dizendo o canal.
   3. Abertura: placas solares mais visíveis — o texto sobe para o centro,
      o véu vira uma mancha suave atrás do texto e a foto clareia embaixo.
   ===================================================================== */
:root {
  --vt-noite: #0A1120;          /* chão: azul-noite das fotos */
  --vt-noite-2: #0E1729;        /* seção alternada */
  --vt-noite-3: #142036;        /* superfície elevada (formulário, menu) */
  --vp-cor-fundo: var(--vt-noite);
  --vp-cor-fundo-alt: var(--vt-noite-2);
  --vp-vacuo: var(--vt-noite);
  --vp-vacuo-900: var(--vt-noite);
  --vp-vacuo-700: var(--vt-noite-3);
  --vp-vacuo-600: #1A2842;
  --vp-cor-texto: #D6DCE8;      /* 14,0:1 sobre --vt-noite */
  --vp-cor-texto-suave: #A3AEC4; /* 8,1:1 sobre --vt-noite */
}
html, body { background: var(--vt-noite); }
.vt-pilares, .vt-fecho, #calculadora { background: var(--vt-noite); }
.vp-secao--alt, .vp-secao--escura { background: var(--vt-noite-2); }
.vp-footer { background: #070C17; }
.vp-header.is-solido { background: var(--vt-noite); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.vp-mega, .vp-calc__form { background: var(--vt-noite-3); }
.vp-calc__resultado,
.vp-calc__painel.is-calculado .vp-calc__resultado { background: rgba(10, 17, 32, .96); }
.vp-calc__item { background: var(--vt-noite); }
.vp-calc__entrada, .vp-calc__select { background-color: #0A1120; }

/* véus das fotos na cor do chão */
.vt-vitrine { background: var(--vt-noite); }
.vt-vitrine::after {
  background:
    linear-gradient(to top, rgba(10, 17, 32, .92) 0%, rgba(10, 17, 32, .62) 30%, rgba(10, 17, 32, .16) 58%, rgba(10, 17, 32, 0) 72%),
    linear-gradient(to bottom, rgba(10, 17, 32, .55) 0%, rgba(10, 17, 32, 0) 18%);
}
.vp-hero-interno { background: var(--vt-noite); }
.vp-hero-interno::before {
  background:
    linear-gradient(to top, rgba(10, 17, 32, .94) 0%, rgba(10, 17, 32, .62) 34%, rgba(10, 17, 32, .2) 62%, rgba(10, 17, 32, .1) 100%),
    linear-gradient(to bottom, rgba(10, 17, 32, .5) 0%, rgba(10, 17, 32, 0) 20%);
}
@media (max-width: 47.99rem) {
  .vt-vitrine::after {
    background: linear-gradient(to bottom, rgba(10, 17, 32, .45) 0%, rgba(10, 17, 32, 0) 14%,
      rgba(10, 17, 32, 0) 38%, #0A1120 58%, #0A1120 100%);
  }
}

/* ---------------------------------------------------- botões, um padrão */
.vp-btn--whatsapp { --btn-bg: #FFFFFF; --btn-cor: #000000; }
.vp-btn--whatsapp:hover { --btn-bg: #E2E2E2; }
.vp-btn--whatsapp .vp-btn__icone { display: block; }
.vp-whatsapp {
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.vp-whatsapp:hover { background: #E2E2E2; color: #000000; }
.vp-voltar-topo, .vp-topo { background: var(--vt-noite-3); border-color: rgba(255, 255, 255, .2); }

/* --------------------------------------- abertura: mais placas à mostra */
@media (min-width: 48rem) {
  .vt-vitrine--abertura { align-content: center; padding-top: calc(var(--vp-h-nav) + 1rem); }
  .vt-vitrine--abertura::after {
    background:
      radial-gradient(ellipse 46% 40% at 50% 47%, rgba(10, 17, 32, .62) 0%, rgba(10, 17, 32, .32) 55%, rgba(10, 17, 32, 0) 100%),
      linear-gradient(to bottom, rgba(10, 17, 32, .5) 0%, rgba(10, 17, 32, 0) 16%),
      linear-gradient(to top, rgba(10, 17, 32, .5) 0%, rgba(10, 17, 32, 0) 22%);
  }
}
.vt-vitrine--abertura .vt-vitrine__foto img { filter: brightness(1.28) saturate(1.05); }
.vt-vitrine--abertura .vt-vitrine__titulo,
.vt-vitrine--abertura .vt-vitrine__texto,
.vt-vitrine--abertura .vt-vitrine__prova { text-shadow: 0 2px 18px rgba(10, 17, 32, .7); }

/* Laranja só em número: o token de destaque decorativo herdado do site
   antigo (links, ícones, item ativo do menu) passa a ser branco; os
   números de contador e indicador ficam em âmbar, que é a cor de dado. */
:root { --vp-laranja-solar: #FFFFFF; }
.vp-contador__valor, .vp-contador__unidade,
.vp-secao--escura .vp-contador__valor, .vp-secao--escura .vp-contador__unidade,
.vp-indicador__valor, .vp-indicador__unidade { color: var(--vp-ambar-energia); }
.vp-secao--escura a:not(.vp-btn), .vp-cookies__texto a { text-decoration: underline; text-underline-offset: .2em; }
.vp-drawer__link.is-ativo, .vp-drawer__link[aria-expanded="true"] { text-decoration: underline; text-underline-offset: .3em; }

/* Barra lateral das páginas de serviço: o bloco "Todos os serviços" deixa
   de ser fixo ao rolar. Fixo, ele deslizava por cima do bloco de contato
   logo abaixo dele. */
.vp-conteudo__sidebar-sticky { position: static; }

/* =====================================================================
   PÁGINAS DE VENDA (energia solar, eletroposto): benefício, para quem,
   como contratar, números e chamada. Mesma gramática da home.
   ===================================================================== */
.vp-hero-interno .vt-acoes { margin-top: 1.75rem; }
.vt-pilares--alt { background: var(--vt-noite-2); }

.vt-passos { padding-block: clamp(5rem, 3rem + 8vw, 8rem); background: var(--vt-noite); }
.vt-passos__lista {
  display: grid;
  gap: 2rem 3rem;
  max-width: 64rem;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
@media (min-width: 48rem) { .vt-passos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vt-passo {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  counter-increment: passo;
}
.vt-passo::before {
  content: counter(passo);
  display: block;
  margin-bottom: .75rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--vp-ambar-energia);
  font-variant-numeric: tabular-nums;
}
.vt-passo__titulo { margin: 0 0 .6rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; color: #FFFFFF; }
.vt-passo p { margin: 0; font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--vp-cor-texto-suave); }

.vt-provas { padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); background: var(--vt-noite-2); }
.vt-provas__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
@media (min-width: 48rem) { .vt-provas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vt-provas__lista strong {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--vp-ambar-energia);
  font-variant-numeric: tabular-nums;
}
.vt-provas__lista span { font-size: .9375rem; color: var(--vp-cor-texto-suave); }

.vt-fecho__blog {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  font-size: .9375rem;
  color: var(--vp-cor-texto-suave);
}

/* Títulos das listas de benefício cabem em uma ou duas linhas */
@media (min-width: 48rem) { .vt-pilar { grid-template-columns: 20rem minmax(0, 1fr); } }
.vt-pilar__titulo { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); line-height: 1.15; }
.vp-faq__conteudo { max-width: 62ch; }

/* Capa do artigo gerada por IA: aviso discreto sobre a foto */
.vp-post__capa { position: relative; }
.vp-post__credito {
  position: absolute;
  right: .75rem;
  bottom: .5rem;
  font-size: .75rem;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* Calculadora: nota de premissas logo abaixo dos resultados */
.vp-calc__nota { margin-top: 1rem; font-size: .8125rem; }

/* ==========================================================================
   CALCULADORA (redesign 20/10/2026)
   Formulário à esquerda, resposta à direita, atualizada enquanto se digita.
   A resposta começa por uma frase ("Sua conta cai de X para Y"), não por
   número técnico; o âmbar fica só na economia do mês e no foco.
   ========================================================================== */
.vt-calc { background: var(--vt-noite); }
.vt-calc__cabeca { text-align: center; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.vt-calc__lead {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--vp-cor-texto-suave);
}

.vt-calc__grade { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) {
  .vt-calc__grade { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2rem; }
  .vt-calc__form { position: sticky; top: 6.5rem; }
}

/* ------------------------------------------------------------ formulário */
.vt-calc__form {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--vt-noite-3);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
}
.vt-calc__campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.vt-calc__rotulo {
  padding: 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #FFFFFF;
}
.vt-calc__ajuda { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--vp-cor-texto-suave); }

/* Valor da conta: o campo é o número grande da tela */
.vt-calc__valor {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 4.25rem;
  padding: 0 1.125rem;
  background: var(--vt-noite);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vt-calc__valor:hover { border-color: rgba(255, 255, 255, .32); }
.vt-calc__valor:focus-within {
  border-color: var(--vp-ambar-energia);
  box-shadow: 0 0 0 3px rgba(252, 192, 12, .22);
}
.vt-calc__moeda { font-size: 1.25rem; font-weight: 500; color: var(--vp-cor-texto-suave); }
.vt-calc__numero {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 4rem;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  caret-color: var(--vp-ambar-energia);
}
.vt-calc__numero::placeholder { color: rgba(255, 255, 255, .34); }
.vt-calc__numero:focus { outline: none; }

/* Controle deslizante: trilho de fio, parte preenchida em branco */
.vt-calc__faixa {
  --p: 34%;
  width: 100%;
  height: 1.5rem;
  margin: .25rem 0 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.vt-calc__faixa::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #FFFFFF var(--p), rgba(255, 255, 255, .16) var(--p));
}
.vt-calc__faixa::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.vt-calc__faixa::-moz-range-progress { height: 4px; border-radius: 4px; background: #FFFFFF; }
.vt-calc__faixa::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: calc(2px - .6875rem);
  border: 4px solid var(--vt-noite-3);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
  transition: transform .15s ease;
}
.vt-calc__faixa::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border: 4px solid var(--vt-noite-3);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
.vt-calc__faixa:active::-webkit-slider-thumb { transform: scale(1.12); }
.vt-calc__faixa:focus { outline: none; }
.vt-calc__faixa:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--vp-ambar-energia); }
.vt-calc__faixa:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--vp-ambar-energia); }
.vt-calc__faixa-limites {
  display: flex;
  justify-content: space-between;
  margin-top: -.25rem;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--vp-cor-texto-suave);
}

/* Cidade */
.vt-calc__select {
  width: 100%;
  min-height: 3.125rem;
  padding: .8rem 2.6rem .8rem 1rem;
  background-color: var(--vt-noite);
  background-image: var(--vp-seta-select);
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  font: inherit;
  color: #FFFFFF;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vt-calc__select:hover { border-color: rgba(255, 255, 255, .32); }
.vt-calc__select:focus-visible {
  outline: none;
  border-color: var(--vp-ambar-energia);
  box-shadow: 0 0 0 3px rgba(252, 192, 12, .22);
}
.vt-calc__select option { background: var(--vt-noite-3); color: #FFFFFF; }

/* Escolhas de três opções: botões lado a lado, o escolhido em branco */
.vt-calc__segmentos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.vt-calc__segmento { position: relative; display: block; cursor: pointer; }
.vt-calc__segmento input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vt-calc__segmento span {
  display: grid;
  place-items: center;
  min-height: 2.875rem;
  padding: .25rem .5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  color: var(--vp-cor-texto);
  transition: background-color .2s ease, color .2s ease;
}
.vt-calc__segmento:hover span { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }
.vt-calc__segmento input:checked + span { background: #FFFFFF; border-color: #FFFFFF; color: #000000; font-weight: 600; }
.vt-calc__segmento input:focus-visible + span { box-shadow: 0 0 0 3px var(--vp-ambar-energia); }

.vt-calc__enviar { width: 100%; }
.vt-calc__erro { margin: -.75rem 0 0; font-size: .875rem; color: #FFD27A; }
.vt-calc__erro[hidden] { display: none; }

/* ------------------------------------------------------------- resposta */
.vt-calc__painel {
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--vt-noite-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  scroll-margin-top: 6rem;
}
.vt-calc__vazio-titulo {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: #FFFFFF;
}
.vt-calc__vazio-texto {
  max-width: 34rem;
  margin: .75rem 0 2.25rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--vp-cor-texto-suave);
}
.vt-calc__vazio[hidden], .vt-calc__resultado[hidden] { display: none; }

.vt-calc__frase {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
  color: #FFFFFF;
}
.vt-calc__frase span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-calc__economia {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  margin: 1.25rem 0 0;
}
.vt-calc__economia strong {
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--vp-ambar-energia);
}
.vt-calc__economia > span { font-size: 1.0625rem; font-weight: 300; color: var(--vp-cor-texto); }

/* Hoje x Com solar: a barra de baixo encolhe até o que sobra da conta.
   É o único movimento da calculadora. */
.vt-calc__comparacao { display: grid; gap: .75rem; margin: 2rem 0 0; }
.vt-calc__barra {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1rem;
  font-size: .9375rem;
}
.vt-calc__barra span { color: var(--vp-cor-texto-suave); }
.vt-calc__barra b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.vt-calc__barra i {
  --p: 100%;
  display: block;
  height: .75rem;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(#6B7894, #6B7894) left / var(--p) 100% no-repeat;
  transition: background-size .9s cubic-bezier(.16, 1, .3, 1);
}
.vt-calc__barra--solar i { background-image: linear-gradient(#FFFFFF, #FFFFFF); }
.vt-calc__comparacao--fantasma i { opacity: .45; }
.vt-calc__comparacao--fantasma b { color: var(--vp-cor-texto-suave); }
.vt-calc__comparacao--fantasma .vt-calc__barra--solar i { --p: 30%; background-image: linear-gradient(#6B7894, #6B7894); }

/* Linhas com fio, como os pilares do site */
.vt-calc__linhas { margin: 2.25rem 0 0; padding: 0; }
.vt-calc__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.vt-calc__linha:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.vt-calc__linha dt { color: var(--vp-cor-texto-suave); }
.vt-calc__linha dd {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.vt-calc__linha dd small {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--vp-cor-texto-suave);
}

/* Saldo ano a ano */
.vt-calc__grafico { margin: 2.25rem 0 0; }
.vt-calc__grafico-titulo { margin: 0 0 1rem; font-size: .9375rem; font-weight: 600; color: #FFFFFF; }
.vt-calc__grafico-area { position: relative; }
.vt-calc__grafico-area svg { display: block; width: 100%; height: auto; overflow: visible; }
.vt-calc__grafico-area text {
  font-family: inherit;
  font-size: 12px;
  fill: var(--vp-cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
.vt-calc__grafico-area .vt-g-destaque { fill: #FFFFFF; font-weight: 600; }
.vt-calc__dica {
  position: absolute;
  z-index: 2;
  padding: .45rem .65rem;
  background: var(--vt-noite);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  font-size: .8125rem;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--vp-cor-texto);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}
.vt-calc__dica strong { display: block; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.vt-calc__dica[hidden] { display: none; }

.vt-calc__whatsapp { width: 100%; margin-top: 2.25rem; }
.vt-calc__avisos { display: grid; gap: .75rem; margin: 1.5rem 0 0; }
.vt-calc__avisos p { max-width: none; margin: 0; text-align: left; hyphens: manual; font-size: .875rem; line-height: 1.6; color: var(--vp-cor-texto-suave); }
.vt-calc__avisos strong { font-weight: 600; color: #FFFFFF; }
.vt-calc__premissas + .vt-calc__premissas { margin-top: .5rem; }
.vt-calc__nota { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--vp-cor-texto-suave); }
.vt-calc__premissas { margin-top: 1.5rem; }

@media (max-width: 30rem) {
  .vt-calc__linha--sistema { display: block; }
  .vt-calc__linha--sistema dd { margin-top: .35rem; text-align: left; }
  .vt-calc__barra { grid-template-columns: 4.75rem minmax(0, 1fr) 4.75rem; gap: .625rem; }
  .vt-calc__segmento span { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-calc__barra i, .vt-calc__faixa::-webkit-slider-thumb { transition: none; }
}