/* =============================================================================
   PÁGINAS INTERIORES de /juego: noticias, noticia, ranking, descargar, soporte,
   términos, privacidad y créditos.
   -----------------------------------------------------------------------------
   Lo común (cabecera, botones, marcos, monedas, avisos…) está en juego.css; aquí
   va solo lo que estas páginas añaden. Van juntas en un archivo porque comparten
   piezas (las pestañas, el índice lateral de los documentos, las tarjetas de
   noticia) y son pocas reglas: partirlo en ocho archivos sería ocho peticiones
   más para ahorrarse unos pocos KB.

   Índice:
     1. Piezas compartidas (pestañas, cabeza con figura, marcador, índice)
     2. Noticias (lista)          5. Descargar
     3. Noticia (artículo)        6. Soporte
     4. Ranking                   7. Documentos legales y créditos
     8. Adaptación al móvil
   OJO: no definir .tienda, .evento, .objetos ni .novedad sueltas: son las
   etiquetas .tag de juego.css.
   ========================================================================== */

/* 1. PIEZAS COMPARTIDAS ------------------------------------------------------- */

/* Pestañas / filtros: botones con aria-pressed (o aria-selected en role=tab). */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; }
.pestanas button, .pestanas a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--linea-2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color .15s, background .15s, box-shadow .15s;
}
.pestanas button:hover, .pestanas a:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(217,31,43,.6); }
.pestanas [aria-pressed="true"], .pestanas [aria-selected="true"], .pestanas .activo {
  color: #fff; background: linear-gradient(180deg, rgba(217,31,43,.35), rgba(217,31,43,.14)); box-shadow: inset 0 0 0 1px var(--carmesi), inset 0 -2px 0 var(--carmesi-claro);
}
.pestanas .cuenta { font-size: 12.5px; min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; background: rgba(0,0,0,.45); color: var(--texto-2); letter-spacing: 0; }
.pestanas [aria-pressed="true"] .cuenta, .pestanas [aria-selected="true"] .cuenta { color: #fff; background: rgba(0,0,0,.35); }
.pestanas.chicas button { height: 34px; padding: 0 12px; font-size: 13.5px; }

/* Cabeza de página con una figura recortada a la derecha (personaje, arma, insignia). */
.cabeza-pagina.con-figura { min-height: 460px; }
.cabeza-pagina .figura { position: absolute; right: max(3vw, calc((100vw - var(--ancho)) / 2)); bottom: 0; z-index: -1; height: 100%; display: flex; align-items: flex-end; pointer-events: none; }
.cabeza-pagina .figura img { max-height: 92%; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); }
.cabeza-pagina .fila-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Hueco que Kevin tiene que rellenar (correo de soporte, nombre del responsable…).
   Se ve a propósito: amarillo y rayado, para que no se publique sin cambiarlo. */
