/* ==========================================================================
   fideon — Site institucional (v3: home editorial + bento + comparativo)
   Design system: violeta fideon (mono-acento), tipografia Space Grotesk/Inter
   Glows via radial-gradient (sem filter:blur — leve até em celular fraco)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTES AUTO-HOSPEDADAS (site/fonts/, licença OFL — ver LICENCA.md lá)

   Antes vinham do Google Fonts, mas a CSP do site (font-src 'self') bloqueava
   e todo mundo via a fonte reserva. Hospedar aqui resolve a CSP, tira a
   dependência externa (privacidade: o Google não vê mais cada visita) e ainda
   carrega mais rápido (mesma origem, sem handshake extra). São fontes
   VARIÁVEIS: um arquivo por família/subset cobre todos os pesos usados.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../fonts/space-grotesk-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../fonts/space-grotesk-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Cores */
    --ink: #14122b;
    --ink-soft: #4b4868;
    --ink-mute: #6b6988;   /* escurecido p/ AA como texto sobre paper E paper-warm */
    --paper: #faf9f6;
    --paper-warm: #f4f1ea;
    --white: #ffffff;
    --primary: #5b3ae0;
    --primary-deep: #3d33b8;
    --primary-ghost: #eeecfc;
    /* "gold" é nome LEGADO: hoje é o VIOLETA SECUNDÁRIO (mais claro que o
       primário) — mantém vida nos gradientes primary→gold sem sair da marca. */
    --gold: #8668ff;   /* clareado levemente p/ AA: texto escuro no botão E o próprio violeta sobre fundo escuro passam ≥4.5 */
    --gold-deep: #4a2ec0;
    --gold-soft: #eeecfc;

    /* Acento da página. A marca é MONO-VIOLETA: o padrão e todas as subpáginas
       usam o mesmo acento (o .page-* só reaproveita os componentes, sem trocar
       de cor). */
    --accent: #5b3ae0;
    --accent-deep: #3d33b8;
    --accent-soft: #eeecfc;
    --accent-rgb: 91, 58, 224;
    /* Variante clara do acento, para uso SOBRE FUNDO ESCURO (hero, CTA, seções
       escuras): o "violeta claro" do manual (#8B6FFF). */
    --accent-bright: #9278ff;
    --green: #247b53;   /* escurecido p/ AA como texto no claro e sobre o green-soft */
    --green-soft: #e6f5ee;
    --red: #ca2d2d;     /* escurecido p/ AA como texto no claro E sobre o red-soft */
    --red-soft: #fdeaea;
    --dark-bg: #0e0c22;
    --dark-card: rgba(255, 255, 255, 0.06);
    --dark-border: rgba(255, 255, 255, 0.12);

    /* Tipografia fluida */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-sm: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
    --text-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
    --text-h2: clamp(1.75rem, 1.3rem + 2.2vw, 2.9rem);
    --text-h1: clamp(2.2rem, 1.4rem + 4vw, 4.3rem);

    /* Espaçamento fluido */
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: clamp(2rem, 1.5rem + 2vw, 3rem);
    --s-6: clamp(2.5rem, 2rem + 3vw, 4rem);
    --s-7: clamp(4rem, 3rem + 5vw, 7rem);
    --gutter: clamp(1rem, 0.5rem + 3vw, 2rem);

    /* Raios e sombras */
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(20, 18, 43, 0.06);
    --shadow-md: 0 8px 30px rgba(20, 18, 43, 0.1);
    --shadow-lg: 0 20px 60px rgba(20, 18, 43, 0.16);

    --transition: 300ms cubic-bezier(0.25, 0.6, 0.3, 1);
    --header-h: 76px;

    /* Grão fotográfico sutil (SVG estático — sem custo de runtime) */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; }

button, a, summary, input[type="range"] { touch-action: manipulation; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: var(--s-2);
    z-index: 999;
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
    padding: 0.8em 1.4em;
    border-radius: 0 0 12px 12px;
    transition: top 200ms ease;
}

.skip-link:focus { top: 0; }

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Utilitários ---------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section { padding: var(--s-7) 0; }

.section-head {
    max-width: 680px;
    margin: 0 auto var(--s-6);
    text-align: center;
}

.section-head--left { text-align: left; margin-left: 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: var(--s-2);
}

.eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.eyebrow--center::after {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

/* Destaque nos títulos = PESO + COR (nunca itálico: Space Grotesk não tem
   itálico real, só o oblíquo falso). O font-style:normal vence o padrão do
   navegador para <em> e vale p/ todos os "h1 em"/"h2 em", inclusive heróis. */
h2 em, h1 em { font-style: normal; font-weight: 700; color: var(--gold-deep); }

p { text-wrap: pretty; }

.lead { font-size: var(--text-lead); color: var(--ink-soft); }

.highlight {
    background: linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%);
    padding: 0 0.1em;
}

/* Grão sobre seções escuras */
.grain { position: relative; }

.grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.grain > * { position: relative; z-index: 1; }

/* ---------- Botões ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    min-height: 48px;
    padding: 0.8em 1.8em;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
    will-change: transform;
}

@media (hover: hover) {
    .btn-primary::after, .btn-gold::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
        transform: translateX(-110%);
        transition: transform 600ms ease;
        pointer-events: none;
    }

    .btn-primary:hover::after, .btn-gold:hover::after { transform: translateX(110%); }
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(91, 78, 224, 0.35);
}

.btn-primary:hover { background: var(--primary-deep); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(91, 78, 224, 0.45); }

.btn-gold {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.4);
}

.btn-gold:hover { background: #8b6fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124, 92, 255, 0.5); }

.btn-ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }

.btn-lg { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem); padding: 0.95em 2.1em; }

.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(4px); }

.btn[disabled] { opacity: 0.7; cursor: wait; transform: none; }

/* ---------- Header ---------- */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: var(--s-2) 0;
    transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}

.header.scrolled {
    background: rgba(14, 12, 34, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    padding: 0.6rem 0;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* Topo AINDA NÃO rolado: ele é transparente e agora repousa sobre o hero CLARO,
   então os links e o botão de contorno vão em tinta. Depois da rolagem o topo
   fica escuro (.scrolled) e tudo volta ao branco, como sempre foi.
   ⚠️ SÓ no desktop: abaixo de 900px o menu vira uma tela cheia ESCURA (ver a
   media query lá embaixo) — links em tinta ali sumiriam no próprio fundo. */
@media (min-width: 900px) {
    .header:not(.scrolled) .nav > a:not(.btn),
    .header:not(.scrolled) .nav-drop-btn { color: var(--ink-soft); }
    .header:not(.scrolled) .nav > a:not(.btn):hover,
    .header:not(.scrolled) .nav-drop-btn:hover,
    .header:not(.scrolled) .nav-item.open .nav-drop-btn { color: var(--ink); }
    .header:not(.scrolled) .nav > a:not(.btn)::after { background: var(--primary); }
    .header:not(.scrolled) .btn-ghost { color: var(--ink); border-color: rgba(20, 18, 43, 0.25); }
    .header:not(.scrolled) .btn-ghost:hover { color: var(--primary-deep); border-color: var(--primary); background: rgba(91, 58, 224, 0.06); }
}

/* O botão do menu no celular: FECHADO ele repousa sobre o hero claro (vai em
   tinta); ABERTO ele fica por cima da tela escura do menu e volta ao branco —
   por isso o estado vem do próprio aria-expanded, não de uma classe nova. */
.header:not(.scrolled) .nav-toggle[aria-expanded="false"] {
    background: rgba(20, 18, 43, 0.05);
    border-color: rgba(20, 18, 43, 0.15);
    color: var(--ink);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
    font-weight: 600;
    color: var(--white);
}

/* Logo fideon (SVG horizontal). O topo tem DOIS fundos: transparente sobre o
   hero claro (entra a versão em tinta) e escuro depois da rolagem (entra a
   branca). O rodapé é sempre escuro — lá vale a branca. */
.logo-fideon {
    height: 30px;
    width: auto;
    display: block;
}

.header .logo-fideon--branca,
.header.scrolled .logo-fideon--tinta { display: none; }
.header.scrolled .logo-fideon--branca { display: block; }
.footer .logo-fideon--tinta { display: none; }

.logo-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--gold));
    display: grid;
    place-items: center;
    color: var(--white);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(91, 78, 224, 0.4);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.6vw, 2.2rem); }

.nav > a:not(.btn), .nav-drop-btn {
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--transition);
    position: relative;
    padding: 0.5em 0;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.nav > a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transition: width var(--transition);
}

.nav > a:not(.btn):hover { color: var(--white); }
.nav > a:not(.btn):hover::after { width: 100%; }

.nav-drop-btn:hover { color: var(--white); }

.nav-drop-btn .caret { transition: transform var(--transition); }

.nav-item { position: relative; }

.nav-item.open .nav-drop-btn { color: var(--white); }
.nav-item.open .nav-drop-btn .caret { transform: rotate(180deg); }

.nav-drop {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);

    /* DUAS COLUNAS — e o motivo é altura, não estética.
       Com 7 funcionalidades empilhadas, o menu passava de 400px de altura e era
       CORTADO em tela baixa (notebook, ou navegador com barra de favoritos e
       várias abas). Em duas colunas são 4 linhas em vez de 7: quase metade da
       altura, e o menu volta a caber inteiro.
       `minmax(0, 1fr)` (em vez de só `1fr`) impede que um texto longo estique a
       coluna além do espaço disponível. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem;

    /* Largura: confortável para dois itens lado a lado, mas nunca maior que a
       janela — em tela estreita o menu encolhe em vez de vazar para fora. */
    min-width: 600px;
    max-width: min(660px, calc(100vw - 2.5rem));

    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(20, 18, 43, 0.08);
    padding: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s 220ms;
    z-index: 110;
}

.nav-item.open .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
}

.nav-drop::before {
    content: '';
    position: absolute;
    top: -7px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: var(--white);
    border-left: 1px solid rgba(20, 18, 43, 0.08);
    border-top: 1px solid rgba(20, 18, 43, 0.08);
}

.nav-drop a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    transition: background var(--transition);
}

/* São 7 itens — número ímpar. Sem isto, o último ficaria sozinho numa coluna com
   um vazio ao lado, parecendo erro de montagem. Ocupando a linha inteira, ele
   vira destaque (é justamente o que tem o selo "novo") e o menu fecha alinhado. */
.nav-drop a:last-child { grid-column: 1 / -1; }

.nav-drop a:hover { background: var(--primary-ghost); }

.nav-drop .d-ico {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--primary-ghost);
    color: var(--primary);
    display: grid;
    place-items: center;
}

.nav-drop a:hover .d-ico { background: var(--primary); color: var(--white); }

.nav-drop small { display: block; font-weight: 500; color: var(--ink-mute); font-size: 0.78rem; }

.nav-drop .drop-tag {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--gold-soft);
    padding: 0.25em 0.7em;
    border-radius: 999px;
    flex-shrink: 0;
}

.nav .btn { min-height: 42px; padding: 0.5em 1.4em; font-size: 0.9rem; }

.nav-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    width: 46px; height: 46px;
    border-radius: 12px;
    place-items: center;
    color: var(--white);
    transition: background var(--transition);
}

.nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- Hero ---------- */
/* ENTRADA CLARA (24/08/2026) — decisão do dono: para igreja, o primeiro contato
   precisa ACOLHER, não impressionar. O hero era quase preto e formava, nos três
   primeiros segundos, a impressão de "SaaS pesado".
   O escuro NÃO some do site: ele continua ancorando a TRILHA DE AUDITORIA (onde
   a mensagem é segurança) e o RODAPÉ — dão ritmo à página e seriedade onde ela
   pesa. Os brilhos violeta continuam, agora em alfa baixo sobre o papel quente. */
.hero {
    position: relative;
    background:
        radial-gradient(ellipse 900px 620px at 82% -12%, rgba(91, 58, 224, 0.16), transparent 62%),
        radial-gradient(ellipse 700px 500px at -5% 112%, rgba(134, 104, 255, 0.12), transparent 60%),
        var(--paper-warm);
    color: var(--ink);
    padding: calc(var(--header-h) + clamp(2.5rem, 2rem + 4vw, 5.5rem)) 0 var(--s-7);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 70%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    align-items: center;
}

.hero-copy { min-width: 0; }   /* impede que conteúdo largo estoure a coluna do grid */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: clamp(0.72rem, 0.68rem + 0.3vw, 0.85rem);
    font-weight: 700;
    padding: 0.45em 1.1em;
    border-radius: 999px;
    background: rgba(91, 58, 224, 0.10);
    border: 1px solid rgba(91, 58, 224, 0.28);
    color: var(--primary-deep);
    margin-bottom: var(--s-3);
}

.hero-badge .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.6); }
    50% { box-shadow: 0 0 0 7px rgba(124, 92, 255, 0); }
}

.hero h1 {
    font-size: var(--text-h1);
    margin-bottom: var(--s-3);
}

/* Sobre o papel claro, o violeta PRIMÁRIO (não o secundário claro): ele ganha
   presença e passa em AA com folga — o #8668ff só existia para fundo escuro. */
.hero h1 em { font-weight: 700; color: var(--primary); }

/* risco animado que acompanha a quebra de linha (box-decoration-break) */
.hero .lead {
    color: var(--ink-soft);
    max-width: 560px;
    margin-bottom: var(--s-4);
}

.hero .lead strong { color: var(--ink); }

.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }

.hero-guarantee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: var(--s-5);
}

.hero-guarantee svg { flex-shrink: 0; color: var(--green); }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-3);
    max-width: 580px;
}

.hero-stat {
    border-left: 2px solid rgba(91, 58, 224, 0.35);
    padding-left: var(--s-2);
}

.hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
    color: var(--primary);
}

.hero-stat span { font-size: 0.85rem; color: var(--ink-mute); line-height: 1.4; display: inline-block; }

/* Mockup do painel (CSS puro, com perspectiva) */
.hero-visual {
    position: relative;
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
    padding: 30px 8px 32px;
    perspective: 1400px;
}

/* O painel é a FOTO do sistema (que é escuro por dentro): com o hero claro, ele
   deixa de ser uma superfície translúcida sobre o fundo e vira um OBJETO sólido
   flutuando — o contraste faz o produto saltar, e tudo que está dentro dele
   (rótulos brancos, gráfico, chips) continua legível sem redesenho. */
