/* ============================================================
   SISTEMA DE DISENO NXT RESERVE — TOKENS
   Version 2 · S-14 · 16/08/2026
   Normativo (D-62). Fuente: SISTEMA_DISENO_NXT_v1.

   ESTE ARCHIVO ES LA VERDAD.
   Si este archivo y un documento no coinciden, manda este archivo.
   Si un valor no esta aqui, no existe: se agrega aqui primero.

   S-14: se agregan --realce-claro, --realce-tinta, --superficie-panel y
   --superficie-tarjeta-realzada, verificados contra el sistema generado
   en Claude Design y aprobados por Ali (MKT-37).

   Publicado en https://nxtreserve.com/sistema/tokens.css
   ============================================================ */

:root {

  /* --- SUPERFICIE ---------------------------------------------
     La pagina es crema y la tarjeta es blanca. La tarjeta se
     separa POR DIFERENCIA DE SUPERFICIE, no por borde ni sombra. */
  --superficie-pagina:   #FBFAF7;  /* fondo de toda pagina */
  --superficie-tarjeta:  #FFFFFF;  /* tarjetas, paneles, campos */
  --superficie-honda:    #14110F;  /* bandas oscuras, pie, cintas */
  --superficie-hundida:  #F2EEE7;  /* barras de progreso, celdas alternas */
  --superficie-panel:    #F5F5F5;  /* fondo de bloques y paneles neutros, S-14 */
  --superficie-tarjeta-realzada: #FFFDF6;  /* inicio del degradado de la tarjeta principal/destacada, S-14 */

  /* --- COLOR, POR TRABAJO Y NO POR GUSTO -----------------------
     Cada color tiene UN solo trabajo. Si es rojo, se toca. */
  --accion:       #C8001E;  /* SOLO lo que se puede tocar: botones, enlaces, foco */
  --accion-honda: #9E0018;  /* el mismo rojo presionado o en hover */
  --realce:       #C9A84C;  /* distincion. SOLO sobre --superficie-honda */
  --realce-claro: #E2C47A;  /* segundo punto del degradado dorado de las cintas, S-14 */
  --realce-tinta: #8F7422;  /* dorado legible sobre crema: solo texto de acento, S-14 */
  --tinta:        #14110F;  /* titulares, la cifra del ahorro, texto principal */
  --tinta-suave:  #55504B;  /* parrafos secundarios */
  --tinta-tenue:  #8A837C;  /* etiquetas, metadatos, legal. Solo 18px o mas */
  --linea:        #E8E4DD;  /* separadores y el unico borde permitido */

  /* --- VALOR Y CONTEXTO, S-17 -----------------------------------
     Los dos unicos colores del sistema que no vienen de la marca.
     Entran para el catalogo: la paleta de crema, blanco y tinta
     comunica bien pero deja la cuadricula sin jerarquia cromatica.
     Cada uno tiene UN trabajo, igual que los demas. */
  --valor:    #C1186F;  /* fucsia. La cifra que lidera y la insignia (-X%, 2x1).
                           SOLO a 24px o mas como texto; por debajo, solo como
                           relleno con --superficie-pagina encima. Esta a 22 grados del
                           rojo de accion, asi que en texto chico se confunde con
                           un enlace. */
  --contexto: #0E6E78;  /* turquesa. Categoria y zona. SOLO como relleno, con
                           --superficie-pagina encima. Nunca como texto: no es
                           tocable y no debe parecerlo. */

  /* --- ESTADO -------------------------------------------------- */
  --exito: #1E7A4B;  /* cupon validado, formulario enviado */
  --aviso: #B4741A;  /* vence pronto, QUEDAN POCOS CUPOS */
  --error: #A3161C;  /* error de formulario. Rojo distinto del de accion
                        A PROPOSITO, para que un error no parezca un boton */

  /* --- TIPOGRAFIA ---------------------------------------------- */
  --fuente-display: 'Bebas Neue', Impact, sans-serif;      /* titulares, nunca bajo 24px */
  --fuente-texto:   'DM Sans', -apple-system, system-ui, sans-serif;
  --fuente-acento:  'Cormorant Garamond', Georgia, serif;  /* max 1 uso por pantalla */

  /* --- ANCHOS: TRES, NO CATORCE -------------------------------- */
  --ancho-texto:     680px;   /* prosa, legales */
  --ancho-contenido: 1080px;  /* secciones, formularios, cuadriculas */
  --ancho-amplio:    1360px;  /* catalogo, galerias, bandas */

  /* --- ESPACIADO: ESCALA DE 4, SIN INTERMEDIOS ----------------- */
  --e1:  4px;   --e2:  8px;   --e3: 12px;  --e4: 16px;  --e5:  24px;
  --e6: 32px;   --e7: 48px;   --e8: 64px;  --e9: 96px;  --e10: 128px;

  /* --- RADIOS, CONCENTRICOS ------------------------------------
     radio interior = radio exterior - padding
     Nada de pildoras (999px): ese es el lenguaje de los cupones. */
  --radio-s:     6px;   /* chips, etiquetas, campos */
  --radio-boton: 8px;   /* TODOS los botones */
  --radio-m:    12px;   /* fotos dentro de una tarjeta */
  --radio-l:    18px;   /* tarjetas y contenedores */

  /* --- SOMBRA: UNA SOLA, Y CASI NUNCA --------------------------
     Exclusiva de lo que de verdad flota: menu, modal, barra fija.
     LAS TARJETAS NO LLEVAN SOMBRA. */
  --sombra-flotante: 0 1px 2px rgba(20,17,15,.04), 0 8px 24px rgba(20,17,15,.06);

  /* --- MOVIMIENTO ---------------------------------------------- */
  --mov-micro:   120ms;  /* boton, foco, cambio de color */
  --mov-entrada: 200ms;  /* aparicion de un elemento */
  --mov-foto:    400ms;  /* escalado de una fotografia */
  --curva: cubic-bezier(.2,.7,.3,1);  /* una sola curva para todo el sistema */
}

/* --- LA ANIMACION FIRMA: "EL REVELADO" -------------------------
   Escalonada 60ms entre hermanos, con tope de 6 elementos.
   A partir del septimo entran todos juntos. Un club no rebota. */
@keyframes revelado {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- OBLIGATORIO EN TODA HOJA DE ESTILO ------------------------
   Prohibicion #8 del sistema. No es estetica: hay gente a la que
   el movimiento le produce mareo y el navegador ya nos dice quien. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- LA FAMILIA DE ICONOS -------------------------------------
   Caja 24x24 · trazo 1.5 · currentColor · fill none · remates redondos
   Tamanos: 16 (en linea) · 20 (botones) · 24 (defecto) · 32 (categorias)
   UN ICONO NUNCA TRAE COLOR PROPIO. */
.ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-16 { width: 16px; height: 16px; }
.ico-20 { width: 20px; height: 20px; }
.ico-32 { width: 32px; height: 32px; }