/* TrueTriple, hoja unica del sitio. Misma paleta que la app de escritorio.
   Sin fuentes ni CSS de terceros: el sitio no pide nada a nadie. */

:root {
  --bg: #101216;
  --bg2: #171a20;
  --bg3: #1f232b;
  --linea: #2b303a;
  --txt: #e8eaee;
  --txt2: #98a0ae;
  --acento: #ff8a3d;
  --acento2: #e0341f;
  --ok: #3ecf7a;
  --ancho: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

a {
  color: var(--acento);
}

.envoltorio {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- cabecera ------------------------------------------------------------ */

header.sitio {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(16, 18, 22, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

header.sitio .envoltorio {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--txt);
}

.marca strong {
  font-size: 17px;
  letter-spacing: 0.2px;
}

.marca span {
  font-size: 11px;
  color: var(--txt2);
  display: block;
  line-height: 1;
  margin-top: 2px;
}

header.sitio nav {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

header.sitio nav a {
  color: var(--txt2);
  text-decoration: none;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 8px;
}

header.sitio nav a:hover {
  color: var(--txt);
  background: var(--bg3);
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  padding: 68px 0 44px;
  text-align: center;
  background: radial-gradient(900px 380px at 50% -8%, rgba(255, 138, 61, 0.12), transparent 70%);
}

.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}

.hero .bajada {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--txt2);
  max-width: 640px;
  margin: 0 auto 28px;
}

.etiqueta {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid rgba(255, 138, 61, 0.35);
  border-radius: 30px;
  padding: 4px 13px;
  margin-bottom: 18px;
}

.botones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
}

.btn-primario {
  background: linear-gradient(135deg, var(--acento), var(--acento2));
  color: #fff;
}

.btn-primario:hover {
  filter: brightness(1.09);
}

.btn-secundario {
  background: var(--bg3);
  color: var(--txt);
  border-color: var(--linea);
}

.btn-secundario:hover {
  border-color: var(--txt2);
}

/* --- secciones ----------------------------------------------------------- */

section {
  padding: 52px 0;
}

section + section {
  border-top: 1px solid var(--linea);
}

h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.sub {
  color: var(--txt2);
  margin: 0 0 30px;
  max-width: 680px;
}

h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

/* --- video --------------------------------------------------------------- */

.video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg2);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-marco iframe,
.video-marco video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-pendiente {
  text-align: center;
  color: var(--txt2);
  padding: 24px;
}

.video-pendiente .icono {
  font-size: 40px;
  opacity: 0.35;
  display: block;
  margin-bottom: 8px;
}

/* --- comparativa --------------------------------------------------------- */

.comparativa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 760px) {
  .comparativa {
    grid-template-columns: 1fr;
  }
}

.caso {
  background: var(--bg2);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 20px;
}

.caso.malo {
  border-color: rgba(224, 52, 31, 0.3);
}

.caso.bueno {
  border-color: rgba(62, 207, 122, 0.28);
}

.caso h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.caso p {
  color: var(--txt2);
  font-size: 14.5px;
  margin: 0;
}

.caso svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 6px 0 14px;
}

.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.punto.rojo {
  background: var(--acento2);
}

.punto.verde {
  background: var(--ok);
}

/* --- tarjetas ------------------------------------------------------------ */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
}

.tarjeta {
  background: var(--bg2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 20px;
}

.tarjeta p {
  color: var(--txt2);
  font-size: 14.5px;
  margin: 0;
}

.tarjeta .icono {
  font-size: 22px;
  display: block;
  margin-bottom: 10px;
}

/* --- numeros ------------------------------------------------------------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.numero {
  background: var(--bg2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.numero .valor {
  font-size: 30px;
  font-weight: 700;
  color: var(--acento);
  line-height: 1.1;
}

.numero .rotulo {
  font-size: 13px;
  color: var(--txt2);
  margin-top: 4px;
}

/* --- avisos -------------------------------------------------------------- */

.nota {
  background: rgba(255, 138, 61, 0.07);
  border-left: 3px solid var(--acento);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  color: var(--txt2);
  font-size: 14.5px;
}

.nota strong {
  color: var(--txt);
}

/* Marca lo que todavia hay que completar antes de publicar. */
.pendiente {
  border: 1px dashed rgba(255, 138, 61, 0.45);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--txt2);
  font-size: 13.5px;
  background: rgba(255, 138, 61, 0.04);
}

.pendiente::before {
  content: "por completar";
  display: block;
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 5px;
}

/* --- listas -------------------------------------------------------------- */

ul.limpia {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

ul.limpia li {
  padding-left: 26px;
  position: relative;
  color: var(--txt2);
  font-size: 15px;
}

ul.limpia li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--acento);
}

ul.limpia li strong {
  color: var(--txt);
  font-weight: 600;
}

/* --- tabla --------------------------------------------------------------- */

.tabla-envoltorio {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 520px;
}

th,
td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--linea);
}

