@import url('styles.css?v=20260616d');

/* ========================================
   MASTERINFO INTERNET - LIGHT THEME
   Override-only: colors, backgrounds,
   borders, shadows. No layout changes.
   ======================================== */

/* ⚠️⚠️⚠️ LEIA ANTES DE MEXER NA COR DE FUNDO DAS SEÇÕES ⚠️⚠️⚠️
   ────────────────────────────────────────────────────────────────────────────
   ARMADILHA #1 — TOKENS INVERTIDOS viram BRANCO:
   Neste arquivo (linha ~12) o tema claro INVERTE os neutros: `--black: #ffffff`,
   `--white: #1a1a2e`, e `--bg-base` (definido no styles.css) resolve para
   `var(--black)` = #fff. Logo, QUALQUER regra herdada do styles.css (tema dark)
   que use `#fff`, `var(--black)` ou `var(--bg-base)` como FUNDO/gradiente vira
   um BLOCO BRANCO no tema claro. Enquanto as seções eram brancas, isso ficava
   invisível. Se você ESCURECE/AQUECE o fundo das seções, esses brancos saltam.

   ARMADILHA #2 — PSEUDOS DE TRANSIÇÃO DE SEÇÃO (a famigerada "faixa branca"):
   O styles.css tem `.plans-dark::after`, `.plans-light::after` e `.plans-light::before`
   (styles.css ~7212/7224/7237): faixas absolutas de 80–120px no topo/rodapé das
   seções de planos, com `linear-gradient(... , #fff / var(--bg-base))`. Foram
   feitas pra FUNDIR os planos com a antiga seção escura `#nossa-historia` no DARK.
   No light viram #fff sólido. Como `#nossa-historia` está `display:none`
   (`historia.on=false`), a Cobertura peach encostava no rodapé e expunha o branco
   = a "faixa branca" que custou horas (15/06/2026). → JÁ NEUTRALIZADOS com
   `display:none` no fim deste arquivo. NÃO reative sem testar.

   COMO MUDAR COR COM SEGURANÇA (processo obrigatório):
   1) Edite SÓ aqui (styles-light.css). Mantenha as seções de planos num tom
      QUASE-BRANCO (contraste ≤ ~10 vs #fff) pra não revelar vão/branco dos cards.
   2) Teste em http://localhost:8091/index-light.html com Ctrl+Shift+R.
   3) VERIFIQUE NO DOM, não em screenshot: o Chrome MCP tem o scroll TRAVADO sob
      `body{zoom}` (--site-scale) → prints mentem. Cheque assim no console:
        getComputedStyle(document.querySelector('.plans-light'),'::after').display  // tem que dar "none"
   4) Bug visual que não cede em 1–2 tentativas? NÃO chute cor: rode varredura
      multi-agente do CSS (foi o que achou a causa). Detalhes: memória
      `faixa-branca-licao` + commit do fix dos pseudos.
   ──────────────────────────────────────────────────────────────────────────── */

/* ---------- CSS Variables ---------- */
:root {
  /* Neutrals (inverted scale) */
  --black: #ffffff;
  --gray-950: #f8f8fb;
  --gray-900: #f2f2f5;
  --gray-800: #e8e8ec;
  --gray-700: #d4d4d8;
  --gray-600: #a1a1aa;
  --gray-500: #71717a;
  --gray-400: #52525a;
  --gray-300: #3a3a44;
  --gray-200: #2a2a34;
  --gray-100: #1a1a2e;
  --white: #1a1a2e;

  /* Text tokens — invertidos pro tema claro.
     Bug histórico: styles.css define --text-primary: #ffffff e o light theme
     esquecia de redefinir → componentes como .footer-trust-item strong ficavam
     branco-no-branco. Resolvido aqui no :root global. */
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a5a;
  --text-muted: #6a6a7a;

  /* Shadows (lighter) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 60px rgba(255,122,5,0.08);
  --shadow-glow-strong: 0 0 80px rgba(255,122,5,0.14);
}

/* ---------- Base ---------- */
body {
  background: #ffffff;
  color: #4a4a5a;
  -webkit-font-smoothing: auto;
}

/* ---------- Section Typography ---------- */
.section-tag {
  background: rgba(255,122,5,0.06);
  border-color: rgba(255,122,5,0.18);
}

.section-title {
  color: #1a1a2e;
}

.section-desc {
  color: #6a6a7a;
}

/* ---------- Buttons ---------- */
.btn-primary {
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255,122,5,0.25);
}

