/* --- Estilos del Carrusel de Imágenes --- */

.carousel-container {
	max-width: 70%;
	position: relative;
	margin: auto;
	overflow: hidden;
	height: 50vh; /* <-- SOLUCIÓN: Altura definida (80% de la ventana) */
    /* Puedes ajustar 80vh a 70vh, 60vh, etc. */
}

/* El slide individual (imagen y contenedor) */
.carousel-slide {
  display: none; /* Ocultos por defecto */
}
.carousel-slide img {
  width: 100%;
  height: 100%; /* <-- SOLUCIÓN: La imagen llena el 100% del contenedor */
  object-fit: cover; /* Esto la centra y la recorta para que quepa */
  object-position: center; /* Asegura que el recorte sea centrado */
  vertical-align: middle; 
}

/* Efecto de desvanecido */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Flechas de Siguiente/Anterior */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.3); /* Fondo semitransparente */
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Texto de la leyenda */
.carousel-caption {
  color: #f2f2f2;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 12px 20px;
  position: absolute;
  bottom: 0px; /* A 20px del fondo */
  width: 100%;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); /* Gradiente para legibilidad */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Puntos de navegación */
.carousel-dots {
  text-align: center;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #8C8C8C;
}


/* --- Estilos del Pie de Página (Footer) --- */

.site-footer {
  background-color: #2a2a2a;
  color: #aaa;
  padding: 40px 20px;
  margin-top: 40px;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; /* Para que se apilen en móvil */
  justify-content: space-between;
  gap: 30px;
}

/* Columnas del footer */
.footer-about,
.footer-links,
.footer-social {
  flex: 1; /* Crecen para ocupar espacio */
  min-width: 250px; /* Ancho mínimo antes de apilarse */
}

/* Columna "Acerca de" */
.footer-about h3 {
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
.footer-logo {
  height: 30px; /* Pequeño logo en el footer */
  width: auto;
}
.footer-about p {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Columna "Enlaces" */
.footer-links h3 {
  color: #fff;
}
.footer-links ul {
  list-style: none;
  padding: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  color: #aaa;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Columna "Redes Sociales" */
.footer-social h3 {
  color: #fff;
}
.footer-social a {
  display: block; /* Un enlace por línea */
  color: #aaa;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 1rem;
  transition: color 0.3s;
}
.footer-social a:hover {
  color: #fff;
}

/* Línea inferior del footer */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #444;
  font-size: 0.85rem;
}

/* Ajustes responsivos para el footer */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .footer-about h3 {
    justify-content: center; /* Centra el logo y título en móvil */
  }
}