* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

/* BASE */
body {
  color: #dad8d8;
  background: #000000;
  line-height: 1;
}

/* HEADER */
.header {  
  border-bottom: 0.5px solid #3b3a3a;
}

.menu {
  max-width: 1100px;
  margin: auto;
  padding: 1.8rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 3.5rem;
}

.menu a {
  text-decoration: none;
  color: #dad8d8;
  font-size: 0.9rem;
}

.name {
  font-size: 0.95rem;
  font-weight: 500;
}


/* ───────────────────────────── */
/* BOTONES LATERALES (ESTILO WIX) */
/* ───────────────────────────── */

.side-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  z-index: 9999;
  pointer-events: auto;
}

/* IZQUIERDA */
.side-nav.left {
  left: 30px;
}

/* DERECHA */
.side-nav.right {
  right: 30px;
}

/* BOTÓN INDIVIDUAL (ESTILO BASE) */
.side-nav a {
  font-size: 0.65rem;
  text-decoration: none;
  color: #dad8d8;

  writing-mode: vertical-rl;

  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  transition: transform 0.3s ease, opacity 0.2s ease;
  will-change: transform;
}

/*  ORIENTACIÓN POR LADO */

/* Izquierda: 180° */
.side-nav.left a {
  transform: rotate(180deg);
}

/* Derecha: 0° */
.side-nav.right a {
  transform: rotate(360deg);
}


/* SECTIONS */
.section {
  max-width: 750px;
  margin: 1rem auto;
  padding: 1rem 1rem;
  text-align: center;
}

.section h2 {
  font-weight: 400;
  margin-bottom: 1.5rem;
}

/* WORK */
.work p {
  padding: 0.8rem 0;
  font-size: 0.9rem;
}

/* CONTACT */
#contact a {
  color: #dad8d8;
  text-decoration: none;
}

/* FOOTER */
.footer {
  border-top:  0.5px solid #3b3a3a;
;
  padding: 1rem 1rem;
  font-size: 0.55rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-contact {
  text-decoration: none;
  color: #dad8d8;
  font-weight: 400;
}

.footer-contact:hover {
  opacity: 0.6;
}

.footer-copy {
  color: #dad8d8;
}


/* HOVER */
.side-nav a:hover {
  opacity: 0.5;
}

/* ACTIVO */
.side-nav a.active {
  font-weight: 500;
}

/* VIDEO */


.video-hero {
  position: relative;
  width: 100%;
  flex: 1;
  height: calc(100vh - 140px);

  overflow: hidden;
}

.video-hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Contenido sobre el vídeo */
.video-hero .content {
  position: relative;
  z-index: 2;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* ───────── GALERÍA ───────── */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.gallery img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.gallery img:hover {
  opacity: 0.7;
}

/* ───────── VISOR / LIGHTBOX ───────── */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.lightbox.active img {
  transform: scale(1);
}

* CURSOR CUSTOM */
#cursor {
  position:fixed;
  width:28px; height:28px;
  border:0.5px solid rgba(218,216,216,0.5);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:width 0.2s, height 0.2s, border-color 0.2s;
}
#cursor-dot {
  position:fixed;
  width:3px; height:3px;
  background:#dad8d8;
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  opacity:0.4;
}


html, body {
  height:100vh;
  overflow:hidden;
  background:#050505;
  color:#dad8d8;
  line-height:1;
  cursor:none;
  display:flex;
  flex-direction:column;
}
 
