/* ═══════════════════════════════════════════════════════════════════════
   JUEGOS JOKER ARGENTINA — Mapa de red de transporte
   Sistema BYQ « Harbor ». Tomado tal cual: el titular en serif editorial de
   peso medio con tracking cerrado frente a un cuerpo modernista de 16 px,
   la etiqueta de 12 px con 0.02em reservada a metadatos, la escalera de
   superficies —blanco, hueso, lino cálido y una banda oscura para el
   contraste—, los radios generosos de 16 a 40 px, la píldora como forma de
   la acción y el divisor de un solo tinte estructural en lugar de líneas
   decorativas.
   Adaptado: el pliego fija la paleta de líneas de la red —roja, azul, verde
   y ocre sobre campo blanco— y las familias condensada para rótulos de
   estación y neutra para el texto. El SVG que el pliego pedía se dibuja con
   cajas y filetes, porque el proyecto no admite un solo archivo gráfico; la
   alternativa textual que el pliego exige se mantiene completa y es la
   versión canónica para lector de pantalla.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --campo:#FFFFFF; --hueso:#F3F4F2; --lino:#EDE8E2;
  --tinta:#212529;
  --tinta-72:rgba(33,37,41,.72);
  --tinta-48:rgba(33,37,41,.48);
  --tinta-16:rgba(33,37,41,.16);
  --roja:#E03131; --azul:#1C7ED6; --verde:#2F9E44; --ocre:#E8A33D;
  --claro-72:rgba(243,244,242,.72);
  --claro-40:rgba(243,244,242,.40);
  --display:"Franklin Gothic Medium","Archivo","Arial Narrow",Arial,sans-serif;
  --cuerpo:Arial,Helvetica,"Liberation Sans",sans-serif;
  --t-caption:12px; --t-body-sm:14px; --t-body:16px; --t-body-lg:20px;
  --t-h-sm:24px; --t-h:28px; --t-h-lg:48px; --t-display-sm:64px;
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-24:24px;--s-32:32px;--s-40:40px;
  --s-64:64px;--s-80:80px;--s-120:120px;--s-160:160px;
  --pagina:1400px;
  --r-xs:12px; --r-s:16px; --r-m:24px; --r-r:32px; --r-b:40px; --r-p:9999px;
  --d:200ms; --e:ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--campo);color:var(--tinta);font-family:var(--cuerpo);
  font-size:var(--t-body);line-height:1.5;letter-spacing:-.01em;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1}
h1{font-size:var(--t-display-sm)}
h2{font-size:var(--t-h-lg)}
h3{font-size:var(--t-h-sm)}
p{margin:0 0 var(--s-16)}
p:last-child{margin-bottom:0}
@media(max-width:991px){h1{font-size:var(--t-h-lg)}h2{font-size:var(--t-h)}}
@media(max-width:479px){h1{font-size:var(--t-h)}}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.etiqueta{display:block;font-size:var(--t-caption);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tinta-48)}
.oscura .etiqueta{color:var(--claro-40)}

/* ═══ Entradas ════════════════════════════════════════════════════════ */
.js-on .revelar{opacity:0;transform:translateY(10px);
  transition:opacity 400ms var(--e),transform 400ms var(--e)}
.js-on .revelar.visto{opacity:1;transform:none}
.filete{height:1px;background:var(--tinta-16);transform-origin:left}
.js-on .filete{transform:scaleX(0);transition:transform 500ms var(--e)}
.js-on .filete.visto{transform:scaleX(1)}

/* ═══ BLOQUE 3.0 — Barra de líneas ══════════════════════════════════ */
.barra-lineas{border-bottom:1px solid var(--tinta-16);background:var(--campo)}
.barra-lineas .marco{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16) var(--s-24);
  padding-block:var(--s-16)}
.barra-lineas .red{font-family:var(--display);font-size:var(--t-h-sm);letter-spacing:-.03em;
  text-decoration:none;margin-right:auto}
.barra-lineas nav{display:flex;flex-wrap:wrap;gap:var(--s-12)}
.barra-lineas nav a{display:inline-flex;align-items:center;gap:var(--s-8);
  font-size:var(--t-body-sm);text-decoration:none;border-radius:var(--r-p);
  padding:6px 14px;background:var(--hueso);transition:background var(--d) var(--e)}
