/* ========================================================================== TOPSA · Header de páginas interiores Mismo lenguaje que el header del home (logo oficial, menú, píldora, burger) pero autónomo: tokens y clases propias (tsh-*) para no depender del CSS del home ni del tema. Oscuro por defecto, claro si el visitante lo eligió en el home (localStorage "topsa.theme" → data-theme en ). ========================================================================== */ .tsh{ --tsh-bg:#0A0A0A;--tsh-ink:#F2EFEA;--tsh-muted:#A8A199;--tsh-rule:#2A2825; --tsh-orange:#FF6A00;--tsh-pill-line:#4A4743;--tsh-pill-bg:transparent;--tsh-pad:48px; --tsh-sans:Inter,"Helvetica Neue",Arial,sans-serif; position:sticky;top:0;z-index:9000;margin:0; background:var(--tsh-bg);color:var(--tsh-ink);font-family:var(--tsh-sans);line-height:1.5; -webkit-font-smoothing:antialiased;border-bottom:1px solid var(--tsh-rule) } :root[data-theme="light"] .tsh{--tsh-bg:#F7F5F1;--tsh-ink:#111111;--tsh-muted:#5D5954;--tsh-rule:#DDD9D2;--tsh-pill-line:#111111;--tsh-pill-bg:#FFFFFF} body.admin-bar .tsh{top:32px} @media (max-width:782px){body.admin-bar .tsh{top:46px}} /* El header del tema (letras blancas sobre blanco) se oculta cuando el nuestro está activo. */ body.tsh-on #site-header,body.tsh-on .site-header{display:none} /* El header del tema aportaba el aire superior; al quitarlo, lo pone el contenido. */ body.tsh-on .site-main,body.tsh-on main.site-main{padding-top:32px} .tsh__in{width:min(100% - 2*var(--tsh-pad),1440px);margin:0 auto;min-height:76px;display:flex;align-items:center;gap:28px;position:relative;z-index:2} .tsh a,.tsh a:visited{color:inherit;text-decoration:none} .tsh a:focus-visible,.tsh button:focus-visible{outline:2px solid var(--tsh-orange);outline-offset:2px} /* Logo oficial en dos recortes; el tema decide cuál se ve. */ .tsh__logo{flex:0 0 auto;display:block;line-height:0} .tsh__logo img{height:22px;width:auto;max-width:none;display:none} .tsh__logo .tsh__logo--claro{display:block} :root[data-theme="light"] .tsh__logo .tsh__logo--claro{display:none} :root[data-theme="light"] .tsh__logo .tsh__logo--oscuro{display:block} .tsh__nav{display:flex;gap:34px;margin-left:64px;font-size:15.5px;font-weight:500;white-space:nowrap} .tsh .tsh__nav a{color:var(--tsh-ink);opacity:.9;transition:color .18s ease,opacity .18s ease} .tsh .tsh__nav a:hover,.tsh .tsh__nav a.is-on{color:var(--tsh-orange);opacity:1} .tsh__right{margin-left:auto;display:flex;align-items:center;gap:18px} /* Píldora y burger con dos clases y todos los estados: Hello Elementor pinta a/button de #c36 y sus reglas :hover (0,1,1) ganan a una clase sola. */ .tsh .tsh__pill,.tsh .tsh__pill:visited{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 20px;border-radius:999px; border:1px solid var(--tsh-pill-line);background:var(--tsh-pill-bg);color:var(--tsh-ink); font:500 14px/1.2 var(--tsh-sans);white-space:nowrap;cursor:pointer;transition:border-color .18s ease,color .18s ease} .tsh .tsh__pill:hover,.tsh .tsh__pill:focus,.tsh .tsh__pill:active{border-color:var(--tsh-orange);background:var(--tsh-pill-bg);color:var(--tsh-orange)} .tsh__pill svg{width:18px;height:18px;flex:0 0 auto} .tsh .tsh__burger,.tsh .tsh__burger:hover,.tsh .tsh__burger:focus,.tsh .tsh__burger:active{display:none;appearance:none;width:44px;height:44px;padding:0;border:0;border-radius:0; background:none;color:var(--tsh-ink);cursor:pointer;place-items:center} .tsh__burger svg{width:24px;height:24px;display:block} .tsh__burger .tsh__burger-x{display:none} .tsh__burger.is-open .tsh__burger-bars{display:none} .tsh__burger.is-open .tsh__burger-x{display:block} /* Menú móvil a pantalla completa, como en el home. */ .tsh__menu{display:none;position:fixed;inset:0;z-index:1;background:var(--tsh-bg);padding:100px var(--tsh-pad) 40px; flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:auto;overscroll-behavior:contain} .tsh__menu:not([hidden]){display:flex} .tsh__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:38px} .tsh .tsh__list a{display:inline-block;position:relative;padding:4px 2px;font-size:21px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--tsh-ink);opacity:.7;transition:opacity .18s ease} .tsh .tsh__list a.is-on,.tsh .tsh__list a:hover{opacity:1;color:var(--tsh-ink)} .tsh .tsh__list a.is-on::after{content:"";position:absolute;left:50%;bottom:-12px;width:40px;height:1.5px;background:var(--tsh-orange);transform:translateX(-50%)} .tsh__menu .tsh__pill{margin-top:64px} body.tsh-menu-open{overflow:hidden} @media (max-width:1240px){.tsh__in{gap:20px}.tsh__nav{margin-left:32px;gap:22px;font-size:14.5px}.tsh__right{gap:12px}.tsh .tsh__pill{padding:0 16px}} @media (max-width:1100px){.tsh__nav,.tsh__right .tsh__pill{display:none}.tsh .tsh__burger{display:grid;margin-left:2px}.tsh__right{gap:8px}} @media (max-width:900px){.tsh{--tsh-pad:20px}.tsh__in{min-height:68px;gap:14px}.tsh__logo img{height:18px}} @media (prefers-reduced-motion:reduce){.tsh *{transition:none!important}} @media print{.tsh{display:none}}