/* ═══════════════════════════════════════════════════════════════════════
   BARTIDATA THEME — main.css v2
   Estilo pixel-art con header degradado púrpura→rosa→naranja.
   Buttons/cards con borde negro + box-shadow 4px 4px 0 #000 (depth).
   Tipografía Press Start 2P en todo. Modo claro principal.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Light mode (default) */
  --bg:            #f1f0fa;       /* lavender muy clarito */
  --bg-card:       #ffffff;       /* cards blanco puro */
  --bg-inset:      #f4f3fb;       /* inset / sunken */
  --ink:           #1a1530;       /* texto principal — casi negro púrpura */
  --ink-soft:      #4a4570;       /* texto secundario */
  --ink-dim:       #8a85a0;       /* texto terciario */
  --line:          #1a1530;       /* bordes negros (la firma del estilo) */
  --line-soft:     #d8d4ea;       /* bordes suaves */

  /* Acentos paleta retro (igual saturación que tus capturas) */
  --accent-purple: #8b7df3;       /* morado del theme original */
  --accent-orange: #ff8a3d;       /* naranja del header gradient */
  --accent-lime:   #a3e635;       /* lime (interno, no usar en texto si chillón) */
  --accent-lime-d: #65a30d;

  /* ═══ Paleta Super Star Soccer Deluxe (Konami SNES 1996) ═══════════════
     Arcade arcade: cobalto profundo + amarillo brillante + rosa magenta +
     cyan eléctrico. Usar en cards destacadas + dark mode. */
  --sss-cobalt:    #1939B7;       /* azul fondo cards */
  --sss-cobalt-2:  #2E54D6;       /* azul más vibrante */
  --sss-cobalt-d:  #0D1F6B;       /* deep — fondo body en dark */
  --sss-yellow:    #FFDC1F;       /* amarillo bordes / títulos */
  --sss-yellow-d:  #E5A800;       /* dark variant para texto sobre claro */
  --sss-pink:      #FF4FCB;       /* rosa magenta arcade */
  --sss-pink-d:    #C7137A;       /* dark variant */
  --sss-cyan:      #4DC8FF;       /* cyan eléctrico info / hover */
  --sss-cyan-d:    #1185BF;       /* dark variant */
  --sss-mint:      #B6FF00;       /* verde lima neón (NO usar como texto en claro) */
  --sss-ice:       #E8F1FF;       /* blanco azulado */
  --sss-grid:      rgba(255,220,31,0.20);  /* grid translúcido amarillo */
  --accent-pink:   #f573ad;       /* highlights, assists */
  --accent-cyan:   #4dd5f7;       /* info, stats positivas */
  --accent-green:  #5dd87a;       /* live, success, cancha */
  --accent-yellow: #ffd54d;       /* warning, MVP */
  --accent-red:    #ff5b6a;       /* errors, red cards */

  /* Header — fondo blanco simple */
  --header-grad: #ffffff;

  /* Depth shadow (LA firma visual — todos los botones/cards la usan) */
  --depth:       4px 4px 0 0 var(--line);
  --depth-sm:    3px 3px 0 0 var(--line);
  --depth-lg:    6px 6px 0 0 var(--line);
  --depth-hover: 6px 6px 0 0 var(--line);
  --depth-press: 2px 2px 0 0 var(--line);

  /* Typography */
  --display:    'Press Start 2P', 'Silkscreen', monospace;  /* títulos arcade SOLO */
  --body:       'JetBrains Mono', 'Courier New', monospace;  /* cuerpo legible */
  --mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Sizing */
  --container-max:    1400px;
  --container-pad:    1.5rem;
  --radius:           8px;
  --radius-sm:        4px;

  /* Z layers */
  --z-header:  100;
  --z-modal:   200;
}