.mockup {
    background:
        radial-gradient(ellipse 420px 320px at 15% -10%, rgba(91, 58, 224, 0.38), transparent 65%),
        var(--dark-bg);
    /* Recolore o texto DE DENTRO: o hero agora é claro e os valores do painel
       (que não declaram cor própria) herdariam tinta escura sobre fundo escuro. */
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    padding: clamp(0.9rem, 0.6rem + 1.5vw, 1.4rem);
    box-shadow:
        0 30px 70px rgba(20, 18, 43, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: rotateY(-7deg) rotateX(3deg);
    transition: transform 600ms cubic-bezier(0.25, 0.6, 0.3, 1);
    animation: float 8s ease-in-out infinite;
}

@media (hover: hover) {
    .hero-visual:hover .mockup { transform: rotateY(0deg) rotateX(0deg); }
}

@keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

.mockup-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

.mockup-bar { display: flex; gap: 6px; }
.mockup-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.mockup-bar i:first-child { background: #ff6b6b; }
.mockup-bar i:nth-child(2) { background: var(--gold); }
.mockup-bar i:nth-child(3) { background: var(--green); }

.mockup-url {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.3em 1em;
    display: flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
    overflow: hidden;
}

.mockup-url svg { flex-shrink: 0; color: #5fd39c; }

.mockup-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 0.4rem + 1vw, 0.9rem); }

.mockup-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    padding: clamp(0.7rem, 0.5rem + 1vw, 1rem);
    min-width: 0;
}

.mockup-card.wide { grid-column: span 2; }

.mockup-label {
    font-size: clamp(0.58rem, 0.52rem + 0.3vw, 0.68rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-value { font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.4rem); font-weight: 600; }

.mockup-value.green { color: #5fd39c; }

.mockup-trend { font-size: 0.72rem; color: #5fd39c; font-weight: 700; }

.mockup-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: clamp(52px, 40px + 4vw, 74px);
    margin-top: var(--s-1);
}

.mockup-chart b {
    flex: 1;
    background: linear-gradient(180deg, var(--primary), rgba(91, 78, 224, 0.3));
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    animation: grow 1.2s cubic-bezier(0.25, 0.6, 0.3, 1) both;
}

.mockup-chart b:nth-child(odd) { background: linear-gradient(180deg, var(--gold), rgba(124, 92, 255, 0.25)); }

.mockup-chart b:nth-child(2) { animation-delay: 80ms; }
.mockup-chart b:nth-child(3) { animation-delay: 160ms; }
.mockup-chart b:nth-child(4) { animation-delay: 240ms; }
.mockup-chart b:nth-child(5) { animation-delay: 320ms; }
.mockup-chart b:nth-child(6) { animation-delay: 400ms; }
.mockup-chart b:nth-child(7) { animation-delay: 480ms; }
.mockup-chart b:nth-child(8) { animation-delay: 560ms; }

@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.mockup-chip {
    position: absolute;
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius);
    padding: clamp(0.5rem, 0.4rem + 0.5vw, 0.7rem) clamp(0.7rem, 0.5rem + 0.8vw, 1rem);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.82rem);
    font-weight: 700;
    line-height: 1.3;
    animation: float 6s ease-in-out infinite;
    max-width: min(240px, 72vw);
    z-index: 2;
}

.mockup-chip .ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mockup-chip small { display: block; font-weight: 600; color: var(--ink-mute); }

.chip-1 { top: 0; right: 0; animation-delay: 1.2s; }
.chip-1 .ico { background: var(--green-soft); color: var(--green); }

.chip-2 { bottom: 0; left: 0; animation-delay: 2.4s; }
.chip-2 .ico { background: var(--gold-soft); color: var(--gold-deep); }

/* ---------- Marquee de módulos ---------- */
.marquee {
    background: var(--dark-bg);
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    overflow: hidden;
    position: relative;
}

.marquee::before, .marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.marquee::before { left: 0; background: linear-gradient(90deg, var(--dark-bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--dark-bg), transparent); }

.marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    width: max-content;
    padding: 1rem 0;
    animation: marquee 36s linear infinite;
}

@keyframes marquee { to { transform: translateX(-50%); } }

.marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.marquee-track span i {
    font-style: normal;
    color: var(--gold);
    font-size: 0.7em;
}

/* ---------- Dor: as duas igrejas ---------- */
.pain { background: var(--paper-warm); position: relative; overflow: hidden; }

.pain-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

.story-card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    border: 1px solid rgba(20, 18, 43, 0.06);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
    .story-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
}

.story-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
}

.story-a::before { background: linear-gradient(180deg, var(--gold), #4a2ec0); }
.story-b::before { background: linear-gradient(180deg, var(--primary), var(--primary-deep)); }

.story-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35em 1em;
    border-radius: 999px;
    margin-bottom: var(--s-2);
}

.story-a .story-kicker { background: var(--gold-soft); color: var(--gold-deep); }
.story-b .story-kicker { background: var(--primary-ghost); color: var(--primary); }

.story-card h3 { font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem); margin-bottom: var(--s-3); }

.story-list { list-style: none; display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }

.story-list li {
    position: relative;
    padding-left: 1.8rem;
    color: var(--ink-soft);
    font-size: 0.97rem;
}

.story-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    top: 0.15em;
    font-size: 0.8rem;
    font-weight: 800;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--red-soft);
    color: var(--red);
}

.story-end {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.18rem);
    color: var(--ink);
    border-top: 1px dashed rgba(20, 18, 43, 0.15);
    padding-top: var(--s-3);
}

.pain-bridge {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.pain-bridge .big {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--s-3);
    text-wrap: balance;
}

.pain-bridge .big em { font-style: normal; font-weight: 700; color: var(--primary); }

.pain-bridge p { color: var(--ink-soft); max-width: 560px; margin: 0 auto var(--s-4); }

/* ---------- Faixa de números ---------- */
.stats-band {
    background:
        radial-gradient(ellipse 600px 300px at 20% 0%, rgba(91, 78, 224, 0.35), transparent 65%),
        var(--dark-bg);
    color: var(--white);
    padding: var(--s-5) 0;
}

.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-3);
    text-align: center;
}

.stat-b strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
    font-weight: 600;
    color: var(--gold);
    line-height: 1.1;
}

.stat-b span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }

/* ---------- Bento de funcionalidades ---------- */
.bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
}

.tile {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(20, 18, 43, 0.07);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

@media (hover: hover) {
    .tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(91, 78, 224, 0.35); }
}

.tile-head { display: flex; align-items: center; gap: 0.8rem; }

.tile-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--primary-ghost);
    color: var(--primary);
    display: grid;
    place-items: center;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

@media (hover: hover) {
    .tile:hover .tile-icon { background: var(--primary); color: var(--white); transform: rotate(-6deg) scale(1.06); }
}

.tile h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); }

.tile > p { color: var(--ink-soft); font-size: 0.95rem; }

.tile-link {
    margin-top: auto;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0;
}

.tile-link .arrow { transition: transform var(--transition); }
.tile:hover .tile-link .arrow { transform: translateX(4px); }

/* mini-interfaces dentro dos tiles */
.mini {
    background: var(--paper);
    border: 1px solid rgba(20, 18, 43, 0.07);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    font-size: 0.82rem;
}

.mini-fin { list-style: none; display: grid; gap: 0.45rem; }

.mini-fin li { display: flex; justify-content: space-between; gap: 0.8rem; color: var(--ink-soft); }

.mini-fin li b { font-weight: 800; color: var(--ink); white-space: nowrap; }

.mini-fin li b.pos { color: var(--green); }
.mini-fin li b.neg { color: var(--red); }

.mini-fin .total {
    border-top: 1px dashed rgba(20, 18, 43, 0.15);
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    font-weight: 800;
    color: var(--ink);
}

.mini-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--green);
    background: var(--green-soft);
    border-radius: 999px;
    padding: 0.25em 0.8em;
}

.mini-people { list-style: none; display: grid; gap: 0.5rem; }

.mini-people li { display: flex; align-items: center; gap: 0.6rem; }

.mini-people .avatar {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--white);
}

.mini-people li:nth-child(1) .avatar { background: var(--primary); }
.mini-people li:nth-child(2) .avatar { background: var(--gold-deep); }
.mini-people li:nth-child(3) .avatar { background: var(--green); }

.mini-people .name { font-weight: 700; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mini-pill {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    white-space: nowrap;
}

.mini-pill.ok { background: var(--green-soft); color: var(--green); }
.mini-pill.new { background: var(--gold-soft); color: var(--gold-deep); }
.mini-pill.mv { background: var(--primary-ghost); color: var(--primary); }

.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }

.mini-bars b {
    flex: 1;
    background: linear-gradient(180deg, var(--primary), rgba(91, 78, 224, 0.25));
    border-radius: 3px 3px 0 0;
}

.mini-bars b:nth-child(odd) { background: linear-gradient(180deg, var(--gold), rgba(124, 92, 255, 0.25)); }

.mini-hash { font-family: 'Consolas', 'Courier New', monospace; font-size: 0.7rem; color: var(--ink-mute); display: grid; gap: 0.3rem; }

.mini-hash .ok-line { color: var(--green); font-weight: 700; }

.mini-toggles { list-style: none; display: grid; gap: 0.55rem; }

.mini-toggles li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-weight: 700; color: var(--ink); }

.mini-switch {
    width: 34px; height: 20px;
    border-radius: 999px;
    background: var(--green);
    position: relative;
    flex-shrink: 0;
}

.mini-switch::after {
    content: '';
    position: absolute;
    top: 3px; right: 3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--white);
}

.mini-switch.off { background: #d5d2e3; }
.mini-switch.off::after { right: auto; left: 3px; }

.mini-tree { font-size: 0.85rem; display: grid; gap: 0.4rem; }

.mini-tree .t-root { font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 0.5em; }

.mini-tree .t-leaf { color: var(--ink-soft); padding-left: 1.1rem; position: relative; }

.mini-tree .t-leaf::before {
    content: '';
    position: absolute;
    left: 0.35rem; top: -0.55rem;
    width: 0.5rem; height: 1.1rem;
    border-left: 1.5px solid rgba(20, 18, 43, 0.2);
    border-bottom: 1.5px solid rgba(20, 18, 43, 0.2);
    border-radius: 0 0 0 6px;
}

.tile-soon {
    background: linear-gradient(160deg, var(--paper-warm), var(--white));
    border-style: dashed;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2) var(--s-4);
    text-align: center;
}

.tile-soon .soon-item { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink-soft); }

.tile-soon .soon-item svg { color: var(--primary); }

.feature-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--gold-soft);
    padding: 0.3em 0.9em;
    border-radius: 999px;
}

/* ---------- Auditoria (unique mechanism) ---------- */
.audit {
    background:
        radial-gradient(ellipse 800px 500px at 50% -10%, rgba(91, 78, 224, 0.35), transparent 65%),
        var(--dark-bg);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.audit-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    align-items: center;
}

.audit .eyebrow { color: var(--gold); }

.audit h2 { color: var(--white); margin-bottom: var(--s-3); }

.audit h2 em { color: var(--gold); }

.audit p { color: rgba(255, 255, 255, 0.75); margin-bottom: var(--s-2); }

.audit-list { list-style: none; margin-top: var(--s-3); display: grid; gap: var(--s-2); }

.audit-list li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.audit-list .check {
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(46, 158, 107, 0.25);
    color: #5fd39c;
    display: grid;
    place-items: center;
    margin-top: 2px;
}

.chain { display: grid; gap: 0; justify-items: center; width: 100%; }

.chain-block {
    width: 100%;
    max-width: 400px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-3);
    font-size: 0.85rem;
    transition: transform var(--transition), border-color var(--transition);
}

@media (hover: hover) {
    .chain-block:hover { transform: scale(1.03); border-color: var(--gold); }
}

.chain-block .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem var(--s-2); }

.chain-block .who { font-weight: 800; }

.chain-block .what { color: rgba(255, 255, 255, 0.6); }

.chain-block .hash {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem;
    /* o violeta secundário dava 4,37:1 no fundo escuro — 0,13 abaixo do mínimo;
       o `--accent-bright` (o violeta claro do manual) leva a 5,7:1. */
    color: var(--accent-bright);
    margin-top: 4px;
    word-break: break-all;
}

.chain-link {
    height: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), var(--primary));
    position: relative;
}

.chain-link::after {
    content: '🔗';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    background: var(--dark-bg);
    padding: 2px;
}

/* ---------- Comparativo ---------- */
.compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(20, 18, 43, 0.06);
}

.compare {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    font-size: 0.92rem;
}

.compare th, .compare td {
    padding: clamp(0.8rem, 0.6rem + 0.6vw, 1.1rem) clamp(0.8rem, 0.6rem + 0.8vw, 1.4rem);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(20, 18, 43, 0.06);
}

.compare thead th {
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

/* 0.55 dava 3,11:1 sobre o violeta do cabeçalho (reprova em AA) — achado pela
   varredura de contraste de 24/08; 0.82 sobe para ~5:1 sem perder a hierarquia. */
.compare thead th small { display: block; font-weight: 500; color: rgba(255,255,255,0.82); font-size: 0.72rem; letter-spacing: 0; }

.compare tbody tr:last-child td { border-bottom: none; }

.compare td:first-child {
    font-weight: 800;
    color: var(--ink);
    background: var(--paper);
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 140px;
    box-shadow: 1px 0 0 rgba(20, 18, 43, 0.06);
}

.compare td { color: var(--ink-soft); }

.compare .no::before, .compare .meh::before, .compare .yes::before {
    display: inline-grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
    margin-right: 0.5em;
    vertical-align: -0.3em;
}

.compare .no::before { content: '✕'; background: var(--red-soft); color: var(--red); }
.compare .meh::before { content: '~'; background: var(--gold-soft); color: var(--gold-deep); }
.compare .yes::before { content: '✓'; background: var(--green-soft); color: var(--green); }

.compare .us {
    background: var(--primary-ghost);
    color: var(--ink);
    font-weight: 600;
    border-left: 2px solid rgba(91, 78, 224, 0.25);
}

.compare thead th.us-head {
    background: var(--primary);
    position: relative;
}

.compare-hint { text-align: center; font-size: 0.82rem; color: var(--ink-mute); margin-top: var(--s-2); display: none; }

/* ---------- Manifesto ---------- */
.manifesto {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: var(--s-7) var(--gutter);
}

.manifesto .quote-mark {
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 0.6;
    color: var(--gold);
    display: block;
    margin-bottom: var(--s-3);
}

.manifesto blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink);
    text-wrap: balance;
}

.manifesto blockquote strong { font-weight: 600; color: var(--primary); font-style: normal; }

.manifesto cite {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink-mute);
    margin-top: var(--s-3);
}

/* ---------- Preços ---------- */
.pricing { background: var(--paper-warm); }

.price-calc {
    max-width: 720px;
    margin: 0 auto var(--s-6);
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--s-5) var(--gutter);
    box-shadow: var(--shadow-md);
    text-align: center;
    border: 1px solid rgba(20, 18, 43, 0.05);
}

.price-calc > label { font-weight: 700; display: block; margin-bottom: var(--s-2); text-wrap: balance; }

.price-calc .members-count {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2rem);
    color: var(--primary);
    font-weight: 600;
}

.band-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-mute);
    margin-top: 0.2rem;
}

input[type="range"] {
    width: 100%;
    margin: var(--s-3) 0 var(--s-4);
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary) var(--fill, 10%), #e8e5f5 var(--fill, 10%));
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--primary);
    box-shadow: var(--shadow-md);
    transition: transform 150ms ease;
}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--primary);
    box-shadow: var(--shadow-md);
}

