/* ================= VARIABLES ================= */
:root {
    --primary: #ff007f;
    --secondary: #ffdd00;
    --accent: #9d00ff;
    --dark-bg: #1a0510;
    --card-bg: #2b1020;
    --font-heading: 'Bangers', cursive;
    --font-body: 'Montserrat', sans-serif;
}

/* Personalización de la barra de scroll (opcional, ya lo tenías) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #1a0510; }
::-webkit-scrollbar-thumb { background-color: #ff007f; border-radius: 6px; border: 3px solid #1a0510; }



body {
    font-family: var(--font-body);
    background-color: var(--dark-bg);
    color: white;
    overflow-x: hidden;
}

h1, h2, h3, h4, .navbar-brand, .btn {
    font-family: var(--font-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fw-black { font-weight: 900; }

/* ================= NAVBAR ================= */
#mainNav {
    /* Fondo Rosa Semitransparente (Color de la marca con 0.85 de opacidad) */
    background: rgba(255, 0, 127, 0.85) !important;
    
    /* Tira inferior: Ahora es del mismo ROSA (se fusiona, o puedes ponerla blanca si prefieres contraste) */
    border-bottom: 2px solid var(--primary) !important;
    
    /* ESTILO REDONDEADO Y FLOTANTE */
    border-radius: 50px; /* Esquinas bien redondas */
    width: 96%;          /* Dejamos un margen a los costados */
    margin: 10px auto;   /* Margen arriba para que flote */
    left: 0; right: 0;   /* Centrado absoluto */
    
    /* Sombra rosa suave para que destaque del fondo */
    box-shadow: 0 4px 20px rgba(255, 0, 127, 0.4);
    
    z-index: 1000;
}

/* Ajuste del logo para que entre bien en la barra redondeada */
.navbar-brand img { 
    height: 45px !important; 
    width: auto; 
}

/* Color de los enlaces (Blanco, y Amarillo al pasar el mouse) */
.navbar-nav .nav-link { color: white !important; font-weight: bold; }
.navbar-nav .nav-link:hover { color: var(--secondary) !important; }

/* ================= HERO SECTION ================= */
header.masthead {
    height: 100vh; min-height: 700px; padding-top: 80px;
    display: flex; align-items: center; position: relative; overflow: hidden;
    background: linear-gradient(-45deg, #ff007f, #5e0034, #ffdd00, #ff007f);
    background-size: 400% 400%; animation: gradientBG 8s ease infinite;
}

header.masthead::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 16%);
    background-size: 10px 10px; z-index: 0; pointer-events: none;
}
.z-index-2 { z-index: 2; position: relative; }
.z-index-10 { z-index: 10; position: relative; }

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Logo Hero: Posición intacta como pediste */
.hero-logo {
    width: 150% !important;
    max-width: none !important;
    margin-left: -30% !important;
    filter: drop-shadow(5px 5px 0px rgba(0,0,0,0.3));
}

/* Zorro Hero: AJUSTADO (Más arriba y más a la izquierda) */
.hero-mascot {
    width: 170% !important;
    max-width: none !important;
    position: relative;
    left: -15%; /* Movido más a la izquierda hacia el centro */
    top: 0px;   /* Movido hacia arriba (antes era 50px) */
    filter: drop-shadow(-10px 0 20px rgba(0,0,0,0.3));
    pointer-events: none;
    /* La animación floating-anim sigue activa */
}

.hero-date-box h1 { font-size: 4.5rem; line-height: 1; text-shadow: 4px 4px 0 #ff007f; }
.hero-date-box h2 { font-size: 1.8rem; opacity: 0.9; }

.time-box {
    background: var(--primary); border: 2px solid white; color: white;
    padding: 10px 15px; margin: 0 5px; transform: skew(-10deg); min-width: 90px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.3); text-align: center;
}
.time-box span { display: block; font-size: 2.5rem; font-weight: 900; line-height: 1; }

