/* =========================================================
   SpectroFit — design system
   Palette retained from the original brand. Light throughout.
   Register: instrument output. Signature: the control strip.
   ========================================================= */
:root {
    /* Brand */
    --ink-deep:   #15091F;
    --ink:        #1E0B3D;
    --ink-soft:   #3A2A56;
    --violet:     #4F2F8F;
    --violet-lift:#6B46B0;
    --cyan:       #00D9F5;

    /* Ground */
    --paper:      #FFFFFF;
    --paper-50:   #FAFAFB;
    --paper-100:  #F2F1F6;
    --rule:       #E7E5EF;

    /* Text */
    --gray-700:   #3D3B45;
    --gray-600:   #5C5968;
    --gray-500:   #807D8C;

    /* Process inks. On the strip they are data: what the instrument measures.
       Elsewhere they identify a surface — see --accent below. */
    --ink-c: #00AEEF;
    --ink-m: #EC008C;
    --ink-y: #FFF200;
    --ink-k: #1A1A1A;
    /* Yellow ink is unreadable as a graphic element on white, so the amber it
       prints as on a wet sheet stands in for it. */
    --ink-y-deep: #E8A400;

    /* Each surface carries one ink. It lands on graphic elements only —
       tick bullets, markers, hover edges, ambient light — never on type, so
       nothing trades legibility for colour. Scoped per section further down.
       The -rgb pair exists so the same hue can be used at low alpha. */
    --accent: #4F2F8F;
    --accent-rgb: 79, 47, 143;

    /* Three verdict states, matching the apps: in tolerance, at risk, out. */
    --pass: #1E7F4B;
    --warn: #A66A00;
    --fail: #C42B2B;

    /* Type */
    --font-display: 'Archivo', 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* Layout */
    --max-width: 1240px;
    --label-col: 190px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --nav-height: 66px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t: 0.35s var(--ease);

    /* The visible spectrum, 400nm -> 700nm. The instrument's range. */
    --spectrum: linear-gradient(90deg,
        #5B00A8 0%, #3A00E0 9%, #0052FF 19%, #00A6D6 31%,
        #00C853 46%, #9CCC00 58%, #FFD400 69%, #FF7A00 83%, #D50000 100%);
}

/* =========================================================
   Reset & base
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
    font-family: var(--font-body);
    color: var(--gray-700);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — every <img> carries width/height attributes,
   and without it the attribute height wins over the scaled width. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.06;
    font-weight: 700;
    font-variation-settings: 'wdth' 112;
    letter-spacing: -0.015em;
    /* Evens out the line lengths so headings don't orphan a short last word.
       EN and ES differ a lot in length here, so this beats a fixed max-width. */
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.1rem; font-variation-settings: 'wdth' 105; letter-spacing: -0.005em; }
h4 { font-size: 0.8rem; font-variation-settings: 'wdth' 100; }

/* Every measured value is monospaced and tabular so columns align. */
.num, .readout, .spec-row dd, .stat strong, .step-index {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.lede {
    font-size: 1.1rem;
    color: var(--gray-600);
    max-width: 60ch;
}
.lede + .lede { margin-top: 1rem; }

/* The eyebrow carries the section's ink as a drawn-down swatch, the way a
   pressroom marks which unit it is looking at. The label itself stays violet:
   colour identifies, it never has to be read. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--violet);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3),
                0 0 12px rgba(var(--accent-rgb), 0.55);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    left: -999px; top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

/* Language toggle — CSS-driven, mechanism preserved from the original build. */
html[lang="en"] [lang="es"] { display: none !important; }
html[lang="es"] [lang="en"] { display: none !important; }

/* =========================================================
   Spectral rule — the section divider.
   Not ornament: it is the 400-700nm range the device reads.
   ========================================================= */
.spectral-rule {
    height: 3px;
    background: var(--spectrum);
    border: 0;
}

.spectral-rule.is-labelled {
    position: relative;
    margin-bottom: 1.75rem;
    /* hr defaults to overflow:hidden in the UA sheet, which clips the labels. */
    overflow: visible;
}
.spectral-rule.is-labelled::before,
.spectral-rule.is-labelled::after {
    position: absolute;
    top: 9px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--gray-500);
}
.spectral-rule.is-labelled::before { content: '400nm'; left: 0; }
.spectral-rule.is-labelled::after  { content: '700nm'; right: 0; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: var(--t);
}
.btn-primary {
    background: var(--violet);
    color: var(--paper);
    /* isolation keeps the sweep's negative z-index inside the button, so the
       label needs no stacking rules of its own. */
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary:hover { background: var(--ink); }
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        transparent 24%, rgba(255, 255, 255, 0.3) 50%, transparent 76%);
    transform: translateX(-110%);
    transition: transform 0.75s var(--ease);
}
.btn-primary:hover::before { transform: translateX(110%); }
.btn-outline { border-color: var(--rule); color: var(--ink); background: var(--paper); }
.btn-outline:hover { border-color: var(--violet); color: var(--violet); }

