/* ==========================================================================
   Demos Web Sites - estilos locales (solo para demos)
   Archivo: /assets/css/demo-sites.css
   ========================================================================== */

.demo-surface{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
}
.demo-hero{
  padding: 34px 18px;
  background: radial-gradient(900px 500px at 20% 0%, rgba(0,229,255,.14), transparent 60%),
              radial-gradient(900px 600px at 70% 10%, rgba(40,110,255,.14), transparent 70%),
              rgba(10,14,28,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.demo-hero h2{ margin:0 0 10px 0; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.demo-hero p{ margin:0 0 14px 0; color: rgba(255,255,255,.72); }
.demo-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.06);
  color: rgba(0,229,255,.88);
  font-weight:800;
  font-size:.82rem;
}
.demo-section{ padding: 18px; }
.demo-kpis{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 860px){
  .demo-kpis{ grid-template-columns: repeat(3, 1fr); }
}
.kpi{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px;
}
.kpi b{ font-size: 1.15rem; }
.kpi p{ margin:6px 0 0; color: rgba(255,255,255,.68); }

/* --------------------------------------------------------------------------
   Nivel PRO / PRO+ (parallax + header dinámico en demos)
--------------------------------------------------------------------------- */
.demo-hero--parallax{
  position: relative;
  background-image: url('../img/hero/hero-morcar.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.demo-hero--parallax::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
.demo-hero--parallax > *{ position:relative; }

body.demo-pro .site-header,
body.demo-proplus .site-header{
  background: rgba(5, 8, 20, .28);
  border-bottom-color: rgba(255,255,255,.06);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.demo-pro.is-scrolled .site-header,
body.demo-proplus.is-scrolled .site-header{
  background: rgba(5, 8, 20, .78);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}