:root {
--primary-color: #ff9a3c;
--secondary-color: #ffd6a5;
--text-color: #333;
}

html, body {
width: 100%;
overflow-x: hidden;
font-family: 'Arial', sans-serif;
color: var(--text-color);
}

.navbar {
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.card-title {
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-color);
min-height: 3rem;
}
.counter-carousel-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.counter-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: black;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.3);
}

.counter-carousel-btn:hover {
color: white;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
background: linear-gradient(45deg, #ff9a3c;, var(--primary-color));
}
.counter-carousel-btn-prev {
left: -25px;
}

.counter-carousel-btn-next {
right: -25px;
}
.counter-carousel-track {
display: flex;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}

.counter-carousel-container{
display: none;
}
.btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.counter-carousel-indicators {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 40px;
}
.events-carousel-btn:focus,
.events-control-btn:focus,
.events-indicator:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}

.events-carousel-container {
position: relative;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}


.active{
color: var(--primary-color) !important;
}

.navbar-brand img {
height: 50px;
}

.card-text {
flex-grow: 1;
margin-bottom: 1.5rem;
color: #666;
line-height: 1.6;
}

.control-btn {
background: var(--primary-color);
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
}


.card-img-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 154, 60, 0.1), rgba(255, 154, 60, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.events-carousel-slide .card:hover .card-img-container::before {
opacity: 1;
}
.card-img-container {
position: relative;
overflow: hidden;
height: 200px;
}

.events-carousel-slide .card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.events-carousel-slide .card:hover .card-img-top {
transform: scale(1.05);
}
.events-carousel-slide .card-body {
padding: 2rem;
display: flex;
flex-direction: column;
height: calc(100% - 200px);
}

.events-carousel-slide .service-icon {
font-size: 2.5em;
color: var(--primary-color);
margin-bottom: 15px;
transition: transform 0.3s ease;
}
.events-carousel-slide .card:hover .service-icon {
transform: scale(1.1);
}
.events-carousel-slide .card-title {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--text-color);
font-weight: 600;
min-height: auto;
}

.events-carousel-slide .card-text {
flex-grow: 1;
margin-bottom: 1.5rem;
color: #666;
line-height: 1.6;
font-size: 0.95rem;
}

.counter-carousel-slide {
min-width: 100%;
padding: 60px 40px;
box-sizing: border-box;
}

.events-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
z-index: 10;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.counter-carousel-track.loading {
pointer-events: none;
}
.counter-carousel-track.loading .counter-carousel-item {
opacity: 0.7;
}
.events-carousel-btn-prev {
left: 5px;
}

.events-carousel-btn-next {
right: 5px;
}

.events-carousel-slide .btn-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
align-self: center;
padding: 8px 16px;
border-radius: 25px;
border: 2px solid transparent;
}

.events-carousel-slide .btn-link:hover {
background-color: var(--primary-color);
color: white !important;
text-decoration: none;
border-color: var(--primary-color);
transform: translateY(-2px);
}

.carousel-slide {
min-width: calc(100% / 3);
padding: 0 15px;
box-sizing: border-box;
}

.card-body {
padding: 2rem;
display: flex;
flex-direction: column;
height: 100%;
}

.carousel-wrapper {
overflow: hidden;
border-radius: 10px;
}

.carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}

.carousel-track.loading {
pointer-events: none;
}

.events-carousel-controls {
display: none !important;
}

.nav-link {
color: black;
font-weight: 600;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: #e68a35;
transform: translateY(-2px);
}
.margin-top{
margin-top: 10%;
}

.hero {
background: linear-gradient(rgba(1, 0, 0, 0.5), rgba(0, 0, 0, 0.25)), url('../../public/assests/img/FoodTrucktest1.webp') no-repeat center center;
background-position: 85% center;
background-size: cover;
color: white;
min-height: 100vh;
display: flex;
align-items: center;
margin-top: 60px; /* Ajuste inicial para evitar el solapamiento */

}

