/* ═══════════════════════════════════════════════════════════════════════════════════════════
   landing-motion.css (v4.697.0) — CAPA DE MOVIMIENTO de la landing pública.
   ─────────────────────────────────────────────────────────────────────────────────────────
   Regla de arquitectura: esta capa NO reconstruye la landing — se monta ENCIMA del HTML
   estático (data-lestatica) y de los bloques del CMS si algún día se publican. Todos los
   estados «oculto antes de entrar» viven bajo clases que SOLO pone landing-motion.js: si el
   JS no carga (3G, bloqueador), no existe la clase y la página se ve completa — fail-open
   a propósito, una landing invisible no vende nada.
   Colores/tipos: SIEMPRE por las variables de marca (--pub-*), jamás hex nuevos.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Reveal por scroll (IntersectionObserver pone .lm-in) ─────────────────────────────── */
.lm-reveal {
  opacity: 0;
  transform: translateY(36px);
  /* (ronda 2 · fundador) «muy rápidas, no se logra apreciar»: 0.65s → 1.05s y más recorrido. */
  transition: opacity 1.05s cubic-bezier(.22,.9,.3,1), transform 1.05s cubic-bezier(.22,.9,.3,1);
  transition-delay: var(--lm-delay, 0ms);
  will-change: opacity, transform;
}
.lm-reveal.lm-in { opacity: 1; transform: none; }

/* Variante lateral para las dos columnas de la sección de firma */
.lm-reveal-izq { transform: translateX(-40px); }
.lm-reveal-der { transform: translateX(40px); }
.lm-reveal-izq.lm-in, .lm-reveal-der.lm-in { transform: none; }

/* ── Entrada del hero (secuencia al cargar; también por clases del JS) ─────────────────── */
.lm-hero-seq {
  opacity: 0;
  transform: translateY(16px);
  animation: lmHeroIn .7s cubic-bezier(.22,.9,.3,1) forwards;
  animation-delay: var(--lm-delay, 0ms);
}
@keyframes lmHeroIn { to { opacity: 1; transform: none; } }

/* El «Desde donde estés.» se subraya solo — la firma sutil del hero.
   ⛔ Se anima SOLO el fondo (background-size), JAMÁS clip-path sobre el span: el clip
   recortaba el TEXTO entero y el titular aparecía mutilado ~2 s (medido en el navegador). */
.lm-subrayado {
  background-image: linear-gradient(0deg, rgba(25,211,197,.28), rgba(25,211,197,.28));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% .14em;
  animation: lmSubrayar .9s cubic-bezier(.6,0,.2,1) .9s forwards;
}
@keyframes lmSubrayar { to { background-size: 100% .14em; } }

/* ── El mockup de la comparecencia respira (flotación lenta, amplitud mínima) ──────────── */
.lm-flotar { animation: lmFlotar 7.5s ease-in-out infinite; }
@keyframes lmFlotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ── Microinteracciones ────────────────────────────────────────────────────────────────── */
.lm-tarjeta { transition: transform .3s cubic-bezier(.22,.9,.3,1), box-shadow .3s ease; }
.lm-tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px -18px rgba(6,59,74,.28);
}
.lm-cta { transition: transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease; }
.lm-cta:hover  { transform: translateY(-2px); }
.lm-cta:active { transform: translateY(0) scale(.985); }
.lm-cta:focus-visible { outline: 3px solid var(--pub-aqua); outline-offset: 2px; }

/* ── Accesibilidad: sin movimiento cuando la persona lo pidió ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lm-reveal, .lm-reveal-izq, .lm-reveal-der { opacity: 1; transform: none; transition: none; }
  .lm-hero-seq  { opacity: 1; transform: none; animation: none; }
  .lm-subrayado { background-size: 100% .14em; animation: none; }
  .lm-flotar    { animation: none; }
  .lm-tarjeta, .lm-cta { transition: none; }
  .lm-tarjeta:hover, .lm-cta:hover, .lm-cta:active { transform: none; }
  /* El pulso de «EN VIVO» del hero también respeta la preferencia (va en style inline). */
  #lm-esc-vivo span, [style*="pulseDot"] { animation: none !important; }
}

/* ── (ronda 2) EL ESCENARIO DEL HERO ROTA: 4 pasos del ciclo de vida del trámite ─────────────
   Creación → Agendamiento → Comparecencia → Recepción. Rotación automática cada 6.5 s,
   pausada al pasar el cursor o al usar las flechas; sin rotación con reduced-motion. */
.lm-esc { position: relative; min-height: 336px; }
@media (max-width: 480px) { .lm-esc { min-height: 356px; } }
.lm-esc-slide {
  opacity: 0; visibility: hidden; position: absolute; inset: 0;
  transition: opacity .7s ease, visibility .7s;
}
.lm-esc-slide.lm-esc-activa { opacity: 1; visibility: visible; position: relative; }
.lm-esc-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 13px; position: relative;
}
.lm-esc-flecha {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
  background: transparent; color: rgba(255,255,255,.8); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.lm-esc-flecha:hover { border-color: var(--pub-aqua); color: var(--pub-aqua); }
.lm-esc-flecha:focus-visible { outline: 2px solid var(--pub-aqua); outline-offset: 2px; }
.lm-esc-punto {
  /* (adversarial · P2) Área táctil ≥24px: el punto visible es el ::before; el botón es el blanco. */
  width: 24px; height: 24px; border-radius: 50%; background: transparent;
  border: none; padding: 0; cursor: pointer; position: relative;
}
.lm-esc-punto::before {
  content: ''; position: absolute; inset: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: rgba(255,255,255,.28); transition: background .25s, transform .25s;
}
.lm-esc-punto.lm-esc-activa::before { background: var(--pub-aqua); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
  .lm-esc-slide { transition: none; }
}