/* ============================================================
   Inka Rainbow · sistema de diseño
   ------------------------------------------------------------
   La única fuente de verdad de color, tipografía, espacio y
   rejilla. Ninguna hoja debe escribir un valor literal: si hace
   falta un valor que no está aquí, se añade aquí primero.

   Los valores no se inventaron: se midieron sobre el home y el
   itinerario ya aprobados y se redondearon al escalón más
   cercano. Nada se mueve más de 4 px, y solo en titulares
   grandes donde son medio punto porcentual.

   Tres niveles, según design-token:
     1. global  — el valor crudo            --c-marron-600
     2. alias   — para qué sirve            --accion
     3. componente — uso concreto           --card-gap
   Un componente nunca usa el nivel 1.
   ============================================================ */

:root{

  /* ---------- 1. COLOR · global ----------
     Extraídos del logo real. El marrón es #752F16, no el #c95c3b
     que arrastraba la V.0.1. */
  --c-marron-600:#752F16;
  --c-marron-500:#8F3D1E;
  --c-piedra-900:#0E0A08;
  --c-piedra-800:#1C1512;
  --c-caliza-100:#EDE6DD;
  --c-caliza-200:#DED5CB;
  --c-caliza-300:#D6CCC2;
  --c-caliza-400:#CFC4B9;
  --c-arena-500:#A8998C;
  /* Subido de #6E635B: daba 3.09:1 sobre el fondo y 3.38:1 sobre el pie,
     por debajo del 4.5 que exige WCAG AA. #8E8178 da 4.77 y 5.22, y sigue
     siendo más apagado que --texto-tenue (6.52): la jerarquía se mantiene. */
  --c-arena-700:#8E8178;
  --c-blanco:#fff;
  --c-alerta:#D98466;

  /* ---------- 1b. COLOR · alias ----------
     Lo que un componente nombra. Cambiar la marca es cambiar
     estas siete líneas, no buscar por el sitio entero. */
  --fondo:var(--c-piedra-800);
  --fondo-hondo:var(--c-piedra-900);
  --texto:var(--c-caliza-100);
  --texto-suave:var(--c-caliza-300);   /* cuerpo largo */
  --texto-tenue:var(--c-arena-500);    /* metadatos, pies */
  --texto-apagado:var(--c-arena-700);  /* marcas de agua, placeholders */
  --sobre-foto:var(--c-caliza-200);    /* cuerpo sobre fotografía */

  /* La acción. Von Restorff: es el único acento del sistema y
     solo aparece donde se puede hacer clic. Si el marrón sale
     de decoración, deja de significar "esto se pulsa". */
  --accion:var(--c-marron-600);
  --accion-viva:var(--c-marron-500);
  --accion-texto:var(--c-blanco);

  --linea:rgba(237,230,221,.14);
  --linea-fuerte:rgba(237,230,221,.28);
  --linea-tenue:rgba(237,230,221,.11);
  --velo:rgba(14,10,8,.96);            /* barras y menús con desenfoque */
  --velo-panel:rgba(14,10,8,.97);      /* panel móvil a pantalla completa */
  --velo-barra:rgba(14,10,8,.34);      /* barra sobre el hero */
  --velo-barra-fija:rgba(14,10,8,.88); /* barra ya compactada */
  --error:var(--c-alerta);

  /* ---------- 2. TIPOGRAFÍA ----------
     Manrope 300-600. Ningún peso por encima de 600: es regla de
     marca, no preferencia. */
  --fuente:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --peso-ligero:300;
  --peso-normal:400;
  --peso-medio:500;
  --peso-fuerte:600;

  /* Escala de 19 escalones. Los nueve primeros son de interfaz;
     los fluidos, de titular. */
  --t-11:11px;  --t-12:12px;  --t-13:13px;  --t-14:14px;
  --t-15:15px;  --t-16:16px;  --t-17:17px;  --t-18:18px;
  /* Medio escalón, el único del sistema: la barra se calibró a 14,5 px
     y a 14 los rótulos se estrechan lo bastante para mover el grupo. */
  --t-nav:14.5px;
  --t-20:20px;  --t-22:22px;  --t-26:26px;  --t-30:30px;
  --t-34:34px;

  /* Titulares fluidos: cuatro, no diez. Cada plantilla escoge
     uno en vez de inventar su clamp. */
  --t-d1:clamp(42px,6.4vw,82px);   /* hero de portada */
  --t-d2:clamp(34px,5.2vw,64px);   /* hero interior */
  --t-d3:clamp(28px,4vw,48px);     /* apertura de sección */
  --t-d4:clamp(24px,3vw,34px);     /* título dentro de la lectura */

  --alto-firme:1.02;   /* display */
  --alto-corto:1.15;   /* encabezados */
  --alto-normal:1.5;   /* interfaz */
  --alto-lectura:1.6;  /* cuerpo largo */

  --track-firme:-.035em;  /* display grande */
  --track-corto:-.02em;   /* encabezados */
  --track-cero:0;
  --track-ancho:.12em;    /* versalitas y eyebrows */
  --track-amplio:.16em;

  /* Medidas de línea. 65 caracteres es el techo de lectura. */
  --medida-lectura:65ch;
  --medida-corta:52ch;
  --medida-titular:15ch;

  /* ---------- 3. ESPACIADO ----------
     Base 4. Los escalones nombran intención, no píxeles: así el
     CSS dice por qué existe ese hueco. */
  --e-2:2px;    --e-4:4px;    --e-6:6px;    --e-8:8px;
  --e-12:12px;  --e-16:16px;  --e-20:20px;  --e-24:24px;
  --e-28:28px;  --e-32:32px;  --e-40:40px;  --e-48:48px;
  --e-56:56px;  --e-64:64px;  --e-80:80px;  --e-96:96px;
  --e-120:120px;

  /* Ley de proximidad: lo que separa dentro de un grupo tiene que
     ser claramente menor que lo que separa entre grupos. Estos
     cuatro alias hacen la relación explícita y evitan el error
     de dejar el mismo hueco a ambos lados de un encabezado. */
  --junto:var(--e-8);        /* etiqueta y su campo, icono y su texto */
  --grupo:var(--e-20);       /* entre piezas del mismo bloque */
  --entre-grupos:var(--e-48);/* entre bloques distintos */
  --seccion:var(--e-120);    /* entre secciones de página */

  /* ---------- 4. REJILLA ----------
     Doce columnas en escritorio, cuatro en móvil. */
  --ancho:1240px;            /* contenedor máximo */
  --ancho-lectura:760px;     /* columna de texto largo */
  --columnas:12;
  --canal:24px;              /* gutter */
  --margen:24px;             /* margen de página en escritorio */
  --margen-movil:20px;
  --margen-estrecho:18px;

  /* ---------- 5. BORDE Y ELEVACIÓN ---------- */
  --radio:2px;               /* uno solo: nada de píldoras */
  --radio-circulo:50%;
  --sombra-menu:0 24px 60px rgba(0,0,0,.5);

  /* ---------- 6. MOVIMIENTO ---------- */
  --e:cubic-bezier(0.32,0.72,0,1);
  --dur-corta:.35s;
  --dur-media:.4s;
  --dur-larga:.7s;
  --dur-revelado:.9s;

  /* ---------- 7. CAPAS ----------
     Una escala, para no volver a escribir z-index:9999. */
  --capa-base:1;
  --capa-velo:10;       /* velos y pies dentro del hero */
  --capa-menu:50;       /* barra fija */
  --capa-panel:60;      /* panel móvil, por encima de la barra */
  --capa-grano:70;      /* la textura va sobre todo, sin capturar clics */
}

/* ---------- puntos de ruptura (referencia) ----------
   No se pueden usar variables en @media, así que quedan
   documentados aquí y se escriben a mano igual en todas partes:
     560px  — móvil
     900px  — tablet / apilado
   Cualquier hoja que abra otro breakpoint rompe el sistema.   */