/* ============================================================
   BANHOSOFT — DESIGN SYSTEM
   Fonte única de tokens visuais e de movimento do site.
   Guia visual completo (cores, tipografia, componentes): /design-system

   Decisão de marca:
   O verde já era a cor dominante dos botões e do hero; o azul do
   --primary antigo (global.css) brigava com isso (preço em azul
   ao lado de botão verde, "Área do Cliente" também em azul).
   Aqui o verde vira --primary oficial (ação/crescimento), o azul
   vira --secondary (confiança/infra/login) e o âmbar vira --accent
   (destaque pontual e o tema "fechamento" do fundo animado).
   Este arquivo carrega DEPOIS de global.css e sobrescreve os
   tokens de cor de propósito — o resto do site (botões, preços,
   links) já usa var(--primary)/var(--gradient-primary) e herda
   a nova paleta sem precisar editar cada página.
   ============================================================ */

:root {
    --primary: #16a34a;
    --primary-dark: #15803d;
    --primary-light: #22c55e;
    --secondary: #0ea5e9;
    --secondary-dark: #0284c7;
    --accent: #f59e0b;
    --accent-dark: #d97706;

    --gradient-primary: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --gradient-secondary: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);

    /* Espaçamento (escala 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;

    /* Movimento */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 180ms;
    --duration-base: 400ms;
    --duration-slow: 700ms;
    --duration-bg: 1600ms;

    /* Camadas */
    --z-bg: -1;
    --z-progress: 1001;
    --z-nav: 1000;

    /* Temas do fundo animado — 3 tons cada, usados pelo .bg-fx */
    --theme-grow-1: #22c55e;
    --theme-grow-2: #10b981;
    --theme-grow-3: #4ade80;

    --theme-trust-1: #0ea5e9;
    --theme-trust-2: #0284c7;
    --theme-trust-3: #38bdf8;

    --theme-close-1: #f59e0b;
    --theme-close-2: #fb923c;
    --theme-close-3: #fbbf24;

    --theme-calm-1: #94a3b8;
    --theme-calm-2: #cbd5e1;
    --theme-calm-3: #38bdf8;
}

/* ============================================================
   FUNDO ANIMADO (.bg-fx)
   Camada fixa, atrás de todo o conteúdo, com 3 "blobs" borrados
   em deriva contínua. A cor muda de tema conforme a seção que
   está no centro da tela (ver arquivos/js/scroll-fx.js).
   ============================================================ */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: var(--z-bg);
    overflow: hidden;
    pointer-events: none;
    background: var(--bg-white, #ffffff);
}

.bg-fx__blob {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.4;
    transition: background-color var(--duration-bg) ease;
    will-change: transform;
}

.bg-fx__blob--1 {
    top: -14vmax;
    left: -10vmax;
    animation: bgDrift1 32s ease-in-out infinite;
}

.bg-fx__blob--2 {
    bottom: -16vmax;
    right: -8vmax;
    animation: bgDrift2 38s ease-in-out infinite;
}

.bg-fx__blob--3 {
    top: 22%;
    right: 6%;
    width: 36vmax;
    height: 36vmax;
    opacity: 0.3;
    animation: bgDrift3 44s ease-in-out infinite;
}

@keyframes bgDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8vmax, 6vmax) scale(1.12); }
}

@keyframes bgDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vmax, -8vmax) scale(1.15); }
}

@keyframes bgDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vmax, 8vmax) scale(1.18); }
}

.bg-fx[data-theme="grow"] .bg-fx__blob--1 { background-color: var(--theme-grow-1); }
.bg-fx[data-theme="grow"] .bg-fx__blob--2 { background-color: var(--theme-grow-2); }
.bg-fx[data-theme="grow"] .bg-fx__blob--3 { background-color: var(--theme-grow-3); }

.bg-fx[data-theme="trust"] .bg-fx__blob--1 { background-color: var(--theme-trust-1); }
.bg-fx[data-theme="trust"] .bg-fx__blob--2 { background-color: var(--theme-trust-2); }
.bg-fx[data-theme="trust"] .bg-fx__blob--3 { background-color: var(--theme-trust-3); }

.bg-fx[data-theme="close"] .bg-fx__blob--1 { background-color: var(--theme-close-1); }
.bg-fx[data-theme="close"] .bg-fx__blob--2 { background-color: var(--theme-close-2); }
.bg-fx[data-theme="close"] .bg-fx__blob--3 { background-color: var(--theme-close-3); }

.bg-fx[data-theme="calm"] .bg-fx__blob--1 { background-color: var(--theme-calm-1); }
.bg-fx[data-theme="calm"] .bg-fx__blob--2 { background-color: var(--theme-calm-2); }
.bg-fx[data-theme="calm"] .bg-fx__blob--3 { background-color: var(--theme-calm-3); }

@media (prefers-reduced-motion: reduce) {
    .bg-fx__blob { animation: none !important; }
}

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA
   ============================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: var(--z-progress);
    pointer-events: none;
    background: transparent;
}

.scroll-progress__bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--gradient-primary);
}

/* ============================================================
   REVELAÇÃO AO ROLAR (scroll reveal)
   Aplicado via JS (classList.add('reveal-target')) em cards,
   títulos e blocos já existentes — sem precisar editar cada
   página. Sem JS ou com prefers-reduced-motion, tudo fica visível.
   ============================================================ */
.reveal-target {
    opacity: 1;
}

html.fx-ready .reveal-target:not(.is-visible) {
    opacity: 0;
}

html.fx-ready .reveal-target.is-visible {
    animation: dsRevealIn var(--duration-slow) var(--ease-out) both;
}

@keyframes dsRevealIn {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.fx-ready .reveal-target:not(.is-visible) { opacity: 1; }
    html.fx-ready .reveal-target.is-visible { animation: none; }
}

/* ============================================================
   NAV — ESTADO ATIVO (acompanha a seção visível)
   ============================================================ */
.navbar-nav a.is-active {
    color: var(--primary) !important;
    background: rgba(22, 163, 74, 0.08) !important;
}

.navbar-nav a.is-active i {
    color: var(--primary) !important;
}

/* ============================================================
   SEÇÕES TRANSLÚCIDAS
   Deixam o fundo animado respirar por trás do conteúdo mantendo
   contraste de leitura (fundo quase opaco + leve desfoque).
   ============================================================ */
.section-landing--alt {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bg-fx-host {
    position: relative;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   SELO "SEM CONTRATO DE FIDELIDADE"
   Metáfora visual para o conceito de "fechar contrato" pedido no
   redesign, usando os fatos reais do produto (sem foto de banco
   de imagens): assinatura simples, sem burocracia.
   ============================================================ */
.ds-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2rem;
}

.ds-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
}

.ds-trust-chip i {
    color: var(--primary);
}

/* ============================================================
   UTILITÁRIOS DO GUIA DE ESTILO (/design-system)
   ============================================================ */
.ds-swatch {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}