/* ============================================================
   tema-base.css — Design System Sancloud (compartilhado)
   ============================================================
   Este arquivo é a FUNDAÇÃO visual de TODOS os projetos do Kit
   (site, CRM, Financeiro) e dos kits revendidos pra outros clientes.

   ⚠️ NÃO mexer aqui pra customizar identidade do cliente.
      Customizações vão no arquivo `tema-cliente-XYZ.css`,
      que define apenas as variáveis sensíveis à marca:
        --cor-primaria, --cor-acento, --fonte-principal, --url-logo

   O que tem aqui:
     1) Tokens FIXOS (sombras, raios, espaços, easings, transições)
     2) Padrões e gradientes (calculados a partir das variáveis de cliente)
     3) Animações reutilizáveis
     4) Componentes universais (.aurora, .blob, .marquee, .scroll-progress,
        .stat-numero, .tilt, .tab-botao, .depoimento, .cta-card-grande)
     5) Helpers de acessibilidade (prefers-reduced-motion, focus-visible)

   Ordem de import (em todo HTML/EJS):
     <link rel="stylesheet" href="/sancloud-tema/tema-base.css">
     <link rel="stylesheet" href="/sancloud-tema/tema-cliente-XYZ.css">
     <link rel="stylesheet" href="css/style.css">      ← do projeto

   Versão: v1.0.0 (extraído do sancloud-site v1.4.0)
   ============================================================ */


/* ============================================================
   1) TOKENS FIXOS
   ============================================================ */
:root {

    /* ---- ESPAÇAMENTOS (escala em rem) ---- */
    --espaco-1: 0.25rem;
    --espaco-2: 0.5rem;
    --espaco-3: 0.75rem;
    --espaco-4: 1rem;
    --espaco-5: 1.25rem;
    --espaco-6: 1.5rem;
    --espaco-8: 2rem;
    --espaco-10: 2.5rem;
    --espaco-12: 3rem;
    --espaco-16: 4rem;
    --espaco-20: 5rem;
    --espaco-24: 6rem;

    /* ---- TIPOGRAFIA (escala harmônica) ---- */
    --fonte-xs: 0.75rem;
    --fonte-sm: 0.875rem;
    --fonte-base: 1rem;
    --fonte-lg: 1.125rem;
    --fonte-xl: 1.25rem;
    --fonte-2xl: 1.5rem;
    --fonte-3xl: 1.875rem;
    --fonte-4xl: 2.25rem;
    --fonte-5xl: 3rem;
    --fonte-6xl: 3.75rem;

    /* ---- PESOS DA FONTE ---- */
    --peso-regular: 400;
    --peso-medio: 500;
    --peso-semibold: 600;
    --peso-bold: 700;
    --peso-extrabold: 800;

    /* ---- BORDAS / RAIOS ---- */
    --raio-sm: 4px;
    --raio-md: 8px;
    --raio-lg: 12px;
    --raio-xl: 16px;
    --raio-2xl: 24px;
    --raio-pill: 9999px;
    /* Aliases curtos (usados no CRM/Financeiro) */
    --raio: var(--raio-md);

    /* ---- CORES NEUTRAS (não mudam por cliente — são parte da paleta de fundo) ---- */
    --branco: #FFFFFF;
    /* --branco-puro: branco REAL que NUNCA é invertido, nem no dark mode.
       Use pra texto/ícone que precisa ser branco sobre fundo colorido
       (botões com gradient, títulos em seção escura, valores em card escuro).
       O --branco normal pode virar surface escuro no dark — use com cuidado. */
    --branco-puro: #FFFFFF;
    --fundo-claro: #F8FAFC;
    --fundo-suave: #F1F5F9;
    --fundo: var(--fundo-suave);          /* alias usado no CRM */
    --borda: #E2E8F0;
    --borda-escura: #CBD5E1;

    /* ---- CORES DE TEXTO ---- */
    --texto-titulo: #0F172A;
    --texto-corpo: #334155;
    --texto-suave: #64748B;
    --texto-claro: #94A3B8;

    /* ---- CORES DE STATUS (semânticas — fixas por convenção) ---- */
    --sucesso: #10B981;
    --erro: #EF4444;
    --aviso: #F59E0B;
    --info: #3B82F6;
    --whatsapp: #25D366;
    --whatsapp-escuro: #1EBE5D;

    /* ---- SOMBRAS ----
       A sombra com brilho da marca (--sombra-2xl) usa --cor-primaria-rgb,
       que precisa ser definida no tema-cliente como tripla RGB sem rgb() —
       ex: --cor-primaria-rgb: 0, 33, 71; */
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sombra-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    --sombra-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --sombra-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --sombra-2xl: 0 25px 50px rgba(var(--cor-primaria-rgb, 0, 33, 71), 0.15);

    /* ---- TRANSIÇÕES ---- */
    --transicao-rapida: 150ms ease;
    --transicao-media: 250ms ease;
    --transicao-lenta: 400ms ease;

    /* ---- EASINGS expressivos (curvas com "alma") ---- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

    /* ---- LAYOUT ---- */
    --container-max: 1216px;
    --gutter-desktop: 48px;
    --gutter-mobile: 24px;
    --altura-header: 72px;
}


/* ============================================================
   2) GRADIENTES E PADRÕES
   ============================================================
   Compostos a partir de --cor-primaria, --cor-primaria-clara e
   --cor-acento (definidas no tema-cliente). Trocando essas 3
   variáveis, todos os gradientes recalculam automaticamente.

   --cor-primaria-rgb / --cor-acento-rgb / --cor-acento-clara-rgb
   são as MESMAS cores em formato "r, g, b" (sem rgb()), pra que
   possamos usar dentro de rgba() pra construir transparências.
   O tema-cliente precisa definir as 3 variáveis-rgb.
   ============================================================ */
:root {
    /* Hero: aurora ciano + base branca → cinza suave */
    --gradient-hero: radial-gradient(ellipse 80% 60% at 15% 0%,
                       rgba(var(--cor-acento-rgb, 14, 165, 233), 0.18) 0%,
                       transparent 60%),
                     radial-gradient(ellipse 60% 50% at 90% 100%,
                       rgba(var(--cor-acento-clara-rgb, 56, 189, 248), 0.15) 0%,
                       transparent 60%),
                     linear-gradient(180deg, var(--branco) 0%, var(--fundo-claro) 100%);

    /* Aurora difusa pra fundos de seção */
    --gradient-aurora: radial-gradient(circle at 20% 20%,
                        rgba(var(--cor-acento-rgb, 14, 165, 233), 0.25) 0%,
                        transparent 50%),
                      radial-gradient(circle at 80% 80%,
                        rgba(var(--cor-acento-clara-rgb, 56, 189, 248), 0.20) 0%,
                        transparent 50%),
                      radial-gradient(circle at 50% 50%,
                        rgba(var(--cor-primaria-rgb, 0, 33, 71), 0.10) 0%,
                        transparent 60%);

    /* CTA card: navy → ciano (diagonal) */
    --gradient-cta: linear-gradient(135deg,
                      var(--cor-primaria) 0%,
                      var(--cor-primaria-clara) 50%,
                      var(--cor-acento) 100%);

    /* Da marca (botões coloridos, badges) */
    --gradient-marca: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-acento) 100%);

    /* Padrão de grid sutil pra fundos (linhas a 4% opacidade).
       Como o SVG tem a cor hardcoded, mantemos preto+opacidade — funciona
       bem em qualquer paleta. Se quiser pintar de --cor-primaria-rgb,
       pode sobrescrever no tema-cliente. */
    --pattern-grid: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%23000000' stroke-opacity='0.04' fill='none'/%3E%3C/svg%3E");

    /* Glows (sombras coloridas em destaques) */
    --glow-acento: 0 0 40px rgba(var(--cor-acento-rgb, 14, 165, 233), 0.25);
    --glow-acento-forte: 0 0 60px rgba(var(--cor-acento-rgb, 14, 165, 233), 0.45);
    --glow-primario: 0 0 50px rgba(var(--cor-primaria-rgb, 0, 33, 71), 0.35);
}


/* ============================================================
   3) ACESSIBILIDADE — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   4) ANIMAÇÕES UNIVERSAIS
   ============================================================ */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animar-entrada { animation: fade-in-up 0.6s ease-out; }

/* Drift suave pra blobs decorativos (usado em hero, CTA, headers de dashboard) */
@keyframes blob-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes blob-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.05); }
}

/* Badge pulso (ponto verde, indicador de "ativo" / "online") */
@keyframes badge-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.2); }
}


/* ============================================================
   5) COMPONENTES UNIVERSAIS — Aurora background pra qualquer seção
   ============================================================
   Aplique .aurora-bg em qualquer elemento (section, header, card)
   pra ter blobs animados + grid pattern sutil.
   ============================================================ */
.aurora-bg {
    position: relative;
    overflow: hidden;
    background:
        var(--gradient-hero),
        var(--pattern-grid);
    isolation: isolate;
}
.aurora-bg > .container,
.aurora-bg > * {
    position: relative;
    z-index: 1;
}

/* Blobs decorativos (use .blob.blob-1, .blob.blob-2 etc).
   Pra inserir, basta colocar <span class="blob blob-1"></span>
   como filho do .aurora-bg. */
.blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.blob-1 {
    top: -250px;
    right: -150px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle,
                  rgba(var(--cor-acento-rgb, 14, 165, 233), 0.22) 0%,
                  transparent 65%);
    animation: blob-drift-1 18s ease-in-out infinite;
}
.blob-2 {
    bottom: -200px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,
                  rgba(var(--cor-primaria-rgb, 0, 33, 71), 0.14) 0%,
                  transparent 70%);
    animation: blob-drift-2 22s ease-in-out infinite;
}


