/* =========================================================
   VIP CAR ESTÉTICA AUTOMOTIVA
   Arquivo: base.css

   Responsável por:
   - Estilos globais
   - Fundo do site
   - Tipografia
   - Títulos
   - Parágrafos
   - Containers
   - Seções
   - Links
   - Classes utilitárias básicas
========================================================= */


/* =========================================================
   HTML E BODY
========================================================= */

html {
    background: var(--bg-primary);
}

body {
    position: relative;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(23, 71, 184, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at top right,
            rgba(214, 168, 67, 0.08),
            transparent 24%
        ),
        var(--gradient-background);

    color: var(--text-primary);

    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);

    line-height: var(--line-height-normal);
}


/* =========================================================
   FUNDO DECORATIVO GLOBAL

   Cria uma textura sutil no fundo sem precisar de imagem.
========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.65),
            transparent 90%
        );
}


/* =========================================================
   GLOW GLOBAL
========================================================= */

body::after {
    content: "";

    position: fixed;

    width: 420px;
    height: 420px;

    top: 18%;
    right: -180px;

    z-index: -1;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(61, 110, 242, 0.11),
            transparent 68%
        );

    filter: blur(20px);
}


/* =========================================================
   MAIN
========================================================= */

main {
    position: relative;

    width: 100%;
    overflow: hidden;
}


/* =========================================================
   CONTAINER PADRÃO
========================================================= */

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

    margin-inline: auto;
}


/* =========================================================
   CONTAINER LARGO
========================================================= */

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

    margin-inline: auto;
}


/* =========================================================
   CONTAINER ESTREITO
========================================================= */

.container-narrow {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        900px
    );

    margin-inline: auto;
}


/* =========================================================
   SEÇÕES
========================================================= */

.section {
    position: relative;

    padding-block: var(--section-padding);
}

.section-small {
    position: relative;

    padding-block: var(--section-padding-small);
}


/* =========================================================
   SEÇÃO ESCURA
========================================================= */

.section-dark {
    background: var(--bg-primary);
}


/* =========================================================
   SEÇÃO SECUNDÁRIA
========================================================= */

.section-secondary {
    background:
        linear-gradient(
            180deg,
            rgba(7, 16, 27, 0.96),
            rgba(3, 7, 13, 1)
        );
}


/* =========================================================
   SEÇÃO COM BORDA
========================================================= */

.section-bordered {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}


/* =========================================================
   TIPOGRAFIA — TÍTULOS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);

    font-family: var(--font-display);

    font-weight: var(--font-weight-bold);

    letter-spacing: var(--letter-spacing-tight);
}


/* =========================================================
   H1
========================================================= */

