/* Ventia · página de producto (scrollytelling). Colores y letras de la app (code/app/src/tema.ts). */

@font-face { font-family: 'Bricolage'; src: url('../fonts/BricolageGrotesque_800ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --noche: #0A100E; --noche-2: #10221D; --noche-3: #16211D;
  --verde: #0E7A5A; --verde-vivo: #3CC495; --ambar: #F2A93B;
  --tinta-clara: #E6EFEB; --suave-clara: #93A6A0; --linea-osc: #24332E;
  /* app (tema claro) dentro del iPad */
  --a-bg: #EEF2EF; --a-surface: #F8FAF8; --a-card: #FFFFFF; --a-ink: #10221D; --a-muted: #5D6F69; --a-line: #DCE4E0;
  --a-accent: #0E7A5A; --a-soft: #DDF0E8; --a-opp: #C9790A; --a-opp-soft: #FBEBD0; --a-bad: #C93A32; --a-bad-soft: #F8DEDB; --a-ok: #1E8F4E;
  --display: 'Bricolage', system-ui, sans-serif;
  --texto: 'Figtree', system-ui, sans-serif;
  --ancho: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--noche); color: var(--tinta-clara); font-family: var(--texto); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, svg { display: block; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cab { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 18px max(24px, calc((100vw - var(--ancho)) / 2)); transition: background .3s, backdrop-filter .3s; }
.cab.con-fondo { background: rgba(10, 16, 14, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.nombre { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: 26px; line-height: 1; position: relative; }
.nombre .i { position: relative; }
.nombre .i::after { content: ''; position: absolute; left: 50%; top: .19em; width: .2em; height: .2em; margin-left: -.115em; border-radius: 50%; background: var(--ambar); }
.cab nav { display: flex; gap: 28px; align-items: center; font-size: 15px; }
.cab nav a { text-decoration: none; color: var(--suave-clara); }
.cab nav a:hover { color: var(--tinta-clara); }
.boton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--ambar); color: #1b1305 !important;
  font-weight: 600; text-decoration: none; font-size: 16px; transition: transform .2s, box-shadow .2s; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(242, 169, 59, .28); }
.boton.secundario { background: transparent; color: var(--tinta-clara) !important; border: 1px solid var(--linea-osc); }
.cab .boton { padding: 9px 18px; font-size: 14px; }

/* ── Portada ──────────────────────────────────────────────────────────── */
.portada { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px 24px 40px; position: relative; overflow: hidden; }
.portada::before { content: ''; position: absolute; inset: -20% -10% auto; height: 120%; background:
  radial-gradient(50% 45% at 50% 35%, rgba(14, 122, 90, .35), transparent 70%),
  radial-gradient(20% 18% at 62% 22%, rgba(242, 169, 59, .12), transparent 70%); pointer-events: none; }
.portada .dentro { position: relative; max-width: 900px; }
.etiqueta { display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-vivo); margin-bottom: 22px; }
.portada h1 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: .98; font-size: clamp(44px, 7.4vw, 104px); }
.portada h1 em { font-style: normal; color: var(--ambar); }
.portada p { margin: 26px auto 34px; max-width: 620px; color: var(--suave-clara); font-size: clamp(18px, 1.6vw, 21px); }
.acciones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bajar { margin-top: 64px; font-size: 13px; color: var(--suave-clara); letter-spacing: .1em; text-transform: uppercase; }
.bajar span { display: block; width: 1px; height: 46px; margin: 12px auto 0; background: linear-gradient(var(--suave-clara), transparent); animation: bajar 2s infinite; }
@keyframes bajar { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Historia: iPad fijo + pasos ──────────────────────────────────────── */
.historia { position: relative; }
.escena { position: relative; height: 100vh; display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 56px; align-items: center;
  padding: 90px max(24px, calc((100vw - var(--ancho)) / 2)) 40px; }
.textos { position: relative; height: 340px; }
.paso { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(24px);
  transition: opacity .5s, transform .5s; pointer-events: none; }
.paso.activo { opacity: 1; transform: none; pointer-events: auto; }
.paso .n { font-family: var(--display); font-size: 14px; color: var(--ambar); letter-spacing: .12em; margin-bottom: 14px; }
.paso h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 18px; }
.paso p { color: var(--suave-clara); }
.paso ul { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: 16px; }
.paso li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-vivo); margin-right: 10px; vertical-align: 2px; }
.puntos { position: absolute; left: max(24px, calc((100vw - var(--ancho)) / 2)); bottom: 48px; display: flex; gap: 8px; }
.puntos i { width: 22px; height: 4px; border-radius: 4px; background: var(--linea-osc); transition: background .3s, width .3s; }
.puntos i.activo { background: var(--ambar); width: 38px; }

