/* =========================================================================
   Check Clubs — "neón sobre asfalto"
   Negro cálido de calle a las 3 de la mañana, ámbar de luz de sodio y un
   lima eléctrico reservado para lo único que de verdad importa: si entras
   gratis. Nada más usa ese color, para que el ojo lo encuentre solo.
   Diseñado primero para el móvil; el escritorio es el caso raro.
   ========================================================================= */

:root {
  /* superficies */
  --asfalto:   #08070a;
  --panel:     #100e14;
  --panel-2:   #171420;
  --borde:     #272231;
  --borde-vivo:#3b3348;

  /* tinta */
  --tinta:     #f6f1e8;   /* blanco cálido, no #fff: cansa menos de noche */
  --apagado:   #9a9299;
  --tenue:     #6d6670;

  /* acentos */
  --ambar:     #ffb03a;   /* luz de sodio: el color de la calle en Madrid */
  --ambar-hex: 255,176,58;
  --lima:      #b8ff2e;   /* SOLO para gratis */
  --lima-hex:  184,255,46;
  --rosa:      #ff4d8d;   /* chicas */
  --cian:      #46d5ff;   /* chicos */
  --oro:       #e8c46a;   /* salas top */

  --radio:     14px;
  --radio-s:   10px;

  /* Alto real de pantalla en móvil: dvh evita el salto cuando la barra
     del navegador aparece y desaparece al hacer scroll. */
  --alto: 100dvh;

  --seguro-arriba:  env(safe-area-inset-top, 0px);
  --seguro-abajo:   env(safe-area-inset-bottom, 0px);
  --seguro-izq:     env(safe-area-inset-left, 0px);
  --seguro-der:     env(safe-area-inset-right, 0px);

  --margen: max(16px, var(--seguro-izq));
}

* { box-sizing: border-box; }

/* El atributo hidden tiene que ganar a cualquier display que pongamos luego. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;   /* Safari no reescala al girar el móvil */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: var(--alto);
  background: var(--asfalto);
  color: var(--tinta);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding:
    calc(var(--seguro-arriba) + 14px)
    var(--margen)
    calc(var(--seguro-abajo) + 48px);
  overflow-x: hidden;
  overscroll-behavior-y: none;      /* nada de rebote raro en iOS */
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- atmósfera: grano de impresión y un halo ámbar arriba --------------- */

.grano {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.halo {
  position: fixed;
  top: -280px;
  left: 50%;
  width: 760px;
  height: 560px;
  margin-left: -380px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--ambar-hex), .16), transparent 70%);
}

body > *:not(.grano):not(.halo) { position: relative; z-index: 1; }

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

.cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.marca { min-width: 0; }        /* sin esto el flex no deja encoger el título */

.marca h1 {
  margin: 0;
  font-family: Syne, Archivo, sans-serif;
  font-weight: 800;
  /* Medido: en Syne 800 el ancho ≈ 11.6× el tamaño de fuente. A 320px de
     pantalla quedan ~232px para la marca, así que el mínimo no puede pasar
     de 19px o se sale. */
  font-size: clamp(19px, 6.2vw, 38px);
  letter-spacing: -.035em;
  line-height: .95;
  white-space: nowrap;
}
.marca h1 em {
  font-style: normal;
  color: var(--ambar);
  text-shadow: 0 0 26px rgba(var(--ambar-hex), .45);
}

.sello {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--tenue);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.icono {
  flex: none;
  width: 44px;              /* 44px: mínimo cómodo para el dedo */
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.icono:active { transform: scale(.92); }
.icono:hover { border-color: var(--ambar); color: var(--ambar); }
.icono:disabled { opacity: .4; }

/* --- los días, en fila deslizable -------------------------------------- */

.dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* se sale del margen del body para que la fila muera en el borde */
  margin: 0 calc(var(--margen) * -1) 12px;
  padding: 2px var(--margen) 10px;
}
.dias::-webkit-scrollbar { display: none; }

