/* —— Product landings —— */
.lp-body{
  --lp-accent: var(--acento);
  --lp-glow: color-mix(in srgb, var(--lp-accent) 35%, transparent);
  --lp-phone: clamp(160px, 20vw, 300px);
  --lp-tablet: clamp(220px, 30vw, 460px);
  --lp-browser: clamp(240px, 32vw, 480px);
  --ancho-max: 1180px;
  background: var(--papel);
  overflow-x: clip;
}
.lp-body[data-lp="graf"]{ --lp-accent:#17a2b8; --lp-warm:#fecb68; --lp-deep:#0d5f6d; }
.lp-body[data-lp="mov"]{ --lp-accent:#37b47e; --lp-warm:#f0662f; --lp-deep:#1a5c40; }
.lp-body[data-lp="lab"]{ --lp-accent:#6a5cff; --lp-warm:#17a2b8; --lp-deep:#2a2466; }
.lp-body[data-lp="micvia"]{ --lp-accent:#4f7cff; --lp-warm:#17a2b8; --lp-deep:#1a2a5c; }
.lp-body[data-lp="game"]{ --lp-accent:#a855f7; --lp-warm:#f0662f; --lp-deep:#3b1a5c; }
.lp-body[data-lp="music"]{ --lp-accent:#f0662f; --lp-warm:#fecb68; --lp-deep:#5c2a1a; }
.lp-body[data-lp="consult"]{ --lp-accent:#0d9488; --lp-warm:#17a2b8; --lp-deep:#0f3d3a; }

.lp-nav .nav__logo b{ color: var(--lp-accent); }

@media (min-width: 1400px){
  .lp-body{
    --ancho-max: 1320px;
    --lp-phone: clamp(240px, 16vw, 320px);
    --lp-tablet: clamp(360px, 28vw, 500px);
    --lp-browser: clamp(360px, 30vw, 520px);
  }
}
@media (min-width: 1800px){
  .lp-body{
    --ancho-max: 1480px;
    --lp-phone: clamp(260px, 14vw, 340px);
    --lp-tablet: clamp(400px, 26vw, 540px);
    --lp-browser: clamp(400px, 28vw, 560px);
  }
}

/* progress rail */
.lp-rail{
  position: fixed; top: 50%; right: clamp(.6rem, 1.2vw, 1.1rem); z-index: 40;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .55rem;
  pointer-events: none;
}
.lp-rail span{
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--linea); transition: .35s cubic-bezier(.22,1.15,.36,1);
}
.lp-rail span.on{
  height: 22px; background: var(--lp-accent);
  box-shadow: 0 0 16px var(--lp-glow);
}
@media (max-width: 900px){ .lp-rail{ display:none; } }

/* —— HERO —— */
.lp-hero{
  position: relative;
  min-height: min(100svh, 920px);
  display: grid;
  align-items: center;
  padding: clamp(4.5rem, 8vh, 6rem) 0 clamp(1.5rem, 3vh, 2.5rem);
  overflow-x: clip;
  overflow-y: visible;
}
.lp-hero__bg{
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 70% 30%, var(--lp-glow), transparent 60%),
    radial-gradient(ellipse 40% 35% at 20% 80%, color-mix(in srgb, var(--lp-warm) 22%, transparent), transparent 55%);
  animation: lpDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes lpDrift{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(-3%, 2%) scale(1.06); }
}
.lp-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.lp-kicker{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: clamp(.65rem, 1.2vw, .72rem); letter-spacing: .14em;
  text-transform: uppercase; color: var(--lp-accent); margin-bottom: 1.1rem;
}
.lp-kicker::before{
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lp-accent); box-shadow: 0 0 0 4px var(--lp-glow);
  animation: lpPulse 2s ease infinite;
}
@keyframes lpPulse{
  50%{ box-shadow: 0 0 0 10px transparent; }
}
.lp-hero h1{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 4.6rem);
  line-height: .95; letter-spacing: -.04em;
  margin-bottom: 1.1rem;
}
.lp-hero h1 em{
  font-style: normal; color: var(--lp-accent);
  background: linear-gradient(120deg, var(--lp-accent), var(--lp-warm));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lp-hero__sub{
  font-size: clamp(.98rem, 1.8vw, 1.25rem);
  color: var(--tinta-suave); max-width: 34ch; margin-bottom: 1.8rem;
}
.lp-hero__cta{ display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-hero__meta{
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem;
}
.lp-hero__meta i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(.62rem, 1vw, .68rem);
  line-height: 1;
  padding: .42rem .7rem .38rem;
  border: 1px solid var(--linea);
  border-radius: 99px;
  color: var(--tinta-suave);
}

.lp-hero__stage{
  position: relative;
  display: grid; place-items: center;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  perspective: 1200px;
  overflow: visible;
}
.lp-hero__orbit{
  position: absolute;
  z-index: 0;
  inset: auto;
  width: min(78%, 22rem);
  height: min(78%, 22rem);
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--lp-accent) 38%, transparent);
  animation: lpSpin 28s linear infinite;
  pointer-events: none;
  overflow: visible;
}
/* Un poco más grande que el device, pero siempre contenido en el stage */
.lp-hero__stage:has(.phone):not(:has(.lp-duo)) .lp-hero__orbit{
  width: min(92%, 17rem);
  height: min(92%, 17rem);
}
.lp-hero__stage:has(.tablet) .lp-hero__orbit{
  width: min(108%, 26rem);
  height: min(108%, 26rem);
}
.lp-hero__stage:has(.browser):not(:has(.lp-duo)) .lp-hero__orbit{
  width: min(112%, 28rem);
  height: min(112%, 28rem);
}
.lp-hero__stage:has(.lp-duo) .lp-hero__orbit{
  width: min(120%, 30rem);
  height: min(120%, 30rem);
}
/* Punto real fuera del stroke (no se recorta con border-radius) */
.lp-hero__orbit::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 16px var(--lp-glow);
}
.lp-hero__stage .phone,
.lp-hero__stage .tablet,
.lp-hero__stage .browser,
.lp-hero__stage .lp-duo{
  position: relative;
  z-index: 1;
  max-width: 100%;
}
@keyframes lpSpin{ to{ transform: rotate(360deg); } }

.lp-scroll-hint{
  position: absolute; bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tenue);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.lp-scroll-hint b{
  width: 1px; height: 36px; background: linear-gradient(var(--lp-accent), transparent);
  animation: lpHint 1.6s ease infinite;
}
@keyframes lpHint{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); opacity: 1; }
  100%{ transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* —— STICKY SHOWCASE —— */
.lp-show{
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 6rem);
}
.lp-show__track{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, clamp(280px, 34vw, 520px));
  gap: clamp(1.25rem, 3.5vw, 4rem);
  align-items: start;
}
.lp-show__sticky{
  --orbit: min(88%, 18rem);
  position: sticky;
  top: max(5rem, 8vh);
  height: min(82vh, 780px);
  display: grid;
  place-items: center;
  perspective: 1400px;
  z-index: 2;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.lp-show__glow{
  position: absolute;
  z-index: 0;
  width: min(70%, 16rem);
  height: min(70%, 16rem);
  border-radius: 50%;
  background: radial-gradient(circle, var(--lp-glow), transparent 70%);
  filter: blur(8px); pointer-events: none;
  transition: background .6s;
}
/* Anillo punteado (sin puntito en el background → no se corta) */
.lp-show__sticky::before{
  content: '';
  position: absolute;
  z-index: 0;
  width: var(--orbit);
  height: var(--orbit);
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--lp-accent) 40%, transparent);
  background: transparent;
  animation: lpSpin 28s linear infinite;
  pointer-events: none;
}
/* Puntito real orbitando (círculo completo) */
.lp-show__sticky::after{
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 16px var(--lp-glow);
  animation: lpOrbitDot 28s linear infinite;
  pointer-events: none;
}
.lp-show__sticky:has(.tablet),
.lp-show__sticky:has(.browser),
.lp-show__sticky:has(.lp-duo){
  --orbit: min(102%, 22rem);
}
@keyframes lpOrbitDot{
  from{ transform: rotate(0deg) translateY(calc(var(--orbit) / -2)) rotate(0deg); }
  to{ transform: rotate(360deg) translateY(calc(var(--orbit) / -2)) rotate(-360deg); }
}
.lp-show__sticky .phone,
.lp-show__sticky .tablet,
.lp-show__sticky .browser,
.lp-show__sticky .lp-duo{
  position: relative;
  z-index: 2;
  max-width: 100%;
}
/* Phone: cabe entero en la columna sticky (ancho limitado por altura) */
.lp-show__sticky .phone{
  --sticky-h: min(82vh, 780px);
  width: min(100%, var(--lp-phone), calc((var(--sticky-h) - 16px) * 9 / 19.2));
  max-height: calc(var(--sticky-h) - 16px);
  height: auto;
  aspect-ratio: 9 / 19.2;
}
.lp-show__sticky .tablet{
  width: min(100%, var(--lp-tablet));
  max-height: calc(min(82vh, 780px) - 16px);
  height: auto;
}
.lp-show__sticky .browser,
.lp-show__sticky .lp-duo{
  width: min(100%, var(--lp-browser));
  max-height: calc(min(82vh, 780px) - 16px);
}

