body, html {
    overflow: auto; /* ✅ Permite el desplazamiento */
}



@media (max-width: 768px) {
    /* Ajustar el contenido principal */
    main {
        max-width: 95%;
        padding: 10px;
    }
    @media (max-width: 768px) {
        /* Contenedor general */
        .carousel-mascota-container {
            display: flex;
            flex-direction: row; /* ✅ Mantener diseño horizontal */
            align-items: center;
            justify-content: space-between; /* ✅ Distribuir elementos */
            width: 100%;
            flex-wrap: wrap; /* ✅ Evita que los elementos se amontonen */
        }
    
        /* Ajustar el carrusel */
        .carousel-section {
            width: 65%; /* ✅ Reducir para que haya espacio para la mascota */
            height: 400px;
        }
    
        /* Ajustar la mascota */
        .mascota-container {
            width: 30%; /* ✅ Mantenerla a un lado */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .mascota {
            width: 50px; /* ✅ Tamaño más manejable */
        }
    }
}    

@media (max-width: 768px) {
    /* Ajustar imágenes en el carrusel */
    .carousel-img {
        width: 100%;
        height: auto; /* ✅ Que se ajuste sin distorsionarse */
        object-fit: contain; /* ✅ Evita cortes en las imágenes */
    }

    /* Hacer que las imágenes dentro de la mascota sean más flexibles */
    .mascota {
        width: 100%;
        max-width: 250px; /* ✅ Tamaño ajustable sin perder proporción */
        height: auto;
    }
}
@media (max-width: 768px) {
    body, main {
        margin: 0;
        padding: 0;
        overflow: hidden; /* ✅ Evita bordes extra */
    }
}

@media (max-width: 768px) {
    .carousel-section {
        box-shadow: none;
        border: none;
    }
}
@media (max-width: 768px) {
    .logo {
        position: relative;
        top: 80px; /* ✅ Baja el logo sin afectar el botón */
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
    }
}

@media (max-width: 768px) {
    #fechasEvento {
        padding: 50px 15px; /* ✅ Reducir padding en móviles */
    }

    #fechasEvento h1 {
        font-size: 32px; /* ✅ Reducir tamaño */
        margin-bottom: 20px;
        letter-spacing: 2px;
    }

    #fechasEvento h2 {
        font-size: 24px; /* ✅ Mejor ajuste en pantallas pequeñas */
        letter-spacing: 1px;
    }
}

/* 🔹 Ajuste adicional para pantallas más pequeñas (máx. 480px) */
@media (max-width: 480px) {
    #fechasEvento h1 {
        font-size: 28px;
    }

    #fechasEvento h2 {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    /* Ajustar los títulos de la cuenta regresiva */
    #cuentaRegresiva h2 {
        font-size: 28px; /* ✅ Reducir tamaño en móviles */
        margin-bottom: 20px;
    }

    /* Ajustar contenedor del contador */
    #contador {
        flex-wrap: wrap; /* ✅ Evitar que los elementos queden muy separados */
        gap: 15px; /* ✅ Reducir espacio entre bloques */
    }

    /* Ajustar tamaño de los bloques de tiempo */
    .bloque-tiempo {
        width: 120px; /* ✅ Hacerlos más pequeños en móviles */
        padding: 15px 10px;
    }

    /* Ajustar tamaño de los números */
    .bloque-tiempo h3 {
        font-size: 38px; /* ✅ Reducir tamaño */
    }

    .bloque-tiempo p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .contenedor-principal {
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        

    border-image-outset: 2px; 

    }

    .invitado-principal {
        flex-direction: column;
        align-items: center;
        width: 85%; /* 🔹 Reducí el ancho ligeramente */
        padding: 12px; /* 🔹 Menos padding para evitar cortes */

    }

    .invitado-imagen {
        width: 100%;
        max-height: 220px; /* 🔹 Ajuste para que no se corte */
        display: flex;
        justify-content: center;
        border-radius: 20px;

    }

    .invitado-imagen img {
        width: 100%;
        height: auto;
        object-fit: cover; /* 🔹 Asegura que la imagen mantenga proporción */
        border-radius: 10px;
    }

    .nombre-destacado {
        font-size: 24px; /* 🔹 Ligero ajuste en tamaño */
    }

    .descripcion {
        font-size: 15px; /* 🔹 Para mejor lectura en móviles */
    }
}

@media (max-width: 768px) {
    .frase-personaje {
        padding: 6px; /* 🔹 Ajuste menor */
        margin: 8px 0;
        border-left: 3px solid var(--accent-color);
        font-size: 13px; /* 🔹 Menos tamaño */
        box-shadow: none;
    }

    .personaje-nombre {
        font-size: 17px;
    }

    .frase {
        font-size: 13px;
        line-height: 1.3;
        text-shadow: none;
    }
}


    /* Ajustar la animación para que no sea tan intensa en móviles */
