/*===== 1. colores Globales y Reset====*/
:root {
    --color-principal: #ccff0b;
    /* Neón JM */
    --color-secundario: #fdfcff;
    --color-terciario: #000000;
    --color-cuaternario: #7f7f7f;
    --header-bg: rgba(20, 20, 20, 0.95);
    /* Fondo oscuro elegante */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

/*caja contenedora del body estilos*/
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    /* El !important es para obligar a ignorar errores de otros archivos */
    position: relative;
    scroll-behavior: smooth;


}



/*imagenes medidas*/
img {
    max-width: 100%;
    height: auto;
}


/*estilo de animacion infinita carrusel home y trabajo*/

/*seccion del carrusel infinito*/
.infinito {
    height: 9vh;
    background-color: #111;
    /* Vital para que no salga el scroll horizontal */
    display: flex;
    justify-content: center;
    align-items: center;
}

.animated {
    display: flex;

    background: var(--color-principal);
    height: 80px;
    width: 100vw;
    overflow: hidden;
}

.animated .servicios {
    display: flex;
    align-items: center;
    width: calc(500px * 10);
    animation: animacion 20s linear infinite;
}

.animated .caja-img {
    height: 90%;
    width: 100vw;
    display: flex;



}

.animated .caja-img img {
    width: 180%;
    height: auto;
    object-fit: contain;

}



@keyframes animacion {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-500px * 5));
    }
}