/* ============================================================
   IMPERIO ALGORÍTMICO — ZONA DE ALUMNOS
   Mismos tokens de marca que el sitio principal.
   ============================================================ */

:root {
  --negro: #0d0304;
  --negro-2: #150506;
  --granate: #1e0709;
  --granate-claro: #2c0b0e;
  --rojo: #e84547;
  --rojo-coral: #f2555a;
  --rojo-claro: #ff8a8d;
  --rojo-profundo: #5c1015;
  --borde: rgba(232, 69, 71, 0.28);
  --blanco: #ffffff;
  --texto: #e9dfe0;
  --texto-suave: #b9a6a8;
  --verde: #4ade80;
  --ambar: #fbbf24;

  --fondo-claro: #fbf9f9;
  --fondo-claro-2: #f4efef;
  --tinta: #1c0e0f;
  --tinta-suave: #6d595b;
  --rojo-tinta: #c9333a;
  --borde-claro: rgba(201, 51, 58, 0.22);

  --radio: 16px;
  --ancho: 900px;
  --f-cuerpo: "Poppins", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-cuerpo);
  background: var(--fondo-claro);
  color: var(--tinta);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
[hidden] { display: none !important; }

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

.kicker {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rojo-coral);
}

/* ============================ BOTONES ============================ */

.boton {
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.boton--principal {
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-profundo) 100%);
  color: var(--blanco);
  width: 100%;
  box-shadow: 0 6px 20px rgba(232, 69, 71, 0.28);
}
.boton--principal:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232, 69, 71, 0.38); }
.boton--principal:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.boton--fantasma {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
  padding: 8px 18px;
  font-size: 14px;
}
.boton--fantasma:hover { background: rgba(232, 69, 71, 0.12); color: var(--blanco); }

.boton--mini {
  background: var(--rojo-tinta);
  color: var(--blanco);
  padding: 7px 16px;
  font-size: 13px;
  flex-shrink: 0;
}
.boton--mini:hover { background: var(--rojo); }
.boton--mini.copiado { background: #15803d; }

/* ============================ LOGIN ============================ */

.pantalla--login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(140, 25, 30, 0.35), transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 100%, rgba(92, 16, 21, 0.4), transparent 70%),
    var(--negro);
}

.login-caja {
  width: 100%;
  max-width: 440px;
  background: var(--granate);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 44px 36px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.login-logo { width: 190px; margin: 0 auto 28px; }
.login-titulo { color: var(--blanco); font-size: 26px; font-weight: 700; margin: 8px 0 10px; line-height: 1.25; }
.login-sub { color: var(--texto-suave); font-size: 15px; margin-bottom: 28px; }

.campo { display: block; text-align: left; margin-bottom: 18px; }

.campo-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 7px;
}

.campo input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--blanco);
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo input::placeholder { color: #7a6668; }
.campo input:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(232, 69, 71, 0.18);
}

.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 66px; }

.ver-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--rojo-claro);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
}
.ver-password:hover { color: var(--blanco); }

.login-pie { margin-top: 22px; font-size: 14px; color: var(--texto-suave); }
.login-pie a { color: var(--rojo-claro); text-decoration: none; font-weight: 600; }
.login-pie a:hover { text-decoration: underline; }

/* ============================ AVISOS ============================ */

.aviso {
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  text-align: left;
}

.aviso--error {
  background: rgba(232, 69, 71, 0.14);
  border: 1px solid rgba(232, 69, 71, 0.45);
  color: var(--rojo-claro);
}

.aviso--ok {
  background: rgba(21, 128, 61, 0.09);
  border: 1px solid rgba(21, 128, 61, 0.35);
  color: var(--tinta-suave);
}
.aviso--ok strong { color: #15803d; display: block; }

.aviso--info {
  background: rgba(201, 51, 58, 0.07);
  border: 1px solid var(--borde-claro);
  color: var(--tinta-suave);
  margin-top: 22px;
  margin-bottom: 0;
}
.aviso--info strong { color: var(--tinta); }

/* ========================== CABECERA ========================== */

.cabecera {
  background: var(--negro);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cabecera-inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cabecera-logo { width: 150px; }
.cabecera-derecha { display: flex; align-items: center; gap: 14px; }
.cabecera-usuario { color: var(--texto-suave); font-size: 14px; }

/* ========================= HERO PANEL ========================= */

.hero-panel {
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(140, 25, 30, 0.35), transparent 60%),
    var(--negro);
  color: var(--blanco);
  padding: 44px 0 40px;
  text-align: center;
}

.hero-titulo { font-size: 32px; font-weight: 700; margin: 8px 0 20px; }

.estado-licencia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--granate-claro);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  color: var(--texto);
}

.punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.punto--verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.punto--ambar { background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
.punto--rojo  { background: var(--rojo);  box-shadow: 0 0 10px var(--rojo); }

/* =========================== BLOQUES =========================== */

.contenedor--panel { padding-top: 44px; padding-bottom: 60px; }

.bloque {
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 14px rgba(28, 14, 15, 0.05);
  scroll-margin-top: 84px;   /* la cabecera es sticky: evita que tape el título */
}

.bloque-titulo {
  font-size: 20px;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 12px;
}

.bloque-texto { color: var(--tinta-suave); font-size: 15px; margin-bottom: 16px; }
.bloque-texto:last-child { margin-bottom: 0; }
.bloque-texto strong { color: var(--tinta); }
.bloque-texto code, .lista-problemas code {
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--rojo-tinta);
}

.bloque--soporte { background: var(--fondo-claro-2); text-align: center; }
.bloque--soporte .boton--principal { max-width: 320px; margin-top: 8px; }

/* ========================== DESCARGAS ========================== */

.descargas { display: grid; gap: 12px; }

/* La descarga del .cfx del paso 1 lleva texto justo debajo y se quedaba pegada. */
#descarga-sqx { margin-bottom: 26px; }

.descarga {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: left;
}

.descarga-icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-profundo) 100%);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.descarga-cuerpo { flex: 1; min-width: 0; }
.descarga-nombre { font-weight: 600; font-size: 15px; color: var(--tinta); }
.descarga-desc { font-size: 13px; color: var(--tinta-suave); }

/* ============================ COPIAR ============================ */

.copiar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 12px 12px 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.copiar code {
  color: var(--rojo-claro);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.copiar-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  flex-shrink: 0;
}

.credenciales { display: grid; gap: 12px; }

.credencial-nota {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 10px;
  padding: 12px 16px;
}
.credencial-nota .copiar-etiqueta { color: var(--tinta-suave); }
.credencial-nota p { font-size: 14px; color: var(--tinta-suave); margin: 0; }
.zona-archivo:hover,
.zona-archivo.arrastrando { border-color: var(--rojo-tinta); background: #fff6f6; }

.parcheador .aviso { margin-top: 16px; margin-bottom: 0; }
.parcheador .boton--principal { margin-top: 16px; }

/* ======================== PASO 1 · SQX ========================= */

.sub-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
  margin: 26px 0 10px;
}

/* ==================== PASO 5 · RUTAS DE CUENTAS ==================== */

/* Cada fase vive en su propio carril, con banner de cabecera. La fase 1 es roja
   (marca) y la fase 2 es negra con dorado: se distinguen de un vistazo, que es
   justo lo que se confundia cuando eran dos titulillos seguidos. */
.fase-bloque {
  border-radius: var(--radio);
  overflow: hidden;
  margin-top: 26px;
}
.fase-bloque--1 { background: #fdf6f6; border: 1px solid rgba(201, 51, 58, 0.24); }
.fase-bloque--2 { background: #fbf7f0; border: 1px solid rgba(163, 121, 42, 0.32); }

.fase-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.fase-bloque--1 .fase-banner { background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-profundo) 100%); }
.fase-bloque--2 .fase-banner { background: linear-gradient(135deg, var(--granate-claro) 0%, var(--negro) 100%); }

