/* ========================================= */
/* 1. CONFIGURACIÓN BASE */
/* ========================================= */
:root {
    --primary: #ff007f;   /* Rosa neón */
    --gold: #ffd700;      /* Dorado sol */
    --glass: rgba(20, 20, 35, 0.6); /* Panel oscuro elegante */
    --cream: rgba(255, 255, 250, 0.95);
}

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

body {
    background: #000;
    /* Altura dinámica para móviles (evita problemas con la barra de URL) */
    height: 100vh;
    height: 100dvh; 
    font-family: 'Montserrat', sans-serif;
    color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================= */
/* 2. FONDO Y AMBIENTE 3D */
/* ========================================= */
#space-container {
    position: fixed;
    width: 200%; 
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -2;
    /* Animación de giro lento de la galaxia */
    animation: space-rotate 120s linear infinite; 
    background: radial-gradient(circle, #1a0b2e 0%, #000 70%);
}

#stars-group { width: 100%; height: 100%; }

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px white;
}

@keyframes space-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Elementos Flotantes */
.floating-elements {
    position: fixed; width: 100%; height: 100%; z-index: -1; pointer-events: none;
}
.moon {
    position: absolute; top: 10%; right: 10%; font-size: 3.5rem;
    filter: drop-shadow(0 0 20px rgba(255, 255, 200, 0.3));
    animation: float 8s ease-in-out infinite;
}
.planet-ring {
    position: absolute; bottom: 15%; left: 8%; font-size: 2.5rem;
    filter: drop-shadow(0 0 15px rgba(255, 100, 255, 0.3));
    animation: float 12s ease-in-out infinite reverse;
    transform: rotate(-15deg);
}
@keyframes float { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-15px);} }

/* ========================================= */
/* 3. TRANSICIÓN SOLAR (EFECTO CAPCUT) */
/* ========================================= */
#sun-transition-overlay {
    position: fixed; top: 50%; left: 50%; width: 0; height: 0;
    background: radial-gradient(circle, #fff 10%, #ffd700 40%, transparent 70%);
    border-radius: 50%; transform: translate(-50%, -50%);
    z-index: 9999; opacity: 0; pointer-events: none;
}

.sun-explode { animation: sunBurst 1.2s ease-in-out forwards; }

@keyframes sunBurst {
    0% { width: 0; height: 0; opacity: 0.8; }
    50% { width: 300vmax; height: 300vmax; opacity: 1; } /* Pantallazo de luz */
    100% { width: 350vmax; height: 350vmax; opacity: 0; }
}

/* ========================================= */
/* 4. PANTALLA BIENVENIDA */
/* ========================================= */
#welcome-screen {
    position: absolute; text-align: center; width: 90%; z-index: 10; transition: 0.5s;
}
h1 {
    font-family: 'Dancing Script', cursive; font-size: 3.5rem;
    text-shadow: 0 0 20px #ff007f; margin-bottom: 20px;
}
#start-btn {
    padding: 15px 40px; border-radius: 50px; border: none;
    background: linear-gradient(90deg, #ff007f, #ffd700);
    color: white; font-weight: bold; font-size: 1.2rem;
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.5);
    animation: pulse 2s infinite; cursor: pointer;
}
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);box-shadow:0 0 50px rgba(255,0,127,0.8);} }

/* ========================================= */
/* 5. PANEL PRINCIPAL (VIDEOS) */
/* ========================================= */
#main-content {
    transition: opacity 1s; width: 100%; display: flex; justify-content: center;
}
#main-content.hidden { opacity: 0; pointer-events: none; }
#main-content.visible { opacity: 1; }

.glass-panel {
    background: var(--glass); backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 20px; border-radius: 25px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    width: 90%; max-width: 400px;
}

#video-title {
    font-family: 'Dancing Script'; font-size: 2.2rem; margin-bottom: 10px; text-align: center;
    background: linear-gradient(to right, #fff, #ffd700);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.video-frame {
    width: 100%; aspect-ratio: 9/16; border-radius: 20px;
    overflow: hidden; position: relative; background: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.video-wrapper, video { width: 100%; height: 100%; object-fit: cover; }

/* Brillo pasando */
.frame-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg); animation: shine 5s infinite; pointer-events: none;
}
@keyframes shine { 0%{left:-100%;} 20%{left:200%;} 100%{left:200%;} }

/* ========================================= */
/* 6. BOTONES NEÓN VISIBLES (CORRECCIÓN IPHONE) */
/* ========================================= */
.controls {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; margin-top: 20px; padding: 0 5px;
}

.nav-btn {
    border: none; width: 60px; height: 60px; border-radius: 50%;
    font-size: 1.8rem; cursor: pointer; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: 0.2s;
    -webkit-appearance: none; /* Crucial para iPhone */
}

/* Botón Siguiente (Fuego/Rosa) */
.nav-btn.next {
    background: linear-gradient(135deg, #ff007f 0%, #ffcc00 100%);
    border: 3px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.6);
}
.nav-btn.next:active { transform: scale(0.9); }

/* Botón Anterior (Hielo) */
.nav-btn.prev {
    background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3);
}

/* Animación de música */
.music-indicator { display: flex; gap: 3px; height: 15px; }
.bar { width: 4px; background: var(--primary); animation: dance 1s infinite; }
.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
@keyframes dance { 0%,100%{height:5px;} 50%{height:15px;} }

/* ========================================= */
/* 7. SORPRESA FINAL (VIDEO 4) */
/* ========================================= */
#surprise-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
    display: flex; justify-content: center; align-items: center;
    z-index: 100; pointer-events: none; opacity: 0;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(20px);
    transition: opacity 1.5s; padding: 20px;
}
#surprise-container.show { opacity: 1; pointer-events: auto; }

.surprise-content {
    text-align: center; animation: floatUp 2s ease-out;
    width: 100%; max-width: 450px; display: flex; flex-direction: column; align-items: center;
}
@keyframes floatUp { from{transform:translateY(40px);opacity:0;} to{transform:translateY(0);opacity:1;} }

.surprise-video-frame {
    width: 65%; max-width: 260px; aspect-ratio: 9/16;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    border: 3px solid #ffd700; margin-bottom: -35px; z-index: 2; background: #000;
}

.love-note {
    background: var(--cream); color: #333; padding: 50px 25px 30px;
    border-radius: 20px; width: 100%; position: relative; z-index: 1;
}
.love-note h3 { font-family: 'Dancing Script'; font-size: 2rem; color: #d4af37; margin-bottom: 10px; }
.love-note p { font-size: 1rem; color: #555; margin-bottom: 10px; line-height: 1.5; }
.love-note .firma { color: var(--primary); font-weight: bold; margin-top: 15px; font-family: 'Dancing Script'; font-size: 1.3rem; }