/* ══════════════════════════════════════════════════════════════
   LA LANDING DE KIOSCO

   El formato lo manda la landing de la familia (Gastro), MEDIDA EN
   PRODUCCION, no leida de su repo: barra oscura fija, boton de
   esquina 3px, h2 centrado en Playfair 600, la cursiva dorada en la
   palabra que carga el titulo, las tarjetas de mision/vision con
   borde superior dorado, las tres puertas, el WhatsApp flotante.
   Lo que cambia es el contenido, que es de kiosco.

   TODO CUELGA DE .lp A PROPOSITO. index.html carga tambien app.css
   y login.css, asi que un `.btn` o un `.hero` sueltos aca le
   pisarian el estilo al login. Ya paso una vez en este proyecto
   (el `.blancos` del splash contra el del poligono) y el sintoma
   --una hoja de 74px donde iban 645-- tardo en encontrarse.

   Los colores salen de css/tokens.css. Ninguno se escribe a mano:
   si un color solo existe aca, queda afuera de los tres temas.
   ══════════════════════════════════════════════════════════════ */

.lp {
  /* El carbon de la barra NO es un token de tema: la barra de la
     familia es oscura en los tres temas, igual que la de Gastro. */
  --lp-carbon: #111111;
  --lp-caja: 1100px;
  --lp-barra: 62px;
  /* El papel del cuaderno es papel en cualquier tema. */
  --lp-papel: #f2e9d4;
  --lp-tinta: #2c2416;

  font-family: var(--sans);
  color: var(--text);
  line-height: 1.62;
  /* El padding va aca y no en el body: el body lo comparte con el
     login, que no tiene barra y quedaria empujado 62px hacia abajo. */
  padding-top: var(--lp-barra);
}

/* css/login.css pone el body en flex centrado, con padding, para que
   la tarjeta del PIN quede en el medio de la pantalla. La landing
   necesita lo contrario: bloque, ancho completo y sin padding.

   Y no es cosmetico: con el body en flex, .lp queda como ITEM de
   flex con `min-width: auto`, o sea que NO PUEDE achicarse por
   debajo de su contenido. Medido en un celular de 375px: el
   documento entero se estiraba a 546px y el boton del heroe salia
   de 506px, recortado por el overflow del heroe -- sin scroll
   horizontal que delatara nada. Estaba en la version anterior y lo
   perdi al reescribir este archivo; volvio a aparecer midiendo. */
body.en-landing {
  display: block;
  padding: 0;
  align-items: initial;
  justify-content: initial;
  /* El degradado del login se saca: el heroe tiene el suyo, y los dos
     juntos daban una mancha en el medio. */
  background: var(--bg);
}

.lp section { padding: clamp(54px, 7vw, 96px) 0; }
.lp .lp-in  { max-width: var(--lp-caja); margin: 0 auto; padding: 0 20px; }

/* La alternancia de fondo cuenta SECCIONES, y la barra no es una:
   el heroe es la 1, o sea impar, y queda sobre el fondo de pagina. */
.lp section:nth-of-type(even) {
  background: var(--bg-surface);
  border-block: 1px solid var(--border);
}

.lp h1, .lp h2, .lp h3 { font-family: var(--serif); }
.lp h2 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 12px; text-align: center; text-wrap: balance;
}
.lp p { margin: 0 0 14px; }
.lp-lead  { font-size: 1.05rem; color: var(--text-sub); max-width: 62ch; line-height: 1.8; }
.lp-chico { font-size: .84rem; color: var(--text-muted); }
.lp-rot {
  display: block; margin-bottom: 10px; text-align: center;
  font-size: .64rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.lp-centro { max-width: 780px; margin: 0 auto; text-align: center; }
.lp-centro .lp-lead { margin-left: auto; margin-right: auto; }

/* ══ LA BARRA ══════════════════════════════════════════════════ */
.lp-bar {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: var(--lp-carbon);
  border-bottom: 1px solid rgba(201,169,110,.18);
}
/* Tres columnas, y la del medio centrada EN LA BARRA -- no entre sus
   dos vecinos. Con flex + space-between, la marca y el bloque de
   acciones tienen anchos distintos y el nav queda corrido hacia el
   lado del vecino mas angosto: se ve descentrado aunque el CSS diga
   "space-between".

   Las columnas van declaradas una por una (grid-column) y no por
   orden de aparicion: abajo de 900px el nav es display:none, deja de
   ser item de grilla, y con auto-placement el bloque de acciones se
   correria a la columna del medio. */
.lp-bar-in {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  height: var(--lp-barra);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(auto,1fr);
  align-items: center; gap: 20px;
}
.lp-bar-marca    { grid-column: 1; justify-self: start; }
.lp-nav          { grid-column: 2; }
.lp-bar-acciones { grid-column: 3; justify-self: end; }
.lp-bar-marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: #faf9f7; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 1.02rem; font-family: var(--serif);
}
/* La barra es oscura siempre, asi que la marca de adentro no puede
   heredar el color del tema: en claro quedaria negra sobre negro.

   Y hay que pisar `-webkit-text-fill-color`, no alcanza con `color`:
   la marca se pinta con un degradado recortado al texto, asi que
   brand.css usa text-fill-color -- y ESE le gana a `color` al pintar.
   La chapita quedaba con el gris oscuro del tema claro sobre la
   barra carbon, o sea invisible, mientras `getComputedStyle().color`
   informaba un valor claro y "pasaba" la medicion de contraste. */