.price-result .amount {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 2rem + 3.5vw, 4.2rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.price-result .amount sup { font-size: 0.35em; font-weight: 600; color: var(--ink-mute); }

.price-result .period { color: var(--ink-mute); font-weight: 600; }

.price-result .per-member {
    display: inline-block;
    margin-top: var(--s-2);
    background: var(--green-soft);
    color: #1f7a50;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.35em 1em;
    border-radius: 999px;
}

.price-calc .btn { margin-top: var(--s-4); max-width: 100%; }

.price-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 720px;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    font-size: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem);
}

@media (max-width: 480px) {
    .price-table th:nth-child(3),
    .price-table td:nth-child(3) { display: none; }
}

.price-table th, .price-table td { padding: clamp(0.6rem, 0.5rem + 0.5vw, 0.9rem) clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem); text-align: left; }

.price-table th {
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.price-table tr:not(:last-child) td { border-bottom: 1px solid rgba(20, 18, 43, 0.06); }

.price-table td strong { color: var(--primary); white-space: nowrap; }

.price-table tr.active td { background: var(--primary-ghost); font-weight: 700; }

.price-table tr.active td:first-child { position: relative; }

.price-table tr.active td:first-child::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--primary);
}

.price-notes {
    max-width: 720px;
    margin: var(--s-4) auto 0;
    display: grid;
    gap: var(--s-2);
}

.price-note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.price-note .check {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    margin-top: 2px;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s-2); }

.faq-item {
    background: var(--white);
    border: 1px solid rgba(20, 18, 43, 0.07);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--primary); }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-3) var(--s-3);
    min-height: 48px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .plus {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primary-ghost);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--primary); color: var(--white); }

.faq-item .faq-body {
    padding: 0 var(--s-3) var(--s-3);
    color: var(--ink-soft);
    animation: faqOpen 350ms cubic-bezier(0.25, 0.6, 0.3, 1);
}

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- CTA final ---------- */
.cta-final {
    background:
        radial-gradient(ellipse 500px 380px at 90% 0%, rgba(var(--accent-rgb), 0.45), transparent 65%),
        linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 55%, #6656ee 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--s-6) var(--gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-final h2 { color: var(--white); margin-bottom: var(--s-2); }

.cta-final h2 em { color: var(--accent-bright); }

.cta-final p { color: rgba(255, 255, 255, 0.85); max-width: 520px; margin: 0 auto var(--s-4); }

.cta-final small { display: block; margin-top: var(--s-2); color: rgba(255,255,255,0.85); padding: 0 var(--s-2); }

/* O fundo do .cta-final é VIOLETA — então violeta-sobre-violeta (a palavra em
   destaque e o botão) perdia contraste. Aqui a palavra vira BRANCO puro (com o
   resto do título recuado p/ ela saltar) e o botão vira BRANCO sólido com texto
   violeta: contraste alto, ainda 100% dentro da marca. */
.cta-final h2 { color: rgba(255, 255, 255, 0.82); }
.cta-final h2 em { color: #fff; }
.cta-final .btn-gold {
    background: #fff;
    color: var(--primary-deep);
    box-shadow: 0 14px 34px rgba(15, 15, 20, 0.28);
}
.cta-final .btn-gold:hover {
    background: #f1ecff;
    color: var(--primary-deep);
    box-shadow: 0 18px 40px rgba(15, 15, 20, 0.34);
}

/* ---------- Footer ---------- */
.footer {
    background: var(--dark-bg);
    color: rgba(255, 255, 255, 0.65);
    padding: var(--s-6) 0 var(--s-4);
    margin-top: var(--s-7);
    font-size: 0.92rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
}

.footer .logo { margin-bottom: var(--s-2); }

.footer h4 { color: var(--white); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-2); }

.footer ul { list-style: none; display: grid; gap: 0.35rem; }

.footer ul a { display: inline-block; padding: 0.25em 0; }

.footer a:hover { color: var(--gold); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--s-3);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: 0.82rem;
}

/* ---------- Páginas internas (contratar / contato) ---------- */
/* Mesma entrada clara das subpáginas (ver o comentário do .hero). */
.page-hero {
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    color: var(--ink);
    padding: calc(var(--header-h) + clamp(2rem, 1.5rem + 3vw, 3.5rem)) 0 var(--s-6);
    position: relative;
    overflow: hidden;
}

.page-hero h1 { position: relative; font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); margin-bottom: var(--s-2); }

.page-hero p { position: relative; color: var(--ink-soft); max-width: 560px; }

/* O botão de contorno do site foi desenhado PARA fundo escuro (texto e borda
   brancos). Nos heróis, que agora são claros, ele precisa da versão em tinta —
   as demais aparições (seções escuras, CTA) seguem como estavam. */
.hero .btn-ghost,
.page-hero .btn-ghost {
    color: var(--ink);
    border-color: rgba(20, 18, 43, 0.25);
}

.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover {
    border-color: var(--primary);
    background: rgba(91, 58, 224, 0.06);
    color: var(--primary-deep);
}

/* usado nos cards de canal do contato */
.feature-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--primary-ghost);
    color: var(--primary);
    display: grid;
    place-items: center;
    margin-bottom: var(--s-3);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* Formulários */
.form-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 1rem + 2vw, 3rem);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(20, 18, 43, 0.05);
    min-width: 0;
}

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }

/* Título de bloco dentro do formulário (Dados da igreja / Endereço / Responsável) */
.form-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
    padding-top: var(--s-3);
    margin-top: calc(var(--s-1) * -1);
    border-top: 1px solid rgba(20, 18, 43, 0.08);
}

.form-heading:first-child { padding-top: 0; margin-top: 0; border-top: none; }

.form-heading .step {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 800;
}

.form-heading .opt-note {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-mute);
    margin-left: auto;
    text-align: right;
}

.form-field { min-width: 0; }

/* Campo que teve o valor preenchido automaticamente (via CEP) */
.form-field input.autofilled {
    border-color: var(--green);
    background: var(--green-soft);
}

.cep-status { min-height: 1.1em; }
.cep-status.loading { color: var(--primary); }
.cep-status.ok { color: var(--green); font-weight: 700; }
.cep-status.fail { color: var(--red); font-weight: 700; }

.form-field label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.form-field label .opt { font-weight: 500; color: var(--ink-mute); }

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 50px;
    padding: 0.8em 1.1em;
    border: 2px solid rgba(20, 18, 43, 0.12);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-field textarea { min-height: 120px; resize: vertical; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(91, 78, 224, 0.15);
}

.form-field .hint { font-size: 0.8rem; color: var(--ink-mute); margin-top: 0.35rem; }

.form-field.error input, .form-field.error select, .form-field.error textarea { border-color: var(--red); }

.form-field .error-msg { display: none; font-size: 0.82rem; color: var(--red); font-weight: 600; margin-top: 0.35rem; }

.form-field.error .error-msg { display: block; }

.form-success { display: none; text-align: center; padding: var(--s-5) var(--s-2); }

.form-success.visible { display: block; }

.form-success .big-check {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    margin: 0 auto var(--s-3);
    animation: pop 500ms cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ==========================================================================
   CHECKOUT — o boleto/PIX que aparece depois de criar a conta (contratar.php)
   ========================================================================== */
.checkout { display: none; }
.checkout.is-shown { display: block; }
.form-success.is-shown { display: block; }

.checkout > h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.checkout-sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--s-3); }

/* Dica PIX × boleto (urgência) */
.checkout-dica {
    background: var(--gold-soft);
    border: 1px solid rgba(124, 92, 255, 0.35);
    border-radius: var(--radius-lg);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
}
.checkout-dica p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.checkout-dica p + p { margin-top: 0.6rem; }

.checkout-dica-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    margin-right: 0.3rem;
    vertical-align: 1px;
}
.tag-pix { background: var(--green); color: var(--white); }
.tag-boleto { background: rgba(20, 18, 43, 0.1); color: var(--ink-soft); }

.checkout-hint { color: var(--ink-mute); font-size: 0.82rem; line-height: 1.5; margin-top: var(--s-2); text-align: center; }

/* Nota informativa (ex.: e-mail já vinculado a outra igreja) — não é erro. */
.checkout-nota {
    background: var(--primary-ghost);
    border: 1px solid rgba(91, 78, 224, 0.25);
    border-radius: var(--radius-lg);
    padding: 0.8rem 1rem;
    margin-bottom: var(--s-3);
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Estado "gerando o boleto/PIX" (o Inter registra de forma assíncrona) */
.checkout-gerando {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary-ghost);
    border-radius: var(--radius-lg);
    padding: var(--s-3);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.92rem;
}
.checkout-gerando small { color: var(--ink-mute); font-weight: 500; }

.checkout-spinner {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border: 3px solid rgba(91, 78, 224, 0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ck-spin 0.8s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }

.checkout .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.checkout-boleto {
    background: var(--paper);
    border: 1px solid rgba(20, 18, 43, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--s-3);
}

.checkout-resumo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
    border-bottom: 1px dashed rgba(20, 18, 43, 0.15);
}

.checkout-valor { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ink); }
.checkout-venc { font-size: 0.85rem; font-weight: 700; color: var(--gold-deep); }

.checkout-boleto label {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: var(--s-2) 0 0.35rem;
}

.checkout-copy { display: flex; gap: 0.5rem; }

.checkout-copy input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    padding: 0.65em 0.85em;
    border: 2px solid rgba(20, 18, 43, 0.12);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
}

.checkout-qr {
    display: flex;
    justify-content: center;
    margin: var(--s-3) 0 0.4rem;
}

.checkout-qr svg { width: 200px; height: 200px; border-radius: 8px; background: var(--white); }

.checkout-qr-legenda { text-align: center; font-size: 0.8rem; color: var(--ink-mute); margin-bottom: 0.4rem; }

.checkout-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: var(--s-3);
}

.checkout-acoes .btn { flex: 1 1 auto; }

/* .btn-ghost do site é para fundo escuro; no card claro, deixamos visível. */
.checkout .btn-ghost {
    border: 2px solid rgba(20, 18, 43, 0.15);
    color: var(--ink);
    background: transparent;
}
.checkout .btn-ghost:hover { border-color: var(--primary); background: var(--primary-ghost); }

.checkout-copy .btn-ghost { flex: 0 0 auto; }

.checkout-aviso {
    margin-top: var(--s-2);
    padding: 0.7rem 0.9rem;
    background: var(--gold-soft);
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.plan-summary {
    background:
        radial-gradient(ellipse 300px 200px at 100% 0%, rgba(91, 78, 224, 0.35), transparent 70%),
        var(--dark-bg);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--s-4);
    position: sticky;
    top: calc(var(--header-h) + 16px);
}

.plan-summary h3 { color: var(--gold); margin-bottom: var(--s-2); }

.plan-summary .plan-price {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.7rem + 1.5vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
}

.plan-summary .plan-price small { font-size: 0.9rem; font-family: var(--font-body); color: rgba(255,255,255,0.6); font-weight: 600; }

.plan-summary ul { list-style: none; margin-top: var(--s-3); display: grid; gap: 0.7rem; font-size: 0.92rem; }

.plan-summary li { display: flex; gap: 0.6rem; align-items: flex-start; color: rgba(255,255,255,0.85); }

.plan-summary .check {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(46, 158, 107, 0.25);
    color: #5fd39c;
    display: grid;
    place-items: center;
    margin-top: 2px;
    font-size: 0.7rem;
}

.two-col { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }

.contact-channels { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-bottom: var(--s-5); }

.channel-card {
    background: var(--white);
    border: 1px solid rgba(20, 18, 43, 0.07);
    border-radius: var(--radius-lg);
    padding: var(--s-4);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
    .channel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
}

.channel-card .feature-icon { margin: 0 auto var(--s-2); }

.channel-card h3 { margin-bottom: 0.3rem; }

.channel-card p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: var(--s-1); }

.channel-card a { color: var(--primary); font-weight: 700; display: inline-block; padding: 0.3em 0; }

.channel-card a:hover { text-decoration: underline; }

/* ---------- Animações de scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(0.25, 0.6, 0.3, 1), transform 700ms cubic-bezier(0.25, 0.6, 0.3, 1);
    transition-delay: var(--delay, 0ms);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
    .marquee-track { animation: none; }
    .mockup { transform: none; }
}

/* ==========================================================================
   RESPONSIVIDADE — mobile-first: 480 / 640 / 900 / 1200
   ========================================================================== */

@media (max-width: 400px) {
    .hero-ctas .btn, .cta-final .btn { width: 100%; }
    .hero-stats { grid-template-columns: 1fr; gap: var(--s-2); }
    .footer-bottom { justify-content: center; text-align: center; }
}

@media (min-width: 480px) {
    .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .form-grid.cols-2 .span-2 { grid-column: span 2; }
}

@media (min-width: 640px) {
    .contact-channels { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .tile-lg { grid-column: span 2; }
    /* auto-fit: com 4 números ficam 4 colunas; se algum for omitido (ex.: o
       preço, quando não há plano publicável), os restantes preenchem a linha
       sem deixar coluna vazia. */
    .stats-band-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1.08fr 0.92fr; }
    .hero-visual { margin: 0; }
    .contact-channels { grid-template-columns: repeat(3, 1fr); }
    .pain-duo { grid-template-columns: 1fr 1fr; }
    .bento { grid-template-columns: repeat(4, 1fr); }
    .tile-lg { grid-column: span 2; }
    .tile-full { grid-column: span 4; }
    .audit-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .two-col { grid-template-columns: 1.4fr 1fr; }
}

@media (max-width: 899px) {
    .tile-full { grid-column: 1 / -1; }
    .compare-hint { display: block; }
}

@media (min-width: 1200px) {
    :root { --header-h: 84px; }
}

/* Menu mobile: painel de tela cheia com links em cascata */
@media (max-width: 899px) {
    .nav {
        position: fixed;
        inset: 0;
        background:
            radial-gradient(ellipse 500px 400px at 90% 0%, rgba(91, 78, 224, 0.4), transparent 65%),
            var(--dark-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--s-3);
        font-size: 1.15rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 300ms ease, transform 300ms ease, visibility 0s 300ms;
        z-index: 99;
        padding: calc(var(--header-h) + 1rem) var(--s-4) var(--s-4);
        overflow-y: auto;
    }

    .nav.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 300ms ease, transform 300ms ease, visibility 0s;
    }

    .nav > a:not(.btn) { color: rgba(255, 255, 255, 0.9); font-weight: 700; }

    .nav > a, .nav .nav-item, .nav > .btn {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 350ms ease, transform 350ms ease;
    }

    .nav.open > a, .nav.open .nav-item, .nav.open > .btn { opacity: 1; transform: translateY(0); }

    .nav.open > *:nth-child(1) { transition-delay: 60ms; }
    .nav.open > *:nth-child(2) { transition-delay: 120ms; }
    .nav.open > *:nth-child(3) { transition-delay: 180ms; }
    .nav.open > *:nth-child(4) { transition-delay: 240ms; }
    .nav.open > *:nth-child(5) { transition-delay: 300ms; }

    /* dropdown vira lista embutida no painel */
    .nav-item { width: 100%; max-width: 380px; text-align: center; }

    .nav-drop-btn { width: 100%; justify-content: center; color: rgba(255, 255, 255, 0.9); font-weight: 700; font-size: 1.15rem; }

    .nav-drop {
        position: static;
        transform: none;
        min-width: 0;
        /* Anula o teto de largura das duas colunas do desktop: aqui o menu é a
           gaveta de tela cheia e ocupa a largura toda. */
        max-width: none;
        width: 100%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--dark-border);
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
        margin-top: 0.6rem;
    }

    .nav-drop::before { display: none; }

    .nav-item.open .nav-drop { display: block; transform: none; }

    .nav-drop a { color: rgba(255, 255, 255, 0.9); font-size: 1rem; }

    .nav-drop a:hover { background: rgba(255, 255, 255, 0.08); }

    .nav-drop .d-ico { background: rgba(255, 255, 255, 0.1); color: var(--gold); }

    .nav-drop small { color: rgba(255, 255, 255, 0.5); }

    .nav .btn { min-height: 52px; font-size: 1.05rem; padding: 0.8em 2em; }

    .nav-toggle { display: grid; position: relative; z-index: 100; }

    body.nav-open { overflow: hidden; }

    .plan-summary { position: static; }
}