/* HEADER */
.header { border-bottom:0.5px solid #222; flex-shrink:0; }
.menu {
  max-width:1100px; margin:auto;
  padding:1.8rem 1rem;
  display:flex; justify-content:space-between; align-items:center;
}
.menu ul { list-style:none; display:flex; gap:3.5rem; }
.menu a { text-decoration:none; color:#dad8d8; font-size:0.9rem; }
.name-link { font-size:0.95rem; font-weight:500; }
 
/* FOOTER */
.footer {
  border-top:0.5px solid #222;
  padding:1rem; font-size:0.55rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0;
}
.footer-contact { text-decoration:none; color:#dad8d8; }
.footer-copy { color:#dad8d8; }
 
/* SIDE NAV */
.side-nav {
  position:fixed; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4.5rem; z-index:9999;
}
.side-nav.left { left:30px; }
.side-nav.right { right:30px; }
.side-nav a {
  font-size:0.65rem; text-decoration:none; color:#dad8d8;
  writing-mode:vertical-rl; font-weight:300;
  letter-spacing:0.05em; text-transform:uppercase;
}
.side-nav.left a  { transform:rotate(180deg); }
.side-nav.right a { transform:rotate(360deg); }
 
/* CURSOR CUSTOM */
#cursor {
  position:fixed;
  width:28px; height:28px;
  border:0.5px solid rgba(218,216,216,0.5);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:width 0.2s, height 0.2s, border-color 0.2s;
}
#cursor-dot {
  position:fixed;
  width:3px; height:3px;
  background:#dad8d8;
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  opacity:0.4;
}
 
/* GLOW que sigue al cursor */
#glow {
  position:absolute;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(218,216,216,0.028) 0%, transparent 65%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:1;
}
 
/* STAGE */
.stage {
  flex:1;
  position:relative;
  overflow:hidden;
}
 
/* TODOS LOS ELEMENTOS empiezan casi invisibles */
.el {
  position:absolute;
  opacity:0.04;
  will-change:transform, opacity;
}
 
/* ── NOMBRE ── grande, anclado al centro */
.name-block {
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
.name-line-1 {
  display:block;
  font-size:clamp(5rem,11vw,10rem);
  font-weight:200;
  letter-spacing:-0.04em;
  line-height:0.9;
}
.name-line-2 {
  display:block;
  font-size:clamp(5rem,11vw,10rem);
  font-weight:200;
  font-style:italic;
  letter-spacing:-0.04em;
  line-height:0.9;
}
 
/* ── ROL ── pequeño, arriba del nombre */
.role-el {
  top:30%; left:50%;
  transform:translateX(-50%);
  font-size:0.42rem;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:#dad8d8;
  white-space:nowrap;
}
 
/* ── FOTO ── arriba izquierda */
.photo-el {
  top:12%; left:12%;
  width:10vw; min-width:100px;
}
.photo-wrap {
  width:100%;
  aspect-ratio:4/5;
  border:0.5px solid #2a2a2a;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.photo-wrap svg { opacity:0.2; }
.photo-lbl {
  position:absolute;
  bottom:6px; left:0; right:0;
  text-align:center;
  font-size:0.38rem;
  letter-spacing:0.25em;
  color:#333;
  text-transform:uppercase;
}
 
/* ── BIO ── derecha, media altura */
.bio-el {
  top:38%; right:9%;
  max-width:25vw;
  font-size:0.68rem;
  font-weight:300;
  line-height:2;
  color:#dad8d8;
}
.bio-el em { font-style:normal; font-weight:400; }
 
/* ── META ── arriba derecha */
.meta-el {
  top:12%; right:9%;
  font-size:0.4rem;
  letter-spacing:0.2em;
  line-height:2.4;
  color:#dad8d8;
  text-align:right;
  text-transform:uppercase;
}
 
/* ── SPECS individualmente ── */
.spec-el {
  font-size:0.44rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#dad8d8;
  white-space:nowrap;
}
 
/* ── CONTACT ── bottom center */
.contact-el {
  bottom:12%; left:50%;
  transform:translateX(-50%);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-el a {
  text-decoration:none;
  color:#dad8d8;
  font-size:0.5rem;
  letter-spacing:0.15em;
  display:block;
}
 
/* línea SVG lateral */
#linea {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.l-trace {
  fill:none;
  stroke:#dad8d8;
  stroke-width:0.4;
  opacity:0.04;
  transition:none;
}
.l-trace.active {
  opacity:0.3;
  transition:opacity 0.3s ease;
}