.lp-bar-marca .kfb-nombre {
  color: #faf9f7;
  -webkit-text-fill-color: #faf9f7;
}
.lp-bar-marca .kfb-chapa {
  color: rgba(250,249,247,.5);
  -webkit-text-fill-color: rgba(250,249,247,.5);
}

.lp-nav { display: flex; gap: 26px; justify-content: center; }
/* 44px de alto: es el blanco de toque minimo. Entran de sobra en una
   barra de 62px, y el padding no se ve porque el fondo es transparente. */
/* El enlace de Ayuda va con los botones de la barra: es un <a> porque
   lleva a otra pagina y los demas mueven el scroll, pero tiene que
   verse igual -- si no, parece de otro sitio. */
.lp-nav a { text-decoration: none; display: inline-flex; align-items: center; }
.lp-nav a:hover { color: var(--gold); }
.lp-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.lp-nav button, .lp-nav a {
  background: none; border: 0; cursor: pointer;
  padding: 13px 0; min-height: 44px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(250,249,247,.72); transition: color .2s;
}
.lp-nav button:hover { color: var(--gold); }
.lp-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.lp-bar-acciones { display: flex; align-items: center; gap: 12px; }
.lp-acceso {
  background: transparent; border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  padding: .55rem 1.3rem; min-height: 44px; border-radius: 3px; white-space: nowrap;
  transition: background .22s, color .22s;
}
.lp-acceso:hover { background: var(--gold); color: var(--lp-carbon); }

/* El selector de tema de la app se MUEVE adentro de la barra (lo hace
   landing.js). Aca solo se lo viste para el fondo oscuro. */
.lp .theme-switcher {
  position: static; margin: 0;
  background: rgba(250,249,247,.05);
  border-color: rgba(250,249,247,.28);
  color: rgba(250,249,247,.85);
}
.lp .theme-switcher:hover { border-color: var(--gold); color: var(--gold); }
/* Los iconos que NO estan elegidos toman --text-muted, que en tema
   claro es gris oscuro -- y esta barra es carbon en los tres temas,
   asi que ahi quedaban en 1,3 de contraste, o sea invisibles. Sólo
   pasaba en claro: en oscuro y marron ese token ya es claro. El
   elegido no se toca, que va sobre el dorado. */
.lp .theme-switcher .theme-switch-btn:not(.active) { color: rgba(250,249,247,.7); }
.lp .theme-switcher .theme-switch-btn:not(.active):hover { color: var(--gold); }

/* UN SOLO botón, como la barra de Gastro. Pedido de Canu el 25/08
   mirando las dos landings al lado.

   No se pierde el tercer tema: `theme.js` ya sabe que, cuando se ve
   uno solo, tocarlo pasa al SIGUIENTE -- y lo decide contando los
   visibles, no repitiendo el ancho del breakpoint. Es el mismo
   mecanismo que ya usa la barra del panel (app.css). Por eso esto es
   una regla de CSS y no código nuevo: la máquina estaba hecha.

   De paso, en 375px devuelve 64px a la barra, que es justo donde el
   botón de acceso se salía del borde. */
.lp .theme-switcher .theme-switch-btn:not(.active) { display: none; }
.lp .theme-switcher {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(250,249,247,.28);
}