/* Paisagem em celular: hero mais compacto */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding-top: calc(var(--header-h) + 1.5rem); }
    .hero-stats { display: none; }
}

/* ==========================================================================
   PÁGINA: CONTROLE FINANCEIRO (financeiro.php)
   Reaproveita hero-badge, hero-ctas, hero-guarantee, hero-visual, mockup,
   mockup-chip, bento, tile, mini*, audit, chain, faq, cta-final.
   Componentes próprios: hero split, balancete e o demo interativo do caixa.
   ========================================================================== */

.fin-hero { padding-bottom: var(--s-7); }
.fin-hero .eyebrow { color: var(--primary); }

.fin-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    align-items: center;
}

.fin-hero h1 {
    font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
    color: var(--ink);
    margin-bottom: var(--s-3);
}
.fin-hero h1 em { color: var(--primary); font-weight: 700; }
.fin-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.fin-hero .lead strong { color: var(--ink); }

/* Balancete (mock do hero) */
.balancete { display: grid; gap: 0.55rem; }

.balancete-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    padding-bottom: 0.6rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--dark-border);
}
.balancete-head .bl-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.balancete-head .bl-tag {
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: #5fd39c; background: rgba(46, 158, 107, 0.2); padding: 0.25em 0.7em; border-radius: 999px;
}

.balancete-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: 0.9rem; }
.balancete-row .bl-cat { display: flex; align-items: center; gap: 0.55rem; color: rgba(255, 255, 255, 0.75); }
.balancete-row .bl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.balancete-row .bl-dot.in { background: #5fd39c; }
.balancete-row .bl-dot.out { background: #ff8a8a; }
.balancete-row .bl-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.balancete-row .bl-val.in { color: #5fd39c; }
.balancete-row .bl-val.out { color: #ff8a8a; }

.balancete-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
    margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px dashed var(--dark-border);
}
.balancete-total .bl-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.balancete-total .bl-amount { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }

.fin-punch {
    text-align: center;
    max-width: 760px;
    margin: var(--s-5) auto 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
    font-style: italic;
    color: var(--ink-soft);
    text-wrap: balance;
}
.fin-punch strong { color: var(--primary); font-style: normal; }

/* ---------- Cards de dor (páginas de funcionalidade) ---------- */
.dor-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 700px) { .dor-grid { grid-template-columns: repeat(3, 1fr); } }

.dor-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgba(20, 18, 43, 0.06);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.dor-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms cubic-bezier(0.25, 0.6, 0.3, 1);
}
@media (hover: hover) {
    .dor-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
    .dor-card:hover::before { transform: scaleX(1); }
    .dor-card:hover .dor-ico { transform: rotate(-6deg) scale(1.05); }
}

.dor-num {
    position: absolute;
    top: 0.4rem; right: 1.1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.2rem, 2rem + 4vw, 5rem);
    line-height: 1;
    color: var(--ink);
    opacity: 0.055;
    pointer-events: none;
}

.dor-ico {
    width: 58px; height: 58px;
    border-radius: 16px;
    display: grid; place-items: center;
    font-size: 1.7rem;
    background: var(--accent-soft);
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.2);
    margin-bottom: var(--s-3);
    transition: transform var(--transition);
}

.dor-card h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); margin-bottom: 0.6rem; }
.dor-card p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: var(--s-3); }

.dor-fix {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #1f7a50;
    background: var(--green-soft);
    border-radius: 12px;
    padding: 0.75em 0.9em;
}
.dor-fix svg { flex-shrink: 0; margin-top: 0.15em; color: var(--green); }

/* ---------- Demo interativo: o caixa ao vivo ---------- */
.fin-demo-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: var(--s-3); }

.fin-demo {
    background: var(--white);
    border: 1px solid rgba(20, 18, 43, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.fin-demo.locked { box-shadow: 0 0 0 2px var(--green), var(--shadow-lg); }

.fin-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-3) clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
    background: linear-gradient(135deg, var(--ink) 0%, #241f45 100%);
    color: var(--white);
    flex-wrap: wrap;
}
.fin-demo-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.fin-demo-title .fin-lock-badge {
    display: none; align-items: center; gap: 0.35em;
    font-family: var(--font-body); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: #5fd39c; background: rgba(46, 158, 107, 0.22); padding: 0.25em 0.7em; border-radius: 999px;
}
.fin-demo.locked .fin-lock-badge { display: inline-flex; animation: pop 400ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }

.fin-demo-saldo { text-align: right; }
.fin-saldo-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); }
.fin-saldo-value { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); font-weight: 600; color: var(--accent-bright); font-variant-numeric: tabular-nums; }

.fin-demo-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 680px) { .fin-demo-body { grid-template-columns: 1.35fr 1fr; } }

.fin-ledger {
    list-style: none;
    padding: clamp(0.6rem, 0.4rem + 1vw, 1rem);
    display: grid;
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
}
.fin-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.75rem; border-radius: 12px;
    background: var(--paper); border: 1px solid rgba(20, 18, 43, 0.05);
}
.fin-row.enter { animation: finRowIn 450ms cubic-bezier(0.25, 0.6, 0.3, 1) both; }
@keyframes finRowIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }

