/* 
   Importar la fuente "Will & Grace".
   Asegúrate de tener el archivo de la fuente (ej. WILLG___.ttf) 
   en la misma carpeta.
*/
@font-face {
    font-family: 'Will & Grace';
    src: url('WILLG___.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 
   Importar la fuente "Styllo-Bold".
   Asegúrate de tener el archivo de la fuente (ej. Styllo-Bold.ttf) 
   en la misma carpeta.
*/
@font-face {
    font-family: 'Styllo-Bold';
    src: url('Styllo-Bold.otf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Reseteo básico y estilos generales del body */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  width: 100%;
  overflow: hidden; /* Evita barras de scroll */
  cursor: grab; /* Indica que algo es "agarrable" */
  background-color: #f0f0f0; /* Color de fondo general */
  font-family: sans-serif;
}

/* Cambia el cursor cuando se está arrastrando */
body.dragging {
  cursor: grabbing; /* Cambia el cursor cuando se está arrastrando */
}

body {
    display: flex;
}

/* --- Menú Lateral --- */
.side-menu {
    width: 50px; /* Ancho de la franja del menú */
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    background-color: #0022ff; /* Azul intenso */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    padding-top: 20px;
    box-sizing: border-box;
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    z-index: 20; /* Asegura que el menú esté por encima de otros elementos */
}

/* Pseudo-elemento que actuará como el rectángulo de borde */
.side-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid white; /* Borde blanco */
    /* Variables CSS que controlaremos con JavaScript */
    height: var(--bg-height);
    opacity: var(--bg-opacity, 0);
    /* Añadimos bordes redondeados. Puedes ajustar el valor. */
    border-radius: 0 0 50px 50px; 
    transition: height 0.3s ease, opacity 0.3s ease;
}

/* Contenedor del logo para ajustar el tamaño */
.logo-container {
    width: 100%;
    padding: 0 5px; /* Espaciado para que la imagen no toque los bordes */
    box-sizing: border-box;
    margin-bottom: 10px; /* Espacio entre el logo y los botones */
}

.logo-container img {
    width: 100%; /* La imagen se ajusta al contenedor */
    height: auto;
}

/* Lista de navegación */
.side-menu ul {
    list-style: none;   
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Empuja el siguiente elemento (social-link) hacia abajo */
    align-items: center;
    gap: 30px; /* Espacio entre los botones */
    width: 100%;
}


/* --- Capa 2: Gradiente animado y máscara --- */
.gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Encima del slideshow */
  
  /* Gradiente animado */
  background: linear-gradient(45deg, #d3d3d3, #d4d0d0, #d7c0bd, #e19285, #f3735f);
  background-size: 400% 400%;
  animation: gradientAnimation 30s ease infinite;


}

/* Animación para el fondo del gradiente */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Estilos para las estrellas/formas flotantes */
.star {
  position: absolute;
  /* La animación 'float' las moverá suavemente */
  animation-name: float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.6; /* Un poco transparentes para integrarse mejor */
  filter: blur(1px); /* Un ligero desenfoque para suavizar los bordes */
}

/* Animación de flote para las estrellas */
@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-25px) translateX(20px) rotate(15deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}


/* Enlaces del menú (botones) */
.side-menu a {
 text-decoration: none;
    color: white;
    font-family: 'Will & Grace', sans-serif; /* Aplicamos la tipografía */
    font-size: 24px;
    padding: 10px;
    left: -3px;
    
    /* Rotación del texto */
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    /* Aseguramos que los botones estén por encima del borde */
    position: relative;
}

/* Contenido principal para que no quede debajo del menú */
.main-content {
    flex-grow: 1; /* Ocupa el espacio restante */
    height: 100vh;
    position: relative; /* Necesario para que los elementos internos posicionados se contengan */
    background-color: #000; /* Color de fondo mientras carga la primera imagen */
}

/* --- Título Principal --- */
.page-title {
    position: absolute;
    top: 20px;
    left: 40px;
    font-family: 'Styllo-Bold', sans-serif;
    font-size: 20px; /* Puedes ajustar el tamaño */
    color: rgb(0, 38, 255);
    z-index: 5; /* Por encima del slideshow/gradiente, debajo de la mano */
    pointer-events: none; /* Para que no interfiera con el ratón */
    /* Este modo de fusión crea un efecto de inversión de color interesante */
    mix-blend-mode: normal; 
}

/* Menú de selección de obras */
.works-menu {
  position: absolute;
  top: 8vh;; /* Distancia desde arriba */
  left: 50px; /* Distancia desde el menú lateral azul */
  z-index: 10;
}


.works-menu ul {
  list-style: none;
}



.works-menu a {
  text-decoration: none;
  color: rgb(0, 38, 255); /* Mismo azul que otros textos */
  font-family: 'Quicksand', sans-serif;
  font-size: 1em;
  font-weight: 500;
  opacity: 0.6; /* Opacidad reducida para estado inactivo */
  transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}

.works-menu a:hover{
  opacity: 1; /* Opacidad completa al pasar el ratón o si está activo */
  font-style: italic;
}


 .works-menu a.active {
      opacity: 1;
      font-style: italic;
    }

/* --- Estilos para el botón especial en el menú de obras --- */
.works-menu a.soma-button {
  /* Anulamos la opacidad para que el borde sea siempre visible */
  opacity: 0.6; 
  /* Añadimos padding para que el marco no esté pegado al texto */
  padding: 5px 15px;
  /* Marco azul con bordes redondeados para el estado inactivo */
  border: 1px solid rgb(0, 38, 255);
  border-radius: 20px;
  /* Quitamos el estilo itálico que se hereda del hover general */
  font-style: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Añadimos un margen superior para separarlo del resto */
  margin-top: 10px;
  
}

/* Estado activo o al pasar el ratón para el botón especial */
.works-menu a.soma-button.active,
.works-menu a.soma-button:hover {
  background-color: white;
  color: rgb(0, 38, 255);
  opacity: 1; /* Opacidad completa al pasar el ratón o si está activo */
  font-style: italic;
}

.work-text p {
      margin-bottom: 1.5em; /* Puedes ajustar este valor para más o menos espacio */
    }
/* --- Contenedor del texto de la biografía --- */

.work-container {
    width: 30%;
    position: absolute;
    top: 35vh;
    left: 50px;
    height: 55vh;
    z-index: 5;
    display: flex;
    align-items: flex-start; /* Alinea los items al inicio */
    pointer-events: none; /* Para que no interfiera con el ratón */
}

.work-text {
    flex: 1; /* El texto ocupa el espacio restante */
    height: 100%; /* Ocupa toda la altura del contenedor */
    color: rgb(0, 38, 255);
    font-family: 'Quicksand';
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left;
    overflow-y: auto; /* Añadimos scroll vertical si el contenido excede la altura */
    pointer-events: auto; /* Permitimos la interacción para poder hacer scroll */
    padding-right: 15px; /* Espacio para que el scroll no se pegue al texto */
    box-sizing: border-box;
   
}

/* Barra de desplazamiento */
.work-text::-webkit-scrollbar{
  width: 8px;
  background-color: #ffe8e8;
  border-radius: 20px;
}
.work-text::-webkit-scrollbar:window-inactive {
  display: none;
}
.work-text::-webkit-scrollbar-thumb  {
  background-color: rgb(0, 38, 255);
  border-radius: 6px;
}


       /* --- Columna de Imágenes --- */
    .image-column {
      position: absolute;
      top: 0;
      right: 0vh; /* Mismo espaciado que el contenedor de texto */
      width: 65%; /* Ocupa la mitad derecha del espacio disponible */
      height: 100vh; /* Ocupa toda la altura de la pantalla */
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      pointer-events: auto; /* Habilita la interacción con el ratón para el scroll */
      z-index: 5; /* Asegura que esté en la misma capa que el texto y el título */
      /* scroll-snap-type: y mandatory; Hace que el scroll se "enganche" a cada imagen */
    }

    .image-column img {
      width: 100%;
      height: 100vh; /* Cada imagen ocupa el 100% de la altura de la ventana */
      object-fit: cover; /* La imagen cubre el espacio sin deformarse */
      /*scroll-snap-align: start;  Punto de anclaje para el scroll-snap */
    }

    /* --- Estilos para la barra de scroll de la columna de imágenes --- */
    .image-column::-webkit-scrollbar { 
      width: 8px;
  background-color: #ffe8e8;
  border-radius: 20px; }

.image-column::-webkit-scrollbar:window-inactive {
  display: none;
}
.image-column::-webkit-scrollbar-thumb  {
  background-color: rgb(0, 38, 255);
  border-radius: 6px;
}



/* --- Enlace Social (Instagram) --- */
.social-link {
 
  width: 100%;
  text-align: center; /* Centra el ícono */
}

.social-link img {
  width: 60%; /* El tamaño del ícono será el 60% del ancho del menú (50px) */
  max-width: 30px; /* Un tamaño máximo para asegurar que no se desborde */
  height: auto;
  opacity: 0.7; /* Leve transparencia para que se integre */
  transition: opacity 0.3s ease;
}

.social-link a:hover img {
  opacity: 1; /* Opacidad completa al pasar el ratón */
}


/* --- Marquee --- */
.marquee {
    position: fixed; /* Lo fijamos en la pantalla */
    bottom: 0; /* Lo posicionamos en la parte inferior */
    left: 0;
    width: 100%; /* Ocupa todo el ancho disponible */
    overflow: hidden; /* Oculta el contenido que se sale del contenedor */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    padding: 10px 0;
    z-index: 5; /* Misma capa que el título para que esté por encima del fondo */
    pointer-events: none; /* Para que no interfiera con el ratón */
}

/* El contenedor del contenido que se animará */
.marquee-content {
    display: flex; /* Usamos flexbox para alinear los elementos hijos en una línea */
    /* La duración de la animación (25s) controla la velocidad. Ajústala a tu gusto. */
    animation: scroll 50s linear infinite;
}

/* El contenido que se va a repetir */
.marquee-content span {
   /* font-family: 'Styllo-Bold', sans-serif; /* Usamos una fuente consistente con el título */
    font-size: 1rem;
    font-weight: normal;
    color: rgb(0, 38, 255); /* Mismo color azul que el título */
    padding: 0 0.2em; /* Añade un poco de espacio entre las repeticiones */
}

/* Definición de la animación */
@keyframes scroll {
    0% {
        transform: translateX(-10%);
    }
    100% {
        /* Movemos el contenedor hacia la izquierda por la mitad de su ancho total.
           Como el contenido está duplicado, se crea un bucle perfecto. */
        transform: translateX(-100%);
    }

}

/* --- Estilos para la caja de texto flotante de contacto (Ajustados) --- */
.contact-tooltip {
  position: fixed; /* Se posiciona relativo a la ventana */
  background-color: #d91515; /* Mismo azul que el menú lateral */
  color: white; /* Texto en color blanco */
  padding: 12px 20px;
  border-radius: 30px; /* Bordes más redondeados para un look moderno */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px; /* Un poco más de espacio entre letras */
  z-index: 1001; /* Asegura que esté por encima de otros elementos */
  
  /* Sombra sutil para darle profundidad */
  box-shadow: 0 4px 15px rgba(0, 34, 255, 0.4);

  /* Transición suave para aparecer y desaparecer */
  opacity: 0;
  transform: translateX(-10px); /* Empieza ligeramente a la izquierda */
  transition: opacity 0.3s ease, transform 0.3s ease;
  
  /* Se controla con JS para permitir interacción */
  pointer-events: none;
}

/* Estilo para el enlace dentro del tooltip */
.contact-tooltip a {
  color: inherit; /* Hereda el color blanco del padre */
  text-decoration: none; /* Quita el subrayado */
  display: block; /* Asegura que el enlace ocupe todo el espacio del tooltip */
}

/* --- Versión Celular (Responsivo) --- */
@media (max-width: 768px) {
  body, html {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .side-menu {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 10px 15px;
    position: fixed;
    top: 0;
    justify-content: space-between;
    z-index: 1000;
  }

  .side-menu::before { display: none; }
  .side-menu ul { flex-direction: row; gap: 10px; flex-grow: 0; }
  .side-menu a { writing-mode: horizontal-tb; transform: none; font-size: 14px; }
  .logo-container { width: 35px; margin-bottom: 0; }

  .main-content {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-top: 60px;
  }

  .page-title {
    position: relative;
    top: 20px;
    left: 20px;
    font-size: 24px;
  }

  .works-menu {
    position: relative;
    top: 30px;
    left: 20px;
    width: calc(100% - 40px);
  }

 .side-menu ul {
    flex-direction: row;
    gap: 15px;
    flex-grow: 0;
    justify-content: center;
  }

  .side-menu a {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 16px;
    padding: 5px;
    left: 0;
  }

  

  .side-menu li.active a,
  .side-menu a:active {
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  .logo-container { width: 40px; margin-bottom: 0; }
  .social-link { width: auto; }
  .work-container {
    position: relative;
    width: 100%;
    top: 40px;
    left: 0;
    height: auto;
    padding: 20px;
  }

  .work-text { height: auto; overflow: visible; padding-right: 0; }

  .image-column { position: relative; width: 100%; height: auto; top: 50px; overflow: visible; }
  .image-column img { height: auto; min-height: auto; }

  .contact-tooltip {
    transform: translateY(-10px);
    font-size: 13px;
    padding: 8px 15px;
  }
}