@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;600;700&display=swap');

#vacioIframe{position: absolute;}
:root{
    --grisTenue:#F4F4F6;
    --blanco70: rgba(255, 255, 255, 0.7 );
    --aMarillo: #FBB03B;
    --aZuloscuro: #354459;
    --aZuloscuroAlpha: rgba(53, 68, 89, 0.8);
    --verdeGuia: rgba(0, 255, 128, .05);
    --verdeOscuro: #3f0092;
    --celestePastel: #3493CE;

}

#contactoContenido{
    font-family: 'KoHo', sans-serif;
    font-size: 1rem;
    font-weight:lighter;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 300px;
}

#contactos{
    display: flex;
    width:  70%;
    height: 50%;
}

#contactosDatos{
    position: relative;    border-right: rgba(255, 255, 255, 0.507) 1px solid;
    padding-right: 30px;
    height: 100%;
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

h6{
    margin-top: 10px;
    text-align: right;
    font-size: 1.2rem;
    color: #8a8a8a;
    font-weight: 400;
}
h5{
    border-left: var(--verdeOscuro) 4px solid;
    padding-left: 10px;
    font-size: 1rem;
    color: white;
    font-weight: lighter;
    text-align: end;
    transition: background-color .2s ease-out;
    animation: parpadeo .1s infinite;
}
@keyframes parpadeo{
    from{border-left: #5b299c 4px solid;}
    to{border-left: #643e96 4px solid;}
}
h5:hover{
    background-color: var(--verdeOscuro);
}

#iconosRedes{
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content:right;
}
.iconRedes{
    cursor: pointer;
    margin: 0; 
    margin-left: 10px;
    width: 50px;
    height: 50px;
    fill: var(--grisTenue);
}
#linke{
    transform-origin: top left;
    transform: scale(1.2);
}

.iconRedes:hover{
    box-shadow: cornsilk 0px 0px 15px -5px;
    transform: scale(1.1);
    fill: rgb(255, 230, 0);
}
#capaFace:hover{
    fill: rgb(255, 230, 0);
}
#capaInsta:hover{
    fill: rgb(255, 230, 0);
}
#capaYou:hover{
    fill: rgb(255, 230, 0);
}
.st0 {fill: var(--aMarillo);}
#contactosDatos svg{
    margin-bottom: 50px;
}


#form{
    position: relative;
    margin-left: 30px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    width: 45%;
    height: 100%;
    font-size: 90px;
}
input, textarea {
    background: #455167;
    transition: all 200ms ease;
    border-left: 0 solid transparent;
    font-size: 20px;
    color: rgb(255, 255, 255);
    margin-bottom:16px;
  }
  
  input:not(:placeholder-shown):valid {
    border-left: 1rem solid #3f0092;
  }
  
  input:not(:placeholder-shown):invalid {
    border-left: 1rem solid rgb(209 50 81);
  }
  textarea:not(:placeholder-shown):valid {
    border-left: 1rem solid #3f0092;
  }
  textarea:not(:placeholder-shown):invalid {
    border-left: 1rem solid rgb(209 50 81);
  }
  
  textarea,
  input,
  button {
    border: 0;
    width: 100%;
    height: 3.2rem;
    padding: 0 calc(3.2rem * 0.5);
    border-radius: calc(3.2rem * 0.1);
  }
  
 input::-webkit-input-placeholder{
    color: rgba(255, 255, 255, 0.5);
    background:transparent ;
}
textarea::-webkit-input-placeholder{
    color: rgba(255, 255, 255, 0.5);
    background:transparent ;
}
textarea{
    height: 40%;
} 
  button {
    transition: all .2s ease-out;
    position: absolute;
    bottom:-60px;
    width: 70%;  
    cursor: pointer;
    background: var(--aMarillo);
    border-top-right-radius: 0;
    font-size: 1.4rem;
    font-weight: 600;
    border-top-left-radius: calc(3.2rem * 0.6);
    border-bottom-left-radius: calc(3.2rem * 0.6);
    border-bottom-right-radius: calc(3.2rem * 0.6);
  }




@media(max-width: 1920px){
    h6{font-size: 1.2rem;}
    h5{font-size: 1rem;margin-bottom: 4px;}
    #wsp{transform-origin: right; transform: scale(.7);}
}
@media(max-width: 1200px){
    #contactoContenido{    margin-right: 0px;}
    #contactos{width: 70%;}
    h6{font-size: 1.6rem;}
    h5{font-size: 1.2rem;margin-bottom: 8px;}
    h2{font-size: 1rem;}
    #envioBoton{font-size: 1rem;}
    #mensajes{font-size: .8rem;}
    #contactosDatos{width: 65%;}
    #form{width: 35%;}
    #form input{ font-size: 1rem; padding-left: 10px; padding-right: 10px;}
    textarea{font-size: 1rem;padding-left: 10px; padding-right: 10px;}
}
@media(max-width: 1024px){
    #contactosDatos{width: 60%;}
    #form{width: 40%;}
    h6{font-size: 1.3rem;}
    h5{font-size: 1rem;margin-bottom: 8px;}
}
@media(max-width: 800px){
    #contactos{width: 70%;height: 60%; flex-direction: column;}
    #contactosDatos{width: 100%; height: 100%; border-right: 0px; border-left: white 6px solid; align-items: flex-start; padding-left: 4%;}
/*     #form{width: 100%; height: 0%;display: none;} */
    #form{width: 80%;}
    #contactoContenido{align-items: initial; padding-top: 90px;}
    h6,h5{text-align: left;}
    button{bottom:-40px;}
    #mensajes{font-size: .9rem; height: 10px;}
}
@media(max-width: 720px){
    #contactos{width: 84%; }
}
@media(max-width: 520px){
    #iconosRedes{
        flex-direction: column;
        left: -36px; 
        /* transform-origin: right; */
        transform:scale(.6) translateY(340px)}
    h6{font-size: 1rem;}
    h5{font-size: 1rem;margin-bottom: 8px;}
    #contactos{width: 90%;position: relative; left: 20px;}
}