/*
 * Camada global do visual Falcon 3.0 / Instagram para as paginas internas do www.financeiro.app
 * (a home usa home-v2.css). Carregada no fim do <head>, depois dos CSS da pagina, e so muda o que e
 * compartilhado: tipografia, hero (primeira secao do <main>) no azul do 3.0, fundos suaves e chamadas finais.
 * A parte visual de cada hero (cards, celulares, imagens) continua com o estilo proprio da pagina.
 */
:root {
  --v2-blue: #0062db;
  --v2-blue-deep: #0041a3;
  --v2-sky: #cfe4ff;
  --v2-paper: #f5f6f8;
}

body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
main h1, main h2 { letter-spacing: -.035em; }

/* Azul do Falcon 3.0: luz no alto, sombra no canto oposto e grade que some nas bordas. */
main:not(.v2) > section:first-of-type,
main:not(.v2) > .seo-breadcrumb {
  position: relative;
  color: #fff;
  background-color: var(--v2-blue);
  background-image: radial-gradient(ellipse 70% 55% at 85% 0%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(ellipse 80% 60% at 0% 100%, var(--v2-blue-deep), transparent 75%);
}
main:not(.v2) > section:first-of-type { overflow: hidden; isolation: isolate; }
main:not(.v2) > section:first-of-type::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
}
/* Os brilhos decorativos antigos dos heros brigam com o azul. */
main:not(.v2) > section:first-of-type::after { display: none; }

/* Trilha de navegacao colada ao hero */
main:not(.v2) > .seo-breadcrumb { background-image: none; background-color: var(--v2-blue); border: 0; }
main:not(.v2) > .seo-breadcrumb,
main:not(.v2) > .seo-breadcrumb a { color: rgba(255,255,255,.82); }
main:not(.v2) > .seo-breadcrumb a:hover { color: #fff; }
main:not(.v2) > .seo-breadcrumb [aria-current] { color: #fff; }

/* Texto do hero (bloco *-hero-copy e equivalentes) */
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"], .hero-copy, .plans-page-hero-copy, .privacy-hero-copy) {
  color: #fff;
}
main:not(.v2) > section:first-of-type :is(h1, [class*="hero-copy"] h2) { color: #fff; }
main:not(.v2) > section:first-of-type h1 :is(span, em, strong, mark) { color: var(--v2-sky); background: none; -webkit-text-fill-color: currentColor; }
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) > p,
main:not(.v2) > section:first-of-type .hero-lead,
main:not(.v2) > section:first-of-type h1 + p { color: rgba(255,255,255,.88); }
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) > p a { color: #fff; text-decoration: underline; }

/* Etiqueta acima do titulo: pilula clara com borda branca */
main:not(.v2) > section:first-of-type :is(.eyebrow, .section-kicker, [class$="-kicker"], [class$="-eyebrow"]) {
  color: #fff; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.45); box-shadow: none;
}
main:not(.v2) > section:first-of-type .pulse-dot { background: var(--v2-sky); box-shadow: 0 0 0 4px rgba(207,228,255,.25); }

/* Botoes do hero: principal branco, secundario contornado */
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) .btn-primary {
  color: var(--v2-blue-deep); background: #fff; border-color: #fff; box-shadow: 0 14px 30px -12px rgba(0,20,60,.5);
}
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) .btn-primary:hover { background: #f1f6ff; }
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) :is(.btn-secondary, .btn-ghost, .btn-outline) {
  color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.6); box-shadow: none;
}
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) :is(.btn-secondary, .btn-ghost, .btn-outline):hover { background: rgba(255,255,255,.1); }

/* Listas de destaques do hero (trust, proof, chips): pilulas contornadas */
main:not(.v2) > section:first-of-type :is([class*="trust"], [class*="proof"], [class*="chips"], [class*="badges"]) > span {
  color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); box-shadow: none;
}
main:not(.v2) > section:first-of-type :is([class*="trust"], [class*="proof"], [class*="chips"], [class*="badges"]) > span svg { color: var(--v2-sky); }
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) :is(small, li) { color: rgba(255,255,255,.85); }

/* Fundos suaves: cinza papel do 3.0 no lugar dos gradientes azulados */
main:not(.v2) > section.section-soft:not(:first-of-type) { background: var(--v2-paper); }

