/* The public layout of proposal 2: header, footer, phone dock and floating WhatsApp button.
   Every class starts with "gl-" so it cannot collide with Bootstrap 4 or the old theme, which the inner pages still use.
   Colours, fonts and the radius come from the theme: the --gl-* custom properties the layout writes on :root. */

/* The mockup's base styles, scoped to the partials: they must not inherit the body, links and paragraphs of style.css and Bootstrap 4. */
.gl-skip,
.gl-header,
.gl-footer,
.gl-dock,
.gl-wa,
.gl-row {
    box-sizing: border-box;
    font-family: var(--gl-font-body);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--gl-text);
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

.gl-header *, .gl-header *::before, .gl-header *::after,
.gl-footer *, .gl-footer *::before, .gl-footer *::after,
.gl-dock *, .gl-dock *::before, .gl-dock *::after,
.gl-row *, .gl-row *::before, .gl-row *::after,
.gl-wa * {
    box-sizing: border-box;
}

/* What the blocks took from Bootstrap 4's reboot, so the pages of the content model, which load neither Bootstrap nor
   style.css, look the same; with Bootstrap loaded these rules change nothing. */
body.gl-public { margin: 0; }
[hidden] { display: none !important; }
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) :where(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: .5rem; }
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) :where(p, ul, ol, dl) { margin-top: 0; margin-bottom: 1rem; }
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) :where(blockquote, figure) { margin: 0 0 1rem; }
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) :where(input, button, select, textarea) { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) :where(label) { display: inline-block; margin-bottom: .5rem; }
:where(.gl-row) :where(table) { border-collapse: collapse; }
/* :where() keeps these at the specificity of an element selector, so every component rule below still wins. */
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) a,
:where(.gl-header, .gl-footer, .gl-dock, .gl-row) a:hover { color: inherit; text-decoration: none; }
:where(.gl-header, .gl-footer, .gl-row) button { font: inherit; color: inherit; }
:where(.gl-header, .gl-footer, .gl-row) img { max-width: 100%; display: block; vertical-align: middle; }
:where(.gl-header, .gl-footer, .gl-dock, .gl-wa, .gl-row) svg { vertical-align: middle; }

.gl-skip {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 1100;
    background: #fff;
    color: var(--gl-heading);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 800;
}

.gl-skip:focus { left: 8px; }
.gl-skip:hover { color: var(--gl-heading); }

.gl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The trap of a guarded form (FormGuard): off the screen rather than display: none, which some scripts skip. */
.gl-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Turnstile's widget (HumanCheck) and the line that asks to wait for it. */
.gl-verificacion { display: grid; gap: 8px; margin: 4px 0 16px; }
.gl-verificacion-estado { margin: 0; font-size: .88rem; font-weight: 700; }
.gl-verificacion-estado:empty { display: none; }

.gl-container {
    width: min(1200px, 100% - 32px);
    margin-inline: auto;
}

/* Buttons */
.gl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: var(--gl-font-body);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease;
}

.gl-btn:hover { transform: translateY(-2px); text-decoration: none; }
/* The keyboard's focus: the accent on light surfaces, its light tint on dark ones, white where the background is red or a row's own. */
:root { --gl-focus: var(--gl-accent); }
:where(.gl-row--dark, .gl-footer, .gl-dock, .gl-pay-panel, .gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open)) { --gl-focus: var(--gl-accent-on-dark); }
:where(.gl-row--brand, .gl-row--custom.gl-row--dark) { --gl-focus: #fff; }

.gl-btn:focus-visible, .gl-header a:focus-visible, .gl-header button:focus-visible, .gl-footer a:focus-visible, .gl-dock a:focus-visible, .gl-wa:focus-visible {
    outline: 3px solid var(--gl-focus);
    outline-offset: 2px;
}

.gl-btn--primary { background: var(--gl-accent); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.gl-btn--primary:hover { background: var(--gl-accent-hover); color: #fff; }
.gl-btn--line { background: transparent; color: var(--gl-secondary); border-color: var(--gl-secondary); }
.gl-btn--line:hover { color: var(--gl-secondary-strong); border-color: var(--gl-secondary-strong); }

/* Header */
.gl-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--gl-header-bg, var(--gl-surface)) 94%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--gl-border);
}

.gl-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 76px;
    width: min(1360px, 100% - 32px);
}

.gl-brand { display: inline-flex; flex: none; }
.gl-brand img { height: 46px; width: auto; display: block; }

.gl-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.gl-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-nav ul a,
.gl-nav .gl-submenu-btn {
    display: block;
    padding: 10px 11px;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--gl-header-text, var(--gl-heading));
    font-family: var(--gl-font-body);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.gl-nav ul a:hover,
.gl-nav .gl-submenu-btn:hover,
.gl-nav ul a[aria-current="page"] {
    background: var(--gl-header-active-bg, var(--gl-surface-alt));
    color: var(--gl-header-active-text, var(--gl-accent));
    text-decoration: none;
}

.gl-submenu-btn::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

.gl-has-submenu { position: relative; }

.gl-submenu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--gl-header-bg, var(--gl-surface));
    border: 1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    box-shadow: 0 18px 50px rgba(21, 24, 51, .12);
}

.gl-has-submenu.gl-open > .gl-submenu { display: block; }
.gl-has-submenu.gl-open > .gl-submenu-btn::after { transform: translateY(1px) rotate(-135deg); }
.gl-submenu a { border-radius: 12px; }

.gl-nav .gl-has-submenu.gl-is-current > .gl-submenu-btn {
    background: var(--gl-header-active-bg, var(--gl-surface-alt));
    color: var(--gl-header-active-text, var(--gl-accent));
}

/* The third level opens inside its submenu, indented under its group's button. */
.gl-submenu .gl-submenu-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 12px;
    text-align: left;
}

