@charset "UTF-8";
/* Landing VentaFlex — rediseño v0.20.0.
   Copia pixel-perfect del mockup
     docs/frontend/mockups/v0.20.0/mockup-landing/Landing VentaFlex.dc.html
   Estilos scoped al componente (:host); no filtran al resto de la app (DreamsPOS). */
.vf-root {
  /* ── Tokens del mockup ── */
  --accent: #FF9F43; /* naranja primario */
  --accent-hover: #FFAC5E; /* hover naranjas */
  --accent-deep: #C4661A; /* el naranja cuando es TEXTO grande (3.72:1) — nunca como fondo */
  --accent-ink: #A85A24; /* eyebrow / links de acento — 4.72:1 canvas, 4.56:1 crema */
  --cream-bg: #FFF1E2; /* fondo de eyebrows/badges sobre claro */
  --cream-bd: #FFD9AE; /* borde chips crema */
  --navy: #1B2950; /* texto fuerte, fondos oscuros */
  --navy-card: #22315C; /* cards dentro del banner navy */
  --navy-bd: #36477A; /* borde sobre navy */
  --navy-bd2: #2C3C66;
  --bg: #F7F7F7; /* fondo de página */
  --ink-mid: #4A5468; /* párrafos */
  --ink-mid2: #34415C;
  --ink: #34415C; /* alias del anterior — se usa en los artefactos de datos */
  --ink-soft: #666E80; /* subtítulos — PISO de tinta, 4.77:1 sobre canvas */
  --on-navy: #9DA9C8;
  --on-navy2: #B7C0D8;
  --on-navy3: #8E99B7; /* 4.99:1 sobre navy — antes 4.13 */
  --line: #E7E7E9; /* bordes claros */
  --line2: #EEE;
  --line3: #E0E0E4;
  --green: #177A50;
  --green-bg: #E7F6EE;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", monospace;
  display: block;
  font-family: var(--font-sans);
  color: var(--navy);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.vf-root {
  background: var(--bg);
  /* `clip`, NO `hidden`: hidden fuerza overflow-y:auto y convierte a .vf-root en el
     scrollport del sticky, dejando el header inerte (medido: top=-2000 con scrollY 2000).
     El `hidden` queda de fallback para navegadores sin soporte de clip. */
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
  /* DreamsPOS aplica font-family directo sobre los tags (body/h1-6/p/button => Nunito),
     lo que gana sobre la herencia de :host. Forzamos la sans del mockup en los tags de
     texto. Va con `inherit` (especificidad 0,1,1) por DEBAJO de las clases mono nesteadas
     (.vf-root .vf-eyebrow => 0,2,0), así los eyebrows/labels mantienen Spline Sans Mono. */
  /* DreamsPOS pinta los headings con su color charcoal (#212B36); el mockup los quiere navy.
     Va temprano en el archivo: los headings con color propio (plan h3 #4A5468, banner/CTA #fff)
     lo declaran más abajo y ganan por orden de fuente. */
  /* Contenedor centrado estándar del mockup */
  /* ── Ritmo (v1.32.0) ──
     Todas las secciones tenían el mismo padding: el detector midió un solo valor de
     espaciado en el 73% de los pasos, y sin variación el ojo lee plantilla en vez de
     composición. El aire ahora sigue el peso narrativo: denso donde hay evidencia,
     amplio en los dos picos (el diferencial y la decisión). */
  /* (el padding de .vf-caso y .vf-planes vive en su propio bloque, más abajo) */
  /* ── Botones reusables ── */
  /* ── Eyebrows ── */
  /* ── Section head ── */
  /* ============ HEADER ============ */
  /* ============ HERO ============ */
  /* POS mockup */
  /* ============ FEATURES ============ */
  /* Sin grilla de cards iguales (v1.32.0): dos celdas de EVIDENCIA que muestran el dato
     que la función produce, y el resto en lista densa. La jerarquía la hace la estructura,
     no un contenedor repetido. Ver .impeccable/critique/ — era la causa de "se ve genérica". */
  /* El artefacto: fondo canvas dentro de la card blanca — el dato se lee como pantalla */
  /* `flex: 1`, NO `margin-top: auto`: auto los alineaba por ABAJO, y como los dos
     artefactos tienen distinta altura el más corto arrancaba 24px más abajo — la
     divisoria superior dejaba de ser una sola horizontal cruzando las dos cards.
     Alinean por arriba y estiran hasta el fondo, así el bloque de tono también cierra
     parejo. Cards de igual alto NO implica interiores alineados. */
  /* SIN fondo: el gris quedaba como una mancha sin forma, con esquinas duras dentro
     de una card redondeada. El artefacto no necesita tono para leerse como dato —
     lo hacen la divisoria, el mono y las columnas alineadas. */
  /* Todo número comparable en mono — Regla del Número en Mono (DESIGN.md) */
  /* Libro mayor del arqueo */
  /* Tabla de datos genérica (cuenta corriente) */
  /* El estado se dice con palabras; el color acompaña, nunca comunica solo */
  /* Las demás funciones: lista densa, separada por reglas. Sin card, sin badge, sin ícono. */
  /* Roadmap: una línea, no una sección. Lo que no existe no compite con lo que sí. */
  /* ============ ROBUSTNESS BANNER ============ */
  /* ============ CASO ANA ============ */
  /* Panel stock por sucursal */
  /* ============ PLANES ============ */
  /* El nombre del plan es AHORA el identificador: sin precio ni límites arriba, es lo
     único que ordena. Antes iba en 18px gris debajo de un número de 27px navy — la
     jerarquía estaba invertida respecto de lo que el lector tiene que leer primero. */
  /* Sin precios en pantalla, este es el único término comercial que queda: tiene que
     leerse. El #A8AEBB anterior daba 2,23:1 sobre blanco. */
  /* ============ CTA FINAL ============ */
  /* ============ FOOTER ============ */
  /* ============ RESPONSIVE ============ */
}
.vf-root *, .vf-root *::before, .vf-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.vf-root a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.vf-root h1, .vf-root h2, .vf-root h3 {
  letter-spacing: -0.02em;
}
.vf-root h1, .vf-root h2, .vf-root h3, .vf-root h4, .vf-root h5, .vf-root h6, .vf-root p, .vf-root a, .vf-root span, .vf-root li, .vf-root div, .vf-root button, .vf-root strong, .vf-root ul {
  font-family: inherit;
}
.vf-root h1, .vf-root h2, .vf-root h3, .vf-root h4, .vf-root h5, .vf-root h6 {
  color: var(--navy);
}
.vf-root .vf-sec {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 28px;
}
.vf-root .vf-features {
  padding-top: 52px;
}
.vf-root .vf-robust .vf-sec {
  padding-top: 88px;
  padding-bottom: 88px;
}
.vf-root .vf-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  background: var(--accent);
  border-radius: 11px;
  padding: 11px 20px;
  box-shadow: 0 1px 0 rgba(27, 41, 80, 0.06);
  transition: background 0.15s;
}
.vf-root .vf-btn-primary:hover {
  background: var(--accent-hover);
}
.vf-root .vf-btn-lg {
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 700;
}
.vf-root .vf-btn-sm {
  font-size: 15px;
}
.vf-root .vf-btn-glow {
  box-shadow: 0 6px 18px rgba(255, 159, 67, 0.35);
}
.vf-root .vf-btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line3);
  border-radius: 12px;
  transition: border-color 0.15s;
}
.vf-root .vf-btn-line:hover {
  border-color: var(--navy);
}
.vf-root .vf-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border-radius: 12px;
  transition: background 0.15s;
}
.vf-root .vf-btn-white:hover {
  background: #F0F0F2;
}
.vf-root .vf-eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--accent-ink);
  text-transform: uppercase;
}
.vf-root .vf-eyebrow.accent {
  color: var(--accent);
}
.vf-root .vf-eyebrow-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  background: var(--cream-bg);
  border: 1px solid var(--cream-bd);
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.vf-root .vf-sec-head {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.vf-root .vf-sec-head.start {
  max-width: 640px;
  margin: 0;
  text-align: left;
}
.vf-root .vf-sec-head h2 {
  font-size: 36px;
  font-weight: 800;
  margin-top: 12px;
}
.vf-root .vf-sec-head p {
  font-size: 17px;
  color: var(--ink-mid);
  margin-top: 12px;
  text-wrap: pretty;
}
.vf-root .vf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 247, 247, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.vf-root .vf-headwrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.vf-root .vf-brand {
  display: flex;
  align-items: center;
}
.vf-root .vf-brand-logo {
  height: 36px;
  width: auto;
  display: block;
}
.vf-root .vf-nav {
  display: flex;
  gap: 26px;
  margin-left: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-mid);
}
.vf-root .vf-nav a {
  transition: color 0.15s;
}
.vf-root .vf-nav a:hover {
  color: var(--navy);
}
.vf-root .vf-headcta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.vf-root .vf-login {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  padding: 9px 6px;
  transition: color 0.15s;
}
.vf-root .vf-login:hover {
  color: var(--accent);
}
.vf-root .vf-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 40px;
}
.vf-root .vf-hero-copy h1 {
  font-size: 52px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 20px;
  text-wrap: balance;
}
.vf-root .vf-hl {
  color: var(--accent-deep);
}
.vf-root .vf-hero-lead {
  font-size: 19px;
  color: var(--ink-mid);
  margin-top: 20px;
  max-width: 480px;
  text-wrap: pretty;
}
.vf-root .vf-hero-btns {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.vf-root .vf-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}
.vf-root .vf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: #41506C;
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 13px;
  border-radius: 9px;
}
.vf-root .vf-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.vf-root .vf-hero-visual {
  position: relative;
}
.vf-root .vf-pos {
  background: var(--navy);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 30px 60px -20px rgba(27, 41, 80, 0.45);
}
.vf-root .vf-pos-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 14px;
}
.vf-root .vf-pos-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3D4D75;
}
.vf-root .vf-pos-dot.on {
  background: var(--accent);
}
.vf-root .vf-pos-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #8A97B8;
}
.vf-root .vf-pos-body {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
}
.vf-root .vf-pos-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.vf-root .vf-pos-kpi {
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 11px;
  padding: 12px;
}
.vf-root .vf-pos-kpi.accent {
  background: var(--cream-bg);
  border-color: var(--cream-bd);
}
.vf-root .vf-pos-klabel {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.vf-root .vf-pos-kpi.accent .vf-pos-klabel {
  color: var(--accent-ink);
}
.vf-root .vf-pos-kval {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 23px;
  font-weight: 800;
  margin-top: 4px;
}
.vf-root .vf-pos-kpi.accent .vf-pos-kval {
  color: var(--accent-ink);
}
.vf-root .vf-pos-cart {
  margin-top: 14px;
  border: 1px solid var(--line2);
  border-radius: 11px;
  overflow: hidden;
}
.vf-root .vf-pos-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: #FAFAFB;
  border-bottom: 1px solid var(--line2);
}
.vf-root .vf-pos-cart-title {
  font-weight: 700;
  font-size: 14px;
}
.vf-root .vf-pos-cart-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green);
  background: var(--green-bg);
  padding: 3px 8px;
  border-radius: 6px;
}
.vf-root .vf-pos-cart-items {
  padding: 6px 14px;
}
.vf-root .vf-pos-cart-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #F2F2F4;
  font-size: 13.5px;
}
.vf-root .vf-pos-cart-row.last {
  border-bottom: none;
}
.vf-root .vf-pos-cart-row .amt {
  font-weight: 600;
}
.vf-root .vf-pos-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--navy);
  color: #fff;
}
.vf-root .vf-pos-cart-total .lbl {
  font-size: 13px;
  color: var(--on-navy2);
}
.vf-root .vf-pos-cart-total .val {
  font-weight: 800;
  font-size: 19px;
}
.vf-root .vf-pos-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.vf-root .vf-pos-pay {
  flex: 1;
  text-align: center;
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 11px;
  border-radius: 10px;
}
.vf-root .vf-pos-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border: 1px solid var(--line3);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.vf-root .vf-pos-float {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 12px 30px -12px rgba(27, 41, 80, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.vf-root .vf-pos-float-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31, 138, 91, 0.15);
}
.vf-root .vf-features .vf-sec-head {
  max-width: 620px;
  margin: 0;
  text-align: left;
}
.vf-root .vf-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.vf-root .vf-ev {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vf-root .vf-ev-copy h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.vf-root .vf-ev-copy p {
  font-size: 15px;
  color: var(--ink-mid);
  margin-top: 10px;
  line-height: 1.55;
  text-wrap: pretty;
}
.vf-root .vf-ev-art {
  border-top: 1px solid var(--line3);
  padding: 18px 0 0;
  flex: 1;
}
.vf-root .vf-art-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line3);
}
.vf-root .vf-art-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.vf-root .vf-art-tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.vf-root .vf-ev-art .n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.vf-root .vf-led {
  margin-top: 6px;
}
.vf-root .vf-led-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--ink-mid);
}
.vf-root .vf-led-row .n {
  color: var(--ink);
  font-size: 13.5px;
}
.vf-root .vf-led-row .n.neg {
  color: var(--ink-soft);
}
.vf-root .vf-led-row.sum {
  border-top: 1px solid var(--line3);
  margin-top: 6px;
  padding-top: 11px;
  color: var(--navy);
  font-weight: 700;
}
.vf-root .vf-led-row.sum .n {
  color: var(--navy);
  font-weight: 700;
}
.vf-root .vf-led-row.ok {
  color: var(--green);
  font-weight: 700;
}
.vf-root .vf-led-row.ok .n {
  color: var(--green);
  font-weight: 700;
  font-size: 15px;
}
.vf-root .vf-dtable {
  margin-top: 6px;
}
.vf-root .vf-dt-cols, .vf-root .vf-dt-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.1fr;
  gap: 10px;
  align-items: baseline;
}
.vf-root .vf-dt-cols {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 0 8px;
}
.vf-root .vf-dt-row {
  padding: 9px 0;
  border-top: 1px solid var(--line2);
  font-size: 13.5px;
}
.vf-root .vf-dt-name {
  color: var(--ink);
}
.vf-root .vf-dt-row .n {
  color: var(--navy);
  font-weight: 700;
}
.vf-root .r {
  text-align: right;
}
.vf-root .vf-dt-state {
  font-size: 12.5px;
  font-weight: 600;
}
.vf-root .vf-dt-state.ok {
  color: var(--green);
}
.vf-root .vf-dt-state.warn {
  color: var(--accent-ink);
}
.vf-root .vf-dt-state.over {
  color: #C0392B;
}
.vf-root .vf-more {
  list-style: none;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.vf-root .vf-more li {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.vf-root .vf-more h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.vf-root .vf-more p {
  font-size: 14.5px;
  color: var(--ink-mid);
  margin-top: 6px;
  line-height: 1.55;
  text-wrap: pretty;
}
.vf-root .vf-road-line {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-mid);
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 78ch;
}
.vf-root .vf-road-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 10px;
}
.vf-root .vf-road-note {
  color: var(--ink-mid);
  font-weight: 600;
}
.vf-root .vf-robust {
  background: var(--navy);
  color: #fff;
}
.vf-root .vf-robust-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 52px;
}
.vf-root .vf-robust-grid h2 {
  font-size: 36px;
  font-weight: 800;
  margin-top: 12px;
  line-height: 1.1;
  color: #fff;
}
.vf-root .vf-robust-lead {
  font-size: 16.5px;
  color: var(--on-navy2);
  margin-top: 14px;
  max-width: 460px;
  text-wrap: pretty;
}
.vf-root .vf-robust-cards {
  display: grid;
  gap: 12px;
}
.vf-root .vf-robust-card {
  background: var(--navy-card);
  border: 1px solid var(--navy-bd);
  border-radius: 13px;
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.vf-root .vf-robust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex-shrink: 0;
}
.vf-root .vf-robust-card .t {
  font-weight: 700;
  font-size: 15px;
}
.vf-root .vf-robust-card .d {
  font-size: 13.5px;
  color: #9DA9C8;
  margin-top: 3px;
}
.vf-root .vf-caso {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
}
.vf-root .vf-caso h2 {
  font-size: 36px;
  font-weight: 800;
  margin-top: 12px;
  line-height: 1.1;
}
.vf-root .vf-caso-lead {
  font-size: 17px;
  color: var(--ink-mid);
  margin-top: 16px;
  text-wrap: pretty;
}
.vf-root .vf-steps {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.vf-root .vf-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.vf-root .vf-step-n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: #FFE7CC;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vf-root .vf-step p {
  font-size: 15.5px;
  color: var(--ink-mid2);
}
.vf-root .vf-step strong {
  color: var(--navy);
}
.vf-root .vf-stock-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 50px -28px rgba(27, 41, 80, 0.35);
  overflow: hidden;
}
.vf-root .vf-stock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line2);
}
.vf-root .vf-stock-title {
  font-weight: 700;
  font-size: 15.5px;
}
.vf-root .vf-stock-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.vf-root .vf-stock-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green);
  background: var(--green-bg);
  padding: 5px 10px;
  border-radius: 7px;
}
.vf-root .vf-stock-cols {
  font-variant-numeric: tabular-nums;
  display: grid;
  grid-template-columns: 1fr 80px 90px;
  padding: 11px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: #FAFAFB;
  border-bottom: 1px solid #F0F0F2;
}
.vf-root .vf-stock-cols .r, .vf-root .vf-stock-row .r {
  text-align: right;
}
.vf-root .vf-stock-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px;
  padding: 13px 20px;
  border-bottom: 1px solid #F2F2F4;
  align-items: center;
}
.vf-root .vf-stock-name {
  font-size: 14px;
  font-weight: 500;
}
.vf-root .vf-stock-actual {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink-mid2);
}
.vf-root .vf-stock-disp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.vf-root .vf-stock-disp.low {
  color: var(--accent-ink);
}
.vf-root .vf-stock-foot {
  padding: 14px 20px;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vf-root .vf-stock-foot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.vf-root .vf-planes {
  padding-top: 84px;
  padding-bottom: 60px;
}
.vf-root .vf-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
  align-items: stretch;
}
.vf-root .vf-plan-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px;
  position: relative;
  box-shadow: 0 1px 0 rgba(27, 41, 80, 0.03);
  display: flex;
  flex-direction: column;
}
.vf-root .vf-plan-card.popular {
  border-color: var(--accent);
  box-shadow: 0 24px 50px -26px rgba(255, 159, 67, 0.55);
}
.vf-root .vf-plan-pop {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--navy);
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.vf-root .vf-plan-top {
  text-align: center;
}
.vf-root .vf-plan-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.vf-root .vf-plan-top h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin-top: 8px;
}
.vf-root .vf-plan-tagline {
  font-size: 14.5px;
  color: var(--ink-mid);
  margin-top: 10px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
}
.vf-root .vf-plan-cta {
  display: block;
  text-align: center;
  margin-top: 22px;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px;
  border-radius: 11px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line3);
  transition: background 0.15s, border-color 0.15s;
}
.vf-root .vf-plan-cta:hover {
  border-color: var(--navy);
}
.vf-root .vf-plan-cta.primary {
  background: var(--accent);
  border-color: var(--accent);
}
.vf-root .vf-plan-cta.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.vf-root .vf-plan-mensual {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
}
.vf-root .vf-plan-divider {
  height: 1px;
  background: var(--line2);
  margin: 18px 0;
}
.vf-root .vf-plan-inherit {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vf-root .vf-plan-feats {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: auto;
}
.vf-root .vf-plan-feats li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-mid2);
}
.vf-root .vf-plan-feats .tick {
  color: var(--accent-ink);
  font-weight: 800;
  line-height: 1.4;
  flex-shrink: 0;
}
.vf-root .vf-plan-feats span:last-child {
  text-wrap: pretty;
}
.vf-root .vf-plan-foot {
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 32px;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}
.vf-root .vf-plan-foot-alt {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
}
.vf-root .vf-plan-foot a {
  color: var(--accent-ink);
  font-weight: 700;
  transition: color 0.15s;
}
.vf-root .vf-plan-foot a:hover {
  color: var(--accent);
}
.vf-root .vf-finalcta-sec {
  padding-top: 0;
  padding-bottom: 72px;
}
.vf-root .vf-finalcta {
  background: var(--navy);
  border-radius: 28px;
  padding: 64px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vf-root .vf-finalcta-glow {
  position: absolute;
  top: -40px;
  right: -20px;
  width: 380px;
  height: 280px;
  background: radial-gradient(circle at 70% 30%, rgba(255, 159, 67, 0.45), rgba(255, 159, 67, 0) 60%);
  pointer-events: none;
}
.vf-root .vf-finalcta h2 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
  position: relative;
  text-wrap: balance;
}
.vf-root .vf-finalcta p {
  font-size: 16.5px;
  color: var(--on-navy);
  margin: 16px auto 0;
  max-width: 480px;
  position: relative;
  text-wrap: pretty;
}
.vf-root .vf-finalcta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
  position: relative;
}
.vf-root .vf-finalcta .vf-btn-glow {
  box-shadow: 0 10px 30px -8px rgba(255, 159, 67, 0.6);
}
.vf-root .vf-footer {
  background: var(--navy);
  color: #fff;
}
.vf-root .vf-footwrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 28px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.vf-root .vf-foot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vf-root .vf-foot-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
}
.vf-root .vf-foot-name {
  font-weight: 800;
  font-size: 20px;
}
.vf-root .vf-foot-desc {
  font-size: 14px;
  color: var(--on-navy);
  margin-top: 14px;
  max-width: 280px;
  text-wrap: pretty;
}
.vf-root .vf-foot-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}
.vf-root .vf-foot-col a {
  display: block;
  font-size: 14px;
  color: var(--on-navy2);
  margin-top: 8px;
  padding: 7px 0;
  transition: color 0.15s;
}
.vf-root .vf-foot-col a:first-of-type {
  margin-top: 0;
}
.vf-root .vf-foot-col .vf-foot-h + a {
  margin-top: 14px;
}
.vf-root .vf-foot-col a:hover {
  color: #fff;
}
.vf-root .vf-foot-bottom {
  border-top: 1px solid var(--navy-bd2);
}
.vf-root .vf-foot-bottom-inner {
  display: flex;
  justify-content: space-between;
  padding: 18px 28px;
  font-size: 12.5px;
  color: var(--on-navy3);
  font-family: var(--font-mono);
}
@media (max-width: 880px) {
  .vf-root {
    /* La nav de escritorio se va, pero NO desaparece la orientación: pasa a una fila
       de anclas con scroll horizontal, debajo del header. Sin JS. (v1.32.0 — antes
       acá no había NADA y el lector se comía 7.800px de scroll a ciegas.) */
    /* Sin esto, el ultimo chip queda cortado y el unico indicio es una astilla */
    /* Piso de 44px SOLO en táctil — el criterio de mostrador de PRODUCT.md es sobre
       el dedo, no sobre el mouse. En desktop los controles quedan compactos. */
  }
  .vf-root h1 {
    font-size: 38px !important;
    line-height: 1.06 !important;
  }
  .vf-root .vf-hero, .vf-root .vf-robust-grid, .vf-root .vf-caso {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .vf-root .vf-evidence, .vf-root .vf-plan-grid, .vf-root .vf-footwrap {
    grid-template-columns: 1fr 1fr !important;
  }
  .vf-root .vf-more {
    grid-template-columns: 1fr !important;
  }
  .vf-root .vf-nav {
    display: flex !important;
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 12px;
  }
  .vf-root .vf-nav::-webkit-scrollbar {
    display: none;
  }
  .vf-root .vf-nav a {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .vf-root .vf-nav {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .vf-root .vf-brand, .vf-root .vf-login, .vf-root .vf-headcta .vf-btn-primary, .vf-root .vf-foot-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .vf-root .vf-login {
    padding: 0 8px !important;
  }
  .vf-root .vf-headcta .vf-btn-primary {
    padding: 0 14px !important;
  }
  .vf-root .vf-foot-col a {
    padding: 0 !important;
    margin-top: 4px;
  }
  .vf-root .vf-headwrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .vf-root {
    /* Las cuatro cards apiladas, de menor a mayor. Las tabs escondían tres de cuatro
       planes y arrancaban en la TERCERA: comparar era un ejercicio de memoria. */
    /* El header suma la fila de anclas, así que la fila de arriba se compacta:
       sin wrap en el CTA (envolvía a 2 líneas) y logo más chico. Objetivo: que el
       sticky no se coma un cuarto de pantalla. */
  }
  .vf-root h1 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }
  .vf-root h2 {
    font-size: 26px !important;
    line-height: 1.14 !important;
  }
  .vf-root .vf-sec {
    padding: 46px 18px !important;
  }
  .vf-root .vf-evidence, .vf-root .vf-plan-grid, .vf-root .vf-footwrap {
    grid-template-columns: 1fr !important;
  }
  .vf-root .vf-footwrap {
    gap: 26px !important;
  }
  .vf-root .vf-plan-grid {
    margin-top: 22px !important;
    gap: 14px !important;
  }
  .vf-root .vf-plan-card {
    display: block !important;
  }
  .vf-root .vf-finalcta {
    padding: 42px 22px !important;
  }
  .vf-root .vf-headwrap {
    padding: 11px 18px !important;
    gap: 10px !important;
  }
  .vf-root .vf-brand-logo {
    height: 30px !important;
  }
  .vf-root .vf-headcta .vf-btn-primary {
    font-size: 14px !important;
    padding: 9px 13px !important;
    white-space: nowrap !important;
  }
  .vf-root .vf-login {
    padding: 6px 2px !important;
  }
  .vf-root .vf-nav {
    padding-top: 10px !important;
  }
  .vf-root .vf-nav a {
    padding: 8px 13px !important;
    font-size: 13.5px !important;
  }
  .vf-root .vf-hero-btns {
    flex-wrap: wrap !important;
  }
  .vf-root .vf-hero-btns > a {
    flex: 1 1 auto !important;
    text-align: center !important;
  }
  .vf-root .vf-foot-bottom-inner {
    flex-direction: column;
    gap: 8px;
  }
  .vf-root .vf-ev, .vf-root .vf-ev-art {
    padding: 18px !important;
  }
  .vf-root .vf-road-line {
    margin-top: 32px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vf-root * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Globals de la página estática (fuera del scope del componente Angular) ── */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #F7F7F7;
}

[id] {
  scroll-margin-top: 92px;
} /* offset del header sticky para los anchors */
/* El header crece al sumar la fila de anclas: el offset lo sigue por breakpoint. */
@media (max-width: 880px) {
  [id] {
    scroll-margin-top: 176px;
  }
}
@media (max-width: 560px) {
  [id] {
    scroll-margin-top: 132px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}