/* ==========================================================================
   Acenza — Colors & Type tokens
   Source of truth: ACENZA_MANUAL_DE_MARCA_V1_3
   ==========================================================================

   Paleta de Color
   ---------------
   The five brand colors are named with intention — they describe a STATE of
   focus, not just a hue. Norte (North) = the page. Pleno/Plomo = presence
   and weight. Impulso = the decisive action. Pausa = the breath.

   Typography
   ----------
   Helvetica Neue is the brand's sole typeface — Regular for body + long
   titles (Sentence case), Bold for short miscellany + titulars (Title Case).
   It carries the whole system: no display face, no serif, no script.
   Font files live in ../fonts/ (relative to this stylesheet). When this
   stylesheet is imported from a nested directory (e.g. ui_kits/website/),
   the browser still resolves @font-face URLs relative to THIS file — so
   these paths are correct from any consumer.

   ========================================================================== */

@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-UltraLight.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-UltraLightItalic.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Thin.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-ThinItalic.otf') format('opentype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Roman.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-HeavyItalic.otf') format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-BlackItalic.otf') format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* -----------------------------------------------------------------
     COLOR — Brand palette (as named in the manual)
     ----------------------------------------------------------------- */

  --acenza-norte:    #EBEADB; /* Norte  — cream/page, the base surface */
  --acenza-pausa:    #7AE3DC; /* Pausa  — mint/cyan, the breath */
  --acenza-impulso:  #7017E2; /* Impulso— decisive purple, the action */
  --acenza-pleno:    #101010; /* Pleno  — near-black, presence */
  --acenza-plomo:    #343434; /* Plomo  — graphite, structural gray */

  /* -----------------------------------------------------------------
     COLOR — Semantic surface + text (derived)
     ----------------------------------------------------------------- */

  --bg:              var(--acenza-norte);
  --bg-inverse:      var(--acenza-pleno);
  --bg-muted:        #DDDCC9;        /* Norte -8% lum, for striping */
  --bg-elevated:     #F4F3E6;        /* Norte +2% lum, for cards on norte */

  --fg:              var(--acenza-pleno);
  --fg-on-inverse:   var(--acenza-norte);
  --fg-muted:        var(--acenza-plomo);
  --fg-subtle:       #6B6B6B;

  --accent:          var(--acenza-impulso);
  --accent-soft:     var(--acenza-pausa);
  --link:            var(--acenza-impulso);

  --border:          #D5D4C3;        /* on Norte */
  --border-inverse:  #2A2A2A;        /* on Pleno */
  --divider:         rgba(16,16,16,0.08);

  /* Gradient: Impulso → Pausa — the signature brand gradient
     used on the isotipo, billboards, hero blocks, and accent chips. */
  --acenza-gradient: linear-gradient(135deg, var(--acenza-impulso) 0%, var(--acenza-pausa) 100%);
  --acenza-gradient-vertical: linear-gradient(180deg, var(--acenza-impulso) 0%, var(--acenza-pausa) 100%);
  --acenza-gradient-reverse:  linear-gradient(135deg, var(--acenza-pausa)  0%, var(--acenza-impulso) 100%);

  /* -----------------------------------------------------------------
     TYPE — Families
     ----------------------------------------------------------------- */

  --font-sans: 'Helvetica Neue', 'Helvetica', 'Arial', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -----------------------------------------------------------------
     TYPE — Scale
     Acenza uses only Regular (400) and Bold (700). Bold is reserved
     for emphasis: single words, short miscellany, short titulars.
     Long titles + body all run Regular.
     ----------------------------------------------------------------- */

  --fs-hero:       clamp(56px, 9vw, 144px);   /* Hero titles, contact big */
  --fs-display-xl: clamp(64px, 8vw, 128px);   /* "El equipo que potencia..." */
  --fs-display:    clamp(44px, 5.4vw, 88px);  /* Section starters */
  --fs-h1:         clamp(36px, 3.6vw, 56px);
  --fs-h2:         clamp(28px, 2.6vw, 40px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;

  --fw-regular: 400;
  --fw-medium:  500; /* used sparingly for UI */
  --fw-bold:    700;

  --lh-tight:    1.04;    /* display */
  --lh-title:    1.12;    /* h1/h2 */
  --lh-body:     1.5;     /* paragraph */
  --lh-loose:    1.65;    /* long-form */

  --tracking-tight:  -0.02em;   /* display */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;    /* ALL-CAPS utility/eyebrow */

  /* -----------------------------------------------------------------
     SPACING — 4px base. Orthogonal grid, rhythm controlled.
     ----------------------------------------------------------------- */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* -----------------------------------------------------------------
     RADII — Acenza is mostly square. Rounded only appears on pill CTAs.
     ----------------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;      /* CTA buttons — e.g. "Hablemos" */

  /* -----------------------------------------------------------------
     SHADOW — Shadows are almost absent. The system is flat + grid-based.
     One subtle card shadow is all you need.
     ----------------------------------------------------------------- */

  --shadow-none: none;
  --shadow-card: 0 2px 12px rgba(16, 16, 16, 0.06);
  --shadow-lift: 0 8px 32px rgba(16, 16, 16, 0.10);

  /* -----------------------------------------------------------------
     MOTION — Clean easing, short durations. No bounces.
     ----------------------------------------------------------------- */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:     cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:   140ms;
  --dur-normal: 220ms;
  --dur-slow:   420ms;
}

/* --------------------------------------------------------------------------
   Base element styles — reach for these as semantic tokens.
   -------------------------------------------------------------------------- */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);   /* Acenza titles are Regular, not Bold */
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-title); margin: 0; }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-title); margin: 0; }

p, .p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.p-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.p-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.micro   { font-size: var(--fs-micro);   color: var(--fg-muted); }

.mono { font-family: var(--font-mono); }
.bold { font-weight: var(--fw-bold); }

/* The signature "bbc" triplet — used in headers, footers, posters */
.bbc { font-weight: var(--fw-regular); }
.bbc > span { display: inline-block; }
.bbc > span::after { content: '. '; }

a {
  color: var(--link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }