/* BASE */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
body[data-smooth-scroll] {
  overflow: hidden;
}

/* ScrollBar Custom */
.custom-scrollbar {
  position: fixed;
  top: 0;
  right: 0vw;
  width: 1vw;
  height: 100%;
  transition: opacity 0.5s ease;
}
.custom-scrollbar .thumb {
  position: absolute;
  width: 100%;
  background: rgb(41, 41, 41);
  border-radius: 0.4vw;
}

/* TOAST LANGUAJE */
.language-toast {
  position: fixed;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(41, 41, 41);
  color: white;
  padding: 1vh 2vh;
  border-radius: 0.5vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2000;
  display: inline-block;
  font-size: 2vh;
  white-space: nowrap;
}
.language-toast.show {
  opacity: 1;
}

/* LEAF LOAD */
#leaf-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
#leaf-overlay .contenedor {
  position: relative;
  width: 100%;
  height: 100%;
}
#leaf-overlay .leaf {
  height: 25vh;
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 97%;
  opacity: 0;
}

/* BAR */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(41, 41, 41);
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
  z-index: 1000;
}
:root {
  --top-bar-height: 8vh;
}
/* Logo */
.bar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.bar-logo img {
  height: 70%;
}
.logo-pc {
  display: block;
}
.logo-mobile {
  display: none;
}
/* Menu options button */
.menu-box {
  position: absolute;
  left: 1vh;
  top: 50%;
  transform: translateY(-50%);
  height: 75%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15%;
  cursor: pointer;
}
.menu-box span {
  display: block;
  width: 70%;
  height: 12%;
  background-color: white;
  border-radius: 20%;
  transition: background-color 0.3s ease;
}
.menu-box:hover span {
  animation: squashLoop 1.2s ease-in-out infinite;
}
.menu-box span:nth-child(1) {
  --tint-color: rgb(208, 219, 153);
  animation-delay: 0s;
}
.menu-box span:nth-child(2) {
  --tint-color: rgb(136, 168, 57);
  animation-delay: 0.4s;
}
.menu-box span:nth-child(3) {
  --tint-color: rgb(64, 87, 5);
  animation-delay: 0.8s;
}
/* Languaje button */
.lang-toggle {
  position: absolute;
  right: 1vh;
  top: 50%;
  transform: translateY(-50%);
  height: 75%;
  aspect-ratio: 2 / 1;
  background: none;
  color: white;
  font-size: 3vh;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.lang-toggle:hover {
  background: linear-gradient(to top, rgba(14, 215, 142, 0.5), transparent);
}

/* MENU OPTIONS */
.side-menu {
  position: fixed;
  left: 0;
  width: 25%;
  background-color: rgb(206, 206, 206);
  transform-origin: top left;
  transform: scaleY(0) scaleX(0);
  transition: transform 0.4s ease;
  z-index: 900;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2%;
}
.side-menu.active {
  transform: scaleY(1) scaleX(1);
}
.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Option section blocks */
.option.section_block {
  width: 100%;
  font-size: 2vw;
  font-weight: bold;
  color: black;
  border-left: 0.5vh solid black;
  margin-bottom: 1vh;
  padding-left: 1vh;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.option.section_block:hover {
  color: rgb(14, 215, 142);
  border-color: rgb(14, 215, 142);
}
/* Option location */
.option.location {
  width: 100%;
  border-left: 0.5vh solid black;
  margin-bottom: 1vh;
  padding-left: 1vh;
  transition: border-color 0.3s ease;
}
.option.location .option-title {
  font-size: 2vw;
  font-weight: bold;
  color: black;
  cursor: pointer;
  transition: color 0.3s ease;
}
.option.location .suboption {
  font-size: 3vh;
  color: black;
  margin-top: 0.5vh;
  padding-left: 2vh;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
}
.option.location .suboption::before {
  content: "•";
  position: absolute;
  left: 0.3vh;
  top: 0;
  color: black;
  font-size: 1.5vw;
  line-height: 1.2;
}
.option.location:hover {
  border-color: rgb(14,215,142);
}
.option.location .option-title:hover,
.option.location .suboption:hover,
.option.location .suboption:hover::before {
  color: rgb(14,215,142);
}
/* Separador */
.menu_separator {
  margin: 5vh auto 0 auto;
  width: 100%;
  border: none;
  border-top: 0.5vh solid black;
}
/* option languaje */
.option.languaje {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2vh;
}
.option.languaje [data-lang="ui.languaje"] {
  margin-bottom: 0.5vh;
  font-size: 3vh;
  color: black;
  align-self: flex-start;
}
.button.languaje_select {
  width: 90%;
  padding: 1vh;
  color: black;
  font-size: 3vh;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
}
.button.languaje_select:hover {
  background: linear-gradient(to top, rgb(14,215,142), transparent);
}
/* option web mode */
.option.web_mode {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2vh;
}
.option.web_mode [data-lang="ui.mode"] {
  margin-bottom: 0.5vh;
  font-size: 3vh;
  color: black;
  align-self: flex-start;
}
.switch.mode_select {
  position: relative;
  height: 5vh;
  aspect-ratio: 2 / 1;
  background-color: rgb(206, 206, 206);
  border-radius: 3vh;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: inset 1vh 1vh 1vh rgba(0,0,0,0.5);
}
.switch.mode_select .slider {
  position: absolute;
  height: 5vh;
  aspect-ratio: 1 / 1;
  background-color: rgb(41,41,41);
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: inset -1vh -1vh 1vh rgba(0,0,0,0.5);
}
.switch.mode_select.active .slider {
  transform: translateX(5vh);
}

/* BANNER */
.banner {
  height: 100vh;
  animation: fadeIn 1.5s ease forwards;
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Banner content */
.banner-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s linear;
}
.icon-container,
.text-container {
  transition: opacity 0.3s linear;
}
.icon-container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 25vw;
}
.icon-container img {
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
  animation: zoomRotate 1.5s ease forwards;
  animation-delay: 1s;
}
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 33%;
  font-size: 4.8vw;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 0.2vw black;
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;
  animation-delay: 1s;
}

