/* Trucos y secretos. Página de lectura, no de juego: lo que importa es que se
   lea de corrido en el teléfono y que se vea de un golpe qué está confirmado y
   qué lo cuenta la gente. De ahí que los dos sellos (seguro / lo cuentan) sean
   lo único de color fuerte en toda la página. */
.tr-intro {
  background: linear-gradient(170deg, #0f1320 0%, #141a2a 100%);
  color: #e9edf6; padding: 54px 0 34px;
}
.tr-intro h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 6px 0 14px; letter-spacing: -.02em; }
.tr-intro .lead { color: #a7b1c6; max-width: 70ch; font-size: 1rem; line-height: 1.65; }
.tr-intro .lead b { color: #ffd98a; font-weight: 600; }
.tr-intro .eyebrow a { color: #8fffca; }

.tr-seccion { padding: 26px 0 64px; background: #0b0d14; }
.tr { display: grid; gap: 30px; }

/* el aviso de arriba de todo */
.tr-aviso {
  border: 1px solid rgba(255,196,107,.35); background: rgba(255,196,107,.07);
  border-radius: 12px; padding: 14px 16px; color: #d8c49c;
  font-size: .9rem; line-height: 1.6; margin: 0;
}
.tr-aviso b { color: #ffd98a; }

/* cada juego */
.tr-juego { display: grid; gap: 14px; }
.tr-tapa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tr-tapa svg { flex: none; border-radius: 10px; background: #141a2a; }
.tr-tapa h2 { margin: 0; font-size: 1.5rem; color: #f2f5fb; letter-spacing: -.015em; }
.tr-tapa p { margin: 2px 0 0; font-size: .86rem; color: #8b96ad; }

.tr-grupo > h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: #8b96ad; font-weight: 700; margin: 0 0 10px;
}
.tr-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 12px; }
.tr-ficha {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 14px 16px; display: grid; gap: 7px; align-content: start;
}
.tr-ficha h4 { margin: 0; font-size: .95rem; color: #f2f5fb; font-weight: 600; }
.tr-ficha p { margin: 0; font-size: .87rem; line-height: 1.6; color: #a7b1c6; }
.tr-ficha p b { color: #e9edf6; font-weight: 600; }
.tr-ficha code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: rgba(143,255,202,.1); color: #8fffca;
  padding: 2px 6px; border-radius: 5px; word-break: break-word;
}

/* Los dos sellos. Es lo que hace honesta a la pagina: lo de Minecraft se
   puede comprobar abriendo el juego, y lo de Avatar World lo cuentan los
   jugadores y cambia con cada actualizacion. No es lo mismo y no se mezcla. */
.tr-sello {
  justify-self: start; font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
}
.tr-sello.tr-seguro { background: rgba(143,255,202,.16); color: #8fffca; }
.tr-sello.tr-dicen  { background: rgba(255,196,107,.16); color: #ffd08a; }

.tr-pie { font-size: .84rem; color: #8b96ad; line-height: 1.6; max-width: 74ch; margin: 0; }
.tr-pie a { color: #8fffca; }
.tr-pie a:hover { text-decoration: underline; }

/* La ficha de la fuente: no es un truco, es adonde ir a buscar mas, asi que
   se despega de las otras sin gritar. */
.tr-ficha.tr-fuente { border-color: rgba(143,255,202,.28); background: rgba(143,255,202,.05); }
.tr-ficha.tr-fuente a { color: #8fffca; }
.tr-ficha.tr-fuente a:hover { text-decoration: underline; }
.tr-chico { font-size: .8rem !important; color: #8b96ad !important; }