/* Pulso Escénico — design tokens
   Origen: design system "Pulso Escénico" (Claude Design).
   Jost sustituye a la geométrica del logotipo (linaje Futura / Century Gothic).
   Si algún día tenéis la licencia de la original, se cambia aquí y ya está. */

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
/* ---- Brand crimson: muestreado del logo (#880008) ---- */
--crimson-100:#F7DFE0;
--crimson-200:#EDB9BC;
--crimson-300:#DE8A8E;
--crimson-400:#C4454C;
--crimson-500:#A50E18;
--crimson-600:#880008; /* brand primary */
--crimson-700:#6E0009;
--crimson-800:#520008;
--crimson-900:#340105;

/* ---- Stage ink: casi negros con sesgo cálido ---- */
--ink-1000:#08080A;
--ink-900:#0E0E11; /* stage black */
--ink-800:#16161A;
--ink-700:#202024;
--ink-600:#2E2E33;
--ink-500:#44444A;
--ink-400:#6B6B72;
--ink-300:#97979E;
--ink-200:#C2C2C7;
--ink-100:#E2E1DF;

/* ---- Paper: crema cálido, el lado claro de la marca ---- */
--paper-000:#FFFFFF;
--paper-100:#FAF7F2;
--paper-200:#F2EDE4; /* brand cream */
--paper-300:#E7E0D4;
--paper-400:#D6CDBE;

/* ---- Soporte (solo para estados) ---- */
--jade-500:#2F6B4F;
--jade-100:#DEEBE4;
--amber-500:#A8711A;
--amber-100:#F6E9D3;

/* ---- Semántico: superficies ---- */
--surface-stage:var(--ink-900);
--surface-stage-raised:var(--ink-800);
--surface-paper:var(--paper-200);
--surface-card:var(--paper-100);
--surface-card-stage:var(--ink-800);
--surface-inset:var(--paper-300);
--surface-accent:var(--crimson-600);
--surface-accent-soft:var(--crimson-100);
--surface-overlay:rgba(8,8,10,.72);

/* ---- Semántico: texto ---- */
--text-title:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-400);
--text-accent:var(--crimson-600);
--text-on-accent:var(--paper-200);
--text-on-stage:var(--paper-200);
--text-on-stage-muted:var(--ink-300);

/* ---- Semántico: líneas ---- */
--line-hairline:rgba(14,14,17,.14);
--line-strong:var(--ink-900);
--line-accent:var(--crimson-600);
--line-on-stage:rgba(242,237,228,.18);

/* ---- Semántico: estado ---- */
--state-success:var(--jade-500);
--state-warning:var(--amber-500);
--state-danger:var(--crimson-500);
--focus-ring:var(--crimson-500);

/* ---- Familias ---- */
--font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
--font-ui:"Jost",system-ui,sans-serif;
--font-editorial:"Newsreader",Georgia,"Times New Roman",serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

/* ---- Tamaños: display ---- */
--size-display-1:88px;
--size-display-2:64px;
--size-display-3:44px;
--size-title-1:32px;
--size-title-2:24px;
--size-title-3:19px;

/* ---- Tamaños: texto ---- */
--size-body-lg:19px;
--size-body:16px;
--size-body-sm:14px;
--size-caption:13px;
--size-micro:11px;

/* ---- Pesos ---- */
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;

/* ---- Interlineados ---- */
--leading-display:0.94;
--leading-title:1.14;
--leading-body:1.6;
--leading-editorial:1.72;
--leading-tight:1.25;

/* ---- Tracking: la firma de la marca son las mayúsculas anchas ---- */
--tracking-display:0.09em;
--tracking-title:0.045em;
--tracking-label:0.22em;
--tracking-body:0em;
--tracking-mono:0.06em;

/* ---- Roles semánticos ---- */
--type-poster:var(--weight-light) var(--size-display-1)/var(--leading-display) var(--font-display);
--type-headline:var(--weight-light) var(--size-display-3)/var(--leading-title) var(--font-display);
--type-section:var(--weight-medium) var(--size-title-2)/var(--leading-title) var(--font-display);
--type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-ui);
--type-editorial:var(--weight-light) var(--size-body-lg)/var(--leading-editorial) var(--font-editorial);
--type-label:var(--weight-medium) var(--size-micro)/1.2 var(--font-ui);
--type-meta:var(--weight-regular) var(--size-caption)/1.4 var(--font-mono);

/* ---- Espaciado: base 4px, pero la marca respira ---- */
--space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
--space-9:96px; --space-10:128px; --space-11:176px;

--gap-inline:var(--space-3);
--gap-stack:var(--space-4);
--gap-group:var(--space-6);
--pad-card:var(--space-6);
--pad-control-y:12px;
--pad-control-x:20px;
--section-y:var(--space-9);
--page-gutter:var(--space-6);
--page-gutter-lg:var(--space-8);
--measure-text:64ch;
--measure-editorial:38em;
--container-max:1240px;
--container-narrow:760px;

/* ---- Radios: la marca es de terminales cuadrados ---- */
--radius-none:0px;
--radius-xs:2px;
--radius-sm:3px;
--radius-md:6px;
--radius-pill:999px;
--radius-circle:50%;

--stroke-hairline:1px;
--stroke-rule:2px;
--stroke-heavy:4px;

/* ---- Elevación: la profundidad viene de las líneas, no de las sombras ---- */
--shadow-none:none;
--shadow-lift:0 1px 0 rgba(14,14,17,.06),0 2px 6px rgba(14,14,17,.06);
--shadow-menu:0 10px 28px rgba(8,8,10,.16);
--shadow-dialog:0 24px 70px rgba(8,8,10,.32);
--shadow-stage:0 0 0 1px rgba(242,237,228,.10) inset;

--border-hairline:var(--stroke-hairline) solid var(--line-hairline);
--border-strong:var(--stroke-rule) solid var(--line-strong);
--border-accent:var(--stroke-rule) solid var(--line-accent);
--border-on-stage:var(--stroke-hairline) solid var(--line-on-stage);

--focus-outline:2px solid var(--focus-ring);
--focus-offset:2px;

--scrim-bottom:linear-gradient(to top,rgba(8,8,10,.86) 0%,rgba(8,8,10,.45) 45%,rgba(8,8,10,0) 100%);
--scrim-flat:rgba(8,8,10,.55);

/* ---- Motion: las cosas entran como una luz de escena ---- */
--dur-instant:90ms;
--dur-fast:160ms;
--dur-base:240ms;
--dur-slow:420ms;
--dur-curtain:720ms;

--ease-standard:cubic-bezier(.2,0,.2,1);
--ease-out:cubic-bezier(.16,.84,.44,1);
--ease-in:cubic-bezier(.5,0,1,1);
--ease-curtain:cubic-bezier(.22,.61,.24,1);

--transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
--transition-media:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out);
--hover-media-scale:1.03;
--press-scale:0.985;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-title);font-family:var(--font-display);font-weight:var(--weight-light);letter-spacing:var(--tracking-title);line-height:var(--leading-title)}
p{margin:0}
:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
img{display:block;max-width:100%}
::selection{background:var(--crimson-600);color:var(--paper-200)}

.pe-eyebrow{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}