.text-content h1 {
font-family: 'Times New Roman', serif;
font-style: italic;
font-size: 4rem;

}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.empower {
font-family: 'Times New Roman', serif;
font-style: italic;
font-size: 2rem;

}

.front-p-text {
color: white;
font-size: 1.25rem;

}


.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: white;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.carousel-btn:hover {
background: #e68a35;
transform: translateY(-50%) scale(1.1);
}

.carousel-btn-prev {
left: 3px;
}

.carousel-btn-next {
right: 3px;
}



@media (max-width: 992px) {

.carousel-slide {
min-width: calc(100% / 2);
}

.carousel-indicators {
display: none !important;
}

.carousel-btn {
display: none;
width: 40px;
height: 40px;
font-size: 1rem;
}
.events-carousel-slide {
min-width: calc(100% / 2);
}

.events-carousel-btn-prev {
left: -10px;
}

.events-carousel-btn-next {
right: -10px;
}


.carousel-slide {
min-width: calc(100% / 2);
}

.carousel-btn-prev {
left: -15px;
}

.carousel-btn-next {
right: -15px;
}
}




.events-carousel-track.loading {
pointer-events: none;
}

.events-carousel-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}

.card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

/* Ajuste de margen superior para pantallas más pequeñas */
@media (max-width: 768px) {
.counter-carousel-indicators {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
padding-bottom: 20px;
}
.counter-carousel-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
.counter-carousel-btn-prev {
left: 10px;
}

.counter-carousel-btn-next {
right: 10px;
}
.counter-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: var(--primary-color);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
z-index: 10;
transition: all 0.3s ease;
}
.counter-carousel-btn-prev { left: 10px; }
.counter-carousel-btn-next { right: 10px; }

.counter-carousel-slide {
padding: 40px 20px;
}
.counter-carousel-slide {
min-width: 100%;
padding: 40px 20px;
text-align: center;
flex-shrink: 0;
color: white;
}
.counter-carousel-container {
background: var(--primary-color);
border-radius: 15px;
position: relative;
overflow: hidden;
}
.counter-carousel-container {
display: block;
}
.card-img-top {
will-change: transform;
backface-visibility: hidden;
}
.events-carousel-slide.loading {
opacity: 0.7;
}
.events-carousel-slide .card:active {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.events-carousel-slide .card:active {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.events-carousel-slide .card-body {
padding: 1.5rem !important;
}
.events-carousel-slide .service-icon {
font-size: 2.2em !important;
margin-bottom: 15px;
}
.events-carousel-slide .card-title {
font-size: 1.3rem !important;
margin-bottom: 1rem;
line-height: 1.3;
}

.events-carousel-slide .card-text {
font-size: 0.95rem !important;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.events-carousel-slide .btn-link {
font-size: 1rem !important;
padding: 10px 20px;
border-radius: 25px;
border: 2px solid var(--primary-color);
transition: all 0.3s ease;
display: inline-block;
}
.events-carousel-slide .card {
margin: 0;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.events-carousel-slide {
min-width: 100% !important;
width: 100% !important;
padding: 0 10px !important;
box-sizing: border-box;
flex-shrink: 0;
/* SIN ANIMACIONES DE OPACITY QUE OCULTEN LOS CARDS */
}    
.events-carousel-slide .card {
will-change: transform;
backface-visibility: hidden;
}

.events-carousel-slide.loading {
opacity: 0.7;
}

.events-carousel-slide.loading .card {
pointer-events: none;
}
.events-carousel-track {
display: flex !important;
transition: transform 0.5s ease !important;
}

.events-carousel-wrapper {
overflow: hidden;
border-radius: 10px;
padding: 10px;
}
.card-img-container {
height: 180px;
}
.card-img-container {
height: 200px !important;
}
#food-truck-events .container {
padding: 0 15px;
}    
.events-carousel-container {
position: relative;
overflow: hidden;
}

.section {
padding: 60px 0;
}

.card-body {
padding: 1.5rem;
}


.carousel-slide {
min-width: 100%;
}


.carousel-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}

.carousel-btn-prev {
left: 10px;
}

.carousel-btn-next {
right: 10px;
}

.hero {
margin-top: 75px; /* Incremento para compensar el tamaño del div fixed en móviles */
}

.text-content h1 {
font-size: 2.5rem;
}

.empower {
font-size: 1.5rem;
}

.front-p-text {
font-size: 1rem;
}

.text-center {
text-align: center;
}

.carousel-slide {
min-width: 100%;
}



}

.section {
padding: 100px 0;
}

.card {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: none;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.testimonial {
background-color: var(--secondary-color);
}

.footer {
background-color: #4F4A45;
color: white;
padding: 60px 0;
}

.carousel-container {
position: relative;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}


.service-icon {
font-size: 3em;
color: var(--primary-color);
margin-bottom: 20px;
}

.service-image {
width: 100%;
height: 160px;
object-fit: cover; /* Esto asegura que la imagen se ajuste sin distorsionarse */
border-radius: 15px;
}


.img-hover {
transition: transform 0.3s;
}

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

.about-img {
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.gallery-img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 20px;
}

.testimonial {
background-color: white;
position: relative;
}

.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
overflow: hidden;
}

.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: auto;
}

