/* ==========================================================================
   Estilos Personalizados y Animaciones - ConstruMAX
   ========================================================================== */

/* Importación de tipografía Montserrat desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Máscaras de degradado para fondos */
.hero-mask {
  background: linear-gradient(180deg, rgba(11, 19, 41, 0.72) 0%, rgba(15, 23, 42, 0.82) 100%);
}

.footer-mask {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(9, 14, 26, 0.96) 100%);
}

/* ==========================================================================
   Clases para Animaciones con JavaScript (Reveal on Scroll)
   ========================================================================== */

/* Estado inicial: invisible y movido hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Estado activo: visible y en su posición original */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Retardo progresivo para elementos en cuadrícula */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }


.navbar a
{
    display: inline-block;
    font-size:15px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
    opacity: 0;
    animation: slideTop .5s ease forwards;
    animation-delay: calc(.2s * var(--i));
}

.logo
{
    position: relative;
    font-size: 35px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideRight 1s ease forwards;
}

.Mad
{
    position: relative;
    font-size: 35px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideRight 1s ease forwards;
}

.num
{
    position: relative;
    font-size: 35px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
}

.comu
{
    position: relative;
    font-size: 35px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
}


@keyframes slideRight
{
    0%
    {
        opacity: 0;
        transform: translateX(-100px);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slideLeft
{
    0%
    {
        opacity: 0;
        transform: translateX(100px);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slideTop
{
    0%
    {
        opacity: 0;
        transform: translateY(100px);
    }
    100%
    {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slideBottom
{
    0%
    {
        transform: translateY(-100px);
        opacity: 0;
    }
    100%
    {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* =========================================
   Carrusel infinito de Marcas
   ========================================= */

.logo-slider {
    width: 100%;
    overflow: hidden; /* Oculta los logos que se salen del borde de la pantalla */
    background: #ffffff;
    padding: 20px 0;
}

.logo-track {
    display: flex;
    /* Ancho total: 250px por logo multiplicado por los 10 logos totales (5 reales + 5 copias) */
    width: calc(250px * 10); 
    animation: scrollLogos 25s linear infinite; /* 25s es la velocidad de la tira */
}

.slide {
    width: 250px; /* Ancho designado para cada logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.slide img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain; /* Evita que el logo se estire y pierda su forma */
    transition: filter 0.3s ease;
}

/* Efecto interactivo: Al poner el mouse sobre el logo, recupera su color original */
.slide:hover img {
    filter: grayscale(0%);
}

/* La animación que empuja la tira hacia la izquierda */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza exactamente a la mitad de la pista (5 logos * 250px) para reiniciar invisiblemente */
        transform: translateX(calc(-250px * 5));
    }
}