/* ===================================================================
   NORUS ANALYTICS — Estilos principales
   Paleta oficial:
   --violet:        #8B5CF6  (Principal)
   --violet-dark:   #6D28D9  (Oscuro)
   --violet-mid:    #7C3AED  (Medio)
   --lavender:      #A78BFA  (Claro)
   --bg:            #080B12  (Fondo)
   --line:          #1B2230  (Líneas)
   --text:          #F8FAFC  (Texto)
=================================================================== */

:root {
  --violet: #8B5CF6;
  --violet-dark: #6D28D9;
  --violet-mid: #7C3AED;
  --lavender: #A78BFA;
  --bg: #080B12;
  --bg-soft: #0D111C;
  --line: #1B2230;
  --text: #F8FAFC;
  --text-dim: #9AA3B5;
  --text-dimmer: #6B7386;
  --radius: 20px;
  /* Ancho útil de la página. Ya NO es un número fijo.
     Con 1280 px clavados, en un monitor de 2560 quedaban ~640 px de
     vacío a cada lado: el contenido se leía como una columna estrecha
     flotando en medio de la pantalla, y el monitor del héroe —que se
     dimensiona con el contenedor— parecía pequeño y suspendido. Con
     `clamp` el contenido acompaña a la ventana hasta un tope sensato.
     Los dos raíles (logo a la izquierda, CTA a la derecha) salen de
     ESTE mismo valor tanto en la cabecera como en el cuerpo, así que
     siguen cuadrando solos en cualquier ancho — no hay ningún número
     repetido que mantener en dos sitios.
     Tope de 1680: por encima, una línea de texto se vuelve difícil de
     seguir y las rejillas de tres columnas empiezan a desparramarse. */
  --max: clamp(1280px, 86vw, 1680px);
  /* El acolchado interior crece, pero poco: va por DENTRO del ancho
     máximo, así que cada píxel que se le da se lo quita al contenido.
     El aire de los lados en una pantalla grande no lo pone este valor,
     lo pone el sobrante entre `--max` y la ventana. */
  --gutter: clamp(24px, 1.8vw, 34px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Etiqueta de sección: es la que lleva el protagonismo y el color de
   marca; el titular que va debajo se queda en blanco, más sobrio. */
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(95deg, var(--lavender) 0%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}
.section-tight { padding: 70px 0; }

.section-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.section-glow span {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  filter: blur(120px);
  background: rgba(139, 92, 246, 0.10);
}
.section-glow .g1 { top: -10%; left: -10%; }
.section-glow .g2 { bottom: -10%; right: -10%; background: rgba(124, 58, 237, 0.10); }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2.h2 {
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 700;
  max-width: 780px;
  color: var(--text);
}

p { color: var(--text-dim); line-height: 1.7; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 30px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-mid) 100%);
  color: #fff;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(139, 92, 246, 0.4); }
.btn-ghost {
  background: rgba(248, 250, 252, 0.03);
  border-color: var(--line);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(248, 250, 252, 0.06); border-color: var(--violet); }
.btn-light {
  background: var(--text);
  color: #0B0E16;
}
.btn-light:hover { transform: translateY(-2px); background: #ffffff; }
.btn-block { width: 100%; }

/* ===================== NAVBAR ===================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 18px 0;
  background: rgba(8, 11, 18, 0.55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.navbar.scrolled {
  border-bottom-color: var(--line);
  background: rgba(8, 11, 18, 0.85);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.35));
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.55)); }
.brand-word { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.bw-line1 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}
.bw-e {
  display: inline-block;
  color: var(--lavender);
  font-weight: 900;
  transform: scaleX(0.85);
}
.bw-line2 {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--lavender);
  opacity: 0.85;
}
@media (max-width: 420px) {
  .bw-line2 { display: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 16px; right: 16px;
  background: rgba(13, 17, 28, 0.98);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 10px;
  padding: 20px;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-dim);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 170px 0 60px;
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(139, 92, 246, 0.18), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(109, 40, 217, 0.16), transparent 50%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(27, 34, 48, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 34, 48, .6) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(248, 250, 252, 0.03);
  margin-bottom: 30px;
  font-size: 12px;
  color: var(--text-dim);
}
.badge .tag {
  background: var(--violet);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 66px);
  margin-bottom: 22px;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--lavender), var(--violet) 60%, var(--violet-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 38px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 70px;
}
.hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 980px;
  margin: 0 auto;
}
.stat {
  text-align: left;
  padding: 0 26px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-mark {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--violet), var(--lavender));
}
.stat .num {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.stat .num span { color: var(--lavender); }
.stat .label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dimmer);
  margin-top: 8px;
}
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stat { border-left: none; padding: 0 0 0 24px; border-top: none; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 20px; }
}

/* ===================== LOGO STRIP ===================== */
.logo-strip {
  padding: 44px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-strip p {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 26px;
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  justify-content: center;
  align-items: center;
  color: var(--text-dimmer);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  opacity: .7;
}

/* ===================== CARD GRID (Servicios / Why us) ===================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-grid .card {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px;
  position: relative;
  transition: background .3s ease;
}
.card-grid .card:hover { background: #10141f; }
.card-grid .card:nth-child(3n) { border-right: none; }
.card-grid .card:nth-last-child(-n+3) { border-bottom: none; }

.card-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--lavender);
  margin-bottom: 26px;
  transition: all .3s ease;
}
.card-grid .card:hover .card-icon {
  border-color: var(--violet);
  background: rgba(139, 92, 246, 0.15);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.2);
}
.card-grid .card h3 { font-size: 19px; margin-bottom: 10px; }
.card-grid .card:hover h3 { color: var(--lavender); }
.card-grid .card p { font-size: 14px; }

@media (max-width: 680px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid .card:nth-child(3n) { border-right: 1px solid var(--line); }
  .card-grid .card:nth-child(2n) { border-right: none; }
  .card-grid .card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .card-grid .card:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
  .card-grid .card { border-right: none !important; }
  .card-grid .card:last-child { border-bottom: none !important; }
}

/* ===================== PROCESO (3 pasos) ===================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.step-visual {
  background: #0A0E17;
  /* 320, no 300. La línea que separa el mock del texto es el canto
     inferior de esta caja, así que las tres tarjetas solo la tienen a la
     misma altura mientras el `min-height` MANDE en las tres. Con 300, el
     mock del paso 01 (el formulario: 228 px + 80 de padding = 308) se
     pasaba de largo y empujaba su propia línea 9 px por debajo de la de
     los pasos 02 y 03 — que sí cabían y se quedaban clavados en 300.
     REGLA, y es la que importa: 320 menos los 80 de padding deja 240 px
     para el mock, y este número tiene que seguir siendo MAYOR que el
     mock más alto de los tres. Si algún día uno crece por encima, la
     línea se vuelve a descuadrar sola y sin avisar.
     Margen real hoy, barriendo anchuras de tarjeta: el peor caso es el
     mock del paso 02 con 231 px (tarjetas de 260–330 px de ancho, o sea
     ventanas de 901 a ~1030), así que sobran 9 px. Justo pero estable.
     Por debajo de 900 px el grid pasa a UNA columna y las tarjetas se
     ensanchan, así que ahí no hay riesgo. */
  min-height: 320px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.step-body { padding: 28px 30px 34px; }
.step-body .step-num { color: var(--lavender); font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.step-body h3 { font-size: 21px; margin-bottom: 10px; }
.step-body p { font-size: 14px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}

/* mock UI bits reused in step visuals */
.mock-panel {
  width: 100%;
  max-width: 300px;
  background: #12172400;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  background: rgba(255,255,255,0.02);
}
.mock-field {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-dimmer);
  margin-bottom: 10px;
}
/* El paso 01 es un mock editable de verdad: mismo aspecto que el `div`
   original, pero como `input` para que el visitante pueda escribir.
   Ver assets/js/nsa-proceso.js: al pulsar "Comenzar análisis" este texto
   se vuelca en el campo de mensaje del formulario de contacto. */
input.mock-field {
  display: block;
  width: 100%;
  font-family: inherit;
  outline: none;
  transition: border-color .3s ease, background .3s ease;
}
input.mock-field::placeholder { color: var(--text-dimmer); }
input.mock-field:focus { border-color: var(--violet); background: rgba(255,255,255,0.05); }
.kpi-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kpi-title { font-size: 13px; color: var(--text); font-weight: 700; }
.kpi-tag { font-size: 10px; color: var(--lavender); background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); padding: 3px 9px; border-radius: 999px; }
.progress-track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0 16px; }
.progress-fill { height: 100%; background: var(--violet); border-radius: 999px; width: 0; transition: width 1.2s ease; }

.mini-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-dim);
}
.dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 0 rgba(139,92,246,.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(139,92,246,.6); }
  70% { box-shadow: 0 0 0 10px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}