/* =========================================================
   Utility bar + header
   ========================================================= */
/* The masthead runs dark: the deep brand violet, with the page's light
   ground starting underneath it. */
.utility-bar {
    background: var(--ink-deep);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.utility-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    height: 34px;
    color: rgba(255, 255, 255, 0.55);
}
.utility-bar a { color: rgba(255, 255, 255, 0.85); }
.utility-bar a:hover { color: var(--cyan); }
.utility-sep { color: rgba(255, 255, 255, 0.25); padding: 0 0.5rem; }

#main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(30, 11, 61, 0.94);
    backdrop-filter: blur(10px);
    /* The top-edge highlight keeps the bar readable where it passes over a
       dark section; the drop shadow does the same over light ground. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.7);
}
/* Cyan reads on the dark bar where violet would disappear. */
#main-header :focus-visible,
.utility-bar :focus-visible { outline-color: var(--cyan); }

.main-nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.nav-logo img { height: 26px; width: auto; }

.nav-menu { display: flex; align-items: center; gap: 2rem; }

.nav-links { display: flex; gap: 1.75rem; }
.nav-links a {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    padding: 0.4rem 0;
    position: relative;
    transition: var(--t);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a.nav-active { color: var(--paper); }
/* The underline is always present and travels in, rather than snapping on. */
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.nav-active::after { transform: scaleX(1); }

.lang-switcher {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.lang-btn {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 0;
    cursor: pointer;
    transition: var(--t);
}
.lang-btn:hover { color: var(--paper); }
.lang-btn.active { background: var(--paper); color: var(--ink); }

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--paper);
    cursor: pointer;
    padding: 0.4rem;
}

/* =========================================================
   Sections — measurement-log register:
   narrow mono label column against a wide content column.
   ========================================================= */
.section { padding: 6.5rem 0; position: relative; overflow: hidden; }
.section-alt { background: var(--paper-50); }

/* One ink per surface. */
#equipo  { --accent: var(--ink-c);      --accent-rgb: 0, 174, 239; }
#windows { --accent: var(--ink-m);      --accent-rgb: 236, 0, 140; }
#android { --accent: var(--ink-y-deep); --accent-rgb: 232, 164, 0; }
#nube    { --accent: var(--violet-lift);--accent-rgb: 107, 70, 176; }

/* =========================================================
   Ambient light.
   A spectrophotometer does not read ink, it reads the light
   coming back off it. So colour reaches the page as light:
   soft, far below the type, drifting at the pace of a room.
   ========================================================= */
.section > .container,
.hero > .container { position: relative; z-index: 1; }

.section::before,
.hero::before {
    content: '';
    position: absolute;
    inset: -15% -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 10% 16%, rgba(var(--accent-rgb), 0.11), transparent 68%),
        radial-gradient(38% 44% at 92% 80%, rgba(var(--accent-rgb), 0.08), transparent 70%);
}

/* The hero is the instrument itself, so it gets the whole range rather than
   one ink — cyan low, magenta right, amber warming the floor. */
.hero { position: relative; overflow: hidden; }
.hero::before {
    background:
        radial-gradient(34% 40% at 6% 12%,  rgba(0, 174, 239, 0.13), transparent 68%),
        radial-gradient(30% 36% at 96% 30%, rgba(236, 0, 140, 0.10), transparent 70%),
        radial-gradient(40% 30% at 60% 96%, rgba(232, 164, 0, 0.10), transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
    .section::before { animation: drift-a 54s ease-in-out infinite alternate; }
    .hero::before    { animation: drift-b 44s ease-in-out infinite alternate; }
    .section-alt::before { animation-duration: 62s; animation-direction: alternate-reverse; }
}

@keyframes drift-a { to { transform: translate3d(3%, -2.5%, 0) scale(1.09); } }
@keyframes drift-b { to { transform: translate3d(-2.5%, 2%, 0) scale(1.11); } }

.section-head {
    display: grid;
    grid-template-columns: var(--label-col) 1fr;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}
.section-head .eyebrow { padding-top: 0.6rem; }
.section-head h2 { margin-bottom: 1.1rem; }

/* =========================================================
   Hero
   ========================================================= */
.hero { padding: 4.5rem 0 0; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--violet);
    border: 1px solid var(--rule);
    border-radius: 100px;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.75rem;
}
.hero-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan);
}