/* ============================================================
   6) SCROLL PROGRESS BAR
   ============================================================
   Use em qualquer elemento (.cabecalho, .topbar) que tenha
   --scroll-progress atualizado via JS.
   Aplicação:
     .cabecalho { position: sticky; }
     .cabecalho::after { (estilos abaixo) }
   ============================================================ */
.scroll-progress-bar {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: var(--scroll-progress, 0%);
    height: 2px;
    background: linear-gradient(90deg, var(--cor-acento), var(--cor-acento-clara));
    box-shadow: 0 0 8px rgba(var(--cor-acento-rgb, 14, 165, 233), 0.5);
    transition: width 0.1s linear;
    z-index: 101;
}


/* ============================================================
   7) BADGE PULSANTE (indicador de status / "online")
   ============================================================ */
.badge-pulso {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sucesso);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: badge-pulso 2s ease-in-out infinite;
    display: inline-block;
}


/* ============================================================
   8) NÚMERO ANIMADO (counter de KPI)
   ============================================================
   <div class="stat-numero" data-counter="100">100</div>
   <div class="stat-label">Suporte em português</div>
   O JS dispara count-up quando entra na viewport.
   ============================================================ */
.stat-numero {
    font-size: clamp(var(--fonte-4xl), 6vw, var(--fonte-6xl));
    font-weight: var(--peso-extrabold);
    color: var(--cor-acento);
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--cor-acento) 0%, var(--cor-acento-clara) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.stat-label {
    color: var(--texto-suave);
    font-size: var(--fonte-base);
    margin-top: var(--espaco-2);
    font-weight: var(--peso-medio);
}


/* ============================================================
   9) SCROLL ANIMAR (reveal escalonado)
   ============================================================
   Elementos com .scroll-animar começam invisíveis quando JS roda
   e revelam-se ao entrar na viewport, com stagger automático
   alimentado por --stagger (definido no JS).
   ============================================================ */
.scroll-animar {
    transition: opacity 0.7s var(--ease-out-expo),
                transform 0.7s var(--ease-out-expo);
    transition-delay: var(--stagger, 0ms);
}
html.js-on .scroll-animar {
    opacity: 0;
    transform: translateY(30px);
}
html.js-on .scroll-animar.visivel {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   10) TILT 3D
   ============================================================
   <div class="card" data-tilt>...</div>
   JS calcula --tilt-x / --tilt-y baseado no mouse.
   ============================================================ */
[data-tilt] {
    transform-style: preserve-3d;
    transform: perspective(900px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg))
               translateZ(0);
    transition: transform 0.4s var(--ease-out-quart);
    will-change: transform;
    position: relative;
    overflow: hidden;
}
[data-tilt]:hover {
    transition: transform 0.1s ease-out;
}
[data-tilt]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
                  rgba(var(--cor-acento-rgb, 14, 165, 233), 0.12) 0%,
                  transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
[data-tilt]:hover::after {
    opacity: 1;
}


/* ============================================================
   11) MARQUEE INFINITO
   ============================================================ */
.marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(90deg,
                  transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
    display: flex;
    gap: var(--espaco-12);
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    align-items: center;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    color: var(--texto-suave);
    font-size: var(--fonte-base);
    font-weight: var(--peso-medio);
    opacity: 0.7;
    transition: opacity var(--transicao-rapida);
}
.marquee-item:hover {
    opacity: 1;
    color: var(--cor-acento);
}
.marquee-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(456%)
            hue-rotate(182deg) brightness(95%) contrast(86%);
    transition: filter var(--transicao-rapida);
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ============================================================
   12) TABS DE CATEGORIA (pills)
   ============================================================ */
.tabs {
    display: flex;
    gap: var(--espaco-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--espaco-8);
}
.tab-botao {
    padding: var(--espaco-2) var(--espaco-5);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pill);
    font-family: inherit;
    font-size: var(--fonte-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-corpo);
    cursor: pointer;
    transition: all var(--transicao-rapida);
}
.tab-botao:hover {
    border-color: var(--cor-acento);
    color: var(--cor-acento);
}
.tab-botao.ativo {
    background: var(--cor-primaria);
    color: var(--branco);
    border-color: var(--cor-primaria);
}
.tab-painel {
    display: none;
}
.tab-painel.ativo {
    display: block;
    animation: tab-aparecer 0.4s var(--ease-out-quart);
}
@keyframes tab-aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   13) DEPOIMENTO
   ============================================================ */
.depoimento {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-8);
    position: relative;
}
.depoimento::before {
    content: '“';
    position: absolute;
    top: var(--espaco-2);
    left: var(--espaco-5);
    font-size: 80px;
    line-height: 1;
    color: var(--cor-acento);
    opacity: 0.3;
    font-family: Georgia, serif;
}
.depoimento-texto {
    font-size: var(--fonte-lg);
    line-height: 1.6;
    color: var(--texto-titulo);
    margin-bottom: var(--espaco-6);
    position: relative;
    z-index: 1;
}
.depoimento-autor {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
}
.depoimento-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--branco);
    font-weight: var(--peso-bold);
    font-size: var(--fonte-lg);
}
.depoimento-nome {
    font-weight: var(--peso-semibold);
    color: var(--texto-titulo);
    font-size: var(--fonte-base);
}
.depoimento-cargo {
    color: var(--texto-suave);
    font-size: var(--fonte-sm);
}


/* ============================================================
   14) CTA CARD GRANDE
   ============================================================ */
.cta-card-grande {
    background: var(--gradient-cta);
    border-radius: var(--raio-2xl);
    padding: var(--espaco-16) var(--espaco-12);
    text-align: center;
    color: var(--branco);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(var(--cor-primaria-rgb, 0, 33, 71), 0.25);
}
.cta-card-grande::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    pointer-events: none;
    opacity: 0.5;
}
.cta-card-grande::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle,
                  rgba(var(--cor-acento-rgb, 14, 165, 233), 0.4) 0%,
                  transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    animation: blob-drift-1 18s ease-in-out infinite;
}
.cta-card-grande > * {
    position: relative;
    z-index: 1;
}
.cta-card-grande h2 {
    color: var(--branco);
    font-size: clamp(var(--fonte-3xl), 4vw, var(--fonte-5xl));
    margin-bottom: var(--espaco-4);
}
.cta-card-grande p {
    font-size: var(--fonte-lg);
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto var(--espaco-8);
}
@media (max-width: 768px) {
    .cta-card-grande {
        padding: var(--espaco-10) var(--espaco-6);
        border-radius: var(--raio-xl);
    }
}


/* ============================================================
   15) HERO BADGE (pílula com indicador)
   ============================================================ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-4);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pill);
    font-size: var(--fonte-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-corpo);
    box-shadow: var(--sombra-sm);
}


/* ============================================================
   ===========  v2.0 ENERGY — Componentes Dark  =============
   ============================================================
   Componentes específicos do redesign v2.0 ("Energy").
   Funcionam em qualquer tema (light ou dark) — mas brilham
   especialmente em dark mode com glow neon.
   ============================================================ */


/* ============================================================
   TOGGLE TEMA (sol/lua) — universal pra light+dark
   ============================================================
   Botão pra alternar entre modo claro e escuro. O ícone alterna:
   - Modo light → mostra LUA (clique vai pra dark)
   - Modo dark  → mostra SOL (clique vai pra light)
   JS em /js/tema-toggle.js. Atalho de teclado: T
   ============================================================ */
.tema-toggle {
    background: transparent;
    border: 1px solid var(--borda-escura);
    border-radius: var(--raio-md);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--texto-titulo);
    transition: all var(--transicao-rapida);
    padding: 0;
    flex-shrink: 0;
}
.tema-toggle:hover {
    border-color: var(--cor-acento);
    color: var(--cor-acento);
    box-shadow: 0 0 16px rgba(var(--cor-acento-rgb, 14, 165, 233), 0.3);
    transform: translateY(-1px);
}
.tema-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease-spring);
}
.tema-toggle:hover svg {
    transform: rotate(15deg);
}
/* Visibilidade dos ícones — só um aparece por vez */
.tema-toggle .icon-sol { display: none; }
.tema-toggle .icon-lua { display: block; }
html[data-modo="dark"] .tema-toggle .icon-sol { display: block; }
html[data-modo="dark"] .tema-toggle .icon-lua { display: none; }


/* ============================================================
   GLASSMORPHISM CARD
   ============================================================
   Card com fundo de vidro fosco escuro, borda luminosa, glow
   sutil no hover. Usado pra cards premium em fundo escuro.
   Em fundo claro, vira variante leve (borda + sombra suave).

   <div class="card glass">...</div>
   ou
   <div class="glass-card">...</div>
   ============================================================ */
.glass,
.glass-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.7));
    backdrop-filter: var(--glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--glass-blur, blur(20px));
    border: 1px solid var(--glass-borda, var(--borda));
    border-radius: var(--raio-xl);
    transition: all var(--transicao-media);
    position: relative;
}
.glass:hover,
.glass-card:hover {
    border-color: var(--glass-borda-hover, var(--cor-acento));
    box-shadow: var(--glow-acento);
    transform: translateY(-4px);
}


/* ============================================================
   NEON BUTTON — botão com glow forte
   ============================================================
   Adicione .botao-neon a qualquer botão pra ele ganhar:
   - Gradient ciano→roxo
   - Glow neon
   - Pulso sutil no hover
   ============================================================ */
