/* ==========================================================================
   ECM — Electronic Clubbing Movement
   ========================================================================== */

:root{
  --bg:          #f4f3f0;
  --ink:         #111111;
  --ink-soft:    #3b3b3b;
  --muted:       #8a8781;
  --accent:      #b4561f;
  --rule:        #d6d3cc;
  --rule-strong: #b9b5ad;
  --max:         1100px;
  --gap:         40px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* Arrows / CTAs ----------------------------------------------------------- */
.arrow{color:var(--accent);display:inline-block;transition:transform .25s ease}
a:hover .arrow,button:hover .arrow{transform:translateX(5px)}

.cta{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
}
.cta--lg{font-size:12px;letter-spacing:.12em}

/* Section titles ---------------------------------------------------------- */
.section-title{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  padding-bottom:10px;margin-bottom:26px;position:relative;
}
.section-title::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--accent);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{border-bottom:1px solid var(--rule-strong);background:var(--bg)}

.header-inner{
  display:flex;align-items:center;gap:36px;
  min-height:96px;
}

.brand{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.brand-mark{
  font-size:47px;font-weight:800;letter-spacing:-.045em;line-height:.8;
}
.brand-rule{width:1px;height:52px;background:var(--rule-strong)}
.brand-words{
  display:flex;flex-direction:column;gap:2px;
  font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-soft);
}

.main-nav{display:flex;gap:28px;margin-left:auto}
.main-nav a{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
.main-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}

.socials{display:flex;gap:16px;align-items:center}
.socials a{width:18px;height:18px;color:var(--ink);opacity:.85;transition:opacity .2s,color .2s}
.socials a:hover{opacity:1;color:var(--accent)}
.socials svg{width:100%;height:100%;display:block}

.nav-toggle{display:none;width:26px;height:18px;margin-left:auto;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;background:var(--ink)}

/* ==========================================================================
   FEATURED
   ========================================================================== */
.featured{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  padding-top:54px;padding-bottom:58px;
}

.feat-meta{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.num{font-size:17px;font-weight:700;color:var(--accent);letter-spacing:.02em}
.kicker{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);
}

.thumb{
  display:block;aspect-ratio:1/1;background:#0b0b0b;overflow:hidden;
  transition:opacity .3s ease;
}
.thumb:hover{opacity:.82}

.feat-title{
  font-size:30px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  margin:22px 0 10px;
}
.feat-sub{
  margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);
}
.feat .cta{margin-top:26px}

/* Placeholder artwork ------------------------------------------------------
   Reemplazá estos bloques por <img> reales cuando tengas las fotos.        */
.thumb--eclipse{
  background:
    radial-gradient(circle at 50% 42%, #000 0 26%, rgba(255,255,255,.55) 26.6%, rgba(0,0,0,0) 34%),
    radial-gradient(ellipse at 50% 95%, #4a4a4a 0%, #0d0d0d 60%),
    #050505;
}
.thumb--portrait{
  background:
    radial-gradient(ellipse at 44% 34%, #6e6a66 0%, rgba(0,0,0,0) 46%),
    linear-gradient(160deg,#2a2826 0%,#0a0a0a 72%),
    #101010;
}
.thumb--crowd{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.85) 0 42%, rgba(255,255,255,0) 42%) 22% 0/6px 100% no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,.9) 0 52%, rgba(255,255,255,0) 52%) 50% 0/7px 100% no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,.8) 0 46%, rgba(255,255,255,0) 46%) 76% 0/6px 100% no-repeat,
    linear-gradient(to top,#000 0 38%, #1c1c1c 100%),
    #0a0a0a;
}

/* ==========================================================================
   LATEST
   ========================================================================== */
.latest{padding-bottom:58px}
.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.latest-grid .col + .col{border-left:1px solid var(--rule);padding-left:var(--gap)}

.col-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.col-head h3{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
}
.view-all{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
}
.view-all:hover{color:var(--accent)}

.list li{border-bottom:1px solid var(--rule)}
.list li:last-child{border-bottom:0}
.list a{display:flex;gap:16px;align-items:flex-start;padding:15px 0;transition:opacity .2s}
.list a:hover{opacity:.62}

