.elementor-9355 .elementor-element.elementor-element-adc76c1{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9355 .elementor-element.elementor-element-87a4458{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9355 .elementor-element.elementor-element-87a4458 .elementor-wrapper{--video-aspect-ratio:1.77777;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}#elementor-popup-modal-9355{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-9355 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-9355 .dialog-close-button{display:flex;}#elementor-popup-modal-9355 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for container, class: .elementor-element-adc76c1 *//* =========================================
   CITOCOL – Botón cerrar (X) en popup Elementor
   Selector: .dialog-close-button.dialog-lightbox-close-button
   ========================================= */

/* 1) Botón (contenedor) */
.dialog-close-button.dialog-lightbox-close-button{
  /* Tamaño del botón clickeable (más fácil de cerrar) */
  width: 44px;
  height: 44px;
  
  margin-top: -70px;
  margin-right: -80px;

  /* Forma tipo "chip" redondo */
  border-radius: 999px;

  /* Fondo discreto para que se vea siempre (puedes cambiarlo o quitarlo) */
  background: rgba(0,0,0,.25);

  /* Color del icono (amarillo Citocol) */
  color: #F7A200 !important;

  /* Centrar el icono dentro */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Quita estilos raros de link */
  text-decoration: none !important;

  /* Suavidad */
  transition: 
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

/* 2) Hover (amarillo más pálido + sensación de botón) */
.dialog-close-button.dialog-lightbox-close-button:hover{
  color: #FFD27A !important;               /* 👈 amarillo más pálido */
  background: rgba(0,0,0,.35);             /* un poco más oscuro para contraste */
  transform: translateY(-1px);
}

/* 3) Hacer el icono más grande
   Elementor usa SVG con <use>, así que escalamos el svg */
.dialog-close-button.dialog-lightbox-close-button svg{
  width: 22px;   /* 👈 sube/baja a tu gusto */
  height: 22px;  /* 👈 sube/baja a tu gusto */
  fill: currentColor; /* el icono toma el color del botón */
}

/* 4) Accesibilidad: foco visible sin verse feo */
.dialog-close-button.dialog-lightbox-close-button:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(247,162,0,.35); /* halo amarillo suave */
}/* End custom CSS */