/* ============================================================
   style-v2-dark.css — Overrides do redesign v2.0 "Energy"
   ============================================================
   Carregado APÓS style.css. Sobrescreve apenas o necessário pro
   tema dark/vibrante funcionar, sem destruir o resto.

   Estratégia: dark mode é o NOVO default da Sancloud, mas o
   style.css original continua intacto pra eventual rollback ou
   pra clientes do Kit que preferem light mode (basta não importar
   este arquivo).

   Seções:
   1) Reset visual pro dark (body, header, footer)
   2) Hero radical
   3) Cards glassmorphism
   4) Botões neon
   5) Seções (alternância)
   6) Tipografia maior
   ============================================================ */


/* ============================================================
   1) RESET BASE PRO DARK MODE
   ============================================================ */

body {
    background: var(--fundo-claro);
    color: var(--texto-corpo);
}

/* Header — fundo dark com blur quando rolar */
.cabecalho {
    background-color: rgba(15, 23, 41, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--borda);
}
.cabecalho.com-sombra {
    background-color: rgba(15, 23, 41, 0.85);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Logo do header — inverte pra branco em dark */
.cabecalho-logo img {
    filter: brightness(0) invert(1);
}

/* Menu — links brancos */
.menu a {
    color: var(--texto-titulo);
}
.menu a:hover {
    color: var(--cor-acento);
}

/* Menu mobile (quando aberto) */
@media (max-width: 768px) {
    .menu {
        background-color: rgba(15, 23, 41, 0.95);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--borda);
    }
}


/* ============================================================
   2) HERO RADICAL v2.0
   ============================================================
   Estrutura nova esperada no HTML:
     <section class="hero hero-v2">
       <canvas class="particulas-canvas" id="particulas-hero"></canvas>
       <div class="container">
         <div class="hero-conteudo">
           <div class="hero-texto">
             <h1>Sua infraestrutura <span class="gradient-text">cloud</span>...</h1>
             ...
           </div>
           <div class="hero-visual">
             <div class="lottie-wrap">
               <dotlottie-player src="/img/lottie/cloud-hero.json"></dotlottie-player>
             </div>
             <div class="hero-mockup glass floating">
               (mini dashboard mockup)
             </div>
           </div>
         </div>
       </div>
     </section>
   ============================================================ */

.hero-v2 {
    background:
        var(--gradient-hero),
        var(--pattern-grid);
    min-height: 92vh;
    padding: var(--espaco-20) 0 var(--espaco-16);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Canvas das partículas fica ATRÁS de tudo no hero */
.hero-v2 .particulas-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

/* Blob ciano grande pulsando (já estava no v1.4, agora mais forte) */
.hero-v2::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -200px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle,
                  rgba(var(--cor-acento-rgb), 0.35) 0%,
                  rgba(var(--cor-acento-rgb), 0.1) 30%,
                  transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: hero-pulso 8s ease-in-out infinite;
    filter: blur(40px);
}
.hero-v2::after {
    content: '';
    position: absolute;
    bottom: -250px;
    left: -150px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
                  rgba(var(--cor-acento-2-rgb), 0.25) 0%,
                  transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: hero-pulso 10s ease-in-out infinite reverse;
    filter: blur(40px);
}

@keyframes hero-pulso {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
    50%      { transform: scale(1.15) translate(-30px, 40px); opacity: 0.8; }
}

/* Container do conteúdo do hero */
.hero-v2 .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Layout 2 colunas em desktop */
.hero-v2 .hero-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espaco-12);
    align-items: center;
}
@media (max-width: 980px) {
    /* v3.11.1 fix: em telas ≤980px o layout empilha (1 coluna), mas o
       .hero-v2 mantinha align-items:center + min-height:92vh. Com o visual
       de 600px + texto ~460px, o total ultrapassava a viewport e o
       align-items:center empurrava o texto pra CIMA (fora da tela).
       Solução: alinhar no topo e liberar altura natural nessa faixa. */
    .hero-v2 {
        align-items: flex-start;
        min-height: auto;
    }
    .hero-v2 .hero-conteudo {
        grid-template-columns: 1fr;
        text-align: center;
    }
    /* Visual não precisa ser gigante quando empilhado — reduz também o
       mockup implícito e evita rolagem gigante entre texto e "número 1". */
    .hero-v2 .hero-visual { max-width: 400px; }
}

