/* style.css */
* { margin:0; padding:0; box-sizing:border-box; }
body, html {
  height:100%;
  /* Prevent scrolling/movement caused by mobile auto-hiding chrome */
  overflow: hidden;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* Use a dynamic --vh variable to avoid mobile address-bar resizing issues */
  height: calc(var(--vh, 1vh) * 100);
  background: url('images/fondo.JPG') center/cover no-repeat;
  position: relative;
  font-family: sans-serif;
  color: #fff;
  overflow: hidden;
}
.overlay {
  position:absolute; inset:0;
  background: rgba(0, 0, 0, 0.527);
  z-index:0;
}
.top, .center, .bottom {
  z-index:1;
}

/* Header */
.top img {
  height: 100px;
  margin-top: 20px;
}

/* Main (menú) */
.center ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.center a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 1px;
  transition: color .3s;
}
.center a:hover { color: #ffcc00; }

/* Footer (redes) */
.bottom {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 20px;
}
.bottom a {
  font-size: 1.5rem;
  color: #fff;
  transition: color .3s;
}
.bottom a:hover { color: #ffcc00; }

/* Mobile adjustments: compact layout, lower logo a bit and raise social icons */
@media (max-width: 600px) {
  .container { height: calc(var(--vh, 1vh) * 100); }
  .top img {
    height: 80px; /* slightly smaller */
    margin-top: 2rem; /* push logo down a bit */
  }
  .center ul {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
  }
  .center a { font-size: 0.9rem; }
  .bottom {
    margin-bottom: 40%; /* bring social icons up */
    gap: 1rem;
  }
  .bottom a { font-size: 1.4rem; }
}