/* ================= TIRA CTA (CON IMAGEN DE FONDO) ================= */
.cta-strip {
    position: relative;
    padding: 6rem 0; /* Un poco más alto para que se luzca la imagen */
    /* Aquí cargamos la imagen. Asegúrate que el nombre coincida */
    background: url('img/narutofondo.jpg'); 
    background-size: cover;      /* Hace que la imagen cubra todo sin deformarse */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
    background-attachment: fixed; /* EFECTO PARALLAX: La imagen se queda quieta al bajar */
}

/* Capa oscura encima de la imagen para que se lea el texto */
.cta-strip::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Oscurece la imagen al 60% */
    z-index: 1;
}

.cta-strip .container {
    position: relative;
    z-index: 5; /* Pone el texto encima de la capa oscura */
}

/* Estilos del texto CTA */
.cta-strip h2 {
    color: white !important;
    /* CAMBIO AQUÍ: Sombra rosa sólida igual que los otros títulos */
    text-shadow: 4px 4px 0px #ff007f !important; 
    font-family: 'Bangers', cursive;
}

.cta-strip p {
    color: white !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

/* Borramos la animación vieja de colores planos si la tenías */
.cta-bg-anim { display: none; }

/* ================= FONDOS MANGA / ANIME ================= */
.bg-manga-pattern { position: relative; }
.bg-manga-pattern::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--primary) 1px, transparent 1px), radial-gradient(var(--secondary) 1px, transparent 1px);
    background-size: 20px 20px; background-position: 0 0, 10px 10px; opacity: 0.15; z-index: 1; pointer-events: none;
}

/* ========================================== */
/* NUEVO FONDO "LUCES GIRATORIAS" (Intenso y Animado) */
/* ========================================== */

/* Configuración base del contenedor */
.bg-speed-lines {
    position: relative;
    overflow: hidden; /* Importante para que lo que gira no se salga */
    /* El color de fondo base sigue siendo el bg-darker del HTML */
}

/* La capa de luces que va a girar */
.bg-speed-lines::before {
    content: '';
    position: absolute;
    /* Hacemos la capa mucho más grande que el contenedor para que al girar cubra las esquinas */
    top: -50%; left: -50%; width: 200%; height: 200%;
    z-index: 0; /* Se va al fondo */

    /* AQUÍ ESTÁ EL COLOR MÁS INTENSO */
    /* Subimos la opacidad del amarillo de 0.05 a 0.15 para que brille más */
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 10deg,
        rgba(255, 221, 0, 0.15) 10deg, /* Amarillo más fuerte */
        rgba(255, 221, 0, 0.15) 25deg, /* Haces de luz un poco más anchos */
        transparent 25deg,
        transparent 35deg
    );

    /* LA ANIMACIÓN DE GIRO */
    animation: spin-lights 30s linear infinite; /* Gira una vuelta completa cada 30 segundos */
    
    /* Un poco de desenfoque para que parezca luz real */
    filter: blur(3px);
    opacity: 0.7; /* Intensidad global de la capa */
    pointer-events: none;
}

/* Definición de la animación */
@keyframes spin-lights {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.floating-shapes { position: absolute; border-radius: 50%; filter: blur(40px); z-index: 1; opacity: 0.4; animation: floatShape 10s infinite alternate; pointer-events: none; }
.shape-1 { width: 300px; height: 300px; background: var(--primary); top: 10%; left: -10%; }
.shape-2 { width: 200px; height: 200px; background: var(--secondary); bottom: 20%; right: -5%; }
.shape-3 { width: 250px; height: 250px; background: var(--accent); top: 50%; left: 40%; }
@keyframes floatShape { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(50px, 50px) rotate(20deg); } }

/* ================= RESTO DE ESTILOS ================= */
.btn-primary { background-color: var(--primary); border: 2px solid white; color: white; box-shadow: 4px 4px 0px rgba(0,0,0,0.5); transition: all 0.2s; }
.btn-primary:hover { background-color: white; color: var(--primary); transform: translate(-2px, -2px); }
.btn-warning { background-color: var(--secondary); border: 2px solid black; color: black; font-weight: 800; box-shadow: 0 0 15px var(--secondary); transition: all 0.2s; z-index: 10; position: relative;}
.btn-warning:hover { background-color: white; transform: scale(1.05); }
.btn-xl { padding: 1.2rem 3.5rem; font-size: 1.8rem; }
.btn-glow { position: relative; z-index: 10; }

