/* VARIABLES PARA MAPA DE VACUNATORIOS */
:root {
    --primary-color: #7666EA;
    --primary-hover: #6552f6;
    --secondary-color: #9794EB;
    --accent-color: #89D7F0;
    --text-dark: #1E1E1E;
    --text-light: #FFFFFF;
    --text-gray: #666666;
    --bg-light: #F8F9FA;
    --bg-white: #FFFFFF;
    --border-color: #E0E4E7;
    --border-radius: 12px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

/* <!-- ---------- Menu pop-up --------- --> */
/* Estilos del pop-up */
.ir-arriba {
    display: none;
    padding: 12px 20px;
    background: #7666EA;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
}



.menu-popup {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: translateY(-100%);
    animation: slideIn 0.5s forwards, negroBlock 0.5s forwards;
}

.menu-popup.hidden {
    animation: slideOut 0.5s forwards;
}

.Contenedor-popup {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Contenido del pop-up */
.menu-content {
    position: relative;
    max-width: 100%;
    background-color: white;
    padding: 50px;
    height: 42.5rem;
}

.menu-content.index {
    height: 45.2rem;
}

.menu-activo {
    display: flex;
    list-style: none;
    width: 100%;
    gap: 100px;
    padding: 0px;
    margin-top: 50px;
}

/* sub menu activo*/
.menu-activo {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 100px;
    position: relative;
    /* Necesario para el posicionamiento absoluto de los elementos hijos */
}

.menu-activo>li {
    position: relative;
}


.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    gap: 10px;
    padding: 1.1rem 0px 0px 0px;
    z-index: 10;
    list-style: none;
}

.submenu li {
    padding: 10px 20px;

    white-space: nowrap;
}

.submenu a {
    text-decoration: none;
    color: #000;
}

.menu-activo li.color-b a {
    color: #4A4A4A;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

ul.submenu {
    flex-direction: column;
}

.menu-activo>li:hover .submenu {
    display: block;
    height: 20rem;
}



.image-container {
    position: absolute;
    width: 400px;
    height: 400px;
    display: none;
    z-index: 5;
    border-radius: 20px;
    right: 4%;

}

.image-container img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 20px;
}

.menu-activo {
    display: flex;
    position: relative;
    list-style: none;
    padding: 50px 0px 50px 0px;
    margin: 0;
}

.menu-activo>li {
    padding: 0 20px;
    position: relative;
}

.menu-activo>li a {
    color: #939393;
    text-decoration: none;
    color: #939393;
    font-family: Inter;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.menu-activo>li a:hover {
    color: #7666EA;
}

.progress-bar-fijo {
    width: 10px;
    color: #939393;
}

.progress-bar {
    margin: 30px 0px 37px 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #7666EA;
    ;
    /* Color de la barra de progreso */
    width: 0;
    transition: width 0.3s ease, left 0.3s ease;
}

.progress-bar-fijo {
    background-color: #939393;
    color: #939393;
    width: 100%;
    height: 1px;
    position: absolute;
    margin-top: 38px;
}


/* Botón de cerrar */
.close-button {
    border: 0px;
    background: none;
    font-size: 3.5em;
    cursor: pointer;
    color: black;
}

/* Animación del pop-up */
@keyframes slideIn {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes negroBlock {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }

    25% {
        background-color: rgba(0, 0, 0, 0.0);
    }

    50% {
        background-color: rgba(0, 0, 0, 0.0);
    }

    75% {
        background-color: rgba(0, 0, 0, 0.6);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.8);
    }
}



/* <!-- ---------- HEADER --------- --> */
.contenedor-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 5% 5% 5% 5%;
    background-color: #fff;

}


.home {
    background-image: url(/imagenes/banner-home-2.jpg);
    background-size: cover;
    background-position: center;
    min-height: 95vh;
}

.logo {
    height: 78%;
}

nav {
    position: relative;
}

.menu-toggle {
    background: none;
    border: none;

    cursor: pointer;
    font-size: 37px;
    color: white;

}

.menu {
    list-style: none;
    display: flex;
    gap: 15px;
    display: none;
}

.menu li {
    margin: 0;
}

.menu li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

/* <!-- ---------- FIN HEADER --------- --> */



/* <!-- ---------- BANNER PRINCIPAL--------- --> */

.banner {
    width: 100%;
    display: flex;
    color: white;
    margin-top: 110px;
}

#index__banner {
    margin-top: 10%;
}

header#vacunacion__header {
    height: auto;
    padding-bottom: 6rem;
}

#vacunacion__banner__150 {
    margin-top: 3rem;
}

.banner-content.large {
    width: 1000px;
}

.banner-content.large h1 {
    font-size: 80px;
    font-weight: 700;
}

.banner-content.large p {
    font-size: 80px;
    font-size: 20px;
    width: 100%;
}

.banner-content {
    width: 1000px;
    align-items: normal;
    /* align-content: center; */
    justify-content: center;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.banner-content.medium {
    width: 639px;
}

.banner-content.medium h1 {
    color: #FFF;
    font-size: 4.063rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.banner-content h1 {
    font-size: 80px;
    margin-bottom: 20px;
}

.width-medium {
    width: 639px;

}


.buttons {
    display: flex;
    /* gap: 10px; */
    justify-content: space-evenly;
    gap: 30px;
    border: 2px solid white;
    padding: 10px 10px;
    border-radius: 31px;
    width: 644px;
}



.buttons button {
    padding: 10px 20px;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    color: white;

}




.buttons button:hover {
    background-color: white;
    border-radius: 21px;
    color: #7666EA;
}


@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        background-color: white;
        position: absolute;
        top: 50px;
        right: 0;
        width: 200px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
      #mapa {
    height: 400px; /* o el valor que prefieras */
    width: 100%;
  }

  .panel-izquierdo {
    order: -1;
    width: 100%;
  }

    .menu-toggle {
        display: block;
    }

    .menu.show {
        display: flex;
    }

    .banner-content {
        padding: 0px;
    }

    h1 {
        font-size: 2em;
    }

    .buttons {}

    /* #texto__banner {
        margin-top: 50px;
    } */
    #meningitis-virus__banner {
        height: 45vh !important;
    }
}



/* <!-- ---------- FIN BANNER PRINCIPAL--------- --> */

/* <!-- ---------- video explicativo --------- --> */

.video-explicativo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.video-explicativo {
    position: relative;
    width: 100%;
    /* Se adapta al ancho del contenedor */
    max-width: 1280px;
    /* Limita el ancho máximo */
    aspect-ratio: 16 / 9;
    /* Mantiene la proporción 16:9 */
    margin: 50px auto 50px auto;
    /* Centra el video */
}

.video-explicativo iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}



.video-thumbnail {
    width: 100%;
    cursor: pointer;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.play-button::before {
    content: "▶";
    color: white;
    font-size: 40px;
    font-weight: bold;
    margin-left: 5px;
}

/* <!-- ---------- fin video explicativo --------- --> */


/* <!-- ---------- SECCION ¿Qué es la meningitis? --------- --> */

.two-column-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0% 5%;
    background-color: #F2F8F8;
    height: 556px;
    ;
}

.text-column,
.image-column {
    width: 48%;
    padding: 0px;
}


.image-column img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.text-column h2 {
    color: #1E1E1E;
    font-size: 68px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0px;

}

.text-column p {
    font-size: 20px;
    font-weight: 400;
}

/* <!-- ---------- FIN SECCION ¿Qué es la meningitis? --------- --> */


/* <!-- ---------- CAUSA -----------> */

.meningitis-bacteriana-contenedor {
    display: flex;
    flex-direction: column;
}

/* .ocultar {
    display: none;
} */


.titulo {
    display: flex;
    justify-content: space-between;
}

.titulo .btn {}

.btn {
    background-color: transparent;
    color: white;
    border: 3px solid white;
    border-radius: 100%;
    padding: 5px 10px;
    font-size: 2rem;
    cursor: pointer;
}

.btn:hover {
    background-color: white;
    color: #7666EA;
}

.contenedor button.btn {
    background-color: transparent;
    color: white;
    border: 3px solid white;
    border-radius: 100%;
    padding: 5px 10px;
    font-size: 2rem;
    cursor: pointer;
    width: auto;
}

.container-causas {

    margin: 0 auto;
    padding: 0% 5% 5% 5%;
    background-color: #F2F8F8;

}

h2.headeri-tipos-causa {
    padding-top: 30px;
}

.tipos-de-meningitis-header {
    margin-top: 80px;
}

.header-causa {
    justify-content: center;
    text-align: center;
    padding: 0% 0% 5% 0%;
    background: none;
    height: auto;
    color: #1E1E1E;


}

.header-causa h2 {
    margin: 0;

    font-size: 68px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.meningitis-bacteriana {
    padding-left: 4%;
    padding-right: 8%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url(/imagenes/desplegable-bacterias.png) lightgray 50% / cover no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    border-radius: 24px;
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    z-index: 99;
}

.meningitis-bacteriana-contenedor.mostrar-contenido .meningitis-bacteriana {
    border-radius: 24px 24px 0 0;
}

.meningitis-bacteriana {
    border-radius: 24px;
    transition: border-radius 0.3s ease;
}

.meningitis-bacteriana-contenedor.mostrar-contenido .meningitis-bacteriana {
    border-radius: 24px 24px 0 0;
}

.accordion-body.bacterias-acordeon {
    padding: 0px !important;
}

button.accordion-button.virus-acordeon-fondo {
    margin-top: 30px;
    color: #FFF;
    font-size: 2rem;
    font-weight: 800;

}

button.accordion-button.virus-acordeon-fondo {

    border: 0px !important;
}

.accordion-body.virus-acordeon-no-padding {
    padding: 0px 3rem;
    color: white;
    color: #FFF;

    font-size: 20px;

    font-weight: 500;

}

.accordion {
    --bs-accordion-border-color: none;
    --bs-accordion-border-radius: 1.5rem;
}


button.accordion-button {
    padding: 60px 46px;

}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.accordion-button.bacterias {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.60) 100%), url(/imagenes/desplegable-bacterias.png) lightgray 50% / cover no-repeat;
}

.accordion-item.virus-acordeon.hongos-acordeon {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.60) 100%), url(/imagenes/hongos-acordeon.png) lightgray 50% / cover no-repeat;

}

.accordion-item.virus-acordeon.parasito-acordeon {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.60) 100%), url(/imagenes/parasitos-acordeon.png) lightgray 50% / cover no-repeat;

}



button.accordion-button h2 {
    color: #FFF !important;

    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: normal !important;

}

