.btn-personas { background-color: #17a2b8 !important; }
.btn-planeta { background-color: #28a745 !important; }
.btn-prosperidad { background-color: #ffc107 !important; }
.btn-paz { background-color: #6B1B9A !important ; }
.btn-asociaciones { background-color: #007bff !important; }
.btn-todos { background-color: #ffffff !important; }
.btn {
        font-size: 1.25rem;
        padding: 10px;
        border-radius: 10px; /* Agrega bordes redondeados */
        /*background-color: #4caf50;  Cambia el color de fondo */
        color: #fff; /* Cambia el color del texto a blanco */
    }
    .btn:hover {
        background-color: #00FF00 !important; /* Cambia el color de fondo al pasar el mouse */
    }
#botones {
    display: flex!important;
    justify-content: center; /* Centra los elementos en el eje horizontal */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no caben */
}

#botones .col-2 {
    margin: 0 5px 10px !important; /* Ajusta la distancia entre botones y margen inferior */
    padding: 1em;
    text-align: center !important; /* Centra el contenido de los botones */
    max-width: 150px !important; /* Define un ancho máximo para los botones */
    width: 100% !important; /* Ajusta el ancho al máximo definido */
}
h2 {
    color: #ffffff !important; /* Color blanco para el texto del título */
}
    
#personas {
    color: #FFFFFF; /* Color blanco para el texto del botón "personas" */
}

#planeta {
    color: #000000; /* Color negro para el texto del botón "planeta" */
}

#prosperidad {
    color: #ffffff; /* Color naranja para el texto del botón "prosperidad" */
}

#paz {
    color: #ffffff; /* Color púrpura para el texto del botón "paz" */
}

#asociaciones {
    color: #ffffff; /* Color azul para el texto del botón "asociaciones" */
}


#imagenes img {
    max-width: 15%;
    height: auto;
    margin-bottom: 25px; /*Ajusta el margen inferior para separar las imágenes */
    /*box-sizing: border-box;*/
    border-radius: 20px; /* Aplica bordes redondeados */
}

#imagenes a {
    /*display: inline-block; /* Asegura que los enlaces sean elementos en línea con espacio alrededor */
    width: 15% !important; /* Esto hará que cada imagen ocupe el 20% del ancho del contenedor, totalizando el 100% para las 5 imágenes */
    box-sizing: border-box; /*Asegura que el espacio para el borde y el relleno se incluyan en el 20% */
    margin-right: 10px;
}

#imagenes {max-width: 100%;/* Ajusta el ancho del contenedor según el tamaño de la ventana del navegador */
display: flex;
justify-content: center;
}

                           /*CUENTA ATRÁS*/
        /* Estilos CSS */

        /* Contenedor principal que mantiene todos los elementos */
        .countdown-container {
            display: grid;
            grid-template-columns: repeat(6, auto); /* Las columnas tendrán un ancho mínimo */
            gap: 0px; /* Espacio entre los elementos */
            text-align: center;
            /*margin: auto; /* Centra el contenedor en la página */
            max-width: 600px; /* Limita el ancho del contenedor */
            padding: 0;
    
        }

        /* Cuadros para mostrar los números */
        .countdown-box {
            width: 80px; /* Ancho de cada cuadro */
            height: 95px; /* Altura de cada cuadro */
            font-size: 3em; /* Tamaño de la fuente */
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff; /* Color del texto */
        }

        /* Cuadros de números con fondo oscuro */
        .numbers { background-color: #53006a; }

        /* Cuadros de etiquetas con fondo más oscuro */
        .labels { background-color: #333; }

        /* Etiquetas de texto (Años, Meses, Días, Minutos, Segundos) */
        .label-box {
            width: 80px; /* Ancho de cada cuadro de etiqueta */
            height: 40px; /* Altura de cada cuadro de etiqueta */
            font-size: 0.7em; /* Tamaño de la fuente */
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff; /* Color del texto */
        }

        /* Asegura que los elementos estén centrados tanto horizontal como verticalmente */
        .countdown-container div {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* Estilos para el mensaje */
.message {
    text-align: center;
    margin-top: 0; /* Espacio entre el mensaje y la cuenta atrás */
    padding: 0;
    color: #fff;
    font-size: 1rem;
    
}
        
        /* Añade estas media queries al final de tu CSS existente */

/* Estilos para pantallas más pequeñas (como dispositivos móviles) */
@media (max-width: 600px) {
    .countdown-box {
        width: 60px; /* Disminuye el ancho de los cuadros de números */
        height: 70px; /* Disminuye la altura de los cuadros de números */
        font-size: 2em; /* Disminuye el tamaño de la fuente */
    }

    .label-box {
        width: 60px; /* Disminuye el ancho de los cuadros de etiquetas */
        height: 30px; /* Disminuye la altura de los cuadros de etiquetas */
        font-size: 0.7em; /* Disminuye el tamaño de la fuente */
    }
}

/* Estilos para pantallas más pequeñas (como dispositivos móviles) en orientación horizontal */
@media (max-width: 600px) and (orientation: landscape) {
    .countdown-box {
        width: 45px; /* Ajusta el ancho de los cuadros de números */
        height: 50px; /* Ajusta la altura de los cuadros de números */
        font-size: 1.5em; /* Ajusta el tamaño de la fuente */
    }

    .label-box {
        width: 45px; /* Ajusta el ancho de los cuadros de etiquetas */
        height: 20px; /* Ajusta la altura de los cuadros de etiquetas */
        font-size: 0.6em; /* Ajusta el tamaño de la fuente */
    }
}

/* Estilos para pantallas pequeñas (móviles) */
@media screen and (max-width: 767px) {
    #imagenes {
        max-width: 100%; /* Ajusta el ancho máximo al tamaño del contenedor padre */
        display: flex; /* Utiliza flexbox para organizar los elementos */
        justify-content: center; /* Centra los elementos en el eje horizontal */
        flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no caben */
        margin: 0 auto; /* Centra el contenedor en la pantalla */
    }

    #imagenes a {
        width: calc(33.33% - 10px); /* Calcula el ancho para mostrar tres imágenes en una fila y resta 10 píxeles para el margen entre ellas */
        box-sizing: border-box; /* Asegura que el ancho incluye el borde y el relleno */
        margin: 5px; /* Añade un margen de 5 píxeles alrededor de cada imagen */
    }

    #imagenes img {
        max-width: 100%; /* Ajusta el ancho máximo de las imágenes al tamaño del contenedor padre */
        height: auto; /* Mantiene la proporción de aspecto original de las imágenes */
        border-radius: 15px; /* Aplica bordes redondeados a las imágenes */
    }
}