/* DJ FABY · v3 — collage, color y nombre en grande.
   Ideas: nombre gigante que pasa entre las fotos, una esfera de color viva, una sección clara de retrato
   con el nombre en bloques y titulares en movimiento con una foto encima. Menú abajo, en mayúsculas. */
:root{
  --negro:#0a0a0b;--claro:#e7e5e0;--tinta:#f1efea;--suave:#8b8883;--linea:rgba(241,239,234,.14);
  --rosa:#ff3ea5;--azul:#4b5cff;--menta:#3dffc5;
  --display:"Archivo",system-ui,sans-serif;--texto:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(18px,4vw,56px);--ease:cubic-bezier(.2,.8,.2,1);--barra:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--negro);overflow-x:clip}
body{font:400 17px/1.6 var(--texto);color:var(--tinta);background:var(--negro);-webkit-font-smoothing:antialiased;padding-bottom:var(--barra)}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--rosa);color:#000}
:focus-visible{outline:2px solid var(--rosa);outline-offset:4px}
.env{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.mono{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
h1,h2,h3,.estrecha{font-family:var(--display);font-weight:800;font-stretch:72%;line-height:.86;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:clamp(56px,9vw,150px)}
h3{font-size:clamp(26px,2.6vw,40px)}

/* Arriba: solo el logo. El menú vive abajo */
.top{position:absolute;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad)}
.top img{height:22px;width:auto}
.top .mono{color:var(--tinta);opacity:.7}
.barra{position:fixed;inset:auto 0 0;height:var(--barra);z-index:40;display:flex;align-items:center;gap:28px;padding:0 var(--pad);background:rgba(10,10,11,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--linea)}
.barra .marca{font:800 18px/1 var(--display);font-stretch:72%;text-decoration:none;letter-spacing:.02em}
.barra nav{display:flex;gap:26px;margin:0 auto;font:600 12px/1 var(--texto);letter-spacing:.14em;text-transform:uppercase}
.barra nav a{text-decoration:none;opacity:.65;transition:opacity .2s}
.barra nav a:hover,.barra nav a[aria-current]{opacity:1}
.barra nav a[aria-current]{color:var(--rosa)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--negro);background:var(--tinta);padding:13px 20px;border-radius:99px;border:0;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.btn:hover{background:var(--rosa);transform:translateY(-2px)}
.btn.borde{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea)}
.btn.borde:hover{box-shadow:inset 0 0 0 1px var(--tinta)}
.abrir{display:none;background:none;border:0;color:var(--tinta);font:600 12px var(--texto);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

/* 1. Collage: el nombre gigante corre entre las fotos */
.collage{position:relative;height:100svh;min-height:640px;overflow:hidden}
.nombre{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;white-space:nowrap;pointer-events:none;display:flex;width:max-content;animation:corre 38s linear infinite}
.nombre span{font:800 clamp(160px,27vw,420px)/.8 var(--display);font-stretch:62%;letter-spacing:-.02em;text-transform:uppercase;padding-right:.25em}
.nombre i{color:var(--rosa);font-style:normal}
@keyframes corre{to{transform:translate(-50%,-50%)}}
.foto-c{position:absolute;margin:0;overflow:hidden;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transition:transform .9s var(--ease)}
.foto-c img{width:100%;height:100%;object-fit:cover}
.foto-c.detras{z-index:1}.foto-c.delante{z-index:3}
.foto-c.bn img{filter:grayscale(1) contrast(1.1)}
.c1{left:4%;top:12%;width:17vw;aspect-ratio:3/4}
.c2{left:24%;top:58%;width:15vw;aspect-ratio:1}
.c3{left:42%;top:9%;width:20vw;aspect-ratio:4/3}
.c4{left:63%;top:50%;width:13vw;aspect-ratio:3/4}
.c5{right:4%;top:15%;width:16vw;aspect-ratio:4/5}
.c6{left:8%;bottom:6%;width:11vw;aspect-ratio:4/3}
.collage .lema{position:absolute;z-index:4;right:var(--pad);bottom:28px;text-align:right}
.collage .lema p{font:600 12px/1.6 var(--texto);letter-spacing:.14em;text-transform:uppercase}
.collage .lema a{margin-top:14px}

/* 2. Esfera de color */
.esfera-sec{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;padding:120px var(--pad)}
.esfera{position:absolute;width:min(76vw,760px);aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--menta) 0 22%,transparent 52%),radial-gradient(circle at 35% 40%,var(--azul) 0 30%,transparent 62%),radial-gradient(circle at 65% 62%,var(--rosa) 0 26%,transparent 60%);
  filter:blur(30px) saturate(1.2);animation:late 7s ease-in-out infinite alternate,gira 24s linear infinite;opacity:.9}
