/* Reset y configuración base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    background: #000000;
    color: #FFFFFF;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fondo galáctico base con textura de grano */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.01) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(75, 0, 130, 0.01) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(25, 25, 112, 0.005) 0%, transparent 50%),
                linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    z-index: -1;
}

/* Textura de grano sutil */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 50px 100px, rgba(212, 175, 55, 0.8), transparent),
        radial-gradient(1px 1px at 150px 200px, rgba(192, 192, 192, 0.6), transparent),
        radial-gradient(1px 1px at 250px 50px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 350px 150px, rgba(212, 175, 55, 0.7), transparent);
    background-size: 400px 400px;
    animation: particleFloat 30s linear infinite;
    z-index: -1;
    opacity: 0.4;
}

/* Textura de grano adicional para sofisticación */
body {
    position: relative;
}

body::before {
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
        radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(75, 0, 130, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(25, 25, 112, 0.005) 0%, transparent 50%),
        linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
}

/* Sistema de estrellas - 50 destellos animados */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.stars::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #D4AF37, transparent),
        radial-gradient(2px 2px at 40px 70px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 90px 40px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 130px 80px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 160px 30px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 200px 90px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 250px 50px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 300px 20px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 350px 70px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 400px 40px, #D4AF37, transparent),
        /* Destellos adicionales para llegar a 50 */
        radial-gradient(1px 1px at 50px 120px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 80px 180px, #D4AF37, transparent),
        radial-gradient(1px 1px at 120px 220px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 180px 80px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 220px 140px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 280px 200px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 320px 60px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 380px 160px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 420px 240px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 460px 100px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 30px 260px, #D4AF37, transparent),
        radial-gradient(2px 2px at 70px 320px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 110px 40px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 150px 280px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 190px 340px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 230px 120px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 270px 360px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 310px 200px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 350px 380px, #D4AF37, transparent),
        radial-gradient(2px 2px at 390px 240px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 430px 400px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 10px 140px, #D4AF37, transparent),
        radial-gradient(1px 1px at 60px 300px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 100px 20px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 140px 360px, #D4AF37, transparent),
        radial-gradient(3px 3px at 200px 180px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 240px 420px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 300px 80px, #D4AF37, transparent),
        radial-gradient(1px 1px at 340px 440px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 400px 220px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 440px 60px, #D4AF37, transparent),
        radial-gradient(2px 2px at 480px 400px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 20px 460px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 90px 160px, #D4AF37, transparent),
        radial-gradient(1px 1px at 130px 480px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 170px 300px, #D4AF37, transparent),
        radial-gradient(1px 1px at 210px 500px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 250px 40px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 290px 520px, #D4AF37, transparent),
        radial-gradient(2px 2px at 330px 260px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 370px 540px, #FFFFFF, transparent);
    background-repeat: repeat;
    background-size: 500px 500px;
    animation: pulse1 12s ease-in-out infinite;
}

.stars::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 60px 160px, #D4AF37, transparent),
        radial-gradient(2px 2px at 120px 240px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 180px 320px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 240px 80px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 300px 200px, #A9A9A9, transparent),
        radial-gradient(2px 2px at 360px 280px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 420px 120px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 480px 360px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 40px 400px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 100px 480px, #D4AF37, transparent),
        radial-gradient(1px 1px at 160px 40px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 220px 120px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 280px 200px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 340px 280px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 400px 360px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 460px 440px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 20px 480px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 80px 60px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 140px 140px, #D4AF37, transparent),
        radial-gradient(2px 2px at 200px 220px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 260px 300px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 320px 380px, #D4AF37, transparent),
        radial-gradient(1px 1px at 380px 460px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 440px 80px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 0px 160px, #D4AF37, transparent),
        radial-gradient(2px 2px at 60px 240px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 120px 320px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 180px 400px, #D4AF37, transparent),
        radial-gradient(1px 1px at 240px 480px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 300px 100px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 360px 180px, #D4AF37, transparent),
        radial-gradient(2px 2px at 420px 260px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 480px 340px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 40px 420px, #D4AF37, transparent),
        radial-gradient(1px 1px at 100px 500px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 160px 60px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 220px 140px, #D4AF37, transparent),
        radial-gradient(2px 2px at 280px 220px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 340px 300px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 400px 380px, #D4AF37, transparent),
        radial-gradient(1px 1px at 460px 460px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 20px 80px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 80px 160px, #D4AF37, transparent),
        radial-gradient(2px 2px at 140px 240px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 200px 320px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 260px 400px, #D4AF37, transparent),
        radial-gradient(1px 1px at 320px 480px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 380px 120px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 440px 200px, #D4AF37, transparent),
        radial-gradient(2px 2px at 500px 280px, #A9A9A9, transparent);
    background-repeat: repeat;
    background-size: 400px 400px;
    animation: pulse2 15s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes sparkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Animaciones de pulsado personalizadas para destellos */
@keyframes pulse1 {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes pulse2 {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 0.7; transform: scale(1.02); }
}

@keyframes pulse3 {
    0%, 100% { opacity: 0.25; transform: scale(1.02); }
    50% { opacity: 0.6; transform: scale(0.98); }
}

/* Nebulosas */
.nebulas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        radial-gradient(ellipse at 15% 25%, rgba(138, 43, 226, 0.008) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 75%, rgba(75, 0, 130, 0.008) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 10%, rgba(25, 25, 112, 0.005) 0%, transparent 60%);
    animation: nebulaFloat 20s ease-in-out infinite alternate;
}

@keyframes nebulaFloat {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(1deg); }
}

/* Núcleo galáctico */
.galactic-core {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: corePulse 18s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

/* Polvo cósmico */
.cosmic-dust {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(1px 1px at 100px 150px, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(1px 1px at 300px 250px, rgba(212, 175, 55, 0.08), transparent),
        radial-gradient(1px 1px at 500px 100px, rgba(192, 192, 192, 0.06), transparent);
    background-size: 600px 600px;
    z-index: -1;
    animation: dustDrift 25s linear infinite;
}

@keyframes dustDrift {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-100px) translateY(-50px); }
}

/* Destellos lineales */
.linear-shimmers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.linear-shimmers::before,
.linear-shimmers::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    top: 20%;
    left: 10%;
    transform: rotate(45deg);
    animation: shimmer 8s ease-in-out infinite;
}

.linear-shimmers::after {
    width: 80px;
    background: linear-gradient(90deg, transparent, #C0C0C0, transparent);
    top: 60%;
    left: 80%;
    transform: rotate(-30deg);
    animation-delay: 4s;
}

/* Destellos lineales adicionales */
.linear-shimmers-2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.linear-shimmers-2::before,
.linear-shimmers-2::after,
.linear-shimmers-2::before::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
    top: 30%;
    left: 20%;
    transform: rotate(60deg);
    animation: shimmer2 10s ease-in-out infinite;
}

.linear-shimmers-2::after {
    width: 90px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    top: 70%;
    left: 70%;
    transform: rotate(-45deg);
    animation-delay: 5s;
}

.linear-shimmers-2::before::after {
    width: 50px;
    background: linear-gradient(90deg, transparent, #C0C0C0, transparent);
    top: 45%;
    left: 50%;
    transform: rotate(30deg);
    animation-delay: 7s;
}

/* Más destellos lineales */
.linear-shimmers-3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.linear-shimmers-3::before,
.linear-shimmers-3::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
    top: 15%;
    left: 60%;
    transform: rotate(-60deg);
    animation: shimmer3 12s ease-in-out infinite;
}

.linear-shimmers-3::after {
    width: 85px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    top: 75%;
    left: 30%;
    transform: rotate(75deg);
    animation-delay: 6s;
}

@keyframes shimmer {
    0%, 100% { opacity: 0; transform: rotate(45deg) scaleX(0); }
    50% { opacity: 1; transform: rotate(45deg) scaleX(1); }
}

@keyframes shimmer2 {
    0%, 100% { opacity: 0; transform: rotate(60deg) scaleX(0); }
    50% { opacity: 1; transform: rotate(60deg) scaleX(1); }
}

@keyframes shimmer3 {
    0%, 100% { opacity: 0; transform: rotate(-60deg) scaleX(0); }
    50% { opacity: 1; transform: rotate(-60deg) scaleX(1); }
}

/* Capa adicional de estrellas galácticas */
.galaxy-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: 
        radial-gradient(1px 1px at 25px 75px, #D4AF37, transparent),
        radial-gradient(2px 2px at 75px 125px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 125px 175px, #C0C0C0, transparent),
        radial-gradient(3px 3px at 175px 225px, #D4AF37, transparent),
        radial-gradient(1px 1px at 225px 275px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 275px 325px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 325px 375px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 375px 425px, #D4AF37, transparent),
        radial-gradient(1px 1px at 425px 475px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 475px 25px, #D4AF37, transparent),
        radial-gradient(1px 1px at 50px 200px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 100px 250px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 150px 300px, #D4AF37, transparent),
        radial-gradient(2px 2px at 200px 350px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 250px 400px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 300px 450px, #D4AF37, transparent),
        radial-gradient(1px 1px at 350px 500px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 400px 50px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 450px 100px, #D4AF37, transparent),
        radial-gradient(2px 2px at 500px 150px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 0px 250px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 50px 350px, #D4AF37, transparent),
        radial-gradient(1px 1px at 100px 450px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 150px 550px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 200px 50px, #D4AF37, transparent),
        radial-gradient(2px 2px at 250px 150px, #A9A9A9, transparent),
        radial-gradient(1px 1px at 300px 250px, #FFFFFF, transparent),
        radial-gradient(3px 3px at 350px 350px, #D4AF37, transparent),
        radial-gradient(1px 1px at 400px 450px, #C0C0C0, transparent),
        radial-gradient(2px 2px at 450px 550px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 500px 100px, #D4AF37, transparent),
        radial-gradient(1px 1px at 30px 300px, #A9A9A9, transparent),
        radial-gradient(2px 2px at 80px 400px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 130px 500px, #D4AF37, transparent),
        radial-gradient(3px 3px at 180px 50px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 230px 150px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 280px 250px, #D4AF37, transparent),
        radial-gradient(1px 1px at 330px 350px, #A9A9A9, transparent),
        radial-gradient(2px 2px at 380px 450px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 430px 550px, #D4AF37, transparent),
        radial-gradient(3px 3px at 480px 200px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 10px 400px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 60px 500px, #D4AF37, transparent),
        radial-gradient(1px 1px at 110px 100px, #A9A9A9, transparent),
        radial-gradient(2px 2px at 160px 200px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 210px 300px, #D4AF37, transparent),
        radial-gradient(3px 3px at 260px 400px, #C0C0C0, transparent),
        radial-gradient(1px 1px at 310px 500px, #FFFFFF, transparent),
        radial-gradient(2px 2px at 360px 50px, #D4AF37, transparent),
        radial-gradient(1px 1px at 410px 150px, #A9A9A9, transparent),
        radial-gradient(2px 2px at 460px 250px, #FFFFFF, transparent),
        radial-gradient(1px 1px at 510px 350px, #D4AF37, transparent);
    background-size: 600px 600px;
    animation: galaxyTwinkle 18s ease-in-out infinite alternate;
}

/* Nebulosas adicionales para efecto galáctico */
.galaxy-nebulas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        radial-gradient(ellipse 200px 100px at 30% 20%, rgba(138, 43, 226, 0.008) 0%, transparent 70%),
        radial-gradient(ellipse 150px 80px at 70% 80%, rgba(75, 0, 130, 0.006) 0%, transparent 70%),
        radial-gradient(ellipse 180px 90px at 10% 60%, rgba(25, 25, 112, 0.005) 0%, transparent 70%),
        radial-gradient(ellipse 160px 70px at 90% 40%, rgba(138, 43, 226, 0.004) 0%, transparent 70%),
        radial-gradient(ellipse 120px 60px at 50% 90%, rgba(75, 0, 130, 0.005) 0%, transparent 70%);
    animation: nebulaDrift 25s ease-in-out infinite alternate;
}

/* Destellos de estrellas fugaces adicionales */
.meteor-shower {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.meteor-shower::before,
.meteor-shower::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    top: 15%;
    left: -100px;
    transform: rotate(45deg);
    animation: meteor1 15s linear infinite;
}

.meteor-shower::after {
    width: 80px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.9), transparent);
    top: 35%;
    left: -80px;
    transform: rotate(-30deg);
    animation: meteor2 18s linear infinite;
    animation-delay: 8s;
}

/* Animaciones para los nuevos efectos galácticos */
@keyframes galaxyTwinkle {
    0% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes nebulaDrift {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    100% { transform: translateX(20px) translateY(10px) rotate(2deg); }
}

@keyframes meteor1 {
    0% { transform: translateX(-100px) translateY(0) rotate(45deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw) translateY(100px) rotate(45deg); opacity: 0; }
}

@keyframes meteor2 {
    0% { transform: translateX(-80px) translateY(0) rotate(-30deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw) translateY(80px) rotate(-30deg); opacity: 0; }
}

/* Contenido principal */
.hero {
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px;
    animation: fadeInUp 3s ease-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Texto hero */
.hero-text {
    font-size: clamp(0.855rem, 2.375vw, 1.33rem);
    font-weight: 300;
    color: #FFFFFF;
    letter-spacing: clamp(0.04em, 0.06em, 0.08em);
    margin-bottom: clamp(8px, 1.5vw, 15px);
    animation: fadeInUp 3s ease-out 0.8s both;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
    hyphens: auto;
}


/* Logo */
.logo {
    height: clamp(200px, 25vw, 350px);
    width: auto;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3));
    transition: all 0.6s ease;
    max-width: 90vw;
    margin: 0 auto;
}

.logo:hover {
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
}

/* Contacto */
.contact {
    animation: fadeInUp 3s ease-out 1.6s both;
}

.email-link {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 2vw, 15px);
    color: #FFFFFF;
    text-decoration: none;
    font-size: clamp(0.8rem, 2.5vw, 1.4rem);
    font-weight: 300;
    letter-spacing: clamp(0.03em, 0.05em, 0.08em);
    transition: all 0.6s ease;
    padding: clamp(10px, 2vw, 25px) clamp(15px, 3vw, 35px);
    border-radius: clamp(6px, 1vw, 12px);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
    max-width: 90vw;
    text-align: center;
    word-wrap: break-word;
}

.email-link:hover {
    transform: scale(1.02);
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.email-icon {
    width: clamp(14px, 3vw, 24px);
    height: clamp(14px, 3vw, 24px);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)) brightness(0) saturate(100%) invert(70%) sepia(85%) saturate(7500%) hue-rotate(35deg) brightness(101%) contrast(101%);
    transition: all 0.6s ease;
    flex-shrink: 0;
}

.email-link:hover .email-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6)) brightness(0) saturate(100%) invert(70%) sepia(85%) saturate(7500%) hue-rotate(35deg) brightness(101%) contrast(101%);
}

/* Responsive Design - Sistema Completo */

/* Dispositivos muy grandes (4K y superiores) */
@media (min-width: 1921px) {
    .hero {
        gap: 60px;
        padding: 40px;
    }
    
    
    .hero-text {
        font-size: 2rem;
        letter-spacing: 0.1em;
    }
    
    .email-link {
        font-size: 1.4rem;
        padding: 20px 35px;
    }
    
    .email-icon {
        width: 24px;
        height: 24px;
    }
    
    .galactic-core {
        width: 400px;
        height: 400px;
    }
}

/* Laptops grandes y PCs (1200px - 1920px) */
@media (min-width: 1200px) and (max-width: 1920px) {
    .hero {
        gap: 50px;
        padding: 30px;
    }
    
    
    .hero-text {
        font-size: 1.8rem;
        letter-spacing: 0.08em;
    }
    
    .email-link {
        font-size: 1.2rem;
        padding: 18px 30px;
    }
    
    .email-icon {
        width: 22px;
        height: 22px;
    }
    
    .galactic-core {
        width: 350px;
        height: 350px;
    }
}

/* Laptops y PCs medianos (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero {
        gap: 45px;
        padding: 25px;
    }
    
    
    .hero-text {
        font-size: 1.6rem;
        letter-spacing: 0.06em;
    }
    
    .email-link {
        font-size: 1.1rem;
        padding: 16px 28px;
    }
    
    .email-icon {
        width: 20px;
        height: 20px;
    }
    
    .galactic-core {
        width: 300px;
        height: 300px;
    }
}

/* Tablets en landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero {
        gap: 35px;
        padding: 20px;
    }
    
    
    .hero-text {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
    }
    
    .email-link {
        font-size: 1rem;
        padding: 14px 24px;
    }
    
    .email-icon {
        width: 18px;
        height: 18px;
    }
    
    .galactic-core {
        width: 250px;
        height: 250px;
    }
    
    .stars::before,
    .stars::after {
        background-size: 400px 400px;
    }
}

/* Tablets en portrait y móviles grandes (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .hero {
        gap: 30px;
        padding: 15px;
    }
    
    
    .hero-text {
        font-size: 1.2rem;
        letter-spacing: 0.04em;
    }
    
    .email-link {
        font-size: 0.9rem;
        padding: 12px 20px;
    }
    
    .email-icon {
        width: 18px;
        height: 18px;
    }
    
    .galactic-core {
        width: 200px;
        height: 200px;
    }
    
    .stars::before,
    .stars::after {
        background-size: 350px 350px;
    }
    
    .galaxy-stars {
        background-size: 450px 450px;
    }
}

/* Móviles medianos (321px - 480px) */
@media (min-width: 321px) and (max-width: 480px) {
    .hero {
        gap: 25px;
        padding: 12px;
    }
    
    
    .hero-text {
        font-size: 1rem;
        letter-spacing: 0.03em;
        margin-bottom: 15px;
    }
    
    .email-link {
        font-size: 0.8rem;
        padding: 10px 16px;
    }
    
    .email-icon {
        width: 16px;
        height: 16px;
    }
    
    .galactic-core {
        width: 150px;
        height: 150px;
    }
    
    .stars::before,
    .stars::after {
        background-size: 300px 300px;
    }
    
    .galaxy-stars {
        background-size: 400px 400px;
    }
    
    /* Reducir efectos en móviles para mejor rendimiento */
    .linear-shimmers,
    .linear-shimmers-2,
    .linear-shimmers-3 {
        opacity: 0.7;
    }
    
    .meteor-shower {
        opacity: 0.6;
    }
}

/* Móviles pequeños (hasta 320px) */
@media (max-width: 320px) {
    .hero {
        gap: 20px;
        padding: 10px;
    }
    
    
    .hero-text {
        font-size: 0.9rem;
        letter-spacing: 0.02em;
        margin-bottom: 12px;
    }
    
    .email-link {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
    
    .email-icon {
        width: 14px;
        height: 14px;
    }
    
    .galactic-core {
        width: 120px;
        height: 120px;
    }
    
    .stars::before,
    .stars::after {
        background-size: 250px 250px;
    }
    
    .galaxy-stars {
        background-size: 300px 300px;
    }
    
    /* Optimizar rendimiento en dispositivos muy pequeños */
    .linear-shimmers,
    .linear-shimmers-2,
    .linear-shimmers-3 {
        opacity: 0.5;
    }
    
    .meteor-shower {
        opacity: 0.4;
    }
    
    .galaxy-nebulas {
        opacity: 0.7;
    }
}

/* Orientación landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        gap: 20px;
        padding: 10px;
    }
    
    
    .hero-text {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    
    .email-link {
        font-size: 0.8rem;
        padding: 8px 15px;
    }
    
    .email-icon {
        width: 16px;
        height: 16px;
    }
    
    .galactic-core {
        width: 180px;
        height: 180px;
    }
}

/* Optimizaciones para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .stars::before,
    .stars::after {
        background-size: 600px 600px;
    }
    
    .galaxy-stars {
        background-size: 800px 800px;
    }
}

/* Modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    /* Ya está optimizado para modo oscuro */
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .stars::before,
    .stars::after,
    .galaxy-stars,
    .galaxy-nebulas,
    .meteor-shower,
    .linear-shimmers,
    .linear-shimmers-2,
    .linear-shimmers-3,
    .galactic-core,
    .cosmic-dust,
    .nebulas {
        animation: none;
    }
    
    .hero,
    .hero-text,
    .contact {
        animation: none;
        opacity: 1;
    }
}

/* Animaciones adicionales para elementos galácticos */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes particleFloat {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    100% { transform: translateX(-50px) translateY(-30px) rotate(360deg); }
}