/* QueHayBA — estilos compartidos para páginas SEO (detalle, hubs, sobre, contacto).
   Versión liviana del sistema MD3 que vive en dist-preview/v5/index.html.
   Mantener cohesión visual con la home sin duplicar las 200KB de CSS de la SPA. */

:root {
  color-scheme: light dark;

  --md-sys-color-primary: #00658B;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #C7E7FF;
  --md-sys-color-on-primary-container: #001E2C;
  --md-sys-color-secondary: #4F616E;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D3E5F5;
  --md-sys-color-on-secondary-container: #0B1D29;
  --md-sys-color-tertiary: #B62B17;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFDAD2;
  --md-sys-color-on-tertiary-container: #410001;

  --md-sys-color-surface: #F8FAFC;
  --md-sys-color-on-surface: #181C20;
  --md-sys-color-on-surface-variant: #41484D;
  --md-sys-color-surface-container-low: #F2F4F7;
  --md-sys-color-surface-container: #ECEEF2;
  --md-sys-color-surface-container-high: #E6E9ED;
  --md-sys-color-outline: #71787D;
  --md-sys-color-outline-variant: #C1C7CD;

  /* topic colors (para chips de tipo) */
  --topic-musica:      #FF5A3C;
  --topic-teatro:      #7B3FA8;
  --topic-cine:        #0E7FBF;
  --topic-arte:        #E8A23B;
  --topic-literatura:  #2F855A;
  --topic-festival:    #D946A3;
  --topic-danza:       #DC2626;
  --topic-gastronomia: #C77E1B;
  --topic-standup:     #FBBF24;
  --topic-default:     #4F616E;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #84CFFF;
    --md-sys-color-on-primary: #00344C;
    --md-sys-color-primary-container: #004C6B;
    --md-sys-color-on-primary-container: #C7E7FF;
    --md-sys-color-secondary-container: #384955;
    --md-sys-color-on-secondary-container: #D3E5F5;
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #E1E3E5;
    --md-sys-color-on-surface-variant: #C1C7CD;
    --md-sys-color-surface-container-low: #181C20;
    --md-sys-color-surface-container: #1D2024;
    --md-sys-color-surface-container-high: #272A2E;
    --md-sys-color-outline: #8B9197;
    --md-sys-color-outline-variant: #41484D;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Header / nav ----- */
.qhb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.qhb-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.qhb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  /* No encoger: el header también es una fila flexible y aprieta este bloque al
     angostar la ventana. Encogido, arrastra al logo de adentro, que se estira
     porque su `object-fit` es `fill`: medido, la proporción pasaba de 4,31 a
     2,56 entre 1400 px y 760 px de ventana. */
  flex-shrink: 0;
  font-weight: 800;
  font-size: 18px;
  color: var(--md-sys-color-on-surface);
}
/* `flex-shrink: 0` es obligatorio: .qhb-brand es una fila flexible y sus hijos
   se encogen solos al angostar la ventana. El logo, encogido, ignora su
   proporción: medido, pasaba de 4,31 a 2,56 entre 1400 px y 760 px. */
.qhb-brand img.qhb-lockup { height: 32px; width: auto; display: block; flex-shrink: 0; }
.qhb-brand img.qhb-iso { height: 32px; width: 32px; display: none; object-fit: contain; }
.qhb-brand:hover { text-decoration: none; }
/* Solapas de categoría — el header de ESCRITORIO, igual que la app
   (puntito de color + etiqueta, la activa en color de marca con subrayado). */
.qhb-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.qhb-tabs::-webkit-scrollbar { display: none; }
.qhb-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 56px;
  padding: 0 13px;
  position: relative;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.qhb-tab:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
summary.qhb-tab { cursor: pointer; list-style: none; }
summary.qhb-tab::-webkit-details-marker { display: none; }
summary.qhb-tab::marker { content: ""; }
.qhb-tab-more { flex: none; }
details.qhb-tab-more[open] > .qhb-tab { color: var(--md-sys-color-primary); }
.qhb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--topic, var(--topic-default)); flex: none; }
.qhb-tab.is-on { color: var(--md-sys-color-primary); font-weight: 700; }
.qhb-tab.is-on::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 8px;
  height: 2px; border-radius: 2px;
  background: var(--md-sys-color-primary);
}

/* Pastillas del header — el header de MOBILE, mismo look que la app, pero como
   links/menús que funcionan en una página estática (QUÉ y HOY con <details>, sin JS). */
