/* MZTV Experiencia 1.0.0 */
:root{
  --ux-neon:#f530c8; --ux-neon-2:#ff5ad9; --ux-violet:#9b5cff; --ux-bg:#07020a; --ux-bg-2:#120310; --ux-card:#140612;
  --ux-line:rgba(245,48,200,.22); --ux-text:#fff; --ux-dim:#cbb6d8; --ux-bar:64px;
  --ux-font:Montserrat, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Detalles generales ---------- */
.mztv-ux .mztv-btn, .mztv-ux .mztv-mini, .mztv-ux .mztv-band-card, .mztv-ux .mztv-save, .mztv-ux .ux-card, .mztv-ux .ux-chip, .mztv-ux .mztv-cartel{ transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease; }
.mztv-ux .mztv-btn:active, .mztv-ux .mztv-mini:active, .mztv-ux .mztv-band-card:active, .mztv-ux .mztv-save:active, .mztv-ux .ux-card:active, .mztv-ux .ux-chip:active{ transform:scale(.97); }
@media (pointer:coarse){ .mztv-ux .mztv-mini, .mztv-ux .mztv-save{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; } }
/* Esqueleto de carga mientras llegan las imagenes */
.mztv-ux .mztv-band-logo:not(.ux-loaded), .mztv-ux .mztv-gallery a:not(.ux-loaded), .mztv-ux .mztv-cartel-img:not(.ux-loaded), .ux-thumb:not(.ux-loaded){
  background:linear-gradient(100deg, #170817 30%, #2b0c28 50%, #170817 70%) !important; background-size:220% 100% !important; animation:uxSk 1.3s linear infinite;
}
@keyframes uxSk{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce){ .mztv-ux *{ animation-duration:.01s !important; } }

/* ---------- Menu hamburguesa del movil, mas compacto ---------- */
@media (max-width:1024px){
  .mztv-ux .fusion-tb-header nav.awb-menu.collapse-enabled{ --awb-mobile-justify:flex-start !important; --awb-mobile-caret-left:auto !important; --awb-mobile-caret-right:0 !important; --awb-mobile-sep-color:rgba(245,48,200,.12) !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a, .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a{ min-height:52px !important; text-align:left !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a .menu-text{ font-size:13px !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li{ border-bottom:1px solid rgba(245,48,200,.12) !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-ul{ border:0 !important; background:rgba(245,48,200,.05) !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li{ border:0 !important; border-top:1px solid rgba(245,48,200,.08) !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a{ color:rgba(255,255,255,.78) !important; }
  .mztv-ux .fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-ul{ max-height:calc(100vh - 160px); overflow-y:auto; }
}

/* ---------- Boton de busqueda en la cabecera ---------- */
.ux-search-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0 6px; border-radius:50%;
  background:transparent; border:1px solid var(--ux-line); color:#fff; cursor:pointer; flex:none; }
.ux-search-btn:hover, .ux-search-btn:focus-visible{ border-color:var(--ux-neon); box-shadow:0 0 12px rgba(245,48,200,.5); outline:none; }
.ux-search-btn svg{ width:18px; height:18px; }
li.ux-search-li{ display:flex; align-items:center; align-self:center; }
@media (max-width:1024px){
  li.ux-search-li{ display:none !important; }
  .ux-search-btn.ux-mob{ width:44px; height:44px; border-radius:10px; margin:0 10px 0 0; }
}
@media (min-width:1025px){ .ux-search-btn.ux-mob{ display:none; } }

/* ---------- Barra inferior (movil) ---------- */
.ux-tabbar{ display:none; }
@media (max-width:1024px){
  html.ux-has-bar body{ padding-bottom:calc(var(--ux-bar) + env(safe-area-inset-bottom, 0px)); }
  .ux-tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:2147482600; height:calc(var(--ux-bar) + env(safe-area-inset-bottom, 0px));
    padding:0 4px env(safe-area-inset-bottom, 0px); background:rgba(9,2,12,.92); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
    border-top:1px solid rgba(245,48,200,.45); box-shadow:0 -6px 24px rgba(0,0,0,.55), 0 -1px 14px rgba(245,48,200,.18); }
  .ux-tab{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; padding:6px 0 4px;
    color:rgba(255,255,255,.62) !important; text-decoration:none !important; font:600 10px/1 var(--ux-font); letter-spacing:.04em; position:relative; -webkit-tap-highlight-color:transparent; }
  .ux-tab svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
  .ux-tab span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .ux-tab:active svg{ transform:scale(.86); }
  .ux-tab.is-on{ color:#fff !important; }
  .ux-tab.is-on svg{ stroke:var(--ux-neon-2); filter:drop-shadow(0 0 6px rgba(245,48,200,.9)); }
  .ux-tab.is-on::before{ content:""; position:absolute; top:-1px; left:28%; right:28%; height:2px; border-radius:2px; background:var(--ux-neon); box-shadow:0 0 10px var(--ux-neon); }
  .ux-tab .ux-ava{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,.45); }
  .ux-tab.is-on .ux-ava{ border-color:var(--ux-neon); box-shadow:0 0 8px var(--ux-neon); }
  /* Chat, TV flotante y aviso de cookies por encima de la barra */
  html.ux-has-bar .mztv-chat-tab{ bottom:calc(var(--ux-bar) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
  html.ux-has-bar.mztv-float .mztv-tv, html.ux-has-bar.mztv-mini .mztv-tv{ bottom:max(var(--mztv-fy, 10px), calc(var(--ux-bar) + 12px + env(safe-area-inset-bottom, 0px))) !important; }
  body:has(.cmplz-cookiebanner.cmplz-show) .ux-tabbar{ display:none; }
  .mztv-mini-hidden.ux-tabbar{ display:none !important; }
}

/* ---------- Buscador a pantalla completa ---------- */
.ux-search{ position:fixed; inset:0; z-index:2147483200; background:rgba(7,2,10,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; color:#fff; font-family:var(--ux-font); animation:uxIn .18s ease; }
.ux-search[hidden]{ display:none; }
@keyframes uxIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ux-search-top{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--ux-line); max-width:860px; width:100%; margin:0 auto; box-sizing:border-box; }
.ux-search-field{ flex:1; display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border-radius:14px; background:#1a0819; border:1px solid rgba(245,48,200,.45); box-shadow:0 0 16px rgba(245,48,200,.18); }
.ux-search-field svg{ width:18px; height:18px; flex:none; opacity:.8; }
.ux-search-field input{ flex:1; min-width:0; height:46px; background:transparent !important; border:0 !important; outline:none; box-shadow:none !important; color:#fff !important; font:500 16px var(--ux-font) !important; padding:0 !important; }
.ux-search-field input::placeholder{ color:#9d86ad; }
.ux-search-close{ background:none; border:0; color:var(--ux-dim); font:600 14px var(--ux-font); cursor:pointer; padding:10px 4px; }
.ux-search-body{ flex:1; overflow-y:auto; padding:8px 16px 40px; max-width:860px; width:100%; margin:0 auto; box-sizing:border-box; -webkit-overflow-scrolling:touch; }
.ux-search h4{ margin:22px 0 10px; font:700 11px var(--ux-font); letter-spacing:.18em; text-transform:uppercase; color:#ff9be6; }
.ux-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ux-chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; border:1px solid var(--ux-line); background:#150614; color:#fff !important;
  font:600 13px var(--ux-font); text-decoration:none !important; cursor:pointer; line-height:1.1; }
.ux-chip:hover, .ux-chip.is-on{ border-color:var(--ux-neon); box-shadow:0 0 12px rgba(245,48,200,.35); }
.ux-chip.is-on{ background:rgba(245,48,200,.18); }
.ux-res{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:12px; color:#fff !important; text-decoration:none !important; }
.ux-res:hover, .ux-res:focus-visible, .ux-res.is-focus{ background:rgba(245,48,200,.1); outline:none; }
.ux-res .ux-thumb{ width:48px; height:48px; border-radius:10px; flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#1c0a1b; color:#ff9be6; font:700 16px var(--ux-font); }
.ux-res .ux-thumb img{ width:100%; height:100%; object-fit:cover; }
.ux-res.is-band .ux-thumb{ border-radius:50%; }
.ux-res b{ display:block; font:600 15px/1.25 var(--ux-font); }
.ux-res small{ display:block; color:var(--ux-dim); font:500 12.5px/1.3 var(--ux-font); margin-top:2px; }
.ux-res mark{ background:none; color:var(--ux-neon-2); }
.ux-empty{ color:var(--ux-dim); text-align:center; padding:40px 10px; font:500 14px/1.5 var(--ux-font); }
.ux-spin{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(245,48,200,.25); border-top-color:var(--ux-neon); animation:uxRot .7s linear infinite; margin:30px auto; }
@keyframes uxRot{ to{ transform:rotate(360deg); } }
.ux-recent-x{ background:none; border:0; color:#9d86ad; cursor:pointer; padding:0 0 0 2px; font-size:15px; line-height:1; }

/* ---------- Portada: carruseles ---------- */
.ux-home{ max-width:1300px; margin:0 auto; padding:10px 0 30px; font-family:var(--ux-font); position:relative; z-index:2; }
.ux-hello{ margin:0 18px 6px; color:var(--ux-dim); font:500 14px var(--ux-font); }
.ux-hello b{ color:#fff; }
.ux-hello button{ background:none; border:0; color:var(--ux-neon-2); font:600 13px var(--ux-font); cursor:pointer; padding:0 0 0 6px; text-decoration:underline; }
.ux-shelf{ margin:26px 0 8px; }
.ux-shelf-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:0 18px; margin-bottom:12px; }
.ux-shelf-head h2{ margin:0 !important; font:800 20px/1.15 var(--ux-font) !important; letter-spacing:.02em !important; text-transform:none !important; color:#fff !important;
  text-shadow:0 0 10px rgba(245,48,200,.55) !important; }
.ux-shelf-head p{ margin:4px 0 0; color:var(--ux-dim); font:500 13px var(--ux-font); }
.ux-shelf-head a{ flex:none; color:#ff9be6 !important; font:700 12px var(--ux-font); letter-spacing:.12em; text-transform:uppercase; text-decoration:none !important; padding:8px 0; }
.ux-row{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 18px 14px; scroll-padding:0 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ux-row::-webkit-scrollbar{ display:none; }
.ux-card{ scroll-snap-align:start; flex:none; display:flex; flex-direction:column; text-decoration:none !important; color:#fff !important; border-radius:16px;
  background:linear-gradient(180deg, #1a0718, #10040f); border:1px solid var(--ux-line); overflow:hidden; position:relative; }
.ux-card:hover{ border-color:rgba(245,48,200,.7); box-shadow:0 0 18px rgba(245,48,200,.3); }
.ux-card .ux-thumb{ position:relative; display:block; width:100%; overflow:hidden; }
.ux-card .ux-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ux-card-b{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.ux-card-b b{ font:700 14.5px/1.25 var(--ux-font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-card-b small{ color:var(--ux-dim); font:500 12px/1.3 var(--ux-font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Bandas: cuadradas */
.ux-band{ width:156px; }
.ux-band .ux-thumb{ aspect-ratio:1/1; background:#0d040c; }
.ux-band .ux-thumb img.is-logo{ object-fit:contain; padding:12px; box-sizing:border-box; }
.ux-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 44px var(--ux-font); color:#ff9be6; letter-spacing:.04em;
  background:radial-gradient(circle at 30% 20%, rgba(245,48,200,.35), transparent 60%), radial-gradient(circle at 80% 90%, rgba(155,92,255,.35), transparent 60%), #12040f; text-shadow:0 0 14px rgba(245,48,200,.7); }
.ux-band .ux-match{ position:absolute; top:8px; left:8px; padding:4px 8px; border-radius:999px; font:700 9.5px var(--ux-font); letter-spacing:.1em; text-transform:uppercase; background:var(--ux-neon); color:#fff; box-shadow:0 0 10px var(--ux-neon); }
/* Conciertos: cartel vertical con fecha */
.ux-gig{ width:200px; }
.ux-gig .ux-thumb{ aspect-ratio:3/4; }
.ux-date{ position:absolute; top:10px; left:10px; z-index:2; width:50px; padding:6px 0 7px; border-radius:12px; text-align:center; background:rgba(7,2,10,.86); border:1px solid var(--ux-neon);
  box-shadow:0 0 12px rgba(245,48,200,.45); line-height:1; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ux-date b{ display:block; font:800 21px/1 var(--ux-font); color:#fff; }
.ux-date i{ display:block; font:700 10px/1 var(--ux-font); letter-spacing:.14em; text-transform:uppercase; color:#ff9be6; margin-top:3px; font-style:normal; }
.ux-ticket, a.ux-ticket, .mztv-ux a.ux-ticket:visited{ color:#fff !important; }
.ux-ticket{ align-self:flex-start; margin-top:6px; padding:7px 12px; border-radius:999px; background:var(--ux-neon); color:#fff; font:700 11px var(--ux-font); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 0 12px rgba(245,48,200,.55); }
/* Tablon y blog: tarjetas de texto */
.ux-ad, .ux-topic{ width:250px; min-height:150px; padding:16px; box-sizing:border-box; gap:8px; justify-content:space-between; }
.ux-ad b, .ux-topic b{ font:700 15px/1.3 var(--ux-font); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ux-ad small, .ux-topic small{ color:var(--ux-dim); font:500 12.5px/1.35 var(--ux-font); }
.ux-tag{ align-self:flex-start; padding:4px 9px; border-radius:999px; font:700 10px var(--ux-font); letter-spacing:.1em; text-transform:uppercase; color:#ffd3f3; background:rgba(245,48,200,.16); border:1px solid rgba(245,48,200,.4); }
.ux-tag.is-banda{ color:#d9c6ff; background:rgba(155,92,255,.16); border-color:rgba(155,92,255,.45); }
/* Tarjeta vacia / llamada a la accion */
.ux-cta{ margin:0 18px; padding:20px; border-radius:18px; display:flex; align-items:center; gap:16px; border:1px dashed rgba(245,48,200,.5);
  background:radial-gradient(120% 140% at 0% 0%, rgba(245,48,200,.16), transparent 60%), #10040f; }
.ux-cta-ico{ flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(245,48,200,.15); border:1px solid rgba(245,48,200,.45); }
.ux-cta-ico svg{ width:26px; height:26px; stroke:#ff9be6; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ux-cta b{ display:block; font:700 15.5px/1.3 var(--ux-font); color:#fff; }
.ux-cta p{ margin:4px 0 0; color:var(--ux-dim); font:500 13px/1.45 var(--ux-font); }
.ux-cta .ux-cta-btns{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.ux-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 18px; border-radius:999px; background:var(--ux-neon); color:#fff !important; text-decoration:none !important;
  font:700 12px var(--ux-font); letter-spacing:.1em; text-transform:uppercase; border:0; cursor:pointer; box-shadow:0 0 14px rgba(245,48,200,.5); }
.ux-btn.is-ghost{ background:transparent; border:1px solid rgba(245,48,200,.6); box-shadow:none; }
@media (max-width:640px){ .ux-cta{ flex-direction:column; align-items:flex-start; gap:12px; } }
@media (min-width:1025px){
  .ux-home{ padding:10px 2% 40px; }
  .ux-band{ width:190px; } .ux-gig{ width:230px; } .ux-ad, .ux-topic{ width:290px; }
  .ux-shelf-head h2{ font-size:24px !important; }
}
/* Portada mas compacta en el movil: la TV aparece antes */
@media (max-width:640px){
  body.home.mztv-ux .fusion-builder-row-2{ --awb-min-height:0 !important; min-height:0 !important; --awb-padding-top:22px !important; --awb-padding-bottom:4px !important; padding-top:22px !important; padding-bottom:4px !important; }
  body.home.mztv-ux .mztv-hero-title h1{ font-size:46px !important; }
  body.home.mztv-ux .fusion-builder-row-2 .fusion-title-2 h2{ font-size:16px !important; line-height:1.45 !important; }
}

/* ---------- Conciertos ---------- */
.ux-quick{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 14px 16px; margin:0 -14px; }
.ux-quick::-webkit-scrollbar{ display:none; }
.ux-quick .ux-chip{ flex:none; }
.ux-filters-toggle{ display:none; }
@media (max-width:640px){
  .mztv-ux .ux-filters-collapsed .mztv-filters{ display:none !important; }
  .ux-filters-toggle{ display:inline-flex; }
}
.mztv-ux .mztv-cartel{ position:relative; }
.mztv-ux .mztv-cartel .ux-date{ top:12px; left:12px; }
.mztv-ux .mztv-cartel-img .mztv-cartel-date.ux-hide{ display:none !important; }
.mztv-ux .mztv-cartel-place{ font-weight:700 !important; color:#fff !important; }
.mztv-ux .mztv-cartel-actions .ux-ticket{ margin:0; padding:0 16px; min-height:40px; display:inline-flex; align-items:center; text-decoration:none !important; }
.ux-empty-rich{ text-align:center; padding:34px 20px !important; }
.ux-empty-rich .ux-cta-ico{ margin:0 auto 14px; }
.ux-empty-rich b{ display:block; font:700 18px var(--ux-font); color:#fff; margin-bottom:6px; }
.ux-empty-rich p{ color:var(--ux-dim); margin:0 auto 16px; max-width:440px; font:500 14px/1.5 var(--ux-font); }
.ux-empty-rich .ux-cta-btns{ justify-content:center; display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Perfil de banda ---------- */
.mztv-ux .mztv-artist-profile.mztv-public.ux-band-page{ padding-top:0 !important; }
.ux-hero{ position:relative; margin:0 0 0; border-radius:22px; overflow:hidden; border:1px solid var(--ux-line); min-height:300px; display:flex; align-items:flex-end;
  background:#0d040c; box-shadow:0 0 30px rgba(245,48,200,.18); }
.ux-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); }
.ux-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,2,10,.15) 0%, rgba(7,2,10,.55) 45%, rgba(7,2,10,.97) 100%); }
.ux-hero .mztv-ap-head{ position:relative; z-index:2; width:100%; text-align:left !important; padding:26px 24px 22px !important; margin:0 !important; box-sizing:border-box; background:none !important; border:0 !important; box-shadow:none !important; }
.ux-hero .mztv-public-logo{ display:inline-block; margin:0 0 10px !important; max-width:200px; }
.ux-hero .mztv-public-logo img{ max-height:90px; width:auto !important; border-radius:10px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.7)); }
.ux-hero .mztv-ap-title{ text-align:left !important; font-size:clamp(30px, 7vw, 56px) !important; line-height:1.02 !important; margin:0 0 8px !important; }
.ux-hero .mztv-meta{ text-align:left !important; margin:0 !important; color:#e9dcef !important; font-weight:600; }
.ux-hero .mztv-social-links{ display:none !important; }
.ux-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0 4px; }
.ux-actions .mztv-save-form{ margin:0 !important; }
.ux-actions .mztv-save, .ux-act{ min-height:46px; padding:0 20px !important; border-radius:999px !important; font:700 12.5px var(--ux-font) !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  display:inline-flex !important; align-items:center; gap:8px; text-decoration:none !important; cursor:pointer; }
.ux-actions .mztv-save{ background:var(--ux-neon) !important; color:#fff !important; border:0 !important; box-shadow:0 0 16px rgba(245,48,200,.55) !important; }
.ux-actions .mztv-save.is-saved{ background:transparent !important; border:1px solid var(--ux-neon) !important; box-shadow:none !important; }
.ux-act{ background:#160615; color:#fff !important; border:1px solid rgba(255,255,255,.22); }
.ux-act:hover{ border-color:var(--ux-neon); }
.ux-act svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ux-act.is-icon{ width:46px; padding:0 !important; justify-content:center; }
.ux-socials{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 0; }
.ux-socials a{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; border:1px solid var(--ux-line); background:#120511; color:#fff !important;
  font:600 12.5px var(--ux-font); text-decoration:none !important; }
.ux-socials a i{ width:8px; height:8px; border-radius:50%; background:var(--c, var(--ux-neon)); box-shadow:0 0 8px var(--c, var(--ux-neon)); }
.ux-socials a:hover{ border-color:var(--c, var(--ux-neon)); }
.ux-tabs{ position:sticky; top:var(--ux-sticky-top, 0px); z-index:50; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin:18px 0 14px; padding:6px;
  background:rgba(9,2,12,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--ux-line); border-radius:999px; }
.ux-tabs::-webkit-scrollbar{ display:none; }
.ux-tabs a{ flex:1 0 auto; text-align:center; padding:10px 16px; border-radius:999px; color:var(--ux-dim) !important; text-decoration:none !important; font:700 12px var(--ux-font); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.ux-tabs a.is-on{ background:var(--ux-neon); color:#fff !important; box-shadow:0 0 12px rgba(245,48,200,.55); }
.ux-band-page .ux-sec{ scroll-margin-top:calc(var(--ux-sticky-top, 0px) + 70px); }
@media (max-width:640px){
  .ux-hero{ min-height:260px; border-radius:18px; margin:0 -4px; }
  .ux-hero .mztv-ap-head{ padding:20px 18px 18px !important; }
  .ux-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .ux-actions .mztv-save-form, .ux-actions .mztv-save{ width:100%; justify-content:center; }
  .ux-actions .ux-act{ justify-content:center; }
  .ux-actions .ux-act.is-icon{ width:auto; }
}

/* ---------- Hoja de bienvenida (personalizar) ---------- */
.ux-sheet-wrap{ position:fixed; inset:0; z-index:2147483150; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; animation:uxFade .2s ease; }
.ux-sheet-wrap[hidden]{ display:none; }
@keyframes uxFade{ from{ opacity:0; } to{ opacity:1; } }
.ux-sheet{ width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-sizing:border-box; padding:22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius:24px 24px 0 0;
  background:linear-gradient(180deg, #1c0719, #0b0309); border:1px solid rgba(245,48,200,.55); border-bottom:0; box-shadow:0 -10px 40px rgba(0,0,0,.7), 0 0 30px rgba(245,48,200,.25);
  color:#fff; font-family:var(--ux-font); animation:uxUp .25s ease; }
@keyframes uxUp{ from{ transform:translateY(30px); } to{ transform:none; } }
.ux-sheet::before{ content:""; display:block; width:44px; height:4px; border-radius:4px; background:rgba(255,255,255,.25); margin:-8px auto 16px; }
.ux-sheet h3{ margin:0 0 6px !important; font:800 21px/1.2 var(--ux-font) !important; color:#fff !important; text-shadow:0 0 10px rgba(245,48,200,.6); text-transform:none !important; letter-spacing:0 !important; }
.ux-sheet p{ margin:0 0 16px; color:var(--ux-dim); font:500 14px/1.5 var(--ux-font); }
.ux-sheet label{ display:block; margin:14px 0 8px; font:700 11px var(--ux-font); letter-spacing:.16em; text-transform:uppercase; color:#ff9be6; }
.ux-sheet input[type=text]{ width:100%; box-sizing:border-box; height:48px; padding:0 14px !important; border-radius:12px !important; background:#170616 !important; border:1px solid rgba(245,48,200,.4) !important; color:#fff !important; font:500 16px var(--ux-font) !important; }
.ux-sheet label.ux-check{ display:flex; align-items:flex-start; gap:10px; margin:18px 0 0; font:500 13.5px/1.4 var(--ux-font); letter-spacing:0; text-transform:none; color:var(--ux-dim); cursor:pointer; }
.ux-sheet label.ux-check input{ width:20px; height:20px; flex:none; margin:0; accent-color:var(--ux-neon); }
.ux-sheet-btns{ display:flex; gap:10px; margin-top:22px; }
.ux-sheet-btns .ux-btn{ flex:1; }
@media (min-width:641px){ .ux-sheet-wrap{ align-items:center; } .ux-sheet{ border-radius:24px; border-bottom:1px solid rgba(245,48,200,.55); } }

/* ---------- Instalar la app ---------- */
.ux-install{ position:fixed; left:10px; right:10px; bottom:calc(var(--ux-bar) + 10px + env(safe-area-inset-bottom, 0px)); z-index:2147482700; display:flex; align-items:center; gap:12px;
  padding:12px 12px 12px 14px; border-radius:16px; background:#170616; border:1px solid rgba(245,48,200,.6); box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(245,48,200,.3);
  color:#fff; font-family:var(--ux-font); animation:uxUp .25s ease; }
.ux-install[hidden]{ display:none; }
.ux-install img{ width:42px; height:42px; border-radius:10px; flex:none; }
.ux-install div{ flex:1; min-width:0; }
.ux-install b{ display:block; font:700 14px/1.25 var(--ux-font); }
.ux-install small{ display:block; color:var(--ux-dim); font:500 12px/1.35 var(--ux-font); }
.ux-install .ux-btn{ min-height:38px; padding:0 14px; font-size:11px; }
.ux-install .ux-x{ background:none; border:0; color:#9d86ad; font-size:22px; line-height:1; cursor:pointer; padding:4px; }
@media (min-width:1025px){ .ux-install{ display:none !important; } }

/* ---------- 404 ---------- */
.mztv-ux.error404 .fusion-page-title-bar{ display:none !important; }
.ux-404{ text-align:center; padding:60px 20px 80px; font-family:var(--ux-font); color:#fff; }
.ux-404 .ux-404-n{ font:900 clamp(90px, 26vw, 200px)/1 var(--ux-font); color:#ff5ad9; text-shadow:0 0 8px #f530c8, 0 0 30px rgba(245,48,200,.6); letter-spacing:.04em; }
.ux-404 h1{ margin:14px 0 8px !important; font:800 24px/1.25 var(--ux-font) !important; color:#fff !important; text-transform:none !important; letter-spacing:0 !important; }
.ux-404 p{ color:var(--ux-dim); max-width:440px; margin:0 auto 22px; font:500 15px/1.5 var(--ux-font); }
.ux-404 .ux-404-search{ max-width:440px; margin:0 auto 22px; cursor:pointer; }
.ux-404 .ux-cta-btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
@media (max-width:1024px){
  html.ux-has-bar .mztv-chat-tab{ width:52px; height:52px !important; padding:0 !important; justify-content:center; border-radius:50% !important; }
  html.ux-has-bar .mztv-chat-tab .mztv-chat-tab-text{ display:none !important; }
  html.ux-has-bar .mztv-chat-tab .mztv-chat-badge{ position:absolute; top:-4px; right:-4px; }
}

.ux-btn.ux-google{ background:#fff; color:#1f1f1f !important; box-shadow:0 0 14px rgba(255,255,255,.18); gap:10px; text-transform:none; letter-spacing:.01em; font-size:14px; }
.ux-btn.ux-google svg{ flex:none; }

/* 1.0.2: menos hueco bajo la cabecera en el movil y formularios que no se salgan */
@media (max-width:1024px){
  body.mztv-ux:not(.home) #main{ padding-top:28px !important; }
  .mztv-ux .mztv-com-page{ padding-top:6px !important; }
}
.mztv-ux fieldset{ min-width:0; max-width:100%; box-sizing:border-box; }

/* ---------- Artistas: rejilla compacta en el movil (3 por fila) ---------- */
@media (max-width:640px){
  .mztv-ux .mztv-dir-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
  .mztv-ux .mztv-dir-grid > .mztv-band-card{ padding:10px 6px 12px !important; border-radius:14px !important; min-width:0; text-align:center; }
  .mztv-ux .mztv-dir-grid .mztv-band-logo{ width:100% !important; height:auto !important; aspect-ratio:1/1; margin:0 auto 8px !important; border-radius:10px !important; font-size:1.6rem !important; }
  .mztv-ux .mztv-dir-grid .mztv-band-logo img{ width:100% !important; height:100% !important; }
  .mztv-ux .mztv-dir-grid .mztv-band-card h3, .mztv-ux .mztv-dir-grid .mztv-band-card strong, .mztv-ux .mztv-dir-grid .mztv-band-card .mztv-band-name{
    font-size:13px !important; line-height:1.2 !important; margin:0 0 3px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
  .mztv-ux .mztv-dir-grid .mztv-band-card p, .mztv-ux .mztv-dir-grid .mztv-band-card small, .mztv-ux .mztv-dir-grid .mztv-band-card .mztv-band-meta{
    font-size:10.5px !important; line-height:1.3 !important; margin:0 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ---------- Portada en el ordenador: mas aire entre secciones ---------- */
@media (min-width:1025px){
  .ux-home{ padding:24px 3% 60px; }
  .ux-shelf{ margin:0; padding:44px 0; }
  .ux-shelf:first-child{ padding-top:16px; }
  .ux-shelf:last-child{ padding-bottom:0; }
  .ux-shelf + .ux-shelf{ border-top:1px solid rgba(245,48,200,.14); }
  .ux-shelf-head{ margin-bottom:22px; }
  .ux-shelf-head p{ margin-top:8px; font-size:14px; }
  .ux-row{ gap:22px; padding-bottom:18px; }
  .ux-cta{ padding:28px 30px; }
}

/* 1.0.5 · Portada: cada seccion en su recuadro, con el titulo dentro y mas aire */
.ux-home .ux-shelf:has(.ux-shelf-head){ border:1px solid rgba(245,48,200,.38); border-radius:22px; box-sizing:border-box; overflow:hidden;
  background:linear-gradient(180deg, rgba(28,7,26,.94), rgba(11,3,10,.94)); box-shadow:0 0 24px rgba(245,48,200,.12), inset 0 1px 0 rgba(255,155,230,.08); }
.ux-home .ux-shelf:has(.ux-shelf-head) .ux-cta{ border-color:rgba(245,48,200,.3); }
@media (max-width:1024px){
  .ux-home{ padding:14px 0 48px; }
  .ux-home .ux-shelf{ margin:0 14px 30px; }
  .ux-home .ux-shelf:first-of-type{ margin-top:22px; }
  .ux-home .ux-shelf:has(.ux-shelf-head){ padding:22px 0 8px; }
  .ux-home .ux-shelf-head{ flex-direction:column; align-items:flex-start; gap:8px; padding:0 18px; margin-bottom:18px; }
  .ux-home .ux-shelf-head h2{ font-size:22px !important; line-height:1.2 !important; }
  .ux-home .ux-shelf-head p{ margin-top:6px; }
  .ux-home .ux-shelf-head a{ padding:4px 0; }
  .ux-home .ux-row{ gap:14px; padding:4px 18px 16px; scroll-padding:0 18px; }
  .ux-home .ux-shelf:has(.ux-shelf-head) .ux-cta{ margin:0 14px 14px; padding:20px 18px; }
  .ux-home .ux-shelf:not(:has(.ux-shelf-head)) .ux-cta{ margin:0; }
  .ux-home .ux-cta .ux-cta-btns{ margin-top:16px; gap:10px; }
}
@media (min-width:1025px){
  .ux-home .ux-shelf{ margin:0 0 40px; padding:0; }
  .ux-home .ux-shelf + .ux-shelf{ border-top:0; }
  .ux-home .ux-shelf:has(.ux-shelf-head){ padding:30px 0 14px; border:1px solid rgba(245,48,200,.38); }
  .ux-home .ux-shelf:first-of-type{ margin-top:24px; }
  .ux-home .ux-shelf-head{ padding:0 28px; }
  .ux-home .ux-row{ padding:4px 28px 18px; scroll-padding:0 28px; }
  .ux-home .ux-shelf:has(.ux-shelf-head) .ux-cta{ margin:0 28px 16px; }
  .ux-home .ux-shelf:not(:has(.ux-shelf-head)) .ux-cta{ margin:0; }
}

/* 1.0.6 · Al abrir la portada solo se ve la TV (ocupa la primera pantalla); el resto empieza al bajar */
@media (min-width:1025px){
  body.home.mztv-ux .fusion-builder-row-2{ min-height:100vh !important; --awb-min-height:100vh !important; box-sizing:border-box;
    padding-top:112px !important; padding-bottom:40px !important; --awb-padding-top:112px !important; --awb-padding-bottom:40px !important; align-items:center !important; }
  body.home.mztv-ux .fusion-builder-row-2 .mztv-hero-title{ margin-top:0 !important; }
  body.home.mztv-ux .fusion-builder-row-2 .mztv-hero-title h1{ font-size:clamp(64px, 11vh, 130px) !important; line-height:1.05 !important; }
  body.home.mztv-ux .fusion-builder-row-2 .fusion-title-2{ margin-top:16px !important; margin-bottom:28px !important; }
  body.home.mztv-ux .fusion-builder-row-2 .mztv-tv-slot{ width:min(920px, 100%, calc((88vh - 250px) * 1.7778)) !important; margin:0 auto !important; }
  body.home.mztv-ux .ux-home{ padding-top:70px; }
}
@media (max-width:1024px){
  body.home.mztv-ux .fusion-builder-row-2{ min-height:calc(100vh - 172px) !important; min-height:calc(100svh - 172px - env(safe-area-inset-bottom)) !important; --awb-min-height:0 !important;
    box-sizing:border-box; padding-top:20px !important; padding-bottom:20px !important; --awb-padding-top:20px !important; --awb-padding-bottom:20px !important; align-items:center !important; }
  body.home.mztv-ux .fusion-builder-row-2 .mztv-tv-slot{ margin-top:18px !important; }
  body.home.mztv-ux .ux-home{ padding-top:44px; }
}