/* ============ fonts: self-hosted, SIL Open Font License (see /assets/fonts/LICENSE.txt) ============ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2-variations"), url("/assets/fonts/inter-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-var.woff2") format("woff2-variations"), url("/assets/fonts/space-grotesk-latin-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2-variations"), url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/silkscreen-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/silkscreen-latin-700.woff2") format("woff2"); }

/* ============ tokens ============ */
:root {
  --bg: #0F0E1A; --bg-2: #15132A; --ink: #F2F0FF; --muted: #B9B4CF; --dim: #8F8AAD;
  --violet: #6A3DF0; --violet-2: #8B6CFF; --violet-hover: #7A52F5; --accent-text: #A994FF; --green: #34D39A; --gold: #FFC83D; --paper: #F6F5F0;
  --glass: rgba(27, 25, 46, 0.74); --glass-strong: rgba(21, 19, 38, 0.9); --glass-line: rgba(255, 255, 255, 0.09); --glass-hi: rgba(255, 255, 255, 0.16);
  --glow: rgba(106, 61, 240, 0.34); --grid: rgba(139, 108, 255, 0.055);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(255, 255, 255, 0.04) inset;
  --btn-ink: #FFFFFF; --gold-ink: #FFC83D; --green-ink: #34D39A; --stamp-ink: #A994FF; --red-ink: #FF8A8F;
  --icon-p: #F6F5F0; --icon-d: #4A4670; --icon-k: #15123A; --icon-a: #8B6CFF; --icon-g: #34D39A; --icon-y: #FFC83D;
  --door: linear-gradient(90deg, #17152B 0%, #221F3A 55%, #1B1930 100%);
  --letter: #F6F5F0; --letter-ink: #2B2848;
  --caret: #34D39A;
  --mark-glow: drop-shadow(0 10px 22px rgba(106, 61, 240, 0.38));
  /* Lex Laboratory mark (lexlaboratory.com neon on dark) */
  --lex-a: #00FFC3; --lex-b: #5FD0FF; --lex-c: #7B4FFF; --lex-side-near: #0B5E52; --lex-side-far: #2A1A66;
  --lex-glow: rgba(0, 255, 195, 0.2); --lex-shadow: rgba(0, 255, 195, 0.35);
  /* motion tokens (animate skill): strong curves, UI stays under 300ms */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 160ms; --t-ui: 200ms; --t-hover: 240ms; --t-reveal: 640ms; --stagger: 60ms;
  --gutter: 16px; --wrap: 1200px; --radius: 16px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F6F5F0; --bg-2: #ECEAF3; --ink: #15132A; --muted: #47435F; --dim: #5E5A7A;
    --accent-text: #5530D6; --gold-ink: #7A5700; --green-ink: #137A55; --stamp-ink: #5530D6; --red-ink: #B42318;
    --glass: rgba(255, 255, 255, 0.76); --glass-strong: rgba(255, 255, 255, 0.94); --glass-line: rgba(15, 14, 26, 0.1); --glass-hi: rgba(255, 255, 255, 0.95);
    --glow: rgba(139, 108, 255, 0.26); --grid: rgba(106, 61, 240, 0.06);
    --shadow: 0 30px 70px -34px rgba(40, 30, 90, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
    --icon-p: #2B2848; --icon-d: #B9B4A7; --icon-y: #D9A400; --icon-g: #1FA877;
    --door: linear-gradient(90deg, #E9E6F4 0%, #F8F7FC 55%, #ECE9F6 100%);
    --letter: #FFFFFF; --caret: #6A3DF0;
    --mark-glow: drop-shadow(0 10px 20px rgba(40, 30, 90, 0.28));
    --lex-a: #00B48C; --lex-b: #2B8FD6; --lex-c: #6A3CF0; --lex-side-near: #0E7A68; --lex-side-far: #3B28A0;
    --lex-glow: rgba(0, 180, 140, 0.16); --lex-shadow: rgba(0, 150, 120, 0.25);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F6F5F0; --bg-2: #ECEAF3; --ink: #15132A; --muted: #47435F; --dim: #5E5A7A;
  --accent-text: #5530D6; --gold-ink: #7A5700; --green-ink: #137A55; --stamp-ink: #5530D6; --red-ink: #B42318;
  --glass: rgba(255, 255, 255, 0.76); --glass-strong: rgba(255, 255, 255, 0.94); --glass-line: rgba(15, 14, 26, 0.1); --glass-hi: rgba(255, 255, 255, 0.95);
  --glow: rgba(139, 108, 255, 0.26); --grid: rgba(106, 61, 240, 0.06);
  --shadow: 0 30px 70px -34px rgba(40, 30, 90, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
  --icon-p: #2B2848; --icon-d: #B9B4A7; --icon-y: #D9A400; --icon-g: #1FA877;
  --door: linear-gradient(90deg, #E9E6F4 0%, #F8F7FC 55%, #ECE9F6 100%);
  --letter: #FFFFFF; --caret: #6A3DF0;
  --mark-glow: drop-shadow(0 10px 20px rgba(40, 30, 90, 0.28));
  --lex-a: #00B48C; --lex-b: #2B8FD6; --lex-c: #6A3CF0; --lex-side-near: #0E7A68; --lex-side-far: #3B28A0;
  --lex-glow: rgba(0, 180, 140, 0.16); --lex-shadow: rgba(0, 150, 120, 0.25);
  color-scheme: light;
}

/* the same two token sets on any container (the header/footer comparison page) */
.t-dark {
  --bg: #0F0E1A; --bg-2: #15132A; --ink: #F2F0FF; --muted: #B9B4CF; --dim: #8F8AAD;
  --violet: #6A3DF0; --violet-2: #8B6CFF; --violet-hover: #7A52F5; --accent-text: #A994FF; --green: #34D39A; --gold: #FFC83D; --paper: #F6F5F0;
  --glass: rgba(27, 25, 46, 0.74); --glass-strong: rgba(21, 19, 38, 0.9); --glass-line: rgba(255, 255, 255, 0.09); --glass-hi: rgba(255, 255, 255, 0.16);
  --glow: rgba(106, 61, 240, 0.34); --grid: rgba(139, 108, 255, 0.055);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75), 0 2px 0 0 rgba(255, 255, 255, 0.04) inset;
  --btn-ink: #FFFFFF; --gold-ink: #FFC83D; --green-ink: #34D39A; --stamp-ink: #A994FF; --red-ink: #FF8A8F;
  --icon-p: #F6F5F0; --icon-d: #4A4670; --icon-k: #15123A; --icon-a: #8B6CFF; --icon-g: #34D39A; --icon-y: #FFC83D;
  --door: linear-gradient(90deg, #17152B 0%, #221F3A 55%, #1B1930 100%);
  --letter: #F6F5F0; --letter-ink: #2B2848;
  --caret: #34D39A;
  --mark-glow: drop-shadow(0 10px 22px rgba(106, 61, 240, 0.38));
  /* Lex Laboratory mark (lexlaboratory.com neon on dark) */
  --lex-a: #00FFC3; --lex-b: #5FD0FF; --lex-c: #7B4FFF; --lex-side-near: #0B5E52; --lex-side-far: #2A1A66;
  --lex-glow: rgba(0, 255, 195, 0.2); --lex-shadow: rgba(0, 255, 195, 0.35);
    color-scheme: dark; }
.t-light {
  --bg: #F6F5F0; --bg-2: #ECEAF3; --ink: #15132A; --muted: #47435F; --dim: #5E5A7A;
  --accent-text: #5530D6; --gold-ink: #7A5700; --green-ink: #137A55; --stamp-ink: #5530D6; --red-ink: #B42318;
  --glass: rgba(255, 255, 255, 0.76); --glass-strong: rgba(255, 255, 255, 0.94); --glass-line: rgba(15, 14, 26, 0.1); --glass-hi: rgba(255, 255, 255, 0.95);
  --glow: rgba(139, 108, 255, 0.26); --grid: rgba(106, 61, 240, 0.06);
  --shadow: 0 30px 70px -34px rgba(40, 30, 90, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
  --icon-p: #2B2848; --icon-d: #B9B4A7; --icon-y: #D9A400; --icon-g: #1FA877;
  --door: linear-gradient(90deg, #E9E6F4 0%, #F8F7FC 55%, #ECE9F6 100%);
  --letter: #FFFFFF; --caret: #6A3DF0;
  --mark-glow: drop-shadow(0 10px 20px rgba(40, 30, 90, 0.28));
  --lex-a: #00B48C; --lex-b: #2B8FD6; --lex-c: #6A3CF0; --lex-side-near: #0E7A68; --lex-side-far: #3B28A0;
  --lex-glow: rgba(0, 180, 140, 0.16); --lex-shadow: rgba(0, 150, 120, 0.25);
  color-scheme: light; }


.glass {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}

/* the Black Tie mark: full bleed, integer scale, never framed */
.mark { display: block; line-height: 0; }
.mark-svg { shape-rendering: crispEdges; image-rendering: pixelated; }
.mark--48 .mark-svg { width: 48px; height: 48px; }
.mark--72 .mark-svg { width: 72px; height: 72px; }
.mark--96 .mark-svg { width: 96px; height: 96px; }
.mark--glow { filter: var(--mark-glow); }


/* elevator panel menu (mobile + tablet) */
.sheet {
  pointer-events: auto; width: min(560px, 100% - 2 * var(--gutter)); margin: 10px auto 0; padding: 18px;
  transform-origin: 50% 0; transform: translateY(-8px) scale(0.97); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--ease-out), opacity var(--t-ui) var(--ease-out), visibility 0s linear 260ms;
  background: var(--glass-strong);
}
.sheet.is-instant { transition: none; }
.sheet.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 260ms var(--ease-out), opacity var(--t-ui) var(--ease-out); }
.sheet__title { text-align: center; font: 400 11px/1 Silkscreen, monospace; color: var(--dim); margin-bottom: 14px; }
.sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.floor-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-radius: 14px; text-align: center;
  text-decoration: none; color: var(--ink); border: 1px solid var(--glass-line); font: 500 13px/1.2 Inter, sans-serif;
  opacity: 0; transform: translateY(6px); transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.sheet.is-open .floor-btn { opacity: 1; transform: none; transition-delay: calc(var(--i) * 30ms); }
.floor-btn b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 400 12px/1 Silkscreen, monospace; border: 1px solid var(--glass-line); background: var(--glass-hi); }
.floor-btn[aria-current="true"] b { background: var(--violet); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px rgba(106, 61, 240, 0.25); }
.sheet__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sheet__foot .pill { width: 100%; }
.sheet__foot .pill .lbl { display: inline; }
@media (hover: hover) and (pointer: fine) { .floor-btn:hover { background: var(--glass-hi); } }


/* Lex Laboratory LEX mark in CSS 3D (ported from the app's LexLogo3D) */
.lex3d { position: relative; display: grid; place-items: center; width: 168px; height: 96px; perspective: 700px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: 16px; }
.lex3d[data-dragging] { cursor: grabbing; }
.lex3d__glow { position: absolute; inset: 20% 18% 22%; background: radial-gradient(closest-side, var(--lex-glow), transparent); filter: blur(14px); pointer-events: none; }
.lex3d__body { position: relative; width: 120px; aspect-ratio: 630 / 262; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-28deg); will-change: transform; }
.lex3d__slice { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: visible; }
.lex3d__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lex3d__svg--side { color: var(--lex-side-near); filter: brightness(0.85); }
.lex3d__slice:nth-child(n + 6) .lex3d__svg--side { color: var(--lex-side-far); }
.lex3d__slice--front .lex3d__svg { filter: drop-shadow(0 0 6px var(--lex-shadow)); }
.lex3d__stop--a { stop-color: var(--lex-a); } .lex3d__stop--b { stop-color: var(--lex-b); } .lex3d__stop--c { stop-color: var(--lex-c); }
.lex3d__floor { position: absolute; left: 26%; right: 26%; bottom: 10px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, var(--lex-shadow), transparent); filter: blur(4px); pointer-events: none; }


:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; border-radius: 10px; }
body > main#main { min-height: 100vh; }
.kbd { font: 500 12px/1 "JetBrains Mono", monospace; padding: 3px 6px; border-radius: 5px; background: var(--glass-hi); border: 1px solid var(--glass-line); color: var(--ink); }
/* ============ chrome: command bar, brand lockup, footer ============
   Three variants share ONE markup; the attribute data-brand on <html> (or on any
   container, as on opciones-header-footer.html) picks the look:
     a «Placa»  official app icon tile + wordmark, nav centred, tools right
     b «Solapa» symmetric: nav split around a centred tuxedo crest
     c «Moño»   wordmark whose dot is the violet pixel bow tie (default)
   Swapping later = change data-brand. Nothing else. */

/* ---- brand lockup ---- */
.brand { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; border-radius: 10px; }
.brand .mark { flex: none; }
.brand__tile { --mk: 28px; }
.brand__crest { --mk: 28px; display: none; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px var(--glass-hi); }
.brand__word { display: inline-flex; align-items: baseline; font: 600 18px/1 "Space Grotesk", Inter, sans-serif; letter-spacing: -0.025em; white-space: nowrap; }
.brand__dot { display: inline-flex; align-items: center; align-self: stretch; }
.brand__period { color: var(--accent-text); }
.brand__bow { --mk: 18px; display: none; margin: 0 3px 0 2px; transform: translateY(1px); }
.brand__word .mark { line-height: 0; }

/* ---- command bar ---- */
.cmd { position: fixed; top: 10px; left: 0; right: 0; z-index: 80; pointer-events: none; }
.cmd__bar {
  pointer-events: auto; position: relative; width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto;
  min-height: 58px; padding: 6px 7px 6px 14px; display: flex; align-items: center; gap: 4px; border-radius: 14px;
}
/* elevator readout: a hairline, the floor number that rolls, the floor name */
.cmd__floor { flex: none; display: none; align-items: center; gap: 6px; height: 20px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--glass-line); font: 400 10px/1 Silkscreen, monospace; color: var(--dim); white-space: nowrap; }
.fl__digits { display: inline-block; height: 12px; overflow: hidden; color: var(--ink); line-height: 12px; }
.fl__roll { display: flex; flex-direction: column; transition: transform 420ms var(--ease-out); }
.fl__roll span { display: block; height: 12px; text-align: center; }
.fl__name { display: inline-block; min-width: 5ch; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.fl__name.is-swap { opacity: 0; transform: translateY(-4px); }

.cmd__navs { display: none; gap: 2px; }
.cmd__nav { display: flex; gap: 2px; }
.cmd__link {
  position: relative; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 9px;
  font: 500 13px/1 Inter, sans-serif; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.cmd__link::before { content: ""; position: absolute; inset: -4px 0; } /* 44 px hit area, same look */
.cmd__link::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 2px; margin-left: -7px; background: var(--violet-2); transform: scaleX(0); transition: transform var(--t-hover) var(--ease-out); }
.cmd__link[aria-current="true"] { color: var(--ink); }
.cmd__link[aria-current="true"]::after { transform: scaleX(1); }

.cmd__util { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ib {
  position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; padding: 0;
  background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; font: 400 10px/1 Silkscreen, monospace;
  transition: color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.ib::before { content: ""; position: absolute; inset: -4px; }
.ib svg { width: 15px; height: 15px; }
.menu-btn {
  position: relative; flex: none; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px;
  border: 1px solid var(--glass-line); background: transparent; color: var(--ink); cursor: pointer; font: 500 13px/1 Inter, sans-serif;
  transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.menu-btn::before { content: ""; position: absolute; inset: -5px -4px; }
.menu-btn .bars { position: relative; width: 14px; height: 9px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--t-hover) var(--ease-out); }
.menu-btn .bars::before { top: 0; } .menu-btn .bars::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-3.75px) rotate(-45deg); }
.cta-pill {
  position: relative; flex: none; height: 36px; margin-left: 6px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px;
  background: var(--violet); color: #fff; font: 600 13px/1 Inter, sans-serif; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: background-color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.cta-pill::before { content: ""; position: absolute; inset: -4px -2px; }
.cta-pill svg { width: 14px; height: 14px; }
.cta-pill:active, .menu-btn:active, .ib:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .cmd__link:hover { color: var(--ink); background: var(--glass-hi); }
  .ib:hover { color: var(--ink); background: var(--glass-hi); }
  .menu-btn:hover { background: var(--glass-hi); }
  .cta-pill:hover { background: var(--violet-hover); }
}
.pill { /* sheet footer and small secondary buttons */
  flex: none; position: relative; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--glass-line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/1 Inter, sans-serif; color: var(--ink); background: transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: var(--glass-hi); } }