.fin-row .fin-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-size: 0.95rem; }
.fin-row.in .fin-ico { background: var(--green-soft); }
.fin-row.out .fin-ico { background: var(--red-soft); }
.fin-row .fin-info { flex: 1; min-width: 0; }
.fin-row .fin-label { font-weight: 700; font-size: 0.9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-row .fin-meta { font-size: 0.72rem; color: var(--ink-mute); }
.fin-row .fin-val { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-row.in .fin-val { color: var(--green); }
.fin-row.out .fin-val { color: var(--red); }

.fin-audit { background: var(--ink); color: rgba(255, 255, 255, 0.85); padding: clamp(0.8rem, 0.5rem + 1vw, 1.1rem); display: flex; flex-direction: column; }
.fin-audit-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.fin-audit-title svg { color: #5fd39c; }
.fin-chain { list-style: none; display: grid; gap: 0.4rem; overflow-y: auto; max-height: 300px; }
.fin-chain li { font-family: 'Consolas', 'Courier New', monospace; font-size: 0.72rem; display: flex; align-items: center; gap: 0.45rem; color: rgba(255, 255, 255, 0.6); }
.fin-chain li.enter { animation: finRowIn 450ms cubic-bezier(0.25, 0.6, 0.3, 1) both; }
.fin-chain li b { color: var(--gold); font-weight: 400; }
.fin-chain li .ok { color: #5fd39c; margin-left: auto; }

.fin-demo-controls {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    padding: clamp(0.8rem, 0.5rem + 1vw, 1.25rem);
    border-top: 1px solid rgba(20, 18, 43, 0.07);
    background: var(--paper-warm);
}
.fin-chip {
    font-family: var(--font-body); font-weight: 700; font-size: 0.88rem;
    padding: 0.6em 1.1em; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; min-height: 44px;
    transition: transform var(--transition), background var(--transition);
}
.fin-chip:active { transform: scale(0.96); }
.fin-chip.in { background: var(--green-soft); color: #1f7a50; }
.fin-chip.out { background: var(--red-soft); color: var(--red); }
@media (hover: hover) {
    .fin-chip.in:hover { background: #d5f0e2; transform: translateY(-2px); }
    .fin-chip.out:hover { background: #fadada; transform: translateY(-2px); }
}
.fin-chip.close { margin-left: auto; background: var(--ink); color: var(--white); }
@media (hover: hover) { .fin-chip.close:hover { background: var(--primary-deep); transform: translateY(-2px); } }
.fin-chip[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* "Fechar mês" pulsa quando o limite de lançamentos do teste é atingido */
.fin-chip.close.nudge { animation: finNudge 1.5s ease-in-out infinite; }
@keyframes finNudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(91, 78, 224, 0); }
    50% { box-shadow: 0 0 0 6px rgba(91, 78, 224, 0.28); }
}

.fin-limit-hint {
    flex-basis: 100%;
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-mute);
    text-align: center;
}
.fin-limit-hint strong { color: var(--ink); }

.fin-locked-msg {
    display: none; align-items: center; justify-content: center; gap: 0.6rem 1rem;
    padding: clamp(0.8rem, 0.5rem + 1vw, 1.25rem);
    background: var(--green-soft); color: #1f7a50; font-weight: 700;
    border-top: 1px solid rgba(46, 158, 107, 0.25); text-align: center; flex-wrap: wrap;
}
.fin-locked-msg.show { display: flex; }
.fin-reset {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
    color: var(--primary); text-decoration: underline; padding: 0.5em;
}
.fin-demo-note { text-align: center; font-size: 0.82rem; color: var(--ink-mute); }

/* ---------- Destaque IR / recibo ---------- */
.fin-split {
    display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center;
    background: linear-gradient(135deg, var(--primary-ghost), var(--white));
    border: 1px solid rgba(91, 78, 224, 0.15);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (min-width: 820px) { .fin-split { grid-template-columns: 1.1fr 0.9fr; } }
.fin-split .eyebrow { color: var(--primary); }
.fin-split h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); margin-bottom: var(--s-2); }
.fin-split h2 em { color: var(--gold-deep); font-weight: 700; }
.fin-split p { color: var(--ink-soft); margin-bottom: var(--s-2); }

.recibo-card {
    background: var(--white); border: 1px solid rgba(20, 18, 43, 0.08);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: var(--s-3); transform: rotate(-2deg); transition: transform var(--transition);
}
@media (hover: hover) { .fin-split:hover .recibo-card { transform: rotate(0); } }
.recibo-card .rc-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed rgba(20,18,43,0.15); padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.recibo-card .rc-title { font-family: var(--font-display); font-weight: 600; }
.recibo-card .rc-year { font-weight: 800; color: var(--primary); }
.recibo-card .rc-line { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-soft); padding: 0.25rem 0; }
.recibo-card .rc-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.recibo-card .rc-total { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid rgba(20,18,43,0.1); font-weight: 800; }
.recibo-card .rc-stamp {
    margin-top: 0.8rem; text-align: center; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--green); border: 2px solid var(--green); border-radius: 8px; padding: 0.4em; transform: rotate(-1deg);
}

@media (min-width: 900px) { .fin-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* Alinha as mini-telas na base de cada card (parágrafos de tamanhos
   diferentes não desalinham mais o preview). Escopo só na financeiro. */
#recursos .tile > .mini:last-child { margin-top: auto; }

/* Grid de 6 colunas só no bento da financeiro: 2 cards grandes (span 3) por
   linha e 3 cards menores (span 2) por linha — preenche a largura toda, sem
   coluna sobrando. Não afeta a home (bento de 4 colunas com 4 cards menores). */
@media (min-width: 640px) {
    #recursos .bento { grid-template-columns: repeat(6, 1fr); }
    #recursos .tile-lg { grid-column: span 6; }
    #recursos .tile:not(.tile-lg):not(.tile-full) { grid-column: span 2; }
    #recursos .tile-full { grid-column: span 6; }
}
@media (min-width: 900px) {
    #recursos .tile-lg { grid-column: span 3; }
}

/* O bento da HOME (#funcionalidades) tem 2 grandes + 6 menores + o cartão do
   app: na grade de 4 colunas sobravam 2 menores na última linha, com dois
   buracos ao lado. Mesmo desenho da financeiro: 6 colunas — grandes span 3
   (2 por linha), menores span 2 (3 por linha) — todas as linhas cheias. */
@media (min-width: 900px) {
    #funcionalidades .bento { grid-template-columns: repeat(6, 1fr); }
    #funcionalidades .tile-lg { grid-column: span 3; }
    #funcionalidades .tile:not(.tile-lg):not(.tile-full) { grid-column: span 2; }
    #funcionalidades .tile-full { grid-column: span 6; }
}

/* ==========================================================================
   PÁGINA: CONTROLE DE MEMBRESIA (membresia.php)
   Tema teal (identidade própria) via --accent. Reaproveita page-hero, dor-*,
   tile/bento/mini, faq, cta-final. Componentes próprios: ficha, mem-demo
   (linha do tempo do membro), mem-split (movimento do rol) e lgpd.
   ========================================================================== */

.page-mem {
    --accent: #5b3ae0;         /* fundo claro: barras, cards de dor, highlights */
    --accent-deep: #3d33b8;
    --accent-soft: #eeecfc;
    --accent-rgb: 91, 58, 224;
    --accent-bright: #9278ff;  /* fundo escuro: hero, CTA, LGPD — teal claro que contrasta */
}

/* Hero: glow teal dominante (diferencia da financeira) */
.page-hero.mem-hero {
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    padding-bottom: var(--s-7);
}
.mem-hero .eyebrow { color: var(--accent); }
.mem-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center;
}
.mem-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); color: var(--ink); margin-bottom: var(--s-3); }
.mem-hero h1 em { color: var(--accent); font-weight: 700; }
.mem-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.mem-hero .lead strong { color: var(--ink); }
.mem-hero .hero-guarantee svg { color: var(--accent); }
@media (min-width: 900px) { .mem-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* Ficha do membro (visual do hero) — card claro flutuante */
.ficha-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: float 7s ease-in-out infinite;
}
.ficha-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: var(--s-2); border-bottom: 1px solid rgba(20, 18, 43, 0.08); }
.ficha-avatar {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--white); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
}
.ficha-id { flex: 1; min-width: 0; }
.ficha-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.ficha-sub { font-size: 0.8rem; color: var(--ink-mute); }
.sit-badge {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.3em 0.8em; border-radius: 999px; white-space: nowrap;
}
.sit-badge.membro { background: var(--accent-soft); color: var(--accent-deep); }
.sit-badge.disciplinado { background: var(--gold-soft); color: var(--gold-deep); }
.sit-badge.transferido { background: var(--primary-ghost); color: var(--primary); }
.sit-badge.visitante { background: #eef0f4; color: var(--ink-mute); }

.ficha-time { list-style: none; display: grid; gap: 0; margin-top: var(--s-2); }
.ficha-time li { position: relative; padding: 0.5rem 0 0.5rem 1.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.ficha-time li::before {
    content: ''; position: absolute; left: 4px; top: 0.85rem;
    width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ficha-time li::after {
    content: ''; position: absolute; left: 8px; top: 1.3rem; bottom: -0.2rem; width: 1.5px; background: rgba(20, 18, 43, 0.1);
}
.ficha-time li:last-child::after { display: none; }
.ficha-time li b { color: var(--ink); font-weight: 700; display: block; }
.ficha-time li span { font-size: 0.75rem; color: var(--ink-mute); }
.ficha-foot { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid rgba(20, 18, 43, 0.08); font-size: 0.78rem; color: var(--accent-deep); font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }

/* Punch da dor (reusa .fin-punch visual, cor teal) */
.mem-punch {
    text-align: center; max-width: 760px; margin: var(--s-5) auto 0;
    font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
    font-style: italic; color: var(--ink-soft); text-wrap: balance;
}
.mem-punch strong { color: var(--accent-deep); font-style: normal; }

/* ---------- Demo interativo: a jornada do membro (linha do tempo) ---------- */
.mem-demo-wrap { max-width: 820px; margin: 0 auto; display: grid; gap: var(--s-3); }
.mem-demo {
    background: var(--white); border: 1px solid rgba(20, 18, 43, 0.08);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.mem-demo-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: var(--s-3) clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
    background: linear-gradient(135deg, #241f45 0%, #14122b 100%); color: var(--white); flex-wrap: wrap;
}
.mem-demo-person { display: flex; align-items: center; gap: 0.8rem; }
.mem-demo-person .ficha-avatar { width: 46px; height: 46px; }
.mem-demo-person .n { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.mem-demo-person .s { font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); }
.mem-demo-sit { text-align: right; }
.mem-demo-sit .lbl { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.2rem; }

.mem-timeline {
    list-style: none; padding: clamp(1rem, 0.6rem + 1.5vw, 1.6rem);
    display: grid; gap: 0; max-height: 360px; overflow-y: auto;
}
.mem-ev { position: relative; padding: 0 0 var(--s-3) 2.2rem; }
.mem-ev.enter { animation: finRowIn 450ms cubic-bezier(0.25, 0.6, 0.3, 1) both; }
.mem-ev::before {
    content: ''; position: absolute; left: 4px; top: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-soft); border: 2px solid var(--accent);
    z-index: 1;
}
.mem-ev .dotico { position: absolute; left: 7px; top: 4px; font-size: 0.72rem; z-index: 2; line-height: 1; }
.mem-ev::after {
    content: ''; position: absolute; left: 13px; top: 22px; bottom: -2px; width: 2px; background: rgba(91, 58, 224, 0.2);
}
.mem-ev:last-child::after { display: none; }
.mem-ev .ev-title { font-weight: 800; color: var(--ink); font-size: 0.95rem; }
.mem-ev .ev-meta { font-size: 0.78rem; color: var(--ink-mute); }
.mem-ev .ev-lock {
    display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.25rem;
    font-size: 0.68rem; font-weight: 700; color: var(--accent-deep);
    background: var(--accent-soft); border-radius: 999px; padding: 0.2em 0.7em;
}

.mem-demo-controls {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    padding: clamp(0.8rem, 0.5rem + 1vw, 1.25rem);
    border-top: 1px solid rgba(20, 18, 43, 0.07); background: var(--paper-warm);
}
.mem-chip {
    font-family: var(--font-body); font-weight: 700; font-size: 0.86rem;
    padding: 0.6em 1em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; min-height: 44px;
    background: var(--accent-soft); color: var(--accent-deep);
    transition: transform var(--transition), background var(--transition);
}
.mem-chip:active { transform: scale(0.96); }
@media (hover: hover) { .mem-chip:hover { background: #eeecfc; transform: translateY(-2px); } }
.mem-chip[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.mem-chip.reset { margin-left: auto; background: var(--ink); color: var(--white); }
@media (hover: hover) { .mem-chip.reset:hover { background: var(--primary-deep); transform: translateY(-2px); } }

.mem-limit-hint { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--ink-mute); text-align: center; }
.mem-limit-hint strong { color: var(--ink); }
.mem-demo-note { text-align: center; font-size: 0.82rem; color: var(--ink-mute); }

/* ---------- Movimento do rol (destaque do relatório) ---------- */
.mem-split {
    display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--white));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (min-width: 820px) { .mem-split { grid-template-columns: 1fr 0.9fr; } }
.mem-split .eyebrow { color: var(--accent-deep); }
.mem-split h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); margin-bottom: var(--s-2); }
.mem-split h2 em { color: var(--accent-deep); font-weight: 700; }
.mem-split p { color: var(--ink-soft); margin-bottom: var(--s-2); }

.rol-card {
    background: var(--white); border: 1px solid rgba(20, 18, 43, 0.08);
    border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--s-3);
}
.rol-card .rol-title { font-family: var(--font-display); font-weight: 600; margin-bottom: 0.2rem; }
.rol-card .rol-year { font-size: 0.8rem; color: var(--ink-mute); margin-bottom: var(--s-2); }
.rol-bar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.rol-bar .rl { width: 92px; flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.rol-bar .track { flex: 1; height: 12px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.rol-bar .fill { height: 100%; border-radius: 999px; }
.rol-bar .fill.bat { background: var(--accent); }
.rol-bar .fill.tra { background: var(--primary); }
.rol-bar .fill.acl { background: var(--gold); }
.rol-bar .rv { width: 26px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- LGPD / dado sensível (seção escura, layout próprio) ---------- */
.lgpd {
    background:
        radial-gradient(ellipse 700px 420px at 15% -10%, rgba(91, 58, 224, 0.28), transparent 62%),
        var(--dark-bg);
    color: var(--white); position: relative; overflow: hidden;
}
.lgpd-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .lgpd-grid { grid-template-columns: 0.95fr 1.05fr; } }
.lgpd .eyebrow { color: var(--accent-bright); }
.lgpd h2 { color: var(--white); margin-bottom: var(--s-3); }
.lgpd h2 em { color: var(--accent-bright); font-weight: 700; }
.lgpd p { color: rgba(255, 255, 255, 0.75); margin-bottom: var(--s-2); }

.lgpd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.lgpd-card {
    background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius);
    padding: var(--s-3); transition: transform var(--transition), border-color var(--transition);
}
@media (hover: hover) { .lgpd-card:hover { transform: translateY(-4px); border-color: #8b6fff; } }
.lgpd-card .lc-ico {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(91, 58, 224, 0.18); color: #8b6fff; margin-bottom: 0.7rem;
}
.lgpd-card h3 { color: var(--white); font-size: 1rem; margin-bottom: 0.3rem; }
.lgpd-card p { color: rgba(255, 255, 255, 0.65); font-size: 0.86rem; margin: 0; }
@media (max-width: 420px) { .lgpd-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   PÁGINA: CULTOS E PRESENÇA (cultos.php)
   Tema coral via --accent. Reaproveita page-hero, dor-*, tile/bento/mini, faq,
   cta-final. Componentes próprios: cul-hero, presence-card, cul-demo (contador
   de presença + gráfico ao vivo), cul-split (tendência) e cul-dark.
   ========================================================================== */

.page-cultos {
    --accent: #5b3ae0;         /* fundo claro: barras, cards de dor, highlights */
    --accent-deep: #3d33b8;
    --accent-soft: #eeecfc;
    --accent-rgb: 91, 58, 224;
    --accent-bright: #9278ff;  /* fundo escuro: hero, CTA, seções dark (claro p/ contraste no CTA indigo) */
}

/* Hero: glow coral dominante */
.page-hero.cul-hero {
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    padding-bottom: var(--s-7);
}
.cul-hero .eyebrow { color: var(--accent); }
.cul-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center;
}
.cul-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); color: var(--ink); margin-bottom: var(--s-3); }
.cul-hero h1 em { color: var(--accent); font-weight: 700; }
.cul-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.cul-hero .lead strong { color: var(--ink); }
.cul-hero .hero-guarantee svg { color: var(--accent); }
@media (min-width: 900px) { .cul-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* Cartão de presença (visual do hero) */
.presence-card {
    background: var(--white); border-radius: var(--radius-lg);
    padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); animation: float 7s ease-in-out infinite;
}
.presence-card .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.presence-card .pc-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.presence-card .pc-date { font-size: 0.78rem; color: var(--ink-mute); }
.presence-card .pc-total { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.presence-card .pc-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 2rem + 2vw, 3.2rem); color: var(--accent-deep); line-height: 1; }
.presence-card .pc-lbl { font-size: 0.85rem; color: var(--ink-mute); font-weight: 700; }
.presence-card .pc-cats { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--s-2); }
.presence-card .pc-cat { font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); }
.presence-card .pc-chart { display: flex; align-items: flex-end; gap: 5px; height: 70px; margin-top: 0.3rem; }
.presence-card .pc-chart b { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.25)); border-radius: 4px 4px 0 0; }
.presence-card .pc-foot { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid rgba(20, 18, 43, 0.08); font-size: 0.78rem; color: var(--accent-deep); font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }

.cul-punch {
    text-align: center; max-width: 760px; margin: var(--s-5) auto 0;
    font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
    font-style: italic; color: var(--ink-soft); text-wrap: balance;
}
.cul-punch strong { color: var(--accent-deep); font-style: normal; }

/* ---------- Demo interativo: contador de presença + gráfico ---------- */
.cul-demo-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: var(--s-3); }
.cul-demo {
    background: var(--white); border: 1px solid rgba(20, 18, 43, 0.08);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.cul-demo-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: var(--s-3) clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
    background: linear-gradient(135deg, #241f45 0%, #14122b 100%); color: var(--white); flex-wrap: wrap;
}
.cul-demo-head .cd-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.cul-demo-head .cd-title small { display: block; font-family: var(--font-body); font-size: 0.72rem; color: rgba(255,255,255,0.6); font-weight: 600; }
.cul-demo-total { text-align: right; }
.cul-demo-total .lbl { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }
.cul-demo-total .val { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); font-weight: 600; color: var(--accent-bright); font-variant-numeric: tabular-nums; line-height: 1; }

.cul-demo-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 680px) { .cul-demo-body { grid-template-columns: 1fr 1.1fr; } }

.cul-steppers { padding: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); display: grid; gap: 0.7rem; align-content: start; }
.cul-stepper { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; background: var(--paper); border: 1px solid rgba(20,18,43,0.06); border-radius: 12px; padding: 0.55rem 0.7rem; }
.cul-stepper .st-lbl { font-weight: 700; font-size: 0.9rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.cul-stepper .st-lbl .em { font-size: 1.1rem; }
.cul-step-ctrl { display: flex; align-items: center; gap: 0.4rem; }
.cul-step-btn {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; border: none; cursor: pointer;
    background: var(--accent-soft); color: var(--accent-deep); font-size: 1.2rem; font-weight: 800;
    display: grid; place-items: center; transition: background var(--transition), transform var(--transition);
}
@media (hover: hover) { .cul-step-btn:hover { background: #eeecfc; } }
.cul-step-btn:active { transform: scale(0.9); }
.cul-step-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.cul-step-val { min-width: 2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

.cul-chartbox { padding: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); background: var(--paper-warm); display: flex; flex-direction: column; }
.cul-chartbox .cb-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 0.6rem; font-weight: 700; }
.cul-chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.cul-chart .bar { position: relative; flex: 1; min-width: 0; background: linear-gradient(180deg, var(--primary), rgba(91,78,224,0.25)); border-radius: 5px 5px 0 0; transition: height 500ms cubic-bezier(0.25,0.6,0.3,1); }
.cul-chart .bar .cap { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 0.68rem; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cul-chart .bar .wk { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 0.6rem; color: var(--ink-mute); white-space: nowrap; }
.cul-chart .bar.pending { background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),0.5) 0 6px, rgba(var(--accent-rgb),0.28) 6px 12px); }
.cul-chart .bar.nova { background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb),0.3)); animation: pop 400ms cubic-bezier(0.3,1.5,0.5,1) both; }
.cul-chart .bar.pending .cap { color: var(--accent-deep); }

.cul-demo-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: clamp(0.8rem, 0.5rem + 1vw, 1.25rem); border-top: 1px solid rgba(20,18,43,0.07); background: var(--white); }
.cul-reg {
    font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; min-height: 46px;
    padding: 0.6em 1.4em; border-radius: 999px; border: none; cursor: pointer;
    background: var(--accent); color: var(--white); box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.4);
    transition: transform var(--transition), background var(--transition);
    display: inline-flex; align-items: center; gap: 0.5em;
}
@media (hover: hover) { .cul-reg:hover { background: var(--accent-deep); transform: translateY(-2px); } }
.cul-reg:active { transform: scale(0.97); }
.cul-reg[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.cul-reset { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--primary); text-decoration: underline; padding: 0.5em; margin-left: auto; }
.cul-limit-hint { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--ink-mute); text-align: center; }
.cul-limit-hint strong { color: var(--ink); }
.cul-demo-note { text-align: center; font-size: 0.82rem; color: var(--ink-mute); }

/* ---------- Tendência (destaque) ---------- */
.cul-split {
    display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--white));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (min-width: 820px) { .cul-split { grid-template-columns: 1fr 0.95fr; } }
.cul-split .eyebrow { color: var(--accent-deep); }
.cul-split h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); margin-bottom: var(--s-2); }
.cul-split h2 em { color: var(--accent-deep); font-weight: 700; }
.cul-split p { color: var(--ink-soft); margin-bottom: var(--s-2); }

