:root{
  /* MNBA brand blues (match Mapa Interactivo) */
  --brand:#2E42FF;
  --brand2:#6C7CFF;

  /* Dark theme: black base + blue accents */
  --bg:#000000;
  --bg2:#07070B;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --menusheetBg: rgba(0,0,0,.74);
  --text:#ffffff;

  /* Text scale (accessibility) */
  --fs-xs: 12px;   /* etiquetas y metadatos */
  --fs-sm: 14px;   /* texto secundario */
  --fs-base: 16px; /* texto base UI */

  /* Icon scale (keep legible on mobile) */
  --svg: 26px;             /* default inline icon */
  --svg-iconbtn: 30px;     /* standard icon buttons */
  --svg-nav: 28px;         /* bottom navigation */
  --svg-chip: 20px;        /* chips/text buttons */
  --svg-overlay: 20px;     /* play overlay on covers */
  --svg-player: 26px;      /* mini player controls */
  --svg-player-play: 30px; /* mini player play icon */

  /* YouTube Music-like rhythm (mobile-friendly shelves & chips) */
  --fs-title: 16px;     /* títulos de tarjetas */
  --fs-h2: 21px;        /* encabezados de sección */
  --fs-chip: 13px;      /* chips y acciones compactas */
  --chipOffBg: rgba(255,255,255,.10);
  --chipOffBorder: rgba(255,255,255,.14);
  --chipOffText: rgba(255,255,255,.90);
  --chipAllActiveBg: rgba(255,255,255,.18);
  /* Elevation for chips (better contrast over artworks/bg) */
  --chipShadow: 0 6px 14px rgba(0,0,0,.32);
  --chipShadowActive: 0 10px 18px rgba(0,0,0,.42);
  --lh-body: 1.46;
  --lh-tight: 1.20;
  --lh-meta: 1.28;

  --muted:rgba(255,255,255,.84);
  --muted2:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.16);
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --accent:var(--brand);
  --accent2:var(--brand2);
  --radius:12px;
  --radius-md:14px;
  --radius-lg:16px;
  --playerH:96px;
  --navH:64px;
  --safeB: env(safe-area-inset-bottom);

  /* Glass bars (top/nav/toasts) */
  --glass: rgba(0,0,0,.72);
  --glass2: rgba(0,0,0,.84);
  --topbarGlass: rgba(0,0,0,.84);

  /* Per-view backgrounds (Dark) */
  --appBgHome: linear-gradient(180deg, #000000, #000000);
  --appBgSearch: linear-gradient(180deg, #050716, #000000);
  --appBgLibrary: linear-gradient(180deg, #0A0A0F, #000000);

  /* Chip-like text buttons */
  --textbtnBg: rgba(255,255,255,.08);
  --textbtnBorder: rgba(255,255,255,.18);
  --textbtnText: rgba(255,255,255,.90);
}

/* Light theme (optional toggle) */
[data-theme="light"]{
  --menusheetBg:#ffffff;
  --brand:#2E42FF;
  --brand2:#6C7CFF;

  --bg:#ffffff;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#EEF1FF;
  --text:#0C1222;
  --muted:rgba(12,18,34,.92);
  --muted2:rgba(12,18,34,.78);
  --chipOffBg: rgba(12,18,34,.08);
  --chipOffBorder: rgba(12,18,34,.10);
  --chipOffText: rgba(12,18,34,.88);
  --chipAllActiveBg: rgba(12,18,34,.14);
  --chipShadow: 0 6px 14px rgba(12,18,34,.12);
  --chipShadowActive: 0 10px 18px rgba(12,18,34,.18);
  --border:rgba(46,66,255,.18);
  --shadow:0 10px 24px rgba(12,18,34,.10);
  --accent:var(--brand);
  --accent2:var(--brand2);

  --glass: rgba(255,255,255,.76);
  --glass2: rgba(255,255,255,.92);
  --topbarGlass: rgba(255,255,255,.94);

  /* Per-view backgrounds (Light) */
  --appBgHome: linear-gradient(180deg, #ffffff, #ffffff);
  --appBgSearch: linear-gradient(180deg, #F5F7FF, #ffffff);
  --appBgLibrary: linear-gradient(180deg, #F7F8FC, #ffffff);

  /* Chip-like text buttons */
  /* Home action chips (Aleatorio / Ver todo / Ver todas / Buscar): sober lineal */
  --textbtnBg: #ffffff;
  --textbtnBorder: rgba(0,0,0,.62);
  --textbtnText: #000000;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow-x:hidden}
body{
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--text);
  font-size: var(--fs-base);
  line-height:var(--lh-body);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
  max-width:100vw;
}
button,input{font:inherit}
img{display:block;max-width:100%}

/*
  IMPORTANT: several sections toggle visibility using the HTML `hidden` attribute.
  A few component rules (e.g. `.routeWrap{display:block}`) can accidentally override
  the browser default `[hidden]{display:none}`.
  This global rule guarantees that tabs like "Pistas / Mapa" actually show/hide.
*/
[hidden]{display:none !important;}
/* Prevent long unbroken strings (e.g., filenames/URLs) from breaking layout */
:where(
  .trackCard,
  .gridCard,
  .routeCard,
  .topicCard,
  .routeHero__meta,
  .now__meta,
  .brand__text,
  .mapItem__meta,
  .trackRow__meta,
  .nowCard__meta
){min-width:0;}

.grid > *{min-width:0;}

:where(
  .trackCard__title,
  .trackCard__sub,
  .gridCard__title,
  .gridCard__desc,
  .routeCard__title,
  .routeHero__title,
  .routeHero__desc,
  .lyrics,
  .lyrics p
){
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Keep long track titles tidy inside cards (Search results) */
.trackCard__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.app{
  min-height:100svh;
  /* Per-view backgrounds, driven by `data-view` (home/search/library) */
  --appBg: var(--appBgHome);
  background: var(--appBg);
  overflow-x:hidden;
  width:100%;
}

.app[data-view="home"]{ --appBg: var(--appBgHome); }
.app[data-view="search"]{ --appBg: var(--appBgSearch); }
.app[data-view="library"]{ --appBg: var(--appBgLibrary); }

/* Top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:14px 14px 10px 14px;
  background: var(--topbarGlass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom:1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}


.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand__logo{
  width:min(260px, 46vw);
  height:auto;
  aspect-ratio:auto;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.brand__logo img,
#brandCover{
  width:100%;
  height:auto;
  max-width:100%;
  aspect-ratio:auto !important;
  object-fit:contain;
  display:block;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.brand__text{min-width:0;display:flex;align-items:center}
.brand__title{display:none !important}
.brand__subtitle{
  color:color-mix(in oklab, var(--muted) 92%, var(--text));
  font-size:clamp(13px, .82vw + 11px, 15px);
  font-weight:560;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.32;
  max-width:31ch;
  text-wrap:balance;
  letter-spacing:-.01em;
  max-height:none;
}
.topbar__actions{display:flex;gap:7px;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap}
.topbar__menuStack{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.langSeg--top{
  margin-top:10px;
  padding:0;
  gap:5px;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="light"] .langSeg--top{
  background:transparent;
  box-shadow:none;
}
#topLangSeg .langSeg__btn,#menuLangSeg .langSeg__btn{min-width:auto;padding:8px 10px;font-size:12px}
#topLangSeg .langSeg__btn{
  width:30px;
  height:21px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
#topLangSeg .langSeg__btn:hover{
  background:transparent;
}
#topLangSeg .langSeg__btn.is-active,#menuLangSeg .langSeg__btn.is-active{box-shadow:0 0 0 1px color-mix(in oklab,var(--brand) 22%, var(--border)) inset,0 8px 18px rgba(46,66,255,.10)}
#topLangSeg .langSeg__btn.is-active{
  background:transparent;
}
.langBadge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(17,24,39,.08),0 0 0 1px rgba(255,255,255,.10) inset;flex:0 0 auto;transition:filter .18s ease, transform .18s ease, opacity .18s ease}
.langBadge--es{background-image:url("../assets/ui/lang-es.svg")}
.langBadge--en{background-image:url("../assets/ui/lang-en.svg")}
.langBadge--pt{background-image:url("../assets/ui/lang-pt.svg")}
#topLangSeg .langBadge{
  width:18px;
  height:18px;
  filter:grayscale(1) contrast(1.08) brightness(.96);
  opacity:.7;
  box-shadow:none;
}
#topLangSeg .langSeg__btn:hover .langBadge{
  filter:grayscale(.25) contrast(1.02) brightness(.98);
  opacity:.96;
}
#topLangSeg .langSeg__btn.is-active .langBadge{
  filter:none;
  opacity:1;
  transform:scale(1.02);
}
#menuLangSeg .langBadge{
  filter:grayscale(1) contrast(1.08) brightness(.88);
  opacity:.92;
}
#menuLangSeg .langSeg__btn.is-active .langBadge{
  filter:none;
  opacity:1;
}
#topLangSeg .langSeg__btn.is-active{box-shadow:none !important}
.langCode{font-size:11px;line-height:1;font-weight:950;letter-spacing:.08em;color:currentColor}
#topLangSeg .langCode{display:none}
.langFlag{display:none !important}

/* Menú móvil (hamburguesa): por defecto oculto en desktop */
#btnMenu{display:none;}

/* En vista "Ahora": minimiza banner superior (edades/buscador) */
.app.is-now #filtersDock{display:none}
.app.is-now .brand__subtitle{display:none}
.app.is-now .topbar{padding:10px 14px 6px 14px}

/* En vista "Ruta": dejamos el header limpio */
.app.is-route #filtersDock{display:none}
.app.is-route .brand__subtitle{display:none}

/* Dock de filtros (Home/Search/Library) */
.filtersDock{
  margin:0 14px 10px 14px;
  padding:0;
}
.filtersDock__search{display:none}
.app[data-view="search"] .filtersDock__search{display:flex}

/* Ajustes del buscador dentro del dock */
.filtersDock .searchbar{margin-top:0}
.chips--scroll .chips__label{flex:0 0 auto}

/* Chips scrollables (más tipo Spotify) */
.chips--scroll{flex-wrap:nowrap;overflow:auto;scrollbar-width:none;}
.chips--scroll::-webkit-scrollbar{display:none}

/* Estado de datos: Toast flotante (se oculta solo) */
.databanner{
  position:fixed;
  left:12px;right:12px;
  bottom: calc(var(--navH) + var(--safeB) + 10px);
  margin:0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--glass2);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:40;
  transform: translateY(12px);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}

.app:not(.is-player-hidden) .databanner{
  bottom: calc(var(--playerH) + var(--navH) + var(--safeB) + 10px);
}
.databanner.is-show{opacity:1;transform:translateY(0);pointer-events:auto}
.databanner__text{font-size:var(--fs-xs);color:var(--muted);line-height:1.2;}
.databanner__actions{display:flex;gap:8px;align-items:center;flex:0 0 auto;}
.databanner__actions[hidden]{display:none}
.databanner.is-error{border-color:rgba(255,87,87,.35)}
.databanner.is-ok{border-color:rgba(46,66,255,.40)}

.searchbar{
  margin-top:12px;
  display:flex;align-items:center;gap:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
}
.searchbar input{
  border:0;outline:0;background:transparent;color:var(--text);
  width:100%;
}
.searchbar .icon{color:var(--muted2)}

/* SVG icons (lineal)
   NOTE: use `inherit` so symbols using `currentColor` render correctly across browsers
   and follow the color of their parent button/text (important in dark theme).
*/
.svgicon{
  width:var(--svg);
  height:var(--svg);
  min-width:var(--svg);
  min-height:var(--svg);
  display:block;
  color:inherit;
  flex:0 0 auto; /* evita que se achiquen dentro de flex */
}
.svgicon--muted{color:var(--muted2)}
.svgicon--solid{color:inherit}

.chips{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips__label{color:var(--muted);font-size:var(--fs-xs);margin-right:2px}

/* Buttons */
.btn{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  background:var(--accent);
  color:#ffffff;
}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}

.iconbtn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:16px;
  width:56px;height:56px;
  display:inline-flex;align-items:center;justify-content:center;
}
.iconbtn--plain{
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
.iconbtn--plain:active{transform:scale(.97)}
.iconbtn--plain:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.iconbtn .svgicon{width:var(--svg-iconbtn);height:var(--svg-iconbtn);min-width:var(--svg-iconbtn);min-height:var(--svg-iconbtn)}
.iconbtn:active{transform:scale(.98)}

/* Menú (hamburguesa): sin marco, solo icono (mantiene área táctil) */
#btnMenu.iconbtn{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  width:auto;height:auto;
  padding:10px;
}
#btnMenu.iconbtn:active{transform:scale(.97)}
.topbar__actions > .iconbtn:not(#btnMenu){
  width:44px;height:44px;border-radius:14px;
  background:color-mix(in oklab, var(--card) 92%, transparent);
  box-shadow:none;
}
.topbar__actions > .iconbtn:not(#btnMenu) .svgicon{width:20px;height:20px;min-width:20px;min-height:20px}
.topbar__menuStack #btnMenu.iconbtn{
  width:44px;height:44px;padding:0;border-radius:14px;
  background:color-mix(in oklab, var(--card) 88%, transparent);
  border:1px solid color-mix(in oklab, var(--border) 82%, transparent);
}
[data-theme="light"] .topbar__menuStack #btnMenu.iconbtn,
[data-theme="light"] .topbar__actions > .iconbtn:not(#btnMenu){
  background:rgba(255,255,255,.76);
}

/* Estado activo (p.ej. Texto sincronizado abierto) */
.iconbtn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
}

.playbtn{
  border:0;
  width:70px;height:70px;
  border-radius:999px;
  background:var(--accent);
  color:#ffffff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}
[data-theme="light"] .playbtn{color:#fff}
.playbtn .svgicon{width:36px;height:36px}
.textbtn{
  -webkit-tap-highlight-color: transparent;
  border:1px solid var(--textbtnBorder);
  background: var(--textbtnBg);
  color: var(--textbtnText);
  font-weight:550;
  font-size:var(--fs-chip);
  letter-spacing:-.01em;
  border-radius:999px;
  padding:0 12px;
  height:32px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}

.textbtn .svgicon{width:var(--svg-chip);height:var(--svg-chip);min-width:var(--svg-chip);min-height:var(--svg-chip)}
.textbtn:hover{filter:brightness(1.03)}
.textbtn:active{transform:scale(.98)}
.textbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.textbtn[disabled]{opacity:.55;cursor:not-allowed}

.chip{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  font-size:var(--fs-chip);
  font-weight:650;
  height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.chip.is-active{background:var(--accent);color:#fff;border-color:transparent}

/* Topic chips: color comes from --chipAccent (set inline from Sheet mapping) */
.chip.is-topic{--chipAccent:var(--accent);--chipOn:#fff}
.chip.is-topic:not(.is-active){background:transparent;border-color:var(--chipAccent);color:var(--chipAccent)}
.chip.is-topic.is-active{background:var(--chipAccent);color:var(--chipOn);border-color:transparent}


/* Splash (carga inicial) */
.splash{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);color:var(--text);}
.splash[hidden]{display:none;}
.splash__card{
  width:min(560px,94vw);
  border:1px solid var(--border);
  background:var(--card);
  border-radius:calc(var(--radius-lg) + 6px);
  padding:34px 28px 30px 28px;
  box-shadow:0 22px 44px rgba(0,0,0,.22);
  text-align:center;
}
[data-theme="light"] .splash__card{box-shadow:0 18px 36px rgba(17,24,39,.10);} 
.splash__logo{
  width:min(480px, 86vw);
  height:auto;
  aspect-ratio:auto;
  margin:0 auto 24px auto;
  border-radius:0;
  overflow:visible;
  border:none;
  background:transparent;
}
.splash__logo img{width:100%;height:auto;object-fit:contain;display:block;filter:none !important;border:none;border-radius:0;background:transparent;box-shadow:none}
.splash__title{display:none !important}
.splash__desc{
  margin-top:0;
  color:var(--text);
  font-size:clamp(18px, 1vw + 15px, 23px);
  font-weight:800;
  line-height:1.5;
  max-width:min(36ch, 90vw);
  margin-left:auto;
  margin-right:auto;
  text-wrap:balance;
}
.splash__loader{width:40px;height:40px;border-radius:999px;border:3px solid var(--border);border-top-color:var(--brand);margin:18px auto 0 auto;animation:spin 1s linear infinite;}

.splash.is-show{animation:splashIn .22s ease-out both;}
.splash.is-hide{animation:splashOut .24s ease-in both;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes splashIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes splashOut{from{opacity:1}to{opacity:0}}

/* Main */
.main{
  padding:8px 14px;
  padding-bottom: calc(var(--playerH) + var(--navH) + var(--safeB) + 18px);
}

/* Si el mini-player está oculto al inicio (hasta elegir pista), no reservamos espacio extra */
.app.is-player-hidden .main{
  padding-bottom: calc(var(--navH) + var(--safeB) + 18px);
}
.view{display:none}
.view.is-active{display:block}

/* Overlay panels: NOW / ROUTE suben al top y cubren el header.
   Importante: dejan visible el mini-player si está activo. */
.view[data-view="now"].is-active,
.view[data-view="route"].is-active{
  position:fixed;
  left:0; right:0;
  top:0;
  bottom: calc(var(--playerH) + var(--safeB));
  z-index:30;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(8px + env(safe-area-inset-top)) 14px calc(18px + var(--safeB)) 14px;
  background: var(--bg);
  isolation:isolate;
}

/* Si el player está oculto (estado inicial), el panel ocupa el alto completo */
.app.is-player-hidden .view[data-view="now"].is-active,
.app.is-player-hidden .view[data-view="route"].is-active{
  bottom:0;
}

/* Lavado suave con color de categoría (viene de JS en --overlayAccentRgb) */
.view[data-view="now"].is-active::before,
.view[data-view="route"].is-active::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(90% 120% at 18% -12%, rgba(var(--overlayAccentRgb,46,66,255), .22), transparent 62%),
    radial-gradient(70% 120% at 100% 0%, rgba(var(--overlayAccentRgb,46,66,255), .14), transparent 58%);
  pointer-events:none;
  z-index:0;
}
.view[data-view="now"].is-active > *,
.view[data-view="route"].is-active > *{
  position:relative;
  z-index:1;
}


.section{margin-top:22px}

/* Home: más aire entre secciones (separación vertical) */
#viewHome .section{margin-top:34px}
#viewHome .section.section--tight{margin-top:22px}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.section__title{
  margin:0;
  /* closer to YouTube Music shelf header scale on mobile */
  font-size: clamp(var(--fs-h2), 5.4vw, 30px);
  font-weight:900;
  letter-spacing:-.02em;
  /* Light theme: keep section titles sober (less "brand blue") */
  color:#4b5563;
  line-height:1.12;
}
[data-theme="dark"] .section__title{color: rgba(255,255,255,.94)}
.muted{color:var(--muted);margin:6px 0 0 0;line-height:var(--lh-meta)}


/* Home: estilo tipo Spotify */
.section--tight{margin-top:14px}
.quickGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.quickTile{
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--card), rgba(0,0,0,0));
  color:var(--text);
  border-radius:14px;
  padding:8px;
  display:flex;align-items:center;gap:8px;
  min-height:56px;
  text-align:left;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
[data-theme="light"] .quickTile{box-shadow: 0 10px 22px rgba(17,24,39,.06)}
.quickTile__cover{width:48px;height:48px;border-radius:12px;overflow:hidden;background:var(--card2);border:1px solid var(--border);flex:0 0 auto}
.quickTile__cover img{width:100%;height:100%;object-fit:cover}
.quickTile__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.quickTile__title{font-weight:900;font-size:var(--fs-title);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quickTile__sub{color:var(--muted2);font-size:var(--fs-xs);line-height:var(--lh-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.topicsRail{display:flex;gap:12px;overflow:auto;padding:10px 2px 2px 2px;scroll-snap-type:x mandatory}
.topicsRail::-webkit-scrollbar{height:8px}
.topicsRail::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.topicCard{
  min-width:180px;
  height:96px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 0%, hsla(var(--h, 140), 85%, 56%, .32), transparent 65%),
    linear-gradient(180deg, var(--card), rgba(0,0,0,0));
  color:var(--text);
  text-align:left;
  scroll-snap-align:start;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
[data-theme="light"] .topicCard{
  background:
    radial-gradient(120% 140% at 0% 0%, hsla(var(--h, 140), 85%, 56%, .18), transparent 65%),
    linear-gradient(180deg, var(--card), rgba(255,255,255,0));
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
}
.topicCard__label{font-weight:900;font-size:18px;line-height:1.12}
.topicCard__meta{margin-top:8px;color:var(--muted2);font-size:var(--fs-xs);line-height:var(--lh-meta);font-weight:700}

/* Rails & cards */
.rail{display:flex;gap:12px;overflow:auto;padding:10px 2px 2px 2px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

/* Featured rail (Home: Rutas destacadas) */
.section--featured .rail{
  padding:14px 12px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(46,66,255,.28);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(46,66,255,.40), rgba(46,66,255,0) 60%),
    linear-gradient(180deg, rgba(46,66,255,.18), rgba(0,0,0,0));
}
[data-theme="light"] .section--featured .rail{
  border:1px solid rgba(62,76,210,.22);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(62,76,210,.20), rgba(62,76,210,0) 60%),
    linear-gradient(180deg, rgba(62,76,210,.10), rgba(255,255,255,0));
}

.section--featured .routeCard{
  width:180px;
  padding:6px;
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  background:transparent;
  border:none;
  box-shadow:none;
  transition: transform .12s ease, background .12s ease;
}
.section--featured .routeCard:hover{background: rgba(255,255,255,.06)}
[data-theme="light"] .section--featured .routeCard:hover{background: rgba(17,24,39,.06)}
.section--featured .routeCard:active{transform:scale(.98)}
.section--featured .routeCard:focus-visible{outline:2px solid rgba(46,66,255,.75);outline-offset:2px}

.section--featured .routeCard__cover{
  border:none;
  background:transparent;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}
[data-theme="light"] .section--featured .routeCard__cover{box-shadow: 0 12px 22px rgba(17,24,39,.10)}
.section--featured .routeCard__cover img{display:block;width:100%;height:100%;object-fit:cover}

.section--featured .routeCard__title{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.18;
  min-height: calc(1.18em * 2);
}
.section--featured .routeCard__desc{
  -webkit-line-clamp:3;
  min-height: calc(1.3em * 3);
  color: var(--muted2);
}


/* Home (más tipo Spotify) */
.section--tight .section__head{margin-bottom:2px}

.quickGrid{
  display:grid;
  /* Prevent long, unbroken titles from forcing horizontal overflow */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
  width:100%;
  max-width:100%;
}

/* Grid items default to min-width:auto (min-content). Force them to shrink. */
.quickGrid > *{min-width:0;}

.quickTile{
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--card), rgba(0,0,0,0));
  border-radius: 14px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  text-align:left;
  min-height:58px;
  box-shadow: var(--shadow);
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
[data-theme="light"] .quickTile{background: linear-gradient(180deg, var(--card), rgba(255,255,255,0))}
.quickTile__cover{
  width:46px;height:46px;
  border-radius:14px;
  overflow:hidden;
  background:var(--card2);
  border:1px solid var(--border);
  flex:0 0 auto;
}
.quickTile__cover img{width:100%;height:100%;object-fit:cover}
.quickTile__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.quickTile__title{
  font-weight:900;
  font-size:var(--fs-title);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.quickTile__sub{
  color:var(--muted2);
  font-size:var(--fs-xs);
  line-height:var(--lh-meta);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* Marquee (only when text is actually truncated). */
.marquee{min-width:0;}
.marquee__text{display:inline-block; padding-right:24px; will-change:transform;}
.marquee.is-overflow:hover .marquee__text,
.marquee.is-overflow:focus-within .marquee__text{
  animation: marqueeMove var(--marqueeDur, 8s) linear infinite;
}
@keyframes marqueeMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--marqueeDist, 0px))); }
}
@media (prefers-reduced-motion: reduce){
  .marquee.is-overflow:hover .marquee__text,
  .marquee.is-overflow:focus-within .marquee__text{ animation:none; }
}

.topicsRail{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:10px 2px 2px 2px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.topicsRail::-webkit-scrollbar{display:none}

.topicCard{
  min-width: 190px;
  height: 98px;
  border-radius:16px;
  padding:12px 14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  color:var(--text);
  text-align:left;
  scroll-snap-align:start;
  background:
    radial-gradient(120% 120% at 0% 0%, hsla(var(--h), 85%, 56%, .34), transparent 64%),
    linear-gradient(180deg, var(--card), rgba(0,0,0,0));
}
[data-theme="light"] .topicCard{
  background:
    radial-gradient(120% 120% at 0% 0%, hsla(var(--h), 85%, 56%, .22), transparent 64%),
    linear-gradient(180deg, var(--card), rgba(255,255,255,0));
}
.topicCard__label{font-weight:900;font-size:18px;line-height:1.12;max-width:100%}
.topicCard__meta{margin-top:8px;color:var(--muted2);font-size:var(--fs-xs);font-weight:700;line-height:var(--lh-meta)}

@media (max-width:420px){
  .quickGrid{grid-template-columns:1fr}
  .topicCard{min-width: 84%;}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow);
}

.empty{padding:16px}
.empty__title{font-size:17px;font-weight:900}

.routeCard{
  width:170px;
  flex:0 0 auto;
  scroll-snap-align:start;
  background:transparent;
  border:none;
  padding:0;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.routeCard:active{transform:scale(.98)}
.routeCard:focus-visible{outline:2px solid rgba(46,66,255,.65);outline-offset:2px;border-radius:var(--radius-md)}
.routeCard__cover{aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--card2);position:relative}
.routeCard__cover img{width:100%;height:100%;object-fit:cover}
.routeCard__title{margin-top:10px;font-weight:900;font-size:var(--fs-title);line-height:var(--lh-tight)}
.routeCard__desc{margin-top:4px;color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-meta);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:10px}

.gridCard{cursor:pointer;transition:transform .12s ease}
.gridCard:active{transform:scale(.98)}

/* Buttons default to UA colors in some browsers; force readable text in dark mode */
.gridCard.card{color:var(--text);}

/* Grid cards: imagen pegada arriba + bloque de texto con altura estable */
.gridCard.card{padding:0;overflow:hidden;text-align:left}
.gridCard__cover{aspect-ratio:1;border-radius:0;overflow:hidden;border:none;background:var(--card2);position:relative}
.gridCard__cover img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.gridCard__body{padding:12px}
.gridCard__title{margin-top:0;font-weight:900;font-size:var(--fs-title);line-height:var(--lh-tight);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.45em}
.gridCard__desc{margin-top:6px;color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-meta);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-height:1.25em}

/* Play overlay (tipo YouTube Music) */
.gridCard__play, .routeCard__play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;pointer-events:none;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow: 0 6px 18px rgba(0,0,0,.22)}
[data-theme="light"] .gridCard__play, [data-theme="light"] .routeCard__play{background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.14);color:#000;box-shadow: 0 6px 18px rgba(0,0,0,.12)}
.gridCard__play .svgicon, .routeCard__play .svgicon{width:var(--svg-overlay);height:var(--svg-overlay);min-width:var(--svg-overlay);min-height:var(--svg-overlay)}

/* Track cards (search results) */
.trackCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.trackCard__cover{aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--card2)}
.trackCard__cover img{width:100%;height:100%;object-fit:cover}
.trackCard__title{font-weight:900;font-size:var(--fs-title);line-height:var(--lh-tight)}
.trackCard__sub{color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-meta)}
.trackCard__actions{display:flex;gap:8px;flex-wrap:wrap}

/* Route detail */
.routeHero{
  margin-top:6px;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:14px;
  align-items:start;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: radial-gradient(80% 120% at 20% 0%, rgba(46,66,255,.22), transparent 70%),
              linear-gradient(180deg, var(--card), rgba(0,0,0,0));
}
[data-theme="light"] .routeHero{
  background: radial-gradient(80% 120% at 20% 0%, rgba(46,66,255,.14), transparent 70%),
              linear-gradient(180deg, var(--card), rgba(255,255,255,0));
}
.routeHero__back{grid-column:1 / -1}
.routeHero__art{width:120px}
.routeHero__art img{width:120px;height:120px;object-fit:cover;border-radius:16px;border:1px solid var(--border)}
.routeHero__kicker{color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em}
.routeHero__title{margin:4px 0 0 0;font-size:26px}
.routeHero__desc{margin-top:6px;color:var(--muted)}
.routeHero__ages{margin-top:6px;color:var(--muted2);font-size:var(--fs-xs)}
.routeHero__actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

/* Hero image grande (ROUTE): portada sin marco + botón volver encima */
#viewRoute .routeHero{position:relative; overflow:hidden; grid-template-columns:1fr;}
#viewRoute .routeHero__back{
  position:absolute;
  top:12px;
  left:12px;
  z-index:5;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
#viewRoute .routeHero__fit{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
#viewRoute .routeHero__art{
  grid-column:1 / -1;
  width:auto;
  height: clamp(190px, 28vw, 260px);
  margin: -14px -14px 0 -14px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow:hidden;
  position:relative;
}
#viewRoute .routeHero__art::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:80px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--card) 100%);
}
[data-theme="light"] #viewRoute .routeHero__art::after{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--card) 100%);
}
#viewRoute .routeHero__art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: top center;
  border:0;
  border-radius: 0;
}
#viewRoute .routeHero.artMode--contain .routeHero__art{
  /* modo “Ver completa”: más alto y sin recorte */
  height: clamp(230px, 40vw, 420px);
  background: var(--card2);
}
#viewRoute .routeHero.artMode--contain .routeHero__art img{
  object-fit: contain;
  object-position: center;
}
#viewRoute .routeHero__meta{grid-column:1 / -1; margin-top:12px;}

/* Route tabs (Pistas / Mapa) */
.routeTabs{display:flex;gap:6px;padding:6px;border:1px solid var(--border);background:var(--card);border-radius:999px;width:fit-content;margin:0 0 12px 0}
.routeTab{appearance:none;border:0;background:transparent;color:var(--muted);padding:9px 14px;border-radius:999px;font-weight:950;font-size:var(--fs-sm);letter-spacing:.1px}
.routeTab:hover{background:var(--card2)}
.routeTab.is-active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}

