@font-face {
  font-family: RockSalt;
  src: url(tipo/Rock_Salt/RockSalt-Regular.ttf);
}
@font-face {
  font-family: Kanit;
  src: url(tipo/Kanit-Black.ttf);
}
/***************************************************************
  1. RESET BÁSICO Y SCROLLBARS
***************************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
body.fade-out {
  opacity: 0;
}

/* Oculta scrollbars pero mantiene el scroll */
::-webkit-scrollbar {
  display: none;
}
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
  
}


/***************************************************************
  2. MENÚ FIJO EN ESQUINA SUPERIOR DERECHA
***************************************************************/
#menu-proyectos {
  
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000; /* Superior al cover */
  font-family: inherit;
  font-weight: 700;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem; /* Espacio entre elementos */
}
#menu-proyectos a {
  color: #555;
  text-decoration: none;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
#menu-proyectos a:hover {
  color: #333;
 
}
#menu-toggle {
  background: transparent;
  color: #555;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
#menu-toggle:hover {
  color: #333;
}

/* Submenú desplegable */
#submenu {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 150px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
#menu-proyectos.active #submenu {
  display: block !important;
}
#submenu li a {
  display: block ;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #333;
  transition: background 0.3s ease;
}
#submenu li a:hover {
  background: #f3f3f3;
}

/* Cuando el menú está activo */
#menu-proyectos.active #submenu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/***************************************************************
  3. HEADER / PORTADA Y PERFIL (Home)
***************************************************************/
/* Portada con cover-image */

.cover {
  position: relative;
  width: 100%;
  background-color: #fff;
  margin-bottom: 2rem;
  overflow: hidden;
}
.cover-image {
  height: 40vh;
  background: url("img/cover.jpg") no-repeat center top / cover;
  transition: background-position 0.3s ease-out;
  border-bottom: 2px solid #ccc;
  box-shadow: 0 20px 15px rgba(0,0,0,0.2);
}

/* Sección de perfil (home) */
.logo-home {
  position: absolute;      /* Se ubica de forma absoluta respecto al .project-header */
  top: 20px;
  left: 20px;
  width: 60px;             /* Ajusta el tamaño del logo */
  height: auto;            /* Mantiene proporción */
  cursor: pointer;         /* Indica que es clicable */}
.profile-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background-color: #fff;
  margin: 2rem 0;
  
}
.profile-text h1 {
  
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}
.profile-title {
  font-size: 1.5rem;
  color: #777;
  margin-top:-2.5vh;
  
}
.profile-text {
  padding-top:10vh;
  font-size: 1rem;
  color: #777;
  
}


/* Carrusel en la portada */
.profile-carousel {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.carousel-track {
  display: flex;
  gap: 10px;
  transition: transform 0.5s ease-out;
}
.carousel-track .profile-pic {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
  transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}

/***************************************************************
  4. INSTA-CHASE (Elemento que sigue al cursor)
***************************************************************/
#insta-chase {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  font-weight: bold;
  background-color: rgba(255,255,255,0.8);
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#insta-chase a {
  color: #0073f4;
  text-decoration: none;
}

/***************************************************************
  5. SECCIÓN DE PROYECTOS (Home)
***************************************************************/
.projects-section {
  padding: 2rem;
  background-color: #fff;
  margin-bottom: 2rem;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.projects-grid article:nth-child(3) {
  grid-column: 1 / -1;   /* Ocupa todas las columnas del grid */
  aspect-ratio: unset;    /* Elimina la restricción de proporción */
  margin-left: -2rem;    /* Compensa el padding del contenedor */
  margin-right: -2rem;
}
.project-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-out;
}
.project-card:hover img {
  transform: scale(1.1);
}
.project-card .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-card:hover .overlay {
  opacity: 1;
}
.project-card .overlay h3 {
  color: #fff;
  font-size: 2rem;
  text-align: center;
  margin: 0;
}

/***************************************************************
  6. FOOTER / CONTACTO
***************************************************************/
footer {
  text-align: center;
  padding: 1rem;
  background-color: #fff;
  border-top: 1px solid #ddd;
  color: #777;
}
footer a {
  color: #000;       /* Color negro */
  text-decoration: none; /* Sin subrayado */
}
footer a:hover {
  text-decoration: underline;
  color: #0073f4;
  transition: 0.3s ease;
}

.footer-contact {
  text-align: center;
  margin-bottom: 1rem;
}
.contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.contact-list li {
  display: flex;
  align-items: center;
}
.contact-logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 0px;
}
.contact-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-copy {
  text-align: center;
  font-size: 0.9rem;
  color: #777;
}