.barra-lineas nav a:hover{background:var(--lino)}
.bullet{width:10px;height:10px;border-radius:50%;flex:none;display:block}
.bullet.l1{background:var(--roja)} .bullet.l2{background:var(--azul)}
.bullet.l3{background:var(--verde)} .bullet.l4{background:var(--ocre)}
.edad{font-size:var(--t-caption);font-weight:500;letter-spacing:.02em;
  border:1px solid var(--tinta-16);border-radius:var(--r-p);padding:5px 12px}

/* ═══ Secciones ═════════════════════════════════════════════════════ */
.zona{padding-block:var(--s-120)}
.zona.corta{padding-block:var(--s-80)}
.zona.hueso{background:var(--hueso)}
.zona.lino{background:var(--lino)}
.zona.oscura{background:var(--tinta);color:var(--hueso);border-radius:var(--r-b)}
.zona h2{margin-top:var(--s-16)}
.intro{margin-top:var(--s-24);max-width:68ch;font-size:var(--t-body-lg);line-height:1.4}
.oscura .intro{color:var(--claro-72)}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-top:var(--s-32)}

/* ═══ BLOQUE 4.0 — Esquema de red dibujado con cajas ════════════════ */
.red-esquema{margin-top:var(--s-40);border:1px solid var(--tinta-16);border-radius:var(--r-r);
  background:var(--campo);padding:var(--s-40);overflow-x:auto}
.ramal{display:flex;align-items:center;gap:0;min-width:640px;margin-bottom:var(--s-32)}
.ramal:last-child{margin-bottom:0}
.ramal .rotulo-l{font-family:var(--display);font-size:var(--t-body-sm);letter-spacing:-.02em;
  width:150px;flex:none;padding-right:var(--s-16)}
.estacion{display:flex;flex-direction:column;align-items:center;gap:var(--s-8);flex:none;
  width:118px;text-align:center}
.punto{width:16px;height:16px;border-radius:50%;background:var(--campo);border:3px solid var(--linea);
  display:block}
.estacion.trasbordo .punto{width:22px;height:22px;border-width:4px}
.estacion .nombre{font-size:var(--t-caption);line-height:1.33;font-weight:500}
.tramo{height:5px;background:var(--linea);flex:1 1 auto;min-width:24px}
.tramo.punteado{background:repeating-linear-gradient(90deg,var(--linea) 0 9px,transparent 9px 17px)}
.l1{--linea:var(--roja)} .l2{--linea:var(--azul)}
.l3{--linea:var(--verde)} .l4{--linea:var(--ocre)}

/* ═══ BLOQUE 5.0 — Leyenda: color y forma ═══════════════════════════ */
.leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s-16);margin-top:var(--s-32)}
.clave{display:flex;gap:var(--s-12);align-items:flex-start;background:var(--campo);
  border:1px solid var(--tinta-16);border-radius:var(--r-s);padding:var(--s-16)}
.clave .marca{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--tinta);
  background:var(--campo)}
.clave .marca.cuadrada{border-radius:4px}
.clave .marca.hueca{border-style:dashed}
.clave .marca.llena{background:var(--tinta)}
.clave b{display:block;font-size:var(--t-body-sm)}
.clave span{display:block;margin-top:var(--s-4);font-size:var(--t-caption);line-height:1.4;
  color:var(--tinta-72)}

/* ═══ Lista textual de estaciones (alternativa canónica) ════════════ */
.lista-red{list-style:none;margin:var(--s-32) 0 0;padding:0}
.lista-red>li{border-top:1px solid var(--tinta-16);padding-block:var(--s-16)}
.lista-red h3{display:flex;align-items:center;gap:var(--s-12)}
.lista-red ol{margin:var(--s-12) 0 0;padding-left:1.4em;font-size:var(--t-body-sm);
  line-height:1.7;color:var(--tinta-72)}
.oscura .lista-red>li{border-top-color:var(--claro-40)}
.oscura .lista-red ol{color:var(--claro-72)}

/* ═══ BLOQUES 8.0–11.0 — Fichas de estación ═════════════════════════ */
.andenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-24);margin-top:var(--s-40)}
.anden{background:var(--campo);border:1px solid var(--tinta-16);border-radius:var(--r-m);
  padding:var(--s-32);text-decoration:none;display:block;
  transition:border-color var(--d) var(--e)}
.anden:hover{border-color:var(--linea,var(--azul))}
.anden .linea-tag{display:inline-flex;align-items:center;gap:var(--s-8);
  font-size:var(--t-caption);font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--tinta-48)}
.anden h3{margin-top:var(--s-12)}
.anden p{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.42;color:var(--tinta-72)}