/* ══ LA BARRA EN EL TELÉFONO — como la de Gastro (Canu, 14/09) ═══
   Logo + nombre ENTERO + un solo círculo de tema + «Acceso clientes»
   entero + hamburguesa. Se van el óvalo, el «ES» cuadrado y el
   «Acceso» recortado.

   El óvalo era esto: app.css pone un piso de 44px de alto a todo botón
   cuando se toca con el dedo, y el botón del tema mide 28 de ancho por
   28 de alto en brand.css. El piso le ganaba al alto (min-height le
   gana a height) y quedaba un óvalo de 26×44 asomando de un círculo de
   38. Ahora el botón LLENA el círculo: mismo ancho que alto, y el piso
   no tiene nada que estirar.

   Abajo de 900 el nav desaparece y la barra vuelve a flex: con la
   grilla de tres columnas la marca desbordaba SU columna (1fr = mitad
   de la barra) y se montaba arriba del botón de acceso. El nombre va
   completo (brand.css lo acorta a «KFB» de 1024 para abajo; acá no) y
   sin la chapita «Kiosco», que sola mide 38px y el héroe de abajo ya
   dice a qué rubro es. El idioma no va en la barra: vive en el menú.

   Medido a 375 (el escalón de 480): nombre 161 + tema 34 + acceso 109
   + menú 34 + huecos = 347 de 351 útiles. A 360: 321 de 342 con el
   escalón de 374. A 320: 282 de 302 con el logo escondido (el logo es
   decoración; el nombre, el acceso y el menú son lo que se usa —
   mismo criterio que Gastro a 339). Sin desborde en los tres. */
.lp-menu-btn { display: none; }
/* ══ EL CORTE VA EN 1060, NO EN 900 — medido el 13/10/2026 ═══════
   Entre 910 y 1040 px «Contacto» quedaba TAPADO por el selector de
   tema. No es que se viera apretado: a 980 el botón del tema cubre el
   CENTRO del link, así que tocar «Contacto» abría el selector de tema.
   1024 cae justo adentro — un iPad horizontal, o una ventana sin
   maximizar.

   Medido con `elementFromPoint` sobre cada link de la barra, en un
   iframe de ancho real (achicar el panel no dispara las media
   queries), bajando de 1100 a 880 de a 10:

       1050 y arriba ... ningun link tapado
       1040 .. 910 ..... «Contacto» tapado          <- 130px rotos
       900 y abajo ..... colapsa, y no hay choque

   La causa de fondo era la grilla: la tercera columna era
   `minmax(0,1fr)`, o sea que podia achicarse hasta CERO y su contenido
   --anclado con `justify-self:end`-- se desbordaba hacia la izquierda
   montandose arriba del nav. Con `minmax(auto,1fr)` esa columna ya no
   baja de lo que mide su contenido, asi que lo que crezca empuja en vez
   de tapar. Las dos cosas van juntas: el corte arregla hoy, la grilla
   evita que el dia que se agregue un item del menu --o que una
   traduccion sea mas larga-- vuelva a taparse en silencio. */
@media (max-width: 1060px) {
  .lp-nav { display: none; }
  .lp-bar-in { display: flex; justify-content: space-between; gap: 10px; }
  .lp-bar-marca, .lp-bar-acciones { grid-column: auto; justify-self: auto; }
  .lp-bar-marca .kfb-largo { display: inline; }
  .lp-bar-marca .kfb-corto { display: none; }
  .lp-bar-marca .kfb-chapa { display: none; }
  .lp .theme-switch-btn { width: 100%; height: 100%; min-height: 0; padding: 0; }
  .lp-bar-acciones .idioma-switcher { display: none; }
  .lp-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%;
    border: 1px solid rgba(250,249,247,.28); background: rgba(250,249,247,.05);
    color: rgba(250,249,247,.85); cursor: pointer; transition: border-color .2s, color .2s;
  }
  .lp-menu-btn:hover, .lp-menu-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
}
@media (max-width: 480px) {
  .lp-bar-in { gap: 6px; padding: 0 9px; }
  .lp-bar-marca { gap: .4rem; font-size: .86rem; }
  .lp-bar-acciones { gap: 5px; }
  .lp .theme-switcher, .lp-menu-btn { width: 34px; height: 34px; }
  .lp-acceso { font-size: .58rem; padding: .45rem .55rem; letter-spacing: .02em; min-height: 34px; }
}
@media (max-width: 374px) {
  .lp-bar-in { gap: 4px; padding: 0 7px; }
  .lp-bar-marca { gap: .3rem; font-size: .8rem; }
  .lp-bar-acciones { gap: 4px; }
  .lp .theme-switcher, .lp-menu-btn { width: 30px; height: 30px; }
  .lp-acceso { font-size: .55rem; padding: .4rem .5rem; min-height: 30px; }
}
@media (max-width: 339px) {
  .lp-bar-marca .logo-wrap { display: none; }
}

/* El menú del teléfono: cuelga de la barra, de borde a borde, y tapa
   lo que haya abajo (la barra es z 1000). Se saca con `hidden`, y hay
   que decirlo a mano: el display de una clase le gana al atributo
   (ya pasó con las reseñas del catálogo). */
