/* ===========================================================================
   PyMEOS · landing-enhance.css   (v5)
   Compartido por la principal + subpáginas por giro.
   Tipografía rematada · 3D presente · MOTION grande y DISTINTO por variante.
   El movimiento base es común; cada body[data-variant] tiene su propia firma
   de entrada para que ninguna página se sienta repetida.
   Cargar SIEMPRE después de clean-v2.css. Respeta prefers-reduced-motion.
   =========================================================================== */

:root {
  --lm-expo:  cubic-bezier(0.16, 1, 0.3, 1);   /* decisivo */
  --lm-quint: cubic-bezier(0.22, 1, 0.36, 1);  /* snappy refinado */
  --lm-out:   cubic-bezier(0.25, 1, 0.5, 1);   /* suave */
}

/* ── Tipografía rematada ─────────────────────────────────────────── */
.cln-hero h1, .cln-section-head h2, .cln-pullquote q { font-optical-sizing: auto; text-wrap: balance; }
.cln-hero h1 { line-height: 0.96; }
.cln-hero-lead, .cln-section-sub, .cln-module p, .cln-faq-a, .cln-diag-lead { text-wrap: pretty; }
.cln-hero-lead { max-width: 34ch; }

/* ── 3D presente (no ambient invisible) ──────────────────────────── */
.cln-hero-scene { opacity: 0.85; }
[data-theme="dark"] .cln-hero-scene { opacity: 0.95; }
@media (max-width: 720px){ .cln-hero-scene { opacity: 0.42; } }

