/* ===================================================================================================== */
/* Parámetros para toda la página en general */
/* ===================================================================================================== */
html{
    scroll-behavior: smooth;
}

body {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), /* Conveirte el fondo más claro */
        url(../img/vacunacion_fondo_1.1.png); /*Imagen de fondo*/
    background-repeat: no-repeat; /* Evita que la imagen de fondo se repita (como un mosaico) */
    background-size: cover; /* Redimensiona la imagen para que cubra completamente el elemento */
    background-attachment: fixed; /* Fija la imagen de fondo en su posición mientras se desplaza la página */
    font-family: Arial, Helvetica, sans-serif; /* Define la familia tipográfica del texto */
    font-size: 0.8rem; /* Establece el tamaño de la fuente */
    margin: 0; /* Elimina todos los márgenes externos del cuerpo de la página */
}

#titulos{
    text-align: center; /* Centra horizontalmente todo el texto dentro del elemento */
    font-size: 2rem; /* Establece el tamaño de la fuente a 2rem */
    background-color: rgba(255, 255, 255, 0.8); /* Aplica un color de fondo al elemento */
    padding: 20px 0; /* Añade espacio interno alrededor del contenido */
    color: #2a8c4a; /* Define el color del texto */
}

h3{
    margin: 0; /* Elimina todos los márgenes externos del cuerpo de la página */
}

p{
    text-align: center; /* Centra horizontalmente todo el texto dentro del elemento */
    font-size: 1.5rem; /* Establece el tamaño de la fuente a 1.5rem */
    margin: 0; /* Elimina todos los márgenes externos del cuerpo de la página */
}

/* ===================================================================================================== */
/* contenedor principal */
/* ===================================================================================================== */
#wrapper{
    width: 100%; /* Establece el ancho del contenedor al 100% del elemento padre */
    margin: 0 auto; /* margen superior e inferior de 0 píxeles, márgenes izquierdo y derecho automáticos */
}

/* ===================================================================================================== */
/* Header */
/* ===================================================================================================== */
/* Ícono */
#icon{
    margin: 10px;
    width: 40px;
    height: auto;
}

/* Encabezado y pie de página */
#header, footer{
    display: flex; /* Activa el modo flexibleConvierte el elemento en un contenedor flexible */
    align-items: center;
    padding: 15px;
    background-color: #9bfab0;
    color:#2a8c4a;
    font-size: 30px;
}

/* ===================================================================================================== */
/* nav */
/* ===================================================================================================== */
#nav{
    display: flex;
    justify-content: space-evenly; /* Distribuye los elementos hijos horizontalmente con espacio igual alrededor de cada uno */
    padding: 15px; /* Añade 15 píxeles de espacio interno alrededor de los enlaces */
    background-color: rgba(255, 255, 255, 0.8);
    position: sticky; /* No permite que se oculte el menú */
    top: 0; /* Define el punto exacto donde el menú se vuelve "sticky" */
    z-index: 1000;
}

#nav a{
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    color: #2a8c4a;
    font-size: 1.4rem;
    transition: color 0.3s; /* Crea una animación suave cuando el color cambia */
}

#nav a:hover{ /* Es una pseudo-clase que se activa cuando el usuario pasa el cursor (mouse) sobre el elemento */
    color: #502ee7;
}

/* ===================================================================================================== */
/* Home - Banner */
/* ===================================================================================================== */
#banner{
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================================================================================== */
/* Galería */
/* ===================================================================================================== */
.card{
    border: none; /* Elimina cualquier borde predeterminado */
    border-radius: 20px; /* Redondea las esquinas de la tarjeta con un radio de 20 píxeles */
    background-color: rgb(255, 255, 255);
    width: 400px;
    height: 460px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.555); /* Añade una sombra detrás de la tarjeta */
    display: flex;
    flex-direction: column; /* Cambia la dirección del flujo flex de horizontal a vertical */
    justify-content: center;
    align-items: center;
}

.image-ruleta{
    display: flex;
    margin: 8px auto;
    width: 350px;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
}

/* ===================================================================================================== */
/* Carrusel automático - Ruleta de tarjetas */
/* ===================================================================================================== */
.carrusel-container {
    width: 100%;
    overflow: hidden; /* OCULTA cualquier contenido que se salga de los límites del contenedor */
    padding: 30px 0;
    background-color: rgba(255, 255, 255, 0.5);
}

.carrusel {
    display: flex;
    gap: 40px;
    animation: rotacion 65s linear infinite; /* Aplica una animación llamada rotacion al carrusel */
    width: fit-content;
}

@keyframes rotacion {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2100px); }
}

/* Ajuste responsive para el carrusel */
@media (max-width: 768px) {
    @keyframes rotacion {
        0% { transform: translateX(0); }
        100% { transform: translateX(-1680px); }
    }
}