/* style.css */
/* Tailwind Base (simplificado) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Variables */
:root {
    --primary: #f2b90d;
    --bg-light: #f8f8f5;
    --bg-dark: #221e10;
    --text-dark: #231e10;
    --text-light: #ffffff;
}

/* Utilities */
.bg-background-light { background-color: var(--bg-light); }
.bg-background-dark { background-color: var(--bg-dark); }
.text-primary { color: var(--primary); }
.text-[#231e10] { color: var(--text-dark); }
.text-white { color: var(--text-light); }
.font-display { font-family: 'Manrope', sans-serif; }

/* Custom Styles */
.gold-glow { text-shadow: 0 0 20px rgba(242, 185, 13, 0.5); }
.bar-glow { box-shadow: 0 0 15px rgba(242, 185, 13, 0.6); }

/* Universe Background */
.universe-bg {
    background-color: #0f0c05;
    background-image: radial-gradient(circle at 50% 0%, #493f22 0%, transparent 60%),
                      radial-gradient(circle at 80% 80%, #2a2515 0%, transparent 40%);
}

/* Stars */
.stars {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
                     radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
                     radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0,0,0,0)),
                     radial-gradient(1.5px 1.5px at 90px 40px, #fff, rgba(0,0,0,0)),
                     radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
                     radial-gradient(1.5px 1.5px at 160px 120px, #fff, rgba(0,0,0,0));
    background-repeat: repeat; background-size: 200px 200px; opacity: 0.3; pointer-events: none;
}

/* Curve Timeline */
.curve-container {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 35vh; pointer-events: none; overflow: hidden; z-index: 0;
}

/* Glass Panel */
.glass-panel {
    background: rgba(35, 30, 16, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(242, 185, 13, 0.1);
}

/* Gold Text */
.text-gold-metallic {
    background: linear-gradient(to bottom, #cfc09f 0%, #ffecb3 20%, #c89f2d 40%, #f2b90d 50%, #9e7f1b 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(242, 185, 13, 0.3));
}

/* Fireworks */
.firework-burst {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    box-shadow: 0 0 4px #fff, 0 0 10px #f2b90d, 0 0 20px #f2b90d;
}

.star-bg {
    background-image: radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
                      radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
                      radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0,0,0,0)),
                      radial-gradient(1.5px 1.5px at 90px 40px, #fff, rgba(0,0,0,0)),
                      radial-gradient(1.5px 1.5px at 130px 80px, #fff, rgba(0,0,0,0)),
                      radial-gradient(1.5px 1.5px at 160px 120px, #fff, rgba(0,0,0,0));
    background-repeat: repeat; background-size: 200px 200px; opacity: 0.3;
}

/* Animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Preloader Progress */
#loaderBar {
    transition: width 0.1s linear;
}

/* Countdown Pulse */
#countdownContainer.animate-pulse {
    animation: pulse 0.5s infinite;
}

/* Responsive - Cambiar lg:gap-16 a lg:gap-12 */
@media (min-width: 1024px) {
    .lg-gap-12 { gap: 3rem; }
}

/* Footer fijo sin scroll */
#footerCountdown, #footerFinal {
/*    position: fixed;*/
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

/* Final State responsive */
#welcomeContainer h1 {
    font-size: clamp(2rem, 8vw, 8rem);
}

#welcomeContainer .layout-content-container {
    max-width: 1200px;
}

/* Botones del final */
#welcomeContainer button {
    width: 100%;
    max-width: 280px;
}

/* Contador ascendente */
#welcomeContainer .flex.items-end.gap-2 {
    font-size: clamp(1rem, 2.5vw, 2.5rem);
}

/* Asegurar que el final sea visible sin scroll */
#welcomeContainer {
    min-height: 100vh;
    width: 100%;
    z-index: 9999;
    overflow: hidden; /* Evita scroll interno */
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Evitar scroll horizontal */
body {
    overflow-x: hidden;
}

/* Contenedor principal sin scroll */
body {
    height: 100vh;
    margin: 0;
    padding: 0;
}