/* =========================================================
   TEACHER MARIA CR - SISTEMA DE EFECTOS
   ---------------------------------------------------------
   Portado del sistema de gogrande.websdl.com y adaptado a la
   paleta de Maria. Cada efecto se activa escribiendo una
   palabra en el campo "CSS Classes" de la pestana Avanzado de
   cualquier elemento de Elementor, asi que Maria puede prender
   y apagar un efecto borrando una palabra.

   Convive con la capa anterior (clases tm-*) sin pisarla: los
   nombres no se cruzan y esta hoja carga ANTES del CSS del
   Personalizador, asi que ante un empate manda el diseno que
   ya estaba aprobado.

   Pensado primero para telefono: todo se mueve con transform y
   opacity. Nada usa background-attachment: fixed, que Safari de
   iPhone no dibuja bien.

   Este Elementor tiene el DOM optimizado (no existe el div
   .elementor-widget-container), asi que los efectos cuelgan del
   widget mismo.
   ========================================================= */

:root {
  --fx-dur:     .7s;
  --fx-ease:    cubic-bezier(.22, .61, .36, 1);
  --fx-curtain: cubic-bezier(.76, 0, .24, 1);
  --fx-measure: 64ch;

  --fx-cortina: #FFF6E9;   /* color del panel que destapa la foto */
  --fx-acento:  #E2574C;   /* el coral de la marca */
  --fx-crema:   #F1DCC0;
  --fx-choco:   #3B2416;
}

/* ---------------------------------------------------------
   1. APARICION AL HACER SCROLL
   La pagina ya trae el motor tm-r para esto. Estas clases
   quedan disponibles para secciones nuevas.
   --------------------------------------------------------- */

.fx-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
}

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

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

.fx-reveal-stagger > *,
.fx-reveal-stagger > .e-con-inner > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  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;
}

/* ---------------------------------------------------------
   2. fx-shot - LA FOTO SE DESTAPA
   ---------------------------------------------------------
   Un panel del color del fondo se corre hacia la izquierda
   destapando la foto, y al mismo tiempo la foto pasa de 1.12
   a 1. Da sensacion de camara sin recortar nada.

   El marco lo crea efectos.js alrededor de la imagen, no del
   widget: el widget suele ser mas ancho que la foto (la foto
   va limitada por CSS a 440 px) y el panel se veria salido.
   El marco copia el redondeo de la propia imagen.
   --------------------------------------------------------- */

.fx-shot-marco {
  position: relative;
  display: block;
  overflow: hidden;
  /* El marco se ajusta a la foto y no al ancho del widget: si no, el
     panel se veria mas ancho que la foto en las columnas anchas. */
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* sin esto queda una franja del color de la cortina bajo la foto:
     es el hueco de la linea base que deja el enlace en linea */
  line-height: 0;
  /* obliga a iOS a componer la capa aparte: evita el borde dentado */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.fx-shot-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fx-cortina);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .9s var(--fx-curtain);
  z-index: 2;
  pointer-events: none;
}

.fx-shot.fx-in .fx-shot-marco::after {
  transform-origin: right center;
  transform: scaleX(0);
}

.fx-shot .fx-shot-marco img {
  display: block;
  transform: scale(var(--fx-zoom, 1.12));
  transition: transform 1.4s var(--fx-ease);
  will-change: transform;
}

.fx-shot.fx-in .fx-shot-marco img { transform: scale(1); }

/* La cortina toma el color de la seccion donde vive la foto */
.fx-cortina-crema  { --fx-cortina: #F1DCC0; }
.fx-cortina-crema2 { --fx-cortina: #E7D2B6; }
.fx-cortina-choco  { --fx-cortina: #3B2416; }

/* ---------------------------------------------------------
   3. fx-brillo - un destello cruza la foto una sola vez
   En bucle se vuelve ruido, por eso corre solo al entrar.
   --------------------------------------------------------- */

.fx-brillo .fx-shot-marco::before,
.fx-brillo.fx-brillo-solo::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -75%;
  width: 45%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .28) 50%,
              rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) rotate(8deg);
}

