#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.day {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.reserved {
    background-color: #dc3545;
    color: white;
    cursor: not-allowed;
    pointer-events: none;
}

.restringed {
    cursor: not-allowed;
    pointer-events: none;
}

.available {
    background-color: #f2f2f2;
    color: black;
}

.selected {
    background-color: green;
    color: white;
}

.range {
    background-color: green;
    color: white;
}

.day:hover:not(.reserved):not(.selected):not(.range) {
    background-color: rgba(0, 0, 0, 0.1);
}

#calendarNav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#calendarNav span {
    margin: 0 10px;
}

#year {
    margin-right: auto;
}

.past {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
    pointer-events: none;
}


footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
}

.carousel-container {
    width: 80%; /* Cambia según tu diseño */
    max-width: 1000px; /* Ancho máximo */
    margin: 0 auto 0; /* Margen superior de 20px y centrado horizontal */
    border-radius: 0.375rem; /* Bordes redondeados */
    overflow: hidden; /* Asegura que las imágenes respeten el borde redondeado */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* (Opcional) Añade sombra al carrusel */
    padding: 1.5rem;
}

.carousel-inner img {
    height: auto; /* Mantener proporciones */
    max-height: 900px; /* Limitar altura */
    object-fit: cover; /* Ajustar imagen sin deformarla */
}

.custom-navbar {
    background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente */
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
}


/* Estilo general de las tarjetas */
.pricing-card {
    border-radius: 10px; /* Bordes redondeados */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Animación al pasar el mouse */
.pricing-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Precio principal */
.card-price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.slider {
    width: 99vw;
    height: auto;
    margin: auto;
    overflow: hidden;
}

.slider .slide-track {
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(300px * 14);
}

.slider .slide {
    width: 300px;
    margin: 5px;
}

.slider .image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider .image-container img {
    width: 100%;
}

.slider .description {
    width: 100%;
    /*background-color: rgba(255, 255, 255, 1);*/
    /*color: #212529;*/
    text-align: center;
    padding: 5px 0;
    font-size: 0.9rem;
    border-radius: 0 0 5px 5px;
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-300px * 7));
        transform: translateX(calc(-300px * 7));
    }
}

/* Estilo inicial para las letras */
.rainbow-text span {
    display: inline-block;
    font-weight: bold;
    color: red; /* Color inicial */
    animation: rainbow-text 2s linear infinite;
    animation-delay: calc(var(--index) * 0.2s);
}

/* Animación para cambiar colores */
@keyframes rainbow-text {
    0% {
        color: red;
    }
    14% {
        color: orange;
    }
    28% {
        color: yellow;
    }
    42% {
        color: green;
    }
    57% {
        color: blue;
    }
    71% {
        color: indigo;
    }
    85% {
        color: violet;
    }
    100% {
        color: red;
    }
}

/* Estilo por defecto para los items del navbar */
.navbar-nav .nav-link {
    transition: all 0.3s ease; /* Suaviza la transición */
    text-shadow: none;
}

/* Efecto de blur al pasar el ratón */
.navbar-nav .nav-link:hover {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(0, 0, 0, 0.4);
    transform: scale(105%);
}

/* Estilo por defecto para los items del navbar */
.navbar-brand {
    transition: all 0.3s ease; /* Suaviza la transición */
    text-shadow: none;
}

/* Efecto de blur al pasar el ratón */
.navbar-brand:hover {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(0, 0, 0, 0.4);
    transform: scale(105%);
}

@keyframes rainbow {
    0% {
        border-color: red;
    }
    14% {
        border-color: orange;
    }
    28% {
        border-color: yellow;
    }
    42% {
        border-color: green;
    }
    57% {
        border-color: blue;
    }
    71% {
        border-color: indigo;
    }
    85% {
        border-color: violet;
    }
    100% {
        border-color: red;
    }
}

.rainbow-border {
    border: 3px solid; /* Ajusta el grosor del borde aquí */
    animation: rainbow 2s linear infinite; /* Cambia la duración según lo desees */
}

@keyframes rainbow-carousel {
    0% {
        background-color: red;
    }
    14% {
        background-color: orange;
    }
    28% {
        background-color: yellow;
    }
    42% {
        background-color: green;
    }
    57% {
        background-color: blue;
    }
    71% {
        background-color: indigo;
    }
    85% {
        background-color: violet;
    }
    100% {
        background-color: red;
    }
}

.rainbow-border-carousel {
    animation: rainbow-carousel 10s linear infinite; /* Cambia la duración según lo desees */
}

.bg-naranja {
    background-color: orange;
}

.bg-indigo {
    background-color: indigo;
}

.bg-violeta {
    background-color: violet;
}

.whatsapp-btn {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde la parte derecha */
    z-index: 9999; /* Asegura que el botón esté por encima de otros elementos */
    background-color: #25D366; /* Color verde de WhatsApp */
    color: white; /* Color del ícono */
    padding: 15px;
    font-size: 30px; /* Tamaño del ícono */
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.whatsapp-btn i {
    margin: 0; /* Eliminar margen alrededor del ícono */
}

@media (max-width: 600px) {
    .whatsapp-btn {
        bottom: 15px; /* Ajusta la distancia para pantallas más pequeñas */
        right: 15px;
        font-size: 25px; /* Reduce el tamaño del ícono en pantallas más pequeñas */
    }
}