/* SECTION BLOCKS */
.section-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--top-bar-height);
  box-sizing: border-box;
}
.section-block {
  width: 90%;
  background-color: rgba(206, 206, 206, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1%;
}
.section-text {
  flex: 1;
  text-align: left;
}
.section-text h2 {
  margin: 0;
  font-size: 2vw;
  font-weight: bold;
}
.section-text p {
  margin-top: 1%;
  font-size: 1.7vw;
  line-height: 1.3;
}
.section-image {
  width: 32%;
  aspect-ratio: 1 / 1;
  margin-left: 1%;
}
.section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.section-block.b2 .section-image {
  margin-right: 1%;
}

/* UBICATION */
.map-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: var(--top-bar-height);
  box-sizing: border-box;
}
.map-container iframe {
  width: 90%;
  flex: 1;
  background-color: rgba(206, 206, 206, 0.5);
  border-radius: 1vh;
  box-shadow: 0 0.5vh 1vh rgba(0,0,0,0.3);
  border: none;
}
.map-actions {
  width: 90%;
  text-align: center;
  margin-top: 2vh;
  margin-bottom: 2vh;
}
.map-button {
  display: inline-block;
  background-color: transparent;
  color: black;
  font-weight: normal;
  text-decoration: none;
  border-radius: 1vh;
  transition: all 0.3s ease;
  font-size: 2.5vh;
  line-height: 1.2;
  padding: 0.5em 1em;
  border: 0.3vh solid transparent;
  box-shadow: inset -0.5vw -0.5vh 1vw rgba(0,0,0,0.5),
              inset 0.5vw 0.5vh 1vw rgba(255,255,255,0.5);
}
.map-button:hover {
  border-color: black;
  font-weight: bold;
}