button.accordion-button p {
    color: #FFF;
    margin-right: 1.1rem;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.accordion-button::after {
    background-image: url(/svg/plus.svg) !important;
    background-size: 20px;
    background-position: center;
    border: 2px solid white;

    padding: 20px;

    border-radius: 50%;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FFFFFF" class="bi bi-dash-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/></svg>') !important;
    background-size: 35px;
    background-position: center;
    border: 2px solid white;

    padding: 20px;

    border-radius: 50%;
}

.accordion-item.virus-acordeon {
    border: none;
}

button.accordion-button.virus-acordeon-fondo {
    background: none;
}

.accordion-item.virus-acordeon {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url(/imagenes/virus-acordeon.png) lightgray 50% / cover no-repeat;

}

button.accordion-button p {
    color: #FFF;
    margin-right: 1.1rem;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.accordion-body.virus-acordeon {
    padding: 0px 10% 0px 4%;
    color: white;
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    padding: 6% 5%;
    padding: 6rem 3rem;
    border-radius: 24px;
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsing {
    padding: 5%;
    border-radius: 0px;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-radius: 24px 24px 0px 0px;
}

button.accordion-button.collapsed.virus-acordeon-fondo {
    padding: 6rem 3rem !important;
}

.hidden-text {
    display: none;
    /* Oculta el texto por defecto */
}


/* .accordion-button::after{
    color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");

} */

/* .ocultar {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 1s ease;
    opacity: 0;
} */
/*
.mostrar-contenido .ocultar {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.5s ease, opacity 4s ease;

} */

.section-virus-hongos-parasitos.showContenido {
    transition: all 3s ease;
    overflow: hidden;
    animation: subirContenedores 4s forwards;
}

/* Efecto de deslizamiento */

.mostrar-contenido#bacterias-contenido {
    animation: bajar 2s forwards;
}

.subirDesplegable {
    animation: subir 2s forwards;
}

@keyframes bajar {
    from {
        opacity: 0;
        transform: translateY(-10%);
    }

    to {
        opacity: 1;
        transform: translateY(100);
    }
}

@keyframes subir {
    from {
        opacity: 1;
        transform: translateY(100);
    }

    to {
        opacity: 0;
        transform: translateY(-22%);
    }
}

@keyframes subirContenedores {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
}


.contenedor-titulo-boton {
    display: flex;
    justify-content: space-between;
    width: 100%;
}



.meningitis-bacteriana h2 {
    color: white;
    font-size: 32px;
    font-weight: bolder;
    margin: 0px;
}

.meningitis-bacteriana p {
    font-size: 20px;

}

.meningitis-meningococo {
    padding: 4% 5%;
    background-color: #9794EB;
    color: white;


}

.meningitis-meningococo {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.meningitis-meningococo h3 {
    display: inline-block;
    color: white;
    border-bottom: 2px solid white;
    padding-bottom: 3px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4%;
}




.meningitis-meningococo p {
    border-radius: 16px;
    background: #FFF59B;
    text-align: center;
    color: black;
    padding: 48px 24px;
    font-size: 20px;
    font-style: normal;

    line-height: normal;
}

.no-background p {
    text-align: left;
    background: none;
    padding: 0px;
    color: white;

}

.serogrupos {
    display: flex;
    justify-content: space-between;
    gap: 82px;

}

.columna1,
.columna2 {
    flex: 1;
    margin: 10px;
}

.columna1 {
    margin: 0px;
    width: 60%;
}

.columna2 {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    /* row-gap: 35px; */
    /* margin-top: 70px; */
    width: 40%;
}



.serogrupos h4 {
    color: #FFF;
    font-size: 35px;
    font-weight: 700;
    margin: 00px 0px 0px 0px;
}

.serogrupos p {
    color: white;
    text-align: left;
    padding: 0;
    background: none;
}

.serogrupos ul {
    list-style: none;
    padding: 0;
    color: white;
}

.serogrupos-letras {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.letra {
    width: 84.787px;
    height: 86.654px;
    background-image: url('/imagenes/Vector-letras.svg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: bold;
    color: white;
    margin: 5px;
}

.letra-no {
    width: 84.787px;
    height: 86.654px;
    background-image: none;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 76px;
    font-weight: bold;
    color: white;
    margin: 5px;
}

.letra-no::before {
    content: attr(data-letra);
}

.letra.b {
    background-image: url('/imagenes/Vector-letra-b.svg');
}

.letra::before {
    content: attr(data-letra);
}

.grafico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* .ondas {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 50%, #C2BFF5 51%, transparent 52%),
                radial-gradient(circle, transparent 60%, #C2BFF5 61%, transparent 62%),
                radial-gradient(circle, transparent 70%, #C2BFF5 71%, transparent 72%),
                radial-gradient(circle, transparent 80%, #C2BFF5 81%, transparent 82%),
                radial-gradient(circle, transparent 90%, #C2BFF5 91%, transparent 92%);
    z-index: 1;
} */




.adelante {
    position: relative;
    z-index: 2;
}


.atras-img {
    position: absolute;
    top: -100px;
    left: -10px;
    z-index: 1;
}

.grafico img {
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    width: 70%;
}

.grafico-tipos {
    background-color: #7666EA;
    border-radius: 40px;
}


.columna1.Prevención-es-vacunación {
    background-color: #7666EA;
    padding: 35px 46px;
    border-radius: 24px;
    height: 350px;
    align-items: center;
    align-content: center;
    gap: 20px;
}

.columna1.Prevención-es-vacunación>*:not(:first-child):not(:last-child) {
    margin-top: 16px;
}

.columna1.Prevención-es-vacunación p {
    font-size: 20px;
    font-weight: 300;

}

.custom-button {
    display: flex;
    align-items: center;
    background-color: #9491EB;
    color: white;
    border: none;
    border-radius: 32px;
    padding: 10px 32px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    margin-top: 30px;
}

.custom-button.derecha {
    background-color: #7666EA;

    padding: 15px 26px;
    border-radius: 40px;
}

.columna2.Prevención-es-vacunación {
    justify-content: normal;

}

.custom-button svg {
    margin-left: 0px;
    fill: white;
    font-size: 16px;
}

.custom-button:hover {
    background-color: #5C33D4;
}

.custom-button.no-hover:hover {
    background-color: #7666EA;
    cursor: auto;
}

.texto-prevencion {
    background: #9794EB;
    color: white;
    font-size: 1rem;
    padding: 80px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50%;

}

.texto-prevencion h2 {
    margin: 0px;
    color: #FFF;
    font-size: 68px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.texto-prevencion p {

    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.texto.turquesa {
    background: #89D7F0;
}

.texto.turquesa h2 {
    color: #FFF;
    font-size: 58px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.prevencion-vacunacion {
    padding: 20px;
    background-color: #1D1D2C;
    color: white;
    border-radius: 10px;
    margin-bottom: 20px;
}

.prevencion-vacunacion h4 {
    color: #FFD966;
}

.prevencion-vacunacion p {
    background-color: #9794EB;
    padding: 10px;
    border-radius: 5px;
    color: white;
}

.prevencion-vacunacion a {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #FFD966;
    color: black;
    text-decoration: none;
    border-radius: 5px;
}

footer a {
    display: block;
    text-align: center;
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #9794EB;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.vacio {
    height: 100px;
}


.legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
    border-radius: 5px;

}

.legend-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 44px;
}

.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    color: white;
    font-family: "Inter", sans-serif;
}

.sample-size {
    font-size: 18px;
    font-weight: bold;
    color: white;
    font-family: "Inter", sans-serif;
}


.legend-p {
    font-size: 20px;
    margin-top: 10px;
}

.color-box {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 5px;
}

.datos {

    padding: 0px 40px;
    color: #FFF;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: #7666EA;
    border-radius: 25px;
    width: auto;
    height: 232px;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 44px;
}

.datos p {
    color: #FFF;

    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.footer-bacteriana {

    padding-left: 4%;
    padding-right: 8%;
    background-image: url(/imagenes/footer-serogrupos.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    border-radius: 0px 0px 10px 10px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-bacteriana a {
    color: white;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

/* <!-- ---------- FIN CAUSA -----------> */

/* <!-- ---------- VIRUS - HONGOS - PARASITOS  -----------> */

.contenedor {
    margin-top: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 24px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    /* overflow: hidden; */
    height: 330px;
    padding: 0px;
    display: flex;
    justify-content: space-between;
}

.contenedor.virus {
    background: url('/imagenes/Virus.png');
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 330px;
    display: flex;
    justify-content: space-between;


}

/* .contenedor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    border-radius: 24px;
} */

.virus-textos {
    margin: 42px 42px 0px 42px;
    color: white;
    position: relative;
    z-index: 2;
}

.virus-textos h3 {
    font-size: 32px;
    margin: 0px;
}

.virus-textos p {
    font-size: 20px;
}

.contenedor button {
    /* height: 107px; */
    background: transparent;
    backdrop-filter: blur(10px);
    width: 100%;
    border: none;
    border-radius: 0px 0px 20px 20px;
    font-size: 20px;
    color: white;
    font-weight: 700;
    position: relative;
    z-index: 2;
    padding: 40px;
}

.ver-mas button {
    /* height: 107px; */
    background: transparent;
    backdrop-filter: blur(10px);
    width: 100%;
    border: none;

    font-size: 20px;
    color: white;
    font-weight: 700;
    position: relative;
    z-index: 2;
    padding: 2%;
}

.contenedor.hongos {
    background: url('/imagenes/hongos.png');
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 330px;
}

#hongos__banner {
    min-height: 75vh;
}

.contenedor.parasito {
    background: url('/imagenes/parasitos.png');
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 330px;

}

.ver-mas a {
    color: white;
    text-decoration: none;
}

/* <!-- ---------- FIN VIRUS - HONGOS - PARASITOS  -----------> */

/* <!-- ---------- Síntomas de la meningitis  -----------> */

.container-main {
    padding: 5%;
}

.sintomas-banner-space {
    margin: 0px;
    margin-top: 2rem;
}

.sintomas {
    background-color: #9794EB;
    margin-top: 80px;
    border-radius: 30px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;

}

.columna-sintomas.top {
    align-items: center;
}

.columna-sintomas {
    display: flex;
    justify-content: space-between;
    padding: 0px 50px 0px 50px;
    align-items: start;
    gap: 24px;
}

.columna-sintomas h2 {
    color: #F9F9F9;
    margin: 0px;
    font-size: 68px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 49px;
}

.columna-sintomas.main {
    margin: 45px 0px 45px 0px;

}

.columna-sintomas.footer {
    background-color: #7666EA;
    justify-content: center;
    color: white;
    font-size: 25px;
    border-radius: 0px 0px 30px 30px;
    text-align: center;
    padding: 2.5rem 0rem;

}

.columna-sintomas.footer h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

.sintomas p {
    margin: 50px;
}

.mobile-container {
    display: none;
}

.custom-button1.mobile {
    display: none;
}

.custom-button a {
    color: white;
    text-decoration: none;
    font-family: inter;
}

.custom-button1 a {
    color: white;
    text-decoration: none;
}

.custom-button1 {
    display: flex;
    align-items: center;
    background-color: #7666EA;
    color: white;
    border: none;
    border-radius: 32px;
    padding: 10px 32px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    height: 60px;
    font-family: Inter;

}

.custom-button1.derecha {
    background-color: #7666EA;

    padding: 15px 26px;
    border-radius: 40px;
}



.custom-button1 svg {
    margin-left: 8px;
    fill: white;
    font-size: 16px;
}

.custom-button1:hover {
    background-color: #6552f6;
}

.iconos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
}

.icono img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.icono p {
    margin: 0;
    font-size: 1.1em;
    color: white;
}

.icono img {
    background-color: #7666EA;
    border-radius: 50%;
    padding: 10px;
}

/* <!-- ---------- fin Síntomas de la meningitis  -----------> */

/* <!-- ---------- Transmisión de la meningitis  -----------> */
.dos-columnas {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.contenedor-sintomas.izquierda {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0% 5%;
    background-color: #89D7F0;
    border-radius: 30px;
    width: 55%;

}

.contenedor-sintomas.izquierda h2 {
    color: #1E1E1E;
    font-size: 50px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 0px;
}

.contenedor-sintomas.izquierda p {
    color: #1E1E1E;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.texto-sintomas {

    width: 80%;
    border-radius: 20px;
    background: #7666EA;
    padding: 4%;
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.contenedor-sintomas.derecha {
    width: 60%;
    height: 461px;
    border-radius: 30px;
    background: #9794EB;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.contenedor-sintomas.derecha h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    color: white;
    margin-top: 0px;
}

/* <!-- ---------- Transmisión de la meningitis  -----------> */


/* <!-- ---------- Diagnóstico³  -----------> */

.diagnostico {
    border-radius: 30px;
    background: #7666EA;
    display: flex;
    flex-direction: column;
    padding: 5% 5%;
    margin-top: 16px;
}

.diagnostico h2 {
    color: #89D7F0;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0px;
}

.diagnostico p {
    color: #FFF;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    margin-top: 20px;
    line-height: normal;
}


/* <!-- ----------fin  Diagnóstico³  -----------> */

/* <!-- ---------- Container amarillo  -----------> */

.container-yelLow {
    background-color: #FFF59B;
    padding: 8%;
    font-size: 32px;
    text-align: center;
    margin-top: 55px;
}

.container-yelLow p {
    margin-bottom: 8px;
    color: #1E1E1E;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
}

.texto-bold {
    margin-top: 8px;
    color: #1E1E1E;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;


}

.container-main.mundo-meningitis {
    display: flex;
    gap: 0;
    padding: 0px;

}

.color.box-celeste {
    padding: 5%;
    justify-content: center;
    background: #89D7F0;
    display: flex;
    flex-direction: column;
}

.color.box-celeste h2 {
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0px 0px 24px 0px;
}

.color.box-celeste p {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
}

.box-imagen {
    background-image: url(/imagenes/manos.png);
    width: 100%;
    height: 428px;
    background-size: cover;
    background-position: center;

}

/* <!-- ---------- Fin Container amarillo  -----------> */

/* <!-- ---------- footer top  -----------> */

.footer-top {
    border-radius: 20px;
    background: #9794EB;
    padding: 57px;
    margin: 5% 5%;
}

.footer-texto {
    text-align: center;
    color: white;
}

.footer-texto h2 {
    margin: 0px;
    color: #FFF;
    text-align: center;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}

.footer-texto p {

    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footer-redes {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-redes p {
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.redes {
    display: flex;
    gap: 24px;
}

.redes-icon {
    border-radius: 29px;
    background: #89D7F0;
    width: 58px;
    height: 58px;
    justify-content: center;
    align-items: center;
    display: flex;
}


.redes-icon img {

    width: 32px;
    height: 32px;

}

/* <!-- ---------- fin footer top  -----------> */

/* <!-- ---------- botones avanzar volver  -----------> */

.volver-avanzar {

    display: flex;
    padding: 2rem 4rem;



}

.volver-avanzar.visible {
    display: flex;
    opacity: 1;

}

.volver-avanzar a {
    text-decoration: underline;
}

.icon-arrow-custom {
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;

    align-items: left;
    display: flex;
}


.icon-arrow-custom {
    display: flex;

    align-items: center;

    color: #9794EB;
}

a.icon-arrow-custom {
    font-size: 20px;
    font-weight: 600;

}

i.fa-solid.fa-arrow-right {
    font-size: 20px;
}

.fa-solid.fa-chevron-left {
    font-size: 16px;


    padding: 0.8rem 1rem;

    color: #7666EA;
}






/* <!-- ---------- fin botones avanzar volver   -----------> */



/* <!-- ---------- referencias  -----------> */

.tab-container {
    padding: 4% 5%;

}

.tab {
    border-bottom: 1px solid black;
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

.tab-button {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    background-color: none;
    cursor: pointer;
}

.tab-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.tab-content.home-tab {
    margin-top: 5px;
}

.tab-content.home-tab sup {
    vertical-align: middle;
}

.tab-content.open {
    max-height: 66.5rem;
    /* Ajusta esto según la altura máxima de tu contenido */
    opacity: 1;
}

.tab-content p {
    margin: 5px 0;
    padding: 4px 0px;
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    font-family: 'Inter';
}

.tab-content sup {
    font-size: 12px;
    vertical-align: super;
}

/* <!-- ---------- fin referencias  -----------> */



/* <!-- --------------------------------------------------------- COMIENZO MENINGITIS BACTERIANA ---------------------------------------------> */


/* <!-- ---------- banner meningitis bacteriana -----------> */
.strong {
    font-weight: 600;
}

.hongos-grid.row-3.parasitos p {
    margin: 5px;
}

section.banner.hongos-banner-contenedor {
    margin: 0px;
    margin-top: 1rem;
}

.banner-content.medium.hongos-banner {
    margin: 30px 0px;
}

.banner-content.medium.hongos-banner p {
    font-size: 1.25rem;
    margin-top: 0px;
}

.banner-content.meningitis-header {
    width: 605px;
}

.banner-content.meningitis-header h1 {
    font-size: 80px;
    margin: 0px;
    margin-bottom: 31px;
}

.banner-content.meningitis-header p {
    margin: 0px;
}

.banner-content.meningitis-header {
    row-gap: 0px;
}

.meningitis {
    background-image: url(/imagenes/banner-meningitis-bacteriana.png);
    background-size: cover;
    background-position: center;
    min-height: 69vh;
}

/* <!-- ---------- fin banner meningitis bacteriana -----------> */


/* <!-- ---------- Meningitis bacteriana ¿que es?  -----------> */

.meningitis-seccion-uno {
    display: flex;
    justify-content: center;
    align-items: center;

}

.que-es {
    display: flex;
    width: 100%;

}

.texto h2 {
    font-size: 68px;
    color: white;
    margin: 0px;

}

.texto {
    color: white;
    font-size: 1rem;
    padding: 100px 80px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #7666EA;
    box-sizing: border-box;
    width: 50%;
}

.texto p {

    font-size: 20px;
}

.imagen {
    width: 50%;
}

.imagen img {
    width: 100%;
    height: 100%;

}

/* Estilo para pantallas grandes */


/* Cambiar la imagen para pantallas pequeñas */




/* .imagen{
    background-image: url(/imagenes/image\ 11.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;

} */


.texto {
    gap: 15px;

}

.texto-contenedor {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.07) 100%);
    backdrop-filter: blur(10px);
    padding: 32px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.texto-contenedor li {
    list-style-type: none;
}

.texto-contenedor h3 {
    font-size: 24px;
    margin: 0px;
    font-weight: 600;
}

.texto-contenedor p {
    font-size: 18px;
}

/* <!-- ---------- FIN Meningitis bacteriana ¿que es?  -----------> */

/* <!-- ----------  SINTOMAS  -----------> */

sup {
    font-size: 14px;
    font-weight: 400;
}

.sup-medium {
    vertical-align: super;
    font-size: 15px
}

.sintomas-meningistis {
    margin: 80px 100px;
    display: flex;
    flex-direction: column;
}


.sintomas-meningistis p {
    font-size: 20px;
    margin: 0px;

}

.sintomas-meningistis .margen {
    margin-top: 16px;
    margin-bottom: 16px;
}

.sintomas-meningistis h2 {
    font-size: 68px;
    margin: 0px
}

.columna-1-sintomas.top {
    margin-top: 40px;
}

.columna-1-sintomas.bot {
    margin-top: 24px;
}

.columna-1-sintomas {
    display: flex;
    background-color: #7666EA;
    padding: 40px 46px;
    border-radius: 24px;
    color: white;
    gap: 32px;
    flex-direction: column;
}

.columna-1-sintomas h3 {
    font-size: 20px;
    margin: 0;
}


.columna-1-sintomas ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style-type: none;
    padding-left: 0;
    margin: 0px;
    row-gap: 32px;
    /* Espacio entre las filas */
    column-gap: 10px;
    /* Espacio entre las columnas */
}


.columna-1-sintomas li {


    font-size: 20px;
}

.columna-1-sintomas li svg {
    width: 16px;
    height: 18px;
}

.custom-bullets {
    list-style: none;
    /* Quita los bullets predeterminados */
    padding: 0;
    /* Quita el padding predeterminado */
    margin: 0px;
}

.custom-bullets li {
    position: relative;
    /* Necesario para posicionar el bullet personalizado */
    padding-left: 25px;
    /* Espacio para el bullet */
    margin-bottom: 12px;
    /* Espacio entre los ítems */
}

.custom-bullets li::before {
    content: '';
    /* Necesario para generar el bullet */
    position: absolute;
    /* Posiciona el bullet */
    left: 0;
    top: 0.1em;
    /* Ajusta esto para alinear con la primera línea del texto */
    width: 16px;
    /* Tamaño del bullet */
    height: 16px;
    /* Tamaño del bullet */
    background-color: #9794EB;
    /* Color del bullet */
    border-radius: 50%;
    /* Hace el bullet redondo */
}




/* <!-- ---------- FIN SINTOMAS  -----------> */


/* <!-- ---------- Grupo de riesgo  -----------> */


.grupo-riesgo {
    background-color: #9794EB;
    color: white;
    padding: 100px 80px;

}

.grupo-riesgo h2 {
    font-size: 68px;
    margin: 0px 16px 0px 0px;
}

.hongos-no-margen {
    margin-top: 20px;
}

.grupo-riesgo p {
    font-size: 1rem;
    margin: 20px 10px;
}

.grupo-riesgo-hijo {
    display: flex;
    gap: 24px;
    margin-bottom: 10px;

}

.contenedor-por-tres {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.07) 100%);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4%;
    width: 33.3%;
    text-align: center;
    gap: 8px;
    justify-content: center;
}

.contenedor-por-tres h3 {
    margin: 0px;

}

.contenedor-por-tres p {
    margin: 0px;

}


/* <!-- ---------- FIN grupo de riesgo  -----------> */





/* ---------- transmision ---------- */

.transmision {
    display: flex;
    padding: 100px 80px;
    gap: 45px;
}

.transmision-hijo {
    width: 50%;
}

.transmision-icono {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16px, 1fr));
    /* gap: 10px; */
}

.transmision-icono img {
    width: 35px;
    height: 41px;
    flex-shrink: 0;
}

.transmision-hijo.derecha {
    border-radius: 16px;
    background: #7666EA;
    backdrop-filter: blur(10px);
    padding: 3%;
    color: white;
    width: 50%;
}

.transmision-hijo.derecha h3 {
    color: #89D7F0;
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 0px;
}

.transmision-hijo p {
    font-size: 20px;

}

.transmision-texto p {
    color: #FFF;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0px;
}

.transmision-hijo h2 {
    font-size: 68px;
    margin: 0px;
}

.contenedor-terminos {


    padding: 5%;
    align-items: center;


}

.margin-top {
    margin-top: 10%;
}

.textos-terminos {
    font-size: 18px;



}

.bold {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;

}

.header-terminos {
    padding: 2% 5% 0% 5%;
}

.boton-footer {
    border-radius: 20px;
    border: 1px solid #7666EA;
    padding: 10px 20px;
    background-color: #7666EA;

}

.boton-footer a {
    color: white !important;

}




/* Media queries para adaptar la disposición según el tamaño de la pantalla */
@media (max-width: 1200px) {
    .transmision-icono {
        grid-template-columns: repeat(10, 1fr);
        gap: 15px;
    }

    .transmision-icono img {
        width: 28px;
        height: 41px;
        /* flex-shrink: 0; */
    }

    .video-explicativo {

        margin: 50px auto 50px auto;
        /* Centra el video */
    }

    .video-explicativo {
        width: 95%;
    }
}

@media (max-width: 600px) {
    .transmision-icono {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---------- FIN transmision ---------- */

/* ---------- SECUELAS ---------- */
.container-secuelas {
    background-color: #F2F8F8;
    padding: 80px 100px;
}

.icono.secuelas {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    width: 100%;
}

.columna-sintomas.main.secuelas img {
    width: 56px;
    height: 56px;
}

.icono.secuelas p {
    color: #2F2F2F;

}

.sintomas.secuelas-main {
    background-color: transparent;

    border-radius: 30px;
    margin: 0px;
    gap: 2;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.columna-sintomas.main.secuelas {
    margin-top: 40px;
    margin-bottom: 60px;
}

.columna-sintomas.secuelas {
    margin: 0px;
    padding: 0px;
}


.columna-sintomas.top.secuelas h2 {
    color: #1E1E1E;
    margin-top: 0px;
}


.columna-sintomas.footer.secuelas {
    border-radius: 16px;
    height: 98px;
    align-items: center;
}

.columna-sintomas.footer.secuelas h3 {
    color: #FFF;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0px;
}

/* ---------- FIN SECUELAS ---------- */


/* ---------- prevencion - meningococo ---------- */

.imagenn.prevencion-meningococo {
    background-image: none;
    background-size: cover;
    background-repeat: no-repeat;
    width: 50%;
    box-sizing: border-box;
    /* Ajusta el tamaño para incluir el padding */
}

.imagenn.prevencion-meningococo img {
    width: 100%;
    height: 100%;
}

.custom-button.prevencion-buttom {
    display: flex;
    align-items: center;
    background-color: #7666EA;
    color: white;
    border: none;
    border-radius: 32px;
    padding: 10px 32px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 356px;
}

.que-es.prevencion-color {
    display: flex;
    width: 100%;
    background-color: #9794EB;
}

.texto-prevencion {
    width: 50%;
    box-sizing: border-box;
    /* Ajusta el tamaño para incluir el padding */

}

/* ---------- fin prevencion - meningococo ---------- */


/* ---------- seccion Vacunación contra el meningococo dentro del Calendario Nacional ---------- */

.vacunacion-container {
    padding: 80px 100px;
    background-color: #F2F8F8;
}

.vacunacion-container-hijo {
    display: flex;
    gap: 24px;

}

.vacunacion-container-col {
    width: 50%;
}

.vacunacion-container-hijo.top {
    align-items: start;
}


.vacunacion-container-col.izquierda h2 {
    color: #9794EB;
    font-size: 2.7rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0px;
}

.vacunacion-container-col.derecha p {
    margin: 0px;
    font-size: 20px;
}

.vacunacion-container-col.main-izquierda,
.vacunacion-container-col.main-derecha {
    border-radius: 16px;
    background: #9794EB;
    backdrop-filter: blur(10px);
    padding: 40px 32px;
    color: white;
    font-size: 20px;

}

.vacunacion-container-col.main-izquierda h3,
.main-derecha h3 {
    margin: 0px;
    margin-bottom: 16px;
    color: #FFF;

    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.vacunacion-container-col.main-izquierda p,
.main-derecha p {
    margin: 0px;
    color: #FFF;

    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

}



.vacunacion-container-hijo.main {
    margin-top: 4%;
}

.vacunacion-container-hijo.footer {
    display: flex;
    flex-direction: column;
    margin-top: 80px;
}

.vacunacion-container-hijo.footer p {
    font-size: 20px;
    margin: 0px;
}




/* ---------- fin Vacunación contra el meningococo dentro del Calendario Nacional ---------- */



/* ----------   seccion "Consultá con su pediatra sobre su vacunación" ---------- */

.imagen.consulta {

    background-image: url(/imagenes/consulta.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-position: center;


}

.que-es.consulta {
    display: flex;
    width: 100%;
    background-color: #89D7F0;
    ;
}


/* ----------  fin seccion "Consultá con su pediatra sobre su vacunación" ---------- */


/* <!-- ---------- FIN PAGINA MENINGITIS BACTERIANA -----------> */


/* <!-- ----------------------------------------------------------- COMIENZO TIPOS DE MENINGITIS -------------------------------------------> */

/* <!-- ---------- BANNER PRINCIPAL MENINGITIS BACTERIANA -----------> */
header#tipos-de-meningitis {
    min-height: 80vh;
}

.banner.tipos {
    background: none;
    margin-top: 40px;
}

.tipos {
    background-image: url(/imagenes/banner-tipo.png);
    background-position: center;
    background-size: cover;

}

.banner-content.tipos {
    max-width: 100%;
}

.banner-content.tipos p {
    width: 880px;
}


.banner-content.tipos h1 {
    font-size: 80px;

}

@media (min-width: 300px) and (max-width: 1400px) {}


/* <!-- -----------------------------------------------------------  fin  TIPOS DE MENINGITIS -------------------------------------------> */







/* <!-- ----------------------------------------------------------- COMIENZO Vacunas -------------------------------------------> */

/* <!-- ---------- seccion calendario de vacunas -----------> */
.descargar {
    width: 100%;
}

.banner-content.xl.botones {
    width: 880px;
    margin-top: 0px;
}

.banner-content.xl.botones h1 {
    font-size: 4rem;
    margin-top: 0px;

}

.banner-content.xl.botones p {
    color: #FFF;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 24px;

}


.vacunas-texto {
    text-align: center;
    padding-top: 4%;
}

.vacunas-texto h2 {
    color: #2F2F2F;
    font-size: 68px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0px;

}

.vacunas-texto p {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 3% 0% 4% 0%;
}

@media (min-width: 1200px) {
    .vacunas-texto p {
        margin: 32px 0px 80px 0px;
    }
}

/* <!-- ---------- fin seccion calendario de vacunas -----------> */


/* <!-- ---------- seccion Seleccioná una etapa de vida: -----------> */

.contenedor-vacunas {
    padding: 0% 5%;
    background: #F2F8F8;
}

.contenedor-vacunas .tab-ul {
    padding: 1%;
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.tab-ul {
    margin-top: 0px;
    margin-bottom: 60px;
}

.contenedor-vacunas .li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    margin: 0 1em 0 0;
    display: flex;
    transition: all .5s ease;
    cursor: pointer;
    width: 156px;
    height: 108px;
    border-radius: 20px;
    border: 3px solid #BFBFBF;
    color: #BFBFBF;
    z-index: 100;
    font-size: 18px;

}

.contenedor-vacunas .li.activo {
    border: none;
    color: white;
}

/* Transición para la altura del subcontenedor */
.subcontenedor {
    height: auto;
    overflow: hidden;
    position: relative;
    /* Para permitir posicionamiento absoluto de los hijos */
}

.subcontenedor {
    padding-bottom: 50px;
}

.subcontenedor h3 {
    color: #262261;
}


/* Estilos base para los bloques */
.bloque {
    position: absolute;
    /* Ocupa el espacio relativo del contenedor */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
    /* Retrasa visibilidad para evitar parpadeo */
}

/* Estado activo para los bloques */
.bloque.activo {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
    /* Resetea el delay */
    position: relative;
    /* Coloca el bloque activo en su posición normal */
}

.bloque.activo h3 {
    font-family: Inter;
    font-size: 20px;
    font-style: bold;
    margin: 0px;
}

.bloque.activo h1 {

    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.bloque.activo p {
    margin: 14px 0px 0px 0px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.bloque.activo li {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.titulo-subcontenedor h2 {
    padding: 0%;
    color: #000;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 40px;
}


.vacunas-tabs .li img {
    filter: none;
    transition: filter 0.5s ease;
}

.vacunas-tabs .li.activo img {
    filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(240deg) saturate(300%) brightness(50%);
}



.item {
    border-radius: 16px;
    flex-shrink: 0;
    padding: 40px 32px;
}


/* <!-- ---------- tab amarillo  -----------> */
.bloque.c1.activo {
    display: grid;
    width: 100%;
    grid-template-columns: 48% 48%;
    justify-content: space-around;
}

.item.amarillo {
    background-color: #FFDC5D;
}

/* <!-- ---------- fin tab amarillo  -----------> */

/* <!-- ---------- tab verde  -----------> */
.bloque.c2.activo {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    justify-content: space-around;
}

.item.verde {
    background-color: #81C343;
}

/* <!-- ---------- fin tab naranja  -----------> */

.bloque.c3.activo {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-around;
    gap: 20px;
}

.item.naranja {
    background-color: #F47A32;
}

/* <!-- ----------fin  tab naranja  -----------> */

/* <!-- ---------- tab fuscia  -----------> */

.bloque.c4.activo {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-around;
    gap: 20px;
}

.item.fuscia {
    background-color: #DF5972;
}



/* <!-- ---------- fin tab fuscia  -----------> */

/* <!-- ----------  tab violeta  -----------> */

.bloque.c5.activo {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-around;
    gap: 20px;
}

.item.violeta {
    background-color: #AC76B3;
}


/* <!-- ---------- fin tab violeta  -----------> */

/* <!-- ----------  tab aqua  -----------> */

.bloque.c6.activo {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Tres columnas iguales */
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.item.aqua {
    background-color: #64C7C4;
}


.item.aqua.texto {
    background-color: transparent;
    grid-column: 1 / 4;
    margin: 30px 0px;
    padding: 0px;
    grid-column: 1 / -1;
    /* Ocupa todas las columnas */
}

.item.row-2 {
    grid-column: span 3;
}

.item.row-3 {
    grid-column: span 2;
}

.item.row-6 {
    grid-column: span 6;
}


.item.aqua.texto h2 {
    font-size: 32px;
    color: #1E1E1E;
}

/* <!-- ---------- fin tab aqua  -----------> */

/* <!-- ----------  tab rosa  -----------> */

.bloque.c7.activo {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Tres columnas iguales */
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.item.rosa {
    background-color: #F6AAC8;
}

.item.rosa.row-6 {
    text-align: center;
    background-color: #F6AAC880;
    height: 50px;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}

.icon-text {
    display: flex;
    /* Alinea icono e texto horizontalmente */
    align-items: center;
    text-align: center;
    font-size: 16px;
    /* Ajusta el tamaño del texto */
    justify-content: center;
}

.icon {
    width: 16px;
    /* Ajusta el tamaño del icono */
    height: 16px;
    margin-right: 8px;
    /* Espacio entre el icono y el texto */
}



/* <!-- ---------- fin rosa  -----------> */






.vacunas-tabs .li.activo {
    background-color: #FFDC5D;
    color: #262261;
}

.vacunas-tabs .li-1.activo {
    background-color: #FFDC5D;
}

.vacunas-tabs .li-2.activo {
    background-color: #81C343;
}

.vacunas-tabs .li-3.activo {
    background-color: #F47A32;
}

.vacunas-tabs .li-4.activo {
    background-color: #DF5972;
}

.vacunas-tabs .li-5.activo {
    background-color: #AC76B3;
}

.vacunas-tabs .li-6.activo {
    background-color: #64C7C4;
}

.vacunas-tabs .li-7.activo {
    background-color: #F6AAC8;
}

.br-p {
    display: none;
}




/* <!-- ---------- fin seccion Seleccioná una etapa de vida: -----------> */

/* <!-- ----------------------------------------------------------- fin calendarios de vacunas  -------------------------------------------> */


/* <!-- -----------------------------------------------------------  Comienzo css pagina meningitis por hongos  -------------------------------------------> */
.banner-content.medium.hongos h1 {
    font-size: 80px;
}

.banner-content.medium.hongos p {
    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
}

header.meningitis-hongos-banner {
    min-height: 80vh;
}


header.meningitis-hongos-banner {
    background-image: url(/imagenes/banner-tipo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

header#mid {
    height: 65vh;
}

.container-hongos {
    display: flex;
    width: 100%;
}

.texto-hongos {
    background: #7666EA;
}

.sup-medium {
    font-family: 'Inter';
    font-size: 14px;
}

.hongos-banner .sup-medium {
    font-family: Arial, Helvetica, sans-serif;
}

.texto-hongos,
.imagen-hongos {
    flex: 1;

}

.imagen-hongos img {
    content: url('/imagenes/image\ 10.png');
    width: 100%;
    height: auto;
}

.imagen-hongos.dos img {
    content: url('/imagenes/image\ 10.png');
    width: 100%;
    height: 100%;
}

.texto-hongos p {
    padding: 10%;
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0px;
}

@media (min-width: 1200px) {
    .texto-hongos p {
        padding: 0 10%;
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0px;
    }

    /* .container-hongos {
        height: 535px;

    }
    .texto-hongos {
        width: 725px;
    }
    .imagen-hongos{
        width: 932px;
        object-fit: cover;
    } */
}


.texto-hongos {
    display: flex;
    align-items: center;
}

.imagen-hongos img {
    width: 100%;
    height: 100%;
}

/* <!-- ------------------- seccion ¿Quiénes tienen riesgo de adquirir este tipo de meningitis?   ---> */
.hongos-titulo {
    padding: 5% 5%;
}

.hongos-titulo h2 {
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.hongos-titulo p {
    font-size: 20px;
}


.contenedor-hongos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Tres columnas iguales */
    gap: 24px;
    width: 100%;
    justify-content: space-between;
}

.hongos-grid {
    background-color: #F6AAC8;
}

.hongos-grid {
    text-align: center;
    display: flex;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.07) 100%);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 7%;
    flex-direction: column;
    height: 272px;
}

.hongos-grid.row-3 {
    grid-column: span 2;
}

.hongos-grid.row-6 {
    grid-column: span 3;
}

.footer-hongos-texto {
    margin-top: 40px;
}




/* <!-- - fin ¿Quiénes tienen riesgo de adquirir este tipo de meningitis?   ---> */

/* <!-- ----------------------------------------------------------- FIn  css pagina meningitis por hongos  -------------------------------------------> */

.banner-content.medium.virus h1 {
    color: #FFF;
    font-family: Inter;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.imagen-hongos.virus img {
    content: url('/imagenes/imagen-final.png');
    width: 100%;
    height: 100%;
}

.imagen-hongos.dos.virus img {
    content: url('/imagenes/meningitis-por-virus-2.png');
    width: 100%;
    height: 100%;
}

.imagen-hongos.parasitos img {
    content: url('/imagenes/meningitis-por-parasito.png');
    width: 100%;
    height: 100%;
}

.grupo-riesgo.parasitos-titulo h2 {
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 40px;
}




/* <!-- -----------------------------------------------------------  Comienzo css pagina meningitis por sintomas  -------------------------------------------> */


.contenedor-ruleta {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: center;
    background: #9794EB;
    padding: 65px 50px;
    gap: 30px;
}

.contenedor-ruleta-izquierda {
    width: 49%;
    height: 300px;
    flex-shrink: 0;
    border-radius: 30px;
    background: #7666EA;
    padding: 30px;
    color: white;
    font-family: "Inter", sans-serif;
}


.contenedor-ruleta-derecha {
    margin: 0;
    padding: 0;
    width: 49%;
    background: #9794EB;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100vh; */
    overflow: hidden;
}

.container-ruleta {

    width: 80vw;
    height: 80vw;
    max-width: 525px;
    max-height: 525px;
    background-color: white;
    border-radius: 50%;
    border: 5px solid white;
    position: relative;
    overflow: hidden;
    /* transition: 5s; */
}


.container-ruleta div {
    height: 50%;
    width: 100%;
    position: absolute;
    clip-path: polygon(75% -1%, 50% 99%, 0% 0%);
    transform: translate(-50%);
    transform-origin: bottom;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.habituales {
    padding: 50px;
    border-radius: 30px;
    background: #7666EA;
    color: white;
    height: 342px;
}

.bloque {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /* Podrías usar visibility en lugar de display para mantener el flujo del documento */
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.bloque.activo {
    display: block;
    opacity: 1;
    visibility: visible;
    position: relative;
}




.one p {
    transform: rotate(28deg) translate(-40px, -13px);
}

.two p {
    transform: rotate(-45deg) translate(15px, -35px);
}

.three p {
    transform: rotate(245deg) translate(55px, -14px);
}

.four p {
    transform: rotate(172deg) translate(20px, 46px);
}

.five p {
    transform: rotate(100deg) translate(-40px, 40px);
}

/* medidas para macbook air 2023 */
@media (min-width: 1270px) and (max-width: 1280px) and (min-height: 750px) and (max-height: 800px) {
    .container-ruleta .one {
        transform: rotate(2deg);

    }
}

.container-ruleta .one {
    background-color: #9794EB;
    transform: rotate(333.2deg);

}


.container-ruleta .two {
    background-color: #9794EB;
    transform: rotate(45.2deg);
}



.container-ruleta .three {
    background-color: #9794EB;
    transform: rotate(117.2deg);
}



.container-ruleta .four {
    background-color: #9794EB;
    transform: rotate(189.2deg);
}


.container-ruleta .five {
    background-color: #9794EB;
    transform: rotate(261.2deg);
}

.container-ruleta div:hover {
    background-color: white;
    color: #9491EB;
    cursor: pointer;
}

.container-ruleta .active {
    background-color: white;
    color: #9491EB;
}

.container-ruleta p {
    width: 100px;
    text-align: center;
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#spin {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20vw;
    height: 20vw;
    max-width: 202.129px;
    max-height: 202.129px;
    background-color: #7666EA;
    border: 6px solid #fff;
    border-radius: 50%;
    color: white;
    color: #FFF;
    text-align: center;
    font-family: "Inter";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

}

.contenedor-alerta {
    background-color: #9794EB;
    padding: 80px 100px;

}

.custom-button.amarillo {
    border-radius: 8px;
    background: #FFF59B;
    max-width: 1500px;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: "Inter";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: none;
    margin: 0 auto;
    padding: 0;
    height: 52px;

}

.vacunacion-container-col.derecha {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.banner-content.medium.parasitos h1 {
    font-size: 80px;

}


@media only screen and (max-width:1275px) {
    /* .container-ruleta div{
        clip-path: polygon(75% 1%, 50% 99%, 0% 0%);

    } */


}

#sintomas__header {
    min-height: 35.4rem;
}

@media (min-width: 1058px) and (max-width: 1110px) {
    #sintomas__header {
        height: 100.3vh;
    }
}

@media (min-width: 1060px) and (max-width: 1224px) and (min-height: 530px) and (max-height: 589px) {
    #sintomas__header {
        min-height: 35.4rem;
    }
}

/* <!-- -----------------------------------------------------------  fin css pagina meningitis por sintomas  -------------------------------------------> */





/* <!-- ---------- Footer  -----------> */

footer {
    padding: 5% 5%;
    background: #F3F3F3;
}

.contenedor-footer {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    align-items: center;
}

.contenedor-footer a {
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    color: black;
}

.contenedor-footer a:hover {
    color: #9794EB;
}

footer img {


    width: 128px;
    height: 40px;


}

section.contenedor-menu.tipos-menu {
    margin: 0px;
}

section.contenedor-menu.meningitis-menu {
    margin: 0px;
}


.imagen.bacteriana-par {
    background-size: cover;
    background-image: url(/imagenes/bacterias.png);
    background-position: center;
    background-repeat: no-repeat;
}

.imagen.bacteriana-par {
    background-size: cover;
    background-image: url(/imagenes/bacterias.png);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
}


.imagen.bacteriana-par h2 {
    color: white;
    font-size: 48px;
    text-align: center;
}

.btn-play {
    background: none;
    border: none;
    cursor: pointer;

    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-play img {
    width: 100%;
    height: auto;
}

pop-up-imagen {
    background: none;
}

img#responsive-img {
    display: none;
}






/* ======================== MAPA INTERACTIVO DE VACUNATORIOS - UI MEJORADA ======================== */

/* ======================== MAPA INTERACTIVO DE VACUNATORIOS - OPTIMIZADO ======================== */

/* CONTENEDOR PRINCIPAL DEL MAPA */
.vacunatorios-container {
    display: grid;
    grid-template-columns: 420px 1fr;
    height: 100vh;
    max-width: 1400px;
    margin: 2rem auto;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    will-change: auto;
    /* Optimización de renderizado */
}

/* MARCADORES SIMPLIFICADOS */
.custom-marker-wrapper {
    position: relative;
}

.custom-marker-container {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(118, 102, 234, 0.3);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.marker-icon:hover {
    transform: scale(1.05);
}

.marker-icon[data-tipo="Hospital"] {
    background: #e74c3c;
}

.marker-icon[data-tipo="Farmacia"] {
    background: #2ecc71;
    font-size: 15px;
}

.marker-icon[data-tipo="Centro de Salud"] {
    background: var(--primary-color);
}

/* POPUPS OPTIMIZADOS */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.4 !important;
    font-family: 'Inter', sans-serif !important;
    width: auto !important;
}

.popup-content {
    padding: 0;
    min-width: 280px;
    max-width: 350px;
}

.popup-header {
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.popup-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.popup-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.popup-tipo {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: 400;
}

.popup-body {
    padding: 1rem;
    background: white;
}

.popup-info-item {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    align-items: flex-start;
}

.popup-info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.info-value {
    font-size: 0.85rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.popup-services {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.services-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.service-item.available {
    background: #e8f5e8;
    color: #2d5a2d;
}

.service-item.unavailable {
    background: #fdf2f2;
    color: #7a2d2d;
}

/* PANEL IZQUIERDO */
.panel-izquierdo {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--bg-white);
    overflow: hidden;
    contain: layout style;
    /* Optimización de renderizado */
}

/* HEADER DE BÚSQUEDA */
.header-busqueda {
    background: var(--primary-color);
    color: var(--text-light);
    padding: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.header-busqueda h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.header-busqueda p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* SECCIÓN DE FILTROS */
.seccion-filtros {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 0;
    padding-top: 15px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    flex-shrink: 0;
}

.busqueda-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.busqueda-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-white);
    box-sizing: border-box;
}

.busqueda-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(118, 102, 234, 0.1);
}

.icono-busqueda {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    font-size: 1rem;
    pointer-events: none;
}

.filtros-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 0rem;
}

.grupo-filtro label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.select-filtro {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-white);
    font-size: 0.85rem;
    cursor: pointer;
    box-sizing: border-box;
}

.select-filtro:focus {
    outline: none;
    border-color: var(--primary-color);
}

.filtros-checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-white);
}

.checkbox-item:hover {
    border-color: var(--primary-color);
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-content {
    flex: 1;
}

.checkbox-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.checkbox-desc {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

.checkbox-icon {
    font-size: 1.5rem;
}

/* SECCIÓN DE RESULTADOS */
.seccion-resultados {
    flex: 1;
    padding: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Importante para flex-shrink */
}

.resultados-header {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.resultados-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

/* CONTADOR DE RESULTADOS */
.resultados-counter {
    padding: 0.25rem 1.5rem;
    flex-shrink: 0;
}

.counter-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    background: linear-gradient(90deg, #f9f9ff, #ecebfc);
    padding: 0.25rem 2rem;
    border-radius: 12px;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.counter-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.counter-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* LISTA DE RESULTADOS OPTIMIZADA */
.lista-resultados {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 8px;
    min-height: 0;
    contain: layout style;
    /* Optimización importante */
}

/* SCROLLBAR */
.lista-resultados::-webkit-scrollbar {
    width: 6px;
}

.lista-resultados::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 3px;
}

.lista-resultados::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.lista-resultados::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

/* SIN RESULTADOS */
.sin-resultados {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-gray);
}

.sin-resultados h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.sin-resultados p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* CARDS DE VACUNATORIO CORREGIDAS */
.card-vacunatorio {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    /* Asegurar que se muestre */
    position: relative;
    flex-shrink: 0;
    /* Evitar que se compriman */
}

.card-vacunatorio:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(118, 102, 234, 0.15);
}

.card-vacunatorio.selected {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(118, 102, 234, 0.25);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.card-title-section {
    flex: 1;
    min-width: 0;
}

.card-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
    word-wrap: break-word;
}

.card-tipo {
    font-size: 0.8rem;
    color: var(--text-gray);
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    background: var(--bg-light);
    border-radius: 12px;
    display: inline-block;
}

.card-content {
    padding: 1rem;
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.info-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    width: 14px;
    height: 14px;
}

.info-primary {
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
}

.info-secondary {
    font-size: 0.8rem;
    color: var(--text-gray);
    line-height: 1.3;
}

.card-services {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.service-badge {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.service-badge.available {
    background: #e8f5e8;
    color: #155724;
}

.service-badge.unavailable {
    background: #fdf2f2;
    color: #721c24;
}

.card-action {
    border-top: 1px solid #f0f0f0;
    padding: 0.75rem 1rem;
}

.btn-ver-mapa {
    width: 100%;
    padding: 0.6rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-ver-mapa:hover {
    background: var(--primary-hover);
}

/* PANEL DERECHO - MAPA */
.panel-mapa {
    position: relative;
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.mapa-header {
    background: var(--accent-color);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.mapa-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.mapa-leyenda {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
    font-weight: 500;
}

.leyenda-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.leyenda-item:nth-child(1)::before {
    background: var(--primary-color);
}

.leyenda-item:nth-child(2)::before {
    background: #2ecc71;
}

.leyenda-item:nth-child(3)::before {
    background: #e74c3c;
}

.btn-refresh {
    background: var(--bg-white);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-refresh:hover {
    background: var(--primary-color);
    color: white;
}

#mapa {
    flex: 1;
    width: 100%;
    position: relative;
    background: #f8f9fa;
}

/* LOADING OPTIMIZADO */
.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: var(--text-gray);
}

.loading::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .vacunatorios-container {
        grid-template-columns: 380px 1fr;
    }
}

@media (max-width: 1024px) {
    .vacunatorios-container {
        grid-template-columns: 1fr;
        height: auto;
        margin: 1rem;
    }

    .panel-mapa {
        order: -1;
        height: 600px;
    }

    .panel-izquierdo {
        max-height: 3000px;
    }

    .lista-resultados {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .vacunatorios-container {
        grid-template-columns: 1fr;
        height: auto;
        margin: 1rem;
    }

    .panel-mapa {
        order: -1;
        height: 600px;
    }

    .panel-izquierdo {
        max-height: 3000px;
    }
    .filtros-grid {
        grid-template-columns: 1fr;
    }

    .header-busqueda {
        padding: 0.5rem;
    }

    .seccion-filtros {
        padding-right: 1rem;
        padding-left: 1rem;
        padding-bottom: 0;
        padding-top: 8px;
    }

    .seccion-resultados {
        padding: 1rem;
    }
}

/* OPTIMIZACIONES DE PERFORMANCE */
.vacunatorios-container * {
    box-sizing: border-box;
}

/* Prevenir reflow innecesario */
.lista-resultados>* {
    contain: layout style;
}

/* Optimizar animaciones para 60fps */
@media (prefers-reduced-motion: no-preference) {

    .card-vacunatorio,
    .btn-ver-mapa,
    .checkbox-item {
        transition: all 0.1s ease;
    }
}

/* Sin animaciones para usuarios que las prefieren deshabilitadas */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================== FIN MAPA INTERACTIVO MEJORADO ======================== */


/* <!-- ------------------------------ RESPONSIVE CSS ------------------------------> */

/* <!-- ------------------------------ RESPONSIVE QUE ES LA MENINGITIS CSS ------------------------------> */

@media only screen and (max-width:1300px) {
    .image-container img {
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 20px;
    }


    .image-container {

        width: 250px;
        height: 400px;
        right: 49px;
    }

    .menu-activo {
        gap: 50px;
    }

    .svg-ocultar {

        display: none;
    }

    .icono p {
        font-size: 15px;
    }

    .columna-sintomas.main {
        display: flex;
        /* margin: 0 auto; */
        justify-content: space-between;
        align-items: center;
        /* padding: 0px; */
        float: right;
        gap: 24px;
    }

    .icono img {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    .banner {



        display: flex;
        justify-content: left;
        align-items: center;
        text-align: left;
        color: white;
    }

    header {
        background-size: cover;
        background-position: center;
    }

    .columna-sintomas.footer {
        font-size: 22px;
    }




}

@media (max-width:1280px) {
    .serogrupos h4 {
        font-size: 33px;
    }

    .custom-button a {
        color: white;
        text-decoration: none;
        font-family: inter;
        font-size: 17px;
    }
}



@media (max-width:1255px) {
    .image-container img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }


    .columna-sintomas.main {
        display: flex;
        grid-template-columns: repeat(7, 1fr);
        /* justify-items: center; */
        /* align-items: center; */
        justify-content: space-between;

    }

    .serogrupos-letras {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        /* Centrar horizontalmente */
        align-items: center;
        /* Centrar verticalmente */
    }





    /* RESPONSIVE CSS MENINGITIS POR MENINGOCOCO */


    /* br {
        display: none;
    } */

    .columna-1-sintomas ul {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .columna-1-sintomas li {
        font-size: 0.9rem;
    }

    .columna-1-sintomas li {
        width: 95%;
    }

    .columna-1-sintomas ul {
        column-gap: 1rem;
    }

    .custom-bullets li::before {
        width: 0.8rem;
        height: 0.8rem
    }

    ;

    .imagen img {
        content: url('/imagenes/meningitis-por-parasito-mobile.png');
    }

    .contenedor-hongos-grid {}

    .grupo-riesgo.hongos-titulo {
        margin-top: -5px;
    }

    .imagen-hongos img {

        width: 100%;

    }

    .imagen-hongos.dos img {
        content: url('/imagenes/meningitis-por-virus-2-mobile.png');
        height: 900px;


    }
}





@media only screen and (max-width:1058px) {
    .tab-content.open {
        max-height: 100rem;
    }

    .imagen.bacteriana-par {
        height: 500px;
    }



    h2 {
        font-size: 28px;

    }

    p {
        font-size: 16px;
    }

    .two-column-section {
        flex-direction: column;
        height: auto;
        flex-wrap: nowrap;
    }

    .text-column {
        width: auto;
    }

    .text-column h2 {
        font-size: 28px;
    }

    .text-column h2 {
        font-size: 28px;
    }

    .text-column p {
        font-size: 16px;
    }

    .two-column-section {
        padding: 8% 4%;
    }

    .header-causa h2 {
        font-size: 28px;
    }

    .meningitis-bacteriana h2 {
        font-size: 24px;
    }

    .meningitis-bacteriana p {
        font-size: 16px;
    }

    .image-column {
        width: 100%;
    }

    .image-column img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 50px auto;
    }

    .container-causas {
        margin: 0 auto;
        padding: 4% 5%;
        background-color: #F2F8F8;
    }

    .meningitis-meningococo {
        padding: 2% 3%;
        background-color: #9794EB;
        color: white;
    }

    .meningitis-meningococo h3 {
        font-size: 22px;
    }



    .meningitis-meningococo p {
        font-size: 16px;
    }

    .contenedor-sintomas.derecha {

        padding: 2% 1%;
    }

    .columna1 {
        width: 100%;
    }

    .columna2 {
        width: 100%;
        gap: 10px;
    }

    .columna1.Prevención-es-vacunación {
        padding: 0px;
    }

    .columna1.Prevención-es-vacunación h4 {
        font-size: 20px;
        padding: 32px 12px 0px 12px;

    }

    .columna1.Prevención-es-vacunación p {

        padding: 0px 12px 0px 12px;

    }

    .columna1.Prevención-es-vacunación p {
        font-size: 16px;
    }

    .legend-container {
        flex-direction: column;
        width: 100%;
        align-items: start;
        /* justify-content: space-between; */
    }

    .legend {
        flex-direction: column;

    }

    .buttom {
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .serogrupos {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .custom-button {
        width: 284px;
        height: 50px;
        flex-shrink: 0;
        font-size: 16px;
        padding: 0px;
        justify-content: center;
        margin: 0px 12px 32px 12px;
    }

    .vacio {
        display: none;
    }

    .custom-button.derecha {
        padding: 0px;
    }

    .datos {
        background: transparent;
        padding: 0px;
        margin-left: 0px;
        height: auto;
        width: 100%;
    }

    .datos p {
        font-weight: 400;
    }

    .footer-bacteriana a {
        color: #FFF;
        text-align: center;
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .mobile-container {
        display: flex;
        padding: 0% 5%;
    }

    button.custom-button1.mobile {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        height: 50px;
        padding: 0px;

    }

    .contenedor.virus {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .contenedor.hongos {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .contenedor.parasito {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .custom-button1 {
        display: none;
    }

    #descargar {
        display: flex;
    }

    .columna-sintomas.footer {
        font-size: 16px;
        margin-top: 50px;
    }

    .dos-columnas {
        flex-direction: column;
    }

    .columna-sintomas {
        padding: 0px 25px 0px 25px;
    }

    .columna-sintomas h2 {
        font-size: 28px;
        text-align: center;
        margin-bottom: 40px;
    }

    .icono img {
        width: 60px;
        height: 60px;
    }

    .icono {
        text-align: center
    }

    .contenedor-sintomas.derecha {
        width: 100%;
    }

    .contenedor-sintomas.derecha {
        padding: 0px;

    }

    .contenedor-sintomas.izquierda {
        width: 100%;
        padding: 0px;
        height: 460px;
        gap: 8px;

    }

    .contenedor-sintomas.izquierda p {
        font-size: 16px;
        margin: 0px 23px 23px 23px;

    }

    .contenedor-sintomas.izquierda h2 {
        margin: 23px 23px 23px 23px;
        color: #1E1E1E;

        font-size: 28px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;


    }

    .diagnostico {

        border-radius: 30px;
        background: #7666EA;
        display: flex;
        flex-direction: column;
        padding: 5% 5%;
        margin-top: 16px;
        height: 363px;
        /* align-items: center; */
        justify-content: center;

    }


    .diagnostico h2 {
        font-size: 28px;
    }

    .diagnostico p {
        font-size: 24px;
    }

    .container-yelLow p {
        font-size: 16px;

    }

    .texto-bold {
        font-size: 24px;
    }

    .container-main.mundo-meningitis {
        flex-direction: column;
    }

    .color.box-celeste h2 {
        font-size: 28px;
        margin: 0px;
        padding: 0px;
    }

    .color.box-celeste p {
        font-size: 16px;

    }

    .color.box-celeste {
        height: 293px;
        padding: 8%;
        gap: 8px;
    }

    .box-imagen {
        height: 293px;
    }

    .footer-top {
        padding: 80px 16px;
    }

    .footer-redes p {
        border-radius: 29px;
        background: #89D7F0;
        width: 100%;
        height: 50px;
        align-content: center;
        font-size: 16px;
    }

    .footer-texto h2 {
        font-size: 21px;
    }

    .footer-texto p {
        font-size: 16px;
    }

    .contenedor-footer {
        flex-direction: column;
        align-items: start;
    }

    .banner-content.medium h1 {
        font-size: 30px;


    }



    .buttons {
        display: flex;
        /* gap: 10px; */
        justify-content: space-evenly;
        gap: 44px;
        border: 1px solid white;
        padding: 10px 10px;
        border-radius: 31px;
    }

    /* .banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
    } */

    .buttons-carousel {
        width: 100%;
        overflow-x: auto;
    }

    .buttons {
        display: flex;
        justify-content: center;
        gap: 44px;
        border: 1px solid white;
        padding: 10px 10px;
        border-radius: 31px;
        flex-wrap: nowrap;
        width: max-content;
    }

    .buttons {


        font-size: 1em;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: transparent;
        color: white;

    }

    .buttons button {
        border: 1px solid;
        border-radius: 21px;
    }

    .buttons button:hover {
        background-color: white;
        border-radius: 21px;
        color: #7666EA;
    }

    /*
    .banner-content {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        text-align: center;
        padding: 20px;

    } */

    section.banner {
        margin-top: 70px;
    }

    .banner-content {
        width: 100%;
    }

    .buttons {
        max-width: 100%;
        gap: 8px;
    }

    .banner-content.medium {
        justify-content: left;
        align-items: start;
    }

    .banner-content.medium {
        text-align: left;
    }

    .banner-content.botones {
        justify-content: center;
        align-items: start;
    }

    .vacunacion-container-hijo.top {
        flex-direction: column;
        align-items: start;
    }

    .vacunacion-container-col.izquierda {
        width: 90%;
    }

    .vacunacion-container-col.derecha {
        width: 90%;
    }

    .que-es {}

    .texto {
        width: auto;
        height: auto;
        padding: 0px;
        align-items: center;
        padding: 80px 32px;
    }

    img#responsive-img {
        display: block;
    }

    .texto-prevencion {
        width: auto;
        padding: 100px 32px;
    }

    .texto-prevencion h2 {
        width: 100%;
        font-size: 28px;
    }

    .texto-prevencion p {
        width: 100%;
        font-size: 16px;
    }

    .custom-button.prevencion-buttom {
        width: 100%;
        font-size: 16px;
        padding: 0px;
        margin: 0px;
    }

    .vacunacion-container-col.derecha {
        padding-left: 0px;
    }

    .container-hongos {
        flex-direction: column;
    }

    .container-hongos.dos {
        flex-direction: column-reverse;
    }

    .container-hongos.dos {
        margin-top: -5px;
    }

    .texto-hongos {
        flex: none;
        height: auto;
    }

    /* .meningitis {
        background-image: url(/imagenes/meningitis-mobile.png);
        background-size: cover;
        background-position: center;
    } */

    .sintomas-meningistis h2 {
        font-size: 28px;

    }

    .sintomas-meningistis p {
        font-size: 16px;
    }

    .sintomas-meningistis p {
        margin: 16px 0px;
    }

    /* .banner-content.meningitis-header h1 {
        font-size: 28px;
    } */

    /* .banner-content.meningitis-header p {
        font-size: 16px;
    } */

    .texto h2 {
        font-size: 28px;
    }

    .texto p {
        font-size: 16px;
        padding: 0px 20px 0px 20px;
    }

    .columna-1-sintomas ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .transmision-hijo p {
        width: 100%;
        font-size: 16px;
    }

    .transmision-hijo h2 {
        font-size: 28px;
    }

    .texto-contenedor {
        width: 300px;
    }

    .grupo-riesgo h2 {
        font-size: 28px;
    }

    .columna-sintomas.main {
        grid-template-columns: repeat(4, 1fr);

    }

    .icono-centrado {
        grid-column: 1 / 4;
    }

    .columna-sintomas.footer.secuelas h3 {
        font-size: 16px;
    }

    .transmision-hijo.derecha {
        padding: 46px 10px 127px 10px;
    }

    .vacunacion-container-col.main-izquierda {
        width: 90%;
    }

    .vacunacion-container-col.main-derecha {
        width: 90%;
        margin: 0px;
    }

    .imagen.consulta {

        background-position: center;

    }

    .texto.turquesa h2 {

        font-size: 50px;


        text-align: center;
    }

    .vacunacion-container-hijo.main {
        flex-direction: column;
    }

    .vacunacion-container-col.main-derecha {
        height: 200px;
    }

    .vacunacion-container-col.main-izquierda {
        height: 200px;
    }

    .banner-content.large h1 {
        font-size: 32px;
        margin: 0px;
    }

    .banner-content.xl.botones h1 {
        font-size: 32px;
    }

    .vacunas-texto h2 {
        font-size: 32px;

    }

    .titulo-subcontenedor h2 {
        font-size: 24px;
    }

    .bloque.c1.activo {
        display: grid;
        width: 100%;
        grid-template-columns: 100%;
        gap: 20px;
    }

    .bloque.c2.activo {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        justify-content: space-around;
    }

    .item.row-3 {
        grid-column: span 4;
    }

    .item.row-2 {
        grid-column: span 4;
    }

    .item.aqua.texto {
        grid-column: 4 / 4;
        font-size: 20px;
    }

    .item.aqua.texto h2 {
        font-size: 24px;
    }

    .bloque.c3.activo {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        justify-content: space-around;
        gap: 20px;
    }

    .bloque.c4.activo {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        justify-content: space-around;
        gap: 20px;
    }

    .bloque.c5.activo {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, 2fr);
        justify-content: space-around;
        gap: 20px;
    }

    .bloque.c6.activo {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px 10px;
        width: 100%;
        justify-content: space-between;
    }

    .bloque.activo p {
        font-size: 12px;
    }

    .bloque.c7.activo {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px 00px;
    }

    .texto-hongos p {
        font-size: 16px;
    }

    .contenedor-hongos-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .hongos-grid.row-3 {
        grid-column: span 3;
    }

    .banner-content.medium.virus h1 {
        font-size: 32px;
    }

    .submenu {
        padding: 0px 0px 0px 0px;
        width: 100%;
        background-color: white;
        border-top: 1px solid #ccc;

    }

    img#menu-image {
        display: none;
    }

    .imagen-hongos.virus img {
        object-fit: cover;
    }
}

/* SLIDER TAMBS VACUNAS */
@media (max-width: 1000px) {
    button.accordion-button.collapsed.virus-acordeon-fondo {
        padding: 20% 5% !important;
    }

    .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
        padding: 20% 5%
    }

    .vacunas-tabs {
        display: flex;
        flex-direction: column;
        gap: 30px;

    }

    .tab-ul {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        flex-direction: column;

    }

    .vacunas-tabs.tab-ul {
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 80%;
    }

    .vacunas-tabs .li {
        flex: 0 0 auto;
        min-width: 50px;
        /* Ajusta según sea necesario, aumentando el valor para más ancho */
        margin-right: 10px;
    }

    /* Ocultar scrollbars (opcional) */
    .vacunas-tabs::-webkit-scrollbar {
        display: none;
    }

    .legend-p {
        font-size: 20px;
        margin-top: 10px;
    }
}



@media only screen and (max-width:800px) {



    .volver-avanzar {
        padding: 10px;
    }

    a.icon-arrow-custom {

        font-size: 16px;
    }

    .menu-content {
        padding: 20px;
    }

    section.banner.hongos-banner-contenedor h1 {
        margin: 0px;
    }


    header#mid {
        height: 45vh;
    }


    /* <!-- ------------------------------ menu ------------------------------> */
    .menu-content {
        height: 77vh;
    }

    .contenedor-menu.hongos-menu {
        margin: 44px 0px 0px 0px;
    }

    .contenedor-menu {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin: 0px 32px 0px 32px;
    }



    .banner-content.botones {
        justify-content: center;
        align-items: start;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .buttons button {
        width: 137px;
        border: none;

    }

    .buttons a {
        width: 60%;
    }

    .buttons {
        scrollbar-width: none;
        overflow: auto;
        justify-content: start;
    }

    .buttons button:active {
        background-color: white;
    }

    .menu.open {
        display: block;
        /* Mostrar el menú cuando está abierto */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 1000;
        padding-top: 50px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .menu-activo {
        flex-direction: column;
        /* Cambiar a columna en móviles */
        gap: 0;
        /* Eliminar el espacio entre elementos */
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: left;
    }

    .menu-activo li {
        padding: 15px 0px;
        border-bottom: 1px solid #ccc;
        gap: 20px;
    }

    .menu-activo li a {
        color: #939393;
        font-family: Inter;
        font-size: 21px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .menu-activo li.color-b a {
        color: #4A4A4A;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }


    .menu-activo li a:hover {
        background-color: #f0f0f0;
    }

    .menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        cursor: pointer;
    }

    .progress-bar {
        display: none;
    }

    .progress-bar-fijo {
        display: none;
    }

    .progress-bar {
        display: none;
    }

    .menu-activo>li:hover .submenu {
        width: 100%;
    }

    /* .menu-activo li:active {
        padding: 10px 20px;
        border-bottom: 1px solid #7666EA;
        gap: 20px;
    } */

    /* <!-- ------------------------------ FIN menu ------------------------------> */

    .home {
        background-image: url(/imagenes/Banner-principal-mobile.png);
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        height: 100vh;
        padding-top: 30px;
    }

    #index__banner {
        margin-top: 3.3rem;
    }

    /* <!-- ------------------------------ FIN RESPONSIVE QUE ES LA MENINGITIS CSS ------------------------------> */

    /* <!-- ------------------------------  RESPONSIVE meningococo  ------------------------------> */

    .grupo-riesgo-hijo {
        flex-direction: column;
    }

    .contenedor-por-tres {
        width: 90%;
    }

    .transmision {
        flex-direction: column;

    }

    .transmision-hijo {
        width: auto;
    }

    .transmision-hijo.derecha {
        width: auto;
    }

    .logo {
        width: 80%;
        margin-top: 10px;
    }

    /* .buttons {
        flex-direction: column;
        gap: 30px;
    } */
    .columna-sintomas.main {
        flex-direction: row;
        display: grid;
        flex-wrap: wrap;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: 20px 10px;
    }

    .columna-sintomas h2 {
        margin-top: 35px 23px;
    }

    .columna-sintomas.footer h3 {
        font-size: 14px;
    }

    .texto-sintomas p {
        padding: 10px;
    }

    .icono-centrado {
        grid-column: 100%;
    }

    .columna-sintomas {
        padding: normal;
        align-items: start;
    }

    .columna-sintomas h2 {
        text-align: left;
    }


    /* Meningitis bacteriana  */

    .banner-content.meningitis-header {
        text-align: left;
        padding: 0px;
        margin-top: 100px;
    }


    .columna-sintomas.main {
        flex-direction: column;
    }

    section.banner {
        margin: 50px;
    }

    header.meningitis {
        display: flex;

        align-items: center;
        padding: 44px 32px;

        height: 97vh;
    }

    .banner-content.meningitis-header h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .banner-content.meningitis-header {
        margin: 14px 0px 10px 0px
    }

    section.banner.meningitis-banner {
        margin-top: 5%;
    }

    .banner-content.meningitis-header p {
        font-size: 1rem;
    }

    p.strong {
        color: #FFF;

        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .texto {
        align-items: start;
    }

    .texto p {
        padding: 0px;
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .texto-contenedor {
        width: auto;
    }

    .texto-contenedor li {
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .texto-contenedor h3 {
        color: #FFF;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .que-es {
        flex-direction: column;
    }

    .imagen {
        width: 100%;
    }

    .imagen img {
        height: 500px;
    }

    .sintomas-meningistis {
        margin: 64px 32px;
    }

    .columna-1-sintomas li {
        font-size: 16px;
    }

    .columna-1-sintomas.top {
        margin-top: 32px;
    }

    .columna-1-sintomas ul {
        row-gap: 16px;
    }

    .columna-1-sintomas {
        padding: 32px;
        gap: 24px;
    }

    .custom-bullets li {
        margin: 0px;
    }

    .grupo-riesgo {
        background-color: #9794EB;
        color: white;
        padding: 80px 32px;
        width: auto;
    }

    .grupo-riesgo p {
        color: #FFF;
        text-align: left;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .grupo-riesgo-hijo p {
        font-size: 16px;
        text-align: center;
    }

    .contenedor-por-tres {
        width: auto;
        padding: 50px 32px;
        height: 188px;

    }

    .transmision {
        padding: 80px 32px;
        gap: 40px;
    }

    .transmision-icono img {
        width: 2.8rem;
        height: 2.8rem;
    }

    .transmision-icono {
        gap: 14px;
    }

    .meningitis-meningococo {
        padding: 40px 32px;
    }

    .columna1.Prevención-es-vacunación {
        padding: 32px 26px;
    }

    .columna1.Prevención-es-vacunación h4 {
        margin: 0px;
        padding: 0px;
        text-align: left;
        margin-bottom: 21px;
    }

    .columna1.Prevención-es-vacunación p {
        padding: 0px;
    }

    .custom-button {
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .legend {
        gap: 0px;
        gap: 24px;
    }

    .legend-container {
        margin: 0px;
        gap: 24px;
    }

    .custom-button.derecha {
        margin: 0px;
        margin-bottom: 40px;
    }

    .meningitis {
        background-image: url(/imagenes/meningitis-mobile.png);
        background-size: cover;
        background-position: center;
    }

    .meningitis-meningococo h3 {
        font-size: 1.2rem;
        margin: 0px;
        margin-bottom: 32px;
    }

    .meningitis-meningococo p {
        padding: 58px 27px;
        margin: 0px;
    }

    .no-background p {
        padding: 0px;
        margin: 24px 0px 40px 0px;
    }

    .serogrupos h4 {
        text-align: center;
        margin-bottom: 16px;
    }

    .columna1 p {
        padding: 0px;
    }

    button.custom-button {

        margin-top: 24px
    }

    .datos {
        margin: 0px;
    }

    .datos p {
        padding: 0px;
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    p.legend-p {
        padding: 0px;
        margin-top: 10px;
    }

    .container-secuelas {
        padding: 80px 32px;
    }

    .columna-sintomas.main.secuelas {
        display: grid;
        grid-template-columns: auto auto;
        gap: 24px 70px;
    }

    .columna-sintomas.footer.secuelas {
        height: auto;
        padding: 32px 24px;
        margin-top: 64px;
    }

    .columna-sintomas.footer.secuelas h3 {
        color: #FFF;
        font-family: Inter;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-align: left;
    }

    .icono.secuelas p {
        color: #2F2F2F;
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .sintomas.secuelas-main {
        padding: 0px;
        margin: 0px;
    }

    .sintomas.secuelas-main {
        gap: 0px;
    }

    .sintomas {
        display: flex;
        flex-direction: column;
    }

    .custom-button.prevencion-buttom {
        font-size: 20px;
    }

    .imagenn.prevencion-meningococo {
        width: 100%;
        height: 342px;
    }

    button.accordion-button p {
        font-size: 12px;
    }

    button.accordion-button sup {
        font-size: 10px;
    }

    .vacunacion-container {
        padding: 100px 32px;
    }

    .vacunacion-container-col.izquierda h2 {
        color: #9794EB;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 32px;
    }

    .vacunacion-container-hijo.top {
        gap: 0px;
    }

    .vacunacion-container-col.derecha {
        margin-bottom: 80px;
    }

    .vacunacion-container-col.main-izquierda {
        width: auto;

    }

    .vacunacion-container-col.main-derecha {
        width: auto;

    }

    .vacunacion-container-col.main-izquierda,
    .vacunacion-container-col.main-derecha {
        display: flex;
        flex-direction: column;
        justify-content: start;
        padding: 32px 32px;
        height: 200px;
    }

    ul.custom-bullets.footer {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .que-es.consulta {
        flex-direction: column-reverse;
    }

    .imagen.consulta {
        height: 50vh;
    }

    .texto.turquesa {
        height: 300px;
    }

    .texto.turquesa h2 {
        color: #FFF;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .custom-button a {
        color: white;
        text-decoration: none;
        font-family: inter;
        font-size: 16px;
    }

    .custom-button.derecha {
        margin: 0px;
        margin-bottom: 40px;
        font-family: 'Inter';
    }

    .banner-content.medium.parasitos h1 {
        font-size: 32px;
    }

    header.meningitis-hongos-banner {
        height: 45vh;
    }


    .texto-hongos,
    .imagen-hongos {
        flex: auto;
    }

    .grupo-riesgo.parasitos-titulo h2 {
        color: #FFF;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .container-hongos {
        flex-direction: column;
        height: 100vh;
    }

    .hongos-grid.row-3.parasitos {
        height: 248px;
    }

    .hongos-grid.row-3.parasitos p {
        font-size: 18px;
        text-align: center;
    }

    .buttons a {
        border: 1px solid white;
        border-radius: 21px;
    }

    #descargar {
        display: flex !important;
        margin: auto;
    }

    .descargar {
        width: 100%;
        margin: 0 auto;
    }

    #vacunacion__header {
        margin: 0;
    }

    /* #vacunacion__div__title {
        padding: 70px 0 0 0;
    } */

    section.contenedor-menu.logo-menu {
        margin: 5% 0px 5% 0px;
    }

    section.contenedor-menu.logo-menu {
        width: 100%;
    }

    .banner-content.medium.parasitos h1 {
        margin: 54px 32px 0px 0px;
    }

    .banner-content.medium.virus h1 {
        margin: 54px 142px 0px 0px;
    }

    /* header#tipos-de-meningitis{
        height: 45vh;
    } */

    section.contenedor-menu.meningitis-banner-logo {
        width: auto;
        margin: 0px;
        margin-top: 44px;
        align-items: center;
    }

    .menu-activo {
        gap: 15px;
    }
}


@media (min-width:1220px) and (max-width:1229px) and (min-height:500px) and (max-height:592px) {
    #sintomas__banner__texto {
        height: 37vh;
    }

}

@media (max-width:1318px) {
    .container-ruleta {
        width: 40vw;
        height: 40vw;
        max-width: 400px;
        max-height: 400px;

    }

    .contenedor-ruleta {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        width: auto;
        /* justify-content: center; */
        padding: 40px 40px;
    }

    .contenedor-alerta {
        display: flex;
        justify-content: center;
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 10vh;
        padding: 50px 32px;

    }

    .custom-button.amarillo {
        height: auto;
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .custom-button.amarillo svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        margin-bottom: 0%;
        margin-right: 0%;
    }

    .custom-button.amarillo p {
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 100%;
    }

    .container-ruleta p {
        font-size: 0.8rem;
    }

    #spin {

        width: 15vw;
        height: 15vw;

        font-size: 1.1rem;

    }

    .contenedor-ruleta-derecha {
        width: 49%;

    }

    .contenedor-ruleta-izquierda {
        height: 100%;
        max-height: 500px;
        width: 49%;
    }

    .one p {
        transform: rotate(26deg) translate(-40%, -40%);
    }

    .two p {
        transform: rotate(-47deg) translate(23%, -258%);
    }

    .three p {
        transform: rotate(243deg) translate(50%, -20%);
    }

    .four p {
        transform: rotate(170deg) translate(20%, 130%);
    }

    .five p {
        transform: rotate(99deg) translate(-37%, 100%);
    }


}





@media (max-width:1283px) {
    .container-ruleta {
        width: 40vw;
        height: 40vw;
        max-width: 400px;
        max-height: 400px;

        /* transition: 5s; */
    }

    .contenedor-ruleta {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        width: auto;
        /* justify-content: center; */
        padding: 40px 40px;
    }

    .contenedor-alerta {
        display: flex;
        justify-content: center;
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 10vh;
        padding: 50px 32px;

    }

    .custom-button.amarillo {
        height: auto;
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .custom-button.amarillo svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        margin-bottom: 0%;
        margin-right: 0%;
    }

    .custom-button.amarillo p {
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 100%;
    }

    .container-ruleta p {
        font-size: 0.8rem;
    }

    #spin {

        width: 15vw;
        height: 15vw;


        font-size: 1.1rem;

    }

    .contenedor-ruleta-derecha {
        width: 49%;

    }

    .contenedor-ruleta-izquierda {
        height: 100%;
        max-height: 500px;
        width: 49%;
    }

    .one p {
        transform: rotate(26deg) translate(-40%, -40%);
    }

    .two p {
        transform: rotate(-47deg) translate(23%, -258%);
    }

    .three p {
        transform: rotate(243deg) translate(50%, -20%);
    }

    .four p {
        transform: rotate(170deg) translate(20%, 130%);
    }

    .five p {
        transform: rotate(99deg) translate(-37%, 100%);
    }


}

@media (max-width:1100px) {

    .contenedor-ruleta {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        width: 100%;
        justify-content: center;
        padding: 40px 0;
    }

    .contenedor-alerta {
        display: flex;
        justify-content: center;
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 10vh;
        padding: 50px 32px;

    }

    .custom-button.amarillo {
        height: auto;
        width: 300px;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .custom-button.amarillo svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        margin-bottom: 10%;
        margin-right: 3%;
    }

    .custom-button.amarillo p {
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 286px;
    }

    #spin {
        font-size: 12px;
    }

    .contenedor-ruleta-derecha {
        width: 100%;

    }

    .contenedor-ruleta-izquierda {
        height: 100%;
        max-height: 500px;
        width: 70%;
    }

    .one p {
        transform: rotate(26deg) translate(-40%, -40%);
    }

    .two p {
        transform: rotate(-47deg) translate(27%, -97%);
    }

    .three p {
        transform: rotate(243deg) translate(50%, -20%);
    }

    .four p {
        transform: rotate(170deg) translate(20%, 100%);
    }

    .five p {
        transform: rotate(99deg) translate(-37%, 100%);
    }


}

@media (max-width: 500px) {


    .contenedor-ruleta {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        width: 100%;
        justify-content: center;
        padding: 40px 0;
    }

    .contenedor-alerta {
        display: flex;
        justify-content: center;
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 10vh;
        padding: 50px 32px;

    }

    .custom-button.amarillo {
        height: auto;
        width: 300px;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .custom-button.amarillo svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        margin-bottom: 10%;
        margin-right: 3%;
    }

    .custom-button.amarillo p {
        color: #000;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 286px;
    }


    .contenedor-ruleta-derecha {
        width: 100%;

    }

    .contenedor-ruleta-izquierda {
        height: 100%;
        max-height: 500px;
        width: 70%;
    }

    .one p {
        transform: rotate(26deg) translate(-40%, -40%);
    }

    .two p {
        transform: rotate(-47deg) translate(27%, -97%);
    }

    .three p {
        transform: rotate(243deg) translate(50%, -20%);
    }

    .four p {
        transform: rotate(170deg) translate(20%, 100%);
    }

    .five p {
        transform: rotate(99deg) translate(-37%, 100%);
    }




    #spin {
        height: 120px;
        width: 120px;
        font-size: 0.7rem;
    }

    .container-ruleta {
        /* width: 300px;
        height: 300px; */
    }

    .container-ruleta div p {
        font-size: 14px;
    }

    .one p {
        transform: rotate(26deg) translate(-30%, -40%);
    }

    .two p {
        transform: rotate(-45deg) translate(12%, -232%);
    }

    .three p {
        transform: rotate(243deg) translate(33%, -20%);
    }

    .br-p {
        display: block;
    }

    .four p {
        transform: rotate(170deg) translate(15%, 124%);
    }

    .five p {
        transform: rotate(99deg) translate(-25%, 75%);
    }

    .container-ruleta {
        width: 70vw;
        height: 70vw;
        max-width: 400px;
        max-height: 400px;
        /* transition: 5s; */
    }

    .container-ruleta div p {
        font-size: 0.6rem;
    }
}





@media only screen and (max-width : 1274px) {
    .image-container img {
        width: 300px;
        width: 300px;
        object-fit: cover;
    }

    .image-container {
        width: 300px;
    }

    .meningitis-meningococo p {
        font-size: 18px;


    }

    .legend-p {
        font-size: 20px;
        margin-top: 10px;
    }
}

/* vacunas ubicacion */
.container--map-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #9491EB;
}

.container--map-main iframe {
    width: 100%;
    height: 500px;
}

.container--map--search__content {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 7%;
}

.container-input__search-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
}

.container-input__search-map h2 {
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.container-input__search-map input {
    border: none;
    border-radius: 30px;
    width: 100%;
    height: 40px;
    background: #fff url('./svg/material-symbols_search.svg')no-repeat 10px center;
    padding-left: 43px;
    padding-top: 4px;
    color: #7666EA;
}

.container-input__search-map input::placeholder {
    color: #7666EA;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;

}

.container--cards__results {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card--result {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28)0%, rgba(255, 255, 255, 0.07)100%);
    backdrop-filter: blur(10px);
    padding: 24px 33px;
    cursor: pointer;
    color: #7666EA;
}

.card--result h4 {
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.card--result p {
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.card--result .card__num__ubicacion {
    display: flex;
    flex-direction: column;
}

.ubi__target,
.phone__target {
    display: flex;
    gap: 4px;
    align-items: center;
}


@media (min-width: 768px) {}

@media (min-width: 1024px) {
    .container--map-main {
        flex-direction: row;
    }

    .container--map-main iframe {
        width: 500px;
        height: 100%;
    }

    .container--map--map__content {
        order: 1;
    }

    .container-input__search-map {
        order: -3;
    }

    .container-input__search-map h2 {
        color: #FFF;
        font-family: Inter;
        font-size: 40px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .card--result h4 {
        color: #FFF;
        font-family: Inter;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .card--result p {
        color: #FFF;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    .ubi__target p,
    .phone__target p {
        color: #FFF;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }
}

@media (min-width: 1200px) {
    .container--map-main iframe {
        width: 600px;
        height: 100%;
    }

    .container--map--search__content {
        padding: 5%;
    }
}

@media only screen and (max-width: 1440px) {


    .container--map--search__content {
        padding: 2%;
    }

    #meningitis-virus__banner {
        min-height: 60vh;
    }

    .image-container img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 20px;
    }

    .menu-activo {
        gap: 15px;
    }
}

@media (min-width: 1440px) {
    .container--map-main iframe {
        width: 50vw;
        max-width: 900px;
        height: 100%;
    }
}


@media (max-width: 768px) {
    .container--map-main iframe {
        width: 100%;
    }

}

@media (min-width: 300px) and (max-width: 1400px) {
    #vacunacion__header {
        height: auto;
    }

}

.container--map-main {
    display: none;
}

.superindicie-17 {
    font-family: 'Inter', system-ui;
    font-size: 32px;
}



.acordeon.header {
    display: flex;
    flex-direction: column;
    align-items: start;
}







/* @media (min-width: 768px) {
    .container--map-main {
        display: flex;
        flex-direction: column;
        justify-content: center
        align-items: center;
        padding: 0% 5%;
        background: #F2F8F8;
    }



@media (min-width: 1270px) and (max-width: 1280px) and (min-height: 750px) and (max-height: 800px) {
    .container-ruleta .one {
        transform: rotate(333deg);

    }

    .container-ruleta .two {
        transform: rotate(44deg);
    }

    .container-ruleta .three {
        transform: rotate(114.9deg);
    }

    .container-ruleta .four {
        transform: rotate(187.9deg);
    }
}


*/
.modal-dialog.modal-dialog-centered {
    max-width: 770px;
    border-radius: 20px;
}


.modal-content {
    background: white;
    padding: 25px;
    border-radius: 20px;
    border: 0px;
}

.modal-header {
    padding: 0px;
    border: none;
}

.modal-header .btn-close {
    padding: 0px;
}

.custom-popup.full {
    width: 100%;
}

.custom-popup {
    color: black;
    font-size: 1.4rem;
    background-color: #F0F0F0;
    border-radius: 8px;
    padding: 10px;
    width: 45%;
    border: none;

}


.custom-popup:hover {
    background-color: #dddddd;
    color: #1E1E1E;
}

.modal-body {
    justify-content: center;
    text-align: center;
    gap: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
}

.texto-perso {
    padding: 0px;
    margin-bottom: 0px;
    font-size: 1.4rem;
}

.modal-body img {
    width: 100px;
}

.modal-footer {
    justify-content: center;
    border: 0px;

}

button.btn-close {
    background-color: #D9D9D9;
    border-radius: 30px;

}

.sintomas-texto {
    margin-top: 1rem;

}

.contenedor-alerta {
    width: auto;
    height: auto;
}


@media only screen and (max-width:800px) {
    .imagen.bacteriana-par h2 {
        font-size: 24px;
    }


    .texto-perso {
        font-size: 16px;

    }

    .custom-popup {
        width: 100%;
        font-size: 16px;
    }
}

/* videos */

.container-videos-pr {
    display: flex;
    flex-direction: column;
    background-color: #9794EB;
    padding: 1rem 0;
}

.videos-title {
    margin-bottom: 18px;
}

.videos-title h2 {
    margin: 0.5rem 0.7rem;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    font-family: Inter;
}

.tabs-videos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.tabs-item {
    background-color: #C0BFEC;
    padding: 1px 25px;
    width: 45%;
    margin: 0px;
    cursor: pointer;
}

.tabs-item:hover {
    background-color: #c0bfecc4;
}

.tabs-item.tabactivo {
    background-color: #7666EA;
}

.tabs-item p {
    font-size: 14px;
    text-align: center;
    margin: auto 0;
    font-weight: 400;
    font-family: inter;
    color: #fff;
}

.tabs-item.left {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.tabs-item.right {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.container-box-videos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin: 10px 0;
}

.container-video-items {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
}


.video-item {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
}

.video-item img {
    object-fit: contain;
    width: 100%;
    height: 100px;
    border-radius: 13px;
    cursor: pointer;
}

.video-principal iframe {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.div-fondo-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 10;
    border-radius: 13px;
    mix-blend-mode: multiply;
    transition: background-color 0.2s ease-out;
}

.video-item:hover .div-fondo-item {
    background-color: rgba(244, 143, 35, 0.7);
}

.video-item {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    width: 200px;
    height: auto;
}

.video-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
    cursor: pointer;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    /* Fondo oscuro semitransparente */
    opacity: 0;
    /* Oculta el overlay por defecto */
    transition: opacity 0.3s ease-in-out;
    z-index: 15;
    cursor: pointer;
}

.video-item:hover .video-overlay {
    opacity: 1;
    /* Muestra el overlay al pasar el mouse */
}

.video-title {
    font-size: 14px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.video-title {
    font-size: 14px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 4px;
    /* Espaciado entre el título y el subtítulo */
}

.video-subtitle {
    font-size: 12px;
    color: #ddd;
    /* Un color más claro para diferenciar del título */
    font-weight: normal;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    margin: 0;
}


@media (min-width: 768px) {
    .videos-title h2 {
        font-size: 2rem;
    }

    .tabs-item {
        background-color: #C0BFEC;
        padding: 8px 20px;
        width: 28%;
        max-width: 230px;
    }

    .tabs-item p {
        text-wrap: nowrap;
    }

    .container-box-videos {
        flex-direction: row;
        gap: 10px;
    }

    .container-video-items {
        flex-direction: column;
    }

    .video-item img {
        width: 150px;
        height: 80px;

    }

    .div-fondo-item {
        width: 150px;
        height: 80px;
    }

    .video-principal iframe {
        width: 462.5px;
        height: 262.5px;
    }
}

/* Pantallas grandes (desktops y pantallas grandes) */
@media (min-width: 1024px) {
    .container-videos-pr {
        padding: 3rem;
    }

    .videos-title h2 {
        font-size: 2.5rem;
    }

    .video-item img {
        width: 100%;
        height: 120px;
    }

    .div-fondo-item {
        width: 100%;
        height: 120px;
        left: 0px;
    }

    .video-principal iframe {
        width: 720px;
        height: 382px;
    }
}


/* Pantallas extra grandes (desktops de alta resolución) */
@media (min-width: 1440px) {
    .videos-title h2 {
        font-size: 68px;
    }

    .video-item img {
        width: 286px;
        height: 154px;
    }

    .div-fondo-item {
        width: 100%;
        left: 0;
        height: 100%;
    }

    .video-principal iframe {
        width: 815px;
        height: 475px;
    }
}

/* ---------- FAQ STYLES ---------- */
.faq-section {
    background-color: #f8f9fa;
    padding: 60px 20px;
    margin: 40px 0;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-title {
    text-align: center;
    color: #333;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    font-family: 'Inter', sans-serif;
}

.faq-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.faq-question {
    padding: 24px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.faq-question-text {
    flex: 1;
}


.faq-question.active sup {
    color: white;
}

.faq-question:hover {
    background-color: #f8f9fa;
    color: #9794EB;
}

.faq-question.active {
    background-color: #9794EB;
    color: white;
}

.faq-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    color: #9794EB;
}

.faq-question.active .faq-icon {
    transform: rotate(45deg);
    color: white;
}

.faq-answer {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    background: white;
}

.faq-answer.active {
    padding: 0 30px 30px 30px;
    max-height: 1000px;
}

.faq-answer-content {
    padding-top: 20px;
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

.faq-answer-content p {
    margin-bottom: 16px;
}

.faq-answer-content ul {
    margin: 16px 0;
    padding-left: 20px;
}

.faq-answer-content li {
    margin-bottom: 8px;
}

.faq-answer-content sup {
    font-size: 0.7em;
}

@media (max-width: 768px) {
    .faq-section {
        padding: 40px 15px;
    }

    .faq-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .faq-question {
        padding: 20px;
        font-size: 1rem;
    }

    .faq-answer.active {
        padding: 0 20px 20px 20px;
    }
}

.faq-question-text {
    flex: 1;
}

.faq-question sup {
    margin-left: 0;
}

/* ---------- END FAQ STYLES ---------- */

.legend-container {
    margin: 18px 0 10px 0;
}

.legend-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1em;
    font-weight: 500;
}

.legend-text {
    display: flex;
    align-items: center;
    gap: 3px;
}

.percentage {
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 2px;
}


.color-box.serogrupo-b {
    background: #7566ea;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.color-box.serogrupo-w {
    background: #89d7f0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.color-box.serogrupo-c {
    background: #ffe710;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.color-box.serogrupo-y {
    background: #5d01c6;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.color-box.serogrupo-ng {
    background: #d9d9d9;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.legend-container {
    margin: 18px 0 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.legend-row {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
}

.legend-row:first-child {
    justify-content: center;
    gap: 18px;
    margin-bottom: 8px;
}

.legend-row:last-child {
    justify-content: center;
    gap: 18px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1em;
    font-weight: 500;
    min-width: 170px;
    margin-bottom: 6px;
}

.sample-size {
    font-size: 1em;
    font-weight: 600;
}

@media (max-width: 600px) {
    .legend-row {
        flex-direction: column;
        gap: 0;
    }

    .legend-item {
        min-width: unset;
        margin-bottom: 2px;
    }

    .sample-size {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* Estilos para provincia obligatoria */
.grupo-filtro label span {
    color: #e74c3c;
    font-weight: bold;
}

.select-filtro:required:invalid {
    border-color: #e74c3c;
    background-color: #fdf2f2;
}

.select-filtro:required:valid {
    border-color: #27ae60;
}

/* Mensaje inicial mejorado */
.sin-resultados {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-gray);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin: 1rem 0;
    border: 2px dashed #dee2e6;
}

.sin-resultados h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sin-resultados h4::before {
    content: "📍";
    font-size: 1.5rem;
}

.sin-resultados p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-gray);
}

/* Animación sutil para el mensaje inicial */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sin-resultados {
    animation: fadeInUp 0.5s ease-out;
}

/* Destacar el selector de provincia cuando está vacío */
.select-filtro[required]:invalid:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
}

/* Mejorar la apariencia del mapa sin contenido */
#mapa.empty-state {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mapa.empty-state::before {
    content: "🗺️ Selecciona una provincia para ver los vacunatorios";
    color: var(--text-gray);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    padding: 2rem;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    background: white;
}

/* Estilos para diferentes tipos de marcadores */
.marker-icon[data-tipo*="Hospital"], .marker-icon[data-tipo*="hospital"] {
    background: #e74c3c !important;
}

.marker-icon[data-tipo*="Farmacia"], .marker-icon[data-tipo*="farmacia"] {
    background-color: #2ecc71 !important;
    border: 2px solid white !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.marker-icon[data-tipo*="Centro"], .marker-icon[data-tipo*="centro"], .marker-icon[data-tipo*="Vacunatorio"], .marker-icon[data-tipo*="vacunatorio"] {
    background: var(--primary-color) !important;
}

/* Leyenda actualizada para tipos */
.leyenda-item:nth-child(1)::before {
    background: #e74c3c; /* Hospitales */
}

.leyenda-item:nth-child(2)::before {
    background: var(--primary-color); /* Centros de Salud */
}

.leyenda-item:nth-child(3)::before {
    background: #2ecc71; /* Farmacias */
}

/* Estilos adicionales para el filtro de barrios */

/* Asegurar que el grid de filtros tenga el espacio correcto */
.filtros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 0;
}

/* Estilos para el grupo de filtro de barrio */
.grupo-filtro {
    display: flex;
    flex-direction: column;
}

.grupo-filtro label {
    font-weight: 600;
    margin-bottom: 2px;
    color: #333;
    font-size: 14px;
}

.select-filtro {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background-color: #fff;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

.select-filtro:hover {
    border-color: #7666EA;
}

.select-filtro:focus {
    outline: none;
    border-color: #7666EA;
    box-shadow: 0 0 0 3px rgba(118, 102, 234, 0.1);
}

.select-filtro:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Responsive design para el grid de filtros */
@media (max-width: 768px) {
    .filtros-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .filtros-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .grupo-filtro:nth-child(3) {
        grid-column: span 2;
    }
}

/* Indicador visual para filtros activos */
.select-filtro.active {
    border-color: #7666EA;
    background-color: #f8f7ff;
}

/* Estilos para el contador cuando hay filtros activos */
.filtros-activos {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #e8f4f8;
    border-radius: 6px;
    font-size: 13px;
}

.filtro-tag {
    background-color: #7666EA;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filtro-tag button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.filtro-tag button:hover {
    opacity: 0.8;
}

/* Animación para cambios de filtro */
.lista-resultados {
    transition: opacity 0.3s ease;
}

.lista-resultados.updating {
    opacity: 0.6;
}

/* Mejoras para la visualización de direcciones con barrio */
.info-primary {
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    margin-bottom: 2px;
}

.info-secondary {
    color: #666;
    font-size: 13px;
    line-height: 1.2;
}

.popup-content .info-value {
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 250px;
}

/* Estilos para el mensaje de carga durante filtrado */
.filtro-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.filtro-loading::before {
    content: "⏳ ";
    margin-right: 5px;
}

/* Indicador de número de filtros activos */
.filtros-contador {
    position: relative;
}

.filtros-contador::after {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #7666EA;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    display: none;
}

.filtros-contador.has-filters::after {
    display: block;
}

/* Mejoras en la accesibilidad */
.select-filtro:focus-visible {
    outline: 2px solid #7666EA;
    outline-offset: 2px;
}

/* Estilos para opciones agrupadas (si es necesario) */
.select-filtro optgroup {
    font-weight: bold;
    color: #333;
}

.select-filtro optgroup option {
    font-weight: normal;
    padding-left: 20px;
}
.grupo-filtro {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.grupo-filtro label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}


/* Agregar estilos para campos deshabilitados */
.select-filtro:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Agregar indicador visual para campos obligatorios */
.grupo-filtro.required label::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

/* Animación suave para cuando se habilitan los campos */
.grupo-filtro {
    transition: opacity 0.3s ease;
}

.grupo-filtro.disabled {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .header-busqueda p {
        display: none;
    }
}

@media (max-width: 1024px) {
    .header-busqueda p {
        display: none;
    }
}

.custom-marker-wrapper .marker-icon[data-tipo*="farmacia"] {
    background-color: #28a745 !important;
    border: 2px solid white !important;
    color: white !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.custom-marker-wrapper .marker-icon[data-tipo*="pharmacy"] {
    background-color: #28a745 !important;
    border: 2px solid white !important;
    color: white !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.custom-marker-wrapper .marker-icon[data-tipo*="droguería"] {
    background-color: #28a745 !important;
    border: 2px solid white !important;
    color: white !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.custom-marker-wrapper .marker-icon[data-tipo*="drogueria"] {
    background-color: #28a745 !important;
    border: 2px solid white !important;
    color: white !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}