.hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;

  /* FULL BLEED REAL: el fondo sale del contenedor y llega a ambos bordes */
  width: 100vw;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;

  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #020a14;
  box-shadow: none;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: linear-gradient(90deg, rgba(0,4,10,.02) 0%, rgba(0,7,14,.06) 29%, rgba(1,9,17,.26) 55%, rgba(1,8,16,.65) 81%, rgba(1,8,16,.78) 100%), url('/static/img/home/hero-bg.webp');
  background-repeat: no-repeat;
  background-position: center, center 42%;
  background-size: 100% 100%, cover;
  filter: saturate(1.28) contrast(1.1) brightness(.96);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 51% 42%, rgba(0,183,255,.17), transparent 27%), linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,4,10,.2));
}
.hero-shell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr) 278px;
  gap: 14px;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px;
}
.hero-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-copy { min-width: 0; width: 100%; }
.hero-kicker { display: none; }
.hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 2.72vw, 46px);
  font-weight: 950;
  line-height: .94;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow: 0 4px 22px rgba(0,0,0,.86);
}
.hero-title span, .hero-title strong { display: inline; }
.hero-title span { color: #fff; }
.hero-title strong {
  margin-left: .16em;
  color: #29c8ff;
  font-weight: inherit;
  text-shadow: 0 0 31px rgba(41,200,255,.39), 0 4px 20px rgba(0,0,0,.82);
}
.hero-subtitle {
  margin: 8px 0 0;
  color: #d7e3eb;
  font-size: clamp(11px, .83vw, 14px);
  line-height: 1.18;
  text-shadow: 0 2px 10px rgba(0,0,0,.82);
}
.hero-indicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: min(100%, 790px);
  margin: 18px auto 0;
}
.hero-indicator {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(48,162,224,.44);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(5,28,47,.93), rgba(2,14,24,.97));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.18);
  text-align: left;
}
.hero-indicator-icon {
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(48,191,255,.35);
  border-radius: 9px;
  color: #32c4ff;
  background: rgba(15,83,124,.33);
  font-size: 16px;
  text-shadow: 0 0 14px rgba(48,191,255,.6);
}
.hero-indicator > div { min-width: 0; }
.hero-indicator dt {
  overflow: hidden;
  color: #aebdc9;
  font-size: clamp(7px, .52vw, 9px);
  font-weight: 600;
  line-height: 1.08;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.hero-indicator dd {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(17px, 1.23vw, 21px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
.hero-card-most-played {
  grid-column: 3;
  position: relative;
  align-self: stretch;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  grid-template-areas: "body art";
  overflow: hidden;
  border: 1px solid rgba(57,190,250,.75);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(5,29,48,.94), rgba(2,13,24,.97));
  box-shadow: inset 0 0 46px rgba(0,141,220,.17), 0 8px 20px rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
}
.hero-card-body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 10px 18px 20px;
}
.hero-card-art {
  grid-area: art;
  position: relative;
  display: grid;
  place-items: center;
  margin: 17px 16px 17px 0;
  overflow: hidden;
  border: 1px solid rgba(73,200,255,.74);
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(0,8,16,0), rgba(0,8,16,.2)), url('/static/img/home/hero-bg.webp');
  background-position: 77% 43%;
  background-size: auto 390px;
  box-shadow: 0 0 24px rgba(51,189,255,.2);
}
.hero-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(70,202,255,.25), transparent 48%);
}
.hero-card-art-glyph {
  position: relative;
  z-index: 1;
  color: #51d1ff;
  font-size: clamp(38px, 3.2vw, 54px);
  text-shadow: 0 0 34px rgba(80,204,255,.8);
}
.hero-card-eyebrow { color: #4bccff; font-size: clamp(8px,.58vw,10px); font-weight: 950; letter-spacing: .07em; }
.hero-card-body h2 { margin: 9px 0 0; color: #fff; font-size: clamp(18px,1.4vw,23px); line-height: 1; font-weight: 950; }
.hero-card-value { margin-top: 8px; color: #b96bff; font-size: clamp(22px,1.8vw,30px); line-height: .94; font-weight: 950; }
.hero-card-value--pending { font-size: clamp(16px,1.25vw,21px); }
.hero-card-caption { margin-top: 5px; color: #a5b7c5; font-size: clamp(7px,.55vw,9px); }
.hero-card-link { margin-top: 13px; color: #4acaff; font-size: clamp(8px,.57vw,10px); font-weight: 900; }

@media (min-width: 1101px) and (max-width: 1390px) {
  .hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .hero-shell { grid-template-columns: 278px minmax(0,1fr) 278px; gap: 10px; padding: 10px; }
  .hero-title { font-size: clamp(32px,2.65vw,37px); }
  .hero-subtitle { margin-top: 6px; font-size: 10px; }
  .hero-indicators { gap: 7px; margin-top: 11px; }
  .hero-indicator { min-height: 46px; gap: 7px; padding: 5px 8px; }
  .hero-indicator-icon { flex-basis: 30px; width: 30px; height: 30px; font-size: 14px; }
  .hero-indicator dt { font-size: 7px; }
  .hero-indicator dd { margin-top: 3px; font-size: 16px; }
  .hero-card-body { padding: 13px 8px 13px 15px; }
  .hero-card-art { margin: 13px 12px 13px 0; }
}

@media (min-width: 1391px) {
  .hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

@media (min-width: 1101px) and (max-height: 680px) {
  .hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

@media (max-width: 1100px) {
  .hero { height: auto; min-height: 0; border-radius: 0; }
  .hero-shell { grid-template-columns: 1fr; height: auto; padding: 16px 12px; }
  .hero-main, .hero-card-most-played { grid-column: 1; }
  .hero-main { padding: 22px 8px 12px; }
  .hero-title { font-size: clamp(29px,5vw,43px); white-space: normal; }
  .hero-title span, .hero-title strong { display: inline; }
  .hero-subtitle { max-width: 680px; }
  .hero-indicators { width: 100%; margin-top: 16px; }
  .hero-card-most-played { justify-self: center; width: min(100%,480px); min-height: 150px; }
}

@media (max-width: 620px) {
  .hero-shell { padding: 14px 10px; }
  .hero-main { padding: 18px 2px 8px; }
  .hero-title { font-size: clamp(27px,8vw,35px); }
  .hero-title span, .hero-title strong { display: block; margin-left: 0; }
  .hero-subtitle { font-size: 11px; }
  .hero-indicators { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .hero-indicator { min-height: 52px; }
  .hero-indicator dt { font-size: 7px; }
  .hero-card-most-played { grid-template-columns: minmax(0,1fr) 118px; min-height: 145px; }
  .hero-card-body { padding: 15px; }
  .hero-card-art { margin: 11px 11px 11px 0; }
}

@media (max-width: 390px) {
  .hero-indicator { gap: 6px; padding-inline: 7px; }
  .hero-indicator-icon { flex-basis: 29px; width: 29px; height: 29px; }
}


/* ==========================================================
   FIX FINAL — HERO BORDE A BORDE
   La imagen/fondo ocupa TODO el HERO. El contenido conserva
   su padding interno, pero el fondo no queda encerrado.
   ========================================================== */

@media (min-width: 1101px) {
  .hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .hero::before,
  .hero::after {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  .hero::before {
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat !important;
  }
}


/* ==========================================================
   FIX SUPERIOR SIN MOVER EL CONTENIDO
   Extiende SOLO el fondo 16px hacia arriba.
   El título, KPIs y tarjeta derecha permanecen en su sitio.
   ========================================================== */

@media (min-width: 1101px) {
  .hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .hero::before,
  .hero::after {
    top: -16px !important;
    bottom: 0 !important;
    height: auto !important;
  }

  /* El contenido sigue recortándose/ordenándose dentro del hero normal */
  .hero-shell {
    position: relative !important;
    z-index: 1 !important;
  }

  .hero-card-most-played {
    align-self: stretch !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* ==========================================================
   KPI HERO — RÉPLICA HOME FINAL 1:1
   CSS-only sobre el HTML actual. Los glifos viejos se ocultan
   y se usan SVG locales para reproducir los iconos de referencia.
   ========================================================== */

@media (min-width: 1101px) {
  .hero-indicators {
    display: grid !important;
    grid-template-columns: 122px 121px 134px 116px !important;
    justify-content: center !important;
    gap: 6px !important;

    width: 511px !important;
    max-width: 511px !important;
    margin: 17px auto 0 !important;
  }

  .hero-indicator {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 39px !important;
    min-height: 39px !important;

    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 3px 7px 3px 5px !important;

    border: 1px solid rgba(41, 126, 173, .16) !important;
    border-radius: 6px !important;

    background:
      linear-gradient(
        145deg,
        rgba(3, 19, 32, .67),
        rgba(2, 13, 22, .75)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.014),
      0 2px 6px rgba(0,0,0,.08) !important;

    text-align: left !important;
  }

  .hero-indicator-icon {
    box-sizing: border-box !important;
    flex: 0 0 29px !important;
    width: 29px !important;
    height: 29px !important;

    display: block !important;

    border: 0 !important;
    border-radius: 5px !important;

    background-color: rgba(4, 34, 54, .48) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;

    /* Oculta ◆ ◉ ✦ ◇ del HTML actual */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  .hero-indicator--tournaments .hero-indicator-icon {
    background-image: url('/static/img/home/kpi-tournaments.svg') !important;
  }

  .hero-indicator--participations .hero-indicator-icon {
    background-image: url('/static/img/home/kpi-players.svg') !important;
  }

  .hero-indicator--archetypes .hero-indicator-icon {
    background-image: url('/static/img/home/kpi-decks.svg') !important;
  }

  .hero-indicator--provinces .hero-indicator-icon {
    background-color: rgba(60, 47, 8, .42) !important;
    background-image: url('/static/img/home/kpi-matches.svg') !important;
  }

  .hero-indicator > div {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .hero-indicator dt {
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    color: #aebbc5 !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    text-overflow: clip !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .hero-indicator dd {
    margin: 2px 0 0 !important;
    padding: 0 !important;

    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    white-space: nowrap !important;
  }
}



/* ==========================================================
   HERO FINAL — CENTRADO + TARJETA SEGÚN HOME FINAL
   Sólo afecta el bloque central y la tarjeta "Carta más jugada".
   ========================================================== */

@media (min-width: 1101px) {
  /* Columnas laterales simétricas = título/KPIs centrados respecto del HERO completo */
  .hero-shell {
    grid-template-columns: 278px minmax(0, 1fr) 278px !important;
    gap: 10px !important;
  }

  .hero-main {
    grid-column: 2 !important;
    transform: none !important;
  }

  .hero-card-most-played {
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;

    width: 260px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    grid-template-areas: "body art" !important;

    position: relative !important;
    overflow: hidden !important;

    border: 1px solid rgba(42, 161, 222, .52) !important;
    border-radius: 9px !important;

    background:
      linear-gradient(
        145deg,
        rgba(4, 23, 39, .90),
        rgba(2, 13, 23, .95)
      ) !important;

    box-shadow:
      inset 0 0 28px rgba(0, 125, 195, .08),
      0 5px 14px rgba(0,0,0,.22) !important;
  }

  .hero-card-body {
    grid-area: body !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    padding: 10px 6px 14px 12px !important;
  }

  .hero-card-heading {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .hero-card-crown {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    color: #ffc62e !important;
  }

  .hero-card-crown svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .hero-card-eyebrow {
    color: #f2f6f9 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .hero-card-period {
    margin: 2px 0 0 22px !important;
    color: #9eafbb !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  .hero-card-body h2 {
    margin: 9px 0 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .hero-card-meta {
    margin-top: 4px !important;
    color: #c1cbd2 !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .hero-card-meta strong {
    color: #fff !important;
    font-weight: 900 !important;
  }

  .hero-card-change {
    margin-top: 5px !important;
    color: #34ef85 !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .hero-card-value {
    margin-top: 6px !important;
    color: #ba6cff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .hero-card-value--pending {
    font-size: 14px !important;
  }

  .hero-card-caption {
    margin-top: 4px !important;
    color: #95a8b5 !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  .hero-card-link {
    margin-top: auto !important;
    color: #42c9ff !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  .hero-card-art {
    grid-area: art !important;
    position: relative !important;

    display: grid !important;
    place-items: center !important;

    width: 68px !important;
    height: 98px !important;

    margin: 10px 8px 10px 0 !important;

    overflow: hidden !important;
    border: 1px solid rgba(255, 198, 46, .76) !important;
    border-radius: 6px !important;

    background-image:
      linear-gradient(180deg, rgba(0,8,16,.03), rgba(0,8,16,.26)),
      url('/static/img/home/hero-bg.webp') !important;

    background-position: 76% 42% !important;
    background-size: auto 270px !important;

    box-shadow:
      inset 0 0 18px rgba(58,196,255,.08),
      0 0 12px rgba(0,0,0,.18) !important;
  }

  .hero-card-art::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 38%, rgba(70,202,255,.16), transparent 50%) !important;
  }

  .hero-card-art-glyph {
    position: relative !important;
    z-index: 1 !important;

    color: #51d1ff !important;
    font-size: 31px !important;
    text-shadow: 0 0 22px rgba(80,204,255,.72) !important;
  }

  .hero-card-dots {
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    gap: 4px !important;
  }

  .hero-card-dots span {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #3387c7 !important;
  }

  .hero-card-dots span:first-child {
    background: #43b9ff !important;
  }
}


/* ==========================================================
   HOME — CARTA MÁS JUGADA REAL V1
   Sólo afecta la tarjeta derecha del HERO.
   ========================================================== */

.hero-card-art--real{
  background:#06131d !important;
  background-image:none !important;
  padding:0 !important;
}

.hero-card-art--real::after{
  background:
    linear-gradient(180deg,rgba(1,8,14,.02),rgba(1,8,14,.16)) !important;
  pointer-events:none;
}

.hero-card-real-image{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#06131d;
}

.hero-card-most-played .hero-card-body h2{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hero-card-sample{
  display:block;
  margin-top:5px;
  color:#94aebb;
  font-size:clamp(7.4px,.52vw,8.8px);
  font-weight:700;
  line-height:1.12;
  white-space:nowrap;
}

@media (min-width:1101px) and (max-width:1390px){
  .hero-card-sample{
    font-size:7.2px;
  }
}

@media (max-width:620px){
  .hero-card-sample{
    font-size:8px;
  }
}


/* ==========================================================
   HOME — CARTAS POR ZONA V1
   Sólo modifica la tarjeta derecha del HERO.
   ========================================================== */

#home-page .hero-card-leaders{
  display:block;
  position:relative;
  min-width:0;
}

#home-page .hero-card-zone-input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}

#home-page .hero-card-zone-tabs{
  position:absolute;
  z-index:8;
  top:9px;
  left:12px;
  right:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  padding:3px;
  border:1px solid rgba(64,184,239,.28);
  border-radius:8px;
  background:rgba(1,12,22,.84);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  backdrop-filter:blur(5px);
}

#home-page .hero-card-zone-tabs label{
  min-width:0;
  padding:5px 2px 4px;
  border-radius:5px;
  color:#8fa8b7;
  font-size:7.4px;
  font-weight:950;
  line-height:1;
  letter-spacing:.035em;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}

#home-page #hero-card-zone-reino:checked ~ .hero-card-zone-tabs label[for="hero-card-zone-reino"],
#home-page #hero-card-zone-boveda:checked ~ .hero-card-zone-tabs label[for="hero-card-zone-boveda"],
#home-page #hero-card-zone-side:checked ~ .hero-card-zone-tabs label[for="hero-card-zone-side"]{
  color:#e8f8ff;
  background:linear-gradient(180deg,rgba(20,138,198,.72),rgba(7,76,115,.84));
  box-shadow:inset 0 0 0 1px rgba(93,209,255,.38),0 0 12px rgba(42,189,249,.12);
}

#home-page .hero-card-leader-stage{
  position:absolute;
  inset:0;
  min-width:0;
}

#home-page .hero-card-leader-panel{
  position:absolute;
  inset:0;
  display:none;
  grid-template-columns:minmax(0,1fr) 42%;
  grid-template-areas:"body art";
  min-width:0;
  padding-top:28px;
}

#home-page #hero-card-zone-reino:checked ~ .hero-card-leader-stage .hero-card-leader-panel--reino,
#home-page #hero-card-zone-boveda:checked ~ .hero-card-leader-stage .hero-card-leader-panel--boveda,
#home-page #hero-card-zone-side:checked ~ .hero-card-leader-stage .hero-card-leader-panel--side{
  display:grid;
}

#home-page .hero-card-leaders .hero-card-body{
  grid-area:body;
  padding:18px 7px 13px 16px;
}

#home-page .hero-card-leaders .hero-card-art{
  grid-area:art;
  margin:13px 12px 13px 0;
}

#home-page .hero-card-leaders .hero-card-eyebrow{
  font-size:7.1px;
  line-height:1.05;
}

#home-page .hero-card-leaders .hero-card-body h2{
  margin-top:5px;
  font-size:clamp(12px,.88vw,15px);
  line-height:1.02;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#home-page .hero-card-leaders .hero-card-value{
  margin-top:7px;
  font-size:clamp(20px,1.48vw,25px);
  line-height:.95;
}

#home-page .hero-card-leaders .hero-card-caption{
  margin-top:3px;
  font-size:7.6px;
}

#home-page .hero-card-metrics{
  display:grid;
  gap:3px;
  margin-top:8px;
  color:#91a8b6;
  font-size:7.1px;
  font-weight:700;
  line-height:1.05;
}

#home-page .hero-card-metrics strong{
  color:#dff6ff;
  font-size:7.7px;
  font-weight:950;
}