.mini{flex:0 0 58px;width:58px;height:58px;background:#0b0b0b;display:block}
.txt{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.txt strong{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
}
.txt em{
  font-style:normal;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);
}

.mini--eclipse{background:radial-gradient(circle at 50% 45%,#000 0 34%,rgba(255,255,255,.5) 35%,#000 48%),#060606}
.mini--spark{background:radial-gradient(circle at 50% 50%,#fff 0 4%,#7a7a7a 9%,#000 40%),#050505}
.mini--lines{background:repeating-linear-gradient(90deg,#f0f0f0 0 1px,#0a0a0a 1px 4px),#0a0a0a}
.mini--portrait{background:linear-gradient(150deg,#5d5a57 0%,#0c0c0c 70%),#101010}
.mini--portrait2{background:linear-gradient(200deg,#4a4744 0%,#090909 68%),#0d0d0d}
.mini--beams{background:
  linear-gradient(to bottom,#fff 0 55%,rgba(0,0,0,0) 55%) 28% 0/4px 100% no-repeat,
  linear-gradient(to bottom,#fff 0 62%,rgba(0,0,0,0) 62%) 50% 0/4px 100% no-repeat,
  linear-gradient(to bottom,#fff 0 50%,rgba(0,0,0,0) 50%) 72% 0/4px 100% no-repeat,#070707}
.mini--orb{background:radial-gradient(circle at 50% 50%,#e6e2da 0 8%,#6b6149 22%,#000 55%),#050505}
.mini--ring{background:radial-gradient(circle at 50% 50%,#000 0 30%,#d8d2c6 32%,#000 40%),#050505}

/* ==========================================================================
   SELECTS + EVENTS
   ========================================================================== */
.selects-events{
  display:grid;grid-template-columns:1.9fr 1fr;gap:56px;
  padding-bottom:58px;
}
.events{border-left:1px solid var(--rule);padding-left:56px}

.tracks li{
  display:grid;
  grid-template-columns:34px 1.1fr 1.1fr 1fr auto;
  align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--rule);
}
.t-num{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.t-artist{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.t-track,.t-label{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);
}
.t-links{display:flex;gap:14px;align-items:center;justify-self:end}

.ic{
  width:16px;height:16px;display:block;opacity:.8;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transition:opacity .2s,transform .2s;
}
.ic:hover{opacity:1;transform:scale(1.12)}
.ic-play{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E");
}
.ic-spotify{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.6 14.4a.8.8 0 01-1.1.3c-2.9-1.8-6.6-2.2-10-1.4a.8.8 0 11-.3-1.5c3.7-.9 7.8-.4 11.1 1.6.4.2.5.7.3 1zm1.2-2.8a1 1 0 01-1.3.3c-3.3-2-8.3-2.6-12.2-1.4a1 1 0 11-.6-1.9c4.5-1.3 10-.7 13.8 1.6.5.3.6.9.3 1.4zm.1-2.9C14.1 8.4 7.9 8.2 4.3 9.3a1.2 1.2 0 11-.7-2.3C7.8 5.7 14.6 6 19 8.6a1.2 1.2 0 01-1.2 2.1z'/%3E%3C/svg%3E");
}
.ic-sc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M2 14v3.2h1.1V14H2zm2.2-1.4v4.6h1.1v-4.6H4.2zm2.2-1.1v5.7h1.1v-5.7H6.4zm2.2-1.3v7h1.1v-7H8.6zm2.3-.9v7.9H12V9.3h-1.1zm2.6 7.9h5.3a3 3 0 00.3-6 4.6 4.6 0 00-5.6-3.5v9.5z'/%3E%3C/svg%3E");
}

.selects .cta--lg{margin-top:26px}

.event-list li{
  display:flex;gap:22px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.date{display:flex;flex-direction:column;align-items:center;min-width:44px;line-height:1}
.date strong{font-size:25px;font-weight:700;letter-spacing:-.02em}
.date em{
  font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-soft);margin-top:5px;
}
.ev-txt{display:flex;flex-direction:column;gap:3px}
.ev-txt strong{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.ev-txt em{font-style:normal;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}

.events .cta--lg{margin-top:24px}

/* ==========================================================================
   LABELS
   ========================================================================== */
.labels{padding-bottom:54px}
.label-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:6px;
}
.label-row a{
  flex:1;text-align:center;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  padding:6px 4px;transition:color .2s;
}
.label-row a:hover{color:var(--accent)}
.label-row a + a{border-left:1px solid var(--rule)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--rule-strong)}

.footer-top{
  display:grid;grid-template-columns:1.15fr 1fr;gap:70px;
  padding-top:46px;padding-bottom:46px;
}

.statement h2{
  font-size:29px;line-height:1.28;font-weight:600;letter-spacing:-.022em;
  max-width:16ch;margin-bottom:22px;
}
.newsletter{border-left:1px solid var(--rule);padding-left:46px}
.newsletter h3{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;margin-bottom:12px;
}
.newsletter p{margin:0 0 22px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}

.nl-form{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:9px}
.nl-form input{
  flex:1;border:0;background:none;outline:none;
  font:inherit;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);
}
.nl-form input::placeholder{color:var(--muted)}
.nl-form button{font-size:16px;line-height:1}
.nl-msg{margin:12px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);min-height:14px}

.footer-bottom{
  display:flex;align-items:flex-start;justify-content:space-between;gap:30px;
  border-top:1px solid var(--rule);padding-top:20px;padding-bottom:34px;
}
.copy{margin:0;font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);line-height:1.7}
.footer-nav{display:flex;gap:32px;flex-wrap:wrap}
.footer-nav a{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft)}
.footer-nav a:hover{color:var(--accent)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .featured,.latest-grid{grid-template-columns:1fr 1fr}
  .latest-grid .col:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:26px;margin-top:8px}
  .featured .feat:nth-child(3){grid-column:1/-1;max-width:50%}
  .selects-events{grid-template-columns:1fr;gap:44px}
  .events{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:36px}
  .footer-top{grid-template-columns:1fr;gap:40px}
  .newsletter{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:32px}
  .statement h2{max-width:none}
}

@media (max-width:760px){
  .nav-toggle{display:flex}
  .main-nav{
    display:none;order:3;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--rule);margin:0;padding:6px 0 14px;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 0;border-bottom:1px solid var(--rule)}
  .header-inner{flex-wrap:wrap;gap:16px;min-height:0;padding-top:18px;padding-bottom:14px}
  .socials{order:2}
  .brand-mark{font-size:38px}
  .brand-rule{height:42px}

  .featured,.latest-grid{grid-template-columns:1fr;gap:44px}
  .featured .feat:nth-child(3){max-width:none}
  .latest-grid .col + .col{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:26px}
  .latest-grid .col:nth-child(3){margin-top:0}

  .tracks li{grid-template-columns:28px 1fr auto;row-gap:4px}
  .t-track{grid-column:2}
  .t-label{grid-column:2}
  .t-links{grid-row:1/4;grid-column:3}

  .label-row{flex-wrap:wrap;justify-content:flex-start;gap:0}
  .label-row a{flex:0 0 50%;text-align:left;padding:10px 0;border-left:0!important;
    border-bottom:1px solid var(--rule)}
  .statement h2{font-size:24px}
  .footer-bottom{flex-direction:column;gap:18px}
  .footer-nav{gap:20px}
}