/* POP-UP
========================================== */
pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}


#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  filter: alpha(opacity=60);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.7;
  z-index: 100;
  display: none;
}

.popup .wrap {
  text-align: center;
  /* Centrar contenido */
}

.social-icons-below {
  margin-top: 15px;
  /* Espaciado respecto a la imagen */
}

.gfg {
  position: relative;
}

.gfg img {
  max-width: 100%;
  height: auto;
}


.hover-img {
  transition: transform 0.3s ease;
}

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

.hover-txt {
  transition: transform 0.3s ease;
}

.hover-txt:hover {
  color: #444;
  transform: scale(1.02);
}


.gfg p {
  font-size: 18px;
  font-weight: 400;
  color: #FFF;
  line-height: 1.4;
}

.gfg h2 {
  font-size: 18px;
  font-weight: 400;
  color: #FFF;
  line-height: 1.4;
}

.gfg a {
  width: 100%;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
}

.gfg a:hover {
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
}

.social-icon {
  width: 20px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.2);
  /* Efecto de agrandamiento al pasar el mouse */
}





.highlight {
  color: #FDFFF2FF;
  font-size: 1.1em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  /* Grosor de la línea de subrayado */
  text-underline-offset: 3px;
  /* Ajusta la distancia entre el texto y el subrayado */
}


.popup {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  display: none;
  position: fixed;
  z-index: 101;
}

.cnt223 {
  width: 90%;
  height: 90%;
  border: 4px solid #222;
  text-align: right;
  position: relative;
  z-index: 103;
  padding: 15px 12px;
  border-radius: 5px;
  box-shadow: 0 2px 5px #000;
}


.cnt223 .x {
  float: right;
  height: 35px;
  left: 22px;
  position: relative;
  top: -25px;
  width: 34px;
}

.cnt223 .x:hover {
  cursor: pointer;
}


.pulse {
  --color: #ffffff;
  --hover: #555555;
}


.wrap {
  margin-top: 2px;
}

.wrap a {
  color: var(--color);
  transition: 0.25s;
}

.wrap a:hover,
a:focus {
  color: #fff;
}


.wrap a {
  background: none;
  font: inherit;
  line-height: 1;
  color: #fff;
}

.wrap a:hover {
  color: #555;
}


}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  filter: alpha(opacity=60);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.6;
  opacity: 0.6;
  z-index: 100;
  display: none;
}

.cnt223 a {
  text-decoration: none;
}

.popup {
  width: 100%;
  margin: 0 auto;
  display: none;
  position: fixed;
  z-index: 101;
  height: auto;
}

.cnt223 {
  max-width: 400px;
  margin: 100px auto;
  background: #000000;
  position: relative;
  z-index: 103;
  box-shadow: 0 2px 5px #000;
}

.cnt223 p a {
  color: #ddd;
  left: 22px;
  font-weight: bold;
}

.cnt223 p a:hover {
  color: #444;
}




@media only screen and (max-width: 768px) {
  .gfg p {
    font-size: 13px;
    font-weight: 400;
    color: #FFF;
    line-height: 1.5;
  }

  .wrap {
    margin-top: 2px;
  }

  .wrap a {
    background: none;
    font-size: 11px;
    line-height: 1;
    padding: .5em .4em;
  }
}