/* ============================================================================
   ZONIA VERGARA · NEUROCONECTA — CAPA DE VIDA (v2.0)
   ----------------------------------------------------------------------------
   Animaciones e interacciones del rediseño "neuro-tecnología viva".
   Se carga DESPUÉS de estilo.css para enriquecer, nunca para reemplazar.

   REGLA APRENDIDA (🏆 Vitrina Interactiva): los reveals SOLO usan desplazamiento,
   NUNCA opacity:0, para que el contenido siempre sea visible aunque JS falle
   (progressive enhancement). Aquí se respeta esa lección.
   ============================================================================ */

/* ══════════════════════════ 1 · FONDO NEURAL VIVO ══════════════════════════ */

/* Malla neuronal de fondo: dos capas de puntos que derivan lentamente.
   Se siente como "sinapsis" sin distraer ni costar rendimiento (solo transform). */
.neural-fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .70;
}

.neural-fondo::before,
.neural-fondo::after {
  content: "";
  position: absolute;
  inset: -25%;
  background-image:
    radial-gradient(circle at 20% 30%, var(--azul) 0 2.4px, transparent 2.4px),
    radial-gradient(circle at 70% 65%, var(--cian) 0 2.2px, transparent 2.2px),
    radial-gradient(circle at 45% 85%, var(--verde) 0 2.0px, transparent 2.0px),
    radial-gradient(circle at 88% 18%, var(--accent) 0 2.0px, transparent 2.0px);
  background-size: 340px 340px, 420px 420px, 380px 380px, 300px 300px;
  animation: derivaNeural 46s linear infinite;
}

.neural-fondo::after {
  background-size: 220px 220px, 260px 260px, 240px 240px, 200px 200px;
  opacity: .55;
  animation-duration: 68s;
  animation-direction: reverse;
}

@keyframes derivaNeural {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-120px, -90px, 0) rotate(4deg); }
}

/* El contenido debe quedar por encima del fondo neural */
body > *:not(.neural-fondo) { position: relative; z-index: 1; }


/* ══════════════════ 2 · AURORA DE MARCA EN EL HERO ══════════════════ */

/* Mancha de color que "respira" detrás del hero: da la sensación de novedad. */
.hero::before {
  content: "";
  position: absolute;
  inset: -12% -8% auto -8%;
  height: 78%;
  background: var(--grad-aurora);
  background-size: 300% 300%;
  filter: blur(85px);
  opacity: .30;
  border-radius: 50%;
  animation: aurora 22s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes aurora {
  0%, 100% { background-position: 0% 50%; transform: scale(1) translateY(0); opacity: .26; }
  50%      { background-position: 100% 50%; transform: scale(1.12) translateY(-14px); opacity: .40; }
}


/* ══════════════════ 3 · TÍTULO CON DEGRADADO ANIMADO ══════════════════ */

/* El titular lleva el degradado de marca que se desplaza: lee como "tecnología". */
.hero h1 em,
.titulo-vivo {
  background: var(--grad-marca);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: flujoTexto 7s linear infinite;
  font-style: italic;
}

@keyframes flujoTexto {
  to { background-position: 220% center; }
}


/* ══════════════════ 4 · SUBRAYADO QUE SE DIBUJA ══════════════════ */

/* Enlaces del menú: el subrayado crece desde el centro al pasar el mouse. */
.nav__menu a { position: relative; }

.nav__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--grad-calido);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--dur-media) var(--ease-suave);
}

.nav__menu a:hover::after,
.nav__menu a:focus-visible::after,
.nav__menu a.activo::after { width: 100%; }


/* ══════════════════ 5 · BOTONES MAGNÉTICOS CON BRILLO ══════════════════ */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-rapida) var(--ease-rebote),
              box-shadow var(--dur-media) var(--ease-suave);
}

/* Destello que cruza el botón al pasar el mouse */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-lenta) var(--ease-suave);
  z-index: -1;
}

.btn:hover::before { left: 140%; }