/* Lado esquerdo: texto + CTAs */
.hero-v2 .hero-texto {
    position: relative;
    z-index: 2;
}

/* Hero badge dark — v3.9: seletor global (era só .hero-v2 .hero-badge).
   Todas as landing pages agora usam .hero-badge no hero, precisa cobrir
   todas as ocorrências, não só o hero-v2 da home. */
.hero-badge {
    background: rgba(var(--cor-acento-rgb), 0.1);
    border: 1px solid rgba(var(--cor-acento-rgb), 0.3);
    color: var(--texto-titulo);
    margin-bottom: var(--espaco-6);
    box-shadow: 0 0 20px rgba(var(--cor-acento-rgb), 0.2);
}

/* H1 GIGANTE com gradient animado.
   v2.0.1: reduzido o teto de 5.5rem→4.25rem e desativado hyphens/break
   pra "infraestrutura" (15 letras) não quebrar no meio da palavra. */
.hero-v2 h1 {
    font-size: clamp(2.2rem, 5vw, 4.25rem);  /* até 68px desktop */
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--texto-titulo);
    margin-bottom: var(--espaco-6);
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}
.hero-v2 h1 .destaque,
.hero-v2 h1 .gradient-text {
    background: var(--gradient-cta);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 5s ease infinite;
    display: inline-block;
}

/* Subtítulo */
.hero-v2 .hero-subtitulo {
    font-size: var(--fonte-xl);
    color: var(--texto-suave);
    margin-bottom: var(--espaco-8);
    max-width: 540px;
    line-height: 1.5;
}
@media (max-width: 980px) {
    .hero-v2 .hero-subtitulo { max-width: 100%; }
}

/* Botões hero */
.hero-v2 .hero-botoes {
    display: flex;
    gap: var(--espaco-4);
    flex-wrap: wrap;
}
@media (max-width: 980px) {
    .hero-v2 .hero-botoes { justify-content: center; }
}

/* Lado direito: visual (Lottie + mockup) */
.hero-v2 .hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 600px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lottie wrap dentro do hero */
.hero-v2 .hero-visual .lottie-wrap {
    width: 100%;
    max-width: 550px;
    aspect-ratio: 1;
    filter: drop-shadow(0 0 60px rgba(var(--cor-acento-rgb), 0.5));
}

/* Hero mockup (mini dashboard glassmorphism flutuando sobre a Lottie) */
.hero-v2 .hero-mockup {
    position: absolute;
    bottom: 10%;
    right: -5%;
    width: 280px;
    padding: var(--espaco-4);
    background: var(--glass-bg-forte);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-xl);
    z-index: 2;
    animation: floating-anim 6s ease-in-out infinite;
}
.hero-v2 .hero-mockup-titulo {
    font-size: var(--fonte-xs);
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--peso-semibold);
    margin-bottom: var(--espaco-2);
}
.hero-v2 .hero-mockup-valor {
    font-size: var(--fonte-3xl);
    font-weight: var(--peso-extrabold);
    line-height: 1;
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--espaco-3);
}
.hero-v2 .hero-mockup-mini {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-bottom: var(--espaco-2);
}
.hero-v2 .hero-mockup-mini span {
    flex: 1;
    background: linear-gradient(180deg, var(--cor-acento) 0%, transparent 100%);
    border-radius: 2px 2px 0 0;
    animation: bar-grow 1.2s ease-out forwards;
    transform-origin: bottom;
    transform: scaleY(0);
}
.hero-v2 .hero-mockup-mini span:nth-child(1) { height: 30%; animation-delay: 0.1s; }
.hero-v2 .hero-mockup-mini span:nth-child(2) { height: 50%; animation-delay: 0.2s; }
.hero-v2 .hero-mockup-mini span:nth-child(3) { height: 70%; animation-delay: 0.3s; }
.hero-v2 .hero-mockup-mini span:nth-child(4) { height: 45%; animation-delay: 0.4s; }
.hero-v2 .hero-mockup-mini span:nth-child(5) { height: 90%; animation-delay: 0.5s; }
.hero-v2 .hero-mockup-mini span:nth-child(6) { height: 65%; animation-delay: 0.6s; }
.hero-v2 .hero-mockup-mini span:nth-child(7) { height: 80%; animation-delay: 0.7s; }
@keyframes bar-grow {
    to { transform: scaleY(1); }
}
.hero-v2 .hero-mockup-sub {
    font-size: var(--fonte-xs);
    color: var(--sucesso);
    font-weight: var(--peso-semibold);
}
@media (max-width: 980px) {
    .hero-v2 .hero-mockup {
        right: 5%;
        bottom: 5%;
        width: 240px;
    }
}
@media (max-width: 600px) {
    .hero-v2 .hero-visual { max-width: 320px; aspect-ratio: 1; }
    .hero-v2 .hero-mockup { display: none; }  /* esconde em mobile */
}