.page-section { padding: 6rem 0; position: relative; }
.section-heading { font-size: 3.5rem; margin-bottom: 2rem; text-shadow: 4px 4px 0px var(--primary); color: white; }

.bg-vibrant-dark { background: linear-gradient(180deg, var(--dark-bg) 0%, #2e0022 100%); }
.bg-darker { background-color: #12000e; }
.bg-primary-gradient { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: black; }

.guest-card { background-color: var(--card-bg); border: 2px solid var(--primary); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 15px rgba(255, 0, 127, 0.2); position: relative; z-index: 2; }
.guest-card:hover { transform: translateY(-15px); border-color: var(--secondary); box-shadow: 0 20px 40px rgba(255, 221, 0, 0.4); z-index: 10; }
.card-img-wrapper { overflow: hidden; border-bottom: 5px solid var(--secondary); }
.guest-card img { transition: transform 0.5s ease; width: 100%; }
.guest-card:hover img { transform: scale(1.1); }

.ticket-card { background-color: var(--card-bg); border: none; position: relative; overflow: hidden; transition: transform 0.3s; z-index: 2;}
.ticket-card:hover { transform: scale(1.05); }
.ticket-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.pricing-card-title { color: var(--secondary); text-shadow: 2px 2px 0px rgba(0,0,0,0.5); }

.info-box-glow { background: rgba(255, 255, 255, 0.1); border-left: 5px solid var(--secondary); backdrop-filter: blur(5px); }
.schedule-box { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s; }
.schedule-box:hover { transform: translateY(-5px); }
.stand-box { background-color: var(--secondary) !important; border: 4px solid black !important; box-shadow: 8px 8px 0px black; transition: transform 0.2s; position: relative; z-index: 5;}
.stand-box:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px black; }

.accordion-item { background: rgba(0,0,0,0.3); border: 1px solid var(--primary); margin-bottom: 10px; z-index: 2; position: relative;}
.accordion-button { background: transparent; color: white; font-family: var(--font-heading); font-size: 1.2rem; }
.accordion-button:not(.collapsed) { background: var(--primary); color: white; }
.accordion-button::after { filter: invert(1); }

/* --- ZORROS SECCIÓN "SOBRE" (GIGANTES Y POSICIONADOS) --- */
#sobre .row .col-4 img {
    width: 200% !important;
    max-width: none !important;
    margin-left: -50% !important;
    z-index: 1;
    position: relative;
    /* Ajuste general para el grupo */
    left: -50px; 
}
/* Posicionamiento específico */
#sobre .row .col-4:nth-child(1) img { left: -100px; }
#sobre .row .col-4:nth-child(2) img { z-index: 10; left: -50px; }
#sobre .row .col-4:nth-child(3) img { left: 0px; }

.floating-anim { animation: floating 4s ease-in-out infinite; }
@keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 20px); } 100% { transform: translate(0, -0px); } }
footer { border-top: 5px solid var(--secondary); }
.social-icon:hover { color: var(--secondary) !important; transform: scale(1.2); transition: 0.3s; }

/* ========================================== */
/* FONDO ESPECÍFICO PARA FAQ (GOKU-LUFFY-NARUTO) */
/* ========================================== */
#faq {
    position: relative;
    background: url('img/luffy-goku-naruto.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}
#faq::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); z-index: 1;
}
#faq .container { position: relative; z-index: 5; }

/* ========================================== */
/* FOOTER CON FONDO TOTORO (AJUSTE FINAL DE POSICIÓN) */
/* ========================================== */
footer {
    position: relative;
    background-image: url('img/totorobanner.jpg');
    background-position: 50% 30%; 
    background-size: cover; 
    background-repeat: no-repeat;
    
    /* CAMBIO REALIZADO: Ahora el borde es ROSA (--primary) */
    border-top: 5px solid var(--primary);
    
    overflow: hidden;
    min-height: 500px; 
    display: flex; align-items: center; padding: 0; 
}

.footer-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); z-index: 1;
}

