/* ============================================================
   Site público (landing, preços, termos, privacidade)
   Usa os tokens de sistema-financeiro-tokens.css, carregado
   antes deste arquivo em public/base_public.html.
   ============================================================ */

* {
    box-sizing: border-box;
}

.public-body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-page);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
}

/* ===== Header ===== */
.public-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--surface-card) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
}

.public-header-inner,
.public-footer-inner,
.public-main,
.public-hero,
.public-section,
.public-page-header,
.public-pricing-grid,
.public-legal-note {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    gap: var(--space-4);
}

.public-logo {
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.public-logo span {
    color: var(--violet-500);
}

.public-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.public-nav > a:not(.public-btn) {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--fw-medium);
    font-size: var(--text-body);
    padding: 0 var(--space-2);
}

.public-nav > a:not(.public-btn):hover {
    color: var(--text-primary);
}

/* ===== Botões ===== */
.public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 42px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--text-body);
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-hover), border-color var(--transition-hover),
                color var(--transition-hover), box-shadow var(--transition-hover);
}

.public-btn-primary {
    background: var(--surface-primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-sm);
}

.public-btn-primary:hover {
    background: var(--surface-primary-hover);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
}

.public-btn-secondary,
.public-btn-ghost {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.public-btn-secondary:hover,
.public-btn-ghost:hover {
    border-color: var(--violet-300);
    color: var(--fg-primary);
}

.public-btn-lg {
    height: 50px;
    padding: 0 var(--space-7);
    font-size: var(--text-body-lg);
}

.public-btn-block {
    width: 100%;
}

.public-main {
    padding-top: var(--space-2);
    padding-bottom: var(--space-12);
}

/* ===== Hero ===== */
.public-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-12);
    align-items: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.public-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-primary-soft);
    color: var(--fg-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-chip);
    font-size: var(--text-body-sm);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-5);
    line-height: 1;
}

.public-hero h1 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 4.2vw, 3.5rem);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.public-hero-copy > p {
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-7);
    max-width: 52ch;
}

.public-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.public-hero-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-body-sm);
    color: var(--text-tertiary);
    margin: 0;
}

/* ===== Mock do app no hero ===== */
.preview-card {
    background: var(--surface-card);
    border-radius: var(--radius-card-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    font-size: var(--text-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.preview-pill {
    background: var(--bg-primary-soft);
    color: var(--fg-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-chip);
    font-weight: var(--fw-semibold);
    font-size: var(--text-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.preview-metrics > div {
    background: var(--surface-card-sunken);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

.preview-metrics small {
    display: block;
    color: var(--text-tertiary);
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
}

.preview-metrics strong {
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.preview-positive {
    color: var(--text-positive);
}

.preview-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 104px;
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    background: var(--surface-card-sunken);
    border-radius: var(--radius-sm);
}

.preview-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--violet-300) 0%, var(--violet-500) 100%);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    min-height: 20%;
}

.preview-bar:last-child {
    background: linear-gradient(180deg, var(--amber-300) 0%, var(--amber-500) 100%);
}

.preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.preview-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-body-sm);
    color: var(--text-secondary);
}

.tag {
    display: inline-block;
    min-width: 38px;
    text-align: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-chip);
    font-size: var(--text-micro);
    font-weight: var(--fw-bold);
}

.tag-ana { background: var(--bg-info); color: var(--fg-info); }
.tag-joao { background: var(--bg-negative); color: var(--fg-negative); }
.tag-shared { background: var(--bg-primary-soft); color: var(--fg-primary); }

/* ===== Seções ===== */
.public-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.public-section-head {
    max-width: 60ch;
    margin: 0 auto var(--space-12);
    text-align: center;
}

.public-section h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
    text-align: center;
}

.public-section-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
}

.public-section-muted {
    background: var(--bg-primary-soft);
    border: 1px solid var(--violet-100);
    border-radius: var(--radius-card-lg);
    max-width: 1140px;
    margin: 0 auto var(--space-16);
    padding: var(--space-16) var(--space-8);
}

/* ===== Cards de recursos ===== */
.public-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}

.public-feature-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-hover), transform var(--transition-hover);
}

.public-feature-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.public-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-primary-soft);
    color: var(--fg-primary);
    font-size: 22px;
    margin-bottom: var(--space-4);
}

.public-feature-card:nth-child(2) .public-feature-icon {
    background: var(--bg-accent-soft);
    color: var(--fg-accent);
}

.public-feature-card:nth-child(3) .public-feature-icon {
    background: var(--bg-positive);
    color: var(--fg-positive);
}

.public-feature-card:nth-child(4) .public-feature-icon {
    background: var(--bg-info);
    color: var(--fg-info);
}

.public-feature-card h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-body-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.public-feature-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-body);
    line-height: var(--lh-normal);
}

/* ===== Passos ===== */
.public-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-8);
    counter-reset: step;
}

.public-step {
    position: relative;
}

.public-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-on-primary);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--text-body);
    margin-bottom: var(--space-4);
}

.public-step h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-body-lg);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.public-step p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-body);
    line-height: var(--lh-normal);
}

