/**
 * Home (front page) - estilos específicos
 * Origen: estilos adaptados del diseño de referencia (global_classes, home_phantom_companion, homepage_simple_form).
 */

/* Global classes (referencia) */
.zero-height {
  height: 0 !important;
}

/* Home Phantom / Hero */
#chava,
.home-hl .not-header-overlay,
.home-hl .header-overlay {
  margin-right: -5%;
  margin-top: -15px;
  position: relative;
}

/*
 * Capas en home: header sitio (1030) < .home-hl (1031) / fila #chava (1) < .header-locations (2) < #room-list (3).
 * Menú abierto: #header (1050) y #chava oculta (JS + .chava-hidden).
 */
body.ee-is-front-page #header.header {
  z-index: 1030;
}

body.ee-is-front-page #header.header:has(.dropdown-menu.show) {
  z-index: 1050;
}

/* Sticky header elevado al hacer scroll; arriba del fold vuelve a 1030 (regla anterior). */
body.ee-is-front-page.scrolled #header.header {
  z-index: 10000;
}

body.ee-is-front-page #chava,
body.ee-is-front-page #chava.chava-index-1 {
  z-index: 1 !important;
}

body.ee-is-front-page #chava.chava-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/*
 * Hero .home-hl: altura máxima. overflow:visible arriba para que #chava pueda
 * superponerse al header del sitio; #room-list (z-index 3) queda sobre la franja inferior.
 */
body.ee-is-front-page .home-hl {
  position: relative;
  z-index: 1031;
  max-height: 486px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  box-sizing: border-box;
}

body.ee-is-front-page .home-hl>.container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
}

body.ee-is-front-page .home-hl>.container>.row:first-of-type {
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}

body.ee-is-front-page .home-hl .header-locations {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 110px;
  padding: 20px 0 40px;
  background: rgba(0, 0, 0, 0.5);
}

/* Por encima de #chava dentro del hero; sin competir con #room-list fuera del bloque */
body.ee-is-front-page .home-hl .header-locations.back-1 {
  z-index: 2 !important;
}

@media (min-width: 768px) {
  body.ee-is-front-page .home-hl .header-locations {
    clip-path: polygon(0 140px,
        40px 0,
        calc(100% - 40px) 0,
        100% 140px,
        100% 100%,
        0 100%);
  }
}

body.ee-is-front-page #room-list.room-list {
  position: relative;
  z-index: 9999 !important;
  margin-top: -17px;
}

.back-1 {
  z-index: 1032 !important;
}

.back-0 {
  z-index: 1 !important;
}

.front-1 {
  z-index: 1036 !important;
}

.front-0 {
  z-index: 2 !important;
}

.chava-index-1 {
  z-index: 1031 !important;
}

.chava-index-0 {
  z-index: 0 !important;
}

.menu-index-1 {
  z-index: 1050 !important;
}

.menu-index-0 {
  z-index: 1050 !important;
}

.fade-in {
  opacity: 1 !important;
  animation-name: fade-in-anim;
  animation-duration: .2s;
}

.fade-out {
  opacity: 0 !important;
  animation-name: fade-out-anim;
  animation-duration: .2s;
}

.move-in {
  margin-right: -5% !important;
  margin-top: -15px !important;
  margin-left: 0% !important;
  margin-bottom: 0px !important;
  animation-name: move-in-anim;
  animation-duration: .2s;
}

.move-out {
  margin-right: 5% !important;
  margin-top: 15px !important;
  margin-left: -10% !important;
  margin-bottom: -30px !important;
  animation-name: move-out-anim;
  animation-duration: .2s;
}

@keyframes move-out-anim {
  0% {
    margin-right: -5%;
    margin-top: -15px;
    margin-left: 0%;
    margin-bottom: 0px;
  }

  100% {
    margin-right: 5% !important;
    margin-top: 15px !important;
    margin-left: -10% !important;
    margin-bottom: -30px !important;
  }
}

@keyframes move-in-anim {
  0% {
    margin-right: 0%;
    margin-top: 0;
    margin-left: -5%;
    margin-bottom: -15px;
  }

  100% {
    margin-right: -5% !important;
    margin-top: -15px !important;
    margin-left: 0% !important;
    margin-bottom: 0 !important;
  }
}

@keyframes fade-out-anim {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0 !important;
  }
}

@keyframes fade-in-anim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1 !important;
  }
}

/* Home alert */
#home-alert {
  margin: 0 auto;
}

@media (min-width: 992px) {
  #home-alert {
    margin: -150px auto 150px auto;
  }
}

/* Form (homepage_simple_form) */
.form-background {
  background-color: #000;
}

.overlap-form label {
  display: none !important;
}

.overlap-form button {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

fieldset {
  padding-left: 15px;
  padding-right: 15px;
}

/* Check list */
.check-list li {
  margin-bottom: 1rem;
}

/* Hero sin imagen de fondo (fallback) */
.home-hl-fallback {
  background-color: #1a1a1a;
  min-height: 400px;
}

/* Team Building: fondos cuando no existen en assets/media */
.front-page-bg-purple-fallback {
  background-color: #4a2c6e;
  min-height: 320px;
}

.front-page-teambuilding-img-fallback {
  min-height: 280px;
  background-color: #2d2d2d;
}

/* Scroll Banner: mapa rojo + texto */
.front-page-bg-grimred-fallback {
  background-color: #6b1e2a;
  min-height: 320px;
}

.front-page-main .red-map-section {
  margin: 6rem 0 -1.2rem;
}

@media (min-width: 1200px) {
  .red-map-section {
    max-height: 387px;
  }
}

.front-page-bg-scroll-fallback {
  background-color: #1a1a1a;
  min-height: 280px;
}

@media (min-width: 768px) {
  .red-map-section .banner-scroll {
    background-position: center center !important;
    margin-top: -3rem;
  }
}

@media (min-width: 992px) {
  .red-map-section .banner-scroll {
    margin: -5rem;
    margin-bottom: -1rem;
  }
}

/*
 * Badges de origen (Facebook / Google) en reseñas.
 * style.min.css usa .reviews-home .source-* con un GIF 1×1 (mayor especificidad que .source-* solo).
 */
.source-fb,
.source-g,
.reviews-home .source-fb,
.reviews-home .source-g {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

.source-fb,
.reviews-home .source-fb {
  background-image: url('../../media/icon-f.png');
}

.source-g,
.reviews-home .source-g {
  background-image: url('../../media/icon-g.png');
}

/* Cualquier regla que use bg-grim-small.jpg (p. ej. .banner-scroll u otro) */
[style*="bg-grim-small"],
[class*="bg-grim-small"] {
  background-image: none;
}

#content>section>div.text-center.alert.rounded-0.border-0>p {
  width: 55%;
  margin: auto;
}

#content>section>div.parallax.paragraph.paragraph--type--background-image.paragraph--view-mode--default>div>div.col-12 {
  text-align: center;
}

#content>section>div.parallax.paragraph.paragraph--type--background-image.paragraph--view-mode--default>div>div.col-12 p {
  width: 80%;
  margin: 0 auto 1rem;
}