/* =========================================================================
   RestoTicketGo — la landing de venta, versión CLARA (estilo de las
   referencias de Alejandro): fondo cálido, naranja vivo, espacios amplios,
   chips flotando, marquesina en movimiento y capturas REALES de la app.
   Carga después de style.css y le da la vuelta al tema solo aquí.
   ========================================================================= */

html{
  overflow-x:hidden;overflow-x:clip; /* solo la landing carga este css */
  scroll-behavior:smooth;
  scroll-padding-top:92px;   /* que el ancla no quede debajo de la barra píldora */
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body.landing{
  overflow-x:hidden;overflow-x:clip;
  --ln-fondo:#FFF8F3;      /* blanco cálido */
  --ln-tinta:#191210;      /* casi negro cálido */
  --ln-gris:#6E625B;
  --ln-naranja:#E65B25;    /* el naranja EXACTO del logo */
  --ln-naranja-osc:#C9490F;
  --ln-crema:#FFE9DC;
  --ln-borde:#F0DFD4;
  --ln-oscuro:#141014;
  background:var(--ln-fondo);color:var(--ln-tinta);
  font-size:16px;line-height:1.5;
}
body.landing ::selection{background:rgba(230,91,37,.25);color:var(--ln-tinta)}

/* ── Botones propios (los .btn de style.css son del panel oscuro) ── */
.lbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;
  font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:transform .14s var(--ease-salida,cubic-bezier(.23,1,.32,1)),
             box-shadow .2s ease,background-color .15s ease;
}
.lbtn:active{transform:scale(.97)}
.lbtn-pri{background:var(--ln-naranja);color:#fff;box-shadow:0 10px 26px -10px rgba(230,91,37,.6)}
@media (hover:hover){ .lbtn-pri:hover{background:var(--ln-naranja-osc);transform:translateY(-2px)} }
.lbtn-ghost{background:transparent;color:var(--ln-tinta);box-shadow:inset 0 0 0 2px var(--ln-tinta)}
@media (hover:hover){ .lbtn-ghost:hover{background:rgba(25,18,16,.05)} }
.lbtn-borde{background:#fff;color:var(--ln-tinta);box-shadow:inset 0 0 0 1.5px var(--ln-borde)}
@media (hover:hover){ .lbtn-borde:hover{box-shadow:inset 0 0 0 2px var(--ln-naranja);color:var(--ln-naranja)} }
.lbtn-blanco{background:#fff;color:var(--ln-naranja);box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
.lbtn-xl{min-height:56px;padding:0 30px;font-size:16px}
.lbtn-bloque{width:100%}

/* ── La barra píldora ── */
.ln-barra{position:sticky;top:12px;z-index:60;padding:0 16px}
.ln-pill{
  max-width:960px;margin:0 auto;display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--ln-borde);border-radius:999px;padding:10px 12px 10px 22px;
  box-shadow:0 12px 34px -18px rgba(25,18,16,.25);
}
.ln-logo{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ln-tinta);text-decoration:none}
.ln-logo b{color:var(--ln-naranja)}
.ln-logo-img{display:block;height:38px;max-width:240px;object-fit:contain}
.ln-pie .ln-logo-img{height:26px}
.ln-links{flex:1;display:flex;gap:4px;justify-content:center}
.ln-links a{
  padding:9px 14px;border-radius:999px;color:var(--ln-gris);
  font-size:14px;font-weight:600;text-decoration:none;transition:color .15s ease,background-color .15s ease;
}
@media (hover:hover){ .ln-links a:hover{color:var(--ln-tinta);background:var(--ln-crema)} }
@media (max-width:640px){ .ln-links{display:none} .ln-pill{justify-content:space-between} }

/* ── El hero ── */
.ln-hero{max-width:1080px;margin:0 auto;padding:72px 22px 0;text-align:center}
.ln-sello{
  display:inline-block;padding:9px 18px;border-radius:999px;margin-bottom:24px;
  background:var(--ln-crema);color:var(--ln-naranja-osc);
  font-size:13px;font-weight:800;letter-spacing:.02em;
}
.ln-hero h1{
  font-size:clamp(40px,7.4vw,92px);font-weight:800;line-height:1.02;
  letter-spacing:-.04em;text-wrap:balance;
}
.ln-hero h1 em,.ln-sec h2 em,.ln-cierre h2 em{font-style:italic;color:var(--ln-naranja)}
.ln-sub{
  max-width:62ch;margin:26px auto 0;color:var(--ln-gris);
  font-size:clamp(16px,1.6vw,22px);line-height:1.6;
}
.ln-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* el escenario: el celular REAL rodeado de chips que flotan */
.ln-escenario{position:relative;max-width:1040px;margin:70px auto 0;padding-bottom:34px}
.ln-brillo{
  position:absolute;inset:auto 0 -20%;height:120%;pointer-events:none;z-index:0;
  background:radial-gradient(58% 62% at 50% 62%, rgba(230,91,37,.16), transparent 70%);
}
/* ── El APARATO realista (pedido de Alejandro: "celulares reales") ──
   Marco tipo iPhone: cuerpo metálico en degradado, biseles, isla dinámica
   con su cámara, y botones laterales de verdad. Todo CSS, cero imágenes. */
.ln-dev{
  position:relative;display:block;
  padding:11px;border-radius:52px;
  background:linear-gradient(145deg,#4A4A52 0%,#1B1B20 30%,#101014 70%,#3A3A42 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.14),   /* filo pulido */
    inset 0 0 0 7px #0A0A0D,                 /* bisel negro */
    0 46px 90px -32px rgba(25,18,16,.5);
}
.ln-dev img{display:block;width:100%;height:auto;border-radius:41px;background:#0C0C10}
/* LA ISLA DINÁMICA, clavada sobre la barra de estado de la captura.
   Estaba en top:2.2% y quedaba FLOTANDO por encima de esa barra, sin
   coincidir con nada: se leía como una mancha negra pegada al vidrio.
   Medido sobre portada.webp (600x1298): la barra de estado de la captura
   —la hora a la izquierda, señal y batería a la derecha— ocupa del 3,4% al
   4,5% del alto, con el centro vacío. La isla va centrada en ese hueco, que
   es exactamente donde estaría en un iPhone de verdad. */
.ln-dev-cel::before{
  content:"";position:absolute;z-index:3;top:3.8%;left:50%;transform:translateX(-50%);
  width:30%;height:2.4%;border-radius:999px;background:#000;
  background-image:radial-gradient(circle at 80% 50%, #1E2B36 0 3px, #0A0F14 4px, transparent 5px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.ln-dev-cel::after{                           /* el vidrio: un brillo diagonal */
  content:"";position:absolute;inset:11px;border-radius:41px;pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.09) 0%, transparent 26%);
}
.ln-lat{                                      /* botones laterales */
  position:absolute;width:3.5px;border-radius:3px;
  background:linear-gradient(90deg,#55555E,#26262C);
}
.ln-lat-silencio{left:-2.5px;top:15%;height:26px}
.ln-lat-vol{left:-2.5px;top:23%;height:52px}
.ln-lat-poder{right:-2.5px;top:20%;height:64px;background:linear-gradient(270deg,#55555E,#26262C)}

.ln-dev-tab{padding:13px;border-radius:30px}
.ln-dev-tab img{border-radius:18px}
.ln-dev-tab::before{                          /* la cámara del iPad */
  content:"";position:absolute;z-index:3;top:50%;left:4.5px;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #2A3B4A, #0A0F14 70%);
}

.ln-cel-centro{
  position:relative;z-index:2;width:min(360px,74vw);margin:0 auto;
  animation:ln-flota 7s ease-in-out infinite;
}
@keyframes ln-flota{50%{transform:translateY(-12px)}}

.ln-chip{
  position:absolute;z-index:3;padding:13px 20px;border-radius:999px;
  background:#fff;border:1px solid var(--ln-borde);
  font-size:15px;font-weight:700;color:var(--ln-tinta);white-space:nowrap;
  box-shadow:0 16px 36px -14px rgba(25,18,16,.3);
  animation:ln-flota 6s ease-in-out infinite;
}
.ln-ch1{left:2%;top:16%;animation-delay:-1.2s}
.ln-ch2{right:3%;top:30%;animation-delay:-3.4s}
.ln-ch3{left:5%;bottom:26%;animation-delay:-2.2s}
.ln-ch4{right:7%;bottom:12%;animation-delay:-4.6s}
/* ── EN EL CELULAR: LAS BURBUJAS SIGUEN ENCIMA, PERO COLGADAS DEL BORDE ──
   Flotando sobre el teléfono es como se ven bien y es lo que se queda. Lo que
   fallaba en una pantalla de 390 px era el tamaño y el sitio: el aparato
   ocupaba 74vw y las burbujas, con su medida de escritorio, le caían en plena
   pantalla tapando el plato.
   Aquí el teléfono se achica hasta dejar aire a los lados, y cada burbuja se
   ancla al BORDE de la pantalla: entra sobre el filo del aparato —que es lo
   que da la sensación de que flota por encima— sin llegar al centro, que es
   donde está lo que se vino a mostrar. */
@media (max-width:760px){
  .ln-escenario{margin-top:44px;padding-bottom:16px}
  /* A 74vw el teléfono tocaba los dos bordes y no parecía un objeto sino un
     fondo. Con este ancho quedan ~75 px libres a cada lado: justo el sitio
     donde vive una burbuja. */
  .ln-cel-centro{width:min(236px,62vw)}
  /* El marco se achica con él: un radio de 52 px sobre 236 px de ancho
     convierte el iPhone en una pastilla. */
  .ln-dev{padding:8px;border-radius:38px}
  .ln-dev img{border-radius:31px}
  .ln-dev-cel::after{inset:8px;border-radius:31px}
  .ln-lat-silencio{top:14%;height:18px}
  .ln-lat-vol{top:21%;height:36px}
  .ln-lat-poder{top:18%;height:44px}

  .ln-chip{
    font-size:11px;padding:7px 10px;border-radius:999px;
    max-width:58vw;                       /* ninguna cruza el teléfono entera */
    box-shadow:0 10px 24px -10px rgba(25,18,16,.42);
  }
  /* Ancladas al borde de la PANTALLA, no del escenario: así el trozo que se
     monta sobre el aparato es siempre el mismo, mida lo que mida el texto.
     Las alturas están escogidas para caer sobre la cabecera y las tarjetas de
     categoría, nunca sobre la foto del plato (que va del 25 % al 45 %). */
  .ln-ch1{left:0;right:auto;top:6%}
  .ln-ch2{right:0;left:auto;top:49%}   /* justo debajo de la foto del plato */
  .ln-ch3{left:0;right:auto;bottom:26%}
  .ln-ch4{right:0;left:auto;bottom:9%}
  /* Las chispas decorativas sobran cuando el sitio es justo. */
  .ln-spark{display:none}
}
.ln-spark{width:26px;height:26px;position:absolute;z-index:1;fill:var(--ln-naranja);opacity:.85;
  animation:ln-brillar 3.2s ease-in-out infinite}
.ln-sp1{left:16%;top:4%}
.ln-sp2{right:14%;bottom:34%;width:18px;height:18px;animation-delay:-1.6s}
@keyframes ln-brillar{50%{transform:scale(.55) rotate(20deg);opacity:.35}}

/* ── Pantallas grandes: el lienzo crece con la pantalla ──
   A 1920px todo quedaba encerrado en 1080px y se veía diminuto. Aquí el
   contenedor, la vitrina y los aparatos suben de escala. */
@media (min-width:1280px){
  .ln-pill{max-width:1160px;padding:12px 14px 12px 26px}
  .ln-links a{font-size:15px;padding:11px 18px}
  .lbtn{font-size:16px;min-height:52px;padding:0 26px}
  .lbtn-xl{min-height:62px;padding:0 36px;font-size:17.5px}
  .ln-hero{max-width:1240px;padding-top:88px}
  .ln-sello{font-size:14.5px;padding:11px 22px}
  .ln-sec{max-width:1240px;padding-top:118px}
  .ln-mini{font-size:14px}
  .ln-marco-cel{max-width:330px}
  .ln-marco-tab{max-width:600px}
  .ln-marco figcaption{margin-top:20px;font-size:17px}
  .ln-marco figcaption span{font-size:14.5px}
  .ln-paso{padding:34px}
  .ln-paso i{width:54px;height:54px;font-size:22px;border-radius:16px}
  .ln-paso h3{font-size:21px}
  .ln-paso p{font-size:15.5px}
  .ln-item{padding:32px}
  .ln-item h3{font-size:19px}
  .ln-item p{font-size:15px}
  .ln-ico{width:52px;height:52px;font-size:24px}
  .ln-plan{padding:38px 32px}
  .ln-plan h3{font-size:24px}
  .ln-precio{font-size:42px}
  .ln-plan li{font-size:15px;padding:7px 0 7px 28px}
  .ln-gancho{font-size:15px}
  .ln-cierre{max-width:1240px;padding:96px 30px}
  .ln-cierre p{font-size:19px}
  .ln-pie{max-width:1240px}
  .ln-cinta-rollo span{font-size:17px}
}
@media (min-width:1700px){
  .ln-hero,.ln-sec,.ln-cierre,.ln-pie{max-width:1400px}
  .ln-pill{max-width:1300px}
  .ln-escenario{max-width:1180px}
  .ln-cel-centro{width:400px}
  .ln-marco-tab{max-width:660px}
  .ln-marco-cel{max-width:365px}
}

/* ── La marquesina ── */
.ln-cinta{background:var(--ln-oscuro);color:#FFF3EA;overflow:hidden;padding:16px 0}
.ln-cinta-rollo{
  display:flex;gap:26px;align-items:center;width:max-content;
  animation:ln-rodar 26s linear infinite;
}
.ln-cinta-rollo span{font-size:15px;font-weight:800;letter-spacing:.12em}
.ln-cinta-rollo i{color:var(--ln-naranja);font-style:normal;font-size:13px}
@keyframes ln-rodar{to{transform:translateX(-50%)}}

/* ── Secciones ── */
.ln-sec{max-width:1080px;margin:0 auto;padding:96px 22px 0;text-align:center}
.ln-mini{
  display:inline-block;margin-bottom:14px;color:var(--ln-naranja);
  font-size:13px;font-weight:800;letter-spacing:.08em;
}
.ln-mini-claro{color:#FFB38F}
.ln-sec h2{
  font-size:clamp(30px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;
  line-height:1.06;text-wrap:balance;
}
.ln-bajada{max-width:56ch;margin:20px auto 0;color:var(--ln-gris);font-size:clamp(16px,1.35vw,19px);line-height:1.6}

/* ── La vitrina de capturas reales ── */
.ln-trio{display:grid;gap:26px;align-items:end;margin-top:52px}
@media (min-width:960px){ .ln-trio{grid-template-columns:1fr 1.35fr 1fr;gap:30px} }
.ln-marco{margin:0;justify-self:center;width:100%}
.ln-marco-cel{max-width:290px}
.ln-marco-tab{max-width:540px}
.ln-marco .ln-dev{transition:transform .3s var(--ease-salida,ease)}
@media (hover:hover){ .ln-marco:hover .ln-dev{transform:translateY(-8px)} }
.ln-marco figcaption{margin-top:16px;font-size:15px}
.ln-marco figcaption b{display:block;font-weight:800}
.ln-marco figcaption span{display:block;color:var(--ln-gris);font-size:13px;margin-top:3px;line-height:1.45}
@media (max-width:959px){
  .ln-trio{grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none;align-items:center}
  .ln-trio::-webkit-scrollbar{display:none}
  .ln-marco{scroll-snap-align:center;max-width:none}
  .ln-marco-cel{max-width:270px;justify-self:center}
}

/* ── Los 3 pasos ── */
.ln-pasos-fila{display:grid;gap:20px;margin-top:48px;text-align:left}
@media (min-width:820px){ .ln-pasos-fila{grid-template-columns:repeat(3,1fr)} }
.ln-paso{
  background:#fff;border:1px solid var(--ln-borde);border-radius:22px;padding:28px;
  transition:transform .2s var(--ease-salida,ease),box-shadow .2s ease;
}
@media (hover:hover){ .ln-paso:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(25,18,16,.25)} }
.ln-paso i{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--ln-naranja);color:#fff;font-style:normal;font-weight:800;font-size:19px;
  box-shadow:0 10px 22px -8px rgba(230,91,37,.55);margin-bottom:18px;
}
.ln-paso h3{font-size:18.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.ln-paso p{color:var(--ln-gris);font-size:14.5px;line-height:1.6}

/* ── La banda oscura ── */
.ln-oscura{
  max-width:none;margin-top:96px;padding:88px 22px;
  background:var(--ln-oscuro);color:#FFF6EF;
}
.ln-oscura h2{color:#fff}
.ln-bento{max-width:1080px;margin:48px auto 0;display:grid;gap:16px;text-align:left}
@media (min-width:640px){ .ln-bento{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .ln-bento{grid-template-columns:repeat(3,1fr)} .ln-item-2{grid-column:span 2} }
.ln-item{
  background:#1D171C;border:1px solid #2C242B;border-radius:20px;padding:26px;
  transition:transform .2s var(--ease-salida,ease),border-color .2s ease;
}
@media (hover:hover){ .ln-item:hover{transform:translateY(-4px);border-color:var(--ln-naranja)} }
.ln-ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(230,91,37,.16);font-size:20px;margin-bottom:16px;
}
.ln-item h3{font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px}
.ln-item p{color:#B8ACA7;font-size:14px;line-height:1.6}

/* ── Precios ── */
.ln-planes{display:grid;gap:20px;margin-top:48px;text-align:left;align-items:stretch}
@media (min-width:860px){ .ln-planes{grid-template-columns:repeat(3,1fr)} }
.ln-plan{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--ln-borde);border-radius:24px;padding:30px 26px;
  transition:transform .2s var(--ease-salida,ease),box-shadow .2s ease;
}
@media (hover:hover){ .ln-plan:hover{transform:translateY(-6px);box-shadow:0 28px 60px -28px rgba(25,18,16,.3)} }
.ln-plan-estrella{
  background:var(--ln-oscuro);color:#FFF6EF;border-color:var(--ln-oscuro);
  box-shadow:0 30px 70px -26px rgba(25,18,16,.5);
}
.ln-mejor{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ln-naranja);color:#fff;font-size:12px;font-weight:800;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(230,91,37,.6);
}
.ln-plan h3{font-size:21px;font-weight:800;letter-spacing:-.02em}
.ln-gancho{font-size:13.5px;line-height:1.55;margin:8px 0 18px;color:var(--ln-gris)}
.ln-plan-estrella .ln-gancho{color:#B8ACA7}
.ln-precio{font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ln-precio span{font-size:14px;font-weight:600;color:var(--ln-gris);letter-spacing:0}
.ln-plan-estrella .ln-precio span{color:#B8ACA7}
.ln-plan ul{list-style:none;margin:18px 0 22px;padding:0;flex:1}
.ln-plan li{
  position:relative;padding:5px 0 5px 26px;font-size:13.5px;line-height:1.45;color:var(--ln-gris);
}
.ln-plan-estrella li{color:#CFC3BD}
.ln-plan li::before{
  content:"";position:absolute;left:2px;top:11px;width:12px;height:7px;
  border-left:2.5px solid var(--ln-naranja);border-bottom:2.5px solid var(--ln-naranja);
  transform:rotate(-45deg);
}
.ln-plan li:first-child{font-weight:700;color:var(--ln-tinta)}
.ln-plan-estrella li:first-child{color:#fff}
.ln-nota{margin-top:26px;color:var(--ln-gris);font-size:13.5px}

/* ── El cierre naranja ── */
.ln-cierre{
  margin:96px 22px 0;border-radius:32px;max-width:1036px;
  padding:76px 26px;text-align:center;
  background:linear-gradient(140deg, var(--ln-naranja), #FF8A50);color:#fff;
  box-shadow:0 34px 80px -30px rgba(230,91,37,.55);
}
@media (min-width:1080px){ .ln-cierre{margin:96px auto 0} }
.ln-cierre h2{font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.ln-cierre p{margin:16px auto 30px;font-size:16.5px;line-height:1.6;opacity:.94}

/* ── El pie ── */
.ln-pie{max-width:1080px;margin:0 auto;padding:44px 22px 34px}
.ln-pie-fila{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--ln-borde);padding-top:26px;
  color:var(--ln-gris);font-size:13.5px;
}
.ln-pie a{color:var(--ln-naranja);font-weight:600;text-decoration:none}

/* ── Revelado al hacer scroll ── */
.ld-revela{opacity:0;transform:translateY(26px);
  transition:opacity .5s var(--ease-salida,ease),transform .5s var(--ease-salida,ease)}
.ld-revela.en{opacity:1;transform:none}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion:reduce){
  .ln-cel-centro,.ln-chip,.ln-spark,.ln-cinta-rollo{animation:none}
  .ld-revela{opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .ln-pill{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}


/* ═══════════ EL ESCAPARATE: el iPad de protagonista ═══════════
   Antes eran tres aparatos en fila y del mismo peso, con el iPad más pequeño
   que los celulares — justo al revés de lo que importa: el tablero es la
   pantalla donde el restaurante TRABAJA.
   Aquí el iPad manda y los dos celulares se le montan por la derecha,
   escalonados, como objetos apoyados sobre una mesa.

   Se llama `escaparate` y no `vitrina` porque `ln-vitrina` YA ERA la clase de
   la sección entera: llamarlos igual hacía que las reglas cayeran sobre el
   contenedor equivocado. */
.ln-escaparate{
  position:relative;max-width:1040px;margin:52px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.ln-escaparate .ln-dev{width:100%;max-width:340px}
.ln-v-tab{max-width:520px}

@media (min-width:900px){
  /* LA COMPOSICIÓN SUPERPUESTA.
     El iPad se queda EN EL FLUJO y es quien define el alto del conjunto; los
     dos celulares salen del flujo y se le montan encima. Se intentó primero
     con `aspect-ratio` en el contenedor y no manda cuando todos los hijos son
     absolutos: el alto quedaba a ojo y sobraba un palmo de aire debajo.
     Todas las medidas van en % para que el conjunto crezca entero: con una
     sola fija, al ensanchar la pantalla los celulares se despegan del iPad. */
  /* Sin relleno abajo: el conjunto termina donde termina el iPad, porque los
     celulares van APOYADOS EN SU BASE, no colgando por debajo. */
  /* Aire ARRIBA y nada abajo. Los celulares son un poco más altos que el iPad,
     y al apoyarlos en su misma base sobresalen por arriba: sin este relleno se
     le montan al párrafo de la sección. */
  .ln-escaparate{display:block;max-width:1040px;padding:6% 0 0}
  /* CENTRADO DEL CONJUNTO, no del iPad.
     El grupo ocupa del 9,5% al 90,5% (iPad 57% + lo que sobresalen los
     celulares), así que el iPad NO puede empezar pegado al borde: si empieza en
     el 2%, todo el bloque queda escorado a la izquierda y sobra un palmo de
     aire a la derecha. Estos márgenes dejan el conjunto centrado de verdad. */
  .ln-escaparate .ln-v-tab{
    position:relative;width:57%;max-width:none;margin:0 0 0 9.5%;z-index:1;
  }
  .ln-escaparate .ln-v-cel1,
  .ln-escaparate .ln-v-cel2{position:absolute;width:19%;max-width:none;top:auto}
  /* Anclados ABAJO y no arriba: así los dos comparten la base del iPad y el
     conjunto se apoya sobre una misma línea, en vez de flotar cada uno a su
     altura. El escalón queda en la horizontal y en un dedo de desnivel. */
  .ln-escaparate .ln-v-cel1{left:59.5%; bottom:7%; z-index:2;
    box-shadow:0 40px 70px -30px rgba(25,18,16,.55)}
  .ln-escaparate .ln-v-cel2{left:71.5%; bottom:0;  z-index:3;
    box-shadow:0 50px 90px -30px rgba(25,18,16,.7)}

  /* EL BISEL DE LOS CELULARES, más fino.
     El marco general usa 11 px, que sobre un celular de 200 px es un 5,5% por
     lado — el doble de grueso que el de un iPhone de verdad, y a ese tamaño se
     ve como un cuadro con moldura. Aquí baja a la mitad. */
  .ln-escaparate .ln-v-cel1,
  .ln-escaparate .ln-v-cel2{padding:5px;border-radius:27px}
  .ln-escaparate .ln-v-cel1 img,
  .ln-escaparate .ln-v-cel2 img{border-radius:22px}
  .ln-escaparate .ln-v-cel1::after,
  .ln-escaparate .ln-v-cel2::after{inset:5px;border-radius:22px}
}
@media (min-width:1280px){ .ln-escaparate{max-width:1160px} }

/* Los pies, en fila y en el mismo orden que los aparatos. */
.ln-pies{
  display:grid;gap:18px;max-width:1040px;margin:34px auto 0;
  grid-template-columns:1fr;text-align:center;
}
@media (min-width:760px){ .ln-pies{grid-template-columns:repeat(3,1fr);gap:26px} }
.ln-pies b{display:block;font-size:17px;color:var(--ln-tinta);margin-bottom:4px}
.ln-pies span{font-size:14.5px;line-height:1.5;color:var(--ln-tenue)}


/* Los enlaces legales del pie. */
.ln-pie-legal{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--ln-borde);
  text-align:center;font-size:13.5px;color:var(--ln-tenue);
}
.ln-pie-legal a{color:var(--ln-tenue);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){ .ln-pie-legal a:hover{color:var(--ln-naranja)} }