.gl-submenu .gl-submenu {
    position: static;
    min-width: 0;
    margin: 2px 0 4px 12px;
    padding: 0 0 0 8px;
    border: 0;
    border-left: 2px solid var(--gl-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.gl-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gl-actions form { margin: 0; }

/* Over a dark hero, at the top of the page, the header is transparent with light text, as in proposal 2.
   sitio.js marks it scrolled after 40 px; with the phone menu open it keeps its light background. */
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) { background: transparent; backdrop-filter: none; box-shadow: none; }
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-brand img { filter: brightness(0) invert(1); }
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-nav > ul > li > a,
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-nav > ul > li > .gl-submenu-btn,
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-link-btn { color: #E7E9FB; }
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-nav > ul > li > a:hover,
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-nav > ul > li > .gl-submenu-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-nav > ul > li > a[aria-current="page"],
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-nav > ul > .gl-is-current > .gl-submenu-btn { background: rgba(255, 255, 255, .14); color: #fff; }
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-btn--line,
.gl-public--hero .gl-header:not(.gl-header--scrolled):not(.gl-menu-open) .gl-menu-btn { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.gl-header { transition: background-color .3s ease, box-shadow .3s ease; }
.gl-brand img { transition: filter .3s ease; }

.gl-link-btn {
    border: 0;
    background: none;
    padding: 0 6px;
    color: var(--gl-header-muted, var(--gl-text-muted));
    font-family: var(--gl-font-body);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.gl-menu-btn {
    display: none;
    margin-left: auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--gl-border);
    background: var(--gl-header-bg, var(--gl-surface));
    color: var(--gl-header-text, var(--gl-heading));
    cursor: pointer;
}

.gl-menu-btn svg { width: 24px; height: 24px; margin: auto; display: block; }

/* Footer */
.gl-footer {
    background: var(--gl-footer-bg, var(--gl-darker));
    color: var(--gl-footer-text, #C9CDF0);
    padding: calc(72px * var(--gl-space)) 0 calc(48px * var(--gl-space));
    font-size: .95rem;
}

.gl-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 36px;
}

.gl-footer-logo { width: 180px; height: auto; margin-bottom: 16px; filter: brightness(0) invert(1); }
.gl-footer h2 {
    margin: 0 0 .8em;
    line-height: 1.3;
    color: var(--gl-footer-link, #FFFFFF);
    font-family: var(--gl-font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.gl-footer p { margin: 0 0 12px; color: var(--gl-footer-text, #C9CDF0); letter-spacing: normal; line-height: inherit; }

.gl-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.gl-footer a { color: var(--gl-footer-link, #FFFFFF); text-decoration: none; }
/* style.css removes every underline with !important. */
.gl-footer a:hover { color: var(--gl-footer-link, #FFFFFF); text-decoration: underline !important; }
/* A link inside a sentence must not rely on its colour alone; style.css removes underlines with !important. */
.gl-footer .gl-inline-link { text-decoration: underline !important; text-underline-offset: 2px; }

.gl-social { display: flex; gap: 10px; margin-top: 8px; }

.gl-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
}

.gl-social a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.gl-social svg { width: 20px; height: 20px; }

.gl-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 44px;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .85rem;
}

/* Floating WhatsApp button, on wide screens */
.gl-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1020;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1FA855;
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

.gl-wa:hover { color: #fff; background: #198F48; }
/* It floats over light and dark rows alike, so its focus shows white between two rings of the headings' colour. */
.gl-wa:focus-visible { outline-color: #fff; box-shadow: 0 0 0 8px var(--gl-heading); }
.gl-wa svg { width: 32px; height: 32px; }

/* Phone dock, up to 720 px */
.gl-dock { display: none; }

/* Content pages: rows of columns on a 12-column grid, and the content blocks. Phone up to 719 px, tablet from 720, desktop from 1080. */
.gl-row {
    padding: calc(clamp(72px, 10vw, 128px) * var(--gl-space)) 0;
    background: var(--gl-surface);
}

.gl-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(24px * var(--gl-space));
    align-items: start;
}

.gl-col { min-width: 0; overflow-wrap: anywhere; }
.gl-col > * + * { margin-top: calc(16px * var(--gl-space)); }

.gl-span-p-1 { grid-column: span 1; }
.gl-span-p-2 { grid-column: span 2; }
.gl-span-p-3 { grid-column: span 3; }
.gl-span-p-4 { grid-column: span 4; }
.gl-span-p-5 { grid-column: span 5; }
.gl-span-p-6 { grid-column: span 6; }
.gl-span-p-7 { grid-column: span 7; }
.gl-span-p-8 { grid-column: span 8; }
.gl-span-p-9 { grid-column: span 9; }
.gl-span-p-10 { grid-column: span 10; }
.gl-span-p-11 { grid-column: span 11; }
.gl-span-p-12 { grid-column: span 12; }

@media (min-width: 720px) {
    .gl-span-t-1 { grid-column: span 1; }
    .gl-span-t-2 { grid-column: span 2; }
    .gl-span-t-3 { grid-column: span 3; }
    .gl-span-t-4 { grid-column: span 4; }
    .gl-span-t-5 { grid-column: span 5; }
    .gl-span-t-6 { grid-column: span 6; }
    .gl-span-t-7 { grid-column: span 7; }
    .gl-span-t-8 { grid-column: span 8; }
    .gl-span-t-9 { grid-column: span 9; }
    .gl-span-t-10 { grid-column: span 10; }
    .gl-span-t-11 { grid-column: span 11; }
    .gl-span-t-12 { grid-column: span 12; }
}

@media (min-width: 1080px) {
    .gl-span-d-1 { grid-column: span 1; }
    .gl-span-d-2 { grid-column: span 2; }
    .gl-span-d-3 { grid-column: span 3; }
    .gl-span-d-4 { grid-column: span 4; }
    .gl-span-d-5 { grid-column: span 5; }
    .gl-span-d-6 { grid-column: span 6; }
    .gl-span-d-7 { grid-column: span 7; }
    .gl-span-d-8 { grid-column: span 8; }
    .gl-span-d-9 { grid-column: span 9; }
    .gl-span-d-10 { grid-column: span 10; }
    .gl-span-d-11 { grid-column: span 11; }
    .gl-span-d-12 { grid-column: span 12; }
}

.gl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--gl-accent);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.gl-kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }

.gl-h1, .gl-h2, .gl-h3 {
    margin: 0;
    color: var(--gl-heading);
    font-family: var(--gl-font-display);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.gl-heading .gl-kicker + * { margin-top: 14px; }
.gl-h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 900; }
.gl-h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 900; }
.gl-h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.gl-accent { color: var(--gl-accent); }
.gl-row--dark .gl-accent { color: var(--gl-accent-on-dark); }
.gl-row--brand .gl-accent { color: inherit; }
/* A lighter tint of red-soft only raises its contrast on the dark row, which the theme check already covers. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .gl-row--dark .gl-accent {
        background: linear-gradient(90deg, var(--gl-accent-on-dark), color-mix(in srgb, var(--gl-accent-on-dark), #fff 40%));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.gl-text {
    margin: 0;
    max-width: 60ch;
    color: var(--gl-text-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    letter-spacing: normal;
    white-space: pre-line;
}

.gl-rich { color: var(--gl-text); }
.gl-rich p, .gl-rich ul, .gl-rich ol { margin: 0 0 1em; line-height: inherit; letter-spacing: normal; }
.gl-rich ul, .gl-rich ol { padding-left: 1.3em; }
.gl-rich > :last-child { margin-bottom: 0; }
/* style.css removes every underline with !important. */
.gl-rich a { color: var(--gl-accent); font-weight: 700; text-decoration: underline !important; }
.gl-rich h2, .gl-rich h3 { margin: 1.4em 0 .5em; color: inherit; font-family: var(--gl-font-display); line-height: 1.2; letter-spacing: normal; }
.gl-rich h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.gl-rich h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.gl-rich > :first-child { margin-top: 0; }
.gl-rich img { max-width: 100%; height: auto; vertical-align: middle; }

.gl-figure { margin: 0; }
.gl-figure img { width: 100%; height: auto; border-radius: var(--gl-radius); }

.gl-actions-row { margin: 0; }
.gl-btn svg { flex: none; width: 20px; height: 20px; }
/* A button text may be 40 characters long: on a phone it wraps instead of leaving the screen. */
.gl-row .gl-btn { max-width: 100%; min-height: 52px; padding: 8px 26px; font-size: 1rem; line-height: 1.2; text-align: center; white-space: normal; }

.gl-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--gl-text);
}

.gl-list li { position: relative; padding-left: 26px; }
.gl-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gl-accent);
}

/* Row palettes and spacings. Overflow is clipped so a full-width block (the store strip) never scrolls the page. */
.gl-row { overflow-x: clip; }
.gl-row--soft { background: var(--gl-surface-alt); }
.gl-row--dark {
    background:
        radial-gradient(900px 500px at 10% 0%, color-mix(in srgb, var(--gl-accent) 35%, transparent), transparent 60%),
        linear-gradient(135deg, var(--gl-darker), var(--gl-secondary-strong));
    color: #fff;
}
.gl-row--brand { background: var(--gl-accent); color: #fff; }
.gl-ticker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.gl-ticker li { padding: 6px 12px; border: 1px solid var(--gl-border); border-radius: 999px; background: var(--gl-surface-alt); color: var(--gl-secondary); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gl-row--dark .gl-ticker li { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #D9DCF7; }
.gl-ticker .gl-ticker-to, .gl-row--dark .gl-ticker .gl-ticker-to { border-color: var(--gl-accent); background: var(--gl-accent); color: #fff; }

/* Keeps a section reached through its anchor clear of the fixed header. */
.gl-row[id] { scroll-margin-top: 76px; }
/* Rows below the first are laid out and painted only as they come near the screen: the home page's first paint
   no longer waits for its ten sections. Before a jump to an anchor, sitio.js renders them all, so the jump uses
   their real heights instead of this estimate. */
main > .gl-row + .gl-row { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.gl-rows-rendered main > .gl-row + .gl-row { content-visibility: visible; }

.gl-row--compact { padding-block: calc(clamp(40px, 6vw, 72px) * var(--gl-space)); }
.gl-row--roomy { padding-block: calc(clamp(96px, 13vw, 168px) * var(--gl-space)); }

.gl-row--dark .gl-h1, .gl-row--dark .gl-h2, .gl-row--dark .gl-h3,
.gl-row--brand .gl-h1, .gl-row--brand .gl-h2, .gl-row--brand .gl-h3 { color: #fff; }
.gl-row--dark .gl-text, .gl-row--dark .gl-rich, .gl-row--dark .gl-list { color: #C9CDF0; }
.gl-row--brand .gl-text, .gl-row--brand .gl-rich, .gl-row--brand .gl-list, .gl-row--brand .gl-kicker { color: #fff; }
.gl-row--dark .gl-kicker { color: var(--gl-accent-on-dark); }
.gl-row--dark .gl-rich a, .gl-row--brand .gl-rich a { color: #fff; }
.gl-row--brand .gl-list li::before { background: #fff; }
.gl-row--brand .gl-btn--primary { background: #fff; color: var(--gl-accent); }
.gl-row--dark .gl-btn--line { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; backdrop-filter: blur(10px); }
.gl-row--dark .gl-btn--line:hover, .gl-row--brand .gl-btn--line, .gl-row--brand .gl-btn--line:hover { border-color: #fff; color: #fff; }
/* A row with its own colours (design D20): its inline style sets the background and the text, on the light or dark base. */
.gl-row--custom.gl-row--light { --gl-heading: var(--gl-row-text); --gl-text: var(--gl-row-text); }
.gl-row--custom .gl-h1, .gl-row--custom .gl-h2, .gl-row--custom .gl-h3,
.gl-row--custom .gl-text, .gl-row--custom .gl-rich, .gl-row--custom .gl-list { color: var(--gl-row-text); }
.gl-row--custom .gl-kicker, .gl-row--custom .gl-accent, .gl-row--custom .gl-rich a { color: var(--gl-row-accent); }
/* Its primary buttons, with its button colours if it has them (design D6); hovering then only lifts them. */
.gl-row--custom .gl-btn--primary { background: var(--gl-row-button-bg, var(--gl-accent)); color: var(--gl-row-button-text, #fff); }
.gl-row--custom .gl-btn--primary:hover { background: var(--gl-row-button-bg, var(--gl-accent-hover)); color: var(--gl-row-button-text, #fff); }
/* Its cards, if it colours them: each card hands its text colour to the variables its blocks read inside. */
.gl-row--cards :is(.gl-tile:not(.gl-tile--image, .gl-tile--accent, .gl-tile--dark), .gl-faq details, .gl-lists li, .gl-verdicts li, .gl-paymethod, .gl-value, .gl-label, .gl-reslist) {
    --gl-heading: var(--gl-row-card-text);
    --gl-text: var(--gl-row-card-text);
    --gl-text-muted: var(--gl-row-card-text);
    --gl-row-text: var(--gl-row-card-text);
    background: var(--gl-row-card-bg);
    color: var(--gl-row-card-text);
}
.gl-row--cards .gl-tile:not(.gl-tile--image, .gl-tile--accent, .gl-tile--dark) .gl-tile-big, .gl-row--cards .gl-lists strong { color: var(--gl-row-accent); }
.gl-row--cards .gl-faq .gl-rich a, .gl-row--cards .gl-label .gl-consignee { color: inherit; }
.gl-row--cards .gl-paymethod .gl-paycopy, .gl-row--cards .gl-paymethod .gl-btn--line { border: 1.5px solid currentColor; background: transparent; color: inherit; backdrop-filter: none; }
.gl-row--cards .gl-paymethod :is(.gl-paymethod-detail, .gl-paydata div) { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.gl-row--cards .gl-paymethod .gl-paygroup h4 { color: inherit; }

.gl-btn--secondary { background: var(--gl-secondary); color: #fff; }
.gl-btn--secondary:hover { background: var(--gl-secondary-strong); color: #fff; }

/* Facts */
.gl-quote {
    margin: 0;
    max-width: 30ch;
    color: var(--gl-heading);
    font-family: var(--gl-font-display);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.02em;
}
.gl-quote-src { margin: 16px 0 0; color: var(--gl-text-muted); font-weight: 700; }
.gl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}
.gl-facts-block > .gl-facts:first-child { margin-top: 0; }
.gl-facts li { border-top: 2px solid var(--gl-border); padding-top: 18px; }
.gl-facts strong {
    display: block;
    color: var(--gl-heading);
    font-family: var(--gl-font-display);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
}
.gl-facts span { color: var(--gl-text-muted); font-weight: 700; }
.gl-row--dark .gl-quote, .gl-row--dark .gl-facts strong { color: #fff; }
.gl-row--dark .gl-quote-src { color: #A9AEDD; }
.gl-row--dark .gl-facts li { border-top-color: rgba(255, 255, 255, .2); }
.gl-row--dark .gl-facts span { color: #C9CDF0; }

/* Store strip: as wide as the page, two copies so the loop has no seam */
.gl-marquee { margin-inline: calc(50% - 50vw); padding-block: 8px; overflow: hidden; }
.gl-marquee-track { display: flex; gap: 48px; width: max-content; animation: gl-marquee 32s linear infinite; }
.gl-marquee:hover .gl-marquee-track { animation-play-state: paused; }
/* At its start for the keyboard, so any focused link can be scrolled into view, which one the loop carried past the left edge
   cannot; not for a click, which would move the logo away from the pointer before the release. */
.gl-marquee:has(a:focus-visible) .gl-marquee-track { animation: none; }
.gl-marquee-set { display: flex; align-items: center; gap: 48px; }
.gl-marquee-set > span {
    display: flex;
    align-items: center;
    gap: 48px;
    font-family: var(--gl-font-display);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.gl-marquee-set > span::after { content: "\2726"; content: "\2726" / ""; font-size: .6em; opacity: .7; }
.gl-marquee-set > .gl-marquee-lead { font-weight: 700; opacity: .85; }
/* A store's logo stands where its name would, as tall as the names' capitals; in one colour, it is a mask painted in the
   row's text colour, over the image that gives it its size (store-logos, D3). */
.gl-marquee-mark { display: block; }
.gl-marquee-logo img { display: block; width: auto; max-width: 140px; height: clamp(26px, 3vw, 36px); object-fit: contain; }
.gl-marquee--mono .gl-marquee-mark[style] { background: currentColor; -webkit-mask: var(--gl-logo) center / contain no-repeat; mask: var(--gl-logo) center / contain no-repeat; }
.gl-marquee--mono .gl-marquee-mark[style] img { opacity: 0; }
/* A store's link opens its site in a new tab; it reads like the name or logo it holds (store-links, D2). */
.gl-marquee-link { display: block; color: inherit; text-decoration: none; }
.gl-marquee-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 4px; }
/* The stores template's band is thin (Dan, 2026-10-23): its own padding, and smaller names and logos. */
.gl-row[data-template="stores"] { padding-block: calc(clamp(18px, 2.2vw, 30px) * var(--gl-space)); }
.gl-row[data-template="stores"] .gl-marquee-set > span { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.gl-row[data-template="stores"] .gl-marquee-logo img { height: clamp(24px, 2.6vw, 32px); }

@keyframes gl-marquee {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .gl-marquee-track { animation: none; width: auto; justify-content: center; }
    .gl-marquee-set { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
    .gl-marquee-copy { display: none; }
}

/* Call to action */
.gl-cta { text-align: center; }
.gl-cta .gl-cta-title { max-width: 18ch; margin: 0 auto; font-size: clamp(2.4rem, 6vw, 4.6rem); }
.gl-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.gl-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.gl-pay span, .gl-pay-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--gl-surface-alt);
    color: var(--gl-heading);
    font-size: .95rem;
    font-weight: 800;
}
.gl-pay-copy { cursor: pointer; }
/* The method's logo, decorative: the name stays in the chip's text or in its button's accessible name. 28 px keeps SINPE
   Móvil's at its brand manual's minimum, 1 by 0.7 cm. */
.gl-pay-logo { display: block; flex: none; width: auto; height: 28px; max-width: 84px; margin-block: -4px; object-fit: contain; }
.gl-pay-copy svg { width: 16px; height: 16px; color: var(--gl-secondary); }
.gl-pay-copy[data-gl-copied] { background: var(--gl-border); }
.gl-pay-copy:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
.gl-pay-more { display: inline-flex; align-items: center; padding: 10px 6px; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.gl-pay-more:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
/* On red, the accent's ring for dark rows would nearly vanish. */
.gl-row--brand .gl-pay-copy:focus-visible, .gl-row--brand .gl-pay-more:focus-visible { outline-color: #fff; }
/* The payment methods' bubble (Dan, 2026-10-23): the site's dark gradient with the accent's glow, its heading and the
   page's button on top, the chips under them in equal columns. Its texts are white, a pair the theme checks. */
.gl-pay-panel {
    display: grid;
    gap: 22px 32px;
    max-width: 1080px;
    margin: 40px auto 0;
    padding: 34px 40px;
    border-radius: 28px;
    background:
        radial-gradient(420px 260px at 92% 20%, color-mix(in srgb, var(--gl-accent) 55%, transparent), transparent 70%),
        linear-gradient(110deg, var(--gl-secondary), var(--gl-dark) 60%, var(--gl-darker));
    box-shadow: 0 24px 60px rgba(15, 18, 56, .28);
    color: #fff;
    text-align: left;
}
.gl-pay-panel-head { display: grid; gap: 6px; }
.gl-pay-panel-title { margin: 0; color: #fff; font-family: var(--gl-font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; letter-spacing: -.02em; }
.gl-pay-panel-text { margin: 0; color: #fff; line-height: 1.55; }
.gl-pay-panel .gl-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); grid-column: 1 / -1; gap: 10px; margin: 0; }
.gl-pay-panel .gl-pay li > * { width: 100%; justify-content: flex-start; }
.gl-pay-panel .gl-pay-copy svg { margin-left: auto; }
.gl-pay-panel .gl-pay-more { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--gl-secondary-strong); text-decoration: none; white-space: nowrap; }
@media (min-width: 720px) {
    .gl-pay-panel { grid-template-columns: 1fr auto; align-items: center; }
}
/* Smaller chips on phones, so an IBAN stays on one line; under 380 px the logos give way too, SINPE Móvil's staying at 28 px. */
@media (max-width: 719px) {
    .gl-pay-panel { padding: 24px 16px; border-radius: 22px; }
    .gl-pay-panel .gl-pay-more { width: 100%; }
    .gl-pay-panel .gl-pay-copy, .gl-pay-panel .gl-pay span { gap: 8px; padding-inline: 12px; font-size: .8rem; }
}
@media (max-width: 379px) {
    .gl-pay-panel { padding-inline: 12px; }
    .gl-pay-panel .gl-pay-copy, .gl-pay-panel .gl-pay span { padding-inline: 10px; }
    .gl-pay-panel .gl-pay-logo { max-width: 64px; }
}

/* FAQ: the search field filters the list of its own row */
.gl-faq-search input {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 1.5px solid var(--gl-border);
    border-radius: 16px;
    background: var(--gl-surface);
    color: var(--gl-heading);
    font: inherit;
    font-weight: 700;
}
.gl-faq-search input:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-color: var(--gl-secondary); }
.gl-faq { display: grid; gap: 12px; }
.gl-faq details { padding: 0 22px; border-radius: var(--gl-radius); background: var(--gl-surface-alt); }
.gl-faq details[hidden] { display: none; }
.gl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    color: var(--gl-heading);
    font-size: 1.05rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}
.gl-faq summary::-webkit-details-marker { display: none; }
.gl-faq summary::after {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    background-image: linear-gradient(var(--gl-accent), var(--gl-accent)), linear-gradient(var(--gl-accent), var(--gl-accent));
    background-size: 14px 3px, 3px 14px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .25s;
}
.gl-faq details[open] summary::after { transform: rotate(45deg); }
.gl-faq summary:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-radius: 8px; }
.gl-faq-answer { padding-bottom: 20px; color: var(--gl-text-muted); }
.gl-faq-empty { margin: 0; color: var(--gl-text-muted); }
.gl-faq-empty[hidden] { display: none; }

/* Restriction lists */
.gl-reslists { display: grid; gap: calc(18px * var(--gl-space)); margin: 0; padding: 0; list-style: none; }
.gl-reslist { padding: calc(24px * var(--gl-space)); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); }
.gl-reslist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.gl-reslist-head .gl-h3 { margin: 0; }
.gl-reslist-items { columns: 3 200px; column-gap: 28px; margin: 0; padding: 0; list-style: none; color: var(--gl-text); }
.gl-reslist-items li { position: relative; padding: 5px 0 5px 16px; break-inside: avoid; }
.gl-reslist-items li::before { content: ""; position: absolute; top: .9em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gl-accent); }
/* Closed under a button: a details element opens without a script, and its lists stay in the page for search engines. */
.gl-reslists-toggle > summary { display: flex; width: fit-content; margin-inline: auto; list-style: none; cursor: pointer; }
.gl-reslists-toggle > summary::-webkit-details-marker { display: none; }
.gl-reslists-toggle > summary svg { transition: transform .2s; }
.gl-reslists-toggle[open] > summary svg { transform: rotate(180deg); }
.gl-reslists-toggle > .gl-reslists { margin-top: calc(28px * var(--gl-space)); }

/* The delivery routes block (delivery-routes, D5): a search by place over the route cards, each with its days. */
.gl-routes { display: grid; gap: calc(20px * var(--gl-space)); margin-top: calc(22px * var(--gl-space)); }
.gl-routes-tools { display: grid; gap: 14px; }
.gl-routes-find { display: grid; gap: 10px; max-width: 640px; }
.gl-routes-find label { color: var(--gl-heading); font-size: .95rem; font-weight: 800; }
.gl-routes-input { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 8px 0 16px; border: 1.5px solid var(--gl-border); border-radius: 16px; background: var(--gl-surface); color: var(--gl-text-muted); transition: border-color .2s, box-shadow .2s; }
.gl-routes-input:focus-within { border-color: var(--gl-secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gl-secondary) 14%, transparent); }
.gl-routes-input svg { flex: none; width: 20px; height: 20px; }
.gl-routes-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--gl-heading); font: inherit; font-size: 1.05rem; }
.gl-routes-input input::-webkit-search-cancel-button { display: none; }
.gl-routes-clear { flex: none; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--gl-secondary); font: inherit; font-weight: 800; cursor: pointer; }
.gl-routes-clear:hover { background: var(--gl-surface-alt); }
.gl-routes-places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gl-routes-places button { padding: 7px 12px; border: 1px solid var(--gl-border); border-radius: 999px; background: var(--gl-surface); color: var(--gl-text); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.gl-routes-places button:hover, .gl-routes-places button[aria-pressed="true"] { border-color: var(--gl-secondary); color: var(--gl-secondary); }
.gl-routes-places button[aria-pressed="true"] { background: color-mix(in srgb, var(--gl-secondary) 8%, var(--gl-surface)); }
.gl-routes-status { margin: 0; color: var(--gl-text-muted); font-weight: 700; }
.gl-routes-status strong { color: var(--gl-heading); }
.gl-route-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: calc(18px * var(--gl-space)); margin: 0; padding: 0; list-style: none; }
.gl-route { display: grid; align-content: start; gap: 16px; padding: calc(24px * var(--gl-space)); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); color: var(--gl-text); }
.gl-route-head { display: flex; align-items: center; gap: 12px; }
.gl-route-head svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--gl-secondary) 10%, var(--gl-surface)); color: var(--gl-secondary); box-sizing: border-box; }
.gl-route-head .gl-h3 { margin: 0; }
.gl-route-when { margin: 0; font-weight: 700; }
.gl-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.gl-days li { display: grid; place-items: center; min-height: 36px; border-radius: 10px; background: var(--gl-surface-alt); color: var(--gl-text-muted); font-size: .8rem; font-weight: 800; }
.gl-days li.is-on { background: var(--gl-secondary); color: #fff; }
.gl-route-places { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gl-route-places li { padding: 5px 10px; border-radius: 999px; background: var(--gl-surface-alt); color: var(--gl-text); font-size: .86rem; font-weight: 600; }
.gl-route-places li.is-match { background: var(--gl-accent); color: #fff; font-weight: 800; }
.gl-routes-empty { display: grid; gap: 12px; justify-items: start; padding: calc(24px * var(--gl-space)); border: 1.5px dashed var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); }
.gl-routes-empty p { margin: 0; color: var(--gl-text); }
.gl-routes-empty strong { color: var(--gl-heading); }
@media (max-width: 719px) {
    .gl-days li { min-height: 32px; font-size: .74rem; }
}

/* The blog posts block and a post's page (blog-renewal, D6, D7). */
.gl-posts { display: grid; gap: calc(28px * var(--gl-space)); }
.gl-col > .gl-posts:not(:first-child), .gl-col > .gl-posts-empty:not(:first-child) { margin-top: calc(36px * var(--gl-space)); }
.gl-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: calc(24px * var(--gl-space)); margin: 0; padding: 0; list-style: none; }
.gl-post { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); transition: transform .25s, box-shadow .25s; }
.gl-post:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(21, 24, 51, .12); }
.gl-post:focus-within { outline: 3px solid var(--gl-secondary); outline-offset: 2px; }
.gl-post-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gl-surface-alt); }
.gl-post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-post-cover--empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--gl-secondary), var(--gl-dark)); color: rgba(255, 255, 255, .6); }
.gl-post-cover--empty svg { width: 56px; height: 56px; }
.gl-post-body { display: grid; align-content: start; gap: 10px; flex: 1; padding: calc(22px * var(--gl-space)); }
.gl-post-meta { margin: 0; color: var(--gl-text-muted); font-size: .86rem; font-weight: 700; }
.gl-post .gl-h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.gl-post .gl-h3 a { color: var(--gl-heading); }
.gl-post .gl-h3 a::after { content: ""; position: absolute; inset: 0; }
.gl-post .gl-h3 a:focus-visible { outline: none; }
.gl-post-summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--gl-text); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gl-post-more, .gl-post-all { display: inline-flex; align-items: center; gap: 6px; color: var(--gl-accent); font-weight: 800; }
.gl-post-more { margin-top: auto; padding-top: 6px; }
.gl-post-more svg, .gl-post-all svg { width: 18px; height: 18px; transition: transform .2s; }
.gl-post:hover .gl-post-more svg, .gl-post-all:hover svg { transform: translateX(4px); }
.gl-post-all { justify-self: start; }
.gl-post-tag { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--gl-accent); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.gl-post--featured { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .gl-post--featured { display: grid; grid-template-columns: 1.25fr 1fr; }
    .gl-post--featured .gl-post-cover { aspect-ratio: auto; min-height: 340px; }
    .gl-post--featured .gl-post-body { align-content: center; gap: 14px; padding: calc(40px * var(--gl-space)); }
    .gl-post--featured .gl-h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 900; }
}
.gl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gl-pager a, .gl-pager span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--gl-border); border-radius: 12px; background: var(--gl-surface); color: var(--gl-heading); font-weight: 800; }
.gl-pager [aria-current="page"] { border-color: var(--gl-secondary); background: var(--gl-secondary); color: #fff; }
.gl-posts-empty { display: grid; gap: 12px; justify-items: start; padding: calc(24px * var(--gl-space)); border: 1.5px dashed var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); }
.gl-posts-empty p { margin: 0; color: var(--gl-text); }
.gl-posts-related .gl-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.gl-posts-related + .gl-post-list { margin-top: calc(28px * var(--gl-space)); }
.gl-article { display: grid; gap: calc(28px * var(--gl-space)); max-width: 760px; margin-inline: auto; }
.gl-article-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--gl-secondary); font-weight: 800; }
.gl-article-back svg { width: 18px; height: 18px; }
.gl-article-head { display: grid; gap: 16px; }
.gl-article-head .gl-h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.gl-article-head .gl-kicker + * { margin-top: 0; }
.gl-article-lead { margin: 0; color: var(--gl-text); font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.6; }
.gl-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; color: var(--gl-text-muted); font-weight: 700; }
.gl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gl-share-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--gl-border); border-radius: 999px; background: var(--gl-surface); color: var(--gl-heading); font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.gl-share-btn:hover, .gl-share-btn[data-gl-copied] { border-color: var(--gl-secondary); color: var(--gl-secondary); }
.gl-share-btn svg { width: 18px; height: 18px; }
.gl-article-cover { margin: 0; overflow: hidden; border-radius: var(--gl-radius); }
.gl-article-cover img { display: block; width: 100%; height: auto; }
.gl-article-body { font-size: 1.08rem; line-height: 1.75; }
.gl-article-body img { border-radius: 12px; }
.gl-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--gl-border); }