/* ---- variant A «Placa» and C «Moño»: brand left, nav on the exact axis ---- */
[data-brand="a"] .brand__word .brand__period { color: var(--accent-text); }
[data-brand="c"] .brand__tile, [data-brand="b"] .brand__tile { display: none; }
[data-brand="c"] .brand__period { display: none; }
[data-brand="c"] .brand__bow { display: block; }
[data-brand="c"] .brand__word { font-size: 19px; }
@media (min-width: 1260px) {
  [data-brand="a"] .cmd__navs, [data-brand="c"] .cmd__navs { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (min-width: 1380px) { [data-brand="a"] .cmd__floor, [data-brand="c"] .cmd__floor { display: inline-flex; } }

/* ---- variant B «Solapa»: nav split, crest on the axis ---- */
[data-brand="b"] .cmd__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-left: 7px; column-gap: 8px; }
[data-brand="b"] .brand { grid-column: 2; grid-row: 1; justify-self: center; }
[data-brand="b"] .brand__crest { display: block; }
[data-brand="b"] .brand__period { color: var(--accent-text); }
[data-brand="b"] .cmd__navs { display: contents; }
[data-brand="b"] .cmd__nav { display: none; }
[data-brand="b"] .cmd__nav--l { grid-column: 1; grid-row: 1; justify-self: end; }
[data-brand="b"] .cmd__nav--r { grid-column: 3; grid-row: 1; justify-self: start; }
[data-brand="b"] .cmd__util { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 0; flex-direction: row-reverse; }
[data-brand="b"] .cta-pill { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
@media (min-width: 1260px) { [data-brand="b"] .cmd__nav { display: flex; } }

/* ---- small screens: theme + language live in the elevator panel ---- */
@media (max-width: 719px) {
  .cmd__util .ib { display: none; }
  .cmd__bar { padding-left: 12px; }
  [data-brand="b"] .cmd__bar { padding-left: 7px; }
}
@media (max-width: 419px) {
  .menu-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .menu-btn .lbl { display: none; }
  .cta-pill { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .cta-pill .lbl { display: none; }
  .cmd__bar { min-height: 58px; }
  .brand__word { font-size: 17px; }
  [data-brand="c"] .brand__word { font-size: 18px; }
}

/* ============ footer ============ */
.foot { position: relative; margin-top: clamp(40px, 6vw, 80px); padding: clamp(56px, 7vw, 88px) 0 40px; border-top: 1px solid var(--glass-line); }
.foot__in { display: grid; justify-items: center; gap: clamp(28px, 4vw, 40px); text-align: center; }
.foot__brand { display: grid; justify-items: center; gap: 12px; }
.foot__home { position: relative; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; border-radius: 12px; }
.foot__home::before { content: ""; position: absolute; inset: -8px; }
.foot__tile { --mk: 40px; }
.foot__crest { --mk: 40px; display: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--glass-hi), 0 14px 30px -14px rgba(0, 0, 0, 0.6); }
.foot__home .brand__word { font-size: 26px; }
.foot__home .brand__bow { --mk: 27px; margin: 0 5px 0 4px; transform: translateY(2px); }
.foot__tag { font-size: 14px; color: var(--muted); max-width: 40ch; }
.foot__cols { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
.foot__col { display: grid; align-content: start; justify-items: center; gap: 2px; }
.foot__col h2 { margin-bottom: 6px; font: 400 10px/1.2 Silkscreen, monospace; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }
.foot__col a { position: relative; display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--muted); text-decoration: none; text-wrap: balance; transition: color var(--t-ui) var(--ease-out); }
.foot__col a::before { content: ""; position: absolute; inset: -6px -10px; }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover, .foot__home:hover .brand__word { color: var(--ink); } }
.foot__rule { width: min(100%, 520px); height: 1px; background: linear-gradient(90deg, transparent, var(--glass-line) 20%, var(--glass-line) 80%, transparent); position: relative; }
.foot__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--violet-2); transform: translate(-50%, -50%) rotate(45deg); }
.foot__maker { display: grid; justify-items: center; gap: 6px; }
.copy { display: grid; justify-items: center; gap: 4px; color: var(--dim); font-size: 12.5px; }
.copy a { color: var(--muted); }
.copy .legal { position: relative; font-size: 12px; line-height: 22px; color: var(--dim); }
.copy .legal::before { content: ""; position: absolute; inset: -11px -8px; }
@media (max-width: 767px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A «Colofón»: columns mirrored around the crest (left block right-aligned, right block left-aligned) */
[data-brand="a"] .foot__in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: clamp(24px, 5vw, 72px); align-items: start; }
[data-brand="a"] .foot__brand { grid-column: 2; grid-row: 1; align-self: center; }
[data-brand="a"] .foot__cols { display: contents; }
[data-brand="a"] .foot__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; grid-row: 1; }
[data-brand="a"] .foot__pair--l { grid-column: 1; }
[data-brand="a"] .foot__pair--l .foot__col { justify-items: end; text-align: right; }
[data-brand="a"] .foot__pair--r { grid-column: 3; }
[data-brand="a"] .foot__pair--r .foot__col { justify-items: start; text-align: left; }
[data-brand="a"] .foot__rule, [data-brand="a"] .foot__maker { grid-column: 1 / -1; }
[data-brand="a"] .foot__tile { display: block; }
[data-brand="a"] .foot__home { flex-direction: column; gap: 10px; }
[data-brand="a"] .foot__home .brand__word { font-size: 22px; }
@media (max-width: 899px) {
  [data-brand="a"] .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-brand="a"] .foot__brand { grid-column: 1 / -1; grid-row: 1; }
  [data-brand="a"] .foot__pair { grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  [data-brand="a"] .foot__pair--l { grid-column: 1; } [data-brand="a"] .foot__pair--r { grid-column: 2; }
}
/* B «Eje»: one axis; the crest, the line, a single row of the essentials */
[data-brand="b"] .foot__tile { display: none; }
[data-brand="b"] .foot__crest { display: block; }
[data-brand="b"] .foot__home { flex-direction: column; gap: 12px; }
[data-brand="b"] .foot__home .brand__word { font-size: 22px; }
[data-brand="b"] .foot__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; max-width: 760px; }
[data-brand="b"] .foot__pair { display: contents; }
[data-brand="b"] .foot__col { display: contents; }
[data-brand="b"] .foot__col h2, [data-brand="b"] .foot__col a:not(.key) { display: none; }
/* C «Firma»: the wordmark as a signature over four even columns */
[data-brand="c"] .foot__tile, [data-brand="c"] .foot__crest { display: none; }
[data-brand="c"] .foot__home .brand__word { font-size: clamp(30px, 4.4vw, 44px); }
[data-brand="c"] .foot__home .brand__bow { --mk: 36px; margin: 0 7px 0 6px; transform: translateY(3px); }
[data-brand="c"] .foot__pair { display: contents; }
[data-brand="a"] .foot__home .brand__bow, [data-brand="b"] .foot__home .brand__bow { display: none; }

