@import url('https://db.onlinewebfonts.com/c/a919779c7bf67165eaeaa5375be6fe90?family=Genty+Demo+Regular');

@import url('https://fonts.cdnfonts.com/css/blogger-sans');
:root{
    --fuenteHeading: "Genty Demo Regular", sans-serif;
    --fuenteParrafos: 'Blogger Sans', sans-serif;

    --primario: #784d3C;
    --gris: #e1e1e1;
    --blanco: #FFFF;
    --negro: #000;
    --verde: #4dadae;
    --rosa:#bc85bc;
    --amarillo:#efaa0c;
    --celeste:#93a9ff;
    --rosaFuerte:#fdb3fd;
    --naranja:#ef601d;
}

html{
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}
*, *:before, *:after{
    box-sizing: inherit;
}

body{
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 2;
 
}



/*Generals*/
ul li{
   list-style: none; 
   
}
a{
    text-decoration: none;
}
h1{
    font-size: 6rem;
}
h2{
    font-size: 5rem;
    font-weight: bolder;
    margin: 0;
}
h3{
    font-size: 4rem;
}
h4{
    font-size: 2.5rem;
    color: var(--blanco);
}
.verde{
    background-color: var(--verde);
}
.rosa{
    background-color: var(--rosa);
}
.amarillo{
    background-color: var(--amarillo);
}
.naranja{
    background-color: var(--naranja);
}
.rosaFuerte{
    background-color: var(--rosaFuerte);
}
.celeste{
    background-color: var(--celeste);
}
.color-azul{
    color:var(--celeste)
}
/*Header*/
.imagenNene{
    width: 100%;
}
@media (min-width:768px) {
    .imagenNene{
        width: 500px;
    };    
}
.redes{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-right: 20rem;
}
header{
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;    
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
.notwebp header{
    background-image: url(../assets/images/headingAmarillo.png);
}
.webp header{
    background-image: url(../assets/images/headingAmarillo.webp);
}
@media (min-width:768px) {
    .ordenButtons{
        display: flex;
    }
    
}
p{
    font-size: 2rem;
    margin:0;
    padding: 0;
}
h1{
    text-transform: uppercase;
    margin:0;
    font-size: 9rem;
    margin-bottom: 5rem;
    font-family: var(--fuenteHeading);
}

.divName{
    display: flex;
    gap:1rem;
}

/*Botón*/
.buttonA{
    width: 30rem;
    display: block;
    font-family: var(--fuenteParrafos);
    color: var(--negro);
    text-align: center;
    padding: .5rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .5rem;
    font-weight: bold;
    margin-bottom: 2rem;
    border-radius: 50px;
}

.buttonA:hover{
    color: white;
}
/*Main*/
main{
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.quienesSomos, .queHacemos{
    height: 50%;
    color: white;
}


.quienesSomos{    
    background-repeat: no-repeat;
    padding: 2rem;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.notwebp .quienesSomos{
    background-image: url(../assets/images/violetaCelu.png);
}
.webp .quienesSomos{
    background-image: url(../assets/images/violetaCelu.webp);
}
.quienesSomos-div{
    width: 100%;
    text-align: center;
}

.queHacemos{
    padding: 0 4.3rem;
    background-color: #fdb3fd;
}
.queHacemos p{    
    color:var(--negro);
    font-size: 1.2rem;    
}
@media (min-width:400px) {
    .queHacemos p{    
        font-size: 1rem;    
    }
    
}
@media (min-width:500px) {
    .queHacemos p{    
        font-size: 1.3rem;    
    }
    
}
@media (min-width:768px) {
    .queHacemos p{    
        font-size: 1.8rem;    
    }
    
}
.queHacemos h3{
    font-size: 4rem;
    line-height: 1;

}
@media (min-width:900px) {
    main{
        flex-direction:row;
    }
    .quienesSomos, .queHacemos{
        width: 50%;
        height: 100%;
    }
    .quienesSomos-div{
        width: 45rem;
    }
    .queHacemos p{
        font-size: 2rem;
        margin-bottom: 1rem;
        
    }    
}
/*Servicios*/
section h2{
    text-align: center;
}
.servicios{

    display: flex;
    justify-content: space-around;
    padding: 4rem;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
@media (min-width: 768px) {
    .servicios{
        flex-direction: row;
    }
    
}
.servicios-card{    
    display: flex;
    width: 34rem;
    height: 43rem;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    flex-direction: column;
    justify-content: flex-end;    
}

.servicios-card-overlay p{
     padding: 1rem;
}

.servicios-redes, .servicios-generacion, .servicios-asesoria{
    position: relative;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.servicios-card-overlay{
    color: white;
    font-size: 1rem;
    line-height: normal;
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.65);
    height: 0;
    width: 100%;
    transition: 0.5s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.servicios-card-overlay ul li{
    list-style: dot;
    font-size: medium;

}
.servicios-card:hover .servicios-card-overlay{
    height: 100%;    
}
.notwebp .servicios-redes{
    background-image: url(../assets/images/cardAmarilla.png);
}
.webp .servicios-redes{
    background-image: url(../assets/images/cardAmarilla.webp);

}
.notwebp .servicios-generacion{
    background-image: url(../assets/images/cardVioleta.png);
}
.webp .servicios-generacion{
    background-image: url(../assets/images/cardVioleta.webp);
}
.notwebp .servicios-asesoria{
    background-image: url(../assets/images/cardNaranja.png);
}
.webp .servicios-asesoria{
    background-image: url(../assets/images/cardNaranja.png);
}
.servicios-card-titulo{
    height: 15rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.servicios-card-titulo h4{
    margin: 0;
    width: 20rem;
    line-height: normal;
}
.servicios-card-titulo-flecha{
    display: flex;
    align-items:  center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border:1px white solid;    
    border-radius: 50px;
}
/* Collabs */
.collabs{
    background-color: #302b2b;
    display: flex;
    padding: 1rem;
    flex-direction: column;
}
.collabs-text{
    padding-top:2rem;
    line-height: normal;
}
@media (min-width: 1024px){
    .collabs{
        flex-direction: row;
        justify-items:center;
        align-items: space-around;
    }
    .collabs-text{
        width: 50rem;
        padding: 5rem;
    }
}

.collabs h2{
    color: var(--amarillo);
    margin: 0;
    text-align: start;
    
}
.collabs h3{
 color: white;
 text-transform: uppercase;
 font-size: 4rem;
 margin: 0; 
 padding-bottom:3rem;
}
.swiper {
    width: 100%;
    padding-bottom: 1.2rem;
  }
@media (min-width: 768px) {
    .swiper{
        padding-top:5rem;
    }
    .collabs h3{
        font-size: 5rem;
        line-height: 1.5;
        padding-bottom:0;
    }
    
}

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 30rem;
  }

  @media (min-width: 1100px) {
    .swiper-slide{
        width: 20rem;
    }    
  }
  @media (min-width: 900px) {
    .swiper-slide{
        width: 20rem;
    }    
  }
  @media (min-width: 700px) {
    .swiper-slide{
        width: 25rem;
    }    
  }
  @media (min-width: 610px) {
    .swiper-slide{
        width: 30rem;
    }    
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    border-radius: 14px;
  } 
  @media (min-width: 768px) {
    .swiper-slide img {
        display: block;
        width: 100%;
        border-radius: 14px;
      } 
  }

/* Clientes Links */
.clientes{
    padding: 3rem;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
@media (min-width:768px) {
    .clientes{
        flex-direction: row;
    }
    
}
.clientes-links{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap:2rem;
}
@media (min-width:768px) {
    .clientes-links{
        grid-template-columns: repeat(5, 1fr);
    }
    
}

.clientes-link-circulo{
    display: flex;
    cursor: pointer;
    border: none;
    padding: 16px 32px;
    color: azure;
    font-size: 1.4rem;
    font-weight: bold;
    position: relative;
    align-items:  center;
    justify-content: center;
    width: 8rem;
    height: 5rem;
    border:1px white solid;    
    border-radius: 50px;
}
.clientes-link-circulo:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, red, blue, deeppink, blue, red, blue, deeppink, blue);
    background-size: 800%;
    border-radius: 12px;
    filter: blur(8px);
    animation: glowing 20s linear infinite;
}
.clientes-link-circulo a{
    color: white;
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}
/* programación */
.programacion-web{
    padding: 5rem;
    
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: space-around;    
}
.notwebp .programacion-web{
    background-image: url(../assets/images/naranjaCelu.png);
}
.webp .programacion-web{
    background-image: url(../assets/images/naranjaCelu.webp);
}
@media (min-width: 768px) {
    .programacion-web{
        flex-direction:row;
    }
    .programacion-web-flex{
        width: 300rem;
        display: flex;
        align-items: flex-end;
    }
    
}
.programacion-lista{
    list-style: circle;
}
/* contacto */
.contacto{
    color:var(--blanco);
    height: 100vh;
    
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.notwebp .contacto{
    background-image: url(../assets/images/amarillloContacto.png);
}
.webp .contacto{
    background-image: url(../assets/images/amarillloContacto.webp);
}
.contacto h1{
    text-transform: none;
    margin: 0;
    border-bottom: solid 0.5rem;
    font-size: 6rem;
    padding: 0;
}
.contacto a{
    text-decoration: none;
    color: var(--blanco);
}
.contacto-contactos{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
@media (min-width: 768px) {
    .contacto-contactos{
        flex-direction: row;
    }
}
/* Footer */
footer{
    border-top: 1px #f7f7f7 solid;
    margin-top: -5rem;
    color: #f7f7f7;
    text-align: center;
}