.qhb-pills {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  justify-content: flex-end;
  /* sin overflow: recortaría los menús desplegables de las pastillas */
}
.qhb-pill-wrap { position: relative; flex-shrink: 0; }
.qhb-pill {
  height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  flex-shrink: 0;
}
.qhb-pill:hover { text-decoration: none; background: var(--md-sys-color-surface-container-high); }
summary.qhb-pill::-webkit-details-marker { display: none; }
summary.qhb-pill::marker { content: ""; }
details.qhb-pill-wrap[open] > .qhb-pill {
  background: var(--md-sys-color-primary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-primary-container);
}
.qhb-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px 0;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 90;
}
.qhb-pill-menu a {
  padding: 11px 16px;
  font-size: 14px;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
}
.qhb-pill-menu a:hover { background: var(--md-sys-color-surface-container-high); text-decoration: none; }
.qhb-ig { display: inline-flex; align-items: center; padding: 8px; color: var(--md-sys-color-on-surface-variant); flex-shrink: 0; }
.qhb-ig svg { display: block; }
@media (max-width: 720px) {
  .qhb-header-inner { padding: 10px 14px; gap: 8px; }
  /* Mobile: solo el isotipo, como producción */
  .qhb-brand img.qhb-lockup { display: none; }
  .qhb-brand img.qhb-iso { display: block; height: 28px; width: 28px; }
  /* Mobile: las solapas no entran — se cambian por las pastillas, como la app */
  .qhb-tabs, .qhb-tab-more { display: none; }
  .qhb-pills { display: flex; }
  /* El desplegable se ancla al GRUPO de pastillas, no a cada pastilla.
     Con right:0 sobre una pastilla de 69px, un panel de 200px de ancho mínimo se
     estira 131px hacia afuera por la izquierda: en el celular se iba de la
     pantalla. Medido el 2026-08-11 en /evento/: el menú de QUÉ abría en x=-42 a
     375px y en x=-97 a 320px, y el de HOY en x=-23; se leía media palabra.
     Anclado al grupo —que ya está pegado a la derecha, antes de Instagram—
     el panel entra siempre, sin depender de cuántas pastillas haya ni de cuál
     se toque. Sin JS: estas páginas son estáticas a propósito. */
  .qhb-pills { position: relative; }
  .qhb-pill-wrap { position: static; }
}

/* Celular angosto: Instagram sale del header, igual que en la home. Sus 36px
   eran los que hacían desbordar la pantalla a 320px (medido: terminaba en x=326
   con 320px de ancho), y un desborde horizontal hace que Safari achique la
   página entera para que entre — el "se ve todo chiquito" del reporte. El link
   sigue estando en el pie de estas mismas páginas. */
@media (max-width: 599px) {
  .qhb-ig { display: none; }
}

/* ----- Layout ----- */
.qhb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.qhb-container.is-narrow { max-width: 760px; }

/* breadcrumbs */
.qhb-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 16px;
}
.qhb-breadcrumbs a { color: var(--md-sys-color-on-surface-variant); }
.qhb-breadcrumbs a:hover { color: var(--md-sys-color-primary); }
.qhb-breadcrumbs .sep { opacity: .5; }

/* hero del evento o hub (legacy / hubs) */
.qhb-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 840px) {
  .qhb-hero.has-image { grid-template-columns: minmax(0, 360px) 1fr; }
}
.qhb-hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  aspect-ratio: 4 / 3;
}
.qhb-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.qhb-hero-body h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.qhb-hero-body .lead {
  font-size: 17px;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 20px;
}
.qhb-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}
.qhb-meta-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--md-sys-color-on-surface);
}
.qhb-meta-list li .label {
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qhb-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--topic, var(--topic-default));
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================
   Event hero — editorial compact (rediseño 2026-05-16 v3)
   ============================ */
.qhb-event { display: block; }

.qhb-event-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 8px 0 56px;
  align-items: start;
}
@media (min-width: 720px) {
  .qhb-event-hero {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 44px;
  }
}

