/* ═══════════════════════════════════════════════════════════════════
   Venzen · identidad propia del producto («la peonza con norte»).
   Tokens tomados de la app (src/styles/tokens.css): fondo melocotón,
   tinta #17141D, índigo de la punta como acento, Gabarito para el
   logotipo y los titulares, Inter para la lectura. Aura de color
   detrás y tarjetas de vidrio en oscuro. Todo bajo .vz.
   ═══════════════════════════════════════════════════════════════════ */

.vz {
  --vz-orange: #FF5E14;
  --vz-cyan: #2CCBF2;
  --vz-blue: #1E8BF0;
  --vz-indigo: #2447D6;
  --vz-ink: #17141D;

  --vz-bg: #FFE8D6;
  --vz-bg-alt: #FFF4EB;
  --vz-surface: #FFFFFF;
  --vz-text: #17141D;
  --vz-text-2: #4A3F47;
  --vz-text-3: #6B5F66;
  --vz-border: rgba(0, 0, 0, .08);
  --vz-border-strong: rgba(0, 0, 0, .14);
  --vz-accent: #2447D6;
  --vz-on-accent: #FFFFFF;
  --vz-accent-subtle: rgba(36, 71, 214, .08);
  --vz-tag-text: #2447D6;
  --vz-glow-warm: hsl(20 100% 54% / .42);
  --vz-glow-cool: hsl(209 87% 53% / .24);
  --vz-card-bg: var(--vz-surface);
  --vz-card-border: var(--vz-border);
  --vz-card-radius: 16px;
  --vz-card-blur: none;
  --vz-shadow: 0 1px 2px rgba(0, 0, 0, .06);

  --vz-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --vz-font-display: "Gabarito", var(--vz-font);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vz-bg);
  color: var(--vz-text);
  font-family: var(--vz-font);
  font-feature-settings: normal;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .vz {
    --vz-bg: #17141D;
    --vz-bg-alt: #1D1826;
    --vz-surface: #221D2C;
    --vz-text: #FFF4EB;
    --vz-text-2: #ACA5BA;
    --vz-text-3: #948DA6;
    --vz-border: rgba(255, 255, 255, .09);
    --vz-border-strong: rgba(255, 255, 255, .16);
    --vz-accent: #3FA0F4;
    --vz-on-accent: #0F0F12;
    --vz-accent-subtle: rgba(63, 160, 244, .14);
    --vz-tag-text: #7AB4FA;   /* color-info-text oscuro de la app */
    --vz-glow-warm: hsl(20 100% 54% / .20);
    --vz-glow-cool: hsl(228 70% 52% / .24);
    --vz-card-bg: rgba(255, 255, 255, .07);
    --vz-card-border: rgba(255, 255, 255, .16);
    --vz-card-radius: 28px;
    --vz-card-blur: blur(20px);
    --vz-shadow: none;
  }
}

/* Aura ambiental: naranja cálido arriba, azul/índigo abajo (como en la app) */
.vz::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 20% -5%, var(--vz-glow-warm), transparent 70%),
    radial-gradient(65% 55% at 100% 100%, var(--vz-glow-cool), transparent 70%);
}

.vz :focus-visible {
  outline: 2px solid var(--vz-accent);
  outline-offset: 2px;
}

.vz h1, .vz h2, .vz h3 {
  font-family: var(--vz-font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--vz-text);
}

.vz h2 { font-size: clamp(1.69rem, 3.4vw, 2.5rem); }
.vz h3 { font-size: 1.19rem; font-weight: 600; }
.vz p { color: var(--vz-text-2); }

/* Mismos márgenes que la cabecera y el pie de JOU */
.vz-container {
  width: 100%;
  max-width: calc(1392px + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 599px) {
  .vz-container { padding: 0 16px; }
}

.vz-section { padding: 80px 0; }

.vz-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--vz-text-3);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vz-intro {
  max-width: 620px;
  margin-top: 12px;
  font-size: 1.0625rem;
}

/* ─── Botones píldora ─── */
.vz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: var(--vz-font);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, transform 120ms;
}

.vz-btn .icon { width: 16px; height: 16px; fill: currentColor; }
.vz-btn:active { transform: scale(.97); }

