/* ═══════════════════════════════════════════════════════════════════════
   landing.css — la hoja de estilos de las páginas públicas (portada,
   /funciones, /precios, /testimonios, /seguridad).

   15-sep-2026: salió de la portada (donde vivía en un <style>
   de 4,200 líneas) cuando la landing se partió en páginas. Es el MISMO CSS,
   línea por línea; sólo cambió de casa para que las cinco páginas compartan
   una hoja cacheada y la barra superior se vea idéntica al cambiar de
   página. Los bloques de abajo (Por dentro, FAQ, CTA móvil, WhatsApp) eran
   <style> sueltos dentro del <body> y se pegaron aquí en el mismo orden.
   ═══════════════════════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════════
     LANDING V3 — Modern, high-conversion redesign
     ═══════════════════════════════════════════════════════════ */

  * { box-sizing: border-box; }
  /* Prevent horizontal scroll at html level — safe for position:fixed elements */
  html { overflow-x: hidden; scroll-behavior: smooth; }

  /* ── Scroll-reveal ───────────────────────────────────────── */
  .lnd-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .lnd-reveal.lnd-visible { opacity: 1; transform: translateY(0) scale(1); }

  /* Stagger variant: children animate sequentially when parent becomes visible */
  .lnd-reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lnd-reveal-stagger.lnd-visible > * { opacity: 1; transform: translateY(0); }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(1) { transition-delay:   0ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(2) { transition-delay: 100ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(3) { transition-delay: 200ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(4) { transition-delay: 300ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(5) { transition-delay: 400ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(6) { transition-delay: 500ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(7) { transition-delay: 600ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(8) { transition-delay: 700ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(9)  { transition-delay: 560ms; }
  .lnd-reveal-stagger.lnd-visible > *:nth-child(10) { transition-delay: 620ms; }

  /* ── Nav ─────────────────────────────────────────────────── */
  .landing-nav { transition:background .3s, box-shadow .3s; }
  /* Expreso button: hidden on desktop (already in nav-links), visible on mobile */
  .landing-expreso-mobile-btn { display: none; }
  @media (max-width: 900px) {
    /* Trust marquee */
    .trust-marquee { padding: 40px 0 48px; }
    .trust-marquee-label { font-size: 9.5px; padding: 0 20px; line-height: 1.6; }
    .tm-item { font-size: 17px; }
    .trust-marquee-row { gap: 40px; padding-right: 40px; }
    .trust-marquee::before, .trust-marquee::after { width: 50px; }
    /* Vanish headings: skip on mobile */
    .vanish-h { -webkit-mask-image: none !important; mask-image: none !important; }
    /* Showcase reveal: disable on mobile */
    /* Showcase: keep scale animation but remove delays so all 3 appear together */
    .showcase-cards.sc-triggered .showcase-card:nth-child(1),
    .showcase-cards.sc-triggered .showcase-card:nth-child(2),
    .showcase-cards.sc-triggered .showcase-card:nth-child(3) {
      transition-delay: 0ms !important;
    }
    /* Assembly: all cards visible immediately on mobile */
    .feat-grid-v3 { grid-template-columns: 1fr !important; }
    .feat-card-v3.feat-large { grid-column: span 1 !important; min-height: auto !important; }
    /* Mobile: vertical reveal instead of horizontal */
    .feat-grid-v3 .feat-card-v3:nth-child(odd),
    .feat-grid-v3 .feat-card-v3:nth-child(even) { transform: translateY(30px); }
    .feat-grid-v3 .feat-card-v3.feat-revealed { opacity: 1; transform: translateY(0); }
    .feat-card-v3.feat-large { grid-column: span 1; min-height: auto; }
    .feat-card-v3 { min-height: auto; }
    /* Section-specific anims: reset to standard translateY on mobile */
    .pdf-section .pdf-section-inner > .lnd-reveal:first-child,
    .pdf-frame-wrap.lnd-reveal,
    .cal-section .ss-browser-frame.lnd-reveal,
    .cal-section .cal-inner > .lnd-reveal:first-child,
    .mp-section .mp-inner > .lnd-reveal:first-child,
    .mp-laptop-wrap.lnd-reveal { transform: translateY(30px) scale(0.97); transition-delay: 0ms; }
    .mp-laptop-wrap.lnd-reveal { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }
    .pdf-float-card { opacity:1; transform:none; transition:none; }
    /* Hero stagger: ensure visible on mobile even without JS completing */
    .hero-v3-badge, .hero-v3-sub, .hero-v3-actions, .hero-trust {
      animation: heroMobileFallback 0s 1.5s forwards;
    }
    .hw { animation: heroMobileFallback 0s 1.4s forwards; }
    @keyframes heroMobileFallback { to { opacity: 1; transform: none; } }
    /* TOC sidebar: hidden on mobile */
    .page-toc { display: none !important; }
    /* Pain section v2: display:contents bypasses all sticky/height issues */
    .pain-pinned-track, .pain-pinned-stage { display: contents !important; }
    .pain-inner { padding: 48px 20px; }
    .pain-col-before, .pain-col-after { transform: none !important; opacity: 1 !important; }
    .pain-col-before li, .pain-col-after li { opacity: 1 !important; transform: none !important; }
    /* Scene pinned: hide desktop track, show mobile fallback */
    .scene-progress-bar  { display: none; }
    .scene-ambient       { display: none; }
    .scene-pinned-track  { display: none; }
    .scene-pinned-mobile { display: block; }
    /* ECG en móvil: se re-habilita más abajo (segundo bloque max-width:900px),
       después de la regla base de .hero-ecg para ganar en la cascada. */
    .landing-expreso-mobile-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 8px;
      background: #F3F4F6;
      white-space: nowrap;
      transition: background .15s;
    }
    .landing-expreso-mobile-btn:hover { background: #E5E7EB; }
    /* Mobile nav: show login, hide News */
    .landing-nav-hide-mobile { display: inline-flex !important; }
    .landing-expreso-mobile-btn { display: none !important; }
    /* On mobile: hide icon + text, show mobile-only logo */
    .landing-brand-icon { display: none !important; }
    .landing-brand-text { display: none !important; }
    .landing-brand-mobile { display: block !important; }
  }
  /* Very narrow screens: keep the primary CTA fully visible (it was clipping off-screen) */
  @media (max-width: 480px) {
    .landing-nav-inner { padding: 10px 10px; gap: 6px; }
    .landing-nav-actions { gap: 6px; flex-shrink: 0; }
    .landing-nav-actions .btn { font-size: 13px; padding: 8px 12px; white-space: nowrap; }
    .landing-brand-mobile { max-width: 104px !important; }
  }
  .landing-nav.lnd-scrolled {
    background: rgba(255,255,255,.93) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 32px rgba(0,0,0,.09) !important;
  }

  /* ══════════════════════════════════════════════════════════
     HERO
     ══════════════════════════════════════════════════════════ */
  /* CSS animated gradient fallback on body — shows through transparent/semi-transparent sections */
  body.landing-body {
    background: linear-gradient(135deg, #0d2756 0%, #1534a0 35%, #0ea5e9 70%, #166534 100%);
    background-size: 400% 400%;
    animation: pageGradientFallback 14s ease-in-out infinite alternate;
    /* Clip stray horizontal overflow from animated hero/feature transforms so the
       blue page gradient never shows as a sliver on the right. `clip` (not `hidden`)
       keeps vertical scroll and the pinned story section working. */
    overflow-x: clip;
  }
  @keyframes pageGradientFallback {
    0%   { background-position: 0% 0%; }
    33%  { background-position: 100% 20%; }
    66%  { background-position: 80% 100%; }
    100% { background-position: 0% 100%; }
  }
  /* Fixed WebGL canvas — covers entire page */
  #page-bg-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    display: block;
    pointer-events: none;
  }
  .hero-v3 {
    position: relative;
    overflow: hidden;
    background: transparent;
    padding: 100px 24px 80px;
  }


  .hero-v3-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
  }


  /* ── Hero entrance stagger ──────────────────────────────── */
  .hw {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
  }
  .hw.hw-in { opacity: 1; transform: translateY(0); }

  .hero-v3-badge,
  .hero-v3-sub,
  .hero-v3-actions,
  .hero-trust {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .hero-v3-badge.h-in,
  .hero-v3-sub.h-in,
  .hero-v3-actions.h-in,
  .hero-trust.h-in { opacity: 1; transform: translateY(0); }

  .hero-v3-visual {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
  }
  .hero-v3-visual.h-in { opacity: 1; transform: translateY(0) scale(1); }

  /* ── ECG background ─────────────────────────────────────── */
  .hero-ecg {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    width: 100%; height: 200px;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
  }
  .hero-ecg-path {
    fill: none;
    stroke: url(#hero-ecg-fade);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-ecg-scroll { animation: heroEcgScroll 5s linear infinite; }
  @keyframes heroEcgScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-380px); }
  }

  /* Badge */
  .hero-v3-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: white;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px 5px 6px;
    border-radius: 999px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero-v3-badge-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand-green);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Headline */
  .hero-v3-title {
    font-size: clamp(40px, 4.8vw, 62px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
    text-shadow: 0 2px 24px rgba(0,0,0,.18);
  }


  .hero-v3-sub {
    font-size: 18px;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 480px;
  }

  .hero-v3-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .hero-v3-actions .btn-hero-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 15px 30px;
    background: white;
    color: var(--brand-blue-dark);
    font-size: 15px; font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s;
    border: none;
  }
  .hero-v3-actions .btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,.3);
  }
  .hero-v3-actions .btn-hero-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 15px 28px;
    background: rgba(255,255,255,.12);
    color: white;
    font-size: 15px; font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .2s, background .2s;
  }
  .hero-v3-actions .btn-hero-ghost:hover {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.2);
  }

  .hero-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255,255,255,.6);
    flex-wrap: wrap;
  }
  .hero-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: #CBD5E1; }

  /* Visual side */
  .hero-v3-visual {
    position: relative;
  }
  .hero-mockup-wrap {
    position: relative;
    animation: floatMockup 6s ease-in-out infinite;
  }
  @keyframes floatMockup { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
  .hero-mockup-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(ellipse at 50% 50%, rgba(27,123,214,.18), transparent 70%);
    filter: blur(20px);
    border-radius: 24px;
    z-index: 0;
    animation: glowPulse 4s ease-in-out infinite alternate;
  }
  @keyframes glowPulse { 0% { opacity:.6; } 100% { opacity:1; } }

  /* Floating stats chips */
  .hero-float-chip {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    border: 1px solid rgba(255,255,255,.8);
    z-index: 3;
    animation: chipFloat 4s ease-in-out infinite;
  }
  @keyframes chipFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
  .hero-float-chip .ct { font-size: 12px; font-weight: 700; color: #0F172A; line-height: 1.2; }
  .hero-float-chip .cs { font-size: 10.5px; font-weight: 600; color: #94A3B8; line-height: 1.2; }
  /* Around-the-mascot positions (left column = blue features, right = green/agenda) */
  .chip-recetas    { left: -46px;  top: 4%; }
  .chip-expediente { left: -30px;  top: 39%; }
  .chip-whatsapp   { left: -10px;  bottom: 5%; }
  .chip-analisis   { right: -46px; top: 17%; }
  .chip-calendar   { right: -30px; top: 50%; }
  .chip-consent    { right: -8px;  bottom: 7%; }
  .chip-dot { width: 30px; height: 30px; border-radius: 9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  /* ══════════════════════════════════════════════════════════
     STATS STRIP
     ══════════════════════════════════════════════════════════ */
  .stats-strip {
    background: #0F172A;
    padding: 0 24px;
    overflow-x: hidden;
  }
  .stats-strip-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .stat-item {
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.07);
    position: relative;
  }
  .stat-item:last-child { border-right: none; }
  .stat-value {
    font-size: 36px;
    font-weight: 900;
    display: inline-block;
    min-width: 3ch;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #60A5FA, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-label {
    font-size: 12.5px;
    color: #94A3B8;
    font-weight: 500;
    line-height: 1.4;
  }

  /* ══════════════════════════════════════════════════════════
     PAIN / TRANSFORMATION
     ══════════════════════════════════════════════════════════ */
  .pain-section {
    padding: 96px 24px;
    background: #F8FAFC;
  }
  .pain-inner { max-width: 1040px; margin: 0 auto; }
  .pain-label {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FEF2F2; border: 1px solid #FECACA;
    color: #DC2626; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 16px;
  }
  .pain-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 900; color: #0F172A;
    letter-spacing: -0.03em; margin: 0 0 10px; line-height: 1.15;
  }
  .pain-subtitle { font-size: 17px; color: #64748B; margin: 0 0 48px; }
  .pain-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  }
  .pain-col {
    border-radius: 24px; padding: 36px 32px;
  }
  .pain-col-before {
    background: #0F172A;
    border: 1px solid #1E293B;
    position: relative; overflow: hidden;
  }
  .pain-col-before::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(239,68,68,.12), transparent);
    top: -60px; right: -60px;
    border-radius: 50%;
  }
  .pain-col-after {
    background: white;
    border: 2px solid #BFDBFE;
    box-shadow: 0 8px 32px rgba(27,123,214,.08);
    position: relative; overflow: hidden;
  }
  .pain-col-after::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(27,123,214,.06), transparent);
    top: -60px; right: -60px;
    border-radius: 50%;
  }
  .pain-col-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 18px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
  }
  .pain-col-before .pain-col-badge {
    background: rgba(239,68,68,.15); color: #FCA5A5;
  }
  .pain-col-after .pain-col-badge {
    background: #EFF6FF; color: var(--brand-blue);
  }
  .pain-col-badge span {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 10px;
  }
  .pain-col-before .pain-col-badge span { background: rgba(239,68,68,.3); }
  .pain-col-after .pain-col-badge span { background: #DBEAFE; color: var(--brand-blue); }
  .pain-col h3 {
    font-size: 20px; font-weight: 800; margin: 0 0 20px; line-height: 1.25;
  }
  .pain-col-before h3 { color: #F1F5F9; }
  .pain-col-after h3 { color: #0F172A; }
  .pain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .pain-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; }
  .pain-col-before .pain-list li { color: #94A3B8; }
  .pain-col-after .pain-list li { color: #374151; }
  .pain-icon-bad {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(239,68,68,.2); color: #F87171;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
  }
  .pain-icon-good {
    width: 20px; height: 20px; border-radius: 50%;
    background: #DBEAFE; color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
  }

  /* ══════════════════════════════════════════════════════════
     FEATURES
     ══════════════════════════════════════════════════════════ */
  .features-v3 {
    padding: 96px 24px;
    background: white;
  }
  .features-v3-inner { max-width: 1100px; margin: 0 auto; }
  .section-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: #EFF6FF; color: var(--brand-blue);
    font-size: 12px; font-weight: 700;
    padding: 4px 14px; border-radius: 999px;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 16px;
  }
  .section-heading {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 900; color: #0F172A;
    letter-spacing: -0.03em; margin: 0 0 12px; line-height: 1.15;
  }
  .section-sub {
    font-size: 17px; color: #64748B; margin: 0 0 56px;
    max-width: 540px;
  }
  .feat-grid-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .feat-card-v3 {
    border-radius: 20px;
    padding: 32px 28px;
    background: #FAFAFA;
    border: 1.5px solid #F1F5F9;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
  }
  /* Explanatory vector render at the bottom of each feature card */
  .feat-render {
    margin: auto -28px -32px; margin-top: 22px;
    height: 178px; overflow: hidden;
    border-top: 1px solid rgba(15,23,42,.06);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #FBFCFE 0%, #EEF3FA 100%);
  }
  .feat-card-v3.feat-large .feat-render { height: 216px; }
  .feat-render svg { width: 90%; height: 86%; display: block; transition: transform .4s cubic-bezier(.22,.9,.3,1); }
  .feat-card-v3:hover .feat-render svg { transform: translateY(-4px) scale(1.02); }
  .feat-card-v3::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity .25s;
  }
  .feat-card-v3:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,.09);
    border-color: #E2E8F0;
    background: white;
  }
  .feat-card-v3:hover::before { opacity: 1; }
  .feat-card-v3.fc-blue::before  { background: linear-gradient(90deg, var(--brand-blue), #60A5FA); }
  .feat-card-v3.fc-indigo::before { background: linear-gradient(90deg, #4F46E5, #818CF8); }
  .feat-card-v3.fc-purple::before { background: linear-gradient(90deg, #7C3AED, #C084FC); }
  .feat-card-v3.fc-orange::before { background: linear-gradient(90deg, #EA580C, #FB923C); }
  .feat-card-v3.fc-green::before  { background: linear-gradient(90deg, #16A34A, #4ADE80); }
  .feat-card-v3.fc-teal::before   { background: linear-gradient(90deg, #0891B2, #22D3EE); }
  .feat-icon-v3 {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
  }
  .feat-icon-v3 svg { width: 22px; height: 22px; }
  .fi-blue   { background: #EFF6FF; color: var(--brand-blue); }
  .fi-indigo { background: #EEF2FF; color: #4F46E5; }
  .fi-purple { background: #F5F3FF; color: #7C3AED; }
  .fi-orange { background: #FFF7ED; color: #EA580C; }
  .fi-green  { background: #F0FDF4; color: #16A34A; }
  .fi-teal   { background: #ECFEFF; color: #0891B2; }
  .feat-card-v3 h3 {
    font-size: 16px; font-weight: 800; color: #0F172A; margin: 0 0 8px;
  }
  .feat-card-v3 p {
    font-size: 14px; color: #64748B; line-height: 1.6; margin: 0;
  }

  /* ══════════════════════════════════════════════════════════
     TESTIMONIAL
     ══════════════════════════════════════════════════════════ */
  .testimonial-section {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
  }
  .testimonial-section::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27,123,214,.15), transparent);
    top: -150px; right: -100px;
    pointer-events: none;
  }
  .testimonial-inner {
    max-width: 780px; margin: 0 auto;
    text-align: center; position: relative; z-index: 1;
  }
  .testimonial-stars {
    display: flex; justify-content: center; gap: 4px;
    margin-bottom: 28px;
  }
  .testimonial-stars svg { width: 20px; height: 20px; fill: #F59E0B; }
  .testimonial-quote {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700;
    color: white;
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
  }
  .testimonial-quote em {
    font-style: normal;
    color: #60A5FA;
  }
  .testimonial-author {
    display: flex; align-items: center; gap: 14px;
    justify-content: center;
  }
  .testimonial-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 900; color: white;
    flex-shrink: 0;
  }
  .testimonial-meta { text-align: left; }
  .testimonial-name { font-size: 15px; font-weight: 700; color: white; }
  .testimonial-role { font-size: 13px; color: #94A3B8; margin-top: 2px; }

  /* ══════════════════════════════════════════════════════════
     AI SECTION
     ══════════════════════════════════════════════════════════ */
  .ai-section-v3 {
    background: linear-gradient(150deg, #1E40AF 0%, var(--brand-blue-dark) 60%, var(--brand-blue) 100%);
    padding: 96px 24px;
    position: relative;
    overflow: hidden;
  }
  .ai-section-v3::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
  }
  .ai-section-v3::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27,123,214,.2), transparent);
    bottom: -100px; right: -100px;
    pointer-events: none;
  }
  .ai-inner-v3 {
    max-width: 1000px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
    position: relative; z-index: 1;
  }
  .ai-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.12); color: #93C5FD;
    font-size: 12px; font-weight: 700;
    padding: 4px 14px; border-radius: 999px;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 16px;
  }
  .ai-inner-v3 h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 900; color: white;
    letter-spacing: -0.03em; line-height: 1.15;
    margin: 0 0 16px;
  }
  .ai-inner-v3 p {
    font-size: 16px; color: #BFDBFE; line-height: 1.7; margin: 0 0 28px;
  }
  .ai-points-v3 {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .ai-points-v3 li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: #DBEAFE; line-height: 1.5;
  }
  .ai-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
  }
  .ai-check svg { width: 11px; height: 11px; }
  .ai-visual-v3 {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .ai-demo-label {
    font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 16px;
  }
  .ai-bubble-doc {
    background: rgba(255,255,255,.14);
    border-radius: 16px 16px 4px 16px;
    padding: 13px 16px;
    font-size: 13px; color: #E2E8F0; line-height: 1.55;
    margin-bottom: 14px;
  }
  .ai-bubble-ai {
    background: white;
    border-radius: 4px 16px 16px 16px;
    padding: 14px 16px;
    font-size: 12.5px; color: #1E3A5F; line-height: 1.6;
  }
  .ai-bubble-ai-label {
    font-size: 10px; font-weight: 800;
    color: var(--brand-blue); text-transform: uppercase;
    letter-spacing: .07em; margin-bottom: 8px;
    display: flex; align-items: center; gap: 5px;
  }
  .ai-confirm-bar {
    margin-top: 14px;
    background: rgba(255,255,255,.08);
    border-radius: 10px; padding: 10px 14px;
    font-size: 12px; color: rgba(255,255,255,.55);
    display: flex; align-items: center; gap: 8px;
  }

  /* ══════════════════════════════════════════════════════════
     CALENDAR SECTION
     ══════════════════════════════════════════════════════════ */
  .cal-section {
    background: #F8FAFC; padding: 96px 24px;
  }
  .cal-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center;
  }
  .cal-points {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .cal-points li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: #374151; line-height: 1.5;
  }
  .cal-check {
    width: 22px; height: 22px; border-radius: 50%;
    background: #EFF6FF; color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px;
  }

  /* ══════════════════════════════════════════════════════════
     PRICING
     ══════════════════════════════════════════════════════════ */
  /* Tres tarjetas de precio alineadas fila por fila (8-sep-2026, «deja alineado
     esto — las 3 cards»): cada tarjeta es un subgrid de 5 filas (encabezado,
     precio, caja de ahorro, checks, botón) sobre la rejilla del contenedor, así
     que las filas comparten altura entre tarjetas aunque el texto se parta. */
  .pricing-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; align-items:stretch; }
  .pricing-cards.tres { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .pricing-card { display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; }
  .pricing-card > .pc-checks { align-self:start; }
  .pricing-card > .pc-cta { align-self:end; }
  .pricing-section {
    background: white; padding: 96px 24px;
  }
  .pricing-inner { max-width: 1040px; margin: 0 auto; }
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
  }
  .plan-card {
    border-radius: 22px; padding: 30px 26px;
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
  }
  .plan-card:hover { transform: translateY(-4px); }
  .plan-card-basic {
    border: 1.5px solid #E5E7EB; background: #FAFAFA;
  }
  .plan-card-pro {
    border: 2px solid var(--brand-blue); background: white;
    box-shadow: 0 0 0 6px rgba(27,123,214,.08), 0 24px 64px rgba(27,123,214,.18);
    position: relative;
  }
  .plan-card-pro:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 6px rgba(27,123,214,.1), 0 32px 80px rgba(27,123,214,.22);
  }
  .plan-card-spec {
    border: 1.5px solid #EDE9FE; background: #FDFBFF;
  }
  .plan-popular-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, var(--brand-blue), #4F46E5);
    color: white; font-size: 11px; font-weight: 800;
    padding: 5px 18px; border-radius: 999px;
    letter-spacing: .07em; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(27,123,214,.4);
  }
  .plan-name { font-size: 19px; font-weight: 800; color: #0F172A; margin-bottom: 4px; }
  .plan-price {
    font-size: 40px; font-weight: 900;
    letter-spacing: -0.03em; line-height: 1; margin: 8px 0 4px;
  }
  .plan-price-basic { color: var(--brand-blue); }
  .plan-price-pro   { color: var(--brand-blue); }
  .plan-price-spec  { color: #7C3AED; }
  .plan-period { font-size: 14px; font-weight: 500; color: #94A3B8; }
  .plan-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
  .plan-chip {
    font-size: 11.5px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
  }
  .plan-chip-blue   { background: #EFF6FF; color: var(--brand-blue-dark); }
  .plan-chip-green  { background: #F0FDF4; color: #15803D; }
  .plan-chip-purple { background: #F5F3FF; color: #7C3AED; }
  .plan-desc { font-size: 13px; color: #6B7280; line-height: 1.55; margin: 6px 0 12px; }
  .plan-divider { height: 1px; background: #F1F5F9; margin: 12px 0 16px; }
  .plan-divider-pro { background: #DBEAFE; }
  .plan-features {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: flex; flex-direction: column; gap: 9px; flex: 1;
  }
  .plan-features li {
    font-size: 13px; color: #374151;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .plan-features li span { font-weight: 800; flex-shrink: 0; }
  .plan-check-blue   { color: var(--brand-blue); }
  .plan-check-purple { color: #7C3AED; }
  .plan-btn {
    display: block; text-align: center;
    padding: 13px; border-radius: 13px;
    font-size: 14px; font-weight: 700;
    text-decoration: none; transition: opacity .2s, transform .15s;
  }
  .plan-btn:hover { opacity: .88; transform: translateY(-1px); }
  .plan-btn-blue   { background: var(--brand-blue); color: white; }
  .plan-btn-pro    { background: linear-gradient(135deg, var(--brand-blue), var(--brand-green-dark)); color: white; box-shadow: 0 6px 20px rgba(27,123,214,.4); }
  .plan-btn-purple { background: #7C3AED; color: white; }

  /* ══════════════════════════════════════════════════════════
     HOW IT WORKS
     ══════════════════════════════════════════════════════════ */
  .how-section-v3 { padding: 96px 24px; background: #F8FAFC; }
  .how-inner-v3 { max-width: 960px; margin: 0 auto; }
  .steps-grid-v3 {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 56px;
    position: relative;
  }
  .steps-grid-v3::before {
    content: '';
    position: absolute;
    top: 28px; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, #BFDBFE, #C4B5FD);
    z-index: 0;
  }
  .step-v3 {
    text-align: center;
    position: relative; z-index: 1;
    transition: transform .25s;
  }
  .step-v3:hover { transform: translateY(-4px); }
  .step-num-v3 {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-green-dark));
    color: white; font-size: 22px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(27,123,214,.35);
  }
  .step-v3 h3 { font-size: 15px; font-weight: 800; color: #0F172A; margin: 0 0 8px; }
  .step-v3 p  { font-size: 13.5px; color: #64748B; line-height: 1.55; margin: 0; }

  /* ══════════════════════════════════════════════════════════
     SECURITY
     ══════════════════════════════════════════════════════════ */
  /* (security-v3 styles removed — that duplicate section was merged into trust-final/#security) */

  /* ══════════════════════════════════════════════════════════
     CTA FINAL
     ══════════════════════════════════════════════════════════ */
  .cta-v3 {
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 50%, var(--brand-green-dark) 100%);
    padding: 100px 24px;
    position: relative; overflow: hidden;
    text-align: center;
  }
  .cta-v3::before {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent);
    top: -250px; right: -150px;
    animation: ctaOrb1 12s ease-in-out infinite alternate;
    pointer-events: none;
  }
  .cta-v3::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent);
    bottom: -150px; left: -100px;
    animation: ctaOrb2 15s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes ctaOrb1 { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(-10%,15%) scale(1.3); } }
  @keyframes ctaOrb2 { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(12%,-8%) scale(1.35); } }
  .cta-v3-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
  .cta-v3-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18); color: white;
    font-size: 12px; font-weight: 700;
    padding: 5px 14px; border-radius: 999px;
    letter-spacing: .06em; margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.2);
  }
  .cta-v3 h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900; color: white;
    letter-spacing: -0.03em; line-height: 1.1;
    margin: 0 0 16px;
  }
  .cta-v3 p {
    font-size: 17px; color: rgba(255,255,255,.8);
    line-height: 1.65; margin: 0 0 36px;
  }
  .cta-v3-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 17px 38px;
    background: white; color: var(--brand-blue);
    font-size: 16px; font-weight: 800;
    border-radius: 14px; text-decoration: none;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s;
    letter-spacing: -0.01em;
  }
  .cta-v3-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
  }
  .cta-v3-trust {
    margin-top: 20px;
    font-size: 13px; color: rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
  }
  .cta-v3-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }

  /* ══════════════════════════════════════════════════════════
     FOOTER
     ══════════════════════════════════════════════════════════ */
  .footer-v3 {
    background: #0A0F1E; padding: 28px 24px;
  }
  .footer-v3-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12.5px; color: #475569;
    flex-wrap: wrap; gap: 8px;
  }

  /* ══════════════════════════════════════════════════════════
     RESPONSIVE
     ══════════════════════════════════════════════════════════ */
  @media (max-width: 900px) {
    .hero-v3-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero-v3-visual { display: none; }
    .hero-v3 { padding: 72px 24px 56px; }
    .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .ai-inner-v3 { grid-template-columns: 1fr; gap: 36px; }
    .cal-inner { grid-template-columns: 1fr; }
    .steps-grid-v3 { grid-template-columns: 1fr 1fr; }
    .steps-grid-v3::before { display: none; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  }
  @media (max-width: 768px) {
    .pain-grid { grid-template-columns: 1fr; }
    .feat-grid-v3 { grid-template-columns: 1fr 1fr; }
    .hero-v3-title { font-size: clamp(36px, 9vw, 52px); }
    .section-heading { font-size: clamp(24px, 5vw, 32px); }
  }
  @media (max-width: 480px) {
    .feat-grid-v3 { grid-template-columns: 1fr; }
    .steps-grid-v3 { grid-template-columns: 1fr; }
    .stats-strip-inner { grid-template-columns: 1fr 1fr; }
    .hero-v3-actions { flex-direction: column; }
    .hero-v3-actions .btn-hero-primary,
    .hero-v3-actions .btn-hero-ghost { width: 100%; justify-content: center; }
  }

  /* ══════════════════════════════════════════════════════════
     URGENCY BAR
     ══════════════════════════════════════════════════════════ */
  .urgency-bar {
    background: linear-gradient(90deg, #059669 0%, #10B981 50%, #059669 100%);
    background-size: 200% 100%;
    animation: urgencyGradient 5s ease-in-out infinite;
    padding: 9px 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.01em;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  @keyframes urgencyGradient {
    0%,100% { background-position:0% center; }
    50% { background-position:100% center; }
  }
  .urgency-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: white;
    flex-shrink: 0;
    animation: urgencyPulse 1.5s ease-in-out infinite;
  }
  @keyframes urgencyPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
    50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  }

  /* ══════════════════════════════════════════════════════════
     MASCOT — hero visual
     ══════════════════════════════════════════════════════════ */
  .hero-mascot-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 460px;
  }

  .mascot-hero-img {
    width: 340px;
    max-width: 100%;
    filter: drop-shadow(0 28px 60px rgba(27,123,214,.3)) drop-shadow(0 8px 20px rgba(22,163,74,.18));
    animation: mascotHeroFloat 5.5s ease-in-out infinite;
    position: relative; z-index: 2;
  }
  @keyframes mascotHeroFloat {
    0%,100% { transform: translateY(0) rotate(-0.6deg); }
    50% { transform: translateY(-18px) rotate(0.9deg); }
  }
  /* Mobile: floats DOWN so hero overflow:hidden never clips head */
  @keyframes mascotFloatDown {
    0%,100% { transform: translateY(0) rotate(0.4deg); }
    50% { transform: translateY(14px) rotate(-0.4deg); }
  }

  /* ══════════════════════════════════════════════════════════
     WOW PACK — pulido visual (rama landing-orden)
     ══════════════════════════════════════════════════════════ */
  /* Aurora animada detrás del hero */
  .hero-v3::before, .hero-v3::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(90px); pointer-events: none; z-index: 0;
  }
  .hero-v3::before {
    width: 560px; height: 560px; left: -160px; top: -140px;
    background: radial-gradient(circle at 30% 30%, rgba(84,185,72,.5), transparent 65%);
    opacity: .6; animation: auroraDrift 16s ease-in-out infinite alternate;
  }
  .hero-v3::after {
    width: 680px; height: 680px; right: -200px; bottom: -260px;
    background: radial-gradient(circle at 70% 60%, rgba(56,189,248,.45), transparent 65%);
    opacity: .55; animation: auroraDrift 21s ease-in-out -7s infinite alternate-reverse;
  }
  @keyframes auroraDrift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(70px,50px) scale(1.18); }
  }
  .hero-v3-inner { position: relative; z-index: 1; }

  /* "ordenado" — texto con brillo que recorre el degradado */
  .hw-shimmer {
    background: linear-gradient(100deg, #54B948 20%, #C6F6D5 42%, #54B948 62%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: hwShimmer 3.8s linear infinite;
  }
  @keyframes hwShimmer { from { background-position: 130% 0; } to { background-position: -110% 0; } }

  /* Halo de gradiente animado en los CTAs blancos (hero y cierre).
     Nota: el botón NO debe crear stacking context (sin z-index), para que el
     pseudo con z-index:-1 quede DETRÁS del fondo blanco del botón. */
  .hero-v3-actions .btn-hero-primary, .cta-v3-btn { position: relative; }
  .hero-v3-actions .btn-hero-primary::before, .cta-v3-btn::before {
    content: ""; position: absolute; inset: -5px; border-radius: 17px;
    background: linear-gradient(120deg, #54B948, #38BDF8, #1B7BD6, #54B948);
    background-size: 300% 300%; filter: blur(13px); opacity: .7; z-index: -1;
    animation: haloSlide 6s linear infinite;
  }
  @keyframes haloSlide { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

  /* Destello que barre los CTAs de color */
  .vexp-cta-btn, .msc-btn, .morph-cta-wrap .btn-hero-primary, .sm-cta .btn-hero-primary {
    position: relative; overflow: hidden;
  }
  .vexp-cta-btn::after, .msc-btn::after,
  .morph-cta-wrap .btn-hero-primary::after, .sm-cta .btn-hero-primary::after {
    content: ""; position: absolute; top: 0; left: -90%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); pointer-events: none;
    animation: ctaShine 4.8s ease-in-out infinite;
  }
  @keyframes ctaShine { 0%, 70% { left: -90%; } 90%, 100% { left: 150%; } }

  /* Cards de características: levitan con glow al pasar el cursor */
  .feat-card-v3.feat-revealed { transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s; }
  .feat-card-v3.feat-revealed:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 60px -12px rgba(27,123,214,.25);
  }

  /* Testimonio: comillas monumentales */
  .testimonial-inner { position: relative; }
  .testimonial-inner::before {
    content: "\201C"; position: absolute; top: -58px; left: 50%; transform: translateX(-50%);
    font-family: Georgia, serif; font-size: 150px; line-height: 1;
    color: rgba(96,165,250,.35); pointer-events: none;
  }

  /* Plan anual: pulso de glow verde para anclar la mirada en "mejor valor" */
  @keyframes annualGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(68,148,56,.12); }
    50%      { box-shadow: 0 10px 44px rgba(84,185,72,.38); }
  }
  .pricing-section div[style*="border:2px solid #54B948"] { animation: annualGlow 3.4s ease-in-out infinite; }

  /* Funciones principales: aura de color tras la tira + panel activo con anillo */
  .fpanels-phase::before {
    content: ""; position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%);
    width: min(1400px, 96vw); height: 68vh;
    background: radial-gradient(closest-side, rgba(56,189,248,.18), rgba(84,185,72,.11) 55%, transparent 78%);
    filter: blur(28px); z-index: -1; pointer-events: none;
  }
  /* Radio chico de comprimida, grande de abierta — que el cambio de forma
     también cuente que esa es la que está abierta. */
  .fpanel { border-radius: 12px; transition: box-shadow .4s, border-radius .4s, opacity .4s; }
  .fpanel.is-active { border-radius: 20px; }
  .fpanel.is-active {
    box-shadow: 0 0 0 3px rgba(84,185,72,.35), 0 34px 80px -18px rgba(27,123,214,.55);
  }
  .fpanel .fp-icon {
    background: linear-gradient(135deg, #1B7BD6, #54B948);
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 8px 22px rgba(27,123,214,.45);
  }
  .fpanels-head-dyn h2 .fp-em {
    background: linear-gradient(100deg, #1565B8, #38BDF8);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .fpanels-head-dyn h2 .fp-em-g {
    background: linear-gradient(100deg, #16A34A, #54B948);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }

  /* Móvil: sin blobs pesados (rendimiento) */
  @media (max-width: 900px) {
    .hero-v3::before, .hero-v3::after { display: none; }
  }
  /* Accesibilidad: sin animaciones decorativas si el usuario lo pide */
  @media (prefers-reduced-motion: reduce) {
    .hero-v3::before, .hero-v3::after, .hw-shimmer,
    .hero-v3-actions .btn-hero-primary::before, .cta-v3-btn::before,
    .vexp-cta-btn::after, .msc-btn::after,
    .morph-cta-wrap .btn-hero-primary::after, .sm-cta .btn-hero-primary::after,
    .pricing-section div[style*="border:2px solid #54B948"] { animation: none !important; }
  }


  /* ══════════════════════════════════════════════════════════
     MASCOT INTRO SECTION
     ══════════════════════════════════════════════════════════ */
  .mascot-intro {
    background: linear-gradient(135deg, #0F2557 0%, #1E40AF 45%, var(--brand-blue) 100%);
    padding: 84px 24px;
    position: relative; overflow: hidden;
  }
  .mascot-intro::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 32px 32px; pointer-events: none;
  }
  .mascot-intro::after {
    content: '';
    position: absolute;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(22,163,74,.18), transparent);
    top: -160px; right: -120px; pointer-events: none;
  }
  .mascot-intro-inner {
    max-width: 1020px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 48px; align-items: center;
    position: relative; z-index: 1;
  }
  .mascot-intro-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.15); color: white;
    font-size: 11.5px; font-weight: 800;
    padding: 5px 16px 5px 10px; border-radius: 999px;
    letter-spacing: .07em; text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.25);
  }
  .mascot-intro-live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #4ADE80; flex-shrink: 0;
    animation: urgencyPulse 1.5s ease-in-out infinite;
  }
  .mascot-intro h2 {
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 900; color: white;
    letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 16px;
  }
  .mascot-intro p {
    font-size: 17px; color: rgba(255,255,255,.82);
    line-height: 1.7; margin: 0 0 28px; max-width: 450px;
  }
  .mascot-intro-perks {
    list-style: none; padding: 0; margin: 0 0 36px;
    display: flex; flex-direction: column; gap: 11px;
  }
  .mascot-intro-perks li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; color: rgba(255,255,255,.9); font-weight: 500;
  }
  .mascot-intro-perks li .perk-icon {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
  }
  .mascot-intro-cta {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 16px 34px;
    background: white; color: var(--brand-blue-dark);
    font-size: 15px; font-weight: 800;
    border-radius: 14px; text-decoration: none;
    box-shadow: 0 12px 40px rgba(0,0,0,.24);
    transition: transform .2s, box-shadow .2s;
    letter-spacing: -0.01em;
  }
  .mascot-intro-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 52px rgba(0,0,0,.3);
  }
  .mascot-intro-img-wrap {
    display: flex; justify-content: center; align-items: flex-end;
    position: relative;
  }
  .mascot-intro-img {
    width: 310px; max-width: 100%;
    filter: drop-shadow(0 24px 56px rgba(0,0,0,.35)) drop-shadow(0 4px 16px rgba(22,163,74,.25));
    animation: mascotHeroFloat 5.5s ease-in-out infinite;
    animation-delay: .5s;
  }
  .mascot-intro-badge {
    position: absolute;
    top: 24px; left: -16px;
    background: white;
    border-radius: 14px; padding: 10px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    font-size: 12px; font-weight: 700; color: #0F172A;
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid rgba(255,255,255,.9);
    animation: chipFloat 4s ease-in-out infinite;
  }

  /* ── CTA mascot side decoration ── */
  .cta-mascot-side {
    position: absolute;
    right: 3%;
    bottom: 0;
    width: min(230px, 18vw);
    opacity: 0.2;
    pointer-events: none;
    filter: drop-shadow(0 0 40px rgba(255,255,255,.4));
    animation: mascotHeroFloat 6s ease-in-out infinite;
    animation-delay: 1s;
  }

  @media (max-width: 900px) {
    .mascot-intro-inner { grid-template-columns: 1fr; }
    .mascot-intro-img-wrap { display: none; }
    .cta-mascot-side { display: none; }
    .hero-mascot-stage { min-height: auto; }
  }

  /* ══════════════════════════════════════════════════════════
     MULTIPLATFORM SECTION
     ══════════════════════════════════════════════════════════ */
  .mp-section {
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 60%, #F8FAFC 100%);
    padding: 96px 24px;
    overflow: hidden;
  }
  .mp-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 72px;
    align-items: center;
  }
  /* Device compatibility badges */
  .mp-badges-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 0 20px;
  }
  .mp-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    border: 1.5px solid;
  }
  .mp-badge-primary {
    background: #EFF6FF; border-color: #93C5FD; color: var(--brand-blue-dark);
  }
  .mp-badge-secondary {
    background: white; border-color: #E2E8F0; color: #64748B;
  }
  .mp-recommended {
    background: var(--brand-blue); color: white;
    font-size: 10px; font-weight: 800;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: .05em; text-transform: uppercase;
    margin-left: 2px;
  }
  /* Professional note */
  .mp-note {
    background: white;
    border: 1px solid #E2E8F0;
    border-left: 3px solid var(--brand-blue);
    border-radius: 0 10px 10px 0;
    padding: 11px 16px;
    font-size: 13px; color: #64748B; line-height: 1.55;
    margin-bottom: 28px;
  }
  /* ── Laptop device mockup ── */
  .mp-laptop-wrap { position: relative; }
  .mp-laptop { position: relative; z-index: 2; filter: drop-shadow(0 32px 64px rgba(0,0,0,.18)); }
  .mp-laptop-lid {
    background: #1E293B;
    border-radius: 12px 12px 0 0;
    border: 2.5px solid #334155;
    border-bottom: none;
    padding: 10px 10px 0;
  }
  .mp-laptop-lid img {
    width: 100%; display: block;
    border-radius: 4px 4px 0 0;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: top center;
  }
  .mp-laptop-chin {
    height: 14px;
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    border-radius: 0 0 3px 3px;
    border: 2.5px solid #334155;
    border-top: none;
  }
  .mp-laptop-base {
    width: 110%; margin-left: -5%;
    height: 18px;
    background: linear-gradient(180deg, #475569 0%, #334155 100%);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
  }
  /* Camera dot */
  .mp-laptop-lid::before {
    content: '';
    display: block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #475569;
    margin: 0 auto 6px;
  }
  /* ── Phone mockup (floating) ── */
  .mp-phone {
    position: absolute;
    right: -24px;
    bottom: 24px;
    width: 118px;
    background: #0F172A;
    border-radius: 22px;
    border: 2.5px solid #334155;
    padding: 14px 8px;
    box-shadow: 0 24px 56px rgba(0,0,0,.38);
    z-index: 3;
    animation: chipFloat 5s ease-in-out infinite;
    animation-delay: 1s;
  }
  .mp-phone::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: #334155; border-radius: 2px;
    margin: 0 auto 10px;
  }
  .mp-phone img {
    width: 100%; display: block;
    border-radius: 6px;
    aspect-ratio: 9/19;
    object-fit: cover;
    object-position: top center;
  }
  /* ── Responsive ── */
  @media (max-width: 900px) {
    .mp-inner { grid-template-columns: 1fr; gap: 40px; }
    .mp-laptop-wrap { max-width: 480px; margin: 0 auto; }
    .mp-phone { right: -12px; bottom: 16px; width: 96px; }
  }
  @media (max-width: 600px) {
    .mp-section { padding: 60px 20px; }
    .mp-phone { display: none; }
  }

  /* ══════════════════════════════════════════════════════════
     SCREENSHOT FRAMES & SHOWCASE
     ══════════════════════════════════════════════════════════ */

  /* Browser frame wrapper */
  .ss-browser-frame {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 20px 72px rgba(27,123,214,.13);
    overflow: hidden;
    border: 1px solid rgba(27,123,214,.1);
  }
  .ss-browser-bar {
    background: #F1F5F9;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
  }
  .ss-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .ss-dot-r { background: #FC615D; }
  .ss-dot-a { background: #FDBC40; }
  .ss-dot-g { background: #34C749; }
  .ss-url-bar {
    flex: 1;
    background: white;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11.5px;
    color: #64748B;
    margin: 0 10px;
    border: 1px solid #E2E8F0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ss-browser-frame img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
  }

  /* ══════════════════════════════════════════════════════════
     PRODUCT SHOWCASE SECTION
     ══════════════════════════════════════════════════════════ */
  .showcase-section {
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 60%, #F8FAFC 100%);
    padding: 96px 24px 80px;
    overflow: hidden;
  }
  .showcase-inner { max-width: 1180px; margin: 0 auto; }

  .showcase-hero-ss {
    position: relative;
    margin-bottom: 28px;
    animation: floatMockup 7s ease-in-out infinite;
    transition: transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease;
    transform-origin: center center;
    will-change: transform;
  }
  .showcase-hero-ss .ss-browser-frame { box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 32px 100px rgba(27,123,214,.16); }
  @media (min-width: 901px) {
    .showcase-hero-ss:hover {
      animation-play-state: paused;
      transform: scale(1.03);
    }
    .showcase-hero-ss:hover .ss-browser-frame {
      box-shadow: 0 0 0 2.5px #60A5FA, 0 40px 120px rgba(27,123,214,.22);
    }
  }

  /* Floating badge on top of main screenshot */
  .ss-badge {
    position: absolute;
    background: white;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    font-size: 12px; font-weight: 700; color: #0F172A;
    display: flex; align-items: center; gap: 8px;
    z-index: 4;
    border: 1.5px solid rgba(27,123,214,.1);
  }
  .ss-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16A34A;
    animation: urgencyPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
  }
  .ss-badge-tl { top: -14px; left: 24px; animation: bubbleFloatAnim 4s ease-in-out infinite; }
  .ss-badge-br { bottom: -14px; right: 24px; animation: bubbleFloatAnim 5s ease-in-out infinite; animation-delay: 1s; }

  /* 3-column screenshot cards */
  .showcase-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .showcase-cards { overflow: visible; }
  .showcase-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 0 2px #DBEAFE, 0 8px 32px rgba(27,123,214,.10);
    border: none;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
    position: relative;
    will-change: transform;
  }
  /* Desktop only (>900px): hover magnification */
  @media (min-width: 901px) {
    .showcase-card:hover {
      transform: scale(1.07);
      box-shadow: 0 0 0 2.5px #60A5FA, 0 24px 60px rgba(27,123,214,.22);
      z-index: 2;
    }
  }
  /* Mobile: magnification for all interactive cards/screenshots */
  @media (max-width: 900px) {
    /* Stop float animation so transform:scale() works on showcase-hero-ss */
    .showcase-hero-ss { animation: none !important; }

    /* All cards: narrower + rounded + start small */
    .showcase-card, .showcase-hero-ss, .sc-item {
      width: calc(100% - 32px);
      margin-left: auto;
      margin-right: auto;
      border-radius: 18px;
      overflow: hidden;
      transform: scale(0.40);
      transition: transform .85s cubic-bezier(.34,1.15,.64,1), box-shadow .85s ease;
    }
    /* Active: expand beyond base — from 0.92 to 1.06 = visible 14% jump */
    .showcase-card.sc-active, .showcase-hero-ss.sc-active, .sc-item.sc-active {
      transform: scale(1.06) !important;
      box-shadow: 0 0 0 2.5px #60A5FA, 0 24px 56px rgba(27,123,214,.26);
      z-index: 2;
    }

    /* PDF: show on mobile — needs !important to override display:none below */
    .pdf-frame-wrap {
      display: block !important;
      margin-top: 28px;
      position: relative;
      border-radius: 18px;
      overflow: visible; /* badge protrudes bottom-left without being clipped */
    }
    /* Image gets its own rounded corners since wrapper no longer clips */
    .pdf-paper {
      border-radius: 18px;
      overflow: hidden;
    }
    .pdf-paper img {
      aspect-ratio: 3/4;
      object-fit: cover;
      object-position: top center;
    }
    /* Badge: same bottom-left corner position as desktop, now visible */
    .pdf-float-card {
      position: absolute !important;
      bottom: -10px !important;
      left: -8px !important;
      animation: none;
    }

    /* Calendar: fill container, fixed aspect ratio */
    .cal-section .ss-browser-frame {
      max-width: 100% !important;
      border-radius: 18px;
      overflow: hidden;
    }
    .cal-section .ss-browser-frame img {
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: top center;
    }

    /* AI screenshot: fixed aspect ratio */
    .ai-section-v3 .sc-item .ss-browser-frame img {
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: top center;
    }
  }
  .showcase-card-img-wrap {
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #EFF6FF;
    border-bottom: 2px solid #DBEAFE;
    position: relative;
  }
  /* Blue inner glow on image */
  .showcase-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1.5px rgba(27,123,214,.12);
    border-radius: 0;
    pointer-events: none;
  }
  .showcase-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
  }
  .showcase-card:hover .showcase-card-img-wrap img { transform: scale(1.03); }
  .showcase-card-footer {
    padding: 14px 16px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
  }
  .showcase-card-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
  }
  .showcase-card-title {
    font-size: 13.5px; font-weight: 800; color: #0F172A; line-height: 1.3;
  }
  .showcase-card-sub {
    font-size: 11.5px; color: var(--brand-blue); font-weight: 600; margin-top: 2px;
  }

  /* ══════════════════════════════════════════════════════════
     PDF / OUTPUT SHOWCASE
     ══════════════════════════════════════════════════════════ */
  .pdf-section {
    background: #0F172A;
    padding: 88px 24px;
    position: relative;
    overflow: hidden;
  }
  .pdf-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .pdf-section::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(27,123,214,.18), transparent);
    top: -200px; left: -150px;
    pointer-events: none;
  }
  .pdf-section-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
    position: relative; z-index: 1;
  }
  .pdf-frame-wrap {
    position: relative;
  }
  .pdf-paper {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  }
  .pdf-paper img {
    width: 100%;
    display: block;
  }
  /* Small floating card overlay */
  .pdf-float-card {
    position: absolute;
    bottom: -16px;
    left: -24px;
    background: linear-gradient(135deg, #16A34A, #15803D);
    border-radius: 14px;
    padding: 12px 16px;
    color: white;
    font-size: 12px; font-weight: 700;
    box-shadow: 0 8px 28px rgba(22,163,74,.4);
    display: flex; align-items: center; gap: 8px;
    animation: bubbleFloatAnim 5s ease-in-out infinite;
  }
  .pdf-section h2 {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900; color: white;
    letter-spacing: -0.03em; line-height: 1.15;
    margin: 0 0 16px;
  }
  .pdf-section p {
    font-size: 16px; color: #94A3B8;
    line-height: 1.7; margin: 0 0 28px;
  }
  .pdf-checklist {
    list-style: none; padding: 0; margin: 0 0 36px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .pdf-checklist li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: #CBD5E1; line-height: 1.5;
  }
  .pdf-check-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(22,163,74,.2); color: #4ADE80;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
  }
  .pdf-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    background: white; color: #0F172A;
    font-size: 15px; font-weight: 800;
    border-radius: 12px; text-decoration: none;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s;
  }
  .pdf-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.3); }

  /* Hero floating mini screenshot */
  .hero-ss-float {
    position: absolute;
    bottom: -10px; left: -20px;
    width: 240px;
    background: white;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
    border: 1px solid #E2E8F0;
    z-index: 3;
    animation: chipFloat 5.5s ease-in-out infinite;
    animation-delay: 2s;
  }
  .hero-ss-float .ss-browser-bar { padding: 6px 10px; }
  .hero-ss-float .ss-dot { width: 7px; height: 7px; }
  .hero-ss-float img { width: 100%; display: block; }

  /* ── Mobile-only mascot under hero ── */
  .hero-mobile-mascot { display: none; }

  @media (max-width: 900px) {
    /* Screenshot sections */
    .showcase-cards { grid-template-columns: 1fr; }
    .pdf-section-inner { grid-template-columns: 1fr; }
    .pdf-frame-wrap { display: none; }
    .hero-ss-float { display: none; }
    .ss-badge { display: none; }

    /* Prevent horizontal scroll WITHOUT creating a scroll container (which would
       break the mobile pinned story's position:sticky). `clip` clips like `hidden`
       but never becomes a scroller; `hidden` is the fallback for pre-2022 engines. */
    body { overflow-x: hidden; overflow-x: clip; }
    .hero-v3 { padding-bottom: 0; }
    .hero-mobile-mascot {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background: transparent;
      padding-top: 8px;
      padding-bottom: 0;
      position: relative;
    }
    .hero-mobile-mascot img {
      width: 220px;
      filter: drop-shadow(0 16px 40px rgba(27,123,214,.22)) drop-shadow(0 4px 12px rgba(22,163,74,.12));
      /* Float DOWN on mobile so hero overflow:hidden never clips upward motion */
      animation: mascotFloatDown 5.5s ease-in-out infinite;
      display: block;
    }
    /* PDF section: single column, text only */
    .pdf-section { padding: 56px 20px; }
    .pdf-checklist li { font-size: 13.5px; }

    /* Showcase section */
    .showcase-section { padding: 56px 16px 40px; }
    .showcase-hero-ss { margin-bottom: 0; }
    .showcase-cards { margin-top: 68px !important; } /* match inter-card gap */
    .ss-url-bar { font-size: 10px; }
  }

  @media (max-width: 600px) {
    /* Breathing room between cards */
    .showcase-cards { grid-template-columns: 1fr; gap: 68px; }
    .showcase-section { padding: 48px 16px 36px; }

    /* Main screenshot: same aspect ratio as feature cards */
    .showcase-hero-ss .ss-browser-frame img {
      max-height: none;
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: top center;
    }
    /* Match card shadow/border style on mobile */
    .showcase-hero-ss .ss-browser-frame {
      box-shadow: 0 0 0 2px #DBEAFE, 0 8px 32px rgba(27,123,214,.10);
    }

    /* Stats 2x2 */
    .stats-strip-inner { grid-template-columns: 1fr 1fr; }

    /* Hero title slightly smaller */
    .hero-v3-title { font-size: clamp(32px, 8vw, 44px); }

    /* Urgency bar wrap */
    .urgency-bar { font-size: 12px; padding: 10px 16px; text-align: center; flex-wrap: wrap; gap: 6px; }

    /* PDF section compact */
    .pdf-section { padding: 48px 20px; }
    .pdf-cta { width: 100%; justify-content: center; box-sizing: border-box; }
  }

  @media (max-width: 480px) {
    .feat-grid-v3 { grid-template-columns: 1fr; }
    .steps-grid-v3 { grid-template-columns: 1fr; }
    .stats-strip-inner { grid-template-columns: 1fr 1fr; }
    .hero-v3-actions { flex-direction: column; }
    .hero-v3-actions .btn-hero-primary,
    .hero-v3-actions .btn-hero-ghost { width: 100%; justify-content: center; }

    /* Mascot slightly smaller on very small phones */
    .hero-mobile-mascot img { width: 180px; }

    /* Cards single column already set above */
    .showcase-card-img-wrap { aspect-ratio: 16/10; }
  }

  /* ══════════════════════════════════════════════════════════
     TRUST / SECURITY FINAL SECTION
     ══════════════════════════════════════════════════════════ */
  .trust-final {
    background: linear-gradient(135deg, #0A0F1E 0%, #0F1E3D 50%, #0A0F1E 100%);
    padding: 88px 24px;
    position: relative;
    overflow: hidden;
  }
  .trust-final::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }
  .trust-final::after {
    content: '';
    position: absolute;
    width: 700px; height: 500px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(27,123,214,.1), transparent);
    top: -180px; right: -200px;
    pointer-events: none;
  }
  .trust-final-glow {
    position: absolute;
    width: 500px; height: 400px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(27,123,214,.07), transparent);
    bottom: -150px; left: -100px;
    pointer-events: none;
  }
  .trust-final-inner {
    max-width: 1040px;
    margin: 0 auto;
    position: relative; z-index: 1;
  }
  .trust-final-header { text-align: center; margin-bottom: 52px; }
  .trust-final h2 {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 900; color: white;
    letter-spacing: -0.03em; line-height: 1.15;
    margin: 0 0 14px;
  }
  .trust-final-sub {
    font-size: 16px; color: #94A3B8;
    line-height: 1.65; max-width: 540px;
    margin: 0 auto;
  }
  /* 4-column cards grid */
  .trust-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
  }
  .trust-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 28px 22px;
    transition: background .3s, border-color .3s, transform .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
  }
  .trust-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--brand-blue), #60A5FA);
    opacity: 0;
    transition: opacity .3s;
  }
  .trust-card:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(27,123,214,.28);
    transform: translateY(-5px);
  }
  .trust-card:hover::before { opacity: 1; }
  .trust-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(27,123,214,.18);
    border: 1px solid rgba(27,123,214,.22);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    color: #60A5FA;
  }
  .trust-card h3 {
    font-size: 15px; font-weight: 800;
    color: #F1F5F9; margin: 0 0 9px; line-height: 1.3;
  }
  .trust-card p {
    font-size: 13.5px; color: #64748B;
    line-height: 1.6; margin: 0;
  }
  /* Disclaimer */
  .trust-disclaimer {
    text-align: center;
    padding: 18px 24px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    max-width: 680px;
    margin: 0 auto;
  }
  .trust-disclaimer p {
    font-size: 12.5px; color: #475569;
    line-height: 1.65; margin: 0;
    font-style: italic;
  }
  @media (max-width: 900px) {
    .trust-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  }
  @media (max-width: 560px) {
    .trust-cards { grid-template-columns: 1fr; }
    .trust-final { padding: 64px 20px; }
  }
  
  /* ══════════════════════════════════════════════════════════
     SCENE PINNED — Apple-style scroll-driven product tour
     ══════════════════════════════════════════════════════════ */
  .scene-pinned {
    position: relative;
    background: var(--brand-ink);
    color: #fff;
  }
  .scene-pinned-track {
    height: 300vh;
    position: relative;
  }
  .scene-pinned-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    gap: 0;
  }

  /* Background ghost word */
  .scene-bg-word {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
  }
  .scene-bg-word-item {
    position: absolute;
    inset: 0;
    font-size: clamp(26px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 2;
    word-spacing: 0.6em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.085);
    white-space: normal;
    text-align: center;
    padding: 3em 2em;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .scene-bg-word-item.is-active { opacity: 1; }

  /* Low-height viewports: scale down scene-pinned (13" laptops ~780-820px) */
  @media (max-height: 820px) and (min-width: 901px) {
    .scene-pinned-stage { min-height: 500px; }
    .scene-title { font-size: clamp(20px, 2.2vw, 30px); }
  }
  @media (max-height: 700px) and (min-width: 901px) {
    .scene-pinned-stage { min-height: 400px; }
    .scene-title { font-size: clamp(18px, 2vw, 26px); }
    .scene-mockup { width: min(720px, 88vw); }
  }

  /* Header: eyebrow + title */
  .scene-header {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 3;
    padding: 0 24px;
    margin-bottom: 24px;
  }
  .scene-eyebrow {
    position: relative;
    height: 18px;
    margin-bottom: 16px;
  }
  .scene-eyebrow-text {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-green);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .scene-eyebrow-text.is-active { opacity: 1; }
  .scene-title {
    position: relative;
    margin: 0 auto;
    max-width: 720px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .scene-title-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .scene-title-text.is-active { opacity: 1; transform: translateY(0); }
  .scene-title-phantom {
    visibility: hidden;
    display: block;
    pointer-events: none;
  }

  /* Mockup frame */
  .scene-mockup {
    position: relative;
    z-index: 2;
    width: min(880px, 88vw);
    transform: scale(0.85);
    will-change: transform;
  }
  .scene-mockup-frame {
    background: #0F172A;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0.03);
    overflow: hidden;
  }
  .scene-mockup-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #1A2536;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .scene-mockup-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
  .scene-mockup-dot-r { background: #FF5F57; }
  .scene-mockup-dot-a { background: #FEBC2E; }
  .scene-mockup-dot-g { background: #28C840; }
  .scene-mockup-url {
    position: relative;
    margin-left: 14px;
    flex: 1;
    height: 14px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    overflow: hidden;
  }
  .scene-url-text {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .scene-url-text.is-active { opacity: 1; }
  .scene-mockup-screens {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #fff;
    overflow: hidden;
  }
  .scene-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .scene-screen.is-active { opacity: 1; }

  /* Progress dots */
  .scene-progress {
    position: absolute;
    bottom: 6vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 4;
  }
  .scene-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
  }
  .scene-progress-dot.is-active { background: #fff; transform: scale(1.2); }
  .scene-progress-dot:hover { background: rgba(255,255,255,0.55); }

  /* Mobile fallback (hidden on desktop) */
  .scene-pinned-mobile { display: none; }
  .scene-mobile-item {
    padding: 56px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .scene-mobile-item:last-child { border-bottom: none; }
  .scene-mobile-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin: 0 0 10px;
    text-align: center;
  }
  .scene-mobile-title {
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: white;
    margin: 0 0 28px;
    text-align: center;
  }
  .scene-mobile-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
  .scene-mobile-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top center;
    max-height: 320px;
  }

  /* ══════════════════════════════════════════════════════════
     TRUST MARQUEE
     ══════════════════════════════════════════════════════════ */
  .trust-marquee {
    background: var(--brand-paper);
    padding: 56px 0 64px;
    overflow: hidden;
    position: relative;
  }
  .trust-marquee-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 32px;
    padding: 0 24px;
  }
  .trust-marquee-track {
    display: flex;
    width: max-content;
    animation: trustMarquee 32s linear infinite;
  }
  .trust-marquee-row {
    display: flex;
    gap: 64px;
    padding-right: 64px;
    flex-shrink: 0;
  }
  .tm-item {
    font-size: 22px;
    font-weight: 600;
    color: #94A3B8;
    white-space: nowrap;
    letter-spacing: -0.01em;
    flex-shrink: 0;
  }
  .tm-italic    { font-style: italic; font-weight: 700; }
  .tm-condensed { letter-spacing: -0.02em; font-weight: 600; }
  .tm-bold      { font-weight: 800; letter-spacing: 0.02em; }
  .tm-serif     { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; }
  .tm-spaced    { letter-spacing: 0.05em; font-weight: 700; }

  .trust-marquee::before,
  .trust-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
  }
  .trust-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--brand-paper), transparent);
  }
  .trust-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--brand-paper), transparent);
  }
  @keyframes trustMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ── Smooth scroll offset — prevents fixed nav from covering section headings ── */
  /* Es una lista a mano: una sección nueva con id NO queda cubierta sola, y el
     síntoma es discreto —la sección aterriza bien pero con el encabezado
     encima de su título—. Medido en #pediatria: caía en top:0 con la barra
     fija ocupando hasta y=69. */
  #funciones, #how, #pricing, #security, #pain, #ai, #product, #video,
  #pediatria, #cartilla {
    scroll-margin-top: 80px;
  }

  /* ══════════════════════════════════════════════════════════
     PAIN SECTION V2 — scroll-driven card separation
     ══════════════════════════════════════════════════════════ */
  .pain-section-v2 { background: #F8FAFC; }
  .pain-pinned-track { height: 200vh; position: relative; }
  .pain-pinned-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .pain-inner { max-width: 1040px; margin: 0 auto; width: 100%; padding: 0 24px; }
  .pain-cards-stage {
    position: relative;
    will-change: transform;
  }
  /* Cards start centered/stacked, JS separates them via inline transform */
  .pain-col-before,
  .pain-col-after {
    will-change: transform;
    transition: transform 0.05s linear, opacity 0.4s ease;
  }
  /* Bullet stagger */
  .pain-col-before li,
  .pain-col-after li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pain-col-before li.pi-in,
  .pain-col-after li.pi-in { opacity: 1; transform: translateY(0); }

  /* Ensure pain-inner renders above absolute bg parallax layers */
  .pain-pinned-stage .pain-inner { position: relative; z-index: 2; }

  /* ── Pain section parallax: background word + ambient glow ── */
  .pain-bg-word {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
  .pain-bg-word-item {
    position: absolute;
    inset: 0;
    font-size: clamp(26px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 2;
    word-spacing: 0.6em;
    text-transform: uppercase;
    color: rgba(11,18,32,0.075);
    white-space: normal;
    text-align: center;
    padding: 3em 2em;
    overflow: hidden;
    will-change: transform;
  }
  /* ── Pain ambient: 3-layer stack ───────────────────────────── */
  .pain-ambient-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .pain-ambient-layer {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    will-change: transform;
  }
  .pain-ambient-1 {
    width: 60vh; height: 60vh;
    max-width: 700px; max-height: 700px;
    background: radial-gradient(circle, rgba(27,123,214,0.14) 0%, rgba(27,123,214,0.04) 40%, transparent 70%);
    top: -10%; left: -10%;
  }
  .pain-ambient-2 {
    width: 55vh; height: 55vh;
    max-width: 650px; max-height: 650px;
    background: radial-gradient(circle, rgba(84,185,72,0.12) 0%, rgba(84,185,72,0.03) 40%, transparent 70%);
    bottom: -15%; right: -5%;
  }
  .pain-ambient-3 {
    width: 45vh; height: 45vh;
    max-width: 550px; max-height: 550px;
    background: radial-gradient(circle, rgba(226,75,75,0.08) 0%, rgba(226,75,75,0.02) 40%, transparent 70%);
    top: 40%; left: 30%;
  }
  @media (max-width: 900px) {
    .pain-bg-word { display: none; }
    .pain-ambient-stack { display: none; }
    /* ECG en móvil: visible y sutil, detrás del titular (antes estaba oculto).
       width 220% conserva la proporción de los latidos; top en px porque el hero
       móvil incluye a la mascota abajo y un % lo mandaría lejos del titular.
       Este bloque va DESPUÉS de la regla base de .hero-ecg — aquí sí gana. */
    .hero-ecg { display: block; width: 220%; left: -60%; right: auto; height: 110px; opacity: .3; top: 250px; transform: none; }
  }

  /* ── Bento grid overrides ────────────────────────────────── */
  .feat-card-v3.feat-large { grid-column: span 2; min-height: 280px; }
  .feat-card-v3 { min-height: 240px; }
  .feat-card-v3.feat-card-cta { cursor: default; }
  .feat-card-v3.feat-card-cta:hover { transform: none; box-shadow: none; }

  /* ══════════════════════════════════════════════════════════
     FEATURE SCROLL REVEAL — cards enter left/right per scroll
     ══════════════════════════════════════════════════════════ */
  .feat-grid-v3 .feat-card-v3 {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  /* Odd cards (1,3,5,7) enter from left */
  .feat-grid-v3 .feat-card-v3:nth-child(odd)  { transform: translateX(-80px); }
  /* Even cards (2,4,6) enter from right */
  .feat-grid-v3 .feat-card-v3:nth-child(even) { transform: translateX(80px); }
  /* Revealed state */
  .feat-grid-v3 .feat-card-v3.feat-revealed { opacity: 1; transform: translateX(0); }

  /* ── Feature card tints — subtle icon-color wash ────────── */
  .feat-tint-violet { background: rgba(124, 58, 237, 0.06); }
  .feat-tint-blue   { background: rgba(27, 123, 214, 0.06); }
  .feat-tint-teal   { background: rgba(20, 184, 166, 0.06); }
  .feat-tint-orange { background: rgba(234, 88, 12, 0.05);  }
  .feat-tint-green  { background: rgba(84, 185, 72, 0.06);  }
  /* Hover: keep tint visible, slight brightening */
  .feat-card-v3.feat-tint-violet:hover,
  .feat-card-v3.feat-tint-blue:hover,
  .feat-card-v3.feat-tint-teal:hover,
  .feat-card-v3.feat-tint-orange:hover,
  .feat-card-v3.feat-tint-green:hover { filter: brightness(0.97); }

  /* ── Scene progress bar ───────────────────────────────────── */
  .scene-progress-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.08);
    z-index: 5;
    overflow: hidden;
  }
  .scene-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
    width: 0%;
    transition: width 0.05s linear;
    will-change: width;
  }


  /* ── Scene counter + dots wrapper ────────────────────────── */
  .scene-progress-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
  }
  .scene-progress-counter-current {
    color: #fff;
    display: inline-block;
    min-width: 1ch;
    transition: opacity 0.2s ease;
  }
  .scene-progress-counter-divider { color: rgba(255,255,255,0.35); margin: 0 2px; }
  .scene-progress-counter-total   { color: rgba(255,255,255,0.55); }
  .scene-progress-dots { display: flex; gap: 10px; }

  /* ── Scene ambient glow: 3-layer stack ────────────────────── */
  .scene-ambient-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .scene-ambient-layer {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform;
  }
  .scene-ambient-1 {
    width: 70vh; height: 70vh;
    max-width: 800px; max-height: 800px;
    background: radial-gradient(circle, rgba(27,123,214,0.22) 0%, rgba(27,123,214,0.06) 40%, transparent 70%);
    top: -15%; left: -10%;
  }
  .scene-ambient-2 {
    width: 60vh; height: 60vh;
    max-width: 700px; max-height: 700px;
    background: radial-gradient(circle, rgba(84,185,72,0.18) 0%, rgba(84,185,72,0.04) 40%, transparent 70%);
    bottom: -20%; right: -10%;
  }
  .scene-ambient-3 {
    width: 50vh; height: 50vh;
    max-width: 600px; max-height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, rgba(124,58,237,0.03) 40%, transparent 70%);
    top: 30%; right: 20%;
  }

  /* ══════════════════════════════════════════════════════════
     SHOWCASE CARDS — scroll-driven left-to-right reveal
     ══════════════════════════════════════════════════════════ */
  .showcase-reveal-track { margin-top: 28px; }
  /* Cards reveal left-to-right when section enters viewport */
  .showcase-cards .showcase-card {
    opacity: 0;
    transform: translateX(50px) scale(0.96);
    transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
  }
  .showcase-cards.sc-triggered .showcase-card:nth-child(1) { opacity:1; transform:none; transition-delay:    0ms; }
  .showcase-cards.sc-triggered .showcase-card:nth-child(2) { opacity:1; transform:none; transition-delay:  750ms; }
  .showcase-cards.sc-triggered .showcase-card:nth-child(3) { opacity:1; transform:none; transition-delay: 1500ms; }

  /* ══════════════════════════════════════════════════════════
     VANISH GRADIENT — scroll-driven text reveal (left → right)
     ══════════════════════════════════════════════════════════ */
  .vanish-h {
    /* Mask sweeps left to right: black=visible, transparent=hidden.
       --vp (vanish progress) is driven by JS from 0% → 120%. */
    -webkit-mask-image: linear-gradient(
      90deg,
      black 0%,
      black calc(var(--vp, 0%) - 80px),
      transparent calc(var(--vp, 0%) + 80px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      black 0%,
      black calc(var(--vp, 0%) - 80px),
      transparent calc(var(--vp, 0%) + 80px),
      transparent 100%
    );
  }

  /* ── Pain section: blue background override ─────────────── */
  .pain-section-v2 {
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
  }
  .pain-section-v2 .pain-title    { color: #fff; }
  .pain-section-v2 .pain-subtitle { color: rgba(255,255,255,0.78); }
  .pain-section-v2 .pain-label {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
  }
  .pain-section-v2 .pain-label svg { stroke: #fff; }

  /* ── Pain cards: larger on desktop ──────────────────────── */
  .pain-section-v2 .pain-inner { max-width: 1200px; }
  .pain-section-v2 .pain-col   { padding: 48px 44px; min-height: 360px; }
  .pain-section-v2 .pain-grid  { gap: 28px; }

  /* ══════════════════════════════════════════════════════════
     SECTION-SPECIFIC ENTRANCE ANIMATIONS
     Override lnd-reveal initial transforms per section.
     .lnd-visible state is the same for all: opacity:1, transform:none.
     ══════════════════════════════════════════════════════════ */

  /* PDF section — text from left, frame from right.
     :not(.lnd-visible) ensures transform ONLY applies before animation ends. */
  .pdf-section .pdf-section-inner > .lnd-reveal:not(.lnd-visible):first-child {
    transform: translateX(-60px) scale(0.97);
  }
  .pdf-frame-wrap.lnd-reveal:not(.lnd-visible) {
    transform: translateX(90px);  /* simple slide — no rotation that distorts image */
  }
  /* pdf-float-card badge: drops in late */
  .pdf-float-card {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1) 0.8s,
                transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.8s;
  }
  .pdf-frame-wrap.lnd-visible .pdf-float-card {
    opacity: 1;
    transform: translateY(0);
  }

  /* Calendar section — browser frame from right, text with delay */
  .cal-section .ss-browser-frame.lnd-reveal:not(.lnd-visible) {
    transform: translateX(70px) scale(0.97);  /* simple slide — no rotation */
  }
  /* Calendar text: slight longer travel + delay feels different */
  .cal-section .cal-inner > .lnd-reveal:not(.lnd-visible):first-child {
    transform: translateY(55px) scale(0.97);
    transition-delay: 100ms;
  }

  /* Multiplatform — text from left, devices from right with spring */
  .mp-section .mp-inner > .lnd-reveal:not(.lnd-visible):first-child {
    transform: translateX(-60px) scale(0.97);
  }
  .mp-laptop-wrap.lnd-reveal:not(.lnd-visible) {
    transform: translateY(-80px) scale(0.92);
  }
  .mp-laptop-wrap.lnd-reveal {
    transition-property: opacity, transform;
    transition-duration: 1.1s;
    transition-timing-function: cubic-bezier(0.16, 1.4, 0.3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pdf-float-card { opacity:1 !important; transform:none !important; transition:none !important; }
    .pdf-section .pdf-section-inner > .lnd-reveal:first-child,
    .pdf-frame-wrap.lnd-reveal,
    .cal-section .ss-browser-frame.lnd-reveal,
    .mp-laptop-wrap.lnd-reveal,
    .mp-section .mp-inner > .lnd-reveal:first-child { transform: none !important; transition-delay: 0ms !important; }

    /* Vanish headings: skip animation, show immediately */
    .vanish-h { -webkit-mask-image: none; mask-image: none; }

    .lnd-reveal, .lnd-reveal.lnd-visible {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .lnd-reveal-stagger > *, .lnd-reveal-stagger.lnd-visible > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .hero-ecg-scroll { animation: none; }
    .hero-ecg { display: none; }
    .hw, .hero-v3-badge, .hero-v3-sub, .hero-v3-actions, .hero-trust, .hero-v3-visual {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .hero-mockup-wrap { animation: none !important; }
    .hero-float-chip  { animation: none !important; }
    /* Showcase reveal: show all immediately */
    /* Showcase: keep scale animation but remove delays so all 3 appear together */
    .showcase-cards.sc-triggered .showcase-card:nth-child(1),
    .showcase-cards.sc-triggered .showcase-card:nth-child(2),
    .showcase-cards.sc-triggered .showcase-card:nth-child(3) {
      transition-delay: 0ms !important;
    }

    /* Feature assembly: skip animation, show all cards immediately */
    /* Mobile: vertical reveal instead of horizontal */
    .feat-grid-v3 .feat-card-v3:nth-child(odd),
    .feat-grid-v3 .feat-card-v3:nth-child(even) { transform: translateY(30px); }
    .feat-grid-v3 .feat-card-v3.feat-revealed { opacity: 1; transform: translateY(0); }


    /* Pain section v2 */
    .pain-pinned-track { height: auto; }
    .pain-pinned-stage { position: relative; height: auto; min-height: 0; }
    .pain-col-before, .pain-col-after { transform: none !important; opacity: 1 !important; }
    .pain-col-before li, .pain-col-after li { opacity: 1 !important; transform: none !important; }

    .trust-marquee-track { animation: none; }
    /* Scene pinned: disable sticky + show first scene only */
    .scene-progress-bar { display: none; }
    .scene-ambient-stack { display: none; }
    .scene-pinned-track { height: auto; }
    .scene-pinned-stage { position: relative; height: auto; min-height: 0; padding: 72px 24px; display: block; }
    .scene-bg-word { display: none; }
    .scene-mockup { transform: none !important; }
    .scene-screen,
    .scene-eyebrow-text,
    .scene-title-text,
    .scene-url-text { position: relative; opacity: 1 !important; transform: none !important; display: block; }
    .scene-screen:not(:first-child),
    .scene-eyebrow-text:not(:first-child),
    .scene-title-text:not(:first-child),
    .scene-url-text:not(:first-child) { display: none; }
    .scene-bg-word-item { display: none; }
    .scene-progress { display: none; }
  }

  /* ══════════════════════════════════════════════════════════
     PAGE TOC — vertical left-side navigation sidebar
     ══════════════════════════════════════════════════════════ */
  .page-toc {
    position: fixed;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    z-index: 30;
    pointer-events: none;
  }
  .page-toc-inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  .page-toc-rail {
    position: relative;
    width: 5px;
    background: rgba(11,18,32,0.06);
    border-radius: 3px;
    align-self: stretch;
    min-height: 500px;
  }
  .page-toc-rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-green));
    border-radius: 3px;
    transition: height 0.05s linear;
    will-change: height;
    box-shadow: 0 0 14px rgba(27,123,214,0.30);
  }
  .page-toc-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    min-height: 500px;
    margin-left: 16px;
  }
  .page-toc-item {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    height: 22px;
  }
  .page-toc-item::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(11,18,32,0.12);
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    box-sizing: border-box;
  }
  .page-toc-item:hover::before {
    background: rgba(11,18,32,0.30);
    transform: translateY(-50%) scale(1.2);
  }
  .page-toc-item.is-active::before {
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(27,123,214,0.15);
    left: -21px;
  }
  .page-toc-item.is-passed::before {
    background: rgba(84,185,72,0.55);
  }
  .page-toc-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-ink, #0B1220);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 13px;
    border-radius: 7px;
    border: 1px solid rgba(11,18,32,0.08);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
    box-shadow: 0 4px 12px -2px rgba(11,18,32,0.08);
  }
  .page-toc-item:hover .page-toc-label,
  .page-toc-item.is-active .page-toc-label {
    opacity: 1;
    transform: translateX(0);
  }
  .page-toc-item.is-active .page-toc-label {
    color: var(--brand-blue);
    border-color: rgba(27,123,214,0.20);
  }
  /* «El producto» no enseña su etiqueta al llegar (1-sep-2026, Francisco:
     «quita la etiqueta de El producto en esta sección, solo en esta sección
     pero mantén el punto marcado. En esta zona tapa el texto»).

     La etiqueta aparece SOLA al entrar en la sección, y en ésta —la del
     escenario clavado, donde el texto llega hasta el borde izquierdo— cae
     justo encima. Se apaga únicamente la aparición automática: en `:hover`
     sigue saliendo, porque ahí la pide el visitante y sin ella ese punto del
     índice no diría a dónde lleva. El punto conserva su estado activo, que es
     lo que marca en qué sección va.

     Va con el selector de atributo y no con una clase nueva para que se quede
     pegada a la sección aunque alguien reordene la lista. */
  .page-toc-item[data-target="product"].is-active .page-toc-label {
    opacity: 0;
    transform: translateX(-8px);
  }
  .page-toc-item[data-target="product"]:hover .page-toc-label {
    opacity: 1;
    transform: translateX(0);
  }
  /* Dark-section variant (when over scene-pinned dark bg) */
  .page-toc.on-dark .page-toc-rail { background: rgba(255,255,255,0.10); }
  .page-toc.on-dark .page-toc-item::before { background: rgba(255,255,255,0.25); }
  .page-toc.on-dark .page-toc-item:hover::before { background: rgba(255,255,255,0.55); }
  .page-toc.on-dark .page-toc-item.is-active::before {
    background: var(--brand-ink, #0B1220);
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(84,185,72,0.25);
  }
  .page-toc.on-dark .page-toc-item.is-passed::before { background: rgba(255,255,255,0.45); }
  .page-toc.on-dark .page-toc-label {
    background: rgba(11,18,32,0.92);
    color: white;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.25);
  }
  .page-toc.on-dark .page-toc-item.is-active .page-toc-label {
    color: var(--brand-green);
    border-color: rgba(84,185,72,0.30);
  }
  @media (max-width: 1100px) {
    .page-toc { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-toc-rail-fill,
    .page-toc-item::before,
    .page-toc-label { transition: none; }
    .scene-ambient-layer, .pain-ambient-layer { display: none; }
  }

  /* ── Light sections: semi-transparent → gradient shows through ── */
  .features-v3,
  .showcase-section,
  .how-section-v3,
  .cal-section,
  .mp-section {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(0px);
  }
  .trust-marquee {
    background: rgba(255,255,255,0.78) !important;
  }
  .pricing-section {
    background: rgba(255,255,255,0.90) !important;
  }
  #faq {
    background: rgba(248,250,252,0.82) !important;
  }
  .pain-section { background: transparent !important; }
  .pain-section-v2 { background: transparent !important; }
  .pdf-section::after { display: none; }


  /* "escribiendo." — white outline to pop on gradient background */
  .hw-escribiendo {
    -webkit-text-stroke: 2.5px white;
    text-stroke: 2.5px white;
    paint-order: stroke fill;
    color: var(--brand-blue) !important;
    /* Slightly increase contrast with a soft white shadow */
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
  }

  /* ══════════════════════════════════════════════════════════
     MORPH DECK — scroll-driven product showcase
     scatter → ring → arc, screenshots stay upright & readable
     ══════════════════════════════════════════════════════════ */
  .morph-section {
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 55%, #F8FAFC 100%);
    position: relative;
  }
  .morph-track { position: relative; height: 240vh; }
  .morph-stage {
    position: sticky; top: 0;
    height: 100vh; min-height: 600px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }

  /* Center copy block (orbit center → rises to top as arc forms) */
  .morph-center {
    position: absolute;
    opacity: 0;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 560px;
    text-align: center;
    z-index: 5;
    pointer-events: none;
    padding: 0 24px;
    will-change: transform;
  }
  .morph-center .section-tag { pointer-events: auto; }
  .morph-center h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 900; color: #0F172A;
    letter-spacing: -0.03em; line-height: 1.12;
    margin: 0 0 12px;
  }
  .morph-center p {
    font-size: 16px; color: #64748B; line-height: 1.6; margin: 0 auto;
    max-width: 440px;
  }

  /* Deck holds the cards; mouse parallax translates this layer */
  .morph-deck {
    position: absolute; inset: 0;
    z-index: 3;
    will-change: transform;
  }

  /* Each card = browser-framed screenshot, centered then transformed by JS */
  .morph-card {
    position: absolute;
    left: 50%; top: 50%;
    width: 230px;
    margin-left: -115px; margin-top: -75px;
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(27,123,214,.06);
    opacity: 0;
    will-change: transform, opacity;
    transition: box-shadow .25s ease;
    cursor: pointer;
  }
  .morph-card .mc-bar {
    height: 22px;
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    display: flex; align-items: center; gap: 4px;
    padding: 0 9px;
  }
  .morph-card .mc-bar i {
    width: 7px; height: 7px; border-radius: 50%; display: block; flex-shrink: 0;
  }
  .mc-bar .r { background: #FC615D; } .mc-bar .a { background: #FDBC40; } .mc-bar .g { background: #34C749; }
  .morph-card img {
    width: 100%; display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover; object-position: top center;
  }
  /* Feature label chip — appears in arc phase */
  .morph-card .mc-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 10px 8px;
    font-size: 11px; font-weight: 700; color: #fff;
    text-align: center;
    background: linear-gradient(to top, rgba(15,23,42,.82), transparent);
    opacity: 0;
    transition: opacity .3s ease;
    letter-spacing: .01em;
  }
  .morph-card.is-labeled .mc-label { opacity: 1; }
  .morph-card.is-hovered {
    box-shadow: 0 32px 70px -16px rgba(27,123,214,.5), 0 0 0 2px #60A5FA;
  }
  /* Big function icons in the product ring — no card chrome, just icon + label */
  .morph-card.mc-icon {
    width: 132px; margin-left: -66px; margin-top: -74px;
    padding: 0; cursor: default; overflow: visible;
    background: transparent; box-shadow: none; border-radius: 0;
    display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center;
  }
  .morph-card.mc-icon.is-hovered { box-shadow: none; }
  .morph-card.mc-icon .mc-ico {
    width: 78px; height: 78px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 16px 36px -10px rgba(15,23,42,.24);
  }
  .morph-card.mc-icon .mc-ico svg { width: 40px; height: 40px; }
  .morph-card.mc-icon .mc-name {
    font-size: 14px; font-weight: 800; color: #0F172A; line-height: 1.22; letter-spacing: -.01em;
  }

  /* CTA below the arc (fades in at end) */
  .morph-cta-wrap {
    position: absolute;
    left: 50%; bottom: 7vh;
    transform: translateX(-50%);
    z-index: 6;
    opacity: 0;
    text-align: center;
    will-change: transform, opacity;
  }
  .morph-cta-wrap .btn-hero-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 15px 32px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff; font-size: 15px; font-weight: 700;
    border-radius: 12px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(27,123,214,.35);
    transition: transform .2s, box-shadow .2s;
  }
  .morph-cta-wrap .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(27,123,214,.45); }

  /* ── Aviso «continúa deslizando» ───────────────────────────────────────────
     El escenario está clavado (position: sticky): sin este aviso la sección
     parece el final de la página y el dedo no encuentra a dónde ir.

     El CELULAR ya lo tenía resuelto (.smc-fhint, con su chevrón animado y su
     apagado en la última diapositiva). El ESCRITORIO no: su aviso se apagaba
     con `1 - clamp(p / 0.08)`, o sea en el 8 % inicial de la pista —durante la
     fase de dolor— y llegaba APAGADO a la fase de funciones, que es justo donde
     hace falta. Se unificó el 1-sep-2026: mismo componente en los dos, con el
     mismo apagado al final, y ahora dice CUÁNTAS FALTAN — un aviso que no dice
     cuánto falta pide fe, no un dedo.

     Va fuera de todo @media a propósito: lo comparten los dos renderizados. */
  .morph-hint, .smc-fhint {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 15px 8px 12px; border-radius: 999px;
    background: #fff; border: 1px solid #E2E8F0;
    box-shadow: 0 8px 24px -8px rgba(11,18,32,.18), 0 1px 3px rgba(11,18,32,.06);
    white-space: nowrap; z-index: 6; transition: opacity .4s ease;
  }
  .morph-hint {
    position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  }
  .mh-rail { position: relative; width: 14px; height: 20px; flex: 0 0 14px; overflow: hidden; }
  .mh-rail svg {
    position: absolute; left: 0; top: 0; width: 14px; height: 9px; color: #1B7BD6;
    animation: mhDrop 1.5s cubic-bezier(.42,0,.55,1) infinite;
  }
  .mh-rail svg:nth-child(2) { animation-delay: .26s; }
  @keyframes mhDrop {
    0%   { transform: translateY(-3px); opacity: 0; }
    22%  { opacity: 1; }
    68%  { opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
  }
  .mh-txt { font-size: 13px; font-weight: 650; color: #334155; letter-spacing: -.012em; }
  .mh-n {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: #94A3B8; padding-left: 10px; border-left: 1px solid #E2E8F0;
  }
  /* Sin movimiento: se queda UN chevrón quieto, no desaparece el aviso. */
  @media (prefers-reduced-motion: reduce) {
    .mh-rail svg { animation: none; opacity: .9; top: 6px; }
    .mh-rail svg:nth-child(2) { display: none; }
  }

  /* Magnifier affordance on the collage cards */
  .morph-card .mc-zoom {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.55); color: #fff;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .morph-card.is-hovered .mc-zoom { opacity: 1; transform: scale(1); }

  /* ── Lightbox (click any screenshot → expand) ─────────────────────────── */
  .lightbox {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 5vh 4vw;
    background: rgba(8,15,30,.84);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  .lightbox.is-open { opacity: 1; visibility: visible; }
  .lightbox-frame {
    position: relative;
    width: min(1180px, 92vw);
    max-height: 90vh;
    border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 50px 130px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
    display: flex; flex-direction: column;
    transform: scale(.94) translateY(12px);
    transition: transform .34s cubic-bezier(.22,.9,.3,1);
  }
  .lightbox.is-open .lightbox-frame { transform: scale(1) translateY(0); }
  .lightbox-bar {
    height: 38px; flex-shrink: 0;
    background: #F1F5F9; border-bottom: 1px solid #E2E8F0;
    display: flex; align-items: center; gap: 6px; padding: 0 14px;
  }
  .lightbox-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; flex-shrink: 0; }
  .lightbox-bar .r { background: #FC615D; } .lightbox-bar .a { background: #FDBC40; } .lightbox-bar .g { background: #34C749; }
  .lightbox-bar span {
    margin-left: 12px; font-size: 12.5px; font-weight: 700; color: #475569;
    letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lightbox-bar .lb-count { margin-left: auto; font-size: 11px; font-weight: 600; color: #94A3B8; }
  .lightbox-frame img {
    display: block; width: 100%; height: auto;
    max-height: calc(90vh - 38px); object-fit: contain; background: #fff;
  }
  .lightbox-close {
    position: absolute; top: 18px; right: 22px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease;
  }
  .lightbox-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
  .lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease;
  }
  .lightbox-nav:hover { background: rgba(255,255,255,.26); }
  .lightbox-nav.lb-prev { left: max(18px, 2vw); }
  .lightbox-nav.lb-next { right: max(18px, 2vw); }
  .lightbox-nav.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
  .lightbox-nav.lb-next:hover { transform: translateY(-50%) translateX(3px); }
  @media (max-width: 640px) {
    .lightbox { padding: 0; }
    .lightbox-frame { width: 100vw; max-height: 100vh; border-radius: 0; }
    .lightbox-frame img { max-height: calc(100vh - 38px); }
    .lightbox-nav { width: 42px; height: 42px; font-size: 22px; }
    .lightbox-nav.lb-prev { left: 8px; } .lightbox-nav.lb-next { right: 8px; }
    .lightbox-close { top: 8px; right: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lightbox, .lightbox-frame { transition: none; }
  }

  /* ── Mobile / reduced-motion fallback: static grid ── */
  .morph-mobile { display: none; }
  @media (max-width: 900px) {
    .morph-track { display: none; }
    .morph-mobile {
      display: block;
      padding: 64px 20px 72px;
    }
    .morph-mobile .mm-head { text-align: center; margin-bottom: 36px; }
    .morph-mobile .mm-head h2 {
      font-size: clamp(26px, 6vw, 34px); font-weight: 900; color: #0F172A;
      letter-spacing: -0.03em; margin: 10px 0 10px; line-height: 1.15;
    }
    .morph-mobile .mm-head p { font-size: 15px; color: #64748B; margin: 0 auto; max-width: 420px; }
    .morph-mobile .mm-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; margin: 0 auto;
    }
    .morph-mobile .mm-card {
      border-radius: 12px; overflow: hidden; background: #fff; position: relative;
      box-shadow: 0 10px 28px -10px rgba(15,23,42,.3), 0 0 0 1px rgba(27,123,214,.06);
      cursor: pointer;
    }
    .morph-mobile .mm-card img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; object-position: top center; }
    .morph-mobile .mm-card span {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 16px 8px 7px; font-size: 10.5px; font-weight: 700; color: #fff; text-align: center;
      background: linear-gradient(to top, rgba(15,23,42,.8), transparent);
    }
    .morph-mobile .mm-cta { text-align: center; margin-top: 32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .morph-track { display: none; }
    .morph-mobile { display: block; padding: 64px 20px 72px; }
  }

  /* ══════════════════════════════════════════════════════════
     STORY SECTION — pain → (fade) → collage, one pinned timeline
     ══════════════════════════════════════════════════════════ */
  .story-section { background: #F8FAFC; position: relative; }
  .story-track { position: relative; height: 940vh; }
  .story-stage {
    position: sticky; top: 0;
    height: 100vh; min-height: 600px;
    overflow: hidden;
  }

  /* ── Feature panels: the arc transforms into this; scroll cycles features ── */
  /* ── FASE DE FUNCIONES ─────────────────────────────────────────────────────
     1-sep-2026: la tira HORIZONTAL pasó a acordeón VERTICAL con la función
     abierta anclada al CENTRO del escenario.

     Por qué el eje. Comprimida a lo ancho, una tarjeta medía ~22 px y ahí no
     cabe un título: el visitante veía cinco rebanadas mudas sin saber qué eran
     ni cuántas faltaban. Comprimida a lo ALTO mide 22-30 px por el ancho
     completo — y ahí sí cabe el nombre entero. Por eso ahora las seis
     funciones se leen SIEMPRE, aunque cinco estén cerradas.

     Por qué dos columnas. Con el texto arriba (los 172 px de alto fijo que
     tenía .fpanels-head) la pila se quedaba sin altura y la función abierta
     bajaba de 210 px. Pasar el texto a un lado le devuelve ~170 px a la pila.

     ⚠️ LA ALTURA DE LA ABIERTA NO ES LIBRE. Para que, con la abierta centrada,
     la pila quepa igual en la PRIMERA que en la SEXTA:

         H = S − 2·(n−1)·(h+g)        con n=6:   H = S − 10·(h+g)

     (H alto de la abierta, S alto de la pila, h alto de una comprimida,
     g separación.) Si alguien toca --fp-h o --fp-g sin recalcular H, la 01 se
     sale por arriba o la 06 por abajo. El cálculo vive en el JS de la fase,
     junto al scroll, y lo vigila
     tests/test_funciones_principales_01sep.py::test_la_formula_del_centrado_*. */
  .fpanels-phase {
    position: absolute; inset: 0; z-index: 5;
    display: grid; grid-template-columns: minmax(290px, 33%) 1fr;
    gap: clamp(22px, 3vw, 46px); align-items: center;
    padding: clamp(26px, 4vh, 44px) clamp(26px, 4.5vw, 64px) clamp(76px, 12vh, 128px);
    opacity: 0; pointer-events: none; will-change: opacity, transform;
  }
  .fpanels-head {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; text-align: left;
  }
  .fpanels-head .section-tag { margin: 0 0 20px; align-self: flex-start; }
  /* Alto mínimo fijo: el título y la descripción cambian de largo entre
     funciones, y sin esto la columna entera saltaba en cada transición. */
  .fpanels-head-dyn {
    transition: opacity .25s ease; min-height: 300px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .fpanels-fase {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #94A3B8; margin: 0 0 12px;
  }
  .fpanels-head-dyn h2 {
    font-size: clamp(24px, 2.6vw, 37px); font-weight: 900; color: #0F172A;
    letter-spacing: -0.03em; line-height: 1.14; margin: 0;
  }
  .fpanels-head-dyn p {
    font-size: clamp(14px, 1.35vw, 16.5px); color: #475569; line-height: 1.55;
    margin: 14px 0 0; max-width: 46ch;
  }
  /* La pila. .fpanels-stack-in va ABSOLUTO y se desplaza con translateY para
     que la abierta caiga en el centro; el alto de cada banda lo pone el rAF. */
  .fpanels-stack { position: relative; height: 100%; min-width: 0; }
  .fpanels-stack-in {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; flex-direction: column; gap: var(--fp-g, 6px);
    will-change: transform;
  }
  .fpanel {
    position: relative; flex: 0 0 auto; height: var(--fp-h, 30px);
    overflow: hidden; cursor: pointer;
    background: #F1F5F9; border: 1px solid #E2E8F0;
  }
  .fpanel.is-done { opacity: .62; }
  /* La barra comprimida: ícono + NOMBRE COMPLETO + número. El nombre va como
     TEXTO REAL, no en un data-attribute — es el argumento entero de la sección
     (y de paso lo indexa Google). */
  .fpanel .fp-bar {
    position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
    gap: 10px; padding: 0 14px; pointer-events: none;
  }
  .fpanel .fp-bar-ic { width: 17px; height: 17px; flex: 0 0 17px; color: #1B7BD6; display: flex; align-items: center; justify-content: center; }
  .fpanel .fp-bar-ic svg { width: 15px; height: 15px; }
  .fpanel .fp-bar-name {
    font-size: 13.5px; font-weight: 650; color: #334155; letter-spacing: -.012em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fpanel .fp-bar-n {
    margin-left: auto; flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px; color: #94A3B8;
  }
  /* Keep every screenshot complete while compensating for transparent canvas around
     the useful UI. A soft backdrop fills the remaining space for portrait captures. */
  .fpanel .fp-shot { position: absolute; inset: 0; background: #EDF1F7; }
  .fp-shot::before,
  .sm-shot::before,
  .smc-fshot::before {
    content: ''; position: absolute; inset: -24px; z-index: 0;
    background-image: var(--shot-image);
    background-size: cover; background-position: center;
    filter: blur(22px) saturate(.75);
    opacity: .13; transform: scale(1.08);
  }
  .fpanel .fp-shot img,
  .story-mobile .sm-shot img,
  .smc-fshot img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; display: block;
    /* Landscape captures fill the box (no letterbox bands). Portrait is overridden below. */
    object-fit: cover; object-position: center;
    transform: scale(var(--shot-scale, 1)) translate(var(--shot-x, 0%), var(--shot-y, 0%));
    transform-origin: center;
  }
  /* Portrait/near-square captures: show the whole shot (don't crop a document). */
  .fpanel .fp-shot.is-portrait img,
  .story-mobile .sm-shot.is-portrait img,
  .smc-fshot.is-portrait img {
    object-fit: contain;
    filter: drop-shadow(0 9px 24px rgba(15,23,42,.22));
  }
  /* Soft blurred fill behind portrait shots so the side-bands read as intentional. */
  .fp-shot.is-portrait::before,
  .sm-shot.is-portrait::before,
  .smc-fshot.is-portrait::before { opacity: .26; }
  /* La leyenda de la función abierta, sobre la captura. El degradado tiene que
     ser lo bastante alto para dos renglones: con 52 px la segunda línea caía
     sobre el blanco de la captura y no se leía (1-sep-2026). */
  .fpanel .fp-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; align-items: center; gap: 11px; padding: 16px 18px;
    background: linear-gradient(to top, rgba(11,18,32,.86) 38%, rgba(11,18,32,0));
    pointer-events: none;
  }
  .fpanel .fp-cap-t {
    font-size: 14px; font-weight: 650; color: #fff; letter-spacing: -.012em;
    line-height: 1.3; text-shadow: 0 1px 4px rgba(11,18,32,.5);
  }
  .fpanel .fp-icon {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: rgba(9,26,52,.62); border: 1.5px solid rgba(255,255,255,.34);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .fpanel .fp-icon svg { width: 18px; height: 18px; }
  /* Dark backdrop for the pain phase — alive with colour + light that flows on scroll */
  .story-bg-dark {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(135deg, #0B1220 0%, #0F1E3D 55%, #0B1220 100%);
    will-change: opacity;
  }
  /* Flowing dot texture — position driven by scroll, faster than the page (seamless loop) */
  .story-bg-dark::before {
    content: ''; position: absolute; inset: -12%; z-index: 2;
    background-image: radial-gradient(circle, rgba(255,255,255,.11) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 var(--sbg-y, 0px);
  }
  /* Coloured light orbs — soft, on-screen; palette azul / verde / blanco only. Ambient drift + scroll parallax (JS) */
  .sbg-orbs { position: absolute; inset: 0; z-index: 1; will-change: transform; }
  .sbg-orb { position: absolute; border-radius: 50%; will-change: transform; }
  .sbg-orb.o1 { width: 46vw; height: 46vw; left: -8%;  top: 2%;
    background: radial-gradient(circle, rgba(40,146,242,.46) 0%, rgba(40,146,242,.18) 44%, transparent 72%);
    filter: blur(58px); animation: sbgD1 12s ease-in-out infinite; }
  .sbg-orb.o2 { width: 42vw; height: 42vw; right: -10%; top: 16%;
    background: radial-gradient(circle, rgba(34,197,110,.42) 0%, rgba(34,197,110,.16) 44%, transparent 72%);
    filter: blur(60px); animation: sbgD2 16s ease-in-out infinite; }
  .sbg-orb.o3 { width: 38vw; height: 38vw; left: 18%;  bottom: -20%;
    background: radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,.11) 44%, transparent 72%);
    filter: blur(62px); animation: sbgD3 14s ease-in-out infinite; }
  .sbg-orb.o4 { width: 30vw; height: 30vw; right: 14%; top: -14%;
    background: radial-gradient(circle, rgba(96,165,250,.40) 0%, rgba(96,165,250,.15) 44%, transparent 72%);
    filter: blur(56px); animation: sbgD1 18s ease-in-out infinite reverse; }
  @keyframes sbgD1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(54px,-40px); } }
  @keyframes sbgD2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-60px,32px); } }
  @keyframes sbgD3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,52px); } }
  @media (prefers-reduced-motion: reduce) { .sbg-orb { animation: none; } }

  /* ── PAIN layer ── */
  .story-pain {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 24px; will-change: transform, opacity;
  }
  .story-pain-head { text-align: center; margin-bottom: 30px; max-width: 640px; }
  .story-pain-head .pain-label { margin: 0 auto 16px; }
  .story-pain-head h2 {
    font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; color: #fff;
    letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 10px;
  }
  .story-pain-head p { font-size: 16px; color: rgba(255,255,255,.72); margin: 0; }
  .story-pain-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    width: 100%; max-width: 1000px;
  }
  .spain-card {
    border-radius: 22px; padding: 24px 24px 26px;
    will-change: transform, opacity; position: relative; overflow: hidden;
  }
  .spain-before { background: #0B1220; border: 1px solid #243049; }
  .spain-after  { background: #fff; border: 2px solid #BFDBFE; box-shadow: 0 24px 60px -20px rgba(27,123,214,.45); }
  .spain-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 12px 4px 6px; border-radius: 999px; margin-bottom: 16px;
  }
  .spain-badge span {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 10px;
  }
  .spain-badge.bad  { background: rgba(239,68,68,.15); color: #FCA5A5; }
  .spain-badge.bad span  { background: rgba(239,68,68,.3); }
  .spain-badge.good { background: #EFF6FF; color: var(--brand-blue); }
  .spain-badge.good span { background: #DBEAFE; color: var(--brand-blue); }
  .spain-card h3 { font-size: 17px; font-weight: 800; line-height: 1.25; margin: 14px 0 12px; }
  .spain-before h3 { color: #F1F5F9; }
  .spain-after h3  { color: #0F172A; }
  .spain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .spain-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; }
  .spain-before .spain-list li { color: #94A3B8; }
  .spain-after .spain-list li { color: #374151; }
  .spain-ic { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; }
  .spain-ic.bad  { background: rgba(239,68,68,.2); color: #F87171; }
  .spain-ic.good { background: #DBEAFE; color: var(--brand-blue); }

  /* Chaos SVG (antes) */
  /* "Antes" illustration reuses the .spain-shot frame so it matches the
     "después" screenshot in size + position exactly; just not clickable. */
  .spain-illus { cursor: default; border-color: #243049; }

  /* Real screenshot frame (después) */
  .spain-shot {
    border-radius: 12px; overflow: hidden; margin-bottom: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 14px 36px -12px rgba(27,123,214,.3);
    border: 1px solid #E2E8F0;
    cursor: pointer;
  }
  .spain-shot .ssb { background: #F1F5F9; border-bottom: 1px solid #E2E8F0; padding: 7px 11px; display: flex; gap: 5px; align-items: center; }
  .spain-shot .ssb i { width: 8px; height: 8px; border-radius: 50%; display: block; }
  .spain-shot .ssb .r { background: #FC615D; } .spain-shot .ssb .a { background: #FDBC40; } .spain-shot .ssb .g { background: #34C749; }
  /* 16/9 en escritorio, y 1/1 en celular (ver el bloque de `@media`).

     Estuvo un rato en 4/3: la primera versión de la imagen del «después» era
     casi cuadrada y en una tira ancha quedaba cortada por la cintura, justo
     donde está lo que cuenta (la bata en la mano, el bolso). Francisco mandó
     después la misma escena en apaisado —«tiene la relación de aspecto
     correcta para que se vea rectangular en escritorio y cuadrada en móvil»—
     y con eso el 16/9 vuelve a ser el bueno: las dos imágenes son apaisadas y
     ninguna pierde nada. Cambiar la foto salió más barato que pelearse con el
     recorte. */
  .spain-shot img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; object-position: top center; }
  /* AI-summary badge overlay on the después shot */
  .spain-ai-chip {
    position: absolute; top: 84px; right: 14px;
    background: #fff; border: 1px solid #BFDBFE; border-radius: 10px;
    padding: 7px 11px; font-size: 11px; font-weight: 800; color: var(--brand-blue);
    box-shadow: 0 8px 24px rgba(27,123,214,.18); display: flex; align-items: center; gap: 6px;
    animation: bubbleFloatAnim 4s ease-in-out infinite;
  }

  /* ── Story mobile / reduced-motion fallback ── */
  .story-mobile { display: none; }
  .story-mcine { display: none; }
  @media (max-width: 900px) {
    .story-track { display: none; }
    .story-mobile { display: block; padding: 56px 20px 64px; background: #F8FAFC; }
    .story-mobile .sm-pain-head { text-align: center; margin-bottom: 26px; }
    .story-mobile .sm-pain-head h2 { font-size: clamp(24px,6vw,32px); font-weight: 900; color: #0F172A; letter-spacing:-.03em; margin: 8px 0; }
    .story-mobile .sm-pain-head p { font-size: 14.5px; color: #64748B; margin: 0; }
    .story-mobile .sm-pain { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 0 auto 44px; }
    .story-mobile .spain-card { padding: 20px; }
    /* Pain cards slide in on scroll (mirrors the desktop separation animation) */
    .story-mobile .sm-pain.lnd-reveal { opacity: 1; transform: none; }
    .story-mobile .sm-pain .spain-before { opacity: 0; transform: translateX(-26px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
    .story-mobile .sm-pain .spain-after  { opacity: 0; transform: translateX(26px);  transition: opacity .6s ease .12s, transform .6s cubic-bezier(.22,.9,.3,1) .12s; }
    .story-mobile .sm-pain.lnd-visible .spain-before,
    .story-mobile .sm-pain.lnd-visible .spain-after { opacity: 1; transform: none; }
    /* "Así se ve tu consulta por dentro" — function-icon grid (replaces nothing → was missing on mobile) */
    .story-mobile .sm-icons-head { text-align: center; margin: 8px 0 22px; }
    .story-mobile .sm-icons-head h2 { font-size: clamp(24px,6vw,32px); font-weight: 900; color: #0F172A; letter-spacing:-.03em; margin: 8px 0; }
    .story-mobile .sm-icons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; margin: 0 auto 44px; }
    .story-mobile .sm-icon-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; background: #fff; border: 1px solid #EEF2F7; border-radius: 16px; padding: 22px 12px; box-shadow: 0 10px 24px -14px rgba(15,23,42,.22); }
    .story-mobile .sm-icon-ico { width: 60px; height: 60px; border-radius: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .story-mobile .sm-icon-ico svg { width: 30px; height: 30px; }
    .story-mobile .sm-icon-name { font-size: 13px; font-weight: 800; color: #0F172A; line-height: 1.25; letter-spacing: -.01em; }
    .story-mobile .sm-deck-head { text-align: center; margin: 8px 0 26px; }
    .story-mobile .sm-deck-head h2 { font-size: clamp(24px,6vw,32px); font-weight: 900; color: #0F172A; letter-spacing:-.03em; margin: 8px 0; }
    /* Mobile: auto-advancing carousel of the main features (no 9-image grid) */
    .story-mobile .sm-carousel { position: relative; max-width: 460px; margin: 0 auto; overflow: hidden; }
    .story-mobile .sm-track { display: flex; transition: transform .55s cubic-bezier(.22,.9,.3,1); }
    .story-mobile .sm-slide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; padding: 2px; }
    .story-mobile .sm-shot { position: relative; border-radius: 16px; overflow: hidden; background: #EDF1F7; border: 1px solid #E2E8F0; box-shadow: 0 14px 36px -14px rgba(15,23,42,.35); }
    .story-mobile .sm-shot .ssb { display: none; }
    .story-mobile .sm-shot { aspect-ratio: 16/10; }
    /* Vertical captures get a taller box → shown larger with slimmer side-bands. */
    .story-mobile .sm-shot.is-portrait { aspect-ratio: 4/3; }
    .story-mobile .sm-slide-cap { display: flex; align-items: center; gap: 12px; padding: 16px 6px 2px; }
    .story-mobile .sm-slide-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark)); box-shadow: 0 6px 16px rgba(27,123,214,.3); }
    .story-mobile .sm-slide-title { font-size: 17px; font-weight: 800; color: #0F172A; letter-spacing: -.01em; line-height: 1.2; }
    .story-mobile .sm-slide-desc { font-size: 13.5px; color: #64748B; line-height: 1.4; margin-top: 3px; }
    .story-mobile .sm-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .story-mobile .sm-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #CBD5E1; cursor: pointer; transition: width .3s ease, background .3s ease; }
    .story-mobile .sm-dot.on { width: 22px; background: var(--brand-blue); }
    .story-mobile .sm-cta { text-align: center; margin-top: 30px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .story-track { display: none; }
    .story-mcine { display: none !important; }
    .story-mobile { display: block; padding: 56px 20px 64px; }
  }
  /* Short desktop viewports: let the pinned stage breathe */
  @media (min-width: 901px) and (max-height: 820px) {
    .story-pain-head { margin-bottom: 18px; }
    .spain-shot img { aspect-ratio: 16/8; }
  }

  /* Accent words in the "Funciones principales" titles/descriptions — brand blue & green
     for emphasis (desktop + mobile). Uses contrast-safe shades on the light panels phase:
     blue-dark #1565B8 (~5.8:1) and a darkened brand green #2E7D32 (~4.6:1); the raw brand
     green #54B948 is too light for text. */
  .fp-em   { color: var(--brand-blue-dark); }
  .fp-em-g { color: #2E7D32; }

  /* ══════════════════════════════════════════════════════════════════════
     MOBILE CINEMATIC STORY — one pinned, scroll-driven timeline that mirrors
     the desktop .story-track: pain (appear/disappear) → rotating icon ring →
     sliding feature panels. Shown ONLY on mobile WITH motion. Desktop and the
     reduced-motion static fallback are left byte-for-byte untouched.
     ══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .story-track  { display: none !important; }
    .story-mobile { display: none !important; }
    .story-mcine  { display: block; }

    .smc-track { position: relative; height: 980svh; }
    .smc-stage {
      position: sticky; top: 0; height: 100svh; height: 100dvh; min-height: 560px;
      overflow: hidden; background: #F8FAFC;
    }
    /* full-stage overlapping layers */
    .smc-bg, .smc-pain, .smc-rhead, .smc-center, .smc-deck, .smc-fpanels { position: absolute; }

    /* dark backdrop during pain → fades to the light stage bg for ring/panels */
    .smc-bg {
      inset: 0; z-index: 0; will-change: opacity;
      background:
        radial-gradient(58% 40% at 16% 12%, rgba(40,146,242,.30), transparent 70%),
        radial-gradient(54% 38% at 88% 20%, rgba(34,197,110,.22), transparent 70%),
        radial-gradient(52% 34% at 50% 98%, rgba(96,165,250,.20), transparent 70%),
        linear-gradient(135deg, #0B1220 0%, #0F1E3D 55%, #0B1220 100%);
    }

    /* ── PAIN (one card centred at a time; heading fixed near the top) ── */
    .smc-pain { inset: 0; z-index: 4; will-change: opacity; }
    .smc-pain-head { position: absolute; top: 5.5%; left: 0; right: 0; text-align: center; padding: 0 22px; }
    .smc-pain-head h2 { font-size: clamp(21px,5.4vw,27px); font-weight: 900; color: #fff; letter-spacing: -.03em; line-height: 1.12; margin: 9px auto 0; max-width: 360px; min-height: 60px; }
    .smc-pcard { position: absolute; left: 50%; top: 55%; width: calc(100% - 34px); max-width: 384px; transform: translate(-50%,-50%); will-change: transform, opacity; }
    /* compact pain cards so a single card sits comfortably in one viewport */
    .story-mcine .spain-card { padding: 14px 15px 16px; border-radius: 18px; }
    .story-mcine .spain-badge { margin-bottom: 10px; }
    .story-mcine .spain-card h3 { font-size: 15px; margin: 11px 0 9px; }
    .story-mcine .spain-list { gap: 7px; }
    .story-mcine .spain-list li { font-size: 12.5px; line-height: 1.4; gap: 8px; }
    .story-mcine .spain-shot img { aspect-ratio: 16/9; }
    .story-mcine .spain-ai-chip { top: 62px; right: 11px; font-size: 10px; padding: 5px 9px; }

    /* ── RING heading (above the ring) ── */
    /* Anchored to the ring centre (54%) and lifted so the heading sits JUST above the
       top chip — not pinned to the top of the page. translateY(-100%) bottom-aligns it
       at 54%, then -150px clears the ring's upper half (ringR*0.82≈108 + chip half 28 + gap). */
    .smc-rhead {
      top: var(--ring-cy, 54%); left: 0; right: 0; z-index: 3;
      transform: translateY(calc(-100% - 150px));
      text-align: center; padding: 0 22px; opacity: 0; will-change: opacity;
    }
    .smc-rhead .section-tag { margin: 0 auto; }
    .smc-rhead h2 { font-size: clamp(22px,5.6vw,29px); font-weight: 900; color: #0F172A; letter-spacing: -.03em; line-height: 1.13; margin: 9px auto 0; max-width: 320px; }

    /* ── RING active-name (sits at the ring's centre) ── */
    .smc-center {
      /* 10-sep-2026: estaba en el centro del óvalo y era lo que ponía el radio
         mínimo del enjambre — con él en medio, la corona donde caben las
         burbujas medía 28 px a 390 px de pantalla, y salía un aro fino en vez
         de un enjambre. Ahora cuelga del titular, que es donde el ojo ya está. */
      top: var(--ring-cy, 54%); left: 0; right: 0; z-index: 7;
      transform: translateY(-50%);
      text-align: center; padding: 0 30px; opacity: 0; pointer-events: none; will-change: opacity;
    }
    /* Va sobre el enjambre: aunque el óvalo le reserva su franja, una burbuja
       grande puede rozarla al pasar por arriba, y el nombre tiene que leerse
       siempre. Va en el bloque base, no en el de tablet: el teléfono es
       justamente donde menos sitio hay. */
    .smc-center .smc-active-name {
      /* El ancho de este rótulo ES el radio mínimo del enjambre: las burbujas
         giran, así que todas tienen que librarlo por el lado más ancho. Cada
         10 px de más aquí se pagan en burbujas más pequeñas, por eso va
         estrecho y en dos renglones si hace falta. */
      max-width: 150px; line-height: 1.25;
      display: inline-block; padding: 6px 14px; border-radius: 16px;
      background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 6px 18px -10px rgba(9,26,54,.5), inset 0 0 0 1px rgba(255,255,255,.9);
    }
    .smc-active-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 0 auto; max-width: 186px; min-height: 18px; color: #1E293B; }

    /* ── RING deck (orbiting chips) ── */
    .smc-deck { inset: 0; z-index: 5; pointer-events: none; will-change: transform, opacity; }
    .smc-chip {
      position: absolute; left: 50%; top: var(--ring-cy, 54%); margin: -28px 0 0 -28px;
      width: 56px; height: 56px; border-radius: 17px;
      display: flex; align-items: center; justify-content: center;
      background: #fff; box-shadow: 0 10px 22px -10px rgba(15,23,42,.30), 0 0 0 1px rgba(15,23,42,.04);
      opacity: 0; will-change: transform, opacity;
    }
    .smc-chip-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    .smc-chip-ico svg { width: 24px; height: 24px; }
    .smc-chip.is-active { z-index: 6; box-shadow: 0 16px 30px -8px rgba(27,123,214,.42), 0 0 0 2px #93C5FD; }
    /* Lista larga (>12 funciones): dos órbitas y fichas un punto más chicas, o
       se tocan entre sí y tapan el nombre del centro. */
    .story-mcine.is-densa .smc-chip { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 15px; }
    .story-mcine.is-densa .smc-chip-ico { width: 34px; height: 34px; border-radius: 10px; }
    .story-mcine.is-densa .smc-chip-ico svg { width: 20px; height: 20px; }
    .story-mcine.is-densa .smc-active-name { max-width: 140px; font-size: 14px; }

    /* ── PANELS (horizontal full-width slide driven by vertical scroll) ── */
    /* ── FASE DE FUNCIONES EN CELULAR ─────────────────────────────────────
       1-sep-2026: era una tira que se movía de LADO (translateX) mientras el
       dedo bajaba, con `.smc-fpanel { flex: 0 0 100vw }` — cada panel ocupaba
       la pantalla completa, así que NO quedaba ni un píxel de asomo del
       siguiente: el visitante veía una captura, deslizaba, y llegaba otra sin
       saber nunca cuántas eran. En escritorio al menos se veían cinco
       rebanadas; aquí no quedaba nada.

       Ahora es el MISMO acordeón vertical que el escritorio, con la abierta
       anclada al centro. Vale la fórmula de allá: H = S − 10·(h+g). Aquí S es
       el alto del escenario MENOS el encabezado y el respiro de abajo, así que
       H sale más chica; el rAF le pone piso para que en pantallas cortas se
       encoja sola en vez de reventar la pila. */
    .smc-fpanels {
      inset: 0; z-index: 6;
      display: flex; flex-direction: column; align-items: stretch;
      opacity: 0; pointer-events: none; will-change: opacity, transform;
      /* 15-sep-2026: eran 84 px (el hueco de la barra flotante), pero el aviso
         «Continúa deslizando» cuelga a 110 px del fondo y mide ~36: tapaba los
         dos últimos renglones de la pila. Ahora la pila termina por ENCIMA del
         aviso. Lo que cuesta se recupera en el JS bajando cada renglón
         comprimido de 26 a 22 px: el panel abierto queda casi igual. */
      padding: 0 14px max(150px, env(safe-area-inset-bottom) + 134px);
    }
    /* El encabezado se ancla ARRIBA, no abajo (1-sep-2026, Francisco: «en móvil
       el texto y títulos no se ven»).

       EL MECANISMO, medido a 390x844. La barra superior está FIJA y termina en
       y=55. El bloque iba con `justify-content: flex-end`, o sea pegado abajo,
       así que crecía HACIA ARRIBA — y como el texto cambia con cada función, el
       de más arriba dependía de cuál tocara: 105 px en «Dictas, la IA acomoda»
       y 162 px en «Once documentos…», que tiene el título en dos líneas y el
       párrafo en cinco. Con el bloque largo el <h2> arrancaba en y=16 y sus
       primeros 39 px quedaban debajo del header. Por eso se veía la mitad
       inferior de las letras, y por eso no bastaba con subir la altura: el
       estorbo no era el tamaño de la caja sino la DIRECCIÓN en que crecía.

       Anclado arriba con `padding-top: 63px` (los 55 del header más 8 de aire),
       el texto empieza siempre en el mismo sitio, mida lo que mida, y crece
       hacia abajo — donde hay sitio.

       EL PRECIO, dicho entero: alojar el bloque peor (162 px) pedía una
       cabecera de 235 px, y eso dejaba la pila en H=147, por debajo del piso de
       `FP_MIN_M` (150) — el centrado se rompía. Así que el coste se reparte: la
       cabecera sube a 200 px (la pila pasa de 550 a ~482, H≈182, con margen
       sobre el piso) y el párrafo se corta a tres líneas, que solo muerde a la
       función 03. No se toca el `padding-bottom` de `.smc-fpanels`: esos 84 px
       son el hueco de la barra flotante de «Empezar gratis». */
    .smc-fhead { text-align: left; height: 200px; flex: 0 0 200px; display: flex; flex-direction: column; justify-content: flex-start; padding: 63px 4px 10px; }
    /* El rótulo «Funciones principales» se va de esta fase (1-sep-2026). No es
       una pérdida: con el encabezado anclado abajo caía por encima del header
       fijo, o sea que NUNCA se vio. Al anclarlo arriba sí aparecería, y cuesta
       31 px de los que anda justa la pila — con él, H queda en 152 contra un
       piso de 150. Cada panel ya lleva su nombre y el aviso dice cuántas
       faltan, así que el rótulo no aporta nada que no esté a la vista. */
    .smc-fhead .section-tag { display: none; }
    .smc-fhead-dyn { margin-top: 4px; will-change: opacity; }
    .smc-ffase { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; margin: 0 0 6px; }
    .smc-fhead-dyn h2 { font-size: clamp(19px,4.8vw,24px); font-weight: 900; color: #0F172A; letter-spacing: -.03em; line-height: 1.14; margin: 0; }
    /* Tres líneas y punto: es lo que hace que el bloque más largo quepa en la
       cabecera sin dejar la pila por debajo de su piso. Solo recorta a la 03
       («Once documentos…»), que traía cinco. */
    .smc-fhead-dyn p { font-size: 12.5px; color: #475569; line-height: 1.42; margin: 6px 0 0; max-width: 42ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    /* La pila. Mismo montaje que escritorio: el interior va ABSOLUTO y se
       desplaza con translateY; el alto de cada banda lo pone el rAF. */
    .smc-fstack { position: relative; flex: 1 1 auto; min-height: 0; }
    .smc-fstack-in { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: var(--fp-g-m, 3px); will-change: transform; }
    .smc-fpanel { position: relative; flex: 0 0 auto; height: var(--fp-h-m, 22px); border-radius: 11px; overflow: hidden; background: #F1F5F9; border: 1px solid #E2E8F0; will-change: height; }
    .smc-fpanel.is-active { border-color: rgba(84,185,72,.55); box-shadow: 0 14px 32px -14px rgba(15,23,42,.45); }
    .smc-fpanel.is-done { opacity: .6; }
    /* La barra comprimida lleva el NOMBRE COMPLETO como texto real: es el
       argumento entero del cambio de eje — comprimida a lo alto sí cabe. */
    .smc-fbar { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 0 10px; pointer-events: none; }
    .smc-fbar-ic { width: 14px; height: 14px; flex: 0 0 14px; color: #1B7BD6; display: flex; align-items: center; justify-content: center; }
    .smc-fbar-ic svg { width: 13px; height: 13px; }
    .smc-fbar-name { font-size: 11.5px; font-weight: 650; color: #334155; letter-spacing: -.014em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .smc-fbar-n { margin-left: auto; flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; color: #94A3B8; }
    .smc-fshot { position: absolute; inset: 0; background: #EDF1F7; }
    .smc-fshot .ssb { display: none; }
    /* 15-sep-2026 (Francisco, desde su celular): «no se alcanza a leer el texto
       que importa». La leyenda iba sobre un degradado que se volvía
       transparente hacia arriba, y la captura trae texto propio justo ahí
       («TRANSCRIPCIÓN DE VOZ…»): dos textos encimados, ninguno legible. Ahora
       es una banda OPACA con un filo arriba, y la captura queda entera encima. */
    .smc-fcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #0B1220; border-top: 1px solid rgba(255,255,255,.10); pointer-events: none; }
    .smc-fcap-t { font-size: 12.5px; font-weight: 650; color: #fff; line-height: 1.3; letter-spacing: -.012em; text-shadow: 0 1px 4px rgba(11,18,32,.5); }
    .smc-fic {
      flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; background: rgba(9,26,52,.62); border: 1px solid rgba(255,255,255,.32);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .smc-fic svg { width: 15px; height: 15px; }
    .smc-fdots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .smc-fdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #CBD5E1; cursor: pointer; transition: width .3s ease, background .3s ease; }
    .smc-fdot.on { width: 22px; background: var(--brand-blue); }

    /* «Sigue bajando»: sin esto, la fase de funciones parece el final de la
       página — el escenario está clavado y el dedo no encuentra a dónde ir. */
    /* Look y animación vienen del bloque global `.morph-hint, .smc-fhint`
       (arriba, fuera de todo @media). Aquí sólo su sitio en la columna. */
    /* Colgado del escenario, no de los paneles (2-sep-2026): dentro de
       `.smc-fpanels` heredaba su opacidad —`xfade`— y era imposible enseñarlo
       durante el dolor y el anillo. Ya no está en un flujo flex, así que se
       posiciona solo. El `bottom` lo deja donde estaba medido (a 110 px del
       fondo en 844), por encima del hueco de la barra flotante. */
    .smc-fhint {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: max(110px, env(safe-area-inset-bottom) + 94px);
      opacity: 0; pointer-events: none;
    }

    /* Promote compositor layers ONLY while the story is on screen (.is-live is toggled by the
       IntersectionObserver). Off-screen → will-change:auto, so the ~25 animated layers are not
       held promoted for the whole page lifetime (matters on low-RAM Android). */
    .smc-track:not(.is-live) .smc-bg,
    .smc-track:not(.is-live) .smc-pain,
    .smc-track:not(.is-live) .smc-pcard,
    .smc-track:not(.is-live) .smc-rhead,
    .smc-track:not(.is-live) .smc-center,
    .smc-track:not(.is-live) .smc-deck,
    .smc-track:not(.is-live) .smc-chip,
    .smc-track:not(.is-live) .smc-fpanels,
    .smc-track:not(.is-live) .smc-fhead-dyn,
    .smc-track:not(.is-live) .smc-fstack-in,
    .smc-track:not(.is-live) .smc-fpanel { will-change: auto; }
  }
  @supports not (height: 100svh) {
    @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
      .smc-track { height: 980vh; }
      .smc-stage { height: 100vh; }
    }
  }

  /* ── Portrait tablets (600–900px wide AND tall): scale the cinematic up so the
     ring, pain cards and feature captures fill the canvas instead of sitting tiny
     in the middle. min-height gate keeps landscape phones on the phone sizing. ── */
  @media (min-width: 600px) and (max-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
    .smc-chip { width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 22px; }
    .smc-chip-ico { width: 54px; height: 54px; border-radius: 16px; }
    .smc-chip-ico svg { width: 31px; height: 31px; }
    /* ring radius grows to ~205 in JS → lift the heading clear of the top chips */
    .smc-rhead { transform: translateY(calc(-100% - 220px)); }
    .smc-rhead h2 { font-size: 32px; max-width: 460px; }
    .smc-center { transform: translateY(-50%); }
    .smc-active-name { font-size: 20px; max-width: 260px; }
    .smc-pain-head { top: 8%; }
    .smc-pain-head h2 { font-size: 32px; max-width: 480px; min-height: 76px; }
    .smc-pcard { max-width: 540px; }
    .story-mcine .spain-card { padding: 22px 22px 24px; border-radius: 22px; }
    .story-mcine .spain-card h3 { font-size: 19px; margin: 14px 0 11px; }
    .story-mcine .spain-list li { font-size: 14.5px; line-height: 1.5; }
    .smc-fhead-dyn h2 { font-size: 30px; }
    .smc-fhead-dyn p { font-size: 15.5px; max-width: 460px; }
    /* centre the captures with a comfortable max width instead of edge-to-edge */
    .smc-fpanels { padding-left: max(22px, calc((100vw - 680px) / 2)); padding-right: max(22px, calc((100vw - 680px) / 2)); }
    .smc-fdot { width: 9px; height: 9px; }
    .smc-fdot.on { width: 24px; }
  }

  /* ── Video explainer (después del stats-strip) ───────────────────────────────
     Mascota a la izquierda + reproductor con botón de play pulsante. Al dar click
     en el botón O en la mascota, el video CRECE (cubriendo a la mascota) y se
     reproduce; al terminar vuelve a su tamaño y reaparece el botón pulsante.
     Entrada 3D (rotateX) DISTINTA al fade+translateY del resto (observer .lnd-reveal). */
  .video-explainer {
    position: relative;
    padding: 96px 24px 104px;
    background: linear-gradient(180deg, #F4F9F3 0%, #EAF1FB 100%);
    text-align: center;
    overflow: hidden;            /* contiene el desborde de la perspectiva 3D */
  }
  .vexp-inner { max-width: 980px; margin: 0 auto; }
  .vexp-title {
    font-size: clamp(28px, 4.6vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0D2756;              /* navy */
    margin: 0 0 12px;
    line-height: 1.12;
  }
  .vexp-sub {
    font-size: clamp(15px, 2.2vw, 18px);
    color: #4A5B72;
    max-width: 560px;
    margin: 0 auto 48px;
    line-height: 1.5;
  }

  /* Stage: wrapper observado (.lnd-reveal); contiene la perspectiva 3D del frame. */
  .vexp-stage { perspective: 1500px; }
  .vexp-stage.lnd-reveal { opacity: 1; transform: none; }

  /* Row: mascota y video en FLUJO con un gap fijo → NUNCA se tocan. El "cubrir a
     la mascota" al reproducir lo resuelve el lightbox a pantalla completa. */
  /* El VIDEO va CENTRADO en la página (único hijo en flujo, justify-center). La
     mascota va ABSOLUTA a su izquierda, posicionada respecto al centro con un gap
     garantizado → el video queda centrado y mascota/video nunca se tocan. */
  .vexp-row {
    --vexp-fw: 480px;            /* ancho del video en reposo */
    --vexp-vh: calc(var(--vexp-fw) * 9 / 16);  /* alto del video (16:9) → alto objetivo de la mascota */
    --vexp-gap: 30px;            /* separación mascota ↔ video (garantizada) */
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vexp-mascot {
    position: absolute;
    bottom: 0;                   /* pies a la altura de la parte inferior del video */
    right: calc(50% + var(--vexp-fw) / 2 + var(--vexp-gap));  /* a la IZQUIERDA del video centrado */
    width: auto; height: auto;
    max-height: var(--vexp-vh);  /* misma altura que el video (cuando cabe) */
    max-width: calc(50% - var(--vexp-fw) / 2 - var(--vexp-gap) - 8px);  /* sin salirse del gutter */
    cursor: pointer;
    filter: drop-shadow(0 16px 22px rgba(13,39,86,.20));
    transition: opacity .5s ease, transform .5s ease;
  }
  .vexp-mascot:hover { transform: translateY(-6px) scale(1.03); }

  .vexp-frame {
    position: relative;
    flex: 0 1 var(--vexp-fw);    /* el video queda CENTRADO en la página */
    max-width: var(--vexp-fw);
    border-radius: 20px;
    overflow: hidden;
    background: #0D2756;
    transform-origin: center 64%;
    /* entrada 3D: inclinado hacia atrás + encogido + invisible */
    opacity: 0;
    transform: rotateX(9deg) scale(0.92);
    box-shadow: 0 12px 34px -22px rgba(13,39,86,.40), 0 0 0 1px rgba(13,39,86,.05);
    transition: opacity .85s cubic-bezier(0.22,0.7,0.2,1),
                transform .85s cubic-bezier(0.22,0.7,0.2,1),
                max-width .6s cubic-bezier(0.22,0.7,0.2,1),
                box-shadow 1s cubic-bezier(0.22,0.7,0.2,1);
    will-change: transform, opacity, max-width;
  }
  /* entrada final: se endereza hacia el usuario + glow verde */
  .vexp-stage.lnd-visible .vexp-frame {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
    box-shadow: 0 26px 64px -30px rgba(13,39,86,.45),
                0 0 0 1px rgba(13,39,86,.06),
                0 0 48px -16px rgba(84,185,72,.25);
  }

  .vexp-video { display: block; width: 100%; height: auto; background: #0D2756; }
  .vexp-video--h { aspect-ratio: 16 / 9; }
  .vexp-video--v { display: none; aspect-ratio: 9 / 16; }

  /* Botón de play grande, centrado, con animación de ampliación/compresión */
  .vexp-playbtn {
    position: absolute; top: 50%; left: 50%;
    width: 84px; height: 84px; padding: 0;
    border: none; border-radius: 50%; cursor: pointer; z-index: 4;
    background: rgba(255,255,255,.94);
    color: var(--brand-blue-dark, #1257A8);
    display: flex; align-items: center; justify-content: center;
    transform: translate(-50%,-50%);
    animation: vexpPulse 1.8s ease-in-out infinite;
    transition: opacity .35s ease;
  }
  .vexp-playbtn svg { width: 34px; height: 34px; margin-left: 4px; }  /* centra ópticamente el triángulo */
  @keyframes vexpPulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 10px 30px rgba(13,39,86,.35), 0 0 0 0 rgba(84,185,72,.45); }
    50%      { transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 14px 36px rgba(13,39,86,.40), 0 0 0 20px rgba(84,185,72,0); }
  }

  /* Backdrop + botón cerrar del "lightbox" (visibles solo al reproducir) */
  .vexp-backdrop {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(8,18,38,.82);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .4s ease;
  }
  .vexp-lb-close {
    position: fixed; top: 18px; right: 20px; z-index: 9002;
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1;
    display: none; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .vexp-lb-close:hover { background: rgba(255,255,255,.30); }

  /* Estado REPRODUCIENDO: el video se AMPLÍA a ~90% de la pantalla (lightbox fijo),
     cubriendo a la mascota. Se desactiva la perspectiva 3D del stage para que el
     position:fixed sea relativo al viewport (no al contenedor con perspective). */
  .video-explainer.is-playing .vexp-stage { perspective: none; will-change: auto; }
  .video-explainer.is-playing .vexp-frame {
    position: fixed; top: 50%; left: 50%; margin: 0; z-index: 9001;
    width: min(90vw, 160vh);            /* 16:9: ancho acotado a 90vw y a 90vh (160vh = 90vh·16/9) */
    height: min(50.625vw, 90vh);        /* alto = ancho·9/16, acotado a 90vh */
    max-width: 90vw; max-height: 90vh;  /* anula el max-width:480 del reposo */
    border-radius: 16px;
    transform: translate(-50%, -50%);   /* centrado EXACTO en el viewport */
    transition: none;
    animation: vexpZoomIn .45s cubic-bezier(.22,.7,.2,1);
    box-shadow: 0 40px 120px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  }
  @keyframes vexpZoomIn {
    from { transform: translate(-50%,-50%) scale(.82); opacity: .4; }
    to   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  }
  .video-explainer.is-playing .vexp-backdrop { opacity: 1; pointer-events: auto; }
  .video-explainer.is-playing .vexp-lb-close { display: flex; }
  .video-explainer.is-playing .vexp-mascot { opacity: 0; transform: translateX(-30px) scale(.9); pointer-events: none; }
  .video-explainer.is-playing .vexp-playbtn { opacity: 0; pointer-events: none; animation: none; }

  .vexp-cta { margin-top: 44px; }
  .vexp-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 15px 32px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff; font-size: 15.5px; font-weight: 700;
    border-radius: 12px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(27,123,214,.32);
    transition: transform .2s, box-shadow .2s;
  }
  .vexp-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(27,123,214,.42); }

  /* ── Móvil / portrait → video vertical; mascota más chica; el video crece al dar play ── */
  @media (max-width: 767px), (orientation: portrait) {
    .vexp-video--h { display: none; }
    .vexp-video--v { display: block; }
    .vexp-row { --vexp-fw: 144px; --vexp-gap: 10px; --vexp-vh: calc(var(--vexp-fw) * 16 / 9); max-width: 100%; }
    .vexp-frame { flex-basis: min(144px, 22vh); max-width: min(144px, 22vh); }  /* video CHICO → separación clara de la mascota */
    /* mascota MÁS GRANDE y responsiva; pies alineados al fondo del video (bottom:0).
       El video vertical es muy alto, así que aquí se dimensiona por el ancho que entra
       (no por la altura completa del video); crece hacia la izquierda sin tocarlo. */
    .vexp-mascot { width: clamp(94px, calc(50vw - 86px), 140px); height: auto; max-width: none; max-height: none; }
    .vexp-playbtn { width: 60px; height: 60px; }                       /* el botón NO se encoge con el video */
    .vexp-playbtn svg { width: 24px; height: 24px; }
    /* lightbox al reproducir: video vertical a ~90% de la pantalla (acotado por alto) */
    .video-explainer.is-playing .vexp-frame { width: min(90vw, 50.6vh); height: min(160vw, 90vh); }
  }
  @media (max-width: 767px) {
    .video-explainer { padding: 72px 20px 84px; }
    .vexp-sub { margin-bottom: 36px; }
  }

  /* reduced-motion: SIN 3D, pulso ni float — solo fade simple (gana al universal
     por mayor especificidad). El crecimiento al reproducir se conserva (es acción
     del usuario, no animación de scroll). */
  @media (prefers-reduced-motion: reduce) {
    .video-explainer:not(.is-playing) .vexp-frame {
      transform: none !important;
      transition: opacity .6s ease !important;
    }
    .vexp-stage:not(.lnd-visible) .vexp-frame { opacity: 0 !important; }
    .vexp-stage.lnd-visible .vexp-frame { opacity: 1 !important; }
    /* al reproducir, conserva el centrado del lightbox; solo sin animación de zoom */
    .video-explainer.is-playing .vexp-frame { animation: none !important; transform: translate(-50%,-50%) !important; }
    .vexp-playbtn, .vexp-mascot { animation: none !important; }
  }


  /* ══ Burbuja de vidrio ═══════════════════════════════════════════════════
     El cuerpo de los iconos de función, compartido por los tres sitios donde
     se pintan: el anillo de escritorio (.mc-ico), la rejilla de móvil
     (.sm-icon-ico) y los chips del móvil cinemático (.smc-chip-ico).

     Todo son gradientes y porcentajes, no imágenes: pesa cero, escala a
     cualquier diámetro y no se ve borroso en la pantalla 3x del Fold. El color
     entra por --t (una variable por icono) y el blanco se pone ENCIMA en
     capas, en vez de mezclarse con color-mix(), para que la burbuja también se
     vea bien en navegadores que aún no lo soportan.

     El tinte del trazo sale de filter: brightness() sobre el propio color del
     icono — así el dibujo se oscurece lo justo para leerse dentro del vidrio
     sin tener que declarar un segundo color por función. */
  .mc-ico,
  .story-mobile .sm-icon-ico,
  .smc-chip-ico {
    position: relative;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 12%, rgba(255,255,255,0) 34%),
      radial-gradient(circle at 74% 84%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 54%),
      linear-gradient(158deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.48) 46%, rgba(255,255,255,.10) 100%),
      var(--t, #1B7BD6) !important;
    box-shadow:
      inset 0 -9px 18px -6px rgba(9,26,54,.30),
      inset 0 7px 15px -4px rgba(255,255,255,.92),
      inset 0 0 0 1px rgba(255,255,255,.55),
      0 16px 30px -12px rgba(9,26,54,.55),
      0 4px 9px -3px rgba(9,26,54,.22);
    overflow: visible;
  }
  /* brillo especular de arriba */
  .mc-ico::before,
  .story-mobile .sm-icon-ico::before,
  .smc-chip-ico::before {
    content: ""; position: absolute; top: 7%; left: 17%; width: 45%; height: 31%;
    border-radius: 50%; transform: rotate(-14deg); pointer-events: none; z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
    filter: blur(1.5px);
  }
  /* rebote de luz de abajo */
  .mc-ico::after,
  .story-mobile .sm-icon-ico::after,
  .smc-chip-ico::after {
    content: ""; position: absolute; bottom: 9%; right: 19%; width: 29%; height: 15%;
    border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(3px);
    pointer-events: none; z-index: 2;
  }
  .mc-ico svg,
  .story-mobile .sm-icon-ico svg,
  .smc-chip-ico svg {
    position: relative; z-index: 3;
    filter: brightness(.60) saturate(1.3) drop-shadow(0 1px 1px rgba(255,255,255,.75));
  }
  /* El anillo ya se mueve solo; al pasar el cursor la burbuja sube un poco. */
  .morph-card.mc-icon .mc-ico { transition: transform .34s cubic-bezier(.22,1,.36,1); }
  .morph-card.mc-icon:hover .mc-ico { transform: translateY(-5px) scale(1.06); }
  @media (prefers-reduced-motion: reduce) {
    .morph-card.mc-icon:hover .mc-ico { transform: none; }
  }

  /* ══ Luz de fondo del anillo ══════════════════════════════════════════════
     El mismo idioma del hero —orbes de azul, verde y blanco a la deriva— pero
     sobre el fondo claro de la fase del anillo, y con bastante más movimiento:
     cada orbe lleva su propio periodo (19 a 34 s, primos entre sí a ojo) para
     que el conjunto no se sincronice nunca y la luz no repita el mismo cuadro.

     Dos decisiones que valen la pena explicar:

     · El centro va enmascarado. La corona es donde viven las burbujas; el
       centro es donde vive el título en tinta oscura. Con una máscara radial
       la luz se queda en la corona, así que el fondo gana vida donde hay que
       mirar y no le come contraste al texto.
     · Se anima transform, nunca filter ni el gradiente. El desenfoque se
       calcula una vez y a partir de ahí el compositor sólo mueve capas ya
       pintadas — que es la diferencia entre 60 fps y un ventilador.

     El barrido diagonal cruza cada 17 s y es lo único que se percibe como
     «pasa algo»; el resto es deriva lenta. */
  .story-luz {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    /* Azul claro de marca como cielo, no blanco: es lo que permite que el
       brillo BLANCO se lea como luz encima. Sobre un fondo casi blanco un orbe
       blanco no existe; sobre este azul, brilla. El tono se queda arriba del
       80 % de luminosidad para que la tinta oscura del título y de los rótulos
       siga teniendo contraste de sobra. */
    background:
      radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%),
      linear-gradient(158deg, #CFE2F8 0%, #DEEBFB 38%, #E7F1FA 62%, #D6E9F5 100%);
    -webkit-mask-image: radial-gradient(ellipse 44% 38% at 50% 50%, transparent 30%, #000 74%);
    mask-image: radial-gradient(ellipse 44% 38% at 50% 50%, transparent 30%, #000 74%);
  }
  .story-luz .luz {
    position: absolute; border-radius: 50%; will-change: transform;
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  }
  .story-luz .l1 { width: 46vw; height: 46vw; left: -10%; top: -6%;
    background: radial-gradient(circle, rgba(27,123,214,.34) 0%, rgba(27,123,214,.13) 46%, transparent 72%);
    filter: blur(66px); animation-name: luzA; animation-duration: 15s; }
  .story-luz .l2 { width: 42vw; height: 42vw; right: -12%; top: 4%;
    background: radial-gradient(circle, rgba(84,185,72,.34) 0%, rgba(84,185,72,.12) 46%, transparent 72%);
    filter: blur(70px); animation-name: luzB; animation-duration: 19s; }
  .story-luz .l3 { width: 40vw; height: 40vw; left: 6%; bottom: -16%;
    background: radial-gradient(circle, rgba(14,165,233,.36) 0%, rgba(14,165,233,.13) 46%, transparent 72%);
    filter: blur(64px); animation-name: luzC; animation-duration: 13s; }
  .story-luz .l4 { width: 34vw; height: 34vw; right: 4%; bottom: -12%;
    background: radial-gradient(circle, rgba(124,58,237,.24) 0%, rgba(124,58,237,.09) 46%, transparent 72%);
    filter: blur(68px); animation-name: luzA; animation-duration: 22s; animation-direction: reverse; }
  /* ── El brillo blanco ──────────────────────────────────────────────────
     Tres cuerpos de luz blanca, grandes y a distinta velocidad, que barren el
     azul por debajo de las burbujas. Son los que dan la sensación de que algo
     se mueve ahí atrás; los orbes de color quedaron como tinte, no como foco. */
  .story-luz .l5 { width: 44vw; height: 40vw; left: 30%; top: -22%;
    background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 40%, transparent 70%);
    filter: blur(54px); animation-name: luzB; animation-duration: 12s; }
  .story-luz .l6 { width: 38vw; height: 34vw; left: -6%; bottom: -14%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.48) 42%, transparent 72%);
    filter: blur(58px); animation-name: luzC; animation-duration: 16s; }
  .story-luz .l7 { width: 34vw; height: 32vw; right: -4%; top: 26%;
    background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,.44) 42%, transparent 72%);
    filter: blur(56px); animation-name: luzA; animation-duration: 21s; animation-direction: reverse; }
  /* Malla de instrumento, muy tenue, con el mismo parallaje de scroll que ya
     alimenta el fondo oscuro (--sbg-y): así las dos fases se mueven juntas. */
  .story-luz::before {
    content: ''; position: absolute; inset: -12%;
    background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px);
    background-size: 34px 34px;
    background-position: 0 var(--sbg-y, 0px);
  }
  /* Barrido: la única luz que se percibe como movimiento. */
  .story-luz::after {
    content: ''; position: absolute; top: -60%; left: -35%; width: 42%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 42%, rgba(255,255,255,.95) 50%, rgba(214,235,255,.7) 60%, transparent);
    transform: rotate(14deg) translateX(-40vw); will-change: transform;
    animation: luzBarrido 11s cubic-bezier(.55,0,.45,1) infinite;
  }
  @keyframes luzA {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(12vw,7vh,0) scale(1.26); }
  }
  @keyframes luzB {
    0%,100% { transform: translate3d(0,0,0) scale(1.08); }
    50%     { transform: translate3d(-11vw,8vh,0) scale(.84); }
  }
  @keyframes luzC {
    0%,100% { transform: translate3d(0,0,0) scale(.94); }
    50%     { transform: translate3d(9vw,-10vh,0) scale(1.28); }
  }
  @keyframes luzBarrido {
    0%      { transform: rotate(14deg) translateX(-40vw); opacity: 0; }
    12%     { opacity: .9; }
    60%     { opacity: .9; }
    72%,100%{ transform: rotate(14deg) translateX(135vw); opacity: 0; }
  }
  /* En el celular la mitad de las capas: mismo aire, sin calentar el aparato. */
  @media (max-width: 900px) {
    .story-luz .l3, .story-luz .l4, .story-luz .l7 { display: none; }
    .story-luz .l1, .story-luz .l2, .story-luz .l5, .story-luz .l6 { filter: blur(44px); }
    .story-luz::after { animation-duration: 21s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .story-luz .luz { animation: none; }
    .story-luz::after { display: none; }
  }

  /* ══ Entrada del titular del anillo ═══════════════════════════════════════
     El texto ya no aparece: se materializa. Cada trozo —antetítulo, primer
     renglón, segundo renglón, bajada— entra desenfocado y desde abajo, con
     70 ms de diferencia entre uno y otro (--ent lleva el orden). El desenfoque
     es lo que lo hace ver caro: sin él es un fade cualquiera.

     Va con clase, no con :hover ni con scroll propio: el motor del anillo ya
     sabe cuándo las fichas terminaron de colocarse, y es ÉL quien pone .is-in.
     Así el texto nunca entra mientras algo le pasa por encima.

     El barrido de luz sobre el titular usa background-clip:text y sólo cruza
     una vez, al entrar. Se apaga solo (forwards) para no dejar una animación
     viva en cada repintado. */
  .mc-ent {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px) scale(.985);
    filter: blur(9px);
    will-change: opacity, transform, filter;
  }
  .is-in .mc-ent {
    animation: mcEnt .78s cubic-bezier(.2,.85,.3,1) forwards;
    animation-delay: calc(var(--ent, 0) * 70ms);
  }
  @keyframes mcEnt {
    0%   { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(9px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: none; filter: blur(0); }
  }
  /* Aquí vivía un barrido de luz sobre el titular con background-clip:text.
     Se quitó el 10-sep-2026: pintar el texto como relleno de un degradado
     obliga al navegador a cambiar de suavizado —deja el subpíxel y pasa a
     escala de grises— y el titular se ve más duro, como si fuera OTRA
     tipografía. No lo era: la familia y el peso nunca se tocaron. Si alguna vez
     se quiere recuperar el brillo, tiene que ir en una capa encima del texto
     (un pseudo-elemento con mix-blend-mode), nunca dentro del propio glifo. */
  @media (prefers-reduced-motion: reduce) {
    .mc-ent { opacity: 1; transform: none; filter: none; }
    .is-in .mc-ent { animation: none; }
  }

  /* ── El chip del anillo móvil es la burbuja, no una caja con un icono dentro ──
     Venía de cuando el icono era un cuadrito de color: el chip ponía la tarjeta
     blanca y el icono su fondo. Con la burbuja de vidrio esa tarjeta sobra y
     además la encajona; ahora el chip sólo posiciona y la burbuja ocupa todo. */
  .story-mcine .smc-chip {
    background: transparent;
    box-shadow: none;
    border-radius: 50%;
  }
  .story-mcine .smc-chip-ico {
    width: 100%; height: 100%;
  }
  .story-mcine .smc-chip-ico svg { width: 46%; height: 46%; }
  .story-mcine.is-densa .smc-chip { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .story-mcine.is-densa .smc-chip-ico { width: 100%; height: 100%; }
  .story-mcine.is-densa .smc-chip-ico svg { width: 46%; height: 46%; }
  /* La activa se marca con luz, no con un recuadro. */
  .story-mcine .smc-chip.is-active { box-shadow: none; }
  .story-mcine .smc-chip.is-active .smc-chip-ico {
    box-shadow:
      inset 0 -9px 18px -6px rgba(9,26,54,.30),
      inset 0 7px 15px -4px rgba(255,255,255,.92),
      inset 0 0 0 1px rgba(255,255,255,.65),
      0 0 0 3px rgba(255,255,255,.85),
      0 10px 26px -6px rgba(27,123,214,.65);
  }

/* ── Sección «Por dentro» (antes <style> junto a la sección) ─────────── */
    /* ══ Sección "Por dentro" ═══════════════════════════════════════════════
       Pensada primero para celular: en móvil el orden es título → captura →
       detalles, y la captura NO es la ventana completa de la aplicación (a
       390 px sería ilegible) sino un recorte del detalle que importa.       */
    .fx-section { background: #F6F8FB;
                  padding: 96px 24px 88px; overflow: hidden; }
    .fx-inner { max-width: 1160px; margin: 0 auto; }
    .fx-head { text-align: center; margin-bottom: 64px; }
    .fx-head .section-sub { margin: 0 auto; text-align: center; }

    .fx-row { display: grid; gap: 20px 56px; margin-bottom: 104px;
              grid-template-columns: 1fr 1.15fr;
              grid-template-areas: "titulo captura" "detalle captura";
              align-content: center; }
    .fx-row:last-child { margin-bottom: 0; }
    .fx-titulo, .fx-detalle, .fx-shot { min-width: 0; position: relative; z-index: 1; }
    .fx-titulo { grid-area: titulo; align-self: end; }
    .fx-detalle { grid-area: detalle; align-self: start; }
    .fx-shot { grid-area: captura; align-self: center; margin: 0; position: relative; }
    .fx-row.fx-flip { grid-template-areas: "captura titulo" "captura detalle"; }

    .fx-kicker { display: inline-flex; align-items: center; gap: 7px;
                 font-size: 12px; font-weight: 800; letter-spacing: .07em;
                 text-transform: uppercase; color: var(--brand-blue);
                 background: #EFF6FF; border-radius: 999px; padding: 5px 13px;
                 margin-bottom: 16px; }
    .fx-kicker.fx-k-green  { color: #15803D; background: #ECFDF3; }
    .fx-kicker.fx-k-violet { color: #6D28D9; background: #F5F3FF; }
    .fx-kicker.fx-k-orange { color: #C2410C; background: #FFF7ED; }
    .fx-kicker.fx-k-teal   { color: #0F766E; background: #F0FDFA; }
    .fx-kicker.fx-k-blue   { color: #1D4ED8; background: #EFF6FF; }

    .fx-titulo h3 { font-size: clamp(25px,2.7vw,34px); font-weight: 900; color: #0F172A;
                    letter-spacing: -.025em; line-height: 1.18; margin: 0 0 14px; }
    .fx-titulo h3 em { font-style: normal; color: var(--brand-blue);
                       position: relative; white-space: nowrap; }
    /* Subrayado que se dibuja cuando la fila entra en pantalla. */
    .fx-titulo h3 em::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .16em;
      background: rgba(27,123,214,.18); border-radius: 3px;
      transform: scaleX(0); transform-origin: left center;
      transition: transform .7s cubic-bezier(.22,1,.36,1) .45s;
    }
    .fx-row.fx-in .fx-titulo h3 em::after { transform: scaleX(1); }
    .fx-titulo p { font-size: 16.5px; line-height: 1.65; color: #475569; margin: 0; }

    .fx-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
    .fx-list li { display: flex; gap: 11px; align-items: flex-start;
                  font-size: 14.5px; line-height: 1.55; color: #334155; }
    .fx-list li svg { flex-shrink: 0; margin-top: 2px; }
    .fx-list b { color: #0F172A; font-weight: 700; }
    .fx-note { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: #64748B;
               border-left: 3px solid #DBEAFE; padding-left: 13px; }

    /* Los <img> llevan width/height para reservar el espacio y que la página no
       salte al cargar; sin height:auto el navegador respeta el alto del atributo. */
    .fx-shot img, .fx-phone img, .fx-paper img { height: auto; }
    .fx-shot .ss-browser-frame img { object-fit: contain; }
    .fx-shot-pair { display: grid; grid-template-columns: 190px 1fr; gap: 20px;
                    align-items: start; }
    .fx-phone { border-radius: 26px; border: 8px solid #0F172A; overflow: hidden;
                box-shadow: 0 18px 50px rgba(15,23,42,.24); background: #0F172A; }
    .fx-phone img { width: 100%; display: block; }
    .fx-paper { background: white; border-radius: 12px; overflow: hidden;
                box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 22px 60px rgba(27,123,214,.15);
                border: 1px solid #E6EDF6; }
    .fx-paper img { width: 100%; display: block; }

    /* Marco genérico para los recortes de celular */
    .fx-crop { background: white; border-radius: 14px; overflow: hidden;
               border: 1px solid #E3EBF5;
               box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 20px 56px rgba(27,123,214,.14); }
    .fx-crop img { width: 100%; display: block; }

    .fx-tag { position: absolute; z-index: 3; background: white; border-radius: 11px;
              padding: 9px 13px; font-size: 12px; font-weight: 700; color: #0F172A;
              box-shadow: 0 10px 32px rgba(15,23,42,.16);
              border: 1.5px solid rgba(27,123,214,.12);
              display: flex; align-items: center; gap: 7px; }
    .fx-tag-br { right: 14px; bottom: -14px; }
    .fx-tag-tl { left: 14px; top: -14px; }
    .fx-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
                  flex-shrink: 0; box-shadow: 0 0 0 0 rgba(22,163,74,.55);
                  animation: fxPulso 2.1s ease-out infinite; }
    @keyframes fxPulso {
      0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
      70%  { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
      100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    }

    /* ── Entrada al hacer scroll ───────────────────────────────────────────
       Solo opacidad y transform: son las dos propiedades que el navegador
       anima en la GPU, así que no tira los cuadros por segundo en un celular
       de gama media. */
    .fx-titulo, .fx-detalle, .fx-shot {
      opacity: 0; will-change: opacity, transform;
      transition: opacity .7s cubic-bezier(.22,1,.36,1),
                  transform .7s cubic-bezier(.22,1,.36,1);
    }
    .fx-titulo { transform: translateY(26px); }
    .fx-detalle { transform: translateY(26px); transition-delay: .12s; }
    .fx-shot { transform: translateY(38px) scale(.955); transition-delay: .06s; }
    .fx-row.fx-in .fx-titulo,
    .fx-row.fx-in .fx-detalle { opacity: 1; transform: translateY(0); }
    .fx-row.fx-in .fx-shot { opacity: 1; transform: translateY(0) scale(1); }

    .fx-list li { opacity: 0; transform: translateX(-10px);
                  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
    .fx-row.fx-in .fx-list li { opacity: 1; transform: none; }
    .fx-row.fx-in .fx-list li:nth-child(1) { transition-delay: .26s; }
    .fx-row.fx-in .fx-list li:nth-child(2) { transition-delay: .38s; }
    .fx-row.fx-in .fx-list li:nth-child(3) { transition-delay: .50s; }

    .fx-kicker { opacity: 0; transform: scale(.86); }
    .fx-row.fx-in .fx-kicker { opacity: 1; transform: scale(1);
      transition: opacity .45s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }

    /* Destello que barre la captura una sola vez, al entrar. */
    .fx-shot > .fx-brillo { position: absolute; inset: 0; border-radius: 16px;
      overflow: hidden; pointer-events: none; z-index: 4; opacity: 0; }
    .fx-row.fx-in .fx-shot > .fx-brillo { opacity: 1; }
    .fx-shot > .fx-brillo::before {
      content: ""; position: absolute; top: -60%; bottom: -60%; width: 42%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.62), transparent);
      transform: translateX(-160%) rotate(9deg);
    }
    .fx-row.fx-in .fx-shot > .fx-brillo::before {
      animation: fxBrillo 1.25s cubic-bezier(.3,0,.2,1) .55s 1 both;
    }
    @keyframes fxBrillo { to { transform: translateX(330%) rotate(9deg); } }

    /* Flotación lenta y continua: da vida sin distraer de la lectura. */
    .fx-phone, .fx-paper { animation: fxFlota 7.5s ease-in-out infinite; }
    .fx-shot-pair .ss-browser-frame { animation: fxFlota 8.5s ease-in-out infinite reverse; }
    @keyframes fxFlota { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }

    /* En escritorio, el ratón levanta la captura. */
    @media (min-width: 901px) and (hover: hover) {
      .fx-shot .ss-browser-frame, .fx-shot .fx-crop, .fx-shot .fx-paper {
        transition: transform .4s cubic-bezier(.34,1.3,.64,1), box-shadow .4s ease; }
      .fx-shot:hover .ss-browser-frame, .fx-shot:hover .fx-crop, .fx-shot:hover .fx-paper {
        transform: translateY(-8px) scale(1.015);
        box-shadow: 0 0 0 2px rgba(96,165,250,.55), 0 34px 90px rgba(27,123,214,.22); }
    }


    /* Paralaje ligado al scroll, solo donde es seguro: los recortes de celular
       no flotan ni reaccionan al ratón, así que nada más compite por transform.
       @supports lo deja fuera en los navegadores que no lo implementan. */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .fx-shot .fx-crop {
          animation: fxParalaje linear both;
          animation-timeline: view();
          animation-range: entry 8% exit 92%;
        }
      }
    }
    @keyframes fxParalaje {
      from { transform: translateY(22px); }
      to   { transform: translateY(-22px); }
    }


    /* Cada función con su propio fondo: divide la lectura y evita que seis
       bloques seguidos se sientan el mismo. El color va en una capa detrás,
       con los bordes difuminados, para que no se vean franjas duras. */
    .fx-row { position: relative; padding: 48px 40px; border-radius: 32px; }
    .fx-row::before {
      content: ""; position: absolute; inset: 0; border-radius: 32px; z-index: 0;
      opacity: 0; transform: scale(.97);
      transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
    }
    .fx-row.fx-in::before { opacity: 1; transform: scale(1); }
    .fx-row--0::before { background: linear-gradient(155deg,#FFF6E6 0%,#FCECD2 100%); box-shadow: inset 0 0 0 1px #F2DFBC; }
    .fx-row--1::before { background: linear-gradient(155deg,#EAFAF1 0%,#D8F3E4 100%); box-shadow: inset 0 0 0 1px #BFE9D1; }
    .fx-row--2::before { background: linear-gradient(155deg,#F1EEFE 0%,#E6DEFC 100%); box-shadow: inset 0 0 0 1px #D6CBF9; }
    .fx-row--3::before { background: linear-gradient(155deg,#FFF1E4 0%,#FCE3CE 100%); box-shadow: inset 0 0 0 1px #F5D2B4; }
    .fx-row--4::before { background: linear-gradient(155deg,#FFEFEF 0%,#FCDFDF 100%); box-shadow: inset 0 0 0 1px #F7C6C6; }
    .fx-row--5::before { background: linear-gradient(155deg,#E8F8F6 0%,#D4F0EB 100%); box-shadow: inset 0 0 0 1px #BAE5DD; }
    .fx-row--6::before { background: linear-gradient(155deg,#ECF3FE 0%,#DAE8FC 100%); box-shadow: inset 0 0 0 1px #C3D9F7; }
    .fx-row--7::before { background: linear-gradient(155deg,#F1FBEA 0%,#E1F4D2 100%); box-shadow: inset 0 0 0 1px #CDE9B6; }
    .fx-row--8::before { background: linear-gradient(155deg,#EDF1FB 0%,#DDE4F6 100%); box-shadow: inset 0 0 0 1px #C6D2EE; }

    @media (max-width: 900px) {
      .fx-row { padding: 30px 18px; border-radius: 24px; }
      .fx-row::before { border-radius: 24px; }
    }
    /* Entrada más marcada: recorre más camino y las viñetas entran una por una
       con más separación, para que se note que la sección se arma al llegar. */
    .fx-titulo { transform: translateY(42px); }
    .fx-detalle { transform: translateY(42px); transition-delay: .16s; }
    .fx-shot { transform: translateY(56px) scale(.92); transition-delay: .08s; }
    .fx-row.fx-in .fx-shot { transition-duration: .85s; }

    /* ── Carrusel de documentos (solo texto, pesa nada) ────────────────────── */
    .fx-marquee { margin-top: 22px; position: relative; overflow: hidden; max-width: 100%;
                  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .fx-marquee-pista { display: flex; gap: 9px; width: max-content;
                        animation: fxDesliza 26s linear infinite; }
    .fx-marquee:hover .fx-marquee-pista { animation-play-state: paused; }
    .fx-chip { flex-shrink: 0; background: white; border: 1px solid #E3EBF5;
               border-radius: 999px; padding: 7px 14px; font-size: 12.5px;
               font-weight: 600; color: #334155; white-space: nowrap;
               box-shadow: 0 2px 8px rgba(15,23,42,.05); }
    @keyframes fxDesliza { to { transform: translateX(-50%); } }

    /* ── Celular ───────────────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .fx-section { padding: 60px 18px 56px; }
      .fx-row, .fx-row.fx-flip {
        grid-template-columns: 1fr; gap: 22px; margin-bottom: 68px;
        grid-template-areas: "titulo" "captura" "detalle"; }
      .fx-head { margin-bottom: 40px; }
      .fx-titulo h3 { font-size: clamp(23px,6.4vw,30px); }
      .fx-titulo p { font-size: 15.5px; }
      .fx-shot-pair { grid-template-columns: 132px 1fr; gap: 12px; align-items: center; }
      .fx-tag { font-size: 11px; padding: 7px 11px; }
      .fx-tag-br { right: 8px; bottom: -12px; }
      .fx-tag-tl { left: 8px; top: -12px; }
      /* La entrada es más corta: en móvil se hace scroll rápido y una animación
         larga se ve a medias. */
      .fx-titulo, .fx-detalle { transform: translateY(18px); }
      .fx-shot { transform: translateY(24px) scale(.975); }
      .fx-row.fx-in .fx-list li:nth-child(1) { transition-delay: .16s; }
      .fx-row.fx-in .fx-list li:nth-child(2) { transition-delay: .24s; }
      .fx-row.fx-in .fx-list li:nth-child(3) { transition-delay: .32s; }
    }

    /* Solo-móvil / solo-escritorio para intercambiar la captura. */
    .fx-solo-movil { display: none; }
    @media (max-width: 700px) {
      .fx-solo-movil { display: block; }
      .fx-solo-escritorio { display: none; }
      .fx-shot-pair { grid-template-columns: 1fr; gap: 16px; }
      .fx-phone { max-width: 210px; margin: 0 auto; }
    }

    /* Quien pidió menos movimiento, no ve movimiento. */
    @media (prefers-reduced-motion: reduce) {
      .fx-titulo, .fx-detalle, .fx-shot, .fx-list li, .fx-kicker {
        opacity: 1 !important; transform: none !important; transition: none !important; }
      .fx-phone, .fx-paper, .fx-shot-pair .ss-browser-frame,
      .fx-marquee-pista, .fx-tag-dot { animation: none !important; }
      .fx-shot > .fx-brillo { display: none; }
      .fx-titulo h3 em::after { transform: scaleX(1); transition: none; }
    }

/* ── FAQ (antes <style> junto a la sección) ─────────────────────────── */
  .faq-item { border-bottom:1px solid #E2E8F0; }
  .faq-item:first-child { border-top:1px solid #E2E8F0; }
  .faq-q {
    width:100%; display:flex; justify-content:space-between; align-items:center;
    gap:16px; padding:20px 4px; background:none; border:none; cursor:pointer;
    font-size:15.5px; font-weight:700; color:#0F172A; text-align:left;
    font-family:inherit; line-height:1.4;
  }
  .faq-q:hover { color:var(--brand-blue); }
  .faq-arrow { flex-shrink:0; transition:transform .25s; color:#64748B; }
  .faq-q[aria-expanded="true"] .faq-arrow { transform:rotate(180deg); color:var(--brand-blue); }
  .faq-a {
    display:none; padding:0 4px 20px; font-size:14.5px; color:#475569;
    line-height:1.7;
  }
  .faq-a.faq-open { display:block; }

/* ── CTA fija de celular (antes <style> junto al elemento) ──────────── */
  .mobile-sticky-cta { display: none; }
  @media (max-width: 768px) {
    .mobile-sticky-cta {
      position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200;
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 1px solid #E2E8F0; border-radius: 14px; padding: 8px;
      box-shadow: 0 8px 30px rgba(15,23,42,.18);
      transform: translateY(160%); opacity: 0; pointer-events: none;
      transition: transform .35s cubic-bezier(.22,.9,.3,1), opacity .35s;
    }
    .mobile-sticky-cta.msc-show { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .msc-btn {
      flex: 1; text-align: center; padding: 13px 18px;
      background: linear-gradient(135deg, var(--brand-blue), var(--brand-green-dark));
      color: #fff; font-size: 15px; font-weight: 800; border-radius: 10px;
      text-decoration: none; box-shadow: 0 4px 14px rgba(27,123,214,.32);
    }
    /* 15-sep-2026: la equis se fue. Francisco: «quita la opción de eliminar la
       ventana flotante y en su lugar, con un buen espacio, un botón para que le
       escriban a Olivia». Cerrar el CTA no le servía a nadie; una duda sin
       contestar sí cuesta un registro. 46 px de lado para el pulgar. */
    .mobile-sticky-cta { gap: 12px; }
    .msc-wa {
      flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      background: #25D366; color: #fff; text-decoration: none;
      box-shadow: 0 6px 16px rgba(37,211,102,.38);
    }
    .msc-wa svg { width: 26px; height: 26px; }
    /* Reserve space so the floating bar never hides the footer's last line. */
    .footer-v3 { padding-bottom: 88px; }
  }

/* ── Botón flotante de WhatsApp (antes <style> junto al elemento) ───── */
  .wa-float {
    position: fixed; right: 16px; bottom: 18px; z-index: 150;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(37,211,102,.5);
    transition: transform .2s ease, opacity .25s ease, bottom .35s cubic-bezier(.22,.9,.3,1);
  }
  .wa-float:hover { transform: scale(1.08); }
  .wa-float svg { width: 31px; height: 31px; }
  /* On mobile, while the sticky CTA is showing, hide the float so it never
     covers the pricing/plan buttons (it reappears when the bar goes away). */
  .wa-float.wa-raised { opacity: 0; pointer-events: none; transform: scale(.6); }

  /* ══════════════════════════════════════════════════════════════════════
     LA RUTA — el día del consultorio como línea de tiempo (15-sep-2026)

     Sustituye al cine con scroll fijado. Francisco: «que vaya una card a la
     derecha y otra a la izquierda, así la línea de tiempo se va moviendo en
     curvas entre ellas; la línea debe ser una flecha que va avanzando y
     terminar en "Tu próxima consulta puede terminar sin papeleo"».

     TRES ESTADOS, y los tres tienen que leerse:
       · sin JavaScript → `.ruta-viva` nunca se pone: las cards se ven todas y
         la línea la pinta `.ruta-pasos::before` (recta, tenue). Nada se
         esconde detrás de una animación que no va a llegar.
       · con JS → el SVG toma el relevo, la flecha avanza con el scroll y cada
         card aparece cuando la flecha pasa su hito.
       · `prefers-reduced-motion` → la línea sale dibujada entera y las cards
         visibles; la flecha no persigue a nadie.

     El hito NO va en el centro: va pegado al lado de su card (columna del
     medio, `justify-self` a un extremo u otro). Ahí está la curva — si los
     once hitos compartieran la x, el JS dibujaría una recta.
     ══════════════════════════════════════════════════════════════════════ */
  .ruta { position: relative; padding: 92px 20px 24px; background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%); }
  .ruta-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
  .ruta-head .section-heading em { font-style: normal; color: var(--brand-blue); }
  .ruta-sub { font-size: 16px; line-height: 1.55; color: #475569; margin: 0; }

  /* El punto de partida: el antes y el después que ya vivían dentro del cine. */
  .ruta-antes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    max-width: 880px; margin: 0 auto 10px;
  }

  .ruta-lienzo { position: relative; max-width: 1060px; margin: 0 auto; padding: 44px 0 40px; }

  /* La línea de respaldo (sin JS). Se apaga en cuanto el SVG toma el relevo. */
  .ruta-pasos::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 3px; margin-left: -1.5px; border-radius: 2px;
    background: linear-gradient(to bottom, transparent, #DBEAFE 6%, #DBEAFE 94%, transparent);
  }
  .ruta-viva .ruta-pasos::before { display: none; }

  .ruta-svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none; z-index: 0;
  }
  .ruta-riel  { stroke: #DBEAFE; stroke-width: 3; stroke-linecap: round; }
  /* El trazo recorrido toma el color del paso en el que va la flecha: la
     estela cambia de tono al pasar de una card a la siguiente, y se ve de un
     vistazo en cuál va. Es un solo `path`, así que el color entra con
     transición larga y se lee como un degradado en el tiempo, no como un
     parpadeo. */
  .ruta-linea { stroke: var(--c-flecha, var(--brand-blue)); stroke-width: 3.5; stroke-linecap: round; }
  .ruta-flecha { opacity: 0; transition: opacity .35s ease; }
  .ruta-viva .ruta-flecha { opacity: 1; }
  /* 15-sep-2026 (Francisco): «la flecha ponla más grande». De 16×16 a 26×26,
     con el halo a juego. Toma el color del paso por el que va pasando —lo pone
     el JS en `--c-flecha`—, así que la punta y la card que despierta son del
     mismo color y se ve que una cosa causa la otra. */
  .ruta-flecha-punta {
    fill: var(--c-flecha, var(--brand-blue));
    transition: fill .5s ease;
  }
  .ruta-flecha-halo {
    fill: var(--c-flecha, var(--brand-blue)); opacity: .18;
    transition: fill .5s ease;
  }
  .ruta-linea { transition: stroke .55s cubic-bezier(.22,1,.3,1); }

  .ruta-pasos { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: 14px; }
  .ruta-paso { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; }

  .ruta-hito {
    grid-column: 2; width: 17px; height: 17px; border-radius: 50%;
    background: #fff; border: 3px solid #DBEAFE;
    display: grid; place-items: center;
    transition: border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
  }
  .ruta-izq .ruta-hito { justify-self: start; }   /* pegado a su card, que está a la izquierda */
  .ruta-der .ruta-hito { justify-self: end; }
  .ruta-hito i { width: 6px; height: 6px; border-radius: 50%; background: #CBD5E1; transition: background .45s ease; }
  .ruta-paso.ruta-vista .ruta-hito { border-color: var(--c); transform: scale(1.14); }
  .ruta-paso.ruta-vista .ruta-hito i { background: var(--c); }

  /* La card nace BLANCA y se pinta de su color cuando la flecha la toca
     (15-sep-2026, Francisco: «que cambien de blanco a color justo cuando la
     flecha pasa por ellos […] el cambio debe ser transitorio para que se vea
     como un buen efecto»).

     Los tres valores del color los pone la plantilla en cada `<li>`
     (`--c`, `--c-suave`, `--c-borde`); aquí sólo se decide CUÁNDO. La
     transición es larga a propósito —.65 s— y el fondo entra un pelín después
     que el borde: así se lee como que el color «se derrama» desde la orilla y
     no como que alguien apagó y prendió la luz. */
  .ruta-card {
    background: #fff; border: 1px solid #E2E8F0; border-radius: 16px;
    padding: 15px 17px; max-width: 380px;
    box-shadow: 0 12px 32px -20px rgba(11,18,32,.42);
    transition: background-color .65s cubic-bezier(.22,1,.3,1) .06s,
                border-color .5s cubic-bezier(.22,1,.3,1),
                box-shadow .65s cubic-bezier(.22,1,.3,1);
  }
  .ruta-paso.ruta-vista .ruta-card {
    background-color: var(--c-suave);
    border-color: var(--c-borde);
    box-shadow: 0 16px 38px -22px color-mix(in srgb, var(--c) 55%, transparent);
  }
  .ruta-izq .ruta-card { grid-column: 1; margin-left: auto; }
  .ruta-der .ruta-card { grid-column: 3; margin-right: auto; }

  /* ── Escritorio: el texto de un lado y la captura del otro ────────────────
     15-sep-2026, Francisco: «que el texto esté por un lado de la línea de
     tiempo y la imagen del otro, manteniendo el zigzagueo […] está quedando
     demasiado pequeño el espacio de cada función y es difícil de ver y leer».

     El truco es `display: contents` sobre el `<article>`: deja de ser una caja
     y sus dos hijos —texto y captura— pasan a ser casillas de la rejilla del
     `<li>`, una a cada lado. En celular el `<article>` sigue siendo la
     tarjeta de siempre. Mismo HTML, dos lecturas.

     El zigzag no se toca: lo marca el hito, que sigue pegado al lado del
     texto, y la curva la compone el JS midiendo esos hitos. */
  @media (min-width: 901px) {
    .ruta-lienzo { max-width: 1240px; }
    .ruta-paso { grid-template-columns: 1fr 150px 1fr; align-items: center; }
    .ruta-card { display: contents; }
    .ruta-texto, .ruta-shot {
      background: #fff; border: 1px solid #E2E8F0; border-radius: 18px;
      box-shadow: 0 14px 36px -22px rgba(11,18,32,.45);
      transition: background-color .65s cubic-bezier(.22,1,.3,1) .06s,
                  border-color .5s cubic-bezier(.22,1,.3,1),
                  box-shadow .65s cubic-bezier(.22,1,.3,1);
    }
    .ruta-texto { padding: 22px 24px; max-width: 470px; }
    .ruta-shot { margin-top: 0; max-width: 500px; aspect-ratio: 16 / 10; }
    /* LOS TRES EN LA MISMA FILA (17-sep-2026).

       Francisco: «algunas imágenes las veo bien posicionadas con su función
       pero otras las veo demasiado lejos […] son difíciles de entender de qué
       imagen va con qué feature».

       La causa era la colocación automática de la rejilla. El orden del HTML
       es hito, texto, captura, y cada uno pide su columna: el hito la 2, y el
       texto y la captura la 1 o la 3 según el lado. Con la fila en `auto`, el
       algoritmo coloca de izquierda a derecha y hacia abajo, así que pedir una
       columna que ya quedó DETRÁS del cursor obliga a bajar de fila:

         · pasos de la IZQUIERDA — hito(2), texto(1)→fila 2, captura(3)→fila 2.
           Los dos abajo, juntos y centrados. Se veían bien.
         · pasos de la DERECHA  — hito(2), texto(3)→fila 1, captura(1)→fila 2.
           El texto arriba y la imagen en la fila siguiente.

       Medido: en los pasos de la derecha la imagen quedaba 213 px por debajo
       del centro de su texto, y esos pasos median 415 px de alto contra 279
       los de la izquierda — 816 px de hueco muerto repartidos por la sección.
       Fijando la fila, `align-items: center` hace el resto y deja de depender
       de por qué lado toque. */
    .ruta-hito, .ruta-texto, .ruta-shot { grid-row: 1; }

    /* Y el vaivén del hito, ESTRECHADO. De los hitos sale la curva, así que su
       separación lateral decide la pendiente de la línea. Al juntar el texto y
       la imagen en una sola fila, los pasos pasaron de 415/279 px de alto a
       262: la caída entre hitos bajó de 375 a 290 px mientras el vaivén seguía
       siendo de 133, y la línea se empinó — pendiente de 2.82:1 a 2.18:1, con
       la tangente llegando a 42.5° de la vertical contra 35.3° antes.
       Francisco: «creo que rompiste algo con la línea verde».

       15 px de margen a cada lado dejan el vaivén en 103 px, que con la caída
       nueva devuelve la MISMA pendiente. La sección sigue siendo ~1,000 px más
       corta; lo que no cambia es cómo se ve la línea. Va aquí dentro y no
       fuera, porque en celular los hitos van todos al mismo lado. */
    .ruta-hito { margin-inline: 15px; }

    /* Y el desfase que SÍ se quiere: la imagen un poco más abajo que su texto,
       igual en los doce pasos. Francisco: «no tienen que estar 100% alineados,
       de hecho me gustaría que estén desfasados verticalmente un poquito por
       estética». Va con `top` y no con `transform` porque el `transform` de la
       captura ya lo usa su animación de entrada y se pisarían. */
    .ruta-shot { position: relative; top: 22px; }

    .ruta-izq .ruta-texto { grid-column: 1; margin-left: auto; }
    .ruta-izq .ruta-shot  { grid-column: 3; margin-right: auto; }
    .ruta-der .ruta-shot  { grid-column: 1; margin-left: auto; }
    .ruta-der .ruta-texto { grid-column: 3; margin-right: auto; }
    .ruta-t { font-size: 21px; }
    .ruta-d { font-size: 15px; line-height: 1.55; }
    .ruta-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
    .ruta-ic svg { width: 20px; height: 20px; }
    .ruta-fase { font-size: 11.5px; }
    .ruta-pasos { gap: 28px; }
    /* El color va a las DOS piezas: leen como una sola función. */
    .ruta-paso.ruta-vista .ruta-texto,
    .ruta-paso.ruta-vista .ruta-shot {
      background-color: var(--c-suave); border-color: var(--c-borde);
      box-shadow: 0 20px 46px -24px color-mix(in srgb, var(--c) 55%, transparent);
    }
    /* Entrada con perspectiva: cada mitad llega girando desde SU lado. */
    .ruta-viva .ruta-pasos { perspective: 1400px; }
    .ruta-viva .ruta-texto,
    .ruta-viva .ruta-shot {
      opacity: 0;
      transition: opacity .7s cubic-bezier(.22,1,.3,1),
                  transform .7s cubic-bezier(.22,1,.3,1),
                  background-color .65s cubic-bezier(.22,1,.3,1) .06s,
                  border-color .5s cubic-bezier(.22,1,.3,1),
                  box-shadow .65s cubic-bezier(.22,1,.3,1);
    }
    /* La captura entra un pelín después que el texto: primero se lee qué es. */
    .ruta-viva .ruta-shot { transition-delay: .12s, .12s, .06s, 0s, 0s; }
    .ruta-viva .ruta-izq .ruta-texto,
    .ruta-viva .ruta-der .ruta-shot { transform: translateX(-38px) rotateY(10deg) scale(.96); }
    .ruta-viva .ruta-der .ruta-texto,
    .ruta-viva .ruta-izq .ruta-shot { transform: translateX( 38px) rotateY(-10deg) scale(.96); }
    .ruta-viva .ruta-paso.ruta-vista .ruta-texto,
    .ruta-viva .ruta-paso.ruta-vista .ruta-shot { opacity: 1; transform: none; }
    /* Con las mitades repartidas, la tarjeta del móvil no pinta nada aquí. */
    .ruta-viva .ruta-card { opacity: 1; transform: none; }
  }

  .ruta-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
  .ruta-ic {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
    background: #F1F5F9; color: #94A3B8;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .5s cubic-bezier(.22,1,.3,1),
                color .5s cubic-bezier(.22,1,.3,1),
                transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  /* El icono es lo único que se llena a fondo: da el golpe de color sin
     meterse debajo del texto. El rebote corto marca el momento del paso. */
  .ruta-paso.ruta-vista .ruta-ic { background: var(--c); color: #fff; transform: scale(1.08); }
  .ruta-paso.ruta-vista .ruta-fase { color: var(--c); }
  .ruta-ic svg { width: 17px; height: 17px; }
  .ruta-fase { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94A3B8; transition: color .5s ease; }
  .ruta-n { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #CBD5E1; }
  .ruta-t { font-size: 17px; font-weight: 800; color: #0F172A; letter-spacing: -.022em; line-height: 1.24; margin: 0 0 6px; }
  .ruta-t .fp-em   { color: var(--brand-blue); }
  .ruta-t .fp-em-g { color: #2E9E22; }
  .ruta-d { font-size: 13.5px; line-height: 1.5; color: #475569; margin: 0; }
  .ruta-shot {
    margin-top: 12px; border-radius: 10px; overflow: hidden;
    border: 1px solid #EEF2F7; background: #F8FAFC; aspect-ratio: 2 / 1;
  }
  .ruta-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

  /* La entrada de cada card: sólo cuando el JS está manejando (`.ruta-viva`),
     para que sin él no quede una página de cards invisibles. */
  /* OJO con esta regla: su `transition` es un ATAJO y pisa entera la de
     `.ruta-card` de arriba, que es donde viven las del color. El 15-sep-2026
     el color entró de golpe por exactamente esto —se vio en la medición, no
     en la lectura— y Francisco lo había pedido «transitorio para que se vea
     como un buen efecto». Si añades una propiedad animada a la card, va aquí
     TAMBIÉN, no sólo arriba. */
  .ruta-viva .ruta-card {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.16,1,.3,1),
                transform .6s cubic-bezier(.16,1,.3,1),
                background-color .65s cubic-bezier(.22,1,.3,1) .06s,
                border-color .5s cubic-bezier(.22,1,.3,1),
                box-shadow .65s cubic-bezier(.22,1,.3,1);
  }
  .ruta-viva .ruta-izq .ruta-card { transform: translate(-20px, 26px) scale(.985); }
  .ruta-viva .ruta-der .ruta-card { transform: translate( 20px, 26px) scale(.985); }
  .ruta-viva .ruta-paso.ruta-vista .ruta-card { opacity: 1; transform: none; }

  /* ── El choque con «Tu próxima consulta puede terminar sin papeleo» ──────
     La flecha llega al final y el CTA reacciona: una onda que sale del punto
     donde aterriza, el distintivo y el título subiendo, y un barrido de luz
     por encima del degradado. Se dispara UNA vez (la clase no se quita). */
  /* Centrada en el BOTÓN (16-sep-2026): estaba anclada al tope del cierre y
     la onda salía a 350 px de donde la flecha aterriza. */
  /* EN VERDE, no en azul de marca (16-sep-2026). Francisco: «la animación de
     tocar el botón genera ondas azules que no se ven porque el fondo es azul».
     Era literal: `var(--brand-blue)` sobre el degradado azul del cierre.

     El verde es el de MARCA aclarado hacia el blanco para que encienda sobre
     el azul oscuro, y NO «el color del último paso de la ruta», que fue lo
     primero que probé. Medido: ese último color depende de si la bandera de
     consultorios está encendida —con ella son once pasos y el último es lima
     (#65A30D); sin ella son diez y el último es AZUL (#0369A1)—. Atar la onda
     a la paleta la devolvería a azul sobre azul, que es exactamente el defecto
     que Francisco reportó, el día que alguien apague esa bandera.
     El `--onda` suelto de arriba es el respaldo para navegadores sin
     `color-mix`: si no lo entienden, se quedan con el verde fijo. */
  /* Y con la FORMA del botón, no un círculo de 26 px en su centro. Eso fue lo
     segundo que hacía invisible la onda, y sólo se vio mirando los píxeles
     pintados: un círculo de 26 px dentro de un botón de 219x54 queda TAPADO
     por el propio botón hasta que crece nueve veces, o sea hasta el último
     instante de la animación. Naciendo del contorno del botón se ve desde el
     primer fotograma, y además se lee como lo que es: el botón pulsado. */
  .ruta-onda {
    position: absolute; inset: 0; border-radius: inherit;
    opacity: 0; pointer-events: none;
    --onda: #9BE28E;
    --onda: color-mix(in srgb, var(--brand-green, #54B948) 55%, #fff);
    border: 2.5px solid var(--onda);
    box-shadow: 0 0 22px var(--onda);
  }
  /* Tres golpes, no uno. El botón se hunde y rebota TRES veces
     (`rutaBotonClick`) y la onda salía una sola: parecía que la primera
     pulsación era de verdad y las otras dos de mentira. Ahora sale un aro con
     CADA pulsación —mismo 1.7s, mismo retraso de arranque— y el aro nace en
     el 26% del ciclo, que es el fotograma en el que el botón toca fondo. */
  .cta-v3.ruta-impacto .ruta-onda {
    animation: rutaOnda 1.7s 1.05s cubic-bezier(.22,1,.3,1) 3;
  }
  /* El fogonazo del aterrizaje: una sola vez, al instante, para que el
     impacto de la flecha tenga su propio acuse antes de que empiecen las
     pulsaciones del botón. Es relleno, no aro. */
  .cta-v3.ruta-impacto .ruta-onda::before {
    content: ""; position: absolute; inset: -10px; border-radius: inherit;
    background: radial-gradient(ellipse at center, var(--onda) 0%, transparent 62%);
    animation: rutaFogonazo .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  /* El segundo aro, más fino y más blanco, medio latido por detrás: dos
     círculos desfasados se leen como una onda expandiéndose, uno solo se lee
     como un círculo creciendo. */
  .cta-v3.ruta-impacto .ruta-onda::after {
    content: ""; position: absolute; inset: -4px; border-radius: inherit;
    border: 1.5px solid rgba(255,255,255,.6);
    animation: rutaOnda 1.7s 1.19s cubic-bezier(.22,1,.3,1) 3;
  }
  /* El aro nace en el 26% del ciclo, que es el fotograma en el que el botón
     toca fondo en `rutaBotonClick`: el golpe y la onda ocurren a la vez. */
  @keyframes rutaOnda {
    0%, 20% { opacity: 0;   transform: scale(1); }
    26%     { opacity: .95; transform: scale(1.02); }
    64%     { opacity: .38; }
    100%    { opacity: 0;   transform: scale(3.1); }
  }
  @keyframes rutaFogonazo {
    0%   { opacity: .75; transform: scale(.9); }
    100% { opacity: 0;   transform: scale(2.6); }
  }
  .cta-v3.ruta-impacto .cta-v3-badge { animation: rutaSube .75s .06s backwards cubic-bezier(.16,1,.3,1); }
  .cta-v3.ruta-impacto h2            { animation: rutaSube .75s .14s backwards cubic-bezier(.16,1,.3,1); }
  .cta-v3.ruta-impacto .cta-v3-actions { animation: rutaSube .75s .24s backwards cubic-bezier(.16,1,.3,1); }
  @keyframes rutaSube {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* El barrido de luz. Va en SU PROPIO elemento y no en `.cta-v3::after`:
     ese pseudo-elemento ya existe desde antes, es un orbe de 400 px que flota
     con `ctaOrb2`, y escribirle encima lo habría dejado a pantalla completa y
     sin su deriva. Un `::after` ocupado no se toma prestado. */
  .ruta-barrido {
    position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
    transform: translateX(-100%);
  }
  .cta-v3.ruta-impacto .ruta-barrido {
    opacity: 1; animation: rutaBarrido 1.25s .1s cubic-bezier(.22,1,.3,1) forwards;
  }
  @keyframes rutaBarrido { to { transform: translateX(100%); } }

  /* ── La cola: la línea entra en el cierre y toca el botón ────────────────
     16-sep-2026, Francisco: «la flecha verde tiene que tocar el botón de
     empezar gratis, debe pasar por atrás de las letras para no tapar nada
     hasta llegar al botón».

     z-index 0 contra el 1 de `.cta-v3-inner`: la línea va por DEBAJO del
     distintivo, el título y el subtítulo, y sólo asoma en los huecos. El color
     lo hereda de `--c-flecha`, que el JS pone con el tono del último paso de
     la ruta — por eso llega verde, que es el color de la card 11. */
  .cta-cola {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; overflow: visible;
    opacity: 0; transition: opacity .4s ease;
  }
  .cta-cola.cta-cola-viva { opacity: 1; }
  .cta-cola-riel  { stroke: rgba(255,255,255,.16); stroke-width: 3; stroke-linecap: round; }
  .cta-cola-linea {
    stroke: var(--c-flecha, #86E574); stroke-width: 3.5; stroke-linecap: round;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-flecha, #86E574) 70%, transparent));
  }
  .cta-cola-punta { fill: var(--c-flecha, #86E574); filter: drop-shadow(0 0 7px rgba(0,0,0,.25)); }
  .cta-cola-halo {
    fill: var(--c-flecha, #86E574); opacity: .2;
    transform-box: fill-box; transform-origin: center;   /* mismo motivo que en la ruta */
    animation: rutaHalo 1.9s ease-in-out infinite;
  }

  /* ── El botón, cuando la flecha lo toca ──────────────────────────────────
     15-sep-2026, Francisco: «que haga efecto de click en el botón para
     invitar a los usuarios a dar click».

     (El 15 esto lo disparaba un remate blanco encima del botón, porque la
     línea se quedaba en el borde de la sección. El 16 Francisco pidió que
     llegara la de verdad —«debe pasar por atrás de las letras hasta llegar al
     botón»— y el remate se fue: lo dispara la cola al tocarlo.)

     Se hunde y rebota, con una onda que sale de él. Tres veces y para —
     insistir más ya es un botón nervioso. */
  .cta-v3.ruta-impacto .cta-v3-btn {
    animation: rutaBotonClick 1.7s 1.05s cubic-bezier(.22,1,.3,1) 3;
  }
  @keyframes rutaBotonClick {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
    26%      { transform: scale(.955); box-shadow: 0 5px 16px rgba(0,0,0,.3); }
    44%      { transform: scale(1.035); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
    62%      { transform: scale(1); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
  }
  .cta-v3-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid rgba(255,255,255,.9); opacity: 0; pointer-events: none;
  }
  .cta-v3.ruta-impacto .cta-v3-btn::after {
    animation: rutaBotonOnda 1.7s 1.05s cubic-bezier(.22,1,.3,1) 3;
  }
  @keyframes rutaBotonOnda {
    0%   { opacity: 0; transform: scale(1); }
    26%  { opacity: .85; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.42); }
  }
  /* Si el visitante ya lo está tocando, se le deja en paz: su interacción
     manda sobre la invitación. */
  .cta-v3.ruta-impacto .cta-v3-btn:hover,
  .cta-v3.ruta-impacto .cta-v3-btn:focus-visible { animation: none; }
  .cta-v3.ruta-impacto .cta-v3-btn:hover::after,
  .cta-v3.ruta-impacto .cta-v3-btn:focus-visible::after { animation: none; }

  /* ══════════════════════════════════════════════════════════════════════
     LA CAPA MÁGICA (15-sep-2026, Francisco: «ponle muchas animaciones, muchos
     efectos, quiero una landing mágica y tecnológica»).

     Las reglas que me puse para que «mucho» no se vuelva «mareado»:

     · Todo lo que se mueve lo hace con `transform` y `opacity` — nada que
       obligue al navegador a recalcular la página. Lo único con `filter` es el
       resplandor de la línea, que es UN elemento.
     · Lo que late sin parar se limita al paso ACTIVO y al fondo. Once cards
       latiendo a la vez es ruido, no magia.
     · Cada efecto arranca cuando la flecha toca su paso: el movimiento cuenta
       algo («vas aquí»), no decora.
     · Todo se apaga entero con `prefers-reduced-motion`, al final del bloque.
     ══════════════════════════════════════════════════════════════════════ */

  /* 1 · El fondo: rejilla técnica que deriva y dos luces que respiran. */
  .ruta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(rgba(27,123,214,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(27,123,214,.055) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 70% at 50% 40%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 70% at 50% 40%, #000 35%, transparent 78%);
    animation: rutaRejilla 24s linear infinite;
  }
  @keyframes rutaRejilla { to { background-position: 46px 46px, 46px 46px; } }
  .ruta::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(38% 26% at 18% 22%, rgba(27,123,214,.13), transparent 70%),
      radial-gradient(34% 24% at 84% 62%, rgba(84,185,72,.12), transparent 70%);
    animation: rutaLuces 14s ease-in-out infinite alternate;
  }
  @keyframes rutaLuces {
    from { transform: translate3d(0,0,0) scale(1); opacity: .85; }
    to   { transform: translate3d(2%, -1.5%, 0) scale(1.08); opacity: 1; }
  }
  .ruta-head, .ruta-antes, .ruta-lienzo { position: relative; z-index: 1; }

  /* 2 · El hito: onda al llegar la flecha, y latido mientras es el último. */
  .ruta-hito { position: relative; }
  .ruta-hito::before, .ruta-hito::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--c, var(--brand-blue)); opacity: 0;
  }
  .ruta-paso.ruta-vista .ruta-hito::before { animation: rutaOndaHito .95s cubic-bezier(.22,1,.3,1); }
  .ruta-paso.ruta-vista .ruta-hito::after  { animation: rutaOndaHito .95s .22s cubic-bezier(.22,1,.3,1); }
  @keyframes rutaOndaHito {
    0%   { opacity: .9; transform: scale(.7); }
    100% { opacity: 0;  transform: scale(3.4); }
  }
  .ruta-paso.ruta-activo .ruta-hito { animation: rutaLatido 2.1s ease-in-out infinite; }
  @keyframes rutaLatido {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
    55%      { box-shadow: 0 0 0 9px transparent; }
  }

  /* 3 · El icono: destello que sale de él al encenderse. */
  .ruta-ic { position: relative; overflow: visible; }
  .ruta-ic::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid var(--c, var(--brand-blue)); opacity: 0;
  }
  .ruta-paso.ruta-vista .ruta-ic::after { animation: rutaDestello 1.05s cubic-bezier(.22,1,.3,1); }
  @keyframes rutaDestello {
    0%   { opacity: .85; transform: scale(1); }
    100% { opacity: 0;   transform: scale(2.1); }
  }

  /* 4 · La captura: un barrido de luz la recorre al aparecer. */
  .ruta-shot { position: relative; }
  .ruta-shot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(104deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
    transform: translateX(-120%); opacity: 0;
  }
  .ruta-paso.ruta-vista .ruta-shot::after { animation: rutaBrilloShot 1.15s .18s cubic-bezier(.22,1,.3,1); }
  @keyframes rutaBrilloShot {
    0%   { opacity: 0;  transform: translateX(-120%); }
    18%  { opacity: 1; }
    100% { opacity: 0;  transform: translateX(120%); }
  }

  /* 5 · Las palabras destacadas del título: se subraya sola al activarse. */
  .ruta-t .fp-em, .ruta-t .fp-em-g { position: relative; }
  .ruta-t .fp-em::after, .ruta-t .fp-em-g::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    border-radius: 2px; background: currentColor; opacity: .35;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .75s cubic-bezier(.22,1,.3,1) .25s;
  }
  .ruta-paso.ruta-vista .ruta-t .fp-em::after,
  .ruta-paso.ruta-vista .ruta-t .fp-em-g::after { transform: scaleX(1); }

  /* 6 · El número del paso: entra girando su propio eje. */
  .ruta-n { transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1); opacity: 0; transform: translateY(-6px); }
  .ruta-paso.ruta-vista .ruta-n { opacity: 1; transform: none; color: var(--c); }

  /* 7 · La línea, encendida: resplandor del color por el que va. */
  .ruta-linea {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c-flecha, var(--brand-blue)) 60%, transparent));
  }
  /* `transform-box: fill-box` NO es opcional aquí. En SVG esa propiedad vale
     `view-box` de fábrica, así que `transform-origin: center` significa «el
     centro del LIENZO», no el del círculo: al escalar, el halo salía disparado
     lejos de la punta y se veía como una pelota gris persiguiendo a la flecha.
     Francisco lo cazó mirando la página —«¿el círculo que persigue a la flecha
     qué se supone que hace? creo que está rota la animación»— y tenía razón.
     Con `fill-box` el origen es el centro del propio círculo y late pegado a
     la punta, que es lo que siempre debió hacer. */
  .ruta-flecha-halo {
    animation: rutaHalo 1.9s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  @keyframes rutaHalo {
    0%, 100% { opacity: .16; transform: scale(1); }
    50%      { opacity: .32; transform: scale(1.22); }
  }
  .ruta-flecha-punta { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-flecha, var(--brand-blue)) 70%, transparent)); }

  /* ── Celular: una sola columna, el riel a la izquierda ── */
  @media (max-width: 900px) {
    .ruta { padding: 64px 14px 16px; }
    .ruta-head { margin-bottom: 26px; }
    .ruta-sub { font-size: 14.5px; }
    /* ── El antes y el después, en UNA card partida (15-sep-2026) ──────────
       Francisco: «busca la forma de que ocupen menos espacio en móvil, tal
       vez colocando las 2 imágenes una al lado de la otra en la misma card».

       Apiladas eran dos tarjetas de ~330 px cada una: 700 px de pantalla para
       el gancho, antes de que empiece la historia. Lado a lado, una sola card
       partida por la mitad —la izquierda oscura, la derecha blanca— dice el
       mismo contraste en un tercio del alto. La mitad oscura y la clara ya
       existían (`.spain-before` y `.spain-after`); aquí sólo se les quitan los
       bordes propios y se pegan.

       LAS VIÑETAS SE ESCONDEN, y es a propósito: seis renglones repartidos en
       dos columnas de 165 px se leen fatal. Lo que dicen —importar, dictar,
       buscar— lo cuenta la ruta que va justo debajo, card por card y con
       captura. Aquí el trabajo lo hacen las dos fotos y los dos títulos. */
    .ruta-antes {
      grid-template-columns: 1fr 1fr; gap: 0;
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 18px 44px -26px rgba(11,18,32,.55);
    }
    .ruta-antes .spain-card { border-radius: 0; padding: 13px 13px 15px; border: 0; }
    .ruta-antes .spain-after { box-shadow: none; border-left: 1px solid #DBEAFE; }
    .ruta-antes .spain-badge { font-size: 9px; margin-bottom: 10px; padding: 3px 9px 3px 4px; gap: 5px; }
    .ruta-antes .spain-badge span { width: 14px; height: 14px; font-size: 8px; }
    /* Cuadrada: a 165 px de ancho, el recorte 16/9 dejaba una tira sin nada.
       Siendo las dos apaisadas, el recorte cuadrado no quita ALTO —se lleva la
       imagen entera de arriba abajo— y sólo muestra el 55 % central del ancho.
       Las dos médicas están ahí, así que `center` basta y no hace falta
       afinar el encuadre por imagen. */
    .ruta-antes .spain-shot img { aspect-ratio: 1 / 1; object-position: center; }
    .ruta-antes .spain-illus .ssb { display: none; }   /* la barrita de puntos no cabe ni aporta */
    .ruta-antes .spain-card h3 { font-size: 13px; line-height: 1.3; margin: 11px 0 0; }
    .ruta-antes .spain-list { display: none; }
    .ruta-lienzo { padding: 30px 0 24px; }
    .ruta-pasos { gap: 22px; }
    .ruta-pasos::before { left: 17px; margin-left: 0; }
    .ruta-paso { grid-template-columns: 34px 1fr; align-items: start; }
    .ruta-hito { grid-column: 1; justify-self: start; margin-top: 16px; }
    .ruta-izq .ruta-hito, .ruta-der .ruta-hito { justify-self: start; }
    .ruta-izq .ruta-card, .ruta-der .ruta-card { grid-column: 2; margin: 0; max-width: none; }
    .ruta-viva .ruta-izq .ruta-card,
    .ruta-viva .ruta-der .ruta-card { transform: translate(14px, 18px) scale(.99); }
    .ruta-t { font-size: 15.5px; }
    .ruta-d { font-size: 13px; }
    .ruta-card { padding: 13px 14px; border-radius: 14px; }
  }

  /* ── Sin movimiento: la línea sale dibujada y las cards, puestas ── */
  @media (prefers-reduced-motion: reduce) {
    .ruta-viva .ruta-card { opacity: 1 !important; transform: none !important; }
    /* El color se queda —es información, distingue una card de otra— pero
       llega sin transición: lo que molesta es el movimiento, no el tono. */
    .ruta-card, .ruta-texto, .ruta-shot, .ruta-ic, .ruta-hito, .ruta-fase, .ruta-n { transition: none !important; }
    /* Toda la capa mágica se apaga: el fondo que deriva, las ondas del hito,
       el destello del icono, el barrido de la captura, el subrayado que se
       dibuja, el latido del halo. Queda el color, que es información. */
    .ruta::before, .ruta::after,
    .ruta-paso.ruta-vista .ruta-hito::before, .ruta-paso.ruta-vista .ruta-hito::after,
    .ruta-paso.ruta-activo .ruta-hito,
    .ruta-paso.ruta-vista .ruta-ic::after,
    .ruta-paso.ruta-vista .ruta-shot::after,
    .ruta-flecha-halo { animation: none !important; }
    .ruta-t .fp-em::after, .ruta-t .fp-em-g::after { transform: scaleX(1); transition: none; }
    .ruta-n { opacity: 1; transform: none; }
    .ruta-viva .ruta-texto, .ruta-viva .ruta-shot { opacity: 1 !important; transform: none !important; }
    .ruta-linea, .ruta-flecha-punta { filter: none; }
    .ruta-card { background-color: var(--c-suave); border-color: var(--c-borde); }
    .ruta-ic { background: var(--c); color: #fff; }
    .ruta-flecha { display: none; }
    .ruta-hito { border-color: var(--c); }
    .ruta-hito i { background: var(--c); }
    .cta-v3.ruta-impacto .ruta-onda,
    .cta-v3.ruta-impacto .ruta-onda::before,
    .cta-v3.ruta-impacto .ruta-onda::after,
    .cta-v3.ruta-impacto .ruta-barrido { animation: none; opacity: 0; }
    .cta-v3.ruta-impacto .cta-v3-badge,
    .cta-v3.ruta-impacto h2,
    .cta-v3.ruta-impacto .cta-v3-actions { animation: none; }
    /* La cola se queda DIBUJADA ENTERA y quieta: que la línea llegue al botón
       es información —«aquí se empieza»—; lo que molesta es el recorrido. */
    .cta-cola-halo { animation: none; }
    .cta-v3.ruta-impacto .cta-v3-btn,
    .cta-v3.ruta-impacto .cta-v3-btn::after { animation: none; }
  }
  /* El ancla extra no ocupa sitio: sólo es un punto al que bajar. El
     `scroll-margin` la separa del encabezado fijo, igual que los ids reales. */
  .ruta-ancla { display: block; height: 0; width: 0; scroll-margin-top: 90px; }
  .ruta-paso { scroll-margin-top: 90px; }

  /* ══════════════════════════════════════════════════════════════════════
     «La IA escribe. Tú decides» — la demo que resume sola (15-sep-2026)

     Francisco: «resúmelo más, está demasiado largo y ocupa mucho espacio.
     Agrega alguna animación para que se dé a entender que la IA resume».

     La animación no decora: HACE lo que la sección dice. El dictado suelto se
     desvanece renglón a renglón mientras un barrido lo recorre, y debajo va
     apareciendo la nota repartida en campos. En nueve segundos se entiende
     sin leer una palabra de explicación — que es justo lo que sobraba.

     Es un solo bucle de 9 s y todo cuelga de él: cada pieza lleva la MISMA
     duración y se enciende en su tramo de porcentaje. Así no hace falta JS
     para sincronizar nada, y si una pieza se retrasa, se retrasan todas
     juntas. El `--i` / `--j` de cada renglón es su turno.
     ══════════════════════════════════════════════════════════════════════ */
  .ai-sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); margin: 0 0 20px; max-width: 46ch; }
  .ai-pastillas { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .ai-pastillas li {
    font-size: 13px; font-weight: 700; color: #DCEBFF;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  }
  .ai-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
    padding: 14px 28px; background: #fff; color: var(--brand-blue);
    border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: transform .2s, box-shadow .2s;
  }
  .ai-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.28); }

  .ia-demo {
    background: rgba(8,20,40,.55); border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px; overflow: hidden; backdrop-filter: blur(6px);
    box-shadow: 0 24px 60px -28px rgba(0,0,0,.65);
  }
  .ia-demo-barra {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
  }
  .ia-punto { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
  .ia-demo-tit { margin-left: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.62); }
  .ia-demo-viva {
    margin-left: auto; font-size: 11px; font-weight: 700; color: #FCA5A5;
    animation: iaGrabando 1.6s ease-in-out infinite;
  }
  @keyframes iaGrabando { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

  /* ── La red: documentos → un punto → resumen ─────────────────────────────
     16-sep-2026, Francisco: «unos documentos que se conectan por líneas a un
     solo punto, viaja la información por las líneas y se genera un resumen.
     La animación debe ser rápida y repetirse sin fin».

     Todo vive dentro de un `viewBox` de 400×330: los documentos, las líneas,
     el camino de cada partícula y el resumen comparten sistema de coordenadas,
     así que escala sola y nada se despega. La versión anterior —dictado en
     cursiva que se desvanecía— contaba UN caso; ésta cuenta el mecanismo.

     Dos relojes, a propósito:
      · el GOTEO (1.15 s) corre sin parar y escalonado: siempre hay
        información viajando, que es la sensación buscada;
      · el RESUMEN (3.4 s) se escribe, se queda un momento y vuelve a empezar.
     Que el rápido sea múltiplo aproximado del lento hace que las partículas
     lleguen siempre acompañando a la escritura, sin tener que sincronizarlos
     a mano. */
  .ia-red { display: block; width: 100%; height: auto; }

  .ia-hilos path {
    fill: none; stroke: url(#iaHilo); stroke-width: 2; stroke-linecap: round;
  }

  .ia-doc { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)); }
  .ia-doc rect {
    fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.22); stroke-width: 1.5;
  }
  .ia-doc-l { stroke: rgba(255,255,255,.4); stroke-width: 2.4; stroke-linecap: round; fill: none; }
  .ia-doc text {
    fill: rgba(255,255,255,.62); font-size: 12px; font-weight: 700;
    text-anchor: middle; letter-spacing: .01em;
  }

  /* Una partícula por línea. El `translate` va en unidades del `viewBox`, que
     es lo que permite escribir el destino como la diferencia entre los dos
     extremos y olvidarse del tamaño real en pantalla. */
  .ia-chispa { fill: #A6E5FF; filter: drop-shadow(0 0 5px rgba(124,196,255,.9)); }
  .ia-chispa-1 { cx: 60px;  cy: 80px; animation: iaViaja1 1.15s linear infinite; }
  .ia-chispa-2 { cx: 150px; cy: 68px; animation: iaViaja2 1.15s .28s linear infinite; }
  .ia-chispa-3 { cx: 250px; cy: 68px; animation: iaViaja3 1.15s .56s linear infinite; }
  .ia-chispa-4 { cx: 340px; cy: 80px; animation: iaViaja4 1.15s .84s linear infinite; }
  @keyframes iaViaja1 {
    0% { transform: translate(0, 0); opacity: 0; }
    14% { opacity: 1; } 86% { opacity: 1; }
    100% { transform: translate(140px, 88px); opacity: 0; }
  }
  @keyframes iaViaja2 {
    0% { transform: translate(0, 0); opacity: 0; }
    14% { opacity: 1; } 86% { opacity: 1; }
    100% { transform: translate(50px, 100px); opacity: 0; }
  }
  @keyframes iaViaja3 {
    0% { transform: translate(0, 0); opacity: 0; }
    14% { opacity: 1; } 86% { opacity: 1; }
    100% { transform: translate(-50px, 100px); opacity: 0; }
  }
  @keyframes iaViaja4 {
    0% { transform: translate(0, 0); opacity: 0; }
    14% { opacity: 1; } 86% { opacity: 1; }
    100% { transform: translate(-140px, 88px); opacity: 0; }
  }

  /* El punto: late cada vez que le llega algo. */
  .ia-nodo-cuerpo { fill: var(--brand-blue); stroke: rgba(166,229,255,.55); stroke-width: 2; }
  .ia-nodo-chispa { fill: #fff; }
  .ia-nodo-chispa--chica { opacity: .85; }
  .ia-nodo-halo {
    fill: #7CC4FF; opacity: .18;
    transform-box: fill-box; transform-origin: center;   /* sin esto, escala desde el centro del lienzo */
    animation: iaLatido 1.15s ease-out infinite;
  }
  @keyframes iaLatido {
    0%   { transform: scale(.75); opacity: .35; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  /* El resumen: se escribe renglón a renglón y vuelve a empezar. */
  .ia-resumen rect:first-of-type {
    fill: rgba(255,255,255,.07); stroke: rgba(166,229,255,.3); stroke-width: 1.5;
  }
  .ia-resumen-tit {
    fill: #7CC4FF; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  }
  .ia-resumen-pie { fill: #86E574; font-size: 11.5px; font-weight: 700; }
  .ia-resumen-lineas rect {
    fill: rgba(255,255,255,.82);
    transform-box: fill-box; transform-origin: left center;
    animation: iaEscribe 3.45s calc(var(--r) * .34s) cubic-bezier(.22,1,.3,1) infinite;
  }
  @keyframes iaEscribe {
    0%, 6%    { transform: scaleX(0); }
    26%, 80%  { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
  }
  .ia-resumen-pie { animation: iaAparece 3.45s 1.15s ease-out infinite; }
  @keyframes iaAparece {
    0%, 24%   { opacity: 0; }
    34%, 78%  { opacity: 1; }
    88%, 100% { opacity: 0; }
  }

  @media (max-width: 900px) {
    .ai-sub { font-size: 15px; }
    .ia-demo-cuerpo { min-height: 300px; padding: 14px 14px 16px; }
    /* El SVG escala solo con su `viewBox`; aquí sólo se le da un poco más de
       aire al texto de dentro, que a 330 px de ancho se queda chico. */
    .ia-doc text { font-size: 13px; }
    .ia-resumen-tit { font-size: 12px; }
    .ia-resumen-pie { font-size: 12.5px; }
  }

  /* Sin movimiento: se queda el RESULTADO, que es lo que hay que entender —
     la nota repartida en campos—, y el dictado suelto desaparece. Una demo
     congelada a mitad de camino no explicaría nada. */
  @media (prefers-reduced-motion: reduce) {
    /* Se queda el RESULTADO: los documentos, las líneas y el resumen escrito.
       Lo que se apaga es el viaje — las partículas y el latido del punto—,
       que es lo que se mueve. Una red congelada a medio dibujar no explicaría
       nada; dibujada entera se entiende igual sin un solo movimiento. */
    .ia-chispa, .ia-nodo-halo, .ia-demo-viva { animation: none; }
    .ia-chispa { display: none; }
    .ia-resumen-lineas rect { animation: none; transform: scaleX(1); }
    .ia-resumen-pie { animation: none; opacity: 1; }
  }

  /* Los tres destinos del cierre (16-sep-2026, Francisco: «agrega aquí los
     botones para ir a comparativa, y seguridad y NOM»). Van como pastillas de
     vidrio y no como botones sólidos: el único botón sólido de esta sección
     tiene que seguir siendo «Empezar gratis», que es al que apunta la flecha.
     Si estos pesaran lo mismo, la flecha señalaría uno de cuatro iguales. */
  .cta-v3-mas {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: 20px; position: relative; z-index: 2;
  }
  .cta-v3-mas a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none;
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
  }
  .cta-v3-mas a:hover {
    background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.38);
    transform: translateY(-2px);
  }
  @media (max-width: 560px) {
    .cta-v3-mas { gap: 8px; margin-top: 16px; }
    .cta-v3-mas a { padding: 8px 14px; font-size: 12.5px; }
  }

  /* ── La lupa: crecer al pasar el ratón, abrir al hacer click ──────────────
     16-sep-2026, Francisco: «si paso el mouse por alguna de las imágenes se
     tiene que ampliar un poco y si hago click en ella, abrirse como ventana
     emergente para verla más de cerca» · «lo del click a la imagen, sólo en
     escritorio, en móvil puede entorpecer el scroll».

     Todo esto vive dentro de `@media (min-width: 901px)` y `(hover: hover)`:
     en un teléfono no hay ratón que pasar, el `:hover` se queda PEGADO tras
     el toque —la imagen se quedaría grande hasta que toques otra cosa— y el
     click se comería el scroll. El JS también comprueba el ancho en cada
     click; las dos puertas son a propósito, porque una pantalla táctil ancha
     existe y ahí manda la del JS. */
  @media (min-width: 901px) and (hover: hover) {
    .ruta-shot[data-lg], .spain-shot[data-lg] { cursor: zoom-in; }
    .ruta-shot[data-lg] img, .spain-shot[data-lg] img {
      transition: transform .45s cubic-bezier(.22,1,.3,1);
    }
    .ruta-shot[data-lg]:hover img,
    .ruta-shot[data-lg]:focus-visible img,
    .spain-shot[data-lg]:hover img,
    .spain-shot[data-lg]:focus-visible img { transform: scale(1.06); }
    /* El marco reacciona un poco también: sin esto sólo se mueve la foto y
       parece que se despegó de su tarjeta. */
    .ruta-shot[data-lg]:hover, .spain-shot[data-lg]:hover {
      box-shadow: 0 22px 48px -24px rgba(11,18,32,.55);
    }
    .ruta-shot[data-lg]:focus-visible, .spain-shot[data-lg]:focus-visible {
      outline: 3px solid #7CC4FF; outline-offset: 3px;
    }
    /* `.spain-illus` decía `cursor: default` de cuando estas dos ilustraciones
       NO se podían abrir. Ahora sí. */
    .spain-illus[data-lg] { cursor: zoom-in; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     LAS DEMOS ANIMADAS DE LA RUTA (17-sep-2026)

     Francisco: «algunos screenshots quiero remplazarlos por html y css
     animado, como hicimos con la animación de los documentos resumidos con
     IA». Cinco pasos cambian su captura por dibujo vivo, porque una captura
     enseña un ESTADO y estos cinco pasos venden un MECANISMO.

     Las reglas:

     · El color no está escrito: sale de `--c`, que cada paso trae de la paleta
       de la plantilla. Si mañana cambian los tonos, las demos cambian.
     · Todo con `transform` y `opacity`. Son cinco bucles a la vez y ninguno
       puede obligar al navegador a recalcular la página.
     · `transform-box: fill-box` en TODO lo que escale o gire dentro del SVG.
       Sin eso, `transform-origin: center` es el centro del LIENZO y la pieza
       sale disparada — costó un día entero el 16-sep con el halo de la flecha.
     · Un solo reloj por demo (mismo `animation-duration`) con retrasos por
       pieza. Relojes distintos se desincronizan y dejan huecos en blanco: eso
       pasó el 15-sep con el panel de la IA.
     ══════════════════════════════════════════════════════════════════════ */
  /* `width: 100%` y no se discute. Sin él, el marco de la demo se quedaba en
     302 px donde las capturas medían 500: un `<img>` le da ancho propio a su
     contenedor y un `<div>` con `width:100%` no, así que la casilla de la
     rejilla no lo estiraba. Medido en escritorio: las cinco demos salían un
     40% más chicas que las capturas de al lado — que es exactamente lo que
     Francisco vio el 17-sep («en escritorio se ven demasiado pequeños»). */
  .ruta-shot-demo { background: #fff; width: 100%; }
  .rd { position: relative; width: 100%; height: 100%; background: #fff; }
  .rd svg { display: block; width: 100%; height: 100%; }

  /* La barrita va DIBUJADA dentro del lienzo (ver `_ruta_demos.html`). Con el
     `padding-top` de antes, el área dibujable dejaba de ser 2:1 y el dibujo se
     encogía hasta caber en el alto: 23 px de franja a cada lado y sólo el 84%
     del ancho aprovechado. */
  .rd-barra-svg rect   { fill: #F8FAFC; }
  .rd-barra-svg circle { fill: #E2E8F0; }
  .rd-barra-svg text   { font-size: 10px; fill: #94A3B8; letter-spacing: .02em; }

  /* Piezas compartidas. Los tamaños son deliberadamente grandes: el marco mide
     330 px en un teléfono, así que una unidad del viewBox vale 0.83 px. */
  .rd text { font-family: inherit; font-weight: 700; fill: #0F172A; }
  .rd .rd-rotulo { font-size: 11px; fill: #94A3B8; letter-spacing: .04em; }
  .rd .rd-cifra  { font-size: 14px; fill: #0F172A; }
  .rd .rd-eje    { font-size: 10px; fill: #94A3B8; text-anchor: middle; }
  /* Igual que `rd-eje` pero SIN centrar. Existe porque el renglón secundario
     de la alergia se dibujaba centrado en su x y se salía 38 px del lienzo por
     la izquierda — y eso no lo ve la comprobación de desbordamiento del SVG
     contra su marco: la pieza cabe en el elemento y se corta igual. */
  .rd .rd-menor  { font-size: 10px; fill: #94A3B8; }
  .rd .rd-pie    { font-size: 11px; fill: #94A3B8; text-anchor: middle; }
  .rd .rd-grande { font-size: 12px; }
  .rd .rd-rojo   { fill: #DC2626; }
  .rd .rd-ok     { font-size: 12px; fill: #2E9E22; }
  .rd .rd-caja   { fill: #F8FAFC; stroke: #E2E8F0; stroke-width: 1.4; }
  .rd .rd-hilo   { fill: none; stroke: var(--c, #1B7BD6); stroke-width: 1.6;
                   opacity: .3; stroke-dasharray: 4 4; }
  .rd .rd-cursor { fill: var(--c, #1B7BD6); animation: rdCursor 1s steps(1) infinite; }
  @keyframes rdCursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  /* Los anillos que salen de un punto (micrófono, avisos). */
  .rd .rd-aro {
    fill: none; stroke: var(--c, #1B7BD6); stroke-width: 2.5; opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: rdAro 2.6s ease-out infinite;
  }
  .rd .rd-aro-2 { animation-delay: 1.3s; }
  @keyframes rdAro {
    0%   { opacity: .5; transform: scale(.78); }
    100% { opacity: 0;  transform: scale(1.7); }
  }

  /* ── 03 · Dictas, la IA acomoda, tú firmas ───────────────────────────── */
  .rd-dictado .rd-mic-cuerpo { fill: var(--c, #1B7BD6); }
  .rd-dictado .rd-mic-glifo  { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
  .rd-dictado .rd-barrita {
    fill: var(--c, #1B7BD6); opacity: .55;
    transform-box: fill-box; transform-origin: center;
    animation: rdVoz 1.05s ease-in-out infinite;
    animation-delay: calc(var(--i) * .085s);
  }
  @keyframes rdVoz { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1.8); } }

  .rd-dictado .rd-chispa { fill: var(--c, #1B7BD6); animation: rdViaje 6.6s cubic-bezier(.4,0,.5,1) infinite; }
  /* El respaldo bueno: si el navegador no entiende `offset-path`, las
     partículas no se dibujan. La otra vía —darles `cx`/`cy`— está MAL, porque
     `offset-path` desplaza desde el origen propio del elemento y las
     coordenadas se suman: la tercera acababa 55 unidades por debajo del
     lienzo. Tres puntos quietos en una esquina explican menos que ninguno. */
  @supports not (offset-path: path("M0 0 L1 1")) {
    .rd .rd-chispa { display: none; }
  }
  .rd-dictado .rd-chispa-1 { offset-path: path("M92 78 C 130 52, 150 48, 176 48");   animation-delay: .2s; }
  .rd-dictado .rd-chispa-2 { offset-path: path("M92 88 C 130 88, 150 98, 176 98");   animation-delay: 1.65s; }
  .rd-dictado .rd-chispa-3 { offset-path: path("M92 98 C 130 124, 150 146, 176 146"); animation-delay: 3.1s; }
  @keyframes rdViaje {
    0%        { offset-distance: 0%;   opacity: 0; }
    4%        { opacity: 1; }
    18%       { offset-distance: 100%; opacity: 1; }
    21%, 100% { offset-distance: 100%; opacity: 0; }
  }
  .rd-dictado .rd-linea {
    fill: var(--c, #1B7BD6); opacity: .85;
    transform-box: fill-box; transform-origin: left center;
    animation: rdLlena 6.6s cubic-bezier(.22,1,.3,1) infinite;
    animation-delay: calc(var(--r) * 1.45s + 1.1s);
  }
  @keyframes rdLlena { 0%, 2% { transform: scaleX(0); } 13%, 100% { transform: scaleX(1); } }
  .rd-dictado .rd-tick {
    fill: none; stroke: #2E9E22; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 30; stroke-dashoffset: 30;
    animation: rdTick 6.6s ease-out infinite; animation-delay: 5.1s;
  }
  @keyframes rdTick { 0%, 3% { stroke-dashoffset: 30; } 14%, 100% { stroke-dashoffset: 0; } }
  .rd-dictado .rd-ok { opacity: 0; animation: rdAsoma 6.6s ease-out infinite; animation-delay: 5.2s; }
  @keyframes rdAsoma { 0%, 3% { opacity: 0; } 13%, 100% { opacity: 1; } }

  /* ── 05 · Capturas el peso y el percentil ya está ahí ─────────────────── */
  .rd-percentil .rd-chip { fill: #fff; stroke: var(--c, #DB2777); stroke-width: 1.6; }
  .rd-percentil .rd-cifra { opacity: 0; animation: rdAsoma 7s ease-out infinite; animation-delay: .5s; }
  .rd-percentil .rd-banda {
    fill: none; stroke: #E2E8F0; stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 400; stroke-dashoffset: 400;
    animation: rdTraza 7s cubic-bezier(.22,1,.3,1) infinite;
    animation-delay: calc(var(--r) * .12s);
  }
  .rd-percentil .rd-banda-media { stroke: #CBD5E1; stroke-dasharray: 6 5; }
  @keyframes rdTraza { 0%, 4% { stroke-dashoffset: 400; } 26%, 100% { stroke-dashoffset: 0; } }
  .rd-percentil .rd-curva {
    fill: none; stroke: var(--c, #DB2777); stroke-width: 3.2; stroke-linecap: round;
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: rdTrazaCurva 7s cubic-bezier(.22,1,.3,1) infinite; animation-delay: 1.4s;
  }
  @keyframes rdTrazaCurva { 0%, 4% { stroke-dashoffset: 340; } 42%, 100% { stroke-dashoffset: 0; } }
  .rd-percentil .rd-punto {
    fill: var(--c, #DB2777); opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: rdPunto 7s cubic-bezier(.34,1.56,.64,1) infinite;
    animation-delay: calc(var(--r) * .38s + 1.6s);
  }
  @keyframes rdPunto {
    0%, 2%   { opacity: 0; transform: scale(.2); }
    9%       { opacity: 1; transform: scale(1.5); }
    14%,100% { opacity: 1; transform: scale(1); }
  }
  .rd-percentil .rd-badge rect { fill: var(--c, #DB2777); }
  .rd-percentil .rd-badge text { fill: #fff; font-size: 14px; text-anchor: middle; }
  .rd-percentil .rd-badge {
    opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: rdBadge 7s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: 3.5s;
  }
  @keyframes rdBadge {
    0%, 3%   { opacity: 0; transform: scale(.4) translateY(6px); }
    11%      { opacity: 1; transform: scale(1.12) translateY(0); }
    16%,100% { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* ── 07 · Te avisa antes de que firmes ────────────────────────────────── */
  .rd-alergia .rd-alerta-arriba rect { fill: #FEF2F2; stroke: #FECACA; stroke-width: 1.2; }
  .rd-alergia .rd-caja-activa { stroke: var(--c, #4F46E5); stroke-width: 2; fill: #fff; }
  .rd-alergia .rd-teclea {
    /* Se escribe de verdad: el recorte crece de cero al ancho de la palabra. */
    clip-path: inset(0 100% 0 0);
    animation: rdTeclea 6.8s steps(5, end) infinite; animation-delay: .4s;
  }
  @keyframes rdTeclea { 0%, 4% { clip-path: inset(0 100% 0 0); } 16%, 100% { clip-path: inset(0 0 0 0); } }
  .rd-alergia .rd-sugerencias {
    opacity: 0; transform-box: fill-box; transform-origin: top center;
    animation: rdBaja 6.8s cubic-bezier(.22,1,.3,1) infinite; animation-delay: 1.5s;
  }
  @keyframes rdBaja {
    0%, 3%   { opacity: 0; transform: translateY(-8px) scaleY(.9); }
    13%,100% { opacity: 1; transform: translateY(0) scaleY(1); }
  }
  .rd-alergia .rd-choque rect { fill: #FEF2F2; stroke: #FCA5A5; stroke-width: 1.4; }
  .rd-alergia .rd-warn { fill: none; stroke: #DC2626; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .rd-alergia .rd-choque {
    opacity: 0; animation: rdChoque 6.8s ease-out infinite; animation-delay: 2.5s;
  }
  @keyframes rdChoque {
    0%, 3%   { opacity: 0; }
    8%       { opacity: 1; }
    11%      { opacity: .25; }
    14%      { opacity: 1; }
    17%      { opacity: .25; }
    20%,100% { opacity: 1; }
  }

  /* ── 09 · Ocho consultas, un párrafo ──────────────────────────────────── */
  .rd-indicadores .rd-eje-linea { stroke: #E2E8F0; stroke-width: 1.5; }
  .rd-indicadores .rd-consulta { fill: #E2E8F0; }
  .rd-indicadores .rd-dato {
    opacity: 0;
    animation: rdAsoma 7.2s ease-out infinite;
    animation-delay: calc(var(--r) * .32s + .4s);
  }
  .rd-indicadores .rd-dato .rd-consulta { fill: var(--c, #CA8A04); opacity: .35; }
  .rd-indicadores .rd-punto {
    fill: var(--c, #CA8A04);
    transform-box: fill-box; transform-origin: center;
    animation: rdSube 7.2s cubic-bezier(.34,1.56,.64,1) infinite;
    animation-delay: calc(var(--r) * .32s + .5s);
  }
  @keyframes rdSube {
    0%, 2%   { transform: translateY(42px) scale(.3); }
    10%      { transform: translateY(0) scale(1.35); }
    15%,100% { transform: translateY(0) scale(1); }
  }
  .rd-indicadores .rd-curva {
    fill: none; stroke: var(--c, #CA8A04); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: rdTrazaCurva 7.2s linear infinite; animation-delay: .6s;
  }

  /* ── 11 · Varios médicos, un solo expediente ──────────────────────────── */
  .rd-consultorio .rd-exp > rect { fill: #F8FAFC; stroke: #E2E8F0; stroke-width: 1.6; }
  .rd-consultorio .rd-rotulo { text-anchor: middle; }
  .rd-consultorio .rd-avatar { fill: #fff; }
  .rd-consultorio .rd-nota-caja { fill: #fff; stroke: #E2E8F0; stroke-width: 1.2; }
  .rd-consultorio .rd-nota-linea { fill: #CBD5E1; }
  .rd-consultorio .rd-nota {
    opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: rdNota 7.4s cubic-bezier(.22,1,.3,1) infinite;
    animation-delay: calc(var(--r) * 1.15s + 1.3s);
  }
  @keyframes rdNota {
    0%, 3%   { opacity: 0; transform: translateX(-26px) scale(.9); }
    12%,100% { opacity: 1; transform: translateX(0) scale(1); }
  }
  .rd-consultorio .rd-persona {
    opacity: 0; animation: rdAsoma 7.4s ease-out infinite;
    animation-delay: calc(var(--r) * .35s + .2s);
  }
  .rd-consultorio .rd-candado { fill: none; stroke: #94A3B8; stroke-width: 2; stroke-linejoin: round; }

  /* Sin movimiento: se paran las cinco y se quedan en su fotograma final, que
     es el que cuenta la historia completa. Enseñar algo quieto a quien pidió
     que nada se mueva es mejor que enseñarle un dibujo a medias. */
  @media (prefers-reduced-motion: reduce) {
    .rd *, .rd { animation: none !important; }
    .rd .rd-linea, .rd .rd-punto, .rd .rd-nota { transform: none !important; }
    .rd .rd-chispa { opacity: 0 !important; }
    .rd .rd-banda, .rd .rd-curva { stroke-dashoffset: 0 !important; }
    .rd .rd-tick { stroke-dashoffset: 0 !important; }
    .rd .rd-teclea { clip-path: none !important; }
    .rd .rd-cursor { opacity: 0 !important; }
    .rd .rd-sugerencias, .rd .rd-choque, .rd .rd-badge,
    .rd .rd-dato, .rd .rd-persona, .rd .rd-nota, .rd .rd-ok,
    .rd .rd-cifra { opacity: 1 !important; }
  }
