/* =========================================================
   Sistema de efectos para paginas con Elementor
   Copiar a: wp-content/themes/<child>/assets/efectos.css

   Como se usa, desde Elementor:
   Selecciona cualquier contenedor o widget, abre la pestana
   Avanzado, y escribe una de estas palabras en el campo
   "CSS Classes".

     fx-reveal           aparece subiendo al entrar en pantalla
     fx-reveal-left      igual, pero entra desde la izquierda
     fx-reveal-right     igual, pero entra desde la derecha
     fx-reveal-stagger   sus hijos entran uno detras de otro
     fx-parallax         el fondo se mueve mas lento que el scroll
     fx-zoom             la imagen se acerca al pasar el mouse
     fx-count            el numero cuenta hacia arriba
     fx-measure          limita el ancho del parrafo para leerlo comodo
     fx-header           encabezado pegado arriba que se encoge
     fx-btn-outline      boton de contorno, sin relleno
     fx-no-motion        apaga toda animacion en ese elemento

   Borrar la palabra apaga el efecto. Nada mas que hacer.
   ========================================================= */

:root {
  --fx-dur: 0.7s;
  --fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fx-measure: 62ch;
}

/* ---------- Aparecer al hacer scroll ---------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
  will-change: opacity, transform;
}

.fx-reveal.fx-in {
  opacity: 1 !important;
  transform: none !important;
}

.fx-reveal-left  { transform: translateX(-32px); }
.fx-reveal-right { transform: translateX(32px); }
.fx-reveal-left.fx-in,
.fx-reveal-right.fx-in { transform: none; }

/* ---------- Entrada en cascada ---------- */
/* El retraso de cada hijo lo escribe efectos.js */
.fx-reveal-stagger > *,
.fx-reveal-stagger > .e-con-inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
}

.fx-reveal-stagger.fx-in > *,
.fx-reveal-stagger.fx-in > .e-con-inner > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Acercamiento de imagen ---------- */
.fx-zoom,
.fx-zoom .elementor-widget-container,
.fx-zoom figure {
  overflow: hidden;
}

.fx-zoom img {
  transition: transform 0.7s var(--fx-ease);
  will-change: transform;
}

.fx-zoom:hover img {
  transform: scale(1.05);
}

/* ---------- Parallax ---------- */
/* efectos.js escribe --fx-shift. El elemento conserva su propio fondo. */
.fx-parallax {
  background-position: center calc(50% + var(--fx-shift, 0px)) !important;
  will-change: background-position;
}

/* ---------- Ancho de lectura ---------- */
/* Un parrafo centrado y muy ancho se lee mal porque el ojo pierde el
   renglon al volver. Esto lo limita sin sacarlo del centro. */
.fx-measure,
.fx-measure p {
  max-width: var(--fx-measure);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Encabezado pegado ---------- */
.fx-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background-color 0.3s var(--fx-ease),
              box-shadow 0.3s var(--fx-ease),
              padding 0.3s var(--fx-ease);
}

.fx-header.fx-header-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ---------- Boton de contorno ---------- */
/* Para el boton secundario que acompana al principal en el hero. */
.fx-btn-outline .elementor-button {
  box-shadow: inset 0 0 0 2px currentColor;
}

/* ---------- Tarjetas ---------- */
/* Levanta la tarjeta al pasar el mouse. Le dice a la persona que
   eso se puede tocar, sin escribir "haga clic aqui". */
.fx-card {
  transition: transform 0.35s var(--fx-ease),
              box-shadow 0.35s var(--fx-ease);
}

.fx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* ---------- Accesibilidad ---------- */
/* Quien le pidio a su sistema menos animacion no recibe ninguna.
   No quitar: hay gente a la que el movimiento le produce mareo. */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal,
  .fx-reveal-stagger > *,
  .fx-reveal-stagger > .e-con-inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fx-zoom img,
  .fx-header,
  .fx-card {
    transition: none !important;
  }
  .fx-zoom:hover img,
  .fx-card:hover {
    transform: none !important;
  }
  .fx-parallax {
    background-position: center center !important;
  }
}

/* ---------- Celular ---------- */
/* El parallax se apaga en pantalla chica: cuesta rendimiento y se ve mal.
   El recorrido de entrada se acorta porque la pantalla es mas corta. */
@media (max-width: 767px) {
  .fx-parallax {
    background-position: center center !important;
    background-attachment: scroll !important;
  }
  .fx-reveal,
  .fx-reveal-stagger > *,
  .fx-reveal-stagger > .e-con-inner > * {
    transform: translateY(16px);
  }
  .fx-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ---------- Apagar todo ---------- */
.fx-no-motion,
.fx-no-motion * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ---------- Nada se esconde si el JS no corrio ----------
   efectos.js le pone la clase fx-js al <html> apenas arranca. Si el
   archivo no carga, si otro script revienta antes, o si el navegador
   no soporta algo, esta regla deja todo visible. El movimiento es un
   adorno; el contenido no puede depender de que JavaScript funcione. */
html:not(.fx-js) .fx-reveal,
html:not(.fx-js) .fx-reveal-stagger > *,
html:not(.fx-js) .fx-reveal-stagger > .e-con-inner > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}