/* Mercadito POS — página de presentación.
   Misma paleta que la app (verde #1f7a4d) para que quien entra desde aquí
   reconozca lo que va a usar. Ilustraciones en SVG de línea, sin imágenes. */

:root {
  --verde: #1f7a4d;
  --verde-oscuro: #175c3a;
  --verde-hondo: #0f3d27;
  --verde-suave: #e8f3ed;
  --verde-medio: #cfe6d9;
  --verde-claro: #8fd6ad;
  --ambar: #9a5b06;
  --ambar-vivo: #e0a33e;
  --ambar-suave: #fbf1df;
  --rojo: #b3261e;

  --tinta: #13201a;
  --texto: #1d2622;
  --texto-suave: #56615b;
  --texto-tenue: #87918b;
  --fondo: #fbfcfb;
  --superficie: #f2f5f3;
  --tarjeta: #ffffff;
  --borde: #e2e8e4;
  --borde-fuerte: #cad4ce;
  --linea: #c3cdc7;
  --rejilla: rgba(19, 32, 26, .055);

  --radio: 20px;
  --radio-chico: 12px;
  --sombra-1: 0 1px 2px rgba(16, 32, 24, .05), 0 1px 1px rgba(16, 32, 24, .03);
  --sombra-2: 0 14px 34px -14px rgba(16, 40, 28, .22), 0 2px 6px rgba(16, 40, 28, .05);
  --sombra-3: 0 36px 70px -28px rgba(14, 40, 26, .32), 0 4px 12px rgba(14, 40, 26, .06);
  --anillo: 0 0 0 3px rgba(31, 122, 77, .22);

  --fuente: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1180px;
  --alto-cabecera: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: var(--verde); }
p { margin: 0 0 1rem; }

h1, h2, h3 { color: var(--tinta); text-wrap: balance; }

/* El punto de Plus Jakarta Sans queda muy separado en los títulos gruesos. */
.pt { margin-left: -.08em; }

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
}

h3 {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 700;
}

:focus-visible { outline: 3px solid rgba(31, 122, 77, .45); outline-offset: 2px; border-radius: 6px; }

.num { font-variant-numeric: tabular-nums; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.i {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contenedor { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }

.saltar {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 10px;
  background: var(--tinta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ------------------------------------------------------------------ Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 600 .95rem/1.2 var(--fuente);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.boton .i { width: 1.15em; height: 1.15em; stroke-width: 2; }

.boton-primario {
  background: var(--verde);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(15, 60, 38, .3), 0 8px 18px -8px rgba(31, 122, 77, .6);
}
.boton-primario:hover { background: var(--verde-oscuro); transform: translateY(-1px); }
.boton-primario:active { transform: none; }

.boton-secundario {
  background: #fff;
  color: var(--tinta);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-1);
}
.boton-secundario:hover { border-color: var(--texto-tenue); transform: translateY(-1px); }

.boton-texto { color: var(--texto); }
.boton-texto:hover { background: var(--superficie); }

.boton-claro { background: #fff; color: var(--verde-hondo); }
.boton-claro:hover { background: var(--verde-suave); }
.boton-claro[aria-disabled="true"] {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  cursor: default;
}

.boton-grande { min-height: 52px; padding: .85rem 1.4rem; border-radius: 14px; font-size: 1rem; }
.boton.ancho { width: 100%; }

/* ----------------------------------------------------------------- Cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 252, 251, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}
.cabecera.con-borde { border-color: var(--borde); background: rgba(251, 252, 251, .92); }

.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; height: var(--alto-cabecera); }

.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; }
.marca-icono {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--verde);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 14px -6px rgba(31, 122, 77, .7);
}
.marca-icono .i { width: 20px; height: 20px; stroke-width: 1.9; }
.marca-texto { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.marca-texto b { color: var(--verde); font-weight: 800; }

.nav { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.nav a {
  padding: .5rem .8rem;
  border-radius: 10px;
  color: var(--texto-suave);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--tinta); background: var(--superficie); }
.nav a[aria-current="true"] { color: var(--verde); }
.nav .nav-entrar, .nav .nav-cta { display: none; }

.cabecera-acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.boton-menu {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: 11px;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
}
.boton-menu .i { width: 22px; height: 22px; }
.boton-menu .cerrar, .boton-menu[aria-expanded="true"] .abrir { display: none; }
.boton-menu[aria-expanded="true"] .cerrar { display: block; }

/* ------------------------------------------------------------------ Portada */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}

.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 55% at 78% 35%, rgba(31, 122, 77, .13), transparent 70%),
    radial-gradient(35% 40% at 8% 0%, rgba(224, 163, 62, .12), transparent 70%);
}
.hero-fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 65% at 62% 30%, #000 15%, transparent 75%);
  mask-image: radial-gradient(70% 65% at 62% 30%, #000 15%, transparent 75%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .35rem .85rem .35rem .6rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--sombra-1);
  color: var(--texto);
  font-size: .85rem;
  font-weight: 600;
}
.insignia-punto {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
}
.insignia-punto::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--verde);
  opacity: .25;
  animation: latido 2.4s ease-out infinite;
}