.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(255,122,5,0.35);
}

.btn-outline {
  color: #1a1a2e;
  border-color: rgba(0,0,0,0.15);
}

.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255,122,5,0.04);
}

/* Botao secundario dos planos: outline laranja (antes era rgba(0,0,0,0.03) +
   borda 0.08 -> sumia no card branco / fundo creme). Borda + texto laranja dao
   contraste claro e combinam com o primario solido; no hover vira laranja solido. */
.btn-plan {
  background: rgba(255,122,5,0.07);
  color: var(--orange-dark);
  border-color: var(--orange);
  border-width: 1.5px;
}

.btn-plan:hover {
  color: #ffffff;
}

/* ========================================
   TOPBAR
   ======================================== */
.topbar {
  background: #f4f4f6;
  border-bottom-color: rgba(0,0,0,0.06);
  color: #6a6a7a;
}

.topbar-divider {
  background: #d4d4d8;
}

.topbar-link {
  color: #6a6a7a;
}

/* ========================================
   HEADER
   ======================================== */
.header {
  background: rgba(255,255,255,0.88);
  border-bottom-color: rgba(0,0,0,0.06);
}

/* Header no estado "scrolled" (ao rolar a pagina): no tema dark fica
   quase preto (rgba(10,10,11,.95)). No claro precisa ficar BRANCO,
   senao o logo escuro e o menu somem sobre o fundo preto. */
.header.scrolled {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.logo-master {
  color: #1a1a2e;
}

.nav-link {
  color: #5a5a6a;
}

/* Hover do menu do topo: laranja (padrao da marca, igual ao botao Area do Cliente).
   Cobre tambem .nav-trigger (dropdowns Internet/Aplicativos) e o trigger aberto —
   que antes caiam na regra base do styles.css (var(--text-primary) = claro) e
   sumiam no fundo branco. */
.nav-link:hover,
.nav-trigger:hover,
.nav-item.is-open .nav-trigger {
  color: var(--orange);
  background: rgba(255,122,5,0.08);
}

/* Botao "Area do Cliente": no tema dark e texto branco sobre fundo translucido.
   No claro herdava isso => branco-sobre-branco (invisivel, so aparecia no :hover
   quando vira laranja). Aqui damos contraste no estado de repouso. */
.header-client-btn {
  color: #1a1a2e;
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.15);
}
.header-client-btn span { color: inherit; }
.header-client-btn:hover,
.header-client-btn:hover span {
  color: #ffffff;
}

.mobile-toggle span {
  background: #1a1a2e;
}

/* ========================================
   HERO
   ======================================== */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #fef8f2 50%, #ffffff 100%);
}

.hero-bg-grid {
  background-image:
    linear-gradient(rgba(255,122,5,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,5,0.04) 1px, transparent 1px);
}

.hero-glow {
  background: radial-gradient(circle, rgba(255,122,5,0.05) 0%, transparent 70%);
}

.hero-badge {
  background: rgba(255,122,5,0.06);
  border-color: rgba(255,122,5,0.2);
}

.hero-title {
  color: #1a1a2e;
}