#home-page .hero-card-leaders .hero-card-art--real{
  background:#06131d !important;
  background-image:none !important;
  padding:0 !important;
}

#home-page .hero-card-leaders .hero-card-real-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#06131d;
}

#home-page .hero-card-image-pending{
  position:absolute;
  z-index:2;
  bottom:8px;
  color:#6f8a99;
  font-size:6.4px;
  font-weight:900;
  letter-spacing:.12em;
}

@media (max-width:620px){
  #home-page .hero-card-zone-tabs label{font-size:8px;}
  #home-page .hero-card-leaders .hero-card-body h2{font-size:14px;}
  #home-page .hero-card-metrics{font-size:7.6px;}
  #home-page .hero-card-metrics strong{font-size:8.2px;}
}


/* ==========================================================
   HOME — CARTAS V1.1 · selector compacto
   Reemplaza las 3 pestañas grandes por 3 puntos discretos.
   Recupera espacio vertical para nombre, métricas e imagen.
   ========================================================== */

#home-page .hero-card-zone-tabs{
  display:none !important;
}

#home-page .hero-card-zone-dots{
  position:absolute;
  z-index:10;
  right:13px;
  bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 5px;
  border:1px solid rgba(64,184,239,.20);
  border-radius:999px;
  background:rgba(1,12,22,.70);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  backdrop-filter:blur(4px);
}

