/* =========================
   BASE / TIPOGRAFÍA
========================= */

h1,
h2,
.font-weight-bold {
  font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
  font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
  font-weight: 500 !important;
}

.text-pink {
  color: #ec4e8c;
}

.grid {
  text-align: center;
}

/* =========================
   BOTONES / INTERACCIÓN
========================= */

.btn-redes {
  height: 36px;
  width: 36px;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloque-subir {
  right: 46px;
  bottom: 44px;
  position: fixed;
  z-index: 11;
  display: none;
}

/* =========================
   COLORES UTILITARIOS
========================= */

.Rosa {
  background-color: #ff8686;
}

.Verde {
  background-color: #136c51;
}

.Amarillo {
  background-color: #fbb800;
}

.VerdeLimon {
  background-color: #6cac1b;
}

.Azul {
  background-color: #5792ca;
}

.b1 {
  background-color: #c49545;
}

.b2 {
  background-color: #ed3541;
}

.b3 {
  background-color: #01cd8e;
}

/* =========================
   NAV / HEADER
========================= */

.barra::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background-color: #f3f3f3;
}

.navbar-light .navbar-nav .nav-link {
  color: #212121;
  padding: 30px 15px;
  font-weight: 500;
  outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: #ff9a2b;
}

/* =========================
   CABECERAS
========================= */

.cabecera-other,
.cabecera-women {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.cabecera {
  background-image:
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
    url(../img/FondoFAO4.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.cabecera-women {
  background-image:
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
    url(../img/womenIlustration.png);
}

.cabecera-other {
  background-image:
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
    url(../img/mesacomite.jpg);
}

/* =========================
   ESTRUCTURAS FLEX
========================= */

.nuevo {
  display: flex;
  flex-direction: row-reverse;
}

.cuadro,
.cuadro-completo,
.cuadro-flotante {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.cuadro-text {
  margin: 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bloque-completo {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* =========================
   CARRUSEL / OVERLAY
========================= */

.carrusel {
  inset: 0;
  z-index: 1;
  position: absolute;
  padding: 20px 0;
  text-align: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}

/* =========================
   TARJETAS / BLOQUES
========================= */

.bloque {
  padding: 10px 22px;
  margin: 12px;
  display: inline-block;
  border-radius: 12px;
  font-weight: 500;
  color: #ffffff;
}

.bloque-info {
  transition: box-shadow .5s ease;
  text-align: center;
  padding-top: 20px;
}

.bloque-info:hover,
.bloque-texto {
  box-shadow: 0 0 30px #ccc;
}

.bloque-dual {
  justify-content: center;
}

.bloque-dual h4 {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  text-align: center;
}

/* =========================
   PERFIL / EQUIPO
========================= */

.team-item {
  height: 92%;
  display: flex;
  flex-direction: column;
}

.perfil {
  transition: .5s;
}

.perfil:hover {
  box-shadow: 0 0 30px #ccc;
}

.perfil .perfil-img img {
  transition: .5s;
}

.perfil:hover .perfil-img img {
  transform: scale(1.2);
}

/* =========================
   OVERLAY REDES
========================= */

.red {
  inset: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s;
}

.red .btn {
  opacity: 0;
  margin: 0 3px;
  margin-top: 100px;
  position: relative;
}

.perfil:hover .red {
  background: rgba(0, 0, 0, .3);
}

.perfil:hover .red .btn {
  opacity: 1;
  margin-top: 0;
  transition-duration: .3s;
}

/* =========================
   ÁREAS / DESTINOS
========================= */

.areas img {
  transition: .5s;
}

.areas:hover img {
  transform: scale(1.5);
}

.area-a {
  inset: 30px;
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .5);
  transition: .5s;
}

.areas:hover .area-a {
  inset: 0;
  border-width: 30px;
}

/* =========================
   FOOTER / LOGOS
========================= */

.footer-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-max {
  background-color: #fff;
  border-top: 2px solid #e4e4e4;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, .08);
}

.logoWFF {
  height: 58px;
  margin: 0 12px;
}

.redes {
  margin-right: 96px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* =========================
   SOMBRAS
========================= */

.sombreadoBloque {
  box-shadow: 0 0.6rem 1.1rem rgba(0, 0, 0, .15) !important;
}

.boxShadowRosa {
  box-shadow: 0 .15rem .3rem #ff8686 !important;
}

.boxShadowAmarillo {
  box-shadow: 0 .15rem .3rem #fbb800 !important;
}

.boxShadowVerde {
  box-shadow: 0 .15rem .3rem #136c51 !important;
}

/* =========================
   VISIBILIDAD
========================= */

.desktop,
.desktop270 {
  display: block;
}

.movil,
.movil270 {
  display: none;
}

.b1,
.b2,
.b3 {
  display: flex;
}

.img-w {
  width: 50%;
}

.perfil {
  height: 90%;
}

/* =========================
   MEDIA QUERIES
========================= */

@media (max-width: 1200px) {
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }

  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link {
    padding: 10px 15px;
  }
}

@media (min-width: 992px) {

  #header-carousel,
  .cabecera,
  .cabecera-other,
  .cabecera-women {
    margin-top: -42px;
  }

  .about-text {
    margin-left: -120px;
  }

  .about-text-right {
    margin-right: -120px;
  }
}

@media (max-width: 770px) {

  .imagenLateral,
  .decor-img,
  .decor-img-comu {
    display: none;
  }
}

@media (max-width: 576px) {
  .carrusel h4 {
    font-size: 18px;
  }

  .carrusel h1 {
    font-size: 30px;
  }

  .footer-sub {
    flex-direction: column;
    align-items: flex-start;
  }

  .perfil {
    height: 100%;
  }
}

@media (max-width: 330px) {
  .desktop {
    display: none;
  }

  .movil {
    display: block;
  }

  .b1,
  .b2,
  .b3 {
    display: none;
  }
}

@media (max-width: 500px) {
  .img-w {
    width: 100%;
    float: none;
  }
}

@media (max-width: 270px) {
  .desktop270 {
    display: none;
  }

  .movil270 {
    display: block;
  }
}


body {
  background-color: #f3f3f3;
}

.cabecera h3 {
  text-align: center;
}

.col-lg-4 h5,
.container-fluid .m-0 {
  text-align: center;
}

.cuadroAboutInfo {
  background-color: #ffffff;
  box-shadow: 0 0 30px #ccc;
  margin-bottom: 20px;
}

.cuadroAboutInfo .m-0 {
  padding: 20px;
}

.marcado {
  padding: 10px;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

.cuadroAboutInfo .marcado {
  margin-bottom: 0px;
}


.text-extra {
  color: #e94f2b !important;
}

.decor-img {
  width: 100px;
  height: 100%;
}

.hitos .p-4 {
  text-align: center;
}

.btn-outline-extra {
  color: #fff;
  background-color: #ff9a2b;
  border-color: #ff9a2b;
}

.btn-outline-extra:hover {
  color: #fff;
  box-shadow: 0 0 0 0.2rem #ff992b75;
}

.nav-item.dropdown:hover>.nav-link {
  color: #ff9a2b;
}

.perfil.active .red {
  background: rgba(0, 0, 0, .3);
}

.perfil.active .red .btn {
  opacity: 1;
  margin-top: 0;
  transition-duration: .3s;
}

.perfil.active .perfil-img img {
  transform: scale(1.2);
}

p.m-0.text-uppercase {
  font-weight: 600;
  padding-top: 20px;
}