.vz-btn--primary {
  background: var(--vz-accent);
  color: var(--vz-on-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.vz-btn--ghost {
  background: var(--vz-surface);
  border-color: var(--vz-border);
  color: var(--vz-text-2);
}

.vz-btn--ghost:hover { border-color: var(--vz-border-strong); }

.vz-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── Portada ─── */
.vz-hero {
  padding: clamp(64px, 9vw, 112px) 0 64px;
  text-align: center;
}

.vz-hero .vz-container { max-width: 760px; }

.vz-hero__mark {
  width: 132px;
  height: 132px;
  margin: 0 auto 8px;
}

/* Logotipo: Gabarito 800, tracking −3,5 % (hoja de marca) */
.vz-logo {
  font-family: var(--vz-font-display);
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}

.vz-tagline {
  margin-top: 12px;
  color: var(--vz-text);
  font-family: var(--vz-font-display);
  font-size: clamp(1.375rem, 3vw, 1.69rem);
  font-weight: 600;
}

.vz-hero__lead {
  max-width: 540px;
  margin: 16px auto 32px;
  font-size: 1.0625rem;
}

.vz-hero .vz-actions { justify-content: center; }

.vz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid var(--vz-border);
  border-radius: 9999px;
  background: var(--vz-accent-subtle);
  color: var(--vz-text);
  font-size: .8125rem;
  font-weight: 600;
}

.vz-badge .icon { width: 16px; height: 16px; fill: var(--vz-accent); }

/* ─── Manifiesto ─── */
.vz-manifest {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.vz-manifest blockquote {
  font-family: var(--vz-font-display);
  font-size: clamp(1.69rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--vz-text);
}

.vz-manifest p { margin-top: 16px; font-size: 1.0625rem; }

/* ─── Tarjetas ─── */
.vz-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

@media (max-width: 959px) { .vz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .vz-cards { grid-template-columns: 1fr; } }

.vz-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--vz-card-border);
  border-radius: var(--vz-card-radius);
  background: var(--vz-card-bg);
  box-shadow: var(--vz-shadow);
  -webkit-backdrop-filter: var(--vz-card-blur);
  backdrop-filter: var(--vz-card-blur);
}

.vz-card__tag {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 9999px;
  background: var(--vz-accent-subtle);
  color: var(--vz-tag-text);
  font-size: .75rem;
  font-weight: 600;
}

.vz-card p { font-size: .9375rem; }

/* ─── Planes ─── */
.vz-plans .vz-card { gap: 12px; padding: 24px; }
.vz-plan__price { color: var(--vz-text); font-family: var(--vz-font-display); font-size: 1.375rem; font-weight: 700; }
.vz-plan__tagline { color: var(--vz-text-3); font-size: .875rem; font-weight: 600; }

.vz-plan__list {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  color: var(--vz-text-2);
  font-size: .9375rem;
}

.vz-plan__list li { display: flex; gap: 8px; }
.vz-plan__list .icon { width: 16px; height: 16px; margin-top: 3px; fill: var(--vz-accent); flex: none; }

.vz-note {
  display: flex;
  gap: 10px;
  max-width: 760px;
  margin-top: 24px;
  padding: 16px;
  border-radius: 16px;
  background: var(--vz-accent-subtle);
  color: var(--vz-text);
  font-size: .9375rem;
}

.vz-note .icon { width: 20px; height: 20px; flex: none; fill: var(--vz-accent); }
.vz-note p { color: var(--vz-text); }

/* ─── Beta y llamada final ─── */
.vz-beta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 767px) { .vz-beta { grid-template-columns: 1fr; } }

.vz-beta dt { color: var(--vz-text-3); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.vz-beta dd { margin: 4px 0 0; color: var(--vz-text); font-family: var(--vz-font-display); font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.vz-cta { text-align: center; }
.vz-cta p { max-width: 520px; margin: 12px auto 24px; }
.vz-cta .vz-actions { justify-content: center; }

.vz-credit { margin-top: 24px; color: var(--vz-text-3); font-size: .8125rem; }
.vz-credit a { color: var(--vz-accent); }