.elementor-328 .elementor-element.elementor-element-b00e544{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-328 .elementor-element.elementor-element-b00e544.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-328 .elementor-element.elementor-element-3b6cc94{width:100%;max-width:100%;}.elementor-328 .elementor-element.elementor-element-fed2344{--display:grid;--position:absolute;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;top:0px;--z-index:999;}body:not(.rtl) .elementor-328 .elementor-element.elementor-element-fed2344{left:0px;}body.rtl .elementor-328 .elementor-element.elementor-element-fed2344{right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-328 .elementor-element.elementor-element-fed2344{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-328 .elementor-element.elementor-element-b00e544{--width:99.69%;}}@media(max-width:767px){.elementor-328 .elementor-element.elementor-element-fed2344{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-3b6cc94 *//* Fuente local */
@font-face {
  font-family: "Liburan";
  src: url("../fonts/LiburanDemoRegular.ttf");
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Bold.ttf");
}

@font-face {
  font-family: "Welfresh";
  src: url("../fonts/Welfresh.otf");
  src: url("../fonts/Welfresh.ttf");
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}


.bienvenidos{
  font-size: 120pt;
	text-align: center;
	font-family: "Welfresh";
	font-weight: normal;
  letter-spacing: 1.5px;
}



.un-sitio {
	text-align: justify;
	font-family: "Barlow";
	font-weight: 400;
  color: #b3c44c;
}

}

body, html {
  width: 100%;
  height: 100%;
  cursor: url("../img/hand_click.png") 16 16, auto;
}

.map-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Logo */
.logo {
  position: absolute;
  top: 2%;
  left: 2%;
  width: clamp(80px, 20vw, 450px);
  z-index: 10;
}

/* Fondo */
.map-background {
  width: 100%;
  height: 100%;
  background: url("https://geoguardianes.geoenergia.gob.ec/wp-content/uploads/2026/03/fondo.jpg") center/cover no-repeat;
  position: relative;
}

/* Montañas */
.mountain {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) scale(var(--scale));
  transition: transform 0.3s ease;
  cursor: pointer;
}

.mountain img {
  width: clamp(80px, 30vw, 800px);
}

.mountain:hover {
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 5;
}

/* Personaje */
.character {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 15vw, 450px);
  z-index: 10;
}

/* Letrero */
.sign {
  position: absolute;
  left: 38%;
  top: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 7;
}


.sign img {
  width: clamp(140px, 18vw, 360px);
}

.tooltip-text {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(12px, 1.2vw, 18px);
  color: #fff;
}

/* 📱 Vista vertical */
@media (max-width: 768px) {

  .character,
  .sign {
    display: none;
  }

  .map-background {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mountain {
    position: relative;
    left: auto;
    top: auto;
    transform: scale(1);
    margin: 10px 0;
  }

  .mountain::after {
    content: attr(data-name);
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
}
















/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fondo responsive */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../img/el_manantial_pantalla.jpg") center / cover no-repeat;
}

/* ===== BOTÓN TRANSPARENTE ===== */
.btn-trans {
  display: block;
  text-decoration: none;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 25px;
  margin: 10px 0;
  border-radius: 30px;
  text-align: center;
  font-size: 16px;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-trans:hover {
  background: #fff;
  color: #000;
}

/* ===== BOTONES IZQUIERDA ===== */
.btn-left {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
}

/* ===== BOTONES DERECHA SUPERIOR ===== */
.btn-top-right {
  position: absolute;
  top: 30px;
  right: 40px;
  display: flex;
  gap: 15px;
}

.btn-trans.small {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 50%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

  .btn-left {
    left: 50%;
    top: auto;
    bottom: 30px;
    transform: translateX(-50%);
  }

  .btn-trans {
    font-size: 14px;
    padding: 10px 20px;
  }

  .btn-top-right {
    right: 20px;
    top: 20px;
  }
}/* End custom CSS */
/* Start custom CSS */<audio id="audioBienvenida" autoplay>
  <source src="https://geoguardianes.geoenergia.gob.ec/wp-content/uploads/2026/04/loop_audio_geoguardianes.mp3" type="audio/mpeg">
</audio>/* End custom CSS */