@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --chili-red: #DE2C1C;
  --black-bean: #480D07;
  --platinum: #DEDFE2;
  --sea-green: #208A47;
  --french-gray: #B3B4B7;
}

/* Definir clases personalizadas */
.bg-chili-red { background-color: var(--chili-red); }
.bg-black-bean { background-color: var(--black-bean); }
.bg-platinum { background-color: var(--platinum); }
.bg-sea-green { background-color: var(--sea-green); }
.bg-french-gray { background-color: var(--french-gray); }

.text-chili-red { color: var(--chili-red); }
.text-black-bean { color: var(--black-bean); }
.text-platinum { color: var(--platinum); }
.text-sea-green { color: var(--sea-green); }
.text-french-gray { color: var(--french-gray); }

/* Gradientes */
.bg-gradient-top { background: linear-gradient(0deg, var(--chili-red), var(--black-bean), var(--platinum), var(--sea-green), var(--french-gray)); }
.bg-gradient-right { background: linear-gradient(90deg, var(--chili-red), var(--black-bean), var(--platinum), var(--sea-green), var(--french-gray)); }
.bg-gradient-bottom { background: linear-gradient(180deg, var(--chili-red), var(--black-bean), var(--platinum), var(--sea-green), var(--french-gray)); }
.bg-gradient-left { background: linear-gradient(270deg, var(--chili-red), var(--black-bean), var(--platinum), var(--sea-green), var(--french-gray)); }
.bg-gradient-radial { background: radial-gradient(circle, var(--chili-red), var(--black-bean), var(--platinum), var(--sea-green), var(--french-gray)); }



.embla {
  overflow: hidden;
  height: 100%;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}




/* Estilos del swiper */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 

.swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  height: 70%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



    ul {
        list-style-type: none; /* Elimina los bullets */
        padding-left: 0; /* Elimina el padding por defecto */
    }

    li {
        padding: 8px 0;
        border-bottom: 1px solid #e2e8f0; /* Línea divisoria entre elementos */
        color: #4a5568; /* Color de texto gris oscuro */
    }

    li:last-child {
        border-bottom: none; /* Elimina la línea del último elemento */
    }