.dia {
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 7px 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--apagado);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.dia b { display: block; font-weight: 600; color: var(--tinta); font-size: 13.5px; }
.dia span { font-size: 11px; color: var(--tenue); }
.dia:active { transform: scale(.96); }

.dia.on {
  background: linear-gradient(160deg, rgba(var(--ambar-hex), .2), rgba(var(--ambar-hex), .06));
  border-color: var(--ambar);
}
.dia.on b, .dia.on span { color: var(--ambar); }

/* --- filtros ------------------------------------------------------------ */

.mandos { margin-bottom: 14px; }

.abrir-filtros {
  display: none;                    /* solo aparece en móvil */
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.abrir-filtros .marcador {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--ambar);
  color: #1a1206;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(180deg, var(--panel), rgba(16, 14, 20, .6));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
}

.campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.campo-mitad { flex: 1 1 calc(50% - 6px); }

.campo label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
}

select, input[type="search"], input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--panel-2);
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font-family: inherit;
  /* 16px exactos: por debajo de eso, Safari en iPhone hace zoom al enfocar */
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239a9299' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 1px;
}
input[type="search"]::-webkit-search-cancel-button { filter: invert(.6); }

/* stepper de edad: en el móvil es mucho más rápido que teclear */
.edad { display: flex; align-items: stretch; gap: 6px; }
.edad input {
  flex: 1;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.edad input::-webkit-outer-spin-button,
.edad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paso {
  flex: none;
  width: 44px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-size: 19px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.paso:active { background: var(--borde); }

.seg {
  display: flex;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  overflow: hidden;
}
.seg button {
  flex: 1;
  min-height: 44px;
  padding: 0 6px;
  background: none;
  border: 0;
  color: var(--apagado);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.seg button + button { border-left: 1px solid var(--borde); }
.seg button.on { background: var(--ambar); color: #1a1206; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  min-height: 40px;
  padding: 0 14px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--apagado);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.chips button.on { border-color: var(--ambar); color: var(--ambar); }

/* --- recuento ----------------------------------------------------------- */

.recuento {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--apagado);
}
.recuento b {
  font-family: Syne, sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--tinta);
}
.recuento .libres { color: var(--lima); font-weight: 600; }

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

.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel), #0d0b11);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  animation: entra .45s cubic-bezier(.2, .7, .3, 1) both;
  transition: border-color .22s, transform .22s;
}
.tarjeta:hover { border-color: var(--borde-vivo); }

/* Las gratis llevan un filo lima: se localizan de un vistazo al bajar */
.tarjeta.gratis { border-color: rgba(var(--lima-hex), .34); }
.tarjeta.gratis:hover { border-color: rgba(var(--lima-hex), .6); }

@keyframes entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.cartel {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #050409;
  overflow: hidden;
}
.cartel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
/* velo inferior para que la hora se lea sobre cualquier cartel */
.cartel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 4, 9, .95) 0%, rgba(5, 4, 9, .3) 34%, transparent 62%);
}

