/* ==========================================================================
   FELIPE FRANCO SAÚDE — componentes do site público e ponte de modo escuro.
   Paleta: azul elétrico #1FB6FF · azul profundo #0078C8 · grafite #0B0F14 · dourado #FFAF00
   ========================================================================== */
:root {
    --ff-blue: #1FB6FF;
    --ff-sky: #5CC7FF;
    --ff-deep: #0078C8;
    --ff-deeper: #0066B0;
    --ff-ink: #0B0F14;
    --ff-850: #11181F;
    --ff-800: #172029;
    --ff-700: #1F2A36;
    --ff-gold: #FFAF00;
    --ff-surface: #FFFFFF;
    --ff-surface-2: #F6F9FC;
    --ff-text: #0B0F14;
    --ff-muted: #526070;
    --ff-line: #E2E8F0;
    --ff-radius: 1.5rem;
}
html.dark {
    --ff-surface: #11181F;
    --ff-surface-2: #0D1319;
    --ff-text: #F1F5F9;
    --ff-muted: #94A3B8;
    --ff-line: rgba(255, 255, 255, 0.09);
    color-scheme: dark;
}

body.ff-body { font-family: Manrope, system-ui, sans-serif; }
.font-display, .ff-headline, h1, h2, h3 { font-family: Sora, Manrope, system-ui, sans-serif; }
.ff-headline { font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; }
.ff-accent { color: var(--ff-deep); }
html.dark .ff-accent, .ff-on-dark .ff-accent { color: var(--ff-blue); }
::selection { background: rgba(31, 182, 255, 0.35); }

/* ---------- botões ---------- */
.ff-btn-primary, .ff-btn-ghost, .ff-btn-dark {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 9999px; padding: 0.95rem 1.6rem;
    font-weight: 700; line-height: 1.1; white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ff-btn-primary { background: var(--ff-blue); color: var(--ff-ink); box-shadow: 0 14px 34px rgba(31, 182, 255, 0.28); }
.ff-btn-primary:hover { background: var(--ff-sky); transform: translateY(-1px); box-shadow: 0 18px 40px rgba(31, 182, 255, 0.38); }
.ff-btn-ghost { border: 1px solid var(--ff-line); color: var(--ff-text); background: transparent; }
.ff-btn-ghost:hover { border-color: var(--ff-blue); color: var(--ff-deep); }
html.dark .ff-btn-ghost:hover { color: var(--ff-sky); }
.ff-btn-ghost-light { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.ff-btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.ff-btn-dark { background: var(--ff-ink); color: #fff; }
.ff-btn-dark:hover { background: var(--ff-800); }
html.dark .ff-btn-dark { background: #fff; color: var(--ff-ink); }
.ff-btn-primary:focus-visible, .ff-btn-ghost:focus-visible, .ff-icon-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(31, 182, 255, 0.65); outline-offset: 2px;
}

.ff-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    height: 2.6rem; min-width: 2.6rem; padding: 0 .6rem; border-radius: 9999px;
    border: 1px solid var(--ff-line); color: var(--ff-text); background: transparent;
    transition: border-color .15s, color .15s, background-color .15s;
}
.ff-icon-btn:hover { border-color: var(--ff-blue); color: var(--ff-deep); }
html.dark .ff-icon-btn:hover { color: var(--ff-sky); }

/* ---------- navegação ---------- */
.ff-navlink { position: relative; padding: .4rem 0; transition: color .15s; }
.ff-navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--ff-blue); transform: scaleX(0); transition: transform .2s ease; }
.ff-navlink:hover::after, .ff-navlink.is-active::after { transform: scaleX(1); }
.ff-mobile-link { display: block; border-radius: 1rem; padding: .8rem 1rem; font-weight: 600; color: var(--ff-text); }
.ff-mobile-link:hover, .ff-mobile-link.is-active { background: rgba(31, 182, 255, 0.10); color: var(--ff-deep); }
html.dark .ff-mobile-link:hover, html.dark .ff-mobile-link.is-active { color: var(--ff-sky); }
.ff-header.is-scrolled { box-shadow: 0 10px 30px rgba(11, 15, 20, 0.06); }
html.dark .ff-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.ff-dropdown {
    position: absolute; right: 0; top: calc(100% + .5rem); min-width: 12rem; z-index: 60;
    border-radius: 1.1rem; border: 1px solid var(--ff-line); background: var(--ff-surface);
    padding: .4rem; box-shadow: 0 24px 50px rgba(11, 15, 20, 0.16);
}
.ff-dropdown-item { display: flex; align-items: center; gap: .5rem; border-radius: .8rem; padding: .6rem .75rem; font-size: .9rem; font-weight: 600; color: var(--ff-text); }
.ff-dropdown-item:hover, .ff-dropdown-item.is-active { background: rgba(31, 182, 255, 0.10); }

