/* ============================================================
   JW EN VIVO — LANDING PREMIUM (capa de alta gama, 2026-09-08)
   Capa ADITIVA sobre landing.css. No renombra ni elimina nada:
   se carga DESPUES de landing.css y solo refina.

   Reglas heredadas de docs/diseno/08-sistema-movimiento.md:
   - Solo se animan transform y opacity (nada que provoque reflow).
   - Todo el movimiento vive bajo (prefers-reduced-motion: no-preference).
   - El contenido es visible aunque el CSS/JS fallen: lo que esta capa
     oculta al principio solo se oculta cuando el JS ya ha marcado .is-lit.
   - Sin librerias. Sin layout shift.

   Superficie: la landing baja a NEGRO CASI PURO en la seccion 8 (direccion
   «estilo.jpg»). Se conserva el
   verde (--ld-green) y cian (--ld-cyan). Todo lo de aqui esta calibrado
   para fondo oscuro: la luz de canto es fria y tenue, nunca blanco puro.
   No se introduce ningun color de marca nuevo.

   PSEUDOELEMENTOS YA OCUPADOS en landing.css — no tocarlos:
     .ld-box::after                  borde degradado enmascarado (679)
     .ld-tilt::before                destello del puntero (788)  [mismo elemento]
     .ld-node::before / ::after      (486 / 491, pulso en 947)
     .ld-section--deep/--tel::before aurora (662)
     .ld-steps li:not(:last-child)::after  conector (449)
   Libres y usados aqui: .ld-btn::after, .ld-nav a::after,
     .ld-step-n::after, .ld-features > li::after, .ld-section--*::after
   ============================================================ */

/* ---------- Tokens de la capa (derivados de la paleta local) ---------- */
body.jv-landing {
  /* luz de canto sobre vidrio oscuro: fria y muy contenida */
  --ldp-edge: rgba(150, 210, 255, 0.18);
  --ldp-edge-strong: rgba(160, 220, 255, 0.26);

  /* sombras: sobre marino profundo la sombra es casi negra */
  --ldp-shadow-1:
    0 1px 2px rgba(2, 8, 18, 0.40),
    0 8px 20px -12px rgba(2, 8, 18, 0.70);
  --ldp-shadow-2:
    0 2px 6px rgba(2, 8, 18, 0.45),
    0 22px 48px -24px rgba(2, 8, 18, 0.85);
  --ldp-shadow-deep:
    0 2px 8px rgba(2, 8, 18, 0.55),
    0 30px 70px -30px rgba(2, 8, 18, 0.95);

  /* grano: cue de impresion que rompe el degradado plano */
  --ldp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --ldp-dur-slow: 640ms;
  --ldp-ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* ============================================================
   1) TIPOGRAFIA — jerarquia optica mas fina
   El <em> del heroe es cursiva y verde por decision de landing.css
   (linea 205): esta capa NO lo toca.
   ============================================================ */
body.jv-landing .ld-hero h1 {
  letter-spacing: -0.021em;
  line-height: 1.06;
}
body.jv-landing h2 { letter-spacing: -0.015em; }
body.jv-landing h3 { letter-spacing: -0.006em; }

body.jv-landing .ld-desc { max-width: 56ch; }

/* cifras que no bailan al animarse */
body.jv-landing .ld-tel-stats b,
body.jv-landing .ld-tel-number,
body.jv-landing .ld-step-n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   2) SUPERFICIES — luz de canto, sombra en capas, grano
   La luz de canto va como sombra INTERIOR, no como pseudoelemento,
   porque ::before y ::after ya estan ocupados en estos elementos.
   ============================================================ */
body.jv-landing .ld-box,
body.jv-landing .ld-panel-tel,
body.jv-landing .ld-node {
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--ldp-edge),
    var(--ldp-shadow-2);
}

body.jv-landing .ld-section--deep .ld-box,
body.jv-landing .ld-section--deep .ld-node,
body.jv-landing .ld-section--tel .ld-panel-tel {
  box-shadow:
    inset 0 1px 0 var(--ldp-edge-strong),
    var(--ldp-shadow-deep);
}