/* Lex Laboratory: small, above the copyright, in every variant */
.foot .lex3d { width: 132px; height: 76px; }
.foot .lex3d__body { width: 96px; }

/* the bar waits for the brand fonts like the page (max 900 ms): no header reflow */
.fonts-wait .cmd { opacity: 0; }
.cmd { transition: opacity 240ms var(--ease-out); }

/* ============ C «Moño»: the bow absorbs the name and becomes the app icon ============
   Resting state = the official icon; hover / keyboard focus unfolds «pixel.ceo».
   Transform + opacity only. The brand box always keeps the full wordmark width,
   so nothing in the bar reflows; the floor readout follows with a transform.
   --dx (per letter), --bdx (bow) and --fdx (readout) are measured in app.js. */
.brand__icon { --mk: 32px; display: none; }
[data-brand="c"] .cmd .brand__icon { display: flex; align-items: center; position: absolute; left: 0; top: 0; bottom: 0; line-height: 0; pointer-events: none; }
[data-brand="c"] .cmd .brand__icon .mark-svg { display: block; }
.brand__word--anim .bl { display: inline-block; }
[data-brand="c"] .cmd .brand { --t-logo: 620ms; --e-logo: cubic-bezier(0.22, 1, 0.36, 1); }
[data-brand="c"] .cmd .brand .bl,
[data-brand="c"] .cmd .brand .brand__bow,
[data-brand="c"] .cmd .brand__icon,
[data-brand="c"] .cmd .cmd__floor {
  transition-property: transform, opacity; transition-duration: var(--t-logo, 620ms); transition-timing-function: var(--e-logo, cubic-bezier(0.22, 1, 0.36, 1));
}
/* open (the name): icon waits folded inside the bow */
[data-brand="c"] .cmd .brand .bl { transition-duration: var(--t-logo, 620ms), 420ms; transition-delay: calc(140ms + var(--k) * 30ms); }
[data-brand="c"] .cmd .brand__icon { opacity: 0; transform: translateX(var(--bdx, 40px)) scale(0.56); transition-delay: 0ms; }
[data-brand="c"] .cmd .brand .brand__bow { transition-delay: 0ms; }
/* closed (the icon): letters slide and shrink into the bow, the bow grows into the icon */
[data-brand="c"] .cmd .brand.is-closed .bl { opacity: 0; transform: translateX(var(--dx, 0px)) scale(0.2); transition-duration: 540ms, calc(240ms + var(--k) * 70ms); transition-delay: calc(var(--k) * 25ms); }
[data-brand="c"] .cmd .brand.is-closed .brand__bow { opacity: 0; transform: translateX(calc(var(--bdx, 40px) * -1)) scale(1.78); transition-delay: 160ms; }
[data-brand="c"] .cmd .brand.is-closed .brand__icon { opacity: 1; transform: none; transition-delay: 160ms; }
[data-brand="c"] .cmd .cmd__floor { transition-delay: 60ms; }
[data-brand="c"] .cmd .brand.is-closed ~ .cmd__floor { transform: translateX(var(--fdx, 0px)); transition-delay: 200ms; }
/* reduced motion: a simple crossfade, nothing travels */
@media (prefers-reduced-motion: reduce) {
  [data-brand="c"] .cmd .brand .bl, [data-brand="c"] .cmd .brand .brand__bow, [data-brand="c"] .cmd .brand__icon, [data-brand="c"] .cmd .cmd__floor { transition-duration: 220ms; transition-delay: 0ms !important; transition-timing-function: linear; }
  [data-brand="c"] .cmd .brand.is-closed .bl, [data-brand="c"] .cmd .brand.is-closed .brand__bow { transform: none; }
  [data-brand="c"] .cmd .brand__icon, [data-brand="c"] .cmd .brand.is-closed .brand__icon { transform: none; }
  [data-brand="c"] .cmd .brand.is-closed ~ .cmd__floor { transform: none; }
}