.fase-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 7px 15px;
  flex-shrink: 0;
  line-height: 1;
}
.fase-bloque--1 .fase-num { background: var(--blanco); color: var(--rojo-tinta); }
.fase-bloque--2 .fase-num { background: #d9a83c; color: #241705; }

.fase-texto { min-width: 0; }
.fase-titulo { font-size: 16px; font-weight: 700; color: var(--blanco); line-height: 1.3; }
.fase-sub { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 3px 0 0; }

.fase-cuerpo { padding: 16px; }
.fase-cuerpo .ruta:last-child { margin-bottom: 0; }

/* El paso de una fase a la otra */
.puente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0 2px;
}

.puente-flecha { line-height: 1; }
.puente-flecha::before {
  content: "\2193";
  font-size: 22px;
  font-weight: 700;
  color: var(--rojo-tinta);
  opacity: 0.5;
}

.puente-texto { font-size: 13px; color: var(--tinta-suave); margin: 0; text-align: center; }
.puente-texto strong { color: var(--tinta); }

.ruta {
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: 14px;
  padding: 20px 20px 18px;
  margin-bottom: 14px;
}

.ruta-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.ruta-marca {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rojo-tinta);
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: 999px;
  padding: 4px 11px;
  flex-shrink: 0;
}

.ruta-titulo { font-size: 16px; font-weight: 700; color: var(--tinta); }
.ruta-sub { font-size: 14px; line-height: 1.6; color: var(--tinta-suave); margin-bottom: 16px; }
.ruta-sub strong { color: var(--tinta); }

.parejas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pareja {
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 12px;
  padding: 14px;
}

.pareja-nombre {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 10px;
}

.pareja-salida { font-size: 12.5px; line-height: 1.5; color: var(--tinta-suave); margin: 10px 0 0; }
.pareja-salida strong { color: var(--rojo-tinta); }

/* Dentro de una pareja el enfrentamiento va en vertical: en dos columnas la caja
   se queda en ~140px y el "InverseMode = true" se sale. */
.parejas .duelo { grid-template-columns: 1fr; gap: 8px; }
.parejas .vs {
  width: auto;
  height: auto;
  border-radius: 8px;
  padding: 4px 0;
  justify-self: stretch;
}

/* El enfrentamiento: un bando a cada lado y el "vs" en medio. */
.duelo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.duelo--2v2 {
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 12px;
  padding: 16px;
  align-items: stretch;
  gap: 14px;
}

.bando { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }

.bando-nombre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 2px;
}

.vs {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
}
.duelo--2v2 .vs { background: var(--blanco); }

.cuenta {
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cuenta-rol { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.cuenta-desc { font-size: 12px; line-height: 1.45; opacity: 0.9; }

/* El parametro va en su propia linea: pegado a la descripcion se sale de la caja
   en las columnas estrechas (parejas de la ruta 1). */
.cuenta-param { margin-top: 2px; }
.cuenta-param code { font-size: 11px; white-space: nowrap; border-radius: 4px; padding: 2px 6px; }

.cuenta--master {
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-profundo) 100%);
  color: var(--blanco);
}
.cuenta--master .cuenta-param code { background: rgba(0, 0, 0, 0.22); }

.cuenta--normal {
  background: rgba(232, 69, 71, 0.1);
  border: 1px solid var(--borde-claro);
  color: var(--tinta);
}
.cuenta--normal .cuenta-desc { color: var(--tinta-suave); }
.cuenta--normal .cuenta-param code { color: var(--rojo-tinta); background: var(--blanco); }

.cuenta--inverso {
  background: var(--granate);
  border: 1px solid var(--borde);
  color: var(--blanco);
}
.cuenta--inverso .cuenta-desc { color: var(--texto-suave); }
.cuenta--inverso .cuenta-param code { color: var(--rojo-claro); background: rgba(0, 0, 0, 0.3); }

/* Flecha de "y esto da como resultado" */
.flecha { text-align: center; margin: 14px 0 10px; line-height: 1; }
.flecha::before {
  content: "\2193";
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta-suave);
  opacity: 0.55;
}

.resultado {
  text-align: center;
  font-size: 14px;
  color: var(--tinta-suave);
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 10px;
  padding: 11px 14px;
  margin: 0;
}
.resultado strong { color: var(--rojo-tinta); }
.resultado--oro { background: #fdf6e8; border-color: rgba(163, 121, 42, 0.45); }
.resultado--oro strong { color: #9a6b12; }

/* El formato, a secas: sin caja ni boton, solo el texto sobre el fondo */
.formato-ejemplo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta);
  background: var(--blanco);
  margin: 0 0 18px;
}