.btn:hover,
.btn:focus-visible { transform: translateY(-3px) scale(1.02); }

.btn--solid:hover,
.btn--solid:focus-visible { box-shadow: var(--glow-accent-on); }

.btn:active { transform: translateY(-1px) scale(.99); }


/* ══════════════════ 6 · TARJETAS QUE SE LEVANTAN Y BRILLAN ══════════════════ */

/* Cada tarjeta se eleva, se inclina levemente y proyecta sombra de marca. */
.tarjeta,
.servicio,
.paso,
.pilar,
.ciclo,
.dato {
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave);
  will-change: transform;
}

.tarjeta:hover,
.servicio:hover,
.paso:hover,
.pilar:hover,
.ciclo:hover {
  transform: translateY(-8px) rotate(-.4deg);
  box-shadow: 0 20px 45px -18px rgba(123, 63, 160, .40);
  border-color: var(--cian-borde);
}

/* Halo degradado que asoma en el borde superior de la tarjeta */
.tarjeta::after,
.servicio::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-marca);
  background-size: 200% auto;
  border-radius: var(--radio) var(--radio) 0 0;
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
}

.tarjeta:hover::after,
.servicio:hover::after { opacity: 1; }


/* ══════════════════ 7 · DAMERO / CURSOR LUMINOSO EN TARJETAS ══════════════════ */

/* Luz que sigue al mouse dentro de la tarjeta (efecto "spotlight").
   La posición la fija app.js en --mx / --my. */
.tarjeta,
.servicio,
.ciclo {
  position: relative;
}

.tarjeta .luz,
.servicio .luz,
.ciclo .luz {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233, 30, 140, .13),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
  pointer-events: none;
}

.tarjeta:hover .luz,
.servicio:hover .luz,
.ciclo:hover .luz { opacity: 1; }


/* ══════════════════ 8 · IMÁGENES CON ZOOM Y BRILLO ══════════════════ */

figure img,
.tarjeta img,
.servicio img,
.taller img {
  transition: transform var(--dur-lenta) var(--ease-suave),
              filter var(--dur-lenta) var(--ease-suave);
}

figure:hover img,
.tarjeta:hover img,
.servicio:hover img { transform: scale(1.05); }

/* El retrato del hero: leve acercamiento continuo (respira) */
.hero__marco img {
  animation: respirar 9s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* Marco con borde degradado giratorio (efecto "vivo") */
.hero__marco {
  position: relative;
}

.hero__marco::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--ang, 0deg),
    var(--accent), var(--verde), var(--cian), var(--rojo), var(--accent)
  );
  z-index: -1;
  filter: blur(6px);
  opacity: .65;
  animation: girarBorde 9s linear infinite;
}

@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes girarBorde {
  to { --ang: 360deg; }
}


/* ══════════════════ 9 · LA MASCOTA COBRA VIDA ══════════════════ */

/* El cerebro LEGO flota y gira suavemente: es el guiño lúdico de la marca. */
.hero__mascota {
  animation: flotarMascota 5.5s ease-in-out infinite;
  transform-origin: 60% 70%;
  filter: drop-shadow(0 10px 24px rgba(123, 63, 160, .32));
}

@keyframes flotarMascota {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50%      { transform: translateY(-16px) rotate(2.5deg); }
}


/* ══════════════════ 10 · CHISPAS NEURONALES (partículas del hero) ══════════════════ */

/* Puntos de color que ascienden: la metáfora visual de "sinapsis".
   Las genera app.js dentro de .chispas. */
.chispas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.chispa {
  position: absolute;
  bottom: -12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: subirChispa linear infinite;
}

@keyframes subirChispa {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  12%  { opacity: .85; }
  85%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-88vh) scale(1.25); }
}


/* ══════════════════ 11 · NÚMEROS QUE CUENTAN CON BRILLO ══════════════════ */

.dato__n {
  background: var(--grad-marca);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-media) var(--ease-rebote);
}

.dato:hover .dato__n { transform: scale(1.08); }

.dato:hover {
  transform: translateY(-5px);
}


