/* Importar fuentes (opcional, pero recomendado para un look elegante) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

/* Añadir las capas base de Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos para el carrusel Swiper */
.swiper-pagination-bullet {
    background-color: #087F8C; /* brand-teal */
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background-color: #D9006C; /* brand-pink */
    opacity: 1;
}

/* Estilos para el carrusel de testimonios (para que resalten en el fondo oscuro) */
.testimonial-pagination .swiper-pagination-bullet {
    background-color: #FCF7F0; /* brand-cream */
    opacity: 0.6;
}
.testimonial-pagination .swiper-pagination-bullet-active {
    background-color: #E54F6D; /* brand-alebrije-pink */
    opacity: 1;
}

/* Estilo para los botones de flecha de Swiper */
.swiper-button-next,
.swiper-button-prev {
    color: #D9006C; /* brand-pink */
    transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #E54F6D; /* brand-alebrije-pink */
    transform: scale(1.1);
}

/* Estilos para el acordeón de FAQ */
.faq-question {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}
.faq-item.active .faq-answer {
    max-height: 300px; /* Altura suficiente para el contenido */
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
.faq-icon {
    transition: transform 0.3s ease;
}