/* ============================================================
   3) CARDS GLASSMORPHISM PRO RESTO DO SITE
   ============================================================
   .card já existe no style.css — vamos sobrescrever pra ficar dark.
   ============================================================ */

.card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-borda);
    color: var(--texto-corpo);
}
.card:hover {
    border-color: var(--cor-acento);
    box-shadow: var(--glow-acento);
    transform: translateY(-6px);
}
.card h3 {
    color: var(--texto-titulo);
}
.card p {
    color: var(--texto-suave);
}

/* Ícone do card — fundo ciano translúcido */
.card-icone {
    background: rgba(var(--cor-acento-rgb), 0.15);
    color: var(--cor-acento);
    box-shadow: inset 0 0 0 1px rgba(var(--cor-acento-rgb), 0.3);
}


/* ============================================================
   4) BOTÕES NEON
   ============================================================ */

/* Botão primário ganha gradient ciano + glow forte */
.botao-primario {
    background: var(--gradient-cta);
    background-size: 200% 200%;
    border: none;
    box-shadow: var(--glow-acento);
    color: #fff;
    animation: gradient-shift 5s ease infinite;
}
.botao-primario:hover {
    background: var(--gradient-cta);
    background-size: 200% 200%;
    box-shadow: var(--glow-acento-forte);
    transform: translateY(-3px);
    color: #fff;
}

/* Botão acento (ciano sólido) */
.botao-acento {
    background: var(--cor-acento);
    color: var(--cor-primaria-escura);
    box-shadow: 0 0 25px rgba(var(--cor-acento-rgb), 0.4);
}
.botao-acento:hover {
    background: var(--cor-acento-clara);
    color: var(--cor-primaria-escura);
    box-shadow: 0 0 40px rgba(var(--cor-acento-rgb), 0.7);
}

/* Botão contorno */
.botao-contorno {
    background: transparent;
    color: var(--texto-titulo);
    border: 1px solid var(--borda-escura);
}
.botao-contorno:hover {
    background: rgba(var(--cor-acento-rgb), 0.1);
    color: var(--cor-acento);
    border-color: var(--cor-acento);
}

/* Botão branco-contorno (CTA dark) */
.botao-contorno-branco {
    background: transparent;
    color: var(--texto-titulo);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.botao-contorno-branco:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cor-acento);
    border-color: var(--cor-acento);
}


/* ============================================================
   5) SEÇÕES (alternância dark)
   ============================================================ */

.secao {
    color: var(--texto-corpo);
}
.secao-clara {
    background: var(--fundo-suave);
}
/* v3.9: variantes com tint da marca — no dark, usam surface elevada com
   glow ciano sutil pra reforçar identidade sem quebrar a atmosfera escura. */
.secao-sky-suave {
    background: var(--fundo-suave);
    box-shadow: inset 0 0 200px rgba(var(--cor-acento-rgb), 0.05);
}
.secao-navy-suave {
    background: var(--fundo-suave);
}
.secao-escura {
    background: var(--cor-primaria-escura);
}
/* v2.0.1: secao-escura usa var(--branco) pros títulos no style.css,
   mas --branco virou surface escuro no dark → títulos sumiam.
   Força branco real (--branco-puro) e corpo claro legível. */
