/* ==========================================================================
   Hotel Casa Siete Balcones — Hoja de estilos principal
   --------------------------------------------------------------------------
   Paleta: acento terracota #A6512E · texto #2E2620 · fondo #FBF7F0
   Estructura:
     1. Base del documento (migrado del <style> original en línea)
     2. Bilingüe ES / EN
     3. Logotipo de marca (navbar y footer)
     4. Botón "volver arriba" (scroll to top)
     5. Galería con lightbox (GLightbox) — tema de la casa
   ========================================================================== */

/* 1. Base -------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #2E2620;
  background: #FBF7F0;
}

a { color: #A6512E; }
a:hover { color: #8C4023; }

/* 2. Bilingüe ES / EN -------------------------------------------------------- */
html:not([data-lang="en"]) [lang="en"] { display: none !important; }
html[data-lang="en"] [lang="es"] { display: none !important; }

/* 3. Logotipo de marca ------------------------------------------------------- */
.brand-logo {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Barra de navegación en móvil / tablet (por debajo de lg = 992px):
   el nombre puede encogerse (con "…" si hiciera falta) para que la marca y los
   controles quepan siempre en una sola fila; así el botón de menú (hamburguesa)
   queda fijo a la derecha y el menú desplegable baja debajo. */
@media (max-width: 991.98px) {
  .navbar .brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 12px;
  }
  .navbar .brand-text {
    min-width: 0;
  }
  .navbar .brand-text > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Ajustes de tamaño en móvil para que el nombre entre sin recortarse
     (sobreescriben los estilos en línea del marcado). */
  .navbar .brand-logo { height: 42px; }
  .navbar .brand-text > span:first-child { font-size: 17px !important; }
  .navbar .order-lg-2 {
    flex-shrink: 0;
    margin-left: auto;
  }
}

@media (max-width: 359.98px) {
  /* En pantallas muy angostas se oculta el emblema para no apretar el nombre. */
  .brand-logo { display: none; }
}

/* El logotipo se diseñó sobre fondo claro; en el footer oscuro sus contornos y el
   texto "HOTEL" se perderían. Se coloca sobre una placa crema (como un letrero del
   hotel). Solo se añade el panel detrás: la imagen conserva su proporción intacta
   (height fija, width:auto). */
.footer-logo {
  box-sizing: content-box;   /* la altura fija se aplica a la imagen, no al panel */
  height: 118px;
  width: auto;
  display: block;
  align-self: flex-start;
  background: #F3EBDE;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  margin-bottom: 18px;
}

/* 4. Botón "volver arriba" (scroll to top) ----------------------------------- */
.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1030;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--accent, #A6512E);
  color: #FBF7F0;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(26, 18, 12, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, visibility 0.25s;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: #8C4023;
  color: #FBF7F0;
}

.scroll-top:focus-visible {
  outline: 3px solid rgba(166, 81, 46, 0.45);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .scroll-top { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 19px; }
}

/* 5. Galería con lightbox — tema de la casa ---------------------------------- */
/* La miniatura invita al clic con un ligero acercamiento y cursor de zoom. */
#galeria a.glightbox {
  cursor: zoom-in;
}

#galeria a.glightbox img {
  transition: transform 0.35s ease, opacity 0.2s ease;
}

#galeria a.glightbox:hover img {
  transform: scale(1.04);
}

/* GLightbox: fondo y tipografía acordes a la casa colonial. */
.glightbox-clean .goverlay {
  background: rgba(26, 18, 12, 0.94);
}

.glightbox-clean .gslide-title {
  font-family: 'Marcellus', serif;
  color: #FBF7F0;
  font-size: 1.05em;
}

.glightbox-clean .gslide-desc {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: #D8CBB6;
}

.glightbox-clean .gslide-description {
  background: transparent;
}

/* Controles (flechas / cerrar) con el acento terracota. */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(166, 81, 46, 0.88);
  border-radius: 6px;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background-color: #8C4023;
}

/* 6. Carrusel destacado (Reencuentro) — alto uniforme ------------------------ */
/* Las dos fotos tienen proporciones distintas. En escritorio la imagen llena la
   columna (mismo alto que el texto, gracias a height:100%), así que ambas
   diapositivas miden igual. En móvil / tablet la columna no tiene alto definido y
   height:100% colapsaría, dejando que cada foto tome su alto natural y que el
   carrusel "salte" al pasar de una a otra: por eso se les fija un alto uniforme.
   object-fit: cover mantiene el encuadre sin deformar la imagen. */
@media (max-width: 991.98px) {
  #car-reencuentro .carousel-item img {
    height: 380px !important;
    min-height: 0 !important;
    object-fit: cover;
  }
}

@media (max-width: 575.98px) {
  #car-reencuentro .carousel-item img {
    height: 300px !important;
  }
}