/* bars chart for step 3 */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.bars i {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 4px 4px 0 0;
  display: block;
}
.bars i.peak { background: var(--violet); box-shadow: 0 0 16px rgba(139,92,246,.4); }

/* Mini "producto": eco del panel real (barra lateral + cabecera con
   última actualización) usado en los pasos 02/03 del proceso. Todo el
   contenido es un esqueleto abstracto (bloques, no texto real): el
   producto de verdad trabaja con datos de cliente y esos nunca se
   muestran aquí. Ver 02-Areas/Producto para la referencia visual. */
.dash-mock {
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.dm-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.dm-logo { width: 16px; height: 16px; border-radius: 5px; background: var(--violet); flex: none; }
.dm-line { width: 74px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); }
.dm-time { margin-left: auto; font-size: 10px; color: var(--text-dimmer); white-space: nowrap; }
.dm-body { display: flex; }
.dm-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 10px;
  border-right: 1px solid var(--line);
}
.dm-side i { width: 8px; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.1); display: block; font-style: normal; }
.dm-side i.on { background: var(--violet); }
.dm-main { flex: 1; padding: 16px; min-width: 0; }
.dm-kpis { display: flex; gap: 10px; margin-bottom: 14px; }
.dm-kpi { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.dm-kpi b { display: block; width: 44%; height: 14px; border-radius: 4px; background: rgba(255,255,255,0.14); margin-bottom: 8px; }
.dm-kpi span { display: block; width: 70%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.dm-rows { display: flex; flex-direction: column; gap: 8px; }
.dm-row { display: flex; align-items: center; gap: 8px; }
.dm-row span { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.dm-row span:first-child { flex: 1; }
.dm-row span:last-child { width: 34px; background: rgba(139,92,246,.35); }

/* ===================== BENTO (features) ===================== */
.bento {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 20px;
}
.bento .b-col-4 { grid-column: span 4; }
.bento .b-col-6 { grid-column: span 6; }
.bento .b-col-10 { grid-column: span 10; }
.bento-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px;
  min-height: 300px;
  position: relative;
  overflow: hidden;
}
.bento-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.bento-card h3 { font-size: 26px; margin-bottom: 10px; }
.bento-card p { font-size: 14px; max-width: 320px; }

@media (max-width: 950px) {
  .bento { grid-template-columns: 1fr; }
  .bento .b-col-4, .bento .b-col-6, .bento .b-col-10 { grid-column: span 1; }
}

.alert-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 13px 18px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.alert-row .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; display: inline-block; }
.alert-time { color: var(--text-dimmer); font-size: 11px; }

.pill-mini {
  background: rgba(139,92,246,.12);
  color: var(--lavender);
  font-size: 12.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
  display: inline-block;
}

/* ===================== TESTIMONIALS ===================== */
.testi-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testi-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
}
.testi-card .stars { color: var(--lavender); font-size: 14px; margin-bottom: 18px; letter-spacing: 2px; }
.testi-card p.quote { color: var(--text); font-size: 15px; margin-bottom: 26px; }
.testi-person { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--violet-dark));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff;
}
.testi-person .role { font-size: 12.5px; color: var(--text-dimmer); }
.testi-person .name { font-size: 14px; font-weight: 700; }