th {
  color: var(--txt2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

td strong {
  color: var(--txt);
}

/* --- pie ----------------------------------------------------------------- */

footer.sitio {
  border-top: 1px solid var(--linea);
  padding: 34px 0;
  color: var(--txt2);
  font-size: 13.5px;
}

footer.sitio .envoltorio {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

footer.sitio .derecha {
  margin-left: auto;
}

/* --- espacio reservado para imagen futura -------------------------------- */
.marco-imagen {
  background: var(--bg3);
  border: 1px solid var(--linea);
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marco-imagen::after {
  content: "imagen";
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--txt2);
  opacity: 0.28;
}
.marco-imagen.ancho { aspect-ratio: 24 / 9; }

/* --- pasos numerados (confianza) ----------------------------------------- */
ol.pasos {
  counter-reset: paso;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
ol.pasos li {
  counter-increment: paso;
  background: var(--bg2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px 18px 16px 58px;
  position: relative;
  color: var(--txt2);
  font-size: 14.5px;
}
ol.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acento), var(--acento2));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ol.pasos li strong { color: var(--txt); }

/* --- destacado (el trato) ------------------------------------------------ */
.destacado {
  background: linear-gradient(160deg, rgba(255,138,61,0.09), rgba(224,52,31,0.04));
  border: 1px solid rgba(255,138,61,0.3);
  border-radius: 16px;
  padding: 26px;
}
.total-trato {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  color: var(--acento);
  letter-spacing: -1px;
  line-height: 1.05;
  margin-bottom: 4px;
}

/* Recuadros de imagen dentro de tarjetas: ocultos por ahora (se reactivan
   quitando esta regla cuando haya imagenes). Los .ancho no se tocan. */
.tarjeta .marco-imagen { display: none; }

/* --- hub: puntos de estado extra y tarjetas-enlace de juego -------------- */
.punto.amarillo { background: #e8b23a; }
.punto.gris     { background: #98a0ae; }

/* Tarjeta que es un enlace entero (las de "elegí tu juego") */
.tarjeta-link {
  /* Columna, para poder empujar el "Entrar →" al pie con `margin-top: auto`:
     los tres textos tienen largos distintos y sin esto cada flecha queda a una
     altura, que es lo primero que se nota al mirar las tres juntas. */
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-link:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
}
.tarjeta h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.tarjeta-cta {
  display: inline-block;
  margin-top: 14px;
  align-self: flex-start;
  font-weight: 600;
  color: var(--acento);
  font-size: 14px;
}
.tarjeta-cta.tenue { color: var(--txt2); }

.tarjeta-link .tarjeta-cta {
  margin-top: auto;
  padding-top: 14px;
}

/* La tarjeta del juego que todavia no existe: apagada, no clickeable */
.tarjeta-proximo { opacity: .6; }

/* Etiqueta de estado, al lado del titulo de cada juego en "Elegi tu juego"
   (`.tarjeta h3` ya es un flex con gap, asi que entra sola en el renglon).
   Dice de un vistazo si el mod se puede bajar hoy, si esta en beta o si
   todavia se esta escribiendo, y el texto de la tarjeta lo repite en una
   frase, porque una etiqueta suelta no explica por que. */
.etiqueta-estado {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 1px 6px;
  line-height: 1.6;
  white-space: nowrap;
}

.etiqueta-estado.listo { color: var(--ok); }
.etiqueta-estado.beta  { color: #e8b23a; }
.etiqueta-estado.obra  { color: var(--txt2); }

/* --- foto de la tarjeta -------------------------------------------------- */

/* Las tres fotos viven en ESTE repo, en `sitio/juegos/`: son arte de tapa
   elegido para la tarjeta, no el banner del hero de cada juego, asi que son
   contenido de la home y no de los sitios de los juegos. Guardadas y no
   enlazadas al CDN de donde salieron: un enlace ajeno se rompe el dia que ellos
   muevan el archivo, y encima le avisa a ese servidor cada visita que tenemos. */

/* Los margenes negativos sacan la foto de los 20 px de padding de `.tarjeta`
   para que sangre hasta el borde. Se hace asi, y no tocando `.tarjeta`, porque
   esta hoja la sirve el hub para TODO el dominio: los otros tres sitios usan la
   misma clase para sus tarjetas de texto y no tienen que moverse.
   El radio es 11 y no 12: la tarjeta tiene 1 px de borde, y el radio interior
   de una caja con borde es el de afuera menos el ancho del borde. Con 12
   asomaria una uña de fondo en las esquinas. */
.tarjeta-foto {
  position: relative;
  display: block;
  margin: -20px -20px 16px;
  border-radius: 11px 11px 0 0;
  overflow: hidden;
  background: var(--bg3);
}

.tarjeta-foto img {
  display: block;
  width: 100%;
  /* `height: auto` NO sobra: los atributos width/height del HTML (que estan
     para que el navegador reserve el lugar antes de bajar la foto) entran como
     estilo, y un alto declarado le gana al aspect-ratio. Sin esta linea la foto
     se dibuja con su alto real, 447 px, en vez de los 186 que corresponden. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Las fotos son de tres juegos distintos y algunas son mas claras que otras;
     bajarlas un poco las empareja y deja que mande el texto. */
  filter: brightness(0.82) saturate(0.92);
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.tarjeta-link:hover .tarjeta-foto img {
  transform: scale(1.04);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-foto img,
  .tarjeta-link:hover .tarjeta-foto img {
    transform: none;
    transition: none;
  }
}