/*@tailwind base;
@tailwind components;
@tailwind utilities;
*/
/* Fuentes */
body {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
}

/* Gradiente hero */
.hero-gradient {
    background: linear-gradient(135deg, #1a2a3a 0%, #0d1a26 100%);
}

/* Imagen de fondo para todas las pantallas */
.hero-image {
    background-image: url('./images/hero.png'); /* Ruta de la imagen del camión */
    background-size: contain; /* Asegura que la imagen completa sea visible */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: 100%; /* Asegura que ocupe todo el ancho */
    height: auto; /* Ajusta la altura automáticamente */
    min-height: 400px; /* Altura mínima para pantallas grandes */
}

/* Cards de features */
.feature-card {
    @apply transition duration-300;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Pasos cómo funciona */
.how-it-works-step {
    position: relative;
}
.how-it-works-step:not(:last-child):after {
    content: '';
    position: absolute;
    top: 50%;
    right: -50px;
    width: 40px;
    height: 2px;
    background: #f5537c;
}
@media (max-width: 768px) {
    .how-it-works-step:not(:last-child):after {
        display: none;
    }
}

/* Animación de pulso */
.pulse-animation {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 83, 124, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(245, 83, 124, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 83, 124, 0);
    }
}

/* Testimonios */
.testimonial-card {
    @apply transition duration-300;
}
.testimonial-card:hover {
    transform: scale(1.02);
}

/* Cards de precios */
.price-card {
    @apply transition duration-300;
}
.price-card:hover {
    transform: translateY(-10px);
}
.popular-plan {
    border: 2px solid #f5537c;
}

/* Botón de WhatsApp flotante */
.whatsapp-button {
    @apply fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition z-50;
}

/* Botón volver arriba */
.back-to-top {
    @apply fixed bottom-20 right-6 bg-[#f5537c] hover:bg-[#e04a6d] text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition z-50;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .hero-gradient {
        flex-direction: column; /* Cambia la dirección del contenido a vertical */
    }

    .hero-image {
        padding-bottom: 50%; /* Mantiene una proporción adecuada para la imagen */
        order: 2; /* Mueve la imagen al final del contenedor */
    }
}

/* Estilo para los Trust Badges */
.bg-gray-900 {
    background-color: #1a202c; /* Fondo oscuro */
}

.rounded-lg {
    border-radius: 0.5rem; /* Bordes redondeados */
}



.text-f5537c {
    color: #f5537c; /* Color principal */
}

.text-gray-400 {
    color: #a0aec0; /* Texto secundario */
}

.text-white {
    color: #ffffff; /* Texto principal */
}


@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  opacity: 0;
  animation: fade-in-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.animate-fade-in-up[style*="animation-delay: 0.3s;"] { animation-delay: 0.3s; }
.animate-fade-in-up[style*="animation-delay: 0.5s;"] { animation-delay: 0.5s; }

/* Personalización adicional */
/* ... puedes agregar más estilos personalizados aquí ... */