/* ==========================================================================
   Hero
   ========================================================================== */

/* El hero se desplaza 75px hacia abajo para dejar espacio al navbar */

/* Imágen del hero */

.hero__img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenedor de la información del hero, se ubica a la derecha de la imágen */

.hero__right {
  background-color: var(--color-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contenedor del texto del hero, se limita a 660px de ancho para que no se vea muy largo */

.hero__content {
  max-width: 660px;
}

/* Título del hero */

.hero__title {
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
}

/* Subtítulo del hero */

.hero__subtitle {
  display: block;
  color: var(--color-white);
  font-size: var(--fs-body);
}

/* Precio dentro del hero */

.hero__price {
  color: var(--color-yellow);
  font-size: var(--fs-display2);
  font-weight: var(--fw-bold);
}

/* Botón del hero */

/* ==========================================================================
   Apartamentos
   ========================================================================== */

/* Contenedor de los botones de selección de tipo de apartamento */

.list-group {
  flex-direction: row;
  justify-content: center;
}

/* Se oculta el input radio */

input[type=radio] {
  visibility: hidden;
}

/* Se muestra el label como botón */

input[type=radio] + label {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}

/* Se cambia el color del label cuando se selecciona el input radio */

input[type=radio]:checked + label {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: 1px solid var(--color-secondary);
}

/**
 * Por defeceto el el contenido detallado de los apartamentos está oculto
 * Se muestra cuando se selecciona el input radio usando javascript
 */

.option-content {
  display: none;
}

/* Tamaño del apartamento */

.apt-info__size {
  background-color: var(--color-secondary);
  padding: 16px 8px;
  border-radius: 10px;
  color: var(--color-white);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Separador vertical entre el tamaño y el precio */

.apt-info__separator {
  display: none;
  background-color: var(--color-light-gray);
  width: 1px;
  height: 50px;
  margin: 1rem;
}

/* Etiqueta : Desde */

.apt-info__price__tag {
  color: var(--color-gray);
  font-weight: var(--fw-bold);
}

/* Precio del apartamento */

.apt-info__price__amount {
  color: var(--color-yellow);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
}

/* Estilos para las imagenes del apartamento en el carrusel */

.carousel-img {
  width: 500px;
  height: 500px;
  object-fit: contain;
}

/* ==========================================================================
   Financiación
   ========================================================================== */

/* Contenedor de la información de financiación */

.financing {
  background-color: var(--color-primary-shade-9);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}

/* Título de la información de financiación */

.financing__title {
  background-color: var(--color-secondary);
  padding: 2rem;
  border-radius: 10px 0 0 10px;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

/* Mensajes informativos de la financiación */

.financing__messages {
  padding: 2rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  color: var(--color-secondary);
}

/* ==========================================================================
   Ubicación
   ========================================================================== */

/* Tarjeta azul para resaltar información */

.blue-card {
  background-color: var(--color-secondary);
  padding: 1rem 1.5rem;
  border-radius: 10px;
}

/* Texto de la tarjeta azul */

.blue-card__text {
  color: var(--color-white);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (max-width: 768px) {
  .list-group {
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .apt-info__separator {
    display: block;
  }
}

@media (max-width: 992px) {
  .financing {
    flex-direction: column;
  }

  .financing__title {
    border-radius: 10px 10px 0 0;
    text-align: center;
  }

  .financing__messages {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .financing__messages img {
    /* Se rota la imágen para que la flecha quede hacia abajo */
    transform: rotate(90deg);
    margin-bottom: 16px;
  }
}