@media (max-width: 768px) {
    /* ✅ Organizar los invitados en un grid de dos columnas */
    .invitados-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* ✅ Dos columnas */
        gap: 15px;
        justify-items: center; /* ✅ Centrar todo */
    }

    .invitado {
        display: flex;
        flex-direction: column; /* ✅ Apilar imagen y nombre */
        align-items: center;
        width: 100%;
        max-width: 280px; /* ✅ Evitar que sean demasiado anchos */
        padding: 10px;
        text-align: center;
    }

    /* ✅ Ajustar tamaño de imagen */
    .invitado-imagen {
        width: 100%;
        max-height: 180px; /* ✅ Limitar altura */
    }

    .invitado-imagen img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* ✅ Ajustar nombre */
    .invitado-info h3 {
        font-size: 22px;
    }

    /* ✅ Ocultar descripción para móviles */
    .descripcion, .descripcion-actividad {
        display: none;
    }
}

@media (max-width: 768px) {
    /* ✅ Ocultar descripción y personajes en móviles */
    .descripcion, .descripcion-actividad, .personajes {
        display: none;
    }

    /* ✅ Mantener solo nombre, rol y horarios */
    .invitado-info {
        text-align: center;
    }

    /* ✅ Ajustar el tamaño de la caja */
    .invitado {
        width: 90%;
        padding: 10px;
    }

    /* ✅ Centrar elementos */
    .invitado-info h3 {
        font-size: 22px;
    }

    .rol {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .rol, .personajes, .horarios {
        display: none;
    }
}
@media (max-width: 768px) {
    /* ✅ Efecto al hacer clic */
    .invitado:active {
        background: linear-gradient(45deg, rgba(0, 204, 255, 0.2), rgba(153, 0, 255, 0.2));
        box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
        transform: scale(1.05);
        transition: all 0.4s ease;
    }

    /* ✅ Remover bordes en móviles */
    .invitado {
        border: none;
    }
}
@media (max-width: 768px) {
    .meet-contenedor {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .meet-imagen {
        max-width: 80%;
    }

    .meet-imagen img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); /* ✅ Mantiene la sombra negra */
        transition: transform 0.4s ease-in-out;
    }

    /* ✅ Animación en imagen para móviles */
    .meet-imagen img:hover {
        transform: scale(1.03);
    }

    .descripcion-meet {
        font-size: 16px;
        text-align: center;
        color: var(--accent-color); /* ✅ Color resaltado */
        margin-bottom: 10px;
    }

    .btn-acceso {
        font-size: 16px;
        padding: 12px 18px;
        border-radius: 8px;
        background: #4A005F; /* ✅ Ajuste de color morado más oscuro */
        transition: transform 0.4s ease-in-out;
    }

    /* ✅ Botón con animación en móviles */
    .btn-acceso:hover {
        background: #6A1F8A; /* ✅ Morado más vibrante */
        transform: scale(1.06);
    }
}
@media (max-width: 768px) {
    .social-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .social-card {
        width: 90%;
        padding: 15px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease-in-out;
    }

    .social-card:hover {
        transform: scale(1.05);
    }

    .social-card i {
        font-size: 40px;
        margin-bottom: 10px;
        color: var(--accent-color);
    }

    .social-card a {
        display: block;
        font-weight: bold;
        margin-top: 10px;
        font-size: 16px;
    }
}


@media (max-width: 768px) {
    .social-list {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .social-link {
        font-size: 24px;
        width: 50px;
        height: 50px;
    }

    /* ✅ Ajuste de animación flotante en móviles */
    @keyframes flotando-movil {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0px); }
    }

    .social-link {
        animation: flotando-movil 3s infinite ease-in-out;
    }

    /* ✅ Hover optimizado para pantallas pequeñas */
    .social-link:hover {
        transform: scale(1.15) rotate(5deg);
    }
}
@media (max-width: 768px) {
    .social-list {
        flex-wrap: wrap;
        gap: 15px;
    }

    .social-link {
        font-size: 24px;
        width: 50px;
        height: 50px;
    }

    /* ✅ Ajuste de animaciones en móviles */
    .social-item:nth-child(1) .social-link {
        animation: flotando1 3.5s infinite ease-in-out;
    }

    .social-item:nth-child(2) .social-link {
        animation: flotando2 3s infinite ease-in-out;
    }

    .social-item:nth-child(3) .social-link {
        animation: flotando3 4s infinite ease-in-out;
    }

    .social-item:nth-child(4) .social-link {
        animation: flotando4 2.8s infinite ease-in-out;
    }
}

@media (max-width: 768px) {
    .ubicacion-container {
        flex-direction: column; /* ✅ Ajuste para móviles */
        gap: 30px;
        align-items: center; /* ✅ Centrar todo */
    }

    .Cultural-Uni, .googlemaps {
        width: 100%;
        padding: 25px;
        box-shadow: none;
    }

    .logo-container img {
        max-width: 120px;
    }

    iframe {
        height: 260px;
    }
}

@media (max-width: 768px) {
    .privacy-container {
        padding: 15px;
        max-width: 90%;
        font-size: 14px;
    }

    .privacy-content h4 {
        font-size: 16px;
        margin-top: 15px;
    }

    .privacy-content ul {
        font-size: 14px;
    }

    .privacy-content p {
        font-size: 14px;
    }
}