/* ---------- seções e cartões ---------- */
.ff-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ff-deep); }
.ff-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 9999px; background: var(--ff-blue); box-shadow: 0 0 0 4px rgba(31,182,255,.18); }
html.dark .ff-eyebrow, .ff-on-dark .ff-eyebrow { color: var(--ff-sky); }
.ff-card { border-radius: var(--ff-radius); border: 1px solid var(--ff-line); background: var(--ff-surface); box-shadow: 0 18px 40px rgba(11, 15, 20, 0.05); transition: border-color .2s, transform .2s, box-shadow .2s; }
.ff-card-hover:hover { border-color: rgba(31, 182, 255, 0.55); transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 120, 200, 0.12); }
html.dark .ff-card { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
.ff-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; padding: .3rem .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.ff-badge-blue { background: rgba(31, 182, 255, 0.12); color: var(--ff-deeper); }
html.dark .ff-badge-blue { color: var(--ff-sky); background: rgba(31, 182, 255, 0.14); }
.ff-badge-gold { background: rgba(255, 175, 0, 0.14); color: #8A5A00; }
html.dark .ff-badge-gold { color: var(--ff-gold); }
.ff-icon-tile { display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 1rem; background: rgba(31, 182, 255, 0.12); color: var(--ff-deep); }
html.dark .ff-icon-tile { color: var(--ff-sky); }
.ff-section-alt { background: var(--ff-surface-2); }

/* ---------- hero (estrutura FF: imagem de fundo + lente + texto à esquerda) ---------- */
.ff-hero { position: relative; overflow: hidden; background: var(--ff-ink); isolation: isolate; }
.ff-hero-media { position: absolute; inset: 0; z-index: -2; }
.ff-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.ff-hero-lens { position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 70% 85% at 22% 50%, rgba(11,15,20,.92) 0%, rgba(11,15,20,.78) 55%, rgba(11,15,20,.45) 100%),
        linear-gradient(180deg, rgba(11,15,20,.35) 0%, rgba(11,15,20,.15) 45%, rgba(11,15,20,.85) 100%); }
.ff-hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px; mask-image: linear-gradient(90deg, #000 0%, transparent 75%); }
.ff-hero-glow { position: absolute; z-index: -1; width: 38rem; height: 38rem; border-radius: 9999px; filter: blur(90px); opacity: .28; background: var(--ff-blue); left: -14rem; bottom: -20rem; pointer-events: none; }
.ff-hero h1 { text-shadow: 0 2px 22px rgba(11, 15, 20, 0.45); }
.ff-hero .ff-accent { color: var(--ff-blue); }
.ff-trust-item { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 600; color: #CBD5E1; }
.ff-trust-item svg { flex-shrink: 0; color: var(--ff-blue); }
.ff-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(31,182,255,.6), transparent); }

/* ---------- páginas internas: cabeçalho ---------- */
.ff-page-hero { position: relative; overflow: hidden; background: var(--ff-ink); color: #fff; isolation: isolate; }
.ff-page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(31,182,255,.25), transparent 60%), radial-gradient(ellipse 50% 80% at 0% 100%, rgba(0,120,200,.25), transparent 60%); }
.ff-page-hero .ff-accent { color: var(--ff-blue); }

/* ---------- pilares ---------- */
.ff-bar { height: .5rem; border-radius: 9999px; background: rgba(148,163,184,.25); overflow: hidden; }
.ff-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ff-deep), var(--ff-blue)); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.ff-bar.is-visible > span, .ff-reveal.is-visible .ff-bar > span { transform: scaleX(1); }