.hero h1 { margin-bottom: 1.5rem; }

/* SIGNATURE — the pivot word of the whole pitch, printed in the instrument's
   entire range. Violet stays declared first, so a browser without
   background-clip:text simply gets what the page had before. */
.hero h1 em {
    font-style: normal;
    color: var(--violet);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero h1 em {
        background: var(--spectrum);
        background-size: 260% 100%;
        background-position: 12% 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* The gradient stops short of the descender without this. */
        padding-bottom: 0.04em;
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero h1 em { animation: spectral-drift 22s linear infinite; }
    }
}
@keyframes spectral-drift {
    from { background-position:   0% 0; }
    to   { background-position: 100% 0; }
}

.hero-sub { font-size: 1.2rem; color: var(--gray-600); max-width: 46ch; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.hero-visual { position: relative; }
.hero-visual img {
    width: 100%;
    border-radius: var(--radius-lg);
}

/* =========================================================
   Dark surfaces.
   Both work by re-scoping the design tokens rather than by
   restating every component, so children need no dark variants.

   Two materials, deliberately different:
   .section-dark — brand violet chrome (masthead, beneficios, footer)
   .booth        — neutral grey, a measurement surface
   ========================================================= */
.section-dark {
    background: var(--ink-deep);
    color: rgba(255, 255, 255, 0.78);

    --ink:      #FFFFFF;
    --gray-700: rgba(255, 255, 255, 0.78);
    --gray-600: rgba(255, 255, 255, 0.68);
    --gray-500: rgba(255, 255, 255, 0.52);
    --rule:     rgba(255, 255, 255, 0.14);
    --violet:   var(--cyan);
    --accent:     var(--cyan);
    --accent-rgb: 0, 217, 245;
}

/* On near-black the ambient wash can carry all three inks at once without
   touching contrast — the one place the page gets an actual aurora. */
.section-dark::before {
    inset: -25% -10%;
    background:
        radial-gradient(36% 52% at 14% 12%, rgba(0, 217, 245, 0.20), transparent 66%),
        radial-gradient(32% 46% at 84% 26%, rgba(236, 0, 140, 0.16), transparent 68%),
        radial-gradient(44% 40% at 58% 98%, rgba(107, 70, 176, 0.30), transparent 70%);
}

/* ISO 3664 asks for a neutral surround when colour is appraised — a white
   page ground measurably shifts how these swatches read. Kept desaturated
   so it never reads as brand chrome. */
.booth {
    background: #35353A;
    border-radius: var(--radius-md);
    padding: 1.5rem;

    --ink:      #FFFFFF;
    --gray-600: rgba(255, 255, 255, 0.68);
    --gray-500: rgba(255, 255, 255, 0.58);
    --rule:     rgba(255, 255, 255, 0.18);
    --paper:    #35353A;
    --paper-50: #2A2A2E;   /* readout sits recessed, darker than the surround */
}
.booth .readout-chip { border-color: rgba(255, 255, 255, 0.22); }
/* Without a defined edge the black solid patch dissolves into the surround. */
.booth .strip { border-color: rgba(255, 255, 255, 0.38); }

/* The verdict colours are tuned for white; lift them for the dark surround. */
.booth .verdict.is-pass { color: #45C97F; background: rgba(69, 201, 127, 0.16); }
.booth .verdict.is-warn { color: #E0A64A; background: rgba(224, 166, 74, 0.16); }
.booth .verdict.is-fail { color: #F0685F; background: rgba(240, 104, 95, 0.16); }

/* =========================================================
   SIGNATURE — the control strip.
   Every press sheet carries one along its trailing edge.
   Here it is live: pick a patch, read the measurement.
   ========================================================= */
.strip-block { padding-bottom: 2.5rem; }

.strip-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.7rem;
}

.strip {
    display: flex;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
    background: var(--paper);
}

.patch {
    flex: 1;
    /* Flex items default to min-width:auto, so the tick label's intrinsic width
       would push the strip — and the whole page — wider than a phone viewport. */
    min-width: 0;
    height: 84px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    background: var(--sw);
    cursor: pointer;
    position: relative;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    transform-origin: bottom center;
}
.patch:last-child { border-right: 0; }

.patch::after {
    content: attr(data-tick);
    position: absolute;
    left: 0; right: 0; bottom: 6px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--tick, rgba(255,255,255,0.85));
    opacity: 0;
    transition: opacity var(--t);
}
.patch:hover::after,
.patch.is-active::after { opacity: 1; }

.patch:hover { transform: scaleY(1.09); }
.patch.is-active {
    transform: scaleY(1.14);
    box-shadow: inset 0 0 0 3px var(--ink);
    z-index: 2;
}

/* The scan pass: one sweep across the strip on load, then it's the user's. */
.strip-scan {
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, 0.75), transparent);
    opacity: 0;
}
.strip-wrap { position: relative; }
.strip-wrap.is-scanning .strip-scan {
    animation: scan 1.5s var(--ease) forwards;
}
@keyframes scan {
    0%   { left: -90px; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Readout — mirrors what the app shows on screen. */
.readout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--paper-50);
    min-height: 96px;
}

