/* ============================================================
   FORBS ELETROPOSTOS — refinamento visual
   Carregado depois de site.css. Ajusta tipografia, espaçamento,
   profundidade e detalhes da marca, sem mexer na estrutura.
   ============================================================ */

:root {
  --raio-g: 20px;
  --sombra-suave: 0 1px 2px rgba(0, 20, 89, .04), 0 4px 16px rgba(0, 20, 89, .06);
  --sombra-media: 0 2px 4px rgba(0, 20, 89, .05), 0 12px 28px rgba(0, 20, 89, .09);
  --sombra-alta: 0 4px 8px rgba(0, 20, 89, .06), 0 24px 48px rgba(0, 20, 89, .14);
  --transicao: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- TIPOGRAFIA: mais contraste entre os níveis ---------- */
body { font-size: 16.5px; line-height: 1.7; letter-spacing: -.003em; }

h1 { font-size: clamp(2rem, 5.6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 4.2vw, 2.4rem); letter-spacing: -.022em; line-height: 1.15; }
h3 { font-size: clamp(1.12rem, 2.6vw, 1.3rem); letter-spacing: -.012em; line-height: 1.3; }

.secao__sub { font-size: 1.06rem; line-height: 1.65; }
.secao__sub--esquerda { margin-left: 0; text-align: left; }

/* ---------- RITMO VERTICAL: mais respiro entre as seções ---------- */
.secao { padding: 60px 0; }
.secao--compacta { padding: 40px 0; }
.secao__titulo { margin-bottom: 12px; }
.secao__sub { margin-bottom: 38px; }

@media (min-width: 900px) {
  .secao { padding: 88px 0; }
  .secao--compacta { padding: 52px 0; }
}

/* ---------- CAMINHO DE MIGALHAS ---------- */
.migalhas {
  font-size: .88rem;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .72);
}
.migalhas a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.migalhas a:hover { text-decoration: underline; }
.migalhas span { margin: 0 6px; opacity: .55; }

/* ---------- HERO: mais presença ---------- */
.hero__conteudo { padding: 60px 0 68px; }
@media (min-width: 900px) { .hero__conteudo { padding: 104px 0 112px; } }

.hero h1 { margin-bottom: 18px; text-wrap: balance; }
.hero__sub { font-size: 1.14rem; line-height: 1.6; color: #E4F5EC; margin-bottom: 32px; }

.hero__slogan {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .24);
  backdrop-filter: blur(6px);
  letter-spacing: .07em;
  font-size: .76rem;
  padding: 8px 18px;
}

/* brilho suave atrás do conteúdo, para o texto descolar da foto */
.hero__conteudo::before {
  content: "";
  position: absolute;
  inset: -40px -60px -40px -80px;
  background: radial-gradient(ellipse at 30% 50%, rgba(0, 40, 42, .55), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* ---------- BOTÕES: mais sólidos, com reação mais suave ---------- */
.btn {
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
.btn--primario, .btn--destaque { box-shadow: var(--sombra-suave); }
.btn--primario:hover, .btn--destaque:hover, .btn--zap:hover { box-shadow: var(--sombra-media); }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

.btn--contorno { border-width: 1.5px; }
.btn--contorno:hover { box-shadow: var(--sombra-suave); }

/* ---------- CARTÕES: profundidade mais natural ---------- */
.card, .card-unidade, .card-avaliacao {
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-unidade:hover { transform: translateY(-3px); box-shadow: var(--sombra-media); }

.card { padding: 28px; }
.card--destaque { border-top: 0; position: relative; overflow: hidden; }
/* faixa da marca no topo do cartão, em degradê */
.card--destaque::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-marca);
}

.card__icone {
  width: 54px; height: 54px;
  border-radius: 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0, 126, 49, .25);
}

/* ---------- LISTA COM MARCA DE CONFERIDO ---------- */
.lista-check li { padding-left: 32px; margin-bottom: 12px; line-height: 1.6; }
.lista-check li::before { top: .38em; width: 20px; height: 20px; background-size: 13px; }

/* ---------- BARRA DE NÚMEROS: mais impacto ---------- */
.numeros { background: var(--cor-secundaria); position: relative; overflow: hidden; }
.numeros::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 120%, rgba(0, 190, 68, .22), transparent 60%);
  pointer-events: none;
}
.numeros__grade { position: relative; z-index: 1; padding: 38px 0; gap: 28px 16px; }
.numero__valor { font-size: clamp(1.5rem, 3.6vw, 2rem); letter-spacing: -.02em; margin-bottom: 4px; }
.numero__rotulo { font-size: .88rem; line-height: 1.4; color: #B9C7EC; }

/* ---------- FAIXAS ---------- */
.faixa-parceiro__inner { padding: 44px 0; gap: 22px; }
.faixa-parceiro p { font-size: 1.12rem; line-height: 1.5; }
.faixa-insta__inner { padding: 52px 0; }

/* ---------- SEÇÕES ESCURAS ---------- */
.secao--escura { position: relative; overflow: hidden; }
.secao--escura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 0%, rgba(0, 190, 68, .18), transparent 55%);
  pointer-events: none;
}
.secao--escura > * { position: relative; z-index: 1; }

