/* ══════════════════════════════════════════════════════════════════════════
   landing.css · KFB Tienda

   SUPERFICIE DE VENTA, no la app en uso. Los tokens de movimiento de
   `tokens.css` están pensados para la caja —120ms, cortos a propósito— y acá
   hacen falta otros: en una landing una transición de 500ms se lee como
   calidad, y en un botón de cobrar se lee como que el sistema se colgó.

   Por eso este archivo declara SUS PROPIOS tiempos y no toca los de la app.
   Los colores NO se redefinen: salen todos de `tokens.css`.

   SIN IMÁGENES NI VIDEO. El peso está en la tipografía, el espacio y una capa
   de luz hecha con gradientes. Entra rápido con mala conexión, que es el caso
   normal de un comerciante mirando el celular en el mostrador.

   Todo lo de acá arranca con `lan-`.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Tiempos de la landing. Largos a propósito -- ver el encabezado. */
  --lan-lento:  520ms;
  --lan-medio:  320ms;

  /* Una escala tipográfica con SALTOS DE VERDAD. Si el título y el subtítulo
     se parecen, no hay jerarquía: hay dos párrafos de distinto tamaño. */
  --lan-display: clamp(2.6rem, 1.2rem + 6.2vw, 6.5rem);
  --lan-h2:      clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  --lan-lead:    clamp(1.05rem, 0.95rem + 0.7vw, 1.4rem);

  /* El ritmo vertical NO es uniforme. Las secciones que respiran distinto se
     leen distinto, y eso es lo que hace que una página no parezca una lista. */
  --lan-aire:    clamp(4.5rem, 3rem + 7vw, 9rem);
  --lan-aire-xl: clamp(7rem, 4rem + 11vw, 14rem);
  --lan-ancho:   72rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --lan-lento: 0ms; --lan-medio: 0ms; }
}

.lan-cuerpo {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: var(--txt-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* El foco se ve SIEMPRE. Es la misma regla que en la app: el que navega con
   teclado tiene que saber dónde está parado. */
.lan-cuerpo :focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--radio-sm);
}

/* El salto al contenido se esconde HACIA ARRIBA, no a `left: -9999px`.
   Medido: con -9999px el elemento sigue ocupando una caja de diez mil píxeles
   y aparece en cualquier auditoría de desborde, tapando los desbordes de
   verdad. Subirlo lo saca de la vista sin fabricar ancho. */
.lan-saltar {
  position: fixed;
  top: var(--e-2);
  left: var(--e-4);
  transform: translateY(-250%);
  background: var(--acento);
  color: var(--sobre-acento);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio);
  font-weight: var(--peso-medio);
  z-index: 10;
  transition: transform var(--lan-medio) var(--salida);
}
.lan-saltar:focus { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   La luz ámbar de arriba es lo único «decorativo» de la página, y hace un
   trabajo: separa la portada del resto sin una línea ni una caja.
   ══════════════════════════════════════════════════════════════════════════ */
.lan-hero {
  position: relative;
  max-width: var(--lan-ancho);
  margin: 0 auto;
  padding: clamp(3rem, 2rem + 6vw, 7rem) var(--e-6) var(--lan-aire);
  isolation: isolate;
  /* La luz de abajo se sale 20% para cada lado a propósito, y ACÁ se recorta.
     Medido a 480px: sin esto la página entera hacía scroll horizontal
     —558px de contenido en 480 de pantalla— y `overflow-x: hidden` en el
     `body` NO lo frenaba: con `html` en `visible`, el navegador no lo aplica
     al viewport. Se recorta donde se produce, no con un candado global. */
  overflow: hidden;
}

.lan-hero::before {
  content: '';
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 70vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 22% 12%,
      color-mix(in oklch, var(--acento) 22%, transparent) 0%, transparent 70%),
    radial-gradient(45% 45% at 78% 0%,
      color-mix(in oklch, var(--plata) 10%, transparent) 0%, transparent 72%);
  filter: blur(6px);
}

