/* ==========================================================================
   Landing pública (index.php). Só tokens de ui-tokens.css + as variáveis de
   tema da campanha (--campaign-*), injetadas pelo PHP em .public-landing.
   Navegação, rodapé e diálogo ficam em public-shell.css.
   ========================================================================== */
@layer page {
    .public-landing {
        /* Padrões só valem se o PHP não injetar o tema da campanha. */
        --campaign-hero-bg-start: var(--ui-primary-hover);
        --campaign-hero-bg-end: var(--ui-primary);
        --campaign-primary: var(--ui-primary);
        --campaign-accent: #ffe100;
        --campaign-text: #ffffff;
        --campaign-overlay-opacity: .4;
        --campaign-hero-bg-image: none;
        --campaign-hero-bg-fit: cover;
        --campaign-hero-bg-position: center;
        --campaign-decorative-image: none;
        --campaign-decorative-position: 88% center;
        --campaign-decorative-opacity: .8;
        --campaign-decorative-size: 100%;
        background: var(--ui-bg);
    }

    /* ---------- Hero */
    .landing-hero {
        position: relative;
        isolation: isolate;
        color: var(--campaign-text);
        overflow: hidden;
    }
    .landing-hero-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(135deg, var(--campaign-hero-bg-start), var(--campaign-hero-bg-end));
    }
    .landing-hero-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--campaign-hero-bg-image);
        background-size: var(--campaign-hero-bg-fit);
        background-position: var(--campaign-hero-bg-position);
        background-repeat: no-repeat;
    }
    .landing-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(60% 50% at 80% 20%, rgb(255 255 255 / 10%), transparent 70%),
            rgb(0 0 0 / var(--campaign-overlay-opacity));
    }
    /* Composição centralizada: logo, texto, realizadores, ação e números sobre
       o troféu da campanha (posição e tamanho vêm do tema da campanha). */
    .landing-hero-inner {
        position: relative;
        display: flex;
        min-height: min(100svh - 72px, 860px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: clamp(28px, 6vw, 64px) 0 clamp(36px, 6vw, 72px);
        text-align: center;
    }
    .landing-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: var(--campaign-decorative-image);
        background-repeat: no-repeat;
        background-position: var(--campaign-decorative-position);
        background-size: auto min(var(--campaign-decorative-size), 100%);
        opacity: calc(var(--campaign-decorative-opacity) * .55);
        pointer-events: none;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
        mask-image: linear-gradient(180deg, #000 55%, transparent);
    }
    .landing-hero-inner > * { text-shadow: 0 1px 2px rgb(0 0 0 / 30%); }
    .landing-hero-inner .ui-btn { text-shadow: none; }
    .landing-phase {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px 6px 9px;
        border: 1px solid rgb(255 255 255 / 26%);
        border-radius: var(--ui-radius-pill);
        background: rgb(0 0 0 / 16%);
        font-size: 13px;
        font-weight: var(--ui-weight-medium);
        letter-spacing: .01em;
    }
    .landing-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--campaign-accent); box-shadow: 0 0 0 4px rgb(255 255 255 / 15%); }
    .landing-hero-logo { width: min(560px, 86vw); height: auto; margin-block: 4px; filter: drop-shadow(0 14px 34px rgb(0 0 0 / 30%)); }
    .landing-hero-title {
        max-width: 22ch;
        font-size: clamp(24px, 3.4vw, 36px);
        font-weight: var(--ui-weight-semibold);
        line-height: 1.15;
        letter-spacing: var(--ui-tracking-title);
        text-wrap: balance;
    }
    .landing-hero-text { max-width: 58ch; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; opacity: .94; text-wrap: pretty; }
    .landing-partner-logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: clamp(20px, 4vw, 44px);
        margin-block: 6px 4px;
    }
    .landing-partner-logos img { height: clamp(30px, 3.4vw, 40px); width: auto; max-width: 170px; object-fit: contain; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 25%)); }
    .landing-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
    .landing-cta {
        min-height: 50px;
        padding: 0 26px;
        border-color: var(--campaign-primary);
        border-radius: var(--ui-radius-pill);
        background: var(--campaign-primary);
        color: #fff;
        font-size: 15px;
        box-shadow: 0 12px 30px rgb(0 0 0 / 22%);
    }
    .landing-cta:hover { filter: brightness(.94); background: var(--campaign-primary); border-color: var(--campaign-primary); color: #fff; }
    .landing-cta-secondary {
        min-height: 50px;
        padding: 0 22px;
        border-color: rgb(255 255 255 / 45%);
        border-radius: var(--ui-radius-pill);
        background: rgb(255 255 255 / 8%);
        color: var(--campaign-text);
        font-size: 15px;
    }
    .landing-cta-secondary:hover { background: rgb(255 255 255 / 18%); border-color: #fff; color: var(--campaign-text); }
    .landing-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(24px, 5vw, 56px); margin: 10px 0 0; }
    .landing-stats div { display: flex; flex-direction: column-reverse; align-items: center; }
    .landing-stats dd { margin: 0; color: var(--campaign-accent); font-size: clamp(30px, 3.6vw, 42px); font-weight: var(--ui-weight-semibold); line-height: 1.05; font-variant-numeric: tabular-nums; }
    .landing-stats dt { margin-top: 4px; font-size: 12px; font-weight: var(--ui-weight-medium); letter-spacing: .08em; opacity: .85; text-transform: uppercase; }
    .landing-countdown { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 6px; padding: 10px 18px; border: 1px solid rgb(255 255 255 / 20%); border-radius: var(--ui-radius-pill); background: rgb(0 0 0 / 18%); }
    .landing-countdown-label { font-size: var(--ui-text-xs); font-weight: var(--ui-weight-semibold); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
    .landing-countdown-time { display: flex; gap: 12px; }
    .landing-countdown-time span { display: flex; align-items: baseline; gap: 3px; }
    .landing-countdown-time b { color: var(--campaign-accent); font-size: 20px; font-weight: var(--ui-weight-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
    .landing-countdown-time small { font-size: var(--ui-text-xs); opacity: .8; }
    .landing-countdown.is-finished b { color: inherit; opacity: .6; }
    .landing-phase-text { max-width: 60ch; font-size: 13.5px; opacity: .8; }
    @media (max-width: 640px) {
        .landing-hero::after { background-position: center 20%; opacity: calc(var(--campaign-decorative-opacity) * .35); }
        .landing-hero-actions { width: 100%; flex-direction: column; }
        .landing-hero-actions .ui-btn { width: 100%; }
    }

    /* ---------- Seções */
    .landing-section { padding: clamp(40px, 7vw, 80px) 0; }
    .landing-section-soft { background: var(--ui-surface); border-block: 1px solid var(--ui-border); }
    .landing-section-title { font-size: clamp(22px, 3vw, 30px); font-weight: var(--ui-weight-semibold); letter-spacing: var(--ui-tracking-title); text-wrap: balance; }
    .landing-section-head { display: grid; gap: 6px; margin-bottom: 28px; }
    .landing-section-head p { color: var(--ui-muted); max-width: 60ch; }

    /* Passos: cartões limpos e centralizados, ícone em círculo com degradê e
       sombra na cor da campanha (o padrão que o público já conhecia). */
    .landing-steps-section .landing-section-title { font-size: clamp(26px, 3.4vw, 38px); text-align: center; }
    .landing-steps {
        list-style: none;
        padding: 0;
        margin: clamp(28px, 4vw, 44px) 0 0;
        display: grid;
        gap: clamp(16px, 2vw, 24px);
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .landing-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: clamp(32px, 3.4vw, 44px) clamp(22px, 2.4vw, 30px);
        border-radius: 20px;
        background: var(--ui-surface);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--campaign-primary) 12%, transparent);
        text-align: center;
        transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .landing-step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--campaign-primary) 18%, transparent); }
    .landing-step-icon {
        display: inline-flex;
        width: 76px;
        height: 76px;
        flex: none;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--campaign-hero-bg-start), var(--campaign-hero-bg-end));
        color: #fff;
        box-shadow: 0 10px 20px color-mix(in srgb, var(--campaign-hero-bg-start) 32%, transparent);
    }
    .landing-step h3 { font-size: clamp(18px, 1.7vw, 21px); font-weight: var(--ui-weight-semibold); line-height: 1.3; text-wrap: balance; }
    .landing-step p { max-width: 34ch; color: var(--ui-muted); font-size: 15.5px; line-height: 1.6; }
    @media (prefers-reduced-motion: reduce) { .landing-step, .landing-step:hover { transition: none; transform: none; } }

    .landing-segments {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    .landing-segment {
        --segment-color: var(--ui-primary);
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface);
        color: var(--ui-text);
        text-decoration: none;
        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }
    .landing-segment:hover { border-color: var(--segment-color); box-shadow: var(--ui-shadow-md); transform: translateY(-1px); }
    .landing-segment-icon {
        display: inline-flex;
        flex: none;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: color-mix(in srgb, var(--segment-color) 14%, white);
        color: var(--segment-color);
    }
    .landing-segment-copy { display: grid; gap: 2px; min-width: 0; }
    .landing-segment-copy strong { font-size: 15px; line-height: 1.3; }
    .landing-segment-copy small { color: var(--ui-muted); font-size: 13px; }

    .landing-register-callout, .landing-results-callout {
        display: grid;
        gap: 20px;
        align-items: center;
    }
    .landing-register-callout p, .landing-results-callout p { color: var(--ui-muted); margin-top: 8px; max-width: 64ch; }
    .landing-register-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    @media (min-width: 768px) {
        .landing-register-callout, .landing-results-callout { grid-template-columns: minmax(0, 1fr) auto; }
    }


}