.readout-chip {
    width: 46px; height: 46px;
    border-radius: var(--radius-sm);
    background: var(--sw, var(--rule));
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.readout-name {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' 105;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: 0.01em;
}
.readout-coords {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}
.readout-coords span + span { margin-left: 0.9rem; }
.readout-cond {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    margin-top: 0.3rem;
    text-transform: uppercase;
}

.readout-value { text-align: right; }
.readout-value strong {
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
}
.readout-value .readout-unit {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    margin-top: 0.45rem;
}
.verdict::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.verdict.is-pass { color: var(--pass); background: rgba(30, 127, 75, 0.1); }
.verdict.is-warn { color: var(--warn); background: rgba(166, 106, 0, 0.1); }
.verdict.is-fail { color: var(--fail); background: rgba(196, 43, 43, 0.1); }

/* =========================================================
   Stat row
   ========================================================= */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.stat {
    padding: 2rem 1.5rem;
    border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat strong {
    display: block;
    font-size: 2.1rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.stat span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* =========================================================
   The flow — 01..04. A real sequence, so the numerals earn their place.
   ========================================================= */
.flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
}
.step {
    padding: 2rem 1.75rem 2.25rem 0;
    border-right: 1px solid var(--rule);
    padding-left: 1.75rem;
    position: relative;
}
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; }
/* The four markers run C, M, Y, K — the order the inks sit in on a control
   strip, and the order the units lay them down. Here the process colours are
   carrying real information, so they earn the space. */
.step::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 34px; height: 3px;
    background: var(--violet);
}
.step:nth-child(1)::before { background: var(--ink-c); }
.step:nth-child(2)::before { background: var(--ink-m); }
.step:nth-child(3)::before { background: var(--ink-y-deep); }
.step:nth-child(4)::before { background: var(--ink-k); }
.step:first-child::before { left: 0; }
.step-index {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--violet);
    display: block;
    margin-bottom: 1.1rem;
}
.step h3 { margin-bottom: 0.55rem; }
.step p { font-size: 0.93rem; color: var(--gray-600); }

/* =========================================================
   Split layouts
   ========================================================= */
.split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
}
.split.reverse .split-copy { order: 2; }
.split.reverse .split-visual { order: 1; }
.split-copy h2 { margin-bottom: 1.25rem; }

.feature-list { margin-top: 2rem; display: grid; gap: 1.1rem; }
.feature-list li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.85rem;
    align-items: start;
}
.feature-list .tick {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--paper);
    display: grid;
    place-items: center;
    margin-top: 0.2rem;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
/* Amber and yellow need a dark glyph to stay legible inside the dot. */
#android .feature-list .tick { color: #2A1C00; }
.feature-list strong {
    display: block;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}
.feature-list .desc {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-top: 0.15rem;
}