/* ══════════════════ 12 · FRANJA MARQUEE (cinta infinita) ══════════════════ */

/* Si existe .marquee, se anima sola; se pausa al pasar el mouse. */
.marquee { overflow: hidden; }

.marquee > * {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: desfilar 32s linear infinite;
}

.marquee:hover > * { animation-play-state: paused; }

@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ══════════════════ 13 · ACORDEÓN / DETALLE QUE SE DESPLIEGA ══════════════════ */

/* Las filas de la tabla de horas y los pasos revelan contenido con suavidad. */
.fila-hora,
.fila-estructura tr {
  transition: background-color var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}

.fila-hora:hover,
.fila-estructura tr:hover {
  background-color: var(--accent-claro);
  transform: translateX(4px);
}


/* ══════════════════ 14 · REVEALS (solo ENRIQUECER, nunca sobreescribir) ══════════════════ */

/* IMPORTANTE: estilo.css ya define .rev / .rev-l / .rev-r y su estado .en, y
   app.js los activa con IntersectionObserver. Aquí NO se redefinen esas reglas
   (hacerlo dejaba 41 bloques invisibles): solo se añade un realce de transición
   en la opacidad del borde, que no compite con el transform. */
.rev.en,
.rev-l.en,
.rev-r.en {
  transition-delay: 0s;
}

/* El contenido visible NO lleva filtros: el blur se percibe como texto borroso. */
.rev:not(.en),
.rev-l:not(.en),
.rev-r:not(.en) {
  will-change: transform;
}


/* ══════════════════ 15 · SEPARADORES ONDULADOS ══════════════════ */

/* Transición suave entre secciones: le quita el aire "de plantilla" al sitio. */
.ola {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: -1px;
}

.ola path { fill: var(--bg-alt); }


/* ══════════════════ 16 · TARJETA INSIGNIA CON PULSO ══════════════════ */

/* El programa estrella (EL AULA VIVA) llama la atención sin ser agresivo. */
.insignia,
.destacado {
  position: relative;
  animation: pulsoSuave 4.5s ease-in-out infinite;
}

@keyframes pulsoSuave {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 140, .00); }
  50%      { box-shadow: 0 0 0 14px rgba(233, 30, 140, .07); }
}


/* ══════════════════ 17 · ETIQUETAS Y BADGES FLOTANTES ══════════════════ */

.badge,
.eyebrow,
.hero__badge {
  position: relative;
  overflow: hidden;
}

.badge::after,
.hero__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%);
  animation: destelloBadge 5s var(--ease-suave) infinite;
}

@keyframes destelloBadge {
  0%, 62% { transform: translateX(-100%); }
  78%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}


/* ══════════════════ 18 · WHATSAPP FLOTANTE CON PULSO ══════════════════ */

/* El botón de contacto late: recuerda que hay una persona al otro lado. */
.flotante-wa,
.wa-flotante {
  animation: pulsar 2.8s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 24px rgba(233, 30, 140, .30); }
  50%      { transform: scale(1.07); box-shadow: 0 10px 34px rgba(233, 30, 140, .48); }
}


/* ══════════════════ 19 · CURSOR DE PUNTO LUMINOSO (escritorio) ══════════════════ */

/* Solo en punteros finos; sigue al mouse con retardo elástico. */
.punto-luz {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 30, 140, .55), transparent 68%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
  mix-blend-mode: multiply;
}

@media (hover: none), (pointer: coarse) { .punto-luz { display: none; } }


/* ══════════════════ 20 · BARRA DE PROGRESO DE LECTURA ══════════════════ */

/* Línea degradada arriba que marca cuánto se ha leído: guía y da "app". */
.barra-progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-marca);
  z-index: 9998;
  transition: width .1s linear;
  border-radius: 0 3px 3px 0;
}


/* ══════════════════ 21 · TEXTO QUE SE RESALTA AL PASAR ══════════════════ */