/* ====================== MAPEADOR DE SIMBOLOS ===================== */

.mapeador {
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin: 0 0 22px;
}

.mapeador-campos {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.mapeador-campo { flex: 1; min-width: 0; display: block; }

.mapeador-etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 7px;
}

.mapeador input {
  width: 100%;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: 9px;
  padding: 11px 13px;
}
.mapeador input::placeholder { color: #b3a2a3; font-weight: 400; }
.mapeador input:focus { outline: none; border-color: var(--rojo-tinta); }

/* Los dos puntos separadores, alineados con la caja y no con la etiqueta */
.mapeador-dosp {
  font-size: 20px;
  font-weight: 700;
  color: var(--rojo-tinta);
  line-height: 1;
  padding-bottom: 14px;
  flex-shrink: 0;
}

.mapeador-pista {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0;
}
.mapeador-pista code {
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--rojo-tinta);
}

.mapeador .copiar { margin-bottom: 0; }
.mapeador .aviso { margin: 0; }

/* ============================ TABLA ============================ */

.tabla-scroll { overflow-x: auto; margin-bottom: 16px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }

.tabla th {
  background: var(--granate);
  color: var(--blanco);
  font-weight: 600;
  text-align: left;
  padding: 11px 14px;
  white-space: nowrap;
}
.tabla th:first-child { border-radius: 8px 0 0 0; }
.tabla th:last-child { border-radius: 0 8px 0 0; }

.tabla td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde-claro);
  color: var(--tinta-suave);
}
.tabla tr:last-child td { border-bottom: none; }
.tabla td:first-child { font-weight: 600; color: var(--tinta); }

/* ========================== PROBLEMAS ========================== */

.lista-problemas { list-style: none; text-align: left; margin-bottom: 26px; }

.lista-problemas li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 14px;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--borde-claro);
}
.lista-problemas li:last-child { border-bottom: none; }
.lista-problemas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo);
}
.lista-problemas strong { color: var(--tinta); }

/* ============================= PIE ============================= */

.pie {
  background: var(--negro);
  color: var(--texto-suave);
  text-align: center;
  padding: 34px 0;
  font-size: 14px;
}

.pie-legal { font-size: 12.5px; margin-top: 8px; opacity: 0.75; max-width: 560px; margin-inline: auto; }
.pie-enlaces { margin-top: 14px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.pie-enlaces a { color: var(--rojo-claro); text-decoration: none; font-size: 13px; }
.pie-enlaces a:hover { text-decoration: underline; }

/* =========================== RESPONSIVE =========================== */

@media (max-width: 620px) {
  .login-caja { padding: 34px 24px 26px; }
  .login-titulo { font-size: 23px; }
  .hero-titulo { font-size: 26px; }
  .bloque { padding: 24px 20px; }
  .cabecera-logo { width: 124px; }
  .cabecera-usuario { display: none; }

  .descarga { flex-wrap: wrap; }
  .descarga .boton--mini { width: 100%; }

  .copiar { flex-wrap: wrap; }
  .copiar code { width: 100%; flex-basis: 100%; }
  .copiar .boton--mini { width: 100%; }

  .ejemplos-equity { grid-template-columns: 1fr; }
  .criterios li { padding-left: 34px; font-size: 14.5px; }

  /* Los enfrentamientos se apilan: el "vs" pasa a separar de arriba abajo. */
  /* El separador estorba apilado: el orden de los campos ya lo explica. */
  .mapeador-campos { flex-direction: column; align-items: stretch; gap: 14px; }
  .mapeador-dosp { display: none; }

  .parejas { grid-template-columns: 1fr; }
  .duelo { grid-template-columns: 1fr; gap: 8px; }
  .vs { width: auto; height: auto; border-radius: 8px; padding: 4px 0; justify-self: stretch; }
  .fase-banner { flex-wrap: wrap; gap: 10px; }
  .fase-cuerpo { padding: 12px; }
  .ruta { padding: 16px 14px 14px; }
}