/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root {
  --color_especial_placa: #6253d4;
  --main_color: #6253d4;

  /* --step_time: 0.9s; */
  /* --base_time: 2s; */
  --step_time: 0.4s;
  --base_time: 1s;

  --triangulo: 0.8rem;
  --trianguloChico: 0.4rem;

  --mascaraTop: 0;
}

/* /// PLACAS */
/* #region */
.placaContainer {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 0;
  /* border: 2px solid red; */
  /* max-width: var(--max-width); */
  margin: 0;
  padding: 0;
  pointer-events: none;
  /* opacity: 0; */
}
.placaContainer.selected {
  /* color: red; */
  /* transition: 1s; */
}

#placa1,
#placa2 {
  pointer-events: all !important;
}
.contenidoPlaca {
  position: absolute;
  left: 0%;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-transform: uppercase;
  /* font-family: Helvetica, sans-serif; */
  font-family: main_font;
  font-size: 26px;
}

.imagenContenidoPlaca {
  /* border: 10px solid red; */
  -o-object-fit: contain;
  object-fit: contain;
  height: 100vh;
  margin: 0 auto;
}

/* #endregion */

/* /// PLACA 1 HOME */
/* #region */
#placa1 > .contenidoPlaca {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* filter: blur(4px);

  -webkit-filter: blur(4px); */
  vertical-align: center;
}
#placa1.selected > .contenidoPlaca {
  opacity: 1;
  /* filter: blur(0px);
  -webkit-filter: blur(0px); */
  -webkit-transition: opacity 0.25s 1s, -webkit-filter 2s 1s;
  transition: opacity 0.25s 1s, -webkit-filter 2s 1s;
  -o-transition: opacity 0.25s 1s, filter 2s 1s;
  transition: opacity 0.25s 1s, filter 2s 1s;
  transition: opacity 0.25s 1s, filter 2s 1s, -webkit-filter 2s 1s;
}

#placa1 > .contenidoPlaca > span {
  color: #000;
}

#placa1 > .contenidoPlaca > span:nth-child(1),
#placa1 > .contenidoPlaca > div:nth-child(1) {
  color: var(--main_color);
  font-weight: bold;
  font-size: 12rem;
  /* line-height: 2em; */
  /* border: 1px solid greenyellow; */
  /* vertical-align: middle !important; */
  /* display: flex; */
  /* justify-content: flex-end; */
  /* align-items: flex-end; */
  /* padding-top: 1rem; */
}
#placa1 > .contenidoPlaca > span:nth-child(2) {
  /* font-weight: bold; */
  font-size: 4rem;
}
#placa1 > .contenidoPlaca > span:nth-child(3) {
  font-weight: bold;
  font-size: 6.5rem;
  border: 1px solid black;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* padding: 5px 15px;
  margin-top: 10px; */
  /* padding: 0.05em 0.1em; */
  padding: 0.15rem 1rem;
  margin-top: 0.66rem;
  /* height: fit-content; */
  box-sizing: border-box;

  cursor: help;
  position: relative;
  /* color: green; */
  /* display: -webkit-inline-box; */
  /* -webkit-box-pack: center; */
  /* -webkit-box-align: center; */
  /* vertical-align: text-bottom !important; */
  /* line-height: 2em;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; */
}
#placa1 > .contenidoPlaca > span:nth-child(3)::after {
  content: " ";
  position: absolute;
  bottom: calc(var(--triangulo) * -0.5);
  right: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

  width: 0;
  height: 0;
  border-top: var(--triangulo) solid transparent;
  border-bottom: var(--triangulo) solid transparent;
  border-left: var(--triangulo) solid var(--main_color);
}

#flotanteDisenoParametrico {
  position: absolute;
  top: 50%;
  left: 50%;
  /* width: 100px; */
  /* height: 50px; */
  background-color: #000000dd;
  opacity: 0;
  pointer-events: none;
  padding: 1.5em 2em;
}
#flotanteDisenoParametrico.mostrar {
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
  opacity: 1;
}
#flotanteDisenoParametrico > div {
  color: white;
  font-family: "Saira", sans-serif;

  font-size: 1.5rem;
}
#divImgDisenoParametrico {
  /* background-color: red; */
  /* border: 1px solid red; */
  /* height: 9rem; */
  width: 100%;
  margin: 10px 0 0 0;
}
#divImgDisenoParametrico > img {
  /* border: 1px solid red; */
  /* height: 8rem; */
  width: 25rem;
  padding: 0 0rem 0 0;
}
#divEntradaProcesoSalida {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Saira", sans-serif;
  /* border: 1px solid greenyellow; */
  font-size: 1rem;
  /* padding-right: 1rem; */
}
/* #endregion */

