/* ============================================================
   KELLY NATALY — Rediseño oficial
   "Presencia, no ruido"
   ============================================================ */

:root{
  --negro: #090909;
  --azul: #128DCD;
  --azul-light: #65C3EC;
  --mostaza: #C99A2E;
  --marfil: #F4F0E8;
  --gris: #8E8E8E;

  --serif: 'Fraunces', serif;
  --sans: 'Inter', sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --container: 1240px;
  --edge: clamp(24px, 6vw, 88px);
}

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

html{
  background:var(--negro);
}

body{
  margin:0;
  background:var(--negro);
  color:var(--marfil);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

/* ============================================================
   CURSOR PERSONALIZADO — circulo azul, crece sobre elementos interactivos
   Solo en dispositivos con puntero fino (mouse/trackpad).
   ============================================================ */
@media (pointer:fine){
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button{ cursor:none; }

  .cursor{
    position:fixed;
    top:0; left:0;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border-radius:50%;
    background:var(--azul);
    pointer-events:none;
    z-index:999;
    opacity:0;
    transform:translate(-100px,-100px) scale(1);
    transition:opacity .25s ease;
    mix-blend-mode:screen;
  }
  body.has-cursor .cursor{ opacity:.85; }
  .cursor.is-hover{ background:var(--azul-light); }
}
@media (pointer:coarse){
  .cursor{ display:none; }
}

::selection{ background:var(--azul); color:var(--marfil); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
  color:var(--marfil);
}

p{ margin:0; }

/* ---------- utility ---------- */

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--azul-light);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.kicker em{
  font-style:normal;
  color:var(--mostaza);
}
.kicker .dash{
  width:26px;
  height:1px;
  background:var(--azul);
  display:inline-block;
}

/* accent utility spans, used sparingly inside headings */
.hl-azul{ color:var(--azul-light); }
.hl-mostaza{ color:var(--mostaza); font-style:italic; }

.section-pad{
  padding-top:clamp(90px,14vh,160px);
  padding-bottom:clamp(90px,14vh,160px);
}

/* link with drawing underline */
.link-underline{
  position:relative;
  padding-bottom:2px;
}
.link-underline::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--azul);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.link-underline:hover::after{ transform:scaleX(1); }

/* editorial photo color treatment — unifies saturation across all source photos */
.editorial-photo{
  filter:grayscale(28%) saturate(72%) contrast(1.06) brightness(.94);
}
.editorial-photo.strong{
  filter:grayscale(55%) saturate(55%) contrast(1.1) brightness(.85);
}

.img-wrap{
  overflow:hidden;
  position:relative;
}
.img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.img-wrap:hover img{
  transform:scale(1.045);
}

/* reveal targets (animated via GSAP, class fallback for no-js) */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
}
.no-js [data-reveal]{ opacity:1; transform:none; }

/* ============================================================
   NAV — casi invisible
   ============================================================ */

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px var(--edge);
  mix-blend-mode:difference;
  pointer-events:none;
}
.nav__mark{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.04em;
  color:var(--marfil);
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:auto;
}
.nav.is-visible .nav__mark{ opacity:1; }

.nav__scroll{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.nav.is-visible .nav__scroll{ opacity:.8; }

.progress-rail{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:120px;
  background:rgba(244,240,232,.14);
  z-index:40;
}
.progress-rail__fill{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:0%;
  background:var(--mostaza);
}
@media (max-width:800px){
  .progress-rail{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  height:100vh;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.hero__media{
  position:absolute;
  inset:0;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 22%;
  transform:scale(1.08);
  filter:none;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,9,9,.05) 0%, rgba(9,9,9,0) 38%, rgba(9,9,9,.55) 78%, rgba(9,9,9,.92) 100%),
    linear-gradient(90deg, rgba(9,9,9,.35) 0%, rgba(9,9,9,0) 45%);
}
.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 var(--edge) clamp(72px,11vh,124px);
}