.hero h1 {
  margin: 1.15rem 0 1.25rem;
  font-size: clamp(2.3rem, 1.15rem + 3.9vw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 800;
}
.resaltado { color: var(--verde); }

.hero-sub { max-width: 35rem; margin-bottom: 2rem; color: var(--texto-suave); font-size: clamp(1.02rem, .95rem + .3vw, 1.16rem); }

.hero-botones { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-puntos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--texto-suave);
  font-size: .92rem;
  font-weight: 600;
}
.hero-puntos li { display: flex; align-items: center; gap: .4rem; }
.hero-puntos .i { color: var(--verde); stroke-width: 2.4; width: 1.1em; height: 1.1em; }

.hero-visual { position: relative; }

/* Tarjetas que flotan sobre las ilustraciones. */
.flotante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .95rem .55rem .55rem;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sombra-2);
  font-size: .85rem;
  line-height: 1.25;
  white-space: nowrap;
  animation: flotar 6s ease-in-out infinite;
}
.flotante b { display: block; color: var(--tinta); font-weight: 700; }
.flotante small { display: block; color: var(--texto-suave); font-size: .75rem; }
.flotante-icono {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--verde-suave);
  color: var(--verde);
}
.flotante-icono .i { width: 19px; height: 19px; stroke-width: 2; }
.flotante-icono.ambar { background: var(--ambar-suave); color: var(--ambar); }

.flotante-senal { top: 1%; right: 1%; }
.flotante-vuelto { bottom: 3%; left: 33%; animation-delay: -3s; }
.flotante-vuelto b { font-size: 1.05rem; }
.flotante-cola { top: 0; left: 0; }
.flotante-subidas { top: 21%; right: 0; animation-delay: -2s; }
.flotante-camara { top: 17%; left: -3%; }
.flotante-hoy { bottom: 17%; right: -3%; animation-delay: -3s; }
.flotante-hoy b { font-size: 1.05rem; }

/* ------------------------------------------------------------- Ilustraciones */