.trend-card { background: var(--white); border: 1px solid rgba(20,18,43,0.08); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--s-3); }
.trend-card .tc-title { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--s-2); }
.trend-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.trend-row .tr-lbl { width: 96px; flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.trend-spark { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.trend-spark b { flex: 1; border-radius: 2px 2px 0 0; background: var(--primary); opacity: 0.85; }
.trend-row.down .trend-spark b { background: var(--accent); }
.trend-row .tr-tag { font-size: 0.68rem; font-weight: 800; padding: 0.2em 0.6em; border-radius: 999px; white-space: nowrap; }
.trend-row .tr-tag.up { background: var(--green-soft); color: var(--green); }
.trend-row .tr-tag.dn { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- Seção escura: do número ao cuidado ---------- */
.cul-dark {
    background: radial-gradient(ellipse 700px 420px at 80% -10%, rgba(var(--accent-rgb), 0.26), transparent 62%), var(--dark-bg);
    color: var(--white); position: relative; overflow: hidden;
}
.cul-dark .eyebrow { color: var(--accent-bright); }
.cul-dark h2 { color: var(--white); text-align: center; margin: 0 auto var(--s-2); max-width: 720px; }
.cul-dark h2 em { color: var(--accent-bright); font-weight: 700; }
.cul-dark .lead { color: rgba(255,255,255,0.75); text-align: center; max-width: 620px; margin: 0 auto var(--s-6); }
.cul-icards { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 720px) { .cul-icards { grid-template-columns: repeat(3, 1fr); } }
.cul-icard { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: var(--s-4); transition: transform var(--transition), border-color var(--transition); }
@media (hover: hover) { .cul-icard:hover { transform: translateY(-5px); border-color: var(--accent-bright); } }
.cul-icard .ci-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(var(--accent-rgb), 0.16); margin-bottom: var(--s-2); }
.cul-icard h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 0.4rem; }
.cul-icard p { color: rgba(255,255,255,0.68); font-size: 0.92rem; }

/* ==========================================================================
   PÁGINA: RELATÓRIOS (relatorios.php)
   Tema azul via --accent. Reaproveita page-hero, dor-*, tile/bento/mini,
   audit-list, faq, cta-final. Próprios: rel-hero, doc-card, rel-demo (central
   de relatórios que gera PDF ao vivo), rel-split e rel-proof.
   ========================================================================== */

.page-relatorios {
    --accent: #5b3ae0;         /* fundo claro */
    --accent-deep: #3d33b8;
    --accent-soft: #eeecfc;
    --accent-rgb: 91, 58, 224;
    --accent-bright: #9278ff;  /* fundo escuro: hero, CTA, seções dark */
}

.page-hero.rel-hero {
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    padding-bottom: var(--s-7);
}
.rel-hero .eyebrow { color: var(--accent); }
.rel-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center;
}
.rel-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); color: var(--ink); margin-bottom: var(--s-3); }
.rel-hero h1 em { color: var(--accent); font-weight: 700; }
.rel-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.rel-hero .lead strong { color: var(--ink); }
.rel-hero .hero-guarantee svg { color: var(--accent); }
@media (min-width: 900px) { .rel-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* Documento (visual do hero) — folha de PDF estilizada */
.doc-card {
    background: var(--white); border-radius: 14px;
    padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); animation: float 7s ease-in-out infinite;
    position: relative;
}
.doc-card::before {
    content: ''; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
    background: linear-gradient(225deg, var(--paper-warm) 50%, transparent 50%);
    border-radius: 0 14px 0 0;
}
.doc-head { display: flex; align-items: center; gap: 0.7rem; padding-bottom: var(--s-2); border-bottom: 2px solid var(--accent); margin-bottom: var(--s-2); }
.doc-head .dh-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.doc-head .dh-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.doc-head .dh-sub { font-size: 0.76rem; color: var(--ink-mute); }
.doc-lines { display: grid; gap: 0.5rem; }
.doc-line { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 0.85rem; color: var(--ink-soft); }
.doc-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.doc-line.total { border-top: 1px dashed rgba(20,18,43,0.15); padding-top: 0.5rem; margin-top: 0.2rem; font-weight: 800; }
.doc-seal {
    margin-top: var(--s-3); display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--green); border: 2px solid var(--green); border-radius: 8px; padding: 0.35em 0.8em; transform: rotate(-2deg);
}

.rel-punch {
    text-align: center; max-width: 760px; margin: var(--s-5) auto 0;
    font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
    font-style: italic; color: var(--ink-soft); text-wrap: balance;
}
.rel-punch strong { color: var(--accent-deep); font-style: normal; }

/* ---------- Demo interativo: central de relatórios ---------- */
.rel-demo-wrap { max-width: 880px; margin: 0 auto; display: grid; gap: var(--s-3); }
.rel-demo {
    background: var(--white); border: 1px solid rgba(20, 18, 43, 0.08);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.rel-demo-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: var(--s-3) clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
    background: linear-gradient(135deg, #241f45 0%, #14122b 100%); color: var(--white); flex-wrap: wrap;
}
.rel-demo-head .rh-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.rel-demo-head .rh-count { font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.rel-demo-head .rh-count b { color: var(--accent-bright); }

.rel-demo-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 680px) { .rel-demo-body { grid-template-columns: 0.85fr 1.15fr; } }

.rel-types { padding: clamp(0.8rem, 0.5rem + 1vw, 1.1rem); display: grid; gap: 0.5rem; align-content: start; background: var(--paper-warm); }
.rel-type {
    display: flex; align-items: center; gap: 0.6rem; text-align: left; width: 100%;
    padding: 0.65rem 0.8rem; border-radius: 12px; border: 2px solid transparent; cursor: pointer;
    background: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; color: var(--ink-soft);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.rel-type .rt-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
@media (hover: hover) { .rel-type:hover { border-color: rgba(var(--accent-rgb), 0.35); } }
.rel-type.active { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.rel-type.active .rt-ico { background: var(--accent); color: var(--white); }

.rel-doc-col { padding: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); }
.rel-doc {
    background: var(--white); border: 1px solid rgba(20,18,43,0.1); border-radius: 12px;
    box-shadow: var(--shadow-sm); padding: clamp(0.9rem, 0.6rem + 1vw, 1.3rem); position: relative; min-height: 240px;
    display: flex; flex-direction: column;
}
.rel-doc-header { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--accent); margin-bottom: 0.7rem; }
.rel-doc-header .rd-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.rel-doc-header .rd-title { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.rel-doc-header .rd-sub { font-size: 0.72rem; color: var(--ink-mute); }
.rel-panel { animation: finRowIn 400ms cubic-bezier(0.25,0.6,0.3,1) both; }
.rel-panel[hidden] { display: none; }
.rel-doc-stamp {
    margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--green); background: var(--green-soft); border-radius: 8px; padding: 0.4em 0.8em; margin-top: 0.8rem;
    opacity: 0; transform: scale(0.9); transition: opacity 300ms ease, transform 300ms ease;
}
.rel-doc-stamp.show { opacity: 1; transform: scale(1); }

.rel-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: clamp(0.8rem, 0.5rem + 1vw, 1.25rem); border-top: 1px solid rgba(20,18,43,0.07); }
.rel-gen {
    font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; min-height: 46px;
    padding: 0.6em 1.4em; border-radius: 999px; border: none; cursor: pointer;
    background: var(--accent); color: var(--white); box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.4);
    display: inline-flex; align-items: center; gap: 0.5em;
    transition: transform var(--transition), background var(--transition);
}
@media (hover: hover) { .rel-gen:hover { background: var(--accent-deep); transform: translateY(-2px); } }
.rel-gen:active { transform: scale(0.97); }
.rel-gen[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.rel-reset { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--primary); text-decoration: underline; padding: 0.5em; margin-left: auto; }
.rel-tray { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rel-tray:empty { display: none; }
.rel-tray .tray-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--accent-deep);
    background: var(--accent-soft); border-radius: 999px; padding: 0.35em 0.85em; animation: finRowIn 350ms ease both;
}
.rel-limit-hint { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--ink-mute); text-align: center; }
.rel-limit-hint strong { color: var(--ink); }
.rel-demo-note { text-align: center; font-size: 0.82rem; color: var(--ink-mute); }

/* ---------- Um relatório para cada plateia (destaque) ---------- */
.rel-split {
    display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--white));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (min-width: 820px) { .rel-split { grid-template-columns: 1fr 0.95fr; } }
.rel-split .eyebrow { color: var(--accent-deep); }
.rel-split h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); margin-bottom: var(--s-2); }
.rel-split h2 em { color: var(--accent-deep); font-weight: 700; }
.rel-split p { color: var(--ink-soft); margin-bottom: var(--s-2); }

.plateia-card { background: var(--white); border: 1px solid rgba(20,18,43,0.08); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--s-3); display: grid; gap: 0.6rem; }
.plateia-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0; }
.plateia-row:not(:last-child) { border-bottom: 1px solid rgba(20,18,43,0.06); }
.plateia-row .pr-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: 1.1rem; }
.plateia-row .pr-who { font-weight: 800; color: var(--ink); font-size: 0.9rem; }
.plateia-row .pr-what { font-size: 0.8rem; color: var(--ink-mute); }

/* ---------- Relatório é prova (seção escura) ---------- */
.rel-proof {
    background: radial-gradient(ellipse 700px 440px at 50% -10%, rgba(var(--accent-rgb), 0.3), transparent 62%), var(--dark-bg);
    color: var(--white); position: relative; overflow: hidden;
}
.rel-proof-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .rel-proof-grid { grid-template-columns: 1fr 1fr; } }
.rel-proof .eyebrow { color: var(--accent-bright); }
.rel-proof h2 { color: var(--white); margin-bottom: var(--s-3); }
.rel-proof h2 em { color: var(--accent-bright); font-weight: 700; }
.rel-proof p { color: rgba(255,255,255,0.75); margin-bottom: var(--s-2); }

.proof-doc {
    background: var(--white); border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,0.4);
    padding: var(--s-4); position: relative;
}
.proof-doc .pd-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.proof-doc .pd-sub { font-size: 0.78rem; color: var(--ink-mute); margin-bottom: var(--s-3); }
.proof-doc .pd-line { height: 8px; border-radius: 4px; background: #eef0f4; margin-bottom: 0.6rem; }
.proof-doc .pd-line.w70 { width: 70%; } .proof-doc .pd-line.w90 { width: 90%; } .proof-doc .pd-line.w50 { width: 50%; }
.proof-doc .pd-verify {
    margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed rgba(20,18,43,0.15);
    display: flex; align-items: center; gap: 0.7rem;
}
.proof-doc .pd-badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.proof-doc .pd-vtext { font-size: 0.82rem; color: var(--ink-soft); }
.proof-doc .pd-vtext b { color: var(--ink); display: block; }
.proof-doc .pd-hash { font-family: 'Consolas','Courier New',monospace; font-size: 0.7rem; color: var(--accent-deep); }

/* ==========================================================================
   PÁGINA DE SUCESSO — pós-pagamento (site/sucesso.php)
   ========================================================================== */
.sucesso-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    color: var(--ink);
    text-align: center;
    padding: clamp(3rem, 2rem + 6vw, 6rem) 0 clamp(2.5rem, 2rem + 4vw, 4.5rem);
}
.sucesso-hero #confete {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.sucesso-hero-conteudo { position: relative; z-index: 1; max-width: 680px; }

.sucesso-tag {
    display: inline-block;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
    /* verde de TEXTO (o #a7f3d0 era o verde-menta para fundo escuro) */
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid rgba(36, 123, 83, 0.28);
    padding: 0.3rem 0.9rem; border-radius: 999px;
    margin-bottom: var(--s-3);
}
.sucesso-check {
    width: 84px; height: 84px; margin: 0 auto var(--s-3);
    border-radius: 50%;
    background: var(--green); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 0 0 10px rgba(46, 158, 107, 0.18);
    animation: sucesso-pop 600ms cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes sucesso-pop { from { transform: scale(0); } to { transform: scale(1); } }

.sucesso-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
    line-height: 1.1; margin-bottom: var(--s-2);
}
.sucesso-hero h1 em { color: var(--primary); font-weight: 700; }
.sucesso-sub { color: var(--ink-soft); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); }

.sucesso-passos-secao { background: var(--paper); }
.sucesso-passos-titulo {
    text-align: center; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); color: var(--ink);
    margin-bottom: var(--s-4);
}
.sucesso-passos {
    list-style: none; padding: 0;
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(3, 1fr);
    max-width: 980px; margin: 0 auto var(--s-4);
}
@media (max-width: 760px) { .sucesso-passos { grid-template-columns: 1fr; } }

.passo-card {
    background: var(--white);
    border: 1px solid rgba(20, 18, 43, 0.07);
    border-radius: var(--radius-lg);
    padding: var(--s-3);
    box-shadow: var(--shadow-md);
    display: flex; gap: 0.9rem; align-items: flex-start;
    opacity: 0; transform: translateY(14px);
    animation: sucesso-reveal 560ms ease both;
    animation-delay: calc(160ms * var(--i, 0) + 200ms);
}
@keyframes sucesso-reveal { to { opacity: 1; transform: none; } }

.passo-num {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1rem;
}
.passo-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.25rem; }
.passo-card p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }

.sucesso-ajuda { text-align: center; color: var(--ink-soft); font-size: 0.95rem; max-width: 620px; margin: 0 auto var(--s-4); }
.sucesso-ajuda a { color: var(--primary); font-weight: 700; }

.sucesso-acoes {
    display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
    margin-bottom: var(--s-3);
}
.sucesso-acoes .btn-ghost {
    border: 2px solid rgba(20, 18, 43, 0.15); color: var(--ink); background: transparent;
}
.sucesso-acoes .btn-ghost:hover { border-color: var(--primary); background: var(--primary-ghost); }

.sucesso-garantia { text-align: center; color: var(--ink-mute); font-size: 0.85rem; max-width: 560px; margin: 0 auto; }
.sucesso-garantia strong { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .sucesso-check, .passo-card { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   PÁGINA: APP DO MEMBRO (app.php)
   Tema violeta. Peça central: um CELULAR com telas reais do app e navegação
   por abas (troca de tela ao vivo). Reaproveita page-hero, dor-*, faq,
   cta-final. Componentes próprios: phone/app-* , north (5 perguntas), brand
   (white-label) e cascade.
   ========================================================================== */

.page-app {
    --accent: #7c3aed;         /* fundo claro */
    --accent-deep: #5b21b6;
    --accent-soft: #f2ecfe;
    --accent-rgb: 124, 58, 237;
    --accent-bright: #cdb8ff;  /* fundo escuro: hero, CTA, seções dark */
}

.page-hero.app-hero {
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    padding-bottom: var(--s-7);
}
.app-hero .eyebrow { color: var(--accent); }
.app-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; justify-items: center; }
.app-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); color: var(--ink); margin-bottom: var(--s-3); }
.app-hero h1 em { color: var(--accent); font-style: italic; }
.app-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.app-hero .lead strong { color: var(--ink); }
.app-hero .hero-guarantee svg { color: var(--accent); }
@media (min-width: 900px) { .app-hero-grid { grid-template-columns: 1.05fr 0.95fr; justify-items: start; } }

/* Selos de loja */
.store-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--s-3); }
/* Selos de loja: eram um chip translúcido branco (só funcionava sobre o hero
   escuro). Com a entrada clara viram chip de TINTA — que também é como os
   selos reais da App Store e da Play Store se apresentam. */
.store-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--ink); border: 1px solid var(--ink);
    border-radius: 12px; padding: 0.5em 0.9em; color: var(--white);
}
.store-badge svg { flex-shrink: 0; }
.store-badge span { line-height: 1.1; }
.store-badge b { display: block; font-size: 0.9rem; font-weight: 700; }
.store-badge small { font-size: 0.66rem; color: rgba(255,255,255,0.6); }

/* ---------- O CELULAR ---------- */
.phone-wrap { position: relative; padding: 20px; }
.phone {
    position: relative;
    width: clamp(248px, 72vw, 286px);
    aspect-ratio: 9 / 19;
    background: #0b0a1c;
    border-radius: 42px;
    padding: 11px;
    box-shadow: 0 44px 90px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.07);
}
.phone.float { animation: float 7s ease-in-out infinite; }
.phone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 36%; height: 20px; background: #0b0a1c; border-radius: 0 0 13px 13px; z-index: 6; }
.phone-screen {
    position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
    background: var(--paper); display: flex; flex-direction: column;
    color: var(--ink);   /* o celular é autossuficiente: não herda o branco da seção escura do hero */
}

