@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Outfit:wght@300;600;900&display=swap');

:root {
    --bg-color: #000;
    --text-color: #fff;
    --accent-color: #ffd700;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    /* CENTRADO MAESTRO PARA TODO DISPOSITIVO */
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 100px rgba(0,0,0,1);
    -webkit-font-smoothing: antialiased;
}

/* --- ESTRUCTURA DE CAPAS (CORTINA) --- */

.landing-stack {
    position: relative;
    width: 100%;
}

.feature-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 5;
    background-color: var(--bg-color);
}

.link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
    display: block;
}

/* CAPA FONDO (La que se queda quieta) */
.bg-layer {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1; /* Nivel base */
    background-repeat: no-repeat;
    background-position: center;
    /* AJUSTE DE ESCALA: Evita la sobredimensión */
    background-size: contain; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CAPA FRENTE (La que cubre/descubre) */
.fg-layer {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 10; /* Por encima de la fija */
    background-color: var(--bg-color);
    overflow: hidden;
    /* Sombra para efecto de profundidad */
    box-shadow: 0 -30px 60px rgba(0,0,0,1);
}

.slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- ELEMENTOS FLOTANTES --- */

.hero-texts {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 20;
    pointer-events: none;
    top: 15%;
}

.floating-title {
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 1);
    letter-spacing: -2px;
}

/* --- HOTSPOTS --- */
.hotspot-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 30; pointer-events: none;
}

.cta-hotspot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    pointer-events: auto;
    background-color: transparent; /* Invisible táctico */
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 480px) {
    .floating-title {
        font-size: 2.2rem;
    }
    .bg-layer {
        /* En móvil forzamos que use toda la anchura sin estirarse verticalmente */
        background-size: contain; 
    }
}