/* ===== CTA ===== */
.public-cta {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.public-cta h2 {
    margin-bottom: var(--space-3);
}

.public-cta p {
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
    margin: 0 0 var(--space-7);
}

/* ===== Cabeçalho de páginas internas ===== */
.public-page-header {
    text-align: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-8);
}

.public-page-header h1 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.public-page-header p {
    margin: 0 auto;
    max-width: 60ch;
    color: var(--text-secondary);
    font-size: var(--text-body-lg);
}

/* ===== Planos ===== */
.public-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    align-items: start;
}

.public-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--violet-300);
    border-radius: var(--radius-card);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-lg);
}

.public-plan-card.is-highlighted {
    border-color: var(--violet-300);
    box-shadow: var(--shadow-lg);
}

.public-plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-primary);
    color: var(--text-on-primary);
    font-size: var(--text-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-chip);
    white-space: nowrap;
}

.public-plan-card h2 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    text-align: left;
}

.public-plan-members {
    color: var(--text-tertiary);
    font-size: var(--text-body-sm);
    margin: 0 0 var(--space-4);
}

.public-plan-price {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-display-sm);
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    line-height: 1;
}

.public-plan-price span {
    font-size: var(--text-body);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    vertical-align: super;
}

.public-plan-price small {
    font-size: var(--text-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-tertiary);
}

.public-plan-description {
    color: var(--text-secondary);
    font-size: var(--text-body-sm);
    line-height: var(--lh-normal);
    min-height: 48px;
    margin: 0;
}

.public-plan-features {
    margin: var(--space-5) 0 var(--space-6);
    padding: 0;
    list-style: none;
    color: var(--text-primary);
    font-size: var(--text-body-sm);
}

.public-plan-features li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-2);
    line-height: var(--lh-normal);
}

.public-plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--fg-positive);
    font-weight: var(--fw-bold);
}

.public-plan-card .public-btn {
    margin-top: auto;
}

/* ===== Avisos e páginas legais ===== */
.public-legal-note {
    padding-bottom: var(--space-12);
}

.public-legal-note p {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--bg-accent-soft);
    border: 1px solid var(--amber-200);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: 0;
    color: var(--fg-accent);
    font-size: var(--text-body-sm);
    line-height: var(--lh-normal);
}

.public-legal {
    max-width: 780px;
    margin: var(--space-8) auto var(--space-16);
    padding: var(--space-10) var(--space-8);
    background: var(--surface-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
}

.public-legal h1 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: var(--text-display-sm);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.public-legal h2 {
    margin-top: var(--space-8);
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--text-title);
    font-weight: var(--fw-bold);
}

.public-legal p,
.public-legal li {
    color: var(--text-secondary);
    font-size: var(--text-body);
}

.public-legal-updated {
    color: var(--text-tertiary);
    font-size: var(--text-body-sm);
}

.public-legal-disclaimer {
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: var(--surface-card-sunken);
    border-radius: var(--radius-sm);
    font-size: var(--text-body-sm);
    color: var(--text-secondary);
}

/* ===== Footer ===== */
.public-footer {
    background: var(--surface-inverse);
    color: var(--n-300);
    padding: var(--space-12) 0 var(--space-6);
    margin-top: var(--space-8);
}

.public-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-on-inverse);
}

.public-footer strong {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-body-lg);
    font-weight: var(--fw-bold);
    color: #fff;
}

.public-footer strong span {
    color: var(--violet-300);
}

.public-footer-inner p {
    margin: 0;
    max-width: 34ch;
    font-size: var(--text-body-sm);
    line-height: var(--lh-normal);
}

.public-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.public-footer-links a {
    color: var(--n-150);
    text-decoration: none;
    font-size: var(--text-body-sm);
}

.public-footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.public-footer-copy {
    text-align: center;
    margin: var(--space-5) 0 0;
    padding: 0 var(--space-6);
    font-size: var(--text-body-sm);
    color: var(--n-400);
}

/* ===== Responsivo ===== */
@media (max-width: 900px) {
    .public-hero {
        grid-template-columns: 1fr;
        gap: var(--space-10);
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

    .public-hero-preview {
        order: -1;
    }

    .public-section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .public-section-muted {
        padding: var(--space-12) var(--space-6);
    }
}

@media (max-width: 600px) {
    .public-header-inner {
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .public-nav {
        width: 100%;
    }

    .public-section-muted {
        margin-left: var(--space-3);
        margin-right: var(--space-3);
        border-radius: var(--radius-card);
    }

    .public-hero-actions .public-btn {
        width: 100%;
    }
}

/* Páginas 404 e 500: casca própria, sem o menu do app */
.error-body {
    min-height: 100vh;
    background:
        radial-gradient(60rem 30rem at 50% -10rem, var(--violet-50) 0%, transparent 70%),
        var(--surface-canvas);
}

.error-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-5);
}

.error-main h1 {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.error-main p {
    margin: 0;
    max-width: 36ch;
    color: var(--text-secondary);
    font-size: var(--text-body);
}