.app-top {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--white); padding: 26px 15px 12px; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
}
.app-top .logo-dot { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: rgba(255,255,255,0.2); display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; }
.app-top .ch { font-weight: 800; font-size: 0.85rem; line-height: 1.1; }
.app-top .un { font-size: 0.66rem; color: rgba(255,255,255,0.8); }
.app-top .bell { margin-left: auto; opacity: 0.9; }

.app-body { flex: 1; overflow: hidden; padding: 0.8rem; background: var(--paper); position: relative; }
.app-scr { display: flex; flex-direction: column; gap: 0.6rem; animation: appIn 320ms cubic-bezier(0.25,0.6,0.3,1); }
.app-scr[hidden] { display: none; }
@keyframes appIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.app-scr-title { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink); margin-bottom: 0.1rem; }

/* Cartões dentro do app */
.a-card { background: var(--white); border: 1px solid rgba(20,18,43,0.08); border-radius: 12px; padding: 0.6rem 0.7rem; }
.a-com { position: relative; }
.a-com .a-com-tag { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); background: var(--accent-soft); padding: 0.15em 0.5em; border-radius: 999px; }
.a-com h4 { font-size: 0.76rem; margin: 0.3rem 0 0.15rem; color: var(--ink); }
.a-com p { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.35; }
.a-com .a-time { font-size: 0.6rem; color: var(--ink-mute); margin-top: 0.3rem; }
.a-com .unread { position: absolute; top: 0.6rem; right: 0.6rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.a-esc { background: linear-gradient(135deg, var(--accent-soft), var(--white)); border: 1px solid rgba(var(--accent-rgb),0.25); }
.a-esc .a-esc-badge { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); }
.a-esc h4 { font-size: 0.84rem; margin: 0.35rem 0 0.1rem; color: var(--ink); }
.a-esc .a-esc-when { font-size: 0.68rem; color: var(--ink-soft); }
.a-esc-actions { display: flex; gap: 0.4rem; margin-top: 0.55rem; }
.a-btn { flex: 1; border: none; cursor: pointer; border-radius: 9px; padding: 0.45em; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; }
.a-btn.ok { background: var(--accent); color: var(--white); }
.a-btn.no { background: #eef0f4; color: var(--ink-soft); }
.a-esc.confirmada { }
.a-esc-done { display: none; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--green); }
.a-esc.confirmada .a-esc-actions { display: none; }
.a-esc.confirmada .a-esc-done { display: flex; }

.a-agenda { display: flex; gap: 0.6rem; align-items: center; }
.a-agenda .a-date { flex-shrink: 0; width: 40px; text-align: center; background: var(--accent-soft); border-radius: 9px; padding: 0.3rem 0; }
.a-agenda .a-date b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--accent-deep); line-height: 1; }
.a-agenda .a-date span { font-size: 0.56rem; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.a-agenda .a-ev h4 { font-size: 0.74rem; color: var(--ink); }
.a-agenda .a-ev p { font-size: 0.64rem; color: var(--ink-mute); }
.a-agenda.cancel .a-ev h4 { text-decoration: line-through; color: var(--ink-mute); }
.a-agenda .a-cancel-tag { margin-left: auto; font-size: 0.56rem; font-weight: 800; color: var(--red); background: var(--red-soft); padding: 0.15em 0.5em; border-radius: 999px; }

.a-pix { text-align: center; }
.a-qr { width: 96px; height: 96px; margin: 0.2rem auto 0.5rem; border-radius: 10px; background:
    conic-gradient(from 0deg, #14122b 0 25%, transparent 0 50%, #14122b 0 75%, transparent 0) 0 0 / 16px 16px,
    var(--white);
    border: 4px solid var(--white); box-shadow: 0 0 0 1px rgba(20,18,43,0.12); position: relative; }
.a-qr::after { content: ''; position: absolute; inset: 30% 30%; background: var(--white); border-radius: 4px; }
.a-pix-key { font-family: 'Consolas', monospace; font-size: 0.66rem; color: var(--ink-soft); background: var(--paper-warm); border-radius: 8px; padding: 0.4em; margin-bottom: 0.4rem; }
.a-pix .a-btn.ok { width: 100%; }
.a-pix-hint { font-size: 0.6rem; color: var(--ink-mute); margin-top: 0.4rem; }

.a-perfil-head { display: flex; align-items: center; gap: 0.6rem; }
.a-perfil-head .av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--white); display: grid; place-items: center; font-weight: 800; }
.a-perfil-head .nm { font-weight: 800; font-size: 0.8rem; color: var(--ink); }
.a-perfil-head .sub { font-size: 0.64rem; color: var(--ink-mute); }
.a-field { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; }
.a-field span { color: var(--ink-mute); }
.a-field b { color: var(--ink); font-weight: 700; }
.a-field .edit { color: var(--accent); font-weight: 800; font-size: 0.62rem; }

.app-tabs { display: flex; background: var(--white); border-top: 1px solid rgba(20,18,43,0.08); padding: 0.35rem 0.15rem; flex-shrink: 0; }
.app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--ink-mute); font-family: var(--font-body); font-size: 0.56rem; font-weight: 700; padding: 0.25rem 0; transition: color var(--transition); }
.app-tab svg { width: 19px; height: 19px; }
.app-tab.active { color: var(--accent); }
.app-tab .dot { position: absolute; }

.phone-chip {
    position: absolute; background: var(--white); color: var(--ink); border-radius: 14px;
    padding: 0.55rem 0.8rem; box-shadow: var(--shadow-lg); font-size: 0.76rem; font-weight: 700;
    display: flex; align-items: center; gap: 0.5rem; z-index: 3; animation: float 6s ease-in-out infinite;
}
.phone-chip small { display: block; font-weight: 600; color: var(--ink-mute); font-size: 0.68rem; }
.phone-chip .pc-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-deep); }
.phone-chip.pc-1 { top: 6%; right: -6%; animation-delay: 1s; }
.phone-chip.pc-2 { bottom: 8%; left: -8%; animation-delay: 2.2s; }
/* Em telas estreitas os chips decorativos vazariam a lateral — e o celular já
   é o protagonista. Escondê-los é mais limpo que espremê-los. */
@media (max-width: 560px) { .phone-chip { display: none; } }

/* Tile de destaque do app na HOME (tema gold da home) */
.app-promo {
    /* o .tile base é flex COLUNA — aqui o desenho é texto | celular, em linha */
    display: flex; flex-direction: row; align-items: center; gap: clamp(var(--s-3), 4vw, var(--s-6));
    /* Vida no fundo escuro: dois brilhos violeta em radial (padrão do site —
       sem filter:blur) por cima do gradiente base. */
    background:
        radial-gradient(ellipse 620px 420px at 84% 0%, rgba(124, 92, 255, 0.34), transparent 62%),
        radial-gradient(ellipse 480px 340px at 2% 115%, rgba(91, 58, 224, 0.28), transparent 60%),
        linear-gradient(135deg, var(--ink) 0%, #241f45 100%);
    color: var(--white); border: none; text-align: left;
    flex-wrap: wrap; padding-bottom: 0;
}
.app-promo::before { display: none; }
@media (hover: hover) { .app-promo:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } }
.app-promo-text { flex: 1; min-width: 240px; display: block; padding-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.app-promo-text .feature-tag { background: rgba(124,92,255,0.22); color: #cbb8ff; }
.app-promo-text h3 { color: var(--white); margin: 0.4rem 0 0.3rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.app-promo-text p { color: rgba(255,255,255,0.75); font-size: 0.96rem; max-width: 46ch; }
.app-promo-text p strong { color: var(--white); }
.ap-feats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.3rem; }
.ap-feats > span {
    display: inline-flex; align-items: center; gap: 0.45em;
    font-size: 0.83rem; font-weight: 700; color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px; padding: 0.42em 0.9em;
}
.ap-feats svg { color: #cbb8ff; flex-shrink: 0; }
.app-promo-cta {
    display: inline-flex; align-items: center; gap: 0.4em; font-weight: 800;
    background: var(--gold); color: var(--ink);
    border-radius: 999px; padding: 0.7em 1.5em;
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.4); white-space: nowrap;
}
.app-promo:hover .app-promo-cta .arrow { transform: translateX(4px); }
.app-promo-cta .arrow { transition: transform var(--transition); }

/* O mini-celular do cartão: mesma linguagem do demo da página do app, cortado
   na base do cartão (o .tile tem overflow:hidden) — levemente inclinado e
   flutuando (float anima `translate`, compõe com o rotate do transform). */
.ap-phone {
    display: block; flex-shrink: 0; position: relative;
    width: clamp(210px, 22vw, 250px); height: 290px;
    margin: 0 auto;
    background: #0b0a1c; border-radius: 34px 34px 0 0; padding: 9px 9px 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
    transform: rotate(2.5deg);
    animation: float 7s ease-in-out infinite;
    align-self: flex-end;
}
@media (min-width: 900px) { .ap-phone { margin: 0 var(--s-3) 0 0; height: 310px; } }
.ap-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34%; height: 16px; background: #0b0a1c; border-radius: 0 0 11px 11px; z-index: 2; }
.ap-screen {
    display: flex; flex-direction: column; gap: 0.55rem;
    height: 100%; overflow: hidden; border-radius: 26px 26px 0 0;
    background: var(--paper); color: var(--ink); padding: 1.6rem 0.7rem 0;
}
.ap-top { display: flex; align-items: center; gap: 0.5rem; }
.ap-dot { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--accent); color: var(--white); font-weight: 800; font-size: 0.68rem; display: grid; place-items: center; }
.ap-ch { display: block; font-weight: 800; font-size: 0.78rem; line-height: 1.15; }
.ap-ch small { display: block; font-weight: 600; font-size: 0.62rem; color: var(--ink-mute); }
.ap-card { display: block; position: relative; background: var(--white); border: 1px solid rgba(20, 18, 43, 0.08); border-radius: 12px; padding: 0.6rem 0.7rem; box-shadow: 0 2px 8px rgba(20, 18, 43, 0.05); }
.ap-card > b { display: block; font-size: 0.72rem; line-height: 1.25; padding-right: 0.8rem; }
.ap-card > small, .ap-ok-txt small { display: block; font-size: 0.64rem; color: var(--ink-mute); line-height: 1.35; }
.ap-unread { position: absolute; top: 0.65rem; right: 0.65rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ap-ok { display: flex; align-items: center; gap: 0.55rem; }
.ap-check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: rgba(36, 123, 83, 0.14); color: var(--green); display: grid; place-items: center; }
.ap-ok-txt { display: block; }
.ap-ok-txt b { display: block; font-size: 0.72rem; }
.ap-pix { display: block; background: var(--accent); color: var(--white); text-align: center; border-radius: 12px; padding: 0.6rem; font-weight: 800; font-size: 0.72rem; box-shadow: 0 6px 16px rgba(91, 58, 224, 0.3); }

/* ---------- Demo interativo (celular grande + legenda) ---------- */
.app-demo-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; justify-items: center; }
@media (min-width: 820px) { .app-demo-wrap { grid-template-columns: 0.85fr 1.15fr; } }
.app-demo-caption h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin-bottom: var(--s-2); }
.app-demo-caption .dc-list { list-style: none; display: grid; gap: 0.7rem; }
.app-demo-caption .dc-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.96rem; }
.app-demo-caption .dc-list .dc-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.app-demo-caption .dc-list b { color: var(--ink); }
.app-demo-hint { text-align: center; font-size: 0.85rem; color: var(--accent-deep); font-weight: 700; margin-top: var(--s-2); }

