/**
 * Ajustes para funcionamiento como sitio estático (sin servidor / file://).
 *
 * NOTA sobre .elementor-invisible:
 * Elementor oculta elementos con .elementor-invisible (visibility:hidden) y los
 * revela con JavaScript al animarlos en scroll. NO forzamos aquí su visibilidad
 * con CSS, porque eso hacía que los elementos aparecieran primero y luego se
 * volvieran a animar (doble efecto). En su lugar, un script de respaldo
 * (elementor-fallback.js) revela estos elementos únicamente si el runtime de
 * Elementor no arrancó tras unos segundos.
 */

/* Asegura que las imágenes del carrusel tengan una altura visible y no
   colapsen antes de que Swiper calcule las dimensiones. */
.elementor-image-carousel-wrapper.swiper {
  width: 100%;
}

.elementor-image-carousel .swiper-slide {
  display: flex;
  height: auto;
}

.elementor-image-carousel .swiper-slide .swiper-slide-inner {
  width: 100%;
  margin: 0;
}

.elementor-image-carousel .swiper-slide-image {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------
   Video facade (YouTube) para funcionamiento estático sin Elementor JS.
   Muestra la portada con botón de play; al hacer clic carga el iframe.
   ------------------------------------------------------------------------- */
.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
}

/* Fallback para navegadores sin soporte de aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
  .video-facade {
    height: 0;
    padding-bottom: 56.25%;
  }
}

.video-facade .elementor-custom-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Se usa !important y width/height fijos porque el CSS de Elementor aplica
   reglas de mayor especificidad al svg (algunas sin tamaño, dejándolo enorme).
   Esto garantiza un botón de play de tamaño consistente y centrado. */
.video-facade .elementor-custom-embed-play svg {
  width: 60px !important;
  height: 60px !important;
  fill: #ffffff !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  opacity: 0.9;
}

.video-facade:hover .elementor-custom-embed-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-facade.is-playing {
  cursor: default;
  aspect-ratio: 16 / 9;
}

.video-facade .video-facade-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Enlace de respaldo cuando el embed de YouTube es rechazado (file:// / Error 153). */
.video-facade-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-family: "Exo", Sans-serif;
}

.video-facade-fallback p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.video-facade-fallback-link {
  display: inline-block;
  padding: 10px 22px;
  background: #eb008b;
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none !important;
}

.video-facade-fallback-link:hover {
  background: #c70176;
}

/* -------------------------------------------------------------------------
   Animación de "flotación" para la figura dentro de la sección LiveOps.
   Se aplica a la <img> interna del widget 1209a5fd para no interferir con
   el efecto motion-fx (seguimiento del mouse) que Elementor aplica al
   contenedor del widget.
   ------------------------------------------------------------------------- */
@keyframes odc-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.elementor-element-1209a5fd .elementor-widget-container img {
  animation: odc-float 3.5s ease-in-out infinite;
  will-change: transform;
}

/* Respeta la preferencia de reducir movimiento del usuario. */
@media (prefers-reduced-motion: reduce) {
  .elementor-element-1209a5fd .elementor-widget-container img {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Menú hamburguesa (móvil) controlado por menu-toggle.js.
   El dropdown del nav-menu de Elementor se muestra/oculta según la clase
   .odc-menu-open que el script añade al widget del menú. Usamos !important
   para ganarle a las reglas internas de Elementor.
   ------------------------------------------------------------------------- */

/* Dropdown oculto por defecto. */
.elementor-widget-nav-menu .elementor-nav-menu--dropdown {
  display: none !important;
}

/* Dropdown visible cuando el menú está abierto.
   Se posiciona FIXED bajo la barra del header para ocupar todo el ancho de la
   pantalla y evitar que el header (con overflow/ancho limitado) lo recorte. */
.elementor-widget-nav-menu.odc-menu-open .elementor-nav-menu--dropdown {
  display: block !important;
  position: fixed;
  left: 0;
  right: 0;
  top: 60px; /* debajo de la barra del header en móvil */
  width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 9999;
  background-color: var(--e-global-color-text, #000000);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* La lista dentro del dropdown a ancho completo y en columna. */
.elementor-widget-nav-menu.odc-menu-open .elementor-nav-menu--dropdown .elementor-nav-menu {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.elementor-widget-nav-menu.odc-menu-open .elementor-nav-menu--dropdown .elementor-nav-menu > li {
  width: 100%;
}

.elementor-widget-nav-menu.odc-menu-open .elementor-nav-menu--dropdown .elementor-item {
  display: block;
  width: 100%;
  padding: 15px 20px;
  color: var(--e-global-color-secondary, #ffffff);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Alterna el icono hamburguesa/cerrar según el estado. */
.elementor-menu-toggle .elementor-menu-toggle__icon--close {
  display: none;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
  display: none;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
  display: block;
}

/* El botón hamburguesa debe poder recibir clics. */
.elementor-menu-toggle {
  cursor: pointer;
}