/* grano sobre las secciones profundas (::after esta libre) */
body.jv-landing .ld-section--deep,
body.jv-landing .ld-section--tel { position: relative; }
body.jv-landing .ld-section--deep::after,
body.jv-landing .ld-section--tel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ldp-grain);
  background-size: 140px 140px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
body.jv-landing .ld-section--deep > *,
body.jv-landing .ld-section--tel > * { position: relative; z-index: 1; }

/* ============================================================
   3) BOTON PRIMARIO — cuerpo, brillo interior y barrido especular
   ============================================================ */
body.jv-landing .ld-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 3px rgba(2, 8, 18, 0.55),
    0 12px 30px -14px rgba(46, 184, 92, 0.75);
}
body.jv-landing .ld-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 26%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 255, 255, 0.26) 45%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.26) 55%,
    transparent);
  transform: translateX(-320%) skewX(-14deg);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   4) TARJETAS DE CARACTERISTICAS — halo verde de la casa
   ============================================================ */
body.jv-landing .ld-features > li {
  position: relative;
  border-radius: var(--ld-radius);
}
body.jv-landing .ld-features > li::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 82% at 50% 0%,
    rgba(46, 184, 92, 0.16), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   5) RAIL DE PROGRESO DE LECTURA (lo inyecta landing-premium.js)
   ============================================================ */
body.jv-landing .ldp-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}
body.jv-landing .ldp-rail > i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    var(--ld-green),
    var(--ld-cyan) 55%,
    var(--ld-green));
  box-shadow: 0 0 14px -2px rgba(95, 208, 255, 0.85);
}