/* /// PLACA 2 PROSUMERS */
/* #region */
#placa2 {
  mix-blend-mode: overlay;
}
#placa2 > .contenidoPlaca {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#placa2 > .contenidoPlaca > div {
  font-family: "Saira", sans-serif;
  text-transform: none;
  font-size: 1.5rem;
}
#placa2 > .contenidoPlaca > div {
  /* color: red; */
  line-height: 130%;
}
/* #placa2 > .contenidoPlaca > div:nth-child(1) {
  font-family: main_font;
  font-weight: bold;
  font-size: 6rem;
} */
#tituloPlaca2 {
  font-family: main_font !important;
  font-weight: bold !important;
  font-size: 6rem !important;
  display: flex;
  color: black !important;
  line-height: normal !important;
  flex-wrap: wrap;
}

/* #placa2 > .contenidoPlaca > div > span { */
#btnProsumers {
  border: 1px solid red;
  border: 1px solid black;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* padding: 5px 15px;
  margin-top: 10px; */
  padding: 0em 0.07em;
  /* margin-top: 0.66rem; */

  position: relative;
  cursor: help;
}
/* #placa2 > .contenidoPlaca > div > span::after { */
#btnProsumers::after {
  content: " ";
  position: absolute;
  bottom: calc(var(--triangulo) * -0.5);
  right: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

  width: 0;
  height: 0;
  border-top: var(--triangulo) solid transparent;
  border-bottom: var(--triangulo) solid transparent;
  border-left: var(--triangulo) solid var(--main_color);
}

#flotanteProsumers {
  position: absolute;
  top: 50%;
  left: 50%;
  /* width: 100px; */
  /* height: 50px; */
  background-color: #000000cc;
  opacity: 0;
  pointer-events: none;
  padding: 0.5em 1em;
  /* color: white; */
  /* font-size: 0.5rem !important; */
  color: white;
  font-family: "Saira", sans-serif;
  font-size: 1.5rem;
  /* display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: fit-content; */
}

#flotanteProsumers.mostrar {
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
  opacity: 1;
}

/* #endregion */

/* /// PLACA 3 SHOW 4U */
/* #region */
#placa3 {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}
#placa3 > .contenidoPlaca {
  font-family: "Saira", sans-serif;
  color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 1.5rem;
  /* border: 1px solid red; */
  /* margin: auto; */
  left: unset;
  text-transform: none;
  font-weight: normal;
}
#placa3 > .contenidoPlaca > div:nth-child(1) {
  font-size: 22rem;
  font-family: main_font;
  font-weight: bold;
}

/* #endregion */

/* /// PLACA 4 SECTORES */
/* #region */
#placa4 > .contenidoPlaca {
  color: white;
  font-size: 2rem;
  /* font-weight: bold; */
  font-family: main_font;
  /* border: 1px solid red; */
  top: 25%;
}
.imgPlacaSectores {
  opacity: 0 !important;
  position: absolute;
  left: 50% !important;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  height: 100vh !important;
  pointer-events: none;
  /* display: none; */
}
.imgPlacaSectores.show {
  -webkit-transition: 1s !important;
  -o-transition: 1s !important;
  transition: 1s !important;
  opacity: 1 !important;
  /* border: 1px solid red; */
}

/* /// botones sectores */
#divContainerBotones {
  /* border: 1px solid greenyellow; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btnSector {
  position: absolute;
  /* left: 50%; */
  /* transform: translate(-50%, 0); */
  cursor: pointer !important;
  /* z-index: 100; */
  pointer-events: all;
  text-align: center;

  height: 4.5vh;
  color: transparent;
  /* color: white; */
  /* border: 1px solid red; */
}
.btnSector:hover {
  background-color: var(--main_color);
  mix-blend-mode: darken;
  opacity: 0.75;
}
#btnSectorTerraza {
  top: 15.9%;
  left: calc(50% - 37.6vh);
  width: 12vh;
}
#btnSectorPileta {
  top: 13.5%;
  left: calc(50% + 19.5vh);
  width: 18.5vh;
}
#btnSectorGym {
  top: 36%;
  left: calc(50% + 18.5vh);
  width: 8.7vh;
}
#btnSectorSpa {
  top: 51.5%;
  left: calc(50% - 32.8vh);
  width: 7.5vh;
}
#btnSectorHall {
  top: 81.3%;
  left: calc(50% - 36.3vh);
  width: 8vh;
}
#btnSectorJardin {
  top: 74.3%;
  left: calc(50% + 25.5vh);
  width: 12vh;
}

