/* =========================================================================
   BRAND HUB — /brand-hub
   Manual de marca para registradores. Landing de una sola página, con
   selector de idioma en cliente (Alpine, ver wwwroot/js/brand-hub.js) en
   vez del patrón dual-page (Pages/ + Pages/Es/) del resto del sitio.

   Fuente: mockup pixel-perfect entregado por diseño (bundle de Claude
   Design canvas, 2026-09-10). Implementado tal cual, INCLUYENDO los
   "kickers" (mini-etiquetas en mayúsculas sobre cada heading) — excepción
   explícita a la regla de "sin kickers en todo el sitio" de CLAUDE.md,
   decisión de Jose 2026-09-10. No usar este patrón como precedente en
   ninguna otra página: ver nota en CLAUDE.md.

   Usa los tokens de color/radio/sombra/motion ya definidos en site.css
   (--co-*, --r-*, --shadow-*, --ease-*, --dur-*) y var(--font-title) para
   Baikal Condensed Bold (es la MISMA fuente que ya carga site.css, no se
   duplica el archivo). Agrega dos familias nuevas, usadas SOLO en esta
   página: "Baikal Wide" (peso ancho — SIN condensar, para el logo y
   titulares de una palabra, ej. tarjeta "START BIG") y "Basetica" (cuerpo
   de texto — el resto del sitio sigue con Inter, no se toca --font-body
   global).

   OJO — bug ya corregido (2026-09-10): esta fuente ancha NO puede
   registrarse como 'Baikal' a secas. site.css ya define @font-face
   'Baikal' 700 = Baikal-ExtraCondensedBold (la que usa var(--font-title)
   en TODOS los headlines del sitio, incluida esta página). Como los
   @font-face son globales (no quedan aislados a .hub), declarar una
   SEGUNDA 'Baikal' 700 aquí pisaba silenciosamente esa fuente condensada
   en toda la página con el corte ancho — por eso la implementación se
   veía "muy distinta" al mockup pixel-perfect (headlines, botones,
   nombres de tarjeta, etc. — todo lo que usa var(--font-title) — salía
   con letras mucho más anchas de lo esperado). Nombre distinto = sin
   colisión.
   ========================================================================= */

