/**
 * BASE.CSS
 * Tokens, reset, utilitários e estilos base
 * Arquivo base para todo o projeto V2
 */

/* ===== DESIGN TOKENS ===== */
:root {
    /* Cores principais */
    --sand: #F7ECDD;
    /* cor de fundo/bege da página */
    --blue: #223B5A;
    /* azul petróleo (texto e overlays) */
    --green: #223B5A;
    /* botão escuro do topo */
    --accent: #E3694A;
    /* selo 360m² */
    --white: #FFFFFF;

    /* Container e espaçamentos */
    --container: 1264px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-32: 32px;
    --radius-pill: 100px;

    /* Gaps consistentes */
    --gap-16: 16px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-40: 40px;
    --gap-64: 64px;
    --gap-88: 88px;

    /* Tipografia */
    --font-title: "the-seasons", "The Seasons", serif;
    --font-title-light: "the-seasons", "The Seasons", serif;
    /* Adobe Fonts + Google Fonts */
    --font-body: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fs-body: 16px;
    --lh-body: 1.375;
    /* ~22px */

    /* Sombras */
    --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Breakpoints */
    --bp-mobile: 360px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-wide: 1280px;
}

/* ===== RESET E BASE ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* Melhorias de scroll para mobile */
@media (max-width: 768px) {
    html {
        /* Scroll mais suave no mobile */
        scroll-behavior: auto;
        /* Desabilitar nativo para usar customizado */
        /* Melhorar performance de scroll */
        -webkit-overflow-scrolling: touch;
    }

    body {
        /* Prevenir scroll bounce no iOS */
        overscroll-behavior: none;
        /* Melhorar performance */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

body {
    margin: 0;
    background: var(--sand);
    color: var(--blue);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===== UTILITÁRIOS ===== */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

.v2-container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 88px);
}

.section {
    padding: clamp(40px, 8vw, 88px) 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--blue);
    color: var(--sand);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    font-weight: 500;
}

.skip-link:focus {
    top: 6px;
}

/* ===== BOTÕES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    will-change: transform;
}

.btn--pill {
    height: 48px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    line-height: 22px;
}

.btn--light {
    background: var(--sand);
    color: #0f172a;
    box-shadow: var(--shadow-soft);
}

.btn--light:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.btn--dark {
    background: var(--green);
    color: var(--sand);
}

.btn--dark:hover {
    background: var(--blue);
    transform: translateY(-1px);
}

/* Botões v2 (compatibilidade) */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
    will-change: transform;
}

.v2-btn--pill {
    height: 48px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    line-height: 22px;
}

.v2-btn--light {
    background: var(--sand);
    color: #0f172a;
    box-shadow: var(--shadow-soft);
}

.v2-btn--light:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.v2-btn--dark {
    background: var(--green);
    color: var(--sand);
}

.v2-btn--dark:hover {
    background: var(--blue);
    transform: translateY(-1px);
}

/* ===== TIPOGRAFIA DE DESTAQUE ===== */
.accent-serif {
    font-family: var(--font-title);
    font-style: italic;
    font-weight: 300;
}

.accent-serif-light {
    font-family: var(--font-title-light);
    font-style: italic;
    font-weight: 300;
}

/* ===== PERFORMANCE ===== */
img {
    max-width: 100%;
    height: auto;
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Fallback para navegadores sem suporte a IntersectionObserver */
.no-intersectionobserver img[loading="lazy"] {
    opacity: 1;
}

/* Melhorias para mobile */
@media (max-width: 768px) {
    img[loading="lazy"] {
        /* Reduzir transição no mobile para melhor performance */
        transition: opacity 0.2s ease;
    }

    /* Garantir que imagens críticas apareçam */
    .hero img[loading="lazy"],
    .intro img[loading="lazy"] {
        opacity: 1;
    }
}

/* ===== PADRÃO DE BOTÕES MOBILE ===== */
@media (max-width: 768px) {

    /* Padrão global para todos os botões no mobile */
    .btn,
    .v2-btn {
        width: 100% !important;
        max-width: 280px !important;
        height: 48px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: var(--radius-pill) !important;
    }

    /* Botões específicos do hero - ligeiramente menores */
    .hero .btn {
        max-width: 260px !important;
        height: 44px !important;
        font-size: 13px !important;
    }

    /* Botões de CTA final - tamanho padrão */
    .v2-cta-final .v2-btn {
        max-width: 280px !important;
        height: 48px !important;
        font-size: 14px !important;
    }

    /* Botões de seções específicas */
    .fm__cta .btn,
    .v2-about__cta .btn,
    .v2-masterplan__cta .btn,
    .v2-location__cta .btn {
        max-width: 280px !important;
        height: 48px !important;
        font-size: 14px !important;
    }

    /* Garantir centralização em todos os containers */
    .btn,
    .v2-btn {
        place-self: center !important;
    }

    /* Resetar posicionamentos absolutos que possam interferir */
    .btn,
    .v2-btn {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* Mobile pequeno (até 480px) */
@media (max-width: 480px) {

    .btn,
    .v2-btn {
        max-width: 260px !important;
        height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .hero .btn {
        height: 40px !important;
        font-size: 12px !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {

    .skip-link,
    .btn {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}