/* Route map */
.routeWrap{display:block}
.mapCard{padding:12px}
.mapCard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}
.mapCard__headLeft{display:flex;flex-direction:column;gap:2px;min-width:0}
.mapCard__headRight{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mapCard__title{font-weight:900}
.mapFloors{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mapFloorChip{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--muted);padding:6px 10px;border-radius:999px;font-weight:900;font-size:var(--fs-xs)}
.mapFloorChip.is-active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.mapTools{display:flex;gap:6px;align-items:center}
.mapCanvas{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:var(--card2)}
.mapCanvas img{width:100%;height:auto;display:block}
.svgViewport{width:100%;height:320px;display:block}
.svgViewport svg{width:100%;height:100%;display:block;touch-action:none;user-select:none}
.svgViewport .is-active-stop{stroke:var(--accent) !important;stroke-width:3 !important}
.svgViewport .is-active-stop{filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
[data-theme="light"] .svgViewport .is-active-stop{filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.svgViewport .is-trackable{cursor:pointer}
.mapPins{position:absolute;inset:0;pointer-events:none}
.mapPin{position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:999px;background:rgba(0,0,0,.55);border:2px solid var(--accent2);box-shadow:0 8px 18px rgba(0,0,0,.35);pointer-events:auto;cursor:pointer}
[data-theme="light"] .mapPin{background:rgba(255,255,255,.85)}
.mapPin.is-active{background:var(--accent);border-color:var(--accent);}
.mapPin::after{content:'';position:absolute;inset:4px;border-radius:999px;background:var(--accent2);opacity:.9}
.mapPin.is-active::after{background:#fff;opacity:1}

/* Pins dentro de SVG (map_x/map_y) */
.mapPinSvg{cursor:pointer;}
.mapPinSvg__outer{fill:rgba(0,0,0,.55);stroke:var(--accent2);stroke-width:3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));}
[data-theme="light"] .mapPinSvg__outer{fill:rgba(255,255,255,.88);}
.mapPinSvg__inner{fill:var(--accent2);opacity:.95;}
.mapPinSvg.is-active .mapPinSvg__outer{fill:var(--accent);stroke:var(--accent);}
.mapPinSvg.is-active .mapPinSvg__inner{fill:#fff;opacity:1;}

.mapList{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.mapItem{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px;border-radius: 14px;background:var(--card);border:1px solid var(--border)}
.mapItem__meta{min-width:0}
.mapItem__title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapItem__sub{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapItem__btn{flex:0 0 auto}

.trackList{margin-top:12px;display:grid;gap:8px}

/* Now view: suggestions + other routes spacing */
#nowMoreRoutesLabel{margin-top:14px}
.trackRow{
  display:flex;gap:8px;align-items:center;
  padding:10px 10px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
  /* Nunca permitir que textos largos “estiren” el layout */
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.trackRow__cover{width:56px;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--card2);flex:0 0 auto}
.trackRow__cover img{width:100%;height:100%;object-fit:cover}
.trackRow__meta{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.trackRow__title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  max-width:100%;
}
.trackRow__sub{
  color:var(--muted);
  font-size:var(--fs-xs);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  max-width:100%;
}
.trackRow__langs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px}
.trackRow__lang{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 88%, transparent);color:var(--muted);background:transparent;font-weight:800;letter-spacing:.02em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.trackRow__lang .langBadge{width:14px;height:14px;box-shadow:none;filter:grayscale(1) contrast(1.08) brightness(.96);opacity:.75}
.trackRow__langCode{display:none}
.trackRow__lang.is-active{border-color:color-mix(in oklab,var(--brand) 34%,var(--border));background:color-mix(in oklab,var(--brand) 10%,transparent)}
.trackRow__lang.is-active .langBadge{filter:none;opacity:1}
.contentLangRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.contentLangRow__label{font-size:var(--fs-xs);font-weight:800;color:color-mix(in oklab,var(--muted) 94%,var(--text));letter-spacing:.01em}
.contentLangRow__seg{flex:0 0 auto}
.contentLangRow--now{margin-top:10px}
.langSeg__btn.is-dimmed{opacity:.58}
.contentLangRow__seg{padding:2px;gap:4px}
.contentLangRow__seg .langSeg__btn{
  min-width:38px;
  padding:6px 8px;
  border-radius:999px;
  gap:0;
  background:transparent;
}
.contentLangRow__seg .langBadge{
  width:18px;
  height:18px;
  filter:grayscale(1) contrast(1.08) brightness(.94);
  opacity:.88;
  box-shadow:none;
}
.contentLangRow__seg .langSeg__btn.is-active .langBadge{filter:none;opacity:1}
.contentLangRow__seg .langCode{display:none}
.trackRow__right{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}
.badge{font-size:var(--fs-xs);border:1px solid var(--border);color:var(--muted);padding:3px 8px;border-radius:999px}

/* Home: Now playing card */
.nowCard__flags{margin-top:6px;display:flex;gap:6px;align-items:center}
.flag{font-size:var(--fs-xs);border:1px solid var(--border);color:var(--muted);padding:3px 8px;border-radius:999px;background:rgba(46,66,255,.12)}
[data-theme="light"] .flag{background:rgba(46,66,255,.10)}

.nowCard{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.nowCard__left{display:flex;align-items:center;gap:12px;min-width:0}
.nowCard__cover{width:64px;height:64px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--card2);flex:0 0 auto}
.nowCard__cover img{width:100%;height:100%;object-fit:cover}
.nowCard__meta{min-width:0}
.nowCard__title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowCard__sub{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowCard__actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* Lyrics gate (Spotify-like) */
.lyricsGate{margin-top:14px;padding:0;overflow:hidden}
.lyricsGate__btn{width:100%;border:0;background:transparent;color:var(--text);padding:12px 12px;display:flex;align-items:center;gap:8px;cursor:pointer}
.lyricsGate__btn .svgicon{color:var(--muted)}
.lyricsGate__label{font-weight:900}
.lyricsGate__chev{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;color:var(--muted2)}
.lyricsGate__btn:active{transform:scale(.99)}

/* Lyrics / transcript */
.lyrics{
  margin-top:14px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  padding:12px;
  max-height:46svh;
  overflow:auto;
  box-shadow: var(--shadow);
  transition: opacity .18s ease, transform .18s ease;
}
.lyrics--full{max-height:52svh}

.lyrics.is-closed{opacity:0;transform:translateY(-6px);pointer-events:none}

.lyricsStage{
  margin: 8px 0 10px 0;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: radial-gradient(140% 140% at 0% 0%, rgba(46,66,255,.18) 0%, rgba(0,0,0,0) 60%), var(--card2);
  position: sticky;
  top: 0;
  z-index: 2;
}
[data-theme="light"] .lyricsStage{
  background: radial-gradient(140% 140% at 0% 0%, rgba(46,66,255,.16) 0%, rgba(0,0,0,0) 60%), var(--card2);
}
.lyricsStage__active{
  font-weight: 950;
  font-size: 20px;
  line-height: 1.2;
}
.lyricsStage__next{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 17px;
}
.lyricsStage__bar{
  margin-top: 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
[data-theme="light"] .lyricsStage__bar{background: rgba(17,24,39,.08)}
.lyricsStage__bar > i{
  display:block;
  height:100%;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.lyrics p{
  margin:8px 0;
  color:var(--muted);
  line-height:1.35;
  padding:10px 10px;
  border-radius:14px;
  position:relative;
  transition: transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}
.lyrics p.line{padding-left:14px;cursor:pointer}
.lyrics p.line::before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
}
[data-theme="light"] .lyrics p.line::before{background: rgba(17,24,39,.08)}

.lyrics p.para{color:var(--text);opacity:.92;cursor:default}
.lyrics p.active{color:var(--text);background:rgba(255,255,255,.06);transform:scale(1.02);opacity:1}
[data-theme="light"] .lyrics p.active{background:rgba(17,24,39,.06)}
.lyrics p.line:not(.active){opacity:.78}

.lyrics p .k{color:currentColor}
.lyrics p.active .k{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  background-size: var(--fill, 0%) 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lyrics p.active.line::before{background: linear-gradient(180deg, var(--accent), var(--accent2))}
.lyrics__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.lyrics__title{font-weight:900}
.lyrics__actions{display:flex;gap:8px}



/* Player */
.player{
  position:fixed;
  left:0;right:0;
  bottom: calc(var(--navH) + var(--safeB));
  height: var(--playerH);
  padding:10px 12px;
  border-top:1px solid var(--border);
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(14px);
  z-index:20;
  transition: transform .22s ease, opacity .22s ease;
}

/* Oculto (hasta seleccionar una pista) */
.player.is-hidden{
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* Modo placeholder (visible pero sin pista activa) */
.player.is-empty .controls button,
.player.is-empty .now{
  opacity: .65;
}
.player.is-empty .controls button{pointer-events:none}
.player.is-empty .range{pointer-events:none}
[data-theme="light"] .player{background:rgba(255,255,255,.78)}
.player__row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%}

.now{display:flex;gap:8px;align-items:center;min-width:0;flex:1}
.now__cover{width:70px;height:70px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--card2);flex:0 0 auto}
.now__cover img{width:100%;height:100%;object-fit:cover}
.now__meta{min-width:0;width:100%}
.now__title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now__title.is-marquee{ text-overflow:clip; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);} 
.now__title.is-marquee>span{display:inline-block; padding-right:36px; will-change:transform; animation: marqueeScroll var(--marqueeDur, 12s) linear infinite;}
@keyframes marqueeScroll{0%,12%{transform:translate3d(0,0,0);}88%,100%{transform:translate3d(calc(-1 * var(--marqueeDist, 0px)),0,0);}}
.now__artist{color:var(--muted);font-size:var(--fs-xs);white-space:normal;overflow:hidden;text-overflow:clip;line-height:1.18;max-height:calc(1.18em * 2)}

.controls{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.progress{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--muted2);font-size:var(--fs-xs)}
.progress .range{flex:1;width:auto;min-width:120px}

/* Range (Spotify-like progress) */
.range{
  --p:0%;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:18px;
  background:transparent;
  cursor:pointer;
}
.range:focus{outline:none}

/* WebKit */
.range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) var(--p), rgba(255,255,255,.18) var(--p), rgba(255,255,255,.18) 100%);
}
[data-theme="light"] .range::-webkit-slider-runnable-track{
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) var(--p), rgba(17,24,39,.18) var(--p), rgba(17,24,39,.18) 100%);
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  background: var(--text);
  border: 2px solid rgba(0,0,0,.18);
  margin-top: -5px;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

/* Firefox */
.range::-moz-range-track{
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
}
[data-theme="light"] .range::-moz-range-track{background: rgba(17,24,39,.18)}
.range::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.range::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:999px;
  background: var(--text);
  border: 2px solid rgba(0,0,0,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

.range--mini{height:16px}
.range--mini::-webkit-slider-runnable-track{height:3px}
.range--mini::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px}
.range--mini::-moz-range-track{height:3px}
.range--mini::-moz-range-progress{height:3px}
.range--mini::-moz-range-thumb{width:12px;height:12px}

.range--now{height:22px}
.range--now::-webkit-slider-runnable-track{height:5px}
.range--now::-moz-range-track{height:5px}
.range--now::-moz-range-progress{height:5px}

.progress{width:100%}

/* Bottom nav */
.bottomnav{
  position:fixed;
  left:0;right:0;
  bottom:0;
  height: calc(var(--navH) + var(--safeB));
  padding:6px 10px calc(18px + var(--safeB)) 10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  border-top:1px solid var(--border);
  background: var(--glass2);
  backdrop-filter: blur(14px);
  z-index:25;
  transition: transform .22s ease, opacity .22s ease;
}

/*
  UX: cuando se abre el panel de reproducción (vista NOW),
  ocultamos la barra inferior Home/Buscar/Biblioteca para evitar superposición.
  En ese estado también liberamos el espacio de --navH para que el mini-player
  baje hasta el borde inferior (safe-area).
*/
.app.is-now,
.app.is-route{ --navH:0px; }

.app.is-now .bottomnav,
.app.is-route .bottomnav{
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* Animación suave al abrir la vista NOW */
#viewNow.is-active{
  animation: nowSlideIn .26s ease both;
}

#viewRoute.is-active{
  animation: nowSlideIn .26s ease both;
}

/* Animación para paneles (Pistas / Mapa) */
.routeWrap.is-enter{
  animation: nowSlideIn .26s ease both;
}
@keyframes nowSlideIn{
  from{opacity:0; transform: translateY(14px);}
  to{opacity:1; transform: translateY(0);}
}


.bottomnav__item{
  border:0;background:transparent;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  padding:4px 0 14px;
  border-radius:10px;
}
.bottomnav__item.is-active{color:var(--brand)}
.bottomnav__icon{font-size:20px;line-height:1}
.bottomnav__icon .svgicon{width:var(--svg-nav);height:var(--svg-nav);min-width:var(--svg-nav);min-height:var(--svg-nav)}
.bottomnav__label{font-size:var(--fs-xs);font-weight:500;line-height:1.1;padding-bottom:1px;margin-bottom:2px;}

/* Now playing view */
.nowHero{
  margin-top:6px;
  display:grid;
  grid-template-columns: 42px 140px 1fr;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: radial-gradient(80% 140% at 15% 0%, rgba(46,66,255,.22), transparent 70%),
              linear-gradient(180deg, var(--card), rgba(0,0,0,0));
}
[data-theme="light"] .nowHero{
  background: radial-gradient(80% 140% at 15% 0%, rgba(46,66,255,.14), transparent 70%),
              linear-gradient(180deg, var(--card), rgba(255,255,255,0));
}
.nowHero__art img{width:140px;height:140px;object-fit:cover;border-radius:16px;border:1px solid var(--border)}
.nowHero__meta{min-width:0}
.nowHero__title{font-weight:950;font-size:20px;line-height:1.15}
.nowHero__sub{color:var(--muted);margin-top:6px}
.nowProgress{margin-top:10px;width:100%}
.nowProgress__times{display:flex;justify-content:space-between;color:var(--muted2);font-size:var(--fs-xs);margin-top:6px}
.nowHero__controls{display:flex;gap:8px;align-items:center;margin-top:14px}

.nowHero{align-items:start}
.nowHero__panel{
  grid-column:1/-1;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
/* Integración: el texto vive dentro de la misma caja del audio */
.nowHero__gate{margin-top:0}
.nowHero .lyrics{border:0;background:transparent;box-shadow:none;padding:10px 0 0 0;margin-top:10px}
.nowHero .lyricsStage{border-radius:16px}

/* Hero image grande (NOW): imagen tipo portada, sin marco, recorte desde arriba */
/*
  Objetivo UX: priorizar la obra.
  - La imagen ocupa gran parte de la vista.
  - nowHero__meta vive BAJO la imagen (no la pisa), con padding propio.
*/
#viewNow .nowHero{
  position:relative;
  overflow:hidden;
  grid-template-columns:1fr;
  align-items:start;
  padding:0; /* el padding pasa a meta/panel para no “comerse” la obra */
}
#viewNow .nowHero__back{
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
#viewNow .nowHero__fit{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
#viewNow .nowHero__art{
  grid-column:1 / -1;
  /* más alto para ver un gran porcentaje de la obra */
  height: clamp(280px, 55svh, 560px);
  margin: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow:hidden;
  position:relative;
}
#viewNow .nowHero__art::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:86px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--card) 100%);
}
[data-theme="light"] #viewNow .nowHero__art::after{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--card) 100%);
}
#viewNow .nowHero__art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: top center;
  border:0;
  border-radius: 0;
}
#viewNow .nowHero.artMode--contain .nowHero__art{
  /* modo “Ver completa”: más alto y sin recorte */
  height: clamp(320px, 72svh, 760px);
  background: var(--card2);
}
#viewNow .nowHero.artMode--contain .nowHero__art img{
  object-fit: contain;
  object-position: center;
}
#viewNow .nowHero__meta{
  grid-column:1 / -1;
  margin-top:0;
  padding:14px;
}

/* Panel (texto sincronizado) dentro de la misma tarjeta, con padding consistente */
#viewNow .nowHero__panel{
  grid-column:1 / -1;
  margin-top:0;
  padding:12px 14px 14px;
}




/* =========================
   Hero artwork: transiciones sutiles + botones lineales (v58.1)
   - Fade menos invasivo (no cubre tanto la imagen)
   - Controles sobre la imagen con estilo lineal (blanco/negro)
   - Transición al cargar la imagen + animación de altura en modo 'ver completa'
========================= */

#viewRoute .routeHero__art,
#viewNow .nowHero__art{
  transition: height .28s ease;
}

#viewRoute .routeHero__art img,
#viewNow .nowHero__art img{
  opacity:0;
  transform: scale(1.02);
  transition: opacity .28s ease, transform .65s ease;
  will-change: opacity, transform;
}

#viewRoute .routeHero__art.is-img-ready img,
#viewNow .nowHero__art.is-img-ready img{
  opacity:1;
  transform: scale(1);
}

/* Fade inferior más sutil */
#viewRoute .routeHero__art::after,
#viewNow .nowHero__art::after{
  height:52px;
  /* un poco más opaco para mejorar legibilidad sin tapar tanto la obra */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.34) 100%);
}
[data-theme="light"] #viewRoute .routeHero__art::after,
[data-theme="light"] #viewNow .nowHero__art::after{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.38) 100%);
}

/* Botones sobre la imagen: lineales, menos pesados */
#viewRoute .routeHero__back,
#viewRoute .routeHero__fit,
#viewNow .nowHero__back,
#viewNow .nowHero__fit{
    width:44px;
  height:44px;
  border-radius:999px;
  background: transparent;
  /* blanco lineal: siempre blanco para leerse sobre la obra */
  border: 1px solid rgba(255,255,255,.84);
  color: rgba(255,255,255,.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* anillo extra sutil (blanco) + sombra ligera */
  box-shadow: 0 12px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.22);
}
[data-theme="light"] #viewRoute .routeHero__back,
[data-theme="light"] #viewRoute .routeHero__fit,
[data-theme="light"] #viewNow .nowHero__back,
[data-theme="light"] #viewNow .nowHero__fit{
    width:44px;
  height:44px;
  border-radius:999px;
  background: transparent;
  /* blanco lineal: siempre blanco para leerse sobre la obra */
  border: 1px solid rgba(255,255,255,.84);
  color: rgba(255,255,255,.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* anillo extra sutil (blanco) + sombra ligera */
  box-shadow: 0 12px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.22);
}
#viewRoute .routeHero__back .svgicon,
#viewRoute .routeHero__fit .svgicon,
#viewNow .nowHero__back .svgicon,
#viewNow .nowHero__fit .svgicon{
    width:22px;
  height:22px;
  /* sombra suave oscura para despegar el ícono del fondo (imagen) */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.65));
}
[data-theme="light"] #viewRoute .routeHero__back .svgicon,
[data-theme="light"] #viewRoute .routeHero__fit .svgicon,
[data-theme="light"] #viewNow .nowHero__back .svgicon,
[data-theme="light"] #viewNow .nowHero__fit .svgicon{
    width:22px;
  height:22px;
  /* sombra suave oscura para despegar el ícono del fondo (imagen) */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.65));
}

@media (prefers-reduced-motion: reduce){
  #viewRoute .routeHero__art,
  #viewNow .nowHero__art{ transition: none; }
  #viewRoute .routeHero__art img,
  #viewNow .nowHero__art img{ transition: none; transform: none; opacity: 1; }
}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
[data-theme="light"] .modal__backdrop{background:rgba(0,0,0,.35)}
.modal__panel{
  position:relative;
  width:min(720px, 100%);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:14px;
  max-height:80svh;
  overflow:auto;
}

/* En tema oscuro, el token --card es intencionalmente translúcido para cards.
   En modal necesitamos más opacidad para lectura. */
[data-theme="dark"] .modal__panel{
  background: rgba(0,0,0,.88);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal__title{font-weight:950}
.modal__body{margin-top:12px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:var(--fs-xs)}
.cols{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cols .col{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:var(--fs-xs);color:var(--text);background:var(--card2)}

/* Menu sheet (móvil) */
.menusheet{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center}
/* Backdrop: solo oscurece (sin blur). El efecto "vidrio" va en el panel. */
.menusheet__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.38);
}
[data-theme="light"] .menusheet__backdrop{
  background:rgba(12,18,34,.10);
}
.menusheet__panel{
  position:relative;
  width:min(520px, 100%);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  border:1px solid var(--border);
  /* Panel "glass": blur SOLO en el fondo del panel, contenido nítido */
  background: var(--menusheetBg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:var(--shadow);
  padding:14px;
  max-height:70svh;
  overflow:auto;
  transform:translateY(14px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

/* En modo claro, el panel se mantiene claro y el blur ocurre igual en el fondo. */
[data-theme="light"] .menusheet__panel{
  background: var(--menusheetBg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-theme="dark"] .menusheet__panel{
  background: var(--menusheetBg);
}
.menusheet.is-open .menusheet__panel{transform:translateY(0);opacity:1;}
.menusheet__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.menusheet__title{font-weight:950;color:var(--text)}
.menusheet__body{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.menuItem{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--text);padding:12px 12px;border-radius:16px;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left}
.menuItem:hover{background:var(--card2)}
.menuItem__icon{width:40px;height:40px;border-radius:14px;border:1px solid var(--border);background:var(--card2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.menuItem__label{font-weight:900}

.menuItem--lang{cursor:default}
.menuItem--lang .menuItem__label{flex:1}
.menuSelect{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
}
.menuSelect:focus{outline:2px solid var(--brand);outline-offset:2px}

/* Selector de idioma (segmentado) */
.langSeg{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--card2) 92%, transparent);
  border-radius:10px;
  padding:3px;
  gap:3px;
}
.langSeg__btn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:950;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  line-height:1;
  min-width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.langSeg__btn:hover{background:var(--card);color:var(--text)}
.langSeg__btn.is-active{
  background:color-mix(in oklab, var(--card) 94%, transparent);
  color:var(--text);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--brand) 18%, var(--border)) inset;
}
.langSeg__btn:focus{outline:2px solid var(--brand);outline-offset:2px}

/* Accesibilidad: select oculto (queda para lectores de pantalla) */
.menuSelect--sr{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


@media (max-width: 520px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .routeHero{grid-template-columns: 1fr;}
  .routeHero__art{width:140px}
  .routeHero__art img{width:140px;height:140px}

  /* En móvil: acciones del header dentro de menú hamburguesa */
  #btnInfo,#btnTheme{display:none;}
  #btnMenu{display:inline-flex;}

  /* Tabs (Pistas/Mapa): baja un poco para que no se monten sobre el hero */
  .routeTabs{margin-top:10px;padding-top:6px;}

  /* NOW (móvil): apila para que el texto tenga 100% de ancho */
  .nowHero{grid-template-columns:1fr;align-items:start}
  .nowHero__back{width:56px;height:56px}
  .nowHero__art{grid-column:auto}
  .nowHero__art img{width:100%;height:auto;aspect-ratio:1}
  .nowHero__meta{
    width:100%;
    min-width:300px;
    max-width:100%;
  }

  /* Mapa (SVG) en móvil: asegura altura visible */
  .svgViewport{height:min(54vh, 360px); min-height:260px;}

  /* Route map header: en móviles apila contenido para evitar traslapes */
  .mapCard__head{flex-direction:column;align-items:stretch}
  .mapCard__headLeft{width:100%}
  .mapCard__headRight{width:100%;flex-direction:column;align-items:stretch;gap:8px}
  .mapFloors{width:100%}
  .mapTools{width:100%;justify-content:flex-end}

  /* Mini player (móvil): estilo Spotify (1 línea) */
  :root{
    --playerH:92px;
    /* Iconos más grandes en móvil (mejor legibilidad) */
    --svg: 28px;
    --svg-iconbtn: 32px;
    --svg-nav: 30px;
    --svg-chip: 20px;
    --svg-overlay: 22px;
    --svg-player: 26px;
    --svg-player-play: 30px;
  }

  /* Banner azul SOLO cuando hay pista activa */
  footer.player:not(.is-hidden):not(.is-empty){
    background: var(--brand);
    backdrop-filter: none;
    border-top: 0;
  }

  .player{padding:10px 12px 14px;}
  .player__row{flex-direction:row;align-items:center;gap:10px}
  .player .now{width:auto;flex:1;min-width:0}
  .player .now__cover{width:48px;height:48px;border-radius:12px;border-color: rgba(255,255,255,.28)}
  .player .now__meta{width:auto;flex:1;min-width:0;max-width:62vw}

  /* Texto con contraste sobre azul */
  footer.player:not(.is-hidden):not(.is-empty) .now__title{color:#fff;}
  footer.player:not(.is-hidden):not(.is-empty) .now__artist{color:rgba(255,255,255,.86)}

  /* Controles a la derecha (solo Play en móvil) */
  .player .controls{width:auto;justify-content:flex-end;flex-wrap:nowrap}
  #prev,#next{display:none;}
  .player .iconbtn{width:44px;height:44px;border-radius:999px}
  .player .playbtn{width:48px;height:48px;border-radius:999px}
  .player .iconbtn .svgicon{width:var(--svg-player);height:var(--svg-player);min-width:var(--svg-player);min-height:var(--svg-player)}
  .player .playbtn .svgicon{width:var(--svg-player-play);height:var(--svg-player-play);min-width:var(--svg-player-play);min-height:var(--svg-player-play)}

  /* Botones blancos sobre fondo azul */
  footer.player:not(.is-hidden):not(.is-empty) .iconbtn,
  footer.player:not(.is-hidden):not(.is-empty) .playbtn{
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.26);
    color: #fff;
  }
  footer.player:not(.is-hidden):not(.is-empty) .playbtn{background: rgba(255,255,255,.28);}

  /* Progreso tipo Spotify: línea fina abajo, sin tiempos */
  .player .progress{position:absolute;left:12px;right:12px;bottom:8px;margin:0;gap:0}
  .player .progress span{display:none;}
  .player .progress .range{min-width:0}
  .player .range{height:14px}
  .player .range::-webkit-slider-runnable-track{height:3px;background: rgba(255,255,255,.26)}
  footer.player:not(.is-hidden):not(.is-empty) .range::-webkit-slider-runnable-track{
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.92) var(--p),
      rgba(255,255,255,.26) var(--p),
      rgba(255,255,255,.26) 100%
    );
  }
  .player .range::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;background:#fff;border:2px solid rgba(0,0,0,.15)}
  .player .range::-moz-range-track{height:3px;background: rgba(255,255,255,.26)}
  footer.player:not(.is-hidden):not(.is-empty) .range::-moz-range-track{background: rgba(255,255,255,.26)}
  footer.player:not(.is-hidden):not(.is-empty) .range::-moz-range-progress{height:3px;background: rgba(255,255,255,.92)}
  .player .range::-moz-range-thumb{width:12px;height:12px;background:#fff;border:2px solid rgba(0,0,0,.15)}

  /* Now (full): reduce y permite wrap si la pantalla es muy chica */
  .nowHero__controls{justify-content:center;flex-wrap:wrap}
  .nowHero__controls .iconbtn{width:50px;height:50px}
  .nowHero__controls .playbtn{width:62px;height:62px}

}

/* Home: destacar la sección "En reproducción" */
#homeNow .section__head{padding-left:10px;border-left:6px solid var(--brand)}
#homeNow .nowCard{border:2px solid rgba(46,66,255,.22);background:rgba(46,66,255,.06)}


/* Debug (columnas del Sheet) */
.cols__grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.colchip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:var(--fs-xs);color:var(--text);background:var(--card2)}

/* =============================
   Buscar (Spotify-like) — v14
   ============================= */

.searchHero{display:flex;gap:8px;align-items:center}
.searchPrompt{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted2);
  text-align:left;
  box-shadow: var(--shadow);
}
.searchPrompt:active{transform:scale(.99)}
.searchPrompt span{font-weight:850}

/* Dock de filtros (solo Buscar) */
.filtersDock__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 2px 8px 2px;
}
.filtersDock__title{font-weight:950;letter-spacing:.2px}

/* Animación desplegable */
#filtersDock[hidden]{display:none}
#filtersDock{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: max-height .26s ease, opacity .26s ease, transform .26s ease;
}
#filtersDock.is-open{
  max-height:520px;
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.filtersDock__search{display:flex}

/* =============================
   Tema / Categoría (Topic Focus)
   ============================= */
.section__head--searchExplore{align-items:center; gap:10px;}
.topicFocusBack{flex:0 0 auto;}

/* Modo: entrar a un tema desde Home (sin filtros) */
#viewSearch.is-topicFocus .searchHero{display:none;}
#viewSearch.is-topicFocus #filtersDock{display:none !important;}
#viewSearch.is-topicFocus #searchExploreBlocks{display:none !important;}
#viewSearch.is-topicFocus #searchTopicsGrid{display:none !important;}

#viewSearch.is-topicFocus #searchExplore{
  border-radius:var(--radius-md);
  padding:14px;
  margin-top:14px;
  /* fondo por tema (definido por JS) + textos según tema */
  color: var(--topicFocusText, var(--text));
  border:1px solid var(--topicFocusBorder, rgba(0,0,0,.18));
  background:
    radial-gradient(120% 140% at 10% -10%, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(120% 160% at 110% 10%, rgba(0,0,0,.10), transparent 62%),
    linear-gradient(180deg,
      rgb(var(--topicFocusBgRgb, 245,245,245)),
      rgb(var(--topicFocusBg2Rgb, 235,235,235))
    );
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

#viewSearch.is-topicFocus #searchExploreTitle{
  color: var(--topicFocusText, var(--text));
}

.topicFocusPanel{
  margin-top:10px;
  border-radius:16px;
  padding:12px;
  border:1px solid var(--topicFocusBorder2, rgba(0,0,0,.16));
  background: var(--topicFocusPanelBg, rgba(255,255,255,.24));
}
.topicFocusPanel__meta{
  font-weight:950;
  letter-spacing:-.01em;
  color: var(--topicFocusText, var(--text));
}
.topicFocusPanel__hint{
  margin-top:6px;
  font-size:var(--fs-xs);
  font-weight:800;
  color: var(--topicFocusSub, var(--muted));
}
.topicFocusPanel__block{margin-top:12px;}
.topicFocusPanel__title{
  font-weight:950;
  font-size:var(--fs-sm);
  letter-spacing:.02em;
  color: var(--topicFocusText, var(--text));
  opacity:.92;
  margin:0 0 10px 0;
}

/* Animación: de izquierda a derecha */
#viewSearch.is-topicFocus.is-enter{
  animation: topicFocusIn .26s ease-out both;
}

/* Botones/iconos dentro del panel de tema (para fondo claro) */
#viewSearch.is-topicFocus #searchExplore .iconbtn{
  background: var(--topicFocusBtnBg, rgba(255,255,255,.28));
  border-color: var(--topicFocusBtnBorder, rgba(0,0,0,.16));
  color: var(--topicFocusBtnColor, rgba(0,0,0,.88));
}
#viewSearch.is-topicFocus #searchExplore .textbtn{
  background: var(--topicFocusBtnBg2, rgba(255,255,255,.30));
  border-color: var(--topicFocusBtnBorder, rgba(0,0,0,.16));
  color: var(--topicFocusBtnColor2, rgba(0,0,0,.86));
}
#viewSearch.is-topicFocus #searchExplore .textbtn:hover{
  background: var(--topicFocusBtnHover, rgba(255,255,255,.40));
}

/* Ajustes de tarjetas dentro del bloque de Tema (para fondo claro) */
#viewSearch.is-topicFocus #searchExplore .routeCard__desc{
  color: var(--topicFocusRouteDesc, rgba(0,0,0,.82));
}
#viewSearch.is-topicFocus #searchExplore .routeCard__cover{
  border-color: var(--topicFocusCardBorder, rgba(0,0,0,.16));
  background: var(--topicFocusCardBg, rgba(255,255,255,.22));
}


/* En modo oscuro: el panel de Tema usa texto claro sobre fondo más profundo */
[data-theme="dark"] #viewSearch.is-topicFocus #searchExplore{
  /* En oscuro, asegura legibilidad: si JS no define variables, usamos blancos/grises claros */
  --topicFocusBorder: rgba(255,255,255,.16);
  --topicFocusBorder2: rgba(255,255,255,.14);
  --topicFocusPanelBg: rgba(255,255,255,.06);
  --topicFocusSub: rgba(255,255,255,.68);
  --topicFocusBtnBg: rgba(255,255,255,.08);
  --topicFocusBtnBg2: rgba(255,255,255,.10);
  --topicFocusBtnHover: rgba(255,255,255,.14);
  --topicFocusBtnBorder: rgba(255,255,255,.22);
  --topicFocusBtnColor: rgba(255,255,255,.96);
  --topicFocusBtnColor2: rgba(255,255,255,.94);
  --topicFocusRouteDesc: rgba(255,255,255,.74);
  --topicFocusCardBorder: rgba(255,255,255,.18);
  --topicFocusCardBg: rgba(255,255,255,.06);

  background:
    radial-gradient(120% 140% at 10% -10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(120% 160% at 110% 10%, rgba(0,0,0,.50), transparent 62%),
    linear-gradient(180deg,
      rgb(var(--topicFocusBgRgb, 24,24,28)),
      rgb(var(--topicFocusBg2Rgb, 12,12,16))
    );
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
}
@keyframes topicFocusIn{
  from{opacity:0; transform: translateX(-18px);}
  to{opacity:1; transform: translateX(0);}
}
@media (prefers-reduced-motion: reduce){
  #viewSearch.is-topicFocus.is-enter{animation:none;}
}

/* Explorar */
.topicsGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width:420px){
  .topicsGrid{grid-template-columns:1fr}
}

.exploreBlocks{margin-top:12px}
.exploreBlock__title{font-weight:950;font-size:17px;letter-spacing:-.02em;color:var(--brand);margin:6px 0 10px 0;}
[data-theme="light"] .exploreBlock__title{color:#4b5563;}
.exploreRail{display:flex;gap:12px;overflow:auto;padding:2px 2px 2px 2px;scroll-snap-type:x mandatory;scrollbar-width:none}
.exploreRail::-webkit-scrollbar{display:none}

/* Explore tiles (duración / edades) — estilo tipo chip/toggle, no botón cuadrado */
.exploreTile{
  flex:0 0 auto;
  min-width: 190px;
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  padding: 12px 14px;
  text-align:left;
  color: var(--text);
  box-shadow: var(--shadow);
  scroll-snap-align:start;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.exploreTile:active{transform:scale(.98)}
.exploreTile:focus-visible{outline:2px solid rgba(46,66,255,.65);outline-offset:2px}
.exploreTile__t{font-weight:950;font-size:16px;line-height:1.1;letter-spacing:-.01em}
.exploreTile__s{font-size:var(--fs-xs);font-weight:800;opacity:.92}

.exploreTile.is-active{
  background: var(--accent);
  border-color: transparent;
  color:#fff;
}
.exploreTile.is-active .muted{color: rgba(255,255,255,.88) !important;}

.exploreCard{
  min-width:210px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--card), rgba(0,0,0,0));
  border-radius:16px;
  padding:12px 14px;
  color:var(--text);
  text-align:left;
  scroll-snap-align:start;
  box-shadow: var(--shadow);
}
[data-theme="light"] .exploreCard{background: linear-gradient(180deg, var(--card), rgba(255,255,255,0))}
.exploreCard__title{font-weight:950;font-size:17px;line-height:1.1}
.exploreCard__meta{margin-top:8px;color:var(--muted2);font-size:var(--fs-xs);font-weight:800}

/* =============================
   Modal: Acerca de
   ============================= */

