/* ================================================================
   site.css — Header compartido del sitio público
   Usado por landing.html y contacto.html (el footer es footer.js +
   .site-footer y compañía, definidos en catalogo.css)
   ================================================================ */

body { background: var(--bg); }

/* ── HEADER ──────────────────────────────────────────────────────
   El contenido del header (logo, nav, íconos) es el mismo topbar.js
   compartido con el resto del sitio (ver catalogo.css: .topbar,
   .topbar-nav, .icon-btn, etc.) — acá solo se ajusta el ancho/padding
   propio de landing y contacto, un poco más anchos que el resto. ── */
/* especificidad extra (header.site-header-topbar) para ganarle de forma
   confiable al padding de mobile de .topbar en catalogo.css, sin
   depender del orden en que se linkean las hojas de estilo */
header.site-header-topbar {
  --shell-max: 1160px; /* ver --topbar-sangria en catalogo.css */
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: none;
}

/* ── RESPONSIVE: MOBILE ──────────────────────────────────────── */
@media (max-width: 640px) {
  /* frena el scroll horizontal si algo se pasa por poco — solo en html:
     en body rompe el position:sticky de la topbar en Chromium mobile */
  html { overflow-x: hidden; }

  header.site-header-topbar {
    padding: 1.25rem 1rem 1rem;
  }
}