/* ============================================================================
   VERIXA · SISTEMA DE DISEÑO (Design System)  —  ÚNICA FUENTE DE VERDAD
   ----------------------------------------------------------------------------
   Concepto C "limpio/tech" · acento Riviera Blue (#018ADA) · tipografía Manrope+Inter.
   Es ADITIVO: solo define tokens (:root) y clases con prefijo .vx-  →  no pisa
   estilos existentes. Las páginas migran usando estas clases/variables.
   Cambia un token aquí y cambia TODA la web.  v1 · 27-jun-2026
   ============================================================================ */

/* ---- FUENTES AUTO-ALOJADAS (sin Google · RGPD-friendly) ---- */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root {
  /* ---- MARCA / ACENTO ---- */
  --vx-riviera:        #018ADA;   /* acción: botones, enlaces, activos */
  --vx-riviera-deep:   #0166a8;   /* hover / press */
  --vx-riviera-bright: #3aa6e8;   /* brillos, gradientes */
  --vx-riviera-soft:   rgba(1,138,218,.08);
  --vx-riviera-soft2:  rgba(1,138,218,.16);
  --vx-miami:          #00B5C8;   /* secundario cian (Porsche Miami) — detalles puntuales */

  /* ---- NEUTROS (modo claro) ---- */
  --vx-bg:        #ffffff;        /* fondo base */
  --vx-bg-2:      #f4f8fc;        /* niebla azul: secciones alternas */
  --vx-bg-3:      #eaf1f7;        /* hundido */
  --vx-surface:   #ffffff;        /* superficie de card */
  --vx-surface-2: #f7fafd;        /* card sutil */
  --vx-text:      #0b1620;        /* texto principal (tinta azul) */
  --vx-muted:     #56657a;        /* texto secundario */
  --vx-faint:     #8a97a8;        /* hints, captions */
  --vx-line:      rgba(11,22,32,.09);
  --vx-line-2:    rgba(11,22,32,.14);
  --vx-ink:       #0b1620;        /* tinta para fondos oscuros de contraste */
  --vx-ink-2:     #12202e;

  /* ---- SEMÁNTICOS ---- */
  --vx-success:   #2fa968;
  --vx-success-bg: rgba(47,169,104,.12);
  --vx-warning:   #c98a1a;
  --vx-warning-bg: rgba(201,138,26,.12);
  --vx-danger:    #d4493f;
  --vx-danger-bg: rgba(212,73,63,.10);

  /* ---- TIPOGRAFÍA ---- */
  --vx-font:         'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vx-font-display: 'Manrope', 'Inter', sans-serif;       /* titulares */
  --vx-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* datos/cifras */

  --vx-h1:      clamp(2.4rem, 5vw, 3.8rem);
  --vx-h2:      clamp(1.8rem, 3.5vw, 2.6rem);
  --vx-h3:      1.4rem;
  --vx-body:    1.0625rem;     /* 17px */
  --vx-small:   0.875rem;      /* 14px */
  --vx-caption: 0.8125rem;     /* 13px */
  --vx-eyebrow: 0.72rem;

  /* ---- ESPACIADO (rejilla 8pt) ---- */
  --vx-1: 4px;  --vx-2: 8px;  --vx-3: 12px; --vx-4: 16px; --vx-5: 24px;
  --vx-6: 32px; --vx-7: 48px; --vx-8: 64px; --vx-9: 96px; --vx-10: 128px;

  /* ---- RADIOS ---- */
  --vx-r-sm:   8px;
  --vx-r:      12px;
  --vx-r-lg:   18px;
  --vx-r-pill: 999px;

  /* ---- SOMBRAS (suaves, azuladas) ---- */
  --vx-sh-sm:  0 2px 12px rgba(11,22,32,.06);
  --vx-sh:     0 8px 32px rgba(11,22,32,.10);
  --vx-sh-lg:  0 20px 60px rgba(11,22,32,.14);
  --vx-glow:   0 8px 30px rgba(1,138,218,.32);

  /* ---- MOTION ---- */
  --vx-t-fast: 120ms;
  --vx-t:      240ms;
  --vx-t-slow: 360ms;
  --vx-ease:   cubic-bezier(.22,.61,.36,1);

  /* ---- LAYOUT ---- */
  --vx-container: 1120px;
  --vx-reading:   680px;
}

/* ============================================================================
   TIPOGRAFÍA — clases utilitarias
   ============================================================================ */
