/* =========================================================================
   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:center}
@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 ── */

/* El selector de mercado. Discreto a propósito: informa en qué moneda está
   mirando y deja cambiarla, pero no compite con la cifra, que es lo que la
   persona vino a ver.
   OJO con los tonos: esta sección va sobre el fondo CLARO de la landing
   (--ln-fondo #FFF8F3), no sobre el oscuro. La primera versión usaba
   --ln-crema para el texto y quedaba casi invisible. */
.ln-moneda{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  padding:7px 8px 7px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--ln-borde);
  box-shadow:0 2px 10px -4px rgba(25,18,16,.14);
}
.ln-moneda label{color:var(--ln-gris);font-size:13.5px;font-weight:600}
.ln-moneda select{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;color:var(--ln-tinta);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  padding:5px 28px 5px 8px;border-radius:999px;min-height:34px;
  /* La flechita se dibuja aquí: un select nativo la pinta distinta en cada
     sistema y en algunos no la pinta. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23191210' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:11px;
}
.ln-moneda select:focus-visible{outline:2px solid var(--ln-naranja);outline-offset:2px}
.ln-moneda select option{background:#fff;color:var(--ln-tinta)}

/* El aviso de que el pago en línea es solo Colombia. Ámbar y no rojo: es una
   advertencia honesta, no un error — y sobre fondo claro, no oscuro. */
.ln-aviso-pago{
  max-width:640px;margin:26px auto 0;
  padding:12px 16px;border-radius:12px;text-align:left;
  background:#FFF6E4;border:1px solid #F0D8A0;
  color:#6B5426;
}
.ln-aviso-pago b{color:#8A5A00}
.ln-aviso-pago[hidden]{display:none}

.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)} }

/* ═══════════════════════ LOS TRES ACTOS ═══════════════════════
   Sustituyen a «Así se ve de verdad» + «Funciona en tres pasos», que contaban
   lo mismo dos veces. Cada acto es una persona y la captura real de lo que esa
   persona mira.

   La regla de composición: los actos ALTERNAN de lado. Ese zigzag es lo que
   rompe el eje central que repetían las siete secciones — y romperlo es
   exactamente la diferencia entre «plantilla bien hecha» y «página con marca».  */
.ln-actos{padding-bottom:20px}
.ln-acto{
  display:grid;gap:18px;align-items:center;
  max-width:1120px;margin:0 auto;padding:26px 0;
}
@media (min-width:900px){
  .ln-acto{grid-template-columns:1fr 1fr;gap:64px;padding:54px 0}
  /* El zigzag: el acto par pone la escena a la izquierda y el texto a la derecha. */
  .ln-acto:nth-child(even) .ln-acto-esc{order:-1}
  .ln-acto-tx{text-align:left}
}
.ln-acto-tx h3{
  font-size:clamp(23px,3.4vw,33px);font-weight:800;letter-spacing:-.03em;
  line-height:1.12;margin:10px 0 10px;
}
.ln-acto-tx p{color:var(--ln-gris);font-size:16.5px;line-height:1.62;max-width:44ch;margin:0 auto}
@media (min-width:900px){ .ln-acto-tx p{margin:0} }

/* El número del acto, con su icono 3D al lado. */
.ln-acto-n{display:inline-flex;align-items:center;gap:12px}
.ln-acto-n img{width:56px;height:56px;object-fit:contain;flex:none}
.ln-acto-n b{
  font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--ln-naranja);
  font-variant-numeric:tabular-nums;
}

/* ── LA ESCENA ──
   La persona y el celular comparten un suelo. Sin ese suelo, un PNG recortado
   flota y se lee como un collage; con él, los dos objetos pertenecen al mismo
   sitio. Es el detalle que más decide si esto se ve diseñado o pegado. */
.ln-acto-esc{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  min-height:340px;
}
@media (min-width:900px){ .ln-acto-esc{min-height:460px} }

/* El filo donde se paran los dos, con su desvanecido a los lados: una línea
   entera de borde a borde se leería como un separador de sección, no como piso. */
.ln-suelo{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:min(100%,460px);height:1px;
  background:linear-gradient(90deg,transparent,var(--ln-borde) 22%,var(--ln-borde) 78%,transparent);
}
/* La sombra de contacto: elipse difusa justo bajo los pies. Es lo que ancla. */
.ln-suelo::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;
  width:min(78%,330px);height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(25,18,16,.19), transparent 72%);
}