#home-page .hero-card-zone-dots label{
  display:block;
  width:7px;
  height:7px;
  margin:0;
  padding:0;
  border:1px solid rgba(154,205,229,.55);
  border-radius:50%;
  background:rgba(118,153,171,.24);
  cursor:pointer;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

#home-page .hero-card-zone-dots label:hover{
  transform:scale(1.18);
  border-color:rgba(93,209,255,.88);
}

#home-page #hero-card-zone-reino:checked ~ .hero-card-zone-dots label[for="hero-card-zone-reino"],
#home-page #hero-card-zone-boveda:checked ~ .hero-card-zone-dots label[for="hero-card-zone-boveda"],
#home-page #hero-card-zone-side:checked ~ .hero-card-zone-dots label[for="hero-card-zone-side"]{
  background:#25b9f3;
  border-color:#7bdcff;
  box-shadow:0 0 8px rgba(37,185,243,.75);
  transform:scale(1.16);
}

#home-page .hero-card-leader-panel{
  padding-top:0 !important;
}

#home-page .hero-card-leaders .hero-card-body{
  padding:12px 7px 12px 15px !important;
}

#home-page .hero-card-leaders .hero-card-art{
  margin:8px 11px 8px 0 !important;
}

#home-page .hero-card-leaders .hero-card-eyebrow{
  font-size:7.4px !important;
}

