/* ============================================================
   VITRINE ABERTA
   C2.20.2 — Design System Base
   Direção: Clean Editorial Comercial
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

    /* ---------- Identidade ---------- */

    --color-primary: #1f7a5a;
    --color-primary-dark: #165c43;
    --color-primary-soft: #e9f5ef;

    --color-secondary: #142b3d;
    --color-secondary-soft: #eaf0f4;

    --color-accent: #f4c542;
    --color-accent-soft: #fff6d8;

    /* ---------- Superfícies ---------- */

    --color-background: #f7f8f6;
    --color-surface: #ffffff;
    --color-surface-soft: #f0f3f1;
    --color-surface-muted: #e7ebe8;

    /* ---------- Texto ---------- */

    --color-text: #142b3d;
    --color-text-strong: #0e202e;
    --color-text-muted: #64727d;
    --color-text-soft: #87939b;
    --color-text-inverse: #ffffff;

    /* ---------- Estados ---------- */

    --color-success: #237a52;
    --color-warning: #a66a00;
    --color-danger: #b33a3a;
    --color-info: #356b91;

    /* ---------- Bordas ---------- */

    --color-border: #dfe5e1;
    --color-border-strong: #cbd5cf;
    --border-width: 1px;

    /* ---------- Raios ---------- */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---------- Sombras ---------- */

    --shadow-sm:
        0 2px 8px rgba(20, 43, 61, 0.06);

    --shadow-md:
        0 8px 24px rgba(20, 43, 61, 0.09);

    --shadow-lg:
        0 16px 40px rgba(20, 43, 61, 0.12);

    /* ---------- Espaçamento ---------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ---------- Tipografia ---------- */

    --font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;

    --line-tight: 1.08;
    --line-normal: 1.45;
    --line-relaxed: 1.65;

    /* ---------- Layout ---------- */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    --page-padding: 20px;

    /* ---------- Transições ---------- */

    --transition-fast: 150ms ease;
    --transition-normal: 220ms ease;
    --transition-slow: 320ms ease;
}


/* ============================================================
   2. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: var(--line-normal);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

button {
    cursor: pointer;
}

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


/* ============================================================
   3. LAYOUT BASE
   ============================================================ */

.landing {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        var(--space-8)
        var(--page-padding);
}

.hero {
    width: min(100%, var(--container-sm));

    padding:
        var(--space-10)
        var(--space-6);

    background: var(--color-surface);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}


/* ============================================================
   4. MARCA / IDENTIDADE
   ============================================================ */

.brand {
    display: inline-flex;
    align-items: center;

    color: var(--color-secondary);

    font-size: var(--font-size-sm);
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: var(--space-12);
}

