/* --- ESTILOS GENERALES --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #1d413d;
    overflow-x: hidden;
        font-family: 'Noto Sans', sans-serif;
}

/* --- CLASE PARA BLOQUEAR EL SCROLL AL INICIO --- */
body.bloqueado {
    height: 100vh;
    overflow-y: hidden;
    position: fixed;
}

/* --- 1. CONTENEDOR DEL VIDEO (INTRO) --- */
#intro-video-wrapper {
    position: fixed;
    /* Usamos 50% para ambos */
    top: 50%;
    left: 50%;
    /* El transform NO se debe quitar nunca para mantener el eje */
    transform: translate(-50%, -50%); 
    
    /* Cambiamos px por unidades relativas para que la transición sea fluida */
    width: 80vh;  /* Aproximadamente 700px pero en unidad de pantalla */
    height: 40vh; /* Aproximadamente 350px */
    
    z-index: 10;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    animation: fadeInVideo 1s ease forwards 0.8s;
    
    /* Cambiamos el cubic-bezier por algo más suave para evitar el "latigazo" */
    transition: width 1.8s ease-in-out, height 1.8s ease-in-out, border-radius 1.8s ease;
}

#intro-video {
    width: 100%;
    height: 100%;
 object-fit: cover;
    filter: blur(1px);
    transform: scale(1.1);
    transition: filter 1.8s ease, transform 1.8s ease;
}


/* --- 2. CAPA DE TEXTO INICIAL --- */
#intro-text-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    color: #fff;
    text-align: center;
    pointer-events: none;
    transition: opacity 1s ease;
}

/* Estilos para la nueva imagen */
.main-title-img {
    max-width: 80%;      /* Evita que se desborde en pantallas pequeñas */
    height: auto;
    max-height: 40vh;    /* Limita la altura para que no opaque todo el video */
    object-fit: contain;
    
    /* Reutilizamos la animación que ya tenías para el texto */
    opacity: 0;
    transform: translateY(20px);
    animation: textEnter 1.5s ease forwards;
}

/* Ajuste para móviles */
@media screen and (max-width: 768px) {
    .main-title-img {
        max-width: 90%;
        max-height: 30vh;
    }
}

/* --- 3. SECCIONES DE CONTENIDO --- */
#site-content {
    position: relative;
    width: 100%;
    z-index: 5;
    margin-top: 100vh;
    background-color: #fff;
    color: #000;
    min-height: 100vh;
}

.section {
    padding: 100px 10%;
    border-bottom: 1px solid #eee;
}

/* --- ESTILOS DEL NUEVO MENSAJE CENTRAL --- */
.intro-overlay-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%); /* Un poco desplazado para animación */
    text-align: center;
    color: #ffffff;
    z-index: 25; /* Encima del video */
    width: 80%;
    max-width: 1200px;
    opacity: 0; /* Invisible al inicio */
    pointer-events: none; /* Para que no estorbe el scroll */
    transition: opacity 13.5s ease 0.5s, transform 13.5s ease 0.5s;
}

.intro-overlay-message h1 {
    font-size: 3.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.intro-overlay-message p {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
    text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

/* AJUSTES PARA CELULAR (Media Queries) */
@media screen and (max-width: 768px) {
    .intro-overlay-message h1 {
        font-size: 2.5rem;
    }
    .intro-overlay-message p {
        font-size: 1.1rem;
    }
}


/* --- CLASES DE ESTADOS DE INTRO (JS) --- */

/* Paso 1: Ocultar texto grande */
body.step-1-hide-text #intro-text-layer {
    opacity: 0;
}

/* Paso 2: Expandir video */
body.step-2-expand-video #intro-video-wrapper {
    width: 100vw;
    height: 100vh;
    
    /* Mantenemos exactamente lo mismo que el estado anterior */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    border-radius: 0;
}

body.step-2-expand-video #intro-video {
    /* En lugar de blur(0px), le dejamos un poco de blur y bajamos brillo */
    filter: blur(1px) brightness(0.6); 
    transform: scale(1); /* Mantiene el tamaño normal */
}

body.step-2-expand-video .intro-overlay-message {
    opacity: 1;
    transform: translate(-50%, -50%); /* Cae a su posición final */
}

/* LOGICA NUEVA: Mostrar "Aniversario 87" cuando se expande el video */
body.step-2-expand-video .corner-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s; /* Aparece un poco después de que empieza a expandirse */
}

/* Paso 3: Finalizar Intro (scroll libre) */
body.step-finished #intro-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
}

/* =========================================
   MEDIA QUERIES: ESTILOS PARA CELULAR
   ========================================= */