/* Framed screenshot */
.shot {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--paper);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.shot:hover {
    border-color: var(--accent);
    box-shadow: 0 20px 46px -26px rgba(var(--accent-rgb), 0.75);
    transform: translateY(-2px);
}
.shot img { width: 100%; height: auto; }
.shot-label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--paper-50);
}

/* Screenshot gallery.
   The app screenshots vary wildly in aspect ratio, so each sits in a fixed
   box and is contained rather than cropped — uniform cards, nothing cut off. */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}
.gallery--three { grid-template-columns: repeat(3, 1fr); }

.gallery figure {
    position: relative;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--paper);
    transition: var(--t);
}
.gallery figure:hover,
.gallery figure:focus-within {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -28px rgba(var(--accent-rgb), 0.85);
}
/* A hairline of the section's ink draws across the top edge on approach —
   the same gesture as the spectral rules, at card scale. */
.gallery figure::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
    z-index: 2;
}
.gallery figure:hover::after,
.gallery figure:focus-within::after { transform: scaleX(1); }
.gallery img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    background: var(--paper-50);
    padding: 0.85rem;
}
.gallery--three img { height: 320px; }

/* An odd final item spans the row rather than sitting alone in one column. */
.gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gallery--three figure:last-child:nth-child(odd) { grid-column: auto; }
.gallery figcaption {
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* =========================================================
   Android — portrait screens need their own treatment
   ========================================================= */
.phone {
    max-width: 278px;
    margin: 0 auto;
    border: 9px solid var(--ink);
    border-radius: 30px;
    overflow: hidden;
    background: var(--ink);
    box-shadow: 0 24px 50px -20px rgba(30, 11, 61, 0.4);
    transition: transform var(--t), box-shadow var(--t);
}
.phone:hover,
.phone:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 34px 60px -22px rgba(var(--accent-rgb), 0.55);
}
.phone img { width: 100%; height: auto; display: block; }

.phone-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
.phone-row figure { text-align: center; }
.phone-row .phone { max-width: 210px; border-width: 7px; border-radius: 24px; }
.phone-row figcaption {
    margin-top: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* =========================================================
   Benefits — no numerals. Each carries a real spec anchor.
   ========================================================= */
.benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.benefit {
    padding: 2.25rem 2rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.benefit .anchor {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet);
    display: block;
    margin-bottom: 1rem;
}
.benefit h3 { margin-bottom: 0.6rem; }
.benefit p { font-size: 0.93rem; color: var(--gray-600); }

/* =========================================================
   Specs
   ========================================================= */
.spec-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 2.5rem;
}
.spec-hero div {
    padding: 1.75rem 1.5rem;
    border-right: 1px solid var(--rule);
}
.spec-hero div:last-child { border-right: 0; }
.spec-hero strong {
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.spec-hero span {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.spec-clusters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.spec-cluster h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--violet);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 0.25rem;
}
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
}
.spec-row dt { font-size: 0.88rem; color: var(--gray-600); }
.spec-row dd {
    font-size: 0.88rem;
    color: var(--ink);
    font-weight: 500;
    text-align: right;
}

/* =========================================================
   Downloads
   ========================================================= */
.downloads {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.dl {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
    transition: var(--t);
}
/* Each card takes the ink of the surface it leads to, so the downloads row
   reads back as a summary of the sections above it. */
#descargas .dl:nth-child(1) { --accent: var(--ink-m);      --accent-rgb: 236, 0, 140; }
#descargas .dl:nth-child(2) { --accent: var(--ink-y-deep); --accent-rgb: 232, 164, 0; }
#descargas .dl:nth-child(3) { --accent: var(--violet);     --accent-rgb: 79, 47, 143; }
#descargas .dl:nth-child(4) { --accent: var(--ink-c);      --accent-rgb: 0, 174, 239; }

.dl:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -28px rgba(var(--accent-rgb), 0.8);
}
.dl .dl-icon {
    color: var(--accent);
    margin-bottom: 1.1rem;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-rgb), 0.11);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
    transition: var(--t);
}
.dl:hover .dl-icon {
    background: rgba(var(--accent-rgb), 0.18);
    transform: translateY(-1px);
}
.dl h3 { margin-bottom: 0.4rem; }
.dl p { font-size: 0.88rem; color: var(--gray-600); flex: 1; margin-bottom: 1.25rem; }
.dl-action {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet);
    font-weight: 500;
}
.dl:hover .dl-action { color: var(--ink); }

/* =========================================================
   CTA
   ========================================================= */
.cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
    padding: 3rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--paper-50);
}
.cta h2 { margin-bottom: 0.75rem; }
.cta p { color: var(--gray-600); max-width: 52ch; }
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* =========================================================
   Footer
   ========================================================= */
.main-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.72);
    padding: 4rem 0 2rem;
    margin-top: 6rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-brand img { height: 24px; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.9rem; max-width: 42ch; }
.main-footer h4 {
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a { font-size: 0.9rem; transition: var(--t); }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
    padding-top: 1.75rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

/* WhatsApp */
.whatsapp-float {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #25D366;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.55);
    z-index: 200;
    transition: var(--t);
}
.whatsapp-float:hover { transform: scale(1.07); }
.whatsapp-icon { width: 29px; height: 29px; }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Items inside a revealed block arrive in reading order rather than all at
   once. --i is set in JS; the delay rides on the parent's single observer,
   so no extra observers are needed. */
.reveal .stagger-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visible .stagger-item { opacity: 1; transform: none; }

/* The checkmark draws itself, just behind its row. */
.feature-list .tick svg polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.5s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}
.reveal.is-visible .feature-list .tick svg polyline { stroke-dashoffset: 0; }

/* The rules paint 400nm to 700nm, the direction the instrument reads.
   Animating background-size rather than clip-path leaves the nm labels on the
   labelled rule alone — clip-path would cut them off, they sit below it. */
.spectral-rule.reveal {
    opacity: 1;
    transform: none;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 1.2s var(--ease);
}
.spectral-rule.reveal.is-visible { background-size: 100% 100%; }

/* =========================================================
   Page-load sequence.
   The hero assembles the way a reading resolves: label, then
   the claim, then the detail, then the instrument itself.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    .hero-copy > *,
    .hero-visual,
    .strip-block { animation: hero-in 0.85s var(--ease) backwards; }

    .hero-copy > :nth-child(1) { animation-delay: 0.06s; }
    .hero-copy > :nth-child(2) { animation-delay: 0.15s; }
    .hero-copy > :nth-child(3) { animation-delay: 0.26s; }
    .hero-copy > :nth-child(4) { animation-delay: 0.36s; }
    .hero-visual {
        animation-name: hero-visual-in;
        animation-delay: 0.22s;
    }
    .strip-block { animation-delay: 0.46s; }
}

@keyframes hero-in {
    from { opacity: 0; transform: translateY(16px); }
}
@keyframes hero-visual-in {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
}

/* =========================================================
   Zoom affordance.
   Every screenshot on the page sits in a fixed box far smaller
   than the image, so the app UI in it cannot be read. The
   trigger is a real button: it takes focus, it announces
   itself, and it is built in JS so the page still renders
   exactly as before if the script never arrives.
   ========================================================= */
.zoomable {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
    position: relative;
}
.zoom-hint {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(21, 9, 31, 0.74);
    color: #FFFFFF;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--t), transform var(--t);
    pointer-events: none;
}
.zoomable:hover .zoom-hint,
.zoomable:focus-visible .zoom-hint { opacity: 1; transform: none; }

/* The phone frames clip to a rounded rectangle; keep the hint inside it. */
.phone .zoom-hint { top: 10px; right: 10px; width: 28px; height: 28px; }

/* Nothing hovers on a touch screen, so the hint has to be standing there. */
@media (hover: none) {
    .zoom-hint { opacity: 1; transform: none; }
}

/* =========================================================
   Lightbox.
   Neutral ground, for the same reason the control strip has
   one: appraising colour against a tinted or black surround
   shifts how it reads. Chrome is the mono caption register
   used everywhere else on the page.
   ========================================================= */
.lb[hidden] { display: none; }
.lb {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: rgba(35, 35, 38, 0.97);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}
.lb.is-open { opacity: 1; }
.lb :focus-visible { outline-color: var(--cyan); }

.lb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
}
.lb-tools { display: flex; gap: 0.4rem; }

.lb-btn {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: var(--t);
}
.lb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.4);
}

.lb-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
}
.lb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--z, 1));
    transition: transform 0.35s var(--ease);
    /* Screenshots are UI, not photographs — keep the pixel grid honest. */
    image-rendering: -webkit-optimize-contrast;
}
.lb.is-zoomed .lb-img { cursor: grab; }
.lb.is-panning .lb-img { cursor: grabbing; transition: none; }