#home-page .hero-card-leaders .hero-card-body h2{
  margin-top:4px !important;
  font-size:clamp(13px,.96vw,16px) !important;
  line-height:1.01 !important;
}

#home-page .hero-card-leaders .hero-card-value{
  margin-top:6px !important;
  font-size:clamp(21px,1.56vw,27px) !important;
}

#home-page .hero-card-leaders .hero-card-caption{
  font-size:7.8px !important;
}

#home-page .hero-card-metrics{
  gap:3px !important;
  margin-top:7px !important;
  padding-right:3px;
  font-size:7.35px !important;
}

#home-page .hero-card-metrics strong{
  font-size:8px !important;
}

@media (max-width:620px){
  #home-page .hero-card-zone-dots{
    right:10px;
    bottom:7px;
  }

  #home-page .hero-card-zone-dots label{
    width:8px;
    height:8px;
  }
}


/* ==========================================================
   HOME — CARTAS V1.2 · jerarquía tipográfica
   Nombre más chico + métricas más legibles.
   ========================================================== */

#home-page .hero-card-leaders .hero-card-body h2{
  font-size:clamp(10.5px,.78vw,12.5px) !important;
  line-height:1.04 !important;
  margin-top:4px !important;
  -webkit-line-clamp:2;
}

#home-page .hero-card-leaders .hero-card-value{
  font-size:clamp(20px,1.45vw,25px) !important;
  margin-top:6px !important;
}

