/* ============================================================
   JW EN VIVO — LANDING PÚBLICA (index.php)
   Reproduce las referencias visuales de la raíz del proyecto:
   azul marino profundo + azul + verde, tipografías del sistema
   (Fraunces display / Archivo texto) ya cargadas por
   design-tokens.css. No afecta a ninguna otra página.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* la cabecera es fija: el ancla no debe quedar debajo */
body.jv-landing section[id] { scroll-margin-top: 88px; }

body.jv-landing {
  /* paleta local de la landing */
  --ld-bg: #04101f;
  --ld-bg-deep: #030b17;
  --ld-hero-1: #071c31;
  --ld-hero-2: #04101f;
  --ld-panel: rgba(10, 32, 55, 0.55);
  --ld-panel-solid: #0a2038;
  --ld-line: rgba(120, 190, 255, 0.16);
  --ld-line-soft: rgba(120, 190, 255, 0.09);
  --ld-green: #2eb85c;
  --ld-green-deep: #1c8f4a;
  --ld-green-soft: #7fe0a3;
  --ld-blue: #2f8fd8;
  --ld-cyan: #5fd0ff;
  --ld-text: #eef6ff;
  --ld-text-2: #93aec6;
  --ld-radius: 16px;

  margin: 0;
  min-height: 100dvh;
  background: var(--ld-bg);
  color: var(--ld-text);
  font-family: var(--jv-font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.jv-landing ::selection { background: rgba(46, 184, 92, 0.35); }

body.jv-landing :is(a, button):focus-visible {
  outline: 2px solid var(--ld-green-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

body.jv-landing h1,
body.jv-landing h2 {
  font-family: var(--jv-font-display);
  font-weight: 600;
  line-height: 1.14;
  margin: 0;
  /* reparte las líneas del titular en vez de dejar una palabra sola al final */
  text-wrap: balance;
}
/* los títulos de tarjeta van en la sans, como en la referencia */
body.jv-landing h3 {
  font-family: var(--jv-font-sans);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
/* sin líneas huérfanas en los párrafos cortos */
body.jv-landing :is(p, li) { text-wrap: pretty; }

.ld-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ld-skip { position: absolute; left: -9999px; }
.ld-skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  padding: .6rem 1rem; border-radius: 10px;
  background: var(--ld-panel-solid); color: var(--ld-text);
  border: 1px solid var(--ld-line);
}

.ld-wrap { width: min(100% - 2.5rem, 1180px); margin-inline: auto; }

/* ============================================================
   CABECERA
   ============================================================ */
.ld-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(4, 16, 31, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ld-line-soft);
}
.ld-header .ld-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
}
.ld-logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--jv-font-display);
  font-size: 1.28rem; font-weight: 700;
  color: var(--ld-text); text-decoration: none;
}
.ld-logo svg { width: 26px; height: 26px; color: var(--ld-green); }
.ld-logo span { color: var(--ld-text-2); font-weight: 500; }

.ld-nav { display: flex; justify-content: center; gap: .4rem; }
.ld-nav a {
  position: relative;
  padding: .5rem .85rem;
  color: var(--ld-text-2);
  font-size: .95rem; font-weight: 500;
  text-decoration: none;
  transition: color var(--jv-dur) var(--jv-ease);
}
.ld-nav a:hover { color: var(--ld-text); }
.ld-nav a[aria-current] { color: var(--ld-text); }
.ld-nav a[aria-current]::after {
  content: ""; position: absolute;
  left: .85rem; right: .85rem; bottom: -2px; height: 2px;
  background: var(--ld-green); border-radius: 2px;
}

.ld-access {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.15rem; border-radius: 10px;
  background: linear-gradient(135deg, var(--ld-green), var(--ld-green-deep));
  color: #fff; font-weight: 600; font-size: .93rem;
  text-decoration: none;
  box-shadow: 0 10px 26px -12px rgba(46, 184, 92, 0.85);
  transition: transform var(--jv-dur) var(--jv-ease), box-shadow var(--jv-dur) var(--jv-ease);
}
.ld-access svg { width: 17px; height: 17px; }
.ld-access:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(46, 184, 92, 0.95); }

.ld-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.ld-burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ld-text); box-shadow: 0 -7px 0 var(--ld-text), 0 7px 0 var(--ld-text);
}

/* ============================================================
   HERO
   ============================================================ */
/* pista de scroll del hero: mientras dura, el hero queda fijo y solo avanza
   la secuencia de fotogramas; la sección siguiente no aparece hasta el final */
.ld-stage {
  position: relative;
  height: 300vh;
  height: 300svh;
}

.ld-hero {
  position: sticky;
  top: 0;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 8vh, 5rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  background:
    radial-gradient(60rem 40rem at 72% 18%, rgba(24, 96, 160, 0.30), transparent 62%),
    radial-gradient(50rem 40rem at 8% 90%, rgba(12, 60, 100, 0.28), transparent 65%),
    linear-gradient(180deg, var(--ld-hero-1), var(--ld-hero-2) 70%, var(--ld-bg));
}
/* sin animación o con muy poca altura: el hero vuelve a ser una sección normal */
@media (prefers-reduced-motion: reduce), (max-height: 540px) {
  .ld-stage { height: auto; }
  .ld-hero { position: static; min-height: 0; }
}

/* retícula tipo plano */
.ld-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(120, 190, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 190, 255, 0.06) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 100%);
  pointer-events: none;
}
/* sin z-index: no crea contexto de apilamiento y así el lienzo puede fundirse
   con el fondo del hero (mix-blend-mode del canvas) */