/* cabecera condensada al bajar */
body.jv-landing .ld-header {
  transition: box-shadow var(--jv-motion-dur-3) var(--jv-motion-ease-standard);
}
body.jv-landing.ldp-scrolled .ld-header {
  box-shadow: var(--ldp-shadow-1);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

/* ============================================================
   6) MOVIMIENTO — todo bajo no-preference
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* --- 6.1 Titular del heroe, linea a linea --- */
  body.jv-landing.ldp-ready .ldp-line {
    display: block;
    animation: ldp-line-in var(--ldp-dur-slow) var(--ldp-ease-out) backwards;
    animation-delay: calc(60ms + var(--ldp-i, 0) * 90ms);
  }
  @keyframes ldp-line-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  body.jv-landing.ldp-ready .ld-hero-copy .ld-lead {
    animation: jv-rise-in var(--ldp-dur-slow) var(--ldp-ease-out) 300ms backwards;
  }
  body.jv-landing.ldp-ready .ld-hero-copy .ld-cta {
    animation: jv-rise-in var(--ldp-dur-slow) var(--ldp-ease-out) 380ms backwards;
  }
  body.jv-landing.ldp-ready .ld-scrollhint {
    animation: jv-rise-in var(--ldp-dur-slow) var(--ldp-ease-out) 620ms backwards;
  }

  /* --- 6.2 Barrido especular del boton primario --- */
  body.jv-landing .ld-btn::after {
    transition: transform 820ms var(--jv-motion-ease-standard);
  }
  body.jv-landing .ld-btn:hover::after,
  body.jv-landing .ld-btn:focus-visible::after {
    transform: translateX(600%) skewX(-14deg);
  }

  /* --- 6.3 Boton magnetico (el desplazamiento lo fija el JS) --- */
  body.jv-landing .ldp-magnet {
    transition: transform 260ms var(--jv-motion-ease-spring);
    will-change: transform;
  }
  body.jv-landing .ldp-magnet.is-pulling {
    transition: transform 90ms linear;
    transform: translate(var(--ldp-mx, 0px), var(--ldp-my, 0px));
  }

  /* --- 6.4 Tarjetas: halo e icono --- */
  body.jv-landing .ld-features > li::after,
  body.jv-landing .ld-features > li > svg {
    transition:
      transform var(--jv-motion-dur-3) var(--jv-motion-ease-standard),
      opacity var(--jv-motion-dur-3) var(--jv-motion-ease-standard);
  }
  body.jv-landing .ld-features > li:hover::after { opacity: 1; }
  body.jv-landing .ld-features > li:hover > svg {
    transform: translateY(-2px) scale(1.10);
    transition-timing-function: var(--jv-motion-ease-spring);
  }

  /* --- 6.5 Checks: escalonado con microrebote.
         A prueba de fallos: la animacion SOLO existe con .is-lit, que pone
         el JS. Sin JS no hay animacion y el contenido se ve siempre. --- */
  body.jv-landing.ldp-ready .ld-checks.is-lit > li {
    animation: ldp-pop-in var(--jv-motion-dur-3) var(--jv-motion-ease-spring) backwards;
    animation-delay: calc(var(--ldp-i, 0) * 70ms);
  }
  @keyframes ldp-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }

  /* --- 6.6 Pasos: entrada escalonada + anillo en el numero --- */
  body.jv-landing.ldp-ready .ld-steps.is-lit > li {
    animation: jv-rise-in var(--jv-motion-dur-4) var(--ldp-ease-out) backwards;
    animation-delay: calc(var(--ldp-i, 0) * 90ms);
  }
  body.jv-landing .ld-step-n { position: relative; }
  body.jv-landing.ldp-ready .ld-steps.is-lit .ld-step-n::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--ld-green-soft);
    opacity: 0;
    animation: ldp-ring 1500ms var(--jv-motion-ease-standard) backwards;
    animation-delay: calc(320ms + var(--ldp-i, 0) * 90ms);
    pointer-events: none;
  }
  @keyframes ldp-ring {
    0%   { opacity: 0.6; transform: scale(0.72); }
    70%  { opacity: 0;   transform: scale(1.3); }
    100% { opacity: 0;   transform: scale(1.3); }
  }

  /* --- 6.7 Nodos del diagrama: el icono cobra vida --- */
  body.jv-landing .ld-node i {
    transition: transform var(--jv-motion-dur-2) var(--jv-motion-ease-spring);
  }
  body.jv-landing .ld-node:hover i { transform: scale(1.12) rotate(-4deg); }

  /* --- 6.8 Navegacion: subrayado que crece desde la izquierda --- */
  body.jv-landing .ld-nav a { position: relative; }
  body.jv-landing .ld-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1.5px;
    background: var(--ld-green-soft);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--jv-motion-dur-3) var(--jv-motion-ease-entrance);
    opacity: 0.85;
  }
  body.jv-landing .ld-nav a:hover::after,
  body.jv-landing .ld-nav a[aria-current="page"]::after { transform: scaleX(1); }

  /* --- 6.9 Rail de progreso --- */
  body.jv-landing .ldp-rail > i {
    transform: scaleX(var(--ldp-p, 0));
    transition: transform 120ms linear;
  }

  /* --- 6.10 Pie: entrada suave --- */
  body.jv-landing.ldp-ready .ld-footer.is-lit .ld-wrap > * {
    animation: jv-rise-in var(--jv-motion-dur-4) var(--ldp-ease-out) backwards;
    animation-delay: calc(var(--ldp-i, 0) * 70ms);
  }
}

/* ============================================================
   7) MOVIMIENTO REDUCIDO — anulacion defensiva de esta capa
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.jv-landing .ldp-line,
  body.jv-landing .ld-checks > li,
  body.jv-landing .ld-steps > li,
  body.jv-landing .ld-footer .ld-wrap > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.jv-landing .ldp-rail { display: none; }
  body.jv-landing .ld-btn::after { display: none; }
  body.jv-landing .ldp-magnet { transform: none !important; }
}

/* ============================================================
   8) DIRECCION «ESTILO.JPG» — atmosfera de la referencia
   Referencia: landing de app cripto, negro casi puro, halos radiales
   de color, movil inclinado con resplandor, tiles de dato y pildoras.
   Se adopta la ATMOSFERA. NO se adopta ni el naranja ni la sans pesada
   del titular: la marca es verde (--ld-green) y el display es Fraunces,
   segun docs/diseno/04 y 05.
   ============================================================ */

