/* Estilo base para la fuente del cuerpo del documento */
body {
    font-family: 'Inter', sans-serif;
}

/* Altura mínima para el contenedor principal para empujar el pie de página hacia abajo */
.main-content-area {
    min-height: calc(100vh - 12rem); /* Ajustado por si el header crece */
}

/* Definición de la animación fadeInUp */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clase base para aplicar la animación */
.animate-fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* Clases para retrasos en la animación */
.animation-delay-200 {
    animation-delay: 0.2s;
}
.animation-delay-400 {
    animation-delay: 0.4s;
}
.animation-delay-600 {
    animation-delay: 0.6s;
}
.animation-delay-800 {
    animation-delay: 0.8s;
}

/* Estilo para la sección con imagen de fondo */
.section-with-bg {
    position: relative; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Asegura que el contenido de la sección esté sobre el overlay (si existiera) */
.section-content {
    position: relative;
    z-index: 2; 
}

/* Estilos para el botón flotante de WhatsApp */
.whatsapp-float-button {
    position: fixed;
    /* Estilos para móviles (por defecto) */
    width: 180px; /* Más pequeño en móviles */
    height: 65px;  /* Mantiene la proporción aproximada de 250x90 */
    bottom: 80px; /* Más cerca del borde en móviles */
    right: 20px;  /* Más cerca del borde en móviles */
    background-color: #25D366; /* Color de fondo si la imagen tiene transparencia */
    border-radius: 32.5px; /* (height / 2) para forma de píldora */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden; /* Importante para que la imagen respete el border-radius del contenedor */
}

.whatsapp-float-button img {
    display: block; /* Buena práctica para imágenes */
    width: 100%;   /* La imagen ocupa el ancho completo del botón */
    height: 100%;  /* La imagen ocupa la altura completa del botón */
    object-fit: cover; /* Asegura que la imagen cubra el área del botón, puede recortar si la proporción no es exacta */
}

.whatsapp-float-button:hover {
    transform: scale(1.05); /* Efecto hover ligeramente más sutil en móviles */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Estilos para pantallas medianas y más grandes (Tailwind 'md' breakpoint = 768px) */
@media (min-width: 768px) {
    .whatsapp-float-button {
        width: 250px; /* Tamaño original para pantallas más grandes */
        height: 90px;
        bottom: 90px; /* Posición original */
        right: 40px;
        border-radius: 45px; /* (height / 2) para forma de píldora */
    }

    .whatsapp-float-button:hover {
        transform: scale(1.1); /* Efecto hover original */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
}

.bg-custom-proveedor-1 {
    background-color: #0265c9;
}
.bg-custom-proveedor-2 {
    background-color: #f79633;
}
.bg-custom-proveedor-3 {
    background-color: #c92a28;
}
.bg-custom-proveedor-4 {
    background-color: #a00404;
}
.bg-custom-proveedor-5 {
    background-color: #115547;
}
.bg-custom-proveedor-6 {
    background-color: #f28c19;
}
.bg-custom-proveedor-7 {
    background-color: #d42427;
}
.bg-custom-proveedor-8 {
    background-color: #181818;
}
.bg-custom-proveedor-9 {
    background-color: #c90000;
}
.bg-custom-proveedor-10 {
    background-color: #c20f2f;
}
.bg-custom-proveedor-11 {
    background-color: #000000;
}
.main-content-area {
    min-height: calc(100vh - 12rem); /* Ajustado por si el header crece */
}