.esfera::after{content:"";position:absolute;inset:-18%;border-radius:50%;border:2px solid rgba(61,255,197,.45);filter:blur(6px);animation:anillo 5s ease-in-out infinite alternate}
@keyframes late{to{scale:1.12}}
@keyframes gira{to{rotate:360deg}}
@keyframes anillo{to{inset:-26%;opacity:.3}}
.esfera-sec .dentro{position:relative;z-index:1;max-width:900px}
.esfera-sec h2{font-size:clamp(60px,11vw,180px);mix-blend-mode:difference}
.esfera-sec p{margin:26px auto 0;max-width:460px;font-size:18px}

/* Eventos como píldoras grandes */
.eventos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 var(--pad) clamp(80px,10vw,140px)}
.ev{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;isolation:isolate}
.ev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1);transition:filter .6s,transform .9s var(--ease)}
.ev::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 45%,rgba(0,0,0,.85))}
.ev:hover img{filter:none;transform:scale(1.05)}
.ev .in{padding:22px;width:100%}
.ev .mono{color:var(--tinta);opacity:.7}
.ev h3{margin-top:8px}
.ev .fl{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:var(--tinta);color:var(--negro);display:grid;place-items:center;font-size:18px;transition:transform .4s var(--ease),background .3s}
.ev:hover .fl{transform:rotate(-45deg);background:var(--rosa)}

/* 3. Retrato en claro, con el nombre en bloques */
.retrato{background:var(--claro);color:var(--negro);padding:clamp(70px,9vw,130px) 0}
.bloques{display:grid;gap:6px;margin-bottom:clamp(30px,5vw,60px)}
.bloques div{display:flex;gap:6px;align-items:stretch;height:clamp(60px,10vw,150px)}
.bloques b{font:800 clamp(70px,12vw,180px)/.8 var(--display);font-stretch:72%;text-transform:uppercase;display:flex;align-items:center}
.bloques i{flex:1;background:var(--negro);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.bloques.on i{transform:scaleX(1)}
.bloques div:nth-child(2) i{transition-delay:.2s}
.retrato .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,80px);align-items:end}
.retrato figure{background:#d6d3cc;border-radius:4px;overflow:hidden}
.retrato figure img{width:100%;filter:grayscale(1) contrast(1.05)}
.retrato p{font-size:19px;color:#3b3a37;margin-bottom:24px}
.retrato .btn{background:var(--negro);color:var(--claro)}
.retrato .btn:hover{background:var(--rosa);color:var(--negro)}
.retrato .mono{color:#6d6a65}

/* 4. Titular que corre con una foto encima */
.cinta-foto{position:relative;padding:clamp(80px,10vw,140px) 0;overflow:hidden;display:grid;place-items:center}
.cinta-foto .linea{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;width:max-content;white-space:nowrap;animation:corre2 22s linear infinite}
.cinta-foto .linea span{font:800 clamp(80px,13vw,210px)/.85 var(--display);font-stretch:72%;text-transform:uppercase;padding-right:.4em}
.cinta-foto .linea span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--tinta)}
@keyframes corre2{to{transform:translate(-50%,-50%)}}
.tarjeta{position:relative;z-index:2;width:min(380px,70vw);margin:0}
.tarjeta img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tarjeta figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font:600 13px var(--texto)}
.tarjeta figcaption a{font-style:italic;text-decoration:underline;text-underline-offset:3px}