/***************************************************************
  8. VIDEO SECTION / VÍDEO PRINCIPAL (p.e. Proyecto2)
***************************************************************/
.video-section {
  width: 100%;
  background: #000; /* opcional, fondo oscuro */
  position: relative;
}
.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* opcional, recortar */
}
.video-title {
  position: absolute;
  top: 20px; left: 20px;
  color: #fff;
  font-size: 3rem;
  font-family: "Times New Roman", serif;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
  z-index: 10;
  text-decoration: none;
}

/* Botón de volumen en el video principal */
.volume-toggle {
  position: absolute;
  bottom: 120px;
  right: 20px;
  font-size: 3rem;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.3s ease;
  z-index: 10;
}
.volume-toggle:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/***************************************************************
  9. VIDEO-GRID (2x2 a pantalla completa) (p.e. Proyecto3)
***************************************************************/
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas */
  grid-template-rows: 60vh 60vh;  /* 2 filas */
  gap: 0;             /* Sin espacio entre celdas */
  width: 100vw;
  min-height: 100vh;  /* Ocupa toda la ventana */
  margin: 0; padding: 0;
}
.video-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.video-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.video-item:hover img {
  transform: scale(1.05);
}
/* Texto centrado en hover (data-title) */
.video-item::after {
  content: attr(data-title);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  pointer-events: none;
}
.video-item:hover::after {
  opacity: 1;
}

/***************************************************************
  10. HORIZONTAL GALLERY (p.e. Proyecto2 con scroll horizontal)
***************************************************************/
.horizontal-gallery {
  width: 100%;
  overflow-x: auto; /* Scroll horizontal */
  overflow-y: hidden;
  margin: 2rem 0;
  /*height: 500px; Opcional si quieres limitar la altura */
}
.horizontal-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
  scroll-behavior: smooth;
}
.horizontal-container img {
  flex: 0 0 auto;
  height: 900px; /* Ajusta según prefieras */
  width: auto;
  object-fit: cover;
  border-radius: 5px;
}

/***************************************************************
  11. LIGHTBOX / MODAL IMAGE
***************************************************************/
.video-modal {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.8); /* Fondo oscuro */
  display: none; /* Se mostrará con display: flex al abrir */
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Encima de todo */
  padding: 1rem;
}

/* Contenedor principal del contenido */
.video-modal-content {
  /* Hacemos el contenedor más grande */
  width: 85%;
  height: 85%;
  
  /* Efecto glass */
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);

  /* Eliminamos borde sólido y añadimos sombra difuminada interior */
  border: none;
  box-shadow: 0 0 40px 10px rgba(255,255,255,0.3) inset;

  border-radius: 10px;
  overflow: auto;
  padding: 1.5rem;

  /* Centramos todo el bloque interior */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estructura interna: video + ficha técnica */
.video-modal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;     /* Ocupa todo el ancho interno */
  height: auto;    /* Se ajusta al contenido */
  align-items: center;
  justify-content: center;
}

/* Columna del video */
.video-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 400px; /* Mínimo de 400px si cabe */
}
.video-column video {
  width: 100%;
  max-height: 60vh;
  border-radius: 5px;
}

/* Ficha técnica */
.tech-sheet {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Opcional: centrado horizontal de texto */
  align-items: flex-start; /* O center, si deseas todo centrado */
}
.tech-sheet h3 {
  font-family: 'RockSalt', cursive; 
  font-size: 2rem; /* Más grande */
  margin-bottom: 1rem;
  color: #fff;
}
.tech-sheet p {
  margin-bottom: 0.5rem;
  color: #eee; 
}

/* Botón para cerrar (la “X”) */
.video-modal-close {
  position: absolute;
  top: 10px; 
  right: 10px;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  color: #fff; 
}

/* Responsivo */
@media (max-width: 768px) {
  .video-modal-content {
    width: 90%;
    height: 90%;
  }
  .video-modal-inner {
    flex-direction: column;
  }
  .tech-sheet h3 {
    font-size: 1.6rem;
  }
}


/***************************************************************
  12. SCROLL-UP HINT (Botón para subir)
***************************************************************/
.scroll-up-hint {
  position: absolute;
  top: -30px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.scroll-up-hint:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(-3px);
}

