@layer base;
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--color-ivory);color:var(--ink);font:16px/1.5 var(--font-sans)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Tipos */
.h1{font:800 48px/1.15 var(--font-display);letter-spacing:.01em}
.h2{font:700 28px/1.2 var(--font-display)}
.h3{font:700 18px/1.3 var(--font-display)}
.text-muted{color:var(--muted)}

/* Accesibilidad foco */
:focus-visible{outline:2px solid #1A73E8;outline-offset:2px}

:root { --header-h: 50px; } /* ajusta a tu alto real */

/* Por defecto (no Home): header ocupa flujo y empuja el contenido */
aurora-header {
  display: block;
  position: sticky;   /* se queda arriba al hacer scroll */
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* El contenido deja espacio para el header en páginas que no son Home */
main { padding-top: var(--header-h); }

/* En Home: el header se superpone encima del hero */
body[data-route="home"] aurora-header {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  z-index: 1000;
}

/* En Home el contenido NO necesita padding superior */
body[data-route="home"] main { padding-top: 0; }