/* --- ESTILOS BASE --- */

.section {
  display: flex;
  justify-content: center;
  padding: 2vh 1vw;
}

.div-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2vh 0;
  width: 60%;
}

.titulo {
  text-align: center;
  background: rgb(197, 49, 3);
  color: white;
  width: 100%;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 5px;
}

.subtitulo {
  text-align: center;
  background: rgb(197, 25, 174);
  color: white;
  width: 100%;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 5px;
}

.parrafo-texto {
  font-size: 1.2rem;
  text-align: justify;
  margin: 1rem 0;
  line-height: 1.6;
}

.bold {
  font-weight: bold;
}

#contenedor-fotos {
  padding: 20px;
  width: 100%;
  border-radius: 5px;
  background: rgb(250, 247, 247);
  
}

.ciudad, .lugar, .fecha {
  margin-bottom: 20px;
  font-size: 1rem;
}

.ciudad-titulo {
  color: #0077cc; /* Azul para ciudad */
  font-weight: bold;
}

.lugar-titulo {
  color: #d35400; /* Naranja para lugar */
  font-style: italic;
}

.fecha-titulo {
  color: #27ae60; /* Verde para fecha */
  font-weight: 600;
}


.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 15px 0 15px 0;
  gap: 15px;
  background: rgb(240, 234, 234);
}

.miniatura {
  width: 280px;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: transform 0.2s;
}

.miniatura:hover {
  transform: scale(1.05);
}


/* --- MEDIA QUERIES --- */

/* Escritorio estándar (1280px a 1920px) */
@media screen and (min-width: 1280px) and (max-width: 1920px) {
  .div-container {
    width: 60%;
  }

  .parrafo-texto {
    font-size: 1.3rem;
  }
}

/* Escritorio menor (1024px a 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .div-container {
    width: 70%;
  }

  .parrafo-texto {
    font-size: 1.2rem;
  }

  .miniatura {
    width: 220px;
  }
}

/* Tablets (768px a 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .div-container {
    width: 85%;
  }

  .parrafo-texto {
    font-size: 1.1rem;
  }

  .miniatura {
    width: 200px;
  }
}

/* Celulares (320px a 767px) */
@media screen and (min-width: 320px) and (max-width: 767px) {
  .div-container {
    width: 95%;
  }

  .titulo, .subtitulo {
    font-size: 1.1rem;
    padding: 0.8rem;
  }

  .parrafo-texto {
    font-size: 1rem;
    padding: 0 0.5rem;
  }

  .miniatura {
    width: 100%;
  }
}