/* ANIMATIONS */
/* Leaf load */
@keyframes zoomLeaf1 {
  from { transform: translate(-50%, -50%) rotate(-75deg) scale(0.1); opacity: 0; }
  to   { transform: translate(-50%, -50%) rotate(-75deg) scale(1);   opacity: 1; }
}
@keyframes zoomLeaf2 {
  from { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes zoomLeaf3 {
  from { transform: translate(-50.4%, -50%) rotate(75deg) scale(0.1); opacity: 0; }
  to   { transform: translate(-50.4%, -50%) rotate(75deg) scale(1);   opacity: 1; }
}
.anim1 { animation: zoomLeaf1 0.5s ease-out forwards; }
.anim2 { animation: zoomLeaf2 0.5s ease-out forwards; }
.anim3 { animation: zoomLeaf3 0.5s ease-out forwards; }
/* Menu options button */
@keyframes squashLoop {
  0% {
    transform: scaleX(1);
    background-color: white;
  }
  25% {
    transform: scaleX(0.3);
    background-color: white;
  }
  50% {
    transform: scaleX(1);
    background-color: var(--tint-color);
  }
  100% {
    transform: scaleX(1);
    background-color: white;
  }
}
/* Banner */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zoomRotate {
  from {
    transform: scale(0.5) rotate(0deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* PHONE-CELL SUPPORT */
@media (orientation: portrait) {
  /* Custom scroll */
  .custom-scrollbar {
    display: none;
  }
  /* Top bar */
  .logo-pc {
    display: none;
  }
  .logo-mobile {
    display: block;
  }
  /* Languaje Button */
  .lang-toggle {
    height: 50%;
    font-size: 2vh;
  }
  /* Menu options */
  .side-menu {
    width: 100%;
  }
  /* option section blocks */
  .option.section_block {
    font-size: 7.5vw;
  }
  /* option location */
  .option.location .option-title {
    font-size: 7.5vw;
  }
  .option.location .suboption {
    font-size: 5vw;
  }
  .option.location .suboption::before {
    font-size: 3vh;
  }
  /* Banner */
  .banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .icon-container {
    position: static;
    width: 50vw;
    margin-top: 5%;
  }
  .text-container {
    position: static;
    width: 75%;
    font-size: 11vw;
    text-align: center;
    -webkit-text-stroke: 0.4vw black;
    margin-top: 2vh;
  }
  /* Section blocks */
  .section-block {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .section-text {
    text-align: center;
    order: 1;
    margin-bottom: 0.5vh;
  }
  .section-text h2 {
    font-size: 4.5vw;
    font-weight: bold;
  }
  .section-text p {
    font-size: 4.5vw;
    margin-bottom: 0.5vh;
  }
  .section-image {
    width: 95%;
    aspect-ratio: 1 / 1;
    margin-top: 0.5vh;
    order: 2;
  }
  .section-block.b2 .section-image {
    margin-right: 0;
  }
}

/* WEB MODE */
/* Menu options */
body.dark-mode .side-menu {
  background-color: rgb(41, 41, 41);
  color: white;
}
body.dark-mode .side-menu li:hover,
body.dark-mode .side-menu li.active {
  color: rgb(14, 215, 142);
  border-left: 0.5vh solid rgb(14, 215, 142);
}
body.dark-mode .menu-separator {
  border-top: 0.5vh solid rgb(206, 206, 206);
}
/* option section blocks */
body.dark-mode .option.section_block {
  border-left: 0.5vh solid white;
}
body.dark-mode .option.section_block {
  color: white;
}
body.dark-mode .option.section_block:hover {
  border-color: rgb(14, 215, 142);
  color: rgb(14, 215, 142);
}
/* option location */
body.dark-mode .option.location {
  border-left: 0.5vh solid white;
}
body.dark-mode .option.location .option-title,
body.dark-mode .option.location .suboption,
body.dark-mode .option.location .suboption::before {
  color: white;
}
body.dark-mode .option.location:hover {
  border-color: rgb(14, 215, 142);
}
body.dark-mode .option.location .option-title:hover,
body.dark-mode .option.location .suboption:hover,
body.dark-mode .option.location .suboption:hover::before {
  color: rgb(14, 215, 142);
}
/* separador */
body.dark-mode .menu_separator {
  border-top: solid white;
}
/* option languaje */
body.dark-mode .option.languaje [data-lang],
body.dark-mode .button.languaje_select {
  color: white;
}
/* option web mode */
body.dark-mode .option.web_mode [data-lang] {
  color: white;
}
body.dark-mode .switch.mode_select {
  background-color: rgb(41, 41, 41);
}
body.dark-mode .switch.mode_select .slider {
  background-color: rgb(206, 206, 206);
}
/* Section blocks */
body.dark-mode .section-block {
  background-color: rgba(41, 41, 41, 0.5);
  color: white;
}
body.dark-mode .section-text h2,
body.dark-mode .section-text p,
body.dark-mode .side-menu li {
  color: white;
}
/* Map */
body.dark-mode .map-button {
  color: white;
  border: 0.3vh solid transparent;
}
body.dark-mode .map-button:hover {
  border-color: white;
  font-weight: bold;
}