/* B24 (owner 26/10, canvas «NIVRA · Sitio web»): one header, one mobile menu and one footer on every page.
   Loaded after each page's own styles; class names are prefixed sx- so older page styles cannot reach them. */
:root{--sx-bg:#16181b;--sx-ink:#f2f3f0;--sx-soft:#c9cec4;--sx-dim:#8d938b;--sx-line:#2b3034;--sx-lime:#cfe95a;--sx-lime-ink:#16181b;--sx-card:#1d2023}
.sx-header,.sx-footer,.sx-menu-panel{font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--sx-ink);box-sizing:border-box}
.sx-header *,.sx-footer *,.sx-menu-panel *{box-sizing:border-box}
.sx-header{position:relative;z-index:40;display:flex;align-items:center;gap:24px;max-width:1440px;margin:0 auto;padding:0 80px;height:90px;border-bottom:1px solid var(--sx-line);background:var(--sx-bg)}
.sx-header--overlay{position:absolute;inset:0 0 auto 0;max-width:none;background:transparent;padding:0 max(80px,calc((100vw - 1280px)/2))}
.sx-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#ededea;text-decoration:none;flex:0 0 auto}
.sx-vial{position:relative;display:inline-block;width:46px;height:16px;border-radius:8px;background:#ededea}
.sx-vial i{position:absolute;top:5px;width:1px;height:6px;background:rgba(22,24,27,.28)}.sx-vial i:first-child{left:10px}.sx-vial i:last-child{left:35px}
.sx-vial b{position:absolute;left:15px;top:4px;width:16px;height:8px;border-radius:4px;background:var(--sx-lime)}
.sx-word{font-weight:600;font-size:15px;letter-spacing:.28em}
.sx-nav{display:flex;align-items:center;gap:8px;margin:0 auto}
.sx-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:22px;color:#e9ebe6;text-decoration:none;font-size:15px;transition:color .15s,background .15s}
.sx-nav a:hover{color:var(--sx-lime)}.sx-nav a[aria-current="page"]{color:var(--sx-lime)}
/* b24.3 «Entrada» B (owner 03/11): «Ingresar ↗» as a quiet text button and «Empezar» in lime beside it; nothing else in the header changes. */
.sx-login{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:23px;color:var(--sx-ink);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;transition:color .15s}
.sx-login:hover{color:var(--sx-lime)}
.sx-header .sx-join{display:inline-flex;align-items:center;min-height:46px;margin-left:-12px;padding:0 22px;border-radius:23px;background:var(--sx-lime);color:var(--sx-lime-ink);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;transition:box-shadow .2s}
.sx-header .sx-join:hover{box-shadow:0 0 0 1px var(--sx-lime),0 0 28px rgba(207,233,90,.32)}
.sx-menu{display:none;width:44px;height:44px;margin-right:-8px;border:0;border-radius:22px;background:transparent;color:var(--sx-ink);cursor:pointer;place-items:center}
.sx-menu svg{display:block}
.sx-header :is(a,button):focus-visible,.sx-footer :is(a,button):focus-visible,.sx-menu-panel :is(a,button):focus-visible{outline:2px solid var(--sx-lime);outline-offset:3px}
/* Mobile menu: opaque (the hero never shows through), below the header. */
.sx-menu-panel{position:fixed;z-index:39;inset:68px 0 0 0;overflow:auto;overscroll-behavior:contain;padding:12px 20px 40px;background:var(--sx-bg);border-top:1px solid var(--sx-line)}
.sx-menu-panel[hidden]{display:none}
.sx-menu-group{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid var(--sx-line)}
.sx-menu-group:last-child{border-bottom:0}
.sx-menu-group>p{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-dim)}
.sx-menu-group a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;color:var(--sx-ink);text-decoration:none;font-size:18px}
.sx-menu-group a small{color:var(--sx-soft);font-size:14px;margin-left:auto}
.sx-menu-primary a{font-size:24px;font-weight:600;letter-spacing:-.02em}
.sx-menu-panel .sx-start{justify-content:space-between;margin-top:14px;padding:0 24px;min-height:54px;border-radius:27px;background:var(--sx-lime);color:var(--sx-lime-ink);font-size:16px;font-weight:600}
.sx-menu-panel .sx-legal a{font-size:16px;color:var(--sx-soft)}
/* Owner 02/11: the menu ends with the footer's symbols row (site.js copies it): apps on the left, networks on the right. */
.sx-menu-socials{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:16px 0 0}
.sx-menu-socials .nivra-socials{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;width:auto;margin:0;padding:0;border:0}
.sx-menu-socials .nivra-socials>a{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:#e1e3de}
.sx-menu-socials .nivra-socials img{display:block;width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1);opacity:.82}
.sx-menu-socials .nivra-socials>a:is(:hover,:focus-visible){background:#f2f3f01a}
@media (max-width:900px){.sx-menu-socials .nivra-socials>a{width:min(36px,9.2vw)}}
body.sx-menu-open{overflow:hidden}
/* Footer: logo + phrase, three fixed columns, socials and ©. */
.sx-footer{border-top:1px solid var(--sx-line);background:var(--sx-bg)}
.sx-footer-inner{max-width:1440px;margin:0 auto;padding:56px 80px;display:flex;flex-direction:column;gap:40px}
.sx-footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.sx-footer-brand{display:flex;flex-direction:column;gap:14px;max-width:280px}
.sx-footer-brand p{margin:0;color:var(--sx-soft);font-size:14px;line-height:1.6}
.sx-footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.sx-footer-cols nav{display:flex;flex-direction:column;min-width:150px}
.sx-footer-cols .sx-footer-title{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-dim)}
.sx-footer-cols a,.sx-footer .site-privacy-link{display:flex;align-items:center;min-height:44px;width:auto;margin:0;padding:0;color:var(--sx-soft);text-decoration:none;font-size:14px;line-height:1.4;order:0;grid-column:auto}
.sx-footer-cols a:hover,.sx-footer .site-privacy-link:hover{color:var(--sx-lime)}
.sx-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--sx-line);padding-top:24px}
.sx-footer-bottom small{font-size:13px;color:var(--sx-dim)}
/* Owner 01/11: where NIVRA is used and its networks, as symbols with a hint, the same in the hero and in every footer.
   The stores stay «próximamente»: no link until they exist. */