.hero-highlight {
  background: linear-gradient(135deg, var(--orange-dark), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  color: #5a5a6a;
}

.hero-subtitle strong {
  color: #1a1a2e;
}

.hero-trust-item {
  color: #6a6a7a;
}

/* Hero "por páginas" (config.homeHero.usarPaginas): título + tag ficam sobre a
   imagem da página + scrim escuro (.hero-slide-shade) → texto CLARO nos 2 temas.
   No light, var(--white) inverte pra escuro (#1a1a2e), então força branco literal. */
.hero-slide-title {
  color: #fff;
}
.hero-slide-title span {
  color: rgba(255,255,255,0.85);
}
.hero-slide-tag-fire {
  color: #fff;
}

.hero-trust-item strong {
  color: #3a3a44;
}

/* Speed Display */
.speed-track {
  stroke: #e8e8ec;
}

.speed-number {
  color: #1a1a2e;
}

.speed-caption {
  color: #6a6a7a;
}

.hero-scroll {
  color: #a1a1aa;
}

/* ========================================
   PLANS
   ======================================== */
.plans::before {
  background: linear-gradient(90deg, transparent, rgba(255,122,5,0.15), transparent);
}

.plan-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.plan-card:hover {
  border-color: rgba(255,122,5,0.25);
  box-shadow: 0 8px 30px rgba(255,122,5,0.1);
}

.plan-card.plan-featured {
  border-color: var(--orange);
  background: linear-gradient(180deg, rgba(255,122,5,0.04) 0%, #ffffff 40%);
  box-shadow: 0 4px 24px rgba(255,122,5,0.1);
}

.plan-card.plan-featured:hover {
  box-shadow: 0 8px 40px rgba(255,122,5,0.16);
}

.plan-badge {
  color: #ffffff;
}

/* Speed num — overridar o gradiente branco→gray do styles.css:7166
   (com text-fill-color:transparent fica invisivel no fundo claro).
   Aqui: gradiente dark→laranja mantem a vibe "fade pra cor de destaque"
   da versao dark, mas contrasta no branco. */
.plan-speed-num {
  background: linear-gradient(180deg, #1a1a2e 35%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hover ja vem do styles.css:7179 (gradient-brand red→orange→yellow) e
   funciona bem no branco — nao precisa override aqui. */

.plan-speed-unit {
  color: #6a6a7a;
}

/* Linha divisoria (movida do .plan-price pro .plan-apps::before) no tema claro */
.plan-apps::before {
  background: rgba(0,0,0,0.06);
}

.plan-currency {
  color: #6a6a7a;
}

.plan-value {
  color: #1a1a2e;
}

.plan-period {
  color: #6a6a7a;
}

.plan-features li {
  color: #5a5a6a;
}

.plan-featured .btn-plan {
  color: #ffffff;
}

.plan-featured .btn-plan:hover {
  color: #ffffff;
}

/* ========================================
   WHY SECTION
   ======================================== */
.why {
  background: #f8f8fb;
}

.why::before,
.why::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}

.why-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}

.why-card:hover {
  background: #ffffff;
  border-color: rgba(255,122,5,0.2);
  box-shadow: 0 4px 20px rgba(255,122,5,0.06);
}

.why-icon {
  background: rgba(255,122,5,0.07);
  border-color: rgba(255,122,5,0.14);
}

.why-card h3 {
  color: #1a1a2e;
}

.why-card p {
  color: #6a6a7a;
}

/* ========================================
   COVERAGE
   ======================================== */

/* Mapa container — light theme */
.coverage-map-real {
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

.coverage-map-real::after {
  box-shadow: inset 0 0 40px rgba(255,255,255,0.3);
}

/* Leaflet background for light tiles */
.coverage-map-real .leaflet-container {
  background: #f2f2f5;
}

/* Tooltips — fundo branco com texto escuro, legível sobre mapa claro */
.cov-tooltip {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #1a1a2e !important;
  font-family: var(--font-main) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
  letter-spacing: 0 !important;
}

.cov-tooltip::before {
  border-top-color: #ffffff !important;
}

/* Marcador — laranja com borda escura para contraste no mapa claro */
.cov-marker-dot {
  background: var(--orange);
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(255,122,5,0.5), 0 1px 4px rgba(0,0,0,0.2);
}

.cov-marker-pulse {
  border-color: var(--orange);
}

/* Reset button — light style */
.cov-reset-btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--orange);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cov-reset-btn:hover {
  background: rgba(255,122,5,0.08);
  border-color: var(--orange);
}

.neighborhood-tag {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.1);
  color: #3a3a44;
}

.neighborhood-tag:hover {
  background: rgba(255,122,5,0.04);
  border-color: var(--orange);
  color: var(--orange);
}

.neighborhood-tag.neighborhood-new {
  border-color: rgba(255,122,5,0.35);
  background: rgba(255,122,5,0.04);
}

/* ========================================
   TESTIMONIALS
   ======================================== */
.testimonials {
  background: #f8f8fb;
}

.testimonials::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}

