/* ============================================================
   iMP · Directo Intensivo — Design tokens
   Misma arquitectura que tokens.css de TUP, con los colores y
   las tipografias institucionales de iMP:
   rojo #ED1E79, granate del punto #8D0F44, Poppins + Inter.
   ============================================================ */

/* Poppins: display (es la fuente de los titulares de iMP) */
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

/* Inter: cuerpo e interfaz (es la fuente de textos y botones de iMP) */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-italic-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* Color — tema oscuro */
  --c-bg:            #0A0A0A;
  --c-bg-alt:        #121212;
  --c-bg-card:       #161616;
  --c-bg-elevated:   #1C1C1C;
  --c-bg-warm:       #0D0909;   /* negro con un punto de granate, para el hero */
  --c-text:          #FFFFFF;
  --c-text-soft:     #C8C8C8;
  --c-text-muted:    #8F8B89;
  --c-border:        rgba(255, 255, 255, 0.08);
  --c-border-strong: rgba(255, 255, 255, 0.16);

  /* Acento institucional de iMP */
  --c-accent:        #ED1E79;
  --c-accent-soft:   rgba(237, 30, 121, 0.12);
  --c-accent-line:   rgba(237, 30, 121, 0.32);
  --c-accent-deep:   #8D0F44;   /* granate del punto del logotipo */
  --c-accent-ink:    #FFFFFF;   /* texto sobre el rojo */

  /* El rojo que SI puede llevar texto blanco encima.
     El de marca (#ED1E79) con blanco se queda en 4,29:1 y no pasa AA, asi que
     todo relleno rojo con texto blanco (banner, botones, tarjeta del regalo)
     usa este, que da 5,08:1. A simple vista es el mismo rojo.
     El de hover esta calculado para seguir pasando: 4,58:1. */
  --c-accent-fill:   #D6176C;
  --c-accent-fill-h: #E01A72;

  /* Y el espejo: el rojo para TEXTO sobre fondo oscuro.
     El de marca sobre el negro de la pagina da 4,67:1, que pasa por los
     pelos, pero donde hay halo rojo detras el fondo se aclara y cae a 4,42:1.
     Este da 5,35:1 incluso dentro del halo. Se usa solo donde hace falta;
     el resto del texto rojo de la landing se queda con --c-accent, que ahi
     no tiene nada detras que le quite contraste. */
  --c-accent-text:   #FF4D9A;

  /* Familias */
  --ff-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipografica */
  --fs-display: clamp(2.1rem, 2.6vw + 1rem, 3.4rem);
  --fs-h1:      clamp(1.95rem, 1.9vw + 1rem, 2.8rem);
  --fs-h2:      clamp(1.7rem, 1.4vw + 1rem, 2.3rem);
  --fs-h3:      clamp(1.2rem, 0.6vw + 1rem, 1.45rem);
  --fs-eyebrow: 0.82rem;
  --fs-body:    1.05rem;
  --fs-small:   0.95rem;
  --fs-micro:   0.85rem;

  /* Interlineados */
  --lh-tight:  1.14;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout */
  --w-container: 1180px;
  --w-narrow:    760px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --section-py:  clamp(3.5rem, 5vw, 5.5rem);

  /* Radios */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-rojo: 0 10px 30px rgba(237, 30, 121, 0.28);

  /* Transiciones */
  --t-fast: 150ms cubic-bezier(.2, .7, .3, 1);
  --t-base: 240ms cubic-bezier(.2, .7, .3, 1);
}