/* ============================================================
   Nostra FC — tokens de diseño
   Único lugar donde viven colores, tipografía y espaciados.
   Ningún componente define un valor propio: todo sale de acá.
   ============================================================

   REGLAS DE USO — importan más que los valores

   1. El acento es acento. El rosa no debería superar el 5% de
      la superficie visible de una pantalla. La maqueta anterior
      lo usaba en la grilla de fondo, los bordes, los números,
      las etiquetas y los botones a la vez: eso es exactamente
      lo que la hacía ver menos refinada. Contención es el
      principal recurso para que esto lea como premium.

   2. Una sola cosa grita por pantalla. Si hay dos elementos
      compitiendo por ser lo primero que se ve, no hay jerarquía.

   3. La jerarquía se construye con tamaño, peso y espacio —
      no con color. El color se reserva para señalar acción.

   4. Los bordes son casi invisibles. --linea, no rosa. Un borde
      de color alrededor de cada tarjeta satura la pantalla.

   5. Nada de sombras de color. Sombras neutras y sutiles, o
      ninguna. El resalte se logra con un fondo un escalón más
      claro, no con glow.

   6. Animación breve y solo de opacidad y transform. Nada que
      dure más de 400ms ni que mueva el layout.

   7. La serif es solo para display. Cormorant nunca por debajo
      de 28px: a tamaños chicos pierde peso y se vuelve ilegible
      sobre fondo oscuro.
   ============================================================ */

:root {

  /* ---- Neutros ----------------------------------------------
     Un tema oscuro necesita superficies en capas, no un solo
     negro. Cada escalón separa un nivel de profundidad. */

  --negro-900: #0A0A0B;   /* lo más profundo: hero, franjas full */
  --negro-800: #0F0F10;   /* fondo base del sitio */
  --negro-700: #161618;   /* superficie: tarjetas, secciones alternas */
  --negro-600: #1F1F22;   /* superficie elevada: hover, destacados */

  --linea:        rgba(255, 255, 255, 0.08);
  --linea-fuerte: rgba(255, 255, 255, 0.14);

  /* ---- Texto ------------------------------------------------ */

  --texto:   #FAFAF8;                      /* títulos y texto principal */
  --texto-2: rgba(250, 250, 248, 0.72);    /* cuerpo */
  --texto-3: rgba(250, 250, 248, 0.48);    /* metadatos, pies */

  /* ---- Marca ------------------------------------------------ */

  --rosa:        #E8729A;   /* el color del club, sin tocar */
  --rosa-claro:  #F5B8CD;   /* hover sobre fondo oscuro */
  --rosa-oscuro: #B85175;   /* fondos amplios, estados presionados */
  --rosa-tenue:  rgba(232, 114, 154, 0.12);

  /* ---- Estados ---------------------------------------------- */

  --exito:  #4ADE80;
  --alerta: #FBBF24;
  --error:  #F87171;

  /* ---- Tipografía ------------------------------------------- */

  --fuente-display: 'Cormorant Garamond', Georgia, serif;
  --fuente:         'Barlow', system-ui, -apple-system, sans-serif;
  --fuente-densa:   'Barlow Condensed', 'Barlow', sans-serif;

  /* Escala modular, razón 1.25. Fluida donde importa. */
  --t-display: clamp(3rem, 7vw, 5.5rem);      /* 48 → 88 */
  --t-1:       clamp(2.25rem, 4vw, 3.5rem);   /* 36 → 56 */
  --t-2:       clamp(1.75rem, 3vw, 2.5rem);   /* 28 → 40 */
  --t-3:       1.5rem;                        /* 24 */
  --t-4:       1.25rem;                       /* 20 */
  --t-cuerpo:  1.0625rem;                     /* 17 */
  --t-chico:   0.9375rem;                     /* 15 */
  --t-micro:   0.75rem;                       /* 12 — etiquetas en mayúsculas */

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-fuerte:  700;
  --peso-negro:   900;   /* solo Barlow Condensed */

  --alto-apretado: 1.05;  /* display */
  --alto-titulo:   1.15;
  --alto-cuerpo:   1.65;

  --track-display: -0.03em;   /* los tamaños grandes necesitan cerrarse */
  --track-titulo:  -0.015em;
  --track-normal:  0;
  --track-abierto: 0.18em;    /* solo para --t-micro en mayúsculas */

  /* ---- Espaciado --------------------------------------------
     Base 4px. Si un valor no está en la escala, no se usa. */

  --e-1:  0.25rem;   /*   4 */
  --e-2:  0.5rem;    /*   8 */
  --e-3:  0.75rem;   /*  12 */
  --e-4:  1rem;      /*  16 */
  --e-5:  1.25rem;   /*  20 */
  --e-6:  1.5rem;    /*  24 */
  --e-8:  2rem;      /*  32 */
  --e-10: 2.5rem;    /*  40 */
  --e-12: 3rem;      /*  48 */
  --e-16: 4rem;      /*  64 */
  --e-20: 5rem;      /*  80 */
  --e-24: 6rem;      /*  96 */
  --e-32: 8rem;      /* 128 */

  /* ---- Ritmo y medidas -------------------------------------- */

  --seccion:      clamp(4rem, 10vw, 8rem);   /* padding vertical de sección */
  --gutter:       clamp(1.25rem, 5vw, 4rem); /* margen lateral */
  --ancho-max:    1280px;
  --ancho-texto:  68ch;                       /* medida de lectura cómoda */

  /* ---- Bordes ----------------------------------------------- */

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-full: 999px;

  /* ---- Sombras — neutras, nunca de color -------------------- */

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  --sombra-3: 0 12px 40px rgba(0, 0, 0, 0.6);

  /* ---- Movimiento ------------------------------------------- */

  --trans:       200ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lento: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Capas ------------------------------------------------- */

  --z-base:    1;
  --z-sticky:  50;
  --z-nav:     100;
  --z-panel:   200;
  --z-modal:   300;
}

/* Respeta a quien pidió menos movimiento. No es opcional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}