/* =========================================================
   Vektor Analytics — landing corporativo-técnico
   Manual de marca: azul #0321D1 · negro #1D1D1B · blanco
   Tipografía: Science Gothic (display) + Inter (texto) + IBM Plex Mono (datos)
   ========================================================= */

:root {
  /* --- Manual de marca Vektor Analytics --- */
  --brand: #0321d1;          /* azul corporativo */
  --brand-deep: #021aa6;     /* estado hover */
  --brand-tint: #5680ff;     /* azul para texto pequeño sobre oscuro (4,8:1) */
  --brand-vivid: #2e5bff;    /* azul para titulares grandes sobre oscuro (3,3:1) */
  --brand-pale: #c6cfff;     /* azul muy claro: titulares sobre azul pleno */
  --brand-soft: rgba(3, 33, 209, 0.08);
  --black: #131312;          /* superficie oscura (el negro de marca, más hundido) */
  --black-flat: #1d1d1b;     /* negro corporativo tal cual, para usos planos */
  --black-2: #1e1e1c;        /* panel sobre oscuro */

  --bg: #ffffff;
  --bg-soft: #f4f5f7;
  --ink: #1d1d1b;
  --ink-2: #3d3d3a;
  --muted: #5e5e5a;
  --muted-light: #a6a6a1;
  --line: #e5e5e1;
  --line-dark: #2f2f2c;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(29, 29, 27, 0.05), 0 2px 8px rgba(29, 29, 27, 0.04);
  --shadow-md: 0 10px 34px rgba(29, 29, 27, 0.09);
  --shadow-lg: 0 34px 68px -22px rgba(29, 29, 27, 0.40);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display: 'Science Gothic', 'Inter', system-ui, sans-serif;  /* marca: títulos y datos */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--black-flat); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Typography scale ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.14; letter-spacing: -0.005em; font-weight: 600; color: var(--ink);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 1rem;
}
.eyebrow--light { color: var(--brand-tint); }

.section__title {
  font-size: clamp(1.42rem, 2.6vw, 2rem);
  max-width: 21ch;
}
.section__title--light { color: #ffffff; }

.lead { font-size: 1.12rem; color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem; border-radius: 10px; border: 1px solid transparent; white-space: nowrap;
  cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.83rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 2px 10px rgba(3, 33, 209, .22); }
.btn--primary:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(3, 33, 209, .3); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 1rem; }
.nav__brand { color: var(--ink); display: inline-flex; }
.nav__links { display: flex; gap: 1.4rem; }
.nav__links a { font-family: var(--font-display); font-size: 0.83rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; color: var(--muted); position: relative; transition: color .18s var(--ease); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--brand);
  transition: width .22s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }

.lang { display: inline-flex; align-items: center; gap: .35rem; }
.lang__btn { background: none; border: none; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; padding: .2rem; transition: color .18s var(--ease); }
.lang__btn.is-active { color: var(--ink); }
.lang__btn:hover { color: var(--brand); }
.lang__sep { color: var(--line); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--black); color: #e8e8e4;
  /* Ocupa el alto de la ventana menos el nav, para que al entrar la primera
     pantalla sea toda oscura. svh evita el salto por la barra del navegador
     en móvil; vh queda de reserva para navegadores sin soporte. */
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  display: flex; align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* Viñeta: oscurece los bordes y hunde el centro para dar profundidad */
    radial-gradient(120% 120% at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(52% 60% at 79% 3%, rgba(3, 33, 209, 0.58), transparent 66%),
    linear-gradient(165deg, #131312 0%, #0a0a09 58%, #060605 100%);
}
.hero__glow::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 80% at 30% 20%, #000 20%, transparent 75%);
}
/* La captura manda: se le da más columna que al texto y además se deja
   salir por el borde derecho, así entra en pantalla con más presencia. */