.ln-gente{
  position:relative;z-index:1;
  height:clamp(280px,42vw,430px);width:auto;
  object-fit:contain;object-position:bottom;
  /* Un grado de luz cálida para que el recorte no se vea más frío que la página. */
  filter:saturate(1.02) contrast(1.01);
}

/* El celular se MONTA sobre la persona, no se pone al lado: solapar es lo que
   convierte dos objetos sueltos en una escena. */
.ln-acto-cel{
  position:absolute;z-index:2;bottom:12px;right:4%;
  width:clamp(126px,17vw,176px);
}
@media (min-width:900px){ .ln-acto-cel{right:2%;bottom:24px} }
.ln-acto-cel img{border-radius:inherit}

.ln-acto-pie{
  position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-size:12.5px;color:var(--ln-gris);white-space:nowrap;
}

/* ── Iconos 3D del bento ──
   Antes eran emojis: se dibujan distinto en cada sistema operativo, así que la
   banda NO se veía igual para dos personas. Y a 20 px sobre una tarjeta oscura
   son la señal más barata de toda la página. */
/* Los iconos vienen en un lienzo cuadrado con el dibujo ya centrado y
   escalado por SUPERFICIE, no por caja: así un interruptor ancho y una llama
   alta pesan lo mismo en pantalla. Antes cada uno caía donde su proporción
   mandaba y la rejilla se veía descuadrada.
   72 px y no 56: a 56 se leían como una viñeta, no como el arranque de la
   tarjeta. Y sin sombra: ahora tienen color propio y no la necesitan — la
   sombra solo los ensuciaba. */
.ln-ico{
  display:block;width:72px;height:72px;margin:0 auto 16px;background:none;
}
.ln-ico img{width:100%;height:100%;object-fit:contain;display:block}

/* ── La dueña en el hero ── */
.ln-hero-gente{
  position:absolute;z-index:1;left:max(2%,calc(50% - 430px));bottom:0;
  height:clamp(300px,34vw,440px);width:auto;
  object-fit:contain;object-position:bottom;pointer-events:none;
}
/* Debajo de 1100 px el celular manda solo: no hay ancho para los dos sin que
   uno le quite aire al otro, y el que informa es el celular. */
@media (max-width:1099px){ .ln-hero-gente{display:none} }

@media (prefers-reduced-motion:reduce){
  .ln-acto,.ln-gente{transition:none;animation:none}
}

/* El tablero es APAISADO. En el marco de celular salía diminuto y con bandas
   negras arriba y abajo: la pantalla que se quiere enseñar quedaba del tamaño
   de un sello. Con marco de tablet ocupa lo que le corresponde, y se apoya en
   la cadera del cocinero en vez de taparle la cara. */
.ln-acto-tab{
  position:absolute;z-index:2;bottom:14px;right:0;
  width:clamp(200px,30vw,290px);
}
@media (min-width:900px){ .ln-acto-tab{right:-2%;bottom:28px} }
/* El cocinero ya toca una tablet en la foto: si además el marco se le monta
   encima quedan dos tablets y se lee como un error. Se corre a un lado. */
.ln-acto:nth-child(3) .ln-gente{transform:translateX(-11%)}
@media (max-width:899px){ .ln-acto:nth-child(3) .ln-gente{transform:translateX(-16%)} }

/* ── EL CENTRADO EN MÓVIL ──
   Medido: las tres escenas salían corridas a la derecha 24, 47 y 37 px. La causa
   es que la persona la centraba el flex pero el aparato iba en `position:absolute`
   contra el borde derecho, así que el CONJUNTO quedaba descentrado aunque cada
   pieza estuviera «bien».

   En móvil se sacan los dos del posicionamiento absoluto y pasan a ser hermanos
   en flujo normal: el solape lo hace un margen negativo y el centrado lo hace
   `justify-content:center` sobre el grupo entero. Así no hay número mágico que
   corregir cada vez que cambie el tamaño de una foto. */
