/* ============================================================
   VARIABLES.CSS · Identidad visual de la marca
   ------------------------------------------------------------
   Toda la identidad (colores, tipografías, espaciados, radios,
   sombras) vive aquí. Cambia la marca desde este único archivo.

   LENGUAJE VISUAL: dark premium en BLANCO Y NEGRO.
   El acento visual general es BLANCO/GRIS (--c-accent).
   El ROJO carmesí (--c-cta) se usa SOLO como acento puntual:
   botón principal (CTA), botón circular de enviar y el cursor
   de escritura. Nada más lleva rojo.
   ============================================================ */

:root {
  /* ---------- COLOR · Acento visual (monocromo) ----------
     Antes era rojo; ahora el acento general es blanco/gris para
     el estilo B/N. Títulos, iconos, highlights y bordes usan esto. */
  --c-accent:    #ffffff;   /* acento neutro (highlights, iconos, bordes) */
  --c-accent-2:  #cfcfcf;   /* variante del acento (gradiente neutro) */
  --c-accent-ink: #0a0a0a;  /* texto que va ENCIMA de una superficie clara */

  /* ---------- COLOR · CTA (ÚNICO rojo de la web) ----------
     Rojo carmesí, SOLO en: .btn--primary, botón de enviar del hero
     y el cursor de escritura. Para cambiar el rojo, edita aquí. */
  --c-cta:     #D4152B;   /* rojo carmesí */
  --c-cta-2:   #E11D36;   /* variante clara (gradiente del CTA) */
  --c-cta-ink: #ffffff;   /* texto/icono ENCIMA del rojo */

  /* ---------- COLOR · Neutros (dark monocromo) ---------- */
  --c-ink-950: #050505;   /* negro casi puro (hero, cierres) */
  --c-ink-925: #0a0a0a;   /* fondo base general */
  --c-ink-900: #161616;   /* superficie / sección alterna */
  --c-ink-800: #1a1a1a;   /* superficie de tarjeta */
  --c-ink-700: #242424;   /* gris medio · superficie elevada / hover */
  --c-gray-400: #a0a0a0;  /* gris claro · texto secundario */
  --c-white:   #ffffff;

  /* ---------- Roles semánticos ---------- */
  --bg:          var(--c-ink-925);   /* fondo base NEUTRO */
  --bg-alt:      var(--c-ink-900);   /* fondo de sección alterna */
  --bg-deep:     var(--c-ink-950);   /* fondo profundo (hero/cierre) */
  --surface:     var(--c-ink-800);   /* superficie de tarjeta */
  --surface-2:   var(--c-ink-700);   /* superficie elevada / hover */
  --border:        rgba(255, 255, 255, .14);  /* borde fino claro (~14%) */
  --border-strong: rgba(255, 255, 255, .24);  /* borde fino claro (~24%) */
  --text:        var(--c-white);
  --text-muted:  var(--c-gray-400);  /* #a0a0a0 */
  --text-dim:    #8a8a8a;   /* gris apagado (AA sobre negro) */

  /* ---------- Gradientes y brillo ---------- */
  /* Acento neutro (blanco→gris): monogramas, hairlines, detalles */
  --grad-accent:      linear-gradient(135deg, #ffffff, #cfcfcf);
  --grad-accent-soft: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  --glow:             rgba(255, 255, 255, .14);   /* brillo neutro sutil */
  /* CTA rojo */
  --grad-cta:         linear-gradient(135deg, var(--c-cta), var(--c-cta-2));
  --glow-cta:         rgba(212, 21, 43, .5);

  /* ---------- Cristal · Dark Glassmorphism (reutilizable) ----------
     Cristal oscuro TRANSLÚCIDO y gris que comparten TODAS las tarjetas.
     Más transparencia = menor opacidad en --glass-base. El velo blanco
     (--glass-tint) da el brillo especular superior. */
  --glass-tint:   linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 100%);
  --glass-base:   rgba(42, 42, 46, .42);            /* gris translúcido (base) */
  --glass-bg:     var(--glass-tint), var(--glass-base);
  --glass-border:        rgba(255, 255, 255, .08);  /* borde especular fino */
  --glass-border-strong: rgba(255, 255, 255, .25);  /* borde iluminado (hover) */
  --glass-blur:   20px;
  --glass-sh-hover:
    0 24px 70px -24px rgba(0, 0, 0, .6),
    0 0 34px rgba(255, 255, 255, .06);               /* luz difusa y elegante */

  /* ---------- Tipografía ----------
     Display (titulares poster): condensada bold (Anton).
     Head (resto de títulos, nav, botones, etiquetas): Oswald.
     Body: Inter. */
  --font-display: "Anton", "Oswald", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-head: "Oswald", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;

  --fs-sm:   .9375rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  --fs-2xl:  clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
  --fs-3xl:  clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 5vw, 4.75rem);

  --lh-tight: 1.08;
  --lh-body:  1.7;

  /* ---------- Espaciado ---------- */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gap:       clamp(1rem, .6rem + 1.4vw, 1.75rem);
  --container: 1200px;
  --container-narrow: 820px;

  /* ---------- Radios ---------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* ---------- Sombras ---------- */
  --sh-sm:   0 4px 14px rgba(0, 0, 0, .35);
  --sh-md:   0 14px 34px rgba(0, 0, 0, .45);
  --sh-lg:   0 28px 60px rgba(0, 0, 0, .55);
  --sh-glow: 0 10px 44px -10px var(--glow-cta);

  /* ---------- Transiciones / easing ---------- */
  --t-fast: .18s ease;
  --t-base: .3s cubic-bezier(.22, 1, .36, 1);
  --t-slow: .6s cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);

  /* ---------- Varios ---------- */
  --header-h: 72px;
}