.about__lead{font-size:17px;line-height:1.35;color:var(--muted);font-weight:700}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:520px){.about__grid{grid-template-columns:1fr}}
.about__card{border:1px solid var(--border);background:var(--card);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.about__label{font-weight:950;margin-bottom:6px}
.about__list{margin:0;padding-left:18px;color:var(--muted2)}
.about__list li{margin:6px 0}
.about__meta{margin-top:12px;color:var(--muted);font-size:var(--fs-xs)}


/* =====================================================
   OPTION A — "Santorini" minimal (white UI + solid topics)
   - Fondo blanco por defecto
   - Texto negro/gris/azul
   - Categorías (tema) con bloques de color sólido
   - Modo oscuro: fondo negro + acentos azul/blanco
   ===================================================== */

/* Default tokens = LIGHT */
:root{
  --brand:#2E42FF;
  --brand2:#6C7CFF;

  --bg:#ffffff;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#F1F3FF;
  --text:#0C1222;
  --muted:rgba(12,18,34,.92);
  --muted2:rgba(12,18,34,.78);
  --border:rgba(12,18,34,.12);
  --shadow:0 10px 24px rgba(12,18,34,.08);

  --accent:var(--brand);
  --accent2:var(--brand2);

  --glass: rgba(255,255,255,.78);
  --glass2: rgba(255,255,255,.92);
}

/* DARK tokens */
[data-theme="dark"]{
  --brand:#2E42FF;
  --brand2:#6C7CFF;

  --bg:#000000;
  --bg2:#000000;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --menusheetBg: rgba(0,0,0,.74);
  --text:#ffffff;
  --muted:rgba(255,255,255,.84);
  --muted2:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.16);
  --shadow:0 10px 25px rgba(0,0,0,.35);

  --accent:var(--brand);
  --accent2:var(--brand2);

  --glass: rgba(0,0,0,.72);
  --glass2: rgba(0,0,0,.84);
}

body{background:var(--bg)}

/* Quita gradientes “spotify-ish” y vuelve el UI más editorial */
.quickTile,
.exploreCard,
.routeHero{
  background: var(--card) !important;
}

/* Active pills/tab: sólido (no degradado) */
.chip.is-active,
.routeTab.is-active{
  background: var(--accent) !important;
  color:#fff !important;
  border-color: transparent !important;
}

/* Topic blocks: color sólido (la paleta la asigna JS con --topicBg) */
.topicCard{
  background: var(--topicBg, var(--accent)) !important;
  color: var(--topicText, #fff) !important;
  border-color: transparent !important;
}
.topicCard__meta{color: var(--topicSub, rgba(255,255,255,.86)) !important;}

/* En light, suaviza sombras */
[data-theme="light"] .quickTile,
[data-theme="light"] .exploreCard,
[data-theme="light"] .routeHero,
[data-theme="light"] .topicCard{box-shadow: 0 10px 20px rgba(12,18,34,.06) !important;}


/* Panel headings inside views (Route / Now) */
.panelHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 8px 2px 12px;
}
.panelHead__kicker{
  font-size:var(--fs-xs);
  color:var(--muted2);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.panelHead__title{
  font-size:20px;
  font-weight:900;
  color:var(--accent);
  line-height:1.1;
}
.panelHead__tools{
  display:flex;
  gap:8px;
  align-items:center;
}

.nowHero__kicker{
  font-size:var(--fs-xs);
  color:var(--muted2);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}



/* =========================
   Toast (copiar/compartir)
========================= */
.toast{
  position:fixed;
  left:16px;
  right:16px;
  bottom:92px;
  z-index:9999;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(0,0,0,.82);
  color:#fff;
  font-size:17px;
  line-height:1.25;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.toast.is-show{
  opacity:1;
  transform:translateY(0);
}
[data-theme="dark"] .toast{
  background:rgba(0,0,0,.78);
}

/* Home topic chips (carrusel) */
.chips--home{
  margin-top:0;
  padding:6px 0 2px;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.chips--home::-webkit-scrollbar{display:none}
.chips--home .chip{
  height:36px;
  padding:0 14px;
  font-weight:600;
  background:var(--chipOffBg);
  border-color:var(--chipOffBorder);
  color:var(--chipOffText);
  box-shadow: var(--chipShadow);
  white-space:nowrap;
  scroll-snap-align:start;
}
/* Force neutral look in home row even if the chip also uses `.is-topic` elsewhere */
.chips--home .chip.is-topic:not(.is-active){
  background:var(--chipOffBg);
  border-color:var(--chipOffBorder);
  color:var(--chipOffText);
}
.chips--home .chip.is-active{
  background:var(--chipAccent, var(--accent));
  color:var(--chipOn, #fff);
  border-color:transparent;
  box-shadow: var(--chipShadowActive);
}
.chips--home .chip[data-topic="all"].is-active{
  background:var(--chipAllActiveBg);
  color:var(--text);
  border-color:transparent;
  box-shadow: var(--chipShadowActive);
}

/* Home topic chips: YouTube Music-like single-row shelf */
#homeTopicChipsSection.section--tight{margin-top:-6px}
#homeTopicChipsSection .section__head{display:none}

/* Topic card pulse when jumped from chips */
.topicCard.is-pulse{animation:topicPulse .7s ease}
@keyframes topicPulse{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}


/* Home topic chips: keep the shelf clean (no background shadow) */
#homeTopicChipsSection{background:transparent;box-shadow:none}
#homeTopicChipsSection .chips--home{box-shadow:none}

/* ===============================
   Spotify-like lyrics (Transcript)
   - No separate .lyricsStage box
   - Active line in blue, others slightly faded
   =============================== */

.lyricsStage{display:none !important;}

.lyrics p{
  margin: 10px 0;
  padding: 6px 0;
  border-radius: 0;
  background: transparent !important;
  transform: none !important;
}

.lyrics p.line{
  padding-left: 0;
}

.lyrics p.line::before{
  display:none !important;
}

.lyrics p.para{
  color: var(--text);
  opacity: .92;
}

.lyrics p.active{
  background: transparent !important;
  transform: none !important;
  opacity: 1;
  color: var(--accent);
  font-weight: 950;
}

.lyrics p.line:not(.active){
  opacity: .38;
}

/* Ensure the active text remains readable (override karaoke fill styling) */
.lyrics p .k{color: currentColor;}
.lyrics p.active .k{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: currentColor !important;
}

/* --- Lyrics: estilo tipo Spotify (sin "caja" superior, solo color + opacidad) --- */
.lyricsStage{display:none !important;}

.lyrics p{
  padding: 6px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
}
.lyrics p.line{
  padding-left: 0 !important;
}
.lyrics p.line::before{
  display: none !important;
}
.lyrics p.line:not(.active){
  opacity: .48 !important;
}
.lyrics p.active{
  background: transparent !important;
  transform: none !important;
  color: var(--accent) !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}
[data-theme="light"] .lyrics p.active{
  background: transparent !important;
}
.lyrics p.active .k{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--accent) !important;
}


@media (max-width: 900px){
  .topbar__row{align-items:flex-start}
  .brand{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"logo" "text";
    align-items:flex-start;
    justify-items:flex-start;
    gap:6px;
    max-width:min(260px, 72vw);
  }
  .brand__logo{
    grid-area:logo;
    width:min(172px, 52vw);
  }
  .brand__text{
    grid-area:text;
    display:block;
    width:100%;
    min-width:0;
    align-self:start;
  }
  .brand__subtitle{
    display:block;
    margin-top:0;
    font-size:clamp(12.5px, 3.2vw, 13.5px);
    line-height:1.3;
    max-width:28ch;
    font-weight:520;
    color:color-mix(in oklab, var(--muted) 93%, var(--text));
    letter-spacing:-.01em;
    text-wrap:pretty;
  }
  .topbar__actions{align-self:flex-start;padding-top:0;gap:8px}
  .topbar__menuStack{gap:10px}
  .splash__card{width:min(95vw, 560px);padding:36px 22px 30px 22px}
  .splash__logo{width:min(360px, 84vw);margin-bottom:18px}
  .splash__desc{font-size:clamp(19px, 5.3vw, 22px);line-height:1.56;max-width:min(34ch, 90vw)}
  .splash__hint{font-size:15px}
}


@media (max-width: 420px){
  .brand{max-width:min(220px, 68vw);gap:5px}
  .brand__logo{width:min(154px, 50vw)}
  .brand__subtitle{display:block;font-size:12.5px;line-height:1.32;max-width:26ch;font-weight:520}
  .splash__card{padding:32px 18px 26px 18px}
  .splash__logo{width:min(320px, 82vw)}
  .splash__desc{font-size:20px;line-height:1.58;max-width:min(32ch, 90vw)}
}

@media (max-width: 360px){
  .brand__subtitle{display:none}
  .brand{gap:0;max-width:none}
  .brand__logo{width:min(158px, 56vw)}
}

.brand__logo::before,.brand__logo::after,.splash__logo::before,.splash__logo::after{content:none !important}


.section__head--stacked{align-items:flex-start}
.section__head--stacked > div{min-width:0}
.section__lead{margin-top:6px;color:var(--muted);font-size:var(--fs-sm);line-height:1.45;max-width:44ch}
.section--promo{margin-top:16px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.section--promo .section__head{padding-inline:14px}
.section--promo .rail{
  width:100vw;
  padding:4px 0 18px 0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  scroll-padding-left:0;
  gap:8px;
}
.section--promo .routeCard{width:min(100vw, 560px);padding:0}
.section--promo .routeCard__cover{aspect-ratio:1.22;border-radius:0;box-shadow:0 10px 26px rgba(0,0,0,.16);border:0}
[data-theme="light"] .section--promo .routeCard__cover{box-shadow:0 12px 28px rgba(17,24,39,.09)}
.section--promo .routeCard__title{margin-top:12px;padding-inline:16px;font-size:clamp(22px, 4.8vw, 32px);line-height:1.01;letter-spacing:-.04em;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.section--promo .routeCard__desc{margin-top:8px;padding-inline:16px;font-size:15px;line-height:1.45;-webkit-line-clamp:2;color:color-mix(in oklab, var(--muted) 94%, var(--text))}
.section--promo .routeCard__play{right:16px;bottom:16px;width:46px;height:46px}
.section--promo .routeCard__play .svgicon{width:22px;height:22px;min-width:22px;min-height:22px}
#viewHome .section--promo + .section{margin-top:22px}
[data-theme="light"] .section--promo .section__lead{color:#6b7280}
@media (max-width: 640px){
  .topbar__actions{gap:8px}
  .topbar__menuStack{gap:10px}
  #topLangSeg{width:max-content;align-self:flex-end;margin-top:10px}
  #topLangSeg .langSeg__btn{width:28px;height:20px}
  #topLangSeg .langBadge{width:16px;height:16px}
  .section--promo .rail{padding:2px 0 18px 0;border-radius:0;scroll-padding-left:0;gap:0}
  .section--promo .routeCard{width:100vw;min-width:100vw;max-width:none;padding:0;scroll-snap-align:start}
  .section--promo .routeCard__cover{border-radius:0;box-shadow:none}
  .section--promo .routeCard__title,
  .section--promo .routeCard__desc{padding-inline:16px}
  .section__lead{font-size:15px;line-height:1.42;max-width:32ch}
}
@media (max-width: 420px){
  .topbar__actions > .iconbtn:not(#btnMenu),
  .topbar__menuStack #btnMenu.iconbtn{width:40px;height:40px;border-radius:12px}
  #topLangSeg .langSeg__btn{width:25px;height:19px}
  #topLangSeg .langBadge{width:15px;height:15px}
  .langCode{font-size:10px}
  .section--promo .routeCard__cover{border-radius:0}
}

/* =========================================================
   AUDIO RELATOS · experiencia por exposiciones + QR (v03)
   ========================================================= */
:root{
  --brand:#2E42FF;
  --brand2:#6C7CFF;
  --accent:var(--brand);
  --accent2:var(--brand2);
  --radius:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --appBgSearch:linear-gradient(180deg,#050716,#000 48%);
}
[data-theme="light"]{
  --brand:#2E42FF;
  --brand2:#6C7CFF;
  --accent:var(--brand);
  --accent2:var(--brand2);
  --border:rgba(46,66,255,.18);
  --card2:#EEF1FF;
  --appBgSearch:linear-gradient(180deg,#F5F7FF,#fff 48%);
}

/* Nuevo logotipo de dos líneas: más compacto en la cabecera. */
.brand__logo{width:min(142px,38vw)}
.brand__logo img,#brandCover{max-height:76px}
.splash__logo{width:min(390px,78vw)}

.homeWelcome{
  margin:12px -14px 0;
  padding:clamp(28px,7vw,64px) 18px;
  min-height:clamp(300px,48svh,520px);
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.62)),
    url('../assets/img/cover.jpg') center 35%/cover no-repeat;
  color:#fff;
}
.homeWelcome__copy{width:min(720px,100%);margin:0 auto}
.homeWelcome__eyebrow{font-size:13px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;opacity:.86}
.homeWelcome__title{margin:10px 0 0;font-size:clamp(31px,7vw,58px);line-height:.98;letter-spacing:-.045em;max-width:18ch;text-wrap:balance}
.homeWelcome__text{margin:16px 0 0;max-width:52ch;font-size:clamp(16px,3.6vw,20px);line-height:1.4;color:rgba(255,255,255,.9)}
.homeWelcome__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.homeWelcome .btn{min-height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:9px}
.btn--scan{background:#fff;color:#0C1222;box-shadow:0 12px 28px rgba(0,0,0,.24)}
.btn--scan .svgicon{width:22px;height:22px;min-width:22px;min-height:22px}
.homeWelcome .btn--ghost{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(0,0,0,.18);backdrop-filter:blur(10px)}

.section--exhibitions{margin-top:28px}
.exhibitionRail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(270px,38vw);
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 1px 8px;
  scrollbar-width:none;
}
.exhibitionRail::-webkit-scrollbar{display:none}
.exhibitionGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:12px}
.exhibitionCard{
  appearance:none;
  border:1px solid var(--border);
  padding:0;
  overflow:hidden;
  background:var(--card);
  color:var(--text);
  text-align:left;
  min-width:0;
  cursor:pointer;
  border-radius:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition:transform .16s ease,box-shadow .16s ease;
}
.exhibitionCard:active{transform:scale(.985)}
.exhibitionCard:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 72%,white);outline-offset:2px}
.exhibitionCard--rail{scroll-snap-align:start}
.exhibitionCard__cover{position:relative;aspect-ratio:1.42;overflow:hidden;background:var(--card2)}
.exhibitionCard__cover img{width:100%;height:100%;object-fit:cover}
.exhibitionCard__badge{position:absolute;left:10px;bottom:10px;padding:6px 9px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:760;border-radius:999px;backdrop-filter:blur(8px)}
.exhibitionCard__body{padding:14px 14px 16px}
.exhibitionCard__kicker{font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);font-weight:850}
.exhibitionCard__title{font-size:clamp(20px,3.8vw,27px);font-weight:850;line-height:1.05;letter-spacing:-.03em;margin-top:7px;overflow-wrap:anywhere}
.exhibitionCard__desc{margin-top:9px;color:var(--muted);font-size:15px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

.exhibitionHero{margin:10px 0 22px;display:grid;grid-template-columns:minmax(220px,42%) 1fr;gap:clamp(18px,4vw,42px);align-items:end;position:relative}
.exhibitionHero__back{position:absolute;z-index:2;top:10px;left:10px;color:#fff;background:rgba(0,0,0,.5);width:46px;height:46px;border-radius:999px;backdrop-filter:blur(8px)}
.exhibitionHero__art{aspect-ratio:1.2;overflow:hidden;background:var(--card2);border-radius:8px}
.exhibitionHero__art img{width:100%;height:100%;object-fit:cover}
.exhibitionHero__kicker{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:850}
.exhibitionHero__title{margin:8px 0 0;font-size:clamp(34px,6vw,64px);line-height:.98;letter-spacing:-.045em;overflow-wrap:anywhere}
.exhibitionHero__desc{margin:16px 0 0;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.45;max-width:54ch}
.exhibitionHero__count{margin-top:16px;font-size:14px;font-weight:750;color:var(--muted2)}

/* Navegación inferior: el escáner siempre está a un toque. */
.bottomnav{grid-template-columns:repeat(4,1fr)}
.bottomnav__item--scan{color:var(--brand)}
.bottomnav__item--scan .bottomnav__icon{width:42px;height:42px;margin-top:-18px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(46,66,255,.22);border:3px solid var(--bg)}
.bottomnav__item--scan .bottomnav__icon .svgicon{width:23px;height:23px;min-width:23px;min-height:23px}
.bottomnav__item--scan .bottomnav__label{margin-top:2px}

/* Categorías más compactas: siguen disponibles en Explorar, sin dominar Inicio. */
.topicsGrid{gap:8px}
.topicCard{min-height:92px;padding:12px;border-radius:8px}
.topicCard__label{font-size:16px;line-height:1.08}
.topicCard__meta{font-size:12px;margin-top:6px}

/* Mapa: más superficie útil y lista de paradas compacta. */
#routeMapWrap .mapCard{padding:0;overflow:hidden;border-radius:8px}
#routeMapWrap .mapCard__head{padding:12px 12px 10px;margin:0;align-items:center;background:var(--card)}
#routeMapWrap .mapCanvas{border-left:0;border-right:0;border-radius:0;min-height:min(66svh,720px);background:#F5F7FF}
#routeMapWrap .svgViewport{height:min(66svh,720px);min-height:420px}
[data-theme="dark"] #routeMapWrap .mapCanvas{background:#07070B}
.mapTools .iconbtn{width:42px;height:42px;border-radius:999px}
.mapFloorChip{padding:7px 10px;font-size:12px}
.mapList{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:10px}
.mapItem{border-radius:8px;padding:10px}
.mapPin{width:26px;height:26px;border-width:3px}
.mapPin::after{inset:6px}

/* Visor QR */
body.is-qr-open{overflow:hidden}
.qrModal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:16px}
.qrModal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.qrModal__panel{position:relative;width:min(520px,100%);max-height:min(92svh,820px);overflow:auto;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 28px 80px rgba(0,0,0,.42)}
.qrModal__head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:16px;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.qrModal__title{font-size:22px;font-weight:900;letter-spacing:-.025em}
.qrModal__sub{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.35}
.qrModal__body{padding:14px}
.qrReader{width:100%;min-height:300px;background:#111;border-radius:8px;overflow:hidden;display:grid;place-items:center}
.qrReader video{object-fit:cover!important}
.qrReader img{max-height:55svh;object-fit:contain}
.qrStatus{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.4}
.qrStatus[data-tone="warning"],.qrStatus[data-tone="error"]{color:#d97961}
.qrStatus[data-tone="ok"]{color:var(--brand2)}
.qrFallback{display:flex;margin-top:12px}
.qrFileLabel{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.qrManual{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.qrManual label{display:block;font-size:13px;font-weight:750;margin-bottom:8px;color:var(--muted)}
.qrManual__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.qrManual input{min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);padding:11px 12px;font-size:16px}

@media (max-width:700px){
  .brand__logo{width:min(126px,36vw)}
  .brand__logo img,#brandCover{max-height:70px}
  .homeWelcome{min-height:430px;background-position:center 28%}
  .homeWelcome__title{font-size:clamp(34px,10vw,48px);max-width:13ch}
  .exhibitionRail{grid-auto-columns:minmax(82vw,82vw)}
  .exhibitionGrid{grid-template-columns:1fr 1fr;gap:10px}
  .exhibitionCard__cover{aspect-ratio:1.18}
  .exhibitionCard__body{padding:11px 10px 13px}
  .exhibitionCard__title{font-size:18px}
  .exhibitionCard__desc{font-size:13px;-webkit-line-clamp:2}
  .exhibitionHero{grid-template-columns:1fr;align-items:start}
  .exhibitionHero__art{margin:0 -14px;border-radius:0;aspect-ratio:1.22}
  .exhibitionHero__meta{padding-top:2px}
  .exhibitionHero__title{font-size:clamp(36px,11vw,52px)}
  #routeMapWrap{margin-left:-14px;margin-right:-14px}
  #routeMapWrap .mapCard{border-left:0;border-right:0;border-radius:0}
  #routeMapWrap .mapCanvas,#routeMapWrap .svgViewport{height:58svh;min-height:360px}
  .mapCard__head{flex-direction:column!important;align-items:stretch!important}
  .mapCard__headRight{width:100%;justify-content:space-between}
  .mapList{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px 4px;gap:8px}
  .mapItem{min-width:78vw;scroll-snap-align:start}
  .qrModal{padding:0;place-items:end center}
  .qrModal__panel{width:100%;max-height:94svh;border-radius:14px 14px 0 0;border-bottom:0}
}

@media (max-width:390px){
  .exhibitionGrid{grid-template-columns:1fr}
  .exhibitionCard__cover{aspect-ratio:1.42}
  .bottomnav{padding-left:4px;padding-right:4px;gap:2px}
  .bottomnav__label{font-size:12px}
  .qrReader{min-height:260px}
}


/* =========================================================
   AUDIO RELATOS · revisión visual v04
   Cambios de interfaz únicamente; no altera datos ni audio.
   ========================================================= */

/* QR: acceso consistente con el resto de la navegación, sin botón flotante. */
.bottomnav__item--scan{color:var(--muted)}
.bottomnav__item--scan .bottomnav__icon{
  width:auto;height:auto;margin:0;border:0;border-radius:0;background:none;color:currentColor;
  display:grid;place-items:center;box-shadow:none;
}
.bottomnav__item--scan .bottomnav__icon .svgicon{
  width:var(--svg-nav);height:var(--svg-nav);min-width:var(--svg-nav);min-height:var(--svg-nav);
}
.bottomnav__item--scan:active,.bottomnav__item--scan:focus-visible{color:var(--brand)}

/* Categorías como chips: menos superficie visual y lectura más rápida. */
.topicsGrid{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;
}
.topicCard{
  min-width:0!important;width:auto;height:auto!important;min-height:40px!important;
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px!important;
  border-radius:999px!important;border:1px solid var(--chipOffBorder)!important;
  background:var(--chipOffBg)!important;color:var(--chipOffText)!important;
  box-shadow:none!important;text-align:left;
}
.topicCard:hover{border-color:color-mix(in oklab,var(--brand) 55%,var(--chipOffBorder))!important}
.topicCard:active{transform:scale(.97)}
.topicCard:focus-visible{outline:2px solid color-mix(in oklab,var(--brand) 70%,white);outline-offset:2px}
.topicCard__label{font-size:14px!important;line-height:1.1!important;font-weight:800!important;color:currentColor!important}
.topicCard__meta{
  margin:0!important;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:inline-grid;place-items:center;font-size:11px!important;line-height:1!important;font-weight:850!important;
  color:var(--muted)!important;background:var(--card);border:1px solid var(--border);
}
[data-theme="dark"] .topicCard__meta{background:rgba(255,255,255,.08);color:rgba(255,255,255,.78)!important}

/* Todos los recorridos: agrupación explícita por exposición. */
.routesHub__intro{max-width:760px;margin:4px 0 26px}
.routesHub__eyebrow,.libraryGroup__kicker{
  font-size:12px;line-height:1.2;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);
}
.routesHub__intro .section__title{margin-top:7px;font-size:clamp(30px,6vw,52px);line-height:1;letter-spacing:-.04em}
.routesHub__lead{margin:12px 0 0;max-width:58ch;color:var(--muted);font-size:16px;line-height:1.45}
.libraryGroups{display:grid;gap:32px}
.libraryGroup{min-width:0}
.libraryGroup__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.libraryGroup__title{margin:5px 0 0;font-size:clamp(22px,4vw,32px);line-height:1.05;letter-spacing:-.025em}
.libraryGroup__count{flex:0 0 auto;color:var(--muted2);font-size:13px;font-weight:750}
.libraryGroup__grid{margin-top:0}

/* El banner del reproductor funciona como control de reproducción. */
.player .now{cursor:pointer}
.player .now:active{opacity:.82}
.player .miniOpen{flex:0 0 auto}
@media (max-width:640px){
  .player .miniOpen{width:40px;height:40px}
  .player .controls{gap:2px}
  .player .now__meta{max-width:48vw}
  .libraryGroup__head{align-items:flex-start}
  .libraryGroup__count{padding-top:20px}
}
@media (max-width:390px){
  .player .iconbtn{width:38px;height:38px}
  .player .playbtn{width:44px;height:44px}
  .player .miniOpen{width:36px;height:36px}
  .player .now__meta{max-width:42vw}
}


/* =========================================================
   AUDIO RELATOS · revisión visual v05
   Interfaz únicamente: no cambia fuentes de datos, rutas ni motor de audio.
   ========================================================= */

/* Hero con imagen real cargada desde la exposición/recorrido. */
.homeWelcome{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(330px,50svh,520px);
  padding:clamp(28px,6vw,56px) 18px;
  background:#121622;
}
.homeWelcome__media{
  position:absolute;
  inset:0;
  z-index:-2;
  background:#121622;
}
.homeWelcome__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  filter:saturate(.94) contrast(1.02);
}
.homeWelcome__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.48));
}
.homeWelcome__copy{
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  margin:0 auto;
}
.homeWelcome__eyebrow{font-size:12px;line-height:1.25;letter-spacing:.11em;font-weight:800}
.homeWelcome__title{font-size:clamp(30px,5.4vw,52px);line-height:1.02;letter-spacing:-.035em;max-width:18ch}
.homeWelcome__text{font-size:clamp(15px,2.2vw,18px);line-height:1.5;max-width:48ch}
.homeWelcome .btn{min-height:44px;padding:0 16px;font-size:14px;font-weight:750}

/* Escala tipográfica consistente para lectura de interfaz. */
.section__title{font-size:clamp(21px,3.6vw,27px);line-height:1.15;font-weight:850}
.section__lead{font-size:14px;line-height:1.5}
.exhibitionCard__title{font-size:clamp(18px,3vw,23px);line-height:1.12;font-weight:800}
.exhibitionCard__desc{font-size:14px;line-height:1.45}
.exhibitionHero__title{font-size:clamp(32px,5.2vw,54px);line-height:1.02}
.exhibitionHero__desc{font-size:clamp(15px,1.7vw,18px);line-height:1.5}
.routeHero__title{font-size:clamp(24px,4vw,34px);line-height:1.08}
.qrModal__title{font-size:20px;line-height:1.2}
.qrModal__sub,.qrStatus{font-size:13px;line-height:1.45}

/* Track row: el bloque de título es la acción principal de reproducción. */
.trackRow{
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
}
.trackRow__cover{width:52px;height:52px;border-radius:9px}
.trackRow__meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.trackRow__tap{
  appearance:none;
  width:100%;
  min-width:0;
  padding:2px 0;
  margin:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:7px;
}
.trackRow__tap:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.trackRow__tap:active{opacity:.72}
.trackRow__title,.trackRow__sub{display:block;max-width:100%}
.trackRow__title{font-size:15px;line-height:1.28;font-weight:800}
.trackRow__sub{font-size:12px;line-height:1.35;margin-top:2px}
.trackRow__langs{gap:5px;margin-top:0;flex-wrap:nowrap}
.trackRow__lang{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  cursor:pointer;
  font-size:10px;
  line-height:1;
  font-weight:800;
}
.trackRow__lang .langBadge{width:12px;height:12px}
.trackRow__langCode{display:inline;font-size:10px;line-height:1;letter-spacing:.04em}
.trackRow__lang:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.trackRow__right{gap:5px}
.trackRow__right .iconbtn{width:36px;height:36px;border-radius:10px}
.trackRow__right .iconbtn .svgicon{width:17px;height:17px;min-width:17px;min-height:17px}

/* Selectores de idioma del reproductor: compactos, pero con área táctil suficiente. */
.contentLangRow{gap:8px;margin-top:10px}
.contentLangRow__label{font-size:12px;font-weight:750}
.contentLangRow__seg .langSeg__btn{min-width:34px;height:32px;padding:4px 6px}
.contentLangRow__seg .langBadge{width:16px;height:16px}

@media (max-width:700px){
  .homeWelcome{min-height:390px;padding:30px 16px 28px;background:none}
  .homeWelcome__media img{object-position:center 34%}
  .homeWelcome__media::after{background:linear-gradient(180deg,rgba(0,0,0,.16) 10%,rgba(0,0,0,.82) 86%)}
  .homeWelcome__copy{align-self:flex-end}
  .homeWelcome__title{font-size:clamp(29px,8.4vw,40px);max-width:15ch}
  .homeWelcome__text{font-size:15px;line-height:1.45;max-width:34ch}
  .homeWelcome__actions{margin-top:20px}
  .section__title{font-size:21px}
  .exhibitionHero__title{font-size:clamp(31px,9vw,44px)}
  .trackRow{grid-template-columns:48px minmax(0,1fr) auto;padding:8px;gap:8px}
  .trackRow__cover{width:48px;height:48px}
  .trackRow__right .iconbtn{width:34px;height:34px}
}

@media (max-width:420px){
  .trackRow__right{flex-direction:column;gap:4px}
  .trackRow__right .iconbtn{width:32px;height:32px}
  .trackRow__lang{height:22px;padding:0 5px}
  .trackRow__lang .langBadge{width:11px;height:11px}
  .trackRow__langCode{font-size:9px}
}


/* =========================================================
   AUDIO RELATOS · revisión de navegación v06
   Texto sincronizado dedicado, jerarquía Spotify-like y controles compactos.
   No altera Google Sheets, rutas, idiomas ni motor de reproducción.
   ========================================================= */

/* La pista activa se reconoce de inmediato dentro del recorrido. */
.trackRow{position:relative;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.trackRow.is-current{
  border-color:color-mix(in oklab,var(--brand) 46%,var(--border));
  background:color-mix(in oklab,var(--brand) 9%,var(--card));
}
.trackRow.is-current::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:var(--brand);
}
.trackRow.is-current .trackRow__title{color:var(--brand)}

/* Controles secundarios de cada ficha: menos peso visual. */
.trackRow__right .iconbtn{width:32px;height:32px;border-radius:9px}
.trackRow__right .iconbtn .svgicon{width:15px;height:15px;min-width:15px;min-height:15px}

/* Reproductor completo: controles cercanos al estándar táctil de 44 px. */
.nowHero__controls{gap:6px}
.nowHero__controls .iconbtn{width:40px;height:40px}
.nowHero__controls .playbtn{width:50px;height:50px}
.nowHero__controls .iconbtn .svgicon{width:20px;height:20px;min-width:20px;min-height:20px}
.nowHero__controls .playbtn .svgicon{width:24px;height:24px;min-width:24px;min-height:24px}

/* Cabecera de la lectura. */
.lyrics__head--focus{position:sticky;top:0;z-index:4;padding:4px 0 12px;margin-bottom:10px}
.lyrics__context{min-width:0;flex:1}
.lyrics__eyebrow{font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lyrics__track{font-size:18px;line-height:1.2;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.lyrics__actions{align-items:center;flex:0 0 auto}
.lyrics__actions .btn{min-height:32px;height:32px;padding:0 9px;border-radius:999px;font-size:12px}
.lyrics__close{width:34px;height:34px;border-radius:999px}
.lyrics__close .svgicon{width:18px;height:18px;min-width:18px;min-height:18px}

/*
  Al abrir el icono de texto, la vista se convierte en una pantalla azul
  dedicada al contenido de la pista activa. La reproducción sigue usando
  el mismo elemento <audio> y el mismo sistema de sincronización existente.
*/
#viewNow.is-lyrics-focus{padding-top:0}
#viewNow.is-lyrics-focus > .section{display:none}
#viewNow.is-lyrics-focus .nowHero{
  min-height:calc(100svh - var(--playerH) - var(--safeB));
  border:0;
  border-radius:0;
  background:var(--brand);
  color:#fff;
  overflow:visible;
}
#viewNow.is-lyrics-focus .nowHero__art,
#viewNow.is-lyrics-focus .nowHero__meta,
#viewNow.is-lyrics-focus .nowHero__fit,
#viewNow.is-lyrics-focus .nowHero__gate{display:none !important}
#viewNow.is-lyrics-focus .nowHero__back{
  top:12px;
  left:12px;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.48);
}
#viewNow.is-lyrics-focus .nowHero__panel{
  display:block;
  margin:0;
  padding:68px clamp(16px,4vw,34px) 24px;
  border:0;
  min-height:calc(100svh - var(--playerH) - var(--safeB));
}
#viewNow.is-lyrics-focus .nowHero__lyrics{
  display:block !important;
  max-height:calc(100svh - var(--playerH) - var(--safeB) - 84px);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:rgba(255,255,255,.42) transparent;
}
#viewNow.is-lyrics-focus .lyrics__head--focus{
  background:linear-gradient(180deg,var(--brand) 74%,color-mix(in oklab,var(--brand) 0%,transparent));
}
#viewNow.is-lyrics-focus .lyrics__eyebrow,
#viewNow.is-lyrics-focus #nowLyricsHint{color:rgba(255,255,255,.68)}
#viewNow.is-lyrics-focus .lyrics__track{color:#fff}
#viewNow.is-lyrics-focus .lyrics__actions .btn,
#viewNow.is-lyrics-focus .lyrics__close{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);
}
#viewNow.is-lyrics-focus .lyrics p{
  max-width:32ch;
  margin:0 0 4px;
  padding:10px 4px;
  color:rgba(255,255,255,.43);
  font-weight:760;
  line-height:1.32;
  border-radius:8px;
  transform:none;
}
#viewNow.is-lyrics-focus .lyrics p.line{padding-left:4px}
#viewNow.is-lyrics-focus .lyrics p.line::before{display:none}
#viewNow.is-lyrics-focus .lyrics p.line:not(.active){opacity:1}
#viewNow.is-lyrics-focus .lyrics p.active{
  color:#fff;
  background:transparent;
  opacity:1;
  transform:none;
}
#viewNow.is-lyrics-focus .lyrics p.active .k{
  background:linear-gradient(90deg,#fff 0%,#fff var(--fill,0%),rgba(255,255,255,.58) var(--fill,0%),rgba(255,255,255,.58) 100%);
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#viewNow.is-lyrics-focus .lyrics p.para{
  color:rgba(255,255,255,.92);
  max-width:54ch;
  font-weight:520;
  line-height:1.55;
}

