/* EL TODO VERDADERO — compiled stylesheet. Generated from tokens/. */

/* El Todo Verdadero — webfonts. Cormorant Garamond + Inter, self-hosted from Google Fonts (latin + latin-ext). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(assets/fonts/inter-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(assets/fonts/inter-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(assets/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* El Todo Verdadero — color. Sampled from the EFIARTES executive dossier (scene renders, stills, icons, solid fills). */
:root{
  /* ——— Neutrals: warm blacks of the house, dust and bone ——— */
  --negro-sala:#0A0908;      /* the darkened room. Primary background everywhere. */
  --negro-humo:#141210;
  --gris-humo:#221E1A;
  --gris-ceniza:#3A342C;
  --gris-niebla:#6B6157;
  --hueso-polvo:#A79C8C;
  --hueso:#C9BFB0;
  --hueso-claro:#E9E2D6;     /* costume linen. Primary text on dark. */
  --lino:#F6F2EA;            /* paper. Light-mode background. */
  --blanco:#FFFFFF;

  /* ——— Warm light: the hanging bulbs ——— */
  --ambar-halo:#F6DEA9;
  --ambar-foco:#E8AF56;      /* the signature accent. Filament amber. */
  --ambar-brasa:#C98A34;
  --bronce:#8A5F26;

  /* ——— Earth: olive block + tan iconography of the dossier ——— */
  --oliva-profundo:#3B3210;
  --oliva:#5C5020;
  --barro:#927654;           /* exact fill of the dossier's icon set */
  --barro-claro:#B29578;

  /* ——— Cool counterpoint: cámara en vivo, slate portrait ground ——— */
  --azul-humo:#58697A;
  --azul-noche:#2A3238;

  /* ——— Semantic: surfaces ——— */
  --surface-sala:var(--negro-sala);
  --surface-raised:var(--negro-humo);
  --surface-card:var(--gris-humo);
  --surface-inset:#0F0D0B;
  --surface-paper:var(--lino);
  --surface-paper-card:var(--blanco);
  --surface-oliva:var(--oliva-profundo);

  /* ——— Semantic: text ——— */
  --text-display:var(--hueso-claro);
  --text-body:var(--hueso);
  --text-muted:var(--hueso-polvo);
  --text-faint:var(--gris-niebla);
  --text-accent:var(--ambar-foco);
  --text-on-paper:#1A1713;
  --text-on-paper-muted:#5B5245;
  --text-on-amber:#221703;

  /* ——— Semantic: lines & accents ——— */
  --line-hairline:rgba(233,226,214,0.14);
  --line-strong:rgba(233,226,214,0.30);
  --line-amber:rgba(232,175,86,0.55);
  --line-on-paper:rgba(26,23,19,0.14);
  --accent:var(--ambar-foco);
  --accent-quiet:var(--barro);
  --focus-ring:var(--ambar-foco);
}

/* El Todo Verdadero — type. Cormorant Garamond (display / voice) + Inter (apparatus / data). */
:root{
  --font-display:"Cormorant Garamond",'Times New Roman',serif;
  --font-sans:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --font-body:var(--font-sans);
  --font-label:var(--font-sans);

  /* weights actually used in the dossier */
  --w-light:300; /* @kind font */
  --w-regular:400; /* @kind font */
  --w-medium:500; /* @kind font */
  --w-semibold:600; /* @kind font */
  --w-bold:700; /* @kind font */

  /* scale — editorial / web */
  --t-hero:clamp(3.5rem,9vw,9.5rem); /* @kind font */
  --t-display-1:4.5rem; /* @kind font */
  --t-display-2:3.25rem; /* @kind font */
  --t-display-3:2.5rem; /* @kind font */
  --t-title:1.875rem; /* @kind font */
  --t-subtitle:1.375rem; /* @kind font */
  --t-lead:1.1875rem; /* @kind font */
  --t-body:1rem; /* @kind font */
  --t-small:0.875rem; /* @kind font */
  --t-caption:0.75rem; /* @kind font */
  --t-label:0.6875rem;

  /* scale — 1280x720 slide stage */
  --slide-t-hero:104px; /* @kind font */
  --slide-t-title:56px; /* @kind font */
  --slide-t-subtitle:32px; /* @kind font */
  --slide-t-body:20px; /* @kind font */
  --slide-t-caption:15px; /* @kind font */
  --slide-t-label:12px;

  /* line heights */
  --lh-display:0.94; /* @kind font */
  --lh-title:1.1; /* @kind font */
  --lh-lead:1.45; /* @kind font */
  --lh-body:1.62; /* @kind font */
  --lh-tight:1.25; /* @kind font */

  /* tracking — the wide-tracked uppercase label is a brand signature */
  --tr-display:-0.02em; /* @kind font */
  --tr-title:-0.01em; /* @kind font */
  --tr-body:0em; /* @kind font */
  --tr-label:0.22em; /* @kind font */
  --tr-label-wide:0.42em; /* @kind font */
}

