/* La X para cerrar el popup de Calendly.
 *
 * Calendly la dibuja como un ícono blanco suelto sobre el velo oscuro, sin caja. Se pierde: quien
 * abre el calendario sin querer, o cambia de idea, no encuentra la salida y queda atrapado en un
 * modal. Una salida difícil de ver no es una salida.
 *
 * Se le da cuerpo: un círculo sólido con borde, y un target táctil de 44px que hoy no tiene.
 * Nada de esto toca el contrato del sitio —el popup es una superficie de Calendly, no del
 * export—, pero sí usa el vocabulario del sistema para que no se sienta pegado.
 */

/* El popup, con margen y radio.
 *
 * A pantalla completa el modal se lee como si el visitante hubiera NAVEGADO a otro sitio: no hay
 * pista de que abajo sigue estando la página, y la salida se vuelve algo que hay que buscar. Con
 * aire en los costados y esquinas redondeadas se lee como una capa temporal apoyada encima —se ve
 * el velo alrededor— y cerrar pasa a ser obviamente posible.
 *
 * NO SE ACHICA MÁS QUE ESTO. Adentro hay un calendario con siete columnas de días y una lista de
 * horarios: cada píxel que se le saca al ancho se lo saca a la grilla. El margen es el mínimo que
 * alcanza para que se note que es una capa.
 */
.calendly-overlay .calendly-popup {
  border-radius: 14px !important;
  overflow: hidden !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 88px) !important;
}

@media (max-width: 767px) {
  .calendly-overlay .calendly-popup {
    /* 16px por lado: suficiente para ver el velo, poco para que la grilla no sufra. Arriba se deja
     * más aire porque ahí vive la X, que necesita su propio espacio para no pisar el contenido. */
    inset: 58px 16px 16px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
  }
}

.calendly-popup-close {
  /* 44px es el piso táctil del resto del sitio. El ícono de Calendly viene en 30 y encima sin
   * caja, así que el área real de toque era todavía más chica que eso. */
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(16, 18, 20, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 50% !important;
  /* el ícono de Calendly es una imagen de fondo: se achica para que respire dentro del círculo */
  background-size: 17px 17px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}

/* La transición va envuelta en `no-preference` a propósito y NO lleva `!important` para la
 * animación: la trampa que este repo pisó seis veces es que un `!important` propio le gana por
 * especificidad a la regla global `* { animation-duration: 0.01ms !important }` de
 * reduced-motion, y el movimiento sobrevive donde debería morir. */
@media (prefers-reduced-motion: no-preference) {
  .calendly-popup-close {
    transition: background-color 140ms ease, transform 140ms ease;
  }
}

.calendly-popup-close:hover,
.calendly-popup-close:focus-visible {
  background-color: rgba(16, 18, 20, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

.calendly-popup-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}