/* ========================================== */
/* FONDO COMIDA PARA SECCIÓN STANDS */
/* ========================================== */
#stands {
    position: relative;
    background-image: url('img/bannercomida.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
#stands::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 1;
}
#stands .container { position: relative; z-index: 2; }

/* ========================================== */
/* FONDO Y AJUSTES PARA SECCIÓN "SOBRE" */
/* ========================================== */
#sobre {
    position: relative;
    background-image: url('img/fondohero.png');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

#sobre::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.60); /* Oscuridad al 80% */
    z-index: 1;
}
#sobre .container { position: relative; z-index: 2; }

/* Asegura que el contenido quede visible */
#sobre .container { position: relative; z-index: 2; }

/* ========================================== */
/* ESTILOS PÁGINA DE TICKETS */
/* ========================================== */
.bg-card-dark { background-color: #1a1a1a; }
@media (max-width: 768px) {
    .scrolling-wrapper { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
    .scrolling-wrapper .col-10 { flex: 0 0 auto; width: 85%; }
}

/* ========================================== */
/* WIDGET FLOTANTE POKÉMON (WHATSAPP) */
/* ========================================== */

.poke-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea todo a la derecha */
}

/* EL BOTÓN DE POKÉBOLA */
.poke-button {
    width: 70px;
    height: 70px;
    transition: transform 0.4s ease;
    cursor: pointer;
    z-index: 10; /* Siempre encima */
    display: block;
}

.poke-button img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
    transition: filter 0.3s;
}

/* Efecto al pasar el mouse sobre el botón: Gira y brilla */
.poke-widget:hover .poke-button {
    transform: rotate(360deg) scale(1.1);
}
.poke-widget:hover .poke-button img {
    filter: drop-shadow(0 0 15px rgba(255, 221, 0, 0.6)); /* Brillo amarillo */
}

/* EL PIKACHU (Oculto detrás de la bola) */
.poke-pikachu {
    position: absolute;
    width: 60px; /* Ajusta según tu imagen */
    bottom: 10px;
    right: 10px;
    opacity: 0;
    transform: translateY(20px) scale(0.5); /* Abajo y pequeño */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efecto rebote */
    z-index: 1; /* Detrás de la bola */
    pointer-events: none;
}

/* Animación Pikachu al hover */
.poke-widget:hover .poke-pikachu {
    opacity: 1;
    bottom: 65px; /* Sube */
    right: 5px;   /* Se asoma un poco a la derecha */
    transform: translateY(0) scale(1) rotate(15deg);
}

/* EL MENSAJE (Globo de texto) */
.poke-message {
    background-color: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 15px 15px 0 15px; /* Borde redondeado estilo globo */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 10px;
    margin-right: 10px;
    
    /* Estado inicial: Oculto */
    opacity: 0;
    transform: translateX(20px) scale(0.8);
    transition: all 0.3s ease 0.1s; /* Pequeño retraso */
    
    position: absolute;
    bottom: 70px;
    right: 60px;
    width: 200px;
    pointer-events: none;
}

/* Animación Mensaje al hover */
.poke-widget:hover .poke-message {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto; /* Ahora se puede leer/seleccionar */
}
/* ========================================== */
/* DECORACIÓN SUSUWATARI (REDUCIDOS Y REUBICADOS - BAJADOS) */
/* ========================================== */
.susuwatari-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Para que no molesten al click */
    z-index: 1; /* Detrás de las tarjetas pero delante del fondo */
    overflow: hidden;
}

.susu-icon {
    position: absolute;
    width: 200px;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}

/* POSICIONES BAJADAS PARA CENTRAR VERTICALMENTE */
/* Aumentamos TOP para bajar los de arriba */
/* Disminuimos BOTTOM para bajar los de abajo */

.susu-top-left {
    top: 20%; /* Bajado del 5% al 15% */
    left: 2%;
    transform: rotate(-15deg);
}
.susu-top-right {
    top: 25%; /* Bajado del 15% al 25% */
    right: 5%;
    transform: rotate(10deg);
}
.susu-bottom-left {
    bottom: 5%; /* Bajado del 20% al 10% */
    left: 5%;
    transform: rotate(5deg);
}
.susu-bottom-right {
    bottom: 2%; /* Bajado del 8% al 2% */
    right: 2%;
    transform: rotate(-20deg);
}

