
.fa,
.fas {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; }

/* a continuación hay que poner la instrucción concreta de cada icono. fijaros que en realidad mediante el pseudo-selector ::before introducimos contenido delante de la etiqueta*/

.fa-thumbs-down:before {
  content: "\f165"; }

.fa-thumbs-up:before {
  content: "\f164"; }

/*si estás familiarizado con los breakpoints de bootstrap esto te gustará*/
.fa-lg {
  font-size: 1.33333rem;
  line-height: 0.75rem;
  vertical-align: -.0667rem; }

.fa-xs {
  font-size: .75rem; }

.fa-sm {
  font-size: .875rem; }

/*poner el icono a la izquierda o a la derecha*/
.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

  .fa-regular, .fa-brands {
    font-size:1.5rem;
  }


/* ---------------------------------------- */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  }
  
  .fa:hover {
      opacity: 0.7;
  }
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }
  
  .fa-google {
    background: #dd4b39;
    color: white;
  }
  
  .fa-linkedin {
    background: #007bb5;
    color: white;
  }
  
  .fa-youtube {
    background: #bb0000;
    color: white;
  }
  
  .fa-instagram {
    background: #125688;
    color: white;
  }
  
  .fa-pinterest {
    background: #cb2027;
    color: white;
  }
  
  .fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
  
  .fa-skype {
    background: #00aff0;
    color: white;
  }
  
  .fa-android {
    background: #a4c639;
    color: white;
  }
  
  .fa-dribbble {
    background: #ea4c89;
    color: white;
  }
  
  .fa-vimeo {
    background: #45bbff;
    color: white;
  }
  
  .fa-tumblr {
    background: #2c4762;
    color: white;
  }
  
  .fa-vine {
    background: #00b489;
    color: white;
  }
  
  .fa-foursquare {
    background: #45bbff;
    color: white;
  }
  
  .fa-stumbleupon {
    background: #eb4924;
    color: white;
  }
  
  .fa-flickr {
    background: #f40083;
    color: white;
  }
  
  .fa-yahoo {
    background: #430297;
    color: white;
  }
  
  .fa-soundcloud {
    background: #ff5500;
    color: white;
  }
  
  .fa-reddit {
    background: #ff5700;
    color: white;
  }
  
  .fa-rss {
    background: #ff6600;
    color: white;
  }

/* ---------------------------------------- */

.header {
  /* display: flex; */
  /* border: solid 1px blanchedalmond; */
  /* border: solid 1px red; */
  /* border-radius: 5px; */
}

.header__cabecera  {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* border: solid 1px black; */
  border-radius: 5px;
  
}

.cabecera {
    /* width: 40%; */
    /* background-color:darkseagreen; */
    /* border: solid 1px red; */
}

.div__none {
    display: flex;
    width: 30%;
    /* display: none; */
    /* background-color: chocolate; */
}

/* --------------------------------- */

.redes__sociales {
    width: 15%;
    display: flex;
    justify-content:space-evenly;
    /* border: solid 1px red; */
}

.cabecera, .redes__sociales {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.redes__sociales {
    justify-content: space-around;
}

.redes__sociales a:hover {
    color: var(--color-blanco);
}


.fa-brands {
    display: flex;
    justify-content: center;
    padding: 10px;
    font-size: unset;
    width: 41px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  }
  
  .fa-brands:hover {
      opacity: 0.7;
  }
  

  /*.fa-twitter {
    background: #55ACEE;
    color: white;
  }*/

/* ------------------------------------ */

.cabecera__logo img{
  width: 3.5rem;
  border: solid 1px transparent;
  height: 50%;
  border-radius: 50%;
}

.cabecera__phone .telefono a:disabled {
  
  /* pointer-events: none;
  cursor: none; */
  

}

.cabecera__phone .telefono:hover {
    /* color: var(--color-verde); */
    /* color: var(--color-gris); */
    color: var(--color-blanco);
}

.cabecera__correo .correo:hover {
    /* color: var(--color-gris); */
    color: var(--color-blanco);

}

.telefono {
  pointer-events: none; 
  cursor: default;
}


/* ----------------------------------------- */
/* -----        Meia Queroes           ----- */
/* ----------------------------------------- */

@media (max-width:800px){

    .cabecera {
       
        /* font-size: 2vw; */
    }
    .header__cabecera {
        /* border: solid 2px red; */
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 10px;
        /* width: 100%; */
        margin: 10px 30px;
        font-size: clamp(1vw, 3vw, 5vw);
    }
    .cabecera__logo {
        
    }
    .cabecera__phone {
        
    }
    .cabecera__correo{
        
        
    }


    .div__none :disabled {
        visibility: hidden !important;
        display:none !important;
    }

    
}  