.lp-menu {
  position: fixed; top: var(--lp-barra); left: 0; right: 0; z-index: 1001;
  max-height: calc(100vh - var(--lp-barra)); overflow-y: auto;
  background: var(--lp-carbon); border-bottom: 1px solid rgba(201,169,110,.3);
  padding: 6px 0 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
  animation: lpMenuBaja .22s ease-out;
}
.lp-menu[hidden] { display: none; }
@keyframes lpMenuBaja {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-menu { animation: none; } }
.lp-menu > button, .lp-menu > a {
  display: block; width: 100%; text-align: left; padding: 15px 22px;
  background: none; border: 0; border-top: 1px solid rgba(250,249,247,.06);
  color: rgba(250,249,247,.85); font-family: var(--sans); line-height: 1.2;
  font-size: .9rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: color .2s;
}
.lp-menu > button:first-child { border-top: 0; }
.lp-menu > button:hover, .lp-menu > a:hover { color: var(--gold); }
.lp-menu > button:focus-visible, .lp-menu > a:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.lp-menu-idioma {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 8px 22px 0; padding-top: 14px; border-top: 1px solid rgba(250,249,247,.12);
  color: rgba(250,249,247,.55); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
}
/* Acá se ven LOS DOS idiomas (brand.css esconde el que no está puesto
   en angosto, que es para la barra). En el menú hay lugar y se elige.
   Y van claros a mano: el menú es carbón en los tres temas, y los
   tokens de texto en claro son oscuros. */
.lp-menu .idioma-btn:not(.active) { display: inline-block; }
.lp-menu .idioma-btn { min-width: 48px; height: 40px; min-height: 40px; color: rgba(250,249,247,.72); border-color: rgba(250,249,247,.25); }
.lp-menu .idioma-btn:hover { color: var(--gold); border-color: var(--gold); }
.lp-menu .idioma-btn.active { color: var(--lp-carbon); background: var(--gold); border-color: var(--gold); }

/* ══ WHATSAPP FLOTANTE ═════════════════════════════════════════ */
.lp-wa {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--lp-carbon); border: 1px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: background .25s, color .25s, transform .25s;
}
.lp-wa:hover { background: var(--gold); color: var(--lp-carbon); transform: scale(1.06); }

/* ══ BOTONES ═══════════════════════════════════════════════════ */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 35px; border: 1px solid transparent; border-radius: 3px;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .22s, color .22s, border-color .22s;
}
.lp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lp-btn-1 { background: var(--gold); color: var(--on-gold); }
.lp-btn-1:hover { background: var(--gold-dark); }
.lp-btn-2 { background: transparent; color: var(--text); border-color: rgba(201,169,110,.4); }
.lp-btn-2:hover { border-color: var(--gold); color: var(--gold-text); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 520px) {
  .lp-ctas .lp-btn { width: 100%; }
  /* El `nowrap` de arriba es lo que hace que un boton no se parta en
     dos renglones en escritorio. En un celular, con un texto largo
     como "Calcula tus costos gratis, sin registrarte", ese mismo
     nowrap lo deja en 448px dentro de una pantalla de 375 y se sale
     -- sin scroll horizontal, porque la seccion lo recorta. En
     angosto el texto envuelve. */
  .lp-btn { white-space: normal; min-width: 0; padding-inline: 20px; }
}

/* ══ HEROE ═════════════════════════════════════════════════════ */
.lp-hero { padding-top: clamp(52px,8vw,96px); position: relative; overflow: hidden; text-align: center; }
.lp-hero::before {
  content: ""; position: absolute; inset: -40px 0 auto; height: 620px; pointer-events: none;
  background: radial-gradient(760px 360px at 50% 0,
              color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
}
.lp-hero .lp-in { position: relative; z-index: 1; }
.lp-hero-caja { max-width: 780px; margin: 0 auto; }
.lp-rotulo-hero {
  display: inline-block; margin-bottom: 26px; padding: 6px 15px;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); border: 1px solid rgba(201,169,110,.35);
}
.lp-hero h1 {
  font-weight: 600; font-size: clamp(2.1rem, 6.4vw, 3.2rem);
  line-height: 1.1; margin: 0 0 14px; color: var(--text);
}
/* La palabra que carga el titulo va en cursiva dorada y peso 400,
   igual que la de Gastro. */
