/* ========================================
   FACHADA INTERACTIVA
======================================== */

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;

  background: #162D24;

  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;
}


/* ========================================
   CONTENEDOR
======================================== */

.fachada-container {
  width: 100%;

  box-sizing: border-box;

  padding-top: clamp(115px, 7vw, 150px);
  padding-bottom: clamp(35px, 4vw, 70px);

  background: #162D24;

  overflow: hidden;
}


/* ========================================
   ESCENA 1920 x 600
======================================== */

.fachada-stage {
  position: relative;

  width: 100%;

  aspect-ratio: 1920 / 600;

  overflow: hidden;
}


/* ========================================
   IMAGEN BASE
======================================== */

.fachada-img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: fill;

  pointer-events: none;

  user-select: none;
}


/* ========================================
   INDICADORES
======================================== */

.fachada-indicadores {
  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: fill;

  pointer-events: none;

  user-select: none;
}


/* ========================================
   TORRES INTERACTIVAS
======================================== */

.torres-overlay {
  position: absolute;

  inset: 0;

  z-index: 3;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.torres-overlay svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


/*
  Solo los polígonos son interactivos.
*/

.torres-overlay .torre {
  fill: transparent;
  stroke: none;
  pointer-events: auto;
  cursor: pointer;

  transition: fill 0.3s ease;
}

/* ========================================
   HOVER TORRE
======================================== */

@media (hover: hover) and (pointer: fine) {
  .torres-overlay .torre:hover {
    fill: rgba(61, 170, 53, 0.28);
    stroke: none;
  }
}


/* ========================================
   TORRE ACTIVA MOBILE
======================================== */

.torres-overlay .torre.active {
  fill: rgba(61, 170, 53, 0.28);
  stroke: none;
}


/* ========================================
   SIN DISPONIBILIDAD
======================================== */

.torres-overlay .torre.sin-disponibles:hover,
.torres-overlay .torre.sin-disponibles.active {
  fill: rgba(245, 232, 209, 0.12);
  stroke: none;
}


/* ========================================
   TEXTO INFERIOR
======================================== */

.fachada-instruccion {
  width: 100%;

  box-sizing: border-box;

  padding:
    0
    clamp(45px, 4vw, 80px)
    0;

  color: #F5E8D1;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(32px, 3vw, 58px);

  font-weight: 300;

  line-height: 1;

  letter-spacing: 0.01em;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .fachada-container {
    padding-top: 95px;
    padding-bottom: 35px;
  }


  /*
    Conservamos la proporción completa.
    Luego revisamos si en celular conviene
    permitir desplazamiento horizontal.
  */

  .fachada-stage {
    width: 100%;

    aspect-ratio: 1920 / 600;
  }


  .fachada-instruccion {
    padding:
      25px
      20px
      0;

    font-size:
      clamp(28px, 9vw, 42px);
  }

}


/* ========================================
   TOOLTIP TORRE
======================================== */

.tooltip-piso {
  position: fixed;

  width: clamp(310px, 27vw, 430px);

  box-sizing: border-box;

  padding:
    clamp(30px, 2.6vw, 48px)
    clamp(30px, 2.7vw, 50px);

  background: #F2E6D6;

  color: #162D24;

  font-family: 'Montserrat', sans-serif;

  z-index: 99999;

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.10);

  transition:
    opacity 0.25s ease;

  pointer-events: none;
}


/* ========================================
   CONTENIDO
======================================== */

.tooltip-torre-inner {
  display: grid;

  grid-template-columns:
    minmax(85px, 0.8fr)
    1px
    minmax(150px, 1.5fr);

  align-items: center;

  gap: clamp(25px, 2vw, 38px);
}


/* ========================================
   TORRE
======================================== */

.tooltip-torre-numero {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}


.tooltip-torre-label {
  color: #162D24;

  font-size: clamp(16px, 1.4vw, 22px);

  font-weight: 400;

  line-height: 1;
}


.tooltip-torre-value {
  margin-top: 10px;

  color: #162D24;

  font-size: clamp(52px, 5vw, 76px);

  font-weight: 300;

  line-height: 0.9;
}


/* ========================================
   DIVISOR
======================================== */

.tooltip-torre-divider {
  width: 1px;
  height: 100%;

  min-height: 80px;

  background: rgba(22, 45, 36, 0.65);
}


/* ========================================
   DISPONIBILIDAD
======================================== */

.tooltip-torre-disponibilidad {
  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: clamp(14px, 1.2vw, 20px);
}


.tooltip-tipo {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.tooltip-tipo strong {
  color: #162D24;

  font-size: clamp(11px, 0.9vw, 14px);

  font-weight: 700;

  line-height: 1.1;
}


.tooltip-tipo span {
  margin-top: 4px;

  color: #162D24;

  font-size: clamp(11px, 0.85vw, 14px);

  font-weight: 400;

  line-height: 1;
}


@media (min-width: 769px) {

  .tooltip-piso .button-piso-cel {
    display: none;
  }

}