/* #endregion */

/* /// PLACA 4 SECTORES - MODAL */
/* #region */
#modalSectores {
  position: absolute;
  background-color: #111111dd;
  /* border: 1px solid red; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
#modalSectores.mostrar {
  pointer-events: all;
  opacity: 1;
}
#containerSectores {
  position: absolute;
  top: calc(50% + 2em);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* border: 1px solid red; */
  color: white;
  font-family: "Saira", sans-serif;

  font-size: 1rem;
}
/* #containerSectores > img */
.imgSectores {
  height: min(44rem, 60vh);
  display: none;
}
.imgSectores.mostrar {
  display: block;
}
.textoSectores {
  display: none;
}
.textoSectores.mostrar {
  display: block;
}

#closeModalSectores {
  /* border: 1px solid greenyellow; */
  position: absolute;
  right: 0;
  top: -2em;
  cursor: pointer;
}

/* #endregion */

/* /// PLACA 5 UNIDADES */
/* #region */
#placa5 > .contenidoPlaca {
  color: white;
  font-size: 2rem;
  /* font-weight: bold; */
  font-family: main_font;
  /* border: 1px solid red; */
  top: 25%;
}
.planitoUnidad {
  position: absolute;
  bottom: 2rem;
  left: 0;
  /* border: 1px solid greenyellow; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: white;
  font-size: 1rem;
  display: flex;
  opacity: 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.planitoUnidad.mostrar {
  /* display: flex; */
  opacity: 1;
}
.planitoUnidad > .titulo {
  font-family: main_font;
  font-size: 1.5rem;
}
.planitoUnidad > .texto {
  font-family: "Saira", sans-serif;
  font-size: 1rem;
  margin: 1rem 0;
}
/* .planitoUnidad > .imagen {
} */
.planitoUnidad > img {
  height: 12rem;
  /* border: 1px solid red; */
  -o-object-fit: contain;
  object-fit: contain;
}

#placaDetallesUnidades {
  /* border: 1px solid red; */
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* background-color: var(--color-cortina5); */
  background-color: #000000dd;

  z-index: 10;
  opacity: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  pointer-events: none;
}
.cerrarDetallesUnidad {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5rem;
  cursor: pointer;
}
/* #placaDetallesUnidades::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  border: 1px solid red;
} */
#placaDetallesUnidades.show {
  pointer-events: all;

  opacity: 1;
}
/* #placaImgUnidades > img {
  object-fit: cover;
  height: 80%;

} */
.detallesUnidad {
  display: none;
  color: white;
  position: absolute;
  /* border: 1px solid red; */
}
.detallesUnidad.show {
  display: block;
}
.detallesUnidad > .titulo {
  font-family: main_font;
  font-size: 2.5rem;
  font-weight: bold;
}
.detallesUnidad > .separador {
  border-top: 1px solid white;
  width: 61rem;
  margin: 1rem 0;
}
.detallesUnidad > .texto {
  font-size: 1rem;
  font-family: "Saira", sans-serif;
}
.detallesUnidad > .containerImagenes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.detallesUnidad > .imgUnidad3 {
  display: none;
}
.containerImagenes > .imgUnidad2 {
  /* width: 14rem; */
  -o-object-fit: cover;
  object-fit: cover;
  height: 14rem;
}
.containerImagenes > .imgUnidad {
  /* width: 26.5rem; */
  -o-object-fit: cover;
  object-fit: cover;
  height: 26.5rem;
}
/* #endregion */