.botao-neon {
    background: var(--gradient-cta) !important;
    background-size: 200% 200% !important;
    border: none !important;
    color: var(--branco-puro, #ffffff) !important;
    box-shadow: var(--glow-acento);
    animation: gradient-shift 4s ease infinite;
    position: relative;
    overflow: hidden;
}
.botao-neon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out-expo);
}
.botao-neon:hover {
    box-shadow: var(--glow-acento-forte);
    transform: translateY(-3px);
}
.botao-neon:hover::before {
    transform: translateX(100%);
}
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}


/* ============================================================
   GRADIENT TEXT — texto com gradient animado
   ============================================================
   <h1>Texto <span class="gradient-text">animado</span></h1>
   ============================================================ */
.gradient-text {
    background: var(--gradient-cta, var(--gradient-marca));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradient-shift 5s ease infinite;
    display: inline-block;
}


/* ============================================================
   FLOATING CARD — mockup flutuando sutilmente
   ============================================================
   Use em mockups de dashboard, dispositivo, screenshot.
   Animação de "respiração" vertical (8s) + glow embaixo.
   ============================================================ */
.floating {
    animation: floating-anim 8s ease-in-out infinite;
}
.floating-sombra {
    position: relative;
}
.floating-sombra::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 10%;
    right: 10%;
    height: 30px;
    background: radial-gradient(ellipse at center,
                  rgba(var(--cor-acento-rgb, 14, 165, 233), 0.3) 0%,
                  transparent 70%);
    filter: blur(20px);
    animation: floating-shadow 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes floating-anim {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}
@keyframes floating-shadow {
    0%, 100% { opacity: 0.5; transform: scaleX(1); }
    50%      { opacity: 0.3; transform: scaleX(0.9); }
}


/* ============================================================
   PARTÍCULAS BACKGROUND (canvas) — placeholder
   ============================================================
   O canvas é criado e populado via JS (tema-particulas.js).
   Aqui só posicionamos atrás do conteúdo do hero.
   ============================================================ */
.particulas-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}
.particulas-canvas + * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   LOTTIE WRAPPER — invólucro pra animações Lottie
   ============================================================
   Usado pra inserir dotlottie-player com tamanho responsivo.
   <div class="lottie-wrap">
     <dotlottie-player src="..." autoplay loop></dotlottie-player>
   </div>
   ============================================================ */
.lottie-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lottie-wrap dotlottie-player,
.lottie-wrap lottie-player {
    width: 100%;
    height: 100%;
}
/* Glow embaixo da Lottie (efeito "halo" colorido) */
.lottie-wrap::before {
    content: '';
    position: absolute;
    inset: 10%;
    background: radial-gradient(circle,
                  rgba(var(--cor-acento-rgb, 14, 165, 233), 0.3) 0%,
                  transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
    animation: lottie-halo 6s ease-in-out infinite;
}
@keyframes lottie-halo {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.1); }
}


/* ============================================================
   STAT NUMERO BIG — versão XXL pro novo hero
   ============================================================ */
.stat-numero-big {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: var(--peso-extrabold);
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


/* ============================================================
   SECTION DIVIDER — linha luminosa entre seções no dark
   ============================================================ */
.divisor-luminoso {
    height: 1px;
    background: linear-gradient(90deg,
                  transparent 0%,
                  rgba(var(--cor-acento-rgb, 14, 165, 233), 0.6) 50%,
                  transparent 100%);
    border: none;
    margin: var(--espaco-16) 0;
}


/* ============================================================
   FIM tema-base.css
   ============================================================ */
/* ============================================================
   tema-cliente-sancloud.css — Identidade da Sancloud
   ============================================================
   Este é o arquivo de identidade visual da Sancloud, importado
   APÓS o tema-base.css e ANTES do CSS do projeto.

   Pra criar tema pra um novo cliente, copie esse arquivo como
   tema-cliente-<nome-do-cliente>.css e mude os valores das
   variáveis abaixo. NÃO altere a estrutura.

   Variáveis cruciais:
   - --cor-primaria: cor base da marca (sidebar, botões primários)
   - --cor-acento: cor de destaque (links, badges, glows, aurora)
   - --cor-primaria-rgb / --cor-acento-rgb / --cor-acento-clara-rgb
     mesma cor em formato "r, g, b" pra usar em rgba()
   - --fonte-principal: família de fontes do projeto
   - --url-logo: caminho público pro logo do cliente

   Versão: v1.0.0
   ============================================================ */

:root {

    /* ============================================================
       PALETA DA MARCA
       ============================================================ */

    /* Cor principal — Oxford Navy #002147 */
    --cor-primaria: #002147;
    --cor-primaria-escura: #001530;      /* hover de botão primário */
    --cor-primaria-clara: #0A3A6E;       /* variante de gradient */
    --cor-primaria-rgb: 0, 33, 71;       /* USADO EM rgba() — não esquecer */

    /* Cor de acento — Sky Blue #0EA5E9 (referência ao "cloud") */
    --cor-acento: #0EA5E9;
    --cor-acento-escura: #0284C7;
    --cor-acento-clara: #38BDF8;
    --cor-acento-rgb: 14, 165, 233;      /* USADO EM rgba() */
    --cor-acento-clara-rgb: 56, 189, 248;


    /* ============================================================
       TIPOGRAFIA
       ============================================================ */

    /* Inter — fonte oficial, importada via Google Fonts pelo projeto */
    --fonte-principal: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-titulo: var(--fonte-principal);


    /* ============================================================
       ASSETS DA MARCA
       ============================================================ */

    /* Caminho público pro logo (cada projeto resolve à sua maneira;
       no site é /img/logo.png, no CRM e Financeiro é /img/logo.png também).
       Pode ser usado como background-image em containers genéricos. */
    --url-logo: url('img/logo.png');


    /* ============================================================
       NOME EXIBIDO (usado em tooltips, alt-text, footer, schema.org)
       ============================================================ */
    --nome-marca: 'Sancloud';
}
/* ============================================================
   reset.css - Normalização de estilos entre navegadores
   ============================================================
   Cada navegador (Chrome, Firefox, Safari, Edge) aplica estilos
   padrão diferentes. Este arquivo "zera" tudo pra começarmos
   do mesmo ponto em todos os navegadores.

   Baseado no "Modern CSS Reset" do Andy Bell, com adaptações.
   ============================================================ */


/* Aplica box-sizing border-box em TUDO.
   Isso faz com que padding e border NÃO somem ao tamanho do elemento.
   Ex: um div de 100px com 10px de padding continua tendo 100px
   (em vez dos 120px que seria o padrão). Facilita muito o layout. */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Remove margens e paddings padrão de TODOS os elementos.
   Cada navegador adiciona margens diferentes em h1, p, ul, etc.
   Zerar tudo nos dá controle total. */
* {
    margin: 0;
    padding: 0;
}


/* Configurações do HTML/Body */
html {
    /* Faz com que rolagem por links âncora (#secao) seja suave */
    scroll-behavior: smooth;

    /* Define 1rem = 16px (padrão), facilita cálculos */
    font-size: 16px;

    /* Anti-aliasing para fontes mais nítidas no Mac */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Quebra de linha mais inteligente em parágrafos */
    text-rendering: optimizeLegibility;
}

body {
    /* Altura mínima de 100% da tela visível */
    min-height: 100vh;

    /* Altura de linha confortável pra leitura */
    line-height: 1.6;

    /* Fonte padrão (será sobrescrita no style.css) */
    font-family: system-ui, -apple-system, sans-serif;
}


/* Imagens responsivas por padrão (não estouram o container) */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}


/* Inputs e botões herdam a fonte do body (em vez de usar a do sistema) */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}


/* Botões: remove visual padrão pra customizarmos do zero */
button {
    background: none;
    border: none;
    cursor: pointer;
}


/* Links: remove sublinhado padrão (vamos estilizar caso a caso) */
a {
    color: inherit;
    text-decoration: none;
}


/* Listas: remove os bullets/números (decoração padrão) */
ul,
ol {
    list-style: none;
}


/* Tabelas: remove espaçamento padrão entre células */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* Heading e parágrafos: melhora a quebra de palavras longas
   (evita "estourar" o layout em telas pequenas) */
h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
}


/* Acessibilidade: respeita usuários que pediram para REDUZIR animações
   nas configurações do sistema (importante para pessoas com sensibilidade). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ============================================================
   style.css - Estilos principais e Design System Sancloud
   ============================================================
   Este arquivo é dividido em seções:

   1) VARIÁVEIS CSS (cores, fontes, espaçamentos da marca)
   2) TIPOGRAFIA (h1, h2, p, etc.)
   3) LAYOUT (container, seções, grids)
   4) HEADER (cabeçalho fixo com menu)
   5) BOTÕES (CTAs e links de ação)
   6) HERO (banner principal das páginas)
   7) CARDS (componentes de conteúdo)
   8) FORMULÁRIOS (inputs, textareas, selects)
   9) FOOTER (rodapé com newsletter)
   10) WHATSAPP FLUTUANTE
   11) UTILITÁRIOS (classes de ajuda)
   12) ANIMAÇÕES

   Todo o CSS usa as variáveis definidas no :root, então pra
   mudar a cor da marca, por exemplo, basta editar UMA linha.
   ============================================================ */


/* ============================================================
   1) VARIÁVEIS CSS (Design Tokens)
   ============================================================
   :root é o elemento HTML. Variáveis declaradas aqui ficam
   disponíveis em todo o site via var(--nome-da-variavel).
   ============================================================ */