/* The notice over a preview of a page or a post. */
.gl-pv-aviso { position: fixed; z-index: 1100; top: 84px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 16px; border-radius: 999px; background: #FFF3CD; color: #533F03; font: 600 14px/1.4 system-ui, sans-serif; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }

@media (max-width: 719px) {
    .gl-reslist-items { columns: 1; }
}

/* Payment methods: columns, not a grid, so a short card stacks under another instead of leaving a gap */
.gl-payid { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 calc(28px * var(--gl-space)); padding: 8px 14px; border-radius: 999px; background: var(--gl-surface-alt); color: var(--gl-heading); font-weight: 800; }
.gl-payid span { color: var(--gl-text-muted); font-weight: 700; }
.gl-paymethods { columns: 3 300px; column-gap: calc(20px * var(--gl-space)); margin: 0; padding: 0; list-style: none; }
.gl-paymethod {
    display: grid;
    align-content: start;
    gap: 18px;
    margin-bottom: calc(20px * var(--gl-space));
    break-inside: avoid;
    padding: calc(26px * var(--gl-space));
    border: 1px solid var(--gl-border);
    border-radius: calc(var(--gl-radius) + 4px);
    background: var(--gl-surface);
    box-shadow: 0 18px 44px rgba(21, 24, 51, .06);
}
.gl-paymethod > *, .gl-paymethod p { margin: 0; letter-spacing: normal; line-height: inherit; }
.gl-paymethod-head { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.gl-paymethod-name { margin: 0; font-size: 1.3rem; font-weight: 900; }
/* The name is the card's heading, so the logo is decorative. */
.gl-paymethod-logo { display: block; flex: none; width: auto; height: 44px; max-width: 132px; object-fit: contain; }
.gl-paymethod-detail, .gl-paydata div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: var(--gl-surface-alt); }
.gl-paymethod-detail p, .gl-paydata dd { margin: 0; color: var(--gl-heading); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; overflow-wrap: anywhere; }
.gl-paymethod-detail p { font-size: 1.5rem; letter-spacing: .02em; }
.gl-paygroup { display: grid; gap: 8px; }
.gl-paygroup h4 { margin: 0; color: var(--gl-secondary); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gl-paydata { display: grid; gap: 6px; margin: 0; }
.gl-paydata dt { color: var(--gl-text-muted); font-size: .82rem; font-weight: 800; }
/* The value takes the whole width under its label and its button, so a long IBAN fits on a phone. */
.gl-paydata dd { grid-column: 1 / -1; grid-row: 2; font-size: .98rem; }
.gl-paydata .gl-paycopy { grid-column: 2; grid-row: 1; }
.gl-paycopy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--gl-border); border-radius: 999px; background: var(--gl-surface); color: var(--gl-secondary-strong); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.gl-paycopy:hover { border-color: var(--gl-secondary); }
.gl-paycopy:focus-visible { outline: 3px solid var(--gl-accent); outline-offset: 2px; }
.gl-paycopy svg { width: 15px; height: 15px; }
.gl-paycopy[data-gl-copied] { background: var(--gl-secondary-strong); border-color: var(--gl-secondary-strong); color: #fff; }
.gl-paymethod-note { color: var(--gl-text); line-height: 1.6; }

/* Company values: cards on the surface, each name under an accent rule */
.gl-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(18px * var(--gl-space)); margin: 0; padding: 0; list-style: none; }
.gl-value { display: grid; align-content: start; gap: 10px; padding: calc(24px * var(--gl-space)); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); }
.gl-value::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: var(--gl-accent); }
.gl-value .gl-h3 { margin: 0; }
.gl-col > .gl-values:not(:first-child) { margin-top: calc(36px * var(--gl-space)); }
.gl-value p { margin: 0; color: var(--gl-text); line-height: 1.6; letter-spacing: normal; }