.lp-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold-text); }
/* El subtitulo va en SANS, como el suyo. */
.lp-hero-sub { font-family: var(--sans); font-size: 1.05rem; color: var(--text-sub); margin: 0 0 20px; }
.lp-hero-calc { margin-top: 1.6rem; font-size: .88rem; color: var(--text-sub); }
.lp-hero-calc a { color: var(--gold-text); font-weight: 600; }
.lp-precio-hero { margin-top: 18px; font-size: .92rem; color: var(--text-sub); }
.lp-precio-hero b { color: var(--gold-text); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-precio-hero span { display: block; margin-top: 3px; font-size: .78rem; color: var(--text-muted); }
.lp-sellos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; justify-content: center; }
.lp-sello {
  font-size: .74rem; font-weight: 600; color: var(--text-sub);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 5px 12px;
}

/* ══ LOS TRES PUESTOS ══════════════════════════════════════════ */
.lp-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; margin-top: 36px; }
.lp-rol {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-top: 2px solid rgba(201,169,110,.5); border-radius: var(--r-lg); padding: 26px 24px;
}
.lp section:nth-of-type(even) .lp-rol { background: var(--bg); }
.lp-rol h3 {
  font-style: italic; font-weight: 400; font-size: 1.6rem;
  color: var(--gold-text); margin: 0 0 2px; line-height: 1.15;
}
.lp-rol .lp-que {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.lp-rol ul { margin: 0; padding-left: 17px; font-size: .94rem; color: var(--text-sub); line-height: 1.75; }
.lp-rol li { margin-bottom: 6px; }

/* ══ LO QUE CONTESTA SOLO ══════════════════════════════════════ */
.lp-cuatro { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px,1fr)); gap: 16px; margin-top: 32px; }
.lp-tarj { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.lp section:nth-of-type(even) .lp-tarj { background: var(--bg); }
.lp-tarj h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.lp-tarj p  { font-size: .9rem; color: var(--text-sub); margin-bottom: 10px; }

.lp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px); align-items: center; }
@media (max-width: 880px) { .lp-dos { grid-template-columns: 1fr; } }
.lp-dos h2, .lp-dos .lp-rot { text-align: left; }

/* ══ CHAPITA DE PLAN -- un color por plan, como la tabla de SuperAdmin ══ */
.lp-chip {
  display: inline-block; font-family: var(--sans); font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-full); padding: 3px 9px; border: 1px solid;
}
.lp-chip.bas   { background: rgba(139,90,43,.14);  border-color: rgba(139,90,43,.45); color: var(--gold-text); }
.lp-chip.std   { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.4); color: var(--blue-text); }
.lp-chip.full  { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.4);  color: var(--green-text); }
.lp-chip.todos { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }

/* ══ COMPARADOR DE PROVEEDORES ═════════════════════════════════ */
.lp-comp {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px -32px rgba(0,0,0,.6);
}
.lp section:nth-of-type(even) .lp-comp { background: var(--bg); }
.lp-comp-cab {
  padding: 11px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border);
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.lp-comp-fila {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: .92rem;
}
.lp-comp-fila:last-child { border-bottom: 0; }
.lp-comp-fila .lp-precio { font-variant-numeric: tabular-nums; font-weight: 700; }
.lp-comp-fila .lp-obs { grid-column: 1/-1; font-size: .8rem; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.lp-comp-fila.gana { background: color-mix(in srgb, var(--green-text) 10%, transparent); }
.lp-comp-fila.gana .lp-precio { color: var(--green-text); }
.lp-veredicto {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-accent); font-size: .92rem;
}
.lp-veredicto b { color: var(--gold-text); }

/* Dos renglones mas para la ficha, que usa el cuadro de la calculadora.
   Van aca y no en una clase propia porque es la MISMA ficha: si el
   cuadro de la calculadora tuviera su propio componente, el dia que se
   toque uno el otro queda distinto. */
.lp-comp-fila.duele .lp-precio { color: var(--warning-text); }
.lp-comp-fila.duele span:first-child { color: var(--text-sub); }
/* El renglon del total cierra la suma: linea mas marcada arriba, para
   que se lea como un subtotal y no como un renglon mas. */
.lp-comp-fila.total { border-top: 2px solid var(--border-accent); background: var(--bg-card); }
.lp-comp-fila.total .lp-precio { font-size: 1.05rem; }

/* ══ TILDES DE LA CALCULADORA ══════════════════════════════════ */
.lp-chks { list-style: none; margin: 18px 0 0; padding: 0; }
.lp-chks li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
  font-size: .9rem; color: var(--text-sub);
}
.lp-chks li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--gold-text); font-weight: 700;
}

