@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --color-pantone-verde: #ADE507;
    --color-pantone-azul: #162837;
    --color-pantone-gris: #AAABA8;
    --color-fondo-principal: #FFFFFF;
    --color-secciones-alternas: #F5F7FA;
    --color-border: #E4E7EC;
    --color-titulos: #1A1A1A;
    --color-texto-general: #4A4A4A;
    --color-texto-secundario: #7A7A7A;
    --color-links: #2D6CDF;
    --fondo-secciones-informativas: #EAF1FF;
    --color-hover: #A8F06A;
    --color-footer: #0F172A;
    --header-height: 5rem;
    --normal-font-size: .938rem;
    --font-regular: 400;
    --font-bold: 600;
    --z-tooltip: 10;
    --z-fixed: 100;
    --font-titulo: "Poppins", sans-serif;;
    --font-texto: "Inter", sans-serif;;
}

.soluciones{
    width: 100%;
    padding: 0;
    margin: 0;
}
.soluciones-container{
    width: 100%;
    overflow: hidden;
    height: 100vh;
    padding: 0;
    margin: 0;
}
.video-soluciones{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.video-soluciones video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.titulo-soluciones{
    width: 100%;
    text-align: center;
    padding: 1rem;
    position: absolute;
    z-index: 1;
    padding: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    max-width: 500px;
    animation: inicio-soluciones 3s ease;
}
.titulo-soluciones h1{
    color: var(--color-fondo-principal);
    font-size: clamp(1rem, 1rem + 2vw, 3rem);
}
.titulo-soluciones p{
    color: var(--color-pantone-verde);
    margin-bottom: 2rem;
}
.plataforma{
    padding: 4rem 1rem 7rem 1rem;
}
.titulo-servicios{
    text-align: center;
    margin: 1rem 0;
}
.titulo-servicios h1{
    color: var(--color-texto-secundario);
}
.slider-soluciones{
    height: 105vh;
}
.slider-soluciones span{
    color: var(--color-pantone-verde);
}
.slider-soluciones p{
    margin: .75rem 0;
}
.slider-soluciones ul li{
    color: var(--color-fondo-principal);
    font-size: clamp(1rem, 1rem + 2vw, 1.25rem);
}
.slider-soluciones i{
    color: var(--color-pantone-verde);
}
.plataforma-card{
    background-color: var(--color-pantone-azul);
}
.plataforma-card-container{
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.cards-plataforma{
    border: 2px solid var(--color-border);
    padding: 1rem;
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
}
.cards-plataforma h1{
    font-size: clamp(1rem, 1rem + 2vw, 1.75rem);
}
.cards-plataforma p{
    color: var(--color-fondo-principal);
    font-size: clamp(1rem, 1rem + 2vw, 1.25rem);
    margin: 1rem 0;
}
.cards-plataforma img{
    width: 100%;
    max-width: 390px;
}
.cards-plataforma span{
    color: var(--color-pantone-verde);
}
.cards-plataforma ul li{
    color: var(--color-fondo-principal);
    font-size: clamp(1rem, 1rem + 2vw, 1.25rem);
}
.cards-plataforma i{
    color: var(--color-pantone-verde);
}
.servicios-items{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 5rem auto;
    justify-content: center;
    gap: 2rem;
}
.items-card{
    width: 100%;
    max-width: 300px;
    background-color: var(--color-pantone-azul);
    padding: 1rem;
    text-align: center;
    border-radius: 20px;
    transition: 1s;
}
.items-card:hover p{
    color: var(--color-pantone-verde);
}
.items-card p{
    font-size: clamp(1rem, 1rem + 2vw, 1.5rem);
    color: var(--color-fondo-principal);
    transition: 1s;
}
.items-card i{
    color: var(--color-pantone-verde);
    font-size: 2rem;
}
.titulo-plataforma{
    width: 100%;
    padding: 1rem;
    margin: 2rem auto;
    text-align: center;
}
.titulo-plataforma h1{
    font-size: clamp(1rem, 1rem + 2vw, 2rem);
    color: var(--color-texto-secundario);
}
.titulo-instalacion{
    width: 100%;
    max-width: 1100px;
    margin: 2rem auto;
    text-align: center;
}
.titulo-instalacion h1{
    font-size: clamp(1rem, 1rem + 2vw, 2rem);
    color: var(--color-texto-secundario);
}
.instalacion-container{
    width: 100%;
    max-width: 1100px;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    /* border: 2px solid var(--color-pantone-gris); */
    border-radius: 20px;
}
.img-instalacion{
    width: 100%;
    max-width: 400px;
}
.img-instalacion img{
    width: 100%;
    border-radius: 20px;
}
.certificaciones{
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.img-certificaciones{
    display: flex;
    flex-wrap: wrap;
}
.certificaciones img{
    width: 300px;
}
.texto-cierre{
    width: 100%;
    padding: 1.5rem;
    margin: 3rem auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: var(--color-pantone-azul);
    border-radius: 20px;
    gap: 2rem;
}
.titulo-cierre{
    width: 100%;
    max-width: 500px;
}
.titulo-cierre h1{
    font-size: clamp(1rem, 1rem + 2vw, 1.75rem);
}
.texto-cierre p{
    color: var(--color-fondo-principal);
}   
.lista-cierre{
    width: 100%;
    max-width: 500px;
}
.lista-cierre ul{
    margin: 1rem 0;
}
.lista-cierre ul li{
    font-size: clamp(1rem, 1rem + 2vw, 1.75rem);
    color: var(--color-fondo-principal);
}

.texto-cierre span{
    color: var(--color-pantone-verde);
}

@keyframes inicio-soluciones{
    0%{
        clip-path: circle(0% at top left);
    }
    100%{
        clip-path: circle(140% at top left);
    }
}