@media (min-width:760px){
  #viewNow.is-lyrics-focus .nowHero__panel{padding-left:max(34px,calc((100vw - 920px)/2));padding-right:max(34px,calc((100vw - 920px)/2))}
  #viewNow.is-lyrics-focus .lyrics p{font-size:clamp(22px,2.3vw,30px) !important;max-width:36ch}
}

@media (max-width:700px){
  .nowHero__controls{justify-content:center;gap:5px;flex-wrap:nowrap}
  .nowHero__controls .iconbtn{width:38px;height:38px}
  .nowHero__controls .playbtn{width:48px;height:48px}
  .trackRow__right .iconbtn{width:30px;height:30px}
  .trackRow__right .iconbtn .svgicon{width:14px;height:14px;min-width:14px;min-height:14px}
  #viewNow.is-lyrics-focus .lyrics p{font-size:clamp(19px,5.7vw,25px) !important;max-width:29ch;padding:9px 2px}
  #viewNow.is-lyrics-focus .lyrics p.para{font-size:17px !important;max-width:none}
  .lyrics__track{font-size:16px}
}

@media (max-width:390px){
  .nowHero__controls .iconbtn{width:36px;height:36px}
  .nowHero__controls .playbtn{width:46px;height:46px}
  .lyrics__actions{gap:4px}
  .lyrics__actions .btn{height:30px;min-height:30px;padding:0 8px}
  .lyrics__close{width:32px;height:32px}
}

/* =========================================================
   AUDIO RELATOS · navegación accesible v07
   La tarjeta abre la ficha. La reproducción queda en ▶.
   Obra, Texto y Mapa son vistas hermanas dentro de la ficha.
   ========================================================= */
.trackRow{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 44px;
  gap:10px;
  min-height:70px;
  padding:9px 8px 9px 10px;
  overflow:hidden;
}
.trackRow__openSurface{position:absolute;inset:0;z-index:1;appearance:none;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.trackRow__openSurface:hover{background:color-mix(in oklab,var(--text) 4%,transparent)}
.trackRow__openSurface:active{background:color-mix(in oklab,var(--brand) 10%,transparent)}
.trackRow__openSurface:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 82%,#fff);outline-offset:-3px}
.trackRow__cover,.trackRow__meta{position:relative;z-index:2;pointer-events:none}
.trackRow__cover{width:52px;height:52px;align-self:center}
.trackRow__meta{display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden}
.trackRow__title{font-size:15px;line-height:1.3;font-weight:780}
.trackRow__sub{font-size:12.5px;line-height:1.35;margin:0}
.trackRow__langs{position:relative;z-index:4;pointer-events:auto;display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.trackRow__lang{min-width:32px;height:28px;padding:0 7px;font-size:10px;border-radius:999px}
.trackRow__lang .langBadge{width:12px;height:12px}
.trackRow__right{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;margin:0}
.trackRow__playBtn{position:relative;width:44px!important;height:44px!important;border-radius:999px!important;background:transparent;border-color:transparent}
.trackRow__playBtn::before{content:"";position:absolute;width:34px;height:34px;border-radius:999px;background:color-mix(in oklab,var(--brand) 12%,var(--card2));border:1px solid color-mix(in oklab,var(--brand) 18%,var(--border));z-index:-1}
.trackRow__playBtn .svgicon{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important}
.trackRow.is-current .trackRow__playBtn::before{background:var(--brand);border-color:var(--brand)}
.trackRow.is-current .trackRow__playBtn{color:#fff}
.trackRow.is-current .trackRow__title{color:var(--brand)}

.nowMetaActions{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.nowMetaActions .contentLangRow{margin-top:8px}
.nowShareBtn{width:44px;height:44px;flex:0 0 auto}
.nowHero__controls{justify-content:center;gap:16px;margin-top:18px}
.nowHero__controls .iconbtn{width:44px;height:44px;border-color:transparent;background:transparent}
.nowHero__controls .playbtn{width:58px;height:58px}
.nowHero__controls .iconbtn .svgicon{width:22px;height:22px;min-width:22px;min-height:22px}
.nowHero__controls .playbtn .svgicon{width:28px;height:28px;min-width:28px;min-height:28px}

.nowSectionNav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.nowSectionNav__btn{appearance:none;min-height:52px;padding:7px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--border);border-radius:12px;background:var(--card2);color:var(--text);font:inherit;font-size:12px;line-height:1.15;font-weight:720;cursor:pointer}
.nowSectionNav__btn .svgicon{width:20px;height:20px;min-width:20px;min-height:20px}
.nowSectionNav__btn:hover{border-color:color-mix(in oklab,var(--brand) 45%,var(--border));background:color-mix(in oklab,var(--brand) 8%,var(--card2))}
.nowSectionNav__btn.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.nowSectionNav__btn:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 78%,#fff);outline-offset:2px}

#viewNow.is-focus{padding-top:0}
#viewNow.is-focus > .nowSuggestionsSection{display:none}
#viewNow.is-focus .nowHero{min-height:calc(100svh - var(--playerH) - var(--safeB));border:0;border-radius:0;background:var(--brand);color:#fff;overflow:visible}
#viewNow.is-focus .nowHero__art,#viewNow.is-focus .nowHero__meta,#viewNow.is-focus .nowHero__fit{display:none!important}
#viewNow.is-focus .nowHero__back{top:12px;left:12px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);z-index:20}
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{grid-column:1/-1;width:100%;min-height:calc(100svh - var(--playerH) - var(--safeB));margin:0;padding:68px clamp(16px,4vw,34px) 24px;border:0;background:var(--brand);color:#fff}

.nowFocusPanel__head{position:sticky;top:0;z-index:12;min-height:64px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:4px 0 14px;background:linear-gradient(180deg,var(--brand) 74%,color-mix(in oklab,var(--brand) 0%,transparent))}
.nowFocusPanel__eyebrow{font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.nowFocusPanel__title{margin:4px 0 0;font-size:clamp(20px,4vw,28px);line-height:1.15;font-weight:850;color:#fff}
.nowFocusPanel__close{width:44px;height:44px;flex:0 0 auto;color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.nowFocusPanel__close:focus-visible{outline:3px solid #fff;outline-offset:2px}

.nowArtworkStage{min-height:min(66svh,760px);display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.18)}
.nowArtworkStage img{display:block;width:100%;height:min(66svh,760px);object-fit:contain;object-position:center}
.nowArtworkCaption{margin:14px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}

.nowMapMount #routeMapWrap{display:block;width:100%}
.nowMapMount #routeMapWrap[hidden]{display:block!important}
#viewNow.is-map-focus #routeMapWrap .mapCard{background:#fff;color:#111827;border:0;border-radius:12px;overflow:hidden;box-shadow:0 16px 42px rgba(0,0,0,.22)}
#viewNow.is-map-focus #routeMapWrap .mapCard__head{background:#fff;color:#111827}
#viewNow.is-map-focus #routeMapWrap .muted{color:#5b6474}
#viewNow.is-map-focus #routeMapWrap .iconbtn{color:#111827;background:#f4f6f9;border-color:#d8dee8;min-width:44px;min-height:44px}
#viewNow.is-map-focus #routeMapWrap .mapFloorChip{min-height:40px;color:#111827;background:#f4f6f9;border-color:#d8dee8}
#viewNow.is-map-focus #routeMapWrap .mapList{margin-top:12px}
#viewNow.is-map-focus #routeMapWrap .mapItem{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
#viewNow.is-map-focus #routeMapWrap .mapItem__sub{color:rgba(255,255,255,.72)}

#viewNow.is-lyrics-focus .nowHero__panel{display:block!important}
#viewNow.is-lyrics-focus .nowHero__lyrics{display:block!important;max-height:calc(100svh - var(--playerH) - var(--safeB) - 84px);margin:0;padding:0;overflow-y:auto;scrollbar-color:rgba(255,255,255,.45) transparent}
#viewNow.is-lyrics-focus .lyrics__head--focus{background:linear-gradient(180deg,var(--brand) 74%,color-mix(in oklab,var(--brand) 0%,transparent))}
#viewNow.is-lyrics-focus .lyrics p.line{color:rgba(255,255,255,.38);opacity:1;font-weight:650;transition:color .16s ease,transform .16s ease,text-shadow .16s ease}
#viewNow.is-lyrics-focus .lyrics p.line .k{color:inherit;-webkit-text-fill-color:currentColor;background:none!important}
#viewNow.is-lyrics-focus .lyrics p.line.active{color:#fff!important;font-weight:850;transform:translateX(4px);text-shadow:0 0 20px rgba(255,255,255,.35),0 2px 12px rgba(0,0,0,.2)}
#viewNow.is-lyrics-focus .lyrics p.line.active .k{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
#viewNow.is-lyrics-focus .lyrics p.line.active::before{display:block;opacity:1;background:#fff}
#viewNow.is-lyrics-focus .lyrics p.para{color:#fff;opacity:.96}
#viewNow.is-lyrics-focus .lyrics__actions .btn,#viewNow.is-lyrics-focus .lyrics__close{min-width:44px;min-height:44px;color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}

@media (prefers-contrast: more){
  .trackRow{border-width:2px}
  .trackRow__openSurface:focus-visible,.nowSectionNav__btn:focus-visible{outline-color:currentColor;outline-width:4px}
  #viewNow.is-lyrics-focus .lyrics p.line{color:rgba(255,255,255,.55)}
  #viewNow.is-lyrics-focus .lyrics p.line.active{color:#fff!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
}
@media (max-width:700px){
  .trackRow{grid-template-columns:48px minmax(0,1fr) 44px;gap:8px;min-height:68px;padding:8px 6px 8px 8px}
  .trackRow__cover{width:48px;height:48px}
  .trackRow__lang{height:28px;padding:0 6px}
  .nowHero__meta{padding:14px 16px 18px!important}
  .nowHero__controls{gap:14px}
  .nowHero__controls .iconbtn{width:44px;height:44px}
  .nowHero__controls .playbtn{width:56px;height:56px}
  .nowSectionNav{gap:6px;margin-top:14px}
  .nowSectionNav__btn{min-height:54px;border-radius:10px;font-size:11.5px}
  #viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{padding:64px 14px 18px}
  .nowArtworkStage,.nowArtworkStage img{height:calc(100svh - var(--playerH) - 176px);min-height:320px}
  #viewNow.is-lyrics-focus .lyrics p.line{font-size:clamp(20px,5.8vw,26px)!important;line-height:1.3;padding:10px 3px}
}
@media (max-width:390px){
  .trackRow__langCode{display:none}
  .trackRow__lang{min-width:28px;padding:0 5px}
  .nowSectionNav__btn{font-size:11px}
  .nowSectionNav__btn .svgicon{width:19px;height:19px;min-width:19px;min-height:19px}
}
@media (prefers-reduced-motion: reduce){
  .trackRow__openSurface,.nowSectionNav__btn,#viewNow.is-lyrics-focus .lyrics p.line{transition:none!important}
  #viewNow.is-lyrics-focus .lyrics p.line.active{transform:none}
}
/* Los accesos visibles siempre reparten el ancho disponible. */
.nowSectionNav{display:flex}
.nowSectionNav__btn{flex:1 1 0;min-width:0}

#viewNow.is-focus .nowHero__back{display:none!important}


/* =========================================================
   AUDIO RELATOS · navegación tipo Spotify v08
   Inicio permanece intacto. Recorrido = playlist.
   Mini-player abre el reproductor expandido.
   ========================================================= */
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.has-modal-sheet{overflow:hidden}

/* Playlist / recorrido */
#viewRoute .routeHero{max-width:920px;margin:0 auto;border:0;border-radius:0;padding:0 0 18px;background:transparent!important;box-shadow:none;overflow:visible;display:block}
#viewRoute .routeHero__art{width:min(72vw,320px);height:auto;aspect-ratio:1;margin:12px auto 22px;border-radius:4px;box-shadow:0 18px 48px rgba(0,0,0,.24)}
#viewRoute .routeHero__art::after{display:none}
#viewRoute .routeHero__art img{object-position:center;object-fit:cover;border-radius:4px}
#viewRoute .routeHero__meta{padding:0 4px}
#viewRoute .routeHero__kicker{font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--muted2)}
#viewRoute .routeHero__title{font-size:clamp(28px,7vw,48px);line-height:1.04;letter-spacing:-.035em;font-weight:900;margin:7px 0 0}
#viewRoute .routeHero__desc{max-width:66ch;margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
#viewRoute .routeHero__ages{font-size:12px;margin-top:10px;color:var(--muted2)}
#viewRoute .routeHero__fit{display:none}
#viewRoute .contentLangRow{display:none!important}
.playlistActions{display:flex!important;align-items:center;justify-content:space-between;gap:18px;margin-top:16px!important;flex-wrap:nowrap!important}
.playlistActions__secondary,.playlistActions__primary{display:flex;align-items:center;gap:10px}
.playlistIconAction,.playlistShuffle,.playlistPlay{appearance:none;border:0;background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;min-width:44px;min-height:44px;border-radius:999px}
.playlistIconAction{color:var(--muted);border:1px solid transparent}
.playlistIconAction .svgicon{width:22px;height:22px;min-width:22px;min-height:22px}
.playlistShuffle{color:var(--brand)}
.playlistShuffle .svgicon{width:24px;height:24px;min-width:24px;min-height:24px}
.playlistPlay{width:58px;height:58px;min-width:58px;min-height:58px;background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(46,66,255,.28)}
.playlistPlay .svgicon{width:28px;height:28px;min-width:28px;min-height:28px}
.playlistIconAction:focus-visible,.playlistShuffle:focus-visible,.playlistPlay:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 70%,#fff);outline-offset:3px}
#viewRoute .section{max-width:920px;margin:0 auto;padding:0}
#viewRoute .panelHead{margin:0 0 8px;padding:0 4px}
#viewRoute .panelHead__kicker{display:none}
#viewRoute .panelHead__title{font-size:20px;font-weight:850;letter-spacing:-.02em}
#viewRoute .panelHead__tools,#viewRoute .routeTabs{display:none!important}
#viewRoute #routeMapWrap{display:none}

/* Lista de audios de playlist */
.trackList{gap:0}
.trackRow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px;align-items:center;min-height:68px;padding:5px 0;border:0;border-radius:8px;background:transparent;box-shadow:none}
.trackRow__main{position:relative;appearance:none;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;text-align:left;min-width:0;padding:4px;border-radius:8px;cursor:pointer}
.trackRow__main:hover{background:color-mix(in oklab,var(--text) 5%,transparent)}
.trackRow__main:active{background:color-mix(in oklab,var(--text) 8%,transparent)}
.trackRow__main:focus-visible,.trackRow__moreBtn:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 76%,#fff);outline-offset:1px}
.trackRow__cover{position:relative;z-index:auto;pointer-events:none;width:52px;height:52px;border-radius:4px;overflow:hidden;background:var(--card2)}
.trackRow__cover img{width:100%;height:100%;object-fit:cover}
.trackRow__meta{position:relative;z-index:auto;pointer-events:none;display:block;min-width:0;overflow:hidden}
.trackRow__title{display:block;font-size:15px;line-height:1.3;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trackRow__sub{display:block;font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.trackRow__moreBtn{position:relative;z-index:auto;width:44px;height:44px;border:0;background:transparent;color:var(--muted)}
.trackRow__moreBtn .svgicon{width:23px;height:23px;min-width:23px;min-height:23px}
.trackRow.is-current .trackRow__title{color:var(--brand)}
.trackRow.is-current .trackRow__main::after{content:"";position:absolute;left:0;width:3px;height:36px;border-radius:999px;background:var(--brand)}
.trackRow.is-current{background:color-mix(in oklab,var(--brand) 5%,transparent)}

/* Mini-player: banner abre; solo play/pausa visible */
.player{height:72px;padding:7px 9px;border:0;background:color-mix(in oklab,var(--brand) 14%,var(--glass2));box-shadow:0 -1px 0 var(--border)}
.player__row{gap:8px}
.player .now{cursor:pointer;border-radius:8px;padding:2px;min-width:0}
.player .now:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 78%,#fff);outline-offset:1px}
.now__cover{width:54px;height:54px;border-radius:5px}
.now__title{font-size:14px;line-height:1.25;font-weight:760}
.now__artist{font-size:12px;line-height:1.25;max-height:1.25em;white-space:nowrap}
.player .progress{display:none}
.player .controls{gap:0}
.player .controls #prev,.player .controls #next,.player .controls #miniOpen,.player .controls #miniLyrics,.player .controls #miniMap{display:none!important}
.player .controls #play{width:46px;height:46px;background:transparent;color:var(--text);box-shadow:none}
.player .controls #play .svgicon{width:26px;height:26px;min-width:26px;min-height:26px}

/* Reproductor expandido */
.app.is-now .topbar,.app.is-now .player,.app.is-now .bottomnav{display:none!important}
.view[data-view="now"].is-active{position:fixed;inset:0;z-index:80;padding:0;bottom:0;background:#0b1025;overflow-y:auto;color:#fff}
.view[data-view="now"].is-active::before{display:none}
.nowPlayerBackdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b1025}
.nowPlayerBackdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,28,.25),rgba(6,10,28,.82) 56%,#080b18 100%)}
.nowPlayerBackdrop img{width:100%;height:100%;object-fit:cover;filter:blur(32px) saturate(.95);transform:scale(1.16);opacity:.72}
#viewNow .nowHero{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100svh;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) clamp(18px,5vw,44px) calc(28px + env(safe-area-inset-bottom));max-width:760px;border:0;border-radius:0;background:transparent!important;box-shadow:none;overflow:visible}
#viewNow .nowHero__back{position:relative;top:auto;left:auto;align-self:center;width:44px;height:34px;border:0;background:transparent;color:#fff;transform:rotate(-90deg);margin-bottom:10px}
#viewNow .nowHero__back .svgicon{width:25px;height:25px}
#viewNow .nowHero__fit{display:none}
#viewNow .nowHero__art{width:min(78vw,420px);height:auto;aspect-ratio:1;margin:2vh auto 24px;flex:0 0 auto;border-radius:7px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.38)}
#viewNow .nowHero__art img{width:100%;height:100%;object-fit:cover;border:0;border-radius:7px}
#viewNow .nowHero__meta{width:100%;padding:0;background:transparent;color:#fff}
#viewNow .nowHero__kicker{font-size:11px;line-height:1.3;font-weight:750;letter-spacing:.05em;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#viewNow .nowHero__title{font-size:clamp(20px,5vw,28px);line-height:1.16;font-weight:850;letter-spacing:-.02em;margin-top:6px}
#viewNow .nowHero__sub{font-size:14px;line-height:1.4;color:rgba(255,255,255,.72);margin-top:5px}
#viewNow .nowMetaActions{position:absolute;right:clamp(18px,5vw,44px);top:calc(48px + env(safe-area-inset-top));margin:0}
#viewNow .nowMetaActions .contentLangRow{display:none!important}
#viewNow .nowShareBtn{width:44px;height:44px;border:0;background:rgba(255,255,255,.10);color:#fff}
#viewNow .nowProgress{order:4;margin-top:22px}
#viewNow .range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#fff 0%,#fff var(--p),rgba(255,255,255,.28) var(--p),rgba(255,255,255,.28) 100%)}
#viewNow .range::-moz-range-track{background:rgba(255,255,255,.28)}
#viewNow .range::-moz-range-progress{background:#fff}
#viewNow .nowProgress__times{color:rgba(255,255,255,.62);font-size:11px}
#viewNow .nowHero__controls{order:5;justify-content:space-between;width:min(82%,360px);margin:8px auto 0;gap:18px}
#viewNow .nowHero__controls .iconbtn{width:48px;height:48px;border:0;background:transparent;color:#fff}
#viewNow .nowHero__controls .playbtn{width:68px;height:68px;background:#fff;color:#090d1d;box-shadow:0 12px 30px rgba(0,0,0,.25)}
#viewNow .nowHero__controls .playbtn .svgicon{width:31px;height:31px;min-width:31px;min-height:31px}
#viewNow .nowSectionNav{order:6;display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;margin-top:26px}
#viewNow .nowSectionNav__btn{min-height:52px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;border-radius:9px;font-size:11.5px;font-weight:720;padding:7px}
#viewNow .nowSectionNav__btn .svgicon{width:19px;height:19px;min-width:19px;min-height:19px}
#viewNow .nowSectionNav__btn.is-active{background:#fff;color:#0b1025;border-color:#fff}
#viewNow .nowSuggestionsSection{display:none!important}

/* Texto y mapa se despliegan como sheets sobre el reproductor */
#viewNow.is-focus .nowHero{min-height:100svh;background:transparent!important;color:#fff}
#viewNow.is-focus .nowHero__art,#viewNow.is-focus .nowHero__meta,#viewNow.is-focus .nowHero__fit{display:block!important}
#viewNow.is-focus .nowHero__back{display:flex!important}
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{position:fixed;left:0;right:0;bottom:0;z-index:100;width:100%;min-height:0;max-height:min(78svh,760px);margin:0;padding:18px clamp(16px,4vw,30px) calc(24px + env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.16);border-bottom:0;border-radius:22px 22px 0 0;background:#162a8c;color:#fff;box-shadow:0 -24px 60px rgba(0,0,0,.38);overflow-y:auto;animation:trackSheetUp .24s ease both}
#viewNow.is-focus .nowHero__panel::before,#viewNow.is-focus .nowFocusPanel::before{content:"";display:block;width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.45);margin:0 auto 14px}
#viewNow.is-lyrics-focus .nowHero__lyrics{display:block!important;max-height:none;margin:0;padding:0;overflow:visible}
#viewNow.is-lyrics-focus .lyrics__head--focus,#viewNow .nowFocusPanel__head{position:sticky;top:-18px;background:linear-gradient(180deg,#162a8c 78%,rgba(22,42,140,0));padding:0 0 12px;z-index:4}
#viewNow.is-lyrics-focus .lyrics p.line{font-size:clamp(20px,5.4vw,27px)!important;line-height:1.32;padding:10px 2px;color:rgba(255,255,255,.42);font-weight:650}
#viewNow.is-lyrics-focus .lyrics p.line.active,#viewNow.is-lyrics-focus .lyrics p.line.active .k{color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:880;text-shadow:0 0 22px rgba(255,255,255,.30)}
#viewNow.is-map-focus #routeMapWrap .mapCard{border-radius:13px;background:#fff;color:#101425}
#viewNow.is-art-focus .nowFocusPanel{max-height:88svh}

/* Track options bottom sheet */
.trackActionSheet{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center}
.trackActionSheet[hidden]{display:none!important}
.trackActionSheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.52);opacity:0;transition:opacity .22s ease}
.trackActionSheet__panel{position:relative;width:min(100%,640px);max-height:min(86svh,760px);overflow-y:auto;border-radius:22px 22px 0 0;background:var(--menusheetBg);color:var(--text);box-shadow:0 -24px 70px rgba(0,0,0,.35);padding:10px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .24s cubic-bezier(.22,.8,.28,1)}
.trackActionSheet.is-open .trackActionSheet__backdrop{opacity:1}
.trackActionSheet.is-open .trackActionSheet__panel{transform:translateY(0)}
.trackActionSheet__handle{width:38px;height:4px;border-radius:99px;background:color-mix(in oklab,var(--muted) 45%,transparent);margin:1px auto 12px}
.trackActionSheet__track{display:grid;grid-template-columns:58px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:4px 2px 14px;border-bottom:1px solid var(--border)}
.trackActionSheet__cover{width:58px;height:58px;border-radius:5px;object-fit:cover;background:var(--card2)}
.trackActionSheet__meta{min-width:0}
.trackActionSheet__title{font-size:16px;line-height:1.25;font-weight:820;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trackActionSheet__artist{font-size:13px;line-height:1.35;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trackActionSheet__actions{padding:8px 0 0}
.trackSheetAction{appearance:none;width:100%;min-height:54px;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:10px;align-items:center;text-align:left;padding:7px 4px;border-radius:10px;font-size:15px;font-weight:650;cursor:pointer}
.trackSheetAction:hover{background:color-mix(in oklab,var(--text) 6%,transparent)}
.trackSheetAction__icon{display:flex;align-items:center;justify-content:center}
.trackSheetAction__icon .svgicon{width:23px;height:23px;min-width:23px;min-height:23px}
.trackSheetAction__chevron{width:19px;height:19px;transform:rotate(180deg);color:var(--muted)}
.trackSheetAction.is-active .trackSheetAction__icon{color:var(--brand)}
.trackActionSheet__subhead{display:flex;align-items:center;gap:8px;padding:0 0 14px;border-bottom:1px solid var(--border)}
.trackActionSheet__eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2)}
.trackActionSheet__subTitle{font-size:19px;line-height:1.2;font-weight:850;margin-top:2px}
.trackActionSheet__languageList{padding:10px 0}
.trackSheetLanguage{appearance:none;width:100%;min-height:54px;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:8px;border-radius:10px;font-size:15px;cursor:pointer}
.trackSheetLanguage:hover,.trackSheetLanguage.is-active{background:color-mix(in oklab,var(--brand) 9%,transparent)}
.trackSheetLanguage__current{font-size:12px;color:var(--brand);font-weight:760}
.trackActionSheet__artistBody{font-size:15px;line-height:1.55;color:var(--muted);padding:16px 4px 4px}
.trackActionSheet__artistBody .btn{margin-top:12px}
@keyframes trackSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media(min-width:700px){
  #viewRoute .routeHero{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:end;padding-top:24px}
  #viewRoute .routeHero__art{grid-column:1;width:260px;margin:0;align-self:end}
  #viewRoute .routeHero__meta{grid-column:2;padding:0 0 4px}
  #viewRoute .routeHero__back{top:16px;left:16px}
  #viewNow .nowHero__art{width:min(48vw,420px)}
}
@media(max-width:480px){
  #viewRoute .routeHero__art{width:min(78vw,292px)}
  #viewRoute .routeHero__title{font-size:32px}
  .playlistPlay{width:56px;height:56px;min-width:56px;min-height:56px}
  .trackRow__main{grid-template-columns:50px minmax(0,1fr);gap:10px}
  .trackRow__cover{width:50px;height:50px}
  #viewNow .nowHero{padding-left:16px;padding-right:16px}
  #viewNow .nowMetaActions{right:16px}
  #viewNow .nowHero__art{width:min(82vw,360px);margin-top:1vh}
  #viewNow .nowSectionNav{grid-template-columns:1.25fr 1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .trackActionSheet__panel,.trackActionSheet__backdrop,#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{transition:none!important;animation:none!important}
}

/* Correcciones de composición v08 */
.view[data-view="now"].is-active > .nowPlayerBackdrop{position:fixed!important;inset:0!important;z-index:0!important;padding:0!important;margin:0!important}
.view[data-view="now"].is-active > .nowHero{position:relative!important;z-index:1!important}
#viewRoute .panelHead__title{color:var(--text)!important}

#viewNow.is-focus .nowHero__fit{display:none!important}

/* =========================================================
   AUDIO RELATOS · refinamiento sobre base v09
   Controles consistentes, hero rotatorio y bottom sheets gestuales.
   ========================================================= */
:root{
  --audioProgress:color-mix(in oklab,var(--brand) 78%,#fff 22%);
}

/* Portada principal: transición visible entre imágenes reales. */
.homeWelcome__media{overflow:hidden;background:var(--card2)}
.homeWelcome__media img{
  transition:opacity .34s ease,transform .7s cubic-bezier(.22,.8,.28,1),filter .34s ease;
  opacity:1;
  transform:scale(1);
  will-change:opacity,transform;
}
.homeWelcome__media img.is-changing{opacity:.16;transform:scale(1.025);filter:saturate(.82)}

/* Fila de pista: el play/pausa es visible y conserva los tres puntos. */
.trackRow{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  min-height:72px;
  padding:8px 8px 8px 10px!important;
}
.trackRow__main{
  appearance:none;
  min-width:0;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.trackRow__main:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 75%,#fff);outline-offset:2px;border-radius:10px}
.trackRow__cover,.trackRow__meta{pointer-events:none}
.trackRow__actions{display:flex;align-items:center;gap:2px;position:relative;z-index:4}
.trackRow__playBtn{
  appearance:none;
  width:42px;
  height:42px;
  min-width:42px;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab,var(--brand) 11%,var(--card2));
  color:var(--brand);
  cursor:pointer;
}
.trackRow__playBtn .svgicon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important}
.trackRow.is-current .trackRow__playBtn{background:var(--brand);color:#fff;box-shadow:0 7px 18px color-mix(in oklab,var(--brand) 30%,transparent)}
.trackRow__playBtn:focus-visible,.trackRow__moreBtn:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 72%,#fff);outline-offset:2px}
.trackRow__moreBtn{width:40px!important;height:40px!important;border:0!important;background:transparent!important}
.trackRow__moreBtn .svgicon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important}

/* Jerarquía de controles: mismo peso visual y áreas táctiles estables. */
.playlistPlay{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important}
.playlistPlay .svgicon{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important}
.playlistShuffle{width:48px;height:48px;min-width:48px;min-height:48px}
.playlistShuffle .svgicon{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
.playlistIconAction{width:42px;height:42px;min-width:42px;min-height:42px}
.playlistIconAction .svgicon{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important}

#viewNow .nowHero__controls{width:min(86%,380px);gap:20px}
#viewNow .nowHero__controls .iconbtn{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}
#viewNow .nowHero__controls .iconbtn .svgicon{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
#viewNow .nowHero__controls .playbtn{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important}
#viewNow .nowHero__controls .playbtn .svgicon{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
.player .controls>.iconbtn{width:44px;height:44px;min-width:44px;min-height:44px}
.player .controls>.iconbtn .svgicon{width:23px;height:23px;min-width:23px;min-height:23px}
.player .controls>.playbtn{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important}
.player .controls>.playbtn .svgicon{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}

/* Compartir se integra bajo el título con la jerarquía de playlistIconAction. */
#viewNow .nowTitleActions{display:flex;align-items:center;min-height:38px;margin-top:6px}
#viewNow .nowMetaActions{position:static!important;margin:0!important;min-height:0}
#viewNow .nowMetaActions:empty{display:none}
#viewNow .nowShareBtn{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0;
  border:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.82)!important;
  box-shadow:none!important;
}
#viewNow .nowShareBtn .svgicon{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important}
#viewNow .nowShareBtn:hover{color:#fff!important;background:rgba(255,255,255,.10)!important}

/* Progreso de audio en azul destacado, incluido el cursor. */
.range::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--audioProgress) 0%,var(--audioProgress) var(--p),color-mix(in oklab,var(--text) 18%,transparent) var(--p),color-mix(in oklab,var(--text) 18%,transparent) 100%)!important;
}
.range::-webkit-slider-thumb{background:var(--audioProgress)!important;border:2px solid #fff!important;box-shadow:0 3px 12px color-mix(in oklab,var(--brand) 45%,transparent)!important}
.range::-moz-range-track{background:color-mix(in oklab,var(--text) 18%,transparent)!important}
.range::-moz-range-progress{background:var(--audioProgress)!important}
.range::-moz-range-thumb{background:var(--audioProgress)!important;border:2px solid #fff!important;box-shadow:0 3px 12px color-mix(in oklab,var(--brand) 45%,transparent)!important}
#viewNow .range::-webkit-slider-runnable-track,
footer.player:not(.is-hidden):not(.is-empty) .range::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--audioProgress) 0%,var(--audioProgress) var(--p),rgba(255,255,255,.28) var(--p),rgba(255,255,255,.28) 100%)!important;
}
#viewNow .range::-moz-range-track,footer.player:not(.is-hidden):not(.is-empty) .range::-moz-range-track{background:rgba(255,255,255,.28)!important}
#viewNow .range::-moz-range-progress,footer.player:not(.is-hidden):not(.is-empty) .range::-moz-range-progress{background:var(--audioProgress)!important}

/* Bottom sheets: nacen desde el borde inferior, cubren footer y pueden expandirse. */
body.has-now-sheet,body.has-modal-sheet{overflow:hidden;overscroll-behavior:none}
.nowSheetHandle{
  width:46px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  margin:0 auto 12px;
  touch-action:none;
  cursor:ns-resize;
}
#viewNow.is-focus .nowHero__panel,
#viewNow.is-focus .nowFocusPanel{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--sheet-top-px,22svh)!important;
  bottom:0!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  z-index:180!important;
  margin:0!important;
  padding:10px clamp(16px,4vw,30px) calc(24px + env(safe-area-inset-bottom))!important;
  border-radius:22px 22px 0 0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  transform:none!important;
  transition:top .24s cubic-bezier(.22,.8,.28,1),box-shadow .24s ease!important;
  animation:bottomSheetRise .26s cubic-bezier(.22,.8,.28,1) both!important;
  box-shadow:0 -24px 70px rgba(0,0,0,.44)!important;
}
#viewNow.is-focus .nowHero__panel::before,#viewNow.is-focus .nowFocusPanel::before{display:none!important}
#viewNow.is-focus .nowHero__panel.is-dragging,#viewNow.is-focus .nowFocusPanel.is-dragging{transition:none!important;user-select:none}
#viewNow.is-focus .nowHero__panel.is-dismissing,#viewNow.is-focus .nowFocusPanel.is-dismissing{transition:top .22s ease-in!important}
#viewNow.is-lyrics-focus .nowHero__lyrics{min-height:100%;max-height:none!important;overflow:visible!important}
#viewNow.is-lyrics-focus .lyrics__head--focus,#viewNow .nowFocusPanel__head{
  top:-10px!important;
  padding-top:4px!important;
  touch-action:none;
}

