/* ==========================================================================
   Torre de Collserola — tokens
   Traducidos del Figma "Torre V3" (lienzo de referencia: 2000 px de ancho).

   Escala: el diseño está dibujado sobre 2000 px. Cada medida se expresa en vw
   sobre esa base — 400 px de titular son 20vw — con clamp() para que no se
   descontrole ni en móvil ni en pantallas muy grandes. Así la página respira
   igual en cualquier ancho sin necesidad de una media query por cada tamaño.
   ========================================================================== */

:root {
  /* --- Retícula ------------------------------------------------------- */
  /* El diseño usa un margen lateral de 235-246 px sobre 2000 → 11,8 % */
  --gutter: clamp(20px, 11.8vw, 236px);
  --gutter-min: clamp(16px, 3.2vw, 64px);
  --maxw: 2000px;

  /* --- Tipografías ---------------------------------------------------- */
  /* Archivo sustituye a Acumin Variable Concept: mismo par de ejes
     (peso + ancho) y, en wdth 62, un ancho de línea a 1,4 % del original.
     Acumin no es licenciable para web ni cubre el catalán. */
  --font-display: "Archivo Variable", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Inter Variable", system-ui, -apple-system, sans-serif;

  /* Ancho condensado equivalente al "Condensed" de Acumin (wdth 67,5) */
  --display-wdth: 62;
  --display-wdth-extra: 55;   /* para el "ExtraCondensed" de la nav de cumplimiento */

  /* --- Escala tipográfica (px del Figma → vw sobre 2000) --------------- */
  --fs-hero:    clamp(3.25rem, 20vw,   400px);  /* 400 px — portada de la home */
  --fs-h1:      clamp(2.5rem,   9vw,   180px);  /* 180 px — titular de página */
  --fs-h2:      clamp(1.75rem,  3.5vw,  70px);  /*  70 px — titular de sección */
  --fs-h3:      clamp(1.5rem,   4.18vw, 84px);  /*  84 px — títulos de tarjeta */
  --fs-menu:    clamp(2rem,     6.4vw, 128px);  /* 128 px — menú desplegable */
  --fs-marca:   clamp(3rem,    11.1vw, 222px);  /* 222 px — logotipo del pie */
  --fs-figure:  clamp(3rem,    10vw,   200px);  /* 200 px — 288M, 360º, 70KM */
  --fs-caption: clamp(0.8rem,   1.5vw,  30px);  /*  30 px — ALTURA ESTRUCTURAL */
  --fs-antetitulo: clamp(0.8rem, 1.2vw, 24px);  /*  24 px — EL ORIGEN */
  --fs-body:    clamp(1rem,     1.25vw, 25px);  /*  25 px — cuerpo de texto */
  --fs-cta:     clamp(0.9rem,   1.25vw, 25px);  /*  25 px — botones */
  --fs-claim:   clamp(0.8rem,   1.1vw,  22px);  /*  22 px — claim del pie */
  --fs-dato:    clamp(0.8rem,   0.95vw, 19px);  /*  19 px — dirección del pie */
  --fs-legal:   clamp(0.7rem,   0.8vw,  16px);  /*  16 px — línea legal */
  --fs-etiqueta: clamp(0.85rem, 1.1vw,  22px);  /*  22 px — etiquetas de formulario */

  /* --- Interlineado y letra ------------------------------------------- */
  --lh-hero: 0.88;                /* 352/400 en el Figma */
  --lh-display: 0.939;            /* el interlineado que usa todo el diseño */
  --lh-figure: 0.9;
  --lh-body: 1.28;                /* 32/25 */
  --tracking-hero: -0.03em;       /* -12 px sobre 400 */
  --tracking-caption: 0.05em;     /* 1,5 px sobre 30 */
  --tracking-cta: 0.2em;          /* 5 px sobre 25 */
  --tracking-claim: 0.05em;       /* 1,1 px sobre 22 */

  /* --- Pesos ----------------------------------------------------------- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* --- Color ------------------------------------------------------------
     Muestreados del Figma. Se han unificado dos descuidos del archivo:
     el negro de párrafo #1A1A1A (que en otra sección es #000000) y el
     copyright del pie en #FFFFFF (único elemento que no era #F1ECE7).
     Ambos quedan anotados en el informe de erratas.                      */
  --c-ink: #000000;
  --c-paper: #ffffff;
  --c-crema: #f1ece7;             /* fondo alterno y texto sobre negro */
  --c-over: #ffffff;              /* texto sobre fotografía */
  --c-linea: #b3b2b0;             /* filete separador del pie */
  --c-chip: #d9d9d9;              /* fondo de los iconos sociales */
  --c-alerta: #d95117;            /* asterisco de campo obligatorio */
  --c-etiqueta: #262e36;          /* etiquetas de formulario */
  --c-borde-campo: #d8dde3;
  --c-atenuado: rgba(255, 255, 255, 0.33);   /* años inactivos de la cronología */

  /* Tarjetas de vidrio esmerilado de la página de telecomunicaciones */
  --c-vidrio: rgba(128, 128, 128, 0.3);
  --c-vidrio-borde: rgba(255, 255, 255, 0.4);

  /* --- Radios ----------------------------------------------------------- */
  --r-tarjeta: 22px;              /* tarjetas de vidrio */
  --r-foto: 30px;                 /* galerías */
  --r-foto-mirador: 28px;
  --r-foto-historia: 21px;
  --r-chip: 5px;
  --r-campo: 8px;

  /* --- Ritmo vertical --------------------------------------------------- */
  --space-section: clamp(64px, 8vw, 160px);
  --space-block: clamp(24px, 3vw, 60px);

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}