/* HISTORIA DE UNA REVOLUCION MUSICAL — Colección, v4.
   Capa añadida y reversible. Mantiene rutas, datos, búsqueda y URLs de escucha. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--collection-accent:#b76b7a;--collection-accent2:#f2b36c;--collection-bg:#10121a;--collection-panel:#19202d;--collection-line:#384152;--collection-text:#f5f0e9;--collection-muted:#b9c1d0;--collection-serif:'Playfair Display',Georgia,serif;--collection-sans:'DM Sans',system-ui,sans-serif}
html{scroll-behavior:smooth}body{background:var(--collection-bg)!important;color:var(--collection-text)!important;font-family:var(--collection-sans)!important;line-height:1.65!important}
.wrap{width:min(1120px,calc(100% - 48px))!important;margin-inline:auto!important}
.trilogy-global-nav{background:#0d1018!important;border-bottom:1px solid var(--collection-line)!important}
.trilogy-global-nav .trilogy-nav-inner{width:min(1120px,calc(100% - 48px))!important;min-height:49px!important;margin-inline:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}
.trilogy-global-nav .trilogy-nav-links{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important}
.trilogy-global-nav a{font-family:var(--collection-sans)!important;font-size:12px!important;line-height:1.3!important}
.trilogy-global-nav a[aria-current='page']{background:var(--collection-accent)!important;border-color:var(--collection-accent)!important;color:#fff!important}
.mast,.trilogia-mast{background:#0d1018!important;border-bottom:1px solid var(--collection-line)!important}
.mast .wrap,.trilogia-mast .trilogia-mast-inner{min-height:68px!important;padding:12px 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important}
.mast .logo,.trilogia-mast .trilogia-logo{font:700 24px/1.2 var(--collection-serif)!important;letter-spacing:.09em!important;color:var(--collection-accent2)!important;text-decoration:none!important}
.mast .subline,.trilogia-mast .trilogia-subline{font:500 11px/1.5 var(--collection-sans)!important;letter-spacing:.16em!important;color:var(--collection-muted)!important;text-transform:uppercase!important}
.mast .toplink,.trilogia-mast .trilogia-toplink{font:600 12px var(--collection-sans)!important;color:var(--collection-accent2)!important;text-decoration:none!important}
.hero,.trilogia-techno-hero{max-width:none!important;padding:66px 0 51px!important;margin:0 0 27px!important;border-bottom:1px solid var(--collection-line)!important;background:transparent!important}
.hero .eyebrow,.trilogia-techno-hero .trilogia-eyebrow{color:var(--collection-accent2)!important;font:800 11px/1.5 var(--collection-sans)!important;letter-spacing:.2em!important;text-transform:uppercase!important}
.hero h1,.trilogia-techno-hero h1{font:600 clamp(43px,5.2vw,66px)/1.11 var(--collection-serif)!important;letter-spacing:-.035em!important;margin:22px 0 24px!important;max-width:950px!important}
.hero h1 em,.trilogia-techno-hero h1 em{color:var(--collection-accent2)!important;font-weight:500!important}
.hero p,.trilogia-techno-hero p{font:400 17px/1.8 var(--collection-sans)!important;color:var(--collection-muted)!important;max-width:690px!important;margin:0!important}
.hero p b,.hero p strong,.trilogia-techno-hero p b,.trilogia-techno-hero p strong{color:var(--collection-text)!important}
.hero .line,.trilogia-techno-line{width:62px!important;height:2px!important;display:block!important;border:0!important;background:var(--collection-accent2)!important;margin-top:26px!important}
.section-head,.trilogia-techno-section-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;margin:24px 0 18px!important}
.section-head h2,.trilogia-techno-section-head h2{font:600 29px/1.2 var(--collection-serif)!important;margin:0!important;color:var(--collection-text)!important}
.catalog-tools,.filters,#app .controls{background:var(--collection-panel)!important;border:1px solid var(--collection-line)!important;border-radius:13px!important;padding:13px!important;gap:11px!important}
.catalog-tools input,.catalog-tools select,.filters input,.filters select,#app .controls input,#app .controls select{font:500 14px var(--collection-sans)!important;background:#111a29!important;color:var(--collection-text)!important;border:1px solid #56647a!important;border-radius:9px!important;min-height:47px!important;padding:11px 12px!important}
.library,#app .grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}
.library .tile,#app .grid .tile{background:var(--collection-panel)!important;border:1px solid var(--collection-line)!important;border-radius:13px!important;padding:19px!important;box-shadow:none!important;min-height:200px!important;transition:border-color .18s ease,transform .18s ease!important}
.library .tile:hover,#app .grid .tile:hover{border-color:var(--collection-accent2)!important;transform:translateY(-2px)!important}
.library .tile h3,#app .grid .tile h2{font:600 22px/1.3 var(--collection-serif)!important;letter-spacing:-.015em!important;margin:10px 0 8px!important;overflow-wrap:anywhere!important}
.library .tile .artist,#app .grid .tile .artist{font-size:14px!important;color:var(--collection-muted)!important}
.library .tile .num,#app .grid .tile .tag{font:700 11px/1.4 var(--collection-sans)!important;letter-spacing:.09em!important;color:var(--collection-accent2)!important}
#app .grid .tile .link{color:var(--collection-text)!important;text-decoration:none!important}
#app .grid .tile .link:hover{text-decoration:underline!important}
.library .tile p,#app .grid .tile p{font:400 13px/1.7 var(--collection-sans)!important;color:var(--collection-muted)!important}
/* Fichas: mismo sistema tipográfico y reproductores con anchura estable */
.article,.detailhero,.detailsection,#app .detail{color:var(--collection-text)!important}
.article h1,.detailhero h1,#app .detail h2{font:600 clamp(35px,5vw,66px)/1.15 var(--collection-serif)!important;letter-spacing:-.035em!important;color:var(--collection-text)!important}
.article h2,.detailsection h2,#app .detail h3{font:600 25px/1.3 var(--collection-serif)!important;color:var(--collection-text)!important}
.article iframe,.detailsection iframe,#app .detail iframe{max-width:100%!important;border-radius:12px!important}
#app .detail{max-width:1120px!important;width:100%!important;padding:26px!important;background:transparent!important;border:0!important}
#app .detail .tag{color:var(--collection-accent2)!important}
#app .detail .artist{font-size:16px!important;color:var(--collection-muted)!important}
#app .detail .trilogy-detail-layout{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(300px,.85fr)!important;gap:35px!important;align-items:start!important;margin-top:25px!important}
#app .detail .trilogy-detail-media{background:var(--collection-panel)!important;border:1px solid var(--collection-line)!important;border-radius:15px!important;padding:20px!important;min-width:0!important}
#app .detail .trilogy-detail-copy{min-width:0!important}
#app .detail .trilogy-detail-copy h3:first-child,#app .detail .trilogy-detail-media h3:first-child{margin-top:0!important}
#app .detail .trilogy-detail-media iframe{width:100%!important}
#app .detail .trilogy-detail-media .action{margin:6px 5px 6px 0!important}
#app .detail .trilogy-detail-tail{border-top:1px solid var(--collection-line)!important;margin-top:27px!important;padding-top:12px!important}
:where(a,button,input,select):focus-visible{outline:3px solid var(--collection-accent2)!important;outline-offset:3px!important}
@media(max-width:800px){.library,#app .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#app .detail .trilogy-detail-layout{grid-template-columns:1fr!important}.hero,.trilogia-techno-hero{padding:40px 0 35px!important}.mast .subline,.trilogia-mast .trilogia-subline{display:none!important}}
@media(max-width:580px){.wrap,.trilogy-global-nav .trilogy-nav-inner{width:calc(100% - 32px)!important}.trilogy-global-nav .trilogy-nav-inner{align-items:flex-start!important;flex-direction:column!important;padding:11px 0!important}.trilogy-global-nav .trilogy-nav-links{width:100%!important;gap:5px!important}.trilogy-global-nav .trilogy-nav-links a{flex:1!important;text-align:center!important;font-size:10px!important}.mast .wrap,.trilogia-mast .trilogia-mast-inner{min-height:60px!important}.hero h1,.trilogia-techno-hero h1{font-size:clamp(36px,10vw,48px)!important}.hero p,.trilogia-techno-hero p{font-size:15px!important}.library,#app .grid{grid-template-columns:1fr!important}.section-head,.trilogia-techno-section-head{align-items:flex-start!important}.section-head h2,.trilogia-techno-section-head h2{font-size:25px!important}#app .detail{padding:12px 0!important}#app .detail .trilogy-detail-media{padding:12px!important}.article iframe,.detailsection iframe,#app .detail iframe{width:100%!important}}

:root{--collection-accent:#a66a26;--collection-accent2:#e9aa60;--collection-bg:#0e1521;--collection-panel:#182536;--collection-line:#44566e}
/* TECHNO v5: búsqueda dinámica sin ocultaciones CSS, accesibilidad y estado vacío. */
#app .empty-results{grid-column:1/-1;color:var(--collection-muted);padding:24px 4px}
#app .controls input[type="search"]{min-width:0}
#app .detail .trilogy-detail-media iframe{max-width:100%}

/* TECHNO v7 — identidad cromática original ámbar sobre antracita.
   ROCK conserva el azul petróleo y DISCO el ciruela. */
:root{
  --collection-accent:#a66a26;
  --collection-accent2:#e9aa60;
  --collection-bg:#121416;
  --collection-panel:#23272b;
  --collection-line:#4c5359;
}
.trilogy-global-nav,.mast,.trilogia-mast{background:#171a1d!important}
.catalog-tools input,.catalog-tools select,.filters input,.filters select,
#app .controls input,#app .controls select{background:#181c20!important;border-color:#626a70!important}