@charset "UTF-8";
/* CSS Document */

/* -------- RESET -------- */

@font-face {
  font-family: "RoadRadio";
  src: url("fonts/RoadRadio.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
	
	@font-face {
  font-family: "RoadRadioThin";
  src: url("fonts/RoadRadio-Thin.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
	
	
	* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'RoadRadio', sans-serif; color:#fff; background:#000; overflow-x:hidden; position:relative; }
a { text-decoration:none; color:inherit; }

/* -------- BACKGROUND -------- */
.background {
  position: fixed; top:0; left:0; width:100%; height:100%;
 	/*filter:blur(20px);
  filter: brightness(0.25) contrast(1) ;*/
color: black;
	
  z-index:0;
	
	
}




/* -------- NAVBAR -------- */
nav {
  position: fixed; top:0; width:100%; height:80px;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden; z-index:100;
  opacity:0; transform: translateY(-20px);
  animation: fadeIn 1s forwards 0.3s;
	
	
}

nav .blur-layer {
  position:absolute; inset:0;
	
/*	border-bottom: 1px solid rgba(255, 255, 255, 0.15); */

  backdrop-filter: blur(20px);
 
	
  
  pointer-events:none;
  z-index:0;
	
}
	
/*
nav .blur-layer::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
} */

nav .nav-links {
  position: relative; z-index:1;
  display:flex; gap:100px;
}
nav .nav-links a {
  font-size:14px; letter-spacing:2px; text-transform:uppercase;
  transition:opacity 0.3s;
}
nav .nav-links a:hover { color: red;opacity:1; }

/* -------- PROJECTS -------- */
.projects {
  position: relative; z-index:10;
  display:flex; flex-direction:column; align-items:center;
  gap:60px; padding:160px 0 140px;
}

.project {
  will-change: transform;
  position: relative;
  width:85%;           /* más ancho */
  max-width:1500px;    /* más largo */
  aspect-ratio:21/9;   /* formato cinematográfico */
  overflow:hidden;
  border-radius:30px;
  cursor:pointer;
  transition: transform 0.2s ease-out;
 /* box-shadow:0 0 30px rgba(0,0,0,0.6); */

}
 /*.project:hover { transform: scale(1.02); }*/
.project img { width:100%; height:100%; object-fit:cover; filter:brightness(0.75); transition:filter 0.2s ease-out; }
.project:hover img { filter:brightness(1); }
	
	
	
.project h2 {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
   font-size: clamp(16px, 3vw, 40px); letter-spacing:2px; text-align:center; text-transform:uppercase;
  
}
	
	.project .subtitle {
  position: absolute;
  top: 55%; /* debajo del título */
  left: 50%;
  transform: translateX(-50%);
   font-size: clamp(8px, 2vw, 14px); 
  letter-spacing: 1px;
		padding: 5px 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);

}

/* Full-Screen Film Projects */

.film-projects {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0; /* sin espacio, cada proyecto ocupa toda la pantalla */
}

.film-project {
  position: relative;
  width: 100vw;
  height: 100vh; /* pantalla completa */
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
  transition: transform 0.2s ease-out;
}




/* Overlay ocupa toda la pantalla y centra vertical y horizontalmente */
.film-project .overlay {
  position: absolute;
  width: 100%;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* centra verticalmente todo */
  text-align: center;
  gap: 15px; /* separación entre laureles, título y subtítulo */
}

/* Laureles ahora sí en fila */
.film-project .overlay .laurels {
  display: flex;          /* fila horizontal */
  width: 100%;
	flex-direction: row;    /* explícito aunque es default */
  justify-content: center;
  align-items: center;    /* centra verticalmente las imágenes */
  gap: 15px;              /* espacio entre laureles */
  margin-bottom: 200px;    /* separación del título */
  flex-wrap: wrap;        /* para muchos laureles */
}

.film-project .overlay .laurels img {
  max-height: 90px; /* altura de las laureles */
  width: auto;
  display: block;
}

/* Título */
.film-project .overlay h2 {
  color: white;
  font-size: clamp(24px, 5vw, 48px);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

/* Subtítulo */
.film-project .overlay .subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(14px, 2.5vw, 18px);
  margin: 0;
}



.film-project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
  transition: filter 0.2s ease-out;
}

.film-project:hover img {
  filter: brightness(1);
}

.film-project h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(24px, 5vw, 60px);
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  color: white;
}

.film-project .subtitle {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: 1px;
  padding: 5px 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}


 /* --- Music Links --- */
    .music-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
      align-items: center;
    }

    .music-links a {
      color: white;
      text-decoration: none;
      font-size: 16px;
      letter-spacing: 1px;
      background: rgba(255,255,255,0.1);
      padding: 10px 24px;
      border-radius: 6px;
      transition: background 0.2s ease;
    }

    .music-links a:hover {
      background: rgba(255,255,255,0.3);
    }

/* -------- POPUP VIDEO -------- */
.popup {
  display: none; /* inicialmente oculto */
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px); /* para Safari */
 
  justify-content: center;
  align-items: center;
  padding: 20px; /* evita que toque los bordes en móviles */
  box-sizing: border-box;
  z-index: 1000;
}