:root {

    /* ---- CORES DA MARCA ---- */
    /* Cor principal extraída do logo: #002147 (Oxford Navy) */
    --cor-primaria: #002147;
    --cor-primaria-escura: #001530;     /* Para hover de botões */
    --cor-primaria-clara: #0A3A6E;      /* Variante mais clara */

    /* Cor de acento (azul céu - referência ao "cloud") */
    --cor-acento: #0EA5E9;
    --cor-acento-escura: #0284C7;
    --cor-acento-clara: #38BDF8;

    /* ---- CORES NEUTRAS ---- */
    --branco: #FFFFFF;
    --fundo-claro: #F8FAFC;             /* Fundo de seções alternadas */
    --fundo-suave: #F1F5F9;             /* Fundos mais sutis */
    --borda: #E2E8F0;                   /* Linhas e divisores */
    --borda-escura: #CBD5E1;

    /* ---- CORES DE TEXTO ---- */
    --texto-titulo: #0F172A;            /* Títulos (quase preto) */
    --texto-corpo: #334155;             /* Parágrafos */
    --texto-suave: #64748B;             /* Texto auxiliar/legendas */
    --texto-claro: #94A3B8;             /* Placeholders, info menos importante */

    /* ---- CORES DE STATUS ---- */
    --sucesso: #10B981;                 /* Verde de "deu certo" */
    --erro: #EF4444;                    /* Vermelho de erro */
    --aviso: #F59E0B;                   /* Amarelo de aviso */
    --info: #3B82F6;                    /* Azul de informação */

    /* WhatsApp green oficial */
    --whatsapp: #25D366;
    --whatsapp-escuro: #1EBE5D;


    /* ---- TIPOGRAFIA ---- */
    /* Fonte Inter via Google Fonts (é leve, moderna e gratuita).
       Fallbacks (system-ui, etc.) garantem que se a Inter não
       carregar, o navegador usa uma fonte parecida. */
    --fonte-principal: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Tamanhos de fonte (escala harmônica, baseada em rem) */
    --fonte-xs: 0.75rem;     /* 12px */
    --fonte-sm: 0.875rem;    /* 14px */
    --fonte-base: 1rem;      /* 16px - tamanho padrão de texto */
    --fonte-lg: 1.125rem;    /* 18px */
    --fonte-xl: 1.25rem;     /* 20px */
    --fonte-2xl: 1.5rem;     /* 24px */
    --fonte-3xl: 1.875rem;   /* 30px */
    --fonte-4xl: 2.25rem;    /* 36px */
    --fonte-5xl: 3rem;       /* 48px - títulos grandes */
    --fonte-6xl: 3.75rem;    /* 60px - hero */

    /* Pesos da fonte */
    --peso-regular: 400;
    --peso-medio: 500;
    --peso-semibold: 600;
    --peso-bold: 700;
    --peso-extrabold: 800;


    /* ---- ESPAÇAMENTOS ---- */
    /* Sistema de espaçamento consistente, em rem */
    --espaco-1: 0.25rem;    /* 4px */
    --espaco-2: 0.5rem;     /* 8px */
    --espaco-3: 0.75rem;    /* 12px */
    --espaco-4: 1rem;       /* 16px */
    --espaco-5: 1.25rem;    /* 20px */
    --espaco-6: 1.5rem;     /* 24px */
    --espaco-8: 2rem;       /* 32px */
    --espaco-10: 2.5rem;    /* 40px */
    --espaco-12: 3rem;      /* 48px */
    --espaco-16: 4rem;      /* 64px */
    --espaco-20: 5rem;      /* 80px */
    --espaco-24: 6rem;      /* 96px */


    /* ---- BORDAS E ARREDONDAMENTOS ---- */
    --raio-sm: 4px;
    --raio-md: 8px;
    --raio-lg: 12px;
    --raio-xl: 16px;
    --raio-2xl: 24px;
    --raio-pill: 9999px;    /* Botão totalmente arredondado */


    /* ---- SOMBRAS ---- */
    /* Várias intensidades pra dar profundidade aos cards */
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sombra-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    --sombra-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --sombra-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --sombra-2xl: 0 25px 50px rgba(0, 33, 71, 0.15);


    /* ---- TRANSIÇÕES ---- */
    /* Duração padrão para animações (deixa o site mais "vivo") */
    --transicao-rapida: 150ms ease;
    --transicao-media: 250ms ease;
    --transicao-lenta: 400ms ease;


    /* ---- LARGURA DO CONTAINER ---- */
    /* v1.2.9: replicando estrutura do cloudhumans.com — referência
       que o Daniel apontou como ideal. Max 1216px + padding 48px desktop. */
    --container-max: 1216px;
    --gutter-desktop: 48px;
    --gutter-mobile: 24px;


    /* ============================================================
       v1.2.0 — TOKENS NOVOS (redesign)
       ============================================================ */

    /* ---- GRADIENTES E AURORA ----
       Aurora = mancha colorida difusa que dá "respiração" ao fundo.
       Usado em hero, CTA final e seções de destaque. */
    --gradient-hero: radial-gradient(ellipse 80% 60% at 15% 0%,
                       rgba(14, 165, 233, 0.18) 0%,
                       transparent 60%),
                     radial-gradient(ellipse 60% 50% at 90% 100%,
                       rgba(56, 189, 248, 0.15) 0%,
                       transparent 60%),
                     linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

    --gradient-aurora: radial-gradient(circle at 20% 20%,
                        rgba(14, 165, 233, 0.25) 0%,
                        transparent 50%),
                      radial-gradient(circle at 80% 80%,
                        rgba(56, 189, 248, 0.20) 0%,
                        transparent 50%),
                      radial-gradient(circle at 50% 50%,
                        rgba(0, 33, 71, 0.10) 0%,
                        transparent 60%);

    --gradient-cta: linear-gradient(135deg, #002147 0%, #0A3A6E 50%, #0EA5E9 100%);

    --gradient-marca: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-acento) 100%);

    /* Padrão grid de fundo (SVG inline base64). Linhas finas a 4% opacidade */
    --pattern-grid: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%23002147' stroke-opacity='0.04' fill='none'/%3E%3C/svg%3E");


    /* ---- GLOWS (sombras coloridas pra elementos em destaque) ---- */
    --glow-acento: 0 0 40px rgba(14, 165, 233, 0.25);
    --glow-acento-forte: 0 0 60px rgba(14, 165, 233, 0.45);
    --glow-primario: 0 0 50px rgba(0, 33, 71, 0.35);


    /* ---- EASINGS (curvas de animação mais expressivas) ---- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* desacelera com força */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot leve */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* desacelera suave */


    /* ---- ALTURA DO HEADER (usado em vários lugares) ---- */
    --altura-header: 72px;
}


/* Respeita usuários que desativam animações no sistema (acessibilidade).
   Quando isso está ativo, mata animações pesadas e mantém só transições rápidas. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   2) TIPOGRAFIA
   ============================================================ */

body {
    font-family: var(--fonte-principal);
    font-size: var(--fonte-base);
    font-weight: var(--peso-regular);
    color: var(--texto-corpo);
    background-color: var(--branco);
    line-height: 1.6;
}

/* Títulos: peso forte, espaçamento ajustado */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    color: var(--texto-titulo);
    font-weight: var(--peso-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;     /* Aproxima as letras (visual mais moderno) */
}

h1 { font-size: var(--fonte-5xl); }
h2 { font-size: var(--fonte-4xl); }
h3 { font-size: var(--fonte-3xl); }
h4 { font-size: var(--fonte-2xl); }
h5 { font-size: var(--fonte-xl); }
h6 { font-size: var(--fonte-lg); }

/* Parágrafos: espaçamento confortável */
p {
    margin-bottom: var(--espaco-4);
    color: var(--texto-corpo);
}

/* Links inline (dentro de texto): cor de acento + hover */
a {
    color: var(--cor-acento);
    transition: color var(--transicao-rapida);
}
a:hover {
    color: var(--cor-acento-escura);
}

/* Texto pequeno auxiliar
   AJUSTE: usamos --texto-corpo (mais escuro) em vez de --texto-suave
   pra melhorar a legibilidade dentro dos cards. */
.texto-pequeno {
    font-size: var(--fonte-sm);
    color: var(--texto-corpo);
}

/* Destaque colorido em títulos (ex: "Hospedagem <span>cloud</span>") */
.destaque {
    color: var(--cor-acento);
}


/* ============================================================
   3) LAYOUT (Container e Seções)
   ============================================================ */

/* Container central - todo conteúdo fica dentro disso */
/* v1.2.9: replicando padrão do cloudhumans.com (referência do Daniel).
   - Max-width 1216px (centralizado em telas grandes, com respiro lateral)
   - Padding 48px desktop / 24px mobile (não fluido — breakpoints fixos)
   - Conteúdo internamente à esquerda (text-align controlado em .hero-conteudo) */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter-desktop);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container {
        padding-inline: var(--gutter-mobile);
    }
}

/* Seção padrão: bom espaçamento vertical */
.secao {
    padding: var(--espaco-20) 0;
}

/* Variante com fundo claro (alterna com seções brancas) */
.secao-clara {
    background-color: var(--fundo-claro);
}

/* Variante com fundo escuro (cor da marca) */
.secao-escura {
    background-color: var(--cor-primaria);
    color: var(--branco);
}
.secao-escura h1,
.secao-escura h2,
.secao-escura h3 {
    color: var(--branco);
}