.secao-escura h1,
.secao-escura h2,
.secao-escura h3,
.secao-escura h4 {
    color: var(--branco-puro) !important;
}
.secao-escura p {
    color: rgba(255, 255, 255, 0.8);
}
.secao-cabecalho .pre-titulo {
    color: var(--cor-acento);
    text-shadow: 0 0 20px rgba(var(--cor-acento-rgb), 0.5);
}
.secao-cabecalho h2 {
    color: var(--texto-titulo);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.03em;
}
.secao-cabecalho p {
    color: var(--texto-suave);
}

/* Destaque inline no texto (cor de acento) */
.destaque {
    color: var(--cor-acento);
}


/* ============================================================
   6) TECH CARDS no grid de tecnologias (dark)
   ============================================================ */

.tech-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-borda);
    backdrop-filter: blur(20px);
}
.tech-card:hover {
    border-color: var(--cor-acento);
    box-shadow: var(--glow-acento);
}
.tech-icon {
    /* No dark, ícones precisam de filter pra clarear (eram pretos no light) */
    filter: brightness(0) invert(1) brightness(0.9);
}
.tech-card:hover .tech-icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(95%)
            saturate(1958%) hue-rotate(168deg) brightness(101%) contrast(91%);
}
.tech-nome {
    color: var(--texto-corpo);
}


/* ============================================================
   7) TABS dark
   ============================================================ */

.tab-botao {
    background: var(--glass-bg);
    color: var(--texto-corpo);
    border-color: var(--glass-borda);
}
.tab-botao:hover {
    border-color: var(--cor-acento);
    color: var(--cor-acento);
}
.tab-botao.ativo {
    background: var(--gradient-cta);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--glow-acento);
}


/* ============================================================
   8) MARQUEE (logos rolando)
   ============================================================ */

.secao-marquee {
    border-bottom: 1px solid var(--borda);
    background: var(--fundo-claro);
}
.marquee-titulo {
    color: var(--texto-suave);
}
.marquee-item {
    color: var(--texto-suave);
}
.marquee-item img {
    /* Ícones brancos com opacidade */
    filter: brightness(0) invert(1) brightness(0.7);
}
.marquee-item:hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(95%)
            saturate(1958%) hue-rotate(168deg) brightness(101%) contrast(91%);
}


/* ============================================================
   9) STATS (Sancloud em números)
   ============================================================ */

.stat-numero {
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ============================================================
   10) CTA card grande
   ============================================================ */

