@font-face{
  font-family:'Bungee';
  src:url('/fonts/Bungee-Regular.woff2') format('woff2');
  font-display:swap;
}
:root{
  --fondo:#050505;
  --acento:#ef4a42;
  --crema:#ece4d8;
  --tenue:rgba(236,228,216,.62);
  --borde:rgba(236,228,216,.16);
  --marca:'Bungee','Arial Black',sans-serif;
  --cuerpo:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--fondo); color:var(--crema); }
body{
  min-height:100vh;
  font-family:var(--cuerpo);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
body.visor-abierto{ overflow:hidden; }
.cab{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid var(--borde);
  position:sticky;
  top:0;
  z-index:3;
  background:rgba(5,5,5,.94);
}
.volver{
  color:var(--crema);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  min-height:44px;
  display:flex;
  align-items:center;
}
.titulo{
  margin:0;
  font-family:var(--marca);
  font-size:22px;
  font-weight:400;
  letter-spacing:.5px;
  line-height:1;
}
.titulo span{ color:var(--acento); }
.idioma{ margin-left:auto; min-height:28px; }
.cuerpo{ padding:14px; max-width:1100px; margin:0 auto; }
.miga{
  margin:0 0 10px;
  font-size:14px;
  color:var(--tenue);
  min-height:1.3em;
}
.miga button{
  background:none;
  border:0;
  color:var(--crema);
  font:inherit;
  font-weight:700;
  padding:0;
  cursor:pointer;
}
.buscar{ display:block; margin:0 0 12px; }
.buscar-eti{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.buscar input{
  width:100%;
  min-height:46px;
  border-radius:12px;
  border:1px solid var(--borde);
  background:#100b0b;
  color:var(--crema);
  font:inherit;
  font-size:16px;
  padding:10px 14px;
}
.buscar input:focus{ outline:2px solid var(--acento); outline-offset:1px; }
.aviso{ margin:0 0 12px; color:var(--tenue); }
.lista{ display:flex; flex-direction:column; gap:8px; }
.fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  text-align:left;
  text-decoration:none;
  color:var(--crema);
  background:#100b0b;
  border:1px solid var(--borde);
  border-left:3px solid var(--acento);
  border-radius:12px;
  padding:12px 14px;
  min-height:52px;
  font:inherit;
  cursor:pointer;
}
.fila:nth-child(even){ border-left-color:#ece4d8; }
.fila b{ font-weight:750; }
.cuenta{
  color:var(--tenue);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cams{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:700px){
  .cams{ grid-template-columns:1fr 1fr; }
  .titulo{ font-size:28px; }
}
@media (min-width:1100px){
  .cams{ grid-template-columns:1fr 1fr 1fr; }
}
.cam{
  background:#100b0b;
  border:1px solid var(--borde);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
}
.cam:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.cam .marco{
  aspect-ratio:16/10;
  background:#171010;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cam img, .cam video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#171010;
  pointer-events:none;
}
.cam .hueco{
  color:var(--tenue);
  font-size:13px;
  padding:8px;
  text-align:center;
}
.cam figcaption{
  margin:0;
  padding:8px 10px 10px;
  font-size:14px;
  line-height:1.3;
}
.cam-nombre{ display:block; }
.donde{
  display:block;
  width:100%;
  margin:0 0 12px;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--acento);
  background:transparent;
  color:var(--crema);
  font-family:var(--marca);
  font-size:14px;
  letter-spacing:.4px;
  cursor:pointer;
}
.donde:disabled{ opacity:.6; }
.millas{
  display:block;
  margin-top:4px;
  color:var(--crema);
  font-weight:750;
  font-variant-numeric:tabular-nums;
}
.pista{
  display:block;
  margin-top:4px;
  color:var(--acento);
  font-size:12px;
  font-weight:750;
  letter-spacing:.3px;
}
.mas{
  display:block;
  width:100%;
  margin-top:12px;
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--acento);
  background:transparent;
  color:var(--crema);
  font-family:var(--marca);
  font-size:16px;
  letter-spacing:.6px;
  cursor:pointer;
}
.visor{
  position:fixed;
  inset:0;
  z-index:40;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visor[hidden]{ display:none !important; }
.visor-marco{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visor img, .visor video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:#000;
}
.visor .hueco{ color:var(--tenue); font-size:16px; }
.visor-cerrar{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));
  z-index:2;
  min-height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--acento);
  background:rgba(0,0,0,.78);
  color:var(--crema);
  font-family:var(--marca);
  font-size:14px;
  letter-spacing:.5px;
  cursor:pointer;
}
.visor-nombre{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top));
  left:12px;
  right:130px;
  z-index:2;
  margin:0;
  color:var(--crema);
  font-size:15px;
  line-height:1.3;
  text-shadow:0 1px 4px #000;
  pointer-events:none;
}
.visor:fullscreen,
.visor:-webkit-full-screen{
  width:100%;
  height:100%;
  background:#000;
}