/* =========================================================================
   CREHAZ · Design Tokens — colors + type
   Estudio y Taller Creativo · Los Santos de Maimona (Badajoz)
   "CONSTRUIR · JUGAR · ACTUAR"
   ========================================================================= */

/* ---------- Fonts ---------- */

/* LamaSans — core UI/body family.
   We load a curated subset; import more weights if you need them. */
@font-face { font-family: "Lama Sans"; font-style: normal; font-weight: 400;
  src: url("../fonts/LamaSans-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: italic; font-weight: 400;
  src: url("../fonts/LamaSans-RegularItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: normal; font-weight: 500;
  src: url("../fonts/LamaSans-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: normal; font-weight: 600;
  src: url("../fonts/LamaSans-SemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: normal; font-weight: 700;
  src: url("../fonts/LamaSans-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: normal; font-weight: 800;
  src: url("../fonts/LamaSans-ExtraBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: normal; font-weight: 900;
  src: url("../fonts/LamaSans-Black.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans"; font-style: italic; font-weight: 900;
  src: url("../fonts/LamaSans-BlackItalic.otf") format("opentype"); font-display: swap; }

/* Condensed + Expanded variants — for display headlines with attitude */
@font-face { font-family: "Lama Sans Condensed"; font-style: normal; font-weight: 800;
  src: url("../fonts/LamaSans-ExtraBoldCondensed.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans Condensed"; font-style: normal; font-weight: 900;
  src: url("../fonts/LamaSans-BlackCondensed.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans Expanded"; font-style: normal; font-weight: 800;
  src: url("../fonts/LamaSans-ExtraBoldExpanded.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Sans Expanded"; font-style: normal; font-weight: 900;
  src: url("../fonts/LamaSans-BlackExpanded.otf") format("opentype"); font-display: swap; }

/* LamaRounded — softer alt for hand-made, craft contexts */
@font-face { font-family: "Lama Rounded"; font-style: normal; font-weight: 400;
  src: url("../fonts/LamaRounded-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Rounded"; font-style: normal; font-weight: 500;
  src: url("../fonts/LamaRounded-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Rounded"; font-style: normal; font-weight: 700;
  src: url("../fonts/LamaRounded-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Lama Rounded"; font-style: normal; font-weight: 900;
  src: url("../fonts/LamaRounded-Black.otf") format("opentype"); font-display: swap; }

/* Ragtag — expressive display for posters/hero moments */
@font-face { font-family: "Ragtag"; font-style: normal; font-weight: 400;
  src: url("../fonts/Ragtag-Display.otf") format("opentype"); font-display: swap; }


:root {
  /* =======================================================================
     COLOR SYSTEM
     -------------------------------------------------------------------
     CREHAZ's palette has two voices:

     1. CORE (monochrome + signature yellow) — the everyday voice.
        Black ink on a warm near-white, with CREHAZ yellow as the
        single accent. This is the business-card voice, the workshop
        wall, the quiet one.

     2. CMYK BAR (multi-color) — the loud voice.
        A TV-test-pattern of hot colors (magenta, cyan, orange, yellow,
        cream, black, grey). Appears as swatch-strips at the foot of
        posters, as pattern-fill INSIDE the wordmark letters, and as
        vertical rainbow-gradient backgrounds behind the "C" mark.

     Use (1) for dense reading surfaces. Use (2) to celebrate,
     launch, or signal energy. Never mix more than 2 CMYK-bar hues
     in a single composition outside of posters.
     ======================================================================= */

  /* ---- Core neutrals ---- */
  --ch-ink:        #0E1022;  /* Near-black navy — logo & body text */
  --ch-ink-soft:   #1B1E33;
  --ch-ink-70:     rgba(14, 16, 34, 0.70);
  --ch-ink-50:     rgba(14, 16, 34, 0.50);
  --ch-ink-20:     rgba(14, 16, 34, 0.18);
  --ch-ink-10:     rgba(14, 16, 34, 0.10);

  --ch-paper:      #FFFDF0;  /* Warm near-white — workshop paper */
  --ch-paper-2:    #E2E5EC;  /* Cool paper 2 / elevated surface */
  --ch-cream:      #CDD4DD;  /* Cool stone grey */
  --ch-bone:       #72767A;  /* Warm stone / neutral text */

  /* ---- Signature accent ---- */
  --ch-yellow:     #FAEC51;  /* THE CREHAZ yellow — hero accent */
  --ch-yellow-hi:  #FFF37A;
  --ch-yellow-lo:  #E8D224;

  /* ---- Wood tones (11 especies — muestreadas de fotos reales) ---- */
  --ch-wood-haya:     #D9B698;  /* haya natural · hardwood claro */
  --ch-wood-pino:     #DDC5AD;  /* pino · softwood pálido */
  --ch-wood-fresno:   #BA9862;  /* fresno americano · veta dorada */
  --ch-wood-olivo:    #C9A35C;  /* olivo · tono cálido con veta oscura */
  --ch-wood-roble:    #A56D43;  /* roble · rojizo medio */
  --ch-wood-iroko:    #8E5E2C;  /* iroko · marrón dorado tropical */
  --ch-wood-encina:   #99692E;  /* encina antigua · ocre profundo */
  --ch-wood-secuoya:  #A24B2E;  /* secuoya · rojizo intenso */
  --ch-wood-cerezo:   #7F451A;  /* cerezo · rojizo oscuro */
  --ch-wood-teca:     #6A4531;  /* teca · marrón tostado */
  --ch-wood-nogal:    #4B3426;  /* nogal · muy oscuro, casi ébano */
  /* Legacy aliases */
  /* Legacy aliases */
  --ch-wood-light: var(--ch-wood-pino);
  --ch-wood:       var(--ch-wood-roble);
  --ch-wood-dark:  var(--ch-wood-nogal);

  /* ---- CMYK bar (poster palette — official brand hexes) ---- */
  --ch-magenta:    #E7207B;
  --ch-cyan:       #31BAD2;
  --ch-orange:     #EA5E11;
  --ch-cmyk-yellow:#FAEC51;
  --ch-grey:       #72767A;
  --ch-grey-lt:    #CDD4DD;
  --ch-grey-xlt:   #E2E5EC;
  --ch-bar-black:  #0E1022;
  --ch-bar-white:  #FFFDF0;

  /* ---- Functional / semantic ---- */
  --ch-success:    #3EA05A;
  --ch-warn:       #E8A11C;
  --ch-danger:     #D13B3B;
  --ch-info:       #4BC6E3;  /* reuses cyan */

  /* ---- Foreground / background semantic ---- */
  --fg1: var(--ch-ink);            /* Primary text */
  --fg2: var(--ch-ink-70);         /* Secondary text */
  --fg3: var(--ch-ink-50);         /* Tertiary / captions */
  --fg-on-dark:    var(--ch-paper);
  --fg-on-yellow:  var(--ch-ink);

  --bg1: var(--ch-paper);          /* Primary page */
  --bg2: var(--ch-paper-2);        /* Subtle elevated surface */
  --bg3: var(--ch-cream);          /* Deeper surface */
  --bg-dark:   var(--ch-ink);      /* Inverse surface */
  --bg-accent: var(--ch-yellow);   /* Yellow splash */

  --border-1:  var(--ch-ink-20);
  --border-2:  var(--ch-ink-10);
  --border-strong: var(--ch-ink); /* CREHAZ loves a heavy 2-3px ink rule */

  /* ---- Signature gradient (vertical CMYK rainbow) ---- */
  --ch-gradient-cmyk:
    linear-gradient(180deg,
      #6BB8C9 0%,
      #4BC6E3 12%,
      #E8247A 35%,
      #F2B21A 58%,
      #E85A1C 80%,
      #4A1B16 100%);

  --ch-gradient-cmyk-h:
    linear-gradient(90deg,
      #4BC6E3 0%,
      #E8247A 28%,
      #F5CF1A 55%,
      #E85A1C 78%,
      #2B1E22 100%);

  --ch-gradient-dark:
    linear-gradient(180deg, #0E0F1B 0%, #2A1C26 100%);

  /* ---- Amanecer (Paper · Yellow · Orange · Magenta · Cyan) ---- */
  --ch-gradient-amanecer:
    linear-gradient(180deg,
      #FFFDF0 0%,
      #FAEC51 28%,
      #EA5E11 55%,
      #E7207B 78%,
      #31BAD2 100%);

  /* ---- Foguera (Ink · Magenta · Orange · Yellow) — brasas ardiendo ---- */
  --ch-gradient-foguera:
    linear-gradient(180deg,
      #0E1022 0%,
      #4A1530 18%,
      #E7207B 42%,
      #EA5E11 70%,
      #FAEC51 100%);

  /* =======================================================================
     TYPE SCALE
     -----------------------------------------------------------------------
     Lama Sans is the workhorse — use 400/500 for body, 700/900 for titles.
     Lama Sans Condensed Black is the poster voice: tall, industrial,
     stencil-adjacent. Lama Sans Expanded Black is the marquee voice.
     Ragtag is a wildcard display face for editorial moments only.

     Tracking: body is relaxed (0). Headlines are TIGHT (-0.02em → -0.04em).
     Small caps labels ride on wide tracking (+0.14em) — the brand uses them
     heavily for subtitles like "CONSTRUIR · JUGAR · ACTUAR".
     ======================================================================= */

  --font-sans:       "Lama Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-condensed:  "Lama Sans Condensed", "Lama Sans", "Barlow Condensed", sans-serif;
  --font-expanded:   "Lama Sans Expanded", "Lama Sans", sans-serif;
  --font-rounded:    "Lama Rounded", "Lama Sans", sans-serif;
  --font-display:    "Ragtag", "Lama Sans", serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — major-third-ish, works at 1440–1920 slide and at 1280 web */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   88px;
  --fs-6xl:   128px;

  /* Line heights */
  --lh-tight:  1.02;
  --lh-snug:   1.14;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Tracking */
  --ls-tight-xl: -0.035em;
  --ls-tight:   -0.015em;
  --ls-normal:   0em;
  --ls-wide:     0.08em;
  --ls-caps:     0.16em;   /* SMALL CAPS LABELS */

  /* =======================================================================
     SPACING / RADIUS / SHADOW / BORDER
     ======================================================================= */

  --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;

  /* Radii — CREHAZ stays low on roundness. Cards = crisp or lightly rounded.
     Pills only for chips/tags; logo is the only fully-circular element. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* Borders — brand favors 2px ink rules */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* Shadow — CREHAZ is print-first; prefer hard "shift" shadows over soft blurs.
     Hard shadow = a 4–6px offset solid ink block (like a screen-print registration).
     Soft shadow exists for web contexts that need it. */
  --shadow-hard-sm: 3px 3px 0 0 var(--ch-ink);
  --shadow-hard:    6px 6px 0 0 var(--ch-ink);
  --shadow-hard-lg: 10px 10px 0 0 var(--ch-ink);
  --shadow-hard-yellow: 6px 6px 0 0 var(--ch-yellow);

  --shadow-soft-sm: 0 2px 6px rgba(16, 18, 31, 0.08);
  --shadow-soft:    0 6px 18px rgba(16, 18, 31, 0.12);
  --shadow-soft-lg: 0 16px 40px rgba(16, 18, 31, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   400ms;

  /* Layout */
  --container:   1200px;
  --container-narrow: 860px;
  --nav-h: 72px;
}


/* =========================================================================
   Semantic type classes — drop-in helpers.
   Every display-size uses Condensed Black, the hallmark CREHAZ voice.
   ========================================================================= */

body, .ch-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / poster scale — CONDENSED BLACK, tracked tight, SHOUTY */
.ch-display, h1.ch-h1 {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: clamp(56px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight-xl);
  text-transform: uppercase;
  color: var(--fg1);
  text-wrap: balance;
}

/* H1 — page titles */
.ch-h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* H2 — section */
.ch-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* H3 — subsection */
.ch-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* H4 — card title */
.ch-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

/* Eyebrow / kicker / tri-dot label — used everywhere as the brand echo of
   "CONSTRUIR · JUGAR · ACTUAR" */
.ch-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.ch-lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg2);
  text-wrap: pretty;
}

.ch-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  text-wrap: pretty;
}

.ch-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.ch-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: 0.02em;
  color: var(--fg3);
}

.ch-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* The tri-dot divider — render with · between items, tracked wide */
.ch-tridot > * + *::before {
  content: " · ";
  color: var(--fg3);
  margin: 0 0.5em;
}