/* /// PLACA 6 CUSTOM 4U */
/* #region */
#placa6 {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}
#placa6 > .contenidoPlaca {
  font-family: "Saira", sans-serif;
  /* font-family: monospace; */
  /* font-family: "Saira", monospace; */

  color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 1.5rem;
  /* border: 1px solid red; */
  /* margin: auto; */
  left: unset;
  text-transform: none;
  font-weight: normal;
}
#placa6 > .contenidoPlaca > div:nth-child(1) {
  font-size: 18.5rem;
  font-family: main_font;
  font-weight: bold;
}
#placa6 > .contenidoPlaca > div:nth-child(2) {
  /* color: red; */
  line-height: 120%;
  padding: 0 0.25rem;
}

/* #endregion */

/* /// PLACA 7 UNIDAD */
/* #region */
#placa7 {
  pointer-events: all !important;
}
#placa7 > .contenidoPlaca {
  color: white;
  font-size: 2rem;
  /* font-weight: bold; */
  font-family: main_font;
  /* border: 1px solid red; */
  top: 25%;
}

#planitoUnidad_unidad {
  position: absolute;
  bottom: 2rem;
  left: 0;
  /* border: 1px solid red; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: white;
  font-size: 1rem;
  display: flex;
  opacity: 1;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
#planitoUnidad_unidad.mostrar {
  /* display: flex; */
  opacity: 1;
}
#planitoUnidad_unidad > .titulo {
  font-family: main_font;
  font-size: 1.5rem;
}
#planitoUnidad_unidad > .texto {
  font-family: "Saira", sans-serif;
  font-size: 1rem;
  margin: 1rem 0;
}
/* #planitoUnidad_unidad > .imagen {
  height: 12rem;
  width: 13rem;
  border: 1px solid red;
} */
#planitoUnidad_unidad > img {
  height: 12rem;
  /* border: 1px solid red; */
  -o-object-fit: contain;
  object-fit: contain;
}

/* #imgDatosUnidad {
  border: 1px solid red;
  width: calc(var(--ancho_panel_unidad) * 1.5);
  padding: 0;
  position: absolute;
  left: -3px;
  bottom: 0;
  opacity: 0;
}
#placa7.selected > #imgDatosUnidad {
  transition: 0.6s 3s;
  opacity: 1;
}
#imgDatosUnidad > img {
  width: 100%;
  padding: 0;
} */

/* #endregion */

/* /// PLACA 8 ADMIN4U */
/* #region */
#placa8 {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}
#placa8 > .contenidoPlaca {
  font-family: "Saira", sans-serif;
  /* font-family: monospace; */
  /* font-family: "Saira", monospace; */

  color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 1.5rem;
  /* border: 1px solid red; */
  /* margin: auto; */
  left: unset;
  text-transform: none;
  font-weight: normal;
}
#placa8 > .contenidoPlaca > div:nth-child(1) {
  font-size: 21rem;
  font-family: main_font;
  font-weight: bold;
}
#placa8 > .contenidoPlaca > div:nth-child(2) {
  /* color: red; */
  line-height: 120%;
  padding: 0 0.25rem;
}
/* #endregion */

/* /// PLACA 9 ADMINISTRACION */
/* #region */
/* #placa9,
#placa10 {
  pointer-events: all !important;
} */
#placa9 > .contenidoPlaca {
  /* font-weight: bold; */
  /* border: 1px solid red; */
  text-transform: none;
  top: 0;
  /* padding-top: 20%; */
  color: white;

  -webkit-transform: translate(0, 0);

  -ms-transform: translate(0, 0);

  transform: translate(0, 0);
  pointer-events: all !important;
  height: 200vh;
  width: 100%;
}

#placa9 > .contenidoPlaca > #columna1 {
  padding-top: 20%;

  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: "Saira", sans-serif;
  /* width: 15em; */
  -ms-flex-preferred-size: 18em;
  flex-basis: 18em;
  /* border: 1px solid orange; */
  text-shadow: 2px 2px 6px #222, -2px -2px 6px #222;
}
#placa9 > .contenidoPlaca > #columna1 > div:nth-child(1) {
  font-size: 2rem;
  font-family: main_font;
}

