/* diegocuesta.com/dj — shared DJ landing styles (ES + EN) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #030303;
  --bg2:  #080808;
  --bg3:  #0d0d0d;
  --card: rgba(255,255,255,.04);
  --bdr:  rgba(255,255,255,.08);
  --gn:   #00e840;
  --yw:   #ffd800;
  --rd:   #ff2020;
  --t1:   #f0ede0;
  --t2:   #787878;
  --r:    14px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--t1); line-height: 1.6; overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,232,64,.35); border-radius: 99px; }
::selection { background: rgba(0,232,64,.2); }

/* WAVES */
.bg-waves { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wrow { position: absolute; left: -400px; right: 0; height: 60px; background-repeat: repeat-x; background-size: 300px 100%; }
.w1 { top:  6%; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60'><path d='M0 30 C45 10 105 10 150 30 C195 50 255 50 300 30' stroke='%2300e840' stroke-width='1.5' fill='none'/></svg>"); opacity:.06; animation: wm 9s linear infinite; }
.w2 { top: 18%; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60'><path d='M0 30 C45 18 105 18 150 30 C195 42 255 42 300 30' stroke='%23ffd800' stroke-width='1' fill='none'/></svg>"); opacity:.05; animation: wm 14s linear infinite reverse; }
.w3 { top: 32%; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60'><path d='M0 30 C45 5 105 5 150 30 C195 55 255 55 300 30' stroke='%23ff2020' stroke-width='1.5' fill='none'/></svg>"); opacity:.05; animation: wm 7s linear infinite; }
.w4 { top: 49%; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60'><path d='M0 30 C22 15 52 15 75 30 C97 45 127 45 150 30 C172 15 202 15 225 30 C247 45 277 45 300 30' stroke='%2300e840' stroke-width='1' fill='none'/></svg>"); opacity:.04; animation: wm 18s linear infinite; }
.w5 { top: 65%; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60'><path d='M0 30 C45 12 105 12 150 30 C195 48 255 48 300 30' stroke='%23ffd800' stroke-width='1.5' fill='none'/></svg>"); opacity:.05; animation: wm 11s linear infinite reverse; }
.w6 { top: 80%; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60'><path d='M0 30 C45 8 105 8 150 30 C195 52 255 52 300 30' stroke='%23ff2020' stroke-width='1' fill='none'/></svg>"); opacity:.04; animation: wm 8s linear infinite; }
@keyframes wm { 0%{transform:translateX(0)} 100%{transform:translateX(300px)} }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem,3vw,2rem); height: 58px;
  background: rgba(3,3,3,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bdr);
}
nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gn), var(--yw), var(--rd), var(--yw), var(--gn)); }
.n-logo { font-weight: 900; font-size: 1.1rem; letter-spacing: -.03em; text-decoration: none; }
.n-logo .gr { background: linear-gradient(90deg, var(--gn), var(--yw)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.n-links { display: flex; gap: 1.6rem; list-style: none; }
.n-links a { color: var(--t2); text-decoration: none; font-size: .82rem; font-weight: 500; transition: color .2s; }
.n-links a:hover { color: var(--gn); }
.n-right { display: flex; align-items: center; gap: .75rem; }
.n-back { padding: .38rem .9rem; border-radius: 999px; border: 1px solid var(--bdr); color: var(--t2); font-size: .8rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.n-back:hover { border-color: var(--gn); color: var(--t1); }
.n-mb { display: none; background: none; border: none; color: var(--t2); font-size: 1.1rem; cursor: pointer; }
.lang-sw { display:flex; align-items:center; gap:.3rem; font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; }
.la { color:#555; text-decoration:none; padding:.2rem .3rem; border-radius:4px; transition:color .2s; }
.la:hover { color:var(--t1); }
.la-on { color:var(--gn); }

/* GALLERY */
#galeria { background: rgba(3,3,3,.97); }
.slider-outer { max-width: 480px; margin: 0 auto; position: relative; }
.slider-wrap { border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,232,64,.18); box-shadow: 0 0 50px rgba(0,232,64,.07); }
.slider-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
.slide { min-width: 100%; position: relative; background: #030303; }
.slide img { width: 100%; height: auto; display: block; object-fit: cover; }
.slide-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 1.75rem 1.5rem; background: linear-gradient(transparent, rgba(3,3,3,.88)); }
.slide-caption h4 { font-size: 1rem; font-weight: 700; margin-bottom: .18rem; }
.slide-caption p  { font-size: .82rem; color: rgba(255,255,255,.55); }
.sl-arrow { position: absolute; top: 42%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(3,3,3,.8); border: 1px solid rgba(0,232,64,.3); color: var(--gn); font-size: .88rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; z-index: 10; }
.sl-arrow:hover { background: rgba(0,232,64,.2); border-color: var(--gn); }
.sl-prev { left: -21px; } .sl-next { right: -21px; }
.sl-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.2rem; }
.sl-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); border: none; cursor: pointer; transition: all .3s; padding: 0; }
.sl-dot.active { background: var(--gn); width: 26px; }
.drawer { display: none; position: fixed; inset: 58px 0 0; z-index: 90; background: rgba(3,3,3,.97); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.drawer.open { display: flex; }
.drawer a { font-size: 1.1rem; font-weight: 700; color: var(--t1); text-decoration: none; transition: color .2s; }
.drawer a:hover { color: var(--gn); }

/* HERO */
.hero {
  min-height: 100vh; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 7rem 1.5rem 4rem; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(0,232,64,.12), transparent 65%),
    radial-gradient(ellipse 35% 30% at 15% 80%, rgba(255,216,0,.07), transparent 55%),
    radial-gradient(ellipse 30% 25% at 85% 75%, rgba(255,32,32,.07), transparent 55%);
}
.pulse-ring { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); border-radius: 50%; animation: po 3s ease-out infinite; opacity: 0; }
.pulse-ring:nth-child(1){width:200px;height:200px;border:1px solid rgba(0,232,64,.4);animation-delay:0s}
.pulse-ring:nth-child(2){width:370px;height:370px;border:1px solid rgba(0,232,64,.2);animation-delay:.9s}
.pulse-ring:nth-child(3){width:540px;height:540px;border:1px solid rgba(255,216,0,.12);animation-delay:1.8s}
@keyframes po { 0%{transform:translate(-50%,-50%) scale(.8);opacity:.7} 100%{transform:translate(-50%,-50%) scale(1.3);opacity:0} }
.hero-content { position: relative; z-index: 1; }
.hero-icon { width:88px;height:88px;margin:0 auto 1.65rem;border-radius:50%;background:linear-gradient(135deg,var(--gn),var(--yw));display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#030303;box-shadow:0 0 60px rgba(0,232,64,.45),0 0 120px rgba(0,232,64,.15); }
h1 { font-size: clamp(2.4rem,7vw,4.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; margin-bottom: 1.2rem; }
h1 .gr { background: linear-gradient(90deg, var(--gn), var(--yw)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { max-width: 510px; margin: 0 auto 2rem; color: var(--t2); font-size: 1.05rem; }
.hero-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: .48rem; padding: .75rem 1.65rem; border-radius: var(--r); font-weight: 700; font-size: .9rem; text-decoration: none; transition: opacity .2s, transform .2s; }
.btn:hover { opacity: .85; transform: translateY(-2px); }
.btn-p { background: linear-gradient(135deg, var(--gn), var(--yw)); color: #030303; box-shadow: 0 4px 28px rgba(0,232,64,.3); }
.btn-o { border: 1px solid var(--bdr); color: var(--t1); background: var(--card); }

/* SHARED */
section { padding: 5rem clamp(1rem,3vw,2rem); position: relative; z-index: 1; }
.ctr { max-width: 1100px; margin: 0 auto; }
.lbl { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gn); margin-bottom: .7rem; }
h2 { font-size: clamp(1.55rem,3.8vw,2.35rem); font-weight: 800; margin-bottom: .9rem; letter-spacing: -.035em; }
.ssub { color: var(--t2); max-width: 540px; margin-bottom: 2.8rem; font-size: .92rem; }

/* SERVICES */
#servicios { background: rgba(8,8,8,.95); }
.sg { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.1rem; }
.sc { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.65rem; transition: border-color .25s, transform .25s; }
.sc:hover { border-color: rgba(0,232,64,.4); transform: translateY(-4px); }
.sico { width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(0,232,64,.1);color:var(--gn);font-size:1.2rem;margin-bottom:.9rem; }
.sc h3 { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.sc p  { font-size: .82rem; color: var(--t2); }

/* STYLES */
#estilos { background: rgba(3,3,3,.97); }
.gg { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.gc { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 1.65rem; transition: border-color .25s, transform .25s, background .25s; }
.gc:hover { border-color: rgba(0,232,64,.35); background: rgba(0,232,64,.04); transform: translateY(-4px); }
.gc-wide { grid-column:1/-1; display:flex;align-items:flex-start;gap:1.4rem;background:linear-gradient(135deg,rgba(0,232,64,.05),rgba(255,216,0,.04));border-color:rgba(0,232,64,.2); }
.gico { width:42px;height:42px;border-radius:11px;background:rgba(0,232,64,.1);display:flex;align-items:center;justify-content:center;color:var(--gn);font-size:1.05rem;margin-bottom:.9rem;flex-shrink:0; }
.gc-wide .gico { margin-bottom:0; }
.gc h3 { font-size: .95rem; font-weight: 700; margin-bottom: .38rem; }
.gc p  { font-size: .82rem; color: var(--t2); line-height: 1.62; }

/* EVENTS (replaces photo gallery) */
#eventos { background: rgba(8,8,8,.95); }
.eg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.ec {
  border-radius: 18px; padding: 2rem;
  border: 1px solid rgba(255,255,255,.07);
  position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.ec:hover { transform: translateY(-5px); border-color: rgba(0,232,64,.3); }
.ec::before { content: ''; position: absolute; inset: 0; opacity: .06; }
.ec-1 { background: linear-gradient(135deg, rgba(0,232,64,.12), rgba(3,3,3,0)); }
.ec-1::before { background: radial-gradient(circle at 80% 20%, var(--gn), transparent 60%); }
.ec-2 { background: linear-gradient(135deg, rgba(255,216,0,.1), rgba(3,3,3,0)); }
.ec-2::before { background: radial-gradient(circle at 20% 80%, var(--yw), transparent 60%); }
.ec-3 { background: linear-gradient(135deg, rgba(255,32,32,.1), rgba(3,3,3,0)); }
.ec-3::before { background: radial-gradient(circle at 80% 80%, var(--rd), transparent 60%); }
.ec-4 { background: linear-gradient(135deg, rgba(0,232,64,.07), rgba(255,216,0,.06)); }
.ec-4::before { background: radial-gradient(circle at 50% 0%, var(--gn), transparent 60%); }
.ec-ico { font-size: 2.2rem; margin-bottom: 1rem; display: block; }
.ec h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .4rem; letter-spacing: -.02em; }
.ec p  { font-size: .82rem; color: var(--t2); line-height: 1.6; }
.ec-tag { display: inline-block; margin-top: .85rem; padding: .18rem .6rem; border-radius: 5px; background: rgba(0,232,64,.1); color: var(--gn); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* Visualizer bars (decorative) */
.viz { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-bottom: 1.1rem; }
.vb { width: 4px; border-radius: 2px; background: var(--gn); opacity: .5; animation: vba var(--d, .7s) ease-in-out infinite alternate; }
@keyframes vba { 0%{transform:scaleY(.2)}100%{transform:scaleY(1)} }

/* EQUIPMENT */
#equipos { background: rgba(3,3,3,.97); }
.eqg { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.4rem; }
.eqc { background: linear-gradient(135deg, rgba(0,232,64,.05), rgba(255,216,0,.04)); border: 1px solid rgba(0,232,64,.16); border-radius: 20px; padding: 1.85rem; transition: transform .25s; }
.eqc:hover { transform: translateY(-4px); }
.eqh { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.eqico { width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--gn),var(--yw));display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#030303; }
.eqc h3 { font-size: 1.05rem; font-weight: 700; }
.eqc ul { list-style: none; display: flex; flex-direction: column; gap: .48rem; }
.eqc li { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--t2); }
.eqc li i { color: var(--gn); font-size: .65rem; }

/* PACKAGES */
#paquetes { background: rgba(8,8,8,.95); }
.pkg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.4rem; }
.pc { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; transition: transform .25s; }
.pc:hover { transform: translateY(-4px); }
.pc.feat { border-color: rgba(255,216,0,.4); }
.ph { padding: 1.4rem; border-bottom: 1px solid var(--bdr); }
.pbadge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; margin-bottom: .7rem; background: rgba(0,232,64,.12); color: var(--gn); }
.ph h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .28rem; }
.ph p  { font-size: .82rem; color: var(--t2); }
.pb { padding: 1.2rem 1.4rem; }
.pb ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.pb li { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; }
.pb li i { color: var(--gn); margin-top: .2rem; font-size: .65rem; flex-shrink: 0; }
.pf { padding: .9rem 1.4rem 1.4rem; }
.btn-pk { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem; border-radius: 9px; width: 100%; font-weight: 700; font-size: .88rem; text-decoration: none; background: linear-gradient(135deg, var(--gn), var(--yw)); color: #030303; transition: opacity .2s; }
.btn-pk:hover { opacity: .85; }

/* CONTACT */
#contacto { background: rgba(3,3,3,.97); }
.cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 1.1rem; }
.cc { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 1.65rem; display: flex; align-items: center; gap: 1.1rem; text-decoration: none; color: inherit; transition: border-color .25s, transform .25s; }
.cc:hover { border-color: rgba(0,232,64,.4); transform: translateY(-3px); }
.cico { width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0; }
.ico-wa   { background: rgba(37,211,102,.12); color: #25d366; }
.ico-mail { background: rgba(0,232,64,.1);    color: var(--gn); }
.ico-gbp  { background: rgba(234,67,53,.12);  color: #ea4335; }
.ci h4 { font-size: .92rem; font-weight: 600; margin-bottom: .18rem; }
.ci p  { font-size: .82rem; color: var(--t2); }

/* FOOTER */
footer { background: rgba(8,8,8,.98); border-top: 1px solid var(--bdr); padding: 2.2rem clamp(1rem,3vw,2rem); text-align: center; color: var(--t2); font-size: .85rem; position: relative; z-index: 1; }
footer a { color: var(--gn); text-decoration: none; }

/* WA FLOAT */
.wa-float { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 54px; height: 54px; border-radius: 50%; background: #128c42; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; text-decoration: none; box-shadow: 0 4px 20px rgba(18,140,66,.5); transition: transform .2s; z-index: 200; }
.wa-float:hover { transform: scale(1.1); }

/* RESPONSIVE */
@media (max-width:900px) { .gg { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px) {
  .n-links { display: none; }
  .n-back  { display: none; }
  .n-mb    { display: block; }
  .gg      { grid-template-columns: 1fr; }
  .gc-wide { flex-direction: column; gap: 0; }
  .gc-wide .gico { margin-bottom: .9rem; }
  .pulse-ring { display: none; }
  section { padding: 3.8rem 1.2rem; }
}

/* ============================================================
   DINAMISMO — microinteracciones DJ
   ============================================================ */

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gn), var(--yw));
  z-index: 999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,232,64,.5);
  transition: width .08s linear;
}

/* H1 fade-up (las 2 piezas: "Música que" y "mueve eventos") */
h1 {
  position: relative;
}
.h-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: dj-line-in .6s cubic-bezier(.2,.7,.3,1) forwards;
}
.h-line:nth-child(1) { animation-delay: .12s; }
.h-line:nth-child(3) { animation-delay: .38s; }
@keyframes dj-line-in {
  to { opacity: 1; transform: none; }
}

/* Magnetic CTAs */
.btn, .btn-o, .btn-p, .btn-pk {
  will-change: transform;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .2s, opacity .2s, box-shadow .15s, border-color .2s, color .2s;
}

/* Pack cards 3D tilt */
.eqg { perspective: 1200px; }
.eqc {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .25s;
}

/* Gallery cards cursor-follow glow */
.gc {
  position: relative;
  overflow: hidden;
}
.gc::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0,232,64,.14), transparent 55%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: inherit;
}
.gc:hover::after { opacity: 1; }
.gc > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .h-line { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  .eqc:hover, .btn:hover, .btn-pk:hover { transform: none !important; }
  .wrow, .pulse-ring { animation: none !important; }
}