.hero__logo{
  position:absolute;
  top:28px;
  left:var(--edge);
  z-index:3;
  width:clamp(56px,7vw,84px);
  height:auto;
  opacity:.96;
}
@media (max-width:640px){
  .hero__logo{ top:22px; width:52px; }
}
.hero__kicker{
  margin-bottom:18px;
  color:var(--marfil) !important;
}
.hero__name{
  font-size:clamp(64px, 13.5vw, 196px);
  line-height:.9;
  letter-spacing:-.015em;
  font-weight:340;
  overflow:hidden;
}
.hero__sub{
  margin-top:22px;
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gris);
  display:flex;
  align-items:center;
  gap:12px;
}
.hero__sub .dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--mostaza);
}

.hero__bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-top:clamp(28px,6vh,64px);
  flex-wrap:wrap;
  padding-right:clamp(48px,7vw,96px);
}
.hero__tagline{
  font-family:var(--serif);
  font-size:clamp(13px,1.4vw,17px);
  line-height:1.5;
  color:var(--marfil);
  opacity:.82;
  max-width:280px;
  font-style:italic;
}

/* ---------- botón de contacto reutilizable ---------- */
.btn-contact{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid rgba(244,240,232,.5);
  color:var(--marfil);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .5s cubic-bezier(.22,1,.36,1), background-color .5s cubic-bezier(.22,1,.36,1), color .5s cubic-bezier(.22,1,.36,1);
}
.btn-contact:hover{
  border-color:var(--mostaza);
  background:var(--mostaza);
  color:var(--negro);
}
.btn-contact svg{ width:13px; height:13px; }
.hero .btn-contact{
  flex-shrink:0;
}
.hero__indicator{
  position:absolute;
  right:var(--edge);
  bottom:36px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.hero__indicator span{
  font-size:10px;
  letter-spacing:.2em;
  color:var(--gris);
  writing-mode:vertical-rl;
}
.hero__indicator .line{
  width:1px;
  height:46px;
  background:rgba(244,240,232,.3);
  position:relative;
  overflow:hidden;
}
.hero__indicator .line::after{
  content:"";
  position:absolute;
  left:0; top:-100%;
  width:100%; height:100%;
  background:var(--marfil);
  animation:heroLine 2.6s ease-in-out infinite;
}
@keyframes heroLine{
  0%{ top:-100%; }
  50%{ top:0; }
  100%{ top:100%; }
}
@media (max-width:640px){
  .hero__indicator{ display:none; }
}

/* ============================================================
   MARQUEE — franja de fotos en movimiento horizontal
   ============================================================ */

.marquee{
  background:var(--negro);
  padding:clamp(48px,8vh,88px) 0;
  overflow:hidden;
}
.marquee__row{
  display:flex;
  gap:18px;
  width:max-content;
  will-change:transform;
}
.marquee__row + .marquee__row{
  margin-top:18px;
}
.marquee__row .img-wrap{
  width:clamp(220px,26vw,340px);
  height:clamp(140px,17vw,220px);
  flex-shrink:0;
}
.marquee__row .img-wrap img{ transition:none; }

/* ============================================================
   QUIEN ES KELLY
   ============================================================ */

.quien{
  background:var(--negro);
  position:relative;
}
.quien__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(32px,6vw,90px);
  align-items:center;
}
.quien__photo{
  aspect-ratio:4/5;
  position:relative;
}
.quien__deco{
  position:absolute;
  width:34%;
  aspect-ratio:1/1.2;
  right:-8%;
  bottom:-10%;
  border:3px solid var(--negro);
  z-index:2;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.quien__text{
  max-width:440px;
}
.quien__text h2{
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.16;
  margin:16px 0 26px;
}
.quien__text p{
  font-size:16px;
  line-height:1.85;
  color:var(--marfil);
  opacity:.92;
}
.quien__text p .word{
  display:inline-block;
  opacity:.16;
}
.quien__cta{
  margin-top:32px;
}
.quien__photo img{
  filter:none;
}
.quien__photo .img-wrap:hover img{
  transform:none;
}
@media (max-width:860px){
  .quien__grid{ grid-template-columns:1fr; }
  .quien__photo{ aspect-ratio:5/4; order:-1; }
  .quien__deco{ width:38%; right:-4%; bottom:-8%; }
}

/* ============================================================
   ESCUCHA / PROPUESTA MUSICAL
   ============================================================ */

.escucha{
  background:var(--negro);
  border-top:1px solid rgba(244,240,232,.08);
  border-bottom:1px solid rgba(244,240,232,.08);
}
.escucha__inner{
  max-width:100%;
  padding-left:11cm;
  padding-right:11cm;
}
.escucha__title{
  font-size:clamp(30px,3.4vw,44px);
  margin:16px 0 48px;
  line-height:1.15;
  max-width:560px;
}
.player{
  display:flex;
  align-items:center;
  gap:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--azul);
}
.player__btn{
  width:62px; height:62px;
  border-radius:50%;
  border:1px solid rgba(244,240,232,.35);
  background:transparent;
  color:var(--marfil);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.player__btn:hover{
  border-color:var(--mostaza);
}
.player__btn svg{ width:19px; height:19px; }
.player__btn .icon-pause{ display:none; }
.player.is-playing .icon-play{ display:none; }
.player.is-playing .icon-pause{ display:block; }

.player__meta{ flex:1; min-width:0; }
.player__title{
  font-family:var(--serif);
  font-size:clamp(20px,2.6vw,28px);
  color:var(--marfil);
}
.player__sub{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--azul-light);
  margin-top:5px;
}
.player__time{
  font-size:12px;
  color:var(--gris);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.player__bar{
  position:relative;
  height:14px;
  margin-top:2px;
  cursor:pointer;
}
.player__bar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:rgba(244,240,232,.18);
  transform:translateY(-50%);
}
.player__bar-fill{
  position:absolute;
  left:0; top:50%;
  height:1px;
  width:0%;
  background:var(--azul);
  transform:translateY(-50%);
}
.player__bar-fill::after{
  content:"";
  position:absolute;
  right:-3px; top:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mostaza);
  transform:translate(0,-50%);
}

