/* ==========================================================
   SISTEMA DE CLASES TIPOGRÁFICAS
   ========================================================== */

   /* COSAS DE LA HOMEPAGE Y PROYECTO AQUÍ */ /* Son cosas que aplican a los dos tipos de páginas, para intentar simplificar */

.titulo-principal { /* Editar para Soledad Manzano Páez*/
  color: #0000FF;
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 100px;
  letter-spacing: -4px;
  line-height: 1.05;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 30px;
}

.nombre-proyecto { /* Titulos de cada proyecto en el homepage y dentro de los proyectos*/
  font-family: Arial, serif;
  font-weight: normal;
  font-size: 90px;
  letter-spacing: -5px;
  line-height: 0.8;
  color: #000;
  transition: color 0.2s;
}

.subtitulo-proyecto { /* Info sobre el proyecto que está en homepage y proyecto (la letra chiquitita)*/
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: #000;
}

.herramientas-texto { /* Texto de las herramientas*/
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.3;
  color: #000;
}

.proyecto-descripcion-texto { /* Texto de las herramientas*/
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.3;
  color: #000;
  max-width: 100%;    
}

.project-header-inline { /* Titulos de proyecto y herramientas dentro de la web*/
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 60px;
}

.project-info-grid { /* Espacio entre textos del proyecto*/
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 100px;
  margin-bottom: 80px;
}

.col-title { /* Titulos de proyecto y herramientas */
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: -1px;
  margin-bottom: 15px;
  color: #000;
}

/* ==========================================================
   ESTRUCTURA GENERAL
   ========================================================== */
/* PÁGINA ENTERA */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background: #fff;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

.main-layout { /* Para los márgenes*/
  padding: 4vh 100px 100px 100px;
}

.info-container {
  display: flex;
  gap: 150px;
  margin-bottom: 0px;
  transition: margin-bottom 0.2s;
}

.info-container:has(.sobremi-box:not(.hidden)),
.info-container:has(.contacto-box:not(.hidden)) {
  margin-bottom: 60px;
}

/* HOME */

.project-item { /* Para distancias con el texto del proyecto */
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 25px;
  cursor: pointer;
}

.project-item:hover .nombre-proyecto { /* Para que se active el gris con el hover */
  color: #ababaa;
}

.mini-thumb {
  width: auto;
  object-fit: contain;
}

/* INTERIOR DE PROYECTO */

.project-page .nombre-proyecto { /* Hombre del proyecto*/
  font-size: 90px;
  margin-left: -5px;
}

.project-description-centered { /* Descripcion como en el homepage */
  margin-top: 40px;
  margin-bottom: 80px;
  max-width: 100%; 
}

/* GALERÍA DE SCROLL*/

.project-gallery-vertical {
  display: flex;
  flex-direction: column;
  gap: 50px; 
  margin-top: 60px;
  padding-bottom: 150px;
}

.gallery-item-full {
  width: 100%;
  display: flex;
  justify-content: center;
}

.gallery-img-full {
  max-width: 60%; 
  height: auto;
  display: block;
}

/* POP-UP Y ESTELA DE POST IT AMARILLOS */

.popup {
  position: fixed;
  top: 40px;
  right: 60px;
  width: 250px;
  background: #FFECB3;
  border: 1px solid #000;
  z-index: 9999;
  font-family: monospace;
}

.popup-header { /* Parte de arriba*/
  background: #FFD54F;
  padding: 8px;
  border-bottom: 1px solid #000;
  font-size: 12px;
  cursor: grab;
}

.popup-content { /* Parte del contenido */
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px; /* Tamaño base del pop-up */
}

/* ESTILO UNIFICADO PARA CONTACTO EN PROYECTO */

#contacto-fijo-proyecto { /* Edición para el contacto */
  margin-bottom: 10px;
}

#contacto-fijo-proyecto p { /* Tipos */
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

#contacto-fijo-proyecto .contacto-link { /* Animación del gris */
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.hidden {
  display: none !important;
}

.trail { /* Estela */
  position: fixed;
  width: 250px;
  height: 180px;
  background: rgba(255, 236, 179, 0.4);
  border: 1px solid rgba(0,0,0,0.05);
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.7s, transform 0.7s;
}

/* ==========================================================
   CONTROL DE TAMAÑOS ESPECÍFICOS POR FOTO PARA LA GALERIA DEL SCROLL
   ========================================================== */

   /* Accessgrip */
.img-Accessgrip-0 { max-width: 30% !important; }
.img-Accessgrip-1 { max-width: 20% !important; }
.img-Accessgrip-2 { max-width: 30% !important; }
.img-Accessgrip-3 { max-width: 30% !important; }

/* MicroKorg */
.img-microKorg-0 { max-width: 40% !important; }
.img-microKorg-1 { max-width: 40% !important; }

/* ACT0 */
.img-ACT0-0 { max-width: 30% !important; }
.img-ACT0-1 { max-width: 25% !important; }
.img-ACT0-2 { max-width: 25% !important; }

/* Neubau */
.img-Neubau-0 { max-width: 40% !important; }
.img-Neubau-1 { max-width: 40% !important; }
.img-Neubau-2 { max-width: 40% !important; }

/* lacorte */
.img-lacorte-0 { max-width: 40% !important; }
.img-lacorte-1 { max-width: 30% !important; }
.img-lacorte-2 { max-width: 30% !important; }

/* Bitácore */
.img-Bitácora-0 { max-width: 70% !important; }

/* Jim Morrison */
.img-Jim-Morrison-0 { max-width: 30% !important; }

/* STRIDE */
.img-STRIDE-0 { max-width: 60% !important; }

/* Muestra */
.img-Muestra-0 { max-width: 40% !important; }
.img-Muestra-1 { max-width: 30% !important; }
.img-Muestra-2 { max-width: 30% !important; }
.img-Muestra-3 { max-width: 40% !important; }
.img-Muestra-4 { max-width: 30% !important; }
.img-Muestra-5 { max-width: 30% !important; }

.nav-btn {
  background: none;
  border: 1px solid #000;
  padding: 5px 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  margin-bottom: 5px;
  transition: background 0.2s;
}
/* ==========================================================
   CONTROL DE INTERACCIONES DE CONTACTO
   ========================================================== */

.nav-btn:hover {
  background: rgba(0,0,0,0.05);
}

.nav-btn:active {
  background: #FFD54F;
}

.contacto-link:hover { 
  color: #ababaa !important;
}

/* ==========================================================
   ADAPTACIÓN PARA MÓVILES (Responsive)
   ========================================================== */

@media (max-width: 768px) {
  /* Ajuste de márgenes generales */
  .main-layout {
    padding: 2vh 20px 50px 20px;
  }

  /* Reducción de títulos gigantes para que quepan en pantalla */
  .titulo-principal {
    font-size: 50px;
    letter-spacing: -2px;
  }

  .nombre-proyecto {
    font-size: 45px;
    letter-spacing: -2px;
    line-height: 1;
  }

  /* Ajuste de la sección "Sobre mí" y "Contacto" */
  .info-container {
    flex-direction: column;
    gap: 30px;
  }

  /* Convertir la rejilla de info del proyecto en una sola columna */
  .project-info-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .project-header-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Hacer que las imágenes de la galería ocupen más ancho en el móvil */
  .gallery-img-full {
    max-width: 90% !important;
  }

  /* Ajuste del post-it para que no ocupe toda la pantalla */
  .popup {
    width: 200px;
    right: 10px;
    top: 10px;
  }

  /* Ajuste de los elementos de la lista en la Home */
  .project-item {
    flex-wrap: wrap;
    gap: 15px;
  }
}