.vx-display { font-family: var(--vx-font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--vx-text); }
.vx-h1 { font-family: var(--vx-font-display); font-weight: 800; font-size: var(--vx-h1); letter-spacing: -.035em; line-height: 1.04; color: var(--vx-text); margin: 0; }
.vx-h2 { font-family: var(--vx-font-display); font-weight: 700; font-size: var(--vx-h2); letter-spacing: -.025em; line-height: 1.12; color: var(--vx-text); margin: 0; }
.vx-h3 { font-family: var(--vx-font-display); font-weight: 600; font-size: var(--vx-h3); letter-spacing: -.01em; line-height: 1.25; color: var(--vx-text); margin: 0; }
.vx-lead { font-size: 1.15rem; line-height: 1.6; color: var(--vx-muted); }
.vx-body { font-size: var(--vx-body); line-height: 1.65; color: var(--vx-text); }
.vx-muted { color: var(--vx-muted); }
.vx-mono { font-family: var(--vx-font-mono); font-variant-numeric: tabular-nums; }

/* Eyebrow (kicker sobre titulares) */
.vx-eyebrow {
  display: inline-block;
  font-size: var(--vx-eyebrow); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vx-riviera);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.vx-container { max-width: var(--vx-container); margin-inline: auto; padding-inline: var(--vx-5); }
.vx-section { padding-block: var(--vx-9); }
.vx-section--alt { background: var(--vx-bg-2); }
.vx-grid { display: grid; gap: var(--vx-4); }
.vx-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vx-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vx-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 880px) { .vx-grid-3, .vx-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .vx-grid-2, .vx-grid-3, .vx-grid-4 { grid-template-columns: 1fr; } }

/* ============================================================================
   BOTONES  (premium con sheen)
   ============================================================================ */
.vx-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vx-2);
  padding: .8rem 1.5rem; border-radius: var(--vx-r);
  font-family: var(--vx-font); font-size: .94rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--vx-t-fast) var(--vx-ease), box-shadow var(--vx-t), background var(--vx-t), border-color var(--vx-t);
  will-change: transform;
}
.vx-btn:active { transform: translateY(-1px) scale(.99); }

.vx-btn--primary {
  background: linear-gradient(135deg, var(--vx-riviera-bright) 0%, var(--vx-riviera) 55%, var(--vx-riviera-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 22px rgba(1,138,218,.40), inset 0 1px 0 rgba(255,255,255,.28);
}
.vx-btn--primary::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 65%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); transition: left .65s var(--vx-ease); pointer-events: none;
}
.vx-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(1,138,218,.55), inset 0 1px 0 rgba(255,255,255,.32); }
.vx-btn--primary:hover::after { left: 140%; }

.vx-btn--ghost { background: var(--vx-bg-2); color: var(--vx-text); }
.vx-btn--ghost:hover { background: var(--vx-bg-3); transform: translateY(-2px); }

.vx-btn--outline { background: transparent; color: var(--vx-text); border-color: var(--vx-line-2); }
.vx-btn--outline:hover { border-color: var(--vx-riviera); color: var(--vx-riviera); transform: translateY(-2px); }

.vx-btn--lg { padding: 1rem 2rem; font-size: 1rem; border-radius: 14px; }
.vx-btn--sm { padding: .55rem 1rem; font-size: .85rem; }

/* Foco accesible (anillo Riviera) */
.vx-btn:focus-visible, .vx-input:focus-visible, a:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--vx-riviera-soft2); border-radius: var(--vx-r-sm);
}

/* ============================================================================
   CARDS  (con rim-light + spotlight de cursor opcional)
   ============================================================================ */
.vx-card {
  position: relative; overflow: hidden;
  background: var(--vx-surface); border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-lg); padding: var(--vx-5);
  box-shadow: var(--vx-sh-sm);
  transition: transform var(--vx-t) var(--vx-ease), box-shadow var(--vx-t), border-color var(--vx-t);
}
.vx-card:hover { transform: translateY(-4px); box-shadow: var(--vx-sh-lg); border-color: var(--vx-line-2); }
/* Rim-light: filo de luz superior */
.vx-card--rim::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vx-riviera), transparent);
  opacity: 0; transition: opacity var(--vx-t);
}
.vx-card--rim:hover::before { opacity: .8; }
/* Spotlight de cursor (requiere JS que setea --mx/--my; ver vx-spotlight) */
.vx-card--spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--vx-riviera-soft2), transparent 45%);
  opacity: 0; transition: opacity var(--vx-t);
}
.vx-card--spot:hover::after { opacity: 1; }