.marcador {
  display: inline-block; padding: 0 8px; font-weight: 700; color: #1c1300; letter-spacing: .02em;
  background: repeating-linear-gradient(-45deg, #ffc446 0 10px, #ffd46e 10px 20px); box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}

/* Índice lateral pegajoso (documentos legales, créditos, soporte). */
.con-indice { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.indice { position: sticky; top: calc(var(--alto-cab) + 24px); }
.indice h2 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 12px; }
.indice ol, .indice ul { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--linea-2); }
.indice a { display: block; padding: 7px 14px; margin-left: -1px; font-size: 15px; color: var(--texto-2); border-left: 2px solid transparent; line-height: 1.25; }
.indice a:hover { color: #fff; }
.indice a.activo { color: #fff; border-left-color: var(--carmesi); background: linear-gradient(90deg, rgba(217,31,43,.12), transparent); }
.indice .extra { margin-top: 22px; display: grid; gap: 10px; }

/* Número grande con chaflán (pasos). */
.num-paso {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; font-size: 26px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #ff3b47, #8e0d15); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* 2. NOTICIAS (lista) ------------------------------------------------------------ */
.barra-noticias { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 26px; }
.barra-noticias .resumen-lista { font-size: 15px; color: var(--texto-3); letter-spacing: .04em; }
.rejilla-noticias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Si la última fila (debajo de la destacada) se queda con dos tarjetas, las dos se
   reparten el ancho: con cinco noticias en tres columnas quedaba un hueco. Solo en
   escritorio (con 3 columnas); la rejilla pasa a 6 pistas para poder partir en mitades. */
@media (min-width: 1181px) {
  .rejilla-noticias { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rejilla-noticias > .nt { grid-column: span 2; }
  .rejilla-noticias > .nt.grande { grid-column: 1 / -1; }
  .rejilla-noticias > .nt:not(.grande):nth-child(3n+2):nth-last-child(2),
  .rejilla-noticias > .nt:not(.grande):nth-child(3n+2):nth-last-child(2) + .nt { grid-column: span 3; }
  .rejilla-noticias > .nt:not(.grande):nth-child(3n+2):last-child { grid-column: 2 / span 4; }
}
.nt {
  position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #15171c, #0f1115);
  border: 1px solid var(--linea); transition: border-color .25s, transform .25s, box-shadow .25s;
}
.nt:hover { border-color: rgba(217,31,43,.55); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.nt .foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0b0e; }
.nt .foto > img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transform-origin: var(--p, 50% 50%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.nt:hover .foto > img { transform: scale(calc(var(--z, 1) * 1.06)); }
.nt .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,14,.55), transparent 45%); }
.nt .foto .tag { position: absolute; left: 14px; top: 14px; z-index: 1; }
.nt .texto { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.nt h2, .nt h3 { font-size: 23px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.nt p { font-size: 15.5px; color: var(--texto-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt .leer { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.nt .leer .ico { width: 15px; height: 15px; color: var(--carmesi-claro); transition: transform .2s; }
.nt:hover .leer { color: #fff; }
.nt:hover .leer .ico { transform: translateX(3px); }
.nt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--carmesi); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.nt:hover::after { transform: scaleX(1); }
/* La primera, a lo ancho: foto grande a la izquierda y texto a la derecha. */
.nt.grande { grid-column: 1 / -1; display: grid; grid-template-columns: 1.55fr 1fr; }
.nt.grande .foto { aspect-ratio: auto; min-height: 420px; }
.nt.grande .texto { justify-content: center; padding: 36px 38px; gap: 12px; }
.nt.grande h2 { font-size: 38px; line-height: .98; }
.nt.grande p { font-size: 17.5px; -webkit-line-clamp: 5; }
.nt.grande .leer { margin-top: 10px; }
/* Foto compuesta con las tres cajas de munición (noticias con «cajas»). */
.escenita { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2%; padding: 6% 8%;
  background: radial-gradient(60% 70% at 50% 60%, rgba(217,31,43,.22), transparent 70%), linear-gradient(180deg, #16181e, #0b0c0f); }
.escenita img { width: 30%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.escenita img:nth-child(2) { transform: translateY(-6%); }
.meta-nota { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 3. NOTICIA (artículo) ------------------------------------------------------------- */
.cabeza-noticia {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(76vh, 760px); padding: 140px 0 56px; border-bottom: 1px solid var(--linea-2); background: #07080a;
}
.cabeza-noticia > .fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cabeza-noticia > .fondo img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--p, 50% 50%); animation: acercar 20s ease-out both; }
.cabeza-noticia > .fondo .escenita { padding: 12% 22% 18%; }
.cabeza-noticia::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--carbon) 0%, rgba(9,10,12,.82) 26%, rgba(9,10,12,.25) 62%, rgba(6,7,9,.6) 100%),
              linear-gradient(90deg, rgba(6,7,9,.7), transparent 60%);
}
.cabeza-noticia .migas { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--texto-3); margin-bottom: 18px; letter-spacing: .06em; text-transform: uppercase; flex-wrap: wrap; }
.cabeza-noticia .migas a:hover { color: #fff; }
.cabeza-noticia .migas span[aria-hidden] { color: var(--carmesi); }
.cabeza-noticia h1 { max-width: 1000px; font-size: 62px; line-height: .95; text-transform: uppercase; margin: 16px 0 16px; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.cabeza-noticia .entradilla { max-width: 760px; font-size: 20px; color: #d3d6dc; line-height: 1.45; }
.cabeza-noticia .meta-nota .fecha { font-size: 15px; color: var(--texto-2); }
.articulo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; padding-top: 56px; }
.articulo .texto-largo { max-width: 780px; }
.articulo .texto-largo p:first-child::first-letter { float: left; font-size: 64px; line-height: .8; padding: 6px 10px 0 0; color: var(--carmesi-claro); font-weight: 700; }
.articulo .texto-largo li { padding: 10px 14px 10px 34px; background: rgba(255,255,255,.025); border-left: 2px solid rgba(217,31,43,.5); }
.articulo .texto-largo li::before { left: 14px; top: 1.2em; }
.articulo .texto-largo li b { color: #fff; }
.lateral-articulo { position: sticky; top: calc(var(--alto-cab) + 24px); display: grid; gap: 18px; }
.lateral-articulo .lista-datos { font-size: 15.5px; }
.copiar-enlace { width: 100%; }
.nav-noticias { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 56px; }
.nav-noticias a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: rgba(255,255,255,.025); border: 1px solid var(--linea); transition: border-color .2s, background .2s; }
.nav-noticias a:hover { border-color: rgba(217,31,43,.55); background: rgba(217,31,43,.06); }
.nav-noticias small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.nav-noticias small .ico { width: 14px; height: 14px; color: var(--carmesi-claro); }
.nav-noticias b { font-size: 18px; line-height: 1.15; text-transform: uppercase; }
.nav-noticias .sig { text-align: right; align-items: flex-end; }
.nav-noticias .vacio-nav { visibility: hidden; }

/* 4. RANKING --------------------------------------------------------------------- */
.ranking-mando { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; margin-bottom: 18px; }
.ranking-mando .grupo { display: grid; gap: 10px; }
.ranking-mando .rotulo { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.buscador-ranking { width: 320px; }
.buscador-ranking input:disabled { opacity: .55; cursor: not-allowed; }
.tabla-ranking { position: relative; overflow: hidden; }
.tabla-ranking .tabla th { background: linear-gradient(180deg, rgba(217,31,43,.16), rgba(217,31,43,.06)); color: #e8c9cb; }
.tabla-ranking .tabla td { height: 58px; }
.fila-fantasma td .barra { display: block; height: 12px; background: rgba(255,255,255,.05); }
.fila-fantasma td .circulo { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.05); vertical-align: middle; }
.fila-fantasma:nth-child(odd) td .barra { background: rgba(255,255,255,.035); }
.tabla-ranking .velo {
  position: absolute; inset: 49px 0 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(60% 70% at 50% 45%, rgba(9,10,12,.78), rgba(9,10,12,.94));
}
.tabla-ranking .velo .vacio { max-width: 560px; }
.tabla-ranking .velo .vacio img { width: 120px; height: 120px; margin-bottom: 4px; }
/* Resplandor de fuego detrás de una insignia (en el juego, las de oficial arden). */
.insignia-brillo { position: relative; display: inline-block; isolation: isolate; }
.insignia-brillo::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,40,.45), rgba(217,31,43,.18) 45%, transparent 70%); animation: latido-brillo 2.4s ease-in-out infinite alternate; }
.insignia-brillo img { filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
@keyframes latido-brillo { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.cabeza-pagina .insignia-heroe { align-items: center; padding-top: 60px; }
.cabeza-pagina .insignia-heroe::before { content: ""; position: absolute; left: 50%; top: 55%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,70,50,.5), rgba(255,140,40,.2) 38%, transparent 68%); animation: latido-brillo 2.8s ease-in-out infinite alternate; }
.cabeza-pagina .insignia-heroe img { width: 340px; height: 340px; max-height: none; }
.tabla-ranking .velo .vacio p { max-width: 480px; }
.tabla-ranking .velo .botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; margin-bottom: 22px; }
.podio .puesto { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px 22px; text-align: center; }
.podio .puesto.p1 { padding-top: 38px; }
.podio .silueta { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 2px var(--c, var(--linea-2)); color: var(--texto-3); }
.podio .silueta .ico { width: 40px; height: 40px; }
.podio .p1 .silueta { width: 104px; height: 104px; }
.podio .medalla { font-size: 44px; line-height: .8; font-weight: 700; color: var(--c); text-shadow: 0 0 22px var(--c); }
.podio .p1 { --c: var(--oro); } .podio .p2 { --c: #cfd6e0; } .podio .p3 { --c: #d98a4e; }
.podio .quien { font-size: 18px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.podio .puesto small { font-size: 13.5px; color: var(--texto-3); }
/* Flex centrado y no rejilla: son 13 grados, y así la última fila queda centrada en vez de coja. */
.escalera { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.escalera > .escalon { flex: 0 0 calc((100% - 14px * 6) / 7); }
.escalon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px 16px; text-align: center; background: linear-gradient(180deg, #15171c, #0e1014); border: 1px solid var(--linea); overflow: hidden; }
.escalon::before { content: ""; position: absolute; left: 50%; top: 18px; width: 120px; height: 120px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, var(--brillo, rgba(255,255,255,.06)), transparent 70%); }
/* El fuego de la insignia en el juego, aquí como resplandor que late: más fuerte
   cuantas más llamas lleva el grado (--f va de 0 a 1) y de su color. */
.escalon[data-fuego] { --brillo: rgba(255,120,30, calc(.12 + var(--f, 0) * .3)); }
.escalon[data-fuego="chispas"] { --brillo: rgba(255,120,30,.1); }
.escalon[data-fuego="oro"] { --brillo: rgba(255,196,70,.42); }
.escalon[data-fuego="azul"] { --brillo: rgba(91,155,255,.45); }
.escalon[data-fuego="carmesi"] { --brillo: rgba(255,40,60,.5); border-color: rgba(217,31,43,.45); }
.escalon[data-fuego]::before { animation: latido 2.6s ease-in-out infinite alternate; }
@keyframes latido { from { opacity: .7; transform: translateX(-50%) scale(.94); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.escalon .llamas { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--legendario); }
.escalon[data-fuego="oro"] .llamas { color: var(--oro); }
.escalon[data-fuego="azul"] .llamas { color: var(--azul); }
.escalon[data-fuego="carmesi"] .llamas { color: var(--mitico); }
.escalon img { position: relative; width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.escalon .n { position: absolute; left: 10px; top: 8px; font-size: 13px; color: var(--texto-3); letter-spacing: .08em; }
.escalon b { font-size: 18px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.escalon small { font-size: 13.5px; color: var(--texto-3); line-height: 1.3; }
.escalon .exp { color: var(--oro-titulo); font-size: 14px; }
.tarjeta-reglas { display: grid; gap: 14px; }
.tarjeta-reglas .regla { display: flex; gap: 14px; align-items: flex-start; }
.tarjeta-reglas .regla .ico { width: 26px; height: 26px; color: var(--carmesi-claro); margin-top: 2px; }
.tarjeta-reglas .regla b { display: block; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.tarjeta-reglas .regla span { font-size: 15.5px; color: var(--texto-2); }
.mi-puesto .fila { display: flex; align-items: center; gap: 14px; }
.mi-puesto .fila img { width: 64px; height: 64px; }

/* 5. DESCARGAR -------------------------------------------------------------------- */
.bloque-descarga { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: -120px; position: relative; z-index: 2; }
.bloque-descarga .principal-desc { padding: 30px 32px; }
.bloque-descarga .principal-desc h2 { font-size: 34px; line-height: 1; text-transform: uppercase; margin: 10px 0 8px; }
.bloque-descarga .principal-desc > p { color: var(--texto-2); max-width: 560px; }
.boton-descarga { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 22px 0 18px; }
.boton-descarga .btn[aria-disabled="true"] { filter: grayscale(.85) brightness(.55); cursor: not-allowed; }
.boton-descarga .btn[aria-disabled="true"]::after { display: none; }
.ficha-descarga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 20px; }
.ficha-descarga div { padding: 12px 16px; background: #101216; }
.ficha-descarga dt { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.ficha-descarga dd { font-size: 18px; color: #fff; margin-top: 2px; }
.estado-caja { padding: 24px 26px; display: grid; gap: 16px; align-content: start; }
.estado-caja .linea-estado { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.estado-caja .linea-estado b { color: #fff; }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: paso; }
.paso { position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #15171c, #0e1014); border: 1px solid var(--linea); }
.paso .foto { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.paso .foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transform-origin: var(--p, 50% 50%); }
.paso .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #13151a 2%, transparent 60%); }
.paso .num-paso { position: absolute; left: 20px; top: calc(50% * 0 + 20px); z-index: 1; }
.paso .texto { padding: 6px 22px 24px; display: grid; gap: 8px; }
.paso h3 { font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.paso p { font-size: 15.5px; color: var(--texto-2); }
.paso .texto .btn { justify-self: start; margin-top: 6px; }
.requisitos .tabla tbody th { color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; font-size: 13.5px; white-space: nowrap; width: 22%; border-bottom: 1px solid var(--linea); }
.requisitos .tabla td { font-size: 16px; }
.requisitos .tabla th.min { color: var(--texto-2); }
.requisitos .tabla th.rec { color: var(--oro-titulo); }
.requisitos .nota { font-size: 14.5px; color: var(--texto-3); padding: 14px 18px 18px; }
.problemas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.problema { display: flex; gap: 14px; padding: 20px; background: rgba(255,255,255,.025); border: 1px solid var(--linea); transition: border-color .2s; }
.problema:hover { border-color: rgba(217,31,43,.5); }
.problema .ico { width: 26px; height: 26px; color: var(--carmesi-claro); }
.problema b { display: block; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.problema span { font-size: 15px; color: var(--texto-2); }

/* 6. SOPORTE ---------------------------------------------------------------------- */
.buscador-ayuda { max-width: 640px; margin-top: 26px; }
.buscador-ayuda input { height: 58px; font-size: 19px; padding-left: 50px; background: rgba(6,7,9,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.buscador-ayuda .caja > .ico { left: 17px; width: 20px; height: 20px; z-index: 1; }
.temas-ayuda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 44px; }
.tema { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; text-align: left; background: linear-gradient(180deg, #15171c, #0f1115); border: 1px solid var(--linea); transition: border-color .2s, background .2s; }
.tema:hover, .tema[aria-pressed="true"] { border-color: rgba(217,31,43,.6); background: linear-gradient(180deg, rgba(217,31,43,.14), #0f1115); }
.tema .ico { width: 26px; height: 26px; color: var(--carmesi-claro); }
.tema img { width: 30px; height: 30px; }
.tema b { font-size: 17px; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.tema small { font-size: 14px; color: var(--texto-3); }
.grupo-preguntas + .grupo-preguntas { margin-top: 40px; }
.grupo-preguntas > h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; text-transform: uppercase; margin-bottom: 14px; }
.grupo-preguntas > h2 .ico { width: 24px; height: 24px; color: var(--carmesi-claro); }
.pregunta { border: 1px solid var(--linea); background: rgba(255,255,255,.02); transition: border-color .2s, background .2s; }
.pregunta + .pregunta { margin-top: 8px; }
.pregunta[open] { border-color: rgba(217,31,43,.45); background: linear-gradient(180deg, rgba(217,31,43,.06), rgba(255,255,255,.015)); }
.pregunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; font-size: 19px; line-height: 1.2; color: #fff; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .ico { width: 16px; height: 16px; color: var(--texto-3); transition: transform .25s; flex: none; }
.pregunta[open] summary .ico { transform: rotate(180deg); color: var(--carmesi-claro); }
.pregunta summary:hover { color: var(--oro-claro); }
.pregunta .respuesta { padding: 0 20px 20px; font-size: 16.5px; line-height: 1.55; color: #cfd2d8; max-width: 860px; }
.pregunta .respuesta > * + * { margin-top: 12px; }
.pregunta .respuesta ol, .pregunta .respuesta ul { padding-left: 22px; display: grid; gap: 6px; }
.pregunta .respuesta a { color: #fff; border-bottom: 1px solid var(--carmesi); }
.pregunta .respuesta a:hover { color: var(--oro); }
.pregunta .respuesta .aviso a { border: 0; text-decoration: underline; }
.pregunta:target { border-color: var(--oro); box-shadow: 0 0 0 1px rgba(255,196,70,.4); }
.sin-resultados[hidden] { display: none; }
.contacto { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
.contacto .cuerpo-panel { display: grid; gap: 14px; align-content: start; }
.canal { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,196,70,.5); }
.canal .ico { width: 28px; height: 28px; color: var(--oro); }
.canal b { display: block; text-transform: uppercase; letter-spacing: .06em; }
.canal small { color: var(--texto-3); font-size: 14px; }
.lista-cheque { list-style: none; display: grid; gap: 10px; }
.lista-cheque li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--texto-2); }
.lista-cheque li .ico { width: 18px; height: 18px; color: var(--cash); margin-top: 3px; }

/* 7. DOCUMENTOS LEGALES Y CRÉDITOS ----------------------------------------------- */
.aviso-borrador {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; margin-bottom: 34px;
  background: repeating-linear-gradient(-45deg, rgba(255,196,70,.07) 0 14px, rgba(255,196,70,.03) 14px 28px); border: 1px solid rgba(255,196,70,.55);
}
.aviso-borrador .ico { width: 30px; height: 30px; color: var(--oro); flex: none; }
.aviso-borrador b { display: block; font-size: 19px; text-transform: uppercase; letter-spacing: .06em; color: var(--oro-claro); }
.aviso-borrador span { font-size: 15.5px; color: #e6dcc3; }
.documento { max-width: 820px; }
.documento section { scroll-margin-top: calc(var(--alto-cab) + 20px); }
.documento section + section { margin-top: 44px; padding-top: 38px; border-top: 1px solid var(--linea); }
.documento h2 { display: flex; align-items: baseline; gap: 14px; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.documento h2 .n { font-size: 16px; color: var(--carmesi-claro); letter-spacing: .1em; flex: none; }
.documento h3 { font-size: 20px; text-transform: uppercase; color: #fff; margin: 22px 0 8px; letter-spacing: .03em; }
.documento p, .documento li { font-size: 17px; line-height: 1.62; color: #cfd2d8; }
.documento p + p, .documento p + ul, .documento ul + p { margin-top: 12px; }
.documento ul { list-style: none; display: grid; gap: 9px; }
.documento ul li { position: relative; padding-left: 22px; }
.documento ul li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 7px; height: 7px; background: var(--carmesi); transform: rotate(45deg); }
.documento a { color: #fff; border-bottom: 1px solid var(--carmesi); }
.documento a:hover { color: var(--oro); }
.documento strong { color: #fff; }
.documento .tabla-envase { margin-top: 14px; border: 1px solid var(--linea); }
.documento .tabla td, .documento .tabla th { font-size: 15.5px; }
.documento .resumen-corto { padding: 18px 22px; background: rgba(255,255,255,.03); border-left: 3px solid var(--carmesi); margin-bottom: 30px; }
.documento .resumen-corto b { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; color: var(--carmesi-claro); margin-bottom: 8px; }
.pie-documento { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--texto-3); }
/* Créditos: una tabla por familia de modelos. */
.creditos-bloque + .creditos-bloque { margin-top: 56px; }
.creditos-bloque .cab-credito { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.creditos-bloque h2 { font-size: 34px; line-height: 1; text-transform: uppercase; }
.creditos-bloque .cab-credito p { color: var(--texto-2); max-width: 640px; margin-top: 8px; font-size: 16px; }
.licencia { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--linea-2); white-space: nowrap; }
.licencia:hover { box-shadow: inset 0 0 0 1px var(--carmesi-claro); }
.licencia .ico { width: 14px; height: 14px; }
.tabla-creditos td:first-child { color: #fff; }
.tabla-creditos td a { color: #e6e8ec; border-bottom: 1px solid rgba(217,31,43,.6); }
.tabla-creditos td a:hover { color: var(--oro); }
.tabla-creditos td .ico { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; margin-left: 4px; color: var(--texto-3); }
.tabla-creditos .autor { color: var(--texto-2); }
.tabla-creditos .autor small { color: var(--texto-3); }
.tabla-creditos .donde { color: var(--texto-3); font-size: 14.5px; }
.tarjetas-credito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tarjetas-credito .marco .cuerpo-panel { display: grid; gap: 10px; }
.tarjetas-credito p { font-size: 15.5px; color: var(--texto-2); }

/* 8. ADAPTACIÓN AL MÓVIL ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .rejilla-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articulo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lateral-articulo { position: static; grid-template-columns: 1fr 1fr; }
  .con-indice { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .indice { position: static; }
  .indice ol, .indice ul { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .indice a { border: 1px solid var(--linea-2); padding: 7px 12px; margin: 0; font-size: 14px; }
  .indice a.activo { border-color: var(--carmesi); }
  .temas-ayuda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque-descarga { grid-template-columns: minmax(0, 1fr); }
  .problemas, .tarjetas-credito { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cabeza-pagina .figura { opacity: .55; }
  .escalera > .escalon { flex-basis: calc((100% - 14px * 3) / 4); }
}
@media (max-width: 760px) {
  .rejilla-noticias { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nt.grande { display: flex; }
  .nt.grande .foto { min-height: 0; aspect-ratio: 16 / 10; }
  .nt.grande .texto { padding: 20px; }
  .nt.grande h2 { font-size: 28px; }
  .nt.grande p { font-size: 16px; }
  .nt h2, .nt h3 { font-size: 21px; }
  .pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 2px; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas button, .pestanas a { flex: none; height: 38px; padding: 0 13px; font-size: 14px; }
  .cabeza-noticia { min-height: 560px; padding: 110px 0 34px; }
  .cabeza-noticia h1 { font-size: 36px; }
  .cabeza-noticia .entradilla { font-size: 17px; }
  .cabeza-noticia > .fondo .escenita { padding: 18% 6% 40%; }
  .articulo { padding-top: 32px; }
  .articulo .texto-largo p:first-child::first-letter { font-size: 50px; }
  .lateral-articulo { grid-template-columns: minmax(0, 1fr); }
  .nav-noticias { grid-template-columns: minmax(0, 1fr); }
  .nav-noticias .vacio-nav { display: none; }
  .ranking-mando { grid-template-columns: minmax(0, 1fr); }
  .buscador-ranking { width: 100%; }
  .podio { gap: 8px; }
  .podio .puesto { padding: 18px 6px 14px; }
  .podio .silueta { width: 58px; height: 58px; }
  .podio .p1 .silueta { width: 70px; height: 70px; }
  .podio .silueta .ico { width: 28px; height: 28px; }
  .podio .medalla { font-size: 32px; }
  .podio .quien { font-size: 14px; }
  .podio .puesto small { display: none; }
  .tabla-ranking .ocultable { display: none; }
  .tabla-ranking .velo { inset: 45px 0 0; padding: 16px; }
  .tabla-ranking .velo .vacio { padding: 20px 8px; }
  .tabla-ranking .velo .vacio img { width: 84px; height: 84px; }
  .escalera { gap: 10px; }
  .escalera > .escalon { flex-basis: calc((100% - 10px) / 2); }
  .cabeza-pagina .insignia-heroe img { width: 190px; height: 190px; }
  .cabeza-pagina .insignia-heroe::before { width: 300px; height: 300px; }
  .escalon img { width: 88px; height: 88px; }
  .cabeza-pagina.con-figura { min-height: 360px; }
  .cabeza-pagina .figura { right: -10px; opacity: .35; }
  .bloque-descarga { margin-top: -30px; }
  .bloque-descarga .principal-desc { padding: 22px 18px; }
  .bloque-descarga .principal-desc h2 { font-size: 27px; }
  .boton-descarga .btn { width: 100%; }
  .ficha-descarga { grid-template-columns: minmax(0, 1fr); }
  .pasos, .problemas, .tarjetas-credito, .contacto { grid-template-columns: minmax(0, 1fr); }
  /* Requisitos apilados: cada componente es un bloque con sus mínimos y recomendados. */
  .requisitos .tabla thead { display: none; }
  .requisitos .tabla, .requisitos .tabla tbody, .requisitos .tabla tr, .requisitos .tabla tbody th, .requisitos .tabla td { display: block; width: auto; }
  .requisitos .tabla tr { padding: 12px 14px; border-bottom: 1px solid var(--linea); }
  .requisitos .tabla tbody th { padding: 0 0 6px; border: 0; white-space: normal; color: #fff; }
  .requisitos .tabla td { padding: 3px 0; border: 0; font-size: 15px; }
  .requisitos .tabla td::before { content: attr(data-t) ": "; color: var(--texto-3); }
  .requisitos .tabla td[data-t="Recomendados"]::before { color: var(--oro-titulo); }
  .requisitos .tabla tbody tr:nth-child(odd) { background: rgba(255,255,255,.015); }
  .temas-ayuda { gap: 8px; margin-bottom: 30px; }
  .tema { padding: 14px; }
  .tema small { display: none; }
  .buscador-ayuda input { height: 52px; font-size: 17px; }
  .pregunta summary { font-size: 17px; padding: 14px 16px; }
  .pregunta .respuesta { padding: 0 16px 16px; font-size: 16px; }
  .grupo-preguntas > h2 { font-size: 22px; }
  .documento h2 { font-size: 24px; }
  .documento p, .documento li { font-size: 16px; }
  .aviso-borrador { padding: 14px 16px; }
  .creditos-bloque h2 { font-size: 27px; }
  .tabla-creditos .donde { display: none; }
}

/* 9. BANDA DE LLAMADA (al final de varias páginas) ----------------------------------
   Foto del juego a lo ancho con CREAR CUENTA / DESCARGAR: la cuenta y la descarga
   tienen que estar a mano en todas las páginas, no solo en la portada. */
.banda-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 40px 44px; margin-top: 80px; border: 1px solid var(--linea-2); }
.banda-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--foto) var(--posicion, 70% 50%) / cover no-repeat; }
.banda-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,7,9,.96) 0%, rgba(6,7,9,.82) 45%, rgba(6,7,9,.3) 100%); }
.banda-cta h2 { font-size: 40px; line-height: .95; text-transform: uppercase; margin: 10px 0 8px; }
.banda-cta p { color: var(--texto-2); max-width: 560px; }
.banda-cta .botones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .banda-cta { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; margin-top: 56px; }
  .banda-cta h2 { font-size: 30px; }
  .banda-cta .botones { justify-content: flex-start; }
  .banda-cta .botones .btn { flex: 1 1 100%; }
}

/* Ranking: tabla a la izquierda y la columna de «tu puesto» a la derecha. */
.rejilla-ranking { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.lateral-ranking { display: grid; gap: 22px; }
.temporada-caja { display: grid; gap: 12px; }
.temporada-caja b { font-size: 21px; line-height: 1.05; text-transform: uppercase; color: #fff; }
.temporada-caja small { color: var(--texto-3); font-size: 14px; letter-spacing: .06em; }
@media (max-width: 1180px) {
  .rejilla-ranking { grid-template-columns: minmax(0, 1fr); }
  .lateral-ranking { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Créditos: el arma en llamas flotando a la derecha de la cabeza, sin foto de fondo. */
.cabeza-creditos { min-height: 460px; background: radial-gradient(55% 80% at 76% 55%, rgba(217,31,43,.24), transparent 70%), #07080a; }
.cabeza-creditos::before { display: none; }
.cabeza-pagina .arma-figura { right: max(0px, calc((100vw - var(--ancho)) / 2 - 60px)); width: min(66vw, 1000px); align-items: center; }
.cabeza-pagina .arma-figura img { width: 100%; height: auto; max-height: none; transform: rotate(-6deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.8)); }
@media (max-width: 760px) {
  .cabeza-pagina .arma-figura { width: 120vw; right: -40vw; opacity: .4; }
}
@media (max-width: 760px) {
  /* El índice en el móvil: una sola fila que se desliza, para no empujar el texto una pantalla abajo. */
  .indice ol, .indice ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .indice ol::-webkit-scrollbar, .indice ul::-webkit-scrollbar { display: none; }
  .indice li { flex: none; }
  .indice .extra { display: none; }
}
@media (max-width: 760px) {
  /* Créditos apilados: qué es, el modelo y el autor, uno debajo de otro. */
  .tabla-creditos thead { display: none; }
  .tabla-creditos, .tabla-creditos tbody, .tabla-creditos tr, .tabla-creditos td { display: block; width: auto; }
  .tabla-creditos tr { padding: 12px 14px; border-bottom: 1px solid var(--linea); }
  .tabla-creditos td { padding: 2px 0; border: 0; }
  .tabla-creditos td:first-child { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
  .tabla-creditos td .ico { display: inline-block; }
  .tabla-creditos .autor::before { content: "por "; color: var(--texto-3); }
}
.documento .tabla-envase + p { margin-top: 16px; }