/* Cabeçalho de seção (título + subtítulo centralizados) */
.secao-cabecalho {
    /* v1.2.7: layout fluido — text-align à esquerda em desktop,
       centralizado em mobile. Antes era max-width 720 + center. */
    margin: 0 0 var(--espaco-12) 0;
}
@media (max-width: 768px) {
    .secao-cabecalho {
        text-align: center;
        max-width: 100%;
    }
}
.secao-cabecalho .pre-titulo {
    display: inline-block;
    font-size: var(--fonte-sm);
    font-weight: var(--peso-semibold);
    color: var(--cor-acento);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--espaco-3);
}
.secao-cabecalho h2 {
    margin-bottom: var(--espaco-4);
}
.secao-cabecalho p {
    font-size: var(--fonte-lg);
    color: var(--texto-suave);
}


/* ============================================================
   4) HEADER (Cabeçalho fixo com menu)
   ============================================================ */

.cabecalho {
    /* Fixa o cabeçalho no topo durante a rolagem */
    position: sticky;
    top: 0;
    z-index: 100;

    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);    /* Efeito de "vidro fosco" */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
    transition: box-shadow var(--transicao-media);
}

/* Quando rolar a página, adicionamos sombra (via JS) +
   refinamos o glass effect (mais blur, fundo mais opaco) */
.cabecalho.com-sombra {
    box-shadow: var(--sombra-md);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ============================================================
   SCROLL PROGRESS BAR (v1.2.0)
   ============================================================
   Barrinha de 2px no topo do header que enche conforme a página
   é rolada. Largura é controlada via --scroll-progress (variável
   CSS atualizada pelo main.js no evento de scroll).
   ============================================================ */
.cabecalho::after {
    content: '';
    position: absolute;
    bottom: -1px;       /* fica sobreposto na border-bottom */
    left: 0;
    width: var(--scroll-progress, 0%);
    height: 2px;
    background: linear-gradient(90deg, var(--cor-acento), var(--cor-acento-clara));
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
    transition: width 0.1s linear;
    z-index: 101;
}

.cabecalho-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espaco-4) 0;
}

/* Logo no header */
.cabecalho-logo img {
    height: 40px;
    width: auto;
}

/* Menu de navegação */
.menu {
    display: flex;
    align-items: center;
    gap: var(--espaco-8);
}
.menu a {
    color: var(--texto-titulo);
    font-weight: var(--peso-medio);
    font-size: var(--fonte-base);
    transition: color var(--transicao-rapida);
    position: relative;
}
.menu a:hover {
    color: var(--cor-acento);
}
/* Linha animada embaixo do link no hover (efeito moderno).
   :not(.botao) - exclui os links que viram botão (não queremos underline neles) */
.menu a:not(.botao)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: var(--cor-acento);
    transition: width var(--transicao-media);
}
.menu a:not(.botao):hover::after {
    width: 100%;
}

/* CORREÇÃO DE ESPECIFICIDADE: a regra ".menu a { color: ... }" estava
   sobrescrevendo a cor branca dos botões dentro do menu. Aqui forçamos
   a cor correta com seletor mais específico. */
.menu a.botao-primario,
.menu a.botao-primario:hover {
    color: var(--branco);
}
.menu a.botao-acento,
.menu a.botao-acento:hover {
    color: var(--branco);
}
.menu a.botao-contorno,
.menu a.botao-contorno:hover {
    color: var(--cor-primaria);
}
/* Quando passa o mouse no botão contorno dentro do menu, fica branco */
.menu a.botao-contorno:hover {
    color: var(--branco);
}

/* Botão hamburguer (aparece só em mobile) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--espaco-2);
}
.menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--texto-titulo);
    transition: all var(--transicao-media);
    border-radius: 2px;
}


/* ============================================================
   5) BOTÕES
   ============================================================ */

/* Classe base aplicada em todos os botões */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-6);
    font-family: var(--fonte-principal);
    font-size: var(--fonte-base);
    font-weight: var(--peso-semibold);
    border-radius: var(--raio-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transicao-media);
    text-align: center;
    white-space: nowrap;        /* Evita quebra de linha */
    line-height: 1;
}
.botao:hover {
    transform: translateY(-2px);  /* Pequeno "salto" no hover */
    box-shadow: var(--sombra-lg);
}
.botao:active {
    transform: translateY(0);     /* Volta ao normal ao clicar */
}

/* Variante PRIMÁRIA: fundo escuro da marca (CTA principal) */
.botao-primario {
    background-color: var(--cor-primaria);
    color: var(--branco);
}
.botao-primario:hover {
    background-color: var(--cor-primaria-escura);
    color: var(--branco);
}

/* Variante ACENTO: azul céu (CTA secundário/alternativo) */
.botao-acento {
    background-color: var(--cor-acento);
    color: var(--branco);
}
.botao-acento:hover {
    background-color: var(--cor-acento-escura);
    color: var(--branco);
}

/* Variante CONTORNO: só borda (CTA mais discreto) */
.botao-contorno {
    background-color: transparent;
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}
.botao-contorno:hover {
    background-color: var(--cor-primaria);
    color: var(--branco);
}

/* Variante CONTORNO BRANCA: pra usar em fundos escuros */
.botao-contorno-branco {
    background-color: transparent;
    color: var(--branco);
    border-color: var(--branco);
}
.botao-contorno-branco:hover {
    background-color: var(--branco);
    color: var(--cor-primaria);
}

/* Tamanhos */
.botao-grande {
    padding: var(--espaco-4) var(--espaco-8);
    font-size: var(--fonte-lg);
}
.botao-pequeno {
    padding: var(--espaco-2) var(--espaco-4);
    font-size: var(--fonte-sm);
}


/* ============================================================
   6) HERO (Banner principal)
   ============================================================ */

/* ============================================================
   HERO v1.2.0 — banner com mais peso visual
   ============================================================
   Mudanças vs v1.1:
   - Background composto: gradient mesh (aurora) + grid pattern SVG
   - 2 blobs ciano flutuando com animação suave (drift de 20s)
   - Padding maior em desktop (mais altura, dá espaço pra respirar)
   - Layout em 2 colunas em desktop (texto à esquerda + orb à direita)
   - Em mobile mantém 1 coluna, sem orb (não polui em tela pequena)
   ============================================================ */
.hero {
    /* Camadas de background empilhadas:
       1) gradient mesh (aurora) — manchas ciano sutis
       2) grid pattern SVG — linhas finas a 4% de opacidade
       3) base gradient — branco → fundo-claro */
    background:
        var(--gradient-hero),
        var(--pattern-grid);
    background-blend-mode: normal;
    padding: var(--espaco-24) 0 var(--espaco-20);
    position: relative;
    overflow: hidden;
    min-height: 80vh;            /* hero ganha presença em desktop */
    display: flex;
    align-items: center;
}

/* Blob #1 — canto superior direito (grande, ciano) */
.hero::before {
    content: '';
    position: absolute;
    top: -250px;
    right: -150px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.22) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: hero-drift-1 18s ease-in-out infinite;
}

/* Blob #2 — canto inferior esquerdo (médio, azul-marca) */
.hero::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(10, 58, 110, 0.14) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: hero-drift-2 22s ease-in-out infinite;
}

/* Drift suave dos blobs — dá sensação de "respiração" sem distrair.
   Translado pequeno (30px) e escala leve (1.05) num ciclo lento. */
@keyframes hero-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes hero-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.05); }
}

.hero-conteudo {
    position: relative;       /* Pra ficar acima do ::before */
    z-index: 1;
    width: 100%;
    /* v1.2.7: alinhamento à esquerda em desktop, centralizado em mobile.
       v1.2.0: vira grid 2-col em desktop pra acomodar o orb decorativo. */
}
/* Grid 2-col ativa SÓ quando o hero tem orb (página home).
   Páginas internas (cloud/desenvolvimento/sobre/etc) ficam 1 coluna larga.
   Usa :has() — Chrome 105+, Safari 15.4+, Firefox 121+. */
@media (min-width: 980px) {
    .hero-conteudo:has(.hero-orb) {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: center;
        gap: var(--espaco-12);
    }
}
@media (max-width: 768px) {
    .hero-conteudo {
        text-align: center;
    }
}

/* Bloco de texto do hero (lado esquerdo em desktop, único em mobile) */
.hero-texto {
    position: relative;
    z-index: 2;
}

/* ============================================================
   HERO ORB — ilustração decorativa do hero (lado direito)
   ============================================================
   SVG inline no HTML que cria uma "nuvem orb" abstrata. Composto por:
   - círculo central com gradient ciano (núcleo)
   - 3 anéis orbitando em rotação lenta (cada um com timing diferente)
   - pontos de luz pulsando
   Tudo via CSS — zero JS, zero requests extras.
   Esconde em telas <980px (não cabe sem espremer o texto). */
.hero-orb {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    margin-inline: auto;
    display: none;       /* mostra só em desktop */
}
@media (min-width: 980px) {
    .hero-orb {
        display: block;
    }
}

/* Núcleo central — círculo com gradient ciano e glow forte */
.hero-orb-nucleo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
                  rgba(56, 189, 248, 0.9) 0%,
                  rgba(14, 165, 233, 0.7) 40%,
                  rgba(0, 33, 71, 0.8) 100%);
    box-shadow:
        0 0 80px rgba(14, 165, 233, 0.45),
        0 0 120px rgba(14, 165, 233, 0.25),
        inset -20px -20px 60px rgba(0, 33, 71, 0.3);
    animation: orb-nucleo-pulso 4s ease-in-out infinite;
}
@keyframes orb-nucleo-pulso {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.05); }
}

/* Anéis orbitando — 3 círculos com borda em ângulos diferentes,
   cada um rodando num timing próprio pra parecer 3D */