.trackActionSheet{z-index:190!important}
.trackActionSheet__panel{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:var(--sheet-top-px,22svh)!important;
  bottom:0!important;
  width:min(100%,640px)!important;
  height:auto!important;
  max-height:none!important;
  transform:translate(-50%,110%)!important;
  transition:transform .24s cubic-bezier(.22,.8,.28,1),top .24s cubic-bezier(.22,.8,.28,1)!important;
  touch-action:pan-y;
}
.trackActionSheet.is-open .trackActionSheet__panel{transform:translate(-50%,0)!important}
.trackActionSheet__panel.is-dragging{transition:none!important;user-select:none}
.trackActionSheet__handle{width:46px;height:5px;touch-action:none;cursor:ns-resize}

@keyframes bottomSheetRise{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media(max-width:700px){
  .trackRow__main{grid-template-columns:48px minmax(0,1fr);gap:9px}
  .trackRow__cover{width:48px!important;height:48px!important}
  .trackRow__playBtn{width:40px;height:40px;min-width:40px}
  .trackRow__moreBtn{width:38px!important;height:38px!important}
  #viewNow .nowHero__controls{width:min(92%,360px);gap:14px}
  #viewNow .nowHero__controls .iconbtn{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  #viewNow .nowHero__controls .playbtn{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important}
  .player .controls>.iconbtn{width:40px;height:40px;min-width:40px;min-height:40px}
  .player .controls>.playbtn{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
}
@media(max-width:420px){
  .trackRow__actions{gap:0}
  .trackRow__playBtn{width:38px;height:38px;min-width:38px}
  .trackRow__moreBtn{width:36px!important;height:36px!important}
  .player .controls>#prev,.player .controls>#next{display:none}
  #viewNow .nowHero__controls .iconbtn{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  #viewNow .nowHero__controls .playbtn{width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important}
}
@media(prefers-reduced-motion:reduce){
  .homeWelcome__media img,#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel,.trackActionSheet__panel{transition:none!important;animation:none!important}
}

/* =========================================================
   Base v09 · revisión r2
   Filas sin play individual, campos opcionales y paneles superiores.
   ========================================================= */
.trackRow{grid-template-columns:minmax(0,1fr) 44px!important;gap:4px!important;min-height:68px;padding:5px 0!important}
.trackRow__actions{display:flex;align-items:center;justify-content:flex-end;gap:0}
.trackRow__playBtn{display:none!important}
.trackRow__moreBtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
#viewNow .nowSectionNav{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
#viewNow .nowSectionNav__btn{min-width:0;padding-inline:4px!important}
#viewNow .nowSectionNav__btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#viewNow.is-focus{z-index:1000!important}
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{z-index:1050!important;isolation:isolate}
.trackActionSheet{z-index:1200!important}
.modal{z-index:1300!important}
.menusheet{z-index:1250!important}
.nowMapMount{width:100%;min-height:calc(100svh - var(--sheet-top-px,22svh) - 112px);display:flex;align-items:center;justify-content:center;padding:8px 0 20px}
.nowMapMount #routeMapWrap{width:min(100%,980px)!important;margin:auto!important}
#viewNow.is-map-focus #routeMapWrap .mapCard{width:100%;margin:auto}
.nowArtworkViewer{display:flex;flex-direction:column;gap:10px;min-height:0}
.nowArtworkTools{position:sticky;top:62px;z-index:8;align-self:center;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(7,13,42,.64);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nowArtworkTools .iconbtn{width:42px;height:42px;min-width:42px;min-height:42px;border:0;color:#fff;background:rgba(255,255,255,.10)}
.nowArtworkTools .svgicon{width:22px;height:22px;min-width:22px;min-height:22px}
.nowArtworkStage{position:relative;width:100%;min-height:min(64svh,720px)!important;height:min(64svh,720px)!important;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;background:rgba(0,0,0,.28);touch-action:none;cursor:zoom-in;outline:none}
.nowArtworkStage.is-zoomed{cursor:grab}.nowArtworkStage.is-zoomed:active{cursor:grabbing}
.nowArtworkStage:focus-visible{outline:3px solid #fff;outline-offset:3px}
.nowArtworkStage img{width:100%!important;height:100%!important;max-width:none;object-fit:contain!important;object-position:center;user-select:none;-webkit-user-drag:none;transform-origin:center center;transition:transform .18s ease;will-change:transform}
.nowArtworkStage.is-zoomed img{transition:none}
.nowArtworkCaption[hidden],.nowHero__sub[hidden],.now__artist[hidden],.trackActionSheet__artist[hidden],.routeHero__ages[hidden],.routeHero__desc[hidden]{display:none!important}
@media(max-width:520px){#viewNow .nowSectionNav{gap:5px!important}#viewNow .nowSectionNav__btn{font-size:10.5px!important;min-height:54px!important}#viewNow .nowSectionNav__btn .svgicon{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important}.nowArtworkStage{height:58svh!important;min-height:360px!important}.nowArtworkTools{top:58px}}
@media(prefers-reduced-motion:reduce){.nowArtworkStage img{transition:none!important}}
/* Los accesos visibles se redistribuyen sin dejar columnas vacías. */
#viewNow .nowSectionNav{display:flex!important;grid-template-columns:none!important}
#viewNow .nowSectionNav__btn{flex:1 1 0}

/* =========================================================
   Base v09 · revisión r7
   Panels full-screen, navegación fija, explorar y home refinados.
   ========================================================= */
:root{
  --navH:56px;
  --sheetBg:#111318;
  --sheetText:#ffffff;
  --sheetMuted:rgba(255,255,255,.66);
  --sheetBorder:rgba(255,255,255,.12);
  --sheetHandle:rgba(255,255,255,.48);
}
body[data-theme="light"]{
  --sheetBg:#eef0f3;
  --sheetText:#11141b;
  --sheetMuted:rgba(17,20,27,.64);
  --sheetBorder:rgba(17,20,27,.12);
  --sheetHandle:rgba(17,20,27,.32);
}

/* El logo funciona como acceso permanente a Inicio. */
.brand[role="button"]{cursor:pointer;border-radius:8px;outline:none}
.brand[role="button"]:focus-visible{outline:3px solid var(--brand);outline-offset:4px}

/* Barra inferior realmente fija, más baja y con iconos discretos. */
.bottomnav{
  position:fixed!important;
  inset:auto 0 0 0!important;
  width:100vw!important;
  height:calc(56px + env(safe-area-inset-bottom))!important;
  padding:4px 6px calc(6px + env(safe-area-inset-bottom))!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:2px!important;
  z-index:900!important;
  transform:translate3d(0,0,0);
}
.bottomnav__item{gap:1px!important;padding:2px 0!important;min-height:48px}
.bottomnav__icon .svgicon{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}
.bottomnav__label{font-size:10.5px!important;line-height:1!important;margin:0!important;padding:0!important}

/* HOME: imagen a pantalla completa y fundida con el contenido siguiente. */
#viewHome .homeWelcome{
  min-height:calc(100svh - 58px)!important;
  margin:-8px -14px 0!important;
  padding:clamp(96px,18svh,170px) 18px clamp(48px,10svh,90px)!important;
  border-radius:0!important;
  display:flex!important;
  align-items:flex-end!important;
  background:var(--bg)!important;
  overflow:hidden!important;
}
.homeWelcome__media{position:absolute!important;inset:0!important;background:var(--bg)!important}
.homeWelcome__media img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
.homeWelcome__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.78) 82%,var(--bg) 100%),
    linear-gradient(90deg,rgba(0,0,0,.36),transparent 64%);
  pointer-events:none;
}
.homeWelcome__copy{position:relative!important;z-index:3!important;width:min(760px,100%)!important;margin:0!important}
.homeWelcome__loader{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .18s ease;background:rgba(0,0,0,.16);pointer-events:none;
}
.homeWelcome__media.is-loading .homeWelcome__loader{opacity:1;visibility:visible}
.homeWelcome__loader span{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.34);border-top-color:#fff;animation:spin .8s linear infinite}
.section--exhibitions{margin-top:0!important;padding-top:24px;position:relative;z-index:2;background:var(--appBg)}

/* Exhibition cards: alto uniforme, foto cubriendo el área y 3 líneas reservadas. */
.exhibitionRail{align-items:stretch}
.exhibitionCard{display:flex!important;flex-direction:column!important;height:100%!important;min-height:360px}
.exhibitionCard__cover{height:clamp(190px,28vw,260px)!important;aspect-ratio:auto!important;flex:0 0 auto}
.exhibitionCard__cover img{width:100%!important;height:100%!important;object-fit:cover!important}
.exhibitionCard__body{display:flex!important;flex-direction:column!important;flex:1!important}
.exhibitionCard__title{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;
  overflow:hidden!important;min-height:calc(1.12em * 3)!important;
}
.exhibitionCard__desc{margin-top:auto!important;padding-top:10px}

/* Explorar: etiquetas en un rail horizontal táctil; se elimina la edad. */
#ageChips{display:none!important}
#searchTopicsGrid.topicsGrid{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  gap:8px!important;overflow-x:auto!important;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding:4px 2px 10px!important;margin:4px -2px 10px!important;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;
}
#searchTopicsGrid::-webkit-scrollbar{display:none}
#searchTopicsGrid .topicCard{flex:0 0 auto!important;scroll-snap-align:start;white-space:nowrap;min-height:40px!important}
#searchTopicsGrid .topicCard__meta{display:none!important}
.exploreRail--routes .routeCard{min-width:min(72vw,270px)}
.exploreBlocks{gap:26px!important}

/* Hero: conserva siempre la imagen anterior hasta que la siguiente esté
   precargada, muestra loader y mantiene la caja sin saltos de layout. */
#viewHome .homeWelcome{
  min-height:calc(100svh - 56px)!important;
  height:auto!important;
  contain:layout paint;
}
.homeWelcome__media{
  min-height:100%!important;
  background:#0b1025!important;
}
.homeWelcome__media img{
  opacity:1!important;
  transform:scale(1)!important;
  transition:opacity .32s ease,transform .7s ease!important;
  will-change:opacity,transform;
}
.homeWelcome__media img.is-changing{
  opacity:.82!important;
  transform:scale(1.012)!important;
  filter:saturate(.94) contrast(1.02)!important;
}
.homeWelcome__loader{
  background:rgba(7,11,28,.22)!important;
  backdrop-filter:blur(2px);
}
.homeWelcome__media.is-loading .homeWelcome__loader{opacity:1!important;visibility:visible!important}
.homeWelcome__copy{
  align-self:flex-end!important;
  transform:translateY(-clamp(18px,4svh,42px));
}

@media(max-width:700px){
  #viewHome .homeWelcome{
    min-height:calc(100svh - 56px)!important;
    padding:clamp(76px,12svh,104px) 16px calc(116px + env(safe-area-inset-bottom))!important;
    align-items:flex-end!important;
  }
  .homeWelcome__copy{transform:none!important}
  .homeWelcome__title{
    font-size:clamp(28px,8.2vw,39px)!important;
    line-height:1.02!important;
    max-width:15ch!important;
  }
  .homeWelcome__text{
    margin-top:12px!important;
    font-size:14.5px!important;
    line-height:1.42!important;
    max-width:34ch!important;
  }
  .homeWelcome__actions{margin-top:16px!important;gap:8px!important}
  .homeWelcome .btn{min-height:44px!important;padding-inline:14px!important}
}
@media(max-width:390px), (max-height:680px){
  #viewHome .homeWelcome{
    padding-top:72px!important;
    padding-bottom:calc(94px + env(safe-area-inset-bottom))!important;
  }
  .homeWelcome__eyebrow{font-size:11px!important}
  .homeWelcome__title{font-size:clamp(25px,7.6vw,33px)!important;margin-top:7px!important}
  .homeWelcome__text{font-size:13.5px!important;margin-top:9px!important;line-height:1.35!important}
  .homeWelcome__actions{margin-top:12px!important}
  .homeWelcome .btn{min-height:42px!important;font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){
  footer.player,#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel,
  .trackActionSheet__panel,.homeWelcome__media img{
    animation:none!important;
    transition:none!important;
  }
}

/* =========================================================
   AUDIO RELATOS · base v09 r9
   Hero móvil visible + idioma global/audio + hojas al 80%.
   ========================================================= */

/* El slide del inicio ocupa aproximadamente 2/3–3/4 de la pantalla móvil.
   El texto queda anclado dentro del primer encuadre, sin reservas excesivas
   para el footer que puedan desplazar los botones fuera de pantalla. */
@media (max-width:700px){
  #viewHome .homeWelcome{
    box-sizing:border-box!important;
    height:clamp(500px,72svh,680px)!important;
    min-height:66svh!important;
    max-height:calc(100svh - 76px)!important;
    padding:clamp(58px,8svh,82px) 16px clamp(22px,4svh,38px)!important;
    align-items:flex-end!important;
  }
  #viewHome .homeWelcome__copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    width:min(100%,620px)!important;
    max-height:calc(100% - 28px)!important;
    transform:none!important;
  }
  #viewHome .homeWelcome__eyebrow{flex:0 0 auto}
  #viewHome .homeWelcome__title{
    flex:0 0 auto;
    margin-top:7px!important;
    font-size:clamp(25px,7.4vw,37px)!important;
    line-height:1.03!important;
    max-width:16ch!important;
  }
  #viewHome .homeWelcome__text{
    flex:0 0 auto;
    margin-top:10px!important;
    font-size:clamp(13px,3.7vw,15px)!important;
    line-height:1.38!important;
    max-width:36ch!important;
  }
  #viewHome .homeWelcome__actions{
    flex:0 0 auto;
    margin-top:13px!important;
    gap:8px!important;
  }
  #viewHome .homeWelcome .btn{
    min-height:42px!important;
    padding-inline:13px!important;
    font-size:13px!important;
  }
}
@media (max-width:390px), (max-height:680px){
  #viewHome .homeWelcome{
    height:clamp(455px,74svh,560px)!important;
    min-height:68svh!important;
    max-height:calc(100svh - 64px)!important;
    padding:54px 14px 20px!important;
  }
  #viewHome .homeWelcome__title{
    font-size:clamp(23px,7.1vw,31px)!important;
    max-width:17ch!important;
  }
  #viewHome .homeWelcome__text{
    font-size:12.75px!important;
    line-height:1.34!important;
    margin-top:8px!important;
  }
  #viewHome .homeWelcome__actions{margin-top:10px!important}
  #viewHome .homeWelcome .btn{min-height:40px!important;padding-inline:11px!important;font-size:12.5px!important}
}

/* =========================================================
   AUDIO RELATOS · base v09 r12
   Paneles accesibles, navegación unificada y CSS consolidado.
   ========================================================= */
:root{
  --focusPanelBg:rgba(8,13,25,.72);
  --focusPanelText:#fff;
  --focusPanelMuted:rgba(255,255,255,.70);
  --focusPanelBorder:rgba(255,255,255,.15);
  --focusPanelHandle:rgba(255,255,255,.58);
  --panelControl:42px;
}

/* Selector de idioma de cabecera: despliegue horizontal hacia la izquierda,
   sin modificar la altura de la barra superior. */
.topbar__actions{align-items:center!important}
.topbar__menuStack{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px}
#btnTopLangToggle{
  width:38px;height:38px;min-width:38px;min-height:38px;
  border:0;background:transparent;color:var(--text);box-shadow:none;
}
#btnTopLangToggle .svgicon{width:20px;height:20px;min-width:20px;min-height:20px}
#btnTopLangToggle[aria-expanded="true"]{color:var(--brand);background:color-mix(in oklab,var(--brand) 10%,transparent)}
#topLangSeg{
  position:absolute;right:42px;top:50%;z-index:18;
  display:flex;flex-direction:row;align-items:center;gap:4px;
  width:max-content;max-width:none;max-height:none;margin:0!important;padding:3px 5px;
  border:1px solid color-mix(in oklab,var(--border) 72%,transparent);
  border-radius:999px;background:color-mix(in oklab,var(--glass) 92%,transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(12px,-50%) scale(.96);transform-origin:right center;
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,.8,.28,1),visibility .18s ease;
}
#topLangSeg.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%) scale(1)}
#topLangSeg .langSeg__btn{width:30px;height:28px;padding:0!important;border-radius:999px!important}

/* Reproductor: compartir a la izquierda y accesos contextuales a la derecha. */
#viewNow .nowHero__meta{display:flex!important;flex-direction:column!important;align-items:stretch!important}
#viewNow .nowTitleActions{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  width:100%!important;gap:12px!important;margin-top:10px!important;
}
#viewNow .nowShareBtn,
#viewNow .nowSectionNav__btn{
  appearance:none;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;
  color:#fff!important;box-shadow:none!important;display:grid!important;place-items:center!important;
}
#viewNow .nowShareBtn .svgicon,
#viewNow .nowSectionNav__btn .svgicon{
  width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
  color:#fff!important;fill:currentColor;stroke:currentColor;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.32));
}
#viewNow .nowSectionNav{
  order:initial!important;width:auto!important;margin:0 0 0 auto!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:flex-end!important;gap:4px!important;background:transparent!important;
}
#viewNow .nowSectionNav__btn span{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
#viewNow .nowShareBtn:hover,#viewNow .nowShareBtn:active,
#viewNow .nowSectionNav__btn:hover,#viewNow .nowSectionNav__btn:active,#viewNow .nowSectionNav__btn.is-active{
  color:#fff!important;background:rgba(255,255,255,.09)!important;
}
#viewNow .nowShareBtn:focus-visible,#viewNow .nowSectionNav__btn:focus-visible{
  outline:3px solid #fff!important;outline-offset:1px!important;background:rgba(255,255,255,.11)!important;
}
#viewNow.is-focus .nowTitleActions{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#viewNow .nowProgress{order:4!important}
#viewNow .nowHero__controls{order:5!important;margin-top:10px!important}

/* La flecha superior queda limpia; el fondo del nowHero no se altera. */
#viewNow .nowHero{padding-top:calc(8px + env(safe-area-inset-top))!important}
#viewNow .nowHero__back{
  width:38px!important;height:28px!important;min-width:38px!important;min-height:28px!important;
  padding:0!important;margin:0 auto 1px!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;color:#fff!important;
}
#viewNow .nowHero__back .svgicon{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}
#viewNow .nowHero__art{margin:0 auto 18px!important}
#viewNow .nowHero__art::after,[data-theme="light"] #viewNow .nowHero__art::after{
  height:54px!important;background:linear-gradient(180deg,rgba(7,12,25,0),rgba(7,12,25,.30) 58%,rgba(7,12,25,.84))!important;
}

/* Jerarquía al abrir una hoja: el contenido inferior se desenfoca y los
   reproductores/footer desaparecen del flujo, sin reservar una franja. */
body.has-now-sheet,body.has-modal-sheet{overflow:hidden!important;overscroll-behavior:none}
body.has-now-sheet .player,body.has-now-sheet .bottomnav,
body.has-modal-sheet .player,body.has-modal-sheet .bottomnav{display:none!important}
body.has-modal-sheet .app{filter:blur(8px) saturate(.82);transform:scale(.995);transition:filter .2s ease,transform .2s ease}

/* Hojas de texto, obra y mapa: ocupan la pantalla y mantienen controles visibles. */
#viewNow.is-focus{position:fixed!important;inset:0!important;z-index:8000!important;padding:0!important;background:transparent!important;overflow:hidden!important;isolation:isolate}
#viewNow.is-focus::before{display:none!important;content:none!important}
#viewNow.is-focus::after{display:none!important;content:none!important}
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{
  position:fixed!important;inset:0!important;top:var(--sheet-top-px,0px)!important;
  width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:none!important;
  margin:0!important;padding:max(8px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))!important;
  border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(8,13,25,.68),rgba(8,13,25,.80))!important;color:var(--focusPanelText)!important;
  box-shadow:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;
  z-index:9000!important;isolation:isolate;backdrop-filter:blur(20px) saturate(.78);-webkit-backdrop-filter:blur(20px) saturate(.78);
  transform:translate3d(0,0,0);transition:top .25s cubic-bezier(.22,.8,.28,1),opacity .18s ease!important;
}
#viewNow.is-focus .nowHero__panel[hidden],#viewNow.is-focus .nowFocusPanel[hidden]{display:none!important}
#viewNow.is-focus .nowHero__panel:not([hidden]),#viewNow.is-focus .nowFocusPanel:not([hidden]){animation:focusPanelIn .25s cubic-bezier(.22,.8,.28,1) both}
#viewNow.is-focus .nowHero__panel::before,#viewNow.is-focus .nowHero__panel::after,
#viewNow.is-focus .nowFocusPanel::before,#viewNow.is-focus .nowFocusPanel::after{display:none!important;content:none!important}
@keyframes focusPanelIn{from{transform:translate3d(0,26px,0);opacity:.72}to{transform:translate3d(0,0,0);opacity:1}}
.nowSheetHandle,.trackActionSheet__handle{
  display:block!important;flex:0 0 auto!important;width:46px!important;height:5px!important;
  margin:2px auto 8px!important;border-radius:999px!important;background:var(--focusPanelHandle)!important;
  touch-action:none;cursor:ns-resize;
}
#viewNow.is-focus .nowHero__panel.is-dragging,#viewNow.is-focus .nowFocusPanel.is-dragging{animation:none!important;transition:none!important;user-select:none}
#viewNow.is-focus .nowHero__panel.is-dismissing,#viewNow.is-focus .nowFocusPanel.is-dismissing{animation:none!important;transition:top .23s ease-in!important}

/* Encabezado y controles homogéneos en todas las hojas. */
#viewNow.is-lyrics-focus .lyrics__head--focus,#viewNow .nowFocusPanel__head,
.trackActionSheet__subhead,.trackActionSheet__track{
  position:sticky!important;top:0!important;z-index:20!important;flex:0 0 auto!important;
  min-height:56px!important;padding:0 0 10px!important;margin:0!important;
  background:linear-gradient(180deg,rgba(8,13,25,.98) 74%,rgba(8,13,25,0))!important;
  border-bottom:1px solid var(--focusPanelBorder)!important;color:#fff!important;
}
.trackActionSheet__subheadCopy{min-width:0;flex:1 1 auto}
.nowFocusPanel__eyebrow,.lyrics__eyebrow,.trackActionSheet__eyebrow{color:var(--focusPanelMuted)!important}
.nowFocusPanel__title,.lyrics__track,.trackActionSheet__subTitle,.trackActionSheet__title{color:#fff!important}
.nowFocusPanel__close,.lyrics__close,.trackActionSheet__subhead .iconbtn,.trackActionSheet__close{
  display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;
  width:var(--panelControl)!important;height:var(--panelControl)!important;min-width:var(--panelControl)!important;min-height:var(--panelControl)!important;
  padding:0!important;border:0!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;
  color:#fff!important;box-shadow:none!important;z-index:25!important;
}
.nowFocusPanel__close .svgicon,.lyrics__close .svgicon,.trackActionSheet__subhead .iconbtn .svgicon,.trackActionSheet__close .svgicon{
  width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;color:#fff!important;
}
.nowFocusPanel__close:focus-visible,.lyrics__close:focus-visible,.trackActionSheet__subhead .iconbtn:focus-visible,.trackActionSheet__close:focus-visible{outline:3px solid #fff;outline-offset:2px}

#viewNow.is-lyrics-focus .nowHero__lyrics{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;padding:0!important;margin:0!important}
#nowLyrics{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:16px 2px calc(24px + env(safe-area-inset-bottom))!important;overscroll-behavior:contain}
#viewNow.is-lyrics-focus .lyrics p.line{color:rgba(255,255,255,.42)!important}
#viewNow.is-lyrics-focus .lyrics p.line.active,#viewNow.is-lyrics-focus .lyrics p.line.active .k{color:#fff!important;-webkit-text-fill-color:#fff!important}
.nowArtworkViewer{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;gap:10px!important;padding-top:8px}
.nowArtworkTools{position:relative!important;top:auto!important;flex:0 0 auto!important;align-self:center!important}
.nowArtworkStage{flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important}
.nowMapMount{display:flex!important;flex:1 1 auto!important;min-height:0!important;overflow:auto!important;align-items:center!important;justify-content:center!important;padding:10px 0 calc(18px + env(safe-area-inset-bottom))!important}
.nowMapMount #routeMapWrap{width:min(100%,980px)!important;margin:auto!important}

/* Opciones e idioma: fondo coherente, blur y hoja de idioma compacta. */
.trackActionSheet{z-index:9500!important;background:transparent!important}
.trackActionSheet__backdrop{background:rgba(2,6,15,.44)!important;backdrop-filter:blur(13px) saturate(.82);-webkit-backdrop-filter:blur(13px) saturate(.82)}
.trackActionSheet__panel{
  position:fixed!important;inset:0!important;top:var(--sheet-top-px,0px)!important;
  width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:none!important;
  padding:max(8px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))!important;
  border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(8,13,25,.70),rgba(8,13,25,.84))!important;color:#fff!important;
  box-shadow:none!important;overflow-y:auto!important;transform:translate3d(0,100%,0)!important;
  transition:transform .25s cubic-bezier(.22,.8,.28,1),top .25s cubic-bezier(.22,.8,.28,1),height .22s ease!important;
  backdrop-filter:blur(22px) saturate(.86);-webkit-backdrop-filter:blur(22px) saturate(.86);
}
.trackActionSheet.is-open .trackActionSheet__panel{transform:translate3d(0,0,0)!important}
.trackActionSheet__panel::before,.trackActionSheet__panel::after{display:none!important;content:none!important}
.trackActionSheet__panel .iconbtn,.trackActionSheet__panel .btn{color:#fff!important}
.trackActionSheet.is-language-view .trackActionSheet__panel{
  inset:auto 0 0!important;top:var(--sheet-top-px,48dvh)!important;bottom:0!important;
  height:auto!important;min-height:0!important;max-height:none!important;border-radius:24px 24px 0 0!important;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom))!important;
}
.trackActionSheet__view[data-track-sheet-view="language"]{min-height:100%;display:flex;flex-direction:column}
.trackActionSheet__languageList{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;flex:1 1 auto!important;padding:8px 0 4px!important}
.trackSheetLanguage{
  color:#fff!important;min-height:58px!important;border:0!important;background:transparent!important;
  grid-template-columns:30px minmax(0,1fr) auto!important;padding:9px 10px!important;border-radius:12px!important;
  font-size:15px!important;font-weight:680!important;
}
.trackSheetLanguage:hover,.trackSheetLanguage:active,.trackSheetLanguage.is-active{background:rgba(255,255,255,.10)!important}
.trackSheetLanguage__current{color:#fff!important;font-size:12px!important;font-weight:780!important;opacity:.78}
.trackActionSheet__artist,.trackActionSheet__artistBody,.trackSheetAction,.trackSheetAction__chevron{color:rgba(255,255,255,.78)!important}
.trackSheetAction{color:#fff!important}
.trackSheetAction:hover{background:rgba(255,255,255,.08)!important}

/* El play del footer mantiene contraste alto. */
footer.player:not(.is-hidden):not(.is-empty) #play{color:#fff!important;background:transparent!important}
footer.player:not(.is-hidden):not(.is-empty) #play .svgicon,
footer.player:not(.is-hidden):not(.is-empty) #play svg,
footer.player:not(.is-hidden):not(.is-empty) #play use{color:#fff!important;fill:currentColor!important;stroke:currentColor!important}

/* Fundido del Home más sutil hacia el fondo de la aplicación. */
.homeWelcome__media::after{
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 55%,rgba(0,0,0,.27) 86%,var(--bg) 100%),linear-gradient(90deg,rgba(0,0,0,.20),transparent 68%)!important;
}

@media(max-width:520px){
  #viewNow .nowTitleActions{gap:7px!important}
  #viewNow .nowShareBtn,#viewNow .nowSectionNav__btn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
  #viewNow .nowShareBtn .svgicon,#viewNow .nowSectionNav__btn .svgicon{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important}
  #viewNow .nowHero__back{margin-bottom:0!important}
  #viewNow .nowHero__art{margin-top:0!important}
}
@media(prefers-reduced-motion:reduce){
  #topLangSeg,#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel,.trackActionSheet__panel,
  body.has-modal-sheet .app{animation:none!important;transition:none!important}
}



/* AUDIO RELATOS · base v09 r12
   Cabecera ordenada y paneles con blur aplicado al fondo translúcido. */
.topbar__actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;flex-wrap:nowrap!important}
.topbar__actions #btnMenu,.topbar__actions #btnTheme,.topbar__actions #btnInfo,.topbar__actions #btnTopLangToggle{flex:0 0 auto}
.topbar__actions #btnTheme{order:4}
.topbar__actions .topbar__menuStack{order:3}
.topbar__actions #btnMenu{order:2}
.topbar__actions #btnInfo{order:1}
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{
  background:linear-gradient(180deg,rgba(8,13,25,.68),rgba(8,13,25,.82))!important;
  backdrop-filter:blur(20px) saturate(.78)!important;
  -webkit-backdrop-filter:blur(20px) saturate(.78)!important;
}
.trackActionSheet__panel{
  background:linear-gradient(180deg,rgba(8,13,25,.70),rgba(8,13,25,.86))!important;
  backdrop-filter:blur(20px) saturate(.78)!important;
  -webkit-backdrop-filter:blur(20px) saturate(.78)!important;
}


/* =========================================================
   AUDIO RELATOS · base v09 r13
   Transiciones, selector de idioma deslizante y mini-player animado.
   ========================================================= */

/* Transición breve entre vistas: evita cambios bruscos y comunica carga. */
.sectionTransition{
  position:fixed;inset:0;z-index:12000;display:grid;place-items:center;
  pointer-events:none;background:rgba(8,13,25,.08);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.sectionTransition[hidden]{display:none!important}
.sectionTransition.is-visible{opacity:1;visibility:visible}
.sectionTransition__pill{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;
  border:1px solid color-mix(in oklab,var(--border) 72%,transparent);
  border-radius:999px;background:color-mix(in oklab,var(--glass) 94%,transparent);
  color:var(--text);box-shadow:0 16px 42px rgba(0,0,0,.16);
  transform:translateY(8px) scale(.98);opacity:.72;
  transition:transform .24s cubic-bezier(.22,.8,.28,1),opacity .18s ease;
}
.sectionTransition.is-visible .sectionTransition__pill{transform:translateY(0) scale(1);opacity:1}
.sectionTransition__spinner{
  width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in oklab,var(--muted) 34%,transparent);
  border-top-color:var(--brand);animation:spin .72s linear infinite;flex:0 0 auto;
}
.sectionTransition__label{font-size:13px;line-height:1;font-weight:720;white-space:nowrap}
.app[aria-busy="true"] .view.is-active{pointer-events:none}
.sectionTransition{will-change:opacity,visibility}
.view.is-active{animation:viewSectionIn .3s cubic-bezier(.22,.8,.28,1) both}
@keyframes viewSectionIn{from{opacity:.58;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Las hojas mantienen una entrada y salida reconocible, sin perder controles. */
#viewNow.is-focus .nowHero__panel:not([hidden]),
#viewNow.is-focus .nowFocusPanel:not([hidden]){
  animation:panelRiseIn .32s cubic-bezier(.16,.84,.28,1) both!important;
}
#viewNow.is-focus .nowHero__panel.is-dismissing,
#viewNow.is-focus .nowFocusPanel.is-dismissing{
  animation:none!important;opacity:.94!important;
  transition:top .26s cubic-bezier(.4,0,1,1),opacity .2s ease!important;
}
.trackActionSheet__panel{
  transition:transform .32s cubic-bezier(.16,.84,.28,1),top .28s cubic-bezier(.22,.8,.28,1),height .24s ease,opacity .2s ease!important;
  opacity:.82;
}
.trackActionSheet.is-open .trackActionSheet__panel{opacity:1}
.trackActionSheet__backdrop{transition:opacity .26s ease!important}
@keyframes panelRiseIn{from{transform:translate3d(0,34px,0);opacity:.56}to{transform:translate3d(0,0,0);opacity:1}}