/* ═══ BLOQUE 14.0 — Cinco criterios de ruta ═════════════════════════ */
.criterios{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-16);margin-top:var(--s-40)}
.criterio{background:var(--campo);border-radius:var(--r-s);padding:var(--s-24);
  border-left:5px solid var(--linea,var(--azul))}
.criterio b{display:block;font-family:var(--display);font-size:var(--t-body-lg);
  letter-spacing:-.02em}
.criterio span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);line-height:1.42;
  color:var(--tinta-72)}

/* ═══ BLOQUE 17.0 — Dos andenes de estado ═══════════════════════════ */
.paneles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32);margin-top:var(--s-40)}
@media(max-width:767px){.paneles{grid-template-columns:1fr}}
.panel{background:var(--campo);border-radius:var(--r-m);padding:var(--s-32)}
.oscura .panel{background:rgba(243,244,242,.06)}
.panel ul{list-style:none;margin:var(--s-24) 0 0;padding:0}
.panel li{padding-block:var(--s-12);border-top:1px solid var(--tinta-16);font-size:var(--t-body)}
.oscura .panel li{border-top-color:var(--claro-40)}

/* ═══ BLOQUE 18.0 — Cabina de control ═══════════════════════════════ */
.cabina{margin-top:var(--s-40);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-24)}
.cabina dt{font-size:var(--t-caption);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tinta-48)}
.cabina dd{margin:var(--s-8) 0 0;font-size:var(--t-body)}
.oscura .cabina dt{color:var(--claro-40)}

/* ═══ BLOQUE 19.0 — Aviso de servicio ═══════════════════════════════ */
.aviso-servicio ul{list-style:none;margin:var(--s-24) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-24)}
.aviso-servicio li b{display:block;font-family:var(--display);font-size:var(--t-body-lg);
  letter-spacing:-.02em}
.aviso-servicio li span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);
  line-height:1.42;color:var(--claro-72)}

/* ═══ BLOQUE 22.0 — Consultas en la estación ════════════════════════ */
.consultas{margin-top:var(--s-40);border-top:1px solid var(--tinta-16)}
.consulta{border-bottom:1px solid var(--tinta-16)}
.consulta .tirador{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-24);background:none;border:0;padding:var(--s-24) 0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:var(--t-h-sm);letter-spacing:-.03em;color:inherit}
.senal{width:18px;height:18px;flex:none;border-radius:50%;border:3px solid var(--azul);
  transition:background var(--d) var(--e)}
.tirador[aria-expanded="true"] .senal{background:var(--azul)}
.cuerpo-q{max-height:0;overflow:hidden;transition:max-height var(--d) var(--e)}
.cuerpo-q.abierto{max-height:460px}
.cuerpo-q:not(.abierto) .dentro{visibility:hidden}
.dentro{padding-bottom:var(--s-32);max-width:70ch}

/* ═══ Acción, aviso y divulgación ═══════════════════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12);background:var(--azul);
  color:var(--campo);border-radius:var(--r-p);padding:13px 26px;font-weight:500;
  text-decoration:none;transition:background var(--d) var(--e)}
.cta:hover{background:var(--tinta)}
.oscura .cta{background:var(--hueso);color:var(--tinta)}
.chevron{display:inline-block;width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.aviso{font-size:var(--t-caption);font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--tinta-48)}
.oscura .aviso,.aviso-servicio .aviso{color:var(--claro-40)}
.divulgacion{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.42;
  color:var(--tinta-48);max-width:78ch}
.oscura .divulgacion{color:var(--claro-40)}
.enlace{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.oscura .enlace{color:var(--hueso)}
.pendiente{color:var(--roja)}
.fallo{margin-top:var(--s-24);font-size:var(--t-body-sm);line-height:1.42;color:var(--tinta-48)}

/* ═══ BLOQUE 23.0 — Fin de línea ════════════════════════════════════ */
.pie-sitio{background:var(--tinta);color:var(--hueso);padding-block:var(--s-80);
  border-radius:var(--r-b) var(--r-b) 0 0;margin-top:var(--s-40)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-64)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-32)}}
.pie-marca{font-family:var(--display);font-size:var(--t-h);letter-spacing:-.03em}
.pie-nota{margin-top:var(--s-12);font-size:var(--t-body-sm);line-height:1.42;color:var(--claro-72)}
.pie-sitio nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-12) var(--s-24)}
.pie-sitio nav a{font-size:var(--t-body-sm);color:var(--claro-72);text-decoration:none;
  transition:color var(--d) var(--e)}
.pie-sitio nav a:hover{color:var(--campo)}
.legal{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.7;color:var(--claro-40);
  max-width:96ch}