/* =========================================================
   SouCorretor — Design System
   Tokens extraídos da referência visual (navy / amber / whatsapp).
   ========================================================= */

:root {
    /* Base */
    --background:        #ffffff;
    --background-rgb:    255 255 255;
    --foreground:        #14181f;
    --foreground-rgb:    20 24 31;
    --card:              #ffffff;
    --card-rgb:          255 255 255;
    --secondary:         #f4f2ee;
    --secondary-rgb:     244 242 238;
    --muted-foreground:  #6b7280;
    --muted-foreground-rgb: 107 114 128;
    --border:            #e6e3dd;
    --border-rgb:        230 227 221;

    /* Navy — fundo das seções escuras e da identidade */
    --navy:              #16233b;
    --navy-rgb:          22 35 59;
    --navy-foreground:   #f5f3ef;
    --navy-foreground-rgb: 245 243 239;
    --navy-muted:        #9aa5b8;
    --navy-muted-rgb:    154 165 184;

    /* Amber — cor de ação (CTAs, destaques) */
    --amber:             #f5a524;
    --amber-rgb:         245 165 36;
    --amber-hover:       #e0940f;
    --amber-hover-rgb:   224 148 15;
    --amber-foreground:  #1a1305;
    --amber-foreground-rgb: 26 19 5;

    /* WhatsApp */
    --whatsapp:            #25d366;
    --whatsapp-rgb:        37 211 102;
    --whatsapp-foreground: #05300f;
    --whatsapp-foreground-rgb: 5 48 15;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    background: var(--background);
    color: var(--foreground);
}

/* ---------- Scroll reveal ----------
   .reveal começa deslocado e invisível; o IntersectionObserver
   em site.js adiciona .is-visible. Se o JS falhar, o fallback
   no fim do arquivo garante que nada fique invisível. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.16,1,.32,1),
                transform .6s cubic-bezier(.16,1,.32,1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Fallback: sem JS, o conteúdo aparece normalmente. */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

/* ---------- Float (cards suspensos do hero) ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.animate-float { animation: float 6s ease-in-out infinite; }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal        { opacity: 1; transform: none; transition: none; }
    .animate-float { animation: none; }
    html           { scroll-behavior: auto; }
}

/* ---------- Utilitários ---------- */
.text-balance { text-wrap: balance; }

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- Fallback das cores da marca ----------
   Mantém a landing colorida mesmo se o Tailwind CDN demorar para aplicar
   a configuração personalizada. As classes comuns continuam a cargo do Tailwind. */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-secondary { background-color: var(--secondary); }
.bg-navy { background-color: var(--navy); }
.bg-amber { background-color: var(--amber); }
.bg-whatsapp { background-color: var(--whatsapp); }

.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-navy-foreground { color: var(--navy-foreground); }
.text-navy-muted { color: var(--navy-muted); }
.text-amber { color: var(--amber); }
.text-amber-foreground { color: var(--amber-foreground); }
.text-whatsapp { color: var(--whatsapp); }
.text-whatsapp-foreground { color: var(--whatsapp-foreground); }

.border-border { border-color: var(--border); }
.border-navy { border-color: var(--navy); }
.border-amber { border-color: var(--amber); }

.hover\:bg-amber-hover:hover { background-color: var(--amber-hover); }
.hover\:bg-secondary:hover { background-color: var(--secondary); }
.hover\:text-foreground:hover { color: var(--foreground); }

.bg-navy\/90 { background-color: rgb(var(--navy-rgb) / .90); }
.bg-navy\/30 { background-color: rgb(var(--navy-rgb) / .30); }
.bg-card\/95 { background-color: rgb(var(--card-rgb) / .95); }
.bg-background\/80 { background-color: rgb(var(--background-rgb) / .80); }
.bg-secondary\/70 { background-color: rgb(var(--secondary-rgb) / .70); }
.bg-amber\/15 { background-color: rgb(var(--amber-rgb) / .15); }
.bg-whatsapp\/15 { background-color: rgb(var(--whatsapp-rgb) / .15); }
.text-navy-foreground\/90 { color: rgb(var(--navy-foreground-rgb) / .90); }
.text-navy-foreground\/80 { color: rgb(var(--navy-foreground-rgb) / .80); }