/* ---------- 5 perguntas ---------- */
.north-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 560px) { .north-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .north-grid { grid-template-columns: repeat(5, 1fr); } }
.north-card { background: var(--white); border: 1px solid rgba(20,18,43,0.07); border-radius: var(--radius-lg); padding: var(--s-3); text-align: center; transition: transform var(--transition), box-shadow var(--transition); }
@media (hover: hover) { .north-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } }
.north-card .n-ico { width: 48px; height: 48px; margin: 0 auto var(--s-2); border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.4rem; }
.north-card .n-q { font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--ink); line-height: 1.25; margin-bottom: 0.5rem; }
.north-card .n-tag { font-size: 0.66rem; font-weight: 800; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Split (escala / contribuir) ---------- */
.app-split { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; }
@media (min-width: 860px) { .app-split { grid-template-columns: 1fr 1fr; } .app-split.rev .app-split-media { order: -1; } }
.app-split-media { display: flex; justify-content: center; }
.app-split .eyebrow { color: var(--accent); }
.app-split h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem); margin-bottom: var(--s-2); }
.app-split h2 em { color: var(--accent-deep); font-style: italic; }
.app-split p { color: var(--ink-soft); margin-bottom: var(--s-2); }
.app-split .audit-list li { color: var(--ink-soft); }   /* fundo claro: texto escuro */
.app-split .audit-list .check { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- White-label (seção escura) ---------- */
.app-brand {
    background: radial-gradient(ellipse 700px 440px at 80% -10%, rgba(var(--accent-rgb),0.28), transparent 62%), var(--dark-bg);
    color: var(--white); position: relative; overflow: hidden;
}
.app-brand .eyebrow { color: var(--accent-bright); }
.app-brand h2 { color: var(--white); text-align: center; margin: 0 auto var(--s-2); max-width: 680px; }
.app-brand h2 em { color: var(--accent-bright); font-style: italic; }
.app-brand .lead { color: rgba(255,255,255,0.75); text-align: center; max-width: 600px; margin: 0 auto var(--s-6); }
.brand-row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.brand-mini { width: 200px; background: rgba(255,255,255,0.05); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition); }
@media (hover: hover) { .brand-mini:hover { transform: translateY(-6px); } }
.brand-mini .bm-top { padding: 1rem 0.9rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; }
.brand-mini .bm-logo { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.25); display: grid; place-items: center; font-weight: 800; font-size: 0.75rem; }
.brand-mini .bm-name { font-weight: 800; font-size: 0.82rem; }
.brand-mini .bm-body { background: #fff; padding: 0.8rem; display: grid; gap: 0.5rem; }
.brand-mini .bm-line { height: 8px; border-radius: 4px; background: #eef0f4; }
.brand-mini .bm-line.w70 { width: 70%; }
.brand-mini .bm-pill { align-self: flex-start; font-size: 0.6rem; font-weight: 800; padding: 0.2em 0.6em; border-radius: 999px; }
.brand-mini.v .bm-top { background: linear-gradient(135deg,#7c3aed,#5b21b6); } .brand-mini.v .bm-pill { background:#f2ecfe; color:#5b21b6; }
.brand-mini.g .bm-top { background: linear-gradient(135deg,#0c8178,#0a7368); } .brand-mini.g .bm-pill { background:#e0f3f0; color:#0a7368; }
.brand-mini.o .bm-top { background: linear-gradient(135deg,#da372d,#b23a33); } .brand-mini.o .bm-pill { background:#fdecea; color:#b23a33; }
.brand-note { text-align: center; margin-top: var(--s-4); color: rgba(255,255,255,0.6); font-size: 0.9rem; }

/* ---------- Cascata ---------- */
.cascade { display: grid; grid-template-columns: 1fr; gap: var(--s-3); max-width: 900px; margin: 0 auto; }
@media (min-width: 760px) { .cascade { grid-template-columns: repeat(3, 1fr); position: relative; } }
.cascade-step { background: var(--white); border: 1px solid rgba(20,18,43,0.07); border-radius: var(--radius-lg); padding: var(--s-4); text-align: center; position: relative; }
.cascade-step .cs-num { position: absolute; top: 0.7rem; right: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; color: var(--ink); opacity: 0.05; }
.cascade-step .cs-ico { width: 52px; height: 52px; margin: 0 auto var(--s-2); border-radius: 15px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; }
.cascade-step h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.cascade-step p { color: var(--ink-soft); font-size: 0.92rem; }
.cascade-step .cs-arrow { display: none; }
@media (min-width: 760px) {
    .cascade-step:not(:last-child) .cs-arrow { display: grid; place-items: center; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; z-index: 2; }
}

/* ==========================================================================
   PÁGINA: ESCALAS DE VOLUNTÁRIOS (escalas.php) — tema violeta (padrão)
   Componentes próprios: quadro de escala e "publicar" (link/WhatsApp/PDF).
   ========================================================================== */
.esc-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .esc-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.esc-hero .eyebrow { color: var(--accent); }
.esc-hero h1 { color: var(--ink); font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); margin-bottom: var(--s-3); }
.esc-hero h1 em { color: var(--accent); font-style: italic; }
.esc-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.esc-hero .lead strong { color: var(--ink); }
.esc-hero .hero-guarantee svg { color: var(--accent); }

/* Quadro de escala */
.esc-board { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(20,18,43,0.05); overflow: hidden; max-width: 460px; }
.esc-board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) clamp(1rem, 0.7rem + 1.5vw, 1.5rem); background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--white); flex-wrap: wrap; }
.esc-board-head .eb-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.esc-board-head .eb-sub { font-size: 0.72rem; color: rgba(255,255,255,0.8); }
.esc-board-head .eb-count { font-size: 0.72rem; font-weight: 800; background: rgba(255,255,255,0.18); padding: 0.3em 0.7em; border-radius: 999px; white-space: nowrap; }
.esc-list { list-style: none; padding: 0.6rem; display: grid; gap: 0.45rem; }
.esc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--paper); border: 1px solid rgba(20,18,43,0.05); }
.esc-row .er-fn { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-deep); width: 74px; flex-shrink: 0; }
.esc-row .er-av { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent-deep)); color: #fff; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; }
.esc-row .er-name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.85rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-row .er-status { font-size: 0.62rem; font-weight: 800; padding: 0.25em 0.6em; border-radius: 999px; white-space: nowrap; cursor: pointer; user-select: none; }
.esc-row .er-status.pend { background: var(--gold-soft); color: var(--accent-deep); }
.esc-row .er-status.ok { background: var(--green-soft); color: #1f7a50; }
.esc-row .er-status.no { background: var(--red-soft); color: var(--red); }
.esc-board-foot { padding: 0.8rem clamp(1rem, 0.7rem + 1.5vw, 1.5rem); border-top: 1px solid rgba(20,18,43,0.07); }
.esc-pub { width: 100%; border: none; cursor: pointer; border-radius: 999px; min-height: 46px; padding: 0.6em 1.4em; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.4); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; transition: transform var(--transition), background var(--transition); }
@media (hover:hover){ .esc-pub:hover { background: var(--accent-deep); transform: translateY(-2px); } }
.esc-outs { display: none; margin-top: 0.7rem; }
.esc-outs.show { display: grid; gap: 0.45rem; animation: finRowIn 400ms ease both; }
.esc-out { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 0.5rem 0.7rem; }
.esc-out svg { color: var(--accent-deep); flex-shrink: 0; }
.esc-out small { display: block; font-weight: 600; color: var(--ink-mute); font-size: 0.68rem; }
.esc-hint { text-align: center; font-size: 0.68rem; color: var(--ink-mute); margin-top: 0.5rem; }

/* Texto pronto de WhatsApp (destaque) */
.wa-card { background: #e7f6ec; border: 1px solid #bfe6cc; border-radius: var(--radius); padding: var(--s-3); font-size: 0.9rem; color: #14342099; }
.wa-card .wa-line { color: #143420; margin-bottom: 0.3rem; }
.wa-card .wa-line b { font-weight: 800; }
.wa-card .wa-at { color: var(--accent-deep); font-weight: 700; }
.wa-card .wa-meta { display:block; margin-top:0.6rem; font-size:0.72rem; color:#3a5a45; }

/* ============================================================
   COMUNICAÇÃO (página comunicacao) — composer interativo
   ============================================================ */
.com-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .com-hero-grid { grid-template-columns: 1fr; } }

/* Visual do hero: pilha de canais */
.com-stack { display: grid; gap: 0.7rem; }
.com-note {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid rgba(20,18,43,0.1); border-radius: 16px;
    padding: 0.85rem 1rem; box-shadow: var(--shadow-sm);
}
.com-note .cn-ico {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; color: #fff; font-size: 1rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
}
.com-note .cn-body { min-width: 0; }
.com-note .cn-tt { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.com-note .cn-sub { display: block; font-size: 0.78rem; color: var(--ink-mute); margin-top: 1px; }
.com-note .cn-tag { flex: none; margin-left: auto; font-size: 0.68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--green); align-self: center; }

/* Composer (demo) */
.com-composer {
    max-width: 720px; margin: 0 auto; background: #fff;
    border: 1px solid rgba(20,18,43,0.1); border-radius: 22px; overflow: hidden;
    box-shadow: var(--shadow-md);
}
.com-msg { padding: 1.1rem 1.25rem; background: var(--accent-soft); border-bottom: 1px solid rgba(20,18,43,0.1); }
.com-from { font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-deep); }
.com-text { margin: 0.35rem 0 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.com-controls { padding: 1.25rem; display: grid; gap: 1.15rem; }
.com-field { display: grid; gap: 0.5rem; }
.com-label { font-size: 0.78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-mute); }
.com-chips, .com-chans { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.com-chip, .com-chan {
    font: inherit; cursor: pointer; border-radius: 999px;
    padding: 0.5rem 0.95rem; font-size: 0.9rem; font-weight: 600;
    border: 1.5px solid rgba(20,18,43,0.1); background: #fff; color: var(--ink-soft);
    transition: all .16s ease;
}
.com-chip:hover, .com-chan:hover { border-color: var(--primary); color: var(--ink); }
.com-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.com-chan.active { background: var(--accent-soft); border-color: var(--primary); color: var(--accent-deep); font-weight: 800; }
.com-hint { font-size: 0.85rem; color: var(--ink-mute); margin: 0; }
.com-hint b { color: var(--accent-deep); font-weight: 800; }
.com-send {
    font: inherit; cursor: pointer; font-weight: 800; font-size: 0.98rem;
    color: #fff; border: none; border-radius: 12px; padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: transform .12s ease, box-shadow .12s ease;
}
.com-send:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(91,58,224,.28); }
.com-send:disabled { cursor: default; opacity: .95; transform: none; box-shadow: none; background: var(--green); }
.com-result { display: none; border-top: 1px dashed rgba(20,18,43,0.1); padding-top: 1.1rem; margin-top: 0.15rem; }
.com-result.show { display: grid; gap: 0.6rem; animation: comIn .3s ease; }
@keyframes comIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.com-reach { font-size: 1rem; color: var(--ink); }
.com-reach b { font-family: var(--font-display); font-size: 1.25rem; color: var(--accent-deep); }
.com-bar { height: 10px; border-radius: 999px; background: var(--paper-warm); overflow: hidden; }
.com-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #37a56e); transition: width .6s cubic-bezier(.22,1,.36,1); }
.com-read { font-size: 0.85rem; color: var(--ink-mute); }
.com-read b { color: var(--green); font-weight: 800; }

/* hero da comunicacao — mesmo tratamento escuro das páginas-irmãs (eyebrow/em/ícone em accent-bright sobre o fundo escuro) */
.com-hero .eyebrow { color: var(--accent); }
/* As margens abaixo faltavam (todos os outros heros as têm): o texto encostava
   nos botões — gap de 0px contra 32px nas demais páginas. */
.com-hero h1 { color: var(--ink); margin-bottom: var(--s-3); }
.com-hero h1 em { color: var(--accent); font-weight: 700; }
.com-hero .lead { color: var(--ink-soft); max-width: 560px; margin-bottom: var(--s-4); }
.com-hero .lead strong { color: var(--ink); }
.com-hero .hero-guarantee svg { color: var(--accent); }

/* ============================================================
   DOCUMENTOS (seção na página do app) — card de arquivos
   ============================================================ */
.doc-card { background: #fff; border: 1px solid rgba(20,18,43,0.08); border-radius: 20px; box-shadow: var(--shadow-md); overflow: hidden; max-width: 380px; width: 100%; }
.doc-card-head { padding: 0.9rem 1.1rem; background: var(--accent-soft); border-bottom: 1px solid rgba(20,18,43,0.06); }
.dc-badge { font-weight: 800; font-size: 0.85rem; color: var(--accent-deep); }
.doc-list { list-style: none; margin: 0; padding: 0.4rem; display: grid; gap: 0.15rem; }
.doc-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 12px; transition: background 0.15s ease; }
.doc-list li:hover { background: var(--paper-warm); }
.doc-ico { font-size: 1.3rem; flex: none; line-height: 1; }
.doc-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-meta b { font-size: 0.92rem; color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.doc-meta small { font-size: 0.72rem; color: var(--ink-mute); }
.doc-dl { flex: none; font-size: 0.8rem; font-weight: 800; color: var(--accent-deep); border: 1.5px solid var(--accent-soft); border-radius: 999px; padding: 0.3rem 0.75rem; }

/* ============================================================
   ESCALA + FINANCEIRO (card integrado da página escalas)
   Visual: dois cartões do app unidos por um "+" na coluna dos ícones
   ============================================================ */
.esc-combo {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center;
    background: linear-gradient(135deg, var(--ink) 0%, #241f45 100%);
    color: var(--white); border: none; border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); overflow: hidden;
}
.esc-combo::before { display: none; }
@media (min-width: 760px) { .esc-combo { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); } }

.ec-head .feature-tag { background: rgba(124,92,255,0.22); color: #cbb8ff; }
.ec-head h3 { color: var(--white); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin: 0.7rem 0 0.5rem; }
.ec-head p { color: rgba(255,255,255,0.80); font-size: 0.98rem; max-width: 44ch; margin-bottom: 1.1rem; }
.ec-head p strong { color: var(--white); font-weight: 700; }
.ec-cta { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 800; color: #cbb8ff; }
.ec-cta .arrow { transition: transform var(--transition); }
.esc-combo:hover .ec-cta .arrow { transform: translateX(4px); }

.ec-visual { position: relative; display: grid; gap: 0.95rem; }
.ec-chip {
    display: flex; align-items: center; gap: 0.8rem;
    background: #fff; color: var(--ink); border-radius: 14px; padding: 0.85rem 1rem;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.ec-chip > div { flex: 1; min-width: 0; }
.ec-chip b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; line-height: 1.2; }
.ec-chip small { display: block; color: var(--ink-mute); font-size: 0.74rem; margin-top: 1px; }
.ec-chip-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.ec-chip-esc .ec-chip-ico { background: var(--accent-soft); color: var(--accent-deep); }
.ec-chip-fin .ec-chip-ico { background: #e1f2e9; color: var(--green); }
.ec-chip-tag { flex: none; font-size: 0.66rem; font-weight: 800; padding: 0.35em 0.75em; border-radius: 999px; }
.ec-chip-tag.ok { background: var(--accent-soft); color: var(--accent-deep); }
.ec-chip-tag.pix { background: #e1f2e9; color: #196343; }

.ec-plus {
    position: absolute; left: calc(1rem + 20px); top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1;
    color: #fff; background: linear-gradient(135deg, var(--gold), var(--accent));
    box-shadow: 0 8px 20px rgba(91,58,224,0.55); border: 4px solid #1b1838;
}

/* ============================================================
   PÁGINAS LEGAIS (termos, privacidade, lgpd) — layout de leitura
   ============================================================ */
.legal-hero {
    background:
        radial-gradient(ellipse 760px 480px at 88% -18%, rgba(91, 58, 224, 0.15), transparent 64%),
        var(--paper-warm);
    padding: calc(var(--header-h) + clamp(2rem, 1.5rem + 3vw, 3.5rem)) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.legal-hero .eyebrow { color: var(--accent); }
.legal-hero h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); color: var(--ink); margin: 0.5rem 0 0.6rem; }
.legal-meta { color: var(--ink-mute); font-size: 0.9rem; }
.legal-hero .legal-meta { color: var(--ink-mute); }
.legal-hero .lead { color: var(--ink-soft); max-width: 62ch; margin-top: 0.8rem; }
.legal-hero .lead strong { color: var(--ink); }
.legal-hero .lead a { color: var(--accent); }

.legal-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s-5); padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 var(--s-7); }
@media (min-width: 960px) { .legal-wrap { grid-template-columns: 240px 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); } }

.legal-wrap > * { min-width: 0; }
.legal-toc { align-self: start; }
@media (min-width: 960px) { .legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.legal-toc h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 0.75rem; }
.legal-toc ol { list-style: none; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; display: block; padding: 0.15rem 0; }
.legal-toc a:hover { color: var(--accent-deep); }

.legal-doc { max-width: 72ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.legal-doc > section { margin-bottom: var(--s-5); scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal-doc h2 { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); color: var(--ink); margin-bottom: 0.7rem; }
.legal-doc h2 .legal-num { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 0.4em; }
.legal-doc h3 { font-size: 1.05rem; color: var(--ink); margin: 1.2rem 0 0.5rem; }
.legal-doc p { margin-bottom: 0.9rem; }
.legal-doc ul, .legal-doc ol { margin: 0 0 0.9rem 1.2rem; display: grid; gap: 0.4rem; }
.legal-doc li { padding-left: 0.2rem; }
.legal-doc strong { color: var(--ink); font-weight: 700; }
.legal-doc a { color: var(--accent-deep); }
.legal-tabela-wrap { overflow-x: auto; margin: 0.5rem 0 1rem; }
.legal-tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 460px; }
.legal-tabela th, .legal-tabela td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid rgba(20, 18, 43, 0.1); vertical-align: top; }
.legal-tabela th { color: var(--ink); font-weight: 700; }
.legal-callout { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 0.9rem 1.1rem; margin: 0.5rem 0 1rem; color: var(--ink-soft); font-size: 0.94rem; }
.legal-callout strong { color: var(--accent-deep); }