.eyebrow {
    display: inline-flex;

    margin: 0 0 var(--space-3);

    color: var(--color-primary);

    font-size: var(--font-size-xs);
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ============================================================
   5. TIPOGRAFIA
   ============================================================ */

h1,
h2,
h3,
h4 {
    color: var(--color-text-strong);

    margin-top: 0;

    line-height: var(--line-tight);

    letter-spacing: -0.025em;
}

h1 {
    margin-bottom: var(--space-5);

    font-size:
        clamp(
            2.25rem,
            8vw,
            var(--font-size-4xl)
        );
}

h2 {
    font-size:
        clamp(
            var(--font-size-2xl),
            5vw,
            var(--font-size-3xl)
        );
}

h3 {
    font-size: var(--font-size-xl);
}

.subtitle {
    max-width: 58ch;

    margin:
        0
        0
        var(--space-8);

    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
    line-height: var(--line-relaxed);
}


/* ============================================================
   6. FORMULÁRIOS
   ============================================================ */

form {
    display: grid;
    gap: var(--space-2);
}

label {
    margin-top: var(--space-3);

    color: var(--color-text);

    font-size: var(--font-size-sm);
    font-weight: 700;
}

label span {
    font-weight: 400;
    color: var(--color-text-soft);
}

input,
select {
    width: 100%;
    min-height: 50px;

    padding:
        var(--space-3)
        var(--space-4);

    color: var(--color-text);

    background: var(--color-surface);

    border:
        var(--border-width)
        solid
        var(--color-border-strong);

    border-radius: var(--radius-md);

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

input:hover,
select:hover {
    border-color: var(--color-primary);
}

input:focus,
select:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px
        rgba(31, 122, 90, 0.12);
}

button {
    width: 100%;
    min-height: 50px;

    margin-top: var(--space-4);

    padding:
        var(--space-3)
        var(--space-5);

    border: 0;
    border-radius: var(--radius-md);

    background: var(--color-primary);
    color: var(--color-text-inverse);

    font-weight: 800;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

button:hover {
    background: var(--color-primary-dark);

    box-shadow: var(--shadow-sm);
}

button:active {
    transform: translateY(1px);
}

button:focus-visible {
    outline:
        3px solid
        rgba(244, 197, 66, 0.75);

    outline-offset: 2px;
}

.consent {
    display: flex;

    align-items: flex-start;

    gap: var(--space-2);

    color: var(--color-text-muted);

    font-weight: 400;
    line-height: var(--line-normal);
}

.consent input {
    width: auto;
    min-height: auto;

    margin:
        3px
        0
        0;
}

.privacy {
    margin-top: var(--space-5);

    color: var(--color-text-soft);

    font-size: var(--font-size-xs);
}

#message {
    min-height: 1.5em;

    margin-top: var(--space-4);

    color: var(--color-primary);

    font-size: var(--font-size-sm);
    font-weight: 700;
}


/* ============================================================
   7. FUTUROS COMPONENTES — BASE VISUAL
   ============================================================ */

/*
   Estes blocos ainda não são utilizados pela landing V0.
   Eles estabelecem a linguagem visual para C2.20.2.3+.
*/


/* ---------- Card ---------- */

.card {
    background: var(--color-surface);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.card:hover {
    transform: translateY(-2px);

    border-color: var(--color-border-strong);

    box-shadow: var(--shadow-md);
}

.card--featured {
    box-shadow: var(--shadow-md);
}

.card--promotional {
    border-color: var(--color-accent);
}

.card--editorial {
    box-shadow: none;
}

.card--sponsored {
    border-style: dashed;
}


/* ---------- Badge ---------- */

.badge {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding:
        4px
        10px;

    border-radius: var(--radius-pill);

    font-size: var(--font-size-xs);
    font-weight: 800;
}

.badge--primary {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.badge--accent {
    background: var(--color-accent-soft);
    color: #765600;
}

.badge--muted {
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
}


/* ---------- Price ---------- */

.price {
    color: var(--color-text-strong);

    font-size: var(--font-size-xl);
    font-weight: 800;

    line-height: 1.1;
}

.price__previous {
    color: var(--color-text-soft);

    font-size: var(--font-size-sm);
    font-weight: 500;

    text-decoration: line-through;
}

.price__discount {
    color: var(--color-success);

    font-size: var(--font-size-sm);
    font-weight: 800;
}

.price__updated {
    color: var(--color-text-soft);

    font-size: var(--font-size-xs);
}


/* ---------- CTA ---------- */

.cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        10px
        18px;

    border-radius: var(--radius-md);

    font-weight: 800;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.cta--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.cta--secondary {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}

.cta--soft {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.cta--outline {
    background: transparent;

    border:
        var(--border-width)
        solid
        var(--color-border-strong);

    color: var(--color-text);
}


/* ============================================================
   8. CONTAINERS
   ============================================================ */

.container {
    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-xl)
    );

    margin-inline: auto;
}

.container--wide {
    max-width: var(--container-2xl);
}


/* ============================================================
   9. FUTUROS ESPAÇOS MODULARES
   ============================================================ */

.module {
    width: 100%;
}

.module + .module {
    margin-top: var(--space-16);
}

.ad-slot,
.sponsored-slot,
.campaign-slot,
.insight-slot {
    width: 100%;

    border-radius: var(--radius-lg);
}


/* ============================================================
   10. RESPONSIVIDADE
   ============================================================ */

@media (min-width: 640px) {

    :root {
        --page-padding: 28px;
    }

    .hero {
        padding:
            var(--space-12)
            var(--space-10);
    }
}


@media (min-width: 768px) {

    :root {
        --page-padding: 32px;
    }
}


@media (min-width: 1024px) {

    :root {
        --page-padding: 40px;
    }

    .landing {
        padding:
            var(--space-16)
            var(--page-padding);
    }
}


@media (min-width: 1280px) {

    :root {
        --page-padding: 48px;
    }
}


/* ============================================================
   11. ACESSIBILIDADE / REDUÇÃO DE MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}