/* El Todo Verdadero — spacing & layout. 4px base, generous vertical air (the dossier breathes). */
:root{
  --s-0:0; /* @kind spacing */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;
  --s-10:128px;
  --s-11:192px;

  --gutter:24px;
  --page-pad-x:clamp(20px,6vw,96px);
  --section-y:clamp(64px,10vw,160px); /* @kind spacing */
  --measure:64ch; /* @kind spacing */
  --measure-narrow:46ch; /* @kind spacing */
  --max-content:1240px; /* @kind spacing */
  --max-prose:720px; /* @kind spacing */

  --slide-w:1280px;
  --slide-h:720px;
  --slide-pad:72px;
}

/* El Todo Verdadero — borders, radii, shadow, haze. Nothing is glossy; everything is either hairline or atmospheric. */
:root{
  --r-none:0; /* @kind radius */
  --r-xs:2px;
  --r-sm:4px;
  --r-md:8px;
  --r-pill:999px;
  --r-circle:50%;

  --bw-hair:1px; /* @kind other */
  --bw-rule:2px; /* @kind other */

  --border-hairline:1px solid var(--line-hairline); /* @kind other */
  --border-strong:1px solid var(--line-strong); /* @kind other */
  --border-amber:1px solid var(--line-amber); /* @kind other */
  --border-paper:1px solid var(--line-on-paper);

  /* light, not lift: shadows read as glow or as depth of room */
  --shadow-none:none;
  --shadow-sink:0 1px 0 rgba(0,0,0,0.5);
  --shadow-room:0 24px 64px -24px rgba(0,0,0,0.85);
  --shadow-figure:0 40px 120px -40px rgba(0,0,0,0.95);
  --glow-foco:0 0 0 1px rgba(232,175,86,0.35),0 0 32px -6px rgba(232,175,86,0.45); /* @kind shadow */
  --glow-foco-soft:0 0 48px -8px rgba(232,175,86,0.28); /* @kind shadow */
  --inset-vignette:inset 0 0 120px 40px rgba(0,0,0,0.75);

  /* protection gradients — lifted from the dossier's own overlay asset */
  --veil-bottom:linear-gradient(to top,rgba(10,9,8,0.96) 0%,rgba(10,9,8,0.78) 28%,rgba(10,9,8,0) 78%); /* @kind other */
  --veil-top:linear-gradient(to bottom,rgba(10,9,8,0.92) 0%,rgba(10,9,8,0) 60%); /* @kind other */
  --veil-left:linear-gradient(to right,rgba(10,9,8,0.94) 0%,rgba(10,9,8,0) 65%); /* @kind other */
  --haze-amber:radial-gradient(60% 50% at 50% 8%,rgba(232,175,86,0.22) 0%,rgba(232,175,86,0) 70%); /* @kind other */

  --blur-glass:blur(14px) saturate(0.9); /* @kind other */
  --img-treatment:grayscale(0.1) contrast(1.06) brightness(0.92) sepia(0.08); /* @kind other */
}

/* El Todo Verdadero — motion. Slow fades and long reveals; nothing bounces. Lights come up, they don't pop. */
:root{
  --d-instant:90ms; /* @kind other */
  --d-fast:180ms; /* @kind other */
  --d-base:280ms; /* @kind other */
  --d-slow:600ms; /* @kind other */
  --d-fade-up:1200ms; /* @kind other */   /* stage-light fade, used for reveals */

  --e-out:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --e-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --e-stage:cubic-bezier(0.16,1,0.3,1); /* @kind other */  /* long, decelerating — the house light rising */
  --e-linear:linear; /* @kind other */

  --t-hover:color var(--d-fast) var(--e-out),background-color var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),opacity var(--d-fast) var(--e-out); /* @kind other */
}

/* El Todo Verdadero — minimal element defaults. Consumers get sensible dark-room typography for free. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-sala);color:var(--text-body);font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--w-light);color:var(--text-display);line-height:var(--lh-title);letter-spacing:var(--tr-title);margin:0}
h1{font-size:var(--t-display-1);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
h2{font-size:var(--t-display-3)}
h3{font-size:var(--t-title)}
h4{font-size:var(--t-subtitle)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--text-display);text-decoration:none;border-bottom:1px solid var(--line-amber);transition:var(--t-hover)}
a:hover{color:var(--ambar-foco);border-bottom-color:var(--ambar-foco)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
img{max-width:100%;display:block}
::selection{background:var(--ambar-foco);color:var(--text-on-amber)}