.hora, .cinta {
  position: absolute;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 7px;
  padding: 4px 9px;
  font-variant-numeric: tabular-nums;
}
.hora {
  left: 11px;
  bottom: 11px;
  background: rgba(8, 7, 10, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cinta {
  right: 11px;
  top: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(8, 7, 10, .8);
  border: 1px solid var(--oro);
  color: var(--oro);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cuerpo {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  flex: 1;
}

.sala {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ambar);
}
.titulo {
  margin: -4px 0 0;
  font-family: Syne, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;   /* nombres largos sin espacios no rompen la tarjeta */
}

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.eti {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--apagado);
  white-space: nowrap;
}
.eti.gratis {
  border-color: var(--lima);
  color: var(--lima);
  background: rgba(var(--lima-hex), .1);
  font-weight: 700;
  letter-spacing: .03em;
}
.eti.edad   { border-color: #4b4160; color: #c3b2e6; }
.eti.barra  { border-color: var(--ambar); color: var(--ambar); background: rgba(var(--ambar-hex), .1); }
.eti.chicas { border-color: var(--rosa); color: var(--rosa); }
.eti.chicos { border-color: var(--cian); color: var(--cian); }
.eti.aviso  { border-color: #7d5a1e; color: #d8a343; }
.eti.suave  { border-color: transparent; background: rgba(255, 255, 255, .05); }

.listas { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.fila { display: flex; gap: 7px; align-items: baseline; color: var(--apagado); }
.fila b { color: var(--tinta); font-weight: 600; }
.fila .req {
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--tenue);
}
.fila .val { margin-left: auto; white-space: nowrap; }
.fila .val.gratis { color: var(--lima); font-weight: 700; }
.fila.no { opacity: .42; }

.datos {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 12px;
  color: var(--apagado);
}
.dato { display: flex; gap: 7px; align-items: flex-start; }
.dato svg { flex: none; margin-top: 2px; color: var(--tenue); }
.dato a {
  color: var(--ambar);
  text-decoration: none;
  /* El enlace es texto de 12px: sin este relleno la zona táctil se queda en
     13px de alto y con el dedo no hay quien le dé. Los márgenes negativos
     devuelven la maqueta a su sitio. */
  display: inline-block;
  padding: 9px 10px;
  margin: -9px -4px;
  font-weight: 600;
}
.dato a:hover { text-decoration: underline; }

.ir {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  background: var(--ambar);
  color: #171004;
  text-decoration: none;
  border-radius: var(--radio-s);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: filter .2s, transform .12s;
}
.ir:active { transform: scale(.985); }
.ir:hover { filter: brightness(1.1); }
.tarjeta.gratis .ir { background: var(--lima); color: #16210a; }

/* --- estados ------------------------------------------------------------ */

.vacio {
  margin: 0;
  padding: 46px 18px;
  text-align: center;
  color: var(--apagado);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

.pie {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--tenue);
  text-align: center;
}
.pie p { margin: 0; }
.pie a { color: var(--apagado); }

.cargando {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 24px;
  text-align: center;
  background: rgba(8, 7, 10, .95);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cargando[hidden] { display: none; }
.cargando p { margin: 0; font-size: 15px; }
.cargando small { color: var(--tenue); max-width: 30ch; }
.bola {
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--borde);
  border-top-color: var(--ambar);
  border-radius: 50%;
  animation: gira .75s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* =========================================================================
   MÓVIL: los filtros se pliegan tras un botón. En una pantalla de 390px
   no puede haber 350px de mandos antes de la primera fiesta.
   ========================================================================= */

/* Por debajo de 380px (iPhone SE, Androids pequeños) el logo en una línea se
   recorta. Apilarlo no es un parche: en dos líneas gana pinta de cartel. */
@media (max-width: 379px) {
  .marca h1 em { display: block; }
  .cabecera { align-items: center; }
}

@media (max-width: 719px) {
  .abrir-filtros { display: flex; }

  .panel {
    display: none;
    margin-top: 10px;
    animation: despliega .22s ease both;
  }
  .panel.abierto { display: flex; }

  @keyframes despliega {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* =========================================================================
   ESCRITORIO
   ========================================================================= */

@media (min-width: 720px) {
  body { padding-left: max(28px, var(--seguro-izq)); padding-right: max(28px, var(--seguro-der)); }
  .panel { align-items: flex-end; }
  .campo { flex: 1 1 190px; }
  .campo-mitad { flex: 0 1 150px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
}

@media (min-width: 1180px) {
  body { max-width: 1400px; margin: 0 auto; }
}

/* Ratones y trackpads: el hover levanta la tarjeta. En táctil no, que ahí
   el hover se queda pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-3px); }
}

.dato b { color: var(--tinta); font-weight: 600; }