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

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #000 url('assets/hero-poster.jpg') center / cover no-repeat;
  color: #fff;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }


/* ====== HERO (vídeo a pantalla completa) ====== */
.hero-header {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* rellena la pantalla */
  object-position: center;
  z-index: 0;
}

/* overlay oscuro encima del vídeo */
.hero-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;   /* deja pasar clics al <video> */
}


/* ====== NAVBAR ====== */
.nav-container {
  position: absolute;
  top: 28px;
  left: 150px;
  right: 85px;
  display: grid;
  grid-template-columns: auto 1fr; /* título | nav/hamburguesa */
  align-items: center;
  z-index: 3;
}

/* título / marca */
.site-title {
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.11em;
  color: #fff;
  font-size: clamp(16px, 2.0vw, 24px);
  line-height: 1;
  justify-self: start;
}

/* navegación desktop */
.nav {
  display: flex;
  gap: 32px;
  justify-self: end;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.11em;
  line-height: 1;
}

.nav a:hover { opacity: .75; }

/* hamburguesa */
.hamburger {
  display: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  justify-self: end;
}

.hamburger::before {
  content: "☰";
  font-size: 28px;
  line-height: 32px;
  display: block;
  color: #fff;
}

/* toggles del menú */
.menu-toggle { display: none; }
.nav-backdrop { display: none; }
.close-nav { display: none; }


/* ====== MAIN ====== */
.main-content {
  min-height: 100vh;
  padding: 90px 60px;
}

.main-content a { color: #fff; }


/* ====== FOOTER ====== */
.site-footer{
  position: relative;
  background: #000000;
  color: #fff;
  padding: 96px 20px 56px;
  text-align: center;
  z-index: 3;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* sociales en círculos */
.footer-social{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  margin: 6px auto 24px;
}

.soc{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#0b0b0b;
  color:#ffffff;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  text-transform:uppercase;
}

.soc:hover{ filter: saturate(1.2) brightness(.95); }

/* meta / créditos */
.footer-meta{ margin: 10px auto 28px; }

.footer-meta p{
  margin:6px 0;
  color: rgba(255,255,255,.9);
  font-size:14px;
}

.site-footer a{
  color:#1aff00;            /* verde ácido */
  text-decoration:none;
}

.site-footer a:hover{ text-decoration:underline; }

/* powered */
.footer-powered{
  opacity:.7;
  font-size:12px;
  letter-spacing:.12em;
  display:grid;
  gap:8px;
  place-items:center;
}


/* ====== RESPONSIVE ====== */
@media (max-width: 820px) {
  /* navbar */
  .nav-container { top: 20px; left: 16px; right: 16px; }
  .logo { height: 28px; }

  .site-title {
    font-size: clamp(16px, 4.5vw, 22px);
    text-align: center;
  }

  /* hamburguesa visible */
  .hamburger { display: block; }

  /* panel lateral del menú */
  .nav{
    position: fixed;
    right: 0;
    top: 0;
    width: 60vw;
    height: 100vh;
    background: rgba(0, 0, 0, .50);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    z-index: 1001;
  }

  .nav a { font-size: 20px; }

  /* backdrop del menú */
  .nav-backdrop{
    position: fixed;
    left: 0;
    top: 0;
    width: 40vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
    display: none;
  }

  /* abrir / cerrar menú */
  .menu-toggle:checked ~ .nav { display: flex; }
  .menu-toggle:checked ~ .nav-backdrop { display: block; }

  /* botón X dentro del panel */
  .menu-toggle:checked ~ .nav .close-nav { display: block; }
  .close-nav {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
  }

  /* cuando el menú está abierto, oculta la hamburguesa */
  .menu-toggle:checked + .hamburger { display: none; }

  /* hero en móvil: mostrar vídeo entero */
  .hero-media {
    object-fit: contain;
    background: #000; /* bordes negros si sobra espacio */
  }

  /* footer */
  .site-footer{ padding: 88px 16px 48px; }
  .to-top{ width:74px; height:74px; }
  .footer-nav a{ font-size:13px; }
  .soc{ width:40px; height:40px; font-size:12px; }
}


/* ====== CONTROLES TIPO CAMCORDER / PIXEL ====== */
.text-controls{
  position:absolute;
  left:150px;       /* ajusta si quieres */
  bottom: 50vh;     /* altura aproximada de títulos en vídeo */
  z-index: 3;
  display:grid;
  gap:4px;
}

.ctl{
  all: unset;
  cursor: default;
  /* font-family: 'Press Start 2P', monospace; */
  font-size: clamp(10px, 2.5vw, 12px);
  letter-spacing: 0.08em;
  line-height:32px;
  color: rgb(255, 255, 255);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding: 2px 0;
  transition: transform 0.1s ease, font-size 0.1s ease;
}

.ctl:hover{ transform: scale(2.2); }

/* estado desactivado: tachado */
.ctl.is-off{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(241, 221, 205, 0.85);
}

/* móvil: recolocar controles y escalar */
@media (max-width:820px){
  .text-controls{ left: 20px; bottom: 48vh; gap:6px; }
  .ctl{ font-size: clamp(6px, 1.0vw, 9px); }
  .ctl:hover{ transform: scale(2.4); }
}