.ld-hero > .ld-wrap { position: relative; }

.ld-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  min-height: clamp(400px, 58vh, 560px);
}

.ld-hero h1 { font-size: clamp(2.15rem, 4.4vw, 3.45rem); }
.ld-hero h1 em {
  display: block;
  font-style: italic;
  color: var(--ld-green);
}
.ld-lead {
  margin: 1.35rem 0 2.1rem;
  max-width: 34ch;
  color: var(--ld-text-2);
  font-size: 1.02rem;
}

.ld-cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.ld-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 9px;
  background: linear-gradient(135deg, var(--ld-green), var(--ld-green-deep));
  color: #fff; font-weight: 600; font-size: .98rem;
  text-decoration: none;
  box-shadow: 0 16px 34px -16px rgba(46, 184, 92, 0.9);
  transition: transform var(--jv-dur) var(--jv-ease), box-shadow var(--jv-dur) var(--jv-ease);
}
.ld-btn svg { width: 18px; height: 18px; transition: transform var(--jv-dur) var(--jv-ease); }
.ld-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(46, 184, 92, 1); }
.ld-btn:hover svg { transform: translateX(3px); }

.ld-how {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--ld-text); font-size: .95rem; font-weight: 500;
  text-decoration: none;
}
.ld-how i {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--ld-line);
  background: rgba(255, 255, 255, 0.04);
}
.ld-how svg { width: 11px; height: 11px; color: var(--ld-text); }
.ld-how:hover i { border-color: var(--ld-green); }

/* pines flotantes del fondo */
/* z-index 0 (no 1): los pines quedan por debajo del contenido del hero, que
   ahora se pinta sin z-index para permitir la fusión del lienzo */
.ld-pins { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ld-pins svg {
  position: absolute;
  width: 26px; height: 26px;
  color: var(--ld-green);
  opacity: .85;
  filter: drop-shadow(0 6px 14px rgba(46, 184, 92, 0.45));
  animation: ld-float 6s var(--jv-motion-ease-standard) infinite;
}
.ld-pins svg:nth-child(1) { top: 26%; left: 53%; animation-delay: 0s; }
.ld-pins svg:nth-child(2) { top: 14%; left: 60%; width: 20px; height: 20px; animation-delay: .8s; }
.ld-pins svg:nth-child(3) { top: 42%; left: 50%; width: 22px; height: 22px; animation-delay: 1.6s; }
.ld-pins svg:nth-child(4) { top: 55%; left: 59%; animation-delay: 2.4s; }
.ld-pins svg:nth-child(5) { top: 20%; left: 79%; width: 20px; height: 20px; animation-delay: 1.2s; }
.ld-pins svg:nth-child(6) { top: 44%; left: 86%; animation-delay: 2s; }
.ld-pins svg:nth-child(7) { top: 30%; left: 93%; width: 18px; height: 18px; animation-delay: .4s; }
@keyframes ld-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .ld-pins svg { animation: none; } }

/* secuencia de fotogramas del teléfono */
.ld-phone-seq {
  position: relative;
  justify-self: center;
  width: min(100%, 560px);
  /* zona que ocupa en la retícula: el lienzo, más alto, sobresale por arriba
     y por abajo (el hero recorta) para que el teléfono llegue al tamaño de
     la referencia sin estirar el hero */
  height: clamp(400px, 58vh, 560px);
}
.ld-phone-seq canvas {
  position: absolute;
  top: 50%; left: 50%;
  /* El teléfono ocupa el 78,6 % del alto del fotograma (medido sobre
     frame_091). Se dimensiona el lienzo por su altura para que ese 78,6 %
     quepa entero en el alto útil del hero — 100svh menos su relleno — y así
     el teléfono se vea completo también en el último fotograma. El lienzo
     puede sobresalir a los lados: su fondo es negro y con «screen» no se ve,
     y el teléfono solo ocupa el 66,7 % central del ancho. */
  height: calc((100svh - 11rem) / 0.786);
  width: auto;
  aspect-ratio: 9 / 16;
  /* --seq-dy baja el lienzo lo que ocupa la cabecera fija, que si no taparía
     el borde superior del teléfono en los últimos fotogramas */
  --seq-dy: 2rem;
  transform: translate(-50%, calc(-50% + var(--seq-dy)));
  display: block;
  /* el fondo del fotograma es casi negro: en modo «screen» desaparece contra
     el hero y solo queda el teléfono iluminado */
  mix-blend-mode: screen;
  /* difumina solo los bordes del fotograma contra el fondo del hero: el
     teléfono queda nítido y entero incluso en los últimos fotogramas */
  /* los cortes del degradado quedan fuera del teléfono, que va del 12,5 % al
     91,1 % del alto y del 16,7 % al 83,3 % del ancho del fotograma */
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
}

/* indicador de scroll */
.ld-scrollhint {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: 1.5rem;
  color: var(--ld-text-2); font-size: .85rem; text-decoration: none;
}
.ld-scrollhint b {
  display: block; width: 17px; height: 27px;
  border: 1px solid var(--ld-line); border-radius: 10px;
  position: relative;
}
.ld-scrollhint b::after {
  content: ""; position: absolute; top: 5px; left: 50%;
  width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px;
  background: var(--ld-green);
  animation: ld-wheel 1.8s var(--jv-motion-ease-standard) infinite;
}
@keyframes ld-wheel { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(8px); opacity: .2; } }
.ld-scrollhint svg { width: 18px; height: 18px; color: var(--ld-green); }
@media (prefers-reduced-motion: reduce) { .ld-scrollhint b::after { animation: none; } }