/* #placa9 > .contenidoPlaca >  */
#columna2 {
  /* width: 500px; */
  font-size: 1rem;

  height: 100vh;
  /* aspect-ratio: 16 / 9 ; */
  /* width: 150vh; */
  width: calc(100% + 0em);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* border: 2px solid red; */
  /* background-color: #ff000077; */
  position: sticky;
  top: 0;
  padding-top: 20%;

  z-index: 100;
  /* margin-left: -7.5em; */

  /* box-sizing: border-box;
  resize: horizontal;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px); */
}
#columna2 > #mascara {
  /* border: 2px solid greenyellow; */
  background-color: #19191b;
  width: 95vh;
  height: 61.5vh;
  /* top: 10vh; */
  position: absolute;

  top: 30vh;
  left: 50%;
  /* font-size: 1rem; */
  /* display: flex;
  align-items: center;
  justify-content: center; */
  overflow: hidden;
  /* -webkit-transition: opacity 0.1s;
  -o-transition: opacity 0.1s;
  transition: opacity 0.1s; */
  /* left: calc(50% + (15em * 0)); */
  opacity: 0;
  /* display: none; */

  /* -webkit-transform: translate(-50%, 0) scale(0);
  -ms-transform: translate(-50%, 0) scale(0);
  transform: translate(-50%, 0) scale(0); */

  -webkit-transform: translate(0%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
#columna2 > #mascara.mostrar {
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
  /* -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1); */

  opacity: 1;
}
#contenidoMascara {
  /* border: 2px solid violet; */
  /* background-color: #6253d455; */
  width: 100%;
  height: 200%;
  position: absolute;
  /* top: -100%; */
  top: var(--mascaraTop);

  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

#contenidoMascara > .pagina {
  /* font-size: 20rem;
  font-weight: bold; */
  /* border: 1px solid white; */
  width: 100%;
  height: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.contenidoPagina {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* border: 1px solid red; */
}
.pagina:nth-child(2) > .contenidoPagina {
  top: 50%;
}
.contenidoPagina > img {
  width: 100%;
  /* position: absolute; */
  /* top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
}

#aniTorre {
  /* border: 1px solid red; */
  position: absolute;
  right: 0;
  height: 64%;
  width: auto;
  top: 26%;
}

/* #endregion */

/* /// PLACA 10 BIG DATA */
/* #region */
#placa10 > .contenidoPlaca {
  color: white;
  font-size: 1rem;
  /* font-weight: bold; */
  /* border: 1px solid red; */
  /* top: 20%; */
  top: 0;
  padding-top: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: "Saira", sans-serif;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  text-transform: none;
}

#placa10 > .contenidoPlaca > div:nth-child(1) {
  font-size: 2rem;
  font-family: main_font;
}
/* #endregion */

/* /// PLACA 11 HABITARLOS */
/* #region */
#placa11 {
  pointer-events: all !important;
}
#placa11 > .contenidoPlaca {
  color: white;
  height: 100vh;
  /* border: 3px solid greenyellow; */
  width: 100%;
}
.textoAnimado {
  color: black;
  /* font-size: 3.5rem; */
}
.textoHabitarlos1.textoAnimado {
  /* border: 1px solid red; */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 3rem;
  width: 100%;
  text-align: center;
}

.textoHabitarlos2.textoAnimado {
  /* border: 1px solid red; */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 30%);
  -ms-transform: translate(-50%, 30%);
  transform: translate(-50%, 30%);
  opacity: 0;

  /* top: 15%; */
  font-size: 4.15rem;
  /* display: none; */
}

#placa11.selected > .contenidoPlaca > .textoHabitarlos1 {
  -webkit-transition: 1s 1.5s;
  -o-transition: 1s 1.5s;
  transition: 1s 1.5s;
  top: 15%;
  /* left: 0; */
  font-size: 2rem; 

  /* transform: translate(0%, -50%); */
}
#placa11.selected > .contenidoPlaca > .textoHabitarlos1.en {
  /* border: 1px solid red; */
  font-size: 2.2rem;
}
#placa11.selected > .contenidoPlaca > .textoHabitarlos2.idiomaSelected {
  -webkit-transition: opacity 1s 2s, top 2s 3s, font-size 2s 3s;
  -o-transition: opacity 1s 2s, top 2s 3s, font-size 2s 3s;
  transition: opacity 1s 2s, top 2s 3s, font-size 2s 3s;
  /* left 1s 7s, transform 1s 7s; */
  /* transition: opacity 4s 4.5s; */
  opacity: 1;
  top: 15%;
  /* font-size: 4rem;  */

  /* left: 0; */
  /* transform: translate(0%, 50%); */

  /* font-size: 4.15rem; */
}

