/* ====== Intro/Preloader (con tu lógica de body.is-ready) ====== */
:root{
  --dur:1000ms;                         /* duración zoom out */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Tema */
  --bg:#0a0a0a;                         /* fondo general oscuro */
  --fg:#fff;
  --panel: rgba(21,26,40,.72);          /* glass */
  --border: rgba(255,255,255,.10);
  --muted: #bdc1cf;
  --grad1:#ff7a59;                      /* naranja coral */
  --grad2:#9c5cff;                      /* morado */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
}

.site{
  opacity:0; transform:scale(.96); filter:blur(8px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), filter 600ms var(--ease);
}
body.is-ready .site{
  opacity:1; transform:scale(1); filter:blur(0);
}

/* Preloader centrado + zoom out */
.preloader{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#0a0a0a; z-index:9999;
}
.preloader__logo{
  width:min(44vmin,220px); height:auto; display:block;
  opacity:0; transform:scale(1);
  animation: fadeIn 1000ms var(--ease) forwards;
  animation-delay:200ms;
  filter:drop-shadow(0 6px 24px rgba(255,255,255,.08));
}
@keyframes fadeIn{ to{ opacity:1; } }
body.is-ready .preloader{ animation: zoomOut var(--dur) var(--ease) forwards; }
@keyframes zoomOut{ 0%{transform:scale(1);opacity:1;} 100%{transform:scale(2);opacity:0;visibility:hidden;} }

@media (prefers-reduced-motion: reduce){
  .site{ opacity:1; transform:none; filter:none; transition:none; }
  .preloader{ display:none !important; }
}

.bg-body{ background:var(--bg); color:#fff; }
.nav-offset{ padding-top:72px; } /* espacio para la navbar fixed */

/* ===== Banner tipo Hero con video o imagen ===== */
.hero-banner {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Video o imagen de fondo */
.hero-banner .hero-media {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Capa de oscurecimiento */
.hero-banner .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
  z-index: 1;
}

/* Contenido centrado */
.hero-banner .hero-content {
  position: relative;
  z-index: 2;
}

.hero-banner h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}