/* ==========================================================================
   Lagunas Green — utilidades del tema hijo.

   TODO lo demas (colores, tipografias, espaciados, layout) se edita en
   Elementor: Ajustes del sitio -> Colores globales / Fuentes globales, y los
   contenedores de cada seccion. Este archivo solo cubre lo que Elementor no
   expone de forma nativa.
   ========================================================================== */

/* --- Desplazamiento suave nativo entre anclas ---------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Cabecera fija -------------------------------------------------------
   Elementor pone la clase .elementor-sticky--effects cuando la cabecera pasa
   al estado "pegado". Aqui se define ese estado: fondo bone translucido,
   textos en azul y cambio de logotipo. Para editar los colores, usar las
   variables de color global de Elementor.
   ------------------------------------------------------------------------ */
.lg-header.elementor-sticky--effects {
  background-color: rgba(250, 248, 244, 0.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(17, 86, 132, 0.16);
}
.lg-header.elementor-sticky--effects .lg-logo-light { display: none; }
.lg-header.elementor-sticky--effects .lg-logo-dark { display: block; }
.lg-header .lg-logo-dark { display: none; }

/* Enlaces y boton de la cabecera cuando esta pegada. */
.lg-header.elementor-sticky--effects .lg-nav a,
.lg-header.elementor-sticky--effects .lg-nav .elementor-heading-title {
  color: var(--e-global-color-primary) !important;
}
.lg-header.elementor-sticky--effects .lg-cta a {
  color: var(--e-global-color-primary) !important;
  border-color: var(--e-global-color-primary) !important;
}
.lg-header.elementor-sticky--effects .lg-cta a:hover {
  color: var(--e-global-color-bone, #faf8f4) !important;
  background-color: var(--e-global-color-primary) !important;
}

/* La cabecera se superpone al hero. */
.lg-header { z-index: 100; }

/* Indicador de scroll anclado al pie del hero.
   Elementor no expone desplazamientos para contenedores, asi que se ancla
   aqui; su contenido (texto y filete) si se edita en el editor. */
.lg-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
}
@media (max-width: 1024px) {
  /* Por debajo de 1024 los enlaces no caben junto al boton: se ocultan y
     queda el CTA, que lleva al formulario. Elementor fuerza display:flex en
     los widgets, de ahi la especificidad extra. */
  .lg-header .lg-menu { display: none !important; }
}
@media (max-width: 767px) {
  .lg-cue { bottom: 24px; }
}

/* --- Enlace externo del menu ---------------------------------------------
   Cualquier elemento del menu de WordPress que lleve la clase "lg-ext" se
   pinta con el aqua de marca y una flecha de salida a otra pagina. Para
   aplicarlo o quitarlo: campo "Clases CSS" del elemento en
   Apariencia -> Menus (si no aparece, activarlo en Opciones de pantalla).
   El destino y el "abrir en pestana nueva" tambien se editan ahi.
   ------------------------------------------------------------------------ */
.lg-header .lg-menu .menu-item.lg-ext {
  display: flex;
  align-items: center;
  /* Sobre el hero el aqua saturado se apaga frente a los enlaces blancos:
     se usa un aclarado de la misma familia, que mantiene el tono pero se lee
     igual de bien. Con la cabecera pegada, sobre bone, se usa el aqua
     oscurecido para pasar el contraste AA (4.9:1 frente a 3.5:1). */
  --lg-ext-color: #C2E3E8;
}
.lg-header.elementor-sticky--effects .lg-menu .menu-item.lg-ext {
  --lg-ext-color: #3F757E;
}
.lg-header .lg-menu .menu-item.lg-ext:hover {
  --lg-ext-color: #ffffff;
}
.lg-header.elementor-sticky--effects .lg-menu .menu-item.lg-ext:hover {
  --lg-ext-color: var(--e-global-color-primary, #115684);
}

/* Elementor fija el color del enlace desde el widget, de ahi el !important. */
.lg-header .lg-menu .menu-item.lg-ext > a.elementor-item {
  color: var(--lg-ext-color) !important;
  opacity: 1;
}

/* La flecha cuelga del <li>, no del <a>: Elementor ya usa el ::after del
   enlace para el subrayado del hover. La mascara toma el color de arriba. */
.lg-header .lg-menu .menu-item.lg-ext::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 7px;
  background-color: var(--lg-ext-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lg-header .lg-menu .menu-item.lg-ext:hover::after {
  transform: translate(2px, -2px);
}

/* --- Slider de "Golf in, golf out" ---------------------------------------
   Elementor deja el carrusel de medios en 230 px de alto fijos y no expone
   ningun control de altura ni de proporcion. Aqui se ata a la proporcion de
   las fotos (3:2). Se encadena la clase del skin porque la hoja de Elementor
   declara lo mismo con igual especificidad y carga despues.
   Afecta solo a este carrusel, por la clase lg-golf-slider.
   ------------------------------------------------------------------------ */
.lg-golf-slider.elementor-skin-carousel .elementor-main-swiper {
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: 640px;
}
.lg-golf-slider .swiper-slide,
.lg-golf-slider .elementor-carousel-image {
  height: 100%;
}

/* --- Revelado por lineas (.lg-split) -------------------------------------
   El movimiento lo aplica GSAP + SplitText desde assets/js/motion.js.
   Para activarlo o quitarlo en cualquier titulo, basta con anadir o borrar la
   clase "lg-split" en Avanzado -> Clases CSS del widget dentro de Elementor.
   GSAP enmascara cada linea con overflow:clip en linea; overflow-clip-margin
   ensancha el area pintada para que las tildes de la Cormorant no se corten.
   ------------------------------------------------------------------------ */
.lg-mask-line-mask { overflow-clip-margin: 0.14em; }

/* --- Detalles tipograficos ----------------------------------------------- */
.lg-balance .elementor-heading-title,
.lg-balance { text-wrap: balance; }

/* Filete corto decorativo, para separadores estrechos. */
.lg-hairline { opacity: 0.55; }

/* --- Accesibilidad -------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--e-global-color-secondary, #4f8d97);
  outline-offset: 3px;
}

/* --- Movimiento reducido -------------------------------------------------
   Anula tambien los efectos de movimiento nativos de Elementor.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { visibility: visible !important; opacity: 1 !important; }
  [data-settings*="motion_fx"] { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}