/* Palabras clave del cuerpo se subrayan con degradado al hover. */
strong.marcar {
  background-image: var(--grad-calido);
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 92%;
  transition: background-size var(--dur-media) var(--ease-suave);
}

strong.marcar:hover,
p:hover strong.marcar { background-size: 100% 3px; }


/* ══════════════════ 22 · ESQUINAS DECORATIVAS NEURONALES ══════════════════ */

/* Los bloques LEGO del logo aparecen como acentos geométricos en las secciones. */
.bloque-acento {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  opacity: .85;
  animation: girarBloque 7s ease-in-out infinite;
}

@keyframes girarBloque {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(14deg) scale(1.12); }
}


/* ══════════════════ 23 · FOOTER VIVO ══════════════════ */

footer a {
  position: relative;
  transition: color var(--dur-rapida) var(--ease-suave),
              padding-left var(--dur-rapida) var(--ease-suave);
}

footer a:hover {
  color: var(--rojo);
  padding-left: 5px;
}


/* ══════════════════ 26 · MARCO DORADO 3D EN LAS FOTOS ══════════════════ */

/* Al pasar el mouse, la foto:
     · se LEVANTA en 3D (perspectiva real, no solo translateY)
     · el borde se enciende con un MATIZ DORADO metálico
     · proyecta un brillo dorado cálido
   Se aplica a todos los marcos de imagen: hero, autoridad, entorno, tarjetas.
   Todo con transform/box-shadow (barato para la GPU) y sin tocar el layout. */

.hero__marco,
.autoridad__fig,
.entorno__fig,
.tarjeta,
.servicio,
.taller,
figure {
  position: relative;
}

/* El contenedor aporta la PERSPECTIVA: sin ella, rotateX/rotateY no se ven 3D. */
.hero__marco,
.autoridad__fig,
.entorno__fig,
figure {
  perspective: 1100px;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
  transform-style: preserve-3d;
}

/* ── La elevación 3D ── */
.hero__marco:hover,
.autoridad__fig:hover,
.entorno__fig:hover,
figure:hover {
  transform: translateY(-10px) rotateX(2.6deg) rotateY(-2.2deg) scale(1.015);
  box-shadow: var(--glow-oro);
  z-index: 5;
}

/* ── El borde dorado que se DIBUJA (no aparece de golpe) ──
   Se usa un ::before con el degradado de oro y máscara interior, para que el
   borde sea una línea de metal de 3px y no un bloque de color relleno. */
.hero__marco::before,
.autoridad__fig::before,
.entorno__fig::before,
figure::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: var(--grad-oro);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transform: scale(.985);
  transition: opacity var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-rebote);
  pointer-events: none;
  z-index: 4;
}

.hero__marco:hover::before,
.autoridad__fig:hover::before,
.entorno__fig:hover::before,
figure:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* ── Halo dorado que lava la esquina, como luz de estudio ──
   La posición (--oro-x / --oro-y) la fija vida.js siguiendo al puntero, así el
   brillo se mueve con el mouse y no queda en un punto fijo. */
.hero__marco::after,
.autoridad__fig::after,
figure::after,
.entorno__fig .oro-luz {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    62% 55% at var(--oro-x, 50%) var(--oro-y, 0%),
    rgba(247, 223, 160, .40) 0%,
    rgba(212, 160, 23, .14) 38%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
  pointer-events: none;
  z-index: 3;
}

.hero__marco:hover::after,
.autoridad__fig:hover::after,
figure:hover::after,
.dorado-activo::after { opacity: 1; }

/* ── La imagen dentro del marco: zoom suave + saturación dorada ── */
.hero__marco img,
.autoridad__fig img,
.entorno__fig img,
figure img {
  transition: transform var(--dur-lenta) var(--ease-suave),
              filter var(--dur-lenta) var(--ease-suave);
}

.hero__marco:hover img,
.autoridad__fig:hover img,
.entorno__fig:hover img,
figure:hover img {
  transform: scale(1.055) translateZ(18px);
  filter: saturate(1.08) contrast(1.04) brightness(1.03);
}