/* ---------- FAQ ---------- */
.ff-faq summary { list-style: none; cursor: pointer; }
.ff-faq summary::-webkit-details-marker { display: none; }
.ff-faq .ff-faq-icon { transition: transform .2s ease; }
.ff-faq[open] .ff-faq-icon { transform: rotate(45deg); }

/* ---------- formulários do site ---------- */
.ff-input { width: 100%; border-radius: 1rem; border: 1px solid var(--ff-line); background: var(--ff-surface); color: var(--ff-text); padding: .85rem 1rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.ff-input::placeholder { color: #94A3B8; }
.ff-input:focus { border-color: var(--ff-blue); box-shadow: 0 0 0 4px rgba(31, 182, 255, 0.18); }
.ff-label { display: block; margin-bottom: .45rem; font-size: .88rem; font-weight: 700; color: var(--ff-text); }

/* ---------- rodapé ---------- */
.ff-footer-title { font-family: Sora, Manrope, sans-serif; font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ff-footer-link { color: #94A3B8; transition: color .15s; }
.ff-footer-link:hover { color: #fff; }
.ff-social { display: inline-flex; height: 2.6rem; width: 2.6rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255,255,255,.12); color: #CBD5E1; transition: all .15s; }
.ff-social:hover { border-color: var(--ff-blue); color: var(--ff-blue); }

/* ---------- aviso de cookies ---------- */
.ff-cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70; margin: 0 auto; max-width: 56rem;
    display: flex; flex-direction: column; gap: 1rem; border-radius: 1.4rem; border: 1px solid var(--ff-line);
    background: var(--ff-surface); padding: 1rem 1.25rem; box-shadow: 0 30px 70px rgba(11, 15, 20, 0.22); }
.ff-cookie:not(.hidden) { display: flex; }
@media (min-width: 640px) { .ff-cookie { flex-direction: row; align-items: center; } }

/* ---------- animação de entrada (respeita redução de movimento) ---------- */
.ff-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.ff-reveal.is-visible { opacity: 1; transform: none; }
.no-js .ff-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ff-reveal, .ff-bar > span { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ff-btn-primary:hover, .ff-card-hover:hover { transform: none; }
}

/* ---------- celular do app ---------- */
.ff-phone { position: relative; width: 17rem; aspect-ratio: 9 / 18.5; border-radius: 2.6rem; padding: .7rem; background: linear-gradient(160deg, #2A3542, #0B0F14); box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255,255,255,.08); }
.ff-phone-screen { height: 100%; border-radius: 2rem; overflow: hidden; background: #0B0F14; }

/* ==========================================================================
   Ponte de modo escuro para telas herdadas (login, cadastro, erros, legais).
   Só atua dentro de [data-legacy]; telas novas usam variantes dark: nativas.
   ========================================================================== */
html.dark [data-legacy] { color: #E2E8F0; }
html.dark [data-legacy] .bg-white, html.dark [data-legacy] .bg-cloud, html.dark [data-legacy] .bg-slate-50, html.dark [data-legacy] .bg-gray-50, html.dark [data-legacy] .bg-slate-100 { background-color: #11181F !important; }
html.dark [data-legacy] section.bg-white, html.dark [data-legacy] section.bg-slate-50, html.dark [data-legacy] section.bg-cloud { background-color: #0B0F14 !important; }
html.dark [data-legacy] .bg-ffs-900, html.dark [data-legacy] .bg-ink { background-color: #172029 !important; }
html.dark [data-legacy] .bg-ffs-200, html.dark [data-legacy] .bg-brand-50, html.dark [data-legacy] .bg-brand-100, html.dark [data-legacy] .bg-ffs-200\/30, html.dark [data-legacy] .bg-ffs-200\/10 { background-color: rgba(31, 182, 255, 0.10) !important; }
html.dark [data-legacy] .text-ffs-900, html.dark [data-legacy] .text-slate-900, html.dark [data-legacy] .text-slate-800, html.dark [data-legacy] .text-ink, html.dark [data-legacy] .text-gray-900, html.dark [data-legacy] .text-brand-900 { color: #F1F5F9 !important; }
html.dark [data-legacy] .text-slate-700, html.dark [data-legacy] .text-gray-700 { color: #CBD5E1 !important; }
html.dark [data-legacy] .text-slate-600, html.dark [data-legacy] .text-slate-500, html.dark [data-legacy] .text-gray-600, html.dark [data-legacy] .text-gray-500 { color: #94A3B8 !important; }
html.dark [data-legacy] .text-ffs-700, html.dark [data-legacy] .text-ffs-600, html.dark [data-legacy] .text-brand-700, html.dark [data-legacy] .text-brand-600 { color: #5CC7FF !important; }
html.dark [data-legacy] .border-slate-200, html.dark [data-legacy] .border-slate-300, html.dark [data-legacy] .border-slate-100, html.dark [data-legacy] .border-gray-200 { border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark [data-legacy] .divide-slate-200 > * + *, html.dark [data-legacy] .divide-slate-100 > * + * { border-color: rgba(255, 255, 255, 0.08) !important; }
html.dark [data-legacy] .shadow-card, html.dark [data-legacy] .shadow-soft, html.dark [data-legacy] .shadow-sm { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important; }
html.dark [data-legacy] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.dark [data-legacy] select, html.dark [data-legacy] textarea { background-color: #0D1319 !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.14) !important; }
html.dark [data-legacy] input::placeholder, html.dark [data-legacy] textarea::placeholder { color: #64748B !important; }
html.dark [data-legacy] .bg-emerald-50, html.dark [data-legacy] .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark [data-legacy] .bg-amber-50, html.dark [data-legacy] .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark [data-legacy] .bg-rose-50, html.dark [data-legacy] .bg-red-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
html.dark [data-legacy] .text-emerald-800, html.dark [data-legacy] .text-emerald-700, html.dark [data-legacy] .text-green-800 { color: #6EE7B7 !important; }
html.dark [data-legacy] .text-amber-800, html.dark [data-legacy] .text-amber-900, html.dark [data-legacy] .text-amber-700 { color: #FCD34D !important; }
html.dark [data-legacy] .text-rose-800, html.dark [data-legacy] .text-rose-700, html.dark [data-legacy] .text-red-700, html.dark [data-legacy] .text-red-800 { color: #FDA4AF !important; }
html.dark [data-legacy] a.bg-white, html.dark [data-legacy] button.bg-white { background-color: #FFFFFF !important; color: #0B0F14 !important; }
html.dark [data-legacy] .bg-ffs-900 .text-ffs-900, html.dark [data-legacy] button.bg-white.text-ffs-900 { color: #0B0F14 !important; }
html.dark [data-legacy] table thead { background-color: rgba(255,255,255,.03); }

/* Barra superior do painel no modo escuro */
html.dark [data-legacy] header .bg-white, html.dark [data-legacy] header button.bg-white { background-color: #11181F !important; color: #E2E8F0 !important; border-color: rgba(255,255,255,.12) !important; }
html.dark [data-legacy] .border-brand-100\/80, html.dark [data-legacy] .border-brand-100\/50, html.dark [data-legacy] .border-brand-100 { border-color: rgba(255,255,255,.10) !important; }
html.dark [data-legacy] .text-brand-900 { color: #E2E8F0 !important; }
html.dark [data-legacy] .bg-brand-50, html.dark [data-legacy] .bg-brand-50\/40, html.dark [data-legacy] .bg-brand-50\/20 { background-color: rgba(31,182,255,.08) !important; }
html.dark [data-legacy] .ff-page-hero .text-white, html.dark [data-legacy] .ff-page-hero h2 { color: #fff !important; }

/* ---------- seletor Mensal/Anual dos planos ---------- */
[data-ff-billing="annual"] [data-billing="monthly"], [data-ff-billing="monthly"] [data-billing="annual"] { display: none; }
.ff-billing-btn { color: #475569; transition: background-color .2s, color .2s; }
.ff-billing-btn[aria-checked="true"] { background: #0B0F14; color: #fff; }
.dark .ff-billing-btn { color: #cbd5e1; }
.dark .ff-billing-btn[aria-checked="true"] { background: #1FB6FF; color: #0B0F14; }