/* VARIABLES */
:root {
  --dark: #0a0a0a;
  --gold: #d4af37;
  --gray: #a0a0a0;
  --white: #e0e0e0;      /* Blanco roto suavizado para evitar fatiga visual */
  --bg-card: #161616;
  --text-soft: #b0b0b0;  /* Gris suave para textos largos */
}

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family: 'Montserrat', sans-serif; 
  background: var(--dark); 
  color: var(--white); 
  line-height: 1.6;
  scroll-behavior: smooth;
}
a { text-decoration: none; color: inherit; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 5%; }
.py { padding: 80px 0; }
.gold { color: var(--gold); }

/* NAV REFRESH (MOBILE FRIENDLY) */
.nav { padding: 20px 0; position: sticky; top: 0; background: rgba(10,10,10,0.9); backdrop-filter: blur(10px); z-index: 100; border-bottom: 1px solid #222; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 900; font-size: 1.2rem; letter-spacing: 1px; }
.logo span { color: var(--gold); font-weight: 400; }

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }

/* HERO */
.hero { 
  height: 80vh; 
  display: flex; 
  align-items: center; 
  text-align: center; 
  background: var(--dark); 
}
.hero-mini { 
  padding: 120px 0 60px; 
  text-align: center; 
  background: linear-gradient(to bottom, #111, var(--dark));
  border-bottom: 1px solid #222;
}
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 4px; font-size: 0.8rem; }
.hero h1, .hero-mini h1 { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1; margin: 10px 0; }
.hero h1 em { font-family: 'Playfair Display', serif; font-weight: 400; color: var(--gold); }
.hero-btns { display: flex; gap: 15px; justify-content: center; margin-top: 30px; }

/* BOTONES */
.btn-p, .btn-s, .btn-sm { padding: 15px 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; cursor: pointer; display: inline-block; }
.btn-p { background: var(--white); color: var(--dark); border: none; }
.btn-s { border: 1px solid var(--white); color: var(--white); }
.btn-sm { padding: 8px 15px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.7rem; }
.btn-p:hover { background: var(--gold); color: var(--white); }

/* VÍDEO RESPONSIVE */
.video-wrapper { 
  aspect-ratio: 16 / 9; 
  width: 100%; 
  background: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.video-wrapper iframe { width: 100%; height: 100%; border-radius: 4px; }

/* GRID */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--bg-card); padding: 40px; border-radius: 8px; transition: 0.3s; border: 1px solid #222; }
.card:hover { border-color: var(--gold); transform: translateY(-5px); }
.card h3 { margin-bottom: 10px; color: var(--gold); }

/* BIO CONTENT */
.bio-content { max-width: 800px; margin: 0 auto; }
.bio-content p { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 25px; line-height: 1.8; }
.bio-content ul { margin-bottom: 30px; padding-left: 20px; }
.bio-content li { color: var(--text-soft); margin-bottom: 10px; list-style: none; border-left: 2px solid var(--gold); padding-left: 15px; }

/* EPK BOX */
.epk-box { background: #111; padding: 60px; text-align: center; border-radius: 20px; border: 1px solid #333; }
.epk-box h2 { font-size: 2rem; margin-bottom: 20px; }

/* FOOTER */
.footer { text-align: center; padding: 40px; border-top: 1px solid #222; font-size: 0.8rem; color: var(--gray); }

/* MENU MÓVIL */
.menu-btn, .menu-icon { display: none; }
@media (max-width: 768px) {
  .nav-links { 
    position: fixed; top: 70px; left: -100%; width: 100%; height: 100vh; 
    background: var(--dark); flex-direction: column; padding-top: 50px; transition: 0.4s;
  }
  .menu-icon { display: block; cursor: pointer; padding: 10px; }
  .menu-icon span { display: block; width: 25px; height: 2px; background: var(--white); position: relative; }
  .menu-icon span::before, .menu-icon span::after { content: ''; position: absolute; width: 100%; height: 2px; background: var(--white); transition: 0.3s; }
  .menu-icon span::before { top: -8px; } .menu-icon span::after { bottom: -8px; }
  .menu-btn:checked ~ .nav-links { left: 0; }
  .hero h1 { font-size: 3rem; }
  .hero-btns { flex-direction: column; }
}