:root {
  --gris: #ffffff;
  --negro: #111;
  --bg: #c7c7c7;
  --font: "Aspekta", sans-serif;
}

body {
  margin: 0;
  background-color: var(--bg);
  font-family: var(--font);
  color: var(--negro);
  overflow-x: hidden; /* Esto es clave, lo mantenemos */
}

/* --- TUS ESTILOS ORIGINALES PARA DESKTOP (CASI SIN CAMBIOS) --- */

.volver-tiempo {
  position: fixed;
  left: 5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #ff0000;
  padding: 1rem 0rem;
  font-weight: 350;
  font-size: 1rem;
  text-decoration: none;
  z-index: 1000;
}

.texto-fijo {
  position: fixed;
  bottom: 2rem;
  right: 1rem;
  max-width: 300px;
  font-size: 1rem;
  line-height: 1;
  color: var(--negro);
  z-index: 500;
}

.proyecto-galeria {
  padding: 0;
  margin: 0;
  width: 100%; /* Usamos width en vez de max-width para evitar conflictos */
}

.proyecto-bloque {
  margin-bottom: 1rem;
  padding: 2rem 0; /* Añadimos espacio vertical */
}

.imagen-full {
  width: 90vw;
  height: auto;
  display: block;
  object-fit: cover;
  margin: 0;
  margin-top: 5vh;
  margin-left: 5vh;
}

.texto-gris {
  padding: 1rem 1rem;
  line-height: 1;
  max-width: 300px; /* Max-width para que el texto no se estire demasiado */
  margin-left: 40vh;
}

.texto-gris h1 {
  font-size: 30rem;
  font-weight: 150;
  margin: 0;
  color: #ffc7f7;
}

.texto-gris h2 {
  font-size: 1rem;
  font-weight: 250;
  margin-top: 1rem;
  color: #390022;
}

.texto-gris p {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  color: rgb(239, 255, 239);
}


/* --- 👇👇 AQUÍ EMPIEZA LA MAGIA PARA CELULARES 👇👇 --- */
/* Estas reglas se aplican solo si la pantalla mide 768px o menos */

@media (max-width: 768px) {
  
  /* Hacemos los elementos fijos más pequeños y los reubicamos */
  .volver-tiempo {
    left: 1rem;
    font-size: 0.8rem;
    padding: 0.5rem;
    border-radius: 5px;
  }
  .texto-fijo {
    font-size: 0.8rem;
    max-width: 150px;
    bottom: 1rem;
    right: 1rem;
  }

  /* El contenedor que permite el scroll horizontal */
  .scroll-container {
    overflow-x: auto; /* ¡Esta es la clave! Permite deslizar */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
  }

  /* El contenedor interior que es realmente ancho */
  .scroll-content {
    display: flex; /* Alinea los elementos uno al lado del otro */
    align-items: center; /* Centra los elementos verticalmente */
    width: 250vw; /* Hacemos que sea 2.5 veces el ancho de la pantalla */
  }
  
  /* Ajustamos los elementos dentro del scroll para que se vean bien */
  .imagen-full, .texto-gris {
    margin: 0 1rem; /* Reseteamos márgenes y damos espacio */
    flex-shrink: 0; /* Evita que los elementos se encojan */
  }

  .imagen-full {
    width: 100vw; /* El ancho de las imágenes dentro del scroll */
    height: 100vh; /* Una altura fija para que se vea bien */
  }

  .texto-gris {
    width: 80vw; /* El texto también ocupa un espacio considerable */
  }

  /* Reducimos el H1 para que sea legible pero siga siendo gigante */
  .texto-gris h1 {
    font-size: 10rem;
  }
}