.cta-card-grande {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(var(--cor-acento-rgb), 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(var(--cor-acento-clara-rgb), 0.15) 0%, transparent 50%),
        linear-gradient(135deg, var(--cor-primaria) 0%, var(--fundo-suave) 50%, var(--cor-primaria) 100%);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(var(--cor-acento-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--texto-titulo);
}
.cta-card-grande h2 {
    color: var(--texto-titulo);
}
.cta-card-grande p {
    color: var(--texto-suave);
}


/* ============================================================
   11) FOOTER dark refinado
   ============================================================ */

.rodape {
    background: var(--cor-primaria-escura);
    border-top: 1px solid var(--borda);
}
.rodape-logo {
    filter: brightness(0) invert(1);
}
.rodape-descricao,
.rodape-coluna ul a {
    color: var(--texto-suave);
}
.rodape-coluna ul a:hover {
    color: var(--cor-acento);
}
.rodape-coluna h4 {
    color: var(--texto-titulo);
}
.rodape-newsletter input {
    background: rgba(var(--cor-acento-rgb), 0.05);
    border: 1px solid var(--glass-borda);
    color: var(--texto-titulo);
}
.rodape-newsletter input::placeholder {
    color: var(--texto-claro);
}
.rodape-newsletter input:focus {
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 3px rgba(var(--cor-acento-rgb), 0.15);
}
.rodape-newsletter button {
    background: var(--gradient-cta);
    border: none;
    box-shadow: var(--glow-acento);
}
.rodape-sociais a {
    background: var(--glass-bg);
    color: var(--texto-corpo);
}
.rodape-sociais a:hover {
    background: var(--cor-acento);
    color: var(--cor-primaria-escura);
}
.rodape-badge svg {
    color: var(--cor-acento);
}


/* ============================================================
   12) COOKIE BANNER dark
   ============================================================ */

.cookie-banner {
    background: var(--glass-bg-forte);
    backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid var(--glass-borda);
    color: var(--texto-corpo);
}
.cookie-banner-texto strong {
    color: var(--texto-titulo);
}
.cookie-banner-texto p {
    color: var(--texto-suave);
}


/* ============================================================
   13.5) AJUSTES ESPECIFICOS DO /kit (LP comercial)
   ============================================================
   O kit.html tem cores hardcoded (amarelo claro #FEF3C7 +
   marrom escuro #92400E) usadas pra criar "dor visual" na
   seção "Quanto custa ter 3 sistemas separados". Em dark mode
   essa amarelo claro vira inconsistente. Aqui invertemos pra
   um amarelo escuro com warning vermelho.
   ============================================================ */

/* Seção "dor" — fundo escuro com tons de warning sutis */
.secao-dor {
    background: linear-gradient(180deg,
                  rgba(146, 64, 14, 0.15) 0%,
                  rgba(146, 64, 14, 0.05) 100%) !important;
    border-top: 1px solid rgba(251, 191, 36, 0.3) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.3) !important;
}
.secao-dor h2 {
    color: #FBBF24 !important;  /* amarelo vibrante visível no dark */
}
.secao-dor .pre-titulo {
    color: #FBBF24 !important;
}

/* Preços velhos (riscados) e nomes — mais visíveis no dark */
.dor-item .preco-velho {
    color: #FBBF24 !important;
}
.dor-item .nome {
    color: var(--texto-corpo) !important;
}
.dor-total .valor {
    color: #FBBF24 !important;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}
.dor-total {
    border-top-color: rgba(251, 191, 36, 0.4) !important;
}

/* Plano cards — já viram glassmorphism via override genérico,
   mas a borda do destaque continua amarela */
.plano-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-borda) !important;
    color: var(--texto-corpo);
}
.plano-card h3, .plano-card .nome {
    color: var(--texto-titulo) !important;
}

/* Hero do kit (kit-hero) mantém gradient próprio mas ajusta legibilidade */
.kit-hero {
    color: var(--branco-puro, #fff) !important;
}


/* ============================================================
   13.6) CALCULADORA (cloud + orcamento) no dark
   ============================================================
   v2.0.1: .calc-preco-display usa var(--branco) no calculadora.css,
   que virou escuro no dark → valor "R$ 579,00" ficava invisível.
   Daniel pediu "azul ou branco". Escolhi branco puro com glow ciano
   sutil — máxima legibilidade no card escuro. */
.calc-preco-display {
    color: var(--branco-puro) !important;
    text-shadow: 0 0 30px rgba(var(--cor-acento-rgb), 0.4);
}
.calc-preco-label {
    color: var(--texto-suave);
}
/* Card/resumo da calculadora vira glassmorphism */
.calc-card,
.calc-resumo,
.calc-controles {
    background: var(--glass-bg);
    border: 1px solid var(--glass-borda);
    backdrop-filter: blur(20px);
    color: var(--texto-corpo);
}
/* Slider track + valores embaixo */
.calc-item-valor {
    color: var(--cor-acento) !important;
}
.calc-escala span,
.calc-extra-preco {
    color: var(--texto-suave);
}
/* Plano selecionado (lado direito) — garante legibilidade */
.calc-resumo .calc-plano-nome,
.calc-plano-selecionado {
    color: var(--texto-titulo);
}


/* ============================================================
   13.7) PLANOS (desenvolvimento + kit) no dark
   ============================================================
   .plano-preco-valor usa var(--cor-primaria) no style.css → no dark
   ficava navy escuro invisível. Força branco com glow ciano. */
.plano-preco-valor {
    color: var(--branco-puro) !important;
    text-shadow: 0 0 30px rgba(var(--cor-acento-rgb), 0.4);
}
.plano-preco-periodo {
    color: var(--texto-suave);
}
.plano-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-borda) !important;
}
.plano-card:hover {
    border-color: var(--cor-acento) !important;
    box-shadow: var(--glow-acento) !important;
}
.plano-card h3 {
    color: var(--texto-titulo);
}
.plano-card-descricao,
.plano-preco-setup {
    color: var(--texto-suave);
}
.plano-preco-setup strong,
.plano-preco-obs {
    color: var(--texto-corpo);
}
.plano-features li {
    color: var(--texto-corpo);
}