/* /// canvas 2d */
#canvas2dContainer {
  /* border: 1px solid orangered; */
  position: absolute;
  width: 100%;
  height: 55% !important;
  top: 0;
  left: 0;
  top: 55%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  /* display: none; */
  opacity: 0;
  background-color: transparent;
  /* mix-blend-mode: multiply !important; */
}
#placa11.selected > .contenidoPlaca > #canvas2dContainer {
  -webkit-transition: opacity 2s 4s;
  -o-transition: opacity 2s 4s;
  transition: opacity 2s 4s;
  opacity: 1;
}
#defaultCanvas0 {
  height: 100%;
  width: 100%;
  /* border: 2px solid violet; */
  position: absolute;
  left: 0;
  top: 0;
  /* background-color: green; */
  /* mix-blend-mode: multiply !important; */
}

#vennContainer {
  position: absolute;
  top: 57%;
  left: 50%;
  width: 90%;

  height: 50%;
  /* border: 1px solid red; */
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
#placa11.selected > .contenidoPlaca > #vennContainer {
  -webkit-transition: opacity 2s 4s;
  -o-transition: opacity 2s 4s;
  transition: opacity 2s 4s;
  opacity: 1;
}
#vennContainer > img {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* /// logo */
#logoEnHabitarlos {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* height: 0.2vh; */
  width: 12vh;
  opacity: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
#logoEnHabitarlos.show {
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;

  opacity: 1;
}

/* /// work in progress */
#btnWIP {
  color: var(--main_color);
  font-size: 2rem;
  cursor: pointer;
  position: absolute;
  bottom: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: bold;
  padding: 0.05em 0.8em;

  border: 1px solid transparent;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  opacity: 0;
  pointer-events: none;
}
#placa11.selected > .contenidoPlaca > #btnWIP {
  opacity: 1;
  -webkit-transition: 0.2s, opacity 2s 5s;
  -o-transition: 0.2s, opacity 2s 5s;
  transition: 0.2s, opacity 2s 5s;
  pointer-events: all;
}

#btnWIP:hover {
  /* color: black; */
  font-weight: bold;
  /* font-size: 1.6rem; */
  border: 1px solid black;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  position: absolute;
  bottom: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#btnWIP:hover:after {
  content: " ";
  position: absolute;
  bottom: calc(var(--trianguloChico) * -0.5);
  right: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 0;
  border-top: var(--trianguloChico) solid transparent;
  border-bottom: var(--trianguloChico) solid transparent;
  border-left: var(--trianguloChico) solid var(--main_color);
}

/* /// modalWIP */
#modalWIP {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #000000ee;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  z-index: 10;
  /* cursor: pointer; */
}
#modalWIP.mostrar {
  opacity: 1;
  pointer-events: all;
}

#modalWIPContainer {
  position: fixed;
  z-index: 10;
  top: 10%;
  left: 50%;
  width: var(--max-width);
  height: 80%;
  /* border: 1px solid red; */
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
#divCerrarModalWIP {
  color: white;
  font-size: 2rem;
  position: absolute;
  /* top: -2rem; */
  top: 2rem;
  right: 0;
  cursor: pointer;
  /* border: 1px solid red; */
  /* background-color: red; */
  padding-left: 1rem;
  /* z-index: 2; */
}
#modalWIPContainer > img {
  /* border: 1px solid greenyellow; */
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* #endregion */

/* /// PLACA 12 CONTACTO */
/* #region */
#placa12 {
  pointer-events: all !important;
}

#placa12 > .contenidoPlaca {
  /* border: 1px solid red; */
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* width: 39rem; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#placa12 > .contenidoPlaca > .texto {
  text-transform: none !important;
  /* font-family: "Saira", Helvetica, sans-serif; */
  /* font-family: main_font; */
  font-family: second_font;

  font-size: 1.5rem;
  /* font-weight: bold; */
}
#placa12 > .contenidoPlaca > .titulo {
  font-size: 10rem;
  color: var(--main_color);
  font-weight: bold;
  font-family: main_font;
  white-space: nowrap;
}