h1 {
    font-size: var(--heading-hero);

    font-weight: var(--font-weight-black);

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


/* =========================================================
   H2
========================================================= */

h2 {
    font-size: var(--heading-section);

    font-weight: var(--font-weight-extrabold);

    line-height: var(--line-height-heading);
}


/* =========================================================
   H3
========================================================= */

h3 {
    font-size: var(--heading-card);

    font-weight: var(--font-weight-bold);

    line-height: 1.25;
}


/* =========================================================
   H4
========================================================= */

h4 {
    font-size: var(--font-size-lg);

    font-weight: var(--font-weight-semibold);

    line-height: 1.3;
}


/* =========================================================
   PARÁGRAFOS
========================================================= */

p {
    color: var(--text-secondary);

    font-size: var(--paragraph-normal);

    line-height: var(--line-height-relaxed);
}


/* =========================================================
   PARÁGRAFO GRANDE
========================================================= */

.text-large {
    font-size: var(--paragraph-large);

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

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


/* =========================================================
   TEXTO PEQUENO
========================================================= */

.text-small {
    font-size: var(--font-size-sm);

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


/* =========================================================
   TEXTO MUTED
========================================================= */

.text-muted {
    color: var(--text-muted);
}


/* =========================================================
   TEXTO BRANCO
========================================================= */

.text-white {
    color: var(--white);
}


/* =========================================================
   TEXTO DOURADO
========================================================= */

.text-gold {
    color: var(--vip-gold-light);
}


/* =========================================================
   TEXTO AMARELO
========================================================= */

.text-yellow {
    color: var(--vip-yellow);
}


/* =========================================================
   TEXTO AZUL
========================================================= */

.text-blue {
    color: var(--vip-blue-light);
}


/* =========================================================
   TEXTO COM GRADIENTE DA MARCA
========================================================= */

.text-gradient {
    display: inline-block;

    background: var(--gradient-brand);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   TEXTO COM GRADIENTE AZUL
========================================================= */

.text-gradient-blue {
    display: inline-block;

    background: var(--gradient-blue);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   LINKS
========================================================= */

a {
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


/* =========================================================
   LINKS DE TEXTO
========================================================= */

.link {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    color: var(--text-primary);

    font-weight: var(--font-weight-medium);
}

.link:hover {
    color: var(--vip-gold-light);
}


/* =========================================================
   LABEL / EYEBROW

   Pequeno texto acima de títulos de seção.
========================================================= */

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

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

    color: var(--vip-gold-light);

    font-family: var(--font-display);

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

    font-weight: var(--font-weight-bold);

    letter-spacing: var(--letter-spacing-ultra);

    text-transform: uppercase;
}


/* =========================================================
   RISQUINHO DA EYEBROW
========================================================= */

.eyebrow::before {
    content: "";

    width: 34px;
    height: 2px;

    flex-shrink: 0;

    background: var(--gradient-brand);

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

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


/* =========================================================
   CABEÇALHO DE SEÇÃO
========================================================= */

.section-header {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    max-width: 760px;

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


/* =========================================================
   CABEÇALHO CENTRALIZADO
========================================================= */

.section-header-center {
    align-items: center;

    margin-inline: auto;

    text-align: center;
}


/* =========================================================
   DESCRIÇÃO DO CABEÇALHO
========================================================= */

.section-description {
    max-width: 680px;

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

    color: var(--text-muted);

    font-size: var(--paragraph-large);
}


/* =========================================================
   SEPARADOR
========================================================= */

.divider {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--border-light),
            transparent
        );
}


/* =========================================================
   LINHA DOURADA
========================================================= */

.gold-line {
    width: 62px;
    height: 3px;

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

    background: var(--gradient-brand);

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

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


/* =========================================================
   GRID GLOBAL
========================================================= */

.grid {
    display: grid;

    gap: var(--space-6);
}


/* =========================================================
   GRID DE 2 COLUNAS
========================================================= */

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================================================
   GRID DE 3 COLUNAS
========================================================= */

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   GRID DE 4 COLUNAS
========================================================= */

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   FLEX
========================================================= */

.flex {
    display: flex;
}


/* =========================================================
   FLEX CENTRALIZADO
========================================================= */

.flex-center {
    display: flex;

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


/* =========================================================
   FLEX ENTRE
========================================================= */

.flex-between {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


/* =========================================================
   FLEX COLUNA
========================================================= */

.flex-column {
    display: flex;

    flex-direction: column;
}


/* =========================================================
   GAP UTILITÁRIOS
========================================================= */

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-10 {
    gap: var(--space-10);
}

.gap-12 {
    gap: var(--space-12);
}


/* =========================================================
   POSICIONAMENTO
========================================================= */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}


/* =========================================================
   OVERFLOW
========================================================= */

.overflow-hidden {
    overflow: hidden;
}


/* =========================================================
   TEXT ALIGN
========================================================= */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/* =========================================================
   LARGURA TOTAL
========================================================= */

.w-full {
    width: 100%;
}


/* =========================================================
   ALTURA TOTAL
========================================================= */

.h-full {
    height: 100%;
}


/* =========================================================
   BLOQUEIO DE SCROLL DO BODY

   Usado quando o menu mobile ou modal estiver aberto.
========================================================= */

body.no-scroll {
    overflow: hidden;
}


/* =========================================================
   IMAGENS GERAIS
========================================================= */

.image-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   IMAGEM COM BORDA
========================================================= */

.image-rounded {
    border-radius: var(--radius-lg);
}


/* =========================================================
   FUNDO DE IMAGEM COM OVERLAY
========================================================= */

.image-overlay {
    position: relative;

    overflow: hidden;
}

.image-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 13, 0.08),
            rgba(3, 7, 13, 0.72)
        );
}


/* =========================================================
   BADGE BÁSICA
========================================================= */

.badge {
    display: inline-flex;

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

    width: fit-content;

    min-height: 32px;

    padding:
        7px
        13px;

    background:
        rgba(214, 168, 67, 0.08);

    border:
        1px solid
        rgba(214, 168, 67, 0.25);

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

    color: var(--vip-gold-light);

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

    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--letter-spacing-wide);

    text-transform: uppercase;
}


/* =========================================================
   GLASS
========================================================= */

.glass {
    background:
        rgba(8, 18, 30, 0.68);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(var(--blur-md));

    -webkit-backdrop-filter:
        blur(var(--blur-md));
}


/* =========================================================
   CARD BASE
========================================================= */

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

    border: var(--card-border);

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

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


/* =========================================================
   GLOW DOURADO
========================================================= */

.glow-gold {
    box-shadow: var(--shadow-gold);
}


/* =========================================================
   GLOW AZUL
========================================================= */

.glow-blue {
    box-shadow: var(--shadow-blue);
}


/* =========================================================
   PONTO DECORATIVO
========================================================= */

.dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    background: var(--vip-gold);

    border-radius: 50%;

    box-shadow:
        0 0 14px
        rgba(214, 168, 67, 0.55);
}


/* =========================================================
   LISTA COM CHECK
========================================================= */

.check-list {
    display: flex;

    flex-direction: column;

    gap: var(--space-4);
}

.check-list li {
    position: relative;

    padding-left: 30px;

    color: var(--text-secondary);

    line-height: var(--line-height-relaxed);
}

.check-list li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    color: var(--vip-gold-light);

    font-weight: var(--font-weight-bold);
}


/* =========================================================
   PREÇO
========================================================= */

.price {
    display: inline-flex;

    align-items: baseline;

    gap: 6px;

    color: var(--text-primary);

    font-family: var(--font-display);

    font-weight: var(--font-weight-black);
}

.price-prefix {
    color: var(--text-muted);

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

    font-weight: var(--font-weight-medium);
}

.price-value {
    color: var(--vip-gold-light);

    font-size: var(--font-size-3xl);

    letter-spacing: var(--letter-spacing-tight);
}


/* =========================================================
   ACESSIBILIDADE — SKIP LINK

   Permite que usuários de teclado pulem direto
   para o conteúdo principal.
========================================================= */

.skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: calc(var(--z-loader) + 10);

    padding:
        12px
        18px;

    transform:
        translateY(-160%);

    background: var(--vip-gold);

    color: var(--text-dark);

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

    font-weight: var(--font-weight-bold);

    transition:
        transform var(--transition-normal);
}

.skip-link:focus {
    transform:
        translateY(0);
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1024px) {

    .grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    body::before {
        background-size:
            36px 36px;
    }

    body::after {
        width: 280px;
        height: 280px;

        right: -150px;
    }

    .section-header {
        margin-bottom:
            var(--space-10);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns:
            1fr;
    }

    .section-description {
        margin-top:
            var(--space-4);
    }
}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 480px) {

    .eyebrow {
        gap: 8px;

        font-size:
            0.68rem;
    }

    .eyebrow::before {
        width: 26px;
    }

    .price-value {
        font-size:
            var(--font-size-2xl);
    }

    .badge {
        min-height: 30px;

        padding:
            6px
            11px;
    }
}