.tracklist{
  margin-top:8px;
  display:flex;
  flex-direction:column;
}
.track{
  display:flex;
  align-items:baseline;
  gap:clamp(18px,3vw,40px);
  width:100%;
  background:none;
  border:none;
  border-bottom:1px solid rgba(23,59,112,.75);
  padding:clamp(20px,3.2vw,36px) 0;
  cursor:pointer;
  text-align:left;
  color:var(--gris);
  font-family:var(--sans);
  transition:color .35s cubic-bezier(.22,1,.36,1);
}
.track:hover{ color:var(--marfil); }
.track.is-active{ color:var(--marfil); }
.track__num{
  font-family:var(--serif);
  font-size:clamp(34px,5.2vw,64px);
  letter-spacing:normal;
  line-height:1;
  opacity:.55;
  width:clamp(50px,6vw,84px);
  flex-shrink:0;
  color:var(--azul-light);
}
.track__name{
  font-family:var(--serif);
  font-size:clamp(22px,3vw,34px);
  flex:1;
}
.track.is-active .track__name{ color:var(--mostaza); }
.track__tag{
  font-size:12px;
  color:var(--mostaza);
  letter-spacing:.08em;
  white-space:nowrap;
}

.escucha__meta{
  display:flex;
  gap:28px;
  margin-top:26px;
  font-size:13px;
  color:var(--gris);
  flex-wrap:wrap;
}
.escucha__meta strong{
  color:var(--marfil);
  font-weight:500;
}

/* ============================================================
   EL SHOW
   ============================================================ */

.show{ background:var(--negro); }
.show__photo{
  height:min(72vh,760px);
  min-height:340px;
}
.show__body{
  max-width:100%;
  padding-top:clamp(40px,7vh,72px);
  padding-left:11cm;
  padding-right:11cm;
}
.show__title{
  font-size:clamp(30px,3.4vw,44px);
  margin:16px 0 48px;
  max-width:560px;
}
.formats{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--azul);
}
.formats__item{
  display:flex;
  align-items:baseline;
  gap:clamp(18px,3vw,40px);
  padding:clamp(20px,3.2vw,36px) 0;
  border-bottom:1px solid rgba(23,59,112,.75);
}
.formats__num{
  font-family:var(--serif);
  font-size:clamp(34px,5.2vw,64px);
  color:var(--azul-light);
  line-height:1;
  opacity:.55;
  flex-shrink:0;
  width:clamp(50px,6vw,84px);
}
.formats__name{
  font-family:var(--serif);
  font-size:clamp(22px,3vw,34px);
  flex:1;
}
.formats__dur{
  font-size:12px;
  color:var(--mostaza);
  letter-spacing:.08em;
  white-space:nowrap;
}
@media (max-width:640px){
  .formats__item{ flex-wrap:wrap; }
  .formats__dur{ width:100%; padding-left:calc(50px + 18px); }
}