@media (max-width: 900px) {
  .testi-track { grid-template-columns: 1fr; }
}

/* ===================== PRICING ===================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 38px;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(139,92,246,0.08), var(--bg-soft) 40%);
  box-shadow: 0 20px 60px rgba(139,92,246,0.15);
  position: relative;
}
.price-card .plan-tag {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dimmer); font-weight: 700; margin-bottom: 16px;
}
.price-card.featured .plan-tag { color: var(--lavender); }
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--violet); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 6px 14px; border-radius: 999px;
}
.price-value { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.price-value .amount { font-size: 42px; font-weight: 800; }
.price-value .period { color: var(--text-dimmer); font-size: 14px; }
.price-desc { font-size: 13.5px; margin-bottom: 28px; }
.price-features { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; }
.price-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.price-features li svg { color: var(--violet); flex-shrink: 0; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ===================== FAQ ===================== */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-soft);
  overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
  cursor: pointer;
  font-size: 15.5px; font-weight: 600;
}
.faq-q svg { transition: transform .3s ease; color: var(--lavender); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a p { padding: 0 26px 22px; font-size: 14px; }
.faq-item.open .faq-a { max-height: 1000px; }

/* ===================== CTA BANNER ===================== */
.cta-banner {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 70px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(139,92,246,0.18), transparent 60%), var(--bg-soft);
}
.cta-banner h2 { max-width: 640px; margin: 0 auto 18px; }
.cta-banner p { max-width: 520px; margin: 0 auto 34px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===================== FOOTER ===================== */
footer {
  border-top: 1px solid var(--line);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer-brand .brand-mark { height: 44px; }
.footer-brand .bw-line1 { font-size: 17px; }
.footer-brand .bw-line2 { font-size: 10.5px; }
.footer-brand p { font-size: 14px; max-width: 280px; margin: 18px 0 22px; }
.footer-col h5 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dimmer); margin-bottom: 18px;
}
.footer-col a {
  display: block; font-size: 14px; color: var(--text-dim);
  margin-bottom: 12px; transition: color .2s ease;
}
.footer-col a:hover { color: var(--lavender); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.social-row a:hover { border-color: var(--violet); color: var(--lavender); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--text-dimmer);
}
.footer-bottom .links { display: flex; gap: 22px; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===================== Reveal animation ===================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.js-fallback-reveal { transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ===================== CONTACT ===================== */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-info .info-row {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 26px;
}
.info-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(139,92,246,.1); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--lavender); flex-shrink: 0;
}
.info-row h4 { font-size: 15px; margin-bottom: 4px; }
.info-row p { font-size: 14px; }

