/* ==========================================================================
   FX Texto e Imagen — estilos de los efectos
   Variables disponibles (se ponen en style="" del elemento exterior):
     --fx-color, --fx-color2, --fx-size, --fx-weight, --fx-font,
     --fx-speed, --fx-delay, --fx-width, --fx-height, --fx-zoom, --fx-radius
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedores base
   -------------------------------------------------------------------------- */
.fx-text {
  display: inline-block;
  max-width: 100%;
  color: var(--fx-color, inherit);
  font-size: var(--fx-size, inherit);
  font-weight: var(--fx-weight, inherit);
  font-family: var(--fx-font, inherit);
}
.fx-text.fx-block {
  display: block;
}
.fx-text .fx-text {
  max-width: 100%;
}

.fx-align-center { text-align: center; }
.fx-align-right  { text-align: right; }
.fx-align-left   { text-align: left; }
.fx-text.fx-align-center,
.fx-text.fx-align-right { display: block; }

.fx-image {
  display: inline-block;
  position: relative;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle;
  overflow: hidden;
  border-radius: var(--fx-radius, 0);
  width: var(--fx-width, auto);
}
.fx-image .fx-image {
  width: 100%;
}
.fx-image img {
  display: block;
  max-width: 100%;
  height: var(--fx-height, auto);
  object-fit: cover;
  transition: transform var(--fx-speed, .6s) ease, filter var(--fx-speed, .6s) ease;
}
.fx-image[style*="--fx-width"] img,
.fx-image .fx-image img {
  width: 100%;
}
.fx-image a {
  display: block;
  line-height: 0;
}
.fx-image.fx-align-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.fx-image.fx-align-left  { float: left;  margin: 0 1.5em 1em 0; }
.fx-image.fx-align-right { float: right; margin: 0 0 1em 1.5em; }

.fx-wrap {
  position: relative;
  border-radius: var(--fx-radius, 0);
}