.testimonial-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}

.testimonial-card:hover {
  border-color: rgba(255,122,5,0.2);
  box-shadow: 0 4px 16px rgba(255,122,5,0.06);
}

.testimonial-card p {
  color: #4a4a5a;
}

.testimonial-avatar {
  color: #ffffff;
}

.testimonial-author strong {
  color: #1a1a2e;
}

.testimonial-author span {
  color: #6a6a7a;
}

/* ========================================
   FAQ
   ======================================== */
.faq-item {
  border-bottom-color: rgba(0,0,0,0.06);
}

.faq-question {
  color: #1a1a2e;
}

.faq-question i {
  color: #a1a1aa;
}

.faq-answer p {
  color: #5a5a6a;
}

/* ========================================
   FINAL CTA
   ======================================== */
.final-cta-inner {
  background: linear-gradient(180deg, rgba(255,122,5,0.05) 0%, rgba(255,122,5,0.02) 100%);
  border-color: rgba(255,122,5,0.18);
}

.final-cta-glow {
  background: radial-gradient(circle, rgba(255,122,5,0.08) 0%, transparent 70%);
}

.final-cta h2 {
  color: #1a1a2e;
}

.final-cta p {
  color: #5a5a6a;
}

/* ========================================
   FOOTER (kept dark for contrast)
   ======================================== */
.footer {
  background: #111118;
  border-top-color: rgba(255,255,255,0.06);
}

/* Trust strip — fica num bloco BRANCO no light theme (--black → #fff via :root).
   Ajustes: tipografia visivel, sombra do icone mais suave, padding mais tight. */
.footer-trust {
  padding: 28px 0;
  border-bottom-color: rgba(0,0,0,0.06);
}
/* No dark, .footer-trust::before tinha um gradiente laranja sutil que separava
   secoes escuras. No claro vira ruido (laranja-palido quase invisivel sobre
   o branco) — o strip ja se isola naturalmente entre o creme da secao acima
   e o preto solido do footer abaixo. */
.footer-trust::before {
  display: none;
}
.footer-trust-item strong {
  color: #1a1a2e;
}
.footer-trust-item span {
  color: #5a5a6a;
}
.footer-trust-item i {
  box-shadow: 0 4px 12px rgba(255,122,5,0.22);
}

.footer .logo-master {
  color: #fafafa;
}

.footer-brand p {
  color: #8a8a96;
}

.footer-social a {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: #8a8a96;
}

.footer-social a:hover {
  color: #ffffff;
}

.footer-col h4 {
  color: #fafafa;
}

.footer-col a {
  color: #8a8a96;
}

.footer-col p {
  color: #8a8a96;
}

.footer-bottom {
  border-top-color: rgba(255,255,255,0.06);
}

.footer-bottom p {
  color: #5a5a66;
}

/* ========================================
   WHATSAPP FLOAT
   ======================================== */
.whatsapp-float {
  color: #ffffff;
}

/* ========================================
   MOBILE NAV OVERLAY
   ======================================== */
@media (max-width: 768px) {
  .nav {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
  }

  .nav-link {
    color: #3a3a44;
  }

  .nav-link:hover {
    color: var(--orange);
    background: rgba(255,122,5,0.05);
  }
}

/* ========================================
   STATS SECTION
   ======================================== */
.stats {
  background: #f8f8fb;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.stat-number {
  color: #1a1a2e;
}

.stat-label {
  color: #6a6a7a;
}

.stat-divider {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.1), transparent);
}

/* ========================================
   WHATSAPP TOOLTIP
   ======================================== */