/* ============================================================
   BLOQUE DE TARJETAS (características + todo en un lugar)
   ============================================================ */
.ld-band { padding: 0 0 clamp(3rem, 7vh, 5rem); background: var(--ld-bg); }
.ld-box {
  position: relative;
  background: var(--ld-panel);
  border: 1px solid var(--ld-line-soft);
  border-radius: var(--ld-radius);
  backdrop-filter: blur(6px);
}

.ld-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none; margin: 0 0 1.6rem; padding: 3.1rem 1rem;
}
.ld-features li {
  padding: .4rem 1.9rem;
  text-align: center;
}
.ld-features li + li { border-left: 1px solid var(--ld-line-soft); }
.ld-features svg { width: 34px; height: 34px; color: var(--ld-green); }
.ld-features h3 { margin: 1.1rem 0 .6rem; font-family: var(--jv-font-sans); font-size: 1.02rem; font-weight: 700; }
.ld-features p { margin: 0; color: var(--ld-text-2); font-size: .89rem; line-height: 1.55; }

.ld-allinone {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, .75fr);
  align-items: center;
  gap: 2rem;
  padding: 2.6rem 2.4rem;
}
.ld-allinone h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.ld-allinone h2 em { display: block; font-style: italic; color: var(--ld-green); }
.ld-allinone h2::after {
  content: ""; display: block; width: 34px; height: 2px;
  margin-top: 1.1rem; background: var(--ld-green-deep); border-radius: 2px;
}
.ld-checks {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.8rem;
  list-style: none; margin: 0; padding: 0;
}
.ld-checks li { display: flex; align-items: center; gap: .7rem; font-size: .93rem; }
.ld-checks svg { flex: none; width: 19px; height: 19px; color: var(--ld-green); }

/* pin luminoso sobre el dispositivo */
.ld-beacon {
  position: relative;
  justify-self: center;
  width: min(100%, 210px);
  aspect-ratio: 1 / .82;
  display: grid; place-items: center;
}
.ld-beacon::before {
  content: ""; position: absolute; bottom: 6%; left: 50%;
  width: 78%; height: 46%;
  transform: translateX(-50%) perspective(300px) rotateX(62deg);
  border-radius: 12px;
  background: linear-gradient(160deg, #16324e, #0a1a2c);
  border: 1px solid rgba(120, 190, 255, 0.22);
  box-shadow: 0 20px 40px -18px #000;
}
.ld-beacon::after {
  content: ""; position: absolute; bottom: 4%; left: 50%;
  width: 92%; aspect-ratio: 1 / .5;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 184, 92, 0.32), transparent 72%);
}
.ld-beacon svg {
  position: relative; z-index: 2;
  width: 56px; height: 56px;
  margin-bottom: 14%;
  color: var(--ld-green);
  filter: drop-shadow(0 0 22px rgba(46, 184, 92, 0.85));
}

/* ============================================================
   SECCIONES OSCURAS (¿Cómo funciona? / Sistema telefónico)
   ============================================================ */
.ld-section { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.ld-section--deep { background: var(--ld-bg-deep); }
.ld-section--tel {
  background:
    radial-gradient(52rem 34rem at 78% 45%, rgba(20, 84, 142, 0.22), transparent 62%),
    var(--ld-bg);
}
.ld-section h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.ld-section .ld-sub {
  margin: .55rem 0 1.2rem;
  font-family: var(--jv-font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  color: var(--ld-green);
}
.ld-section .ld-sub--stack { line-height: 1.25; }
.ld-section .ld-desc { margin: 0 0 2.2rem; max-width: 38ch; color: var(--ld-text-2); font-size: .95rem; }

.ld-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* --- pasos --- */
.ld-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem; list-style: none; margin: 0; padding: 0;
  counter-reset: paso;
}
.ld-steps li { position: relative; padding-right: .5rem; }
.ld-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: 34px; right: 6px;
  border-top: 1px dashed rgba(46, 184, 92, 0.35);
}
.ld-step-n {
  display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(46, 184, 92, 0.14);
  border: 1px solid var(--ld-green);
  color: var(--ld-green); font-size: .8rem; font-weight: 700;
}
.ld-steps > li > svg { display: block; width: 30px; height: 30px; margin: 1.1rem 0 .9rem; color: var(--ld-green); }
.ld-steps h3 { font-family: var(--jv-font-sans); font-size: .9rem; font-weight: 700; margin-bottom: .45rem; }
.ld-steps p { margin: 0; color: var(--ld-text-2); font-size: .8rem; line-height: 1.5; }