.formats__sample{
  padding:clamp(20px,3.2vw,36px) 0;
  border-bottom:1px solid rgba(23,59,112,.75);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.formats__video-wrap{
  position:relative;
  width:100%;
  max-width:680px;
  aspect-ratio:16/9;
  border-radius:4px;
  overflow:hidden;
  background:#000;
}
.formats__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}
.formats__sample-label{
  margin-top:14px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--azul-light);
}

/* ============================================================
   EL CAMINO
   ============================================================ */

.camino{
  background:var(--negro);
  display:flex;
  align-items:center;
  min-height:70vh;
}
.camino__inner{
  max-width:100%;
  padding-left:11cm;
  padding-right:11cm;
}
.camino__text{
  font-family:var(--serif);
  font-size:clamp(24px,2.9vw,36px);
  line-height:1.5;
  color:var(--marfil);
  margin-top:26px;
}
.camino__text + .camino__text{
  margin-top:22px;
}
.camino__text .accent{
  color:var(--mostaza);
  font-style:italic;
}

/* ============================================================
   PROYECTOS — tarjetas que se apilan y escalan al hacer scroll
   ============================================================ */

.proyectos{ background:var(--negro); padding-top:clamp(90px,14vh,160px); }
.proyectos__head{ padding-bottom:clamp(40px,6vh,64px); }

.stack{
  position:relative;
}
.stack__item{
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  padding:40px 0;
}
.stack__card{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--edge);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  transform-origin:center top;
  background:var(--negro);
}
.stack__num{
  font-family:var(--serif);
  font-size:clamp(60px,9vw,120px);
  line-height:.85;
  color:var(--azul-light);
  opacity:.5;
}
.stack__kicker{
  margin-top:18px;
}
.stack__name{
  font-size:clamp(30px,4vw,54px);
  line-height:1.1;
  margin:18px 0 0;
}
.stack__caption{
  margin-top:20px;
  font-size:14px;
  color:var(--gris);
  max-width:340px;
  line-height:1.6;
}
.stack__photo{
  aspect-ratio:4/3.1;
}
@media (max-width:860px){
  .stack__item{ height:auto; min-height:100vh; padding:120px 0 60px; }
  .stack__card{ grid-template-columns:1fr; }
  .stack__photo{ order:-1; aspect-ratio:5/4; }
}

/* ============================================================
   CONTACTO
   ============================================================ */

.contacto{
  background:var(--negro);
  min-height:80vh;
  display:flex;
  align-items:center;
}
.contacto__inner{
  max-width:100%;
  padding-left:11cm;
  padding-right:11cm;
}
.contacto__line{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,36px);
  line-height:1.4;
  margin:18px 0 56px;
}
.contacto__list{
  display:flex;
  flex-direction:column;
}
.contacto__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 4px;
  border-top:1px solid rgba(23,59,112,.75);
  font-size:15px;
}
.contacto__item:last-child{
  border-bottom:1px solid rgba(23,59,112,.75);
}
.contacto__item span:first-child{
  color:var(--azul-light);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.contacto__item a{
  font-family:var(--serif);
  font-size:24px;
}
.contacto__avail{
  margin-top:40px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
}
.contacto__avail .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--mostaza);
  display:inline-block;
  margin-right:8px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  padding:30px var(--edge) 34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--gris);
  letter-spacing:.05em;
  border-top:1px solid rgba(244,240,232,.08);
}

/* ============================================================
   RESPONSIVE — margenes fijos en cm solo para pantallas grandes.
   En tablet/celular se reducen al margen estandar del sitio para
   que el contenido no se salga de la pantalla.
   ============================================================ */
@media (max-width:1100px){
  .escucha__inner,
  .show__body,
  .camino__inner,
  .contacto__inner{
    padding-left:var(--edge);
    padding-right:var(--edge);
  }
}
@media (max-width:640px){
  .formats__video-wrap{ max-width:100%; }
  .track{ flex-wrap:wrap; }
  .track__tag{ width:100%; padding-left:calc(24px + 16px); order:3; }
}