/* ==========================================================================
   Bethesda Spa - Capa de resiliencia (2026-09-02)

   Dos objetivos, ninguno estetico:

   1. Que una actualizacion de Elementor no tumbe la pagina. El riesgo real no
      es el CSS: Elementor pinta los contenedores animados con la clase
      .elementor-invisible (visibility:hidden) y los descubre su propio JS. Si
      ese JS no llega a correr -actualizacion a medias, conflicto con otro
      plugin, script bloqueado por el navegador- la pagina se queda EN BLANCO.
      Aqui se le pone un temporizador de seguridad a TODO el sitio. Antes solo
      estaba protegida la rejilla de la portada.

   2. Que los selectores que dependen del marcado interno de Elementor sigan
      enganchando si ese marcado cambia. bethesda-site.css apunta a
      "> .e-con-inner > .e-con", y ese .e-con-inner solo existe en contenedores
      "boxed": si Elementor cambia como los pinta, esas reglas dejan de aplicar
      y las tarjetas pierden el hover. Cada regla se repite aqui en su version
      sin .e-con-inner, para que funcione con cualquiera de los dos marcados.

   Se carga DESPUES de bethesda-site.css, por eso gana en los empates.
   Aqui no hay diseno: los tamanos, colores y espacios viven en el panel de
   Elementor, donde se pueden ver y editar. Esto es solo red de seguridad.
   ========================================================================== */

:root {
  --bx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 1. Red de seguridad de las animaciones de entrada -------------------- */

@keyframes bxRevealFailsafe {
  to { opacity: 1; visibility: visible; }
}

/* Si a los 2,5 s el JS de Elementor no ha quitado la clase, se muestra igual.
   Cuando el JS si funciona, quita la clase mucho antes y esto nunca se nota. */
.elementor-invisible {
  animation: bxRevealFailsafe 0s linear 2.5s forwards;
}

/* Quien pide menos movimiento ve el contenido de inmediato, sin espera. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .elementor-element,
  .elementor-element * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- 2. Hover de las tarjetas, con y sin .e-con-inner --------------------- */

.elementor-element-69738cf > .e-con {
  overflow: hidden;
  transition: transform .45s var(--bx-ease), box-shadow .45s var(--bx-ease);
}
.elementor-element-69738cf > .e-con:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -12px rgba(59, 70, 61, .22) !important;
}
.elementor-element-69738cf > .e-con:hover h3.elementor-heading-title {
  color: #4e7059;
}

/* --- 3. Que nada se desborde en pantallas estrechas ----------------------- */

/* Nada de overflow-x:hidden en html/body: eso rompe el header sticky. Se
   atacan las causas reales del desbordamiento, no el sintoma. */
.e-con,
.e-con-inner,
.elementor-widget-container {
  min-width: 0;
}

img, video, iframe, table {
  max-width: 100%;
}

/* Nombres de villa, correos y enlaces largos no revientan su caja */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-text-editor {
  overflow-wrap: break-word;
}

/* --- 4. Foco visible para quien navega con teclado ------------------------ */

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #c1703a;
  outline-offset: 3px;
}