/* ============================================================
   BASE — Tipografía, foco, layout base, utilidades de texto
   Define el comportamiento por defecto de elementos HTML.
   ============================================================ */

/* ---------- BODY ---------- */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  /* Patrón sutil de ruido + gradiente para que el fondo no sea plano */
  background-image:
    radial-gradient(ellipse at top left, rgba(123, 47, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 229, 255, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ---------- TIPOGRAFÍA — TITULARES ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

h1 {
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-tighter);
}

h2 {
  font-size: var(--fs-4xl);
}

h3 {
  font-size: var(--fs-3xl);
}

h4 {
  font-size: var(--fs-2xl);
}

h5 {
  font-size: var(--fs-xl);
}

h6 {
  font-size: var(--fs-lg);
}

/* ---------- TIPOGRAFÍA — PÁRRAFO ---------- */
p {
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

p.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ---------- ENLACES ---------- */
a {
  color: var(--text-primary);
  transition: color var(--duration-base) var(--ease-default);
}

a:hover {
  color: var(--accent-secondary);
}

/* ---------- FOCO ACCESIBLE ---------- */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- SELECCIÓN DE TEXTO ---------- */
::selection {
  background: var(--accent-primary);
  color: var(--text-primary);
}

/* ---------- SCROLLBAR (webkit) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-secondary), var(--accent-primary));
}

/* ---------- LAYOUT — CONTENEDOR ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Variante estrecha (texto centrado, formularios) */
.container--narrow {
  max-width: 720px;
}

/* ---------- LAYOUT — SECCIÓN ---------- */
section {
  padding-block: var(--section-padding-y);
  position: relative;
}

/* ---------- UTILIDADES DE TEXTO ---------- */

/* Texto con gradiente violeta-cian */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Fallback si el navegador no soporta background-clip */
  display: inline-block;
}

/* Eyebrow — texto pequeño previo a un título de sección */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-secondary);
  margin-bottom: var(--space-4);
}

/* Título de sección con tracking ajustado */
.section-title {
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-4);
}

/* Subtítulo de sección */
.section-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 640px;
  line-height: var(--lh-relaxed);
}

/* Cabecera de sección (eyebrow + título + subtítulo) */
.section-header {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-16);
  max-width: 720px;
}

.section-header .section-subtitle {
  margin-inline: auto;
}

/* ---------- UTILIDADES DE SR-ONLY (accesibilidad) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- SKIP LINK (accesibilidad teclado) ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-primary);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  transition: top var(--duration-base) var(--ease-default);
}

.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent-secondary);
  outline-offset: 2px;
  color: var(--text-primary);
}

/* ---------- RESPETA prefers-reduced-motion GLOBALMENTE ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- ESTILOS DE IMPRESIÓN ---------- */
@media print {
  body {
    background: white;
    color: black;
  }

  .navbar,
  .hero__canvas,
  .hero__radial,
  .hero__scroll,
  .footer__social,
  .cta-final__bg {
    display: none !important;
  }

  .card,
  .testimonial,
  .plan,
  .faq-item {
    background: white !important;
    border: 1px solid #ccc !important;
    backdrop-filter: none !important;
    color: black !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .text-gradient {
    background: none !important;
    color: black !important;
    -webkit-text-fill-color: black !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  /* Las imágenes y SVGs decorativos no se imprimen */
  [aria-hidden="true"] {
    display: none !important;
  }
}