/* =========================================================================
   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}

/* ── «Saber más» dentro de la tarjeta ──
   Un <details> y no un modal: el que lo abre sigue viendo el precio y el botón
   de al lado, que es exactamente lo que está comparando. Un modal le tapa los
   otros dos planes justo cuando los está midiendo. */
.ln-mas{margin:0 0 20px}
.ln-mas summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--ln-naranja);
  padding:7px 0;
}
.ln-mas summary::-webkit-details-marker{display:none}
.ln-mas summary::after{
  content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s var(--ease-salida,ease);
}
.ln-mas[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media (hover:hover){ .ln-mas summary:hover{color:var(--ln-naranja-osc)} }
.ln-plan-estrella .ln-mas summary{color:#FFB38F}
@media (hover:hover){ .ln-plan-estrella .ln-mas summary:hover{color:#fff} }

.ln-mas-caja{padding-top:6px;border-top:1px solid var(--ln-borde);margin-top:4px}
.ln-plan-estrella .ln-mas-caja{border-top-color:rgba(255,255,255,.16)}
.ln-mas-tit{
  display:block;margin:14px 0 8px;font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ln-gris);
}
.ln-plan-estrella .ln-mas-tit{color:#B8ACA7}
/* Etiqueta a la izquierda, número a la derecha: así se leen en columna y se
   comparan de un vistazo entre una tarjeta y la de al lado. */
.ln-mas-lim{margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 14px}
.ln-mas-lim dt{font-size:13px;color:var(--ln-gris);line-height:1.35}
.ln-mas-lim dd{
  margin:0;font-size:13px;font-weight:800;text-align:right;color:var(--ln-tinta);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ln-plan-estrella .ln-mas-lim dt{color:#CFC3BD}
.ln-plan-estrella .ln-mas-lim dd{color:#fff}
.ln-mas-fun{list-style:none;margin:0;padding:0}
.ln-mas-fun li{
  position:relative;padding:4px 0 4px 26px;font-size:13px;line-height:1.45;color:var(--ln-gris);
}
.ln-plan-estrella .ln-mas-fun li{color:#CFC3BD}
.ln-mas-fun li::before{
  content:"";position:absolute;left:2px;top:10px;width:12px;height:7px;
  border-left:2.5px solid var(--ln-naranja);border-bottom:2.5px solid var(--ln-naranja);
  transform:rotate(-45deg);
}
.ln-mas-cmp{
  display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;
  color:var(--ln-gris);text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover){ .ln-mas-cmp:hover{color:var(--ln-naranja)} }
.ln-plan-estrella .ln-mas-cmp{color:#B8ACA7}

/* ── La tabla comparativa ── */
.ln-comparar{margin-top:72px;text-align:left}
.ln-comparar h3{
  font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.025em;
  text-align:center;text-wrap:balance;
}
.ln-cmp-base{
  margin:12px auto 28px;max-width:62ch;text-align:center;
  font-size:14.5px;line-height:1.6;color:var(--ln-gris);
}
/* El marco es el que desplaza, no la página: una tabla de cuatro columnas en un
   teléfono no cabe, y dejar que empuje el <body> rompe TODA la landing. */
.ln-cmp-marco{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--ln-borde);border-radius:20px;background:#fff;
}
.ln-cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
.ln-cmp th,.ln-cmp td{padding:13px 16px;text-align:center;vertical-align:middle}
/* La primera columna se queda quieta al desplazar: sin esto, en el celular se
   ven tres chulitos sin saber de qué fila son. */
.ln-cmp thead th:first-child,
.ln-cmp tbody th[scope="row"]{
  position:sticky;left:0;z-index:1;background:#fff;
  text-align:left;font-weight:600;color:var(--ln-gris);
  min-width:210px;line-height:1.35;
}
.ln-cmp thead th{
  font-size:15px;font-weight:800;color:var(--ln-tinta);
  border-bottom:1px solid var(--ln-borde);
}
.ln-cmp thead th:first-child{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ln-cmp tbody tr + tr th,.ln-cmp tbody tr + tr td{border-top:1px solid var(--ln-borde)}
.ln-cmp-grupo th{
  background:var(--ln-crema);color:var(--ln-tinta);
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  text-align:left;padding:9px 16px;position:static;min-width:0;
}
/* La columna del plan que más llevan, marcada de arriba abajo: es la misma
   señal que la tarjeta de arriba, y sin ella la tabla contradice al vendedor. */
.ln-cmp-top{background:rgba(230,91,37,.045)}
.ln-cmp thead th.ln-cmp-top{color:var(--ln-naranja)}
.ln-cmp-si{
  display:inline-block;font-size:13px;font-weight:700;color:#0F7A3D;
  background:rgba(15,122,61,.1);border-radius:999px;padding:3px 11px;white-space:nowrap;
}
.ln-cmp-no{color:#C3B6AE;font-weight:700}
.ln-cmp-num{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ln-tinta)}
/* ── El precio, a la cara ──
   Fondo oscuro y no otra tarjeta blanca: después de tres tarjetas blancas de
   precio, una cuarta se leería como un cuarto plan. Esto no es un plan, es el
   remate — y tiene que verse que cambió quien habla. */
.ln-claro{
  margin:44px auto 0;max-width:980px;text-align:left;
  background:var(--ln-oscuro);color:#FFF6EF;border-radius:26px;padding:34px 30px;
  box-shadow:0 30px 70px -32px rgba(25,18,16,.6);
}
.ln-claro h3{
  font-size:clamp(20px,3vw,27px);font-weight:800;letter-spacing:-.025em;
  text-align:center;text-wrap:balance;margin-bottom:26px;
}
.ln-claro-citas{display:grid;gap:18px}
@media (min-width:780px){ .ln-claro-citas{grid-template-columns:1fr 1fr;gap:22px} }
.ln-claro-citas figure{
  margin:0;background:rgba(255,255,255,.055);border-radius:18px;padding:22px 22px 18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.ln-claro-citas blockquote{
  margin:0;font-size:15.5px;line-height:1.6;color:#E6DAD3;
  font-style:italic;text-wrap:pretty;
}
.ln-claro-citas blockquote b{color:#fff;font-style:normal;font-weight:750}
.ln-claro-citas figcaption{
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#B8ACA7;
}
.ln-claro-remate{
  margin:24px auto 0;max-width:68ch;text-align:center;
  font-size:15px;line-height:1.65;color:#CFC3BD;
}
.ln-claro-remate b{color:#fff;font-weight:750}

/* ── EN CELULAR LA TABLA DEJA DE SER TABLA ──
   Con cuatro columnas en 360 px solo cabía la de «Calle» y media de la
   siguiente: quedaba una tabla de comparación donde no se podía comparar, que
   es peor que no tenerla. Deslizar de lado tampoco sirve — para comparar hay
   que ver las tres cifras A LA VEZ, no recordarlas.

   Así que cada fila se vuelve una tarjeta: arriba qué se compara, y debajo los
   tres planes uno al lado del otro. Se compara de a una función, que es como
   se decide de verdad. El nombre del plan sale de `data-plan`, así que el HTML
   es UNO solo: no hay una tabla para escritorio y otra para el teléfono
   escondidas la una de la otra, que es como se terminan contradiciendo. */
@media (max-width:760px){
  .ln-cmp-marco{overflow:visible;border:0;background:transparent;border-radius:0}
  .ln-cmp{min-width:0;display:block;font-size:14px}
  .ln-cmp thead{display:none}
  .ln-cmp tbody{display:block}

  .ln-cmp tbody tr{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;
    background:#fff;border:1px solid var(--ln-borde);border-radius:16px;
    padding:14px 14px 15px;margin-bottom:10px;
  }
  .ln-cmp tbody tr + tr th,.ln-cmp tbody tr + tr td{border-top:0}

  .ln-cmp tbody th[scope="row"]{
    grid-column:1 / -1;position:static;min-width:0;padding:0;
    text-align:left;font-size:15px;font-weight:750;color:var(--ln-tinta);line-height:1.35;
  }
  .ln-cmp tbody td{
    display:grid;gap:5px;justify-items:center;align-content:start;
    padding:0;border:0;background:transparent;
  }
  /* El nombre del plan encima de cada dato: sin él son tres marcas huérfanas. */
  .ln-cmp tbody td::before{
    content:attr(data-plan);
    font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ln-gris);line-height:1.2;text-align:center;
  }
  .ln-cmp tbody td.ln-cmp-top::before{color:var(--ln-naranja)}
  .ln-cmp-si{font-size:12px;padding:3px 9px}
  .ln-cmp-num{font-size:16px}

  /* Los encabezados de grupo se salen de la tarjeta: son rótulos, no filas. */
  .ln-cmp tbody tr.ln-cmp-grupo{
    display:block;background:transparent;border:0;border-radius:0;
    padding:14px 2px 6px;margin:0;
  }
  .ln-cmp-grupo th{background:transparent;padding:0;color:var(--ln-gris)}
}
/* 153 caracteres por renglón medía esta línea a 1440: el ojo pierde el
   principio del siguiente antes de terminar el anterior. Se le pone tope. */
.ln-comparar .ln-nota{text-align:center;max-width:66ch;margin-left:auto;margin-right:auto}
.ln-comparar > .lbtn{display:block;width:max-content;max-width:100%;margin:18px auto 0}
@media (prefers-reduced-motion:reduce){ .ln-mas summary::after{transition:none} }

/* ═══════════ EL PROBLEMA: dónde se va la plata ═══════════
   Fondo crema y no blanco: es la única sección que habla de lo que duele, y
   cambiar el papel debajo avisa que aquí se cambia de tono sin decirlo. */
.ln-dolor{background:var(--ln-crema);max-width:none;padding-left:0;padding-right:0;padding-bottom:96px}
.ln-dolor > *{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}
.ln-dolor-baja{margin:14px auto 0;max-width:60ch;font-size:16.5px;line-height:1.65;color:var(--ln-gris)}
.ln-dolor-cuerpo{
  display:grid;gap:34px;margin-top:44px;text-align:left;align-items:start;
}
@media (min-width:900px){ .ln-dolor-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px} }
.ln-dolor-foto{margin:0}
.ln-dolor-foto img{
  display:block;width:100%;height:auto;border-radius:20px;
  box-shadow:0 30px 70px -32px rgba(25,18,16,.55);
}
.ln-dolor-foto figcaption{
  margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ln-gris);max-width:44ch;
}
.ln-fugas{list-style:none;margin:0;padding:0;display:grid;gap:26px;counter-reset:fuga}
.ln-fugas li{display:flex;gap:16px;align-items:flex-start}
.ln-fuga-n{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--ln-tinta);color:#FFF6EF;font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.ln-fugas h3{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;line-height:1.25}
.ln-fugas p{font-size:15px;line-height:1.62;color:var(--ln-gris)}
.ln-fugas b{color:var(--ln-tinta);font-weight:750}

/* La nota de fuentes. Pequeña y gris a propósito: quien la necesita la busca,
   y quien no, no debe tropezarse con ella. Pero tiene que estar. */
.ln-fuentes{
  margin:30px auto 0;max-width:72ch;
  font-size:12.5px;line-height:1.6;color:var(--ln-gris);opacity:.85;
}

/* ═══════════ LA CALCULADORA ═══════════ */
.ln-cuenta{padding-bottom:0}
.ln-calc{
  display:grid;gap:22px;margin-top:40px;text-align:left;
  background:#fff;border:1px solid var(--ln-borde);border-radius:26px;padding:28px 24px;
  box-shadow:0 30px 70px -34px rgba(25,18,16,.3);
}
@media (min-width:880px){ .ln-calc{grid-template-columns:1.15fr .85fr;gap:38px;padding:34px 32px} }
.ln-calc-mandos{display:grid;gap:22px;align-content:start}
.ln-calc-campo{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline}
.ln-calc-campo > span{font-size:14.5px;font-weight:700;color:var(--ln-tinta)}
.ln-calc-campo > b{
  font-size:17px;font-weight:800;color:var(--ln-naranja);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
.ln-calc-campo input[type=range]{
  grid-column:1 / -1;width:100%;margin:0;appearance:none;-webkit-appearance:none;
  background:transparent;height:26px;cursor:pointer;
}
.ln-calc-campo input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;background:var(--ln-crema);box-shadow:inset 0 0 0 1px var(--ln-borde);
}
.ln-calc-campo input[type=range]::-moz-range-track{
  height:6px;border-radius:999px;background:var(--ln-crema);box-shadow:inset 0 0 0 1px var(--ln-borde);
}
/* 26 px de agarre y no los 16 de fábrica: esto se va a mover con el pulgar en
   un celular, parado en la cocina, no con un mouse. */
.ln-calc-campo input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--ln-naranja);border:3px solid #fff;
  box-shadow:0 4px 12px -2px rgba(230,91,37,.65);
}
.ln-calc-campo input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--ln-naranja);border:3px solid #fff;
  box-shadow:0 4px 12px -2px rgba(230,91,37,.65);
}
.ln-calc-campo input[type=range]:focus-visible{outline:2px solid var(--ln-naranja);outline-offset:4px}

.ln-calc-tablero{
  background:var(--ln-oscuro);color:#FFF6EF;border-radius:20px;padding:24px 22px;
  display:grid;gap:12px;align-content:start;
}
.ln-calc-fila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14.5px}
.ln-calc-fila > span{color:#B8ACA7}
.ln-calc-fila > span b{color:#FFF6EF;font-weight:700}
.ln-calc-fila > b{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.ln-calc-mal > b{color:#FF9B7A}
.ln-calc-linea{height:1px;background:rgba(255,255,255,.16);margin:4px 0}
.ln-calc-total{display:grid;gap:2px}
.ln-calc-total > span{font-size:13.5px;color:#B8ACA7}
.ln-calc-total > b{
  font-size:clamp(30px,6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  color:#7BE8A8;font-variant-numeric:tabular-nums;
}
.ln-calc-total > em{font-style:normal;font-size:13.5px;color:#B8ACA7}
/* Cuando la cuenta le da en contra, el número deja de ser verde. Un número malo
   en color de bueno es lo que hace que alguien deje de creerle a la página. */
.ln-calc-empate > b{color:#FFB38F}
.ln-calc-anio{font-size:13.5px;color:#B8ACA7;margin:2px 0 4px}
.ln-calc-anio b{color:#FFF6EF;font-variant-numeric:tabular-nums}
.ln-calc-tablero .lbtn{margin-top:6px}
.ln-calc-honesto{
  margin:22px auto 0;max-width:68ch;text-align:left;
  font-size:13.5px;line-height:1.65;color:var(--ln-gris);
  background:#fff;border:1px dashed var(--ln-borde);border-radius:16px;padding:16px 18px;
}
.ln-calc-honesto b{color:var(--ln-tinta)}
@media (prefers-reduced-motion:reduce){ .ln-calc-campo input[type=range]{transition:none} }

/* ═══════════ LAS OBJECIONES ═══════════ */
.ln-dudas-rejilla{display:grid;gap:12px;margin-top:40px;text-align:left}
@media (min-width:820px){ .ln-dudas-rejilla{grid-template-columns:1fr 1fr;gap:12px 20px} }
.ln-duda{
  background:#fff;border:1px solid var(--ln-borde);border-radius:16px;
  padding:4px 20px;align-self:start;
}
.ln-duda summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 0;font-size:16px;font-weight:750;letter-spacing:-.01em;line-height:1.35;
}
.ln-duda summary::-webkit-details-marker{display:none}
.ln-duda summary::after{
  content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2.5px solid var(--ln-naranja);border-bottom:2.5px solid var(--ln-naranja);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--ease-salida,ease);
}
.ln-duda[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
@media (hover:hover){ .ln-duda summary:hover{color:var(--ln-naranja)} }
.ln-duda p{
  padding:0 0 18px;margin:0;font-size:14.5px;line-height:1.65;color:var(--ln-gris);
  border-top:1px solid var(--ln-borde);padding-top:14px;
}
.ln-duda p b{color:var(--ln-tinta);font-weight:750}
@media (prefers-reduced-motion:reduce){ .ln-duda summary::after{transition:none} }

/* ── 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}

/* «o escríbenos» iba en la MISMA línea que el botón: como los dos son
   elementos en línea, `text-align:center` centraba LA PAREJA y no cada uno, y
   el botón quedaba 113 px a la izquierda del eje en escritorio. En el celular
   no se notaba porque no cabían juntos y se apilaban solos.
   Pasándolo a bloque, cada uno se centra por su cuenta en cualquier ancho. */
.ln-cierre .lbtn{display:inline-flex}
.ln-cierre .ln-prefiero{
  display:block;width:max-content;max-width:100%;
  margin:20px auto 0;
  color:#fff;font-size:14.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;opacity:.9;
}
@media (hover:hover){ .ln-cierre .ln-prefiero:hover{opacity:1} }

/* ── 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} }