@media (max-width:899px){
  .ln-acto-esc{display:flex;align-items:flex-end;justify-content:center}
  .ln-acto-cel,
  .ln-acto-tab{
    /* `relative`, NO `static`: el marco del celular dibuja su muesca y su brillo
       con pseudo-elementos absolutos. Con `static` pierden su contenedor de
       referencia y se van a posicionar contra la escena — salía una barra negra
       flotando sobre la foto. `relative` lo saca del posicionamiento absoluto
       igual, pero le conserva el marco de referencia a sus hijos. */
    position:relative;flex:none;
    margin-left:-17%;           /* el solape, ahora relativo al propio grupo */
    margin-bottom:10px;
  }
  .ln-acto-tab{margin-left:-22%;margin-bottom:18px}
  /* El corrimiento del cocinero era para que el marco no le tapara la tablet de
     la foto. En flujo normal ya no se le monta encima, así que sobra. */
  .ln-acto:nth-child(3) .ln-gente{transform:none}
  .ln-gente{flex:none}
}

/* La banda oscura va CENTRADA, igual que su título: el icono sobre el eje y el
   texto debajo. Estaba alineada a la izquierda mientras el encabezado de la
   sección estaba centrado — dos ejes distintos en la misma sección, que es lo
   que se leía como descuadre. */
.ln-item p{margin-left:auto;margin-right:auto;max-width:34ch}

/* ═══════════ REFERIDOS: la tarjeta que brilla ═══════════
   Va justo después de los precios porque responde a la objeción que el
   visitante acaba de tener: «¿cuánto me cuesta al mes?» → «puede no costarte».

   El brillo NO es un borde de color: es una luz de verdad detrás del naranja —
   un halo difuso que se sale de la tarjeta y un reflejo interior arriba. Un
   borde brillante se lee como un aviso de error; una luz se lee como algo
   encendido. */
.ln-refsec{padding-top:56px}
.ln-ref{
  position:relative;isolation:isolate;
  display:grid;gap:26px;align-items:center;
  max-width:1000px;margin:0 auto;padding:36px 30px;
  border-radius:28px;text-align:left;
  background:linear-gradient(150deg,#2A1409 0%,#1A0F0A 55%,#150D0B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,180,130,.22),          /* el filo que recoge la luz */
    inset 0 0 0 1px rgba(230,91,37,.34),
    0 30px 70px -30px rgba(230,91,37,.55);        /* el halo que cae debajo */
}
@media (min-width:860px){
  .ln-ref{grid-template-columns:1.55fr .95fr;gap:44px;padding:44px 42px}
}

/* LA LUZ. Un resplandor difuso que asoma por detrás de la esquina superior y
   respira despacio. Va detrás de todo (z-index:-1) y sin capturar el ratón. */
.ln-ref-luz{
  position:absolute;z-index:-1;pointer-events:none;
  top:-38%;left:-14%;width:62%;height:150%;
  background:radial-gradient(closest-side, rgba(255,138,64,.55), rgba(230,91,37,.16) 58%, transparent 72%);
  filter:blur(14px);
  animation:ln-respira 5.5s ease-in-out infinite;
}
@keyframes ln-respira{
  0%,100%{opacity:.72;transform:scale(1)}
  50%    {opacity:1;   transform:scale(1.07)}
}

.ln-ref-et{
  display:inline-block;margin-bottom:12px;
  font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#FFB07A;
}
.ln-ref h2{
  font-size:clamp(26px,4.2vw,40px);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:#FFF6F1;margin-bottom:14px;
}
.ln-ref h2 em{font-style:italic;color:var(--ln-naranja);font-weight:800}
.ln-ref-p{color:#E4CFC3;font-size:16px;line-height:1.65;max-width:48ch}
.ln-ref-p b{color:#fff;font-weight:750}
.ln-ref-nota{margin-top:12px;color:#B79E92;font-size:14.5px;line-height:1.6}
.ln-ref-nota b{color:#FFD9C2}

/* La cifra. Es lo que se tiene que ver desde el otro lado de la sala. */
.ln-ref-cifra{
  text-align:center;padding:22px 18px;border-radius:20px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,160,110,.24);
}
.ln-ref-cifra span{display:block;font-size:13.5px;color:#C8AE9F;font-weight:600}
.ln-ref-cifra b{
  display:block;margin:4px 0 6px;
  font-size:clamp(34px,6.4vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:#FF8A46;
  text-shadow:0 0 28px rgba(255,122,60,.5);      /* el número también emite luz */
}

@media (prefers-reduced-motion:reduce){ .ln-ref-luz{animation:none} }