.hero__inner { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1.24fr; gap: clamp(1.6rem, 3.4vw, 2.6rem); align-items: center; }
.hero__visual { margin-right: calc(-1 * clamp(1rem, 6vw, 7rem)); }
.hero .eyebrow { color: var(--brand-tint); }
.hero__title { font-size: clamp(1.85rem, 3.5vw, 2.55rem); font-weight: 700; color: #fff; }
/* Los dos tramos fluyen como un solo párrafo: el acento arranca donde caiga,
   en vez de forzar un salto de línea antes de «en tiempo real». El espacio
   entre ambos ya lo aporta el salto de línea del HTML, no hay que sumar margen.
   text-wrap: balance reparte las líneas y evita que quede una palabra sola. */
.hero__title span { display: inline; }
.hero__title { text-wrap: balance; }
.hero__title .accent { color: var(--brand-vivid); }
.hero__sub { margin-top: 1.4rem; max-width: 38ch; color: #c2c2bd; font-size: 1.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero .btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 0 0 1px rgba(151, 169, 255, .38), 0 10px 28px rgba(3, 33, 209, .45);
}
.hero .btn--primary:hover {
  background: #0a2ce0; color: #fff;
  box-shadow: 0 0 0 1px rgba(151, 169, 255, .6), 0 14px 34px rgba(3, 33, 209, .55);
}
.hero .btn--ghost { border-color: rgba(255,255,255,.38); color: #fff; }
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.hero__stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 3rem; flex-wrap: wrap; }
.hero__stats dt { font-size: 0.84rem; color: #a3a39c; }
.hero__stats dd { font-family: var(--font-display); font-size: 1.2rem; color: #fff; font-weight: 600; letter-spacing: .01em; margin-top: .25rem; }

/* ---------- Browser frame ---------- */
.frame {
  background: #fff; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.section .frame { border-color: var(--line); box-shadow: var(--shadow-md); }
.frame__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #eeeeeb; border-bottom: 1px solid var(--line); }
.section--soft .frame__bar { background: #e7e7e3; }
.frame__bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #d2d2ce; }
.frame__url { margin-left: 12px; font-size: 0.74rem; color: #7d8890; }
.frame img { width: 100%; }
/* La captura del hero va en perspectiva, igual que en la imagen social.
   Se desactiva bajo 940 px y con prefers-reduced-motion. */
.hero__visual .frame {
  border-color: rgba(255, 255, 255, 0.14);
  /* Al ser más grande, el giro se suaviza: se lee mejor el contenido y
     la sombra crece para que siga despegada del fondo. */
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(46, 91, 255, 0.16);
}
.frame--float {
  transform: perspective(1900px) rotateY(-7deg) rotateX(1.8deg);
  animation: floatp 7s ease-in-out infinite;
}
@keyframes floatp {
  0%, 100% { transform: perspective(1900px) rotateY(-7deg) rotateX(1.8deg) translateY(0); }
  50%      { transform: perspective(1900px) rotateY(-7deg) rotateX(1.8deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .frame--float { animation: none; }
}
@media (max-width: 940px) {
  .frame--float { transform: none; animation: none; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--soft { background: var(--bg-soft); }
/* Las secciones oscuras llevan degradado y viñeta, igual que el hero: el negro
   plano se veía chato en superficies tan grandes. */
.section--dark {
  position: relative;
  background: linear-gradient(180deg, #141413 0%, #0c0c0b 100%);
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 34%, rgba(0, 0, 0, 0.5) 100%);
}
.section--dark > .container { position: relative; z-index: 1; }
.section__head { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }

/* split (problem / contact) */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split__body p + p { margin-top: 1rem; }
.split--contact { align-items: center; }

.check { list-style: none; margin-top: 1.75rem; display: grid; gap: .75rem; }
.check li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
.check li::before {
  content: ""; position: absolute; left: 0; top: .5rem; width: 16px; height: 9px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg); border-radius: 1px;
}

/* ---------- Feature grid ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--features { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem 1.75rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.section--soft .card { background: #fff; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6d6d1; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 11px; background: var(--brand-soft); color: var(--brand); margin-bottom: 1.25rem;
}
.card__icon svg { width: 23px; height: 23px; }
.card__title { font-size: 1.06rem; margin-bottom: .5rem; font-weight: 600; }
.card p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); counter-reset: none; }
.step { position: relative; padding-top: 2rem; border-top: 2px solid var(--line); }
.step__num { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--brand); margin-bottom: 1rem; }
.step__title { font-size: 1.12rem; margin-bottom: .55rem; }
.step p { color: var(--muted); }

/* ---------- Benefits (dark) ---------- */
.grid--benefits { grid-template-columns: repeat(3, 1fr); }
.benefit { padding: 2rem 1.75rem; background: var(--black-2); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.benefit__stat { font-family: var(--font-display); font-size: 1.95rem; font-weight: 600; color: var(--brand-tint); letter-spacing: 0; margin-bottom: .9rem; }
.benefit__title { color: #f5f5f2; font-size: 1.1rem; margin-bottom: .5rem; font-weight: 600; }
.benefit p { color: #c2c2bd; font-size: 0.97rem; }

/* ---------- Product screenshots ---------- */
.grid--shots { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }

/* ---------- Contact form ---------- */
.contact-info { list-style: none; margin-top: 2rem; display: grid; gap: 1rem; }
.contact-info li { display: flex; flex-direction: column; gap: .1rem; }
.contact-info span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.contact-info a { color: var(--ink); font-size: 1.02rem; transition: color .18s var(--ease); }
.contact-info a:hover { color: var(--brand); }
.contact-info .social { margin-top: .55rem; }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); }
.form__hp { position: absolute; left: -9999px; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); margin-bottom: .45rem; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 0.98rem; color: var(--ink);
  padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #a6a6a1; }
.field input:focus, .field textarea:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-soft); outline: none; }
.field textarea { resize: vertical; min-height: 96px; }
.form__status { margin-top: 1rem; font-size: 0.92rem; min-height: 1.2em; }
.form__status.is-ok { color: var(--brand); }
.form__status.is-err { color: #c0392b; }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(180deg, #121211 0%, #0a0a09 100%); color: #c2c2bd; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer__inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dark); }
.footer__brand img { filter: none; }
.footer__brand { color: #f5f5f2; max-width: 30ch; }
.footer__brandp{margin-top:1rem;color:#8da0b6; font-size: 0.95rem; }
/* ---------- Redes sociales ----------
   Mismo componente en el pie (fondo oscuro) y en contacto (fondo claro):
   sólo cambian los colores mediante la variante --light. El SVG hereda el
   color del enlace con currentColor, así el hover no necesita reglas extra. */
.social { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c2c2bd;
  transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.social a:hover { color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.social a:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 3px; }
.social svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.social--light a { border-color: var(--line); color: var(--muted); }
.social--light a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }

.footer__social { margin-top: 1.75rem; }

.footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-start; }
.footer__nav a { color: #c2c2bd; font-size: 0.95rem; transition: color .18s var(--ease); }
.footer__nav a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.footer__bottom p { font-size: 0.8rem; color: #90908b; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: 2; margin-right: 0; }
  .hero__sub { max-width: 46ch; }
  .split { grid-template-columns: 1fr; }
  .grid--features, .steps, .grid--benefits { grid-template-columns: repeat(2, 1fr); }
  .grid--shots { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--features, .steps, .grid--benefits { grid-template-columns: 1fr; }
  .hero__stats { gap: 1.5rem; }
  .nav__actions .btn { display: none; }
}

/* =========================================================
   Añadidos: nav mobile · galería de producto · utilidades
   ========================================================= */

/* ---------- Nav: menú mobile ---------- */
.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: .25rem;
  background: transparent; border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.nav__toggle:hover { border-color: var(--ink); }
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.nav__panel {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(12px);
}
.nav__panel.is-open { display: block; }
.nav__panel nav { display: grid; padding: .5rem 0 1rem; }
.nav__panel a {
  padding: .85rem .25rem; font-size: 1rem; font-weight: 500; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.nav__panel a:last-of-type { border-bottom: 0; }
.nav__panel .btn { margin-top: 1rem; border-bottom: 0; }
.nav__panel .btn--primary { color: #fff; }

/* ---------- Sección activa en el nav ---------- */
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"]::after { width: 100%; }

/* ---------- Galería de producto ---------- */
.section__lead { max-width: 54ch; margin-top: 1rem; color: var(--ink-2); font-size: 1.06rem; }

.shot { margin: 0; }
.shot + .shot { margin-top: 0; }
.shot__cap {
  margin-top: .95rem; font-size: 0.95rem; color: var(--muted); line-height: 1.55;
  max-width: 62ch;
}
.shot__cap b { color: var(--ink); font-weight: 600; }
.grid--shots { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3.5vw, 2.25rem); margin-top: 0; }

.frame img { transition: transform .5s var(--ease); }
.shot .frame { overflow: hidden; }
.shot:hover .frame img { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) { .frame img { transition: none; } .shot:hover .frame img { transform: none; } }

/* ---------- Bloque "en terreno" (captura móvil) ---------- */
.onsite {
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
}
.onsite h3 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); margin-bottom: 1rem; }
.onsite p { color: var(--ink-2); }
.onsite__visual { display: flex; justify-content: center; }
.phone {
  width: 264px; max-width: 100%;
  border: 9px solid var(--black-flat); border-radius: 34px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--black-flat); position: relative;
}
.phone img { display: block; width: 100%; border-radius: 25px; }


/* ---------- Nota de datos de demo ---------- */
.note {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: .8rem 1.1rem; border: 1px dashed #d3d3cd; border-radius: 10px;
  font-size: 0.88rem; color: var(--muted); background: rgba(255,255,255,.6);
}
.note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--brand); }

/* ---------- Feature: enlace a la sección de producto ---------- */
.card__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: 0.9rem; font-weight: 600; color: var(--brand);
}
.card__link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.card:hover .card__link svg { transform: translateX(3px); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .onsite { grid-template-columns: 1fr; }
  .onsite__visual { order: -1; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__actions > .btn { display: none; }
  .grid--shots { grid-template-columns: 1fr; }
}
@media (min-width: 721px) {
  .nav__panel { display: none !important; }
}
@media (max-width: 620px) {
  .nav__actions .btn { display: none; }
  .nav__panel .btn { display: inline-flex; }
  .phone { width: 224px; }
}

/* ---------- Confirmación sin JavaScript (Netlify redirige a /#gracias) ---------- */
.form__thanks { display: none; }
.form__thanks:target {
  display: block; margin-top: 1rem; padding: .85rem 1rem;
  border-radius: var(--radius-sm); font-size: 0.94rem;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid rgba(3,33,209,.22);
}

/* =========================================================
   Seguridad y datos
   ========================================================= */
.split--security { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.lead--light { color: #c2c2bd; }

.grid--security { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
.secure {
  padding: 1.6rem 1.5rem;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}
.secure__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(86, 128, 255, 0.16); color: var(--brand-tint);
  margin-bottom: 1rem;
}
.secure__icon svg { width: 20px; height: 20px; }
.secure h3 { color: #f5f5f2; font-size: 1.02rem; font-weight: 600; margin-bottom: .45rem; }
.secure p { color: #c2c2bd; font-size: 0.94rem; }

/* =========================================================
   FAQ (acordeón nativo, accesible y sin JS)
   ========================================================= */
.faq { max-width: 54rem; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem .25rem;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; letter-spacing: .005em; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: color .18s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 13px; width: 13px; height: 13px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__item summary:hover { color: var(--brand); }
.faq__item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.faq__a { padding: 0 3rem 1.5rem .25rem; }
.faq__a p { color: var(--ink-2); font-size: 1rem; max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}
@media (max-width: 940px) {
  .split--security { grid-template-columns: 1fr; }
  .grid--security { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--security { grid-template-columns: 1fr; }
  .faq__item summary { font-size: 1rem; }
  .faq__a { padding-right: 1rem; }
}

/* ---------- Espaciado: bajada bajo el título en bloques split ---------- */
.split__head .section__title + .lead,
.split__head .section__title + .section__lead { margin-top: 1.15rem; }
.split--security { align-items: center; }

/* ---------- Anclas: compensar el nav fijo ---------- */
main section[id], #contacto, #gracias { scroll-margin-top: 84px; }
@media (max-width: 720px) { main section[id], #contacto, #gracias { scroll-margin-top: 76px; } }

/* ---------- Móvil: CTAs del hero a ancho completo ---------- */
@media (max-width: 520px) {
  .hero__cta { display: grid; gap: .7rem; }
  .hero__cta .btn { width: 100%; }
  .hero__stats { gap: 1.25rem 2rem; }
}

/* =========================================================
   Tarjetas de funcionalidades sobre fondo negro
   ========================================================= */
.section--dark .card {
  background: var(--black-2);
  border-color: var(--line-dark);
}
.section--dark .card:hover { border-color: #43433f; box-shadow: 0 14px 38px rgba(0, 0, 0, .6); }
.section--dark .card__title { color: #f5f5f2; }
.section--dark .card p { color: #c2c2bd; }
.section--dark .card__icon {
  background: rgba(86, 128, 255, 0.16);
  color: var(--brand-tint);
}
.section--dark .card__link { color: var(--brand-tint); }

/* =========================================================
   Beneficios: la cifra como chip azul de marca
   ========================================================= */
/* `.benefit p` es más específico que `.benefit__stat`, así que el selector
   necesita el elemento para que el blanco del chip gane. */
.benefit p.benefit__stat {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .4rem .95rem;
  border-radius: 999px;
  margin-bottom: 1.15rem;
}

/* En pantallas bajas el alto completo aprieta demasiado: se libera. */
@media (max-height: 660px) {
  .hero { min-height: 0; }
}