/* Texto curvado ---------------------------------------------------------- */
.fx-curvo-wrap {
  display: block;
  width: 100%;
  max-width: var(--fx-width, 100%);
}
.fx-curvo-wrap .fx-curvo-wrap {
  max-width: 100%;
}
.fx-curvo-wrap.fx-align-center { margin-left: auto; margin-right: auto; }
.fx-curvo-wrap.fx-align-right  { margin-left: auto; }
.fx-curvo-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.fx-curvo-text {
  font-family: var(--fx-font, inherit);
  font-weight: var(--fx-weight, 700);
}
.fx-svg-neon {
  filter: drop-shadow(0 0 3px var(--fx-color, #19e6ff)) drop-shadow(0 0 10px var(--fx-color2, var(--fx-color, #19e6ff)));
  animation: fx-svg-neon var(--fx-speed, 2s) ease-in-out infinite alternate;
}
@keyframes fx-svg-neon {
  from { filter: drop-shadow(0 0 3px var(--fx-color, #19e6ff)) drop-shadow(0 0 12px var(--fx-color2, var(--fx-color, #19e6ff))); }
  to   { filter: drop-shadow(0 0 1px var(--fx-color, #19e6ff)) drop-shadow(0 0 4px  var(--fx-color2, var(--fx-color, #19e6ff))); }
}
.fx-svg-sombra {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35)) drop-shadow(4px 4px 0 rgba(0, 0, 0, .18));
}

/* --------------------------------------------------------------------------
   Efectos de estilo (texto)
   -------------------------------------------------------------------------- */

/* Brillo: destello que recorre el texto */
.fx-brillo {
  background-image: linear-gradient(110deg, var(--fx-color, #1e1e1e) 40%, var(--fx-color2, #ffffff) 50%, var(--fx-color, #1e1e1e) 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-brillo var(--fx-speed, 3s) linear infinite;
}
@keyframes fx-brillo {
  to { background-position: -120% 0; }
}

/* Neón */
.fx-neon {
  color: var(--fx-color, #19e6ff);
  text-shadow:
    0 0 6px  var(--fx-color, #19e6ff),
    0 0 14px var(--fx-color, #19e6ff),
    0 0 28px var(--fx-color2, var(--fx-color, #19e6ff)),
    0 0 48px var(--fx-color2, var(--fx-color, #19e6ff));
  animation: fx-neon var(--fx-speed, 2s) ease-in-out infinite alternate;
}
@keyframes fx-neon {
  from {
    text-shadow:
      0 0 6px  var(--fx-color, #19e6ff),
      0 0 14px var(--fx-color, #19e6ff),
      0 0 28px var(--fx-color2, var(--fx-color, #19e6ff)),
      0 0 48px var(--fx-color2, var(--fx-color, #19e6ff));
  }
  to {
    text-shadow:
      0 0 3px  var(--fx-color, #19e6ff),
      0 0 8px  var(--fx-color, #19e6ff),
      0 0 14px var(--fx-color2, var(--fx-color, #19e6ff)),
      0 0 20px var(--fx-color2, var(--fx-color, #19e6ff));
  }
}

/* Degradado animado */
.fx-degradado {
  background-image: linear-gradient(90deg, var(--fx-color, #ff6a00), var(--fx-color2, #ee0979), var(--fx-color, #ff6a00));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-degradado var(--fx-speed, 4s) linear infinite;
}
@keyframes fx-degradado {
  to { background-position: 200% center; }
}

/* Arcoíris */
.fx-arcoiris {
  background-image: linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #17d400, #00b3ff, #8a2be2, #ff004c);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-arcoiris var(--fx-speed, 6s) linear infinite;
}
@keyframes fx-arcoiris {
  to { background-position: 300% center; }
}

/* Dorado metálico */
.fx-dorado {
  background-image: linear-gradient(110deg, #a67c00 30%, #ffe27a 45%, #fff6c8 50%, #ffe27a 55%, #a67c00 70%);
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-brillo var(--fx-speed, 4s) linear infinite;
}

/* Sombra 3D */
.fx-sombra3d {
  color: var(--fx-color, #ffffff);
  text-shadow:
    1px 1px 0 var(--fx-color2, #9aa0a6),
    2px 2px 0 var(--fx-color2, #9aa0a6),
    3px 3px 0 var(--fx-color2, #9aa0a6),
    4px 4px 0 var(--fx-color2, #9aa0a6),
    6px 6px 12px rgba(0, 0, 0, .35);
}

/* Contorno */
.fx-contorno {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--fx-color, #1e1e1e);
  paint-order: stroke fill;
}

/* Máquina de escribir */
.fx-maquina {
  white-space: pre-wrap;
}
.fx-maquina::after {
  content: "|";
  display: inline-block;
  margin-left: 2px;
  animation: fx-cursor .9s steps(1) infinite;
}
.fx-maquina.fx-done::after {
  animation: fx-cursor .9s steps(1) infinite;
}
@keyframes fx-cursor {
  50% { opacity: 0; }
}

/* Ola */
.fx-ola {
  white-space: pre-wrap;
}
.fx-ola .fx-letter {
  display: inline-block;
  animation: fx-ola var(--fx-speed, 1.6s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .07s);
}
@keyframes fx-ola {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.35em); }
}

/* --------------------------------------------------------------------------
   Animaciones continuas (texto e imagen)
   -------------------------------------------------------------------------- */
.fx-flotante {
  animation: fx-flotante var(--fx-speed, 3s) ease-in-out infinite;
}
@keyframes fx-flotante {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.fx-latido {
  animation: fx-latido var(--fx-speed, 1.5s) ease-in-out infinite;
}
@keyframes fx-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.fx-rebote {
  animation: fx-rebote var(--fx-speed, 1.4s) cubic-bezier(.28, .84, .42, 1) infinite;
}
@keyframes fx-rebote {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-22px); }
  50%      { transform: translateY(0); }
  65%      { transform: translateY(-8px); }
  80%      { transform: translateY(0); }
}

.fx-balanceo {
  transform-origin: 50% 0;
  animation: fx-balanceo var(--fx-speed, 2.5s) ease-in-out infinite;
}
@keyframes fx-balanceo {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

.fx-sacudir {
  animation: fx-sacudir var(--fx-speed, .8s) ease-in-out infinite;
}
@keyframes fx-sacudir {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.fx-parpadeo {
  animation: fx-parpadeo var(--fx-speed, 1.4s) ease-in-out infinite;
}
@keyframes fx-parpadeo {
  0%, 100% { opacity: 1; }
  50%      { opacity: .15; }
}

.fx-girar {
  animation: fx-girar var(--fx-speed, 8s) linear infinite;
}
@keyframes fx-girar {
  to { transform: rotate(360deg); }
}

/* Ken Burns: zoom muy lento sobre la imagen */
.fx-zoom-lento {
  overflow: hidden;
}
.fx-zoom-lento img {
  animation: fx-kenburns var(--fx-speed, 14s) ease-in-out infinite alternate;
}
@keyframes fx-kenburns {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.22) translate(-2%, -2%); }
}

/* Parallax (el JS mueve la imagen) */
.fx-parallax {
  overflow: hidden;
}
.fx-parallax img {
  transform: scale(1.3);
  transition: none;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Efectos hover
   -------------------------------------------------------------------------- */

/* En pantallas táctiles no hay "hover": el JS añade .is-touch al tocar. */

/* Zoom */
.fx-zoom:not(.fx-text) {
  overflow: hidden;
}
.fx-zoom:not(.fx-text) img {
  transition: transform var(--fx-speed, .6s) ease;
}
.fx-zoom:not(.fx-text):hover img,
.fx-zoom.is-touch:not(.fx-text) img,
img.fx-zoom:hover,
img.fx-zoom.is-touch {
  transform: scale(var(--fx-zoom, 1.12));
}
.fx-text.fx-zoom {
  transition: transform var(--fx-speed, .3s) ease;
}
.fx-text.fx-zoom:hover,
.fx-text.fx-zoom.is-touch {
  transform: scale(var(--fx-zoom, 1.1));
}

/* Elevar */
.fx-elevar {
  transition: transform .35s ease, box-shadow .35s ease;
}
.fx-elevar:hover,
.fx-elevar.is-touch {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .22);
}

/* Giro al pasar */
.fx-girar-hover img {
  transition: transform var(--fx-speed, .5s) ease;
}
.fx-girar-hover:hover img,
.fx-girar-hover.is-touch img {
  transform: rotate(4deg) scale(1.06);
}

/* Gris a color */
.fx-gris img {
  filter: grayscale(1);
}
.fx-gris:hover img,
.fx-gris.is-touch img {
  filter: grayscale(0);
}

/* Desenfoque */
.fx-desenfoque img {
  filter: blur(4px);
}
.fx-desenfoque:hover img,
.fx-desenfoque.is-touch img {
  filter: blur(0);
}

/* En móvil/tablet (sin ratón) la imagen se ve normal y el efecto se activa al tocar. */
@media (hover: none) {
  .fx-gris:not(.is-touch) img { filter: grayscale(.6); }
  .fx-desenfoque:not(.is-touch) img { filter: blur(1.5px); }
}

/* Destello: reflejo de luz que cruza la imagen */
.fx-destello {
  position: relative;
  overflow: hidden;
}
.fx-destello::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.fx-destello:hover::after,
.fx-destello.is-touch::after {
  animation: fx-destello var(--fx-speed, .9s) ease forwards;
}
@keyframes fx-destello {
  to { left: 130%; }
}

/* Inclinar 3D (el JS calcula la rotación) */
.fx-inclinar {
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Estilo (imagen)
   -------------------------------------------------------------------------- */
.fx-redondo {
  border-radius: 50% !important;
}
.fx-redondo img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.fx-sombra {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.fx-marco {
  padding: 6px;
  background: var(--fx-color, #ffffff);
  box-shadow: 0 0 0 2px var(--fx-color2, rgba(0, 0, 0, .15)), 0 8px 20px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   Efectos de entrada (aparecen al hacer scroll)
   Solo se ocultan cuando el JS está activo (html.fx-js).
   -------------------------------------------------------------------------- */
.fx-js .fx-reveal:not(.is-visible) {
  opacity: 0;
}
.fx-js .fx-reveal.is-visible {
  animation-duration: var(--fx-speed, .9s);
  animation-delay: var(--fx-delay, 0s);
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: backwards;
}
.fx-js .fx-reveal-aparecer.is-visible  { animation-name: fx-in-aparecer; }
.fx-js .fx-reveal-subir.is-visible     { animation-name: fx-in-subir; }
.fx-js .fx-reveal-bajar.is-visible     { animation-name: fx-in-bajar; }
.fx-js .fx-reveal-izquierda.is-visible { animation-name: fx-in-izquierda; }
.fx-js .fx-reveal-derecha.is-visible   { animation-name: fx-in-derecha; }
.fx-js .fx-reveal-ampliar.is-visible   { animation-name: fx-in-ampliar; }
.fx-js .fx-reveal-girando.is-visible   { animation-name: fx-in-girando; }

@keyframes fx-in-aparecer  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-in-subir     { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes fx-in-bajar     { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes fx-in-izquierda { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes fx-in-derecha   { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes fx-in-ampliar   { from { opacity: 0; transform: scale(.6); }         to { opacity: 1; transform: none; } }
@keyframes fx-in-girando   { from { opacity: 0; transform: rotate(-180deg) scale(.5); } to { opacity: 1; transform: none; } }

/* En el editor de bloques siempre visible */
.editor-styles-wrapper .fx-reveal,
.block-editor-block-list__layout .fx-reveal {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Presets del Diseñador: purpurina, fondos animados
   (el CSS específico de cada preset se genera en PHP; aquí va lo común)
   -------------------------------------------------------------------------- */

/* Purpurina / destellos (los crea el JS dentro del elemento) */
.fx-sparkle {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: calc(var(--s, 10px) * var(--k, 1));
  height: calc(var(--s, 10px) * var(--k, 1));
  margin: calc(var(--s, 10px) * -0.5) 0 0 calc(var(--s, 10px) * -0.5);
  background: var(--c, #fff);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: scale(0);
  filter: drop-shadow(0 0 3px var(--c, #fff));
  will-change: transform, opacity;
  animation: fx-twinkle var(--d, 2s) ease-in-out var(--dl, 0s) infinite;
}
.fx-sparkle.is-star {
  -webkit-clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.fx-sparkle.is-dot {
  border-radius: 50%;
  width: calc(var(--s, 10px) * var(--k, 1) * .5);
  height: calc(var(--s, 10px) * var(--k, 1) * .5);
}
@keyframes fx-twinkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* Capas de fondo */
.fx-bg-layer,
.fx-bg-tint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Burbujas */
.fx-bubbles i {
  position: absolute;
  top: 105%;
  left: var(--x, 50%);
  width: var(--s, 20px);
  height: var(--s, 20px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), var(--c, rgba(255, 255, 255, .5)) 55%, transparent 72%);
  opacity: var(--o, .6);
  will-change: top, margin-left;
  animation: fx-bubble var(--d, 10s) linear var(--dl, 0s) infinite;
}
@keyframes fx-bubble {
  0%   { top: 105%; margin-left: 0; }
  50%  { margin-left: var(--sway, 15px); }
  100% { top: -10%; margin-left: 0; }
}

/* Partículas de luz */
.fx-particles i {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 calc(var(--s, 5px) * 2) var(--c, #fff);
  opacity: 0;
  animation: fx-particle var(--d, 6s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes fx-particle {
  0%   { transform: translate(0, 0); opacity: 0; }
  25%  { opacity: var(--o, .8); }
  50%  { transform: translate(var(--dx, 20px), var(--dy, -30px)); }
  75%  { opacity: var(--o, .8); }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* Rayos de luz */
@keyframes fx-rays {
  from { transform: translateX(-6%) rotate(0deg); opacity: .6; }
  to   { transform: translateX(6%) rotate(2deg); opacity: 1; }
}

/* Foco de luz que se mueve */
@keyframes fx-spot {
  0%   { transform: translate(-22%, -18%); }
  50%  { transform: translate(10%, 15%); }
  100% { transform: translate(22%, -10%); }
}

/* Olas */
@keyframes fx-wave {
  from { background-position-x: 0; }
  to   { background-position-x: -600px; }
}

/* Degradado animado de fondo */
@keyframes fx-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Imagen de fondo a la deriva */
@keyframes fx-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
   Accesibilidad: respetar "reducir movimiento"
   -------------------------------------------------------------------------- */
/* Si en el Diseñador se marca "animar también con Reducir movimiento", el <html>
   lleva la clase fx-force-motion y estas reglas no se aplican. */
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-force-motion) .fx-text,
  html:not(.fx-force-motion) .fx-image,
  html:not(.fx-force-motion) .fx-wrap,
  html:not(.fx-force-motion) [class^="fx-"],
  html:not(.fx-force-motion) [class*=" fx-"],
  html:not(.fx-force-motion) .fx-image img,
  html:not(.fx-force-motion) .fx-ola .fx-letter,
  html:not(.fx-force-motion) .fx-destello::after,
  html:not(.fx-force-motion) .fx-sparkle,
  html:not(.fx-force-motion) .fx-bubbles i,
  html:not(.fx-force-motion) .fx-particles i {
    animation: none !important;
    transition: none !important;
  }
  html:not(.fx-force-motion) .fx-reveal {
    opacity: 1 !important;
  }
  html:not(.fx-force-motion) .fx-sparkle { display: none; }
}