/* ============================================================
   Homar Sánchez Díaz — hoja de estilos
   Paleta derivada del prisma sobre la partitura y de las
   portadas de las partituras.
   ============================================================ */
:root{
  --tinta:      #0C1424;
  --tinta-2:    #141E33;
  --hueso:      #EDE6D8;
  --hueso-2:    #C3BCAE;
  --tenue:      #8E97A9;
  --cempasuchil:#F26A1B;
  --turquesa:   #22908F;
  --oro:        #D9A441;
  --violeta:    #7B5BC4;
  --carmin:     #B33A3A;

  --max: 1260px;
  --gut: clamp(20px, 5vw, 68px);
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Spectral', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--tinta); color:var(--hueso);
  font-family:var(--body); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
section{padding-block:clamp(70px,9.5vw,128px); position:relative}
.rule{height:1px; background:rgba(237,230,216,.13); border:0; margin:0}

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cempasuchil); margin:0 0 18px;
}
h2{
  font-family:var(--display); font-weight:800; font-size:clamp(31px,5.2vw,54px);
  line-height:1.02; letter-spacing:-.028em; margin:0 0 16px; text-wrap:balance;
}
.lead{max-width:56ch; color:var(--hueso-2); margin:0 0 40px}

/* ---------------- NAV ---------------- */
header{
  position:sticky; top:0; z-index:80;
  background:rgba(12,20,36,.86); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(237,230,216,.12);
}
.nav{display:flex; align-items:center; gap:22px; height:64px}
.mark{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.02em; text-decoration:none; white-space:nowrap}
.mark span{
  background:linear-gradient(90deg,var(--cempasuchil),var(--oro),var(--turquesa));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav ul{display:flex; gap:24px; list-style:none; margin:0 0 0 auto; padding:0}
.nav ul a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--tenue); transition:color .18s;
}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--hueso)}
.lang{display:flex; border:1px solid rgba(237,230,216,.25); margin-left:22px}
.nav ul+.lang{margin-left:22px}
.lang:first-of-type:not(ul+.lang){margin-left:auto}
.lang button{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; padding:5px 10px;
  background:none; border:0; color:var(--tenue); cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--hueso); color:var(--tinta); font-weight:600}
@media(max-width:900px){ .nav ul{display:none} .lang{margin-left:auto} }

/* ---------------- HERO ---------------- */
.hero{
  min-height:min(88vh,860px); display:flex; align-items:flex-end;
  padding-block:clamp(90px,14vw,180px) clamp(48px,7vw,86px);
  position:relative; overflow:hidden; isolation:isolate;
}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:60% 55%}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,20,36,.72) 0%, rgba(12,20,36,.45) 38%, rgba(12,20,36,.94) 92%),
    linear-gradient(95deg, rgba(12,20,36,.9) 8%, rgba(12,20,36,.15) 62%);
}
.hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px,8.6vw,104px); line-height:.92; letter-spacing:-.045em;
  margin:0 0 20px; max-width:14ch; text-wrap:balance;
}
.spectrum{
  background:linear-gradient(92deg,#F26A1B 0%,#D9A441 26%,#22908F 58%,#7B5BC4 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{font-size:clamp(17px,2vw,21px); max-width:44ch; color:#DCD5C7; margin:0 0 32px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:15px 24px; display:inline-block;
  transition:transform .16s, background .16s, border-color .16s;
}
.btn-a{background:var(--cempasuchil); color:#0C1424; font-weight:600}
.btn-b{border:1px solid rgba(237,230,216,.38); backdrop-filter:blur(4px)}
.btn:hover{transform:translateY(-2px)}
.btn-b:hover{background:rgba(237,230,216,.1); border-color:var(--hueso)}

/* ---------------- CIFRAS ---------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(237,230,216,.14)}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--tinta); padding:26px 20px}
.stat b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(27px,3.5vw,40px); letter-spacing:-.03em; line-height:1}
.stat span{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--tenue); display:block; margin-top:9px}

/* ---------------- CATÁLOGO ---------------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px}
.filters button{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:none; border:1px solid rgba(237,230,216,.22); color:var(--tenue);
  padding:9px 15px; cursor:pointer; transition:.16s;
}
.filters button:hover{color:var(--hueso); border-color:rgba(237,230,216,.5)}
.filters button[aria-pressed="true"]{background:var(--hueso); color:var(--tinta); border-color:var(--hueso); font-weight:600}

.cat{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1px; background:rgba(237,230,216,.13)}
.card{
  background:var(--tinta); display:flex; flex-direction:column; text-decoration:none;
  opacity:0; transform:translateY(14px); transition:opacity .55s, transform .55s;
}
.card.in{opacity:1; transform:none}
.cover{aspect-ratio:1; overflow:hidden; background:var(--tinta-2)}
.cover img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
a.card:hover .cover img{transform:scale(1.045)}
.card-body{padding:20px 22px 26px; display:flex; flex-direction:column; flex:1}
.card h3{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.02em; margin:0 0 6px; line-height:1.15}
.meta{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--tenue); margin:0 0 14px; line-height:1.5}
.card p.desc{margin:0 0 18px; font-size:14.5px; line-height:1.55; color:var(--hueso-2)}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-top:auto; display:inline-flex; align-items:center; gap:8px}
.tag::before{content:""; width:7px; height:7px; background:currentColor}
.tag.sale{color:var(--cempasuchil)}
.tag.pub{color:var(--turquesa)}
.tag.soon{color:var(--tenue)}

/* ---------------- QUÉ INCLUYE CADA PARTITURA ---------------- */
.incluye{
  list-style:none; padding:0; margin:0 0 40px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:rgba(237,230,216,.14);
}
.incluye li{background:var(--tinta); padding:22px 24px 24px; border-top:3px solid var(--cempasuchil)}
.incluye li:nth-child(2){border-top-color:var(--turquesa)}
.incluye li:nth-child(3){border-top-color:var(--oro)}
.incluye b{
  display:block; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:10px;
}
.incluye span{display:block; font-size:14.5px; line-height:1.55; color:var(--hueso-2)}

/* ---------------- SPOTIFY ---------------- */
.spotify{margin-bottom:26px}
.spotify iframe{display:block; border:0; border-radius:0}

/* ---------------- ESCUCHAR ---------------- */
.vids{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:rgba(237,230,216,.13)}
.vid{background:var(--tinta); padding:34px 30px 30px; text-decoration:none; display:flex; flex-direction:column; transition:background .2s}
.vid:hover{background:var(--tinta-2)}
.vid img.logo{height:58px; width:auto; max-width:88%; object-fit:contain; margin-bottom:24px; opacity:.95}
.vid h3{font-family:var(--display); font-weight:600; font-size:24px; margin:0 0 8px; letter-spacing:-.02em}
.vid p{margin:0 0 20px; font-size:15px; color:var(--hueso-2); flex:1}
.vid .tag{color:var(--oro)}

/* ---------------- MOSAICO DE ENSAMBLES ---------------- */
.mosaic{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:1px; background:rgba(237,230,216,.18)}
@media(max-width:520px){.mosaic{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.tile{
  background:var(--hueso); aspect-ratio:1; display:grid; place-items:center; padding:11px;
  position:relative; overflow:hidden;
}
.tile img{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(1) contrast(1.05); opacity:.82;
  transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.tile:hover img{opacity:1; transform:scale(1.05)}
.tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:11px 9px;
  background:var(--tinta); color:var(--hueso);
  font-family:var(--mono); font-size:10px; line-height:1.4; letter-spacing:.03em;
  text-transform:uppercase; text-wrap:balance;
  text-align:center; transform:translateY(101%); transition:transform .25s;
}
.tile:hover figcaption, .tile:focus-within figcaption{transform:none}
.also{margin-top:26px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--tenue); line-height:1.9; max-width:80ch}
.also b{color:var(--hueso-2); font-weight:400}

/* ---------------- BIO ---------------- */
.bio-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,72px)}
@media(max-width:880px){.bio-grid{grid-template-columns:1fr}}
.portrait{position:relative}
.portrait img{aspect-ratio:4/5; object-fit:cover; object-position:52% 22%; width:100%}
.portrait::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,#F26A1B,#D9A441,#22908F,#7B5BC4);
}
.bio-text p{margin:0 0 20px}
.bio-text p:first-of-type{font-size:20px}
.creds{list-style:none; padding:0; margin:32px 0 0; display:grid; gap:1px; background:rgba(237,230,216,.14)}
.creds li{background:var(--tinta); padding:14px 0 14px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--hueso-2)}
.creds li b{color:var(--oro); font-weight:600}

