/* =============================================================
   VARIABLES.CSS
   Única fuente de colores, tipografías, tamaños, espaciados,
   bordes, radios y transiciones. Ningún otro CSS usa valores
   directos: siempre var(--nombre).
   ============================================================= */

:root {
  /* Colores (Figma: Brand/Black, Brand/White) */
  --color-negro: #141313;
  --color-blanco: #ffffff;
  --color-placeholder: #989898;
  --color-fondo-formulario: #cccccc;   /* blanco oscurecido 20% */
  --color-error: #b3261e;

  /* Tipografía: Arimo (métricamente compatible con Helvetica) */
  --fuente-base: 'Arimo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --peso-regular: 400;
  --peso-bold: 700;

  /* Tamaños de fuente (desktop → mobile con clamp) */
  --fs-cuerpo-grande: clamp(1rem, 0.875rem + 0.42vw, 1.25rem);   /* 20 → 16 */
  --fs-subtitulo: clamp(1.25rem, 1.125rem + 0.42vw, 1.5rem);     /* 24 → 20 */
  --fs-subtitulo-formulario: clamp(1.5rem, 1.35rem + 0.5vw, 1.8rem); /* 29 → 24 (+20%) */
  --fs-boton: clamp(0.875rem, 0.8125rem + 0.21vw, 1rem);         /* 16 → 14 */
  --fs-copyright: 1.125rem;                                       /* 18 */

  /* Interlineados (Figma) */
  --lh-cuerpo-grande: 1.4;     /* 28 / 20 */
  --lh-subtitulo: 1.1667;      /* 28 / 24 */
  --lh-boton: 1.25;            /* 20 / 16 */
  --lh-copyright: 1.3333;      /* 24 / 18 */

  /* Layout */
  --ancho-contenedor: 1200px;
  --margen-lateral: clamp(16px, 5vw, 120px);
  --alto-header: 96px;
  --alto-hero: 700px;
  --ancho-logo: 113px;
  --alto-logo: 60px;
  --ancho-titulo-hero: clamp(280px, 80vw, 439px);
  --ancho-titulo-gracias: clamp(260px, 70vw, 500px);
  --ancho-texto: 700px;
  --ancho-texto-hero: 760px;   /* Arimo es apenas más ancha que Helvetica: evita que corte la 1ª línea */

  /* Espaciados */
  --espacio-xs: 12px;
  --espacio-s: 20px;
  --espacio-m: 32px;
  --espacio-l: 40px;
  --espacio-xl: 50px;
  --espacio-parrafo: 28px;

  /* Botones e inputs */
  --alto-boton: 44px;
  --padding-boton: 12px 20px;
  --padding-input: 10px 40px;
  --padding-campo: 0 20px;
  --radio-boton: 20px;
  --radio-input: 20px;
  --borde-fino: 1px solid var(--color-blanco);
  --linea-footer: 1px solid var(--color-blanco);

  /* Íconos de redes */
  --icono-grande: 24px;
  --icono-chico: 20px;

  /* Efectos */
  --transicion-base: 0.3s ease;
  --escala-hover: scale(1.05);
  --opacidad-textura: 0.6;
  --brillo-fondo-formulario: brightness(0.9);
  --opacidad-deshabilitado: 0.6;
  --foco: 2px solid var(--color-negro);
  --foco-claro: 2px solid var(--color-blanco);
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --alto-header: 72px;
    --ancho-logo: 85px;
    --alto-logo: 45px;
    --padding-input: 10px 20px;
    --padding-campo: 0;
    --padding-boton: 12px 16px;
  }
}