.lan-marca {
  margin: 0 0 var(--e-8);
  font-size: var(--txt-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.lan-marca span {
  color: var(--acento);
  font-weight: var(--peso-fuerte);
}

.lan-titulo {
  margin: 0;
  max-width: 16ch;
  font-size: var(--lan-display);
  font-weight: var(--peso-fuerte);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lan-titulo em {
  font-style: normal;
  color: var(--acento);
  /* El subrayado no es una línea: es un trazo que empieza donde termina la
     palabra, para que se lea como algo marcado a mano y no como un enlace. */
  box-shadow: inset 0 -0.14em 0 color-mix(in oklch, var(--acento) 28%, transparent);
}

.lan-bajada {
  margin: var(--e-8) 0 0;
  max-width: 46ch;
  font-size: var(--lan-lead);
  color: var(--texto-2);
  text-wrap: pretty;
}
.lan-bajada strong { color: var(--texto); font-weight: var(--peso-medio); }

.lan-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

.lan-nota-hero {
  margin: var(--e-4) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-3);
}

/* ── BOTONES ────────────────────────────────────────────────────────────
   El hover levanta y aclara; el active baja. Que un botón se hunda al
   apretarlo es la diferencia entre «apreté» y «creo que apreté». */
.lan-boton,
.lan-boton-2 {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-6);
  border-radius: var(--radio-full);
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition:
    transform var(--lan-medio) var(--salida),
    box-shadow var(--lan-medio) var(--salida),
    background var(--lan-medio) var(--salida);
}

.lan-boton {
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: var(--sombra-2);
}
.lan-boton:hover {
  background: var(--acento-fuerte);
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
}
.lan-boton:active { transform: translateY(0); box-shadow: var(--sombra-1); }

.lan-boton-2 {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
}
.lan-boton-2:hover {
  border-color: var(--acento);
  color: var(--acento-fuerte);
  transform: translateY(-2px);
}
.lan-boton-2:active { transform: translateY(0); }

.lan-boton-grande {
  margin-top: var(--e-8);
  padding: var(--e-4) var(--e-8);
  font-size: var(--txt-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIONES
   ══════════════════════════════════════════════════════════════════════════ */
.lan {
  max-width: var(--lan-ancho);
  margin: 0 auto;
  padding: 0 var(--e-6);
}

.lan > section { padding-block: var(--lan-aire); }
.lan > .lan-planes { padding-block: var(--lan-aire-xl); }

.lan-h2 {
  margin: 0;
  max-width: 20ch;
  font-size: var(--lan-h2);
  font-weight: var(--peso-fuerte);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lan-h2-bajada {
  margin: var(--e-4) 0 0;
  max-width: 52ch;
  color: var(--texto-2);
  text-wrap: pretty;
}

/* ── LAS DOS COSAS ──────────────────────────────────────────────────────
   Dos piezas de distinto peso y desfasadas en vertical. Dos tarjetas iguales
   una al lado de la otra es la plantilla que no queremos. */
.lan-dos-grilla {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-12);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .lan-dos-grilla { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
  .lan-pieza-b { margin-top: var(--e-16); }
}

.lan-pieza {
  position: relative;
  padding: var(--e-8);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  background:
    linear-gradient(160deg,
      color-mix(in oklch, var(--superficie-alta) 90%, var(--acento) 4%) 0%,
      var(--superficie) 60%);
  transition: border-color var(--lan-medio) var(--salida),
              transform var(--lan-medio) var(--salida);
}
.lan-pieza:hover {
  border-color: color-mix(in oklch, var(--acento) 45%, var(--borde));
  transform: translateY(-3px);
}

.lan-pieza-n {
  margin: 0;
  font-family: var(--letra-num);
  font-size: var(--txt-sm);
  letter-spacing: 0.18em;
  color: var(--acento);
}
.lan-pieza-t {
  margin: var(--e-4) 0 var(--e-3);
  font-size: var(--txt-xl);
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.lan-pieza-c { margin: 0; color: var(--texto-2); text-wrap: pretty; }
.lan-pieza-c strong { color: var(--texto); font-weight: var(--peso-medio); }

/* ── LOS ROLES ──────────────────────────────────────────────────────────
   En el orden del producto: SALÓN · CAJA · ENCARGADO · DUEÑO. El del dueño
   se distingue con el color de la plata, que es el mismo que usa la app para
   lo que sólo él ve. */
.lan-roles {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-12);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .lan-roles { grid-template-columns: 1fr 1fr; } }

.lan-rol {
  padding: var(--e-6) 0 var(--e-6) var(--e-6);
  border-left: 2px solid var(--borde);
  transition: border-color var(--lan-medio) var(--salida);
}
.lan-rol:hover { border-left-color: var(--acento); }

.lan-rol-t {
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.01em;
}
.lan-rol-frase {
  margin: var(--e-1) 0 var(--e-4);
  color: var(--acento);
  font-size: var(--txt-sm);
}
.lan-rol-dueno { border-left-color: color-mix(in oklch, var(--plata) 55%, var(--borde)); }
.lan-rol-dueno:hover { border-left-color: var(--plata); }
.lan-rol-dueno .lan-rol-frase { color: var(--plata); }

.lan-lista { margin: 0; padding: 0; list-style: none; }
.lan-lista li {
  position: relative;
  padding-left: var(--e-6);
  margin-bottom: var(--e-2);
  color: var(--texto-2);
}
.lan-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--e-3);
  height: 1px;
  background: var(--texto-3);
}

.lan-rol-nota {
  margin: var(--e-4) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio-sm);
  background: var(--atencion-fondo);
  color: var(--atencion);
  font-size: var(--txt-sm);
}

/* ── LOS PLANES ─────────────────────────────────────────────────────────*/
.lan-planes-grilla {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-12);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .lan-planes-grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .lan-planes-grilla { grid-template-columns: repeat(4, 1fr); } }