.hero-orb-anel {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(14, 165, 233, 0.4);
    transform-origin: center;
    pointer-events: none;
}
.hero-orb-anel-1 {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg);
    animation: orb-anel-1 20s linear infinite;
}
.hero-orb-anel-2 {
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%) rotateX(60deg) rotateY(30deg);
    animation: orb-anel-2 15s linear infinite;
    border-color: rgba(56, 189, 248, 0.5);
}
.hero-orb-anel-3 {
    width: 65%;
    height: 65%;
    transform: translate(-50%, -50%) rotateX(50deg) rotateY(-30deg);
    animation: orb-anel-3 25s linear infinite;
    border-color: rgba(14, 165, 233, 0.3);
}
@keyframes orb-anel-1 {
    from { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); }
    to   { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}
@keyframes orb-anel-2 {
    from { transform: translate(-50%, -50%) rotateX(60deg) rotateY(30deg) rotateZ(0deg); }
    to   { transform: translate(-50%, -50%) rotateX(60deg) rotateY(30deg) rotateZ(-360deg); }
}
@keyframes orb-anel-3 {
    from { transform: translate(-50%, -50%) rotateX(50deg) rotateY(-30deg) rotateZ(0deg); }
    to   { transform: translate(-50%, -50%) rotateX(50deg) rotateY(-30deg) rotateZ(360deg); }
}

/* Pontos de luz dispersos ao redor (3 partículas brilhantes) */
.hero-orb-particula {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.9);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
    animation: orb-particula 3s ease-in-out infinite;
}
.hero-orb-particula:nth-child(4) { top: 15%; left: 20%; animation-delay: 0s; }
.hero-orb-particula:nth-child(5) { top: 25%; right: 12%; animation-delay: 1s; width: 6px; height: 6px; }
.hero-orb-particula:nth-child(6) { bottom: 18%; left: 28%; animation-delay: 2s; width: 5px; height: 5px; }
.hero-orb-particula:nth-child(7) { bottom: 30%; right: 22%; animation-delay: 0.5s; width: 7px; height: 7px; }
@keyframes orb-particula {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.4); opacity: 1; }
}

/* Badge no topo do hero — pílula com ponto verde pulsando.
   Adiciona contexto e prova social leve antes do título. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-4);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pill);
    font-size: var(--fonte-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-corpo);
    margin-bottom: var(--espaco-6);
    box-shadow: var(--sombra-sm);
}
.hero-badge-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sucesso);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: badge-pulso 2s ease-in-out infinite;
}
@keyframes badge-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.2); }
}

.hero h1 {
    font-size: clamp(var(--fonte-4xl), 5vw, var(--fonte-6xl));
    margin-bottom: var(--espaco-6);
    font-weight: var(--peso-extrabold);
}

.hero-subtitulo {
    font-size: var(--fonte-xl);
    color: var(--texto-suave);
    margin-bottom: var(--espaco-10);
    line-height: 1.5;
    /* v1.2.6: sem max-width — flui com o container */
}

.hero-botoes {
    display: flex;
    gap: var(--espaco-4);
    justify-content: flex-start;  /* v1.2.7: à esquerda em desktop */
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .hero-botoes {
        justify-content: center;  /* Mobile: centralizado */
    }
}


/* ============================================================
   7) CARDS (de serviço, diferencial, etc.)
   ============================================================ */

/* Card padrão: branco com borda sutil */
.card {
    background-color: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-8);
    transition: all var(--transicao-media);
    height: 100%;             /* Cards do mesmo grid ficam da mesma altura */
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-xl);
    border-color: var(--cor-acento);
}

/* Ícone do card (caixinha colorida com SVG dentro) */
.card-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: rgba(14, 165, 233, 0.1);
    color: var(--cor-acento);
    border-radius: var(--raio-lg);
    margin-bottom: var(--espaco-5);
}
.card-icone svg {
    width: 28px;
    height: 28px;
}

.card h3 {
    margin-bottom: var(--espaco-3);
    font-size: var(--fonte-2xl);
}
.card p {
    color: var(--texto-suave);
    margin-bottom: var(--espaco-4);
}

/* Card destacado (variante com borda colorida) */
.card-destaque {
    border-color: var(--cor-acento);
    box-shadow: var(--sombra-lg);
}


/* ============================================================
   CARDS DE PLANO (preço + features + CTA)
   ============================================================
   Usados na página de Desenvolvimento pra mostrar os 3 planos
   de assinatura (Essencial / Profissional / Avançado).
   ============================================================ */

.plano-card {
    display: flex;
    flex-direction: column;
    position: relative;
    /* Padding extra no topo pra acomodar o badge "Mais popular" sem cortar */
    padding-top: var(--espaco-10);
}

/* Variante destacada (plano do meio, "Mais popular") */
.plano-destaque {
    border-color: var(--cor-acento);
    border-width: 2px;
    box-shadow: var(--sombra-2xl);
    /* Levanta um pouco em relação aos outros pra chamar atenção */
    transform: translateY(-8px);
}
@media (max-width: 768px) {
    /* Em mobile, não levanta (ficaria estranho) */
    .plano-destaque { transform: none; }
}

/* Badge "Mais popular" que aparece no topo do card destacado */
.plano-badge {
    position: absolute;
    top: var(--espaco-3);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-acento);
    color: var(--branco);
    padding: var(--espaco-1) var(--espaco-4);
    border-radius: var(--raio-pill);
    font-size: var(--fonte-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Cabeçalho do plano: nome + descrição curta */
.plano-card h3 {
    font-size: var(--fonte-2xl);
    margin-bottom: var(--espaco-2);
}
.plano-card-descricao {
    color: var(--texto-suave);
    font-size: var(--fonte-sm);
    margin-bottom: var(--espaco-6);
    min-height: 40px;        /* Alinha cards mesmo se descrição variar */
}

/* Bloco de preço */
.plano-preco {
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    padding: var(--espaco-5) 0;
    margin-bottom: var(--espaco-6);
    text-align: center;
}
.plano-preco-setup {
    display: block;
    font-size: var(--fonte-sm);
    color: var(--texto-suave);
    margin-bottom: var(--espaco-2);
}
.plano-preco-setup strong {
    color: var(--texto-titulo);
}
.plano-preco-valor {
    font-size: var(--fonte-5xl);
    font-weight: var(--peso-extrabold);
    color: var(--cor-primaria);
    letter-spacing: -0.03em;
    line-height: 1;
}
.plano-preco-periodo {
    font-size: var(--fonte-base);
    color: var(--texto-suave);
    margin-left: var(--espaco-1);
}
.plano-preco-obs {
    display: block;
    font-size: var(--fonte-xs);
    color: var(--texto-suave);
    margin-top: var(--espaco-2);
}

/* Lista de features (com checkmark verde) */
.plano-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espaco-6) 0;
    flex: 1;                 /* Ocupa o espaço restante (alinha botões) */
}
.plano-features li {
    padding: var(--espaco-2) 0;
    font-size: var(--fonte-sm);
    color: var(--texto-corpo);
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-2);
}
/* Checkmark verde antes de cada feature */
.plano-features li::before {
    content: '✓';
    color: var(--sucesso);
    font-weight: var(--peso-bold);
    flex-shrink: 0;
    line-height: 1.5;
}
/* Variante ✗ pra recursos que NÃO estão incluídos no plano */
.plano-features li.nao::before {
    content: '✗';
    color: var(--texto-claro);
}
.plano-features li.nao {
    color: var(--texto-claro);
    text-decoration: line-through;
}

/* Botão do plano sempre no final do card */
.plano-card .botao {
    width: 100%;
    margin-top: auto;
}

/* Grid de cards (responsivo: ajusta colunas conforme largura) */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* v1.2.10: 3 cols desktop */
    gap: var(--espaco-6);
}
@media (max-width: 900px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);  /* 2 cols tablet */
    }
}
@media (max-width: 600px) {
    .grid-cards {
        grid-template-columns: 1fr;  /* 1 col mobile */
    }
}

/* Grid de 2 colunas (pra serviços principais).
   v1.2.0: minmax 400 → 320px pra não quebrar pra 1 coluna em ~880px
   (antes ficava com 1 card largo solitário em monitores intermediários). */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--espaco-8);
}

/* Grid específico para 4 cards (mantém sempre balanceado).
   - Mobile (até 600px): 1 coluna
   - Tablet/desktop médio: 2x2 (sempre proporcional)
   - Desktop largo (1100px+): 4 em linha
   Isso evita o problema de "3 cards numa linha + 1 sozinho". */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-6);
}
@media (min-width: 1100px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ============================================================
   7.1) GRID DE LOGOS DE TECNOLOGIAS
   ============================================================
   Mostra os logos das tecnologias em um grid responsivo.
   Os SVGs estão em img/tecnologias/ e são monocromáticos.

   Técnica usada: CSS mask-image — o SVG vira uma "máscara",
   e a cor é controlada via background-color. Assim podemos
   trocar a cor no hover sem precisar de múltiplos arquivos.
   ============================================================ */

.grid-tecnologias {
    display: grid;
    /* auto-fit: ajusta colunas conforme largura disponível
       minmax(110px, 1fr): cada coluna tem entre 110px e largura igual */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--espaco-3);
    max-width: 1100px;
    margin: 0 auto;
}

/* Card individual de cada tecnologia */
.tech-card {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    padding: var(--espaco-5) var(--espaco-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-3);
    transition: all var(--transicao-media);
    /* Garante que todos os cards tenham a mesma altura */
    min-height: 110px;
}

/* Efeito hover: card "levanta" e fica destacado */
.tech-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-lg);
    border-color: var(--cor-acento);
}