/* --- diagrama teléfono + nodos --- */
.ld-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.ld-shot {
  width: 100%; height: auto; display: block;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 52%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 52%, transparent 100%);
}
.ld-nodes { display: grid; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.ld-node {
  position: relative;
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(16, 52, 88, 0.75), rgba(8, 26, 46, 0.75));
  border: 1px solid rgba(95, 208, 255, 0.28);
  box-shadow: 0 18px 40px -26px #000;
}
.ld-node::before {
  content: ""; position: absolute; top: 50%; right: 100%;
  width: clamp(20px, 3vw, 46px); height: 1px;
  background: linear-gradient(to left, var(--ld-cyan), transparent);
}
.ld-node::after {
  content: ""; position: absolute; top: 50%; right: 100%;
  width: 7px; height: 7px; margin-top: -3px;
  margin-right: clamp(20px, 3vw, 46px);
  border-radius: 50%;
  background: var(--ld-cyan);
  box-shadow: 0 0 10px var(--ld-cyan);
}
.ld-node i {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(47, 143, 216, 0.16);
  border: 1px solid rgba(95, 208, 255, 0.25);
}
.ld-node svg { width: 21px; height: 21px; color: var(--ld-cyan); }
.ld-node svg.is-green { color: var(--ld-green-soft); }
.ld-node h3 {
  font-family: var(--jv-font-sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: .2rem;
}
.ld-node p { margin: 0; color: var(--ld-text-2); font-size: .8rem; line-height: 1.4; }

/* --- lista de comprobaciones vertical --- */
.ld-checks--stack { grid-template-columns: 1fr; gap: .85rem; margin-top: 1.8rem; }

/* --- visual del sistema telefónico --- */
.ld-tel-visual { position: relative; }
.ld-panel-tel {
  position: absolute;
  left: -32%; bottom: 6%;
  width: min(88%, 330px);
  z-index: 3;
  border-radius: 12px;
  background: #0b1f36;
  border: 1px solid rgba(95, 208, 255, 0.3);
  box-shadow: 0 30px 70px -28px #000;
  font-size: .72rem;
}
.ld-panel-tel header {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 11px 11px 0 0;
  background: rgba(47, 143, 216, 0.12);
  border-bottom: 1px solid var(--ld-line);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
}
.ld-panel-tel header svg { width: 14px; height: 14px; color: var(--ld-green); }
.ld-panel-tel header b { flex: 1; font-weight: 700; }
.ld-panel-tel header span { color: var(--ld-text-2); }
.ld-tel-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .3rem; padding: .8rem .75rem .55rem;
  text-align: center;
}
.ld-tel-stats span { display: block; color: var(--ld-text-2); font-size: .62rem; }
.ld-tel-stats b { font-size: 1.15rem; font-weight: 700; font-family: var(--jv-font-sans); }
.ld-tel-stats li { list-style: none; }
.ld-tel-stats li:nth-child(1) b { color: var(--ld-green); }
.ld-tel-stats li:nth-child(2) b { color: var(--ld-blue); }
.ld-tel-stats li:nth-child(3) b { color: #e05a4e; }
.ld-tel-stats li:nth-child(4) b { color: #e3a33a; }
.ld-tel-stats { margin: 0; padding-inline: .75rem; }
.ld-tel-number {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .1rem .75rem .7rem;
  padding: .55rem .75rem;
  background: #fff; border-radius: 7px;
  color: #10233a; font-size: 1.05rem; font-weight: 700;
}
.ld-tel-number em {
  font-style: normal; font-size: .56rem; font-weight: 700; letter-spacing: .05em;
  padding: .25rem .45rem; border-radius: 4px;
  background: var(--ld-green); color: #fff;
}
.ld-tel-actions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .4rem; padding: 0 .75rem .75rem;
}
.ld-tel-actions span {
  padding: .42rem .3rem; border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: .64rem; font-weight: 600; text-align: center;
  border: 1px solid currentColor;
}
.ld-tel-actions .is-ok { color: var(--ld-green); }
.ld-tel-actions .is-no { color: #e05a4e; }
.ld-tel-actions .is-vm { color: var(--ld-blue); }
.ld-tel-actions .is-warn { color: #e3a33a; }
.ld-tel-actions .is-plain { color: #b9cbdd; grid-column: span 2; }
.ld-tel-badge {
  position: absolute; top: -18px; left: -18px; z-index: 4;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(145deg, #1c5f96, #0d3357);
  border: 1px solid rgba(95, 208, 255, 0.45);
  box-shadow: 0 0 24px -4px rgba(47, 143, 216, 0.7);
}
.ld-tel-badge svg { width: 20px; height: 20px; color: var(--ld-cyan); }

/* ============================================================
   PIE
   ============================================================ */
.ld-footer {
  border-top: 1px solid var(--ld-line-soft);
  background: var(--ld-bg-deep);
  padding: 1.9rem 0;
  color: var(--ld-text-2);
  font-size: .85rem;
}
.ld-footer .ld-wrap {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1rem;
}
.ld-footer p { margin: 0; text-align: center; }
.ld-footer nav { display: flex; gap: 1.6rem; justify-self: end; }
.ld-footer nav a { color: var(--ld-text-2); text-decoration: none; }
.ld-footer nav a:hover { color: var(--ld-text); }

/* ============================================================
   PROFUNDIDAD 3D
   Todo con perspective/transform nativos: sin librerías nuevas.
   El JS solo escribe variables (--rx, --ry, --mx, --my); la
   composición y las transiciones viven aquí.
   ============================================================ */

/* --- suelo en perspectiva del hero ---------------------------------
   z-index -1: se pinta sobre el degradado del hero pero por debajo de
   los pines y del contenido, sin crear contexto de apilamiento que
   rompa la fusión del lienzo. */
.ld-hero::after {
  content: "";
  position: absolute; z-index: -1;
  left: -30%; right: -30%; bottom: -12%; height: 78%;
  background-image:
    linear-gradient(to right, rgba(95, 208, 255, 0.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95, 208, 255, 0.30) 1px, transparent 1px);
  background-size: 92px 92px;
  transform: perspective(620px) rotateX(76deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0, rgba(0, 0, 0, .55) 40%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0, 0, 0, .55) 40%, transparent 88%);
  animation: ld-floor 9s linear infinite;
  pointer-events: none;
}
@keyframes ld-floor { to { background-position: 0 92px; } }

/* --- orbes de profundidad -------------------------------------------
   Manchas de luz que se acercan y alejan en Z. Son degradados radiales
   (no `blur`), así que el compositor las mueve sin repintar. */
.ld-orbs {
  position: absolute; z-index: -1; inset: 0;
  perspective: 1000px;
  pointer-events: none;
  overflow: hidden;
}
.ld-orbs i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 74%);
  animation: ld-orb 19s var(--jv-motion-ease-standard) infinite alternate;
}
.ld-orbs i:nth-child(1) { --c: rgba(47, 143, 216, 0.30); width: 46rem; height: 46rem; top: -16rem; left: -12rem; }
.ld-orbs i:nth-child(2) { --c: rgba(46, 184, 92, 0.16);  width: 34rem; height: 34rem; bottom: -14rem; right: 4rem; animation-delay: -7s; }
.ld-orbs i:nth-child(3) { --c: rgba(95, 208, 255, 0.14); width: 26rem; height: 26rem; top: 24%; right: -8rem; animation-delay: -13s; }
@keyframes ld-orb {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -7%, 140px) scale(1.12); }
}

