/*
Theme Name: Festivales México Child
Template: generatepress
Description: Tema hijo con animaciones GSAP y Tailwind
*/

/* =========================================
   1. RESET Y BASE
   ========================================= */
body { 
    background-color: #1c00ff; /* Fondo azul inicial para evitar destellos blancos */
    margin: 0; 
    overflow-x: hidden; 
}

/* =========================================
   2. EL BOTÓN HAMBURGUESA (OFF-CANVAS)
   ========================================= */
/* Fondo Verde Neón - Usamos la clase general para evitar conflictos de ID */
.cm-all-btn {
    background: #cbff00 !important; 
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    z-index: 100002;
    padding: 0;
}

/* Las 3 líneas en color Azul Eléctrico construidas de forma segura */
.hamburger-icon {
    position: relative;
    background: #1c00ff !important; 
    width: 30px !important;
    height: 4px !important;
    display: block;
}

.hamburger-icon::before, 
.hamburger-icon::after {
    content: '';
    position: absolute;
    background: #1c00ff !important; 
    width: 30px !important;
    height: 4px !important;
    left: 0;
}

.hamburger-icon::before { top: -10px; }
.hamburger-icon::after { bottom: -10px; }

/* =========================================
   3. ANIMACIONES Y LOGO
   ========================================= */
/* Evita que el logo se deforme al escalar y lo ancla a la izquierda */
#logo-container {
    transition: transform 0.1s ease-out;
    transform-origin: left center; /* CRUCIAL: Esto evita que se salga de la pantalla al hacer scroll */
}

#main-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Oculta el contenido principal al inicio para la animación de entrada */
main#main-content {
    opacity: 0;
    transform: translateY(40px);
}

/* =========================================
   4. DISEÑO DE LAS CARDS (CARRUSEL)
   ========================================= */
.festival-card {
    aspect-ratio: 3/4; /* Formato póster/vertical */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #000;
}

/* Gradiente oscuro para que el texto sea legible sobre la imagen */
.card-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}