/* Cover */
.qhb-event-cover {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: var(--md-sys-color-surface-container);
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 6px 24px rgba(0,0,0,.08);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  text-decoration: none;
  margin: 0;
}
@media (min-width: 720px) {
  .qhb-event-cover { aspect-ratio: 1 / 1; }
}
.qhb-event-cover:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 10px 32px rgba(0,0,0,.12);
  text-decoration: none;
}
.qhb-event-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Headline column */
.qhb-event-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Eyebrow row */
.qhb-event-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600;
}
.qhb-event-eyebrow-tag {
  display: inline-block;
  padding: 4px 9px;
  background: var(--topic, var(--md-sys-color-primary));
  color: #fff;
  border-radius: 2px;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.4;
}
.qhb-event-eyebrow-sep {
  opacity: 0.35;
  font-weight: 400;
}
.qhb-event-eyebrow-date {
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Title */
.qhb-event-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--md-sys-color-on-surface);
  text-wrap: balance;
}

/* Hairline divider with gradient fade */
.qhb-event-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
    var(--md-sys-color-on-surface) 0%,
    var(--md-sys-color-outline-variant) 45%,
    transparent 100%);
  margin: 6px 0;
  max-width: 220px;
}

/* Facts list */
.qhb-event-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.qhb-event-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}
.qhb-event-fact dt {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
}
.qhb-event-fact dd {
  margin: 0;
}
.qhb-event-fact-soft {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
}

/* CTA */
.qhb-event-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  margin-top: 6px;
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.005em;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .15s;
}
.qhb-event-cta:hover {
  background: var(--topic);
  color: #fff;
  transform: translateX(2px);
  text-decoration: none;
}
.qhb-event-cta svg {
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.qhb-event-cta:hover svg {
  transform: translate(3px, -3px);
}
@media (max-width: 720px) {
  .qhb-event-cta {
    width: 100%;
    justify-content: space-between;
    padding: 14px 22px;
  }
}

/* secciones de detalle */
.qhb-event-section {
  margin: 40px 0;
}
.qhb-event-section-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  color: var(--md-sys-color-on-surface);
}

/* bio del artista */
.qhb-event-bio {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--md-sys-color-primary);
  max-width: 70ch;
}
.qhb-event-bio .qhb-event-section-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 10px;
}
.qhb-event-bio-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
}

/* descripción */
.qhb-event-desc {
  margin: 32px 0;
}
.qhb-event-desc .qhb-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  margin: 0;
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qhb-event-desc .qhb-description p { margin: 0; }

/* card "sin descripción" */
.qhb-empty-card {
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 70ch;
}
.qhb-empty-card p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 15px;
  line-height: 1.6;
}

/* CTA principal */
.qhb-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
}
.qhb-cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.qhb-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--md-sys-color-outline-variant);
}
.qhb-cta-secondary:hover { text-decoration: none; background: var(--md-sys-color-surface-container); }
.qhb-cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 24px; }

/* descripción */
.qhb-description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--md-sys-color-on-surface);
  margin: 24px 0;
  max-width: 70ch;
  white-space: pre-wrap;
}
.qhb-description p { margin: 0 0 1em; }

/* secciones */
.qhb-section { margin: 48px 0; }
.qhb-section h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.qhb-section h2 a {
  color: inherit;
}