.lan-cargando { grid-column: 1 / -1; color: var(--texto-3); }

.lan-plan {
  display: flex;
  flex-direction: column;
  padding: var(--e-6);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  transition: border-color var(--lan-medio) var(--salida),
              transform var(--lan-medio) var(--salida),
              box-shadow var(--lan-medio) var(--salida);
}
.lan-plan:hover {
  border-color: color-mix(in oklch, var(--acento) 40%, var(--borde));
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
}

.lan-plan-nombre {
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.01em;
}
.lan-plan-clave {
  margin: 0 0 var(--e-4);
  font-family: var(--letra-num);
  font-size: var(--txt-xs);
  letter-spacing: 0.16em;
  color: var(--acento);
}

.lan-plan-precio {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin: 0;
}
.lan-plan-num {
  font-family: var(--letra-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-2xl);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.03em;
}
.lan-plan-mes { font-size: var(--txt-sm); color: var(--texto-3); }
.lan-plan-lista {
  margin: var(--e-1) 0 var(--e-6);
  font-size: var(--txt-sm);
  color: var(--texto-3);
}
.lan-plan-lista s { text-decoration-color: var(--error); }

.lan-plan-quienes { margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.lan-plan-quienes li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.lan-plan-quienes b {
  font-family: var(--letra-num);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  font-weight: var(--peso-medio);
}

.lan-plan-pie {
  margin: auto 0 0;
  padding-top: var(--e-4);
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.lan-plan-pie b { color: var(--texto); font-weight: var(--peso-medio); }

.lan-planes-pie {
  margin: var(--e-8) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-3);
}

.lan-planes-error {
  grid-column: 1 / -1;
  padding: var(--e-4) var(--e-6);
  border-radius: var(--radio);
  background: var(--error-fondo);
  color: var(--error);
}

/* ── LO QUE NO TIENE ────────────────────────────────────────────────────*/
.lan-no-lista {
  margin: var(--e-8) 0 0;
  padding: 0;
  list-style: none;
  max-width: 60ch;
}
.lan-no-lista li {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-2);
}
.lan-no-lista strong { color: var(--texto); font-weight: var(--peso-medio); }

/* ── CIERRE ─────────────────────────────────────────────────────────────*/
.lan-cierre { text-align: left; }
.lan-cierre-c {
  margin: var(--e-4) 0 0;
  max-width: 50ch;
  font-size: var(--lan-lead);
  color: var(--texto-2);
}
.lan-cierre-c strong { color: var(--texto); font-weight: var(--peso-medio); }

/* ── PIE ────────────────────────────────────────────────────────────────*/
.lan-pie {
  max-width: var(--lan-ancho);
  margin: 0 auto;
  padding: var(--e-12) var(--e-6) var(--e-16);
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-3);
  font-size: var(--txt-sm);
}
.lan-pie p { margin: 0 0 var(--e-2); }
.lan-pie span { color: var(--acento); font-weight: var(--peso-fuerte); }
.lan-pie a { color: var(--texto-2); }
.lan-pie a:hover { color: var(--acento); }


/* ══ CUANDO SE ABRE LA PUERTA ═════════════════════════════════════════════
   La landing y el acceso viven en la misma pagina --como en Kiosco-- y son
   excluyentes. Lo decide UNA clase en el `<body>`: con un `hidden` por
   seccion, el dia que se agregue una a la landing hay que acordarse de
   esconderla tambien, y nadie se acuerda.

   El `#la-puerta` no se prende desde aca: lo destapa el JS quitandole el
   `hidden`. Aca solo se apaga lo otro. */
body.lan-entrando .lan-hero,
body.lan-entrando .lan,
body.lan-entrando .lan-pie { display: none; }

/* El enlace del pie es un boton, porque no lleva a otra pagina: destapa el
   acceso en esta. Se viste como el enlace que era -- que sea un `<button>`
   es una decision de marcado, no algo que la persona tenga que notar. */
.lan-entrar {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lan-entrar:hover { color: var(--acento-claro, var(--acento)); }
.lan-entrar:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-chico, 4px); }