/* ==========================================================================
   Estilos - LP Vespera (Scroll Animation)
   ========================================================================== */

/* --- 1. Importação de Fontes --- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap");

/* --- 2. Variáveis CSS --- */
:root {
    --font-serif: "Playfair Display", serif;
    --font-sans: "Inter", sans-serif;
    
    --color-bg: #F5F5F7; /* Cinza Apple claro */
    --color-text: #1D1D1F; /* Preto Apple */
    --color-text-light: #6E6E73; /* Cinza Apple médio */
    --color-primary: #0071E3; /* Azul Apple */

    --default-transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição mais suave */
}

/* --- 3. Reset Básico e Globais --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--color-primary); transition: var(--default-transition); }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; color: var(--color-text);}
p { color: var(--color-text-light); margin-bottom: 1rem; font-size: 1.1rem; }

/* --- 4. Utilitários (Container, Botões) --- */
.container, .container-header {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-button {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--default-transition);
    border: 1px solid transparent;
    cursor: pointer;
}
.cta-button.primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.cta-button.primary:hover {
    background-color: #005bb5;
}
.large-cta {
    padding: 18px 40px;
    font-size: 1.1rem;
    border-radius: 30px;
}

.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 40px;
}

/* --- 5. Cabeçalho (Header) --- */
.site-header {
    padding: 15px 0;
    position: absolute; /* Sobrepõe o Hero inicialmente */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Poderia ter um fundo semi-transparente no scroll, mas vamos simplificar */
}
.container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-logo {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
}
.main-navigation ul {
    display: flex;
    gap: 30px;
}
.main-navigation a {
    color: var(--color-text-light);
    font-weight: 600;
    font-size: 0.9rem;
}
.main-navigation a:hover {
    color: var(--color-text);
}

/* --- 6. Seção Hero --- */
.hero {
    height: 100vh; /* Ocupa a tela inteira */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* A imagem principal será posicionada pela secção de scroll */
}
.hero-title {
    font-size: 5rem;
}

/* --- 7. Seção de Scroll Animado --- */
.scroll-section {
    padding: 10vh 0; /* Espaçamento vertical */
}
.scroll-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 5%; /* Espaço entre colunas */
    position: relative; /* Para o sticky funcionar */
}

/* Coluna da Imagem (Sticky) */
.sticky-image-wrapper {
    height: 100vh; /* Altura da viewport */
    position: sticky;
    top: 0; /* Fixa no topo */
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-container {
    position: relative; /* Para sobrepor as imagens */
    width: 90%; /* Tamanho relativo */
    max-width: 500px;
    aspect-ratio: 4 / 3; /* Proporção das imagens */
}
.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0; /* Todas começam invisíveis */
    transform: scale(0.95) translateY(10px); /* Efeito subtil de entrada */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.product-image.active {
    opacity: 1; /* A imagem ativa fica visível */
    transform: scale(1) translateY(0);
}

/* Coluna do Texto (Scroll) */
.scroll-text-wrapper {
    padding-top: 25vh; /* Alinha o início do texto com o meio da imagem */
    padding-bottom: 25vh;
}
.text-step {
    min-height: 80vh; /* Garante espaço para o scroll */
    padding: 20px;
    margin-bottom: 20vh; /* Espaço entre os blocos de texto */
    /* Estilos adicionais opcionais (ex: borda, fundo) */
}
.text-step h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

/* --- 8. Seção Especificações --- */
.specs {
    padding: 80px 0;
    background-color: #FFF; /* Fundo branco para contraste */
}
.specs ul {
    max-width: 600px;
    margin: 0 auto;
    list-style: none;
}
.specs li {
    font-size: 1.1rem;
    padding: 15px 0;
    border-bottom: 1px solid #EAEAEA;
    color: var(--color-text-light);
}
.specs li:last-child {
    border-bottom: none;
}

/* --- 9. Seção Pre-Order --- */
.preorder {
    padding: 100px 0;
    text-align: center;
}
.preorder p {
    max-width: 500px;
    margin: 0 auto 30px auto;
}

/* --- 10. Rodapé --- */
.site-footer {
    padding: 40px 0;
    text-align: center;
    background-color: #FFF; /* Fundo branco */
}
.site-footer p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0;
}

/* --- 11. Responsividade --- */
@media (max-width: 992px) {
    .scroll-container {
        grid-template-columns: 1fr; /* Coluna única */
    }
    .sticky-image-wrapper {
        height: 60vh; /* Altura menor para a imagem */
        top: 10vh; /* Desce um pouco */
        margin-bottom: 5vh;
    }
    .image-container {
        width: 70%;
        max-width: 350px;
    }
    .scroll-text-wrapper {
        padding-top: 70vh; /* Começa depois da imagem */
        padding-bottom: 10vh;
    }
    .text-step {
        min-height: auto; /* Altura automática */
        margin-bottom: 10vh;
    }
    .hero-title { font-size: 3.5rem; }
    .section-title { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
}

@media (max-width: 768px) {
    .main-navigation ul { display: none; } /* Simplifica */
    .header-cta { font-size: 0.8rem; padding: 8px 18px; }
    .hero-title { font-size: 2.8rem; }
    p { font-size: 1rem; }
    .large-cta { padding: 15px 30px; font-size: 1rem; }
}