.fx-brillo.fx-in .fx-shot-marco::before,
.fx-brillo.fx-brillo-solo.fx-in::before {
  transition: transform 1.5s cubic-bezier(.33, 0, .2, 1) .75s;
  transform: translateX(420%) rotate(8deg);
}

/* ---------------------------------------------------------
   4. fx-lente - la foto se acerca despacio al entrar
   Para fotos que no llevan cortina.
   --------------------------------------------------------- */

.fx-lente img {
  transform: scale(1.07);
  transition: transform 1.6s var(--fx-ease);
  will-change: transform;
}

.fx-lente.fx-in img { transform: scale(1); }

/* ---------------------------------------------------------
   5. fx-linea - la rayita coral se dibuja bajo el antetitulo
   ---------------------------------------------------------
   Es el efecto mas de la marca que se puede hacer aca: el
   coral ya es el acento de la pagina, asi que en vez de meter
   un adorno nuevo se anima lo que ya estaba puesto.

   efectos.js le pone fx-linea-c si el texto va centrado, para
   que la rayita salga del centro y no del borde izquierdo.
   --------------------------------------------------------- */

.fx-linea { position: relative; padding-bottom: 12px; }

.fx-linea::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--fx-acento);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--fx-curtain);
  transition-delay: var(--fx-delay, 0ms);
}

.fx-linea.fx-linea-c::after {
  left: 50%;
  margin-left: -23px;
  transform-origin: center;
}

.fx-linea.fx-in::after { transform: scaleX(1); }

/* Sobre el chocolate de Metodologia el coral pierde fuerza:
   ahi la rayita va crema. */
#metodologia .fx-linea::after { background: var(--fx-crema); }

/* ---------------------------------------------------------
   6. fx-palabras - el titular entra palabra por palabra
   Cada palabra sube desde detras de su propia linea. Es un
   momento, no un recurso: va en un titular por pagina.
   --------------------------------------------------------- */

/* El recorte tiene que ser solo vertical: en una tipografia de
   trazo (Dancing Script) los remates se salen del ancho de la
   letra y overflow: hidden se los comeria de lado. El relleno da
   ese aire y el margen negativo lo devuelve, asi que la linea no
   se mueve ni un pixel. */
.fx-palabras .fx-pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-left: .07em;
  padding-right: .07em;
  margin-left: -.07em;
  margin-right: -.07em;
}

.fx-palabras .fx-pal > span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform .8s var(--fx-curtain);
  transition-delay: var(--fx-pal-delay, 0ms);
}

.fx-palabras.fx-in .fx-pal > span { transform: none; }

/* ---------------------------------------------------------
   7. fx-subrayado - la raya crece bajo el enlace
   Reemplaza el subrayado del navegador, que corta las
   descendentes de la letra y se ve descuidado.
   --------------------------------------------------------- */

.fx-subrayado a,
a.fx-subrayado {
  position: relative;
  text-decoration: none !important;
}

.fx-subrayado a::after,
a.fx-subrayado::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--fx-acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--fx-ease);
}

.fx-subrayado a:hover::after,
.fx-subrayado a:focus-visible::after,
a.fx-subrayado:hover::after,
a.fx-subrayado:focus-visible::after { transform: scaleX(1); }

/* En el pie, sobre chocolate, la raya va crema */
.fx-subrayado-claro a::after { background: var(--fx-crema); }

/* Dentro del panel desplegable de celular la raya sobra:
   los enlaces van uno debajo de otro y ya tienen su separador. */
@media (max-width: 1024px) {
  #top .fx-subrayado a::after { display: none; }
}

/* ---------------------------------------------------------
   8. fx-imanado - el boton se corre hacia el cursor
   Solo con mouse de verdad: en pantalla tactil no hay cursor
   que seguir, asi que ni se carga el comportamiento.
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .fx-imanado .elementor-button {
    transition: transform .25s var(--fx-ease),
                background-color .25s var(--fx-ease),
                box-shadow .25s var(--fx-ease);
    will-change: transform;
  }
}

/* ---------------------------------------------------------
   9. fx-header - la cabecera se pega arriba y se encoge
   ---------------------------------------------------------
   Lleva !important en position porque el CSS del
   Personalizador fija #top { position: relative } para el
   panel del menu de celular, y un id le gana a una clase.
   --------------------------------------------------------- */

