:root {
    --loja-cor-primaria: #0d6efd;
    --loja-cor-escura: #172033;
    --loja-cor-suave: #f4f7fb;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff;
    color: #212529;
}

.barra-superior {
    background-color: var(--loja-cor-escura);
    color: #ffffff;
    font-size: 0.875rem;
}

.navbar-brand {
    letter-spacing: -0.03em;
}

.hero-loja {
    background:
        radial-gradient(circle at top right, rgba(13, 110, 253, 0.22), transparent 36%),
        linear-gradient(135deg, #eef5ff 0%, #ffffff 54%, #f2f7ff 100%);
    min-height: 520px;
    display: flex;
    align-items: center;
}

.hero-ilustracao {
    min-height: 360px;
    border-radius: 2rem;
    background:
        linear-gradient(145deg, rgba(13, 110, 253, 0.95), rgba(111, 66, 193, 0.88));
    box-shadow: 0 1.5rem 3rem rgba(23, 32, 51, 0.18);
    display: grid;
    place-items: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-ilustracao::before,
.hero-ilustracao::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
}

.hero-ilustracao::before {
    width: 220px;
    height: 220px;
    top: -70px;
    right: -40px;
}

.hero-ilustracao::after {
    width: 170px;
    height: 170px;
    bottom: -55px;
    left: -35px;
}

.hero-emoji {
    font-size: clamp(7rem, 18vw, 11rem);
    filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.18));
    position: relative;
    z-index: 1;
}

.secao-suave {
    background-color: var(--loja-cor-suave);
}

.categoria-card,
.produto-card,
.beneficio-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.categoria-card:hover,
.produto-card:hover,
.beneficio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2.25rem rgba(23, 32, 51, 0.10) !important;
}

.categoria-icone {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-inline: auto;
    border-radius: 1.25rem;
    background-color: rgba(13, 110, 253, 0.10);
    font-size: 2rem;
}

.produto-imagem {
    min-height: 210px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eef4ff, #f8f9fa);
    font-size: 5rem;
}

.preco-anterior {
    color: #6c757d;
    font-size: 0.9rem;
    text-decoration: line-through;
}

.preco-atual {
    color: #198754;
    font-size: 1.45rem;
    font-weight: 700;
}

.newsletter {
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
}

footer a {
    color: rgba(255, 255, 255, 0.76);
}

footer a:hover,
footer a:focus {
    color: #ffffff;
}