html{
font-size: 0.65vw;
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after{box-sizing: inherit;}

body{
width: auto;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 1.6rem;
height: 100%;
background-color: #2b2b2b;
}

a{text-decoration: none; color: inherit;}
a:visited{color: inherit;}
b{font-weight: 600;}
img{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}




/* Contenidos */
.seccion{
    padding: 1rem;
}


/* Barra de navegación */
.nav-superior{
    background-color: #fff;
    padding: 2rem 4rem;
}

.nav-superior .contenido{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-superior .logo{
    width: 25rem;
    height: 8rem;
    background: transparent url(../images/logo.png) left/contain no-repeat;
}

.nav-superior .links{
    display: flex;
    align-items: center;
    color: #6b6b6b;
}

.nav-superior .links .item{
    margin: 0 2rem;
    cursor: pointer;
    transition: color ease-in .2s;
}

.nav-superior .links .item.active{
    font-weight: 700;
    color: #000;
}
.nav-superior .links .item:hover{color: #000;}

.nav-superior .links .circulo{
    height: .8rem;
    width: .8rem;
    background-color: #3ec9fd;
    border-radius: 50%;
}


/* Secciones */
.seccion{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.seccion .contenido{
    max-width: 80%;
}

.seccion .contenido .subrayado{
    width: 22rem;
    height: 1rem;
    background: linear-gradient(-45deg, #0ecfd9, #0B61D2, #0ecfd9, #0B61D2);
	background-size: 400% 400%;
	animation: gradient 50s ease infinite;
    margin: 0 auto 3rem;
}

.seccion .contenido .subrayado.invertido{
    background: #fff;
    opacity: .7;
}


/* Inicio */
.seccion__inicio{
/*  Fondo gradiente estático
    background: #0ecfd9;
    background: linear-gradient(153deg,rgba(33, 231, 241, 1) 0%, rgba(11, 97, 210, 1) 50%);
*/
    background: linear-gradient(-45deg, #0ecfd9, #0B61D2, #0ecfd9, #0B61D2);
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
    min-height: 70rem;
}

@keyframes gradient{
	0%     {background-position: 0% 50%;}
	50%    {background-position: 100% 50%;}
	100%   {background-position: 0% 50%;}
}

.seccion__inicio .contenido{
    padding-right: 35%;
    color: #fff;
    background: transparent url(../images/portada.png) right/contain no-repeat;
}

.seccion__inicio .h1{
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 6.5rem;
    margin-bottom: 3.5rem;
}

.seccion__inicio .p{
    font-size: 2rem;
    margin-bottom: 5rem;
    line-height: 3rem;
}

.seccion__inicio button{
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    padding: 1.8rem 6rem;
    border-radius: 1rem;
    border: none;
    background-color: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity ease-in .2s;
	width: auto;
}
.seccion__inicio button:hover{opacity: 1;}

/* Clientes */
.seccion__clientes{
    background-color: #d5ecff;
    min-height: 20rem;
}

.seccion__clientes .contenido{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.seccion__clientes .logo{
    width: 20rem;
    height: 10rem;
    opacity: .8;
    background: #bbb url(../images/logo--patagon.png) center/20rem no-repeat;
}

.seccion__clientes .logo.cliente-1{
    background: transparent url(../images/cliente-1.png) center/contain no-repeat;
}
.seccion__clientes .logo.cliente-2{
    background: transparent url(../images/cliente-2.png) center/contain no-repeat;
    opacity: .6;
}
.seccion__clientes .logo.cliente-3{
    background: transparent url(../images/cliente-3.png) center/contain no-repeat;
    opacity: .6;
}
.seccion__clientes .logo.cliente-4{
    background: transparent url(../images/cliente-4.png) center/contain no-repeat;
    opacity: .6;
}
.seccion__clientes .logo.cliente-5{
    background: transparent url(../images/cliente-5.png) center/contain no-repeat;
    opacity: .7;
}



/* Soluciones */
.seccion__soluciones{
    background-color: #fff;
    min-height: 20rem;
    padding: 15rem 1rem;
}

.seccion__soluciones .encabezado{
    text-align: center;
    max-width: 80%;
    margin: 0 auto 8rem auto;
}

.seccion__soluciones .encabezado .h2{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.seccion__soluciones .encabezado .p{
    font-size: 3rem;
    font-weight: 300;
    line-height: 4rem;
}

.seccion__soluciones .cuerpo{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 10rem;
    grid-row-gap: 5rem;
    margin: 0 auto;
}

.seccion__soluciones .cuerpo .item {
    opacity: 0;
    transition: all 1s ease-out;
}

/* 2. GRUPO IZQUIERDA: Entran desde la izquierda */
.seccion__soluciones .cuerpo .item.desarrollo,
.seccion__soluciones .cuerpo .item.ciberseguridad,
.seccion__soluciones .cuerpo .item.workflow {
    transform: translateX(-100px); /* Desplazados a la izquierda */
}

/* 3. GRUPO DERECHA: Entran desde la derecha */
.seccion__soluciones .cuerpo .item.inteligencia,
.seccion__soluciones .cuerpo .item.consultoria,
.seccion__soluciones .cuerpo .item.microinformatica {
    transform: translateX(100px); /* Desplazados a la derecha */
}

/* 4. GRUPO CENTRO (Teléfono): No se mueve, solo aparece */
.seccion__soluciones .cuerpo .item.columna-completa {
    transform: translate(0, 0); /* Quieto en su sitio */
}

/* 5. ESTADO FINAL: Cuando el JS agrega la clase .visible */
.seccion__soluciones .cuerpo .item.visible {
    opacity: 1;
    transform: translateX(0); /* Todos vuelven a su posición original (centro) */
}

/* 6. Retrasos para que aparezcan uno tras otro (Efecto cascada) */
.seccion__soluciones .cuerpo .item:nth-child(1) { transition-delay: 0.1s; } /* Desarrollo */
.seccion__soluciones .cuerpo .item:nth-child(2) { transition-delay: 0.2s; } /* Teléfono */
.seccion__soluciones .cuerpo .item:nth-child(3) { transition-delay: 0.3s; } /* Inteligencia */
.seccion__soluciones .cuerpo .item:nth-child(4) { transition-delay: 0.4s; } /* Ciberseguridad */
.seccion__soluciones .cuerpo .item:nth-child(5) { transition-delay: 0.5s; } /* Consultoría */
.seccion__soluciones .cuerpo .item:nth-child(6) { transition-delay: 0.6s; } /* Workflow */
.seccion__soluciones .cuerpo .item:nth-child(7) { transition-delay: 0.7s; } /* Microinformática */


.seccion__soluciones .cuerpo .item span{
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.seccion__soluciones .cuerpo .h3{
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 2rem;
}

.seccion__soluciones .cuerpo .p{
    font-size: 2rem;
    line-height: 2.7rem;
}

.seccion__soluciones .cuerpo .item.columna-completa{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    /* Se eliminó la animación antigua que causaba conflicto */
}

.seccion__soluciones .cuerpo .item .imagen{
    width: 100%;
    height: 100%;
    background: transparent url(../images/phone-shadow.jpg) center/90% no-repeat;
    border-radius: 35px;
    margin: 0 auto;
}


/* Nosotros */
.seccion__nosotros{
    color: #fff;
    background: linear-gradient(-45deg, #0ecfd9, #0B61D2, #0ecfd9, #0B61D2);
	background-size: 400% 400%;
	animation: gradient 50s ease infinite;
    min-height: 20rem;
    padding: 15rem 1rem;
}

.seccion__nosotros .contenido{
    text-align: center;
}

.seccion__nosotros .h2{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.seccion__nosotros .p{
    font-size: 3rem;
    font-weight: 300;
    line-height: 4rem;
}


/* Testimonios */
.seccion__testimonios{
    background-color: #fff;
    min-height: 20rem;
    padding: 15rem 1rem;
}

.seccion__testimonios .encabezado{
    text-align: center;
    max-width: 80%;
    margin: 0 auto 8rem auto;
}

.seccion__testimonios .encabezado .h2{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.seccion__testimonios .encabezado .p{
    font-size: 3rem;
    font-weight: 300;
    line-height: 4rem;
}

.seccion__testimonios .card{
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 120rem;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,.2);
    overflow: hidden;
}

.seccion__testimonios .card.card-1 .portada{
    background: url(../images/tarjeta-vecino.png) center/auto 100% no-repeat;
}

.seccion__testimonios .card .info{
    padding: 5rem 7rem;
    height: 50rem;
    display: flex;
    flex-direction: column;
}

.seccion__testimonios .cuerpo .h3{
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 2rem;
}

.seccion__testimonios .cuerpo .h4{
    font-size: 3.5rem;
    margin-bottom: 2rem;
    font-weight: 300;
}

.seccion__testimonios .cuerpo .p{
    font-size: 2rem;
    font-style: italic;
    font-weight: 300;
    line-height: 2.9rem;
    flex: 1;
}

.seccion__testimonios .perfil{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.seccion__testimonios .perfil .nombre{
    font-size: 1.8rem;
}

.seccion__testimonios .perfil .imagen{
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: .5rem solid #d5ecff;
    margin-left: 2rem;
}

.seccion__testimonios .card-1 .perfil .imagen{
    background: url(../images/testimonio-1.png) center/contain no-repeat;
}


/* Conversemos */
.seccion__conversemos{
    color: #fff;
    background: linear-gradient(-45deg, #0ecfd9, #0B61D2, #0ecfd9, #0B61D2);
	background-size: 400% 400%;
	animation: gradient 50s ease infinite;
    min-height: 20rem;
    padding: 15rem 1rem;
}

.seccion__conversemos .contenido{
    text-align: center;
}

.seccion__conversemos .h2{
    font-size: 3rem;
    font-weight: 300;
    line-height: 4rem;
    margin: 0 auto 3rem;
    max-width: 90%;
}

.seccion__conversemos button{
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    padding: 1.8rem 6rem;
    border-radius: 1rem;
    border: none;
    background-color: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity ease-in .2s;
}
.seccion__conversemos button:hover{opacity: 1;}


/* Servicios */
.seccion__servicios{
    background-color: #fff;
    min-height: 20rem;
    padding: 15rem 1rem;
}

.seccion__servicios .encabezado{
    text-align: center;
    max-width: 80%;
    margin: 0 auto 8rem auto;
}

.seccion__servicios .encabezado .h2{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.seccion__servicios .encabezado .p{
    font-size: 3rem;
    font-weight: 300;
    line-height: 4rem;
}

.seccion__servicios .cuerpo{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10rem;
    grid-row-gap: 10rem;
}

.seccion__servicios .cuerpo .item{
    text-align: center;
}

.seccion__servicios .cuerpo .h3{
    font-size: 2rem;
    font-weight: 900;
    margin-top: 2rem;
}

.seccion__servicios .icon{
    width: 25rem;
    height: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
/*    border-radius: 50%;*/
    background-color: #dcf9ff;
    color: #333;
    margin: 0 auto;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    overflow: hidden;
    animation: morph 6s linear infinite;
    transition: background-color ease-in .2s;
}

.seccion__servicios .icon:hover{background-color: #bdeeff;}

@keyframes morph{
  0%, 100%      {border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;}
  34%           {border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;}
  67%           {border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;}
}

.seccion__servicios .producto-2 .icon{animation-delay: -1s;}
.seccion__servicios .producto-3 .icon{animation-delay: -.5s;}
.seccion__servicios .producto-4 .icon{animation-delay: -2s;}
.seccion__servicios .producto-5 .icon{animation-delay: -1.5s;}
.seccion__servicios .producto-6 .icon{animation-delay: -.8s;}

.seccion__servicios .icon span{
    width: 10rem;
    height: 10rem;
    font-size: 10rem;
    font-weight: 100;
    transition: margin ease-in .2s;
    cursor: pointer;
}
.seccion__servicios .icon span:hover{margin-bottom: 15px;}


/* Contacto */
.seccion__contacto{
    color: #fff;
    background: linear-gradient(-45deg, #0ecfd9, #0B61D2, #0ecfd9, #0B61D2);
	background-size: 400% 400%;
	animation: gradient 50s ease infinite;
    min-height: 20rem;
    padding: 15rem 1rem;
}

.seccion__contacto .encabezado{
    text-align: center;
    max-width: 80%;
    margin: 0 auto 8rem auto;
}

.seccion__contacto .encabezado .h2{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.seccion__contacto .encabezado .p{
    font-size: 3rem;
    font-weight: 300;
    line-height: 4rem;
}

.seccion__contacto .cuerpo{
    width: 60vw;
    background-color: rgba(255, 255, 255, .5);
    color: #000;
    padding: 3rem;
}

.seccion__contacto form .item{
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.seccion__contacto form .item:last-child{margin-bottom: 0;}

.seccion__contacto form .item.centrado{
    justify-content: center;
    flex-direction: row;
}

.seccion__contacto form label{
    font-size: 2rem;
    line-height: 2.7rem;
    margin-bottom: 1rem;
}

.seccion__contacto form input[type="text"]{
    height: 4rem;
    border-radius: 1rem;
    border: none;
    padding-left: 1rem;
    font-size: 2rem;
    font-family: 'Lato', sans-serif;
    margin-bottom: 2rem;
}

.seccion__contacto form input[type="submit"]{
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    padding: 1.8rem 6rem;
    border-radius: 1rem;
    border: none;
    background-color: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity ease-in .2s;
}
.seccion__contacto form input[type="submit"]:hover{opacity: 1;}


/* Footer */
.seccion__footer{
    align-items: flex-start;
    background-color: #222;
    color: #fff;
    height: 60rem;
    padding: 10rem;
}

.seccion__footer .contenido{
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.seccion__footer .cuerpo{
    display: grid;
    grid-template-columns: 35rem 35rem 35rem;
    grid-column-gap: 5rem;
}

.seccion__footer .cuerpo .columna .h4{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.seccion__footer .cuerpo .columna .fila{
    display: flex;
}

.seccion__footer .cuerpo .columna .p{
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 2rem;
}

.seccion__footer .cuerpo .columna .item{
    display: flex;
    margin-bottom: 1.5rem;
}

.seccion__footer .cuerpo .columna .item span{
    width: 2.8rem;
    height: 2.8rem;
    font-size: 2.8rem;
    margin-top: .2rem;
    margin-right: 1rem;
}

.seccion__footer .cuerpo .columna button{
    background: transparent;
    padding: 0;
    border: 0;
    cursor: pointer;
    margin-right: 2.5rem;
}

.seccion__footer .cuerpo .columna button svg{
    width: 2.4rem;
}

.seccion__footer .bajada{
    display: flex;
    justify-content: space-between;
}

.seccion__footer .bajada .links .item a{
    text-decoration: underline;
    opacity: .5;
    transition: opacity ease-in .2s;
}
.seccion__footer .bajada .links .item a:hover{opacity: 1;}

.seccion__footer .bajada .copyright{
    opacity: .5;
}