/* Estética de la landing principal (index.html) para las páginas secundarias:
   soporte, descarga, pro, legales, lista de espera y próximamente.

   Va como ÚLTIMO stylesheet del <head> de cada página. Los tokens son los de
   index.html con la paleta "indigo" que index aplica por JS (applyPaletteCSS):
   fondo menta con el degradé aqua/celeste del hero, acento índigo, cian de
   segundo color, títulos en Space Grotesk y botones redondeados.

   Cada página tiene su propio CSS con nombres distintos; acá se mapean sus
   tokens a los de la landing en vez de reescribirlas. */

:root {
  --bg:            #C5DFD3;
  --bg-deep:       #B2D2C4;
  --bg-alt:        rgba(255, 255, 255, 0.45);
  --bg-card:       rgba(255, 255, 255, 0.55);
  --card:          rgba(255, 255, 255, 0.55);
  --surface:       rgba(255, 255, 255, 0.72);
  --teal:          #6366F1;
  --teal-dark:     #4F46E5;
  --teal-soft:     rgba(99, 102, 241, 0.10);
  --teal-faint:    rgba(99, 102, 241, 0.08);
  --teal-glow:     rgba(99, 102, 241, 0.28);
  --purple:        #06B6D4;
  --purple-soft:   rgba(6, 182, 212, 0.10);
  --purple-glow:   rgba(6, 182, 212, 0.25);
  --navy:          #0D2B1F;
  --navy2:         #2A5C4A;
  --text:          #0D2B1F;
  --text-dim:      #2A5C4A;
  --text-sec:      #2A5C4A;
  --text-muted:    #5A8F7E;
  --muted:         #5A8F7E;
  --border:        rgba(99, 102, 241, 0.15);
  --border-strong: rgba(99, 102, 241, 0.30);
  --line:          rgba(99, 102, 241, 0.15);
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:  'Space Grotesk', 'Inter', sans-serif;
  --display:       'Space Grotesk', 'Inter', sans-serif;
}

/* Fondo: el mismo degradé del hero de index (#page-aurora), arriba de todo y
   apagándose hacia el menta de --bg. */
html { background: var(--bg); }
body {
  background:
    radial-gradient(65% 55% at 15% 5%,  rgba(177, 220, 226, 0.85), transparent 72%),
    radial-gradient(60% 50% at 85% 8%,  rgba(118, 171, 221, 0.65), transparent 74%),
    radial-gradient(54% 44% at 90% 12%, rgba(70, 139, 240, 0.32),  transparent 72%),
    radial-gradient(62% 50% at 46% 42%, rgba(93, 188, 216, 0.34),  transparent 74%),
    linear-gradient(to bottom,
      rgba(161, 213, 224, 0.55) 0%,
      rgba(130, 190, 222, 0.42) 12%,
      rgba(110, 175, 220, 0.30) 24%,
      rgba(95, 163, 208, 0.13) 54%,
      transparent 100%),
    var(--bg) !important;
  background-size: 100% 1400px, 100% 1400px, 100% 1400px, 100% 1400px, 100% 1400px, auto !important;
  background-repeat: no-repeat !important;
  color: var(--text);
  font-family: var(--font-sans);
}

h1, h2, .hero-title, .logo span { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Barras de arriba: el degradé aqua/celeste con blur del header de index. */
.nav-wrap, .legal-header, body > header {
  background: linear-gradient(120deg, rgba(177, 220, 226, 0.82), rgba(157, 202, 223, 0.82) 55%, rgba(118, 171, 221, 0.82)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border) !important;
}

/* Legales: eran oscuras y usan --white como color de texto fuerte. */
body:has(> .legal-header) { --white: #0D2B1F; }
.callout { background: rgba(255, 255, 255, 0.55); }