/* Pie y página para organizadores.
   Extiende klubb-web.css (.site-footer, .footer-inner). Sin colores nuevos. */

/* ── Pie ───────────────────────────────────────────────────────────── */
/* Las redes son marcas, no iconos de interfaz: van rellenas y no con trazo,
   por eso anulan la regla global de svg. */
.footer-redes{display:inline-flex;align-items:center;gap:16px;margin-left:auto}
.footer-redes a{display:inline-flex;color:var(--muted);transition:color .18s}
.footer-redes a:hover{color:var(--accent-deep)}
.footer-redes svg{width:18px;height:18px;fill:currentColor;stroke:none}

/* Lo legal va centrado y callado: es lo que hay que poder encontrar, no lo
   que hay que leer. La navegación no se repite acá: ya está en el encabezado. */
.footer-fino{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:12px;color:var(--muted);text-align:center;
}
.footer-fino nav{
  display:flex;align-items:center;justify-content:center;
  gap:12px 26px;flex-wrap:wrap;
}
.footer-fino a{color:var(--muted)}
.footer-fino a:hover{color:var(--accent-deep)}
.footer-fino>p{margin:0;opacity:.8}

@media(max-width:800px){
  .footer-fino{margin-top:22px;gap:14px}
  .footer-fino nav{gap:10px 18px}
}

/* ── Página para locales ───────────────────────────────────────────── */
.venues-hero{padding-block:72px 56px;max-width:780px}
.venues-hero h1{
  font-size:64px;line-height:1.04;letter-spacing:-.03em;font-weight:700;margin-top:18px;
}
.venues-hero h1 em{font-style:normal;color:var(--accent)}
.venues-hero>p{margin-top:22px;font-size:18px;color:var(--muted);max-width:620px}
.venues-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.venues-steps{padding-block:56px;border-top:1px solid var(--line)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:34px}
.step{display:flex;flex-direction:column;gap:9px}
.step span{
  font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:600;
}
.step h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.step p{font-size:14px;color:var(--muted);line-height:1.65}

.venues-cargo{padding-block:56px;border-top:1px solid var(--line)}
.cargo-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start;margin-top:34px}
.cargo-copy h2{font-size:40px;line-height:1.1;letter-spacing:-.02em;font-weight:700}
.cargo-copy p{margin-top:18px;font-size:15px;color:var(--muted);line-height:1.7}
.cargo-destacado{
  border:1px solid var(--line);border-radius:18px;padding:30px 28px;
  background:var(--soft);display:flex;flex-direction:column;gap:14px;
}
.cargo-titular{
  font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.25;
}
.cargo-destacado p{font-size:15px;color:var(--muted);line-height:1.7;margin:0}
.cargo-nota{
  font-size:13px;padding-top:12px;border-top:1px solid var(--line);
}
.venues-puerta{padding-block:56px;border-top:1px solid var(--line)}
.puerta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
.puerta-item{
  border:1px solid var(--line);border-radius:18px;padding:26px 24px;background:var(--surface);
  display:flex;flex-direction:column;gap:11px;
}
.puerta-item i{width:22px;height:22px;color:var(--accent-deep)}
.puerta-item h3{font-size:17px;font-weight:600}
.puerta-item p{font-size:14px;color:var(--muted);line-height:1.65}

@media(max-width:1100px){
  .venues-hero h1{font-size:52px}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .cargo-layout{grid-template-columns:1fr;gap:34px}
  .cargo-copy h2{font-size:34px}
  .cargo-destacado{padding:24px 22px}
}
@media(max-width:800px){
  .venues-hero{padding-block:44px 38px}
  .venues-hero h1{font-size:42px}
  .venues-hero>p{font-size:16px}
  .puerta-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .venues-hero h1{font-size:36px}
  .steps-grid{grid-template-columns:1fr;gap:22px}
}

/* ─── La pared de flyers ──────────────────────────────────────────────
   El riel arranca como fotos tiradas sobre una mesa: giradas, pisándose,
   un poco apagadas. Al primer scroll se enderezan, recuperan color y caen
   en su lugar.

   No es contenido nuevo ni una segunda consulta: son los mismos flyers de
   la cartelera, en su estado de entrada. Cuando termina de acomodarse, el
   JavaScript saca las dos clases y el riel vuelve a ser el de siempre, sin
   dejar ninguna regla puesta encima.

   Los corrimientos verticales llegan hasta 12px y el giro hasta 5 grados,
   que sobre una pieza de 200x250 suma unos 20px. El riel tiene 22px de aire
   arriba y abajo, así que nada queda cortado por el recorte vertical.
*/
.flyer-rail.pared .flyer {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--giro, 0deg)) scale(1.03);
  filter: saturate(.72) brightness(.95);
  box-shadow: 0 16px 34px rgba(36, 27, 17, .16);
  z-index: var(--capa, 1);
  transition:
    transform .95s var(--ease) var(--demora, 0ms),
    filter .75s ease var(--demora, 0ms),
    box-shadow .75s ease var(--demora, 0ms);
}

.flyer-rail.pared.acomodada .flyer {
  transform: translateY(0);
  filter: none;
  box-shadow: 0 0 0 rgba(36, 27, 17, 0);
}

/* El flyer elegido conserva su elevación, que es de la cartelera y no de
   la pared. Sin esto, la regla de arriba se la comería por especificidad. */
.flyer-rail.pared.acomodada .flyer[aria-current='true'] {
  transform: translateY(-9px);
}

@media (prefers-reduced-motion: reduce) {
  .flyer-rail.pared .flyer {
    transform: none;
    filter: none;
    box-shadow: none;
    transition: none;
  }
}