/* ══ EL CUADERNO DEL FIADO ═════════════════════════════════════ */
.lp-cuaderno {
  --f: 33px;
  background-color: var(--lp-papel); color: var(--lp-tinta);
  border-radius: 3px 12px 12px 3px; padding: 20px 20px 20px 42px; max-width: 400px;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--f) - 1px),
      rgba(90,130,170,.4) calc(var(--f) - 1px) var(--f)),
    linear-gradient(90deg, transparent 0 30px, rgba(168,51,47,.5) 30px 31px, transparent 31px);
  background-position: 0 48px, 0 0;
  box-shadow: -3px 0 0 rgba(0,0,0,.15), 0 24px 50px -34px rgba(0,0,0,.75);
  transform: rotate(-.6deg);
}
.lp-cuaderno .lp-ctit {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1; margin-bottom: 11px;
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 2px; text-decoration-color: rgba(44,36,22,.35);
}
.lp-cuaderno .lp-cf {
  display: flex; justify-content: space-between; gap: 10px;
  height: var(--f); line-height: var(--f);
  font-variant-numeric: tabular-nums; font-size: 1rem;
}
.lp-cuaderno .dudosa { color: rgba(44,36,22,.66); font-style: italic; }

/* ══ LAS RESEÑAS ═══════════════════════════════════════════════
   La bifurcación dibujada: cinco estrellas van a Google, menos de
   cinco se quedan adentro. Las estrellas son texto, no un icono
   cargado: si no llegara el archivo, la pieza que explica la
   funcion quedaria vacia. */
.lp-punt {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 20px; max-width: 400px;
  box-shadow: 0 18px 44px -32px rgba(0,0,0,.6);
}
.lp section:nth-of-type(even) .lp-punt { background: var(--bg); }
.lp-punt-cab {
  font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.lp-punt-estrellas {
  font-size: 1.7rem; letter-spacing: .12em; color: var(--gold-text); line-height: 1.2;
}
.lp-punt-ramas { display: grid; gap: 10px; margin-top: 16px; }
.lp-rama {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
}
.lp-rama-e { font-size: .95rem; letter-spacing: .06em; white-space: nowrap; }
.lp-rama-t { font-size: .86rem; color: var(--text-sub); }
.lp-rama.buena { border-color: rgba(34,197,94,.4); }
.lp-rama.buena .lp-rama-e { color: var(--green-text); }
/* Las dos estrellas que faltan tienen que verse VACIAS, no ausentes:
   si no se ven, no se lee "tres de cinco". Lo que las distingue es el
   color -- grises contra doradas -- y no que esten tenues: con
   opacidad .45 daban 2,18 de contraste y directamente desaparecian. */
.lp-rama.mala .lp-rama-e { color: var(--gold-text); }
.lp-rama.mala .lp-rama-e i { font-style: normal; color: var(--text-muted); }

/* ══ LA BANDA DE LA CALCULADORA ════════════════════════════════ */
.lp-calc {
  margin-top: 30px; padding: 26px 28px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 1px solid var(--border-accent); text-align: center;
}
.lp-calc h3 {
  font-style: italic; font-weight: 400; font-size: 1.6rem;
  color: var(--gold-text); margin: 0 0 6px;
}
.lp-calc p { color: var(--text-sub); margin: 0 0 16px; }

/* ══ PLANES ════════════════════════════════════════════════════ */
/* Precio promocional -- la misma pildora que .launch-banner en la
   landing de Gastro. Se copio la forma (pildora centrada, borde de
   acento, fondo dorado al 10%) y no el color literal: Gastro usa
   --gold y despues lo parchea aparte para el tema claro, porque ahi el
   dorado da 2,13 de contraste. Aca sale de --gold-text, que ya tiene un
   valor por tema y no necesita parche. */
.lp-promo { text-align: center; margin-top: 22px; }
.lp-promo-pill {
  display: inline-block; padding: .45rem 1.2rem;
  background: rgba(201,169,110,.1);
  border: 1px solid rgba(201,169,110,.35);
  border-radius: var(--r-full);
  font-size: .78rem; letter-spacing: .04em; color: var(--gold-text);
}
/* El congelamiento va afuera de la pildora y no adentro: es lo que
   decide la compra, y metido en letra chica de .78rem al lado de una
   fecha se lee como una aclaracion legal. */
/* Con dos clases: `.lp p { margin: 0 0 14px }` (0,1,1) le ganaba el
   margin a esta (0,1,0) y el bloque de 620px quedaba pegado al borde
   izquierdo, con sus renglones centrados adentro -- se veia corrido.
   Canu, 14/09: «centrame eso». */
.lp-promo .lp-promo-congela {
  max-width: 620px; margin: 12px auto 0;
  font-size: .9rem; line-height: 1.55; color: var(--text-sub);
}
.lp-promo-congela b { color: var(--text); font-weight: 700; }
/* En el celular el texto entra en 3 renglones. Una capsula de radio
   9999px con 3 renglones deja dos panzas enormes a los costados y no
   se lee como pildora: a este ancho pasa a ser un bloque redondeado. */
@media (max-width: 560px) {
  .lp-promo-pill { padding: .55rem 1rem; line-height: 1.5; border-radius: var(--r-md); }
}

.lp-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px,1fr)); gap: 16px; margin-top: 30px; }
.lp-plan {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-top: 2px solid var(--lp-borde-plan); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; flex-direction: column;
}
.lp section:nth-of-type(even) .lp-plan { background: var(--bg); }
/* La tarjeta es flex en columna, asi que sus hijos se estiran a todo
   el ancho por defecto: sin esto la chapita del plan deja de ser una
   chapita y queda como una franja de punta a punta. */
