body {
    margin: 0;
    padding: 0;
    background-color: #0e0e0e; /* Gris Oscuro Base */
    overflow-x: hidden; /* Evita el scroll horizontal, pero permite el vertical */
    font-family: 'Inter', sans-serif; /* Fuente limpia para los párrafos */
}










/* Actualizamos el contenedor para que ponga el texto abajo */
.inicio-revista {
    width: 100%;
    height: 100vh; 
    display: flex;
    flex-direction: column; /* ESTA ES LA CLAVE: Ordena de arriba hacia abajo */
    justify-content: center; 
    align-items: center; 
    position: relative; 
    z-index: 10; 
}

/* El estilo del logo lo dejás tal cual lo tenías */
.logo-principal {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #E3F753;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-principal:hover {
    transform: scale(1.05) rotate(-5deg);
    box-shadow: 0 0 30px #E3F753;
    cursor: pointer;
}


/* Para celulares achicamos el logo un poco más */
@media (max-width: 768px) {
    .logo-principal {
        width: 140px;
        height: 140px;
    }
}


/* (titulo) */
.titulo-revista {
    margin-top: 30px;
    color: #ffffff;
    font-size: clamp(3rem, 8vw, 6rem); /* Sigue siendo responsive */
    text-align: center;
    margin-bottom: 0;
    
    /* Le sacamos el fucsia y le dejamos un brillo blanco suave y elegante */
    text-shadow: 0px 4px 15px rgba(255, 255, 255, 0.3);
    
    /* Mantenemos solo el flotado suave */
    animation: flotarTitulo 4s ease-in-out infinite alternate;
}

/* ESTILO 1: La palabra "Young" */
.palabra-young {
    font-family: 'Syne', 'Impact', sans-serif; /* Fuerte, cuadrada y moderna */
    font-weight: 800;
    text-transform: uppercase; /* Toda en mayúsculas */
    letter-spacing: 2px;
}


.palabra-sapiens {
    /* Usamos la fuente gótica que ya teníamos de Google Fonts, o una genérica de sistema */
    font-family: 'UnifrakturMaguntia', 'Blackletter', fantasy; 
    font-weight: normal;
    text-transform: capitalize; /* Ponemos la primera letra en mayúscula para que se note bien el estilo gótico */
    margin-left: 15px; /* Un poquito más de espacio para que no choque con la G de Young */
    
    /* El color rosa intenso */
    color: #D87BCE; 
    
    /* Le agregamos un mini resplandor rosa para que resalte más en el fondo oscuro */
    text-shadow: 0px 0px 10px #6A10BA;
}

/* Un hover súper sutil (nada de colores locos, solo un mini acercamiento) */
.titulo-revista:hover {
    transform: scale(1.02);
    text-shadow: 0px 4px 20px rgba(255, 255, 255, 0.6); /* Brilla un poco más al pasar el mouse */
    cursor: default;
}




/* --- ESTILOS DE LOS COPOS DE NIEVE --- */
.copo {
    position: fixed; 
    top: -50px;
    border-radius: 50%;
    opacity: 0.85;
    pointer-events: none;
    z-index: 1; /* Fondo */
    animation: caer linear forwards, balanceo ease-in-out infinite alternate;

background-color: #ffffff;


}

@keyframes caer {
    to { transform: translateY(115vh); }
}

@keyframes balanceo {
    0% { margin-left: -30px; }
    100% { margin-left: 30px; }
}


/* Contenedor de cada sección */
.section-wrapper {
    width: 100%;
    min-height: 60vh; /* Espacio para que respire cada bloque */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* La nueva caja gris semi-transparente (Efecto Vidrio) */
.section-content {
    max-width: 800px;
    z-index: 10;
    
    /* ACÁ ARMAMOS LA CAJA */
    background-color: rgba(255, 255, 255, 0.05); /* Un gris/blanco súper transparente */
    backdrop-filter: blur(12px); /* Difumina lo que pasa por atrás (la nieve) */
    -webkit-backdrop-filter: blur(12px); /* Para que funcione en Safari/iPhone */
    
    padding: 50px 40px; /* Le damos buen espacio adentro para que no quede apretado */
    border-radius: 24px; /* Bordes bien redondeados y suaves */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Un bordecito mínimo para que resalte la forma */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Sombra para que parezca que flota sobre el fondo */
}

/* Le pasamos el efecto de contraste directo a las letras para que la caja no interfiera */
.dynamic-title, .reveal-text {
    mix-blend-mode: difference;
}
/* TÍTULOS: Con el cambio de 12 fuentes */
.dynamic-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: normal;
    margin: 0 0 24px 0;
    
    /* Caja fija para que el párrafo no salte */
    height: 2.5em; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    animation: cambiaFuente 8s infinite;
}

/* PÁRRAFOS: Con el revelado suave */
.reveal-text {
    color: #ffffff;
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.6;
    font-weight: 700;
    margin: 0;
    font-family: 'Inter', sans-serif;

    /* Efecto de máscara para el revelado */
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
    mask-image: linear-gradient(to right, black 50%, transparent 50%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;

    animation: revelarTexto 2.5s ease-out forwards;
    animation-delay: 0.5s;
}

/* --- ANIMACIONES --- */

/* La locura de las 12 fuentes */
@keyframes cambiaFuente {
    0%  { font-family: 'Bitcount Grid Double', sans-serif; }
    8%  { font-family: 'Playwrite Ireland', cursive; }
    16% { font-family: 'Sekuya', sans-serif; }
    25% { font-family: 'Bungee', cursive; }
    33% { font-family: 'Permanent Marker', cursive; }
    41% { font-family: 'Monoton', cursive; }
    50% { font-family: 'Rubik Wet Paint', cursive; }
    58% { font-family: 'Rubik Glitch', sans-serif; }
    66% { font-family: 'Press Start 2P', cursive; }
    75% { font-family: 'UnifrakturMaguntia', cursive; }
    83% { font-family: 'Rampart One', cursive; }
    91% { font-family: 'Syncopate', sans-serif; text-transform: uppercase; }
    100% { font-family: 'Bitcount Grid Double', sans-serif; }
}

/* El revelado suave de izquierda a derecha */
@keyframes revelarTexto {
    100% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}