.speakers-container {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr; /* Default: 1 column */
}

@media (min-width: 600px) {
    .speakers-container {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
    }
}

@media (min-width: 1024px) {
    .speakers-container {
        grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns max */
    }
}
.speaker-card-container {
    display: flex;
    /*flex: 1 0 calc(23% - 10px);*/
}

/* Use your existing styles here, prefixing or scoping them */
.speaker-card-container .card {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0.5rem;
    border: none;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.25rem;
    color: white;
    text-align: center;
}

.speaker-card-container .speaker {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: top;
    border-radius: 0.5rem;
}

/* Keep your Popup styles exactly as they were in Lit */
.speaker-card-container .popup-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.speaker-card-container img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    object-fit: cover;
    object-position: top;
}

.speaker-card-container .content {
    padding-top: 1rem;
    color: white;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.speaker-card-container h2 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    margin-top: 1.5rem;
}

.speaker-card-container p {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.625;
    margin-bottom: 0;
    margin-top: 0;
}

.speaker-card-container .btn-primary {
    margin-top: 1rem;
    background-color: #05A445;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.speaker-card-container .btn-primary:hover {
    background-color: #05A445;
}

.speaker-card-container .land-icon {
    position: absolute;
    right: 10px;
    top: 10px;
}
.speaker-card-container .tn-icon {
    position: absolute;
    right: 10px;
    top: 363px;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.speaker-card-container .icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.icon-business {
    background-image: url('/assets/SVG/business-icon.svg');
}

.icon-dev {
    background-image: url('/assets/SVG/dev-icon.svg');
}

.icon-science {
    background-image: url('/assets/SVG/science-icon.svg');
}

.icon-creative {
    background-image: url('/assets/SVG/creative-icon.svg');
}

/* Styles for the new popup */
.speaker-card-container .popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100svw;
    height: 100svh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.speaker-card-container .popup-content {
    background: #000;
    color: white;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    max-height: 90vh;
}

.speaker-card-container .popup-content .flag {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 30px;
}

.speaker-card-container .popup-content img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 2px solid white;
}

.speaker-card-container .popup-content h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.speaker-card-container .popup-content .popup-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    max-width: 400px;
}

.speaker-card-container .popup-content .popup-semblanza {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 300;
    white-space: pre-line;
}

.speaker-card-container .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
}
.speaker-card-container .speaker {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: top;
}

.speaker-card-container .custom-mobile{
    display: none;
}

.speaker-card-container .button-end {
    flex: 1;
    display: flex;
    align-items: end;
    justify-content: center;
}
/* Media query for mobile devices */
@media (max-width: 768px) {
    .speaker-card-container{
        flex: 1 0 80%;
    }

    .speaker-card-container .popup-backdrop {
        align-items: flex-start;
    }
    .speaker-card-container .popup-content {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        padding: 1rem;
        border: none;
        overflow-y: auto;
    }
    .speaker-card-container .close-btn {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 1001;
    }
    .speaker-card-container .popup-content img {
        width: 120px;
        height: 120px;
    }
    .speaker-card-container .custom-mobile{
        display: block;
    }
}

/* ============================================
   Override de --color-primary de DaisyUI
   El tema custom "light" colisiona con el built-in
   de DaisyUI que define primary como oklch azul/morado.
   Este override fuerza el verde correcto.
   ============================================ */
:root {
    --color-primary: #3BAF29;
}

/* ============================================
   Boton CTA verde (.button-85)
   Originalmente en src/css/index.css que no se
   carga en el <head> de index.html
   ============================================ */
.button-85 {
    text-align: center;
    padding: 0.6em 2em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #3BAF29;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-family: 'NeuePower', 'Camber', 'Inter', sans-serif;
    font-weight: bold;
    height: auto;
    text-decoration: none;
}