.lp-plan > .lp-chip { align-self: flex-start; }
.lp-plan.bas  { --lp-borde-plan: rgba(139,90,43,.55); }
.lp-plan.std  { --lp-borde-plan: rgba(59,130,246,.55); }
.lp-plan.full { --lp-borde-plan: rgba(34,197,94,.55); }
.lp-plan .lp-nom { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.7rem; margin-top: 10px; line-height: 1.15; }
.lp-plan.bas  .lp-nom { color: var(--gold-text); }
.lp-plan.std  .lp-nom { color: var(--blue-text); }
.lp-plan.full .lp-nom { color: var(--green-text); }
.lp-plan .lp-para { font-size: .82rem; color: var(--text-muted); margin: 4px 0 14px; }
.lp-plan .lp-suma { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.lp-plan ul { margin: 0 0 20px; padding-left: 17px; font-size: .9rem; color: var(--text-sub); line-height: 1.7; }
.lp-plan li { margin-bottom: 7px; }
.lp-plan .lp-precio-plan { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.lp-plan .lp-lista { font-size: .8rem; color: var(--text-muted); }
.lp-plan .lp-val { font-family: var(--serif); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-plan.bas  .lp-val { color: var(--gold-text); }
.lp-plan.std  .lp-val { color: var(--blue-text); }
.lp-plan.full .lp-val { color: var(--green-text); }
.lp-plan .lp-mes { font-size: .82rem; color: var(--text-muted); }

/* ══ QUIENES SOMOS -- el formato de Gastro (.about-mv-*) ═══════ */
.lp-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2.5rem 0 3.4rem; }
@media (max-width: 760px) { .lp-mv { grid-template-columns: 1fr; } }
.lp-mv-card {
  background: var(--bg-card); border: 1px solid rgba(201,169,110,.2);
  border-top: 2px solid rgba(201,169,110,.5); border-radius: var(--r-lg);
  padding: 2.5rem 2.2rem; transition: border-color .25s;
}
.lp-mv-card:hover { border-color: rgba(201,169,110,.45); border-top-color: var(--gold); }
/* El emoji al lado de la palabra, no arriba. El margen de abajo pasa
   a la fila: si se lo dejaba al emoji, empujaba el titulo dentro de la
   propia fila y quedaban desalineados. */
.lp-mv-cab   { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.lp-mv-icon  { font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1; flex: none; }
.lp-mv-title {
  font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.4rem); font-style: italic;
  font-weight: 400; color: var(--gold-text); margin: 0; letter-spacing: -.01em; line-height: 1.15;
}
.lp-mv-text { color: var(--text-sub); font-size: 1rem; line-height: 1.85; margin: 0; }
.lp-bloque-tit {
  font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.4rem); font-style: italic;
  font-weight: 400; color: var(--gold-text); margin: 0 0 2rem;
  letter-spacing: -.01em; line-height: 1.15; text-align: left;
}
.lp-valores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .lp-valores { grid-template-columns: 1fr; } }
.lp-valor {
  font-size: .98rem; color: var(--text-sub); line-height: 1.7;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.2rem;
}
.lp-valor b { color: var(--text); font-weight: 600; }
.lp-historia { margin-top: 3.4rem; }
.lp-historia p { color: var(--text-sub); line-height: 1.85; }
.lp-historia b { color: var(--text); }
.lp-cierre {
  margin-top: 2.6rem; padding: 2rem 2.2rem; background: var(--bg-card);
  border-left: 3px solid var(--gold); border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.lp-cita { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.75; color: var(--text-sub); margin: 0; }
.lp-cita .lp-firma { display: block; margin-top: 1rem; color: var(--gold-text); }

/* ══ LAS TRES PUERTAS ══════════════════════════════════════════ */
.lp-puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 16px; margin-top: 32px; }
.lp-puerta {
  display: flex; flex-direction: column; gap: .7rem; text-align: left;
  text-decoration: none; font-family: var(--sans); color: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 2rem 1.8rem; cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-puerta:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.lp-puerta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lp-puerta.destacada { border-color: rgba(201,169,110,.45); background: rgba(201,169,110,.05); }
/* .on = la puerta elegida. Tiene que verse distinta de la destacada,
   porque el formulario de abajo cambia de motivo segun cual este. */
.lp-puerta.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.lp-puerta-num { font-family: var(--serif); font-size: .8rem; font-weight: 600; color: var(--gold-text); letter-spacing: .1em; }
.lp-puerta-tit { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.lp-puerta-txt { font-size: .92rem; color: var(--text-sub); line-height: 1.65; }
.lp-puerta-go {
  align-self: flex-start; margin-top: auto; padding: 8px 15px; border-radius: var(--r-full);
  border: 1px solid var(--border-accent); font-size: .82rem; font-weight: 700; color: var(--gold-text);
  transition: background .2s, color .2s;
}
.lp-puerta:hover .lp-puerta-go, .lp-puerta.on .lp-puerta-go { background: var(--gold); color: var(--on-gold); }

/* ══ EL FORMULARIO ═════════════════════════════════════════════ */
.lp-form { max-width: 560px; margin: 26px auto 0; display: grid; gap: 10px; }
.lp-form input, .lp-form textarea {
  width: 100%; padding: 13px 15px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-surface); color: var(--text);
  font-family: var(--sans); font-size: .95rem;
}
.lp-form textarea { min-height: 92px; resize: vertical; }
.lp-form input:focus, .lp-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.lp-form .lp-btn { width: 100%; }
.lp-form-estado { font-size: .9rem; min-height: 1.2em; text-align: center; }
.lp-form-estado.ok  { color: var(--green-text); }
.lp-form-estado.mal { color: var(--error-text); }

/* ══ EL PIE ════════════════════════════════════════════════════ */
.lp-pie { border-top: 1px solid var(--border); padding: 42px 0 54px; background: var(--bg); }
.lp-pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 26px; }
.lp-pie-cols h4 {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px; font-weight: 800;
}
.lp-pie-cols a, .lp-pie-cols button {
  display: block; color: var(--text-sub); text-decoration: none; font-size: .86rem;
  margin-bottom: 7px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); text-align: left;
}
.lp-pie-cols a:hover, .lp-pie-cols button:hover { color: var(--gold-text); text-decoration: underline; }
.lp-pie-final {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .8rem; color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before { transition: none !important; animation: none !important; }
  .lp-puerta:hover { transform: none; }
  .lp-wa:hover { transform: none; }
}