.contact-form {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { font-size: 12.5px; color: var(--text-dimmer); margin-bottom: 6px; display: block; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--violet); }
/* El select no tenía `appearance:none`: se veía la caja a medida pero con
   la flecha nativa del navegador (blanca, desalineada con el resto del
   formulario). Flecha propia + hueco a la derecha para que no pise el
   texto de las opciones largas. */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  cursor: pointer;
}
.contact-form select option { background: #0D111C; color: var(--text); }
.contact-form textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 12px; color: var(--text-dimmer); }
.form-note.is-error { color: #f87171; }
.form-note.is-ok { color: #4ade80; }

.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-dimmer);
}
.consent-row input { width: auto; margin-top: 3px; accent-color: var(--violet); }
.consent-row a { color: var(--lavender); }

/* Señuelo anti-spam: oculto de forma visual (no display:none/hidden), que
   es justo lo que un robot que rellena formularios por atributo no filtra. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-form .row2 { grid-template-columns: 1fr; }
}

/* ===================== PRELOADER ===================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark {
  width: 64px;
  height: auto;
  animation: preloaderPulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5));
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.08); opacity: 1; }
}
.preloader-bar {
  width: 160px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.preloader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet-dark), var(--violet), var(--lavender));
  border-radius: 999px;
  transition: width .3s ease;
}

/* ===================== CURSOR GLOW (desktop only) ===================== */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.10), transparent 70%);
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.cursor-glow.active { opacity: 1; }
@media (max-width: 900px), (hover: none) {
  .cursor-glow { display: none; }
}