/* /// formulario */
div.input-block {
  position: relative;
}
div.input-block input {
  /* font-weight: 500; */
  font-size: 1.6rem;
  /* color: #495055; */
  color: black;
  /* width: 350px; */
  padding: 0.5rem 0rem;
  /* border-radius: 1rem; */
  border-radius: 0 !important;

  /* border: 2px solid #d9d9d9; */
  outline: none;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid black;
  width: 100%;
}
div.input-block span.placeholder {
  position: absolute;
  margin: 1rem 0;
  /* padding: 0 4px; */
  font-family: main_font;
  color: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.4rem;
  top: 0;
  left: 0rem;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
  -webkit-transform: scale(0.7) translateY(-2rem);
  -ms-transform: scale(0.7) translateY(-2rem);
  transform: scale(0.7) translateY(-2rem);
  /* background: #fff; */
}
div.input-block input:focus {
  /* color: #284b63; */
  /* border-color: #284b63; */
}
div.input-block input:focus + span.placeholder {
  /* color: #284b63; */
}

#formulario {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#formulario > .input-block {
  margin-top: 1rem;
}
#formulario > .input-block:nth-child(1) {
  width: 46%;
}
#formulario > .input-block:nth-child(2) {
  width: 46%;
  margin-left: 8%;
}
#formulario > .input-block:nth-child(3) {
  width: 100%;
  margin-top: 1.5rem;
}

#btnEnviarFormulario {
  font-weight: bold;
  font-size: 1.6rem;
  border: 1px solid black;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* padding: 5px 15px;
  margin-top: 10px; */
  padding: 0.05em 0.8em;
  cursor: pointer;
  position: relative;
  margin-top: 3rem;
}
#btnEnviarFormulario::after {
  content: " ";
  position: absolute;
  bottom: calc(var(--trianguloChico) * -0.25);
  right: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

  width: 0;
  height: 0;
  border-top: var(--trianguloChico) solid transparent;
  border-bottom: var(--trianguloChico) solid transparent;
  border-left: var(--trianguloChico) solid var(--main_color);
}

#datosContacto {
  margin-top: 5rem;
  font-size: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Saira", sans-serif !important;
  text-transform: lowercase;
  /* font-weight: bold; */
}
a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: black;
}

a:active {
  text-decoration: none;
  color: black;
}

#datosContacto > a {
}
.datoContacto > i {
  color: black;
  margin-right: 0.15rem;
}

/* #endregion */

/* /// PLACA CRONOGRAMA */
/* #region  */
#containerImgCronograma {
  /* border: 2px solid greenyellow; */
  position: absolute;
  width: 100%;
  /* height: 100%; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* margin: auto; */
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#containerImgCronograma > img {
  /* border: 1px solid red !important;  */
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* height: 100%; */
  /* margin: auto; */
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  /* opacity: 0; */
}

#marcadorEtapa {
  position: absolute;
  width: 3.5%;
  height: 31%;
  border: 1px solid #000;
  top: 51.5%;
  left: 19.6%;
  z-index: 1;
}
#placa12.selected > div > #marcadorEtapa {
  -webkit-transition: 2.5s 1s linear;
  -o-transition: 2.5s 1s linear;
  transition: 2.5s 1s linear;
  left: 41.8%;
  /* border-color: red; */
}

#marcaEtapa1 {
  position: absolute;
  /* width: 19.2%; */
  width: 0.1%;

  height: 4.1%;
  /* border: 1px solid var(--main_color); */
  top: 56.3%;
  left: 19.9%;
  background-color: var(--main_color);
}
#placa12.selected > div > #marcaEtapa1 {
  background-color: #000;
  /* transition: background-color 0.1s 2.3s, width 2.3s 1s; */
  -webkit-transition: background-color 0.1s 3.2s, width 2s 1s linear;
  -o-transition: background-color 0.1s 3.2s, width 2s 1s linear;
  transition: background-color 0.1s 3.2s, width 2s 1s linear;

  width: 19.2%;
}

#marcaEtapa2 {
  position: absolute;
  width: 19.2%;
  height: 4.1%;
  /* border: 1px solid var(--main_color); */
  background-color: transparent;
  top: 62.4%;
  left: 38%;
}
#placa12.selected > div > #marcaEtapa2 {
  -webkit-transition: 0.1s 2.5s;
  -o-transition: 0.1s 2.5s;
  transition: 0.1s 2.5s;
  background-color: var(--main_color);
}

/* #endregion */