.button-85::before {
    content: "";
    background: linear-gradient(
        45deg,
        #90ef00, #5cd70f, #76d30d, #3BAF29,
        #3BAF29, #65a95b, #4b983e, #26641b, #184911
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

.button-85::after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #3BAF29;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing-button-85 {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* ============================================
   Titulo de seccion (.title)
   Usado en ECOSISTEMA, Tierras Tematicas, Entradas
   ============================================ */
.title {
    font-family: 'NeuePower', 'Camber', 'Inter', sans-serif;
    font-weight: 800;
    /* Escala unica de titulo de seccion para toda la home (2 niveles: titulo + cuerpo) */
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    text-transform: uppercase;
    color: white;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* ============================================
   Titulo de seccion (.title-syne)
   Fuente Syne para Main Stage, Aliados, Patrocinadores
   ============================================ */
.title-syne {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: white;
    margin-bottom: 1rem;
    /* Misma escala que .title: los titulos de las secciones de logos no deben
       competir en tamano con los cuadros de logos (decision reunion 10-jun) */
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* ============================================
   Subtitulo de seccion (.subtitle)
   Acompana a .title con texto descriptivo italica
   ============================================ */
.subtitle {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* ============================================
   Seccion ECOSISTEMA - Grid + Tarjetas
   ============================================ */

/* Grid container */
.banner-iniciativas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .banner-iniciativas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .banner-iniciativas {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tarjeta individual */
.banner-iniciativa {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(59, 175, 41, 0.3);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: white;
    transition: border-color 0.3s ease;
}

.banner-iniciativa:hover {
    border-color: rgba(59, 175, 41, 0.7);
}

/* Imagen al tope de la tarjeta.
   Sin object-position aqui: el default ya es center y declararlo
   pisaria utilities Tailwind como .object-top (cascada sin layer) */
.banner-iniciativa img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.banner-iniciativa img.voluntarios {
    object-fit: contain;
    padding: 1rem;
}
/* Titulo de la tarjeta */
.banner-iniciativa h1 {
    font-family: 'NeuePower', 'Camber', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem 1.25rem 0;
    margin: 0;
}

/* Descripcion */
.banner-iniciativa p {
    font-size: 1rem;
    line-height: 1.625;
    padding: 0.75rem 1.25rem;
    margin: 0;
    flex-grow: 1;
}

/* Boton CTA dentro de la tarjeta */
.banner-iniciativa .button-85 {
    display: block;
    margin: 0 1.25rem 1.25rem;
    width: calc(100% - 2.5rem);
}

/* ============================================
   Tabla de Entradas - Iconos Si/No y texto rotado
   Originalmente en src/css/index.css que no se
   carga en el <head> de index.html
   ============================================ */

/* Icono base (celdas Si/No de la tabla) */
span[data-icon] {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
}

span[data-icon]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

span[data-icon="si"]::before {
    background-image: url('/assets/icons/Si.png');
}

span[data-icon="no"]::before {
    background-image: url('/assets/icons/No.png');
}

/* Columna con texto rotado (headers Estándar / Platino) */
.column-with-rotated-text {
    position: relative;
    text-align: center;
    padding: 0;
}

.column-with-rotated-text img {
    display: block;
    margin: 0 auto;
}

.rotated-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    transform-origin: center center;
    color: white;
    font-size: 1.2em;
    z-index: 1;
}

/* ============================================
   Faldon "Datos del evento" - responsive
   En movil estrecho los dos datos se apilan y el
   separador "·" se oculta, para que "10a edicion"
   no se corte.
   ============================================ */
.event-data-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    font-size: 1.125rem;
}
@media (max-width: 480px) {
    .event-data-banner { font-size: 1rem; }
    .event-data-banner .sep { display: none; }
    .event-data-banner > span:not(.sep) { flex-basis: 100%; }
}

/* ============================================
   Speakers - carrusel horizontal de 2 filas en movil
   En >=600px se mantiene el grid (2 cols tablet / 4 desktop).
   En <600px: 2 filas con scroll horizontal (se ven 4 a la
   vez, se desliza para ver los demas) en vez de 40 apilados.
   ============================================ */
.speakers-container { padding: 1.5rem; }
@media (max-width: 599px) {
    .speakers-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.5rem 0.5rem 1.25rem;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 46vw;   /* ancho de cada tarjeta = 46% del viewport (2 visibles) */
        gap: 10px;
        align-items: start;        /* tarjetas pegadas arriba, NO estiradas a la altura de la fila */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .speakers-container > .speaker-card-container {
        scroll-snap-align: start;
        flex: none;               /* anula el flex:1 0 80% heredado del media 768px */
    }
    .speaker-card-container .card { padding: 0.7rem; }            /* menos padding -> texto usa el ancho */
    .speaker-card-container .speaker { height: 200px; }
    .speaker-card-container .tn-icon { top: 198px; right: 8px; }
    .speaker-card-container h2 { font-size: 1rem; margin-top: 0.7rem; line-height: 1.15; margin-bottom: 0; min-height: 2.3em; }  /* nombre mas pequeno; min 2 lineas -> boton alineado entre tarjetas */
    .speaker-card-container .card-body p { display: none; }   /* en movil la descripcion va en el detalle (ver mas) */
    .speaker-card-container .button-end { flex: none; margin-top: 0.7rem; }   /* boton pegado al nombre, no al fondo */
}

/* ============================================
   Dots (circulos) del carrusel de speakers (solo movil)
   indican que hay mas contenido a los lados; el activo se
   resalta segun la posicion del scroll (JS).
   + popup del speaker a pantalla completa real (dvh evita
   el hueco de la barra de URL de iOS)
   ============================================ */
.speakers-dots { display: none; }
@media (max-width: 599px) {
    .speakers-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 0.9rem;
    }
    .speakers-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
        transition: background 0.2s ease, transform 0.2s ease;
        cursor: pointer;
    }
    .speakers-dot.is-active {
        background: #49ac35;
        transform: scale(1.35);
    }
    .speaker-card-container .popup-backdrop { height: 100dvh; }
}

/* ============================================
   Speakers escritorio: 4 + "Ver mas" (>=600px).
   En movil (<600px) se mantiene el carrusel con TODOS.
   ============================================ */
.speakers-vermas-wrap { display: none; text-align: center; margin-top: 1.5rem; position: relative; z-index: 2; }
.speakers-vermas {
    display: inline-block;
    padding: 0.55rem 1.8rem;
    border: 1.5px solid #3BAF29;
    border-radius: 9999px;
    background: transparent;
    color: #ffffff;
    font-family: 'NeuePower', 'Camber', 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.speakers-vermas:hover { background: #3BAF29; }
@media (min-width: 600px) {
    #speakers-wrap.is-collapsed .speakers-container > .speaker-card-container:nth-child(n+5) { display: none; }
    #speakers-wrap.is-collapsed .speakers-vermas-wrap { display: block; }
}