/* the full name lives in the mobile panel (touch keeps the icon in the bar) */
.sheet__brand { display: none; justify-content: center; margin: 0 0 12px; color: var(--ink); }
.sheet__brand .brand__word { font-size: 22px; }
[data-brand="c"] .sheet__brand .brand__period { display: none; }
[data-brand="c"] .sheet__brand .brand__bow { display: block; --mk: 22px; margin: 0 4px 0 3px; transform: translateY(1px); line-height: 0; }
[data-brand="c"] .sheet__brand { display: flex; }

/* the signature footer's copyright: a sentence, not a stamp */
.copy { max-width: 64ch; text-wrap: balance; line-height: 1.6; }
.copy__own { color: var(--muted); font-size: 12.5px; }
.copy__contact { color: var(--dim); font-size: 12.5px; }
.copy__addr { color: var(--dim); font-size: 12.5px; }
.copy__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 12px; color: var(--dim); }
.copy__contact a, .copy__own a { position: relative; color: var(--ink); text-decoration: underline; text-decoration-color: var(--glass-hi); text-underline-offset: 3px; }
.copy .legal { margin-top: 4px; }

/* elevator panel: the main pages first, then this page's floors */
.sheet__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.sheet__links .pill { width: 100%; height: 44px; padding: 0 8px; font-weight: 500; }
.sheet__grid:empty { display: none; }
@media (max-width: 419px) { .sheet__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fonts-wait body > main#main { opacity: 0; }
.fonts-wait body > main#main, .fonts-wait body > main#main ~ * { visibility: hidden; }
body > main#main { transition: opacity 240ms var(--ease-out); }
html { scroll-padding-top: 96px; }
body > main#main { padding-top: 84px; }
.foot .wrap { width: min(1200px, 100% - 2 * var(--gutter, 16px)); margin-inline: auto; }
.foot { font-size: 14px; }
.docs-search { display: flex; justify-content: flex-end; margin: 4px 0 -6px; }
@media (prefers-reduced-motion: reduce) { .fl__roll, .sheet, .floor-btn { transition-duration: 1ms; } }