/* Ícone do logo (img com filtro CSS pra colorir).
   Usamos <img> em vez de mask-image porque funciona localmente (file://)
   e em servidor (http://). O filter CSS converte o preto do SVG no navy
   da marca, e troca pra azul céu no hover. */
.tech-icon {
    width: 40px;
    height: 40px;
    /* Filtro que transforma preto em navy #002147 (cor da marca) */
    filter: brightness(0) saturate(100%) invert(8%) sepia(91%)
            saturate(3104%) hue-rotate(207deg) brightness(95%) contrast(108%);
    transition: filter var(--transicao-media);
    object-fit: contain;
}

/* No hover, troca o filter pra resultar em azul céu #0EA5E9 */
.tech-card:hover .tech-icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(95%)
            saturate(1958%) hue-rotate(168deg) brightness(101%) contrast(91%);
}

/* Nome da tecnologia abaixo do ícone */
.tech-nome {
    font-size: var(--fonte-xs);
    font-weight: var(--peso-medio);
    color: var(--texto-corpo);
    text-align: center;
    line-height: 1.3;
}


/* ============================================================
   8) FORMULÁRIOS
   ============================================================ */
.form-grupo { margin-bottom: var(--espaco-5); }
.form-grupo label {
    display: block;
    font-weight: var(--peso-semibold);
    color: var(--texto-titulo);
    margin-bottom: var(--espaco-2);
    font-size: var(--fonte-sm);
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: var(--espaco-3) var(--espaco-4);
    font-family: var(--fonte-principal);
    font-size: var(--fonte-base);
    color: var(--texto-titulo);
    background-color: var(--branco);
    border: 1px solid var(--borda-escura);
    border-radius: var(--raio-md);
    transition: all var(--transicao-rapida);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-mensagem {
    padding: var(--espaco-3) var(--espaco-4);
    border-radius: var(--raio-md);
    margin-top: var(--espaco-4);
    font-size: var(--fonte-sm);
    display: none;
}
.form-mensagem.sucesso {
    background-color: #DCFCE7; color: #166534;
    border: 1px solid #BBF7D0; display: block;
}
.form-mensagem.erro {
    background-color: #FEE2E2; color: #991B1B;
    border: 1px solid #FECACA; display: block;
}
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ============================================================
   9) RODAPÉ
   ============================================================ */
.rodape {
    background-color: var(--cor-primaria);
    color: var(--branco);
    padding: var(--espaco-16) 0 var(--espaco-8);
}
.rodape-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--espaco-10);
    margin-bottom: var(--espaco-12);
}
.rodape-coluna h4 {
    color: var(--branco);
    font-size: var(--fonte-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--espaco-4);
    opacity: 0.8;
}
.rodape-coluna ul li { margin-bottom: var(--espaco-2); }
.rodape-coluna ul a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transicao-rapida);
}
.rodape-coluna ul a:hover { color: var(--branco); }
.rodape-logo {
    margin-bottom: var(--espaco-4);
    filter: brightness(0) invert(1);
    height: 40px;
}
.rodape-descricao {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fonte-sm);
    margin-bottom: var(--espaco-4);
}
.rodape-newsletter input {
    width: 100%;
    padding: var(--espaco-3);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--branco);
    border-radius: var(--raio-md);
    margin-bottom: var(--espaco-3);
}
.rodape-newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.rodape-newsletter input:focus { outline: none; border-color: var(--cor-acento); }
.rodape-newsletter button {
    width: 100%;
    background-color: var(--cor-acento);
    color: var(--branco);
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    font-weight: var(--peso-semibold);
    transition: background var(--transicao-rapida);
}
.rodape-newsletter button:hover { background-color: var(--cor-acento-escura); }
.rodape-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--espaco-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-4);
    font-size: var(--fonte-sm);
    color: rgba(255, 255, 255, 0.6);
}
.rodape-legal-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transicao-rapida);
}
.rodape-legal-links a:hover { color: var(--branco); }
.rodape-legal-links span.sep {
    margin: 0 var(--espaco-2);
    opacity: 0.5;
}

/* Redes sociais (v1.2.0) — círculos sutis com hover ciano */
.rodape-sociais {
    display: flex;
    gap: var(--espaco-2);
    margin-top: var(--espaco-5);
}
.rodape-sociais a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transicao-rapida);
}
.rodape-sociais a:hover {
    background: var(--cor-acento);
    color: var(--branco);
    transform: translateY(-2px);
}
.rodape-sociais svg {
    width: 18px;
    height: 18px;
}

/* Badges de confiança no rodapé (v1.2.0) */
.rodape-badges {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin-top: var(--espaco-6);
}
.rodape-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    font-size: var(--fonte-sm);
    color: rgba(255, 255, 255, 0.8);
}
.rodape-badge svg {
    width: 16px;
    height: 16px;
    color: var(--cor-acento-clara);
    flex-shrink: 0;
}


/* ============================================================
   10) WHATSAPP FLUTUANTE
   ============================================================ */
.whatsapp-flutuante {
    position: fixed;
    bottom: var(--espaco-6);
    right: var(--espaco-6);
    width: 60px;
    height: 60px;
    background-color: var(--whatsapp);
    color: var(--branco);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-xl);
    z-index: 99;
    transition: all var(--transicao-media);
    animation: pulso-whatsapp 2s infinite;
}
.whatsapp-flutuante:hover {
    transform: scale(1.1);
    background-color: var(--whatsapp-escuro);
    color: var(--branco);
    animation: none;
}
.whatsapp-flutuante svg { width: 32px; height: 32px; }
@keyframes pulso-whatsapp {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), var(--sombra-xl); }
    70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0), var(--sombra-xl); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), var(--sombra-xl); }
}


/* ============================================================
   11) UTILITÁRIOS
   ============================================================ */
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.texto-esquerda { text-align: left; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--espaco-4); } .mt-8 { margin-top: var(--espaco-8); }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--espaco-4); } .mb-8 { margin-bottom: var(--espaco-8); }
.flex { display: flex; }
.flex-centro { display: flex; align-items: center; justify-content: center; }
.flex-coluna { flex-direction: column; }
.gap-2 { gap: var(--espaco-2); } .gap-4 { gap: var(--espaco-4); } .gap-6 { gap: var(--espaco-6); }


/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: var(--espaco-2);
    background-color: var(--cor-primaria);
    color: var(--branco);
    padding: var(--espaco-3) var(--espaco-5);
    font-weight: var(--peso-semibold);
    border-radius: 0 0 var(--raio-md) var(--raio-md);
    z-index: 1000;
    transition: top var(--transicao-rapida);
}
.skip-to-content:focus {
    top: 0;
    color: var(--branco);
    outline: 3px solid var(--cor-acento);
    outline-offset: 2px;
}
*:focus-visible {
    outline: 3px solid var(--cor-acento);
    outline-offset: 2px;
}
.botao:focus-visible { outline-offset: 4px; }


/* ============================================================
   BANNER DE COOKIES (LGPD)
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background-color: var(--branco);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -4px 20px rgba(0, 33, 71, 0.08);
    padding: var(--espaco-5) var(--espaco-6);
    z-index: 98;
    animation: cookie-slide-up 0.4s ease-out;
}
.cookie-banner-saindo { animation: cookie-slide-down 0.3s ease-in forwards; }
@keyframes cookie-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes cookie-slide-down {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}
.cookie-banner-conteudo {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-6);
    flex-wrap: wrap;
}
.cookie-banner-texto { flex: 1; min-width: 280px; }
.cookie-banner-texto strong {
    display: block;
    color: var(--texto-titulo);
    font-size: var(--fonte-base);
    margin-bottom: var(--espaco-1);
}
.cookie-banner-texto p {
    margin: 0;
    font-size: var(--fonte-sm);
    color: var(--texto-corpo);
    line-height: 1.5;
}
.cookie-banner-texto a { color: var(--cor-acento); text-decoration: underline; }
.cookie-banner-botoes { display: flex; gap: var(--espaco-3); flex-shrink: 0; }
@media (max-width: 600px) {
    .cookie-banner { padding: var(--espaco-4); }
    .cookie-banner-conteudo { flex-direction: column; text-align: center; gap: var(--espaco-3); }
    .cookie-banner-botoes { width: 100%; }
    .cookie-banner-botoes .botao { flex: 1; }
}

/* v1.2.0 — Quando o banner de cookies está visível, o WhatsApp flutuante
   sobe pra não cobrir os botões "Aceitar/Rejeitar". Usa CSS :has() (Chrome 105+,
   Safari 15.4+, Firefox 121+ — cobre >95% dos usuários reais).
   O JS de cookies.js adiciona/remove o banner no DOM via .appendChild/.remove(). */
body:has(.cookie-banner:not(.cookie-banner-saindo)) .whatsapp-flutuante {
    transform: translateY(-200px);
    transition: transform 0.4s var(--ease-out-expo);
}
@media (max-width: 600px) {
    body:has(.cookie-banner:not(.cookie-banner-saindo)) .whatsapp-flutuante {
        /* Em mobile o banner é mais alto (vertical), precisa de mais offset */
        transform: translateY(-260px);
    }
}


/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animar-entrada { animation: fade-in-up 0.6s ease-out; }

/* Scroll animar — visíveis por padrão; só esconde quando JS está rodando.
   v1.2.0: usa easing expo (mais "spring") + delay incremental via --stagger
   (alimentado pelo main.js — cada irmão ganha 80ms a mais que o anterior). */