/***************************************************************
  13. ENCARGOS (Grid tipo Behance)
***************************************************************/
/* --- BANNER PARA ENCARGOS (Ajustado) --- */
.banner-encargos {
  
  position: relative;
  width: 100vw;
  height: 20vh;           /* Reduce la altura a 30vh (ajusta este valor si lo deseas menor o mayor) */
  overflow: hidden;       /* Oculta las partes que se salen del contenedor */
}

.banner-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
  object-fit: cover;      /* Hace que la imagen cubra todo el contenedor recortando y centrando la parte central */
}

.back-home-button {
  position: absolute;
  top: 10px;              /* Coloca el botón "Volver" en la esquina superior izquierda */
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  z-index: 2;
  transition: background-color 0.3s ease;
}

.back-home-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
}


/* Pequeña sección de introducción */
.encargos-intro {
  text-align: center;
  padding-top: 2rem 1rem;  /* Más espacio para que el título y texto respiren */
      /* Limita el ancho */
  margin: 0 0;      /* Centra horizontalmente */
  font-size: 1rem;
  color: #555;
}
.encargos-intro h1 {
  
  letter-spacing: 3vw;
  font-family:kanit;
  font-size: 8vw;
  color: #333;
  margin-bottom: 1vh;
}
.encargos-intro p {
  align-items:center;
  
  font-size: 1.1vw;
  
}
.intro-line {
  margin: 0 25vw;
  margin-bottom: 3vh;
}


/* --- MASONRY STYLE PARA ENCARGOS --- */
.encargos-grid {
  column-count: 2;   /* 2 columnas */
  column-gap: 1rem;  /* Espacio horizontal entre columnas */
  padding: 1rem;
}
.encargo-item {
  display: inline-block; 
  width: 100%;         
  margin: 0 0 1rem;    /* Espacio vertical entre elementos */
  text-align: center;
  text-decoration: none;
  color: #333;
  border: none;
  /* Quita sombras si no deseas un "tarjetón" grande */
  transition: transform 0.3s ease;
}
.encargo-item:hover {
  transform: scale(1.02);
}
.encargo-item img {
  width: 100%;
  aspect-ratio: 3/2; /* Forzamos un rectángulo */
  object-fit: cover; 
  display: block;
  /* Quita bordes, etc. */
}
.encargo-item h2 {
  margin: 0.3rem 0;
  font-size: 1vw; /* Un poco más pequeño */
  color: #333;
}


/* ============== FIN ============== */
.video-title {
  position: absolute;
  color:#000;
  top: 5px !important; left: 20px;
  font-size: 2vw;
  font-family: "Times New Roman", serif;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
  z-index: 10;
  text-decoration: none;}
  .video-title2 {
    position: absolute;
    color:#ffffff;
    top: 5px !important; left: 20px;
    font-size: 2vw;
    font-family: "Times New Roman", serif;
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.7);
    z-index: 10;
    text-decoration: none;}

  /***************************************************************
  7. RESPONSIVE (Media Query)
***************************************************************/
@media (max-width: 768px) {
  
  #menu-proyectos {
    font-size: 0.9rem; /* Ajusta según prefieras */
  }
  .profile-info {
    flex-direction: column;
    text-align: center;
  }
  .profile-carousel {
    width: 300px; height: 300px;
  }
  .carousel-track .profile-pic {
    width: 300px; height: 300px;
  }
  .projects-grid {
    grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
  }
  .banner-encargos {
    height: 25vh; /* Ajusta según prefieras */
  }
  #menu-proyectos {
    top: 10px;
    right: 10px;
    font-size: 0.9rem; /* Ajusta el tamaño del texto del menú */
  }
  /* Opcional: si deseas que “Proyectos” y “Contact” aparezcan debajo del toggle */
  #submenu {
    position: static; /* Quita position absolute para que se muestre en bloque */
    background: #fff;
    box-shadow: none;
  }
  #menu-proyectos.active #submenu {
    display: block;
  }
  
}

@media (max-width: 600px) {
  #menu-proyectos {
    font-size: 0.8rem;
  }
  .encargos-grid {
    column-count: 1;  /* Pasa a 1 columna */
    column-gap: 0;    /* Opcional: reduce el gap */
    padding: 0.5rem;  /* Ajusta los márgenes */
    align-self: center;
  }
  .encargo-item {
    margin: 0 0 1rem;
  }
  .logo-home {
    width: 40px;
    top: 10px;
    left: 10px;
  }
  #submenu li{
    font-size: 0.8rem;
  }
  .encargos-intro p {
    font-size: 1.5vw;
    line-height: 1.5;
  }
  
}