/* ===========================================================
   Espaco Deodatto - base compartilhada das landing pages
   Paleta e fontes iguais as da LP principal (index.html).
   PRECOS: ver o bloco OFERTA no topo de cada HTML.
   =========================================================== */

:root {
    --brown-dark: #1a0e0a;
    --brown-mid: #2a1810;
    --brown-light: #3d2518;
    --pink: #e8527a;
    --pink-light: #f0a0b8;
    --pink-soft: #f5c6d0;
    --gold: #d4a574;
    --gold-light: #e8c9a0;
    --white: #fff;
    --off-white: #f8f0ec;
    --green: #25d366;
    --green-dark: #1da851;

    --shell: min(1080px, 100% - 2rem);
    --radius: 18px;
}

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

body {
    margin: 0;
    background: var(--brown-dark);
    color: var(--off-white);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, .display {
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 8.5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 4vw, 1.4rem); letter-spacing: -0.02em; }
p  { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }

.shell { width: var(--shell); margin-inline: auto; }
.section { padding: clamp(3.5rem, 11vw, 6.5rem) 0; }
.section--pale { background: var(--off-white); color: var(--brown-dark); }
.section--mid  { background: var(--brown-mid); }

/* --- eyebrow: rotulo curto de secao --- */
.eyebrow {
    font-family: 'Sora', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .9rem;
}
.section--pale .eyebrow { color: var(--pink); }

/* --- a divisao: quadriculado escalonado, padrao tijolo --- */
.parting {
    position: absolute;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 74px),
        repeating-linear-gradient(0deg, var(--gold) 0 1px, transparent 1px 52px);
    mask-image: radial-gradient(105% 70% at 50% 0%, #000 12%, transparent 72%);
}
.parting--offset {
    background-position: 37px 0, 0 0;
    opacity: .12;
}

/* divisor entre secoes: risco de pente */
.rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: repeating-linear-gradient(90deg, var(--gold) 0 26px, transparent 26px 40px);
    opacity: .4;
}

/* --- botao --- */
.cta {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 2rem auto 0;
    padding: 1.15rem 1.5rem;
    background: var(--pink);
    color: var(--white);
    font-family: 'Sora', sans-serif;
    font-size: clamp(1rem, 3.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 10px 30px -10px rgba(232, 82, 122, .7);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cta:hover, .cta:focus-visible {
    background: #f25c85;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -12px rgba(232, 82, 122, .85);
}
.cta--green { background: var(--green); box-shadow: 0 10px 30px -10px rgba(37, 211, 102, .6); }
.cta--green:hover, .cta--green:focus-visible { background: #2ee070; }
.cta-note {
    text-align: center;
    font-size: .85rem;
    opacity: .68;
    margin: .8rem 0 0;
}

:where(a, button, video):focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 3px;
}

/* --- cartoes --- */
.cards { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(212,165,116,.22);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
}
.section--pale .card { background: var(--white); border-color: rgba(26,14,10,.1); }
.card h3 { margin-bottom: .45rem; }
.card p { margin: 0; opacity: .82; font-size: .95rem; }

/* --- oferta --- */
.offer {
    background: var(--brown-mid);
    border: 1px solid rgba(212,165,116,.35);
    border-radius: 24px;
    padding: clamp(1.6rem, 5vw, 2.6rem);
    max-width: 620px;
    margin-inline: auto;
}
.stack { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.stack li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed rgba(212,165,116,.28);
    font-size: .95rem;
}
.stack li span:last-child { color: var(--gold-light); white-space: nowrap; }
.stack li.is-total {
    border-bottom: 0;
    padding-top: 1rem;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
}
.price { text-align: center; }
.price .was {
    font-size: 1rem;
    opacity: .6;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.price .now {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    font-weight: 800;
    color: var(--pink-light);
    line-height: 1;
    margin: .3rem 0;
    letter-spacing: -0.04em;
}
.price .split { font-size: .95rem; opacity: .8; }

/* --- prova social --- */
.proof-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 2rem; }
.proof-figs img { border-radius: 12px; aspect-ratio: 3/4; object-fit: cover; }

.count {
    font-family: 'Sora', sans-serif;
    font-size: clamp(3rem, 14vw, 5rem);
    font-weight: 800;
    color: var(--gold);
    line-height: .9;
    letter-spacing: -0.05em;
}

/* --- rodape --- */
.foot {
    padding: 2.5rem 0 3.5rem;
    text-align: center;
    font-size: .8rem;
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}