/* ---------- 8.1 El suelo baja a negro casi puro ---------- */
body.jv-landing {
  --ld-bg: #07090c;
  --ld-bg-deep: #050608;
  --ld-hero-1: #0b0e13;
  --ld-hero-2: #07090c;
  --ld-panel: rgba(19, 22, 28, 0.62);
  --ld-panel-solid: #12151a;
  --ld-line: rgba(180, 205, 225, 0.12);
  --ld-line-soft: rgba(180, 205, 225, 0.07);

  /* halos de la referencia, en el verde/cian de la casa */
  --ldp-pool-green: rgba(46, 184, 92, 0.20);
  --ldp-pool-cyan: rgba(95, 208, 255, 0.13);
}

/* ---------- 8.2 Halos radiales del heroe ---------- */
body.jv-landing .ld-hero {
  background:
    radial-gradient(46rem 34rem at 74% 22%, var(--ldp-pool-green), transparent 62%),
    radial-gradient(38rem 30rem at 12% 78%, var(--ldp-pool-cyan), transparent 66%),
    radial-gradient(70rem 50rem at 50% 120%, rgba(46, 184, 92, 0.07), transparent 70%),
    linear-gradient(180deg, var(--ld-hero-1), var(--ld-hero-2) 68%, var(--ld-bg));
}

/* halo tambien tras las secciones profundas, como en la referencia */
body.jv-landing .ld-section--deep,
body.jv-landing .ld-section--tel {
  background-image:
    radial-gradient(42rem 30rem at 82% 12%, rgba(46, 184, 92, 0.10), transparent 64%),
    radial-gradient(38rem 28rem at 6% 88%, rgba(95, 208, 255, 0.07), transparent 66%);
  background-color: var(--ld-bg-deep);
}

/* ---------- 8.3 El movil, con mas resplandor ---------- */
body.jv-landing .ld-phone-seq::before {
  width: 92%;
  background: radial-gradient(closest-side,
    rgba(46, 184, 92, 0.30),
    rgba(95, 208, 255, 0.12) 55%,
    transparent 72%);
  filter: blur(10px);
}

/* ---------- 8.4 Tiles de dato al estilo de la referencia ----------
   El primero va relleno de verde, el resto en oscuro con filo tenue. */