/* ── Banda de tipos de negocio · editorial ───────────────────────── */
.esc-types { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,48px) clamp(56px,8vw,96px); display: flex; align-items: baseline; gap: clamp(14px,2vw,28px); flex-wrap: wrap; }
.esc-types-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3, #86868b); margin: 0; }
.esc-types ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; }
.esc-types li { position: relative; font-family: Fraunces, Georgia, serif; font-size: clamp(18px, 2vw, 26px); font-weight: 500; color: var(--ink-2, #3a3a3e); }
.esc-types li + li::before { content: '·'; position: absolute; left: -14px; opacity: 0.4; }

/* ── CTA primario · lift presente (no micro) ─────────────────────── */
.cln-btn-primary { transition: transform 0.25s var(--lm-quint), box-shadow 0.25s var(--lm-quint), background 0.2s var(--lm-quint); }
.cln-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(0,102,204,0.5); }
.cln-btn-primary:active { transform: translateY(-1px); }

/* ── Checkout directo · "Empezar ahora · $X USD" + sellos de confianza ──── */
.cln-checkout { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cln-checkout-buy { font-size: clamp(15px, 1.4vw, 17px); }
.cln-checkout-trust {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; padding: 0; margin: 0;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink-3, #86868b);
}
.cln-checkout-trust li { position: relative; padding-left: 18px; }
.cln-checkout-trust li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: #00B4D8; font-weight: 700; }
.cln-checkout-alt { margin: 4px 0 0; font-size: 14px; color: var(--ink-3, #86868b); }
.cln-checkout-alt a { color: var(--ink-2, #3a3a3e); text-decoration: underline; text-underline-offset: 3px; }
.cln-checkout-alt a:hover { color: #0066CC; }
/* Mientras el Payment Link no esté listo, el botón cae a la agenda: sin sellos de pago */
.cln-checkout[data-pago-pending="true"] .cln-checkout-trust { display: none; }

/* ===========================================================================
   MOTION · solo si el usuario no pidió menos movimiento
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ── HERO · coreografía de entrada base (la firma) ─────────────── */
  .cln-hero-content > * { opacity: 0; }
  .cln-hero-content .cln-section-eyebrow { animation: lmRise 0.8s var(--lm-expo) 0.15s forwards; }
  /* Título: revelado tipo "wipe" de arriba a abajo + sostiene */
  .cln-hero-content h1 { opacity: 1; clip-path: inset(-0.12em 0 105% 0); animation: lmWipe 1.1s var(--lm-expo) 0.30s forwards; }
  .cln-hero-content .cln-hero-lead { animation: lmRise 0.8s var(--lm-expo) 0.68s forwards; }
  .cln-hero-content .cln-hero-actions { animation: lmRiseBig 0.85s var(--lm-expo) 0.88s forwards; }
  /* El escenario 3D entra con presencia (scale-in lento) */
  .cln-hero-scene-wrap { animation: lmScene 1.8s var(--lm-out) 0.05s both; }

  /* ── SCROLL · encabezados de sección (más recorrido) ───────────── */
  .cln-section-head { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--lm-expo), transform 0.8s var(--lm-expo); }
  .is-visible .cln-section-head { opacity: 1; transform: none; }

  /* ── SCROLL · tarjetas con stagger amplio + recorrido grande ───── */
  .cln-module, .cln-product, .cln-pilar {
    opacity: 0; transform: translateY(60px) scale(0.94);
    transition: opacity 0.8s var(--lm-expo), transform 0.8s var(--lm-expo), border-color 0.3s var(--lm-quint);
  }
  .is-visible .cln-module, .is-visible .cln-product, .is-visible .cln-pilar { opacity: 1; transform: none; }
  .is-visible .cln-module:nth-child(2),  .is-visible .cln-pilar:nth-child(2)  { transition-delay: 0.08s; }
  .is-visible .cln-module:nth-child(3),  .is-visible .cln-pilar:nth-child(3)  { transition-delay: 0.16s; }
  .is-visible .cln-module:nth-child(4)  { transition-delay: 0.24s; }
  .is-visible .cln-module:nth-child(5)  { transition-delay: 0.32s; }
  .is-visible .cln-module:nth-child(6)  { transition-delay: 0.40s; }
  .is-visible .cln-product:nth-child(1) { transition-delay: 0.05s; }
  .is-visible .cln-product:nth-child(2) { transition-delay: 0.13s; }
  .is-visible .cln-product:nth-child(3) { transition-delay: 0.21s; }
  .is-visible .cln-product:nth-child(4) { transition-delay: 0.29s; }
  .is-visible .cln-product:nth-child(5) { transition-delay: 0.37s; }

  .cln-product { transition: transform 0.8s var(--lm-expo), opacity 0.8s var(--lm-expo), box-shadow 0.3s var(--lm-quint), border-color 0.3s var(--lm-quint); }
  .is-visible .cln-product:hover { transform: translateY(-6px); }

  /* ── SCROLL · FAQ con stagger ──────────────────────────────────── */
  .cln-faq-item { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--lm-expo), transform 0.6s var(--lm-expo); }
  .is-visible .cln-faq-item { opacity: 1; transform: none; }
  .is-visible .cln-faq-item:nth-child(2){ transition-delay: 0.06s; }
  .is-visible .cln-faq-item:nth-child(3){ transition-delay: 0.12s; }
  .is-visible .cln-faq-item:nth-child(4){ transition-delay: 0.18s; }
  .is-visible .cln-faq-item:nth-child(5){ transition-delay: 0.24s; }
  .is-visible .cln-faq-item:nth-child(6){ transition-delay: 0.30s; }

  /* ── SCROLL · pull-quote con énfasis ───────────────────────────── */
  .cln-pullquote q { opacity: 0; transform: translateY(34px) scale(0.98); transition: opacity 0.9s var(--lm-expo), transform 0.9s var(--lm-expo); display: inline-block; }
  .cln-pullquote.is-visible q { opacity: 1; transform: none; }

  /* ── CTA final · banda diagnóstico ─────────────────────────────── */
  .cln-diag > * { opacity: 0; transform: translateY(32px); transition: opacity 0.75s var(--lm-expo), transform 0.75s var(--lm-expo); }
  .cln-diag.is-visible > *:nth-child(1){ opacity:1; transform:none; }
  .cln-diag.is-visible > *:nth-child(2){ opacity:1; transform:none; transition-delay: 0.10s; }
  .cln-diag.is-visible > *:nth-child(3){ opacity:1; transform:none; transition-delay: 0.20s; }
  .cln-diag.is-visible > *:nth-child(4){ opacity:1; transform:none; transition-delay: 0.30s; }

  /* =========================================================================
     FIRMA POR VARIANTE · cada giro entra distinto (no monótono)
     ========================================================================= */

  /* ESCUELAS · crecimiento: el título y el lead deslizan desde la izquierda */
  body[data-variant="escuelas"] .cln-hero-content h1 { animation: lmSlideL 1.0s var(--lm-expo) 0.28s both; clip-path: none; }
  body[data-variant="escuelas"] .cln-hero-content .cln-hero-lead { animation: lmSlideL 0.85s var(--lm-expo) 0.6s both; }
  body[data-variant="escuelas"] .cln-module { transform: translateX(-56px); }

  /* CITAS · tiempo: entrada en escala (como un foco que enfoca) */
  body[data-variant="citas"] .cln-hero-content h1 { animation: lmZoom 1.05s var(--lm-expo) 0.28s both; clip-path: none; }
  body[data-variant="citas"] .cln-section-head { transform: translateY(0) scale(0.92); }
  body[data-variant="citas"] .is-visible .cln-section-head { transform: none; }

  /* COMERCIO · inventario: las tarjetas suben en bloque, más resorte visual */
  body[data-variant="comercio"] .cln-hero-content h1 { animation: lmRiseBig 1.0s var(--lm-expo) 0.30s both; clip-path: none; }
  body[data-variant="comercio"] .cln-module, body[data-variant="comercio"] .cln-product { transform: translateY(72px) scale(0.9); }

  /* INMOBILIARIA · torre: el título se construye de abajo hacia arriba */
  body[data-variant="inmobiliaria"] .cln-hero-content h1 { clip-path: inset(105% 0 -0.12em 0); animation: lmWipeUp 1.1s var(--lm-expo) 0.30s forwards; }
  body[data-variant="inmobiliaria"] .cln-module { transform: translateY(64px); }

  /* PERSONALIZADO · red: entrada con desenfoque que se resuelve (fade-focus) */
  body[data-variant="personalizado"] .cln-hero-content h1 { animation: lmFocus 1.1s var(--lm-out) 0.30s both; clip-path: none; }
  body[data-variant="personalizado"] .cln-hero-content .cln-hero-lead { animation: lmFocus 0.9s var(--lm-out) 0.62s both; }
  body[data-variant="personalizado"] .cln-pilar { transform: translateY(50px) scale(0.92); }
}

/* ── Keyframes ───────────────────────────────────────────────────── */
@keyframes lmRise    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lmRiseBig { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes lmWipe    { from { clip-path: inset(-0.12em 0 105% 0); }   to { clip-path: inset(-0.12em 0 -0.12em 0); } }
@keyframes lmWipeUp  { from { clip-path: inset(105% 0 -0.12em 0); }   to { clip-path: inset(-0.12em 0 -0.12em 0); } }
@keyframes lmScene   { from { opacity: 0; transform: scale(1.12); }   to { opacity: 1; transform: none; } }
@keyframes lmSlideL  { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes lmZoom    { from { opacity: 0; transform: scale(0.86); }   to { opacity: 1; transform: none; } }
@keyframes lmFocus   { from { opacity: 0; filter: blur(14px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }

/* ── Reduced motion: todo visible, sin transform ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cln-hero-content > *, .cln-hero-content h1, .cln-section-head, .cln-module, .cln-product,
  .cln-pilar, .cln-faq-item, .cln-pullquote q, .cln-diag > *, .cln-hero-scene-wrap {
    opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; filter: none !important;
  }
}