/* ===================== TILT / MAGNETIC ELEMENTS ===================== */
.tilt-el { transform-style: preserve-3d; will-change: transform; }
.magnetic-btn { will-change: transform; }

/* ===================== MARQUEE (Testimonios infinito) ===================== */
.marquee-wrap {
  position: relative;
  overflow: hidden;
  height: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.marquee-col { position: relative; overflow: hidden; height: 100%; }
.marquee-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: 0; left: 0; right: 0;
  animation: marqueeUp 32s linear infinite;
}
.marquee-track.down { animation-name: marqueeDown; animation-duration: 38s; }
@keyframes marqueeUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes marqueeDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-fade-top, .marquee-fade-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 4;
}
.marquee-fade-top { top: 0; background: linear-gradient(to bottom, var(--bg), transparent); }
.marquee-fade-bottom { bottom: 0; background: linear-gradient(to top, var(--bg), transparent); }

.mini-testi {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  transition: border-color .3s ease, transform .3s ease;
}
.mini-testi:hover { border-color: var(--violet); transform: translateY(-3px); }
.mini-testi .stars { color: var(--lavender); font-size: 13px; margin-bottom: 12px; letter-spacing: 2px; }
.mini-testi p.quote { font-size: 14px; color: var(--text-dim); font-style: italic; margin-bottom: 18px; line-height: 1.65; }
.mini-testi .testi-person { display: flex; align-items: center; gap: 12px; }

@media (max-width: 760px) {
  .marquee-wrap { grid-template-columns: 1fr; height: 480px; }
  .marquee-col:last-child { display: none; }
}

/* ===================== Counter emphasis ===================== */
/* ===================== Accessibility: reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===================== Focus states ===================== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ===================== Accesibilidad: utilidades (2026-09-22) =====================

   `.sr-only` — texto SOLO para lectores de pantalla
   Saca el elemento de la vista sin sacarlo de la página. Es distinto de
   `display:none` y de `visibility:hidden`, que lo esconden también para
   el lector de pantalla y por tanto no sirven para esto. Se usa en las
   etiquetas de los campos del paso 01, cuyo diseño es a base de
   `placeholder` pero que necesitan un nombre de verdad.
   (Misma técnica que `.hp-field`, el señuelo anti-spam de más arriba —
   allí para ocultarlo a las personas, aquí para ocultarlo a la vista
   pero dejarlo audible.) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* `.skip-link` — "Saltar al contenido"
   Primer elemento enfocable de cada página. Está fuera de la pantalla
   hasta que recibe el foco con el tabulador, y entonces baja a la vista.
   No se puede ocultar con `.sr-only` a secas: tiene que poder VERSE
   cuando se llega a él, o quien navega con teclado no sabrá que lo ha
   activado. `z-index` por encima de la cabecera fija, que si no lo
   taparía. */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 10000;
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  background: var(--violet);
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* La pregunta del FAQ es un <button> (antes era un <div> que no se podía
   abrir con teclado). Un botón trae estilos propios del navegador —fondo
   gris, borde, fuente del sistema, texto centrado— que hay que apagar
   para que siga viéndose exactamente igual que antes. */
button.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  gap: 18px;
}

/* ===================== Floating parallax blobs (hero) ===================== */
.float-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}
.fb1 { width: 340px; height: 340px; background: rgba(139,92,246,0.22); top: 10%; left: 6%; }
.fb2 { width: 300px; height: 300px; background: rgba(124,58,237,0.20); top: 40%; right: 8%; }
.fb3 { width: 260px; height: 260px; background: rgba(109,40,217,0.18); bottom: 5%; left: 30%; }

/* ===================== Gradient text shimmer ===================== */
.hero h1 .accent {
  background-size: 200% auto;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ===================== Smooth image reveal for icons on hover ===================== */
.card-icon svg, .info-icon svg { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-icon svg { transform: scale(1.12) rotate(-4deg); }

/* ===================== Section divider glow line ===================== */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
  opacity: .4;
}

.back-top {
  position: fixed;
  right: 26px; bottom: 26px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(139,92,246,.4);
  cursor: pointer;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }