*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#4a6741}

#intro{
  position:fixed;inset:0;
  background:#4a6741;
  display:flex;align-items:center;justify-content:center;
  z-index:999;
}

/* ── DESKTOP: stage con posicionamiento absoluto ── */
#stage{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

#logo-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(1);
  width:180px;
  height:180px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(255,255,255,0.3);
  opacity:0;
}

#logo-wrap img,
#logo-wrap svg{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  display:block;
}

#brand-text{
  position:absolute;
  left:calc(50% + 95px);
  top:50%;
  transform:translate(0,-50%);
  opacity:0;
  white-space:nowrap;
}

#brand-text .company{
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:clamp(32px,4.5vw,60px);
  color:#ffffff;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1;
}

#brand-text .tagline{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(13px,1.4vw,18px);
  color:rgba(255,255,255,0.5);
  letter-spacing:0.3em;
  text-transform:uppercase;
  margin-top:8px;
}

#site{
  opacity:0;
  transition:opacity 0.6s ease;
  height:100vh;
  overflow-y:auto;
}
#site.visible{opacity:1}

/* ── MÓVIL: stage en columna, elementos en flujo normal ── */
@media (max-width: 1024px) {
  #stage{
    flex-direction:column;
    gap:0.5rem;
  }

  #logo-wrap{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:130px;
    height:130px;
  }

  #brand-text{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    text-align:center;
    white-space:normal;
  }

  #brand-text .company{
    font-size:clamp(28px,8vw,42px);
  }

  #brand-text .tagline{
    font-size:clamp(10px,3vw,13px);
    letter-spacing:0.18em;
  }
}

@media (max-width: 575.98px) {
  #logo-wrap{ width:110px; height:110px; }
  #brand-text .company{ font-size:clamp(24px,9vw,34px); }
}

@media (max-width: 575.98px) {
  #logo-wrap{ width:95px; height:95px; }
  #brand-text .company{ font-size:26px; }
  #brand-text .tagline{ font-size:9px; }
}