:root{ --bg: #0a0b0f; --accent1:#0284c7; --accent2:#4f46e5; }
html,body{height:100%}
body { background: var(--bg) no-repeat fixed center/cover; }
.bg-overlay:before{ content:""; position:fixed; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.6)); z-index:-1; }
.card{ border-radius:1rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); padding:1.5rem; color:#fff }
.nav-logo{ height:42px; width:auto }
#hero{ position:relative; min-height:70vh; display:grid; place-items:center }
#hero .bg{ position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; background-repeat:no-repeat; transition:background-image .6s ease }
#hero .shade{ position:absolute; inset:0; z-index:-1; background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.25), rgba(0,0,0,0)) }
section{ padding-top:4rem; padding-bottom:4rem }

:root { --header-h: 64px; } /* h-16 = 64px */

body { padding-top: var(--header-h); }

/* Mejora visual del header fijo (fondo translúcido con blur) */
#site-header {
  background: rgba(10,11,15,0.50);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Por si en móvil el header crece a 72px */
@media (max-width: 640px){
  :root { --header-h: 72px; }
}

/* === Fondo global Argo (SOC transparente) === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('/argo-bg.png') center/cover no-repeat fixed;
  opacity: 0.35;              /* ajusta entre 0.25–0.6 según gusto */
  z-index: -1;
}

/* === FONDO GLOBAL ARGO (aplica a TODAS las secciones) === */
#global-bg{
  position: fixed;
  inset: 0;
  z-index: -1;                     /* por detrás del contenido */
  background: url('/argo-bg.png') center/cover no-repeat fixed;
}

/* Capa de transparencia para legibilidad (ajusta el 0.55) */
#global-bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.70);
}

}

html { scroll-behavior: smooth; }
section { scroll-margin-top: var(--header-h, 64px); }

html { scroll-behavior: smooth; }
section { scroll-margin-top: var(--header-h, 64px); }

@media (max-width: 640px){
  #heroImage { height: 200px; object-fit: cover; }
}