/* El botón de idioma baja visualmente hasta la línea del subtítulo, sin
   modificar la altura ni la diagramación de la cabecera. */
.topbar__menuStack{transform:translateY(8px);will-change:transform}
#topLangSeg{
  overflow:hidden;
  clip-path:inset(0 0 0 100% round 999px);
  transform:translate(20px,-50%) scale(.98)!important;
  transform-origin:right center!important;
  transition:opacity .2s ease,transform .32s cubic-bezier(.16,.84,.28,1),clip-path .32s cubic-bezier(.16,.84,.28,1),visibility .2s ease!important;
}
#topLangSeg.is-open{
  clip-path:inset(0 0 0 0 round 999px);
  transform:translate(0,-50%) scale(1)!important;
}
#topLangSeg .langSeg__btn{
  opacity:0;transform:translateX(8px);
  transition:opacity .18s ease,transform .26s cubic-bezier(.22,.8,.28,1),background .18s ease!important;
}
#topLangSeg.is-open .langSeg__btn{opacity:1;transform:translateX(0)}
#topLangSeg.is-open .langSeg__btn:nth-child(1){transition-delay:.03s!important}
#topLangSeg.is-open .langSeg__btn:nth-child(2){transition-delay:.07s!important}
#topLangSeg.is-open .langSeg__btn:nth-child(3){transition-delay:.11s!important}

/* Cuando el mini-player está activo, el bloque del Home sube para no quedar
   oculto por el banner persistente y vuelve suavemente a su posición. */
#viewHome .homeWelcome__copy{
  transition:transform .34s cubic-bezier(.22,.8,.28,1),opacity .2s ease!important;
}
.app:not(.is-player-hidden)[data-view="home"] #viewHome .homeWelcome__copy{
  transform:translateY(calc(-1 * clamp(54px,8svh,82px)))!important;
}

/* Marquee tipo Spotify: título y artista se desplazan solo al reproducir. */
.player .now__title,
.player .now__artist{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%);
}
.player .now__artist{max-height:none!important;line-height:1.2!important}
.player .now__title.is-marquee,
.player .now__artist.is-marquee{text-overflow:clip}
.player .now__title.is-marquee>span,
.player .now__artist.is-marquee>span{
  display:inline-block;padding-right:42px;will-change:transform;
  animation:marqueeScroll var(--marqueeDur,14s) linear infinite;
  animation-play-state:paused;
}
.player.is-playing .now__title.is-marquee>span,
.player.is-playing .now__artist.is-marquee>span{animation-play-state:running}

@media(max-width:700px){
  .topbar__menuStack{transform:translateY(7px)}
  .app:not(.is-player-hidden)[data-view="home"] #viewHome .homeWelcome__copy{
    transform:translateY(calc(-1 * clamp(66px,10svh,92px)))!important;
  }
}
@media(max-width:390px),(max-height:680px){
  .app:not(.is-player-hidden)[data-view="home"] #viewHome .homeWelcome__copy{
    transform:translateY(-58px)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .sectionTransition,.sectionTransition__pill,.view.is-active,
  #topLangSeg,#topLangSeg .langSeg__btn,#viewHome .homeWelcome__copy,
  #viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel,
  .trackActionSheet__panel,.trackActionSheet__backdrop{
    animation:none!important;transition:none!important;
  }
  .player .now__title.is-marquee>span,.player .now__artist.is-marquee>span{animation:none!important}
}


/* =========================================================
   AUDIO RELATOS · base v09 r14
   Cabecera, márgenes de panel, lectura accesible y créditos.
   ========================================================= */

/* Idioma más cerca del borde inferior; el menú hamburguesa vuelve a ocupar
   el extremo derecho de la cabecera sin alterar su altura. */
.topbar{overflow:visible!important}
.topbar__row{overflow:visible!important}
.topbar__actions{align-items:flex-end!important}
.topbar__actions #btnInfo{order:1!important}
.topbar__actions #btnTheme{order:2!important}
.topbar__actions .topbar__menuStack{
  order:3!important;align-self:flex-end!important;transform:translateY(13px)!important;
}
.topbar__actions #btnMenu{order:4!important;margin-left:1px!important;align-self:flex-end!important}
#topLangSeg{
  right:42px!important;top:calc(50% + 5px)!important;
  transform-origin:right bottom!important;
}
#topLangSeg.is-open{transform:translate(0,-50%) scale(1)!important}

/* El texto contextual del reproductor debe mostrarse completo. */
#viewNow .nowHero__kicker{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  max-width:none!important;overflow-wrap:anywhere!important;line-height:1.42!important;
}

/* Mayor respiración respecto de los bordes, manteniendo encabezados y
   controles dentro de la zona segura de cualquier pantalla. */
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{
  padding:max(14px,env(safe-area-inset-top)) clamp(22px,5vw,52px) max(22px,env(safe-area-inset-bottom))!important;
}
#viewNow.is-lyrics-focus .lyrics__head--focus,#viewNow .nowFocusPanel__head{
  padding:0 0 14px!important;gap:12px!important;
}
#viewNow.is-lyrics-focus .lyrics__head--focus{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;
}
#viewNow.is-lyrics-focus .lyrics__track{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:anywhere!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
#viewNow.is-lyrics-focus .lyrics__actions{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;
  flex-wrap:nowrap!important;position:sticky!important;top:0!important;
}
.lyricsFontControl{
  min-width:38px!important;width:38px!important;height:38px!important;min-height:38px!important;
  padding:0!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.08)!important;
  color:#fff!important;font-size:14px!important;font-weight:800!important;
}
.lyricsFontValue{
  min-width:42px;text-align:center;color:rgba(255,255,255,.78);font-size:12px;font-weight:760;
  font-variant-numeric:tabular-nums;
}
#nowLyrics{
  padding:20px 4px calc(30px + env(safe-area-inset-bottom))!important;
  scroll-padding-top:92px;
}
#viewNow.is-lyrics-focus #nowLyrics p.line{
  font-size:var(--lyrics-user-size,22px)!important;line-height:1.36!important;
}

/* Visor y mapa con espacio útil, controles visibles y créditos de obra. */
.nowArtworkViewer{padding-top:12px!important;gap:14px!important}
.nowArtworkCaption{margin:12px 0 0!important;color:rgba(255,255,255,.86)!important;font-size:14px!important;line-height:1.45!important}
.nowArtworkCredits{
  margin:5px 0 0!important;color:rgba(255,255,255,.62)!important;font-size:12px!important;line-height:1.45!important;
  letter-spacing:.01em;overflow-wrap:anywhere;
}
.nowArtworkCredits[hidden]{display:none!important}
.nowMapMount{padding:16px 0 calc(26px + env(safe-area-inset-bottom))!important}

/* El cargador de retorno usa un fondo oscuro translúcido para cubrir la
   recomposición de la ficha sin mostrar un destello blanco. */
.sectionTransition.is-panel-return{
  background:rgba(5,9,18,.46)!important;backdrop-filter:blur(14px) saturate(.84)!important;
  -webkit-backdrop-filter:blur(14px) saturate(.84)!important;
}
.sectionTransition.is-panel-return .sectionTransition__pill{
  background:rgba(12,18,32,.90)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important;
}
.sectionTransition.is-panel-return .sectionTransition__spinner{
  border-color:rgba(255,255,255,.22)!important;border-top-color:#fff!important;
}

@media(max-width:700px){
  .topbar__actions .topbar__menuStack{transform:translateY(15px)!important}
  #topLangSeg{top:calc(50% + 6px)!important}
  #viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{
    padding:max(14px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom))!important;
  }
}
@media(max-width:390px){
  #viewNow.is-lyrics-focus .lyrics__head--focus{grid-template-columns:1fr!important}
  #viewNow.is-lyrics-focus .lyrics__actions{justify-content:flex-start!important;position:relative!important}
  .lyricsFontControl{width:40px!important;min-width:40px!important}
}
@media(prefers-reduced-motion:reduce){
  .sectionTransition.is-panel-return{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* =========================================================
   AUDIO RELATOS · base v09 r16
   Header fijo, navegación contextual e indicadores adaptativos.
   ========================================================= */
:root{
  --topbar-live-h:92px;
  --contextbar-h:46px;
  --miniProgressActive:#ffffff;
  --miniProgressTrack:rgba(255,255,255,.28);
}
[data-theme="light"]{
  --miniProgressActive:#111827;
  --miniProgressTrack:rgba(17,24,39,.24);
}

/* Header fijo y alineado. */
.topbar{
  position:fixed!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  z-index:1200!important;
  padding:12px 16px 10px!important;
  transition:padding .24s ease,background .24s ease,box-shadow .24s ease!important;
}
.topbar__row{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
}
.brand{
  flex:1 1 auto!important;
  min-width:0!important;
  margin-right:auto!important;
  justify-content:flex-start!important;
  justify-items:start!important;
  text-align:left!important;
}
.brand__logo{
  width:min(210px,35vw)!important;
  margin:0!important;
  justify-content:flex-start!important;
  transform-origin:left center!important;
}
.brand__logo img,#brandCover{margin:0!important;object-position:left center!important}
.brand__text{justify-content:flex-start!important;text-align:left!important}
.brand__subtitle{
  opacity:1;
  max-height:3.2em;
  transform:translateY(0);
  transform-origin:left top;
}
.topbar .brand__logo,.topbar .brand__subtitle,.topbar .iconbtn{
  transition:width .24s ease,height .24s ease,opacity .18s ease,transform .24s ease,max-height .24s ease,padding .24s ease!important;
}
.topbar__actions{
  flex:0 0 auto!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
}
.topbar__menuStack{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important}

/* Todos los iconos del header comparten el mismo tratamiento lineal. */
#btnInfo,#btnTheme,#btnTopLangToggle,#btnMenu{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  color:var(--text)!important;box-shadow:none!important;display:grid;place-items:center;
}
#btnInfo .svgicon,#btnTheme .svgicon,#btnTopLangToggle .svgicon,#btnMenu .svgicon{
  width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;
}
#btnInfo:hover,#btnTheme:hover,#btnTopLangToggle:hover,#btnMenu:hover,
#btnInfo:focus-visible,#btnTheme:focus-visible,#btnTopLangToggle:focus-visible,#btnMenu:focus-visible{
  color:var(--brand)!important;background:color-mix(in oklab,var(--brand) 9%,transparent)!important;
}
#btnMenu{display:none!important}

/* Selector rápido: se despliega hacia la izquierda sin cambiar el alto. */
#topLangSeg{
  position:absolute!important;
  right:calc(100% + 5px)!important;
  top:50%!important;
  z-index:1250!important;
  width:max-content!important;
  margin:0!important;
  transform:translate(12px,-50%) scale(.96)!important;
  transform-origin:right center!important;
}
#topLangSeg.is-open{transform:translate(0,-50%) scale(1)!important}

/* Compactación real al desplazarse. */
.topbar.is-compact{padding:7px 14px 6px!important;box-shadow:0 7px 20px rgba(0,0,0,.14)!important}
.topbar.is-compact .brand__logo{width:min(164px,30vw)!important}
.topbar.is-compact .brand__logo img,.topbar.is-compact #brandCover{max-height:58px!important}
.topbar.is-compact .brand__subtitle{
  opacity:0!important;
  max-height:0!important;
  overflow:hidden!important;
  transform:translateY(-4px)!important;
  pointer-events:none!important;
}
.topbar.is-compact #btnInfo,.topbar.is-compact #btnTheme,
.topbar.is-compact #btnTopLangToggle,.topbar.is-compact #btnMenu{
  width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
}
.topbar.is-compact .topbar__actions .svgicon{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important}
.main{padding-top:calc(var(--topbar-live-h) + 8px)!important;transition:padding-top .24s ease!important}

/* Barra contextual bajo el header: funciona como miga de pan. */
.contextbar{
  position:fixed!important;
  left:0!important;right:0!important;top:var(--topbar-live-h)!important;
  height:var(--contextbar-h)!important;
  z-index:1150!important;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 14px;
  border-bottom:1px solid var(--border);
  background:var(--topbarGlass);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:top .24s ease,opacity .18s ease;
}
.contextbar[hidden]{display:none!important}
.contextbar__back{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  color:var(--muted)!important;box-shadow:none!important;display:grid!important;place-items:center!important;
}
[data-theme="light"] .contextbar__back{color:#111827!important}
.contextbar__back .svgicon{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}
.contextbar__back:focus-visible{outline:3px solid var(--brand)!important;outline-offset:1px!important}
.contextbar__crumb{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}
.view[data-view="route"].is-active{top:calc(var(--topbar-live-h) + var(--contextbar-h))!important}

/* Hero Home: degradado más alto, oscuro y progresivo. */
.homeWelcome__media{background:#080b13!important}
.homeWelcome__media::after{
  background:
    linear-gradient(180deg,rgba(3,6,12,.12) 0%,rgba(3,6,12,.13) 22%,rgba(3,6,12,.23) 42%,rgba(3,6,12,.52) 68%,rgba(3,6,12,.84) 86%,rgba(3,6,12,.97) 100%),
    linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.06) 74%)!important;
}
.homeWelcome__media img{transition:opacity .72s ease,transform 1.05s cubic-bezier(.22,.8,.28,1)!important}
.homeWelcome__media img.is-changing{opacity:.54!important;transform:scale(1.014)!important}
.sectionTransition{background:rgba(5,8,15,.62)!important;backdrop-filter:blur(10px) saturate(.86)!important;-webkit-backdrop-filter:blur(10px) saturate(.86)!important}
.sectionTransition__pill{background:rgba(11,16,28,.95)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important}
.sectionTransition__spinner{border-color:rgba(255,255,255,.22)!important;border-top-color:#fff!important}

/* Paneles del reproductor conservan una superficie continua. */
#viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{
  background:rgba(7,12,24,.86)!important;
  backdrop-filter:blur(24px) saturate(.82)!important;
  -webkit-backdrop-filter:blur(24px) saturate(.82)!important;
}
#viewNow.is-lyrics-focus .lyrics__head--focus,#viewNow .nowFocusPanel__head{
  position:relative!important;top:auto!important;background:transparent!important;border:0!important;
  padding:0 0 12px!important;min-height:52px!important;
}
.nowFocusPanel__artist{margin-top:5px;color:rgba(255,255,255,.70);font-size:14px;line-height:1.4;font-weight:560;overflow-wrap:anywhere}
.nowFocusPanel__artist[hidden]{display:none!important}
.nowFocusPanel__close,.lyrics__close{border-radius:0!important;background:transparent!important;border:0!important}

/* Obra: imagen sin radios y controles en el footer. */
.nowArtworkViewer{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding-top:4px!important}
.nowArtworkStage{
  flex:1 0 min(66svh,720px)!important;min-height:min(58svh,620px)!important;height:auto!important;
  border-radius:0!important;background:rgba(0,0,0,.22)!important;
}
.nowArtworkStage img{border-radius:0!important}
.nowPanelFooterTools,.lyricsFocusFooter{
  position:sticky!important;bottom:0!important;z-index:30!important;flex:0 0 auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  min-height:58px!important;margin-top:12px!important;padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom))!important;
  border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(7,12,24,0),rgba(7,12,24,.92) 28%,rgba(7,12,24,.98))!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
.nowArtworkTools{position:sticky!important;top:auto!important;bottom:0!important;align-self:stretch!important}
.nowArtworkCaption:empty{display:none!important}

/* Texto sincronizado: lectura completa y controles bajo el texto. */
#viewNow.is-lyrics-focus .nowHero__lyrics{overflow:hidden!important}
#nowLyrics{padding:14px 4px 18px!important;scroll-padding-top:24px!important}
.lyricsFocusFooter{margin-top:0!important}
.lyricsFocusFooter .lyricsFontControl{background:rgba(255,255,255,.08)!important;color:#fff!important}

/* Mapa: lienzo blanco, sin radios; herramientas bajo el canvas. */
#viewNow.is-map-focus .nowMapMount{align-items:flex-start!important;padding:4px 0 0!important}
#viewNow.is-map-focus #routeMapWrap,#viewNow.is-map-focus #routeMapWrap .mapCard{
  width:100%!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
#viewNow.is-map-focus #routeMapWrap .mapCard__head{display:none!important}
#viewNow.is-map-focus #routeMapWrap .mapCanvas,
#viewNow.is-map-focus #routeMapWrap .svgViewport{
  width:100%!important;min-height:56svh!important;border:0!important;border-radius:0!important;background:#fff!important;color:#101425!important;
}
#viewNow.is-map-focus #routeMapWrap .mapCanvas img{border-radius:0!important}
#viewNow.is-map-focus #routeMapWrap .mapTools{width:100%!important;position:sticky!important;bottom:0!important}
#viewNow.is-map-focus #routeMapWrap .mapList{background:transparent!important}

/* Mini-player: progreso adaptable a tema y con contraste suficiente. */
.player{overflow:visible!important}
.player .progress{
  display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:5px!important;margin:0!important;padding:0!important;z-index:4!important;color:transparent!important;
}
.player .progress>span{display:none!important}
.player .range--mini{position:absolute!important;inset:auto 0 -7px 0!important;width:100%!important;min-width:0!important;height:16px!important;margin:0!important;padding:0!important}
.player .range--mini::-webkit-slider-runnable-track{
  height:3px!important;
  background:linear-gradient(90deg,var(--miniProgressActive) 0%,var(--miniProgressActive) var(--p),var(--miniProgressTrack) var(--p),var(--miniProgressTrack) 100%)!important;
  border-radius:0!important;
}
.player .range--mini::-webkit-slider-thumb{width:0!important;height:0!important;border:0!important;box-shadow:none!important;margin-top:0!important;background:transparent!important}
.player .range--mini::-moz-range-track{height:3px!important;background:var(--miniProgressTrack)!important;border-radius:0!important}
.player .range--mini::-moz-range-progress{height:3px!important;background:var(--miniProgressActive)!important;border-radius:0!important}
.player .range--mini::-moz-range-thumb{width:0!important;height:0!important;border:0!important;background:transparent!important}
.player .controls #play,.player .controls #play .svgicon{color:#fff!important;fill:currentColor!important}

/* Enlaces del menú conservan apariencia de botón. */
.menuItem--link{text-decoration:none!important}
.menuItem--link:visited{color:var(--text)!important}

/* El icono de recorridos conserva el mismo tamaño que el resto del footer. */
.bottomnav__item[data-nav="library"] .svgicon{stroke-width:1.8}

@media(max-width:700px){
  :root{--topbar-live-h:86px}
  [data-theme="light"]{--miniProgressActive:#fff;--miniProgressTrack:rgba(255,255,255,.28)}
  .topbar{padding:9px 10px 7px!important}
  .topbar__row{align-items:flex-start!important;gap:6px!important}
  .brand{max-width:none!important;gap:4px!important}
  .brand__logo{width:min(180px,48vw)!important}
  .brand__logo img,#brandCover{max-height:68px!important}
  .brand__subtitle{font-size:12.5px!important;line-height:1.28!important;max-width:27ch!important}
  .topbar__actions{gap:0!important;align-self:flex-start!important}
  #btnInfo,#btnTheme{display:none!important}
  #btnMenu{display:grid!important}
  #btnTopLangToggle,#btnMenu{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .topbar.is-compact .brand__logo{width:min(146px,40vw)!important}
  .topbar.is-compact .brand__logo img,.topbar.is-compact #brandCover{max-height:54px!important}
  .topbar.is-compact .brand__subtitle{display:block!important;opacity:0!important;max-height:0!important}
  #viewNow.is-focus .nowHero__panel,#viewNow.is-focus .nowFocusPanel{padding-inline:18px!important}
  .nowArtworkStage{min-height:54svh!important}
  .contextbar{padding-inline:8px!important}
}

@media(max-width:390px){
  :root{--topbar-live-h:60px}
  .topbar{padding:8px 8px 7px!important}
  .brand{gap:0!important;align-self:center!important}
  .brand__logo{width:min(148px,45vw)!important}
  .brand__logo img,#brandCover{max-height:60px!important}
  .brand__subtitle{display:none!important}
  .topbar.is-compact .brand__logo{width:min(132px,41vw)!important}
  .topbar.is-compact .brand__logo img,.topbar.is-compact #brandCover{max-height:50px!important}
  #btnTopLangToggle,#btnMenu{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  #btnTopLangToggle .svgicon,#btnMenu .svgicon{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important}
  .contextbar__crumb{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .topbar,.topbar .brand__logo,.topbar .brand__subtitle,.topbar .iconbtn,.main,.contextbar,.homeWelcome__media img{transition:none!important}
}


/* =========================================================
   AUDIO RELATOS · base v09 r17
   Paneles completos, breadcrumb legible, letras centradas y
   progreso visible en el mini reproductor.
   ========================================================= */

/* El panel ocupa exactamente el espacio entre el borde superior e inferior.
   Al arrastrar, su altura se recalcula y nunca se extiende detrás del viewport. */
#viewNow.is-focus .nowHero__panel,
#viewNow.is-focus .nowFocusPanel{
  inset:var(--sheet-top-px,0px) 0 0 0!important;
  top:var(--sheet-top-px,0px)!important;
  bottom:0!important;
  width:100vw!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
#viewNow.is-art-focus .nowFocusPanel--art{
  inset:var(--sheet-top-px,0px) 0 0 0!important;
  bottom:0!important;
  height:auto!important;
}

/* Todos los cierres de panel usan el mismo icono lineal y la misma escala. */
#viewNow .nowFocusPanel__close,
#viewNow .lyrics__close{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
}
#viewNow .nowFocusPanel__close .svgicon,
#viewNow .lyrics__close .svgicon{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  color:#fff!important;
  stroke:currentColor!important;
  fill:currentColor!important;
}

/* Miga de pan compacta, sin negrita y con ajuste real de líneas. */
.contextbar{
  height:auto!important;
  min-height:40px!important;
  padding:5px 12px!important;
  align-items:center!important;
}
.contextbar__back{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  align-self:flex-start!important;
}
.contextbar__back .svgicon{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
}
.contextbar__crumb{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  color:var(--muted)!important;
  font-size:11.5px!important;
  line-height:1.28!important;
  font-weight:400!important;
  letter-spacing:0!important;
  padding:4px 0!important;
}

/* Letras: espacio de respiración para centrar también la primera y última frase. */
#nowLyrics{
  scroll-behavior:smooth;
  scroll-padding-block:40%;
  padding:clamp(150px,36vh,360px) 4px clamp(150px,36vh,360px)!important;
}
#viewNow.is-lyrics-focus #nowLyrics p.line{
  opacity:.34!important;
  transform:scale(.985);
  transform-origin:left center;
  transition:color .28s ease,opacity .28s ease,transform .28s ease,text-shadow .28s ease!important;
}
#viewNow.is-lyrics-focus #nowLyrics p.line.is-distant{opacity:.22!important}
#viewNow.is-lyrics-focus #nowLyrics p.line.is-next-near{opacity:.48!important;color:rgba(255,255,255,.56)!important}
#viewNow.is-lyrics-focus #nowLyrics p.line.is-past-near{
  opacity:.66!important;
  color:rgba(255,255,255,.74)!important;
  transform:scale(.995);
}
#viewNow.is-lyrics-focus #nowLyrics p.line.active,
#viewNow.is-lyrics-focus #nowLyrics p.line.active .k{
  opacity:1!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:scale(1.018)!important;
  text-shadow:0 0 24px rgba(255,255,255,.30)!important;
}

/* Barra de progreso siempre visible dentro del borde inferior del player. */
.player{
  --miniProgressHeight:4px;
  padding-bottom:calc(9px + var(--miniProgressHeight))!important;
}
.player .progress{
  --p:0%;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:var(--miniProgressHeight)!important;
  margin:0!important;
  padding:0!important;
  z-index:30!important;
  overflow:visible!important;
  background:linear-gradient(90deg,
    var(--miniProgressActive) 0%,
    var(--miniProgressActive) var(--p),
    var(--miniProgressTrack) var(--p),
    var(--miniProgressTrack) 100%)!important;
  pointer-events:none!important;
}
.player .progress>span{display:none!important}
.player .range--mini{
  position:absolute!important;
  inset:-6px 0!important;
  width:100%!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  opacity:.001!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Idioma y menú comparten eje, tamaño y margen derecho. */
.topbar__actions{
  align-items:center!important;
}
.topbar__actions .topbar__menuStack{
  align-self:center!important;
  transform:none!important;
}
#btnTopLangToggle,#btnMenu{
  align-self:center!important;
  margin:0!important;
}
#topLangSeg{
  top:50%!important;
  transform-origin:right center!important;
}
#topLangSeg.is-open{transform:translate(0,-50%) scale(1)!important}

@media(max-width:700px){
  .contextbar{padding-inline:8px!important}
  .contextbar__crumb{font-size:11px!important;line-height:1.25!important}
  #nowLyrics{padding-block:clamp(130px,33vh,300px)!important}
}
@media(prefers-reduced-motion:reduce){
  #viewNow.is-lyrics-focus #nowLyrics p.line{transition:none!important}
  #nowLyrics{scroll-behavior:auto!important}
}


/* =========================================================
   AUDIO RELATOS · base v09 r18
   Paneles de contenido realmente fullscreen, sin fugas de
   capas inferiores y con controles siempre visibles.
   ========================================================= */

/* La vista activa funciona como una placa opaca de seguridad: aunque el panel
   se arrastre unos píxeles, nunca queda visible la playlist, el footer ni otra
   sección de menor z-index. */
#viewNow.is-focus{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:2147482000!important;
  isolation:isolate!important;
  background:rgba(7,12,24,.96)!important;
}
#viewNow.is-focus::before{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:rgba(7,12,24,.96)!important;
  backdrop-filter:blur(22px) saturate(.82)!important;
  -webkit-backdrop-filter:blur(22px) saturate(.82)!important;
}

/* Cada hoja ocupa exactamente el viewport. El gesto ya no modifica top/bottom:
   utiliza translate, por lo que el tamaño y el borde inferior permanecen firmes. */
#viewNow.is-focus .nowHero__panel,
#viewNow.is-focus .nowFocusPanel,
#viewNow.is-art-focus .nowFocusPanel--art{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  box-sizing:border-box!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:max(12px,env(safe-area-inset-top)) clamp(18px,5vw,52px) max(14px,env(safe-area-inset-bottom))!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  z-index:2!important;
  background:rgba(7,12,24,.90)!important;
  backdrop-filter:blur(22px) saturate(.82)!important;
  -webkit-backdrop-filter:blur(22px) saturate(.82)!important;
  translate:0 var(--sheet-translate-y,0px)!important;
  transition:translate .25s cubic-bezier(.22,.8,.28,1),opacity .18s ease!important;
}
#viewNow.is-focus .nowHero__panel[hidden],
#viewNow.is-focus .nowFocusPanel[hidden]{display:none!important}
#viewNow.is-focus .nowHero__panel:not([hidden]),
#viewNow.is-focus .nowFocusPanel:not([hidden]){
  animation:focusPanelFullIn .26s cubic-bezier(.16,.84,.28,1) both!important;
}
@keyframes focusPanelFullIn{
  from{transform:translate3d(0,28px,0);opacity:.68}
  to{transform:translate3d(0,0,0);opacity:1}
}
#viewNow.is-focus .nowHero__panel.is-dragging,
#viewNow.is-focus .nowFocusPanel.is-dragging{
  animation:none!important;
  transition:none!important;
  user-select:none!important;
}
#viewNow.is-focus .nowHero__panel.is-dismissing,
#viewNow.is-focus .nowFocusPanel.is-dismissing{
  animation:none!important;
  transition:translate .23s ease-in,opacity .18s ease!important;
  opacity:.96!important;
}

/* Encabezados y cierres nunca se desplazan fuera del viewport. */
#viewNow.is-lyrics-focus .lyrics__head--focus,
#viewNow .nowFocusPanel__head{
  position:relative!important;
  top:auto!important;
  z-index:50!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 0 10px!important;
  background:transparent!important;
  border:0!important;
}
#viewNow .nowFocusPanel__close,
#viewNow .lyrics__close{
  position:relative!important;
  z-index:60!important;
  flex:0 0 40px!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* El contenido toma solo el espacio entre encabezado y controles inferiores. */
#viewNow.is-lyrics-focus .nowHero__lyrics,
#viewNow .nowArtworkViewer,
#viewNow .nowMapMount{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
#viewNow.is-lyrics-focus #nowLyrics{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
#viewNow .nowArtworkViewer{
  display:flex!important;
  flex-direction:column!important;
}
#viewNow .nowArtworkStage{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
}
#viewNow .nowPanelFooterTools,
#viewNow .lyricsFocusFooter{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  z-index:55!important;
  margin-top:8px!important;
  padding:8px 0 max(4px,env(safe-area-inset-bottom))!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#viewNow.is-map-focus .nowMapMount{
  overflow:auto!important;
  padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
}
#viewNow.is-map-focus #routeMapWrap .mapTools{
  position:sticky!important;
  bottom:0!important;
  z-index:55!important;
  background:rgba(7,12,24,.92)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

/* No se reserva ninguna franja para reproductor o footer bajo una hoja. */
body.has-now-sheet .player,
body.has-now-sheet .bottomnav,
body.has-now-sheet .contextbar,
body.has-now-sheet .topbar{
  display:none!important;
}
body.has-now-sheet{
  overflow:hidden!important;
  background:rgba(7,12,24,.96)!important;
}

@media(max-width:700px){
  #viewNow.is-focus .nowHero__panel,
  #viewNow.is-focus .nowFocusPanel,
  #viewNow.is-art-focus .nowFocusPanel--art{
    padding:max(10px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom))!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #viewNow.is-focus .nowHero__panel,
  #viewNow.is-focus .nowFocusPanel{
    animation:none!important;
    transition:none!important;
  }
}

/* La animación genérica de cambio de vista no debe transformar el contenedor
   del panel: un ancestro transformado altera el anclaje fixed de sus hojas. */
#viewNow.is-focus{
  animation:none!important;
  transform:none!important;
  translate:none!important;
  opacity:1!important;
}


/* =========================================================
   AUDIO RELATOS · v20 controles de reproducción y paneles
   Consolidación final: una sola superficie visual para NOW,
   controles coherentes y gesto de cierre desde media pantalla.
   ========================================================= */

/* Elimina cualquier placa azul heredada bajo la navegación del reproductor. */
#viewNow .nowHero,
#viewNow .nowHero__meta,
#viewNow .nowTitleActions,
#viewNow .nowSectionNav,
#viewNow .nowHero__controls{
  background:transparent!important;
  box-shadow:none!important;
  isolation:auto!important;
}
#viewNow .nowHero__meta::before,
#viewNow .nowHero__meta::after,
#viewNow .nowHero__controls::before,
#viewNow .nowHero__controls::after,
#viewNow .nowSectionNav::before,
#viewNow .nowSectionNav::after{
  display:none!important;
  content:none!important;
}
#viewNow .nowHero__controls{position:relative!important;z-index:3!important}
#viewNow .nowTitleActions{position:relative!important;z-index:3!important}

/* Cinco controles equilibrados: auto, anterior, play, siguiente y sonido. */
#viewNow .nowHero__controls{
  width:min(100%,430px)!important;
  display:grid!important;
  grid-template-columns:48px 54px 76px 54px 48px!important;
  justify-content:center!important;
  align-items:center!important;
  gap:clamp(5px,2.2vw,14px)!important;
}
#viewNow .nowHero__controls .playbackOptionBtn{
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  color:rgba(255,255,255,.66)!important;
}
#viewNow .nowHero__controls .playbackOptionBtn.is-active{color:#fff!important}
#viewNow .nowHero__controls .playbackOptionBtn.is-active::after,
.player .playbackOptionBtn.is-active::after{
  content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;
  transform:translateX(-50%);background:currentColor;
}
.playbackOptionBtn{position:relative!important}

/* Créditos integrados al borde inferior del bloque NOW. */
#viewNow .nowHero__credits{
  order:7!important;
  width:100%!important;
  margin-top:18px!important;
  padding:10px 2px 0!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.56)!important;
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:450!important;
  letter-spacing:.01em!important;
  overflow-wrap:anywhere!important;
}
#viewNow .nowHero__credits[hidden]{display:none!important}

/* Marquee del audio activo en NOW y en el footer. */
#viewNow .nowHero__title,
#viewNow .nowHero__sub{
  display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent 100%);
}
#viewNow .nowHero__title.is-marquee,
#viewNow .nowHero__sub.is-marquee{text-overflow:clip!important}
#viewNow .nowHero__title.is-marquee>span,
#viewNow .nowHero__sub.is-marquee>span{
  display:inline-block!important;padding-right:44px!important;will-change:transform;
  animation:marqueeScroll var(--marqueeDur,14s) linear infinite;animation-play-state:paused;
}
#viewNow .nowHero.is-playing .nowHero__title.is-marquee>span,
#viewNow .nowHero.is-playing .nowHero__sub.is-marquee>span{animation-play-state:running}