/* ============================================================================
   BADGES / PILLS
   ============================================================================ */
.vx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: var(--vx-r-pill);
  background: var(--vx-riviera-soft); color: var(--vx-riviera-deep);
  border: 1px solid var(--vx-riviera-soft2);
}
.vx-badge--success { background: var(--vx-success-bg); color: var(--vx-success); border-color: transparent; }
.vx-badge--warning { background: var(--vx-warning-bg); color: var(--vx-warning); border-color: transparent; }
.vx-badge--danger  { background: var(--vx-danger-bg);  color: var(--vx-danger);  border-color: transparent; }

/* ============================================================================
   FORMULARIOS
   ============================================================================ */
.vx-label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted); margin-bottom: var(--vx-2); }
.vx-input, .vx-select, .vx-textarea {
  width: 100%; font-family: var(--vx-font); font-size: 1rem; color: var(--vx-text);
  background: var(--vx-surface); border: 1px solid var(--vx-line-2); border-radius: var(--vx-r-sm);
  padding: .7rem .9rem; transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast);
}
.vx-input::placeholder { color: var(--vx-faint); }
.vx-input:focus, .vx-select:focus, .vx-textarea:focus { outline: none; border-color: var(--vx-riviera); box-shadow: 0 0 0 3px var(--vx-riviera-soft); }

/* ============================================================================
   CIFRAS / STATS  (los números como producto — tabular)
   ============================================================================ */
.vx-stat { display: flex; flex-direction: column; gap: 4px; }
.vx-stat__num { font-family: var(--vx-font-display); font-weight: 800; font-size: clamp(1.8rem,3.5vw,2.6rem); letter-spacing: -.03em; line-height: 1; color: var(--vx-text); font-variant-numeric: tabular-nums; }
.vx-stat__num .u { color: var(--vx-riviera); }
.vx-stat__label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); }

/* ============================================================================
   ICONOS LUCIDE  (familia única de línea)
   ============================================================================ */
[data-lucide], .vx-ic { display: inline-flex; vertical-align: middle; }
.vx-ic svg, [data-lucide] svg { width: 1.25em; height: 1.25em; stroke-width: 1.75; }
.vx-ic--accent { color: var(--vx-riviera); }
/* Caja de icono (sustituye a los pictogramas de colores) */
.vx-ico-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--vx-r);
  background: var(--vx-riviera-soft); color: var(--vx-riviera);
}
.vx-ico-box svg { width: 24px; height: 24px; stroke-width: 1.75; }

/* ============================================================================
   SECCIÓN OSCURA DE CONTRASTE  (.vx-dark invierte los tokens dentro)
   ============================================================================ */
.vx-dark {
  background: var(--vx-ink); color: var(--vx-dark-text);
  --vx-text: #e8eef5; --vx-muted: #93a3b6; --vx-surface: rgba(255,255,255,.04);
  --vx-line: rgba(255,255,255,.10); --vx-line-2: rgba(255,255,255,.16);
}
.vx-dark .vx-eyebrow { color: var(--vx-riviera-bright); }

/* ============================================================================
   REVEALS AL SCROLL  (activar con JS: añadir .is-visible)
   ============================================================================ */
.vx-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--vx-t-slow) var(--vx-ease), transform var(--vx-t-slow) var(--vx-ease); }
.vx-reveal.is-visible { opacity: 1; transform: none; }
.vx-delay-1 { transition-delay: .08s; }
.vx-delay-2 { transition-delay: .16s; }
.vx-delay-3 { transition-delay: .24s; }

/* ============================================================================
   UTILIDADES
   ============================================================================ */
.vx-center { text-align: center; }
.vx-stack > * + * { margin-top: var(--vx-4); }
.vx-divider { height: 1px; background: var(--vx-line); border: 0; }
.vx-grain::before { content:''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; }

/* ============================================================================
   ACCESIBILIDAD — respeta a quien prefiere menos movimiento
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .vx-btn, .vx-card, .vx-reveal, .vx-btn--primary::after, .vx-card--spot::after, .vx-card--rim::before {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
  .vx-reveal { opacity: 1 !important; transform: none !important; }
}