/* General carrusel */
#carouselHero,
#carouselHero .carousel-inner,
#carouselHero .carousel-item {
  height: calc(100vh - 90px);
  position: relative;
}

#carouselHero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay */
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.text-overlay .container {
  display: flex;
  flex-direction: row;              /* Desktop: fila */
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: 2rem;
}

/* Columnas */
.text-overlay .container > div {
  flex: 1;
}

/* Texto */
.text-overlay h2,
.text-overlay h3,
.text-overlay h4,
.text-overlay p {
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

/* Botón */
.text-overlay a.btn {
  margin-top: 1rem;
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .text-overlay .container {
    flex-direction: column;          /* apila verticalmente */
    justify-content: space-between;  /* primera arriba, segunda abajo */
    align-items: stretch;
    padding: 1rem;
  }

  /* Columna 1: arriba */
  .text-overlay .container > div:first-child {
    justify-content: flex-start !important; /* arriba */
    text-align: left;
  }

  /* Ocultar botón en mobile */
  .text-overlay .container > div:first-child a.btn {
    display: none;
  }

  /* Columna 2: abajo y a la izquierda */
  .text-overlay .container > div:last-child {
    justify-content: flex-end !important;   /* abajo */
    align-items: flex-start !important;     /* izquierda */
    text-align: left !important;
  }
}