/* cartelera.css — Componentes de la cartelera sobre el sistema evolucionado
   de la raíz (prototipo.css). La cartelera transmite LA PROGRAMACIÓN que
   mueve a tickets: datos primero (.ev-meta como voz única de fecha, hora y
   recinto), tarjetas planas con hairlines (D1/D2), rejilla con la cadencia
   R2 y reveal sin cascada (R3: la consulta no espera coreografías). */

main{ padding-top: 72px; } /* la cabecera es fija, como en la raíz */

/* ---------- Héroe de la cartelera ---------- */
.bill-hero h1{ max-width: 12ch; }
.bill-stats{ display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 34px; }
.bill-stats p{ margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); }
.bill-stats strong{ display: block; font-family: var(--font-disp); font-size: 1.9rem;
  font-weight: 600; letter-spacing: -.02em; color: var(--navy); margin-bottom: 4px; }
.bill-cta{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 38px; }
.bill-cta .btn-tickets{ width: min(320px, 100%); margin-top: 0; }
.buy-note{ margin-top: 16px; color: var(--ink-soft); font-size: .92rem; }
.buy-note strong{ color: var(--navy); }

/* ---------- Barra de meses ---------- */
.monthbar{ position: sticky; top: 72px; z-index: 60; background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); border-block: 1px solid var(--line); }
.monthbar .wrap{ display: flex; gap: 8px; overflow-x: auto; padding-block: 12px;
  scrollbar-width: none; }
.monthbar .wrap::-webkit-scrollbar{ display: none; }
.chip{ flex: none; display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; background: #fff; }
.chip:hover{ border-color: var(--navy); }
.chip.today{ background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Programación por días ---------- */
.day-sec{ padding-top: 56px; }
.day-sec:first-child{ padding-top: 8px; }
.day-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  border-top: 1px solid var(--line); padding-top: 26px; }
.day-head h2{ margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
.day-head h2 .day-date{ color: var(--ink-soft); font-weight: 500; }
.day-count{ margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cyan-text); }
.prog-grid{ display: grid; gap: clamp(20px, 2.4vw, 34px); margin-top: 34px;
  grid-template-columns: 1fr; }
@media (min-width: 760px){ .prog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px){ .prog-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1720px){ .prog-grid{ grid-template-columns: repeat(4, 1fr); } }

/* La tarjeta entera abre su hoja; el botón de tickets es su acción propia,
   por encima (patrón stretched-link del protocolo de eventos). */
.event-card{ position: relative; }
.event-card .card-link::after{ content: ""; position: absolute; inset: 0; }
.event-card .btn-tickets{ position: relative; z-index: 2; }
.event-card .ph img.fit{ object-fit: contain; background: #000; }

/* Botón de destino oficial cuando el vendedor no es Ticketmaster
   (eventos de socio): mismo caparazón, voz navy, sin atribuir la venta. */
.btn-tickets.btn-official{ color: var(--navy); }

/* ---------- Dining ---------- */
.dining-venue{ border-top: 1px solid var(--line); padding-top: 26px; margin-top: 42px; }
.dining-venue:first-of-type{ margin-top: 8px; }
.dining-venue h3{ margin: 0 0 6px; }
.dining-list{ list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  gap: 0; grid-template-columns: 1fr; }
@media (min-width: 900px){ .dining-list{ grid-template-columns: repeat(3, 1fr); gap: 0 34px; } }
.dining-list li{ padding: 16px 0; border-top: 1px solid var(--line); }
.dining-list strong{ display: block; color: var(--navy); font-size: 1.02rem; }
.dining-meta{ color: var(--cyan-text); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; }
.dining-address, .dining-distance{ display: block; color: var(--ink-soft);
  font-size: .9rem; margin-top: 3px; }

/* ---------- Hojas de evento ---------- */
.mini-head{ position: fixed; inset: 0 0 auto 0; z-index: 80;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line); }
.mini-head .bar{ display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px; padding-inline: var(--pad-x);
  max-width: 1760px; margin-inline: auto; }
.mini-head .brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mini-head .brand img{ width: 44px; height: 44px; border-radius: 50%; }
.mini-head .brand span{ font-family: var(--font-disp); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; font-size: .86rem; color: var(--navy); }
.back-link{ font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy); text-decoration: none; white-space: nowrap; }
.back-link:hover{ color: var(--cyan-text); }
.leaf-wrap{ width: 100%; max-width: 960px; margin-inline: auto; padding-inline: var(--pad-x); }
.leaf-ph{ aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.leaf-ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.leaf-ph img.fit{ object-fit: contain; }
.leaf-wrap h1{ font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem); margin: 10px 0 8px; }
.leaf-venue{ font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 18px; }
.leaf-desc{ font-size: 1.06rem; line-height: 1.65; max-width: 62ch; }
.leaf-action{ margin-top: 30px; max-width: 420px; }
.leaf-action .btn-tickets{ width: 100%; }
.via{ margin-top: 12px; font-size: .9rem; color: var(--ink-soft); }
.via strong{ color: var(--tm-blue); }
.share-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.share-row .share-url{ font-size: .84rem; color: var(--ink-soft); word-break: break-all; }
.share-btn{ border: 1.5px solid var(--navy); background: #fff; color: var(--navy);
  border-radius: 999px; padding: 10px 22px; font: inherit; font-size: .8rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.share-btn:hover{ background: var(--navy); color: #fff; }
.leaf-sec{ margin-top: 54px; }
.leaf-sec > h2{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 0 0 8px; }
.rel-grid{ display: grid; gap: clamp(20px, 2.4vw, 34px); margin-top: 26px;
  grid-template-columns: 1fr; }
@media (min-width: 760px){ .rel-grid{ grid-template-columns: repeat(3, 1fr); } }
.leaf-app{ margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--ink-soft); }
.leaf-app a{ color: var(--navy); font-weight: 700; }
.leaf-foot{ margin-top: 60px; }