.lp-stages{ display: flex; flex-direction: column; gap: 0; min-width: 0; }
.lp-stage{
  min-height: min(85vh, 820px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 4vh, 3rem) 0;
  opacity: .28;
  transform: translateY(12px);
  transition: opacity .55s, transform .55s cubic-bezier(.22,1.15,.36,1);
}
.lp-stage.on{
  opacity: 1;
  transform: none;
}
.lp-stage__num{
  font-family: var(--mono); font-size: clamp(.68rem, 1.2vw, .75rem); letter-spacing: .14em;
  color: var(--lp-accent); margin-bottom: .8rem;
}
.lp-stage h2{
  font-family: var(--display); font-size: clamp(1.55rem, 3.2vw, 2.6rem);
  line-height: 1.05; letter-spacing: -.03em; margin-bottom: .9rem;
}
.lp-stage p{
  color: var(--tinta-suave); font-size: clamp(.95rem, 1.5vw, 1.05rem); max-width: 38ch;
}
/* Párrafo de profundidad: explica el "por qué" de cada pantalla, más largo y
   algo más tenue que el lead. */
.lp-stage__det{
  margin-top: .95rem !important;
  color: var(--tenue) !important;
  font-size: clamp(.9rem, 1.3vw, .98rem) !important;
  line-height: 1.6; max-width: 48ch !important;
}
.lp-stage__det b{ color: var(--tinta-suave); font-weight: 600; }