/* ─── La entrada de lo que pinta el servidor ─────────────────────────────
   Cuando la home y la cartelera llegan con los planes escritos en el HTML
   (lib/catalogoInicial.ts), la entrada es la misma que hace
   KlubbMotion.enterItems cuando la fila la dibuja el navegador, pero en CSS:
   arranca con la primera pintura, sin esperar al JavaScript.
   - Flyers de la home: subida de 14px en 480ms, escalonada de a 40ms hasta
     el sexto.
   - Tarjetas de "Hoy": 6px en 260ms, todas juntas.
   klubb-web.js saca data-servidor en cuanto vuelve a dibujar la fila, así
   las dos entradas nunca se pisan. Con "reducir movimiento", ninguna. */
@keyframes entrada-servidor-flyer {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes entrada-servidor-tarjeta {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.flyer-rail[data-servidor] .flyer img { animation: entrada-servidor-flyer 480ms var(--motion-ease) backwards; }
.flyer-rail[data-servidor] .flyer:nth-child(2) img { animation-delay: 40ms; }
.flyer-rail[data-servidor] .flyer:nth-child(3) img { animation-delay: 80ms; }
.flyer-rail[data-servidor] .flyer:nth-child(4) img { animation-delay: 120ms; }
.flyer-rail[data-servidor] .flyer:nth-child(5) img { animation-delay: 160ms; }
.flyer-rail[data-servidor] .flyer:nth-child(n+6) img { animation-delay: 200ms; }
.event-row[data-servidor] .event-card { animation: entrada-servidor-tarjeta 260ms var(--motion-ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  .flyer-rail[data-servidor] .flyer img,
  .event-row[data-servidor] .event-card { animation: none; }
}

/* Buscador de la cartelera: la cruz para borrar la dibuja la página (data-action="clear-search").
   Chrome y Safari le agregan su propia cruz a los campos de búsqueda y quedaban dos. */
.search-bar input[type="search"]::-webkit-search-cancel-button,
.search-bar input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ── Home: qué es Klubb y dónde está ───────────────────────────────── */
/* La bajada es el `.home-intro > p` que klubb-motion.js ya anima al entrar.
   La línea de ciudad reusa .city-label, igual que en la cartelera. */
.home-intro>.home-lede{max-width:640px;margin-top:22px;font-size:19px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.home-lede .city-label{display:flex;width:max-content;margin-top:14px}
@media(max-width:480px){.home-intro>.home-lede{margin-top:16px;font-size:16px}}

/* ── Cartelera: lugar reservado mientras carga ─────────────────────── */
/* Las pestañas de categoría y las filas llegan después del primer pintado.
   Sin alto reservado, el contenido saltaba y el pie salía de la pantalla
   (CLS 0,61 en escritorio). Las pestañas miden 55px más el borde. */
.category-tabs{min-height:56px}
.event-sections[aria-busy="true"]{min-height:100vh}

/* ── Página de un plan (/plan/<id>) ─────────────────────────────────── */
/* El detalle es el mismo del cuadro (.event-layout, klubb-web.css), en una
   caja con borde en lugar del diálogo. */
.plan-main{padding-bottom:60px}
.plan-migas{display:flex;align-items:center;gap:8px;padding-top:22px;font-size:12px;color:var(--muted);min-width:0}
.plan-migas a{color:var(--muted)}
.plan-migas a:hover{color:var(--accent-deep)}
.plan-migas [aria-current]{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.plan-detalle{max-width:1040px;margin:16px auto 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
/* La caja de la imagen se reserva antes de que llegue (la misma proporción que
   las tarjetas): el texto no salta cuando carga. */
.plan-detalle .event-art>img{aspect-ratio:4/5}
.event-info h1{font-size:30px;line-height:1.22;font-weight:600;overflow-wrap:anywhere}
.plan-app{max-width:1040px;margin:24px auto 0;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;background:var(--surface);border-radius:8px}
.plan-app h2{font-size:20px;line-height:1.3;font-weight:600}
.plan-app p{font-size:13px;color:var(--muted);margin-top:4px}
.plan-app-acciones{display:flex;gap:10px;flex-wrap:wrap}
.plan-aviso{max-width:680px;padding-block:44px 8px;text-align:center}
.plan-aviso h1{font-size:32px;line-height:1.22;font-weight:600;overflow-wrap:anywhere}
.plan-aviso p{font-size:15px;color:var(--muted);margin-top:14px}
.plan-aviso .event-category{margin-bottom:10px}
.plan-aviso>.button,.plan-aviso .plan-app-acciones{margin-top:24px;justify-content:center}
.plan-mas{margin-top:40px}

@media(max-width:800px){
  .plan-detalle{border:0;border-radius:0;margin-inline:calc(var(--gutter)*-1)}
  .event-info h1{font-size:27px}
  .plan-app{padding:20px}
  .plan-aviso h1{font-size:27px}
}

/* "Abrir en la app" arriba de todo, en los celulares salvo Safari de iPhone
   (que tiene el banner de Apple). plan.html decide antes de la primera pintura
   si se muestra (html.con-banner-app), así la página no salta; se cierra con
   la X y no vuelve en esa visita. */
.banner-app{display:none;align-items:center;gap:10px;padding:9px var(--gutter);background:var(--surface);border-bottom:1px solid var(--line)}
html.con-banner-app .banner-app{display:flex}
.banner-app span{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.3}
.banner-app .banner-app-cerrar{flex:none;width:32px;min-width:32px;height:32px;margin-left:-6px;color:var(--muted)}
.banner-app .button{flex:none;width:auto;margin:0;min-height:38px;padding:0 18px}