.elementor-13 .elementor-element.elementor-element-1b4b136{--display:flex;}.elementor-13 .elementor-element.elementor-element-1b4b136:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-1b4b136 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://robinkhan.com/wp-content/uploads/2024/11/Fondo-manchas-de-colores.png");background-position:center center;background-size:43% auto;}.elementor-13 .elementor-element.elementor-element-5661c3a{--display:flex;}.elementor-13 .elementor-element.elementor-element-5661c3a:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-5661c3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://robinkhan.com/wp-content/uploads/2024/11/Fondo-manchas-de-colores.png");background-position:center center;background-repeat:repeat;background-size:33% auto;}.elementor-13 .elementor-element.elementor-element-38c2760{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px) and (min-width:768px){.elementor-13 .elementor-element.elementor-element-1b4b136{--content-width:500px;}}@media(max-width:1024px){.elementor-13 .elementor-element.elementor-element-1b4b136:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-1b4b136 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://robinkhan.com/wp-content/uploads/2024/11/Fondo-manchas-de-colores.png");background-position:center center;background-size:287px auto;}.elementor-13 .elementor-element.elementor-element-484075e > .elementor-widget-container{padding:0px 62px 0px 62px;}.elementor-13 .elementor-element.elementor-element-5661c3a:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-5661c3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://robinkhan.com/wp-content/uploads/2024/11/Fondo-manchas-de-colores.png");background-position:center center;background-size:239px auto;}}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-1b4b136:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-1b4b136 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://robinkhan.com/wp-content/uploads/2024/11/Fondo-manchas-de-colores.png");background-position:center center;background-size:172px auto;}.elementor-13 .elementor-element.elementor-element-1b4b136{--content-width:500px;}.elementor-13 .elementor-element.elementor-element-484075e > .elementor-widget-container{padding:00px 29px 00px 17px;}.elementor-13 .elementor-element.elementor-element-5661c3a:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-5661c3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://robinkhan.com/wp-content/uploads/2024/11/Fondo-manchas-de-colores.png");background-position:center center;background-size:153px auto;}}/* Start custom CSS for html, class: .elementor-element-fb04d5a */.puertas-adviento {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Esto crea columnas flexibles */
  gap: 15px; /* Espacio entre las puertas */
  justify-items: center; /* Centra las puertas */
  align-items: center;
}

.puerta img {
  width: 100%; /* La imagen se ajusta al ancho del contenedor */
  height: auto; /* Mantiene la relación de aspecto de la imagen */
  transition: transform 0.3s ease-in-out; /* Suaviza la animación */
}

.puerta img:hover {
  transform: scale(1.1); /* Efecto de aumento al pasar el cursor */
}

/* Estilo para el Modal (Lightbox) */
.modal {
  display: none; /* Ocultar por defecto */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%; /* El modal ocupa todo el ancho */
  height: 100%; /* El modal ocupa todo el alto */
  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
  overflow: hidden; /* Evitar scroll */
}

.modal-content {
  background-color: transparent; /* Fondo del modal permanece transparente */
  width: auto; /* Permitir tamaño dinámico */
  height: auto; /* Permitir tamaño dinámico */
  display: flex; /* Habilitar flexbox */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  padding: 0; /* Sin relleno extra */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#regalo-img {
width: auto; /* No forzar un ancho específico */
  height: auto; /* No forzar un alto específico */
  max-width: 90% !important; /* Limitar al 90% del ancho del modal */
  max-height: 90% !important; /* Limitar al 90% del alto del modal */
  display: block; /* Asegura que la imagen sea un bloque */
  margin: 30px auto 0; /* Centra la imagen dentro del modal */
  object-fit: contain; /* Mantiene la proporción de la imagen */
}
 
 /* Para tabletas (ancho de pantalla entre 768px y 1024px) */
 
 
  @media (max-width: 1024px) {
  #regalo-img {
    max-width: 80%!important; /* Haz que sea más grande en tablet */
    max-height: 80%!important;
  
}

}

/* Para móviles (ancho de pantalla menor a 768px) */
@media (max-width: 768px) {
  #regalo-img {
    max-width: 90%!important; /* Haz que sea aún más grande en móvil */
    max-height: 90%!important;
  }
}


/* Estilo del botón de cerrar */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}/* End custom CSS */