/* Páginas interiores */
.cab-pag{position:relative;padding:120px 0 60px;overflow:hidden}
.cab-pag .mono{display:block;padding:0 var(--pad);margin-bottom:20px}
.cab-pag .titular{display:flex;width:max-content;white-space:nowrap;animation:corre2b 30s linear infinite}
.cab-pag .titular span{font:800 clamp(90px,16vw,250px)/.85 var(--display);font-stretch:72%;text-transform:uppercase;padding-right:.35em}
.cab-pag .titular span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--tinta)}
@keyframes corre2b{to{transform:translateX(-50%)}}
.cab-pag .intro{padding:0 var(--pad);max-width:640px;margin-top:28px;font-size:19px;color:#cfcdc8}
.sec{padding-block:clamp(70px,9vw,130px)}
.sec.borde{border-top:1px solid var(--linea)}
.foto-ancha{border-radius:16px;overflow:hidden;aspect-ratio:21/9}
.foto-ancha img{width:100%;height:100%;object-fit:cover}
.incluye{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.incluye div{border-top:2px solid var(--tinta);padding-top:20px}
.incluye h3{font-size:30px;margin-bottom:10px}
.incluye p{color:var(--suave);font-size:16px}
.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px;flex-wrap:wrap}
.cabeza p{max-width:420px;color:var(--suave)}

/* Curva de BPM (de la v2) */
.curva svg{width:100%;height:auto;overflow:visible;display:block}
.curva .linea{fill:none;stroke:var(--rosa);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.curva .area{opacity:0;transition:opacity 1.6s .8s}
.curva .pto{fill:var(--negro);stroke:var(--rosa);stroke-width:2;opacity:0;transition:opacity .4s}
.curva.on .linea{stroke-dashoffset:0}.curva.on .area,.curva.on .pto{opacity:1}
.curva .guia{stroke:var(--linea);stroke-width:1}
.curva .eje{font:500 11px var(--mono);fill:var(--suave)}
.momentos{display:grid;list-style:none;margin-top:18px}
.momentos li{padding-top:14px;border-top:1px solid var(--linea)}
.momentos b{display:block;font:500 12px var(--mono);letter-spacing:.1em;color:var(--rosa);margin-bottom:6px}
.momentos span{display:block;font-weight:600}
.momentos small{display:block;color:var(--suave);font-size:14px;margin-top:4px;padding-right:14px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;filter:grayscale(1);transition:filter .6s}
.dos img:hover{filter:none}
.otros{display:flex;gap:10px;flex-wrap:wrap}

/* Producción */
.prod{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start;padding-block:50px;border-top:1px solid var(--linea)}
.prod .letra{font:800 clamp(80px,10vw,150px)/.8 var(--display);font-stretch:72%;color:var(--rosa)}
.prod p{color:var(--suave);margin-top:14px}
.prod ul{list-style:none;margin-top:18px}
.prod li{padding:9px 0;border-top:1px solid var(--linea);font-size:15px}
.prod img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%;filter:grayscale(1);transition:filter .6s}
.prod:hover img{filter:none}

/* Faby (página clara) */
body.claro{background:var(--claro);color:var(--negro)}
body.claro .top .mono{color:var(--negro)}
body.claro .cab-pag .titular span:nth-child(even){-webkit-text-stroke-color:var(--negro)}
body.claro .cab-pag .intro{color:#3b3a37}
.cabinas{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:30px;border-top:2px solid var(--negro)}
.cabinas li{padding:20px 0;border-bottom:1px solid rgba(10,10,11,.15);display:flex;justify-content:space-between;gap:12px;font-weight:600}
.cabinas li span{font:500 12px var(--mono);color:#6d6a65}
body.claro .btn.borde{color:var(--negro);box-shadow:inset 0 0 0 1px rgba(10,10,11,.25)}

/* Contacto, con la esfera detrás */
.contacto{position:relative;overflow:hidden;min-height:100svh;padding:130px 0 80px}
.contacto .esfera{top:40%;opacity:.55;width:min(90vw,900px)}
.contacto .env{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,100px)}
.contacto h1{font-size:clamp(80px,12vw,190px)}
.contacto .lado p{margin-top:20px;max-width:400px;color:#d8d6d1}
.form{display:grid;gap:20px;background:rgba(10,10,11,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--linea);border-radius:20px;padding:clamp(22px,3vw,36px)}
.form label{display:grid;gap:8px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.form input,.form select,.form textarea{font:400 17px var(--texto);color:var(--tinta);background:transparent;border:0;border-bottom:1px solid var(--linea);padding:9px 0;border-radius:0;width:100%}
.form select option{background:var(--negro)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--rosa)}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .btn{justify-self:start}
.ok{color:var(--menta);font-size:15px}

/* Pie */
.pie{padding:60px var(--pad) 30px;display:grid;gap:30px;border-top:1px solid var(--linea)}
body.claro .pie{border-color:rgba(10,10,11,.15)}
.pie .grande{font:800 clamp(70px,14vw,230px)/.8 var(--display);font-stretch:62%;text-transform:uppercase;text-decoration:none;letter-spacing:-.02em}
.pie .grande:hover{color:var(--rosa)}
.pie .bajo{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--suave)}
.pie .redes{display:flex;gap:20px;font:600 12px var(--texto);letter-spacing:.14em;text-transform:uppercase}
.pie .redes a{text-decoration:none}
.fondos{display:flex;gap:14px;background:#fff;border-radius:10px;padding:8px 12px}
.fondos img{height:28px;width:auto}

.js .rev{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rev.on{opacity:1;transform:none}
.nw{white-space:nowrap}

@media (max-width:900px){
  .barra nav{display:none;position:fixed;inset:auto 0 var(--barra);flex-direction:column;gap:0;margin:0;background:var(--negro);padding:16px var(--pad) 20px;border-top:1px solid var(--linea)}
  .barra nav a{font:800 40px/1.1 var(--display);font-stretch:72%;letter-spacing:0;padding:6px 0;opacity:1}
  .barra nav.abierto{display:flex}
  .abrir{display:block;margin-left:auto}
  .barra .btn{padding:11px 14px}
  .c1{width:34vw;left:-4%;top:12%}.c2{width:30vw;left:6%;top:64%}.c3{width:44vw;left:46%;top:8%}.c4{width:28vw;left:66%;top:60%}.c5{display:none}.c6{display:none}
  .eventos{grid-template-columns:1fr 1fr}
  .retrato .grid,.contacto .env,.prod{grid-template-columns:1fr}
  .incluye{grid-template-columns:1fr}
  .momentos{grid-template-columns:1fr 1fr!important;row-gap:16px}
  .dos{grid-template-columns:1fr}
  .foto-ancha{aspect-ratio:4/3}
  .form .fila{grid-template-columns:1fr}
}
@media (max-width:560px){.eventos{grid-template-columns:1fr}.barra .btn{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rev{opacity:1;transform:none}.bloques i{transform:none}.curva .linea{stroke-dashoffset:0}.curva .area,.curva .pto{opacity:1}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Firma ANÜK */
.anuk-sig{--anuk-sig-heart:#C60000;--anuk-sig-word:#C60000;display:inline-flex;align-items:center;gap:.45em;color:inherit;text-decoration:none;white-space:nowrap;line-height:1.3}
.anuk-sig__t{opacity:.9}
.anuk-sig__logo{height:1.05em;width:auto;display:block;flex:none}
.anuk-sig__logo path{fill:currentColor}
.anuk-sig__lab{font-weight:700;letter-spacing:.1em;font-size:.72em;opacity:.85;margin-left:-.15em}
.anuk-sig__w{color:var(--anuk-sig-word);font-weight:700;display:inline-flex;align-items:center;min-height:1.3em}
.anuk-sig__h{width:1em;height:.92em;fill:var(--anuk-sig-heart);animation:anukSigBeat 2.4s ease-in-out infinite;flex:none}
.anuk-sig[data-mode="type"] .anuk-sig__w::after{content:"";display:inline-block;width:2px;height:1em;background:var(--anuk-sig-word);margin-left:2px;animation:anukSigBlink 1s steps(1) infinite}
.anuk-sig[data-mode="scramble"] .anuk-sig__w{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em}
.anuk-sig[data-mode="roll"] .anuk-sig__w{overflow:hidden}
.anuk-sig[data-mode="roll"] .anuk-sig__w>*{animation:anukSigUp .5s cubic-bezier(.16,1,.3,1) both}
.anuk-sig[data-mode="tap"]{cursor:pointer}
.anuk-sig[data-mode="tap"] .anuk-sig__w>*{animation:anukSigPop .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes anukSigBeat{0%,60%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(.96)}36%{transform:scale(1.12)}}
@keyframes anukSigBlink{50%{opacity:0}}
@keyframes anukSigUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes anukSigPop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.anuk-sig__h,.anuk-sig__w::after,.anuk-sig__w>*{animation:none!important}}
footer .anuk-sig,.pie-web .anuk-sig,.foot .anuk-sig{--anuk-sig-word:#FF6B66}
.pie .anuk-sig{--anuk-sig-word:#ff3ea5}
.nw{white-space:nowrap}
.collage{height:calc(100svh - var(--barra))}