@font-face{
    font-family: mifuente;
    src: url("../Pill\ Gothic\ 600mg\ Light.ttf");
}
:root{
    --fondo: rgb(49,49,49);
    --letra: rgb(245,245,245);
}
.fondo-principal {
    background-color: var(--fondo);
    height: 650px;
}
.icono-principal{
    margin-top: 30px; 
    margin-left: 70px;
    width: 200px;
}

.descripcion .p1{
    color:var(--letra);
    font-family: mifuente;
    font-size: 55px;
    margin-left: 95px;
    margin-top: 100px; 
}
.descripcion .p2{
    color: var(--letra);
    font-family: mifuente;
    font-size: 55px;
    margin-left: 95px;
    margin-top: -40px;
}
.descripcion hr{
    background-color: rgb(83, 197, 207);
    border-radius: 100px;
    height: 3px;
    width: 105px;
    margin-left: 95;
    margin-top: 35px;
    opacity: 1;
}
.descripcion .p3{
    color: var(--letra);
    font-family: mifuente;
    font-size: 22px;
    margin-left: 14px;
    margin-top: 5px;
}
.descripcion .p4{
    color: var(--letra);
    font-family: mifuente;
    font-size: 30px;
    margin-left: 290px;
    margin-top: -20px;
}
.boton-consulta{
    color: var(--letra);
    font-weight: 700;
    background-color: rgb(249,75,113);
    font-family: mifuente;
    width: max-content;
    height: max-content;
    border-radius: 5px;
    font-size: 15px;
    margin-left: 220px;
    margin-top: 20px;
    padding: 12px;
    padding-left: 25px;
    padding-right: 25px;
    
}
.boton-whatsapp{
    display: inline-block;
    position: relative;
    animation: zigzag 2s infinite alternate ease-in-out;
}
@media (max-width: 768px) {
  .boton-whatsapp {
    left: 140;
    top: 15;
    animation: latido 2s infinite;
  }
  @keyframes latido {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
 }
}
@keyframes zigzag {
  0% {
    left: 450;
    top: -70;
  }
  25% {
    left: 470px;
    top: -60px;
  }
  50% {
    left: 490px;
    top: -70;
  }
  75% {
    left: 510px;
    top: -60px;
  }
  100% {
    left: 530px;
    top: -70;
  }
}


.boton-consulta:hover{
    background-color: rgb(202,45,79);
}
.boton-ingresar{
    color: var(--letra);
    margin-top: 30px;
    width: max-content;
    height: max-content;
    border: solid rgb(111,111,111) 1px;
    background-color: rgb(75,75,75);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: 100px;
}
.boton-ingresar:hover{
    background-color: rgb(90,90,90);
}
.icono-animado{
    width: 100px;
}
.icono-celular{
    opacity: .8;
    position: absolute;
    top:110;
    left: 72%;
    animation: icono-celular 3s 1 ;
}
.icono-central{
    opacity: .8;
    position: absolute;
    top:270;
    left: 72%;
    animation: icono-central 3s 1 ;
}
.icono-lcd{
    opacity: .8;
    position: absolute;
    top:180;
    left: 60%;
    animation: iconos-segundos 3s 1 ;
}
.icono-notebook{
    opacity: .8;
    position: absolute;
    top:180;
    left: 85%;
    animation: iconos-segundos 3s 1 ;
}
.icono-tablet{
    opacity: .8;
    position: absolute;
    top:330;
    left: 85%;
    animation: iconos-terceros 3s 1 ;
}
.icono-consola{
    opacity: .8;
    position: absolute;
    top:330;
    left: 60%;
    animation: iconos-terceros 3s 1 ;
}
.icono-scooter{
    opacity: .8;
    position: absolute;
    top:430;
    left: 72%;
    animation: icono-inferior 3s 1 ;
}

.icono-notebook:hover{
    opacity: 1;
}
.icono-celular:hover{
    opacity: 1;
}
.icono-lcd:hover{
    opacity: 1;
}
.icono-central:hover{
    opacity: 1;
}
.icono-tablet:hover{
    opacity: 1;
}
.icono-consola:hover{
    opacity: 1;
}
.icono-scooter:hover{
    opacity: 1;
}
@keyframes iconos-segundos{
    0%{
        top:600;
        opacity: 0;
    }
    50%{
        opacity: .4;
    }
    100%{
        top:180;
        opacity: .8;
    }
}
@keyframes iconos-terceros{
    0%{
        top:600;
        opacity: 0;
    }
    50%{
        opacity: .4;
    }
    100%{
        top:330;
        opacity: .8;
    }
}
@keyframes icono-celular{
    0%{
        top:600;
        opacity: 0;
    }
    50%{
        opacity: .4;
    }
    100%{
        top:110;
        opacity: .8;
    }
}
@keyframes icono-central{
    0%{
        top:600;
        opacity: 0;
    }
    50%{
        opacity: .4;
    }
    100%{
        top:270;
        opacity: .8;
    }
}
@keyframes icono-inferior{
    0%{
        top:600;
        opacity: 0;
    }
    50%{
        opacity: .4;
    }
    100%{
        top:430;
        opacity: .8;
    }
}
.barra {
    background-color: var(--fondo);
    padding-bottom: 20px;
    
}
.barra hr{
    background-color: rgb(83, 197, 207);
    border-radius: 100px;
    height: 3px;
    width: auto;
    opacity: 1;
    margin-top: 0px;
}
.barra .icono-titulo{
    width: 50px;
    height: 50px;
}   
.barra .icono-producto{
    height: 40px;
    width: 50px;
    
}
.barra .titulo {
    color: var(--letra);
    font-family: mifuente;
    text-align: right;
    font-size: 30px;
    font-weight: 600;
}

.fondo-secundario .contenido{
    padding-top: 40px;
    padding-bottom: 40px;
    color:var(--fondo);
    font-family: mifuente;
}