/* —— PHONE —— */
.phone{
  --w: var(--lp-phone);
  width: var(--w);
  max-width: 100%;
  aspect-ratio: 9 / 19.2;
  position: relative;
  transform-style: preserve-3d;
  filter: none;
  /* mismo radio que el bisel (.phone__shell) para que la SOMBRA sea
     redondeada y no dibuje un recuadro en las esquinas */
  border-radius: 2.4rem;
  box-shadow: 0 28px 48px rgba(0,0,0,.32);
}
.phone__shell{
  position: absolute; inset: 0;
  border-radius: 2.4rem;
  background: linear-gradient(145deg, #2a2e36, #0c0e12 55%, #1a1d24);
  padding: clamp(7px, 1.2vw, 10px);
  box-shadow:
    inset 0 0 0 2px #3a3f4a,
    inset 0 0 0 5px #111,
    0 0 0 1px rgba(255,255,255,.06);
}
.phone__screen{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 1.85rem;
  overflow: hidden;
  background: #0a0c10;
  isolation: isolate;
}
.phone__notch{
  position: absolute; top: 8px; left: 50%; z-index: 5;
  transform: translateX(-50%);
  width: 38%; height: 18px; border-radius: 99px;
  background: #0a0c10;
  box-shadow: 0 0 0 2px #0a0c10;
}
.phone__home{
  position: absolute; bottom: 7px; left: 50%; z-index: 5;
  transform: translateX(-50%);
  width: 34%; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.35);
}
.phone__shine{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: 1.85rem;
  background: linear-gradient(125deg, rgba(255,255,255,.06), transparent 38%, transparent 62%, rgba(255,255,255,.02));
}

