/* ==================================================================
   Bizzcrafter · cabecera y pie compartidos por todas las páginas
   Las clases usan el prefijo bz- para no interferir con el CSS propio
   de cada página.
   ================================================================== */
:root{
  --bz-navy:#12232e; --bz-on:#e6edf0; --bz-on-2:#9fb0b9; --bz-line:#2b404d;
  --bz-accent:#b4541f; --bz-accent-ink:#ffffff;
  --bz-serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --bz-sans:Calibri, Carlito, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bz-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --bz-w:1120px; --bz-h:58px; --bz-r:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-tema="claro"]){
    --bz-navy:#081116; --bz-on-2:#94a6b0; --bz-line:#22343f; --bz-accent:#e0834d; --bz-accent-ink:#1a0d05;
  }
}
:root[data-theme="dark"], :root[data-tema="oscuro"]{
  --bz-navy:#081116; --bz-on-2:#94a6b0; --bz-line:#22343f; --bz-accent:#e0834d; --bz-accent-ink:#1a0d05;
}

/* Las anclas no quedan tapadas por la cabecera fija */
[id]{scroll-margin-top:calc(var(--bz-h) + 12px)}

.bz-wrap{max-width:var(--bz-w); margin:0 auto; padding-inline:20px}

/* ---------- cabecera ---------- */
.bz-header{position:sticky; top:0; z-index:40; color:var(--bz-on); font-family:var(--bz-sans);
  background:color-mix(in srgb, var(--bz-navy) 94%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bz-line)}
.bz-header .bz-wrap{display:flex; align-items:center; gap:18px; height:var(--bz-h)}
.bz-brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; white-space:nowrap; color:var(--bz-on)}
.bz-brand b{font-family:var(--bz-serif); font-size:1.25rem; font-weight:600; letter-spacing:.1em}
.bz-brand span{font-size:.78rem; color:var(--bz-on-2)}
.bz-brand span i{font-style:normal; color:var(--bz-accent); font-weight:700}
.bz-nav{display:flex; gap:22px; margin-left:auto; font-size:.9rem}
.bz-nav a{text-decoration:none; color:var(--bz-on-2); white-space:nowrap}
.bz-nav a:hover{color:var(--bz-on)}
.bz-cta{display:inline-flex; align-items:center; font-weight:700; font-size:.88rem; padding:8px 14px; border-radius:var(--bz-r);
  background:var(--bz-accent); color:var(--bz-accent-ink); text-decoration:none; white-space:nowrap; transition:transform .12s}
.bz-cta:hover{transform:translateY(-1px)}
.bz-cta.is-current{background:transparent; color:var(--bz-on); border:1px solid var(--bz-line); transform:none}
.bz-header a:focus-visible, .bz-menu summary:focus-visible, .bz-footer a:focus-visible{outline:2px solid var(--bz-accent); outline-offset:3px}

/* menú móvil */
.bz-menu{display:none; position:relative}
.bz-menu summary{list-style:none; cursor:pointer; display:grid; gap:4px; padding:10px 8px; border:1px solid var(--bz-line); border-radius:var(--bz-r)}
.bz-menu summary::-webkit-details-marker{display:none}
.bz-menu summary span{display:block; width:18px; height:2px; background:var(--bz-on)}
.bz-menu nav{position:absolute; right:0; top:calc(100% + 10px); min-width:230px; display:grid; padding:8px;
  background:var(--bz-navy); border:1px solid var(--bz-line); border-radius:var(--bz-r); box-shadow:0 12px 30px rgba(0,0,0,.25)}
.bz-menu nav a{padding:10px 12px; color:var(--bz-on); text-decoration:none; font-size:.95rem}
.bz-menu nav a:hover{background:color-mix(in srgb, var(--bz-on) 8%, transparent)}

@media (max-width:960px){
  .bz-nav{display:none}
  .bz-cta{margin-left:auto}
  .bz-menu{display:block}
}
@media (max-width:440px){
  .bz-header .bz-wrap{gap:10px}
  .bz-header .bz-brand span{display:none}
  .bz-cta{font-size:.82rem; padding:7px 11px}
}

/* ---------- pie ---------- */
.bz-footer{background:var(--bz-navy); color:var(--bz-on-2); font-family:var(--bz-sans); font-size:.88rem; line-height:1.55; padding-block:40px 26px}
.bz-footer-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.bz-footer p{margin:.7rem 0 0; max-width:42ch}
.bz-footer .bz-pillars{max-width:none; font-family:var(--bz-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.bz-footer nav{display:grid; gap:8px; align-content:start}
.bz-footer nav a, .bz-legal a{color:var(--bz-on-2); text-decoration:none}
.bz-footer nav a:hover, .bz-legal a:hover{color:var(--bz-on)}
.bz-legal{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:30px; padding-top:18px;
  border-top:1px solid var(--bz-line); font-size:.8rem}

@media print{ .bz-header, .bz-footer{display:none !important} }