/*
 * A base de todas as páginas do site: os tokens do kit de marca VEND-SE v1.0 (vend-se-design-tokens.css), a
 * barra do topo, os botões e o rodapé. A marca vale só aqui e no painel: as lojas têm o tema de cada lojista.
 *
 * Contraste: o coral sobre branco ou off-white não passa no WCAG AA (2,9:1). Botão coral leva texto berinjela
 * (5,1:1) e texto em coral só vai sobre o berinjela.
 */

:root {
    --vendse-plum: #2B2535;
    --vendse-coral: #FF645C;
    --vendse-peach: #FFC0A6;
    --vendse-cream: #FFF7F2;
    --vendse-text: #251E2C;
    --vendse-muted: #6C6471;
    --vendse-border: #E8E0E6;
    --vendse-white: #FFFFFF;
    --vendse-success: #167A53;
    --vendse-warning: #A85D0A;
    --vendse-error: #B42332;
    --vendse-gradient: linear-gradient(135deg, #FF795D 0%, #F94D61 50%, #E73570 100%);
    --vendse-font: 'Manrope', 'Inter', system-ui, sans-serif;
    --vendse-radius-sm: 8px;
    --vendse-radius-md: 12px;
    --vendse-radius-lg: 20px;
    --vendse-space-unit: 8px;

    /* do site */
    --largura: 1160px;
    --altura-barra: 72px;
    --sombra: 0 16px 40px rgba(43, 37, 53, 0.10);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-barra) + 16px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--vendse-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vendse-text);
    background: var(--vendse-cream);
}

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

[hidden] {
    display: none !important;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    color: var(--vendse-plum);
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

p {
    margin: 0 0 16px;
}

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

.miolo {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px;
}

.pular {
    position: absolute;
    left: 16px;
    top: -64px;
    z-index: 100;
    padding: 8px 16px;
    background: var(--vendse-plum);
    color: var(--vendse-cream);
    border-radius: var(--vendse-radius-sm);
    font-weight: 700;
}

.pular:focus {
    top: 16px;
}

/* botões */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--vendse-radius-md);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.botao-principal {
    background: var(--vendse-coral);
    color: var(--vendse-plum);
}

.botao-principal:hover {
    background: #FF7C75;
}

.botao-principal:active {
    transform: translateY(1px);
}

.botao-secundario {
    background: transparent;
    border-color: var(--vendse-plum);
    color: var(--vendse-plum);
}

.botao-secundario:hover {
    background: rgba(43, 37, 53, 0.06);
}

.botao[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* barra do topo */

.barra {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 247, 242, 0.94);
    border-bottom: 1px solid var(--vendse-border);
    backdrop-filter: saturate(1.4) blur(8px);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
}

.barra .miolo {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--altura-barra);
}

.marca img {
    height: 40px;
    width: auto;
}

.barra-links {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.barra-links a {
    font-weight: 600;
    text-decoration: none;
    color: var(--vendse-text);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.barra-links a:hover {
    border-bottom-color: var(--vendse-coral);
}

.barra-chamada {
    min-height: 44px;
    padding: 10px 20px;
}

.so-estreito {
    display: none;
}

/* no pré-cadastro o botão do topo levaria à própria página */
.pagina-inscrever .barra-chamada {
    display: none;
}

.pagina-inscrever .barra-links {
    margin-left: auto;
}

/* rodapé */

.rodape {
    background: var(--vendse-white);
    border-top: 1px solid var(--vendse-border);
    padding: 48px 0 24px;
    font-size: 0.9375rem;
}

.rodape-grade {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.rodape-marca img {
    height: 44px;
    width: auto;
    margin-bottom: 12px;
}

.rodape-marca p {
    color: var(--vendse-muted);
    font-weight: 600;
    margin: 0;
}

.rodape-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.rodape-links a {
    font-weight: 600;
    text-decoration: none;
}

.rodape-links a:hover {
    text-decoration: underline;
    text-decoration-color: var(--vendse-coral);
    text-underline-offset: 4px;
}

.rodape-base {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--vendse-border);
}

.rodape-base p {
    color: var(--vendse-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* a página de resposta do envio sem JavaScript e a de página não encontrada */

.resposta-envio {
    padding: 80px 0;
    min-height: 50vh;
}

.resposta-envio .miolo {
    max-width: 720px;
}

.resposta-envio li {
    margin-bottom: 4px;
}

@media (max-width: 900px) {

    .barra-links {
        display: none;
    }

    .barra-chamada,
    .pagina-inscrever .barra-links {
        margin-left: auto;
    }

    .pagina-inscrever .barra-links {
        display: none;
    }
}

@media (max-width: 600px) {

    :root {
        --altura-barra: 64px;
    }

    .miolo {
        padding: 0 16px;
    }

    .barra .miolo {
        gap: 16px;
    }

    .marca img {
        height: 32px;
    }

    .so-largo {
        display: none;
    }

    .so-estreito {
        display: inline;
    }

    .barra-chamada {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.9375rem;
    }

    .rodape {
        padding-top: 32px;
    }
}