.anim-float-slow { animation: floatIcon 6s ease-in-out infinite; }
.anim-float-med { animation: floatIcon 5s ease-in-out infinite 1s; }
.anim-float-fast { animation: floatIcon 4s ease-in-out infinite 2s; }
@keyframes floatIcon {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* ================= RESPONSIVE (PANTALLAS CHICAS) ================= */
@media (max-width: 991px) {
    header.masthead { height: auto; text-align: center; padding-top: 100px; display: block; }
    .hero-logo { width: 100% !important; max-width: 350px !important; margin: 0 auto 20px auto !important; }
    .hero-mascot { width: 100% !important; max-width: 350px !important; margin: 30px auto 0 auto !important; left: 0; top: 0; }
    .hero-date-box h1 { font-size: 2.2rem; }
    .btn-xl { font-size: 1.2rem; padding: 0.8rem 2rem; }
    #sobre .row .col-4 img { left: 0 !important; }
}

/* ========================================== */
/* CURSOR PERSONALIZADO GHIBLI (ESTILOS) */
/* ========================================== */

/* 1. OCULTAR EL CURSOR NATIVO EN TODA LA WEB */
/* Es importante forzarlo con !important para que no reaparezca */
body, a, button, input, textarea, .btn, .poke-button {
    cursor: none !important;
}

/* 2. CONTENEDOR DEL CURSOR FALSO */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px; /* Tamaño ajustado para que se vea bien tu imagen */
    height: auto;
    z-index: 10000; /* Por encima de TODO, incluso del menú y widgets */
    pointer-events: none; /* CRÍTICO: Permite hacer clic a través de la imagen. NO BORRAR. */
    
    /* Centrado inicial y transición suave para cambios de tamaño */
    transform: translate(-50%, -50%); 
    transition: transform 0.1s ease-out;
    
    /* Inicia oculto hasta que el JS detecte el mouse para evitar parpadeos */
    opacity: 0; 
}

/* Cuando el JS se activa, lo mostramos */
body.mouse-active #custom-cursor {
    opacity: 1;
}

/* 3. LA IMAGEN DENTRO DEL CURSOR */
#custom-cursor img {
    width: 100%;
    height: auto;
    /* Sombra suave para darle profundidad y que parezca que vuela */
    filter: drop-shadow(0 8px 6px rgba(0,0,0,0.3));
    
    /* ANIMACIÓN DE FLOTE: Simula que está volando suavemente */
    animation: flyFloat 1.5s infinite alternate ease-in-out;
    
    /* Transición para la rotación (el JS controlará esto) */
    transition: transform 0.1s ease-out;
}

/* Definición de la animación de flote */
@keyframes flyFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); } /* Se mueve 8px arriba y abajo */
}

/* --- ESTADOS INTERACTIVOS --- */

/* Estado CLICK (Cuando mantienes apretado el mouse) */
/* El cursor se hace un poquito más pequeño */
body.mousedown #custom-cursor {
    transform: translate(-50%, -50%) scale(0.85);
}

/* Estado HOVER (Cuando pasas sobre un enlace o botón) */
/* El cursor brilla un poco en amarillo */
body.hovering #custom-cursor img {
    filter: drop-shadow(0 0 15px rgba(255, 221, 0, 0.7)); 
}

/* ========================================== */
/* FONDO GOKU PARA PÁGINA DE TICKETS */
/* ========================================== */

/* El contenedor principal que envuelve todas las secciones de tickets */
#tickets-bg-container {
    position: relative;
    /* Asegúrate de que la imagen esté en la carpeta img/ */
    background-image: url('img/fondo-goku.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Efecto parallax: el fondo queda fijo al hacer scroll */
    min-height: 100vh; /* Asegura que cubra al menos toda la pantalla */
    padding-bottom: 3rem;
}

/* Capa oscura superpuesta para que las tarjetas resalten sobre el fondo */
#tickets-bg-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ajusta el 0.7 (70% opacidad) si lo quieres más claro u oscuro */
    background: rgba(0, 0, 0, 0.7); 
    z-index: 1;
}