.nivra-platforms,.hero-socials,body footer.sx-footer nav.nivra-socials.nivra-socials{display:flex;align-items:center;gap:2px;width:auto;margin:0;padding:0;border:0}
.hero-socials{justify-content:flex-end}
.nivra-platforms>*,.hero-socials>a,body footer.sx-footer nav.nivra-socials.nivra-socials>a{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:#e1e3de}
.nivra-platforms svg{display:block;width:19px;height:19px}
.nivra-platforms>span{opacity:.62;cursor:default}
.hero-socials img,body footer.sx-footer nav.nivra-socials.nivra-socials img{display:block;width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1);opacity:.82}
.nivra-platforms>a:is(:hover,:focus-visible),.hero-socials>a:is(:hover,:focus-visible),body footer.sx-footer nav.nivra-socials.nivra-socials>a:is(:hover,:focus-visible){border:0;background:#f2f3f01a}
.nivra-platforms>a:focus-visible,.hero-socials>a:focus-visible{outline:2px solid var(--sx-lime,#cfe95a);outline-offset:2px}
@media (max-width:900px){.nivra-platforms>*,.hero-socials>a,body footer.sx-footer nav.nivra-socials.nivra-socials>a{width:min(36px,9.2vw)}}
@media (max-width:560px){.sx-footer-bottom{gap:6px 0}.sx-footer-bottom small{order:3;flex-basis:100%;text-align:center}}
@media (max-width:1100px){.sx-header{padding:0 32px}.sx-header--overlay{padding:0 32px}.sx-footer-inner{padding:48px 32px}.sx-nav a{padding:0 10px}}
@media (max-width:860px){
  .sx-header,.sx-header--overlay{height:68px;padding:0 20px;gap:10px}
  .sx-header{position:sticky;top:0}
  .sx-header--overlay{position:absolute}
  .sx-nav{display:none}
  .sx-login{margin-left:auto;min-height:44px;padding:0 6px;font-size:15px}
  .sx-login span{display:none}
  .sx-header .sx-join{min-height:40px;margin-left:-2px;padding:0 16px;font-size:14px}
  .sx-menu{display:grid}
  .sx-footer-inner{padding:40px 20px 48px;gap:32px}
  .sx-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;width:100%}
  .sx-footer-cols nav{min-width:0}
}
/* The two buttons give room on narrow phones; below 350 px «Empezar» stays in the menu («Empezar con NIVRA»). */
@media (max-width:380px){.sx-login{padding:0 4px}.sx-header .sx-join{margin-left:-4px;padding:0 12px}}
@media (max-width:349px){.sx-header .sx-join{display:none}}
body.sx-menu-open .sx-header--overlay{background:var(--sx-bg);position:fixed}
@media (prefers-reduced-motion:reduce){.sx-header *,.sx-footer *,.sx-menu-panel *{transition:none!important}}
.sx-footer-cols a{gap:6px}
/* The footer's three groups: a plain title on wide screens, a folding row on a phone (site.js). */
.sx-footer-links{display:contents}
.sx-footer-links[hidden]{display:none}
.sx-footer-fold{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;text-transform:inherit}
@media (max-width:680px){
  .sx-footer-inner{padding:28px 20px 32px;gap:18px}
  .sx-footer-top{gap:16px}
  .sx-footer-brand{gap:8px;max-width:none}
  .sx-footer-cols{display:block}
  .sx-footer-cols nav{border-top:1px solid var(--sx-line)}
  .sx-footer-cols nav:last-of-type{border-bottom:1px solid var(--sx-line)}
  .sx-footer-cols .sx-footer-title{margin:0}
  .sx-footer-fold{position:relative;width:100%;min-height:48px;padding-right:32px;color:var(--sx-ink);cursor:pointer}
  .sx-footer-fold::after{content:"";position:absolute;top:50%;right:6px;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}
  .sx-footer-fold[aria-expanded=true]::after{margin-top:-2px;transform:rotate(225deg)}
  .sx-footer-links{display:block;padding-bottom:8px}
  .sx-footer-cols .sx-footer-links a{min-height:40px}
  .sx-footer-bottom{border-top:0;padding-top:0}
}
.ws-demo-caption a,.scale-link,.ws-faq-list .ws-inline-action,.guide-web-fallback{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.sx-menu .sx-i-close{display:none}.sx-menu[aria-expanded=true] .sx-i-open{display:none}.sx-menu[aria-expanded=true] .sx-i-close{display:inline}
body.sx-menu-open .plan-dock{display:none}
.plans-direct-access a{display:inline-flex;align-items:center;min-height:44px}
.info-tabs a,nav[aria-label="Información"] a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.plan-dock-link{min-height:44px;display:inline-flex;align-items:center}