.lb-foot {
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}
/* Not every image on the page carries a caption; don't leave an empty bar. */
.lb-foot:empty { display: none; }

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(21, 9, 31, 0.5);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: var(--t);
}
.lb-nav:hover {
    background: rgba(21, 9, 31, 0.85);
    border-color: rgba(255, 255, 255, 0.45);
    color: #FFFFFF;
}
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
/* A single-image group has nowhere to page to. */
.lb.is-single .lb-nav,
.lb.is-single .lb-count { display: none; }

@media (max-width: 640px) {
    .lb-stage { padding: 0.75rem; }
    .lb-nav { width: 40px; height: 40px; }
    .lb-prev { left: 0.5rem; }
    .lb-next { right: 0.5rem; }
    .lb-foot { font-size: 0.62rem; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .split, .split.reverse { grid-template-columns: 1fr; gap: 2.5rem; }
    .split.reverse .split-copy,
    .split.reverse .split-visual { order: 0; }
    .section-head { grid-template-columns: 1fr; gap: 0.75rem; }
    .section-head .eyebrow { padding-top: 0; }
    .flow { grid-template-columns: repeat(2, 1fr); }
    .step { border-bottom: 1px solid var(--rule); }
    .step:nth-child(2) { border-right: 0; }
    .step:nth-child(3) { padding-left: 0; }
    .step:nth-child(3)::before { left: 0; }
    .spec-clusters { grid-template-columns: 1fr; gap: 2rem; }
    .gallery--three { grid-template-columns: repeat(2, 1fr); }
    .downloads { grid-template-columns: repeat(2, 1fr); }
    .cta { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav-menu {
        position: absolute;
        top: var(--nav-height);
        left: 0; right: 0;
        background: var(--ink);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0.5rem 1.5rem 1.25rem;
        display: none;
    }
    .nav-menu.is-open { display: flex; }
    .nav-links { flex-direction: column; gap: 0; width: 100%; }
    .nav-links a { display: block; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .lang-switcher { margin-top: 1rem; }

    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-right: 0; }
    .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--rule); }
    .spec-hero { grid-template-columns: repeat(2, 1fr); }
    .spec-hero div:nth-child(2) { border-right: 0; }
    .spec-hero div:nth-child(1), .spec-hero div:nth-child(2) { border-bottom: 1px solid var(--rule); }
    .phone-row { grid-template-columns: 1fr; gap: 2.5rem; }
    .phone-row .phone { max-width: 260px; }
    .gallery, .gallery--three { grid-template-columns: 1fr; }
    .gallery img { height: 220px; }
}

@media (max-width: 640px) {
    .section { padding: 4rem 0; }
    .hero { padding-top: 2.5rem; }
    .strip-block { padding-bottom: 3.5rem; }
    .booth { padding: 1rem; border-radius: var(--radius-sm); }
    .utility-bar .container { height: auto; padding: 0.4rem 1.5rem; font-size: 0.66rem; }
    .utility-hide { display: none; }

    .benefits { grid-template-columns: 1fr; }
    .flow { grid-template-columns: 1fr; }
    .step { padding-left: 0; border-right: 0; }
    .step::before { left: 0; }
    .downloads { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cta { padding: 2rem; }

    /* Patches are ~30px wide at this size — no room for the tick value. */
    .patch { height: 62px; }
    .patch::after { display: none; }
    .readout {
        grid-template-columns: auto 1fr;
        gap: 1rem;
        row-gap: 1rem;
    }
    .readout-value {
        grid-column: 1 / -1;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        border-top: 1px solid var(--rule);
        padding-top: 0.9rem;
    }
    .readout-value strong { display: inline; font-size: 1.6rem; }
    .verdict { margin-top: 0; margin-left: auto; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .strip-wrap.is-scanning .strip-scan { animation: none; opacity: 0; }
    .patch:hover, .patch.is-active { transform: none; }

    /* Anything that starts hidden and is revealed by motion has to be given
       its finished state outright, or it never appears at all. */
    .reveal .stagger-item { opacity: 1; transform: none; }
    .feature-list .tick svg polyline { stroke-dashoffset: 0; }
    .spectral-rule.reveal { background-size: 100% 100%; }
    .lb { opacity: 1; }
    .lb-img { transition: none; }
}

/* The page must not scroll behind the lightbox. */
body.lb-open { overflow: hidden; }