.phone__slide{
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04) translateY(8px);
  transition: opacity .55s, transform .7s cubic-bezier(.22,1.15,.36,1);
  pointer-events: none;
}
.phone__slide.on{
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1;
}
.phone__slide img.lp-shot{
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.phone__screen > img.lp-shot,
.tablet__screen > img.lp-shot{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.phone__slide:has(img.lp-shot) .lp-ui{ display: none; }

/* —— TABLET —— */
.tablet{
  --w: var(--lp-tablet);
  width: var(--w);
  max-width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  transform-style: preserve-3d;
  filter: none;
  /* mismo radio que el bisel (.tablet__shell) → sombra redondeada */
  border-radius: 1.35rem;
  box-shadow: 0 24px 44px rgba(0,0,0,.3);
}
.lp-hero__stage .tablet{
  --w: min(100%, var(--lp-tablet));
}
.lp-show__sticky .tablet{
  width: min(100%, var(--lp-tablet));
  --w: min(100%, var(--lp-tablet));
}
.lp-show__sticky .phone{
  --sticky-h: min(82vh, 780px);
  width: min(100%, var(--lp-phone), calc((var(--sticky-h) - 16px) * 9 / 19.2));
  --w: min(100%, var(--lp-phone), calc((var(--sticky-h) - 16px) * 9 / 19.2));
  max-height: calc(var(--sticky-h) - 16px);
}
.lp-show__sticky .browser{
  width: min(100%, var(--lp-browser));
}
.tablet__shell{
  position: absolute; inset: 0;
  border-radius: 1.35rem;
  background: linear-gradient(145deg, #2a2e36, #0c0e12 55%, #1a1d24);
  padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 16px);
  box-shadow:
    inset 0 0 0 2px #3a3f4a,
    inset 0 0 0 5px #111,
    0 0 0 1px rgba(255,255,255,.06);
}
.tablet__cam{
  position: absolute; top: 6px; left: 50%; z-index: 5;
  transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #1a1d24;
  box-shadow: inset 0 0 0 1px #3a3f4a, 0 0 0 2px #0c0e12;
}
.tablet__screen{
  position: relative;
  width: 100%; height: 100%;
  border-radius: .75rem;
  overflow: hidden;
  background: #0a0c10;
  isolation: isolate;
}
.tablet__shine{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: .75rem;
  background: linear-gradient(125deg, rgba(255,255,255,.05), transparent 40%, transparent 60%, rgba(255,255,255,.015));
}
.tablet .phone__slide{ border-radius: 0; }
.tablet .lp-ui{ padding: 1.2rem 1.1rem 1rem; font-size: .78rem; }
.tablet .lp-ui__title{ font-size: 1.35rem; }

/* —— DUO phone + browser —— */
.lp-duo{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 48vw, 480px);
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.lp-duo .phone,
.lp-duo .browser{
  transition:
    opacity .55s,
    transform .7s cubic-bezier(.22,1.15,.36,1),
    filter .55s;
}
.lp-duo .browser{
  position: absolute;
  width: min(var(--lp-browser), 78%);
  z-index: 1;
  opacity: .4;
  filter: saturate(.85);
  transform: translate(22%, -6%) scale(.82) rotateY(-8deg);
}
.lp-duo .phone{
  position: relative;
  z-index: 2;
  --w: min(var(--lp-phone), 58vw);
}
.lp-duo.is-web .browser{
  opacity: 1;
  filter: none;
  z-index: 2;
  transform: translate(6%, 0) scale(1) rotateY(-4deg);
}
.lp-duo.is-web .phone{
  opacity: .42;
  z-index: 1;
  filter: saturate(.8);
  transform: translate(-46%, 14%) scale(.72) rotateY(10deg);
}
.lp-duo.is-app .phone{
  opacity: 1;
  z-index: 2;
  filter: none;
  transform: none;
}
.lp-duo.is-app .browser{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transform: translate(24%, -8%) scale(.8) rotateY(-10deg);
}
.lp-hero__stage .lp-duo{
  min-height: clamp(340px, 50vw, 520px);
}
.lp-hero__stage .lp-duo .browser{
  width: min(var(--lp-browser), 70%);
}
.lp-device-badge{
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font-family: var(--mono); font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  padding: .36rem .7rem .32rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lp-accent) 40%, var(--linea));
  color: var(--lp-accent);
  background: color-mix(in srgb, var(--lp-accent) 10%, transparent);
  margin-bottom: .85rem;
}

