/* Cabecera del sitio — FUENTE ÚNICA DE VERDAD.
   La usan las subpáginas (junto a landing.css) y las páginas de caso de éxito,
   que tienen su propia paleta. Para que la barra sea IDÉNTICA en todas, este
   componente NO depende de los tokens de la página que lo aloja: declara los
   suyos (--hdr-*) sobre .site-header y fija color y tipografía explícitamente.
   Las medidas replican las del header de index.html: alto 75px, logo 38px,
   enlaces 14px/1.5 con gap 24px y CTA de 13px con padding 11/20 sin borde. */

.site-header{
  --hdr-ink:#293846;
  --hdr-paper:#f8f6f1;
  --hdr-line:#e0dccf;
  --hdr-warm:#6f6a5c;
  --hdr-accent:#F68A2A;

  position:sticky;top:0;z-index:20;
  /* Opaco a propósito. En index.html la barra es rgba(...,.88) sobre un body
     que ya es #f8f6f1, así que su color efectivo ES #f8f6f1. Aquí no se puede
     depender del fondo: la página de caso tiene modo oscuro y la barra se
     volvía gris. Con el color fijo se ve igual en las dos. */
  background:#f8f6f1;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hdr-line);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  line-height:1.55;
  color:var(--hdr-ink);
}
.site-header *{box-sizing:border-box}
.site-header a{text-decoration:none;color:var(--hdr-ink)}
.site-header img{max-width:100%}

.site-header .nav{position:relative;width:100%;padding:16px clamp(32px,6vw,112px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .brand{display:flex;align-items:center}
.site-header .brand-logo{display:block;width:auto;height:38px}
.site-header .nav-links{display:flex;align-items:center;gap:24px;font-size:14px}

.site-header .nav-links a:not(.button){font-size:14px;line-height:1.5;white-space:nowrap;color:var(--hdr-ink);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.site-header .nav-links a:not(.button):hover{color:var(--hdr-accent)}

.site-header .nav-links a.lang-switch{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:var(--hdr-warm);border:1px solid var(--hdr-line);border-radius:2px;padding:6px 9px;line-height:1}
.site-header .nav-links a.lang-switch:hover{color:var(--hdr-ink);border-color:var(--hdr-ink)}

.site-header .nav-links .button{display:inline-flex;align-items:center;justify-content:center;background:var(--hdr-ink);color:var(--hdr-paper);border:0;border-radius:2px;font-size:13px;padding:11px 20px;white-space:nowrap;transition:background .25s ease,transform .25s ease}
.site-header .nav-links .button:hover{background:var(--hdr-accent);color:#fff;transform:translateY(-1px)}

.site-header .nav-toggle{display:none;background:none;border:1px solid var(--hdr-line);border-radius:2px;width:40px;height:36px;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0}
.site-header .nav-toggle span{width:16px;height:1.5px;background:var(--hdr-ink);display:block;pointer-events:none}

@media(max-width:900px){
  .site-header .nav-toggle{display:flex}
  .site-header .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:16px;background:var(--hdr-paper);border-bottom:1px solid var(--hdr-line);padding:18px 24px 22px;box-shadow:0 20px 40px -30px rgba(41,56,70,.5);z-index:30}
  .site-header .nav-links.is-open{display:flex}
  .site-header .nav-links .button{width:100%;text-align:center}
}
@media(max-width:560px){
  .site-header .nav{padding:14px 20px}
}