/* B · Víkend: tokens, type, header, buttons, reveals, LED rail, footer. */
:root {
  --blue: #324F95; --white: #FDFFFE; --ink: #1E2F5C; --night: #15181C;
  --steel-9: #2A2E33; --steel-7: #4B5158; --steel-5: #6B7178; --steel-3: #A9AEB3;
  --concrete: #D9D6CF; --concrete-2: #C4C0B8; --flour: #F6F1E7;
  --crust: #B5682A; --crust-dark: #8A4A1C; --crumb: #E7C9A0; --glow: #FFB45A;
  --hd: 64px; --gut: clamp(16px, 4vw, 48px); --max: 1240px;
  --sans: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 12px); -webkit-text-size-adjust: 100%; }
html.rm { scroll-behavior: auto; }
body {
  margin: 0; background: var(--concrete); color: var(--ink); overflow-x: clip;
  font: 400 17px/1.55 var(--sans); font-stretch: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.02; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(34px, 5.2vw, 68px); font-stretch: 112%; text-wrap: balance; }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.small { font-size: 14px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; }
.kick { font: 500 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--crust-dark); margin-bottom: 14px; }
.lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; }
.sec-hd { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-hd h2 { margin-bottom: 18px; }
.sec-lead { font-size: 19px; max-width: 640px; }
section { padding-block: clamp(72px, 10vw, 128px); position: relative; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--night); color: var(--white); padding: 12px 16px; border-radius: 6px; }
.skip:focus { top: 12px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  background: var(--blue); color: var(--white); text-decoration: none; border-radius: 4px;
  font: 700 15px/1.1 var(--sans); font-stretch: 112%; letter-spacing: .02em; text-transform: uppercase;
  border: 2px solid var(--blue); transition: translate .25s var(--ease), background-color .2s, color .2s;
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.light { background: var(--white); color: var(--blue); border-color: var(--white); }
.btn.ghost-l { background: transparent; color: var(--white); border-color: var(--white); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (hover: hover) {
  .btn:hover { translate: 0 -2px; background: var(--ink); border-color: var(--ink); color: var(--white); }
  .btn.light:hover { background: var(--flour); color: var(--ink); border-color: var(--flour); }
  .btn.ghost-l:hover { background: var(--white); color: var(--blue); border-color: var(--white); }
}

/* header */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); display: flex; align-items: center; gap: 14px;
  padding-inline: var(--gut); background: rgba(21, 24, 28, .94); color: var(--white);
  backdrop-filter: blur(8px); border-bottom: 1px solid #2c3036; transition: translate .35s var(--ease);
}
.hd.hide { translate: 0 -100%; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; flex: none; }
.brand-t { font-weight: 800; font-stretch: 125%; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 4px; }
.nav-extra { display: none; }
@media (hover: hover) { .nav a:hover, .all:hover { color: var(--glow); } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px;
  font: 500 13px/1 var(--mono); background: #23272c; color: #E9E6DF; white-space: nowrap; flex: none;
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--steel-3); }
.pill.is-open .dot { background: #5BD08A; box-shadow: 0 0 0 0 rgba(91, 208, 138, .6); animation: ping 2s infinite; }
.pill.is-closed .dot { background: var(--glow); }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }
.lang { display: flex; border: 1px solid #3a3f46; border-radius: 4px; overflow: hidden; flex: none; }
.lang button { min-width: 44px; min-height: 44px; background: none; border: 0; color: #cfd2d6; font: 600 13px var(--mono); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--white); color: var(--night); }
.all { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: flex; align-items: center; flex: none; }
.hd .cta { min-height: 44px; padding: 10px 16px; font-size: 13px; flex: none; }
.burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid #3a3f46; border-radius: 4px; color: var(--white); cursor: pointer; position: relative; flex: none; }
.burger span, .burger::before, .burger::after { content: ''; position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: rotate .25s, translate .25s, opacity .2s; }
.burger span { top: 21px; } .burger::before { top: 14px; } .burger::after { top: 28px; }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { translate: 0 7px; rotate: 45deg; }
.burger[aria-expanded="true"]::after { translate: 0 -7px; rotate: -45deg; }
@media (max-width: 1240px) { .all { display: none; } }
@media (max-width: 1100px) {
  .burger { display: block; }
  .hd .cta { display: none; }
  .nav { position: fixed; inset: var(--hd) 0 auto; background: var(--night); padding: 12px var(--gut) 24px; display: none; border-bottom: 1px solid #2c3036; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { font-size: 20px; min-height: 52px; font-stretch: 112%; }
  .nav-extra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; padding-top: 16px; border-top: 1px solid #2c3036; }
  .nav-extra a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
  .pill { margin-left: auto; }
}
@media (max-width: 560px) {
  :root { --hd: 60px; }
  .brand-t { display: none; }
  .hd { gap: 8px; }
  .pill { padding: 0 10px; font-size: 12px; }
}

/* reveals */
html.js .rv { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s); }
html.js .rv.in { opacity: 1; translate: 0 0; }
html.rm .rv { opacity: 1; translate: none; transition: none; }

/* LED price rail */
.led { background: var(--night); border-block: 6px solid #2a2e33; overflow: hidden; position: relative; padding: 14px 0; }
.led::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 1.1px, rgba(21, 24, 28, .55) 1.6px) 0 0 / 4px 4px; }
.led-track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.led-run { margin: 0; padding-right: 2.2em; white-space: nowrap; color: var(--glow); font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 0 10px rgba(255, 180, 90, .55); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (hover: hover) { .led:hover .led-track { animation-play-state: paused; } }
html.rm .led-track { animation: none; }

/* footer */
.ft { background: var(--night); color: #E9E6DF; padding: 56px 0 40px; }
.ft-mark { margin: 0 0 40px; font-weight: 900; font-stretch: 125%; line-height: .8; color: #6D8BD3; white-space: nowrap; overflow: hidden; }
.ft-mark span { display: inline-block; }
.ft-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-bottom: 32px; border-bottom: 1px solid #2c3036; }
.ft-h { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--glow); margin-bottom: 10px; }
.ft a { display: inline-block; padding-block: 10px; text-underline-offset: 3px; }
.ft p { margin-bottom: 4px; }
.ft-notes { padding-top: 22px; color: #B9BCC0; }
@media (max-width: 860px) { .ft-g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ft-g { grid-template-columns: 1fr; } }
.pill-s { display: none; }
@media (max-width: 560px) { .pill-t { display: none; } .pill-s:not(:empty) { display: inline; } .pill:has(.pill-s:empty) .pill-t { display: inline; } }