.testimonial-card {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.testimonial-text {
font-style: italic;
margin-bottom: 20px;
}

.testimonial-author {
font-weight: bold;
margin-top: auto;
}

.star-rating {
color: var(--primary-color);
font-size: 1.2em;
margin-bottom: 15px;
}

.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
color: var(--primary-color);
font-size: 24px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transition: background-color 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: rgba(255, 255, 255, 0.8);
}

.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 18px;
}

.form-control:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(255, 154, 60, 0.25);
}

.counter-section {
background-color: var(--primary-color);
color: white;
padding: 80px 0;
}

.counter-item {
text-align: center;
margin-bottom: 30px;
}

.counter-icon {
font-size: 3em;
margin-bottom: 20px;
}

.counter-number {
font-size: 3em;
font-weight: bold;
margin-bottom: 10px;
}

.counter-text {
font-size: 1.2em;
}

.container-join-form {
background-color: white;
padding: 30px;
/*border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
margin-top: 50px;
margin-bottom: 50px;
max-width: 600px;
/* Ancho máximo del formulario */
}

.info-text {
margin-top: 10%;
margin-bottom: 20px;
/* Espaciado inferior */
font-size: 1.2rem;
/* Tamaño de fuente */
font-weight: bold;
/* Negrita */
color: var(--primary-color);
/* Color del texto */
text-align: center;
/* Centrar el texto */
text-transform: uppercase;
/* Texto en mayúsculas */
}
.events-control-btn {
display: block !important;
background: var(--primary-color);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.counter-carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.counter-section {
display: none; /* Ocultar grid en móvil */
}
.counter-section {
padding: 0;
background: transparent;
}
.counter-section {
background-color: var(--primary-color);
color: white;
padding: 45px 0;
}

.events-carousel-controls {
display: none !important;
}

.events-carousel-btn {
display: block !important;
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.carousel-btn {
display: none;
width: 40px;
height: 40px;
font-size: 1rem;
}
.events-carousel-btn {
display: block !important;
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.events-carousel-btn-prev {
left: 10px !important;
}

.events-carousel-btn-next {
right: 10px !important;
}

.events-carousel-btn:hover {
background: #e68a35;
transform: translateY(-50%) scale(1.1);
}

.events-carousel-slide .card-title {
font-size: 1.2rem;
}
.events-carousel-slide .service-icon {
font-size: 2em;
}
.events-carousel-slide .card-body {
padding: 1.5rem;
}

.events-carousel-slide {
min-width: 100%;
}    
.info-text {
margin-top: 30%;
}
}

.info-text p {
margin: 5px 0;
/* Espaciado entre párrafos */
color: #333;
/* Color del texto normal */
}

.form-label {
color: var(--text-color);
}


.events-carousel-slide.active {
animation: eventsSlideIn 0.5s ease-out;
}

.form-control,
.form-select {
color: var(--input-text-color);
/* Color del texto de los inputs */
}

.form-control:focus,
.form-select:focus {
/* Cambiar el color del borde al enfocarse */
border-color: var(--primary-color);
/* Cambiar el color del borde de los inputs y selects */
box-shadow: 0 0 5px rgba(255, 154, 60, 0.5);
/* Sombra del borde al enfocarse */
}

.contact-info-section {
display: flex;
justify-content: center;
/* Alinea los elementos al centro */
gap: 30px;
/* Espacio entre los elementos */
padding: 50px 0;
background-color: #f8f9fa;
/* Color de fondo */
flex-wrap: wrap;
/* Permite que los elementos se ajusten en pantallas pequeñas */
}

.contact-info-box {
background-color: white;
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
text-align: center;
width: 280px;
/* Ancho predeterminado */
margin: 20px 0;
/* Margen para separar verticalmente en pantallas pequeñas */
}

.icon-box {
background-color: #ff9a3c;
color: white;
font-size: 40px;
width: 60px;
height: 60px;
line-height: 60px;
/* Centrar el ícono verticalmente */
margin: 0 auto 20px;
/* Centrar el ícono y agregar margen inferior */
}

.contact-info-box h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #333;
}

.contact-info-box p {
color: #555;
font-size: 1rem;
}

/* Media queries para pantallas pequeñas */
@media (max-width: 768px) {
.contact-row {
display: flex !important;
flex-direction: column !important;
}
  .contact-form {
    order: -1 !important;
  }

  .contact-info {
    order: 0 !important;
  }
.events-carousel-slide {
min-width: 100% !important;
width: 100% !important;
padding: 0 10px !important;
box-sizing: border-box;
flex-shrink: 0;
}
.contact-info-section {
flex-direction: column;
/* Cambia los elementos a disposición vertical en pantallas más pequeñas */
align-items: center;
/* Centra los elementos en una columna */
}

.contact-info-box {
width: 100%;
/* Ocupar todo el ancho disponible en pantallas pequeñas */
max-width: 500px;
/* Ajusta el ancho máximo */
}
}

/* Media queries para pantallas medianas */
@media (max-width: 1024px) {
.contact-info-section {
flex-wrap: wrap;
/* Permite que los elementos se ajusten en múltiples filas */
gap: 20px;
/* Reduce el espacio entre elementos */
}

.contact-info-box {
width: 100%;
max-width: 450px; /* O ajusta el valor según lo necesario */
}
}

.events-carousel-wrapper {
overflow: hidden;
border-radius: 15px;
padding: 20px;
}
/* Media queries para pantallas muy pequeñas (móviles) */
@media (max-width: 480px) {
.counter-carousel-slide {
padding: 30px 15px;
}
.events-control-btn {
width: 35px !important;
height: 35px !important;
font-size: 0.8rem !important;
}
.events-carousel-btn {
width: 35px !important;
height: 35px !important;
font-size: 0.9rem !important;
}
.events-carousel-btn-prev {
left: 5px !important;
}

.events-carousel-btn-next {
right: 5px !important;
}
.events-carousel-slide .card {
margin: 0 5px;
}
.events-carousel-slide .card-body {
padding: 1.2rem !important;
}
.events-carousel-slide .service-icon {
font-size: 2em !important;
}
.events-carousel-slide .card-title {
font-size: 1.2rem !important;
}
.events-carousel-slide .card-text {
font-size: 0.9rem !important;
}
.events-carousel-slide .card-body {
padding: 1.2rem;
}
.events-carousel-wrapper {
padding: 15px;
}
.card-img-container {
height: 180px !important;
}
.card-img-container {
height: 160px;
}
.carousel-btn-prev {
left: 5px;
}

.carousel-btn-next {
right: 5px;
}
.contact-info-box {
width: 100%;
/* Ocupa todo el ancho de la pantalla */
padding: 15px;
/* Reduce el padding para pantallas pequeñas */
}

.icon-box {
font-size: 30px;
/* Ajusta el tamaño del ícono */
width: 50px;
height: 50px;
line-height: 50px;
/* Ajusta para centrar el ícono */
}

.contact-info-box h3 {
font-size: 1rem;
/* Ajusta el tamaño del texto */
}

.contact-info-box p {
font-size: 0.9rem;
/* Reduce el tamaño de la fuente */
}
.container {
padding: 0 15px;
}


}

#food-truck-events .card {
transition: transform 0.3s, box-shadow 0.3s;
border: none;
background-color: white;
}