/* --- aurora de las secciones oscuras --- */
.ld-section--deep::before,
.ld-section--tel::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38rem 26rem at 18% 12%, rgba(47, 143, 216, 0.16), transparent 64%),
    radial-gradient(30rem 22rem at 88% 82%, rgba(46, 184, 92, 0.12), transparent 62%);
  animation: ld-aurora 22s var(--jv-motion-ease-standard) infinite alternate;
  pointer-events: none;
}
.ld-section { position: relative; }
.ld-section > .ld-wrap { position: relative; }
@keyframes ld-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  to   { transform: translate3d(2%, 3%, 0) scale(1.08); opacity: 1; }
}

/* --- borde de luz de las cajas --- */
.ld-box::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(95, 208, 255, 0.55), rgba(46, 184, 92, 0.28) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* el titular gana cuerpo sobre el fondo profundo */
.ld-hero h1 { text-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.ld-hero h1 em { text-shadow: 0 0 42px rgba(46, 184, 92, 0.45); }

/* los pines dejan de ser planos: flotan y giran levemente en Z */
.ld-pins { perspective: 900px; }
.ld-pins svg { animation-name: ld-float3d; animation-duration: 7s; }
@keyframes ld-float3d {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
  50%      { transform: translate3d(0, -14px, 40px) rotateY(22deg); }
}

/* --- halo y sombra del teléfono del hero --- */
.ld-phone-seq::before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 74%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: radial-gradient(closest-side, rgba(47, 143, 216, 0.30), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
.ld-phone-seq::after {
  content: ""; position: absolute;
  bottom: 4%; left: 50%;
  width: 58%; aspect-ratio: 1 / .22;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2, 8, 16, 0.75), transparent 78%);
  pointer-events: none;
}
/* el puntero inclina el teléfono; las variables las escribe landing.js */
.ld-hero { --prx: 0deg; --pry: 0deg; }
.ld-phone-seq canvas {
  transform:
    perspective(1600px)
    translate(-50%, calc(-50% + var(--seq-dy)))
    rotateX(var(--prx)) rotateY(var(--pry));
  transition: transform .45s var(--jv-motion-ease-standard);
}

/* --- paralaje del hero: cada capa a su propia profundidad ---
   --hx/--hy son números (-0.5..0.5) que escribe landing.js. */
.ld-hero { --hx: 0; --hy: 0; }
.ld-hero-copy {
  transform: translate3d(calc(var(--hx) * -14px), calc(var(--hy) * -8px), 0);
  transition: transform .6s var(--jv-motion-ease-standard);
}
.ld-pins {
  transform: translate3d(calc(var(--hx) * 26px), calc(var(--hy) * 18px), 0);
  transition: transform .8s var(--jv-motion-ease-standard);
}
.ld-hero::after {
  margin-left: calc(var(--hx) * -30px);
  transition: margin-left .9s var(--jv-motion-ease-standard);
}

/* --- cabecera: gana cuerpo al despegarse del hero (sin JS) --- */
@supports (animation-timeline: scroll()) {
  .ld-header {
    animation: ld-header-3d linear both;
    animation-timeline: scroll();
    animation-range: 0 140px;
  }
  /* el fotograma inicial se declara: con `to` suelto el navegador deja el
     estado final aplicado también en la parte alta de la página */
  @keyframes ld-header-3d {
    from {
      background: rgba(4, 16, 31, 0.82);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(95, 208, 255, 0);
    }
    to {
      background: rgba(3, 11, 23, 0.94);
      box-shadow: 0 22px 44px -30px #000, 0 1px 0 0 rgba(95, 208, 255, 0.14);
    }
  }
}

/* --- inclinación 3D por puntero (tarjetas) --- */
.ld-tilt {
  --rx: 0deg; --ry: 0deg; --tz: 0px; --mx: 50%; --my: 50%;
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform .55s var(--jv-motion-ease-standard),
    box-shadow .55s var(--jv-motion-ease-standard),
    border-color .55s var(--jv-motion-ease-standard);
}
/* la inclinación se declara aparte y con la especificidad del revelado de
   motion.css (que fija `transform: none` al entrar), para que no lo pise */