/* Footer: controles de auto y sonido disponibles junto al play. */
.player .controls #miniAutoNext,
.player .controls #miniMute{display:inline-flex!important}
.player .playbackOptionBtn{color:var(--muted)!important;background:transparent!important;border-color:transparent!important}
.player .playbackOptionBtn.is-active{color:var(--text)!important}
footer.player:not(.is-hidden):not(.is-empty) .playbackOptionBtn{color:rgba(255,255,255,.68)!important;background:transparent!important}
footer.player:not(.is-hidden):not(.is-empty) .playbackOptionBtn.is-active{color:#fff!important}

/* Tooltip contextual, anclado visualmente al control pulsado. */
.controlTooltip{
  position:fixed!important;left:var(--tooltip-x,50%)!important;top:var(--tooltip-y,50%)!important;z-index:2147483646!important;
  max-width:min(280px,calc(100vw - 24px));padding:8px 11px;border:1px solid rgba(255,255,255,.16);border-radius:8px;
  background:rgba(7,12,24,.96);color:#fff;font-size:12px;line-height:1.25;font-weight:650;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transform:translate(-50%,-100%) translateY(5px);pointer-events:none;
  transition:opacity .16s ease,transform .18s ease;
}
.controlTooltip.is-show{opacity:1;transform:translate(-50%,-100%) translateY(0)}
.controlTooltip[hidden]{display:none!important}

/* Paneles: tirador amplio y cierres unificados. */
.nowSheetHandle{
  position:relative!important;display:block!important;flex:0 0 48px!important;width:100%!important;height:48px!important;
  min-height:48px!important;margin:calc(-1 * max(10px,env(safe-area-inset-top))) 0 2px!important;
  cursor:grab!important;touch-action:none!important;z-index:80!important;
}
.nowSheetHandle::before{
  content:"";position:absolute;left:50%;top:17px;width:54px;height:5px;border-radius:999px;
  transform:translateX(-50%);background:rgba(255,255,255,.58);
}
.nowSheetHandle:active{cursor:grabbing!important}
#viewNow .nowFocusPanel__close,
#viewNow .lyrics__close{
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  display:grid!important;place-items:center!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;
}
#viewNow .nowFocusPanel__close .svgicon,
#viewNow .lyrics__close .svgicon{
  width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;
}
#viewNow.is-focus .nowHero__panel,
#viewNow.is-focus .nowFocusPanel{touch-action:pan-y!important;will-change:translate!important}
#viewNow.is-focus .nowHero__panel.is-dragging,
#viewNow.is-focus .nowFocusPanel.is-dragging{cursor:grabbing!important}

@media(max-width:700px){
  /* Iconos de cabecera al tamaño de la navegación estándar móvil. */
  #btnTopLangToggle,#btnMenu{
    width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
  }
  #btnTopLangToggle .svgicon,#btnMenu .svgicon{
    width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
  }

  #viewNow .nowHero__controls{
    grid-template-columns:44px 50px 70px 50px 44px!important;
    gap:clamp(3px,1.8vw,9px)!important;
  }
  #viewNow .nowHero__controls .playbackOptionBtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  #viewNow .nowHero__controls .playbackOptionBtn .svgicon{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}

  .player{padding-inline:8px!important}
  .player .now__meta{max-width:none!important}
  .player .controls{gap:0!important;flex:0 0 auto!important}
  .player .controls #miniAutoNext,
  .player .controls #miniMute{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .player .controls #miniAutoNext .svgicon,
  .player .controls #miniMute .svgicon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important}
  .player .controls #play{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  .player .now__cover{width:46px!important;height:46px!important}
}

@media(max-width:390px){
  #viewNow .nowHero__controls{
    grid-template-columns:40px 46px 66px 46px 40px!important;
    gap:2px!important;
  }
  #viewNow .nowHero__controls .playbackOptionBtn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .player .now__cover{width:42px!important;height:42px!important}
  .player .controls #miniAutoNext,
  .player .controls #miniMute{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  .player .controls #play{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
}

@media(prefers-reduced-motion:reduce){
  #viewNow .nowHero__title.is-marquee>span,#viewNow .nowHero__sub.is-marquee>span{animation:none!important}
  .controlTooltip{transition:none!important}
}

/* Corrección de apilado final: ningún elemento del reproductor queda visible
   detrás de una hoja de contenido y el tirador conserva solo su línea central. */
#viewNow.is-focus .nowHero__back,
#viewNow.is-focus .nowHero__art,
#viewNow.is-focus .nowHero__meta{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#viewNow.is-focus .nowHero__panel,
#viewNow.is-focus .nowFocusPanel,
#viewNow.is-art-focus .nowFocusPanel--art{
  background:rgba(7,12,24,.985)!important;
}
.nowSheetHandle{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.nowSheetHandle::after{display:none!important;content:none!important}


/* =========================================================
   AUDIO RELATOS · v21.1 continuidad NOW y tooltips móviles
   ========================================================= */

/* Una única superficie cubre tanto el viewport como el contenido desplazable.
   El exceso evita cortes causados por las barras dinámicas de Safari/Chrome. */
.app.is-now,
.app.is-now .main,
.view[data-view="now"].is-active{
  background:#080b18!important;
}
.view[data-view="now"].is-active{
  min-height:100vh!important;
  min-height:100dvh!important;
}
.view[data-view="now"].is-active > .nowPlayerBackdrop{
  position:fixed!important;
  top:-14vh!important;
  right:-8vw!important;
  bottom:-14vh!important;
  left:-8vw!important;
  width:auto!important;
  height:auto!important;
  min-height:128vh!important;
  min-height:128dvh!important;
  background:#080b18!important;
  overflow:hidden!important;
}
.view[data-view="now"].is-active > .nowPlayerBackdrop::after{
  inset:-2px!important;
  background:linear-gradient(180deg,rgba(6,10,28,.25),rgba(6,10,28,.82) 56%,#080b18 100%)!important;
}
.view[data-view="now"].is-active > .nowPlayerBackdrop img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:128vh!important;
  min-height:128dvh!important;
}

/* El tooltip se posiciona con su caja real, no mediante una traslación vertical
   que podía sacarlo fuera de pantalla. */
.controlTooltip{
  left:var(--tooltip-x,50%)!important;
  top:var(--tooltip-y,12px)!important;
  width:max-content!important;
  max-width:min(280px,calc(100vw - 24px))!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  transform:translateX(-50%) translateY(5px)!important;
}
.controlTooltip.is-show{
  transform:translateX(-50%) translateY(0)!important;
}

/* Texto sincronizado: cierre fijo en la esquina superior derecha y controles
   de tipografía siempre contenidos dentro del viewport. */
#viewNow.is-lyrics-focus .nowHero__panel{
  position:fixed!important;
}
#viewNow.is-lyrics-focus .nowHero__lyrics{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
  padding-bottom:72px!important;
}
#viewNow.is-lyrics-focus .lyrics__head--focus{
  position:relative!important;
  padding-right:62px!important;
  min-height:52px!important;
}
#viewNow.is-lyrics-focus .lyrics__close{
  position:fixed!important;
  top:max(12px,env(safe-area-inset-top))!important;
  right:max(14px,env(safe-area-inset-right))!important;
  z-index:2147482500!important;
  margin:0!important;
}
#viewNow.is-lyrics-focus #nowLyrics{
  flex:1 1 auto!important;
  min-height:0!important;
  padding-bottom:86px!important;
  scroll-padding-bottom:94px!important;
}
#viewNow.is-lyrics-focus .lyricsFocusFooter{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:80!important;
  min-height:62px!important;
  margin:0!important;
  padding:8px 0 max(8px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,rgba(7,12,24,0),rgba(7,12,24,.94) 30%,#070c18 72%)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#viewNow.is-lyrics-focus .lyricsFontControl,
#viewNow.is-lyrics-focus .lyricsFontValue{
  position:relative!important;
  z-index:1!important;
}

@media(max-width:390px){
  #viewNow.is-lyrics-focus .lyrics__head--focus{padding-right:54px!important}
  #viewNow.is-lyrics-focus .lyrics__close{
    top:max(10px,env(safe-area-inset-top))!important;
    right:max(10px,env(safe-area-inset-right))!important;
  }
  .controlTooltip{max-width:calc(100vw - 20px)!important}
}

/* La especificidad histórica de #viewNow.is-focus no debe reintroducir otro azul. */
#viewNow.is-active,
#viewNow.is-active.is-focus{
  background:#080b18!important;
}


/* =========================================================
   AUDIO RELATOS · v21.2 cierres táctiles y tooltips breves
   ========================================================= */
.controlTooltip{
  transition-duration:.11s!important;
}

/* Los botones de cierre quedan sobre el tirador y cualquier contenido del panel. */
#viewNow.is-focus .nowFocusPanel__close,
#viewNow.is-lyrics-focus .lyrics__close{
  position:fixed!important;
  top:max(12px,env(safe-area-inset-top))!important;
  right:max(14px,env(safe-area-inset-right))!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
#viewNow.is-focus .nowFocusPanel__close::before,
#viewNow.is-lyrics-focus .lyrics__close::before{
  content:""!important;
  position:absolute!important;
  inset:-4px!important;
  border-radius:999px!important;
}
#viewNow.is-focus .nowFocusPanel__close:active,
#viewNow.is-lyrics-focus .lyrics__close:active{
  transform:scale(.94)!important;
}
#viewNow.is-focus .nowSheetHandle{
  z-index:70!important;
}
@media(max-width:390px){
  #viewNow.is-focus .nowFocusPanel__close,
  #viewNow.is-lyrics-focus .lyrics__close{
    top:max(10px,env(safe-area-inset-top))!important;
    right:max(10px,env(safe-area-inset-right))!important;
  }
}


/* =========================================================
   AUDIO RELATOS · v21.3 cierre efectivo y audio persistente
   ========================================================= */

#app > #audio{
  position:fixed!important;
  width:1px!important;
  height:1px!important;
  left:-9999px!important;
  bottom:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
#viewNow.is-focus .nowSheetHandle{pointer-events:none!important}
#viewNow.is-focus .nowFocusPanel__head,
#viewNow.is-lyrics-focus .lyrics__head--focus{pointer-events:auto!important}
#viewNow.is-focus [data-now-panel-close],
#viewNow.is-focus .nowFocusPanel__close,
#viewNow.is-lyrics-focus .lyrics__close{
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:0!important;
  border:0!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
#viewNow.is-focus [data-now-panel-close]::before{inset:-8px!important}

/* =========================================================
   AUDIO RELATOS · v21.4 contención horizontal de NOW
   El backdrop conserva el sobreencuadre mediante escala visual,
   sin aumentar el ancho desplazable de la vista ni sus paneles.
   ========================================================= */

#viewNow,
#viewNow .nowHero,
#viewNow .nowHero__meta,
#viewNow .nowTitleActions,
#viewNow .nowSectionNav,
#viewNow .nowProgress,
#viewNow .nowHero__controls,
#viewNow .nowHero__panel,
#viewNow .nowFocusPanel,
#viewNow .nowHero__lyrics,
#viewNow .nowArtworkViewer,
#viewNow .nowMapMount{
  max-width:100%!important;
  min-width:0!important;
}

/* La vista NOW puede desplazarse verticalmente, pero nunca lateralmente. */
#viewNow{
  overflow-x:clip!important;
  overscroll-behavior-x:none!important;
  touch-action:pan-y!important;
}

/* El fondo ocupa exactamente el ancho del viewport. La ampliación necesaria
   para el blur se realiza con transform, dentro de un contenedor recortado. */
.view[data-view="now"].is-active > .nowPlayerBackdrop{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  contain:paint!important;
}
.view[data-view="now"].is-active > .nowPlayerBackdrop img{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:100%!important;
  transform:scale(1.16)!important;
  transform-origin:center center!important;
}

/* Los paneles y sus áreas desplazables conservan solo scroll vertical. */
#viewNow.is-focus .nowHero__panel,
#viewNow.is-focus .nowFocusPanel,
#viewNow.is-lyrics-focus .nowHero__lyrics,
#viewNow.is-lyrics-focus #nowLyrics,
#viewNow.is-art-focus .nowArtworkViewer,
#viewNow.is-map-focus .nowMapMount{
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}
#viewNow.is-map-focus .nowMapMount{
  overflow-y:auto!important;
}

/* Controles y metadatos no pueden ensanchar el nowHero por contenido interno. */
#viewNow .nowHero > *,
#viewNow .nowHero__meta > *,
#viewNow .nowTitleActions > *,
#viewNow .nowFocusPanel__head > *,
#viewNow .lyrics__head--focus > *{
  min-width:0!important;
  max-width:100%!important;
}


/* =========================================================
   AUDIO RELATOS · v21.5 estabilidad visual, Media Session y vidrio contextual
   ========================================================= */

/* El marquee se compone en su propia capa. Al retirar mask-image del bloque
   padre, Safari/Chrome móvil no vuelven a rasterizar los iconos vecinos. */
#viewNow .nowHero__title,
#viewNow .nowHero__sub{
  width:100%!important;
  transform:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  contain:layout paint!important;
  isolation:isolate!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
#viewNow .nowHero__title.is-marquee>span,
#viewNow .nowHero__sub.is-marquee>span{
  position:relative!important;
  max-width:none!important;
  transform:translate3d(0,0,0);
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
#viewNow .nowTitleActions,
#viewNow .nowSectionNav,
#viewNow .nowShareBtn,
#viewNow .nowSectionNav__btn,
#viewNow .nowProgress,
#viewNow .nowHero__controls{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
#viewNow .nowShareBtn,
#viewNow .nowSectionNav__btn,
#viewNow .nowHero__controls button{
  translate:none!important;
}
#viewNow .nowProgress__times span{
  display:inline-block!important;
  min-width:3.4em!important;
  font-variant-numeric:tabular-nums!important;
}
#viewNow .nowProgress__times span:last-child{text-align:right!important}

/* Flecha superior: misma presencia visual, con una superficie táctil mayor. */
#viewNow .nowHero__back{
  width:52px!important;
  height:44px!important;
  min-width:52px!important;
  min-height:44px!important;
  display:grid!important;
  place-items:center!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
#viewNow .nowHero__back::before{
  content:""!important;
  position:absolute!important;
  inset:-3px!important;
}

/* Contextbar de vidrio: deja percibir el contenido inferior sin una placa sólida. */
.contextbar{
  background:rgba(8,11,24,.16)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.06)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%)!important;
}
[data-theme="light"] .contextbar{
  background:rgba(255,255,255,.20)!important;
  border-bottom-color:rgba(17,24,39,.08)!important;
  box-shadow:0 8px 24px rgba(17,24,39,.04)!important;
}

@media(prefers-reduced-motion:reduce){
  #viewNow .nowHero__title.is-marquee>span,
  #viewNow .nowHero__sub.is-marquee>span{transform:none!important}
}


/* =========================================================
   AUDIO RELATOS · v21.7 enlaces QR cortos y sitios oficiales
   ========================================================= */
.qrLinkDialog[hidden]{display:none!important}
.qrLinkDialog{
  position:fixed;
  inset:0;
  z-index:10120;
  display:grid;
  place-items:center;
  padding:18px;
}
.qrLinkDialog__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,18,.74);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.qrLinkDialog__panel{
  position:relative;
  width:min(430px,100%);
  padding:26px 22px 20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in oklab,var(--bg) 94%,transparent);
  color:var(--text);
  box-shadow:0 28px 90px rgba(0,0,0,.46);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
}
.qrLinkDialog__close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}
.qrLinkDialog__icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:999px;
  background:color-mix(in oklab,var(--accent) 18%,transparent);
  color:var(--accent);
}
.qrLinkDialog__icon .svgicon{width:23px;height:23px}
.qrLinkDialog[data-mode="blocked"] .qrLinkDialog__icon{
  background:rgba(239,68,68,.13);
  color:#ef4444;
}
.qrLinkDialog[data-mode="short"] .qrLinkDialog__icon{
  background:rgba(245,158,11,.14);
  color:#f59e0b;
}
.qrLinkDialog__title{
  padding-right:40px;
  font-size:22px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.025em;
}
.qrLinkDialog__text{
  margin-top:10px;
  color:var(--muted);
  font-size:15px;
  line-height:1.48;
}
.qrLinkDialog__host{
  margin-top:14px;
  padding:10px 12px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:color-mix(in oklab,var(--surface) 74%,transparent);
  color:var(--text);
  font-size:13px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.qrLinkDialog__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}
.qrLinkDialog__actions .btn{min-height:44px;text-decoration:none}
body.is-qr-link-open{overflow:hidden}
@media(max-width:520px){
  .qrLinkDialog{place-items:end center;padding:0}
  .qrLinkDialog__panel{
    width:100%;
    padding:25px 18px max(18px,env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0;
    border-bottom:0;
  }
  .qrLinkDialog__actions{display:grid;grid-template-columns:1fr 1fr}
  .qrLinkDialog[data-mode="blocked"] .qrLinkDialog__actions{grid-template-columns:1fr}
  .qrLinkDialog__actions .btn{width:100%;justify-content:center}
}


/* =========================================================
   AUDIO RELATOS · v21.8 transición breve tras escanear QR
   ========================================================= */
.qrScanLoader[hidden]{display:none!important}
.qrScanLoader{
  position:fixed;
  inset:0;
  z-index:10180;
  display:grid;
  place-items:center;
  padding:20px;
  opacity:0;
  transition:opacity .15s ease;
}
.qrScanLoader.is-visible{opacity:1}
.qrScanLoader__backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,8,23,.58);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.qrScanLoader__card{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:58px;
  max-width:min(320px,calc(100vw - 40px));
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(9,18,42,.82);
  color:#fff;
  box-shadow:0 18px 54px rgba(0,0,0,.30);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.qrScanLoader__spinner{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:2.5px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:999px;
  animation:qrScanLoaderSpin .7s linear infinite;
}
.qrScanLoader__label{
  min-width:0;
  font-size:14px;
  line-height:1.25;
  font-weight:780;
  letter-spacing:.005em;
}
body.is-qr-processing{overflow:hidden}
@keyframes qrScanLoaderSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .qrScanLoader{transition:none}
  .qrScanLoader__spinner{animation-duration:1.2s}
}

/* ===== Audio Relatos v34: compartir e instalar ===== */
.actionSheet[hidden],.installTooltip[hidden]{display:none !important}
.actionSheet{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.actionSheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.46)}
[data-theme="light"] .actionSheet__backdrop{background:rgba(12,18,34,.16)}
.actionSheet__panel{
  position:relative;
  width:min(560px,100%);
  max-height:min(82svh,720px);
  overflow:auto;
  padding:16px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  border:1px solid var(--border);
  border-radius:24px 24px 0 0;
  background:var(--menusheetBg);
  color:var(--text);
  box-shadow:0 -16px 50px rgba(0,0,0,.22);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  transform:translateY(18px);
  opacity:0;
  transition:transform .18s ease,opacity .18s ease;
}
.actionSheet.is-open .actionSheet__panel{transform:translateY(0);opacity:1}
.actionSheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.actionSheet__title{font-size:20px;line-height:1.1;font-weight:950;letter-spacing:-.02em}
.actionSheet__subtitle{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.35;max-width:42ch}
.socialGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.socialAction{
  appearance:none;
  min-width:0;
  min-height:104px;
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px 8px;
  background:var(--card);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  font:inherit;
  font-size:12px;
  font-weight:850;
  text-align:center;
  cursor:pointer;
}
.socialAction:hover{background:var(--card2);transform:translateY(-1px)}
.socialAction:active{transform:scale(.98)}
.socialAction__icon{width:46px;height:46px;border:1px solid var(--border);border-radius:15px;background:var(--card2);display:grid;place-items:center}
.socialAction__icon .svgicon{width:23px;height:23px;min-width:23px;min-height:23px}
.installGuide{border:1px solid var(--border);border-radius:18px;background:var(--card);padding:15px;color:var(--text);font-size:14px;line-height:1.5}
.installGuide ol{margin:10px 0 0;padding-left:22px}
.installGuide li+li{margin-top:6px}
.installGuide__retry{width:100%;margin-top:12px;min-height:48px}
.installTooltip{
  position:fixed;
  z-index:2147483647;
  left:50%;
  bottom:calc(var(--navH) + var(--safeB) + 18px);
  width:min(460px,calc(100vw - 28px));
  transform:translate(-50%,14px);
  opacity:0;
  pointer-events:none;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in oklab,var(--card) 94%,transparent);
  color:var(--text);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:13px;
  line-height:1.4;
  font-weight:750;
  transition:opacity .2s ease,transform .2s ease;
}
.installTooltip.is-show{opacity:1;transform:translate(-50%,0)}
.app:not(.is-player-hidden) ~ .installTooltip{bottom:calc(var(--playerH) + var(--navH) + var(--safeB) + 18px)}
@media(max-width:420px){
  .socialGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .socialAction{min-height:92px}
  .topbar__actions{gap:5px}
}


/* =========================================================
   AUDIO RELATOS · v36 reproducción móvil e integración iframe
   ========================================================= */

/* Dos marcas independientes en acceso directo. */
.brandCluster{display:flex;align-items:center;gap:clamp(3px,.45vw,5px);min-width:0;max-width:min(520px,62vw)}
.brandButton{appearance:none;border:0;background:transparent;color:var(--text);display:flex;align-items:center;min-width:0;padding:0;margin:0;text-decoration:none;cursor:pointer}
.brandButton:focus-visible{outline:2px solid var(--brand);outline-offset:5px;border-radius:5px}
.brandButton--museum{width:clamp(116px,17vw,196px);padding-right:clamp(4px,.55vw,6px);border-right:1px solid var(--border)}
.brandButton--museum img{display:block;width:100%;height:auto;max-height:56px;object-fit:contain;color:var(--text)}
.brandButton--audio{max-width:min(210px,26vw);gap:0;text-align:left}
.brandButton--audio .brand__logo{display:block;width:min(142px,24vw)}
.brandButton--audio .brand__logo img{display:block;width:100%;height:auto;max-height:62px;object-fit:contain}
.brand__appIcon{display:none;width:42px;height:42px;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.14)}
.brand__appIcon img{display:block;width:100%;height:100%;object-fit:cover}
.brandButton--audio .brand__text{display:none}
@media(max-width:720px){
  .brandCluster{gap:3px;max-width:58vw}
  .brandButton--museum{width:min(108px,28vw);padding-right:4px}
  .brandButton--audio{max-width:min(132px,29vw)}
  .brandButton--audio .brand__logo{width:min(124px,29vw)}
}
@media(max-width:390px){
  .brandButton--museum{width:94px}
  .brandButton--audio .brand__logo{width:104px}
}

/* Cabecera del reproductor: cerrar a la izquierda y recorrido desplazable. */
#viewNow .nowHero__topline{order:-2;width:100%;height:44px;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;margin:0 0 8px;flex:0 0 auto}
#viewNow .nowHero__back{position:relative!important;inset:auto!important;align-self:center!important;justify-self:start!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;transform:none!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
#viewNow .nowHero__back .svgicon{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important}
#viewNow .nowHero__topline .nowHero__kicker{min-width:0;max-width:100%;font-size:12px;line-height:1.2;font-weight:780;letter-spacing:.055em;color:rgba(255,255,255,.76);white-space:nowrap;overflow:hidden;text-overflow:clip;margin:0}
#viewNow .nowHero__topline .nowHero__kicker.is-marquee .marquee__text{display:inline-block;width:max-content;max-width:none;animation:marqueeShift var(--marqueeDur,14s) ease-in-out infinite alternate;will-change:transform}
#viewNow .nowHero__art{margin-top:0!important;margin-bottom:16px!important}
#viewNow .nowHero__meta{margin-top:0!important}
@media(max-height:760px) and (max-width:600px){
  #viewNow .nowHero{padding-top:max(8px,env(safe-area-inset-top))!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}
  #viewNow .nowHero__topline{margin-bottom:4px}
  #viewNow .nowHero__art{width:min(66vw,300px)!important;margin-bottom:11px!important}
  #viewNow .nowHero__title{font-size:clamp(18px,4.8vw,23px)!important;margin-top:2px!important}
  #viewNow .nowHero__sub{margin-top:2px!important}
  #viewNow .nowProgress{margin-top:13px!important}
  #viewNow .nowHero__controls{margin-top:2px!important}
  #viewNow .nowSectionNav{margin-top:14px!important}
}

/* Lista de recorridos: una ruta por fila, sin grid. */
.libraryGroup__list{display:flex;flex-direction:column;gap:0;margin-top:6px;border-top:1px solid var(--border)}
.libraryGroup__list .gridCard{width:100%;min-height:96px;display:grid!important;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:center;padding:10px 4px!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left}
.libraryGroup__list .gridCard:hover{background:color-mix(in oklab,var(--text) 4%,transparent)!important}
.libraryGroup__list .gridCard__cover{width:78px;height:78px;aspect-ratio:1;border-radius:6px!important}
.libraryGroup__list .gridCard__play{width:32px;height:32px;right:6px;bottom:6px}
.libraryGroup__list .gridCard__body{min-width:0;padding:0!important}
.libraryGroup__list .gridCard__title{font-size:16px;line-height:1.25;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libraryGroup__list .gridCard__desc{font-size:13px;line-height:1.4;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--muted)}
@media(max-width:440px){
  .libraryGroup__list .gridCard{grid-template-columns:66px minmax(0,1fr);min-height:84px;gap:11px}
  .libraryGroup__list .gridCard__cover{width:66px;height:66px}
}

/* Expandir reproductor desde la pista activa, junto al menú de tres puntos. */
.trackRow.has-expand{grid-template-columns:minmax(0,1fr) auto!important}
.trackRow__actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:0!important}
.trackRow__expandBtn,.trackRow__moreBtn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border:0!important;background:transparent!important;color:var(--muted)!important}
.trackRow__expandBtn{color:var(--brand)!important}
.trackRow__expandBtn .svgicon,.trackRow__moreBtn .svgicon{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important}
.trackRow__expandBtn:focus-visible,.trackRow__moreBtn:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 76%,#fff);outline-offset:0;border-radius:9px}
@media(max-width:380px){
  .trackRow__expandBtn,.trackRow__moreBtn{width:36px!important;height:38px!important;min-width:36px!important;min-height:38px!important}
  .trackRow__main{grid-template-columns:46px minmax(0,1fr)!important;gap:8px!important}
  .trackRow__cover{width:46px!important;height:46px!important}
}