.selo-numero {
  padding: 18px 24px;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
}
.selo-numero strong { font-size: 1.6rem; letter-spacing: -.02em; }

/* ---------- ETIQUETAS ---------- */
.etiqueta {
  padding: 5px 12px;
  font-size: .82rem;
  letter-spacing: -.005em;
}

/* ---------- CARTÃO DE UNIDADE ---------- */
.card-unidade__corpo { padding: 22px; gap: 0; }
.card-unidade__nome { font-size: 1.18rem; letter-spacing: -.015em; margin-bottom: 6px; }
.card-unidade__dados { gap: 7px; margin-bottom: 20px; }
.card-unidade__midia img { transition: transform 500ms cubic-bezier(.2, .7, .3, 1); }
.card-unidade:hover .card-unidade__midia img { transform: scale(1.04); }
.card-unidade__midia { overflow: hidden; }

/* ---------- FORMULÁRIOS ---------- */
.campo input, .campo select, .campo textarea {
  border-radius: 11px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo label { margin-bottom: 2px; }
.formulario { gap: 20px; }

/* ---------- ABAS ---------- */
.abas__lista { gap: 4px; border-bottom-width: 1px; }
.aba { border-bottom-width: 3px; transition: color var(--transicao), border-color var(--transicao); }

/* ---------- TABELAS ---------- */
.tabela-info th, .tabela-info td { padding: 15px 12px; }
.tabela-info th { font-size: .94rem; }

/* ---------- PASSOS NUMERADOS ---------- */
.passos li {
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-suave);
  padding: 22px 22px 22px 70px;
}
.passos li::before {
  width: 36px; height: 36px;
  box-shadow: 0 3px 10px rgba(0, 126, 49, .3);
}
.passos strong { margin-bottom: 4px; font-size: 1.02rem; }

/* ---------- PERGUNTAS FREQUENTES ---------- */
.faq details {
  border-radius: var(--raio);
  box-shadow: var(--sombra-suave);
  transition: box-shadow var(--transicao);
}
.faq details[open] { box-shadow: var(--sombra-media); }
.faq summary { padding: 18px 20px; font-size: 1.02rem; }
.faq details > *:not(summary) { padding: 0 20px 18px; line-height: 1.65; }

/* ---------- ESTADO VAZIO ---------- */
.estado-vazio { border-radius: var(--raio-g); padding: 32px 26px; }

/* ---------- CABEÇALHO ---------- */
.cabecalho { border-bottom-color: rgba(0, 20, 89, .08); }
.cabecalho__inner { min-height: 76px; }
.marca img { height: 44px; transition: opacity var(--transicao); }
.marca:hover img { opacity: .85; }
.nav__link { transition: background-color var(--transicao), color var(--transicao); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2.5px 0 var(--cor-acao); }