/* Dark mode (toggle) — Super Star Soccer Deluxe arcade palette */
body.bd-dark {
  --bg:        #0D1F6B;                  /* cobalto profundo (fondo) */
  --bg-card:   #1939B7;                  /* cobalto vibrante (cards) */
  --bg-inset:  #07154A;                  /* deeper inset */
  --ink:       #FFDC1F;                  /* AMARILLO arcade — texto principal */
  --ink-soft:  #E8F1FF;                  /* blanco azulado — texto cuerpo */
  --ink-dim:   #4DC8FF;                  /* cyan — texto terciario */
  --line:      #FFDC1F;                  /* bordes amarillos brillantes */
  --line-soft: rgba(255,220,31,0.30);
  --depth:       4px 4px 0 0 var(--line);
  --depth-sm:    3px 3px 0 0 var(--line);
  --depth-press: 2px 2px 0 0 var(--line);
}
body.bd-dark a { color: var(--sss-cyan); }
body.bd-dark a:hover { color: var(--sss-pink); }
body.bd-dark .bd-icon-btn { background: var(--sss-cobalt-d); color: var(--sss-yellow); }

/* ── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);      /* JetBrains Mono — legible */
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sitio al 100% (zoom normal) */
  zoom: 1;
}
/* Excepción: en admin del WP no aplicar el zoom (evita romper la barra) */
body.wp-admin, body.logged-in.admin-bar { zoom: 1; }
/* Mantener pixelado SOLO en el avatar/portrait de Barti (image-rendering propio) */
a { color: var(--accent-purple); text-decoration: none; transition: color .12s; }
a:hover { color: var(--accent-orange); }
img { max-width: 100%; height: auto; display: block; image-rendering: auto; }
button { font-family: inherit; cursor: pointer; }

/* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 .8em;
}
h1 { font-size: 2.4rem; letter-spacing: 0.02em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: .95rem; }
h5, h6 { font-size: .8rem; }

p { margin: 0 0 1em; line-height: 1.8; }

/* Mono — para números/data específicos */
.bd-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Accent text */
.bd-accent-purple { color: var(--accent-purple); }
.bd-accent-orange { color: var(--accent-orange); }
.bd-accent-pink   { color: var(--accent-pink); }
.bd-accent-cyan   { color: var(--accent-cyan); }
.bd-accent-green  { color: var(--accent-green); }
.bd-accent-yellow { color: var(--accent-yellow); }
.bd-accent-red    { color: var(--accent-red); }

/* ── CONTAINER ─────────────────────────────────────────────────────────── */
.bd-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── HEADER con degradado púrpura→rosa→naranja ──────────────────────────── */
.bd-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--header-grad);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 2px 0 0 var(--line);
}
.bd-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}
.bd-brand {
  display: flex; align-items: center; gap: 0.8rem;
  text-decoration: none;
}
.bd-brand-avatar {
  width: 56px; height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  image-rendering: pixelated;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  background: var(--bg-card);
  flex-shrink: 0;
  transition: transform .08s, box-shadow .08s;
}
/* Misma animación que los toggles del header (.bd-icon-btn) */
.bd-brand:hover .bd-brand-avatar {
  transform: translate(-1px, -1px);
  box-shadow: var(--depth);
}
.bd-brand:active .bd-brand-avatar {
  transform: translate(2px, 2px);
  box-shadow: var(--depth-press);
}
.bd-brand-info {
  display: flex; flex-direction: column;
}
.bd-brand-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1;
  gap: 4px;
}
.bd-brand-name .accent { color: var(--ink); }
.bd-brand-name-top, .bd-brand-name-bot {
  display: block;
  font-size: inherit;
}
.bd-brand-name-bot { color: var(--ink); }
.bd-brand-tagline {
  font-family: var(--display);
  font-size: 0.55rem;
  color: var(--ink-soft);
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-card);
  padding: 4px 8px;
  border: 2px solid var(--line);
  border-radius: 3px;
  letter-spacing: 0.02em;
}