/* ── Realce del pie de foto cuando la foto se levanta ── */
.entorno__fig:hover figcaption strong { color: var(--oro-claro); }


/* ── Respeta la preferencia de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .hero__marco:hover,
  .autoridad__fig:hover,
  .entorno__fig:hover,
  figure:hover { transform: none; }

  .hero__marco:hover img,
  .autoridad__fig:hover img,
  .entorno__fig:hover img,
  figure:hover img { transform: none; }
}


/* ── En pantallas táctiles no hay hover: el dorado pasa a ser permanente ──
   Se usa @media (hover:none) y también una regla de respaldo por ancho, porque
   algunos navegadores móviles reportan hover:hover aunque sean táctiles. */
@media (hover: none), (pointer: coarse), (max-width: 820px) {
  .hero__marco::before,
  .autoridad__fig::before,
  .entorno__fig::before,
  figure::before {
    opacity: .85 !important;
    transform: scale(1) !important;
  }

  .entorno__fig figcaption strong { color: var(--oro-claro); }
}


/* ══════════════════ 27 · BORDE DORADO EN TARJETAS Y SERVICIOS ══════════════════ */

/* El mismo lenguaje de oro, aplicado a las tarjetas de contenido para que el
   sitio entero hable el mismo idioma visual. */
.tarjeta,
.servicio,
.ciclo,
.pilar {
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave);
}

.tarjeta:hover,
.servicio:hover,
.ciclo:hover,
.pilar:hover {
  transform: translateY(-9px) rotateX(1.8deg) rotateY(-1.6deg);
  box-shadow: var(--glow-oro);
  border-color: var(--oro-medio);
}

/* El acento superior de la tarjeta pasa a dorado al pasar el mouse */
.tarjeta:hover::after,
.servicio:hover::after {
  background: var(--grad-oro);
  opacity: 1;
}


/* ══════════════════ 25 · ENTORNO REAL (fotos de sus talleres) ══════════════════ */

/* Banda con las fotos reales de sus formaciones. Alto contraste: los pies de
   foto van sobre el azul del logo con texto blanco (16.4:1). */
.entorno__rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.entorno__fig {
  position: relative;
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--azul);
  box-shadow: 0 22px 50px -24px var(--sombra-fuerte);
  border: 4px solid var(--surface);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}

.entorno__fig:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 32px 64px -26px var(--sombra-fuerte);
}

.entorno__fig img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

.entorno__fig:hover img { transform: scale(1.06); }

/* Velo degradado azul del logo: asegura la legibilidad del pie de foto */
.entorno__fig::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(
    to top,
    rgba(0, 16, 48, .94) 0%,
    rgba(0, 32, 64, .78) 42%,
    transparent 100%
  );
  pointer-events: none;
}

.entorno__fig figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.2rem 1.4rem;
  color: #ffffff;
}

.entorno__fig figcaption strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.06rem;
  color: #ffffff;
  margin-bottom: .25rem;
}

.entorno__fig figcaption span {
  display: block;
  font-size: .88rem;
  color: rgba(255, 255, 255, .90);
  line-height: 1.5;
}

/* Acento cian que se dibuja en el borde superior al pasar el mouse */
.entorno__fig::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-neuro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-suave);
  z-index: 3;
}

.entorno__fig:hover::before { transform: scaleX(1); }

@media (max-width: 820px) {
  .entorno__rejilla { grid-template-columns: 1fr; gap: 1.2rem; }
  .entorno__fig img { height: 240px; }
}


/* ══════════════════ 24 · MÓVIL: animaciones más discretas ══════════════════ */

@media (max-width: 760px) {
  .neural-fondo { opacity: .35; }
  .hero::before { filter: blur(60px); height: 62%; }
  .punto-luz { display: none; }

  .tarjeta:hover,
  .servicio:hover,
  .paso:hover,
  .pilar:hover,
  .ciclo:hover { transform: translateY(-4px); }

  .rev-l:not(.en),
  .rev-r:not(.en) { transform: translateY(26px); }
}