/* ── Fuentes nuevas (solo Brand Hub) ────────────────────────────────────── */
@font-face {
  font-family: 'Baikal Wide';
  src: url('/fonts/Baikal-Bold.woff2') format('woff2'),
       url('/fonts/Baikal-Bold.otf')   format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basetica';
  src: url('/fonts/Basetica-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ── Tokens locales de la página ────────────────────────────────────────── */
.hub {
  --hub-font-wide: 'Baikal Wide', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --hub-font-body: 'Basetica', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --hub-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--co-cream);
  font-family: var(--hub-font-body);
  overflow-x: hidden;
}
/* [x-cloak] ya está definido globalmente en site.css — no se duplica aquí. */

/* ── Sub-nav propio del mockup: ELIMINADO (2026-09-10, pedido de Jose) ────
   Duplicaba el nav real del sitio (doble menú apilado, feo). El toggle de
   idioma vive ahora solo en el pill "ES" del nav global. Si se necesita
   recuperar el markup, está en el historial de git de este archivo /
   BrandHub.cshtml. */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hub-hero {
  position: relative;
  background: var(--co-purple);
  padding: 120px 40px 140px;
  overflow: hidden;
  min-height: 560px;
}
.hub-hero-mark {
  /* El mockup trae esto a right:-16%/bottom:-22%/width:78%/opacity:1 (ver
     comentario en el bundle original) — a ese tamaño domina todo el hero.
     Reducido a pedido de Jose (2026-09-10: "me gusta pero no gigante").
     Si el tamaño/opacidad exactos no son los que diseño quiere, avisar y
     se ajusta a la cifra que digan. */
  position: absolute;
  right: -8%;
  bottom: -14%;
  width: 40%;
  opacity: .16;
  pointer-events: none;
}
.hub-hero-inner { position: relative; max-width: 1180px; margin: 0 auto; }
.hub-hero-kicker {
  font-family: var(--hub-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--co-lime);
  opacity: .8;
  margin-bottom: 28px;
}
.hub-hero-title {
  font-family: var(--font-title);
  text-transform: uppercase;
  color: var(--co-lime);
  font-size: clamp(60px, 9vw, 150px);
  line-height: .84;
  letter-spacing: -.02em;
  max-width: 16ch;
  margin: 0;
}
.hub-hero-body { color: var(--co-white); font-size: 20px; line-height: 1.4; max-width: 44ch; margin: 32px 0 40px; }
.hub-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.hub-btn {
  font-family: var(--font-title);
  text-transform: uppercase;
  display: inline-block;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hub-btn-lime {
  background: var(--co-lime); color: var(--co-purple);
  font-size: 20px; padding: 16px 34px;
}
.hub-btn-lime:hover { background: var(--co-white); }
.hub-btn-outline-lime {
  border: 2px solid var(--co-lime); color: var(--co-lime);
  font-size: 20px; padding: 14px 32px;
}
.hub-btn-outline-lime:hover { background: var(--co-lime); color: var(--co-purple); }
.hub-btn-purple {
  background: var(--co-purple); color: var(--co-lime);
  font-size: 18px; padding: 14px 28px;
}
.hub-btn-purple:hover { background: var(--co-lime); color: var(--co-purple); }
.hub-btn-lime-sm {
  background: var(--co-lime); color: var(--co-purple);
  font-size: 17px; padding: 12px 26px;
}
.hub-btn-lime-sm:hover { background: var(--co-purple); color: var(--co-lime); }

/* Botones de descarga sin archivo real todavía (ver PKG_WEIGHT en
   brand-hub.js) — visualmente apagados y sin acción de click, para no
   ofrecer una descarga que hoy daría 404. 2026-09-10. */
.hub-btn-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.hub-btn-disabled:hover { background: var(--co-lime); color: var(--co-purple); }

/* ── Secciones (estructura común) ───────────────────────────────────────── */
.hub-section { padding: 110px 40px; }
.hub-section-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.hub-section-head { display: flex; gap: 48px; align-items: flex-end; flex-wrap: wrap; }
.hub-section-head-main { flex: 1 1 420px; }
.hub-section-head-aside { flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; max-width: 52ch; }
.hub-kicker {
  font-family: var(--hub-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hub-section-title {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: .86;
  margin: 0;
}
.hub-section-copy { font-size: 17px; line-height: 1.5; margin: 0; }

/* ── 01 — Logos ──────────────────────────────────────────────────────────── */
#logos { background: var(--co-cream); }
#logos .hub-kicker { color: var(--co-orange); }
#logos .hub-section-title { color: var(--co-purple); }
#logos .hub-section-copy { color: var(--co-black); }

.hub-logos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.hub-logo-card { background: var(--co-white); border-radius: var(--r-2xl); overflow: hidden; display: flex; flex-direction: column; }
.hub-logo-swatch { height: 190px; display: flex; align-items: center; justify-content: center; }
.hub-logo-swatch img { width: 56%; display: block; }
.hub-logo-info { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hub-logo-name { font-family: var(--font-title); text-transform: uppercase; font-size: 26px; color: var(--co-purple); line-height: .9; }
.hub-logo-hex { font-family: var(--hub-font-body); font-size: 15px; color: var(--co-black); opacity: .7; }
.hub-logo-use { font-size: 14px; line-height: 1.45; color: var(--co-black); margin: 0; }

.hub-rule-card { background: var(--co-black); color: var(--co-lime); border-radius: var(--r-2xl); padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; }
.hub-rule-title { font-family: var(--font-title); text-transform: uppercase; font-size: 28px; line-height: .9; margin-bottom: 14px; }
.hub-rule-body { color: var(--co-white); font-size: 15px; line-height: 1.5; margin: 0; }

/* ── 02 — Color ──────────────────────────────────────────────────────────── */
#color { background: var(--co-blue); }
#color .hub-kicker,
#color .hub-section-title { color: var(--co-lime); }
#color .hub-kicker { opacity: .8; }
#color .hub-section-copy { color: var(--co-white); }

.hub-colors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.hub-color-card { border-radius: var(--r-lg); overflow: hidden; background: var(--co-cream); display: flex; flex-direction: column; }
.hub-color-swatch { height: 150px; padding: 16px; display: flex; align-items: flex-start; }
.hub-color-tag { font-family: var(--hub-font-body); font-size: 14px; }
.hub-color-info { padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.hub-color-name { font-family: var(--font-title); text-transform: uppercase; font-size: 24px; line-height: .9; color: var(--co-purple); }
.hub-color-hex { font-family: var(--hub-font-body); font-size: 15px; color: var(--co-black); margin-bottom: 6px; }
.hub-color-meta { font-family: var(--hub-font-body); font-size: 15px; line-height: 1.5; color: var(--co-black); opacity: .75; }
.hub-color-pantone { font-family: var(--hub-font-body); font-size: 15px; line-height: 1.5; color: var(--co-orange); }
.hub-color-role { font-size: 13px; line-height: 1.4; color: var(--co-black); opacity: .8; margin-top: 10px; }

.hub-gradients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.hub-gradient-card { border-radius: var(--r-lg); overflow: hidden; background: var(--co-cream); display: flex; flex-direction: column; }
.hub-gradient-swatch { height: 130px; }
.hub-gradient-info { padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.hub-gradient-name { font-family: var(--font-title); text-transform: uppercase; font-size: 24px; line-height: .9; color: var(--co-purple); }
.hub-gradient-stops { font-family: var(--hub-font-body); font-size: 15px; color: var(--co-black); opacity: .75; }
.hub-gradient-use { font-family: var(--hub-font-body); font-size: 15px; line-height: 1.45; color: var(--co-black); opacity: .85; }

/* ── 03 — Tipografía ─────────────────────────────────────────────────────── */
#tipografia { background: var(--co-cream); }
#tipografia .hub-kicker { color: var(--co-orange); }
#tipografia .hub-section-title { color: var(--co-purple); }
#tipografia .hub-section-copy { color: var(--co-black); }

.hub-type-display {
  background: var(--co-purple); border-radius: 48px; padding: 56px 44px;
  display: flex; flex-direction: column; gap: 18px;
}
.hub-type-display-label {
  font-family: var(--hub-font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--co-lime); opacity: .7;
}
.hub-type-display-sample {
  font-family: var(--font-title); text-transform: uppercase; color: var(--co-lime);
  font-size: clamp(56px, 9vw, 132px); line-height: .82; letter-spacing: -.02em;
}
.hub-type-display-chars {
  font-family: var(--font-title); text-transform: uppercase; color: var(--co-white);
  font-size: 28px; letter-spacing: .02em; opacity: .85;
}

.hub-type-pair-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.hub-type-card { background: var(--co-white); border-radius: var(--r-2xl); padding: 40px 36px; }
.hub-type-card-label {
  font-family: var(--hub-font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--co-orange); margin-bottom: 20px;
}
.hub-type-card-wide { font-family: var(--hub-font-wide); text-transform: uppercase; color: var(--co-purple); font-size: 64px; line-height: .9; }
.hub-type-card-body { font-family: var(--hub-font-body); font-weight: 400; color: var(--co-black); font-size: 22px; line-height: 1.35; }
.hub-type-card-note { font-size: 14px; line-height: 1.5; color: var(--co-black); margin: 22px 0 0; }

.hub-fonts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.hub-font-card { background: var(--co-white); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.hub-font-name { font-family: var(--font-title); text-transform: uppercase; font-size: 24px; color: var(--co-purple); line-height: .9; }
.hub-font-meta { font-family: var(--hub-font-body); font-size: 15px; color: var(--co-black); opacity: .7; }
.hub-font-role { font-size: 14px; line-height: 1.45; color: var(--co-black); opacity: .8; }

/* ── 04 — Descargas ──────────────────────────────────────────────────────── */
#descargas { background: var(--co-green); }
#descargas .hub-kicker,
#descargas .hub-section-title { color: var(--co-lime); }
#descargas .hub-kicker { opacity: .85; }
#descargas .hub-section-copy { color: var(--co-white); }

.hub-download-all {
  position: relative; overflow: hidden; background: var(--co-purple); border-radius: 48px;
  padding: 52px 44px; display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.hub-download-all-mark { position: absolute; right: -6%; bottom: -30%; width: 20%; opacity: .35; pointer-events: none; } /* reducido junto con hub-hero-mark, 2026-09-10 */
.hub-download-all-main { position: relative; flex: 1 1 420px; }
.hub-download-all-kicker {
  font-family: var(--hub-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--co-lime); opacity: .75; margin-bottom: 16px;
}
.hub-download-all-title { font-family: var(--font-title); text-transform: uppercase; color: var(--co-lime); font-size: clamp(38px, 5vw, 68px); line-height: .86; }
.hub-download-all-body { color: var(--co-white); font-size: 16px; line-height: 1.5; max-width: 46ch; margin: 20px 0 0; }
.hub-download-all-actions { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex: 0 0 auto; }
.hub-download-all-btn { font-size: 24px; padding: 20px 40px; }
.hub-download-all-note { font-family: var(--hub-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--co-lime); opacity: .7; }

.hub-packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.hub-package-card { background: var(--co-cream); border-radius: var(--r-2xl); padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.hub-package-head { display: flex; align-items: baseline; gap: 14px; }
.hub-package-num { font-family: var(--hub-font-body); font-size: 15px; color: var(--co-orange); }
.hub-package-name { font-family: var(--font-title); text-transform: uppercase; font-size: 30px; color: var(--co-purple); line-height: .88; }
.hub-package-formats { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-format-pill { font-family: var(--hub-font-body); font-size: 14px; color: var(--co-purple); border: 2px solid var(--co-purple); border-radius: 999px; padding: 4px 14px; }
.hub-package-desc { font-size: 15px; line-height: 1.5; color: var(--co-black); margin: 0; }
.hub-package-footer { margin-top: auto; padding-top: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hub-package-weight { font-family: var(--hub-font-body); font-size: 14px; color: var(--co-black); opacity: .6; }

/* ── CTA final ───────────────────────────────────────────────────────────── */
.hub-cta {
  position: relative; background: var(--co-orange); padding: 120px 40px; overflow: hidden;
}
.hub-cta-mark { position: absolute; left: -8%; top: -26%; width: 28%; opacity: .15; pointer-events: none; } /* reducido junto con hub-hero-mark, 2026-09-10 */
.hub-cta-inner {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: flex; gap: 48px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.hub-cta-main { flex: 1 1 420px; }
.hub-cta-title { font-family: var(--font-title); text-transform: uppercase; color: var(--co-lime); font-size: clamp(40px, 6vw, 88px); line-height: .84; margin: 0; }
.hub-cta-body { color: var(--co-white); font-size: 18px; line-height: 1.45; max-width: 44ch; margin: 24px 0 0; }
.hub-cta-btn { font-size: 22px; padding: 18px 38px; flex: 0 0 auto; }

/* ── Barra inferior de la página (dentro de #descargas/CTA, no el footer del sitio) ── */
.hub-bottombar {
  background: var(--co-purple); padding: 56px 40px;
  display: flex; gap: 32px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.hub-bottombar img { height: 38px; display: block; }
.hub-bottombar-text {
  font-family: var(--hub-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--co-lime); opacity: .7;
}