/* ============================================================
   PLANNFUL — cabecera y pie ÚNICOS (WEB-V35-13)
   Fuente de verdad del chrome del sitio: lo cargan la portada, todas las páginas
   interiores (EN y ES) y las páginas sueltas. El estilo es el de la portada validada.
   Todo va con prefijo pf- y con sus propios tokens (--pf-*) para no chocar con
   styles.css / site.css ni con los estilos propios de las páginas sueltas.
   El marcado lo genera _build/build_site.py (chrome_header / chrome_footer).
   ============================================================ */
.pf-nav,.pf-footer{
  --pf-gold:#D9A94C; --pf-gold-2:#B8923C;
  --pf-bg:#FAF6EC; --pf-bg-2:#F1E9D8;
  --pf-ink:#1B2742; --pf-ink-soft:#46506A; --pf-ink-dim:#7C859B;
  --pf-line:rgba(27,39,66,.12); --pf-line-2:rgba(27,39,66,.20);
  --pf-glass-2:rgba(27,39,66,.05);
  --pf-veil:250,246,236;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; line-height:1.6; font-size:16px;
  color:var(--pf-ink); -webkit-font-smoothing:antialiased; text-align:left;
}
html[data-theme="dark"] .pf-nav, html[data-theme="dark"] .pf-footer{
  --pf-bg:#05070D; --pf-bg-2:#0A0E1A;
  --pf-ink:#F4F7FD; --pf-ink-soft:#AEBAD2; --pf-ink-dim:#7A8AA8;
  --pf-line:rgba(255,255,255,.10); --pf-line-2:rgba(255,255,255,.16);
  --pf-glass-2:rgba(255,255,255,.06);
  --pf-veil:5,7,13;
}
.pf-nav *,.pf-footer *{box-sizing:border-box}
.pf-nav a,.pf-footer a{text-decoration:none}
.pf-wrap{width:min(100% - 3.4rem,1440px);margin-inline:auto;padding:0}

/* ---------- cabecera ---------- */
.pf-nav{position:sticky;top:0;left:0;right:0;z-index:80;background:rgba(var(--pf-veil),.86);
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--pf-line);transition:background .3s,border-color .3s}
/* portada: superpuesta al arranque y transparente hasta hacer scroll */
.pf-nav--hero{position:fixed;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.pf-nav--hero.scrolled{background:rgba(var(--pf-veil),.72);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:var(--pf-line)}
.pf-nav__in{display:flex;align-items:center;gap:1.1rem;height:74px}
.pf-brand{display:flex;align-items:center;gap:.6rem;color:var(--pf-ink)}
.pf-brand__mark{width:48px;height:48px;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.pf-brand__name{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;letter-spacing:-.01em;color:var(--pf-ink)}
.pf-brand__name b{color:var(--ful,var(--pf-ink));font-weight:600;transition:color .45s ease}
.pf-nav__links{display:flex;gap:1.4rem;margin-left:1rem;font-size:.93rem;color:var(--pf-ink-soft)}
.pf-nav__links a{color:var(--pf-ink-soft)}
.pf-nav__links a:hover{color:var(--pf-ink)}
.pf-nav__sp{flex:1}
.pf-nav__tools{display:flex;align-items:center;gap:.5rem}
.pf-iconbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--pf-glass-2);border:1px solid var(--pf-line-2);
  color:var(--pf-ink);cursor:pointer;transition:.2s;padding:0;font:inherit}
.pf-iconbtn:hover{border-color:var(--pf-gold);color:var(--pf-gold)}
.pf-langsel{display:inline-flex;align-items:center;gap:.3rem;height:42px;padding:0 .7rem;border-radius:11px;background:var(--pf-glass-2);
  border:1px solid var(--pf-line-2);color:var(--pf-ink);font-weight:600;font-size:.86rem;cursor:pointer}
.pf-langsel:hover{border-color:var(--pf-gold)}
.pf-langsel svg{color:var(--pf-ink-dim)}
.pf-theme-sun{display:none}
html[data-theme="light"] .pf-theme-sun{display:block}
html[data-theme="light"] .pf-theme-moon{display:none}
.pf-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.97rem;padding:.85rem 1.6rem;
  border-radius:999px;cursor:pointer;border:1px solid transparent;line-height:1.3;white-space:nowrap;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