.dibujo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dibujo .tenue { stroke: var(--linea); }
.dibujo .v { stroke: var(--verde); }
.dibujo .ambar { stroke: var(--ambar-vivo); }
.dibujo .grueso { stroke-width: 2.75; }
.dibujo .relleno { fill: #fff; }
.dibujo .suave { fill: var(--verde-suave); }
.dibujo .medio { fill: var(--verde-medio); }
.dibujo .lleno-v { fill: var(--verde); stroke: none; }
.dibujo .lleno-suave { fill: var(--verde-suave); stroke: none; }
.dibujo .trazo-blanco { stroke: #fff; stroke-width: 2.25; }
.dibujo .rayas { stroke: var(--borde-fuerte); stroke-dasharray: 1 8; stroke-width: 2.5; }
.dibujo .haz { fill: rgba(31, 122, 77, .13); stroke: none; }
.dibujo .pantalla { fill: var(--tinta); stroke: none; }
.dibujo .anillo { stroke: rgba(255, 255, 255, .09); }
.dibujo .linea-escaneo { stroke: #e5484d; stroke-width: 2.25; animation: escanear 2.6s ease-in-out infinite; }

.dibujo text { stroke: none; fill: var(--tinta); font-family: var(--fuente); }
.dibujo .svg-total { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.dibujo .svg-grande { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.dibujo .svg-boton { fill: #fff; font-size: 13px; font-weight: 700; }
.dibujo .svg-chico { font-size: 12px; font-weight: 600; }
.dibujo .svg-eje { fill: var(--texto-tenue); font-size: 11px; font-weight: 600; }
.dibujo .svg-pantalla { fill: #7ee2a8; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dibujo .svg-codigo { fill: var(--verde); font-size: 20px; font-weight: 800; letter-spacing: .08em; }

.dibujo .toque {
  transform-box: fill-box;
  transform-origin: center;
  animation: toque 2.4s ease-out infinite;
}
.dibujo .recibo-flota { animation: flotar 4s ease-in-out infinite; }
.dibujo .recibo-flota.r2 { animation-delay: -1.3s; }
.dibujo .recibo-flota.r3 { animation-delay: -2.6s; }

/* Mientras no se dibuja, los rellenos esperan a que llegue el trazo. */
.js [data-dibujo] * { transition: fill-opacity .7s ease .45s; }
.js [data-dibujo]:not(.dibujado) * { fill-opacity: 0; }

.js [data-aparecer] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.js [data-aparecer].visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ Equipos */

.equipos { border-block: 1px solid var(--borde); background: #fff; }
.equipos-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.35rem;
}
.equipos p { margin: 0; color: var(--texto-tenue); font-size: .88rem; font-weight: 600; }
.equipos ul { display: flex; flex-wrap: wrap; gap: .75rem 1.9rem; margin: 0; padding: 0; list-style: none; }
.equipos li { display: flex; align-items: center; gap: .5rem; color: var(--tinta); font-size: .95rem; font-weight: 600; }
.equipos .i { width: 22px; height: 22px; color: var(--verde); }

/* ----------------------------------------------------------------- Secciones */

.seccion { padding-block: clamp(4.5rem, 9vw, 7rem); }
.seccion-alterna { background: var(--superficie); border-block: 1px solid var(--borde); }

.seccion-cabeza { max-width: 45rem; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); text-align: center; }
.seccion-cabeza > p:last-child { margin: 0; color: var(--texto-suave); font-size: 1.1rem; }
.seccion-cabeza.izquierda { margin-inline: 0; text-align: left; }

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .9rem;
  color: var(--verde);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.antetitulo .i { width: 1.35em; height: 1.35em; }
.antetitulo.claro { color: var(--verde-claro); }

.lead { margin: 0 0 1.75rem; color: var(--texto-suave); font-size: clamp(1.02rem, .96rem + .25vw, 1.12rem); }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.dos-columnas.invertidas > :first-child { order: 2; }

.lista-check { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.lista-check li { display: flex; gap: .75rem; color: var(--texto-suave); }
.lista-check b { color: var(--tinta); font-weight: 700; }
.lista-check .i {
  width: 24px; height: 24px;
  margin-top: .05rem;
  padding: 4px;
  border-radius: 8px;
  background: var(--verde-suave);
  color: var(--verde);
  stroke-width: 2.4;
}
.lista-check.compacta { gap: .6rem; font-size: .95rem; }
.lista-check.compacta .i { width: 22px; height: 22px; }

/* ------------------------------------------------------------------- Bento */

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.bento-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.6rem;
  overflow: hidden;
  transition: box-shadow .3s, border-color .3s, opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.bento-item:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }

.bento-ancho {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1.75rem;
}

.bento-texto p { margin: 0; color: var(--texto-suave); }
.bento-dibujo { margin-top: auto; max-height: 200px; }
.bento-ancho .bento-dibujo { margin-top: 0; max-height: none; }

.icono-caja {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--verde-suave);
  color: var(--verde);
}
.icono-caja .i { width: 22px; height: 22px; }

.kpis { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 1.25rem; }
.kpis small { display: block; color: var(--texto-tenue); font-size: .78rem; font-weight: 600; }
.kpis b { color: var(--tinta); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }

.pagos { display: grid; gap: .5rem; margin-top: auto; }
.pago {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .6rem .5rem .5rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.pago:has(input:checked) { background: var(--verde-suave); border-color: #bcdac8; }
.pago-icono {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto-tenue);
  transition: background-color .2s, color .2s;
}
.pago-icono .i { width: 18px; height: 18px; }
.pago:has(input:checked) .pago-icono { background: #fff; color: var(--verde); }
.pago-nombre { flex: 1; color: var(--tinta); font-size: .95rem; font-weight: 600; }
.pago.sacudir { animation: sacudir .4s; }
.pagos-aviso { min-height: 1.3em; margin: .15rem 0 0; color: var(--texto-tenue); font-size: .8rem; }
.pagos-aviso.alerta { color: var(--ambar); font-weight: 600; }

.interruptor {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--borde-fuerte);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .2s;
}
.interruptor::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.interruptor:checked { background: var(--verde); }
.interruptor:checked::after { transform: translateX(16px); }

.bitacora, .sesiones { display: grid; margin: auto 0 0; padding: 0; list-style: none; }
.bitacora li {
  display: flex;
  gap: .75rem;
  padding: .65rem 0;
  border-top: 1px solid var(--borde);
  color: var(--texto);
  font-size: .88rem;
  line-height: 1.4;
}
.bitacora li:first-child { border-top: 0; padding-top: 0; }
.bitacora small { display: block; margin-top: .15rem; color: var(--texto-tenue); font-size: .76rem; }
.bitacora-punto {
  flex-shrink: 0;
  width: 8px; height: 8px;
  margin: .4rem .15rem 0;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-suave);
}
.bitacora-punto.rojo { background: var(--rojo); box-shadow: 0 0 0 4px #fbe9e7; }
.bitacora-punto.gris { background: var(--linea); box-shadow: 0 0 0 4px var(--superficie); }

.sesiones { gap: .5rem; }
.sesiones li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  color: var(--tinta);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.sesiones li > span:nth-child(2) { flex: 1; min-width: 0; }
.sesiones small { display: block; color: var(--texto-tenue); font-size: .76rem; font-weight: 500; }
.sesiones .i { width: 22px; height: 22px; color: var(--texto-suave); }

.etiqueta-verde, .etiqueta-gris {
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.etiqueta-verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta-gris { border: 1px solid var(--borde-fuerte); color: var(--texto-suave); }

.reparto { margin-top: auto; }
.reparto-barra { display: flex; gap: 3px; height: 14px; overflow: hidden; border-radius: 999px; }
.reparto-barra span:first-child { flex: 68; background: var(--verde); }
.reparto-barra span:last-child { flex: 32; background: var(--ambar-vivo); }
.reparto-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: .8rem;
  color: var(--texto-suave);
  font-size: .82rem;
}
.reparto-leyenda b { display: block; color: var(--tinta); font-size: 1.02rem; }
.cuadro { display: inline-block; width: 9px; height: 9px; margin-right: .4rem; border-radius: 3px; background: var(--verde); }
.cuadro.socio { background: var(--ambar-vivo); }

/* -------------------------------------------------------------------- Demos */

.demo { padding: 1.4rem; border-radius: 24px; box-shadow: var(--sombra-3); }

.demo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.demo-etiqueta { display: inline-flex; align-items: center; gap: .5rem; color: var(--tinta); font-weight: 700; }
.demo-etiqueta .i { color: var(--verde); }
.demo-pista {
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--ambar-suave);
  color: var(--ambar);
  font-size: .75rem;
  font-weight: 700;
}

.balanza { max-width: 330px; margin: 0 auto .75rem; }
.balanza [data-figura]:not(.activa) { display: none; }
.balanza.pesando .balanza-carga { animation: pesar .5s ease; }

.demo-productos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-radio > span {
  display: block;
  height: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  color: var(--tinta);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.chip-radio small { display: block; margin-top: .15rem; color: var(--texto-tenue); font-size: .74rem; font-weight: 500; }
.chip-radio:hover > span { border-color: var(--borde-fuerte); }
.chip-radio input:checked + span { border-color: var(--verde); background: var(--verde-suave); box-shadow: inset 0 0 0 1px var(--verde); }
.chip-radio input:focus-visible + span { outline: 3px solid rgba(31, 122, 77, .4); outline-offset: 2px; }

.demo-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.demo-campo { display: grid; flex: 1 1 150px; gap: .35rem; color: var(--texto-suave); font-size: .85rem; font-weight: 600; }

.entrada-dinero {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 50px;
  padding: 0 .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font-size: 1.25rem;
  font-weight: 700;
  transition: border-color .2s, box-shadow .2s;
}
.entrada-dinero:focus-within { border-color: var(--verde); box-shadow: var(--anillo); }
.entrada-dinero input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.entrada-dinero input::-webkit-inner-spin-button,
.entrada-dinero input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.demo-rapidos { display: flex; gap: .4rem; }
.demo-rapidos button {
  height: 50px;
  padding: 0 .9rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--tinta);
  font: 700 .9rem var(--fuente);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.demo-rapidos button:hover { border-color: var(--borde-fuerte); background: #fff; }

.demo-resultado { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.demo-resultado > div { padding: .9rem 1rem; border-radius: 14px; background: var(--superficie); color: var(--tinta); }
.demo-resultado > div:first-child { background: var(--verde-hondo); color: #fff; }
.demo-resultado small { display: block; font-size: .78rem; font-weight: 600; opacity: .72; }
.demo-resultado strong { display: block; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }

.ilustracion, .android-visual, .demo-cierre-marco { position: relative; }

.demo-cierre-marco { padding-top: 2rem; }
.calendario-fondo {
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  z-index: 0;
  width: 190px;
  rotate: 8deg;
}
.demo-cierre { position: relative; z-index: 1; max-width: 480px; }

.estado-abierta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: .75rem;
  font-weight: 700;
}
.estado-abierta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.segmentado {
  display: flex;
  gap: 2px;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--superficie);
}
.segmentado label { position: relative; flex: 1; }
.segmentado input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmentado span {
  display: block;
  padding: .5rem .3rem;
  border-radius: 9px;
  color: var(--texto-suave);
  font-size: .84rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.segmentado label:hover span { color: var(--tinta); }
.segmentado input:checked + span { background: #fff; color: var(--tinta); box-shadow: var(--sombra-1), 0 0 0 1px var(--borde); }
.segmentado input:focus-visible + span { outline: 3px solid rgba(31, 122, 77, .4); outline-offset: 1px; }

.cierre-periodo h3 { margin: 0 0 .15rem; font-size: 1.3rem; }
.cierre-periodo p { margin: 0 0 .85rem; color: var(--texto-suave); font-size: .92rem; }
.progreso { height: 8px; overflow: hidden; border-radius: 999px; background: var(--superficie); }
.progreso span {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--verde), #3fa877);
  transition: width .55s cubic-bezier(.3, .7, .3, 1);
}
.cierre-periodo small { display: block; margin-top: .4rem; color: var(--texto-tenue); font-size: .78rem; font-weight: 600; }

.cuenta { display: grid; margin: 1.25rem 0 0; }
.cuenta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px dashed var(--borde-fuerte);
}
.cuenta dt { color: var(--texto-suave); font-size: .95rem; }
.cuenta dd { margin: 0; color: var(--tinta); font-weight: 700; }
.cuenta .positivo { color: var(--verde); }
.cuenta .negativo { color: var(--rojo); }
.cuenta .cuenta-total { margin-top: .2rem; padding-top: .9rem; border-top: 2px solid var(--tinta); }
.cuenta-total dt { color: var(--tinta); font-weight: 700; }
.cuenta-total dd { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }

/* -------------------------------------------------------------------- Roles */

.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 980px; margin-inline: auto; }
.rol { padding: clamp(1.4rem, 3vw, 2rem); }
.rol-dibujo { max-width: 260px; margin-bottom: 1.4rem; }
.rol-etiqueta {
  display: inline-block;
  margin: 0 0 .5rem;
  color: var(--verde);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rol h3 { margin-bottom: 1rem; font-size: 1.3rem; }

/* ------------------------------------------------------------------ Android */

.android {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  background: var(--verde-hondo);
  color: #b9d6c6;
}
.android::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 78% 50%, rgba(71, 169, 122, .38), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent);
}
.android h2 { color: #fff; }
.android .lead { color: #b9d6c6; }

.android-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}
.android-lista li { display: flex; gap: .85rem; font-size: .92rem; line-height: 1.5; }
.android-lista b { display: block; margin-bottom: .15rem; color: #fff; font-size: .98rem; font-weight: 700; }
.android-icono {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: var(--verde-claro);
}
.android-icono .i { width: 20px; height: 20px; }

.android-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.android-nota { max-width: 22rem; margin: 0; font-size: .88rem; }
.android-nota a { color: #fff; font-weight: 600; }
.android-nota b { color: #fff; }

.android-visual { max-width: 400px; margin-inline: auto; }
.android-visual > svg { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }

/* -------------------------------------------------------------------- Pasos */

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.paso { position: relative; padding: 1.6rem; }
.paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4.1rem;
  right: -1.25rem;
  width: 1.25rem;
  border-top: 2px dashed var(--borde-fuerte);
}
.paso-dibujo { width: 120px; margin-bottom: 1.1rem; }
.paso-num {
  display: inline-block;
  margin-bottom: .35rem;
  color: var(--verde);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.paso p { margin: 0; color: var(--texto-suave); }

.pasos-lista { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.pasos-lista li { display: flex; gap: .9rem; color: var(--texto-suave); }
.pasos-lista b { color: var(--tinta); }
.paso-numero {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #bcdac8;
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: .85rem;
  font-weight: 800;
}

/* ---------------------------------------------------------------- Preguntas */

.preguntas-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}
.preguntas-grid .seccion-cabeza { position: sticky; top: calc(var(--alto-cabecera) + 2rem); }

.preguntas { display: grid; gap: .75rem; }
.pregunta {
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.pregunta[open] { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  color: var(--tinta);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .i { width: 20px; height: 20px; color: var(--verde); stroke-width: 2.2; transition: rotate .25s; }
.pregunta[open] summary .i { rotate: 45deg; }
.pregunta p { margin: 0; padding: 0 1.25rem 1.15rem; color: var(--texto-suave); }

/* ------------------------------------------------------------------- Acceso */

.acceso {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  background: var(--tinta);
  color: #a9bab1;
}
.acceso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 85% 40%, rgba(31, 122, 77, .45), transparent 70%),
    radial-gradient(35% 50% at 0% 100%, rgba(31, 122, 77, .25), transparent 70%);
}
.acceso-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.acceso h2 { color: #fff; }
.acceso .lead { color: #a9bab1; }
.acceso-lista { display: grid; gap: .8rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.acceso-lista li { display: flex; align-items: center; gap: .7rem; color: #e4ede8; font-weight: 500; }
.acceso-lista .i {
  width: 24px; height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(143, 214, 173, .15);
  color: var(--verde-claro);
  stroke-width: 2.4;
}
.acceso-cuenta { margin: 0; }
.acceso-cuenta a { color: #fff; font-weight: 600; }

.formulario {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-color: transparent;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
}
.campo { display: grid; gap: .4rem; min-width: 0; }
.campo label, .etiqueta-campo { color: var(--tinta); font-size: .88rem; font-weight: 600; }
.opcional { color: var(--texto-tenue); font-weight: 500; }
.campo input[type="text"], .campo input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 11px;
  background: #fff;
  color: var(--tinta);
  font: 500 1rem var(--fuente);
  transition: border-color .2s, box-shadow .2s;
}
.campo input::placeholder { color: var(--texto-tenue); }
.campo input:focus { border-color: var(--verde); outline: 0; box-shadow: var(--anillo); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.segmentado-formulario { margin: 0; }
.segmentado-formulario span { padding-block: .6rem; font-size: .92rem; }
.formulario-nota { margin: -.25rem 0 0; color: var(--texto-tenue); font-size: .8rem; text-align: center; }
.formulario-estado { margin: 0; color: var(--verde); font-size: .88rem; font-weight: 600; text-align: center; }
.formulario-estado:empty { display: none; }
.formulario-estado.error { color: var(--rojo); }

/* ---------------------------------------------------------------------- Pie */

.pie { padding-block: 3.5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .08); background: var(--tinta); color: #8fa298; }
.pie-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.pie .marca { color: #fff; }
.pie .marca-texto b { color: var(--verde-claro); }
.pie-marca p { max-width: 22rem; margin: 1rem 0 0; font-size: .92rem; }
.pie-columna { display: grid; align-content: start; gap: .55rem; }
.pie-columna p { margin: 0 0 .3rem; color: #fff; font-size: .9rem; font-weight: 700; }
.pie-columna a { color: #8fa298; font-size: .92rem; text-decoration: none; transition: color .2s; }
.pie-columna a:hover { color: #fff; }
.pie-final {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .85rem;
}

/* --------------------------------------------------------------- Animaciones */

@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes latido { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes escanear { 0%, 100% { translate: 0 -14px; opacity: .55; } 50% { translate: 0 14px; opacity: 1; } }
@keyframes toque { 0% { scale: .5; opacity: .9; } 100% { scale: 1.9; opacity: 0; } }
@keyframes pesar { 30% { translate: 0 5px; } 65% { translate: 0 -1.5px; } }
@keyframes sacudir { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- Responsivo */

@media (max-width: 1080px) {
  .nav a { padding-inline: .6rem; }
  .flotante-camara { left: 0; }
  .flotante-hoy { right: 0; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-texto { max-width: 40rem; }
  .hero-visual { width: 100%; max-width: 640px; margin-inline: auto; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-item:last-child { grid-column: span 2; }

  .dos-columnas, .acceso-grid, .preguntas-grid { grid-template-columns: minmax(0, 1fr); }
  .dos-columnas.invertidas > :first-child { order: 0; }
  .ilustracion, .demo, .demo-cierre-marco { width: 100%; max-width: 560px; margin-inline: auto; }
  .demo-cierre { max-width: none; }
  .preguntas-grid .seccion-cabeza { position: static; margin-bottom: 0; }

  .pasos { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .paso { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
  .paso-dibujo { grid-row: span 3; width: 100px; margin: 0; }
  .paso:not(:last-child)::after { display: none; }
}

@media (max-width: 920px) {
  .boton-menu { display: grid; }
  .solo-ancho { display: none; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    margin: 0;
    padding: .6rem 20px 1.25rem;
    border-bottom: 1px solid var(--borde);
    background: #fff;
    box-shadow: 0 24px 30px -24px rgba(0, 0, 0, .25);
  }
  .nav.abierta { display: flex; }
  .nav a { padding: .8rem .75rem; font-size: 1rem; }
  .nav .nav-entrar { display: block; margin-top: .35rem; border-top: 1px solid var(--borde); border-radius: 0; padding-top: 1rem; color: var(--tinta); }
}

@media (max-width: 720px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-ancho, .bento-item:last-child { grid-column: auto; }
  .bento-ancho { grid-template-columns: minmax(0, 1fr); }

  .roles { grid-template-columns: minmax(0, 1fr); }
  .android-lista { grid-template-columns: minmax(0, 1fr); }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: span 2; }
}

@media (max-width: 560px) {
  .cabecera-acciones .boton-primario { display: none; }
  .nav .nav-cta { display: flex; margin-top: .6rem; color: #fff; }
  .nav .nav-cta:hover { background: var(--verde-oscuro); color: #fff; }

  .hero-botones .boton { flex: 1 1 100%; }
  .equipos-fila { justify-content: flex-start; }
  .equipos ul { gap: .6rem 1.2rem; }
  .equipos li { font-size: .88rem; }

  .flotante { gap: .5rem; padding: .4rem .7rem .4rem .4rem; border-radius: 12px; font-size: .75rem; }
  .flotante small { font-size: .68rem; }
  .flotante-icono { width: 28px; height: 28px; border-radius: 8px; }
  .flotante-icono .i { width: 16px; height: 16px; }
  .flotante-vuelto b, .flotante-hoy b { font-size: .9rem; }
  .flotante-vuelto { left: 24%; }

  .demo { padding: 1.1rem; border-radius: 20px; }
  .demo-productos { grid-template-columns: minmax(0, 1fr); }
  .chip-radio > span { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
  .demo-rapidos { width: 100%; }
  .demo-rapidos button { flex: 1; }

  #frecuencias { flex-wrap: wrap; }
  #frecuencias label { flex: 1 1 30%; }
  .calendario-fondo { width: 130px; top: -.5rem; right: -.25rem; }

  .campos-dobles { grid-template-columns: minmax(0, 1fr); }
  .paso { grid-template-columns: minmax(0, 1fr); }
  .paso-dibujo { grid-row: auto; margin-bottom: 1rem; }
}