/* Transiciones suaves: la placa de carga impide saltos entre secciones. */
.view.is-active{animation:viewSectionIn .26s cubic-bezier(.2,.75,.25,1) both}
@keyframes viewSectionIn{from{opacity:.25;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.sectionTransition{transition:opacity .16s ease,visibility .16s ease!important}
.sectionTransition__pill{min-width:170px;justify-content:center}

/* Modo iframe institucional. Se activa por ?embed=1 o por detección de frame. */
html.is-embedded,html.is-embedded body{width:100%;height:var(--embedded-viewport-h,100dvh);min-height:0;overflow:hidden}
html.is-embedded body{overscroll-behavior:none;background:transparent}
html.is-embedded .app{width:100%;height:var(--embedded-viewport-h,100dvh);min-height:0;overflow:hidden;background:var(--bg)}
html.is-embedded .brandButton--museum{display:none!important}
html.is-embedded .brandButton--audio .brand__logo--wordmark,html.is-embedded .brandButton--audio .brand__text{display:none!important}
html.is-embedded .brandButton--audio{width:44px;max-width:44px}
html.is-embedded .brand__appIcon{display:block}
html.is-embedded .brandCluster{max-width:44px;gap:0}
html.is-embedded #btnHomeScan,html.is-embedded #menuScanQr,html.is-embedded .bottomnav__item--scan{display:none!important}
html.is-embedded .bottomnav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html.is-embedded .topbar{padding-top:0!important}
html.is-embedded .topbar__row{min-height:58px;padding:6px 8px!important}
html.is-embedded .main{height:calc(var(--embedded-viewport-h,100dvh) - var(--topbar-live-h,var(--topbar-h)) - var(--navH) - var(--safeB));min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
html.is-embedded .main::-webkit-scrollbar{display:none}
html.is-embedded .view[data-view="route"].is-active,html.is-embedded .view[data-view="now"].is-active{height:var(--embedded-viewport-h,100dvh)!important;min-height:var(--embedded-viewport-h,100dvh)!important;max-height:var(--embedded-viewport-h,100dvh)!important}
html.is-embedded #viewNow .nowHero,html.is-embedded #viewNow.is-focus,html.is-embedded #viewNow.is-focus .nowHero__panel,html.is-embedded #viewNow.is-focus .nowFocusPanel{height:var(--embedded-viewport-h,100dvh)!important;min-height:var(--embedded-viewport-h,100dvh)!important;max-height:var(--embedded-viewport-h,100dvh)!important}
html.is-embedded .player{position:fixed!important;left:0!important;right:0!important;bottom:calc(var(--navH) + var(--safeB))!important;width:100%!important}
html.is-embedded .bottomnav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important}
html.is-embedded .contextbar{top:var(--topbar-live-h,var(--topbar-h))!important}
html.is-embedded .homeWelcome{min-height:calc(var(--embedded-viewport-h,100dvh) - var(--topbar-live-h,var(--topbar-h)) - var(--navH) - var(--safeB))!important}
html.is-embedded .qrModal,html.is-embedded .actionSheet,html.is-embedded .trackActionSheet,html.is-embedded .menuSheet{height:var(--embedded-viewport-h,100dvh);max-height:var(--embedded-viewport-h,100dvh)}
@media(prefers-reduced-motion:reduce){.view.is-active{animation:none}.nowHero__kicker.is-marquee .marquee__text{animation:none!important;transform:none!important}}

/* v36: ajustes finales de cabecera, tema y gesto del reproductor */
[data-theme="dark"] .brandButton--museum img{filter:invert(1) brightness(1.08)}
@media(max-width:560px){
  #btnInfo,#btnTheme{display:none!important}
  .brandCluster{max-width:calc(100vw - 148px)}
  .brandButton--museum{width:min(104px,27vw)}
  .brandButton--audio .brand__logo{width:min(112px,27vw)}
}
#viewNow.is-active{transform:translate3d(0,var(--now-dismiss-y,0),0);transition:transform .24s cubic-bezier(.22,.8,.28,1)}
#viewNow.is-active.is-player-dragging{transition:none!important;will-change:transform}
html.is-embedded #viewNow.is-active,html.is-embedded #viewNow.is-focus,html.is-embedded #viewNow.is-focus .nowHero__panel,html.is-embedded #viewNow.is-focus .nowFocusPanel{width:100%!important;max-width:100%!important}


/* ==========================================================
   v37 · Logo MNBA oficial + footer institucional desplazable
   - El footer vive dentro de Inicio, Explorar, Recorridos y detalle de ruta.
   - No aparece en Ahora suena ni en sus paneles de obra/texto/mapa.
   - No modifica el mini reproductor ni la navegación inferior fija.
   ========================================================== */

/* El SVG oficial adjunto es un emblema vertical; se dimensiona por altura
   para conservar su proporción y evitar que comprima Audio Relatos. */
.brandButton--museum{
  width:clamp(58px,6vw,70px)!important;
  min-width:58px;
  flex:0 0 auto;
  justify-content:flex-start;
  padding-right:clamp(7px,.8vw,10px)!important;
}
.brandButton--museum img{
  width:auto!important;
  height:clamp(48px,5vw,56px)!important;
  max-height:56px!important;
  object-fit:contain;
}
@media(max-width:560px){
  .brandButton--museum{width:56px!important;min-width:56px;padding-right:6px!important}
  .brandButton--museum img{height:48px!important;max-height:48px!important}
}
@media(max-width:360px){
  .brandButton--museum{width:51px!important;min-width:51px}
  .brandButton--museum img{height:44px!important;max-height:44px!important}
}

.mnbaFooter{
  color-scheme:dark;
  position:relative;
  overflow:hidden;
  margin:clamp(42px,8vw,78px) -14px calc(-1 * (var(--playerH) + var(--navH) + var(--safeB) + 18px));
  padding-bottom:calc(var(--playerH) + var(--navH) + var(--safeB) + 18px);
  background:#050505;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.18);
}
.app.is-player-hidden .mnbaFooter{
  margin-bottom:calc(-1 * (var(--navH) + var(--safeB) + 18px));
  padding-bottom:calc(var(--navH) + var(--safeB) + 18px);
}
/* Los paneles de reproducción no contienen este footer; esta regla es una
   salvaguarda adicional frente a futuros cambios del marcado. */
#viewNow .mnbaFooter{display:none!important}
.mnbaFooter::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--brand),rgba(108,124,255,.28) 56%,transparent);
}
.mnbaFooter__inner{
  width:min(100%,1180px);
  margin:0 auto;
  padding:clamp(30px,6vw,54px) clamp(18px,5vw,58px) clamp(30px,6vw,54px);
}
.mnbaFooter__main{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr);
  align-items:end;
  gap:clamp(30px,7vw,92px);
}
.mnbaFooter__brand{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,27px);
  min-width:0;
  color:#fff;
  text-decoration:none;
}
.mnbaFooter__logo{
  display:block;
  width:min(100%,clamp(270px,37vw,430px));
  height:auto;
  flex:0 1 430px;
  object-fit:contain;
  object-position:left center;
  filter:none;
}
.mnbaFooter__identity{display:flex;flex-direction:column;gap:8px;min-width:0}
.mnbaFooter__identity strong{
  font-size:clamp(16px,2.7vw,24px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.mnbaFooter__identity small{
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.mnbaFooter__visit p{
  max-width:34ch;
  margin:0 0 16px;
  color:rgba(255,255,255,.72);
  font-size:clamp(15px,2vw,18px);
  line-height:1.45;
}
.mnbaFooter__site{
  min-height:48px;
  padding:11px 15px 11px 17px;
  border:1px solid rgba(255,255,255,.68);
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:800;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.mnbaFooter__site svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.mnbaFooter__divider{
  height:1px;
  margin:clamp(28px,5vw,48px) 0 clamp(24px,4vw,34px);
  background:rgba(255,255,255,.18);
}
.mnbaFooter__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.mnbaFooter__socialLabel{
  margin-bottom:11px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.mnbaFooter__social{display:flex;flex-wrap:wrap;gap:9px}
.mnbaFooter__social a{
  width:46px;height:46px;
  border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;
  color:#fff;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.mnbaFooter__social svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.mnbaFooter__social .mnbaFooter__iconFill{fill:currentColor;stroke:none}
.mnbaFooter__social .mnbaFooter__iconFillDark{fill:#050505;stroke:none}
.mnbaFooter__meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  color:rgba(255,255,255,.55);
  font-size:12px;line-height:1.35;text-align:right;
}
.mnbaFooter a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(hover:hover){
  .mnbaFooter__site:hover{background:#fff;color:#050505;border-color:#fff;transform:translateY(-1px)}
  .mnbaFooter__social a:hover{background:#fff;color:#050505;border-color:#fff;transform:translateY(-2px)}
}
@media(max-width:680px){
  .mnbaFooter__main{grid-template-columns:1fr;align-items:start;gap:30px}
  .mnbaFooter__bottom{align-items:flex-start;flex-direction:column}
  .mnbaFooter__meta{align-items:flex-start;text-align:left}
  .mnbaFooter__site{width:100%}
}
@media(max-width:390px){
  .mnbaFooter__logo{width:100%;max-width:310px}
  .mnbaFooter__social a{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .mnbaFooter__site,.mnbaFooter__social a{transition:none}
}
/* En detalle de recorrido la propia vista ya termina sobre el mini reproductor;
   no necesita reservar nuevamente su altura dentro del footer. */
#viewRoute .mnbaFooter{
  margin-bottom:-18px;
  padding-bottom:0;
}


/* =========================================================
   AUDIO RELATOS · v37.1 ajustes de mapa, footer e iframe
   ========================================================= */

/* El nombre institucional se mantiene unido dentro de las bajadas del logo. */
.brand__subtitle,
.splash__desc{
  overflow-wrap:normal;
  word-break:normal;
}

/* Panel principal en reproducción: elimina la reserva visual inferior,
   manteniendo únicamente el safe area real del dispositivo. */
#viewNow .nowHero{
  padding-bottom:env(safe-area-inset-bottom)!important;
}

/* Identidad institucional más contenida. */
.mnbaFooter__logo{
  width:min(100%,clamp(185px,24vw,285px))!important;
  flex:0 1 285px!important;
}
@media(max-width:680px){
  .mnbaFooter__logo{width:min(100%,260px)!important;max-width:260px!important}
}
@media(max-width:390px){
  .mnbaFooter__logo{width:min(100%,225px)!important;max-width:225px!important}
}

/* Iconografía social normalizada: contorno para Instagram y relleno para
   Facebook, YouTube y Flickr. Evita heredar combinaciones fill/stroke rotas. */
.mnbaFooter__social .mnbaSocialIcon{
  width:23px!important;
  height:23px!important;
  overflow:visible;
  fill:none;
  stroke:none;
}
.mnbaFooter__social .mnbaSocialIcon--instagram rect,
.mnbaFooter__social .mnbaSocialIcon--instagram circle:not(.mnbaSocialIcon__dot){
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
}
.mnbaFooter__social .mnbaSocialIcon--instagram .mnbaSocialIcon__dot,
.mnbaFooter__social .mnbaSocialIcon--facebook path,
.mnbaFooter__social .mnbaSocialIcon--youtube .mnbaSocialIcon__body,
.mnbaFooter__social .mnbaSocialIcon--flickr circle{
  fill:currentColor;
  stroke:none;
}
.mnbaFooter__social .mnbaSocialIcon--youtube .mnbaSocialIcon__cutout{
  fill:#050505;
  stroke:none;
}
.mnbaFooter__social .mnbaSocialIcon--flickr .mnbaSocialIcon__secondary{opacity:.58}
@media(hover:hover){
  .mnbaFooter__social a:hover .mnbaSocialIcon--youtube .mnbaSocialIcon__cutout{fill:#fff}
}

/* En la incrustación institucional el footer se omite para no duplicar el
   cierre de mnba.gob.cl y el slide inicial ocupa solo parte del iframe. */
html.is-embedded .mnbaFooter{display:none!important}
html.is-embedded #viewHome .homeWelcome{
  min-height:clamp(390px,58dvh,560px)!important;
  height:clamp(390px,58dvh,560px)!important;
  padding-top:clamp(68px,10dvh,96px)!important;
  padding-bottom:clamp(34px,6dvh,58px)!important;
}
html.is-embedded #viewHome .homeWelcome__copy{transform:none!important}
@media(max-width:700px){
  html.is-embedded #viewHome .homeWelcome{
    min-height:clamp(420px,72dvh,610px)!important;
    height:clamp(420px,72dvh,610px)!important;
    padding-top:72px!important;
    padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
  }
}

/* =========================================================
   AUDIO RELATOS · v37.6 ajustes consolidados
   ========================================================= */

/* El botón de mapa solo existe visualmente cuando la pista activa lo habilita. */
#nowMapBtn[hidden],
#miniMap[hidden]{
  display:none!important;
}

/* Mini reproductor activo: recupera el banner azul institucional en todas las
   anchuras. Esta regla única evita que una definición genérica posterior cambie
   el color al navegar o al usar la app dentro de un iframe. */
footer.player:not(.is-hidden):not(.is-empty){
  background:var(--brand)!important;
  color:#fff!important;
  border-top:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
footer.player:not(.is-hidden):not(.is-empty) .now__title{
  color:#fff!important;
}
footer.player:not(.is-hidden):not(.is-empty) .now__artist{
  color:rgba(255,255,255,.86)!important;
}
footer.player:not(.is-hidden):not(.is-empty) .iconbtn,
footer.player:not(.is-hidden):not(.is-empty) .playbtn{
  color:#fff!important;
  border-color:transparent!important;
}
footer.player:not(.is-hidden):not(.is-empty) #play{
  background:transparent!important;
}

/* Cabecera final: conserva las dimensiones aprobadas, alinea ambos logos a la
   izquierda y sitúa la bajada en dos líneas bajo el conjunto completo. */
.topbar{
  padding-top:7px!important;
  padding-bottom:7px!important;
}
.topbar .brandCluster{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:2px!important;
  min-width:0!important;
  max-width:calc(100vw - 142px)!important;
  margin:0 auto 0 0!important;
  text-align:left!important;
}
.topbar .brandCluster__logos{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  align-self:flex-start!important;
}
.topbar .brandButton--museum,
.topbar .brandButton--audio{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-self:flex-start!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.topbar .brandButton--museum{
  width:42px!important;
  height:38px!important;
  min-width:42px!important;
  flex:0 0 42px!important;
}
.topbar .brandButton--museum img{
  width:42px!important;
  height:38px!important;
  max-width:42px!important;
  max-height:38px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.topbar .brandButton--audio{
  width:auto!important;
  min-width:0!important;
  max-width:110px!important;
}
.topbar .brandButton--audio .brand__logo,
.topbar.is-compact .brandButton--audio .brand__logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:min(100px,23vw)!important;
  max-width:100px!important;
  height:42px!important;
  max-height:42px!important;
  margin:0!important;
  transform-origin:left center!important;
}
.topbar .brandButton--audio .brand__logo img,
.topbar.is-compact .brandButton--audio .brand__logo img,
.topbar #brandCover,
.topbar.is-compact #brandCover{
  width:100%!important;
  height:100%!important;
  max-height:42px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
}
.topbar .brandCluster > .brand__subtitle{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  align-self:flex-start!important;
  width:max-content!important;
  max-width:100%!important;
  max-height:2.35em!important;
  margin:0!important;
  gap:0!important;
  color:color-mix(in oklab,var(--muted) 92%,var(--text))!important;
  font-size:clamp(7.1px,1.05vw,9.4px)!important;
  line-height:1.08!important;
  font-weight:560!important;
  letter-spacing:-.015em!important;
  text-align:left!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  overflow:hidden!important;
  opacity:.76!important;
  transform:translateY(0)!important;
  transform-origin:left top!important;
  transition:opacity .18s ease,max-height .24s ease,transform .24s ease,margin .24s ease!important;
}
.topbar .brand__subtitleLine{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
.topbar.is-compact .brandCluster{
  gap:0!important;
}
.topbar.is-compact .brandCluster > .brand__subtitle{
  opacity:0!important;
  max-height:0!important;
  margin-top:-2px!important;
  visibility:hidden!important;
  transform:translateY(-4px)!important;
  pointer-events:none!important;
}

/* En reproducción expandida y en la incrustación institucional se mantiene la
   cabecera mínima, sin repetir la bajada. */
.app.is-now .topbar .brandCluster > .brand__subtitle,
html.is-embedded .topbar .brandCluster > .brand__subtitle{
  display:none!important;
}
html.is-embedded .topbar .brandCluster{
  align-items:flex-start!important;
  max-width:44px!important;
  margin:0 auto 0 0!important;
}
html.is-embedded .topbar .brandCluster__logos{
  justify-content:flex-start!important;
  gap:0!important;
}
html.is-embedded .topbar .brandButton--audio .brand__logo{
  display:none!important;
}

@media(max-width:700px){
  .topbar .brandCluster{
    max-width:calc(100vw - 124px)!important;
    gap:1px!important;
  }
  .topbar .brandCluster__logos{gap:5px!important}
  .topbar .brandButton--museum{
    width:39px!important;
    height:36px!important;
    min-width:39px!important;
    flex-basis:39px!important;
  }
  .topbar .brandButton--museum img{
    width:39px!important;
    height:36px!important;
    max-width:39px!important;
    max-height:36px!important;
  }
  .topbar .brandButton--audio{max-width:100px!important}
  .topbar .brandButton--audio .brand__logo,
  .topbar.is-compact .brandButton--audio .brand__logo{
    width:min(92px,25vw)!important;
    max-width:92px!important;
    height:39px!important;
    max-height:39px!important;
  }
  .topbar .brandButton--audio .brand__logo img,
  .topbar.is-compact .brandButton--audio .brand__logo img,
  .topbar #brandCover,
  .topbar.is-compact #brandCover{
    max-height:39px!important;
  }
  .topbar .brandCluster > .brand__subtitle{
    font-size:clamp(7.4px,2.05vw,9.1px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
  }
}

@media(max-width:390px){
  .topbar{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  .topbar .brandCluster{max-width:calc(100vw - 116px)!important}
  .topbar .brandCluster__logos{gap:4px!important}
  .topbar .brandButton--museum{
    width:35px!important;
    height:33px!important;
    min-width:35px!important;
    flex-basis:35px!important;
  }
  .topbar .brandButton--museum img{
    width:35px!important;
    height:33px!important;
    max-width:35px!important;
    max-height:33px!important;
  }
  .topbar .brandButton--audio{max-width:92px!important}
  .topbar .brandButton--audio .brand__logo,
  .topbar.is-compact .brandButton--audio .brand__logo{
    width:min(84px,24vw)!important;
    max-width:84px!important;
    height:36px!important;
    max-height:36px!important;
  }
  .topbar .brandButton--audio .brand__logo img,
  .topbar.is-compact .brandButton--audio .brand__logo img,
  .topbar #brandCover,
  .topbar.is-compact #brandCover{
    max-height:36px!important;
  }
  .topbar .brandCluster > .brand__subtitle{
    font-size:clamp(7.2px,2.15vw,8.25px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
  }
}

/* ==========================================================
   Fase 3 · Tanda 1 institucional (Comunicaciones Serpat)
   Cabecera = un solo sistema de dos marcas pares: [ MNBA ]  [ Audio Relatos ]
   - Logo MNBA oficial COMPLETO (exportado sin redibujar de la fuente maestra
     01_AUDIORELATOS/brand/logo-mnba.ai, que no forma parte de la app publicada)
     en todas las pantallas: las mismas dos marcas como un bloque continuo.
   - MNBA en negro (tema oscuro: blanco, como Audio Relatos).
   - Escala por peso óptico y centro vertical común, con poco aire entre ambas
     para que se lean como pareja (escritorio 36 px + 12 px / móvil 28 px + 10 px).
     Sin línea divisoria: la relación se resuelve con escala, alineación y espacio.
   - Sin bajada en la cabecera (el texto sigue en el Sheet y en el HTML,
     solo deja de mostrarse aquí). Una sola línea, cabecera más compacta.
   Solo cabecera: no afecta reproducción, navegación ni datos.
   ========================================================== */
.topbar{padding-top:10px!important;padding-bottom:10px!important}
.topbar__row{align-items:center!important}
.topbar .brandCluster{gap:0!important;justify-content:center!important}
.topbar .brandCluster > .brand__subtitle{display:none!important}
.topbar .brandCluster__logos{gap:12px!important;align-items:center!important}
.topbar .brandButton--museum,
.topbar .brandButton--audio{align-self:center!important}
.topbar .brandButton--museum{
  width:auto!important;
  min-width:0!important;
  height:36px!important;
  flex:0 0 auto!important;
  padding-right:0!important;
  border-right:0!important;
}
.topbar .brandButton--museum .brandButton__picture{display:block;height:100%}
.topbar .brandButton--museum img{
  width:auto!important;
  height:36px!important;
  max-width:none!important;
  max-height:36px!important;
  object-fit:contain!important;
  filter:brightness(0)!important;          /* vector oficial en negro */
}
[data-theme="dark"] .topbar .brandButton--museum img{
  filter:brightness(0) invert(1)!important; /* tema oscuro: blanco, como Audio Relatos */
}
@media(max-width:700px){
  .topbar{padding-top:6px!important;padding-bottom:6px!important}
  .topbar .brandCluster__logos{gap:10px!important}
  .topbar .brandButton--museum{height:28px!important}
  .topbar .brandButton--museum img{height:28px!important;max-height:28px!important}
}
@media(max-width:390px){
  .topbar .brandCluster__logos{gap:10px!important}
  .topbar .brandButton--museum{height:28px!important}
  .topbar .brandButton--museum img{height:28px!important;max-height:28px!important}
}

/* ==========================================================
   Fase 3 · Tanda 2 — navegación horizontal + cierre
   1) Rail "Exposiciones y recorridos": flechas discretas (js/rail-nav.js)
      solo cuando hay más contenido hacia el costado. El scroll nativo
      (touch, trackpad, scroll-snap) no cambia.
   2) "Continúa tu visita" + redes: bloque propio de Audio Relatos,
      separado del footer institucional.
   3) Footer institucional: cierre sobrio con logo SERPAT + MNBA y datos
      ya confirmados (sin nuevos textos ni enlaces).
   ========================================================== */

/* 1 · Rail */
.railNav{position:relative}
.railNav__btn{
  position:absolute;
  top:calc(4px + clamp(95px,14vw,130px));   /* centro de la foto de la tarjeta */
  z-index:2;
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;margin:0;
  border:1px solid rgba(12,18,34,.12);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#0C1222;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transform:translateY(-50%);
  cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease;
}
.railNav__btn[hidden]{display:none}
.railNav__btn--prev{left:10px}
.railNav__btn--next{right:10px}
.railNav__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.railNav__btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
[data-theme="dark"] .railNav__btn{background:rgba(16,16,16,.9);color:#fff;border-color:rgba(255,255,255,.22);box-shadow:0 6px 18px rgba(0,0,0,.45)}
@media(hover:hover){
  .railNav__btn:hover{background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.24)}
  [data-theme="dark"] .railNav__btn:hover{background:#1f1f1f}
}

/* 2 · Continúa tu visita (Audio Relatos) */
.visitCta{
  margin:clamp(48px,8vw,80px) 0 0;
  padding:clamp(26px,4vw,40px) 0 clamp(34px,5vw,52px);
  border-top:1px solid var(--border);
  color:var(--text);
}
.visitCta__inner{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(26px,6vw,72px);
}
.visitCta__text{
  max-width:30ch;
  margin:0 0 16px;
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.01em;
}
.visitCta__site{
  min-height:48px;
  display:inline-flex;align-items:center;gap:12px;
  padding:0 18px 0 20px;
  border:1.5px solid currentColor;
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  font-size:15px;font-weight:700;
  transition:background .18s ease,color .18s ease;
}
.visitCta__site svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.visitCta__social{justify-self:end}
.visitCta__socialLabel{
  margin-bottom:10px;
  color:var(--muted);
  font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.visitCta__links{display:flex;flex-wrap:wrap;gap:8px}
.visitCta__links a{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.visitCta__links .mnbaSocialIcon{width:22px;height:22px;overflow:visible;fill:none;stroke:none}
.visitCta__links .mnbaSocialIcon--instagram rect,
.visitCta__links .mnbaSocialIcon--instagram circle:not(.mnbaSocialIcon__dot){fill:none;stroke:currentColor;stroke-width:1.85}
.visitCta__links .mnbaSocialIcon--instagram .mnbaSocialIcon__dot,
.visitCta__links .mnbaSocialIcon--facebook path,
.visitCta__links .mnbaSocialIcon--youtube .mnbaSocialIcon__body,
.visitCta__links .mnbaSocialIcon--flickr circle{fill:currentColor;stroke:none}
.visitCta__links .mnbaSocialIcon--youtube .mnbaSocialIcon__cutout{fill:var(--bg);stroke:none}
.visitCta__links .mnbaSocialIcon--flickr .mnbaSocialIcon__secondary{opacity:.58}
.visitCta a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(hover:hover){
  .visitCta__site:hover{background:var(--text);color:var(--bg)}
  .visitCta__links a:hover{border-color:var(--text)}
}
@media(max-width:680px){
  .visitCta__inner{grid-template-columns:1fr;align-items:start;gap:28px}
  .visitCta__social{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .visitCta__site,.visitCta__links a,.railNav__btn{transition:none}
}
html.is-embedded .visitCta{display:none!important}   /* dentro de mnba.gob.cl sería redundante */

/* 3 · Footer institucional MNBA */
.mnbaFooter{margin-top:0!important;border-top:0!important}
.mnbaFooter::before{display:none!important}
/* misma columna que el contenido de la app (14 px), para que el cierre comparta retícula */
.mnbaFooter__inner{width:auto!important;max-width:none!important;margin:0!important;padding:clamp(34px,5vw,52px) 14px!important}
.mnbaFooter__main{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:clamp(24px,6vw,72px)!important}
.mnbaFooter__meta{gap:6px!important;color:rgba(255,255,255,.66)!important;font-size:13px!important;line-height:1.4!important}
@media(max-width:680px){
  .mnbaFooter__main{grid-template-columns:1fr!important;align-items:start!important;gap:24px!important}
  .mnbaFooter__meta{align-items:flex-start!important;text-align:left!important}
}
/* tema oscuro: la app y el footer son casi del mismo negro; una línea marca el inicio del cierre institucional */
[data-theme="dark"] .mnbaFooter{border-top:1px solid rgba(255,255,255,.16)!important}

/* ==========================================================
   Portada · hero más contenido para que "Recorridos" entre antes en pantalla
   - Escritorio: el hero deja de ocupar la pantalla completa (≈64 % del alto).
   - Móvil: ≈60 % del alto, con piso para que texto y botones no se aprieten.
   - height:auto: si el contenido necesitara más alto, el hero crece.
   Tipografía, botones e imagen no cambian.
   ========================================================== */
@media(min-width:701px){
  #viewHome .homeWelcome{
    min-height:clamp(440px,64svh,640px)!important;
    height:auto!important;
    padding-top:clamp(88px,12svh,140px)!important;
    padding-bottom:clamp(40px,7svh,72px)!important;
  }
}
@media(max-width:700px){
  #viewHome .homeWelcome{
    height:clamp(400px,60svh,560px)!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* ==========================================================
   Estados editoriales · Archivo (status = past en ROUTES)
   - Bloque "Archivo" bajo "Recorridos" en la vista Recorridos: mismas tarjetas.
   - Etiqueta discreta "Archivo" en la cabecera del recorrido y en Explorar.
   - Sin alertas: el contenido archivado se escucha igual que el vigente.
   ========================================================== */
#btnGoLibrary[hidden],
#libraryArchive[hidden],
.archiveTag[hidden]{display:none!important}
.routesHub--archive{
  margin-top:clamp(36px,6vw,64px)!important;
  padding-top:clamp(24px,4vw,36px)!important;
  border-top:1px solid var(--border);
}
.archiveTag{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  width:max-content;
  margin-top:6px;
  padding:2px 8px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72;
}
.archiveTag--hero{margin:0 0 6px}
/* al llegar desde el botón "Archivo", el bloque queda bajo la cabecera fija, no detrás */
#libraryArchive{scroll-margin-top:calc(var(--topbar-live-h, var(--topbar-h, 64px)) + 16px)}
/* Botón "Archivo": mantiene su aspecto discreto (32 px) pero el área táctil llega a 44 px */
#btnGoLibrary{position:relative}
#btnGoLibrary::after{
  content:"";
  position:absolute;
  left:-4px;right:-4px;
  top:50%;
  height:44px;
  transform:translateY(-50%);
}

/* ==========================================================================
   Explorar · vigentes y exposiciones pasadas
   - Sin categorías tipo slide (temas y "Por duración" se ocultan aquí; los datos se conservan).
   - "Recorridos para descubrir" = active · "Exposiciones pasadas" = past (reutiliza .routeCard).
   - CTA breve "Ver recorrido": nunca más ancho que su tarjeta, sin truncar.
   ========================================================================== */
#viewSearch #searchTopicsGrid,
#searchDurationBlock{display:none!important}
#searchPastBlock[hidden]{display:none!important}
.exploreBlock--past{
  padding-top:22px;
  border-top:1px solid var(--border);
}
.exploreBlock__lead{
  margin:-4px 0 12px;
  max-width:46ch;
  color:var(--muted);
  font-size:var(--fs-xs, 13px);
  line-height:var(--lh-meta, 1.45);
}
.exploreRail--routes .routeCard{
  display:flex;
  flex-direction:column;
  max-width:calc(100vw - 48px);
}
.routeCard__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  box-sizing:border-box;
  max-width:100%;
  min-height:40px;
  margin-top:auto;
  padding:8px 18px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.routeCard:hover .routeCard__cta{background:color-mix(in oklab, currentColor 8%, transparent)}
/* La etiqueta Archivo nunca excede su contenedor, aunque el texto venga largo desde el Sheet */
.archiveTag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.exploreRail--routes .routeCard__desc{margin-bottom:12px}

/* ==========================================================================
   Recorridos (vista Todos los recorridos + Archivo) · composición de tarjetas
   [imagen 96–120 px] [título / descripción / Ver recorrido], alineado arriba.
   Títulos completos (sin "…"), interlineado compacto; "1 recorrido" bajo el
   título de la exposición como metadata secundaria.
   ========================================================================== */
#viewLibrary .routesHub__intro{margin:0 0 20px}
#viewLibrary .routesHub__intro .section__title{margin-top:4px}
#viewLibrary .routesHub__lead{margin-top:8px;font-size:15px;line-height:1.4}
#viewLibrary .libraryGroups{gap:26px}

#viewLibrary .libraryGroup__head{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:0;margin-bottom:0;padding-bottom:10px;border-bottom:0;
}
#viewLibrary .libraryGroup__title{margin-top:4px;font-size:clamp(21px,4vw,30px);line-height:1.08}
#viewLibrary .libraryGroup__count{order:3;margin-top:6px;padding-top:0;font-size:12px;line-height:1.3;font-weight:700;color:var(--muted)}

#viewLibrary .libraryGroup__list{margin-top:0}
#viewLibrary .libraryGroup__list .gridCard{
  --libImg:clamp(96px,30vw,120px);
  grid-template-columns:var(--libImg) minmax(0,1fr);
  align-items:start;
  gap:14px;
  min-height:0;
  padding:14px 0!important;
}
#viewLibrary .libraryGroup__list .gridCard__cover{width:var(--libImg);height:var(--libImg);border-radius:8px!important}
#viewLibrary .libraryGroup__list .gridCard__cover img{object-position:50% 50%}
#viewLibrary .libraryGroup__list .gridCard__play{width:30px;height:30px;right:6px;bottom:6px}
#viewLibrary .libraryGroup__list .gridCard__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#viewLibrary .libraryGroup__list .gridCard__title{
  display:block;min-height:0;margin:0;
  font-size:16px;line-height:1.12;font-weight:800;letter-spacing:-.01em;
  white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;
}
#viewLibrary .libraryGroup__list .gridCard__desc{
  min-height:0;margin-top:5px;
  font-size:13px;line-height:1.3;
  -webkit-line-clamp:3;
}
.gridCard__cta{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;max-width:100%;min-height:32px;margin-top:10px;padding:5px 14px;
  border:1px solid currentColor;border-radius:999px;
  font-size:13px;font-weight:700;line-height:1.2;text-align:center;
  white-space:normal;overflow-wrap:anywhere;
}
.gridCard:hover .gridCard__cta{background:color-mix(in oklab, currentColor 8%, transparent)}
@media (max-width:360px){
  #viewLibrary .libraryGroup__list .gridCard{gap:12px}
  #viewLibrary .libraryGroup__list .gridCard__title{font-size:15px}
}

/* ==========================================================
   v41 · Identidad institucional (observaciones Serpat)
   1) Franja Gobierno de Chile del logo de www.mnba.gob.cl (va en las
      primeras filas del PNG del identificador). Aquí se dibuja aparte, sin
      modificar el SVG oficial: pegada al borde superior de la cabecera,
      alineada con el inicio del logo MNBA. Proporciones medidas sobre la
      altura de la M (= alto del SVG): alto 5/89, largo 186/89, azul
      84,5/186. Es decorativa y queda fuera del flujo: no añade altura ni
      desplaza logos; marca e iconos comparten el centrado de la cabecera
      (el aire franja–M resulta mayor que en el PNG, por prioridad visual).
   2) Footer institucional: solo el bloque negro (footer__bottom) del sitio
      vigente. Siempre en español y con sus colores, en tema claro y oscuro.
   ========================================================== */

/* 1 · Franja
   Sin ancestro posicionado entre el botón y .topbar (fixed), la franja usa
   la cabecera como bloque contenedor: top:0 la pega al borde superior y
   left:auto la deja en su posición estática, el inicio del logo MNBA. */
.topbar .brandButton--museum{--mnbaM:36px;position:static!important}
.topbar .brandButton--museum::before{
  content:"";
  position:absolute;
  top:0;
  width:calc(var(--mnbaM) * 186 / 89);
  height:calc(var(--mnbaM) * 5 / 89);
  background:linear-gradient(90deg,#0F69B5 0 45.43%,#EB3D45 45.43% 100%);
  pointer-events:none;
}
@media(max-width:700px){
  .topbar .brandButton--museum{--mnbaM:28px}
}

/* 2 · Footer institucional MNBA: bloque negro */
.mnbaFooter.mnbaInst{
  color-scheme:dark;
  background:#000;
  color:#8a8a8a;
  border-top:0!important;
  font-family:"Open Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  text-align:left;
}
.mnbaInst *,.mnbaInst *::before,.mnbaInst *::after{box-sizing:border-box}
.mnbaInst p{margin:0}
.mnbaInst a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Fondo #000, texto #8a8a8a, enlaces #eee; contenido a 1140 px */
.mnbaInst__bottom{background:#000;color:#8a8a8a;padding:2rem 1rem}
.mnbaInst__content,.mnbaInst__end{max-width:1140px;margin-left:auto;margin-right:auto}
.mnbaInst__content{display:flex;flex-wrap:wrap;padding:2em 0 4em}
.mnbaInst__logo{display:block;flex:0 0 auto;max-width:100%;margin:0 3em 2em 0}
.mnbaInst__logo img{display:block;width:300px;max-width:100%;height:auto}
.mnbaInst__info{flex:0 1 auto;min-width:0}
.mnbaInst__info p{margin-bottom:1rem}
.mnbaInst__bottom a{color:#eee;text-decoration:none;overflow-wrap:anywhere}
.mnbaInst__bottom a:hover{text-decoration:underline}
.mnbaInst__end{padding-top:2rem;border-top:1px solid #8a8a8a;text-align:center}
@media(min-width:920px){.mnbaInst__info p{margin-bottom:0}}
@media(max-width:480px){.mnbaInst__logo{margin-right:0}}

/* El tema oscuro no altera el footer institucional (mismos colores del sitio);
   como la app y el footer son casi del mismo negro, una línea marca su inicio. */
[data-theme="dark"] .mnbaFooter.mnbaInst{border-top:1px solid rgba(255,255,255,.16)!important;background:#000}

/* v44 · «Reproducir audiorelato»: solo visible si el navegador bloqueó la reproducción
   automática. Un botón por contexto (mini-player / reproductor completo / texto a pantalla
   completa); las reglas de abajo garantizan que nunca se vean dos a la vez. */
.autoplayPrompt[hidden]{display:none!important}
.autoplayPrompt{display:flex;justify-content:center}
/* Sobre el mini-player (72 px) y por encima de la vista de recorrido (z-index 30). */
.autoplayPrompt--mini{position:fixed;left:16px;right:16px;bottom:calc(var(--navH) + var(--safeB) + 84px);z-index:35;pointer-events:none}
.app.is-now .autoplayPrompt--mini,.app.is-player-hidden .autoplayPrompt--mini{display:none!important}
.autoplayPrompt--now{margin-top:16px}
.autoplayPrompt__btn{
  pointer-events:auto;
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;max-width:100%;padding:12px 24px 12px 18px;
  border-radius:999px;
  background:var(--brand);color:#fff;
  font:inherit;font-size:16px;font-weight:850;line-height:1.2;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  animation:autoplayPromptIn .26s ease-out both;
}
.autoplayPrompt__btn .svgicon{width:22px;height:22px;min-width:22px;min-height:22px}
.autoplayPrompt__btn:hover{background:color-mix(in oklab,var(--brand) 86%,#fff)}
.autoplayPrompt__btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--brand),0 10px 28px rgba(0,0,0,.35)}
@keyframes autoplayPromptIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.autoplayPrompt__btn{animation:none}}

/* v44 · Interruptores del menú («Reproducir al abrir un audiorelato», auto-siguiente) */
.menuItem--switch .menuItem__label{flex:1}
.menuSwitch{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:700}
.menuSwitch__track{position:relative;width:42px;height:24px;border-radius:999px;background:var(--border);border:1px solid var(--border);transition:background .18s ease}
.menuSwitch__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s ease}
.menuItem--switch.is-on .menuSwitch__track{background:var(--brand);border-color:var(--brand)}
.menuItem--switch.is-on .menuSwitch__thumb{transform:translateX(18px)}
.menuItem--switch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.menuSwitch__track,.menuSwitch__thumb{transition:none}}
/* En el texto a pantalla completa el reproductor queda tapado: el aviso va arriba del texto. */
.autoplayPrompt--lyrics{margin:6px 0 14px}
#viewNow:not(.is-lyrics-focus) .autoplayPrompt--lyrics{display:none!important}
#viewNow.is-lyrics-focus .autoplayPrompt--now{display:none!important}

/* v44 · El título de la obra en el reproductor completo es un <h1> (antes <div>):
   se anulan los márgenes del navegador (especificidad baja: las reglas existentes del
   título, p. ej. margin-top:6px, siguen mandando). Tamaño y peso no cambian. */
h1.nowHero__title{margin:0}

/* v44 · Reproducir/Pausar dentro del texto a pantalla completa (mismo <audio>). */
#viewNow .lyrics__play{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  padding:0!important;border:0!important;border-radius:999px!important;
  display:grid!important;place-items:center!important;
  background:#fff!important;color:#0b1025!important;box-shadow:none!important;
}
#viewNow .lyrics__play .svgicon{width:18px;height:18px;min-width:18px;min-height:18px}
#viewNow .lyrics__play:focus-visible{outline:3px solid #fff;outline-offset:3px}