.pf-btn--gold{background:linear-gradient(135deg,var(--pf-gold),var(--pf-gold-2));color:#1a1206;box-shadow:0 16px 44px -12px rgba(217,169,76,.55)}
.pf-btn--gold:hover{transform:translateY(-2px);box-shadow:0 24px 60px -12px rgba(217,169,76,.7);color:#1a1206}
.pf-burger{display:none;background:var(--pf-glass-2);border:1px solid var(--pf-line-2);border-radius:11px;width:42px;height:42px;color:var(--pf-ink);cursor:pointer;padding:0}
@media(max-width:880px){
  .pf-nav__links{display:none}
  .pf-nav__tools .pf-btn--gold{display:none}
  .pf-burger{display:grid;place-items:center}
  /* menú móvil: panel bajo la barra */
  .pf-nav.is-open .pf-nav__links{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;
    background:rgb(var(--pf-veil));border-bottom:1px solid var(--pf-line);padding:.4rem 1.2rem 1rem;font-size:1rem}
  .pf-nav.is-open .pf-nav__links a{padding:.8rem .2rem;border-bottom:1px solid var(--pf-line)}
  .pf-nav.is-open .pf-nav__links a:last-child{border-bottom:0}
}
@media(max-width:600px){
  .pf-wrap{width:min(100% - 2.4rem,1440px)}
  .pf-nav__in{gap:.55rem}
  .pf-brand{gap:.45rem;min-width:0}
  .pf-brand__mark{width:38px;height:38px}
  .pf-brand__name{font-size:1.15rem}
  .pf-nav__tools{gap:.35rem}
  .pf-iconbtn{width:36px;height:36px}
  .pf-langsel{height:36px;padding:0 .5rem;font-size:.78rem;gap:.25rem}
  .pf-langsel svg{width:14px;height:14px}
  .pf-burger{width:36px;height:36px}
}
@media(max-width:380px){
  .pf-brand__name{font-size:1.02rem}
  .pf-langsel svg{display:none}
  .pf-iconbtn{width:34px;height:34px}
  .pf-burger{width:34px;height:34px}
}

/* ---------- pie ---------- */
.pf-footer{padding:clamp(3rem,5vw,4rem) 0 2rem;border-top:1px solid var(--pf-line);background:var(--pf-bg-2);color:var(--pf-ink)}
.pf-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem}
.pf-footer h4{font-family:'Inter',system-ui,sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pf-ink-dim);margin:0 0 .9rem;font-weight:700;line-height:1.4}
.pf-footer a{display:block;color:var(--pf-ink-soft);padding:.22rem 0;font-size:.92rem}
.pf-footer a:hover{color:var(--pf-gold)}
.pf-footer__brand p{color:var(--pf-ink-soft);font-size:.92rem;max-width:32ch;margin:.8rem 0 1.1rem}
.pf-footer__brand .pf-brand{display:inline-flex;padding:0}
.pf-footer__brand .pf-brand img{display:block}
.pf-social{display:flex;gap:.65rem}
.pf-footer .pf-social a{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--pf-line-2);color:var(--pf-ink-soft);background:var(--pf-glass-2);transition:.2s}
.pf-footer .pf-social a:hover{color:#fff;background:var(--pf-gold);border-color:var(--pf-gold);transform:translateY(-3px)}
.pf-footer__bar{border-top:1px solid var(--pf-line);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--pf-ink-dim);font-size:.84rem}
@media(max-width:1080px){.pf-footer__grid{grid-template-columns:1fr 1fr 1fr}.pf-footer__brand{grid-column:1/-1}}
@media(max-width:700px){.pf-footer__grid{grid-template-columns:1fr 1fr}}

/* Páginas que solo existen en claro (calculadoras): el chrome se queda en claro y no ofrece el cambio de tema */
html[data-theme] .pf-nav--light, html[data-theme] .pf-footer--light{
  --pf-bg:#FAF6EC; --pf-bg-2:#F1E9D8;
  --pf-ink:#1B2742; --pf-ink-soft:#46506A; --pf-ink-dim:#7C859B;
  --pf-line:rgba(27,39,66,.12); --pf-line-2:rgba(27,39,66,.20);
  --pf-glass-2:rgba(27,39,66,.05);
  --pf-veil:250,246,236;
}
.pf-nav--light #themeBtn{display:none}