/* Chamadas finais no azul do 3.0 */
main:not(.v2) :is(.cta-card, .quickbooks-cta-card, .final-cta-card, .church-cta-card) {
  background-color: var(--v2-blue);
  background-image: radial-gradient(ellipse 70% 55% at 85% 0%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(ellipse 80% 60% at 0% 100%, var(--v2-blue-deep), transparent 75%);
}

/* Linha do autor e selo de prova social dos artigos, sobre o azul */
main:not(.v2) > section:first-of-type .article-byline,
main:not(.v2) > section:first-of-type .article-byline :is(span, time) { color: rgba(255,255,255,.78); }
main:not(.v2) > section:first-of-type .article-byline a { color: #fff; }
main:not(.v2) > section:first-of-type .finance-proof {
  color: #fff; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.3); box-shadow: none;
}

/* Trilhas, textos de apoio e caixas de resposta que ficam dentro do hero em algumas paginas */
main:not(.v2) > section:first-of-type [class$="-breadcrumb"],
main:not(.v2) > section:first-of-type [class$="-breadcrumb"] :is(a, span) { color: rgba(255,255,255,.8); }
main:not(.v2) > section:first-of-type [class$="-breadcrumb"] [aria-current] { color: #fff; }
main:not(.v2) > section:first-of-type :is([class$="-lead"], [class$="-fine"]) { color: rgba(255,255,255,.88); }
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) li :is(span, b, strong, small) { color: inherit; }
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) [class$="-answer"] {
  color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); box-shadow: none;
}
main:not(.v2) > section:first-of-type :is([class*="hero-copy"], [class$="-hero-content"]) [class$="-answer"] :is(strong, b, p) { color: #fff; }

/* Excecoes de paginas especificas */
main:not(.v2) > section:first-of-type .mei-hero-lead { color: rgba(255,255,255,.88) !important; } /* o mei-guide.css usa !important */
main:not(.v2) > section:first-of-type [class$="-answer"] { color: rgba(255,255,255,.88); border-left-color: var(--v2-sky); }
main:not(.v2) > section:first-of-type [class$="-answer"] :is(strong, b) { color: #fff; }
main:not(.v2) > section:first-of-type .sheet-solution-list span { color: #fff; }
main:not(.v2) > section:first-of-type .nf-eyebrow { color: var(--v2-sky); }
/* Etiquetas que eram texto solto (display:block) viram pilula do tamanho do conteudo */
main:not(.v2) > section:first-of-type :is(.eyebrow, [class$="-eyebrow"]) { width: fit-content; border-radius: 999px; padding: 7px 13px; }
/* Imagens com mix-blend multiply (feitas para fundo branco) ficam escuras no azul: viram cartao branco */
main:not(.v2) > section:first-of-type .nf-hero-visual img { mix-blend-mode: normal; background: #fff; border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(0,15,50,.6); }
main:not(.v2) > section:first-of-type :is(.nf-visual-top, .nf-hero-visual figcaption) { color: rgba(255,255,255,.85); }
main:not(.v2) > section:first-of-type [class$="-text-link"] { color: #fff; }

/* Cartao da imagem do hero: sem a moldura azul-clara; a imagem fica direto sobre o azul (as fotos e capas ganham cantos e sombra) */
main:not(.v2) > section:first-of-type .quickbooks-hero-card { padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
main:not(.v2) > section:first-of-type .quickbooks-hero-card::before { display: none; }
main:not(.v2) > section:first-of-type .quickbooks-hero-card img { border-radius: 18px; filter: drop-shadow(0 30px 40px rgba(0,15,50,.35)); }
main:not(.v2) > section:first-of-type .quickbooks-card-footer { margin-top: 18px; }
main:not(.v2) > section:first-of-type .quickbooks-card-footer span { color: #fff; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.3); box-shadow: none; }
main:not(.v2) > section:first-of-type .quickbooks-hero-card > :not(img):not(.quickbooks-card-footer),
main:not(.v2) > section:first-of-type .quickbooks-hero-card > :not(img):not(.quickbooks-card-footer) * { color: rgba(255,255,255,.85); }
main:not(.v2) > section:first-of-type :is(.mei-dashboard-frame, .best-system-product) { border: 0; background: none; box-shadow: none; }
main:not(.v2) > section:first-of-type :is(.mei-dashboard-frame, .best-system-product)::before { display: none; }
main:not(.v2) > section:first-of-type :is(.mei-dashboard-frame, .best-system-product) img { filter: drop-shadow(0 30px 40px rgba(0,15,50,.35)); }
main:not(.v2) > section:first-of-type [class$="-actions"] .btn-primary { color: var(--v2-blue-deep); background: #fff; border-color: #fff; box-shadow: 0 14px 30px -12px rgba(0,20,60,.5); }
main:not(.v2) > section:first-of-type [class$="-actions"] :is(.btn-secondary, .btn-ghost, .btn-outline) { color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.6); box-shadow: none; }

/* Proporcoes unificadas do hero (cada pagina tinha um tamanho de titulo e de espacamento) */
main:not(.v2) > section:first-of-type { padding-top: clamp(40px, 5vw, 64px) !important; padding-bottom: clamp(48px, 5.5vw, 72px) !important; }
main:not(.v2) > section:first-of-type h1 {
  font-size: clamp(32px, 3.3vw, 50px) !important; line-height: 1.07 !important; letter-spacing: -.035em !important;
  max-width: 640px; margin-top: 18px; margin-bottom: 0; text-wrap: balance;
}
main:not(.v2) > section:first-of-type :is(.hero-lead, [class$="-lead"], [class*="hero-copy"] > p, [class$="-hero-content"] > p) {
  font-size: clamp(15.5px, 1.2vw, 17.5px) !important; line-height: 1.6 !important; max-width: 600px;
}
main:not(.v2) > section:first-of-type h1 + :is(p, .hero-lead, [class$="-lead"]) { margin-top: 18px; }
main:not(.v2) > section:first-of-type [class*="hero-grid"] { align-items: center; gap: clamp(28px, 4vw, 56px); }
main:not(.v2) > section:first-of-type :is(.hero-actions, [class$="-actions"]) { margin-top: 26px; }
main:not(.v2) > section:first-of-type :is(.hero-actions, [class$="-actions"]) .btn-lg { min-height: 50px; padding: 13px 22px; font-size: 15px; }

/* Imagens do hero retas (as rotacoes decorativas do visual antigo deixavam o notebook torto) */
main:not(.v2) > section:first-of-type :is(.mei-dashboard-frame, .competitor-browser, .omie-hero-media figure, .app-product-visual) { transform: none !important; }

/* Escala da home como padrao de todas as paginas (aprovado em 03/10/2026) */
main:not(.v2) > section:first-of-type { padding-top: clamp(44px, 5vw, 72px) !important; padding-bottom: clamp(56px, 6vw, 84px) !important; }
main:not(.v2) > section:first-of-type h1 { font-size: clamp(36px, 4.4vw, 62px) !important; line-height: 1.03 !important; letter-spacing: -.045em !important; max-width: 640px; }
main:not(.v2) > section:first-of-type :is(.hero-lead, [class$="-lead"], [class*="hero-copy"] > p, [class$="-hero-content"] > p) { font-size: clamp(16px, 1.3vw, 18.5px) !important; max-width: 580px; }
main:not(.v2) > section:first-of-type h1 + :is(p, .hero-lead, [class$="-lead"]) { margin-top: 22px; }
main:not(.v2) > section:first-of-type [class*="hero-grid"] { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; }
main:not(.v2) > section:first-of-type :is(.hero-actions, [class$="-actions"]) { margin-top: 30px; }
@media (max-width: 1120px) { main:not(.v2) > section:first-of-type [class*="hero-grid"] { grid-template-columns: 1fr; } }
@media (max-width: 640px) { main:not(.v2) > section:first-of-type h1 { font-size: clamp(32px, 9vw, 40px) !important; } }

/* Bloco de cadastro da home em todas as paginas: e-mail + botao, prova social e pilulas */
main:not(.v2) .v2-signup { margin-top: 30px; max-width: 600px; }
main:not(.v2) .v2-signup .quick-signup { margin: 0; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); box-shadow: 0 24px 50px -24px rgba(0,20,60,.6); }
main:not(.v2) .v2-signup .quick-signup .btn-primary { color: #fff !important; background: var(--v2-blue-deep) !important; border-color: var(--v2-blue-deep) !important; box-shadow: none !important; }
main:not(.v2) .v2-proof { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
main:not(.v2) .v2-proof .proof-avatars span { border-color: var(--v2-blue); }
main:not(.v2) .v2-proof strong { display: block; color: #fff; font-size: 15px; line-height: 1.3; }
main:not(.v2) .v2-proof small { display: block; color: rgba(255,255,255,.8) !important; font-size: 13.5px; }
main:not(.v2) .v2-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
main:not(.v2) .v2-chips li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); color: #fff !important; font-size: 14px; font-weight: 650; }
main:not(.v2) .v2-chips svg { width: 16px; height: 16px; color: var(--v2-sky); fill: none; stroke: currentColor; stroke-width: 2; }

/* Heros centralizados (planos): titulo e texto no eixo da pagina, titulo mais largo */
main:not(.v2) > section:first-of-type.plans-page-hero :is(h1, p) { margin-left: auto; margin-right: auto; }
main:not(.v2) > section:first-of-type.plans-page-hero h1 { max-width: 900px; }
main:not(.v2) > section:first-of-type.plans-page-hero p { max-width: 720px; }