#home-page .hero-card-leaders .hero-card-caption{
  font-size:8.3px !important;
  line-height:1.08 !important;
}

#home-page .hero-card-metrics{
  margin-top:7px !important;
  gap:4px !important;
  font-size:8.35px !important;
  line-height:1.08 !important;
}

#home-page .hero-card-metrics strong{
  font-size:9px !important;
  line-height:1.05 !important;
}

#home-page .hero-card-leaders .hero-card-eyebrow{
  font-size:7.2px !important;
}

@media (max-width:620px){
  #home-page .hero-card-leaders .hero-card-body h2{
    font-size:11.5px !important;
  }

  #home-page .hero-card-leaders .hero-card-caption{
    font-size:8.5px !important;
  }

  #home-page .hero-card-metrics{
    font-size:8.4px !important;
  }

  #home-page .hero-card-metrics strong{
    font-size:9.1px !important;
  }
}


/* ==========================================================
   HOME — CARTAS V1.3 · equilibrio final de textos
   - Valor principal = presencia
   - Reino/Side: copias en rango legible + arquetipos
   - Bóveda: decklists + arquetipos
   - Sin "Uso balanceado" en HOME
   ========================================================== */

#home-page .hero-card-leaders .hero-card-body{
  padding:11px 7px 10px 15px !important;
}