.scroll-animar {
    transition: opacity 0.7s var(--ease-out-expo),
                transform 0.7s var(--ease-out-expo);
    transition-delay: var(--stagger, 0ms);
}
html.js-on .scroll-animar {
    opacity: 0;
    transform: translateY(30px);
}
html.js-on .scroll-animar.visivel {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   CARDS DE PLANO (página /desenvolvimento)
   ============================================================ */
.plano-card {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: var(--espaco-10);
}
.plano-destaque {
    border-color: var(--cor-acento);
    border-width: 2px;
    box-shadow: var(--sombra-2xl);
    transform: translateY(-8px);
}
@media (max-width: 768px) { .plano-destaque { transform: none; } }
.plano-badge {
    position: absolute;
    top: var(--espaco-3);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-acento);
    color: var(--branco);
    padding: var(--espaco-1) var(--espaco-4);
    border-radius: var(--raio-pill);
    font-size: var(--fonte-xs);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.plano-card h3 { font-size: var(--fonte-2xl); margin-bottom: var(--espaco-2); }
.plano-card-descricao {
    color: var(--texto-suave);
    font-size: var(--fonte-sm);
    margin-bottom: var(--espaco-6);
    min-height: 40px;
}
.plano-preco {
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    padding: var(--espaco-5) 0;
    margin-bottom: var(--espaco-6);
    text-align: center;
}
.plano-preco-setup {
    display: block;
    font-size: var(--fonte-sm);
    color: var(--texto-suave);
    margin-bottom: var(--espaco-2);
}
.plano-preco-setup strong { color: var(--texto-titulo); }
.plano-preco-valor {
    font-size: var(--fonte-5xl);
    font-weight: var(--peso-extrabold);
    color: var(--cor-primaria);
    letter-spacing: -0.03em;
    line-height: 1;
}
.plano-preco-periodo {
    font-size: var(--fonte-base);
    color: var(--texto-suave);
    margin-left: var(--espaco-1);
}
.plano-preco-obs {
    display: block;
    font-size: var(--fonte-xs);
    color: var(--texto-suave);
    margin-top: var(--espaco-2);
}
.plano-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espaco-6) 0;
    flex: 1;
}
.plano-features li {
    padding: var(--espaco-2) 0;
    font-size: var(--fonte-sm);
    color: var(--texto-corpo);
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-2);
}
.plano-features li::before {
    content: '✓';
    color: var(--sucesso);
    font-weight: var(--peso-bold);
    flex-shrink: 0;
    line-height: 1.5;
}
.plano-features li.nao::before { content: '✗'; color: var(--texto-claro); }
.plano-features li.nao { color: var(--texto-claro); text-decoration: line-through; }
.plano-card .botao { width: 100%; margin-top: auto; }


/* ============================================================
   ===========  v1.2.0 — NOVOS COMPONENTES  ==================
   ============================================================ */


/* ============================================================
   TILT 3D NOS CARDS
   ============================================================
   O JS aplica rotateX/rotateY via custom properties --tilt-x/--tilt-y.
   O CSS aqui só garante a transformação suave e a perspective.
   Funciona em qualquer .card que tenha [data-tilt].
   ============================================================ */
[data-tilt] {
    transform-style: preserve-3d;
    transform: perspective(900px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg))
               translateZ(0);
    transition: transform 0.4s var(--ease-out-quart);
    will-change: transform;
}
[data-tilt]:hover {
    transition: transform 0.1s ease-out;
}
/* Glare effect: brilho que segue o cursor */
[data-tilt]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
                  rgba(14, 165, 233, 0.12) 0%,
                  transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
[data-tilt]:hover::after {
    opacity: 1;
}
[data-tilt] {
    position: relative;
    overflow: hidden;
}


/* ============================================================
   CONTADOR ANIMADO (números que sobem)
   ============================================================
   Marca elementos com [data-counter="100"]. O JS detecta entrada
   na viewport e roda count-up de 0 até o valor de data-counter.
   ============================================================ */
.stat-numero {
    font-size: clamp(var(--fonte-4xl), 6vw, var(--fonte-6xl));
    font-weight: var(--peso-extrabold);
    color: var(--cor-acento);
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--cor-acento) 0%, var(--cor-acento-clara) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.stat-label {
    color: var(--texto-suave);
    font-size: var(--fonte-base);
    margin-top: var(--espaco-2);
    font-weight: var(--peso-medio);
}


/* Wrapper de seção pro marquee (espaçamento contido) */
.secao-marquee {
    padding: var(--espaco-12) 0 var(--espaco-8);
    border-bottom: 1px solid var(--borda);
}
.marquee-titulo {
    text-align: center;
    font-size: var(--fonte-sm);
    font-weight: var(--peso-semibold);
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--espaco-6);
}


/* ============================================================
   MARQUEE INFINITO (logos rolando)
   ============================================================
   Usado pra "selo" de tecnologias suportadas. Duplica os filhos
   no JS (ou já no HTML) e roda animação linear infinita.
   Pause-on-hover via CSS.
   ============================================================ */
.marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Máscara de fade nas pontas — efeito profissional */
    mask-image: linear-gradient(90deg,
                  transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
                  transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
    display: flex;
    gap: var(--espaco-12);
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    align-items: center;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    color: var(--texto-suave);
    font-size: var(--fonte-base);
    font-weight: var(--peso-medio);
    opacity: 0.7;
    transition: opacity var(--transicao-rapida);
}
.marquee-item:hover {
    opacity: 1;
    color: var(--cor-acento);
}
.marquee-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(456%)
            hue-rotate(182deg) brightness(95%) contrast(86%);
    transition: filter var(--transicao-rapida);
}
.marquee-item:hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(95%) saturate(1958%)
            hue-rotate(168deg) brightness(101%) contrast(91%);
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* metade porque conteúdo é duplicado */
}


/* ============================================================
   TABS DE CATEGORIA (usado no grid de tecnologias)
   ============================================================ */
.tabs {
    display: flex;
    gap: var(--espaco-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--espaco-8);
}
.tab-botao {
    padding: var(--espaco-2) var(--espaco-5);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pill);
    font-family: var(--fonte-principal);
    font-size: var(--fonte-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-corpo);
    cursor: pointer;
    transition: all var(--transicao-rapida);
}
.tab-botao:hover {
    border-color: var(--cor-acento);
    color: var(--cor-acento);
}
.tab-botao.ativo {
    background: var(--cor-primaria);
    color: var(--branco);
    border-color: var(--cor-primaria);
}
.tab-painel {
    display: none;
}
.tab-painel.ativo {
    display: block;
    animation: tab-aparecer 0.4s var(--ease-out-quart);
}
@keyframes tab-aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   PROVA SOCIAL — Stats em destaque
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espaco-6);
    text-align: center;
    padding: var(--espaco-12) 0;
}
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--espaco-8) var(--espaco-4);
    }
}

/* Card de depoimento */
.depoimento {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-8);
    position: relative;
}
.depoimento::before {
    content: '“';
    position: absolute;
    top: var(--espaco-2);
    left: var(--espaco-5);
    font-size: 80px;
    line-height: 1;
    color: var(--cor-acento);
    opacity: 0.3;
    font-family: Georgia, serif;
}
.depoimento-texto {
    font-size: var(--fonte-lg);
    line-height: 1.6;
    color: var(--texto-titulo);
    margin-bottom: var(--espaco-6);
    position: relative;
    z-index: 1;
}
.depoimento-autor {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
}
.depoimento-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--branco);
    font-weight: var(--peso-bold);
    font-size: var(--fonte-lg);
}
.depoimento-nome {
    font-weight: var(--peso-semibold);
    color: var(--texto-titulo);
    font-size: var(--fonte-base);
}
.depoimento-cargo {
    color: var(--texto-suave);
    font-size: var(--fonte-sm);
}


/* ============================================================
   CTA FINAL repaginado (v1.2.0)
   ============================================================
   Card central com aurora mesh + decoração de pontos no fundo.
   Usa class .cta-card-grande dentro de uma .secao normal.
   ============================================================ */
.cta-card-grande {
    background: var(--gradient-cta);
    border-radius: var(--raio-2xl);
    padding: var(--espaco-16) var(--espaco-12);
    text-align: center;
    color: var(--branco);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 33, 71, 0.25);
}
.cta-card-grande::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    pointer-events: none;
    opacity: 0.5;
}
.cta-card-grande::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    animation: hero-drift-1 18s ease-in-out infinite;
}
.cta-card-grande > * {
    position: relative;
    z-index: 1;
}
.cta-card-grande h2 {
    color: var(--branco);
    font-size: clamp(var(--fonte-3xl), 4vw, var(--fonte-5xl));
    margin-bottom: var(--espaco-4);
}
.cta-card-grande p {
    font-size: var(--fonte-lg);
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto var(--espaco-8);
}
@media (max-width: 768px) {
    .cta-card-grande {
        padding: var(--espaco-10) var(--espaco-6);
        border-radius: var(--raio-xl);
    }
}


/* ============================================================
   KIT CALLOUT (v2.0) — chamada cruzada do Kit no /desenvolvimento
   ============================================================
   Versão LIGHT (o dark é sobrescrito em style-v2-dark.css). */
.kit-callout {
    background: linear-gradient(135deg, #F0F9FF, #DBEAFE);
    border: 1px solid #BFDBFE;
    border-radius: var(--raio-xl);
    padding: var(--espaco-10);
    text-align: center;
}


/* ============================================================
   v2.0.6 — Toggle de tema OCULTO (decisão: site sempre dark)
   ============================================================
   O mecanismo light/dark continua no código (pra revenda do Kit),
   mas o botão sol/lua fica oculto no site da Sancloud — a marca
   adota dark como identidade fixa. Pra reativar, remover esta regra. */
.tema-toggle { display: none !important; }