/* fake UI placeholders */
.lp-ui{
  height: 100%; padding: 2.2rem .9rem 1.2rem;
  display: flex; flex-direction: column; gap: .65rem;
  color: #e8ebe9; font-family: var(--sans); font-size: .72rem;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--lp-accent) 40%, transparent), transparent 55%),
    #12151c;
}
.lp-ui__bar{
  display: flex; justify-content: space-between; align-items: center;
  opacity: .7; font-family: var(--mono); font-size: .58rem;
}
.lp-ui__title{
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15;
}
.lp-ui__card{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: .75rem;
}
.lp-ui__row{ display: flex; gap: .5rem; align-items: center; }
.lp-ui__dot{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lp-accent); flex-shrink: 0;
}
.lp-ui__pill{
  height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.lp-ui__pill span{
  display: block; height: 100%; width: 62%;
  background: var(--lp-accent); border-radius: inherit;
}
.lp-ui__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
}
.lp-ui__tile{
  aspect-ratio: 1; border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .55rem; color: rgba(255,255,255,.55);
}
.lp-ui__hint{
  margin-top: auto; text-align: center;
  font-family: var(--mono); font-size: .52rem; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
}

/* —— BROWSER —— */
.browser{
  width: min(100%, var(--lp-browser));
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  background: #1a1d24;
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
  overflow: hidden;
  transform-style: preserve-3d;
  border: 1px solid rgba(255,255,255,.08);
}
.browser__chrome{
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem; background: #12151c;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.browser__dots{ display: flex; gap: .35rem; }
.browser__dots i{
  width: 8px; height: 8px; border-radius: 50%; font-style: normal;
  background: #3a404c;
}
.browser__dots i:nth-child(1){ background: #ff5f57; }
.browser__dots i:nth-child(2){ background: #febc2e; }
.browser__dots i:nth-child(3){ background: #28c840; }
.browser__url{
  flex: 1; height: 22px; border-radius: 6px;
  background: #0c0e12; color: #8b93a1;
  font-family: var(--mono); font-size: .62rem;
  display: flex; align-items: center; padding: 0 .6rem;
}
.browser__screen{ position: relative; height: calc(100% - 38px); overflow: hidden; }
.browser__screen > img.lp-shot{
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.browser .phone__slide{ border-radius: 0; }

/* —— RELATO / EN PROFUNDIDAD (explicación ampliada del proyecto) —— */
.lp-relato{ padding: clamp(3rem, 8vw, 5.5rem) 0; }
.lp-relato__grid{ display: grid; gap: clamp(1.4rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 880px){
  .lp-relato__grid{ grid-template-columns: .85fr 1.15fr; align-items: start; }
}
.lp-relato__kicker{
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lp-accent); font-weight: 700;
  display: inline-flex; align-items: center; gap: .6rem;
}
.lp-relato__kicker::before{ content:''; width: 26px; height: 2px; background: var(--lp-accent); }
.lp-relato h2{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em;
  margin: .8rem 0 0; text-wrap: balance; max-width: 18ch;
}
.lp-relato__cuerpo p{
  color: var(--tinta-suave); font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.65; margin: 0 0 1.05rem; max-width: 64ch;
}
.lp-relato__cuerpo p b{ color: var(--tinta); font-weight: 600; }
.lp-relato__lista{ list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.lp-relato__lista li{
  position: relative; padding-left: 1.6rem;
  color: var(--tinta-suave); font-size: .96rem; line-height: 1.5;
}
.lp-relato__lista li::before{
  content: ''; position: absolute; left: 0; top: .5em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--lp-accent);
}
.lp-relato__lista li b{ color: var(--tinta); font-weight: 600; }

/* —— STATS BAND —— */
.lp-stats{
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-block: 1px solid var(--linea);
  background:
    linear-gradient(90deg, transparent, var(--lp-glow), transparent);
  background-size: 100% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.lp-stats__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem); text-align: center;
}
.lp-stats strong{
  display: block;
  font-family: var(--display); font-size: clamp(1.7rem, 4vw, 3rem);
  letter-spacing: -.03em; color: var(--lp-accent);
}
.lp-stats span{ color: var(--tinta-suave); font-size: clamp(.85rem, 1.4vw, .95rem); }

/* —— CTA —— */
.lp-cta{
  position: relative;
  padding: clamp(3.5rem, 7vw, 7rem) 0;
  text-align: center;
  overflow: hidden;
}
.lp-cta__bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 80%, var(--lp-glow), transparent 70%);
  pointer-events: none;
}
.lp-cta h2{
  font-family: var(--display); font-size: clamp(1.7rem, 4vw, 3.2rem);
  letter-spacing: -.03em; margin-bottom: 1rem;
}
.lp-cta p{ color: var(--tinta-suave); max-width: 40ch; margin: 0 auto 1.8rem; }
.lp-cta__actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }

/* deck of phones at end */
.lp-deck{
  position: relative; height: clamp(160px, 28vw, 240px); margin: 0 auto 2.5rem;
  width: min(420px, 90vw);
  perspective: 900px;
}
.lp-deck .phone,
.lp-deck .tablet,
.lp-deck .browser,
.lp-deck .deck-card{
  --w: clamp(90px, 18vw, 130px);
  width: var(--w);
  position: absolute; left: 50%; top: 20px;
  margin-left: calc(var(--w) / -2);
  transition: transform .7s cubic-bezier(.22,1.15,.36,1);
}
.lp-deck .tablet{
  --w: clamp(110px, 22vw, 160px);
  aspect-ratio: 4/3;
}
.lp-deck .browser{
  --w: clamp(130px, 26vw, 170px);
  aspect-ratio: 16 / 10;
}
.lp-deck .deck-card{
  --w: clamp(100px, 20vw, 140px);
  aspect-ratio: 3 / 4;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #2a2e36, #0c0e12 55%, #1a1d24);
  padding: 6px;
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
  display: flex;
}
.lp-deck .deck-card > span{
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: .85rem;
  background: var(--deck-bg, #151820);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.72rem, 2vw, .9rem);
  letter-spacing: -.01em;
}
.lp-deck.on .phone:nth-child(1),
.lp-deck.on .tablet:nth-child(1),
.lp-deck.on .browser:nth-child(1),
.lp-deck.on .deck-card:nth-child(1){ transform: translate(-90px, 10px) rotate(-14deg); }
.lp-deck.on .phone:nth-child(2),
.lp-deck.on .tablet:nth-child(2),
.lp-deck.on .browser:nth-child(2),
.lp-deck.on .deck-card:nth-child(2){ transform: translate(0, -8px) rotate(0deg); }
.lp-deck.on .phone:nth-child(3),
.lp-deck.on .tablet:nth-child(3),
.lp-deck.on .browser:nth-child(3),
.lp-deck.on .deck-card:nth-child(3){ transform: translate(90px, 10px) rotate(14deg); }

/* —— Breakpoints —— */
@media (max-width: 1100px){
  .lp-show__track{
    grid-template-columns: minmax(0, 1fr) minmax(200px, clamp(240px, 36vw, 400px));
  }
}

@media (max-width: 900px){
  .lp-hero{
    min-height: auto;
    padding: 4.5rem 0 1.5rem;
  }
  .lp-hero__grid{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }
  .lp-hero__sub{ margin-inline: auto; }
  .lp-hero__cta, .lp-hero__meta{ justify-content: center; }
  .lp-hero__stage{
    order: -1;
    width: min(100%, 420px);
    margin-inline: auto;
    overflow: visible;
  }
  .lp-hero__orbit{ opacity: .4; }

  .lp-body{
    --lp-phone: clamp(160px, 46vw, 240px);
    --lp-tablet: clamp(220px, 82vw, 380px);
    --lp-browser: clamp(220px, 86vw, 400px);
  }

  .lp-duo{ min-height: clamp(280px, 68vw, 380px); }
  .lp-duo .browser{
    width: min(78%, var(--lp-browser));
    transform: translate(10%, -4%) scale(.78);
  }
  .lp-duo.is-web .phone{
    transform: translate(-24%, 16%) scale(.68);
  }
  .lp-duo.is-app .browser{
    transform: translate(14%, -6%) scale(.74);
  }

  .lp-show{ overflow-x: clip; }
  .lp-show__track{ grid-template-columns: 1fr; }
  .lp-show__sticky{
    position: relative; top: auto; height: auto;
    margin-bottom: 1.25rem; order: -1;
    width: min(100%, 400px);
    margin-inline: auto;
    overflow: visible;
  }
  .lp-show__sticky .phone{
    width: min(70%, var(--lp-phone));
    max-height: none;
  }
  .lp-show__sticky .tablet{
    width: min(100%, var(--lp-tablet));
    max-height: none;
  }
  .lp-show__sticky .browser,
  .lp-show__sticky .lp-duo{
    width: min(100%, var(--lp-browser));
    max-height: none;
  }

  .lp-stage{
    min-height: auto;
    padding: 1.75rem 0 2.5rem;
    opacity: 1;
    transform: none;
  }
  .lp-stats__grid{ grid-template-columns: 1fr; gap: 1.1rem; }
  .lp-scroll-hint{ display: none; }

  /* —— En móvil: cada dispositivo DEBAJO de su texto ——
     En desktop la sección es un dispositivo FIJO que cambia con el scroll.
     En móvil ocultamos ese dispositivo y js/landing.js inserta, debajo del
     texto de cada etapa, su pantalla dentro del marco (celular / tablet /
     navegador). Así queda texto → captura → texto → captura, y se ven todas. */
  .lp-show__sticky{ display: none; }

  .lp-stage__device{
    display: flex; justify-content: center;
    margin: 1.3rem 0 .4rem; width: 100%;
  }
  .lp-stage__device .phone,
  .lp-stage__device .tablet,
  .lp-stage__device .browser{
    position: relative; transform: none; opacity: 1; filter: none; margin: 0; z-index: 1;
  }
  .lp-stage__device .phone{ width: min(74%, 240px); }
  .lp-stage__device .tablet{ width: min(98%, 420px); }
  .lp-stage__device .browser{ width: min(100%, 440px); }
  .lp-stage__device .phone__slide,
  .lp-stage__device .browser__slide{ transition: none; }
}

@media (max-width: 640px){
  .lp-hero{ padding: 4.25rem 0 1.25rem; }
  .lp-hero h1{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .lp-hero__cta{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .lp-hero__cta .boton{
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }
  .lp-hero__meta{
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  /* En landings móvil: deja "← Proyectos" + CTA + tema */
  .lp-nav .nav__links > a.nav__link{ display: inline-flex; }
  .lp-nav .nav__links > a.nav__link:nth-of-type(n+2){ display: none; }
  .lp-body{
    --lp-phone: clamp(160px, 52vw, 230px);
    --lp-tablet: clamp(220px, 88vw, 360px);
    --lp-browser: clamp(220px, 90vw, 380px);
  }
  .lp-cta__actions{ width: 100%; }
  .lp-cta__actions .boton{ width: min(100%, 320px); justify-content: center; }
  .lp-deck.on .phone:nth-child(1),
  .lp-deck.on .tablet:nth-child(1),
  .lp-deck.on .browser:nth-child(1),
  .lp-deck.on .deck-card:nth-child(1){ transform: translate(-56px, 8px) rotate(-10deg); }
  .lp-deck.on .phone:nth-child(3),
  .lp-deck.on .tablet:nth-child(3),
  .lp-deck.on .browser:nth-child(3),
  .lp-deck.on .deck-card:nth-child(3){ transform: translate(56px, 8px) rotate(10deg); }
}

@media (max-width: 400px){
  .lp-hero h1{ font-size: 1.75rem; }
  .lp-kicker{ font-size: .6rem; letter-spacing: .1em; }
  .lp-body{
    --lp-phone: min(58vw, 200px);
    --lp-tablet: min(92vw, 300px);
    --lp-browser: min(94vw, 310px);
  }
}

/* Notebooks / pantallas bajas: achicar phone para que no se corte */
@media (max-height: 820px) and (min-width: 901px){
  .lp-body{
    --lp-phone: clamp(140px, 15vw, 230px);
  }
  .lp-show__sticky{
    height: min(88vh, 640px);
    top: max(4.25rem, 6vh);
  }
  .lp-show__sticky .phone{
    --sticky-h: min(88vh, 640px);
    width: min(100%, var(--lp-phone), calc((var(--sticky-h) - 12px) * 9 / 19.2));
    max-height: calc(var(--sticky-h) - 12px);
  }
}

@media (prefers-reduced-motion: reduce){
  .lp-hero__bg, .lp-hero__orbit, .lp-scroll-hint b, .lp-kicker::before,
  .lp-show__sticky::before, .lp-show__sticky::after{ animation: none; }
  .phone, .browser{ transition: none !important; transform: none !important; }
}