.fx-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  z-index: 200;
  transition: background-color .3s var(--fx-ease),
              box-shadow .3s var(--fx-ease);
}

.fx-header.fx-header-scrolled {
  background-color: rgba(241, 220, 192, .92) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 26px rgba(59, 36, 22, .14);
}

/* Elementor guarda el relleno en .e-con-inner, no en el contenedor.
   Solo se encoge en escritorio: por debajo de 1024 el
   Personalizador fija el relleno por id y ademas la cabecera de
   celular ya mide 66 px. */
@media (min-width: 1025px) {
  .fx-header > .e-con-inner {
    transition: padding .3s var(--fx-ease);
  }

  .fx-header.fx-header-scrolled > .e-con-inner {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .fx-header .elementor-widget-image img {
    transition: height .3s var(--fx-ease);
  }

  .fx-header.fx-header-scrolled .elementor-widget-image img {
    height: 34px !important;
  }
}

/* Con la cabecera pegada arriba, los enlaces del menu dejaban el
   titulo de la seccion escondido detras de ella. */
html { scroll-padding-top: 104px; }

@media (max-width: 1024px) { html { scroll-padding-top: 84px; } }

html.fx-js { scroll-behavior: smooth; }

/* ---------------------------------------------------------
   10. Utilidades
   --------------------------------------------------------- */

.fx-measure,
.fx-measure p { max-width: var(--fx-measure); }

.fx-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   11. TELEFONO
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .fx-reveal,
  .fx-reveal-stagger > *,
  .fx-reveal-stagger > .e-con-inner > * { transform: translate3d(0, 16px, 0); }
  .fx-reveal-left  { transform: translate3d(-16px, 0, 0); }
  .fx-reveal-right { transform: translate3d(16px, 0, 0); }

  /* mas rapido y menos acercamiento: en telefono se ve de cerca */
  .fx-shot { --fx-zoom: 1.07; }
  .fx-shot-marco::after { transition-duration: .7s; }
  .fx-shot .fx-shot-marco img { transition-duration: 1.1s; }
  .fx-brillo.fx-in .fx-shot-marco::before { transition-duration: 1.1s; }
  .fx-palabras .fx-pal > span { transition-duration: .6s; }
  .fx-linea { padding-bottom: 10px; }
}

/* ---------------------------------------------------------
   12. QUIEN PIDIO MENOS MOVIMIENTO, NO LO RECIBE
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.fx-js { scroll-behavior: auto; }

  .fx-reveal,
  .fx-reveal-stagger > *,
  .fx-reveal-stagger > .e-con-inner > *,
  .fx-shot .fx-shot-marco img,
  .fx-lente img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fx-shot-marco::after { transform: scaleX(0) !important; transition: none !important; }
  .fx-brillo .fx-shot-marco::before { display: none !important; }
  .fx-linea::after { transform: scaleX(1) !important; transition: none !important; }
  .fx-palabras .fx-pal > span { transform: none !important; transition: none !important; }

  .fx-header,
  .fx-header > .e-con-inner,
  .fx-header .elementor-widget-image img,
  .fx-subrayado a::after,
  a.fx-subrayado::after { transition: none !important; }

  .fx-imanado .elementor-button { transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------
   13. RED DE SEGURIDAD
   Si el JavaScript no carga, nada se queda escondido.
   --------------------------------------------------------- */

html:not(.fx-js) .fx-reveal,
html:not(.fx-js) .fx-reveal-stagger > *,
html:not(.fx-js) .fx-reveal-stagger > .e-con-inner > *,
html:not(.fx-js) .fx-lente img {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html:not(.fx-js) .fx-shot-marco::after { transform: scaleX(0) !important; }
html:not(.fx-js) .fx-brillo .fx-shot-marco::before { display: none !important; }
html:not(.fx-js) .fx-linea::after { transform: scaleX(1) !important; }
html:not(.fx-js) .fx-palabras .fx-pal > span { transform: none !important; }

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