/* ========================================== */
/* CORRECCIÓN DE LECTURA - SECCIÓN SOBRE */
/* ========================================== */

/* Afecta al Título, al Párrafo grande y al Párrafo chico de esa sección */ 
#sobre p.lead, 
#sobre p.text-white-75 {
    /* 1. Sombra negra sólida para máximo contraste */
    text-shadow: 3px 3px 0px #000000, 0 0 15px rgba(0,0,0,0.8);
    
    /* 2. Forzamos color blanco puro y sin transparencia */
    color: #ffffff !important;
    opacity: 1 !important;
    
    /* 3. Un poco más de peso para que se lea claro */
    font-weight: 600 !important;
}

/* ========================================== */
/* FONDO INFINITO PARA CRONOGRAMA */
/* ========================================== */

#cronograma {
    position: relative;
    /* Asegúrate de que el nombre coincida con tu archivo (jpg o webp) */
    background-image: url('img/fonfoinfinito1.webp');
    
    /* Configuración para patrón infinito (Mosaico) */
    background-repeat: repeat; 
    background-size: 400px; /* Ajusta este número si quieres los íconos más grandes o chicos */
    background-position: center;
}

/* Capa oscura para que el texto blanco sea legible sobre el rosa */
#cronograma::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Oscuridad al 85% (necesaria por el contraste con el rosa) */
    background: rgba(0, 0, 0, 0.85); 
    z-index: 1;
}

/* Asegurar que el contenido (texto y cajas) quede encima de la capa oscura */
#cronograma .container {
    position: relative;
    z-index: 2;
}

/* ========================================== */
/* ESTILOS MEJORADOS PARA FAQ (BLANCO Y DIFUMINADO) */
/* ========================================== */

/* El contenedor de cada pregunta */
#faq .accordion-item {
    background: transparent; /* Fondo transparente para que se note el efecto */
    border: 2px solid var(--primary) !important; /* Borde rosa para mantener la estética */
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.3); /* Un suave resplandor rosa */
}

/* El botón de la pregunta (Cerrado y Abierto) */
#faq .accordion-button {
    color: white !important; /* Texto BLANCO siempre */
    font-family: var(--font-body);
    
    /* EFECTO DIFUMINADO (Vidrio esmerilado) */
    /* Fondo negro semi-transparente + filtro de desenfoque */
    background-color: rgba(0, 0, 0, 0.5) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para Safari */
    
    transition: all 0.3s ease;
}

/* Cuando el botón está abierto (NO colapsado) */
#faq .accordion-button:not(.collapsed) {
    /* Lo hacemos un poco más oscuro y le damos un borde inferior rosa */
    background-color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: inset 0 -3px 0 var(--primary) !important;
    color: var(--secondary) !important; /* Opcional: poner el texto amarillo al abrir para resaltar */
}

/* El cuerpo de la respuesta */
#faq .accordion-body {
    color: white !important;
    /* El mismo efecto difuminado pero un poco más oscuro para que se lea bien */
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Cambiar el color de la flechita del acordeón a blanco/rosa */
.accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%); /* La vuelve blanca */
}
.accordion-button:not(.collapsed)::after {
    /* Opcional: si quieres que la flecha se ponga rosa al abrir, usa este filtro en su lugar: */
    /* filter: invert(16%) sepia(94%) saturate(7463%) hue-rotate(323deg) brightness(94%) contrast(113%); */
}

/* AJUSTE PARA TARJETAS ENLACE DE INVITADOS */
a.guest-card {
    display: block; /* Asegura que se comporte como bloque */
    cursor: pointer;
}

/* Opcional: Icono de play o efecto extra al pasar el mouse sobre la imagen */
a.guest-card:hover .card-img-wrapper img {
    transform: scale(1.15); /* Zoom un poco más fuerte */
    filter: brightness(1.1); /* Un poco más de brillo */
}

/* Animación de pulso para el aviso de enero */
.animate-pulse {
    animation: pulse-border 2s infinite;
    background: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para que se lea bien */
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}