/* Página STREAMING. Reutiliza los tokens y el lenguaje visual de DZ. */
.st-hero { padding-bottom: 3rem; }

.st-grid {
  display: grid; gap: 1.2rem; max-width: 1180px; margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem;
  background: linear-gradient(165deg, #0d0d0d, #060606); overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.st-card:hover { border-color: color-mix(in srgb, var(--pc) 45%, var(--line)); transform: translateY(-4px); }
.st-card::before {
  content: ""; position: absolute; top: -50%; right: -50%; width: 140%; height: 140%;
  background: radial-gradient(circle, var(--pc), transparent 62%); opacity: .1; pointer-events: none;
}
.st-card.is-featured { border-color: color-mix(in srgb, var(--pc) 55%, var(--line)); }
.st-badge {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
  font-family: 'Space Mono', monospace; font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pc);
  border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent);
  border-radius: 100px; padding: .25rem .6rem;
}
.st-emoji { font-size: 1.8rem; position: relative; z-index: 1; }
.st-name {
  position: relative; z-index: 1; font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 1.15rem; letter-spacing: -.01em; margin: .9rem 0 .35rem;
}
.st-tagline { position: relative; z-index: 1; color: var(--text-dim); font-size: .86rem; line-height: 1.6; }
.st-price {
  position: relative; z-index: 1; font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 2rem; letter-spacing: -.02em; margin: 1.3rem 0 .2rem; color: var(--pc);
}
.st-price small { font-family: 'Space Mono', monospace; font-size: .6rem; color: var(--text-faint); letter-spacing: .14em; }
.st-features { position: relative; z-index: 1; list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; flex: 1; }
.st-features li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .82rem; color: var(--text-dim); line-height: 1.55; padding: .32rem 0;
}
.st-features li::before { content: "—"; color: var(--pc); flex-shrink: 0; }
.st-card .btn { position: relative; z-index: 1; width: 100%; justify-content: center; }