/* ── El cierre, centrado ─────────────────────────────────────────
   Canu: "eso quiero que esté centrado, como está en la landing de
   Gastro". Es la despedida firmada del dueño: alineada a la
   izquierda con una barra al costado se lee como una nota al pie;
   centrada, como lo que es. */
.lp-cierre.lp-cierre-centro {
  border-left: 0;
  border-radius: var(--r-lg);
  text-align: center;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2.4rem 2rem;
  /* Dos filetes finos arriba y abajo en vez de la barra lateral: es
     lo que enmarca una dedicatoria sin gritar. */
  border-top: 1px solid var(--border-accent);
  border-bottom: 1px solid var(--border-accent);
  background: none;
}
/* SIN text-wrap:balance: los saltos son a mano y balance los pelea,
   repartiendo palabras entre renglones que Canu dictó cerrados. */
.lp-cierre-centro .lp-cita { text-wrap: initial; }
.lp-cierre-centro .lp-firma { margin-top: 1.4rem; font-style: normal; }

/* ── El formulario que se despliega ──────────────────────────────
   Aparece cuando se elige una puerta, no antes. */
/* [hidden] lo cierra app.css para toda la app */
.lp-form { animation: lpAbrirForm .28s cubic-bezier(.2,.9,.3,1); }
@keyframes lpAbrirForm {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── El aviso del plan sin catálogo ──────────────────────────────
   Amarillo de "falta un paso tuyo", no rojo de error: no está mal
   lo que eligió, le falta algo que puede sumar ahí mismo. */
.onb-aviso-plan {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .4);
  background: rgba(245, 158, 11, .09);
  border-radius: var(--r-md);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text);
}
.onb-link-plan {
  display: block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold-text);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Acá estuvo `.lp-acceso-mio`, el botón «Entrar a <kiosco>» de la landing
   para el aparato vinculado. Canu lo sacó el 14/09/2026: la landing no
   dice el nombre de ningún kiosco. Ver boot() en js/login.js. */