/* ---------- RODAPÉ ---------- */
.rodape { padding: 56px 0 30px; }
.rodape__grade { gap: 38px; }
.rodape h3 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: #8FA3D8; margin-bottom: 16px; }
.rodape li { margin-bottom: 11px; line-height: 1.5; }
.rodape__solar { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); line-height: 1.6; }
.rodape__base { margin-top: 38px; padding-top: 24px; color: #8FA3D8; }

/* ---------- BOTÃO FLUTUANTE ---------- */
.zap-flutuante {
  width: 60px; height: 60px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.zap-flutuante:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(37, 211, 102, .5); }

/* ---------- BARRA DO CELULAR ---------- */
.barra-mobile { box-shadow: 0 -2px 12px rgba(0, 20, 89, .07); }
.barra-mobile a { gap: 3px; font-size: .74rem; }

/* ---------- SELEÇÃO DE TEXTO NA COR DA MARCA ---------- */
::selection { background: var(--cor-viva); color: var(--cor-secundaria); }

/* ---------- ROLAGEM SUAVE COM CABEÇALHO FIXO ---------- */
:target { scroll-margin-top: calc(var(--altura-cabecalho) + 24px); }

/* ---------- TELAS GRANDES: largura confortável de leitura ---------- */
@media (min-width: 1280px) {
  :root { --largura-max: 1240px; }
}


/* ---------- CORREÇÕES DE CONTRASTE EM FUNDO ESCURO ----------
   O h1 não estava na regra de cor clara e saía em azul-marinho
   sobre o verde-petróleo, quase ilegível. */
.secao--escura h1,
.secao--escura h2,
.secao--escura h3,
.secao--escura h4 { color: #fff; }

.secao--escura .secao__sub,
.secao--escura p { color: #DCEFE4; }

.secao--escura strong { color: #fff; }

.secao--escura a:not(.btn) { color: var(--cor-primaria-clara); }

/* ---------- TABELA DE TEMPOS: colunas com largura adequada ---------- */
.tabela-tempos th[scope="col"]:nth-child(1) { width: 34%; }
.tabela-tempos th[scope="col"]:nth-child(2) { width: 16%; }
.tabela-tempos th[scope="col"]:nth-child(3) { width: 18%; }
.tabela-tempos th[scope="col"]:nth-child(4) { width: 32%; }
.tabela-tempos td:last-child { white-space: normal; }
.etiqueta--pequena { white-space: nowrap; }


/* ---------- MENU: com sete itens, o desktop precisa de mais espaço ----------
   Abaixo de 1180px o menu vira o botão de três traços, senão os rótulos
   quebram em várias linhas e o cabeçalho fica desalinhado. */
.nav__link { white-space: nowrap; }

@media (max-width: 1179px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .barra-mobile { display: grid; }
  .cabecalho .btn--zap { display: none; }
  body { padding-bottom: var(--altura-barra-mobile); }
  body.tem-barra-rota { padding-bottom: calc(var(--altura-barra-mobile) + 74px); }
  .barra-rota-fixa { display: block; }
  .zap-flutuante { bottom: calc(var(--altura-barra-mobile) + 14px); }
  body.tem-barra-rota .zap-flutuante { bottom: calc(var(--altura-barra-mobile) + 84px); }
}

@media (min-width: 1180px) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .menu-mobile { display: none !important; }
  .barra-mobile { display: none; }
  .cabecalho .btn--zap { display: inline-flex; }
  .zap-flutuante, body.tem-barra-rota .zap-flutuante { bottom: 20px; }
  body, body.tem-barra-rota { padding-bottom: 0; }
  .barra-rota-fixa { display: none; }
  .nav__link { padding: 8px 10px; font-size: .92rem; }
}

@media (min-width: 1320px) {
  .nav__link { padding: 8px 13px; font-size: .95rem; }
}


/* ---------- TABELA QUE ROLA: mostrar que há mais conteúdo ao lado ----------
   A sombra na borda direita some quando a tabela chega ao fim da rolagem. */
.tabela-rolagem {
  position: relative;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,20,89,.14), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,20,89,.14), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.secao--suave .tabela-rolagem {
  background-image:
    linear-gradient(to right, var(--cor-fundo-suave) 30%, rgba(244,247,245,0)),
    linear-gradient(to left, var(--cor-fundo-suave) 30%, rgba(244,247,245,0)),
    radial-gradient(farthest-side at 0 50%, rgba(0,20,89,.14), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,20,89,.14), rgba(0,0,0,0));
}


/* ---------- TEXTO CORRIDO: largura confortável de leitura ---------- */
.texto-longo { max-width: 68ch; }
.texto-longo p { font-size: 1.06rem; line-height: 1.75; }
.texto-longo h2 { margin-top: 1.6em; }
.texto-longo h2:first-child { margin-top: 0; }

/* ---------- GRADE DE DOIS ---------- */
.grade-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grade-2 > * { min-width: 0; }
@media (min-width: 760px) { .grade-2 { grid-template-columns: repeat(2, 1fr); } }