@media screen and (max-width: 768px) {

    /* --- AJUSTES GENERALES --- */
    body, html {
        overflow-x: hidden; /* Evita scroll horizontal accidental */
    }

    .section {
        padding: 60px 20px; /* Reducir padding lateral para ganar espacio */
    }

    /* --- 1. INTRODUCCIÓN (VIDEO Y TEXTOS) --- */
    #intro-video-wrapper {
        width: 90vw;       /* Ocupa el 90% del ancho de la pantalla */
        height: 250px;     /* Altura reducida para móvil */
    }



    /* --- 3. SECCIÓN FOTOS (DONDE MUEVES EL MOUSE) --- */
    #seccion-fotos h2 {
        font-size: 2.5rem;
        line-height: 1.1;
    }

    #seccion-fotos p {
        font-size: 1rem;
        padding: 0 20px;
    }

    /* --- 4. SECCIÓN TARJETAS ARRASTRABLES --- */
    .center-phrase h2 {
        font-size: 1.8rem;
    }
    
    .center-phrase p {
        font-size: 1rem;
    }

    /* Hacemos las tarjetas más pequeñas para que quepan varias en pantalla */
    .draggable-card {
        width: 140px;      /* Ancho reducido (era 200px) */
        height: 200px;     /* Alto reducido */
        padding: 10px;
    }

    .draggable-card img {
        height: 130px;     /* Ajuste de la imagen interna */
    }

    .card-name {
        font-size: 0.85rem;
        margin-top: 10px;
    }

    /* --- 5. MODAL DE VIDEO --- */
    .modal-content {
        width: 95%;        /* Usar casi todo el ancho disponible */
    }

    .close-modal {
        top: -40px;        /* Mover la X un poco más arriba */
        right: 10px;
        font-size: 2rem;
    }
}


/* --- AJUSTES PARA PANTALLAS GRANDES (1800px+) --- */
@media screen and (min-width: 1801px) {

    /* --- AJUSTES GENERALES --- */
    .section {
        padding: 100px 10%; /* Mayor espacio lateral para centrar visualmente el contenido */
    }

    /* --- 1. INTRODUCCIÓN --- */
    #intro-video-wrapper {
        width: 70vw;        /* No queremos que sea tan ancho como en móvil, pero sí imponente */
        height: 600px;      /* Altura mucho más cinematográfica */
    }
    .intro-overlay-message h1 {
    font-size: 5.3rem;
}
.intro-overlay-message p {
    font-size: 2.5rem;
}

    /* --- 3. SECCIÓN FOTOS --- */
    #seccion-fotos h2 {
        font-size: 7rem !important;
    }

    #seccion-fotos p {
        font-size: 2.8rem;
        max-width: 800px;
        margin: 0 auto;
    }


}

.top-right-logo {
    position: absolute;
    top: 30px;    /* Distancia desde arriba */
    right: 40px;  /* Distancia desde la derecha */
    width: 100px; /* Ajusta el tamaño según tu logo */
    height: auto;
    z-index: 30;  /* Por encima de todo el contenido del video */
    opacity: 0;
    pointer-events: none;
    
    /* Animación de entrada */
    animation: fadeInLogo 1.2s ease forwards 3.9s; /* Aparece 1 seg después de la intro */
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- AJUSTE PARA CELULARES --- */
@media screen and (max-width: 768px) {
    .top-right-logo {
        width: 90px;  /* Más pequeño en móvil */
        top: 20px;
        right: 20px;
    }
}

/* --- AJUSTE PARA PANTALLAS GRANDES --- */
@media screen and (min-width: 1801px) {
    .top-right-logo {
        width: 250px; /* Más grande en monitores 4K/grandes */
        top: 50px;
        right: 60px;
    }
}




.bottom-socials {
    position: absolute;
    bottom: 30px; /* Separación del borde inferior */
    right: 30px;  /* Separación del borde derecho */
    display: flex;
    gap: 20px;
    z-index: 100;
}

.bottom-socials a {
    display: inline-block;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.bottom-socials svg {
    width: 100%;
    height: 100%;
    fill: #ffffff; /* Iconos en color blanco */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Sombra suave para que no se pierdan si el fondo es claro */
}

.bottom-socials a:hover {
    transform: scale(1.2); /* Crece un poco al pasar el mouse */
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)); /* Resplandor blanco */
}

/* Ajuste para móviles */
@media screen and (max-width: 768px) {
    .bottom-socials {
        bottom: 20px;
        right: 20px;
        gap: 15px;
    }
    .bottom-socials a {
        width: 24px;
        height: 24px;
    }
}


.mute-button {
    position: absolute;
    bottom: 20px; /* Se mantiene abajo */
    left: 20px;   /* <--- Cambiado de 'right' a 'left' */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 10; /* Asegura que esté por encima del video */
}

.mute-button:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1); /* Un pequeño efecto visual al pasar el mouse */
}