/*
  Hoja de estilos personalizada para Madiba.
  Aquí puedes añadir o modificar los estilos que no son manejados por Tailwind CSS.
*/

/* Estilos para la fuente principal */
body {
  font-family: 'Inter', sans-serif;
}

/* Estilos para la marquesina de clientes (CORREGIDO) */
@keyframes marquee {
  0% { 
    transform: translateX(0%); 
  }
  100% { 
    transform: translateX(-50%); /* Se desplaza la mitad de su propio ancho */
  }
}

.animate-marquee {
  display: flex; /* Mantenemos flexbox para alinear los grupos de logos */
  width: fit-content; /* Hacemos que el ancho total se ajuste al contenido */
  animation: marquee 50s linear infinite;
}

.marquee-item {
  flex-shrink: 0; /* Evita que el grupo de logos se encoja */
  display: flex;
  align-items: center;
  gap: 2.5rem; /* Espacio entre logos */
  padding: 0 1.25rem; /* Añade un pequeño padding para evitar que se peguen en los bordes */
}

.marquee-item img {
  width: 140px; /* Ancho fijo para cada logo */
  height: 80px; /* Altura fija para estandarizar el contenedor del logo */
  object-fit: contain; /* Asegura que el logo se ajuste sin distorsionarse */
  flex-shrink: 0; 
}


/* Animaciones sutiles para los títulos del slider */
@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out both;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out 0.3s both;
}

.IMAGEN-BLOG-WD {
  display: block;       /* elimina espacios debajo de la imagen */
  width: 100vw;         /* 100% del ancho de la ventana */
  height: 100vh;        /* 100% de la altura de la ventana */
  object-fit: cover;    /* la imagen cubre todo recortando si es necesario */
}