/* ---------------- PRENSA ---------------- */
.press{display:grid; gap:1px; background:rgba(237,230,216,.13)}
.press a{
  background:var(--tinta); padding:24px 26px; text-decoration:none;
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:baseline; transition:background .18s;
}
.press a:hover{background:var(--tinta-2)}
.press .src{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cempasuchil); min-width:14ch}
.press .ttl{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.015em; line-height:1.3}
.press .ttl small{display:block; font-family:var(--body); font-weight:300; font-size:15px; color:var(--hueso-2); margin-top:7px; letter-spacing:0; line-height:1.55}
.press .date{font-family:var(--mono); font-size:11px; color:var(--tenue); white-space:nowrap}
@media(max-width:760px){
  .press a{grid-template-columns:1fr; gap:10px}
  .press .date{grid-row:1; justify-self:start}
}

/* ---------------- CONTACTO ---------------- */
.contact{background:var(--hueso); color:var(--tinta)}
.contact .eyebrow{color:var(--carmin)}
.contact h2{max-width:15ch}
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact p{color:#39405166; color:#3A4152; max-width:44ch; margin:0}
.clist{list-style:none; padding:0; margin:0; display:grid; gap:1px; background:rgba(12,20,36,.16)}
.clist a{
  background:var(--hueso); display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 6px 18px 0; text-decoration:none; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.06em; transition:padding .18s, color .18s;
}
.clist a:hover{padding-left:12px; color:var(--carmin)}
.clist a span:last-child{color:#666E80; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase}

/* ---------------- FOOTER ---------------- */
footer{background:var(--tinta); padding:44px 0 52px}
.foot{display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--tenue)}
.foot-logos{display:flex; gap:26px; align-items:center}
.foot-logos img{height:26px; width:auto; max-width:150px; object-fit:contain; opacity:.6; transition:opacity .2s}
.foot-logos a:hover img{opacity:1}
.foot-spectrum{height:4px; background:linear-gradient(90deg,#F26A1B,#D9A441,#22908F,#7B5BC4); margin-bottom:44px}

/* ---------------- SUBPÁGINA PRENSA ---------------- */
.page-head{padding-block:clamp(56px,8vw,104px) clamp(28px,4vw,48px)}
.page-head h1{font-family:var(--display); font-weight:800; font-size:clamp(38px,7vw,76px); line-height:.98; letter-spacing:-.04em; margin:0 0 18px}
.back{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue); text-decoration:none}
.back:hover{color:var(--hueso)}
.block-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turquesa); margin:0 0 18px; padding-top:8px;
}

:focus-visible{outline:2px solid var(--cempasuchil); outline-offset:3px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .card{opacity:1; transform:none}
  html{scroll-behavior:auto}
}