/* Contenedor del portal */
  #global-tooltip{ position:fixed; z-index:9999; pointer-events:none; }

  /* Caja del tooltip */
  .bp-tip{
    position:relative;
    background:var(--base-900);
    color:var(--zinc-200);
    border:1px solid rgba(233,172,21,.25);
    border-radius:16px;
    padding:1rem .75rem;
    box-shadow:
      0 0 0 1px rgba(233,172,21,.15),
      0 14px 34px -14px rgba(233,172,21,.25);
  }

  .bp-tip__row{ display:flex; align-items:flex-start; gap:.75rem; }
  .bp-tip__favicon{ width:20px; height:20px; border-radius:6px; margin-top:2px; }
  .bp-tip__title{ font-size:.875rem; font-weight:700; color:#fff; }

  .bp-tip__desc{ margin-top:.25rem; font-size:12px; line-height:1.35; color:var(--zinc-300); }
  .bp-tip__desc.is-empty{ color:var(--zinc-500); font-style:italic; }

  .bp-tip__meta{
    margin-top:.5rem; font-size:11px; color:var(--zinc-400);
    display:flex; gap:.5rem; flex-wrap:wrap;
  }
  .bp-pill{
    display:inline-flex; align-items:center; gap:.25rem;
    padding:2px 8px; border-radius:10px;
    background:var(--base-850);
    box-shadow: inset 0 0 0 1px rgba(233,172,21,.20);
    color:var(--zinc-200);
  }
  .bp-pill b{ color:#e6e6e6; font-weight:700; }

  .bp-tip__flags{
    margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  }
  .bp-flag-item{ display:inline-flex; align-items:center; gap:.375rem; }
  .bp-flag{ height:12px; width:auto; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
  .bp-flag-code{ font-size:11px; color:var(--zinc-300); }
  .bp-flag-sep{ color:#71717a; margin:0 .25rem; }

  /* Flecha */
  .bp-tip__arrow{
    position:absolute; left:50%; bottom:-6px;
    width:12px; height:12px;
    transform:translateX(-50%) rotate(45deg);
    background:var(--base-900);
    border-right:1px solid rgba(233,172,21,.25);
    border-bottom:1px solid rgba(233,172,21,.25);
  }
/* ===== TOKENS ===== */
:root{
  --base-950:#0b0b0c; --base-900:#121214; --base-850:#161618; --base-800:#1b1b1f;
  --line:#2a2a2e; --accent:#e9ac15; --accent-dark:#c58312;
  --zinc-200:#e5e7eb; --zinc-300:#d1d5db; --zinc-400:#9ca3af; --zinc-500:#6b7280;
  --shadow-glow:0 0 0 1px rgba(233,172,21,.22), 0 14px 34px -14px rgba(233,172,21,.25);
}

/* ===== BASE ===== */
html,body{height:100%;background:var(--base-950);color:var(--zinc-200);
  font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif}
.h-full{height:100%} .font-ui{font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif}
.text-white{color:#fff}.text-black{color:#000}
.text-zinc-200{color:var(--zinc-200)}.text-zinc-300{color:var(--zinc-300)}
.text-zinc-400{color:var(--zinc-400)}.text-zinc-500{color:var(--zinc-500)}
.text-accent{color:var(--accent)} .text-transparent{color:transparent}
.select-none{user-select:none}

/* ===== BACKGROUNDS ===== */
.bg-base-950{background-color:var(--base-950)}
.bg-base-900{background-color:var(--base-900)}
.bg-base-850{background-color:var(--base-850)}
.bg-base-800{background-color:var(--base-800)}
/* clases con "/" hay que escaparlas en CSS */
.bg-base-950\/85{background-color:rgba(11,11,12,.85)}

/* Gradientes exactos que usas */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from,#000),var(--tw-to,#000))}
.bg-gradient-to-br{background-image:linear-gradient(135deg,var(--tw-from,#000),var(--tw-via,transparent),var(--tw-to,transparent))}
.from-\[\#e9ac15\]{--tw-from:#e9ac15}
.to-\[\#c58312\]{--tw-to:#c58312}
.from-\[\#e9ac15\]\/30{--tw-from:rgba(233,172,21,.30)}
.via-\[\#e9ac15\]\/10{--tw-via:rgba(233,172,21,.10)}
.to-transparent{--tw-to:transparent}

/* ===== BORDES / RINGS / RADIOS / SOMBRAS ===== */
.border{border:1px solid currentColor} .border-0{border:0}
.border-b{border-bottom:1px solid currentColor} .border-t{border-top:1px solid currentColor}
.border-line\/70{border-color:rgba(42,42,46,.70)} .border-line\/60{border-color:rgba(42,42,46,.60)}
.border-accent\/15{border-color:rgba(233,172,21,.15)} .border-accent\/40{border-color:rgba(233,172,21,.40)}
.hover\:border-accent\/35:hover{border-color:rgba(233,172,21,.35)}

.ring-1{box-shadow:0 0 0 1px var(--ring-color) inset}
.ring-line\/80{--ring-color:rgba(42,42,46,.80)}
.ring-accent\/20{--ring-color:rgba(233,172,21,.20)}
.ring-accent\/30{--ring-color:rgba(233,172,21,.30)}
.ring-accent\/40{--ring-color:rgba(233,172,21,.40)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--ring-focus-color)}
.focus\:ring-accent\/50:focus{--ring-focus-color:rgba(233,172,21,.50)}

.rounded-md{border-radius:12px} .rounded-lg{border-radius:16px}
.rounded-xl{border-radius:20px} .rounded-2xl{border-radius:22px} .rounded-full{border-radius:999px}

.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.25)}
.shadow-glow{box-shadow:var(--shadow-glow)}
.shadow-\[0_0_0_1px_rgba\(233,172,21,.15\)\]{box-shadow:0 0 0 1px rgba(233,172,21,.15)}
.hover\:shadow-glow:hover{box-shadow:var(--shadow-glow)}

/* ===== LAYOUT ===== */
.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}
.backdrop-blur{backdrop-filter:blur(8px)}
.grid{display:grid}.flex{display:flex}.inline-flex{display:inline-flex}
.place-items-center{place-items:center}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.shrink-0{flex-shrink:0}.min-w-0{min-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== SPACING / SIZING ===== */
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-\[1600px\]{max-width:1600px}
.px-4{padding-left:1rem;padding-right:1rem}
.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
@media (min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.p-3{padding:.75rem} .p-4{padding:1rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.pr-1{padding-right:.25rem}
.mt-2{margin-top:.5rem} .mb-2{margin-bottom:.5rem} .mr-1{margin-right:.25rem} .ml-0{margin-left:0}

.h-16{height:4rem}.h-9{height:2.25rem}.w-9{width:2.25rem}
.h-7{height:1.75rem}.w-7{width:1.75rem}
.h-6{height:1.5rem}.w-6{width:1.5rem}
.h-5{height:1.25rem}.w-5{width:1.25rem}
.h-4{height:1rem}.w-4{width:1rem}
.w-28{width:7rem}
.min-w-\[16px\]{min-width:16px}
.min-w-\[1\.25rem\]{min-width:1.25rem}
.max-h-\[360px\]{max-height:360px}

/* ===== TYPO ===== */
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}
.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[1\.05rem\]{font-size:1.05rem}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-none{line-height:1}
.tracking-wide{letter-spacing:.02em}.tracking-tight{letter-spacing:-.01em}
.uppercase{text-transform:uppercase}
.underline{text-decoration:underline}.underline-offset-4{text-underline-offset:4px}
.align-\[-1px\]{vertical-align:-1px}

/* ===== LINKS ===== */
a{color:inherit;text-decoration:none}
a.hover\:underline:hover{text-decoration:underline}

/* ===== COMPONENTES (los que usas) ===== */
/* Tarjeta */
.card{background:var(--base-900);border:1px solid rgba(255,255,255,.10);border-radius:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.card:hover{border-color:rgba(233,172,21,.35);box-shadow:var(--shadow-glow)}
.card-inner{padding:.75rem}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;font-weight:600;
  border-radius:20px;line-height:1;border:1px solid rgba(0,0,0,.18);transition:.15s}
.btn-accent{background:var(--accent);color:#100a00}
.btn-accent-grad{background-image:linear-gradient(90deg,var(--accent),var(--accent-dark));color:#100a00;
  border:1px solid rgba(233,172,21,.35)}
.btn:hover{filter:brightness(1.03);box-shadow:var(--shadow-glow)}

/* Input búsqueda */
.input{background:var(--base-850);color:#e9e9e9;border-radius:12px;padding:.625rem .9rem;outline:none}
.input::placeholder{color:var(--zinc-500)}
/* Simula ring-1 ring-line/80 focus:ring-2 focus:ring-accent/50 */
.input{box-shadow:0 0 0 1px rgba(42,42,46,.80) inset}
.input:focus{box-shadow:0 0 0 2px rgba(233,172,21,.50)}

/* Icon button (lupa/detalle) */
.inline-flex{display:inline-flex}.btn-icon{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;border-radius:10px;background:var(--base-850);transition:.15s}
.btn-icon:hover,.hover\:bg-base-800:hover{background:var(--base-800)}

/* Fila lista hover */
.js-tip-row{height:28px;display:flex;align-items:center;justify-content:space-between;border-radius:8px;padding:0 .5rem}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}

/* Badges (contador bookmarks) */
.hidden{display:none}
.rounded-full{border-radius:999px}

/* ===== FLAGS ===== */
.flag{display:inline-block;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(0,0,0,.4);border-radius:6px;box-shadow:0 2px 10px -6px rgba(0,0,0,.7)}
.flag-xs{width:16px;height:auto}.flag-sm{width:20px;height:auto}.flag-md{width:24px;height:auto}.flag-lg{width:32px;height:auto}.flag-xl{width:40px;height:auto}
.flag-3x2{aspect-ratio:3/2}
.flag-round{width:24px;height:24px;border-radius:999px;object-fit:cover;aspect-ratio:1/1}

/* ===== SCROLLBAR ===== */
*{scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:999px}

.custom-scroll{overflow-y:hidden}
.custom-scroll:hover{overflow-y:auto}
.custom-scroll::-webkit-scrollbar{width:4px;height:4px}
.custom-scroll::-webkit-scrollbar-thumb{background:rgba(120,120,120,.6);border-radius:9999px}
.custom-scroll::-webkit-scrollbar-thumb:hover{background:rgba(180,180,180,.8)}
.custom-scroll::-webkit-scrollbar-track{background:transparent}
.custom-scroll{scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.6) transparent}

/* ===== TOOLTIP PORTAL ===== */
#global-tooltip{position:fixed;z-index:9999;pointer-events:none}

/* ===== MASONRY GRID ===== */
#masonry{display:grid;grid-auto-rows:6px;gap:.5rem}
@media (min-width:640px){#masonry{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){#masonry{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){#masonry{grid-template-columns:repeat(5,minmax(0,1fr))}}
.masonry-item{contain:layout}

/* ===== UTILIDADES EXTRA PRESENTES ===== */
.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[1\.05rem\]{font-size:1.05rem}
.min-w-\[1\.25rem\]{min-width:1.25rem}.h-5{height:1.25rem}
.px-1{padding-left:.25rem;padding-right:.25rem}

/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none!important;
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-50 {
    z-index: 50;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mr-0 {
    margin-right: calc(var(--spacing) * 0);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-full {
    height: 100%;
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-\[1\.25rem\] {
    min-width: 1.25rem;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-\[\#e9ac15\] {
    --tw-gradient-from: #e9ac15;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#e9ac15\]\/25 {
    --tw-gradient-from: color-mix(in oklab, #e9ac15 25%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#e9ac15\]\/30 {
    --tw-gradient-from: color-mix(in oklab, #e9ac15 30%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-\[\#e9ac15\]\/10 {
    --tw-gradient-via: color-mix(in oklab, #e9ac15 10%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-\[\#c58312\] {
    --tw-gradient-to: #c58312;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-clip-text {
    background-clip: text;
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .text-center {
    text-align: center;
  }
  .align-\[-1px\] {
    vertical-align: -1px;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[1\.05rem\] {
    font-size: 1.05rem;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-transparent {
    color: transparent;
  }
  .text-white {
    color: var(--color-white);
  }
  .text-zinc-200 {
    color: var(--color-zinc-200);
  }
  .text-zinc-300 {
    color: var(--color-zinc-300);
  }
  .text-zinc-400 {
    color: var(--color-zinc-400);
  }
  .text-zinc-500 {
    color: var(--color-zinc-500);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .\[text-shadow\:0_1px_1px_rgba\(255\,255\,255\,\.4\)\] {
    text-shadow: 0 1px 1px rgba(255,255,255,.4);
  }
  .placeholder\:text-zinc-500 {
    &::placeholder {
      color: var(--color-zinc-500);
    }
  }
  .hover\:bg-\[\#c58312\] {
    &:hover {
      @media (hover: hover) {
        background-color: #c58312;
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .sm\:mr-1 {
    @media (width >= 40rem) {
      margin-right: calc(var(--spacing) * 1);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:w-72 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 72);
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-5 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-3xl {
    @media (width >= 40rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-5 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

*{scrollbar-width:thin}
    ::-webkit-scrollbar{width:10px;height:10px}
    ::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:999px}

    .custom-scroll { overflow-y:hidden; }
    .custom-scroll:hover { overflow-y:auto; }
    .custom-scroll::-webkit-scrollbar { width:4px; }
    .custom-scroll::-webkit-scrollbar-thumb { background:rgba(120,120,120,.6); border-radius:9999px; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background:rgba(180,180,180,.8); }
    .custom-scroll::-webkit-scrollbar-track { background:transparent; }
    .custom-scroll { scrollbar-width:thin; scrollbar-color:rgba(120,120,120,.6) transparent; }

    #global-tooltip { position:fixed; z-index:9999; pointer-events:none; }

    #masonry { display:grid; grid-auto-rows:6px; gap:.5rem; }
    @media (min-width: 640px) { #masonry { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (min-width:1024px) { #masonry { grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (min-width:1280px) { #masonry { grid-template-columns: repeat(5, minmax(0,1fr)); } }

    .masonry-item { contain: layout; }

    /* SOLO CSS: cambiar número por bookmark en hover */
    .metric-val{display:inline-block;}
    .bm-ico{display:none; cursor:pointer;}
    .js-tip-row:hover .metric-val{display:none;}
    .js-tip-row:hover .bm-ico{display:inline-flex;}

    @media (min-width: 640px){
      .sm\:block{ display:block !important; }
      .sm\:inline-block{ display:inline-block !important; }
      .sm\:flex{ display:flex !important; }
    }	
	
	
  /* Empuja el bloque de acciones a la derecha */
  .bp-actions{ margin-left: auto; }

  /* Responsive helpers */
  .bp-search-inline { display: none; }
  .bp-search-trigger { display: inline-grid; }
  .bookmarks-text { display: none; }

  @media (min-width:640px){
    .bp-search-inline { display: block; }
    .bp-search-trigger { display: none; }
    .bookmarks-text { display: inline; }
    .bookmarks-link i{ margin-right: 8px; } /* más aire en desktop */
  }

  @media (max-width:639.98px){
    .bp-actions{ gap: 6px; }
  }

  /* Overlay búsqueda móvil */
  .bp-search-overlay{
    display:none;
    position:fixed; inset:0; z-index:60;
    background:rgba(0,0,0,.55);
    backdrop-filter:saturate(120%) blur(4px);
  }
  .bp-search-overlay.is-open{ display:block; }
  .bp-search-sheet{
    position:fixed; left:0; right:0; top:0;
    padding:10px;
    background:rgba(18,18,20,.98);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }

/* Por defecto: oculto */
#bp-open-search{
  display: none !important;
}

/* Solo en móvil */
@media (max-width: 639.98px){
  #bp-open-search{
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 9999px !important;     /* círculo perfecto */
    background-color: #161618 !important; /* igual que bg-base-850 */
    border: 0.25px solid rgba(255,255,255,.1) !important;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
  }
  #bp-open-search:hover{
    background-color: #1b1b1f !important; 
    border-color: rgba(233,172,21,.4) !important;
  }
  #bp-open-search i{
    font-size: 1.05rem !important;
    color: #e9ac15 !important; /* icono dorado */
    line-height: 1 !important;
  }

  /* oculta buscador inline */
  .bp-search-inline{ display: none !important; }
}

/* Desktop: buscador inline visible, botón oculto */
@media (min-width: 640px){
  .bp-search-inline{ display: block !important; }
  #bp-open-search{ display: none !important; }
}



.bp-accordion-wrap{
  max-width: 1000px;
  margin: 16px auto 20px;
  padding: 0 12px;
}
.bp-accordion-title{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #e5e5e7;
  margin: 0 0 8px 2px;
  text-transform: uppercase;
  opacity: .85;
}

.bp-acc{
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #121214; /* dark card background */
  overflow: hidden;
}
.bp-acc[open]{
  border-color: rgba(233,172,21,.35);
  box-shadow: 0 0 0 1px rgba(233,172,21,.15),
              0 10px 20px -12px rgba(233,172,21,.15);
}
.bp-acc-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  color: #e7e7ea;
  font-weight: 600;
  user-select: none;
}
.bp-acc-head:hover{
  background: rgba(255,255,255,.03);
}
.bp-acc-head::-webkit-details-marker{ display: none; }
.bp-acc-head::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid #e9ac15;
  border-bottom: 2px solid #e9ac15;
  transform: rotate(-45deg);
  transition: transform .2s ease, opacity .2s ease;
  opacity: .9;
}
.bp-acc[open] .bp-acc-head::after{
  transform: rotate(45deg);
}

.bp-acc-body{
  padding: 12px 14px 14px;
  font-size: 14px;
  color: #c7c7cc;
  line-height: 1.55;
  background: #0f0f11; /* slightly darker inside */
  border-top: 1px solid rgba(255,255,255,.06);
}
.bp-acc-body em{ color: #e9ac15; font-style: normal; }
.bp-acc-body strong{ color: #e9ac15; font-weight: 700; }