#home-page .hero-card-leaders .hero-card-eyebrow{
  font-size:6.9px !important;
  line-height:1 !important;
  margin-bottom:0 !important;
}

#home-page .hero-card-leaders .hero-card-body h2{
  margin-top:4px !important;
  font-size:clamp(10px,.74vw,12px) !important;
  line-height:1.02 !important;
  min-height:20px;
  max-height:25px;
}

#home-page .hero-card-leaders .hero-card-value{
  margin-top:5px !important;
  font-size:clamp(20px,1.42vw,24px) !important;
  line-height:.96 !important;
}

#home-page .hero-card-leaders .hero-card-caption{
  display:block;
  margin-top:2px !important;
  font-size:8.1px !important;
  line-height:1 !important;
  color:#8fa9b8;
}

#home-page .hero-card-metrics{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:4px !important;
  margin-top:7px !important;
  padding:0 !important;
  font-size:8.15px !important;
  line-height:1.04 !important;
}

#home-page .hero-card-metrics span{
  display:block !important;
  white-space:nowrap;
}

#home-page .hero-card-metrics strong{
  font-size:8.75px !important;
  line-height:1 !important;
}

#home-page .hero-card-leaders .hero-card-art{
  margin:8px 11px 9px 0 !important;
}

#home-page .hero-card-zone-dots{
  right:13px !important;
  bottom:7px !important;
}

@media (max-width:620px){
  #home-page .hero-card-leaders .hero-card-body h2{
    font-size:11px !important;
  }

  #home-page .hero-card-leaders .hero-card-caption{
    font-size:8.3px !important;
  }

  #home-page .hero-card-metrics{
    font-size:8.35px !important;
  }

  #home-page .hero-card-metrics strong{
    font-size:8.95px !important;
  }
}