#food-truck-events .card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#food-truck-events .service-icon {
font-size: 3em;
color: var(--primary-color);
margin-bottom: 20px;
}

#food-truck-events .btn-link {
color: var(--primary-color);
text-decoration: none;
}

#food-truck-events .btn-link:hover {
text-decoration: underline;
}

.service-section {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
padding: 2rem;
margin-bottom: 2rem;
}
.service-section:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.service-title {
color: var(--primary-color);
margin-bottom: 1rem;
}
.service-description {
text-align: justify;
}

.btn-contact {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
transition: background-color 0.3s, transform 0.3s;
}
.btn-contact:hover {
background-color: #e68a35;
border-color: #e68a35;
color: white;
transform: translateY(-2px);
}

.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}

.animate__fadeInUp {
animation-name: fadeInUp;
}

.events-carousel-slide {
min-width: calc(100% / 3);
padding: 0 15px;
box-sizing: border-box;
}
.events-carousel-slide .card {
height: 100%;
border: none;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
background: white;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 20px, 0);
}

to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

.checkbox-grid {
display: grid;
grid-template-columns: repeat(3, 100fr);
gap: 10px; /* Espaciado entre las casillas */
margin-top: 10px;
margin-bottom: 2rem;
}
.checkbox-grid label {
display: flex;
align-items: center;
gap: 5px;
}

