:root {
            --color-primary: #44ADB1; /* Teal/Cyan */
            --color-secondary: #BB597F; /* Rose/Pink */
            --color-accent: #ECF355; /* Bright Yellow/Lime */
            --color-dark: #0B7489; /* Dark Teal/Blue */
            --color-light: #FFFFFF; /* White */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--color-light); /* White background */
            color: var(--color-dark); /* Dark teal text by default */
        }
        .hero-background {
            /* This will be set dynamically by JavaScript */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat; /* Added to prevent repetition */
            position: relative;
            display: flex;
        }
        .hero-overlay {
            background-color: rgba(0, 0, 0, 0.6); /* Dark overlay for text readability */
        }
        .cta-button {
            transition: all 0.3s ease;
        }
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .section-heading {
            position: relative;
            display: inline-block;
            padding-bottom: 8px;
        }
        .section-heading::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60%;
            height: 3px;
            background-color: #0B7489;
            border-radius: 9999px;
        }
        .speaker-card, .city-info-card, .faq-item, .testimonial-card, .past-edition-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .speaker-card:hover, .city-info-card:hover, .testimonial-card:hover, .past-edition-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .faq-item:hover {
            background-color: rgba(var(--color-primary-rgb), 0.1); /* Light hover for FAQ */
        }
        /* Style for active flag */
        .flag-icon.active {
            border: 2px solid var(--color-primary); /* Primary color border */
            box-shadow: 0 0 0 2px rgba(68, 173, 177, 0.5); /* Primary color shadow */
        }


        /* Estilos personalizados para las piezas del puzle */
        .puzzle-piece {
            /* Establece la imagen de fondo para todas las piezas */
            background-image: url('../imgs/flyer_animado_white.gif'); /* URL de la imagen (1080x1080) */
            background-size: 500% 500%; /* Ajusta el tamaño para una cuadrícula de 5x5 */
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición suave para la animación */
            border: 1px solid #fff; /* Borde sutil para resaltar las piezas */
        }