body.jv-landing .ld-tel-stats {
  gap: .4rem;
  padding: .85rem .7rem .6rem;
}
body.jv-landing .ld-tel-stats li {
  padding: .5rem .3rem .45rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ld-line-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.jv-landing .ld-tel-stats li:nth-child(1) {
  background: linear-gradient(180deg, var(--ld-green), var(--ld-green-deep));
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 22px -10px rgba(46, 184, 92, 0.85);
}
body.jv-landing .ld-tel-stats li:nth-child(1) b,
body.jv-landing .ld-tel-stats li:nth-child(1) span { color: #fff; }

/* ---------- 8.5 Botones pildora, con la flecha en disco ---------- */
body.jv-landing .ld-btn,
body.jv-landing .ld-access {
  border-radius: 999px;
}
body.jv-landing .ld-btn svg {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  padding: 3px;
  box-sizing: content-box;
}

/* la tarjeta de caracteristicas se redondea como la referencia */
body.jv-landing .ld-features > li { border-radius: 14px; }

/* ---------- 8.6 Movimiento nuevo de esta direccion ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* el movil entra asentandose, con un giro minimo que se resuelve */
  body.jv-landing.ldp-ready .ld-phone-seq {
    animation: ldp-phone-settle 1100ms var(--ldp-ease-out) 120ms backwards;
  }
  @keyframes ldp-phone-settle {
    from { opacity: 0; transform: translateY(38px) rotate(-3.2deg) scale(0.965); }
    to   { opacity: 1; transform: none; }
  }

  /* los tiles de dato entran escalonados cuando el panel se ve */
  body.jv-landing.ldp-ready .ld-tel-stats.is-lit li {
    animation: ldp-pop-in var(--jv-motion-dur-3) var(--jv-motion-ease-spring) backwards;
    animation-delay: calc(var(--ldp-i, 0) * 80ms);
  }
  /* el tile destacado respira muy despacio, como el halo del login */
  body.jv-landing.ldp-ready .ld-tel-stats.is-lit li:nth-child(1) {
    animation:
      ldp-pop-in var(--jv-motion-dur-3) var(--jv-motion-ease-spring) backwards,
      ldp-tile-breathe 5.5s var(--jv-motion-ease-standard) 900ms infinite alternate;
  }
  @keyframes ldp-tile-breathe {
    from { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -10px rgba(46,184,92,.85); }
    to   { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 34px -10px rgba(46,184,92,1); }
  }

  /* el halo del movil late muy levemente: da vida sin distraer */
  body.jv-landing .ld-phone-seq::before {
    animation: ldp-glow-breathe 7.5s var(--jv-motion-ease-standard) infinite alternate;
    will-change: opacity, transform;
  }
  @keyframes ldp-glow-breathe {
    from { opacity: .85; transform: translate(-50%, -50%) rotate(-12deg) scale(0.97); }
    to   { opacity: 1;   transform: translate(-50%, -50%) rotate(-12deg) scale(1.05); }
  }

  /* paralaje de los halos al hacer scroll (lo alimenta el JS) */
  body.jv-landing .ld-hero { background-position: 0 calc(var(--ldp-sy, 0) * 1px); }
}

@media (prefers-reduced-motion: reduce) {
  body.jv-landing .ld-phone-seq,
  body.jv-landing .ld-tel-stats li { animation: none !important; }
  body.jv-landing .ld-phone-seq::before { animation: none !important; }
}

/* ============================================================
   9) DIRECCION «ESTILO.JPG» — MARCA COMPLETA
   Aprobado por Matias el 2026-09-08: se adoptan tambien los dos
   rasgos que en la seccion 8 se habian dejado fuera a proposito:
     a) el acento naranja de la referencia
     b) el titular en sans pesada (Archivo 700) en vez de Fraunces

   AVISO SOBRE LOS NOMBRES: --ld-green / -deep / -soft son los tokens
   de ACENTO de landing.css (27 usos). Se reasignan a naranja para que
   el cambio se propague de una vez, sin editar landing.css. El nombre
   queda historico: leer «green» como «acento».

   Los verdes SEMANTICOS del panel telefonico NO se tocan: «Contesto»
   y «Disponible» significan exito, y en naranja leerian como aviso.
   ============================================================ */

body.jv-landing {
  /* acento: naranja calido de la referencia */
  --ld-green: #f5761f;
  --ld-green-deep: #c9560d;
  --ld-green-soft: #ffb27a;

  /* verde real, reservado para lo semantico */
  --ldp-ok: #2eb85c;

  /* halos: la referencia es monocroma naranja sobre negro */
  --ldp-pool-green: rgba(245, 118, 31, 0.20);
  --ldp-pool-cyan: rgba(245, 150, 60, 0.10);
}

/* ---------- 9.1 Titulares en sans pesada ----------
   La referencia usa caja normal, no versalitas: si las quisieras en
   MAYUSCULAS es una linea, text-transform: uppercase aqui debajo. */
body.jv-landing .ld-hero h1,
body.jv-landing h2 {
  font-family: var(--jv-font-sans);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
}
body.jv-landing .ld-hero h1 em,
body.jv-landing .ld-allinone h2 em {
  font-style: normal;      /* la cursiva era propia de Fraunces */
}
body.jv-landing .ld-sub {
  font-family: var(--jv-font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- 9.2 Resplandores que eran verdes ---------- */
body.jv-landing ::selection { background: rgba(245, 118, 31, 0.35); }

body.jv-landing .ld-hero h1 em { text-shadow: 0 0 42px rgba(245, 118, 31, 0.45); }

body.jv-landing .ld-access { box-shadow: 0 10px 26px -12px rgba(245, 118, 31, 0.85); }
body.jv-landing .ld-access:hover { box-shadow: 0 14px 30px -12px rgba(245, 118, 31, 0.95); }

body.jv-landing .ld-btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 3px rgba(2, 8, 18, 0.55),
    0 14px 32px -14px rgba(245, 118, 31, 0.85);
}
body.jv-landing .ld-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 20px 42px -16px rgba(245, 118, 31, 1);
}

body.jv-landing .ld-scrollhint svg { filter: drop-shadow(0 6px 14px rgba(245, 118, 31, 0.45)); }
body.jv-landing .ld-beacon svg { filter: drop-shadow(0 0 22px rgba(245, 118, 31, 0.85)); }
body.jv-landing .ld-radar { border-color: rgba(245, 118, 31, 0.55); }
body.jv-landing .ld-steps > li:not(:last-child)::after { border-top-color: rgba(245, 118, 31, 0.35); }
body.jv-landing .ld-step-n { background: rgba(245, 118, 31, 0.14); }

body.jv-landing .ld-orbs i:nth-child(2) { --c: rgba(245, 118, 31, 0.16); }
body.jv-landing .ld-box::after {
  background: linear-gradient(140deg,
    rgba(255, 178, 122, 0.45), rgba(245, 118, 31, 0.26) 42%, transparent 72%);
}

/* ---------- 9.3 Piezas de la capa premium ---------- */
body.jv-landing .ld-section--deep,
body.jv-landing .ld-section--tel {
  background-image:
    radial-gradient(42rem 30rem at 82% 12%, rgba(245, 118, 31, 0.11), transparent 64%),
    radial-gradient(38rem 28rem at 6% 88%, rgba(245, 150, 60, 0.06), transparent 66%);
}
body.jv-landing .ld-phone-seq::before {
  background: radial-gradient(closest-side,
    rgba(245, 118, 31, 0.32),
    rgba(245, 160, 70, 0.12) 55%,
    transparent 72%);
}
body.jv-landing .ld-features > li::after {
  background: radial-gradient(120% 82% at 50% 0%,
    rgba(245, 118, 31, 0.18), transparent 70%);
}
body.jv-landing .ldp-rail > i {
  background: linear-gradient(90deg,
    var(--ld-green), #ffb27a 55%, var(--ld-green));
  box-shadow: 0 0 14px -2px rgba(245, 118, 31, 0.9);
}
body.jv-landing .ld-tel-stats li:nth-child(1) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 22px -10px rgba(245, 118, 31, 0.9);
}

/* el latido del tile destacado, ahora naranja (redefine el de la seccion 8) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ldp-tile-breathe {
    from { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 22px -10px rgba(245,118,31,.9); }
    to   { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 12px 34px -10px rgba(245,118,31,1); }
  }
}

/* ---------- 9.4 Lo semantico se queda VERDE ----------
   «Contesto» y «Disponible» son exito, no acento de marca. */
body.jv-landing .ld-tel-actions .is-ok { color: var(--ldp-ok); }
body.jv-landing .ld-tel-number em { background: var(--ldp-ok); }
body.jv-landing .ld-checks svg { color: var(--ldp-ok); }

/* ---------- 9.5 Los azules ambientales pasan a ambar ----------
   La referencia es monocroma: naranja sobre negro, sin azul.
   Se conservan los MISMOS movimientos (ld-orb, ld-aurora); solo
   cambia el color que transportan. */
body.jv-landing .ld-orbs i:nth-child(1) { --c: rgba(245, 118, 31, 0.22); }
body.jv-landing .ld-orbs i:nth-child(3) { --c: rgba(255, 170, 90, 0.13); }

body.jv-landing .ld-section--deep::before,
body.jv-landing .ld-section--tel::before {
  background:
    radial-gradient(38rem 26rem at 18% 12%, rgba(245, 118, 31, 0.15), transparent 64%),
    radial-gradient(30rem 22rem at 88% 82%, rgba(255, 170, 90, 0.10), transparent 62%);
}

/* halo cian del heroe -> ambar (la seccion 8 lo dejaba frio) */
body.jv-landing {
  --ldp-edge: rgba(255, 205, 165, 0.16);
  --ldp-edge-strong: rgba(255, 215, 180, 0.24);
}