* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;

  background:
    linear-gradient(
      135deg,
      #fff8e7 0%,
      #eefbea 35%,
      #e7f8ef 70%,
      #f6fff2 100%
    );

  min-height: 100vh;
  overflow-x: hidden;
  position: relative;

  color: #243326;
}

.background-glow {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(112,182,88,0.18);
  filter: blur(120px);
  top: -180px;
  left: -180px;
  z-index: -1;
  pointer-events: none;
}

.background-glow.second {
  background: rgba(255,210,95,0.18);
  top: auto;
  left: auto;
  bottom: -180px;
  right: -180px;
}

/* NAVBAR */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px 30px;

  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(123,191,89,0.12);
}

.logo {
  font-size: 18px;
  font-weight: 800;
  color: #5c8f3b;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  text-decoration: none;
  color: #243326;
  font-weight: 600;
}

.nav-links a.active {
  color: #5fa86d;
}

.menu-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: #5c8f3b;
}

/* HERO */

.hero {
  text-align: center;
  padding: 70px 20px 30px;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 12px;
}

.hero p {
  color: rgba(36,51,38,0.7);
}

/* BUTTONS */

.floor-select {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 40px;
}

.floor-select button {
  border: none;

  padding: 12px 18px;

  border-radius: 999px;

  background: rgba(255,255,255,0.8);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(123,191,89,0.12);

  font-weight: 600;

  cursor: pointer;

  transition: 0.25s;
}

.floor-select button:hover {
  transform: translateY(-3px);

  background:
    linear-gradient(
      135deg,
      #7bbf59,
      #5fa86d
    );

  color: white;
}

/* MAPA */

.map-wrapper {
  display: flex;
  justify-content: center;

  padding: 20px;
}

.map-placeholder {

  width: 90%;
  max-width: 1000px;

  background: rgba(255,255,255,0.72);

  border-radius: 32px;

  border: 1px solid rgba(123,191,89,0.12);

  backdrop-filter: blur(20px);

  overflow: hidden;

  position: relative;
}

/* FOOTER */

footer {
  text-align: center;

  padding: 50px 20px;

  color: rgba(36,51,38,0.6);
}

/* MOBILE */

@media (max-width:768px){

  .map-placeholder{
    width: 98%;
  }

  #map-image{
    width: 100%;
    transform: none;
  }

  .menu-toggle{
    display:block;
  }

  .nav-links{
    display:none;

    position:absolute;
    top:75px;
    left:20px;
    right:20px;

    flex-direction:column;

    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(20px);

    padding:20px;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);
  }

  .nav-links.show{
    display:flex;
  }

}
#map-image {

  width: 70%;

  height: auto;

  display: block;

  margin: 25px auto;
}

#map-text{
  display:none;
}

.popup{

  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.45);

  display: none;

  justify-content: center;
  align-items: center;

  z-index: 9999;
}

.popup.show{
  display:flex;
}

.popup-content{

  position: relative;

  width: 90%;
  max-width: 450px;

  background: white;

  padding: 30px;

  border-radius: 24px;

  text-align: center;

  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.popup-content h2{
  margin-bottom:15px;
}

.popup-content ul{
  list-style:none;
  margin-bottom:25px;
}

.popup-content li{
  margin:10px 0;
}

.popup-button{

  display:inline-block;

  padding:12px 20px;

  border-radius:999px;

  text-decoration:none;

  color:white;

  background:linear-gradient(
    135deg,
    #7bbf59,
    #5fa86d
  );
}

.close-popup{

  position:absolute;

  top:15px;
  right:15px;

  border:none;
  background:none;

  cursor:pointer;

  font-size:22px;
}

.stanek1{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 15.3%;
  top: 56%;

  z-index: 100;
}

.stanek2{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 45.4%;
  top: 41%;

  z-index: 100;
}

.stanek3{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 62%;
  top: 60%;

  z-index: 100;
}

.patro2.stanek1{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 16%;
  top: 43.5%;

  z-index: 100;
}

.patro2.stanek2{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 46%;
  top: 30%;

  z-index: 100;
}

.patro3.stanek1{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 16%;
  top: 43.5%;

  z-index: 100;
}

.patro3.stanek3{
  position: absolute;
  width: 80px;
  height: 45px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 69%;
  top: 43.5%;

  z-index: 100;
}

.altanek.stanek2{
  position: absolute;
  width: 100px;
  height: 100px;
  background: transparent;
  border: none;
  cursor: pointer;

  left: 43.5%;
  top: 37%;

  z-index: 100;
}

@media (max-width:768px){

  .stanek1,
  .stanek2,
  .stanek3,
  .patro2.stanek1,
  .patro2.stanek2,
  .patro3.stanek1,
  .patro3.stanek3,
  .altanek.stanek2{
    width: 39px;
    height: 50px;
  }

}