/* Comparativa */
.st-compare-wrap { max-width: 1180px; margin: 0 auto; overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.st-table th, .st-table td {
  padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--line);
  font-size: .84rem;
}
.st-table thead th {
  font-family: 'Space Mono', monospace; font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.st-table td:first-child { color: var(--text-dim); }
.st-yes { color: #5EE6A8; }
.st-no { color: var(--line); }

/* Bundle */
.st-bundle {
  max-width: 1180px; margin: 0 auto; border: 1px solid #2a3550; border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 3rem); background: linear-gradient(150deg, #0c1020, #070707);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.4rem; align-items: center;
}
.st-bundle-title { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.02em; }
.st-bundle-list { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.st-bundle-list li { display: flex; gap: .6rem; font-size: .88rem; color: var(--text-dim); padding: .35rem 0; }
.st-bundle-list li::before { content: "✓"; color: #5EA1FF; }
.st-bundle-price { text-align: right; }
.st-strike { font-family: 'Space Mono', monospace; color: var(--text-faint); text-decoration: line-through; font-size: .9rem; }
.st-now { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 3rem; letter-spacing: -.03em; color: #5EA1FF; line-height: 1; margin: .3rem 0; }
.st-save {
  display: inline-block; font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  color: #5EE6A8; border: 1px solid rgba(94,230,168,.3); border-radius: 100px; padding: .3rem .7rem; margin-bottom: 1.2rem;
}

@media (max-width: 980px) {
  .st-grid { grid-template-columns: 1fr; }
  .st-bundle { grid-template-columns: 1fr; }
  .st-bundle-price { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   Acabado visual alineado con el catálogo de optimizaciones.

   La idea de la home: cada producto tiene un color propio (--pc) que
   tiñe muy suavemente el fondo, el borde y el emoji. Nada saturado:
   un halo de fondo y un borde que reacciona al pasar por encima.
   ═══════════════════════════════════════════════════════════════ */

.st-card {
  /* Fondo tintado con el color del producto, muy por debajo del negro. */
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in srgb, var(--pc) 13%, transparent) 0%,
      transparent 62%),
    linear-gradient(165deg, #0d0d0d, #060606);
  border-color: color-mix(in srgb, var(--pc) 16%, var(--line));
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.st-card:hover {
  border-color: color-mix(in srgb, var(--pc) 50%, var(--line));
  box-shadow: 0 18px 50px -24px color-mix(in srgb, var(--pc) 45%, transparent);
}

/* El emoji dentro de un disco tintado, como el visual de la home.
   Sin eso se ve como un carácter suelto pegado al borde. */
.st-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Mismo cuadrado que `.game-logo`: una tarjeta con logo y otra con
     emoji tienen que ocupar exactamente lo mismo. */
  width: 62px;
  height: 62px;
  border-radius: 18px;
  font-size: 1.55rem;
  line-height: 1;
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent);
  /* Los emojis de color desentonan sobre fondo oscuro: se bajan un
     punto de saturación para que acompañen al color del producto en
     vez de competir con él. */
  filter: saturate(.82);
}

.st-card.is-featured {
  border-color: color-mix(in srgb, var(--pc) 42%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 18%, transparent) inset;
}

.st-name { color: var(--text); }
.st-price { letter-spacing: -.03em; }
.st-price small { display: inline-block; margin-top: .35rem; }

/* Las viñetas heredan el color del producto, como en la home. */
.st-features li::before { opacity: .75; }

/* El botón secundario se tiñe al pasar por encima, en vez de quedarse
   gris: da continuidad con el color de la tarjeta. */
.st-card .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--pc) 55%, var(--line));
  color: var(--text);
}

/* Comparativa: misma tipografía de datos que la tabla de la home. */
.st-table thead th:not(:first-child) { color: var(--text-dim); }
.st-table tbody tr:hover td { background: rgba(255,255,255,.015); }

/* Bundle: halo propio, más ancho y más tenue que el de una tarjeta. */
.st-bundle {
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(94,161,255,.10) 0%, transparent 60%),
    linear-gradient(150deg, #0c1020, #070707);
}

@media (max-width: 980px) {
  .st-emoji { width: 54px; height: 54px; font-size: 1.45rem; }
}

/* Descripción de las guías: texto corrido, no lista. */
.st-desc {
  position: relative; z-index: 1;
  flex: 1;
  margin: 1.1rem 0 1.6rem;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   Cabecera de Streaming y Competitive Settings

   Problema: la cabecera heredaba `padding: 10rem 3rem 5rem` de
   `.cz-hero` y le restaba 3rem por abajo, así que quedaba con 10
   arriba y 2 abajo. Descompensada, y el bloque siguiente se pegaba
   demasiado. Además el título llegaba casi a los bordes en pantallas
   normales, porque no tenía ancho máximo.
   ═══════════════════════════════════════════════════════════════ */

.st-hero {
  /* Catálogo, no portada: la cabecera ocupa lo justo para presentar
     la sección y deja que los productos entren pronto en pantalla.
     Antes llegaba a 10rem arriba; ahora menos de la mitad. */
  padding: clamp(5.5rem, 9vh, 7rem) 1.5rem clamp(2.2rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* El título usa la escala compartida de `.cz-title`, así que aquí
   solo se acota el ancho para que no se estire de lado a lado. */
.st-hero .cz-title {
  /* Una sola línea: el ancho deja de limitarse a 16 caracteres y el
     tamaño se adapta al ancho disponible. En pantallas estrechas sí
     puede partirse, que es preferible a que se salga. */
  max-width: none;
  margin: .8rem auto 0;
  text-wrap: balance;
  font-size: clamp(1.7rem, 4vw, 3.4rem);
}
@media (min-width: 900px) {
  .st-hero .cz-title { white-space: nowrap; }
}

.st-hero .cz-lead {
  max-width: 54ch;
  margin: 1.1rem auto 0;
  font-size: .95rem;
}

/* La nota pequeña, pegada al texto que la explica, no flotando. */
.st-hero .cz-note-small {
  margin-top: 1.2rem !important;
  max-width: 44ch;
}

/* La iluminación la hereda de `.cz-hero-glow`, que ya comparte el
   lenguaje de la home. Antes esta regla la sobrescribía con un
   círculo azul concentrado sobre el título: ese era el foco. */

/* Separación uniforme entre secciones, para que «Los packs» y
   «Comparativa» respiren igual. */
/* Espaciado consistente entre bloques. Los productos van primero y
   las secciones siguientes respiran igual entre sí. */
.st-hero + .section-pad { padding-top: 0; }
.st-grid { margin-top: 2rem; }
.st-compare-wrap { margin-top: 2rem; }
.st-bundle { margin-top: .5rem; }

/* Los encabezados de sección dentro del catálogo, más contenidos que
   el de la cabecera: son rótulos, no titulares. */
.section-pad .section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: -.03em;
}
.section-pad .section-head { margin-bottom: 1.6rem; }

@media (max-width: 760px) {
  .st-hero { padding: 5.5rem 1.2rem 2rem; }
  .st-hero .cz-title { max-width: 100%; }
  .st-grid { margin-top: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Logo del juego · marca visual de cada guía

   Mismo contenedor cuadrado que el disco del emoji, para que las
   tarjetas con logo y sin él tengan exactamente el mismo ritmo.
   El logo se CONTIENE, nunca se estira ni se recorta.
   ═══════════════════════════════════════════════════════════════ */

.game-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  overflow: hidden;
  /* Sin relleno: el aire correcto ya lo trae cada archivo, calculado
     según su forma. Un padding aquí lo sumaría dos veces y es lo que
     dejaba el símbolo flotando dentro del recuadro. */
  padding: 0;
  /* Fondo y borde tintados con el color del producto, igual que el
     disco del emoji: integra el logo en la estética oscura sin que
     parezca una pegatina encima. */
  /* El borde ya no compite con el símbolo: más tenue y sin relleno
     interior, porque el aire correcto ya lo trae cada archivo, medido
     uno a uno según su forma. */
  background: color-mix(in srgb, var(--pc) 9%, rgba(255,255,255,.025));
  border: 1px solid color-mix(in srgb, var(--pc) 14%, transparent);
  transition: border-color .4s var(--ease);
}

.game-logo img {
  width: 100%;
  height: 100%;
  /* El archivo ya es cuadrado y ya trae su margen: se deja llenar. */
  /* `contain`, no `cover`: el logo nunca se recorta ni se deforma,
     sea cuadrado o apaisado como el de FiveM. */
  object-fit: contain;
  display: block;
  /* Un punto menos de saturación, el mismo tratamiento que los
     emojis, para que ninguno destaque sobre el resto. */
  filter: saturate(.92);
}

.st-card:hover .game-logo {
  border-color: color-mix(in srgb, var(--pc) 42%, transparent);
}

@media (max-width: 980px) {
  .game-logo { width: 54px; height: 54px; border-radius: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Arte del juego en la cabecera de la tarjeta

   La imagen va DETRÁS del contenido, con un degradado que la funde
   con el fondo de la tarjeta. Así identifica el juego de un vistazo
   sin robarle protagonismo al título ni al precio, que es lo que
   tiene que leerse.
   ═══════════════════════════════════════════════════════════════ */

.st-card.has-art { padding-top: 0; overflow: hidden; }

.st-art {
  position: relative;
  display: block;
  margin: -1px -1.8rem 0;      /* sangra hasta el borde de la tarjeta */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.st-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* llena el recuadro sin deformarse */
  display: block;
  /* Bajada de brillo y saturación: el arte acompaña, no compite.
     Sin esto, una imagen muy colorida rompe la estética oscura. */
  filter: saturate(.78) brightness(.72);
  transition: filter .5s var(--ease), transform .7s var(--ease);
}
/* El degradado funde la imagen con la tarjeta por abajo y por los
   lados, en vez de cortarla con una línea dura. */
.st-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 30%, #0b0b0b 97%),
    linear-gradient(to right, rgba(11,11,11,.55), transparent 22%, transparent 78%, rgba(11,11,11,.55));
}

/* Al pasar por encima el arte se aviva un poco y se acerca. Discreto:
   medio segundo y un 3 % de escala, nada de zooms bruscos. */
.st-card:hover .st-art img {
  filter: saturate(.95) brightness(.85);
  transform: scale(1.03);
}

/* El logo se solapa con el arte, como una insignia. */
.st-card.has-art .game-logo,
.st-card.has-art .st-emoji {
  margin-top: -34px;
  z-index: 2;
  /* Un contorno oscuro lo separa del arte sin sombras duras. */
  box-shadow: 0 0 0 4px #0b0b0b;
}

/* El badge «guía PDF» sube a la esquina del arte. */
.st-card.has-art .st-badge {
  top: .9rem;
  right: .9rem;
  background: rgba(11, 11, 11, .72);
  backdrop-filter: blur(6px);
}

/* El contenido recupera su margen bajo el arte. */
.st-card.has-art .st-name { margin-top: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .st-art img, .st-card:hover .st-art img { transition: none; transform: none; }
}

@media (max-width: 980px) {
  .st-art { margin-left: -1.8rem; margin-right: -1.8rem; }
  .st-card.has-art .game-logo,
  .st-card.has-art .st-emoji { margin-top: -28px; }
}