.whatsapp-tooltip {
  background: #ffffff;
  color: #1a1a2e;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.whatsapp-tooltip::after {
  border-left-color: #ffffff;
}

/* ========================================
   NAV ACTIVE
   ======================================== */
.nav-link.active {
  color: #1a1a2e;
  background: rgba(255,122,5,0.1);
}

/* ========================================
   TAG ACTIVE (interação mapa)
   ======================================== */
.neighborhood-tag.tag-active {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255,122,5,0.08);
  box-shadow: 0 0 12px rgba(255,122,5,0.15);
}

/* ========================================
   HOME v2 — overrides do tema claro
   (usado pela index-light.html)
   ======================================== */

/* Hero slideshow: o conteudo sao IMAGENS (banner-copa.png / banner-aplicativos.png),
   que devem ser trocadas por versoes CLARAS (ajuste de imagem feito pelo time).
   Aqui clareamos os fundos placeholder (.hero-bg-*) pra fallback claro e pra
   nao vazar dark nas bordas enquanto a imagem carrega. */
.hero-bg-home,
.hero-bg-essencial,
.hero-bg-casa,
.hero-bg-familia,
.hero-bg-ufamilia,
.hero-bg-uhome {
  background-image: linear-gradient(135deg, #fff3e8 0%, #ffffff 65%);
}

/* Glow de fundo (body::before) mais suave no claro */
body::before {
  opacity: 0.5;
}

/* Cobertura: fundo da secao com tom laranja mais presente (creme/pessego),
   destacando o card do mapa (branco) sobre ele. Mantem textos legiveis.
   IMPORTANTE: o gradiente COMECA no #fdfaf6 (mesmo tom dos planos/body) no topo
   e SO depois vira pessego. Sem isso, havia um DEGRAU de cor entre o creme dos
   planos e o pessego da cobertura = a "faixa". Comecando igual, o espaco flui
   pra dentro da cobertura sem emenda. 180deg (vertical) = topo uniforme. */
.coverage {
  background:
    radial-gradient(ellipse at 12% 12%, rgba(255,122,5,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 85%, rgba(255,122,5,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #fdfaf6 0%, #fff1e2 24%, #ffe7d2 100%);
}

/* ═══════════════════════════════════════════
   ACCENT FOGO (--gradient-brand) — fio condutor da marca
   Usado como ACCENT (texto branco por cima), nunca como fundo de texto escuro.
   ═══════════════════════════════════════════ */

/* Etiquetas de secao: viram selos com fogo + texto branco */
.section-tag {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(255,122,5,0.25);
}
.section-tag i { color: #ffffff; }

/* Tags de bairro: hover e ativa com fogo */
.neighborhood-tag:hover,
.neighborhood-tag.tag-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255,122,5,0.3);
}

/* Botoes secundarios (plano): hover com fogo */
.btn-plan:hover {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
}

/* Divisores/detalhes decorativos com o fogo */
.plans::before,
.why::before,
.why::after,
.testimonials::before {
  background: var(--gradient-brand);
  opacity: 0.6;
}

/* CTA banner ("Ainda em duvida?") e um card ESCURO mantido de proposito.
   Os textos de leitura herdavam cor escura do tema claro -> ilegiveis sobre o preto.
   Clareia titulo + paragrafo + label + botao "ligar", preservando o numero em
   gradiente fogo e os avatares. */
.cta-banner-content h3 {
  color: #ffffff;
}
.cta-banner-content p {
  color: rgba(255,255,255,0.82);
}
.cta-banner-content p strong {
  color: #ffffff;
}
.cta-banner-stat span {
  color: rgba(255,255,255,0.55);
}
/* Botao secundario "ligar": ghost branco sobre o preto. No tema claro herdava
   texto navy (--text-primary) + borda quase invisivel (--border-default escuro). */
.cta-banner-call {
  color: #ffffff;
  border-color: rgba(255,255,255,0.18);
}
.cta-banner-call:hover {
  border-color: rgba(255,122,5,0.45);
}

/* Footer (mantido dark): chips de "FORMAS DE PAGAMENTO" tinham texto escuro
   herdado do tema claro -> ilegivel sobre o footer preto. Clareia o texto,
   preservando os icones em laranja. */
.footer .payment-icon {
  color: rgba(255,255,255,0.78);
}
.footer .payment-icon i {
  color: var(--orange);
}
.footer .footer-payment-label {
  color: #9a9aa8;
}

/* ═══════════════════════════════════════════
   PROVA SOCIAL — redesign claro estilo Google (autoridade)
   Cards brancos com sombra + textos escuros. Redefine as variaveis de
   texto/cards no escopo da secao (resolve a maioria de uma vez).
   ═══════════════════════════════════════════ */
.social-proof {
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a5a;
  --text-muted: #8a8a96;
  --gradient-card: linear-gradient(160deg, #ffffff 0%, #fbfbfc 100%);
  --border-default: rgba(0,0,0,0.08);
  --border-subtle: rgba(0,0,0,0.07);
}

/* Cards de depoimento: brancos com sombra suave (estilo Google Reviews) */
.social-proof .sp-card {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.social-proof .sp-card:hover,
.social-proof .sp-card-tilt:hover {
  border-color: rgba(255,122,5,0.4);
  box-shadow: 0 12px 32px rgba(255,122,5,0.12);
}
.social-proof .sp-card-highlight {
  background: linear-gradient(160deg, rgba(255,122,5,0.07) 0%, #ffffff 60%);
  border-color: rgba(255,122,5,0.3);
  box-shadow: 0 4px 20px rgba(255,122,5,0.1);
}

/* Badge "VIA GOOGLE" dentro do card */
.social-proof .sp-card-google {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

/* Card de estatisticas (4.9 / 2.382 / 97% / 6+): claro com leve tom quente */
.social-proof .sp-stats {
  background: linear-gradient(135deg, #fff6ee 0%, #ffffff 100%);
  border: 1px solid rgba(255,122,5,0.14);
  border-radius: var(--radius-lg);
  padding: 38px 24px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.06);
}
.social-proof .sp-stat-label {
  color: #6a6a7a;
}

/* Badge topo "Avaliacoes verificadas no Google" */
.social-proof .sp-google-badge {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.social-proof .sp-google-badge strong { color: #1a1a2e; }

/* Botao "Ver avaliacoes no Google" */
.social-proof .sp-cta-google {
  background: #ffffff;
  color: #1a1a2e;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.social-proof .sp-cta-google:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

/* ── Prova social: fundo laranja FORTE (gradiente fogo) ──
   Cards brancos saltam sobre o fogo; textos diretos em branco. */
.social-proof {
  background: linear-gradient(135deg, #e63946 0%, #ff7a05 55%, #fcc305 100%);
}
.social-proof .sp-title { color: #ffffff; }
.social-proof .sp-title .title-fire {
  background: none;
  -webkit-text-fill-color: #fff2b0;
  color: #fff2b0;
}
.social-proof .sp-subtitle { color: rgba(255,255,255,0.92); }
.social-proof .sp-subtitle strong { color: #ffffff; }
/* badge topo com leve borda pra destacar sobre o laranja */
.social-proof .sp-google-badge { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
/* card de stats branco puro pra saltar sobre o fogo */
.social-proof .sp-stats {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
}

/* Prova social: a secao virou clara (fundo via variaveis), mas o titulo e
   alguns destaques continuavam BRANCOS (feitos pro dark) -> invisiveis.
   O .title-fire mantem o gradiente fogo (text-fill transparente), entao fica laranja. */
.social-proof .sp-title {
  color: #1a1a2e;
}
.social-proof .sp-subtitle strong,
.social-proof .sp-title strong {
  color: #1a1a2e;
}

/* Promo bar (oferta do mes): texto BRANCO sobre o gradiente fogo da melhor
   contraste que o texto escuro herdado do body. */
.promo-bar,
.promo-bar a,
.promo-bar strong,
.promo-bar .promo-bar-text {
  color: #ffffff;
}

/* INDIQUE E GANHE: card é FOGO nos 2 temas (base no styles.css) — sem override
   de tema claro aqui de propósito. Ver bloco .referral* em styles.css. */

/* ═══════════════════════════════════════════
   PALETA QUENTE v2 — "vida" SEM a faixa branca (15/06/2026)
   ───────────────────────────────────────────
   Lição da v1 (revertida em 3ecc1ec): fundo de seção saturado (#f6ecdd) ATRÁS
   dos cards fazia o ESPAÇO VAZIO dos cards (grid stretch → cards curtos viram
   retângulos brancos) saltar como "faixa branca".
   Princípio v2: o calor vem de PROFUNDIDADE (neutros + sombras quentes) e dos
   gradientes que JÁ existem (hero / cobertura / fogo) — NUNCA de chapar creme
   atrás dos cards. As seções de planos ficam num quente quase-branco (= tom do
   body), então o vazio branco do card quase não contrasta = sem faixa.
   ═══════════════════════════════════════════ */

/* Neutros e sombras QUENTES (r>g>b) — calor global sem chapar cor de fundo */
:root {
  --gray-950: #f7f3ec;
  --gray-900: #f0eae1;
  --gray-800: #e6ded2;
  --shadow-sm: 0 1px 3px rgba(70,50,25,0.06);
  --shadow-md: 0 4px 20px rgba(70,50,25,0.08);
  --shadow-lg: 0 8px 40px rgba(70,50,25,0.10);
}

/* Canvas off-white quente (não branco-gelado) — base "com vida" e UNIFORME */
body {
  background: #fdfaf6;
}

/* Hero: creme um tom mais presente no meio do gradiente */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #fdf1e4 50%, #ffffff 100%);
}

/* Cards saltam por SOMBRA QUENTE (profundidade) — é isto que substitui o creme
   saturado atrás deles. Borda quase igual, sombra quente = depth sem faixa. */
.plan-card {
  box-shadow: 0 2px 14px rgba(70,50,25,0.05);
}
.why-card,
.testimonial-card {
  box-shadow: 0 2px 12px rgba(70,50,25,0.06);
}

/* Seções de PLANOS: quente quase-branco = tom do body. Contraste com o card
   branco ~3% → o espaço vazio dos cards NÃO vira faixa. As duas no MESMO tom =
   sem emenda entre planos1 e planos2 (são adjacentes). */
.plans.plans-dark,
.plans.plans-light {
  background: #fdfaf6;
}

/* Seções SEM card-vazio (prova social) podem puxar um creme um tom acima, pra
   dar ritmo. Não renderizam na home atual, mas ficam corretas se entrarem. */
.why,
.testimonials,
.stats {
  background: #f7f2ea;
}

/* FAQ: creme leve = banda de descanso antes do rodapé escuro. Itens são
   acordeões (não cards altos vazios) → sem risco de faixa. */
.faq {
  background: #fdf8f1;
}

/* ═══ FIX VERIFICADO (workflow 6 agentes) — a TIRA BRANCA real ═══
   A faixa NÃO era cor de fundo nem o gradiente da cobertura. Era o pseudo
   .plans-light::after (styles.css:7237): faixa absoluta de 120px no rodapé da
   seção, background linear-gradient(to bottom, #fff, var(--bg-base)). No tema
   claro --black=#fff (styles-light.css:12) → --bg-base=#fff → o gradiente vira
   #fff→#fff = BLOCO SÓLIDO de #fff puro, mais claro que o fundo #fdfaf6 = a
   tira branca. Existia pra fundir os planos com a antiga seção escura
   #nossa-historia (hoje display:none, historia.on=false); sem ela embaixo, a
   cobertura peach encosta no rodapé e expõe o #fff. No tema claro esses fades
   brancos não servem. Matando os 3. Verificado por 2 agentes adversariais:
   elimina a faixa, não quebra stretch/featured/mobile/dark/reveal. */
.plans-light::after,
.plans-light::before,
.plans-dark::after {
  display: none;
}