/* ============================================================
   PAME · Programa Ads Manager Estratégico
   Colors + Type tokens — confirmed against brand manual
   ============================================================ */

/* Se retiró @font-face de "Bohemian Soul": ya no se usa en la UI (títulos en Montserrat). */

/* ── Montserrat, autohospedada ──────────────────────────────────────────────
   Antes esto era `@import url('https://fonts.googleapis.com/...')`, y esa línea
   sola costaba media pantalla de espera: un @import obliga al navegador a bajar
   y parsear ESTE archivo, recién ahí descubrir la URL de Google, bajar OTRO css,
   y recién ahí empezar a bajar la fuente. Tres viajes en serie, todos
   bloqueando el render, contra dos dominios ajenos.

   Ahora los .woff2 viven en app/fonts/ y se piden en paralelo con todo lo
   demás. Es el archivo variable (un solo peso 400–800 para toda la escala).
   Se guardaron solo los subsets latin y latin-ext: la plataforma es en
   castellano, el cirílico y el vietnamita no se usaban nunca.

   `font-display:swap` = el texto se ve enseguida con la tipografía del sistema
   y se recambia cuando llega Montserrat. Nunca hay texto invisible.        */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
/* "Yeseva One" venía en el @import y no la usaba ninguna regla del proyecto: se sacó. */

:root {
  /* ============================================================
     BRAND COLORS — official, with Pantone references
     ============================================================ */

  /* PRIMARY · Blue */
  --pame-blue:        #006A9E;   /* PANTONE P 113-16 C · RGB 0-106-158 · CMYK 90-51-17-3 */
  --pame-blue-90:    #1979AB;
  --pame-blue-80:    #338AB6;
  --pame-blue-70:    #4D9BC1;
  --pame-blue-60:    #66ACCB;
  --pame-blue-50:    #80B5D0;
  --pame-blue-40:    #99C2D9;
  --pame-blue-30:    #B3D2E2;
  --pame-blue-20:    #CCE1EB;
  --pame-blue-10:    #E6F1F5;

  /* ACCENT · Orange */
  --pame-orange:      #FB8907;   /* PANTONE P 24-8 C · RGB 251-137-7 · CMYK 0-55-95-0 */
  --pame-orange-90:   #FC9520;
  --pame-orange-80:   #FCA13B;
  --pame-orange-70:   #FDB05C;
  --pame-orange-60:   #FDBC78;
  --pame-orange-50:   #FDC894;
  --pame-orange-40:   #FED5AF;
  --pame-orange-30:   #FEE0C6;
  --pame-orange-20:   #FFECD9;
  --pame-orange-10:   #FFF6EC;

  /* PRIMARY · Teal */
  --pame-teal:        #00A8C1;   /* PANTONE P 121-7 C · RGB 0-168-193 · CMYK 76-9-23-0 */
  --pame-teal-90:     #19B0C7;
  --pame-teal-80:     #33B9CD;
  --pame-teal-70:     #4DC2D4;
  --pame-teal-60:     #66CBDA;
  --pame-teal-50:     #80D4E0;
  --pame-teal-40:     #99DDE6;
  --pame-teal-30:     #B3E5EC;
  --pame-teal-20:     #CCEEF3;
  --pame-teal-10:     #E6F7F9;

  /* Aliases for darker / lighter shades used semantically */
  --pame-blue-900:    #02334D;   /* Deep brand ink — for dark surfaces */
  --pame-teal-700:    #00768A;   /* Darker teal for hover/press */
  --pame-orange-600:  #DE7600;
  --pame-blue-700:    #004E76;

  /* ---- Neutrals ---- */
  --pame-ink:         #02334D;
  --pame-ink-2:       #335A75;
  --pame-ink-3:       #6E8898;
  --pame-line:        #D9E3EA;
  --pame-bg:          #FFFFFF;
  --pame-bg-soft:     #F4F8FA;
  --pame-bg-cream:    #FFF9F1;

  --pame-success:     #2E9A6B;
  --pame-warning:     var(--pame-orange);
  --pame-danger:      #D04A3B;

  /* ---- Foreground/background semantic ---- */
  --fg-1: var(--pame-ink);
  --fg-2: var(--pame-ink-2);
  --fg-3: var(--pame-ink-3);
  --fg-on-brand: #FFFFFF;
  --bg-1: var(--pame-bg);
  --bg-2: var(--pame-bg-soft);
  --bg-3: var(--pame-blue-900);

  /* ============================================================
     TYPOGRAPHY — Bohemian Soul (display) + Montserrat (UI)
     ============================================================ */

  /* Interfaz: se retiró Bohemian Soul (no funcionaba bien para UI). Títulos en Montserrat bold. */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;

  /* ---- Type scale ---- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---- Spacing (4-pt baseline) ---- */
  --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;

  /* ---- Radii ---- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Shadows (blue-tinted) ---- */
  /* Sombras delicadas y en capas (estilo Bunny): suaves pero presentes */
  --shadow-xs: 0 1px 2px rgba(2, 51, 77, 0.04), 0 4px 12px -6px rgba(2, 51, 77, 0.07);
  --shadow-sm: 0 1px 3px rgba(2, 51, 77, 0.05), 0 10px 24px -10px rgba(2, 51, 77, 0.10);
  --shadow-md: 0 4px 10px rgba(2, 51, 77, 0.06), 0 18px 40px -14px rgba(2, 51, 77, 0.14);
  --shadow-lg: 0 18px 40px -12px rgba(2, 51, 77, 0.18);
  --shadow-brand: 0 12px 28px -10px rgba(0, 168, 193, 0.45);
  /* Halo cálido alrededor de un bloque que tiene que "brillar" sin marco fuerte */
  --shadow-glow:  0 0 0 3px rgba(251, 137, 7, 0.10), 0 0 22px 2px rgba(251, 137, 7, 0.30), 0 14px 34px -12px rgba(251, 137, 7, 0.42);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ============================================================
   Semantic typography roles
   ============================================================ */

.pame-display, h1.pame {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--pame-blue);
}
.pame-display em { font-style: italic; color: var(--pame-teal); }

h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pame-orange);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.small, small {
  font-size: var(--fs-14);
  color: var(--fg-3);
}
.caption {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Pill tag */
.pame-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pame-teal-20);
  color: var(--pame-teal-700);
}
.pame-tag--orange { background: var(--pame-orange-20); color: var(--pame-orange-600); }
.pame-tag--blue   { background: var(--pame-blue-20);   color: var(--pame-blue-700);   }
.pame-tag--dark   { background: var(--pame-blue-900);  color: #FFFFFF; }