/* Freight table */
.gl-table-wrap { overflow-x: auto; border: 1px solid var(--gl-border); border-radius: var(--gl-radius); background: var(--gl-surface); }
.gl-table { width: 100%; border-collapse: collapse; color: var(--gl-text); font-variant-numeric: tabular-nums; }
.gl-table caption { padding: 14px 18px; color: var(--gl-text-muted); caption-side: top; text-align: left; }
.gl-table th, .gl-table td { padding: 12px 18px; border-top: 1px solid var(--gl-border); text-align: left; }
.gl-table thead th { border-top: 0; background: var(--gl-surface-alt); color: var(--gl-heading); font-weight: 800; }
.gl-table th:last-child, .gl-table td:last-child { text-align: right; white-space: nowrap; }
.gl-table-note { margin: 12px 0 0; color: var(--gl-text-muted); }

/* Journey: the rail fills and the package moves as the page scrolls (--p, from sitio.js) */
.gl-col > .gl-rail:not(:first-child) { margin-top: calc(48px * var(--gl-space)); }
.gl-rail { position: relative; --p: 0; }
.gl-rail::before, .gl-rail::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 32px;
    right: 32px;
    height: 4px;
    border-radius: 4px;
    background: var(--gl-border);
}
.gl-rail::after { right: auto; width: calc((100% - 64px) * var(--p)); background: linear-gradient(90deg, var(--gl-secondary), var(--gl-accent)); }
.gl-rail-box {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: calc(32px + (100% - 64px) * var(--p) - 21px);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--gl-accent);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--gl-accent) 40%, transparent);
    transition: left .08s linear;
}
.gl-rail-box svg { width: 22px; height: 22px; }
.gl-rail-stops {
    display: grid;
    grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gl-stop { position: relative; z-index: 1; padding-top: 88px; }
.gl-stop::before {
    content: attr(data-n);
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 3px solid var(--gl-border);
    border-radius: 50%;
    background: #fff;
    color: var(--gl-text-muted);
    font-weight: 900;
    transition: all .3s;
}
.gl-stop.gl-lit::before { border-color: var(--gl-secondary); background: var(--gl-secondary); color: #fff; }
.gl-stop .gl-h3 { font-size: 1.35rem; }
.gl-stop p { margin: 8px 0 0; color: var(--gl-text-muted); letter-spacing: normal; line-height: 1.6; }
.gl-stop-tag { display: inline-block; margin-top: 12px; color: var(--gl-accent); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 719px) {
    .gl-rail-stops { grid-template-columns: 1fr; gap: 8px; }
    .gl-rail::before, .gl-rail::after { top: 32px; bottom: 32px; left: 31px; right: auto; width: 4px; height: auto; }
    .gl-rail::after { bottom: auto; height: calc((100% - 64px) * var(--p)); }
    .gl-rail-box { left: 12px; top: calc(32px + (100% - 64px) * var(--p) - 21px); transition: top .08s linear; }
    .gl-stop { padding: 14px 0 26px 76px; }
}

/* Can I bring it? */
.gl-checker { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
.gl-ask input {
    width: 100%;
    min-height: 72px;
    padding: 0 24px;
    border: 2px solid var(--gl-border);
    border-radius: 22px;
    background: var(--gl-surface);
    color: var(--gl-heading);
    font: inherit;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 800;
    box-shadow: 0 18px 50px rgba(21, 24, 51, .08);
}
.gl-ask input:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-color: var(--gl-secondary); }
.gl-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gl-samples button {
    padding: 8px 14px;
    border: 1px solid var(--gl-border);
    border-radius: 999px;
    background: var(--gl-surface);
    color: var(--gl-secondary);
    font-weight: 700;
    cursor: pointer;
}
.gl-samples button:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
.gl-verdicts { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.gl-verdicts li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border: 1px solid var(--gl-border);
    border-radius: 16px;
    background: var(--gl-surface);
}
.gl-verdicts strong { display: block; color: var(--gl-heading); }
.gl-verdicts div > span { color: var(--gl-text-muted); font-size: .88rem; }
.gl-pill { padding: 5px 10px; border-radius: 999px; background: var(--gl-pill-bg); color: var(--gl-pill-text); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.gl-pill--none { background: #E6F4F1; color: #11634F; }
.gl-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.gl-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gl-lists li { padding: 22px; border-radius: 20px; background: var(--gl-surface-alt); }
.gl-lists strong { display: block; color: var(--gl-secondary-strong); font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.gl-lists span { color: var(--gl-text-muted); font-size: .92rem; font-weight: 700; }

@media (max-width: 1079px) {
    .gl-checker { grid-template-columns: 1fr; }
}

/* Services bento: the first service with an image spans two columns and two rows */
.gl-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, auto);
    gap: 16px;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.gl-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    overflow: hidden;
    border-radius: calc(var(--gl-radius) + 6px);
    background: var(--gl-surface-alt);
    transition: transform .25s ease, box-shadow .25s ease;
}
.gl-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(21, 24, 51, .12); }
.gl-tile p { margin: 0; color: var(--gl-text-muted); font-size: .95rem; letter-spacing: normal; line-height: 1.6; }
.gl-tile-list { margin: 8px 0 0; padding-left: 18px; color: var(--gl-text-muted); font-size: .93rem; line-height: 1.6; list-style: disc; }
.gl-tile .gl-h3 { margin: 0 0 6px; }
.gl-tile .gl-h3 a { color: inherit; }
.gl-tile .gl-h3 a::after { content: ""; position: absolute; inset: 0; }
.gl-tile:focus-within { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
.gl-tile .gl-h3 a:focus-visible { outline: none; }
.gl-tile .gl-tile-big {
    margin-bottom: 10px;
    color: var(--gl-accent);
    font-family: var(--gl-font-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}
.gl-tile--image { grid-column: span 2; grid-row: span 2; justify-content: flex-start; padding: 0; background: var(--gl-secondary-strong); }
.gl-tile--image img { flex: none; width: 100%; height: auto; }
.gl-tile--image .gl-tile-text { padding: 26px; }
.gl-tile--image .gl-h3 { color: #fff; font-size: 1.6rem; }
.gl-tile--image p, .gl-tile--image .gl-tile-list { color: #C9CDF0; }
.gl-tile--wide { grid-column: span 2; }
.gl-tile--accent { background: var(--gl-accent); }
.gl-tile--accent .gl-h3, .gl-tile--accent p, .gl-tile--accent .gl-tile-list, .gl-tile--accent .gl-tile-big { color: #fff; }
.gl-tile--dark { background: var(--gl-dark); }
.gl-tile--dark .gl-h3 { color: #fff; }
.gl-tile--dark p, .gl-tile--dark .gl-tile-list { color: #C9CDF0; }
.gl-tile--dark .gl-tile-big { color: var(--gl-accent-on-dark); }

@media (max-width: 1079px) {
    .gl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
    .gl-bento { grid-template-columns: 1fr; }
    .gl-tile--image, .gl-tile--wide { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-tile, .gl-tile:hover { transition: none; transform: none; }
}

/* Services by path: a tab per audience, each with its intro card and its services (services-by-path); the people's path is
   illustrated with a shipping label drawn from the first active locker. */
.gl-paths { display: grid; gap: calc(28px * var(--gl-space)); }
.gl-paths-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 48px; }
.gl-paths-lead { grid-column: 1; margin: 0; max-width: 560px; color: var(--gl-text); font-size: 1.12rem; line-height: 1.6; }
.gl-paths-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-column: 2; justify-self: end; align-self: end; padding: 6px; border: 1px solid var(--gl-border); border-radius: 22px; background: var(--gl-surface-alt); }
.gl-paths-tabs, .gl-path { scroll-margin-top: 96px; }
.gl-path:focus { outline: none; }
.gl-paths-thumb { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 17px; background: var(--gl-secondary-strong); box-shadow: 0 10px 24px color-mix(in srgb, var(--gl-secondary-strong) 30%, transparent); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.gl-paths-tabs[data-active="1"] .gl-paths-thumb { transform: translateX(100%); }
.gl-paths-tabs button { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 22px 10px 14px; border: 0; border-radius: 17px; background: none; color: var(--gl-heading); font: inherit; text-align: left; cursor: pointer; transition: color .25s; }
.gl-paths-tabs button[aria-selected="true"] { color: #fff; }
.gl-paths-tabs button:focus-visible { outline: 3px solid var(--gl-accent); outline-offset: 2px; }
.gl-paths-tabs strong { display: block; font-size: 1rem; font-weight: 900; }
.gl-paths-tabs small { display: block; color: var(--gl-text-muted); font-size: .82rem; font-weight: 700; transition: color .25s; }
.gl-paths-tabs button[aria-selected="true"] small { color: #C9CDF0; }
.gl-paths-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gl-surface); color: var(--gl-secondary); transition: background .25s, color .25s; }
.gl-paths-tabs button[aria-selected="true"] .gl-paths-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.gl-paths-icon svg { width: 22px; height: 22px; }

.gl-path { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 20px; }
.gl-path[hidden] { display: none; }
.gl-path.is-entering { animation: gl-path-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes gl-path-in { from { opacity: 0; transform: translateY(12px); } }
.gl-path-intro { position: sticky; top: 96px; display: grid; gap: 18px; padding: 34px; border: 1px solid var(--gl-border); border-radius: calc(var(--gl-radius) + 6px); background: var(--gl-surface); box-shadow: 0 24px 60px rgba(21, 24, 51, .07); }
.gl-path-intro > * { margin: 0; }
.gl-path-intro .gl-path-kicker { color: var(--gl-accent); font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gl-path-title { color: var(--gl-heading); font-family: var(--gl-font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; }
.gl-path-intro p { color: var(--gl-text); font-size: 1rem; line-height: 1.65; }
.gl-path-checks { display: grid; gap: 12px; padding: 0; list-style: none; }
.gl-path-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; color: var(--gl-text); line-height: 1.5; }
.gl-path-checks li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--gl-accent) 12%, var(--gl-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DA2D1D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.gl-path-checks strong { color: var(--gl-heading); }
.gl-path-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gl-path-proof { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-top: 18px; border-top: 2px dashed var(--gl-border); }
.gl-path-proof span { color: var(--gl-text-muted); font-size: .9rem; font-weight: 700; }
.gl-path-proof strong { display: block; color: var(--gl-secondary-strong); font-size: 1.9rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }

.gl-path-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gl-path-stage .gl-bento { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(176px, auto); }
.gl-path-stage .gl-tile--wide { grid-column: span 2; }
.gl-path-switch { grid-column: 2; margin: 0; color: var(--gl-text-muted); font-weight: 700; text-align: center; }
.gl-path-switch a { color: var(--gl-secondary); font-weight: 900; }

/* The person's path: a shipping label made from the locker catalog, with the stores they buy from. */
.gl-label-stage { container-type: inline-size; grid-column: 1 / -1; overflow: hidden; border-radius: calc(var(--gl-radius) + 6px); background:
    radial-gradient(520px 300px at 90% 0%, color-mix(in srgb, var(--gl-accent) 32%, transparent), transparent 65%),
    radial-gradient(circle, rgba(255, 255, 255, .1) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--gl-darker), var(--gl-secondary-strong)); color: #fff; }
.gl-label-scene { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "label note" "label stores" "flight flight"; gap: 18px 24px; padding: 34px; }
.gl-ship-label { grid-area: label; align-self: start; padding: 22px 22px 18px; border-radius: 14px; background: #fff; color: var(--gl-heading); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transform: rotate(-2.5deg); }
.gl-ship-label-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px dashed var(--gl-border); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-text-muted); }
.gl-ship-label-head b { color: var(--gl-accent); font-family: var(--gl-font-display); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.gl-ship-label dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 14px 0; font-size: .92rem; }
.gl-ship-label dt { color: var(--gl-text-muted); font-weight: 700; }
.gl-ship-label dd { margin: 0; font-weight: 800; }
.gl-ship-label dd mark { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--gl-accent) 12%, #fff); color: var(--gl-accent-hover); }
.gl-barcode { height: 34px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--gl-heading) 0 2px, transparent 2px 4px, var(--gl-heading) 4px 5px, transparent 5px 9px, var(--gl-heading) 9px 12px, transparent 12px 14px); opacity: .85; }
.gl-flight { grid-area: flight; display: grid; margin-top: 8px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; font-weight: 900; letter-spacing: .06em; }
.gl-flight small { display: block; color: #A9AEDD; font-size: .72rem; letter-spacing: .1em; }
.gl-flight-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 8px, transparent 8px 16px); }
.gl-flight-line svg { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; color: var(--gl-accent-on-dark); transform: translate(-50%, -50%); animation: gl-fly 4.5s ease-in-out infinite; }
@keyframes gl-fly { 0% { left: 0; } 85%, 100% { left: 100%; } }
.gl-flight-note { grid-area: note; justify-self: end; max-width: 220px; margin: 0; color: #C9CDF0; font-size: .9rem; font-weight: 700; text-align: right; }
.gl-flight-note strong { display: block; color: #fff; font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.gl-stores { grid-area: stores; justify-self: end; align-self: start; display: grid; grid-template-columns: repeat(3, 64px); gap: 12px; }
.gl-stores span { display: grid; place-items: center; height: 54px; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); animation: gl-float 6s ease-in-out infinite; }
.gl-stores span:nth-child(2n) { animation-delay: -2s; }
.gl-stores span:nth-child(3n) { animation-delay: -4s; }
.gl-stores img { width: 42px; height: 22px; object-fit: contain; }
@keyframes gl-float { 50% { transform: translateY(-6px); } }
@container (max-width: 680px) {
    .gl-label-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "note" "stores" "flight"; padding: 24px 20px; }
    .gl-ship-label { transform: none; }
    .gl-flight-note { justify-self: start; max-width: none; text-align: left; }
    .gl-stores { justify-self: stretch; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .gl-stores span { height: 44px; border-radius: 12px; }
    .gl-stores img { width: 34px; }
}

@media (max-width: 1079px) {
    .gl-paths-head { grid-template-columns: minmax(0, 1fr); }
    .gl-paths-tabs { grid-row: auto; grid-column: 1; justify-self: start; }
    .gl-path { grid-template-columns: minmax(0, 1fr); }
    .gl-path-intro { position: static; }
    .gl-path-switch { grid-column: 1; }
}
@media (max-width: 719px) {
    .gl-paths-tabs { justify-self: stretch; }
    .gl-paths-tabs button { flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; padding: 12px 8px; text-align: center; }
    .gl-path-intro { padding: 24px; }
    .gl-path-actions .gl-btn { flex: 1 1 100%; justify-content: center; }
    .gl-path-stage, .gl-path-stage .gl-bento { grid-template-columns: minmax(0, 1fr); }
    .gl-path-stage .gl-bento { grid-auto-rows: auto; }
    .gl-path-stage .gl-tile--wide { grid-column: auto; }
}
.gl-row--dark .gl-paths-lead { color: #C9CDF0; }
.gl-row--dark .gl-paths-tabs { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }
.gl-row--dark .gl-paths-tabs button { color: #fff; }
.gl-row--dark .gl-paths-tabs small, .gl-row--dark .gl-path-switch { color: #C9CDF0; }
.gl-row--dark .gl-path-switch a { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .gl-paths-thumb, .gl-paths-tabs button, .gl-paths-icon { transition: none; }
    .gl-path.is-entering, .gl-flight-line svg, .gl-stores span { animation: none; }
}

/* The hero template of proposal 2: one centred column on the deep background, with the map rising behind the
   buttons from the bottom, which is cropped. The first row sits under the fixed, translucent header. */
.gl-row--dark[data-template="hero"] {
    background:
        radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--gl-secondary) 85%, transparent), transparent 60%),
        radial-gradient(900px 500px at 85% 85%, color-mix(in srgb, var(--gl-accent) 22%, transparent), transparent 60%),
        linear-gradient(180deg, var(--gl-dark), var(--gl-darker));
}
.gl-row[data-template="hero"] { position: relative; isolation: isolate; overflow: clip; padding: 100px 0 0; text-align: center; }
.gl-row[data-template="hero"] .gl-col { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; }
/* min-width: 0, or the tracking field's natural width stretches its item past the column on phones. */
.gl-row[data-template="hero"] .gl-col > * { flex: 0 0 100%; min-width: 0; margin-top: 0; }
/* Half the gaps on each side, so stacked buttons stay 12 px apart, as in proposal 2. */
.gl-row[data-template="hero"] .gl-col > .gl-actions-row { flex: 0 0 auto; margin: 6px 0; }
.gl-row[data-template="hero"] .gl-col > .gl-actions-row + .gl-track { margin-top: calc(28px + var(--gl-hero-track-drop, 0px)); }
.gl-row[data-template="hero"] .gl-ticker { justify-content: center; }
.gl-row[data-template="hero"] .gl-heading { margin-bottom: 22px; }
.gl-row[data-template="hero"] .gl-h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(2.4rem, 5.8vw, 4.75rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
/* Full-width items keep the buttons on a line of their own; the padding narrows the lead instead of a max-width. */
.gl-row[data-template="hero"] .gl-col > .gl-text { max-width: none; margin-bottom: 6px; padding-inline: max(0px, calc((100% - 58ch) / 2)); font-size: clamp(1rem, 1.3vw, 1.125rem); }
.gl-row[data-template="hero"] .gl-track > * { width: min(680px, 100%); margin-inline: auto; text-align: left; }
.gl-row[data-template="hero"] .gl-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 30px; font-size: .95rem; font-weight: 700; }
.gl-row[data-template="hero"] .gl-list li::before { top: .38em; left: 3px; width: 12px; height: 7px; border: solid var(--gl-accent); border-width: 0 0 2.5px 2.5px; border-radius: 0; background: none; transform: rotate(-45deg); }
.gl-row--dark[data-template="hero"] .gl-list { color: #DDE0FA; }
.gl-row--dark[data-template="hero"] .gl-list li::before { border-color: var(--gl-accent-on-dark); }
/* As in proposal 2: the map's bottom 24 % is cropped and it rises 121 px below the perks, whatever its width; the tracking's
   drop is taken back from its top, so it stays under the buttons, and half of it is given back below the perks. */
.gl-row[data-template="hero"] .gl-col > .gl-map {
    --gl-map-width: min(1500px, 100vw);
    position: relative;
    z-index: -1;
    flex: 0 0 var(--gl-map-width);
    margin: calc(121px - var(--gl-map-width) * .2734 - var(--gl-hero-track-drop, 0px)) 0 calc(var(--gl-map-width) * -.0863 + var(--gl-hero-track-drop, 0px) / 2);
    pointer-events: none;
}
.gl-row[data-template="hero"] .gl-map [role="button"] { pointer-events: auto; }
.gl-row--dark[data-template="hero"] .gl-map::before { content: ""; position: absolute; inset: -20% 18% 50%; z-index: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--gl-darker) 85%, transparent), transparent); pointer-events: none; }

/* The tracking sits lower over the map, so the routes show between the buttons and the field (Dan, 2026-10-26). Its width
   keeps it between the places on the left, which end at 21 % of the map, and Guangzhou, which starts at 84 %. */
@media (min-width: 1080px) {
    .gl-row[data-template="hero"] { --gl-hero-track-drop: 140px; }
    .gl-row[data-template="hero"] .gl-track > * { width: min(680px, 54vw); }
}

/* Under 1080 px the tracking cannot fit between the map's places, so the map follows the perks and nothing covers them. */
@media (max-width: 1079px) {
    .gl-row[data-template="hero"] .gl-col > .gl-map { z-index: 0; margin: 8px 0 calc(var(--gl-map-width) * -.0863); }
    .gl-row--dark[data-template="hero"] .gl-map::before { display: none; }
}

@media (max-width: 719px) {
    .gl-row[data-template="hero"] { padding-top: 96px; }
    /* Wider than the screen and moved right, so the Americas and Costa Rica stay in view. */
    .gl-row[data-template="hero"] .gl-col > .gl-map { flex-basis: 150%; margin: 8px 0 -6%; transform: translateX(12%); }
    .gl-row[data-template="hero"] .gl-worldmap .gl-node text { display: none; }
    .gl-row[data-template="hero"] .gl-worldmap .gl-node--home text { display: block; font-size: 30px; }
}

/* World map: the dotted land of mapa-puntos.svg, the routes to Costa Rica and the places. Drawn on dark backgrounds. */
.gl-map { position: relative; }
.gl-worldmap { display: block; width: 100%; height: auto; overflow: visible; }
.gl-worldmap .gl-land { fill: none; stroke: rgba(210, 214, 255, .22); stroke-width: 3.2; stroke-linecap: round; }
.gl-worldmap .gl-arc { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.gl-worldmap .gl-arc.gl-sea { stroke-dasharray: 2 7; }
.gl-worldmap .gl-pulse { fill: #fff; }
.gl-worldmap .gl-dot { fill: #fff; }
.gl-worldmap .gl-ring {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    opacity: .6;
    transform-box: fill-box;
    transform-origin: center;
    animation: gl-ring 2.6s ease-out infinite;
}
.gl-worldmap text {
    fill: #fff;
    font: 800 15px var(--gl-font-body);
    letter-spacing: .02em;
    paint-order: stroke;
    stroke: rgba(15, 18, 56, .8);
    stroke-width: 4px;
}
.gl-worldmap .gl-node--home .gl-dot { fill: var(--gl-accent); }
.gl-worldmap .gl-node--home .gl-ring { stroke: var(--gl-accent-on-dark); }
.gl-worldmap .gl-node--home text { fill: #FFB199; font-size: 17px; }
.gl-worldmap .gl-node[role="button"] { cursor: pointer; }
.gl-worldmap .gl-node[role="button"]:hover .gl-dot, .gl-worldmap .gl-node[role="button"]:focus .gl-dot { fill: #FFB199; }
.gl-worldmap .gl-node[role="button"]:focus { outline: none; }
.gl-worldmap .gl-node[role="button"]:focus-visible .gl-hit { stroke: #FFB199; stroke-width: 2; }
.gl-worldmap .gl-hit { fill: transparent; }
.gl-worldmap--animate .gl-arc {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: gl-draw 1.6s cubic-bezier(.6, 0, .2, 1) forwards;
    animation-delay: calc(300ms + var(--i, 0) * 260ms);
}

@keyframes gl-ring {
    from { transform: scale(.6); opacity: .8; }
    to { transform: scale(2.6); opacity: 0; }
}

@keyframes gl-draw {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-worldmap .gl-pulse { display: none; }
    .gl-worldmap .gl-ring { animation: none; }
    .gl-worldmap--animate .gl-arc { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Locker explorer */
.gl-whoami {
    box-sizing: border-box;
    width: min(460px, 100%);
    padding: 20px;
    border: 1.5px solid var(--gl-border);
    border-radius: 20px;
    background: var(--gl-surface);
    box-shadow: 0 18px 44px rgba(21, 24, 51, .1);
}
.gl-whoami-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--gl-heading); font-size: 1rem; font-weight: 900; }
.gl-whoami-icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--gl-secondary) 12%, var(--gl-surface)); color: var(--gl-secondary); }
.gl-whoami-icon svg { width: 18px; height: 18px; }
.gl-whoami-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.gl-whoami label { display: block; margin-bottom: 6px; color: var(--gl-heading); font-size: .82rem; font-weight: 800; }
.gl-whoami input {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1.5px solid var(--gl-border);
    border-radius: 14px;
    background: var(--gl-surface);
    color: var(--gl-heading);
    font: inherit;
    font-weight: 700;
}
.gl-whoami input:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-color: var(--gl-secondary); }
.gl-whoami-locker { display: flex; }
.gl-whoami-prefix { display: grid; flex: none; place-items: center; padding: 0 10px 0 14px; border-radius: 14px 0 0 14px; background: var(--gl-secondary); color: #fff; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.gl-whoami-locker input { flex: 1; min-width: 0; border-left: 0; border-radius: 0 14px 14px 0; padding-left: 12px; letter-spacing: .06em; }
.gl-whoami small { display: block; margin-top: 10px; color: var(--gl-text-muted); }
@media (max-width: 719px) {
    .gl-whoami-fields { grid-template-columns: minmax(0, 1fr); }
}
/* The lockers template of proposal 2: the title kept narrow and, on wide screens, the name field beside the title and the lead. */
.gl-row[data-template="lockers"] .gl-h2 { max-width: 16ch; }
@media (min-width: 1080px) {
    .gl-row[data-template="lockers"] .gl-col { display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 40%); column-gap: 28px; }
    .gl-row[data-template="lockers"] .gl-col > *,
    .gl-row[data-template="lockers"] .gl-explorer-block > * { grid-column: 1 / -1; }
    .gl-row[data-template="lockers"] .gl-explorer-block { display: contents; }
    .gl-row[data-template="lockers"] .gl-col > .gl-heading { grid-column: 1; grid-row: 1; }
    .gl-row[data-template="lockers"] .gl-col > .gl-heading + .gl-text { grid-column: 1; grid-row: 2; }
    .gl-row[data-template="lockers"] .gl-whoami { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 100%; }
}
.gl-chips { display: flex; gap: 10px; margin: 32px 0 8px; padding: 4px 2px 12px; overflow-x: auto; scrollbar-width: none; }
.gl-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px 0 8px;
    border: 1.5px solid var(--gl-border);
    border-radius: 999px;
    background: var(--gl-surface);
    color: var(--gl-heading);
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
.gl-chip:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
.gl-cc {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gl-surface-alt);
    color: var(--gl-secondary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.gl-chip[aria-selected="true"] { border-color: var(--gl-secondary-strong); background: var(--gl-secondary-strong); color: #fff; }
.gl-chip[aria-selected="true"] .gl-cc { background: var(--gl-accent); color: #fff; }
.gl-explorer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
.gl-explorer--single { grid-template-columns: minmax(0, 1fr); }
.gl-mini-map { padding: 28px 18px; border-radius: 28px; background: linear-gradient(160deg, var(--gl-dark), var(--gl-secondary-strong)); overflow: hidden; }
.gl-mini-map .gl-worldmap text { font-size: 30px; stroke-width: 6px; }
.gl-mini-map .gl-worldmap .gl-land { stroke: rgba(210, 214, 255, .2); }
.gl-mini-map .gl-worldmap .gl-arc { opacity: .18; transition: opacity .35s ease; }
.gl-mini-map .gl-worldmap .gl-arc.gl-on { opacity: 1; stroke-width: 3.2; }
.gl-mini-map .gl-worldmap .gl-node { opacity: .45; transition: opacity .35s; }
.gl-mini-map .gl-worldmap .gl-node.gl-on, .gl-mini-map .gl-worldmap .gl-node--home { opacity: 1; }
.gl-map-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 14px 8px 0; color: #C9CDF0; font-size: .9rem; font-weight: 700; }
.gl-map-caption strong { color: #fff; }
.gl-label { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gl-border); border-radius: 22px; background: var(--gl-surface); box-shadow: 0 18px 50px rgba(21, 24, 51, .1); }
.gl-label[hidden] { display: none; }
.gl-label-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--gl-secondary-strong); color: #fff; }
.gl-label-strip small { display: block; color: #B9BDE9; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gl-label-strip strong { font-size: 1.15rem; }
.gl-kind { padding: 5px 10px; border-radius: 999px; background: var(--gl-accent); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.gl-kind--sea { background: #11634F; }
.gl-label dl { display: grid; margin: 0; padding: 10px 22px 4px; }
.gl-label-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--gl-border); }
.gl-label-row dt { color: var(--gl-text-muted); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gl-label-row dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.gl-label-value { min-width: 0; color: var(--gl-heading); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.gl-label-value.gl-consignee { color: var(--gl-accent-hover); font-family: var(--gl-font-body); font-weight: 800; }
.gl-copy {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--gl-border);
    border-radius: 12px;
    background: var(--gl-surface);
    color: var(--gl-secondary);
    cursor: pointer;
}
.gl-copy:hover { background: var(--gl-surface-alt); }
.gl-copy[data-gl-copied] { background: var(--gl-border); }
.gl-copy:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
.gl-copy svg { width: 18px; height: 18px; }
.gl-label-foot { display: flex; justify-content: flex-end; margin-top: auto; padding: 16px 22px 20px; }

@media (max-width: 1079px) {
    .gl-explorer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
    .gl-label-row { grid-template-columns: minmax(0, 1fr); }
}

/* Tracking and calculator: neutral on light rows; on dark rows they take proposal 2's translucent fields */
.gl-trackbar { width: min(680px, 100%); }
.gl-trackbar label { display: block; margin: 0 0 8px 18px; color: var(--gl-heading); font-size: .9rem; font-weight: 800; }
.gl-trackbar-field {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--gl-border);
    border-radius: 999px;
    background: var(--gl-surface);
    box-shadow: 0 20px 60px rgba(21, 24, 51, .12);
}
.gl-trackbar-field:focus-within { border-color: var(--gl-secondary); }
.gl-trackbar-field input {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--gl-heading);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.gl-trackbar-field input:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-radius: 999px; }
.gl-trackbar-field input::placeholder { color: var(--gl-text-muted); font-weight: 600; letter-spacing: 0; }
.gl-trackbar-field .gl-btn { min-height: 52px; }
.gl-trackbar-hint { margin: 8px 0 0 18px; color: var(--gl-text-muted); font-size: .82rem; }
.gl-track-result { width: min(680px, 100%); margin-top: 14px; padding: 18px 20px; border: 1px solid var(--gl-border); border-radius: 20px; background: var(--gl-surface); color: var(--gl-text); }
.gl-track-result[hidden] { display: none; }
.gl-track-result p { margin: 0; }
.gl-track-number { margin-bottom: 12px !important; color: var(--gl-heading); font-weight: 800; }
.gl-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gl-timeline li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.gl-timeline li::before { content: ""; width: 14px; height: 14px; margin-top: 5px; border: 3px solid var(--gl-border); border-radius: 50%; }
.gl-timeline li:last-child::before { border-color: #FFB199; background: var(--gl-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gl-accent) 25%, transparent); }
.gl-timeline time { display: block; color: var(--gl-text-muted); font-size: .85rem; font-weight: 700; }
.gl-row--dark .gl-trackbar label { color: #E1E4FB; }
.gl-row--dark .gl-trackbar-field { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.gl-row--dark .gl-trackbar-field:focus-within { border-color: #fff; }
.gl-row--dark .gl-trackbar-field input { color: #fff; }
.gl-row--dark .gl-trackbar-field input::placeholder { color: #9EA3D6; }
.gl-row--dark .gl-trackbar-hint { color: #A9AEDD; }
.gl-row--dark .gl-track-result { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #DDE0FA; backdrop-filter: blur(16px); }
.gl-row--dark .gl-track-number { color: #fff; }
.gl-row--dark .gl-timeline li::before { border-color: #7E84C9; }
.gl-row--dark .gl-timeline time { color: #A9AEDD; }

.gl-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.gl-calc-form { display: grid; gap: 20px; }
.gl-field label, .gl-flabel { display: block; margin-bottom: 8px; color: var(--gl-heading); font-weight: 800; }
.gl-calc-form input[inputmode], .gl-calc-form input[type="text"], .gl-calc-form select {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 1.5px solid var(--gl-border);
    border-radius: 16px;
    background: var(--gl-surface);
    color: var(--gl-heading);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
}
.gl-calc-form input:focus-visible, .gl-calc-form select:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-color: var(--gl-secondary); }
.gl-calc-form select option { background: #fff; color: var(--gl-heading); }
.gl-field-error { margin: 6px 0 0; color: var(--gl-accent-hover); font-size: .88rem; font-weight: 700; }
.gl-field-error:empty { display: none; }
.gl-money { position: relative; }
.gl-money span { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--gl-text-muted); font-weight: 900; }
.gl-money input { padding-left: 34px !important; }
.gl-weight-num { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.gl-units { display: inline-flex; padding: 4px; border: 1px solid var(--gl-border); border-radius: 999px; background: var(--gl-surface-alt); }
.gl-units label { margin: 0; cursor: pointer; }
.gl-units input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gl-units span { display: grid; place-items: center; min-width: 52px; min-height: 44px; border-radius: 999px; color: var(--gl-text-muted); font-weight: 900; }
.gl-units input:checked + span { background: var(--gl-secondary-strong); color: #fff; }
.gl-units input:focus-visible + span { outline: 3px solid var(--gl-focus); }
.gl-field .gl-check { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.gl-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--gl-accent); }
.gl-permit-help { display: block; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer; }
.gl-permit-help:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; }
.gl-permit-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 640px); padding: 24px; border: 0; border-radius: 20px; background: #fff; color: var(--gl-heading); box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
.gl-permit-dialog::backdrop { background: rgba(10, 12, 40, .6); }
.gl-permit-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gl-permit-dialog h2 { margin: 0; color: var(--gl-heading); font-size: 1.4rem; }
.gl-permit-dialog p { margin: 10px 0 0; color: var(--gl-text); }
.gl-permit-dialog label { display: block; margin: 16px 0 8px; color: var(--gl-heading); font-weight: 800; }
.gl-permit-dialog input { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--gl-border); border-radius: 14px; background: var(--gl-surface); color: var(--gl-heading); font: inherit; }
.gl-permit-dialog input:focus-visible, .gl-permit-close:focus-visible, .gl-permit-results button:focus-visible { outline: 3px solid var(--gl-secondary); outline-offset: 2px; }
.gl-permit-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: var(--gl-surface-alt); color: var(--gl-heading); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gl-permit-results { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; color: var(--gl-text); list-style: none; }
.gl-permit-results button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--gl-border); border-radius: 12px; background: var(--gl-surface); color: var(--gl-heading); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.gl-permit-results button:hover { background: var(--gl-surface-alt); }
.gl-permit-results small { color: var(--gl-text-muted); font-weight: 700; text-align: right; }
/* Proposal 2's paper ticket, straight as G&L asked: its edges are cut by a mask, which also clips the element's own shadow,
   so the shadow is the wrapper's and follows the cut. */
.gl-ticket { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .3)); }
.gl-receipt {
    position: relative;
    padding: 30px 28px 26px;
    border-radius: 6px;
    background: #fff;
    color: var(--gl-heading);
    -webkit-mask: radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) -10px 0 / 20px 51% repeat-x, radial-gradient(circle at 10px 100%, transparent 7px, #000 7.5px) -10px 100% / 20px 51% repeat-x;
    mask: radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) -10px 0 / 20px 51% repeat-x, radial-gradient(circle at 10px 100%, transparent 7px, #000 7.5px) -10px 100% / 20px 51% repeat-x;
}
.gl-receipt header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 2px dashed var(--gl-border); }
.gl-receipt header img { width: auto; height: 34px; }
.gl-receipt header small { color: var(--gl-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; text-align: right; }
.gl-receipt-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; }
.gl-receipt-line span:first-child { color: var(--gl-text); font-family: var(--gl-font-body); font-weight: 700; }
.gl-receipt-charges { margin-top: 4px; border-top: 2px dashed var(--gl-border); font-weight: 900; }
/* The purchase apart from the shipping, which G&L charges: its own box and total. */
.gl-receipt-group { margin-top: 12px; }
.gl-receipt-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 2px; color: var(--gl-text-muted); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gl-receipt-group-head small { font-size: .78rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.gl-receipt-shipping { padding: 12px 14px 8px; border-radius: 14px; background: color-mix(in srgb, var(--gl-secondary) 8%, var(--gl-surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gl-secondary) 22%, transparent); }
/* The shipping's total is the figure G&L wants seen, so it is the largest; the total at the branch follows, quieter. */
.gl-receipt-shipping .gl-receipt-charges { align-items: baseline; padding-top: 12px; border-top: 1.5px dashed color-mix(in srgb, var(--gl-secondary) 35%, transparent); color: var(--gl-secondary); }
.gl-receipt-shipping .gl-receipt-charges span:first-child { color: inherit; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 900; line-height: 1.15; }
.gl-receipt-shipping .gl-receipt-charges span:last-child { font-family: var(--gl-font-body); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-receipt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding: 12px 18px; border-radius: 14px; background: var(--gl-surface-alt); }
.gl-receipt-total span { color: var(--gl-text-muted); font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gl-receipt-total strong { color: var(--gl-heading); font-size: 1.25rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-stack { display: flex; height: 12px; margin: 18px 0 10px; overflow: hidden; border-radius: 999px; background: var(--gl-surface-alt); }
.gl-stack i { display: block; height: 100%; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.gl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; color: var(--gl-text-muted); font-size: .8rem; font-weight: 700; list-style: none; }
.gl-legend li { display: flex; align-items: center; gap: 6px; }
.gl-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.gl-stack i:nth-child(1), .gl-legend li:nth-child(1)::before { background: var(--gl-secondary); }
.gl-stack i:nth-child(2), .gl-legend li:nth-child(2)::before { background: var(--gl-accent); }
.gl-stack i:nth-child(3), .gl-legend li:nth-child(3)::before { background: #F2A541; }
.gl-fine { margin: 14px 0 0; color: var(--gl-text-muted); font-size: .78rem; }
.gl-calc[data-gl-busy] .gl-receipt-charges span:last-child, .gl-calc[data-gl-busy] .gl-receipt-total strong { opacity: .5; }
.gl-row--dark .gl-field label, .gl-row--dark .gl-flabel { color: #E1E4FB; }
.gl-row--dark .gl-calc-form input[inputmode], .gl-row--dark .gl-calc-form input[type="text"], .gl-row--dark .gl-calc-form select { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; }
.gl-row--dark .gl-calc-form input:focus-visible, .gl-row--dark .gl-calc-form select:focus-visible { border-color: #fff; }
.gl-row--dark .gl-money span { color: #A9AEDD; }
.gl-row--dark .gl-field-error { color: #FFB199; }
.gl-row--dark .gl-units { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }
.gl-row--dark .gl-units span { color: #C9CDF0; }
.gl-row--dark .gl-units input:checked + span { background: #fff; color: var(--gl-secondary-strong); }

@media (max-width: 1079px) {
    .gl-calc { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
    .gl-receipt { padding: 26px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-stack i { transition: none; }
}

/* Old page bodies that open with a .section instead of a title band (Rastreo, Calculadora).
   On phones style.css gives that section 60px, less than this fixed header, and its red triangle
   was always hidden under the old opaque header; this one is translucent. */
.gl-public main > .section:first-child { padding-top: 100px; }
.gl-public main > .section:first-child > .page-triangle { display: none; }
/* A page of the content model that opens with a row other than the hero starts below the fixed header; the hero is drawn behind it on purpose. */
.gl-public main > .gl-row:first-child:not([data-template="hero"]) { margin-top: calc(76px + env(safe-area-inset-top, 0px)); }

/* A service's page opens with a dark header drawn behind the transparent site header, as the home page's hero is. */
.gl-public main > .gl-row.gl-service-hero:first-child { margin-top: 0; }
.gl-service-hero { padding: calc(112px + env(safe-area-inset-top, 0px)) 0 calc(72px * var(--gl-space)); }
.gl-service-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
.gl-service-hero-text { display: grid; justify-items: start; gap: 18px; }
.gl-service-hero-text > * { margin: 0; }
.gl-service-hero .gl-h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.gl-service-back { display: inline-flex; align-items: center; gap: 6px; color: #DDE0FA; font-weight: 800; }
.gl-service-back:hover { color: #fff; }
.gl-service-back svg { width: 18px; height: 18px; }
.gl-service-highlight { padding: 6px 14px; border-radius: 999px; background: var(--gl-accent); color: #fff; font-weight: 900; letter-spacing: .04em; }
.gl-service-lead { max-width: 56ch; color: #C9CDF0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; }
.gl-service-points { display: grid; gap: 10px; padding: 0; list-style: none; }
.gl-service-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; color: #E1E4FB; line-height: 1.5; }
.gl-service-points li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.gl-service-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.gl-service-figure { margin: 0; overflow: hidden; border-radius: calc(var(--gl-radius) + 6px); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.gl-service-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* A plain tile's background is the soft row's own. */
.gl-service-others .gl-tile--plain { background: var(--gl-surface); }

@media (max-width: 1079px) {
    .gl-service-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .gl-service-figure { order: -1; max-width: 640px; }
}

@media (max-width: 719px) {
    .gl-service-hero { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 1280px) {
    .gl-nav { display: none; }
    .gl-menu-btn { display: grid; }

    .gl-header.gl-menu-open .gl-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        padding: 8px 16px 20px;
        background: var(--gl-header-bg, var(--gl-surface));
        box-shadow: 0 18px 30px rgba(21, 24, 51, .12);
    }

    .gl-header.gl-menu-open .gl-nav > ul { flex-direction: column; align-items: stretch; }
    .gl-header.gl-menu-open .gl-nav ul a,
    .gl-header.gl-menu-open .gl-nav .gl-submenu-btn { width: 100%; text-align: left; padding: 14px 12px; font-size: 1.05rem; }
    .gl-header.gl-menu-open .gl-submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; }
    .gl-header.gl-menu-open .gl-actions { flex-wrap: wrap; padding: 12px 12px 0; }

}

@media (max-width: 1080px) {
    .gl-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .gl-footer { padding-bottom: 110px; }
    .gl-footer-grid { grid-template-columns: 1fr; }
    .gl-wa { display: none; }

    .gl-dock {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1020;
        background: color-mix(in srgb, var(--gl-dock-bg, var(--gl-darker)) 94%, transparent);
        backdrop-filter: blur(14px);
        border-radius: 22px;
        padding: 6px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    }

    .gl-dock a {
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 8px 4px;
        border-radius: 16px;
        color: var(--gl-dock-text, #DDE0FA);
        text-decoration: none;
        font-size: .72rem;
        font-weight: 800;
        min-height: 56px;
    }

    .gl-dock a:hover { color: var(--gl-dock-hover, #FFFFFF); text-decoration: none; }
    .gl-dock svg { width: 22px; height: 22px; }
    /* WhatsApp's own green gives white text 3.1:1; this one reaches 5:1. */
    .gl-dock a.gl-dock-wa { color: #fff; background: #15803D; }
    body.gl-public { padding-bottom: 84px; }
    /* The browser leaves this room when it brings a focused element or an anchor into view, so the dock covers neither. */
    html:has(.gl-dock) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .gl-btn, .gl-btn:hover { transition: none; transform: none; }
}