.ld-tilt,
body.jv-landing.jv-motion .ld-tilt.is-in {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
}
/* mientras el puntero está encima el seguimiento es casi inmediato */
.ld-tilt.is-tilting { transition: transform .12s linear, box-shadow .4s, border-color .4s; }
/* reflejo especular que sigue al puntero */
.ld-tilt::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(26rem 26rem at var(--mx) var(--my), rgba(120, 200, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--jv-motion-ease-standard);
  pointer-events: none;
}
.ld-tilt.is-tilting::before { opacity: 1; }

/* --- barra de características: paralaje interna en Z --- */
.ld-features { transform-style: preserve-3d; }
.ld-features li {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s var(--jv-motion-ease-standard);
}
/* el icono va sobre una placa inclinada que flota por delante del texto */
.ld-features li > svg {
  display: inline-block;
  box-sizing: content-box;
  padding: 13px;
  border-radius: 17px;
  background: linear-gradient(160deg, rgba(46, 184, 92, 0.20), rgba(46, 184, 92, 0.04));
  border: 1px solid rgba(46, 184, 92, 0.30);
  box-shadow: 0 22px 34px -24px rgba(46, 184, 92, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: translateZ(26px) rotateX(5deg);
  transition: transform .45s var(--jv-motion-ease-standard), box-shadow .45s var(--jv-motion-ease-standard);
}
.ld-features li:hover > svg {
  transform: translateZ(36px) rotateX(0deg);
  box-shadow: 0 30px 44px -22px rgba(46, 184, 92, 1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ld-features h3   { transform: translateZ(16px); }
.ld-features p    { transform: translateZ(8px); }
.ld-features li:hover { transform: translateZ(12px); }
/* la barra de características se inclina la mitad que el resto de cajas:
   son cuatro columnas anchas y el giro completo se notaba de más */
.ld-features.ld-tilt,
body.jv-landing.jv-motion .ld-features.ld-tilt.is-in {
  transform:
    perspective(1500px)
    rotateX(calc(var(--rx) * .45))
    rotateY(calc(var(--ry) * .45))
    translateZ(calc(var(--tz) * .5));
}
.ld-tilt.is-tilting {
  box-shadow: 0 44px 80px -50px #000, 0 0 0 1px rgba(95, 208, 255, 0.18) inset;
  border-color: rgba(95, 208, 255, 0.28);
}

/* --- «todo en un solo lugar»: capas a distinta profundidad --- */
.ld-allinone { transform-style: preserve-3d; }
.ld-allinone h2 { transform: translateZ(20px); }
.ld-allinone .ld-checks { transform: translateZ(12px); }
.ld-allinone .ld-beacon { transform: translateZ(32px); }
/* misma contención que en la barra de características: giro al 45 % */
.ld-allinone.ld-tilt,
body.jv-landing.jv-motion .ld-allinone.ld-tilt.is-in {
  transform:
    perspective(1500px)
    rotateX(calc(var(--rx) * .45))
    rotateY(calc(var(--ry) * .45))
    translateZ(calc(var(--tz) * .5));
}
.ld-checks li { transition: transform .4s var(--jv-motion-ease-standard); }
.ld-checks li:hover { transform: translateX(6px); }

/* el faro gana anillos de radar en el plano del suelo */
.ld-beacon { transform-style: preserve-3d; }
.ld-beacon svg { animation: ld-beacon-bob 3.4s var(--jv-motion-ease-standard) infinite; }
@keyframes ld-beacon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.ld-radar {
  position: absolute; bottom: 8%; left: 50%;
  width: 62%; aspect-ratio: 1 / .5;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(46, 184, 92, 0.55);
  opacity: 0;
  animation: ld-radar 3.4s var(--jv-motion-ease-standard) infinite;
  pointer-events: none;
}
.ld-radar:nth-of-type(2) { animation-delay: 1.15s; }
.ld-radar:nth-of-type(3) { animation-delay: 2.3s; }
@keyframes ld-radar {
  0%   { transform: translateX(-50%) scale(.35); opacity: .85; }
  100% { transform: translateX(-50%) scale(1.5); opacity: 0; }
}

/* --- botones con pulsación física --- */
.ld-btn, .ld-access { transform-style: preserve-3d; }
.ld-btn:hover {
  transform: perspective(700px) translateY(-3px) rotateX(-9deg);
  box-shadow: 0 26px 46px -18px rgba(46, 184, 92, 1), 0 6px 0 -2px var(--ld-green-deep);
}
.ld-btn:active { transform: perspective(700px) translateY(0) rotateX(0deg) scale(.985); }
.ld-access:hover { transform: perspective(600px) translateY(-2px) rotateX(-8deg); }
.ld-how i { transition: transform .4s var(--jv-motion-ease-standard), border-color .4s; }
.ld-how:hover i { transform: perspective(400px) rotateY(24deg) scale(1.12); }

/* --- pasos: tarjetas que se levantan del plano --- */
.ld-steps { perspective: 1200px; }
.ld-steps li {
  transform-style: preserve-3d;
  transition: transform .45s var(--jv-motion-ease-standard);
}
.ld-steps li:hover { transform: translateZ(30px) rotateY(-5deg); }
.ld-step-n {
  transform: translateZ(24px);
  box-shadow: 0 10px 20px -10px rgba(46, 184, 92, 0.9);
}
.ld-steps > li > svg { transform: translateZ(16px); }

/* --- capturas de las secciones: se presentan en ángulo y siguen al puntero.
   El giro base y el del puntero (--ery/--erx, que escribe landing.js) se
   suman en el mismo transform para no pisarse. --- */
.ld-diagram { perspective: 1500px; --ery: 0deg; --erx: 0deg; }
.ld-diagram .ld-shot,
.ld-tel-visual {
  transform:
    rotateY(calc(-15deg + var(--ery)))
    rotateX(calc(7deg + var(--erx)))
    translateZ(0);
  transform-style: preserve-3d;
  transition: transform .7s var(--jv-motion-ease-standard);
}
.ld-diagram:hover .ld-shot,
.ld-diagram:hover .ld-tel-visual {
  transform:
    rotateY(calc(-6deg + var(--ery)))
    rotateX(calc(2deg + var(--erx)))
    translateZ(40px);
  transition-duration: .25s;
}
.ld-tel-visual .ld-shot { transform: none; }

/* los nodos acompañan el giro de la escena, pero menos: da separación */
.ld-diagram .ld-nodes {
  transform: rotateY(calc(var(--ery) * .45)) translateZ(20px);
  transition: transform .5s var(--jv-motion-ease-standard);
}

/* --- nodos: flotan por delante de la captura --- */
.ld-nodes { perspective: 1200px; }
/* el nodo conserva sus pseudoelementos (cable y punto), por eso se anima
   por hover y no con el reflejo de .ld-tilt */
.ld-node {
  transform-style: preserve-3d;
  transition: transform .5s var(--jv-motion-ease-standard), box-shadow .5s var(--jv-motion-ease-standard);
}
.ld-node i { transform: translateZ(30px); }
.ld-node div { transform: translateZ(14px); }
.ld-node:hover {
  transform: translateZ(34px) rotateY(-6deg);
  box-shadow: 0 34px 60px -32px #000;
}
.ld-node::after { animation: ld-pulse 2.6s var(--jv-motion-ease-standard) infinite; }
.ld-node:nth-child(2)::after { animation-delay: .6s; }
.ld-node:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes ld-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--ld-cyan); }
  50% { box-shadow: 0 0 18px 3px var(--ld-cyan); }
}

