/* ══════════════════════════════════════════════════════════════
   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(0,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);
}

/* 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.

   Y de paso se arregla algo que ya estaba mal antes de la grilla: a
   375px la marca (119px) + el selector de tema (96px) + el botón
   entero (171px) no entran en los 335px útiles, y el botón se salía
   del borde derecho. Se aprieta todo y "clientes" se esconde. */
@media (max-width: 900px) {
  .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; }
}
@media (max-width: 560px) {
  .lp-acceso-mas { display: none; }
  .lp-acceso { padding: .55rem .8rem; letter-spacing: .04em; }
  .lp-bar-acciones { gap: 8px; }
}
/* A 320px (el iPhone SE, que sigue en la lista de anchos a probar) ni
   así entra: marca 119 + selector 96 + botón 83 + huecos = 314 contra
   280 útiles. Se esconde la chapita "Kiosco" de la barra -- SÓLO ahí,
   el resto de la app la sigue mostrando. Queda la llama y KFB, y el
   héroe de abajo dice a qué rubro es. Peor es un botón de acceso que
   se sale de la pantalla. */
@media (max-width: 400px) {
  .lp-bar-in { gap: 6px; }
  .lp-bar-marca .kfb-chapa { display: none; }
  .lp-acceso { padding: .55rem .6rem; }
}

/* ══ 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. */
.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;
}

/* El atajo del que ya es cliente y está mirando la landing: se
   distingue del "Acceso clientes" genérico porque dice el nombre de
   SU kiosco. */
.lp-acceso.lp-acceso-mio {
  border-color: var(--border-accent);
  color: var(--gold-text);
  font-weight: 700;
}