/*
 * Voltia — fundamentos visuales
 * Extraídos del handoff de diseño (design_handoff_voltia_web/README.md).
 * Todo color, tipografía o espaciado del sitio sale de acá:
 * si algo hay que cambiarlo, se cambia una sola vez en este archivo.
 */

:root {
  /* ---- Color ---- */
  --voltia-navy-900: #081A52;   /* fondo principal de todas las páginas */
  --voltia-navy-700: #102C72;   /* tarjetas, paneles, inputs */
  --voltia-navy-600: #0C2A6E;   /* tarjetas flotantes */
  --voltia-blue-500: #2F6BFF;   /* azul brillante: gradientes y glows */
  --voltia-blue-600: #1E4FD6;   /* azul de marca */
  --voltia-amber:    #FFC23B;   /* acento solar: CTAs, kickers, números */
  --voltia-amber-hover: #FFCF5E;
  --voltia-ink:      #EAF0FF;   /* texto principal sobre navy */

  /* Texto derivado — opacidades exactas del diseño */
  --txt-lead:  rgba(234, 240, 255, 0.72);
  --txt-body:  rgba(234, 240, 255, 0.64);
  --txt-label: rgba(234, 240, 255, 0.60);
  --txt-muted: rgba(234, 240, 255, 0.60); /* el diseño usaba 0.45; subido por contraste AA */
  --txt-nav:   rgba(234, 240, 255, 0.78);

  /* Bordes y fondos sutiles */
  --bd-card:    rgba(255, 255, 255, 0.10);
  --bd-input:   rgba(255, 255, 255, 0.16);
  --bd-divider: rgba(255, 255, 255, 0.08);
  --bd-image:   rgba(255, 255, 255, 0.12);
  --bg-flat:    rgba(255, 255, 255, 0.02);
  --bg-input:   rgba(255, 255, 255, 0.04);
  --bg-stripe:  rgba(255, 255, 255, 0.015);

  /* Gradientes */
  --grad-cta:     linear-gradient(135deg, #2F6BFF, #1E4FD6);
  --grad-section: linear-gradient(180deg, rgba(47,107,255,0.10), rgba(47,107,255,0.02));

  /* ---- Tipografía ---- */
  --font-title: "Space Grotesk", system-ui, sans-serif;
  --font-body:  "Archivo", system-ui, sans-serif;

  /* Escala fluida: se adapta sola entre celular y escritorio.
     El diseño está hecho a 1280px; estos valores llegan a ese tamaño arriba. */
  --fs-h1:     clamp(2.25rem, 1.2rem + 4.4vw, 3.875rem);  /* 36 → 62px */
  --fs-h1-int: clamp(2.1rem,  1.2rem + 3.8vw, 3.5rem);    /* 34 → 56px */
  --fs-h2:     clamp(1.75rem, 1.1rem + 2.6vw, 2.625rem);  /* 28 → 42px */
  --fs-h2-sm:  clamp(1.6rem,  1.1rem + 2.0vw, 2.125rem);  /* 26 → 34px */
  --fs-h3:     1.25rem;
  --fs-lead:   1.125rem;
  --fs-body:   1rem;
  --fs-card:   0.906rem;
  --fs-kicker: 0.812rem;

  --lh-title:  1.06;
  --lh-body:   1.6;
  --ls-title:  -0.02em;
  --ls-kicker: 0.14em;

  /* ---- Espaciado ---- */
  --pad-page:    clamp(1.25rem, 5vw, 4rem);   /* 20 → 64px lateral */
  --pad-section: clamp(3.5rem, 8vw, 6rem);    /* 56 → 96px vertical */
  --gap-grid:    1.25rem;
  --gap-cards:   1.375rem;
  --gap-cols:    3.5rem;
  --max-content: 1280px;

  /* ---- Formas ---- */
  --r-pill:   100px;
  --r-block:  28px;
  --r-card-l: 24px;
  --r-image:  22px;
  --r-card:   18px;
  --r-card-s: 16px;
  --r-btn:    13px;
  --r-input:  11px;

  --shadow-float: 0 20px 50px rgba(0, 0, 0, 0.4);

  /* ---- Movimiento ---- */
  --t-fast:  .15s;
  --t-card:  .18s;
  --t-image: .4s;
}

/* Quien prefiera menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}