/* Texto blanco sobre el color de marca en el asistente de bheed.

   El asistente elige la tinta por luminancia (asistente-ia.js): el naranjo
   #ff4713 queda en 0.258, sobre el umbral de 0.179, asi que por calculo le
   toca negro. Contrasta mas (6.16:1 contra 3.41:1) pero sobre el naranjo se
   lee sucio, asi que se fuerza blanco como ya se hace en metlife. */
.ia-launcher,
.ia-panel {
  --ia-primary-ink: #fff !important;
}

/* Look & feel de SITU Echaurren (copiado de clients/situechaurren/custom.css). */

.banner-title {
  font-size: 2.6rem;
  font-weight: 300;
}

.custom-main-banner {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.custom-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  background: black;
}

.custom-background-overlay video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.custom-background-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.custom-main-banner-text {
  padding-top: 10vh; 
}

@media (min-width: 992px) {
  .custom-main-banner-text {
    padding-top: 30vh;
  }
}

.custom-main-banner-form {
  padding-top: 4vh; 
}

@media (min-width: 992px) {
  .custom-main-banner-form {
    padding-top: 10vh;
  }
}

.btn-custom-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #000;
  font-weight: bold;
}

.btn-custom-primary:hover {
  background-color: var(--primary-color-transparent);
  border-color: var(--primary-color);
  color: #fff;
}

.btn-custom-primary:focus,
.btn-custom-primary:active,
.btn-custom-primary:not(:disabled):not(.disabled).active,
.btn-custom-primary:not(:disabled):not(.disabled):active,
.show > .btn-custom-primary.dropdown-toggle {
  background-color: var(--primary-color-transparent);
  border-color: var(--primary-color-transparent);
  color: #fff;
}

.custom-bg-header {
  background-color: var(--primary-color) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: rgba(0, 0, 0, 1);
}

.custom-bg-dark {
  background-color: var(--secondary-color) !important;
}

.custom-bg-primary {
  background-color: var(--primary-color) !important;
}

.custom-list {
  list-style-position: inside;
  padding: 0 10% 0 50%;
}

.custom-list li {
  color: white;
  padding-bottom: 8px;
  font-size: 16px;
  list-style-type: disc;
}

.custom-list li::marker {
  color: var(--primary-color);
}

.custom-card-footer {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 4px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 0px 0px 10px 10px !important;
  cursor: pointer;
}

.custom-card {
  border-radius: 15px;
}

.custom-background-overlay video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.buscadorInput {
  border-radius: 34px;
  margin-top: -75px;
}

.img-espacio-comun {
  height: 500px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 28px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 40px;
  color: #fff;
}

.custom-filters-main {
  background-color: var(--secondary-color);
}

.banner-content {
  font-size: 3rem !important;
  position: absolute;
  bottom: 15%;
  left: 15%;
  z-index: 10;
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.swiper-slide {
  position: relative;
}

.img-banner {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  object-position: center;
  display: block;
}

.img-360 {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  object-position: center;
  display: block;
}

.custom-modal-bg {
  background-color: var(--secondary-color);
}

.bannet-title-2 {
  font-size: 2.5rem;
  font-weight: 300;
}

.custom-bg-form-banner {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 30px;
  border-radius: 25px;
}

.drone-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

.location-map-container {
  min-height: 100%;
  height: 100%;
}

.location-map-frame {
  width: 100%;
  height: 100%;
  min-height: 450px;
  border: 0;
  flex: 1 1 auto;
}

@media (min-width: 992px) {
  .location-map-container,
  .location-map-frame {
    height: 100%;
  }
}

@media (max-width: 991px) {
  .location-map-frame {
    min-height: 360px;
    height: 360px;
  }
}

@media (max-width: 991px) {
  .banner-title {
    font-size: 1.5rem;
    font-weight: 300;
    padding: 80 50;
  }

  .custom-list {
    list-style-position: inside;
    padding: 0 5% 0 5%;
  }

  .pt-100 {
    padding-top: 25px;
  }

  .bannet-title-2 {
    font-size: 1.5rem;
    font-weight: 300;
  }
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .img-360 {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .img-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .custom-list {
    list-style-position: inside;
    padding: 0 5% 0 5%;
  }

  .banner-content {
    font-size: 1.5rem !important;
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 10;
    color: white;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
  }

  .custom-main-banner {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .custom-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background: black;
  }

  .custom-background-overlay video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  .custom-background-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .custom-main-banner-text {
    padding-top: 10vh;
  }
}

/* Ajustes de marca bheed sobre la base de SITU.

   SITU pinta el header con el color primario y un logo oscuro. El naranjo de
   bheed se come su propio logo, asi que el header va en el gris secundario con
   el logo para fondo oscuro (imgLogoFooter). Sobre el naranjo se escribe en
   blanco, igual que en el asistente. */
.custom-bg-header {
  background-color: var(--secondary-color) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

/* assets/style.css pinta el link activo con el color secundario (!important),
   que es justo el fondo de este header: sin esto el modulo activo desaparece. */
.navbar-dark .navbar-nav .active > .nav-link {
  color: var(--primary-color) !important;
  font-weight: bold;
  box-shadow: inset 0 -2px 0 var(--primary-color);
}

.btn-custom-primary,
.custom-bg-primary {
  color: #fff;
}

/* assets/style.css lleva el hover/focus de .btn-primary y .btn-outline-primary
   al color secundario. En bheed ese gris es el mismo de las secciones oscuras,
   del cuadro del formulario y de los modales: el boton se funde con el fondo.
   Sobre esas superficies el hover queda en un naranjo mas oscuro. */
:root {
  --primary-color-hover: color-mix(in srgb, var(--primary-color) 82%, #000);
}

:is(.custom-bg-dark, .custom-modal-bg, .custom-bg-form-banner, .background-banner-small, #footer) :is(.btn-primary, .btn-outline-primary):is(:hover, :focus, :active, .active),
:is(.custom-bg-dark, .custom-modal-bg, .custom-bg-form-banner, .background-banner-small, #footer) :is(.btn-primary, .btn-outline-primary):not(:disabled):not(.disabled):active {
  background-color: var(--primary-color-hover) !important;
  border-color: var(--primary-color-hover) !important;
  color: #fff !important;
}