/* ============================================================
   13.8) KIT CALLOUT (chamada cruzada no /desenvolvimento)
   ============================================================
   Bloco que estava com gradient claro hardcoded (#F0F9FF→#DBEAFE).
   Agora glassmorphism escuro coerente com o resto. */
.kit-callout {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(var(--cor-acento-rgb), 0.12) 0%, transparent 60%),
        var(--glass-bg-forte);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-10);
    text-align: center;
    box-shadow: var(--sombra-lg);
}
.kit-callout h2 {
    color: var(--texto-titulo);
}
.kit-callout p {
    color: var(--texto-suave);
}
.kit-callout strong {
    color: var(--texto-titulo) !important;
}


/* ============================================================
   13.9) KIT — tabela comparativa + FAQ + seção dor (dark)
   ============================================================
   O kit.html tinha background:white hardcoded (já trocado p/ var(--branco)
   via sed). Aqui reforçamos legibilidade dos textos no dark. */

/* Tabela comparativa */
.comparativo {
    box-shadow: var(--sombra-lg) !important;
}
.comparativo td {
    color: var(--texto-corpo);
}
.comparativo td:first-child {
    color: var(--texto-titulo) !important;
}
.comparativo .nao {
    color: var(--texto-claro) !important;
}
.comparativo tr:hover td {
    background: rgba(var(--cor-acento-rgb), 0.04);
}

/* FAQ */
.faq-item summary {
    color: var(--texto-titulo) !important;
}
.faq-item .faq-resposta {
    color: var(--texto-corpo) !important;
}
.faq-item:hover {
    border-color: var(--cor-acento);
}

/* Seção dor — subtexto "em 3 boletos..." */
.dor-total p {
    color: var(--texto-suave) !important;
}


/* ============================================================
   13.10) PARCERIA — overrides dark
   ============================================================
   .passo-card h3 e .perfil-card herdam cores que somem no dark. */
.passo-card h3 {
    color: var(--texto-titulo) !important;
}
.passo-card p,
.perfil-card p {
    color: var(--texto-suave);
}
.perfil-card h3 {
    color: var(--texto-titulo);
}
.perfil-card:hover,
.passo-card:hover {
    border-color: var(--cor-acento);
    box-shadow: var(--glow-acento);
}
.perfil-card .icone {
    color: var(--cor-acento);
}
/* Badge de preço do hero parceria — já é dark gradient, garante legibilidade */
.parceria-hero-precos {
    border: 1px solid rgba(255, 255, 255, 0.15);
}


/* ============================================================
   13.11) CASE DESTAQUE (/cases → card do Pigma)
   ============================================================ */
.case-destaque:hover {
    border-color: var(--cor-acento) !important;
    box-shadow: var(--glow-acento);
    transform: translateY(-4px);
}
.case-tag {
    display: inline-block;
    padding: var(--espaco-2) var(--espaco-4);
    background: rgba(var(--cor-acento-rgb), 0.1);
    border: 1px solid rgba(var(--cor-acento-rgb), 0.25);
    border-radius: var(--raio-pill);
    font-size: var(--fonte-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-acento);
}
@media (max-width: 768px) {
    .case-destaque { grid-template-columns: 1fr !important; }
}


/* ============================================================
   13) Formulários dark
   ============================================================ */

.form-input,
.form-textarea,
.form-select {
    background: var(--glass-bg);
    border-color: var(--glass-borda);
    color: var(--texto-titulo);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--cor-acento);
    background: rgba(var(--cor-acento-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--cor-acento-rgb), 0.15);
}
.form-grupo label {
    color: var(--texto-titulo);
}