/* jimmychupillon.com · cabecera única del sitio (V5)
   Se usa igual en inicio, herramientas y páginas independientes. */
.jch{
  --jh-bg:#FFFFFF; --jh-ink:#16261C; --jh-muted:#4B6352; --jh-line:#DCE6D8; --jh-surface:#FFFFFF;
  --jh-deep:#13261B; --jh-deep-ink:#F1F7EE; --jh-firma:#8FD3A4; --jh-firma-ink:#12301F; --hoja3:#2F6B45;
  position:sticky; top:0; z-index:40; display:block;
  background:color-mix(in srgb,var(--jh-bg) 90%,transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--jh-line);
  font-family:"Figtree","Segoe UI",system-ui,-apple-system,Arial,sans-serif; font-size:16px; line-height:1.5;
  margin-inline:calc(-1 * var(--jch-bleed,0px));
  padding:env(safe-area-inset-top,0px) 0 0; margin-top:0; margin-bottom:0; gap:0;
}
header.jch{display:block; border-bottom:1px solid var(--jh-line)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jch{--jh-bg:#101B15; --jh-ink:#E3EFE0; --jh-muted:#A6BBA8; --jh-line:#22362A; --jh-surface:#16241C; --jh-deep:#8FD3A4; --jh-deep-ink:#12301F; --hoja3:#8FD3A4}
}
:root[data-theme="dark"] .jch{--jh-bg:#101B15; --jh-ink:#E3EFE0; --jh-muted:#A6BBA8; --jh-line:#22362A; --jh-surface:#16241C; --jh-deep:#8FD3A4; --jh-deep-ink:#12301F; --hoja3:#8FD3A4}
.jch *{box-sizing:border-box}
.jch .jch-bar{max-width:1440px; margin:0 auto; padding:0 clamp(1rem,3vw,2.25rem); display:flex; align-items:center; gap:1.5rem; height:72px}
.jch .jch-brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--jh-ink)}
.jch .jch-brand svg{width:40px; height:40px; flex-shrink:0; display:block}
.jch .jch-brand b{font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; font-size:1.3rem; letter-spacing:-.01em; white-space:nowrap; color:var(--jh-ink)}
.jch .jch-links{display:flex; gap:1.75rem; margin:0 auto}
.jch .jch-links a{color:var(--jh-muted); text-decoration:none; font-weight:500; font-size:1rem; white-space:nowrap}
.jch .jch-links a:hover,.jch .jch-links a[aria-current="page"]{color:var(--jh-ink)}
.jch .jch-right{display:flex; align-items:center; gap:.6rem}
.jch .jch-wa{display:inline-flex; align-items:center; gap:.45rem; background:var(--jh-deep); color:var(--jh-deep-ink); font-weight:600; font-size:1rem; text-decoration:none; padding:.62rem 1.1rem; border-radius:999px; white-space:nowrap}
.jch .jch-wa svg{width:18px; height:18px}
.jch .jch-btn{border:1px solid var(--jh-line); background:var(--jh-surface); color:var(--jh-ink); border-radius:999px; width:42px; height:42px; padding:0; margin:0; cursor:pointer; font-size:1.05rem; line-height:1; display:inline-grid; place-items:center; font-family:inherit}
.jch .jch-menu{display:none}
.jch :focus-visible{outline:3px solid var(--jh-firma); outline-offset:3px; border-radius:8px}
@media (max-width:900px){
  .jch .jch-links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; margin:0; background:var(--jh-surface); border-bottom:1px solid var(--jh-line); padding:.5rem clamp(1rem,3vw,2.25rem) 1rem}
  .jch .jch-links.open{display:flex}
  .jch .jch-links a{padding:.8rem 0; border-bottom:1px solid var(--jh-line); font-size:1.05rem}
  .jch .jch-menu{display:inline-grid}
  .jch .jch-right{margin-left:auto}
  .jch .jch-wa span{display:none}
  .jch .jch-wa{padding:.62rem}
}
@media (max-width:480px){
  .jch .jch-bar{gap:.6rem; height:64px}
  .jch .jch-brand b{font-size:1.1rem}
  .jch .jch-brand svg{width:34px; height:34px}
  .jch .jch-btn{width:38px; height:38px}
  .jch .jch-right{gap:.4rem}
}
@media print{.jch{display:none}}