.popup iframe {
  width: 90vw;       /* 90% del ancho del viewport */
  max-width: 1400px; /* no se haga gigante en pantallas grandes */
  height: 70vh;      /* altura proporcional */
  max-height: 80vh;  /* no se salga de la pantalla */
  border: none;
  border-radius: 8px;
}

.popup.active { display:flex; }

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
  font-weight: 200;
  z-index: 1001; /* sobre el iframe */
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .popup iframe {
    width: 95vw;
    height: 40vh;
    max-height: 70vh;
  }
  .close-btn {
    font-size: 24px;
    top: 10px;
    right: 10px;
  }
}

/* -------- FOOTER -------- */
footer {
 position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center; /* Centra el logo horizontalmente */
  overflow: hidden;
  z-index: 100;
  padding: 0; /* sin márgenes laterales que desplacen */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s forwards 0.5s;
	
	
	
}

footer img {
  height: 40px; /* ajusta según tu diseño */
  object-fit: contain;
}

footer .footer-left,
footer .footer-center,
footer .footer-right {
  position: relative; z-index:1;
}

footer .footer-center {
  
}

footer .blur-layer {
  position:absolute; inset:0;
  backdrop-filter: blur(20px);
  pointer-events:none;
  z-index:0;
	
	
	
}
	
/*
footer .blur-layer::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
} */

footer .footer-links {
  position: relative; z-index:1;
  display:flex; align-items:center; gap:60px;
}
footer img { height:24px; opacity:0.8; }
footer a:hover { color: red;opacity:1; }
	
	
	@media (max-width: 768px) {
  footer {
    flex-direction: column;
    height: auto;
    padding: 10px 20px;
    gap: 8px;
    align-items: center;
    justify-content: center;
	  
  }

  /* Footer-center deja de estar absoluto */
  footer .footer-center {
    position: relative;
    left: auto;
    transform: none;
    order: 2; /* aparece en medio si quieres */
    margin: 5px 0;
  }

  /* Footer-left y right ocupan 100% y centran sus elementos */
  footer .footer-left,
  footer .footer-right {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 5px 0;
    gap: 15px;
  }

  /* Links internos flexibles */
  footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
}

	
	/* NAV Y FOOTER HIDE */
	nav, footer {
  transition: transform 0.4s ease, opacity 0.4s ease;
		
}

/* Cuando se ocultan */
.nav-hidden,
.footer-hidden {
  opacity: 0;
}

/* Movimientos independientes */
.nav-hidden .nav-links,
.nav-hidden .blur-layer {
  transform: translateY(-100%);
  opacity: 0;
}
.nav-visible .nav-links,
.nav-visible .blur-layer {
  transform: translateY(0);
  opacity: 1;
}

.footer-hidden .footer-left,
.footer-hidden .footer-center,
.footer-hidden .footer-right,
.footer-hidden .blur-layer {
  transform: translateY(100%);
  opacity: 0;
}
.footer-visible .footer-left,
.footer-visible .footer-center,
.footer-visible .footer-right,
.footer-visible .blur-layer {
  transform: translateY(0);
  opacity: 1;
}

/* Transiciones suaves */
nav .blur-layer,
footer .blur-layer,
nav .nav-links,
footer .footer-left,
footer .footer-center,
footer .footer-right {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
	


	/* Sección About */
.about-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start; /* aseguramos que el contenedor quede alineado al inicio */
  background-color: #000000;
  color: white;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.about-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;      /* elimina márgenes que generan espacio a la derecha */
  padding: 0;     /* elimina padding */
}
/* Columna izquierda: texto + contacto */
.about-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 150px 80px 150px;
  box-sizing: border-box;
	position: relative;  /* importante para z-index */
  z-index: 1;      
}

.about-text h1 {
  font-size: clamp(28px, 3vw, 36px);
  margin-bottom: 20px;
	color: red;
}

.about-text p {
	font-family:'RoadRadioThin';
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 16px;
	margin-top: 50px;
}

.about-text a {
	font-family:'RoadRadio'; 
  color: red;
  text-decoration: none;
  transition: opacity 0.2s;
}

.about-text a:hover {
  opacity: 1;
	color: darkred;
}

/* Columna derecha: foto full height y full width */
.about-right {
  flex: 1;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  width: 50vw; /* asegura que ocupe exactamente la mitad del viewport */
	pointer-events: none; 
}

.about-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* --- Responsividad para móvil --- */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
  }

  .about-left {
    padding: 60px 50px 50px 50px;
  }

  .about-right {
    width: 100vw;  /* ancho completo del viewport */
    height: auto;
  }

  .about-right img {
    width: 100vw;  /* ancho completo del viewport */
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}



/* -------- FADE IN -------- */
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }



/* -------- RESPONSIVE -------- */
@media (max-width:768px){
  .project { width:90%; }
  footer { flex-direction:column; gap:8px; padding:0 20px; }
  nav .nav-links { gap:15px; }
}