/* grilla de cards */
.qhb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.qhb-card {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  color: inherit;
}
.qhb-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--md-sys-color-outline);
}
.qhb-card-media {
  aspect-ratio: 16 / 10;
  background: var(--md-sys-color-surface-container);
  position: relative;
  overflow: hidden;
}
.qhb-card-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.qhb-card-media .topic {
  position: absolute;
  top: 10px;
  left: 10px;
}
.qhb-card-media.is-fallback {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--topic, var(--topic-default)) 96%, #000),
    color-mix(in srgb, var(--topic, var(--topic-default)) 72%, #000));
  display: flex;
  align-items: center;
  justify-content: center;
}
.qhb-card-fallback-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.78);
  pointer-events: none;
}
.qhb-card-fallback-icon svg {
  width: 44%;
  height: 44%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
/* Patrón de líneas diagonales en el fallback de la card */
.qhb-card-media.is-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg,
    transparent 0,
    transparent 12px,
    rgba(255,255,255,0.06) 12px,
    rgba(255,255,255,0.06) 13px);
  pointer-events: none;
}
.qhb-card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qhb-card-when {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.qhb-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.qhb-card .where {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
}

/* En celular, dos tarjetas por fila, como en la agenda.
   Antes el mínimo de 260px de la grilla daba UNA sola columna en un teléfono, así
   que los bloques de recomendación de la ficha se veían como una tira de tarjetas
   gigantes, una abajo de la otra — nada que ver con la agenda, donde entran dos
   por fila y se ve de un vistazo lo que hay.
   Los tamaños salieron de MEDIR la agenda en un teléfono, no de leer su hoja de
   estilos: ahí dice 12,5px para el título, pero algo más abajo la pisa y termina
   dibujando 14px. Copiar el número escrito daba una ficha con la letra más chica
   que la agenda. Los valores reales son 14/18 el título y 12/16 el resto.
   VA DESPUÉS de las reglas de .qhb-card-body y .qhb-card h3, no junto a la grilla:
   tienen la misma especificidad, así que gana la que está más abajo en el archivo.
   Puesta arriba, el ancho cambiaba y los textos quedaban en tamaño de escritorio. */
@media (max-width: 599px) {
  .qhb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qhb-card-body { padding: 8px 10px 10px; gap: 2px; }
  .qhb-card-when { font-size: 12px; line-height: 16px; }
  .qhb-card h3 {
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .qhb-card .where { font-size: 12px; line-height: 16px; }
}

/* day grouping para hubs */
.qhb-day {
  margin: 32px 0;
}
.qhb-day h2 {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding-bottom: 6px;
}

/* FAQ */
.qhb-faq { margin: 48px 0; }
.qhb-faq details {
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 10px;
}
.qhb-faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.qhb-faq summary::-webkit-details-marker { display: none; }
.qhb-faq summary::after {
  content: "+";
  float: right;
  font-size: 20px;
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1;
}
.qhb-faq details[open] summary::after { content: "−"; }
.qhb-faq .answer {
  margin-top: 10px;
  font-size: 15px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
}

/* "Sobre el lugar" — bloque de enriquecimiento en la página de venue */
.qhb-venue-desc {
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
  margin: 12px 0 0;
}
.qhb-venue-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qhb-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  padding: 7px 13px;
  border-radius: 999px;
}
.qhb-star { color: #E8A400; }

.qhb-venue-block .qhb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.qhb-tag {
  font-size: 13px;
  font-weight: 600;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 6px 13px;
  border-radius: 999px;
}

.qhb-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .qhb-info-grid { grid-template-columns: 1fr; } }
.qhb-info-card {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 18px 18px 20px;
}
.qhb-info-card h3 {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-sys-color-primary);
  margin: 0 0 14px;
}

.qhb-llegan { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.qhb-via { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.qhb-via small { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
.qhb-subte {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
}
.qhb-lineas { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.qhb-linea {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 700;
  font-size: 12.5px;
  padding: 2px 9px;
  border-radius: 6px;
}
.qhb-rutas { display: flex; flex-direction: column; gap: 9px; }
.qhb-ruta {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border-radius: 14px;
  padding: 12px 14px;
}
.qhb-ruta:hover { text-decoration: none; background: var(--md-sys-color-surface-container-highest, var(--md-sys-color-surface-container-high)); }
.qhb-rtxt { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; }
.qhb-rtxt small { font-weight: 500; font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }

.qhb-food { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .qhb-food { grid-template-columns: 1fr; } }
.qhb-food-item {
  background: var(--md-sys-color-surface-container-high);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qhb-food-item:hover { text-decoration: none; }
.qhb-food-item b { font-size: 14.5px; font-weight: 700; }
.qhb-food-type { font-size: 12.5px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.qhb-food-ig { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--md-sys-color-primary); font-weight: 600; }
.qhb-food-ig svg { width: 15px; height: 15px; flex: none; }
.qhb-food-ig.is-muted { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
.qhb-food-dist { font-size: 11.5px; color: var(--md-sys-color-on-surface-variant); }

.qhb-fuente-nota { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 16px; }

/* footer */
.qhb-footer {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  padding: 36px 20px 24px;
  margin-top: 64px;
}
.qhb-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.qhb-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  margin: 0 0 24px;
}
.qhb-footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 12px;
}
.qhb-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qhb-footer-col a {
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
}
.qhb-footer-bottom {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-top: 16px;
  line-height: 1.6;
}
.qhb-footer-bottom a { color: var(--md-sys-color-primary); }

/* hub intro */
.qhb-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--md-sys-color-on-surface);
  max-width: 70ch;
  margin: 0 0 32px;
}

/* sobre / contacto layouts */
.qhb-prose h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.qhb-prose h2 {
  font-size: 22px;
  margin: 36px 0 12px;
}
.qhb-prose p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1em;
  color: var(--md-sys-color-on-surface);
}
.qhb-prose a { text-decoration: underline; }

/* badge "Volver al home" */
.qhb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px;
}