/* --- panel telefónico: despegado del plano de la captura --- */
.ld-panel-tel {
  transform: translateZ(90px) rotateY(6deg);
  transform-style: preserve-3d;
  transition: transform .7s var(--jv-motion-ease-standard), box-shadow .7s;
}
.ld-diagram:hover .ld-panel-tel { transform: translateZ(130px) rotateY(0deg); }
.ld-tel-badge { transform: translateZ(40px); }
.ld-tel-number { transform: translateZ(22px); }
.ld-tel-actions span { transition: transform .3s var(--jv-motion-ease-standard); }
.ld-tel-actions span:hover { transform: translateZ(18px) scale(1.06); }

/* --- los pasos se vuelven tarjetas con volumen ---
   En 2×2 y no en fila de 4: la columna mide ~560 px, y a cuatro columnas
   los títulos se partían («Explorá el / mapa»). El conector punteado se
   retira porque en cuadrícula solo uniría dos de los tres saltos; la
   numeración ya marca el orden. */
@media (min-width: 1100px) {
  .ld-steps { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ld-steps li {
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(16, 46, 76, 0.60), rgba(7, 22, 39, 0.60));
    border: 1px solid var(--ld-line-soft);
    box-shadow: 0 26px 46px -34px #000;
  }
  .ld-steps li:not(:last-child)::after { content: none; }
  .ld-steps > li > svg { margin: .95rem 0 .8rem; }
  .ld-steps li:hover {
    border-color: rgba(95, 208, 255, 0.30);
    box-shadow: 0 40px 60px -34px #000;
  }
}

/* --- el pie cierra con el mismo plano en fuga que el hero --- */
.ld-footer { position: relative; overflow: hidden; }
.ld-footer::before {
  content: ""; position: absolute;
  left: -25%; right: -25%; top: 0; height: 260%;
  background-image:
    linear-gradient(to right, rgba(95, 208, 255, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95, 208, 255, 0.22) 1px, transparent 1px);
  background-size: 78px 78px;
  transform: perspective(500px) rotateX(74deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 62%);
  pointer-events: none;
}
.ld-footer .ld-wrap { position: relative; }

/* --- entrada de secciones con giro sobre el eje X --- */
body.jv-landing.jv-motion [data-jv-reveal] {
  transform: perspective(1400px) rotateX(14deg) translate3d(0, 34px, -60px);
  transform-origin: 50% 0%;
}
/* las cajas inclinables recuperan su propio transform, no `none` */
body.jv-landing.jv-motion [data-jv-reveal].is-in:not(.ld-tilt) { transform: none; }

/* sin punteros finos (táctil) el seguimiento no aporta y cuesta batería */
@media (hover: none), (pointer: coarse) {
  .ld-tilt::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-hero::after,
  .ld-beacon svg,
  .ld-radar,
  .ld-orbs i,
  .ld-section--deep::before,
  .ld-section--tel::before,
  .ld-node::after { animation: none; }
  .ld-radar { display: none; }
  .ld-tilt,
  .ld-diagram .ld-shot,
  .ld-diagram .ld-nodes,
  .ld-tel-visual,
  .ld-panel-tel,
  .ld-hero-copy,
  .ld-pins,
  .ld-footer::before,
  .ld-phone-seq canvas { transform: none; transition: none; }
  .ld-phone-seq canvas { transform: translate(-50%, calc(-50% + var(--seq-dy))); }
  .ld-panel-tel { transform: none; }
}