/* El iPad (11", horizontal ≈ 1,43:1) */
.ipad-sitio { display: grid; place-items: center; perspective: 1600px; }
.ipad { width: min(100%, 760px, calc((100vh - 170px) * 1.43)); aspect-ratio: 1.43; border-radius: 34px; padding: 16px; background: #050807;
  box-shadow: 0 0 0 2px #2a3632, 0 40px 120px rgba(0, 0, 0, .6), 0 0 120px rgba(14, 122, 90, .18); position: relative; will-change: transform; }
.ipad::after { content: ''; position: absolute; top: 50%; left: 6px; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #1d2724; }
.pantalla { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: var(--a-bg); color: var(--a-ink);
  font-size: 11px; line-height: 1.35; container-type: inline-size; }

/* ── La app dentro del iPad (maqueta) ─────────────────────────────────── */
.app { position: absolute; inset: 0; display: grid; grid-template-columns: 17% 1fr; opacity: 0; transform: scale(.985); transition: opacity .45s, transform .45s; }
.app.activo { opacity: 1; transform: none; }
.lado { background: var(--a-ink); color: #cfdcd6; padding: 4.5cqw 2.4cqw; display: flex; flex-direction: column; gap: 1.1cqw; font-size: 1.45cqw; }
.lado .m { display: flex; align-items: center; gap: .9cqw; margin-bottom: 2cqw; font-family: var(--display); color: #fff; font-size: 2.2cqw; letter-spacing: -.03em; }
.lado .m b { width: 2.8cqw; height: 2.8cqw; border-radius: .7cqw; background: var(--verde) url('../img/ventia-marca.svg') center/cover; }
.lado span { padding: .9cqw 1.2cqw; border-radius: .9cqw; }
.lado span.on { background: rgba(60, 196, 149, .16); color: #fff; }
.lado .emp { margin-top: auto; font-size: 1.2cqw; color: #7f938c; }
.cuerpo { padding: 3.4cqw 3.4cqw; display: flex; flex-direction: column; gap: 2cqw; overflow: hidden; font-size: 1.45cqw; }
.cuerpo h3 { font-family: var(--display); font-size: 3.1cqw; letter-spacing: -.03em; line-height: 1; }
.cuerpo .sub { color: var(--a-muted); font-size: 1.35cqw; margin-top: .6cqw; }
.fila { display: flex; gap: 1.6cqw; }
.ficha { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 1.6cqw; padding: 1.8cqw; }
.kpi { flex: 1; }
.kpi b { display: block; font-family: var(--display); font-size: 2.9cqw; letter-spacing: -.02em; }
.kpi small { color: var(--a-muted); font-size: 1.2cqw; }
.lista { display: flex; flex-direction: column; gap: .9cqw; }
.item { display: flex; align-items: center; gap: 1.4cqw; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 1.3cqw; padding: 1.25cqw 1.6cqw; }
.item .av { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--a-soft); color: var(--a-accent); font-weight: 600; font-size: 1.25cqw; flex: none; }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-weight: 600; font-size: 1.5cqw; }
.item .t small { color: var(--a-muted); font-size: 1.2cqw; }
.chip { padding: .45cqw 1.1cqw; border-radius: 99px; font-size: 1.15cqw; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--a-soft); color: var(--a-accent); }
.chip.op { background: var(--a-opp-soft); color: var(--a-opp); }
.chip.bad { background: var(--a-bad-soft); color: var(--a-bad); }
.chip.gris { background: var(--a-bg); color: var(--a-muted); }
.precio { font-weight: 600; font-size: 1.45cqw; white-space: nowrap; }
.qty { display: flex; align-items: center; gap: .6cqw; }
.qty i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 1px solid var(--a-line); display: grid; place-items: center; font-style: normal; font-size: 1.6cqw; color: var(--a-accent); }
.qty b { min-width: 3cqw; text-align: center; font-size: 1.6cqw; }
.seg { display: inline-flex; border: 1px solid var(--a-line); border-radius: 99px; overflow: hidden; font-size: 1.1cqw; }
.seg span { padding: .35cqw .9cqw; } .seg span.on { background: var(--a-accent); color: #fff; }
.aviso { display: flex; gap: 1.2cqw; align-items: center; padding: 1.4cqw 1.6cqw; border-radius: 1.3cqw; background: var(--a-opp-soft); color: #7a4a05; font-size: 1.35cqw; }
.aviso b { font-weight: 600; }
.total { display: flex; justify-content: space-between; align-items: center; margin-top: auto; background: var(--a-ink); color: #fff; border-radius: 1.6cqw; padding: 1.8cqw 2.2cqw; }
.total b { font-family: var(--display); font-size: 2.8cqw; }
.total .btn { background: var(--ambar); color: #1b1305; border-radius: 99px; padding: 1cqw 2.2cqw; font-weight: 600; font-size: 1.4cqw; }
.offline { display: inline-flex; align-items: center; gap: .6cqw; font-size: 1.15cqw; color: var(--a-muted); }
.offline::before { content: ''; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--ambar); }
.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.prod { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 1.4cqw; overflow: hidden; }
.prod .foto { aspect-ratio: 1.5; display: grid; place-items: center; font-family: var(--display); font-size: 3cqw; color: rgba(255,255,255,.9); position: relative; }
.prod .foto .chip { position: absolute; top: 1cqw; left: 1cqw; }
.prod .info { padding: 1.2cqw 1.4cqw; } .prod .info b { display: block; font-size: 1.35cqw; font-weight: 600; } .prod .info small { color: var(--a-muted); font-size: 1.15cqw; }
.velo { position: absolute; inset: 0; background: rgba(6, 14, 11, .45); display: flex; align-items: flex-end; }
.hoja { width: 100%; background: var(--a-surface); border-radius: 2.4cqw 2.4cqw 0 0; padding: 2.6cqw 3.4cqw 3.4cqw; }
.hoja h4 { font-family: var(--display); font-size: 2.4cqw; letter-spacing: -.02em; margin-bottom: .5cqw; }
.motivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1cqw; margin: 2cqw 0; }
.motivos span { border: 1px solid var(--a-line); background: var(--a-card); border-radius: 1.2cqw; padding: 1.4cqw; text-align: center; font-weight: 600; font-size: 1.35cqw; }
.motivos span.on { border-color: var(--a-accent); background: var(--a-soft); color: var(--a-accent); }
.nota { border: 1px dashed var(--a-line); border-radius: 1.2cqw; padding: 1.3cqw 1.6cqw; color: var(--a-muted); font-size: 1.3cqw; }
.toast { position: absolute; right: 2.4cqw; top: 2.4cqw; background: var(--a-ink); color: #fff; border-radius: 1.4cqw; padding: 1.5cqw 2cqw; display: flex; gap: 1.2cqw; align-items: center; font-size: 1.35cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.25); }
.toast i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--verde-vivo); display: grid; place-items: center; color: var(--a-ink); font-style: normal; font-weight: 600; }

/* ── Conexión con el ERP ──────────────────────────────────────────────── */
.erp { padding: 140px 24px; text-align: center; position: relative; }
.erp h2, .bloque h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(34px, 4.6vw, 64px); max-width: 900px; margin: 0 auto 22px; }
.erp > p { color: var(--suave-clara); max-width: 640px; margin: 0 auto; }
.flujo { max-width: 980px; margin: 70px auto 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.nodo { background: var(--noche-3); border: 1px solid var(--linea-osc); border-radius: 22px; padding: 26px 20px; }
.nodo b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -.02em; margin-bottom: 6px; }
.nodo small { color: var(--suave-clara); font-size: 14px; }
.nodo.erp-nodo b { color: var(--ambar); }
.linea { width: 70px; height: 2px; background: linear-gradient(90deg, transparent, var(--verde-vivo), transparent); background-size: 200% 100%; animation: fluir 1.6s linear infinite; }
@keyframes fluir { to { background-position: -200% 0; } }
.erps { margin-top: 44px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.erps span { padding: 9px 18px; border-radius: 99px; border: 1px solid var(--linea-osc); color: var(--suave-clara); font-size: 15px; }
.erps span.si { color: var(--tinta-clara); border-color: var(--verde); }

/* ── Ventajas y cierre ────────────────────────────────────────────────── */
.bloque { padding: 120px max(24px, calc((100vw - var(--ancho)) / 2)); }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.rejilla div { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 22px; padding: 28px; }
.rejilla b { display: block; font-family: var(--display); font-size: 21px; letter-spacing: -.02em; margin-bottom: 8px; }
.rejilla p { color: var(--suave-clara); font-size: 16px; }
.cierre { text-align: center; padding: 140px 24px; background: radial-gradient(60% 60% at 50% 100%, rgba(14, 122, 90, .35), transparent 70%); }
.cierre p { color: var(--suave-clara); margin: 0 auto 34px; max-width: 560px; }

/* ── Móvil: sin fijar, cada paso con su pantalla ──────────────────────── */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .cab nav a:not(.boton) { display: none; }
  .escena { height: auto; display: block; padding: 40px 20px; }
  .ipad-sitio, .puntos { display: none; }
  .textos { height: auto; display: grid; gap: 70px; }
  .paso { position: static; opacity: 1; transform: none; }
  .paso .ipad-movil { display: block; margin-top: 26px; }
  .flujo { grid-template-columns: 1fr; } .linea { width: 2px; height: 34px; margin: 0 auto; }
  .rejilla { grid-template-columns: 1fr; }
}
.ipad-movil { display: none; }
.ipad-movil .ipad { width: 100%; border-radius: 22px; padding: 9px; }
.ipad-movil .pantalla { border-radius: 14px; }
.ipad-movil .app { opacity: 1; transform: none; }

.vista-previa .portada { display: none; }
.vista-previa .app, .vista-previa .paso { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bajar span, .linea { animation: none; }
  .paso, .app { transition: none; }
}