/* Nav */
.bd-nav { display: flex; align-items: center; gap: 2rem; }
.bd-nav a {
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--ink);
  position: relative;
  padding: 6px 4px;
  letter-spacing: 0.02em;
}
.bd-nav a:hover {
  color: var(--sss-cobalt, #1939B7);
}
/* Sección activa = mini-placa SSSD (legible sobre header blanco, más sutil
   que la placa destacada de Mundial 2026 para no robarle protagonismo) */
.bd-nav a[aria-current="page"]:not([href*="/mundial-2026"]) {
  background: linear-gradient(180deg,
              var(--sss-cobalt, #1939B7) 0%,
              var(--sss-cobalt-d, #0D1F6B) 100%);
  color: var(--sss-yellow, #FFDC1F);
  border: 2px solid var(--line);
  box-shadow:
    2px 2px 0 var(--line),
    inset 0 1px 0 rgba(255, 220, 31, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-shadow: 1px 1px 0 var(--sss-cobalt-d, #0D1F6B);
  letter-spacing: 0.03em;
  transition: transform 0.1s, box-shadow 0.1s;
}
.bd-nav a[aria-current="page"]:not([href*="/mundial-2026"]):hover {
  color: var(--sss-yellow, #FFDC1F);
  transform: translate(-1px, -1px);
  box-shadow:
    3px 3px 0 var(--line),
    inset 0 1px 0 rgba(255, 220, 31, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

/* Mundial 2026: placa SSSD del partido destacado
   (gradient vertical cobalt + insets para efecto 3D pixel HUD) */
.bd-nav a[href*="/mundial-2026"] {
  background: linear-gradient(180deg,
              var(--sss-cobalt, #1939B7) 0%,
              var(--sss-cobalt-d, #0D1F6B) 100%);
  color: var(--sss-yellow, #FFDC1F) !important;
  border: 3px solid var(--line);
  box-shadow:
    3px 3px 0 var(--line),
    inset 0 1px 0 rgba(255, 220, 31, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-shadow: 1.5px 1.5px 0 var(--sss-pink-d, #C7137A);
  letter-spacing: 0.04em;
  transition: transform 0.1s, box-shadow 0.1s;
}
.bd-nav a[href*="/mundial-2026"]:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    4px 4px 0 var(--line),
    inset 0 1px 0 rgba(255, 220, 31, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  color: var(--sss-yellow, #FFDC1F) !important;
  text-shadow: 1.5px 1.5px 0 var(--sss-pink-d, #C7137A);
}
.bd-nav a[href*="/mundial-2026"][aria-current="page"] {
  background: var(--sss-yellow, #FFDC1F);
  color: var(--sss-cobalt-d, #0D1F6B) !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}

/* Header icons (idioma, dark mode, chatbot) */
.bd-header-icons { display: flex; align-items: center; gap: 8px; }
.bd-icon-btn {
  width: 42px; height: 42px;
  background: var(--accent-orange);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  color: var(--ink);
  font-size: 1rem;
  font-family: var(--display);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
  line-height: 1;                 /* ← evita desalineo en texto Press Start 2P */
  padding: 0;                     /* ← box sólido sin padding interno raro */
  text-align: center;
  vertical-align: middle;
}
.bd-icon-btn > * {
  line-height: 1;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* SVG icons dentro de los botones: tamaño exacto y consistente.
   Usamos width/height fijos en lugar de font-size para evitar el
   problema de baseline de los emojis. */
.bd-icon-btn svg {
  width: 22px; height: 22px;
  display: block;
}
.bd-icon-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--depth); }
.bd-icon-btn:active { transform: translate(2px, 2px); box-shadow: var(--depth-press); }
.bd-icon-btn.lang { background: var(--accent-orange); }
.bd-icon-btn.dark { background: var(--bg-card); }
.bd-icon-btn.bot  { background: var(--accent-orange); }

/* Language switcher (mismo tamaño/forma que .bd-icon-btn — cuadrado 42×42) */
.bd-lang-switcher { position: relative; }
.bd-lang-switcher .bd-lang-current {
  width: 42px; height: 42px;
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.78rem;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.bd-lang-switcher .bd-lang-current:hover { transform: translate(-1px, -1px); box-shadow: var(--depth); }
.bd-lang-switcher .bd-lang-current:active { transform: translate(2px, 2px); box-shadow: var(--depth-press); }
.bd-lang-dropdown {
  position: absolute;
  /* Pegado al toggle (top: 100%) con padding-top que SIGUE siendo hoverable.
     El area de 6px entre el toggle y los items queda dentro del propio dropdown
     → el mouse no pierde el hover al bajar. */
  top: 100%;
  right: 0;
  margin: 0;
  padding: 6px 0 0;
  min-width: 110px;
  list-style: none;
  display: none;
  z-index: 100;
}
/* Pseudo-element invisible que solo cubre el gap arriba para mantener hover */
.bd-lang-switcher:hover .bd-lang-dropdown,
.bd-lang-switcher:focus-within .bd-lang-dropdown { display: block; }
/* Caja real con fondo+borde solo alrededor de los items */
.bd-lang-dropdown::after {
  content: '';
  position: absolute;
  top: 6px; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border: 3px solid var(--line);
  box-shadow: var(--depth);
  border-radius: var(--radius-sm);
  z-index: -1;
}
.bd-lang-dropdown li { position: relative; padding: 0 4px; }
.bd-lang-dropdown li:first-child { padding-top: 4px; }
.bd-lang-dropdown li:last-child { padding-bottom: 4px; }
.bd-lang-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  font-family: var(--display); font-size: 0.7rem;
  color: var(--ink);
  border-radius: 2px;
}
.bd-lang-item:hover { background: var(--bg-inset); }
.bd-lang-item.active { background: var(--accent-purple); color: #fff; }

/* ── TIMEZONE SWITCHER (mismo estilo que el lang, 42x42 + dropdown) ── */
.bd-tz-switcher { position: relative; }
.bd-tz-switcher .bd-tz-current {
  width: 42px; height: 42px;
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.78rem;             /* mismo size que el lang code para consistencia */
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.bd-tz-switcher .bd-tz-current:hover { transform: translate(-1px, -1px); box-shadow: var(--depth); }
.bd-tz-switcher .bd-tz-current:active { transform: translate(2px, 2px); box-shadow: var(--depth-press); }
.bd-tz-flag { line-height: 1; display: inline-flex; }
/* Código de país (CL, PE, AR…) — mismo look que el lang switcher */
.bd-tz-code {
  font-family: var(--display);
  font-size: 0.78rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.bd-tz-dropdown {
  position: absolute;
  top: 100%; right: 0;
  margin: 0;
  padding: 6px 0 0;
  min-width: 180px;
  list-style: none;
  display: none;
  z-index: 100;
}
.bd-tz-switcher:hover .bd-tz-dropdown,
.bd-tz-switcher.open .bd-tz-dropdown,
.bd-tz-switcher:focus-within .bd-tz-dropdown { display: block; }
.bd-tz-dropdown::after {
  content: '';
  position: absolute;
  top: 6px; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border: 3px solid var(--line);
  box-shadow: var(--depth);
  border-radius: var(--radius-sm);
  z-index: -1;
}
.bd-tz-dropdown li { position: relative; padding: 0 4px; }
.bd-tz-dropdown li:first-child { padding-top: 4px; }
.bd-tz-dropdown li:last-child { padding-bottom: 4px; }
.bd-tz-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  width: 100%;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  transition: background .08s;
}
.bd-tz-item:hover { background: rgba(255, 220, 31, 0.18); }
.bd-tz-item.active {
  background: var(--sss-cobalt-d, #0D1F6B);
  color: var(--sss-yellow, #FFDC1F);
}
.bd-tz-item-flag { font-size: 1rem; line-height: 1; }
.bd-tz-item-name { line-height: 1; }
/* Separar "Mi zona" del resto con una línea sutil */
.bd-tz-dropdown li:first-child + li::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--line-soft, rgba(0,0,0,0.1));
  margin: 3px 6px 5px;
}

/* ── LIVE TICKER ────────────────────────────────────────────────────────── */
.bd-live-ticker {
  background: var(--accent-red);
  border-bottom: 3px solid var(--line);
  font-family: var(--display);
  font-size: 0.75rem;
  padding: 0.7rem var(--container-pad);
  color: #fff;
  display: flex; align-items: center; gap: 1rem;
  overflow: hidden; white-space: nowrap;
}
.bd-live-dot {
  width: 10px; height: 10px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 50%;
  animation: bd-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bd-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.bd-live-label {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #fff;
}
.bd-live-text { color: #fff; }
.bd-live-text strong { color: var(--accent-yellow); }

/* ── FOOTER (4 columnas SEO-friendly) ──────────────────────────────────── */
.bd-footer {
  margin-top: 5rem;
  background: var(--bg-card);
  border-top: 4px solid var(--line);
  padding: 2.5rem var(--container-pad) 1.2rem;
}
.bd-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.4rem;
  align-items: start;
}
.bd-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.bd-footer-brand-col { gap: 0.7rem; }

.bd-footer-brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.bd-footer-brand img {
  width: 48px; height: 48px;
  image-rendering: pixelated;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  background: var(--bg-card);
}
.bd-footer-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;   /* centrar vertical con el avatar */
  line-height: 0.9;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  gap: 6px;
  min-height: 48px;          /* iguala alto del avatar para centrar bien */
}
.bd-footer-brand-top,
.bd-footer-brand-bot {
  display: block;
  font-size: inherit;
  color: var(--ink);
}

.bd-footer-tagline {
  font-family: var(--display);
  font-size: 0.65rem;
  color: var(--ink-soft, #777);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bd-footer-desc {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft, #888);
  line-height: 1.5;
  margin: 0.3rem 0 0;
}

.bd-footer-h {
  font-family: var(--display);
  font-size: 0.78rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bd-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bd-footer-links a {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft, #666);
  text-decoration: none;
  transition: color .1s;
}
.bd-footer-links a:hover { color: var(--accent-orange, #a3e635); }

.bd-footer-socials { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.bd-footer-socials a {
  width: 38px; height: 38px;
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 0.85rem;
  transition: transform .08s, box-shadow .08s;
  text-decoration: none;
}
.bd-footer-socials a:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--depth);
  color: var(--accent-purple);
}

.bd-footer-copy {
  max-width: var(--container-max);
  margin: 2rem auto 0;
  padding-top: 1.2rem;
  border-top: 2px solid var(--line-soft, rgba(0,0,0,0.08));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim, #888);
  letter-spacing: 0.02em;
}
.bd-footer-copy a {
  color: var(--accent-orange, #a3e635);
  text-decoration: underline;
}
.bd-footer-attr {
  color: var(--ink-soft, #888);
  font-size: 0.68rem;
}

/* ── BUTTONS (LA FIRMA — todo bordeado + depth shadow) ─────────────────── */
.bd-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border: 3px solid var(--line);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.bd-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--depth-lg);
}
.bd-btn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--depth-press);
}
.bd-btn-primary {
  background: var(--accent-purple);
  color: #fff;
}
.bd-btn-accent {
  background: var(--accent-orange);
  color: var(--ink);
}
.bd-btn-cyan {
  background: var(--accent-cyan);
  color: var(--ink);
}

/* ── CARDS (también con borde + depth) ─────────────────────────────────── */
.bd-card {
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--depth);
  padding: 1.4rem;
}
.bd-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display);
  font-size: 0.65rem;
  color: var(--accent-purple);
  margin-bottom: .8rem;
  letter-spacing: 0.02em;
}
.bd-card-title {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 .8rem;
  color: var(--ink);
}

/* ── TABS (los del header de Stats: Players/Teams/League) ─────────────── */
.bd-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--depth);
  padding: 6px;
  gap: 0;
  margin: 1.5rem 0;
}
.bd-tab {
  font-family: var(--display);
  font-size: 0.85rem;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
.bd-tab.active {
  background: var(--accent-purple);
  color: #fff;
}
.bd-tab:hover:not(.active) {
  background: var(--bg-inset);
  color: var(--ink);
}

/* ── STAT BOX (las cajas de números 49 Goals, 1.6 AVG Goals, etc.) ────── */
.bd-stat-box {
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  padding: 1rem;
  text-align: center;
}
.bd-stat-box .value {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--accent-purple);
  margin-bottom: 4px;
  line-height: 1;
}
.bd-stat-box .label {
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.bd-stat-box.purple .value { color: var(--accent-purple); }
.bd-stat-box.orange .value { color: var(--accent-orange); }
.bd-stat-box.pink   .value { color: var(--accent-pink); }
.bd-stat-box.cyan   .value { color: var(--accent-cyan); }
.bd-stat-box.green  .value { color: var(--accent-green); }
.bd-stat-box.yellow .value { color: var(--accent-yellow); }

/* ── LISTAS (Top Scorers, Top Assists) ──────────────────────────────────── */
.bd-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.bd-list-item {
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 0.78rem;
}
.bd-list-item .rank {
  font-size: 0.6rem;
  color: var(--ink-soft);
}
.bd-list-item .name { color: var(--ink); }
.bd-list-item .val  { color: var(--accent-orange); font-size: 0.95rem; }

/* ── TABLAS (League Table, etc.) ────────────────────────────────────────── */
.bd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.bd-table th {
  font-family: var(--display);
  font-size: 0.65rem;
  color: var(--ink-soft);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
  letter-spacing: 0.04em;
}
.bd-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.bd-table tr.highlight td {
  background: rgba(255, 138, 61, 0.12);
}

/* ── SINGLE POST ───────────────────────────────────────────────────────── */
.bd-single {
  max-width: 820px;
  margin: 3rem auto;
  padding: 0 var(--container-pad);
}
.bd-single-meta {
  font-family: var(--display); font-size: 0.65rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  display: flex; gap: 1rem; align-items: center;
  letter-spacing: 0.02em;
}
.bd-single h1 {
  font-size: 1.8rem; line-height: 1.4;
  margin-bottom: 1.5rem;
}
.bd-single .bd-featured {
  margin: 0 calc(-1 * var(--container-pad)) 2rem;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--depth);
  overflow: hidden;
}
.bd-single .bd-content {
  font-family: var(--mono);   /* body en mono más cómodo para leer textos largos */
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}
.bd-single .bd-content h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  margin-top: 2.4rem;
  margin-bottom: 1rem;
  color: var(--accent-purple);
}
.bd-single .bd-content h3 {
  font-family: var(--display);
  font-size: 0.95rem;
  margin-top: 1.8rem;
}
.bd-single .bd-content a {
  color: var(--accent-purple);
  border-bottom: 2px solid var(--accent-purple);
}
.bd-single .bd-content a:hover {
  color: var(--accent-orange);
  border-bottom-color: var(--accent-orange);
}
.bd-single .bd-content img {
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--depth);
  margin: 1.5rem 0;
}
.bd-single .bd-content blockquote {
  border-left: 4px solid var(--accent-purple);
  padding-left: 1.2rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--ink-soft);
}

/* TL;DR */
.bd-tldr {
  background: var(--bg-inset);
  border: 3px solid var(--line);
  border-left: 8px solid var(--accent-orange);
  border-radius: var(--radius);
  box-shadow: var(--depth);
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
}
.bd-tldr-label {
  display: block;
  font-family: var(--display);
  font-size: 0.65rem;
  color: var(--accent-orange);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.bd-tldr p { margin: 0; font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; }

/* ── ARCHIVE / LISTING ─────────────────────────────────────────────────── */
.bd-archive {
  max-width: var(--container-max);
  margin: 3rem auto;
  padding: 0 var(--container-pad);
}
.bd-archive-hero {
  text-align: center;
  margin-bottom: 3rem;
}
.bd-archive-hero h1 {
  font-size: 2.4rem;
  color: var(--ink);
}
.bd-archive-hero p {
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.bd-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.bd-archive-card {
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--depth);
  overflow: hidden;
  transition: transform .08s, box-shadow .08s;
}
.bd-archive-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--depth-lg);
}
.bd-archive-card-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg-inset) center/cover;
  border-bottom: 3px solid var(--line);
}
.bd-archive-card-body { padding: 1.2rem; }
.bd-archive-card-cat {
  font-family: var(--display);
  font-size: 0.6rem;
  color: var(--accent-purple);
  letter-spacing: 0.05em;
}
.bd-archive-card h3 {
  font-family: var(--display);
  font-size: 0.95rem;
  margin: .6rem 0;
  line-height: 1.4;
}
.bd-archive-card h3 a { color: var(--ink); }
.bd-archive-card h3 a:hover { color: var(--accent-purple); }
.bd-archive-card-excerpt {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ── 404 ───────────────────────────────────────────────────────────────── */
.bd-404 {
  text-align: center;
  padding: 5rem var(--container-pad);
  max-width: 600px;
  margin: 0 auto;
}
.bd-404 img {
  width: 200px; image-rendering: pixelated;
  border: 4px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--depth-lg);
  margin: 0 auto 2rem;
  background: var(--bg-card);
}
.bd-404 .bd-error {
  font-family: var(--display);
  font-size: 5rem;
  color: var(--accent-purple);
  letter-spacing: 0.04em;
  text-shadow: 4px 4px 0 var(--line);
}

/* ── PAGINATION ────────────────────────────────────────────────────────── */
.bd-pagination {
  display: flex; justify-content: center; gap: .5rem;
  margin: 3rem 0 0;
}
.bd-pagination a, .bd-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  background: var(--bg-card);
  border: 3px solid var(--line);
  box-shadow: var(--depth-sm);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  padding: 0 .8rem;
}
.bd-pagination a:hover { transform: translate(-1px, -1px); box-shadow: var(--depth); color: var(--accent-purple); }
.bd-pagination .current { background: var(--accent-purple); color: #fff; }

/* ── Hamburguesa (oculto por default, visible en mobile) ──────────── */
.bd-nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: var(--bg-card);
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--depth-sm);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform .08s, box-shadow .08s;
}
.bd-nav-toggle:hover { transform: translate(-1px, -1px); box-shadow: var(--depth); }
.bd-nav-toggle:active { transform: translate(2px, 2px); box-shadow: var(--depth-press); }
.bd-nav-toggle span {
  display: block;
  width: 20px; height: 2.5px;
  background: var(--ink);
  border-radius: 1px;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  body { font-size: 12px; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }
  .bd-nav { gap: 1.1rem; }
  .bd-nav a { font-size: 0.7rem; }
}
@media (max-width: 760px) {
  .bd-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand toggle icons";
    align-items: center;
    gap: 0.5rem;
  }
  .bd-brand { grid-area: brand; }
  .bd-nav-toggle { display: flex; grid-area: toggle; justify-self: end; }
  .bd-header-icons { grid-area: icons; }

  /* Nav como dropdown debajo del header */
  .bd-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    padding: 0.5rem;
    background: #fff;
    border-top: 2px solid var(--line);
    border-bottom: 4px solid var(--line);
    box-shadow: 0 8px 0 var(--line);
    z-index: 99;
  }
  .bd-nav.is-open { display: flex; }
  .bd-nav a {
    padding: 0.9rem 0.8rem !important;
    font-size: 0.8rem !important;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
  }
  .bd-nav a:last-child { border-bottom: none; }

  /* Header sticky relative para dropdown abs */
  .bd-header { position: relative; }

  /* Footer + íconos */
  .bd-footer-inner { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .bd-footer-socials { justify-content: flex-start; }
  .bd-footer-copy { justify-content: center; text-align: center; }

  /* Brand más compacto */
  .bd-brand-name { font-size: 1rem; }
  .bd-brand-avatar { width: 52px; height: 52px; }
}

/* Mobile chico: menos gap entre íconos */
@media (max-width: 480px) {
  .bd-header-icons { gap: 4px; }
  .bd-icon-btn,
  .bd-lang-switcher .bd-lang-current,
  .bd-tz-switcher .bd-tz-current { width: 36px; height: 36px; }
  .bd-icon-btn svg { width: 18px; height: 18px; }
  .bd-nav-toggle { width: 36px; height: 36px; }
  .bd-brand-avatar { width: 46px; height: 46px; }
  .bd-brand-name { font-size: 0.9rem; }
}