:root{
  --bg:#070a12;
  --txt:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.08);
  --glow: rgba(255, 204, 77, .35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background: radial-gradient(1200px 600px at 20% 10%, #0d1b3a 0%, var(--bg) 55%);
  color:var(--txt);
}

/* Ocultar header viejo */
.topbar, header.topbar, nav.nav { display:none !important; }

/* ===============================
   LOGO
   =============================== */
.logo-torre-blanca{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: .9;
  pointer-events: none;
}
.logo-torre-blanca img{
  height: 300px;
  width: auto;
}

@media (max-width:768px){
  .logo-torre-blanca img{ height:160px; }
}

/* ===============================
   LAYOUT
   =============================== */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 360px 18px 60px;
}

.hero{display:grid; gap:18px}

.hero-text{
  text-align:center;
}

.hero-text h1{ display:none !important; }

.hero-text p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
}

/* ===============================
   ESCENARIO
   =============================== */
.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.img-stack{
  width:min(1050px, 100%);
  position:relative;
  aspect-ratio:2048/981;
  border-radius:18px;
  overflow:hidden;
  background:#050814;
  border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.overlay{
  opacity:0;
  transition:opacity .18s ease;
  filter: drop-shadow(0 0 22px var(--glow));
}

.spot{
  position:absolute;
  inset:auto;
  background:transparent;
  border:0;
  cursor:pointer;
}

/* ===============================
   HUD DESKTOP (SOBRE IMAGEN)
   =============================== */
@media (min-width:769px){
  .hud{
    position:absolute;
    right:64px;
    top:44%;
    transform:translateY(-50%);
    max-width:520px;
    padding:26px 32px;
    border-radius:20px;
    background:rgba(0,0,0,.55);
    border:1px solid var(--line);
    backdrop-filter: blur(10px);
  }
}

/* ===============================
   HUD MOBILE (DEBAJO DE LA IMAGEN)
   =============================== */
@media (max-width:768px){
  .wrap{ padding:220px 14px 50px; }

  .hud{
    position:relative !important;
    margin-top:16px;
    width:100%;
    max-width:680px;
    padding:18px 20px;
    border-radius:18px;
    background:rgba(0,0,0,.55);
    border:1px solid var(--line);
    backdrop-filter: blur(10px);
  }

  .hud-title{ font-size:14px; }
  .hud-sub{ font-size:13px; color:var(--muted); }
}

/* ===============================
   CONTACTO ELIMINADO
   =============================== */
#contacto,
.contact,
.contacto,
.contacto-generico{
  display:none !important;
}