@media (max-width: 768px) {
.checkbox-grid {
display: block;
}
}

#loadingSpinner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente */
display: none; /* Oculto por defecto */
align-items: center;
justify-content: center;
z-index: 1050; /* Asegura que esté sobre otros elementos */
}
.spinner-border {
width: 3rem;
height: 3rem;
border-width: 0.3em;
color: var(--primary-color);
}

.carousel-slide.active {
animation: slideIn 0.5s ease-out;
}

/* Estilos para el aviso de cookies */
#cookie-notice {
display: none; /* Oculto por defecto */
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
color: #000;
padding: 15px;
text-align: center;
z-index: 10000;
opacity: 0; /* Comienza completamente transparente */
transition: opacity 0.5s ease-in-out; /* Transición suave de opacidad */
}

#cookie-notice.visible {
display: block; /* Se muestra cuando se añade la clase 'visible' */
opacity: 1; /* Totalmente opaco */
}



#cookie-notice button {
margin: 0 10px;
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}

#cookie-notice button#accept-cookies {
background-color: #e68a35; /* Naranja */
color: #fff; /* Texto blanco */
}

#cookie-notice button#read-policy {
background-color: transparent;
border: 2px solid #e68a35; /* Bordes naranjas */
color: #e68a35; /* Texto naranja */
}

.counter-carousel-btn:focus,
.counter-control-btn:focus,
.counter-indicator:focus {
outline: 3px solid var(--counter-accent);
outline-offset: 3px;
}

.carousel-btn:focus,
.control-btn:focus,
.indicator:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}