*{ margin:0; padding:0; box-sizing:border-box; }

/* ======================
   URW DIN ARABIC CONDENSED
   ====================== */

@font-face {
  font-family: "URWDIN";
  src: url("fonts/URWDINArabicCond-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ======================
   VARIABLES AJUSTADAS
   ====================== */

:root{
  --inactive:#7a7a7a;
  --white:#ffffff;

  --padX:48px;
  --padTop:34px;

  --listLeft:100px;
  --titleSize:50px;
  --titleTracking:-0.4px;
  --titleLeading:1.06;
}

body{
  font-family: Helvetica, Arial, sans-serif;
  background:#000;
  color:#fff;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  cursor:none;
}

/* ======================
   CURSOR
   ====================== */

body::after{
  content:"";
  position:fixed;
  width:5px;
  height:5px;
  background:#ffffff;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9999;
}

body{
  --cursor-x:50vw;
  --cursor-y:50vh;
}

body::after{
  left:var(--cursor-x);
  top:var(--cursor-y);
}

/* ======================
   BACKGROUND
   ====================== */

.bg{
  position:fixed;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition: opacity .55s ease;
  z-index:0;
}
.bg.visible{
  opacity:1;
}

/* ======================
   HEADER
   ====================== */

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding: var(--padTop) var(--padX);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
}

.logo{
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.logo span{
  color:#888;
  margin-left:6px;
}

nav{
  display:flex;
  gap:28px;
  align-items:center;
}

nav a{
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--inactive);
  text-decoration:none;
  transition: color .2s ease;
}

nav a:hover{
  color:#ffffff;
}

/* ======================
   ICONOS
   ====================== */

.ig-link,
.vimeo-link{
  display:flex;
  align-items:center;
}

.ig-icon,
.vimeo-icon{
  width:14px;
  height:14px;
  fill:var(--inactive);
  transition: fill .2s ease;
}

.ig-link:hover .ig-icon,
.vimeo-link:hover .vimeo-icon{
  fill:#ffffff;
}

/* ======================
   CONTENT
   ====================== */

#content{
  position:fixed;
  inset:0;
  z-index:5;
}

/* ======================
   LISTA (DESKTOP)
   ====================== */

.list-wrap{
  position:absolute;
  left: var(--listLeft);
  top:50%;
  transform:translateY(-50%);
}

#project-list{
  list-style:none;
}

#project-list li{
  font-family:"URWDIN", sans-serif;
  font-size: var(--titleSize);
  line-height: var(--titleLeading);
  letter-spacing: var(--titleTracking);
  text-transform:uppercase;
  color:var(--inactive);
  transition: color .2s ease;
}

#project-list li:hover{
  color:#fff;
}

/* ======================
   REEL
   ====================== */

.reel-wrap{
  position:absolute;
  inset:0;
}

.reel-wrap iframe{
  width:100vw;
  height:100vh;
  border:0;
}

/* ======================
   CONTACT
   ====================== */

.contact-wrap{
  position:absolute;
  left: var(--listLeft);
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.contact-wrap a{
  color:inherit;
  text-decoration:none;
}

.contact-wrap a:visited,
.contact-wrap a:hover,
.contact-wrap a:active{
  color:inherit;
}

/* ======================
   MOBILE
   ====================== */

@media (max-width: 768px){

  body{
    cursor:auto;
  }

  body::after{
    display:none !important;
  }

  header{
    padding:20px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .logo{
    font-size:7px;
    letter-spacing:1.4px;
  }

  nav{
    flex-wrap:wrap;
    gap:14px;
  }

  .list-wrap{
    position:absolute;
    top:140px;
    left:20px;
    right:20px;
    bottom:20px;
    transform:none;
    overflow-y:auto;
  }

  #project-list li{
    font-size:26px;
    line-height:1.2;
    margin-bottom:12px;
  }

  .contact-wrap{
    position:absolute;
    top:140px;
    left:20px;
    right:20px;
    transform:none;
    font-size:10px;
  }

  .bg{
    transition: opacity .3s ease;
  }

}