/* ============================================================
   RESPONSIVE — composición de la referencia mobile
   ============================================================ */
@media (max-width: 1099px) {
  .ld-header .ld-wrap { grid-template-columns: auto 1fr auto auto; }

  .ld-hero-grid { gap: 1rem; min-height: 0; }
  .ld-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .ld-phone-seq { width: min(100%, 460px); height: clamp(360px, 50vh, 480px); }
  /* aquí el hero no es solo el teléfono: el lienzo se ciñe a su hueco y el
     teléfono (78,6 % de su alto) lo llena justo, sin recortarse */
  .ld-phone-seq canvas { height: calc(100% / 0.786); width: auto; }

  /* pasos en vertical, como en la referencia responsive */
  .ld-steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .ld-steps li {
    display: grid;
    grid-template-columns: 27px 34px 1fr;
    align-items: start;
    column-gap: .9rem;
  }
  .ld-steps li:not(:last-child)::after {
    top: 34px; bottom: -1.5rem; left: 13px; right: auto;
    width: 0; border-top: 0; border-left: 1px dashed rgba(46, 184, 92, 0.35);
  }
  .ld-steps > li > svg { margin: 0; width: 26px; height: 26px; }
  .ld-steps h3, .ld-steps p { grid-column: 3; }
  .ld-steps h3 { margin-top: .1rem; }

  /* la referencia responsive mantiene las dos columnas: no se apila */
  .ld-split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1.5rem; align-items: start; }
  .ld-section .ld-desc { max-width: none; }
  .ld-diagram { gap: 1rem; }
  .ld-node { padding: .8rem .9rem; }

  .ld-allinone { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .7fr); gap: 1.4rem; padding: 2rem 1.6rem; }
  .ld-checks { grid-template-columns: 1fr; }
  .ld-features { padding: 2.2rem .6rem; }
  .ld-features li { padding-inline: .9rem; }

  /* el panel se sale de su columna y baja, como en la referencia responsive;
     la lista de la izquierda se estrecha para no quedar debajo */
  .ld-panel-tel { width: min(150%, 300px); left: -52%; bottom: -14%; }
  .ld-checks--stack { max-width: 255px; font-size: .88rem; }
}

/* el menú pasa a hamburguesa antes de que cambie la composición */
@media (max-width: 899px) {
  .ld-header .ld-wrap { grid-template-columns: 1fr auto auto; min-height: 64px; }
  .ld-burger { display: inline-flex; }
  .ld-nav {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: .1rem;
    padding: .4rem 0 1rem;
    border-top: 1px solid var(--ld-line-soft);
  }
  .ld-nav.is-open { display: flex; }
  .ld-nav a { padding: .75rem .2rem; }
  .ld-nav a[aria-current]::after { left: .2rem; right: auto; width: 22px; }
  .ld-access { padding: .55rem .9rem; font-size: .87rem; }
}

/* teléfonos: aquí sí se apila la composición */
@media (max-width: 719px) {
  .ld-hero { padding: 4.5rem 0 1.5rem; }
  .ld-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .ld-lead { margin-inline: auto; }
  .ld-cta { justify-content: center; gap: 1.1rem; }
  .ld-phone-seq { width: min(86%, 340px); height: clamp(240px, 38svh, 400px); order: 2; }
  .ld-pins { display: none; }

  .ld-features { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 0; padding: 2rem .6rem; }
  .ld-features li { padding-inline: .9rem; }
  .ld-features li + li { border-left: 0; }
  .ld-features li:nth-child(even) { border-left: 1px solid var(--ld-line-soft); }

  .ld-allinone { grid-template-columns: 1fr; text-align: center; padding: 2rem 1.3rem; }
  .ld-allinone h2::after { margin-inline: auto; }
  .ld-checks li { justify-content: flex-start; text-align: left; max-width: 22rem; margin-inline: auto; }
  .ld-beacon { width: min(70%, 200px); }

  .ld-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .ld-diagram { grid-template-columns: 1fr; gap: 1.5rem; }
  .ld-node::before, .ld-node::after { display: none; }

  .ld-tel-visual { display: flex; flex-direction: column; align-items: center; }
  .ld-panel-tel { position: relative; left: auto; bottom: auto; width: min(100%, 340px); margin-top: -12%; }

  /* en vertical las capturas van de frente: el giro 3D sacaría el panel
     telefónico de la columna */
  .ld-diagram .ld-shot,
  .ld-tel-visual,
  .ld-diagram:hover .ld-shot,
  .ld-diagram:hover .ld-tel-visual { transform: none; }
  .ld-panel-tel,
  .ld-diagram:hover .ld-panel-tel { transform: translateZ(60px); }
  .ld-tel-badge { top: -18px; left: -14px; }

  .ld-footer .ld-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .8rem; }
  .ld-footer nav { justify-self: center; }
}

@media (max-width: 479px) {
  .ld-features { grid-template-columns: 1fr; }
  .ld-features li:nth-child(even) { border-left: 0; }
  .ld-cta { flex-direction: column; align-items: stretch; }
  .ld-btn { justify-content: center; }
  .ld-how { justify-content: center; }
}

/* pantallas muy grandes: se mantiene la proporción, no se estira */
@media (min-width: 1600px) {
  .ld-wrap { width: min(100% - 4rem, 1320px); }
  body.jv-landing { font-size: 17px; }
}