/* ============================================================================
   CWB Procurement Solutions — v5
   Doctrine: warm paper ground, flat orange at ~4% surface, zero gradients,
   zero blur, no shadows except the modal. Structure is drawn with rules, not
   boxes. The signature motif is the LEDGER ROW: a procurement document is read
   ACROSS a line (servicio | definición | acción), so the page is ruled
   horizontally rather than boxed into cards.
   ========================================================================== */

:root {
    /* ground */
    --paper:      #F5F1EB;   /* page */
    --sheet:      #FFFFFF;   /* forms, panels, raised rows */
    --night:      #262523;   /* footer + flight section ground */

    /* ink */
    --ink:        #2B2A28;   /* text — warmer than the old near-black */
    --logo-grey:  #444444;   /* the charcoal in the wordmark */
    --muted:      #5A5751;
    --faint:      #8C877F;

    /* rules */
    --line:       #E2DDD4;   /* minor hairline */
    --line-hard:  #2B2A28;   /* structural rule — opens and closes a ledger */

    /* action — the only saturated colour on the page */
    --orange:     #EA5B31;   /* from the logo — action only */
    --orange-tx:  #C4451F;   /* darkened so small text passes AA on paper */
    --orange-sf:  #FCEEE8;   /* selected / active wash */
    --amber:      #F9B43B;   /* from the logo — graphic accent, never body text */

    /* status — semantic, never decorative */
    --ok:         #2F6B43;
    --warn:       #9A5B18;
    --err:        #B3261E;

    /* One neutral grotesk across display and text, with its matching mono —
       the modern-fintech register: medium weights at large sizes, tight tracking,
       and whitespace doing the work instead of weight. */
    --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Geist', system-ui, -apple-system, sans-serif;
    /* La mono se retiró de todo el sitio: antetítulos, números, etiquetas y el
       panel de la solicitud van en la misma Geist del cuerpo. La variable se
       queda apuntando ahí para no tener que reescribir las 18 reglas que la
       usan, y para poder devolverla de un solo cambio si hiciera falta. */
    --font-mono:    'Geist', system-ui, -apple-system, sans-serif;

    --nav-h: 68px;
    --wrap:  1280px;
    --gutter: clamp(1.5rem, 5vw, 5rem);
    --section: clamp(6rem, 13vh, 11rem);   /* whitespace carries the hierarchy */
    --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.011em;   /* a touch negative on text, as the register does */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- Type scale ---------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;                 /* medium, not bold — weight is not the emphasis */
    line-height: 1.04;
    letter-spacing: -0.032em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 0.96; letter-spacing: -0.042em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.0;  letter-spacing: -0.036em; }
h3 { font-size: 1.25rem; letter-spacing: -0.022em; font-weight: 500; }

p { text-wrap: pretty; }

.lead {
    font-size: clamp(1.125rem, 1.35vw, 1.375rem);
    color: var(--muted);
    max-width: 38rem;
    line-height: 1.48;
    letter-spacing: -0.016em;
}

/* Eyebrows are Inter, not mono, and lightly tracked — mono is reserved for
   data so that numbers read as specifications rather than as decoration. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

/* The one place mono is allowed: values, codes, counts. */
.data {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.section { padding-block: var(--section); }
.section--sheet { background: var(--sheet); }

.section-head { max-width: 46rem; display: grid; gap: 1.1rem; }
.section-head .lead { margin-top: 0.2rem; }

/* ---------- Buttons ------------------------------------------------------- */

.btn {
    font: inherit;
    font-weight: 500;
    letter-spacing: -0.011em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: #C4451F; }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.btn[disabled] { opacity: 0.35; pointer-events: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

.link {
    color: var(--orange-tx);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.link:hover { color: var(--ink); }

/* ---------- Nav ----------------------------------------------------------- */

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    height: var(--nav-h);
    background: var(--paper);
    border-top: 3px solid var(--amber);   /* the logo pairs amber with orange */
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    max-width: var(--wrap);
    margin-inline: auto;
    height: 100%;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a {
    font-size: 0.92rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .18s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 0.8rem; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- Hero ---------------------------------------------------------- */

.hero {
    padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 6.5rem));
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero h1 { margin-top: 0.9rem; max-width: 16ch; }
.hero .lead { margin-top: 1.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Proof strip — verifiable operational facts, not vanity metrics. */
.proof {
    list-style: none;
    margin-top: clamp(3rem, 7vh, 5rem);
    border-top: 1px solid var(--line-hard);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.proof li {
    padding: 1.4rem 1.5rem 1.4rem 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 0.35rem;
    align-content: start;
}
.proof dt, .proof .proof-k {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange-tx);
}
.proof .proof-v { font-size: 0.95rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .proof { grid-template-columns: 1fr; } }

/* ---------- Ledger — the signature motif ---------------------------------- */
/* A freight document is read ACROSS a line, so the page is ruled horizontally.
   The ledger opens and closes on a hard rule; every row inside is a hairline. */

.ledger { border-top: 1px solid var(--line-hard); margin-top: 2.5rem; }
.ledger-row {
    display: grid;
    align-items: baseline;
    column-gap: clamp(1.25rem, 3.5vw, 3.5rem);
    row-gap: 0.4rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--line);
    transition: background .18s ease;
}
.ledger-row:last-child { border-bottom: 1px solid var(--line-hard); }
.ledger-row .idx {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--faint);
    letter-spacing: 0.1em;
}
.ledger-row h3 { margin-bottom: 0.3rem; }
.ledger-row p { color: var(--muted); font-size: 0.95rem; max-width: 44rem; }

/* Services: index | name+desc | action */
.ledger--svc .ledger-row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.ledger--svc .ledger-row:hover { background: var(--orange-sf); }
@media (max-width: 720px) {
    .ledger--svc .ledger-row { grid-template-columns: 3rem minmax(0, 1fr); }
    .ledger--svc .ledger-row .btn { grid-column: 2; justify-self: start; margin-top: 0.6rem; }
}

/* Network: code | city | role */
.ledger--net .ledger-row { grid-template-columns: 4.5rem minmax(0, 14rem) minmax(0, 1fr); }
.ledger--net .code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--orange-tx);
}
.ledger--net .city { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.024em; }
.ledger--net .role { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 640px) {
    .ledger--net .ledger-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .ledger--net .role { grid-column: 2; }
}

/* ---------- Argument: the three claims ------------------------------------ */

.claims {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 3rem;
    border-top: 1px solid var(--line-hard);
}
.claims li {
    padding: 2rem 2rem 2rem 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 0.6rem;
    align-content: start;
}
.claims li + li { padding-left: 2rem; border-left: 1px solid var(--line); }
.claims h3 { max-width: 18ch; }
.claims p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) {
    .claims { grid-template-columns: 1fr; }
    .claims li + li { padding-left: 0; border-left: 0; }
}

/* ---------- The flight (scroll-world engine mount) ------------------------- */

.viaje {
    background: var(--night);
    --sw-bg: #262523;
    --sw-ink: #F5F1EB;
    --sw-ink-soft: #BAB3A9;
    --sw-accent: #EA5B31;
    --sw-font-display: var(--font-display);
    --sw-font-body: var(--font-body);
}

/* ---------- Brief builder — "Armar mi embarque" --------------------------- */

.brief { background: var(--sheet); }
.brief-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    margin-top: 2.5rem;
}
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }

/* `border: 0` first so <fieldset>'s UA border is cleared in one place. */
.bf-field { border: 0; border-top: 1px solid var(--line); padding: 1.4rem 0; min-width: 0; }
.bf-field:first-of-type { border-top-color: var(--line-hard); }
.bf-field legend, .bf-field .bf-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.85rem;
    display: block;
}
.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt { position: relative; }
.opt input {
    position: absolute; inset: 0;
    opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0;
}
.opt span {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--muted);
    background: var(--sheet);
    transition: all .16s ease;
}
.opt input:hover + span { border-color: var(--ink); color: var(--ink); }
.opt input:checked + span {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }

.bf-note {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
}
.bf-note:focus { outline: none; border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }

/* The live summary panel — a document, not a receipt with prices on it. */
.bf-out {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    border: 1px solid var(--line-hard);
    background: var(--paper);
    padding: 1.5rem;
    display: grid;
    gap: 1.1rem;
}
.bf-out h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
}
.bf-lane {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
}
.bf-lane .ph { color: var(--faint); }
.bf-block { display: grid; gap: 0.45rem; }
.bf-block > .bf-k {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}
.bf-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bf-chip {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--sheet);
}
.bf-list { list-style: none; display: grid; gap: 0.3rem; font-size: 0.88rem; color: var(--muted); }
.bf-list li { padding-left: 1rem; position: relative; }
.bf-list li::before {
    content: '';
    position: absolute; left: 0; top: 0.62em;
    width: 0.55rem; height: 1px; background: var(--faint);
}
.bf-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    justify-self: start;
}
.bf-status[data-state="incompleto"] { color: var(--faint); }
.bf-status[data-state="revision"]   { color: var(--warn); }
.bf-status[data-state="listo"]      { color: var(--ok); }
.bf-disclaimer { font-size: 0.8rem; color: var(--faint); line-height: 1.5; }
.bf-actions { display: grid; gap: 0.5rem; }
.bf-actions .btn { width: 100%; }

/* ---------- Quote form + modal -------------------------------------------- */

.form-card { display: grid; gap: 1rem; }
.form-card h2 { font-size: 1.5rem; }
.field { display: grid; gap: 0.3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field label, .services-field legend {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.field .opt-tag { font-family: var(--font-body); letter-spacing: 0; text-transform: none; color: var(--faint); }
.field input, .field textarea {
    width: 100%;
    font: inherit;
    font-size: 0.98rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: inset 0 0 0 1px var(--orange);
}
.services-field { border: 0; }
.services-field legend { margin-bottom: 0.6rem; }
.form-error { color: var(--err); font-size: 0.88rem; font-weight: 500; }
.form-error[hidden] { display: none; }

.quote-overlay { position: fixed; inset: 0; z-index: 100; }
.quote-overlay[hidden] { display: none; }
.quote-backdrop { position: absolute; inset: 0; background: rgba(43, 42, 40, 0.45); }
.quote-panel {
    position: absolute;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(43, 42, 40, 0.16);
}
.quote-close {
    position: absolute; top: 0.5rem; right: 0.75rem; z-index: 2;
    width: 40px; height: 40px;
    font-size: 1.5rem; line-height: 1;
    background: none; border: 0; border-radius: 999px;
    color: var(--muted); cursor: pointer;
}
.quote-close:hover { background: var(--line); color: var(--ink); }
.form-slot { overflow-y: auto; padding: 0.5rem 1.5rem 1.5rem; -webkit-overflow-scrolling: touch; }
.quote-handle { display: none; }

@media (min-width: 861px) {
    .quote-panel {
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(620px, 92vw); max-height: 88vh;
        padding-top: 2.2rem;
    }
}
@media (max-width: 860px) {
    .quote-panel {
        left: 0; right: 0; bottom: 0;
        max-height: 88dvh;
        padding-top: 1.6rem;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .quote-handle {
        display: block;
        position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 42px; height: 4px; border-radius: 999px; background: var(--line);
    }
}

/* ---------- Footer -------------------------------------------------------- */

.footer {
    background: var(--night);
    color: #D6D3D1;
    padding: clamp(3rem, 7vh, 5rem) 0 1.5rem;
}
.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand img { height: 40px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: #A8A29E; font-size: 0.92rem; max-width: 30rem; }
.footer h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 0.9rem;
}
.footer-contact a {
    color: #F5F1EB;
    text-decoration: none;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(245, 241, 235, 0.25);
}
.footer-contact a:hover { border-color: var(--orange); color: var(--orange); }
.footer-contact p { margin-bottom: 0.6rem; }
.socials { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.social-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid rgba(245, 241, 235, 0.22);
    border-radius: 999px;
    color: #D6D3D1;
    transition: all .18s ease;
}
.social-btn svg { width: 16px; height: 16px; fill: currentColor; }
.social-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.footer-legal {
    margin-top: 3rem; padding-top: 1.2rem;
    border-top: 1px solid rgba(245, 241, 235, 0.12);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
    font-size: 0.78rem; color: #78716C;
}
.footer-legal a { color: #A8A29E; text-decoration: none; }
.footer-legal a:hover { color: var(--orange); }

/* ---------- Floating contact ---------------------------------------------- */

.wa-float {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
    width: 3.2rem; height: 3.2rem;
    display: grid; place-items: center;
    background: #25D366; color: #fff;
    border-radius: 999px;
    transition: transform .25s var(--ease);
}
.wa-float svg { width: 22px; height: 22px; fill: currentColor; }
.wa-float:hover { transform: scale(1.06); }

/* ---------- Motion -------------------------------------------------------- */
/* One reveal, one easing, one duration. Nothing else animates on scroll. */

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-inview {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .wa-float { transition: none; }
    .btn, .opt span, .ledger-row, .social-btn { transition: none; }
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   v5 — procurement positioning: pillars, client-visible stages, categories
   ══════════════════════════════════════════════════════════════════════════ */

h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.024em; line-height: 1.18; }

.req { color: var(--orange); font-weight: 500; }
.opt-tag { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); font-family: var(--font-body); }

.note {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--faint);
    max-width: 46rem;
}

/* ---------- Service pillars ---------------------------------------------- */

.pilar { margin-top: clamp(2.5rem, 6vh, 4rem); }
.pilar-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.5rem;
    padding-bottom: 0.7rem;
}
.pilar-n {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-tx);
}
.pilar .ledger { margin-top: 0; }

/* the service ledger now carries an English name under the Spanish one */
.ledger--svc .ledger-row h4 { margin-bottom: 0.35rem; }
.ledger--svc .ledger-row h4 em {
    display: block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 0.25rem;
}

/* ---------- Client-visible stages ---------------------------------------- */

.stages {
    list-style: none;
    margin-top: 2.5rem;
    border-top: 1px solid var(--line-hard);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.stages li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1.4rem 1.5rem 1.4rem 0;
    border-bottom: 1px solid var(--line);
}
.stages li + li { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.stages li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.st-n {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ink);
    padding-top: 0.15rem;
    position: relative;
}
.st-n::after {
    content: '';
    position: absolute; left: 0; bottom: -0.35rem;
    width: 1.1rem; height: 3px; background: var(--amber);
}
.stages strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.024em; }
.stages span { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.2rem; }
.st-act {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-tx);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}
@media (max-width: 900px) {
    .stages { grid-template-columns: 1fr 1fr; }
    .stages li + li { border-left: 0; padding-left: 0; }
    .stages li:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
@media (max-width: 560px) {
    .stages { grid-template-columns: 1fr; }
    .stages li:nth-child(2n) { border-left: 0; padding-left: 0; }
}

/* ---------- Product categories -------------------------------------------- */

.tags-grid {
    list-style: none;
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    border-top: 1px solid var(--line-hard);
}
.tags-grid li {
    padding: 1.1rem 1.5rem 1.1rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    color: var(--muted);
}

/* ---------- Intake form additions ----------------------------------------- */

.bf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .bf-split { grid-template-columns: 1fr; gap: 1rem; } }
.bf-file { padding: 0.5rem; font-size: 0.85rem; }
.bf-file::file-selector-button {
    font: inherit;
    font-size: 0.82rem;
    margin-right: 0.8rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}
.bf-file::file-selector-button:hover { border-color: var(--ink); }

/* ---------- Footer additions ---------------------------------------------- */

.footer-slogan {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    color: #F5F1EB;
}
.footer-loc {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A8A29E;
}

/* ══════════════════════════════════════════════════════════════════════════
   v6 — new logo palette, hero visual, single-service framing
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Hero with a visual -------------------------------------------- */

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.hero-copy { min-width: 0; }
.hero-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--night);
    border-top: 3px solid var(--orange);
}
.hero-media video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* a thin amber corner rule, echoing the mark's two-tone pairing */
.hero-media::after {
    content: '';
    position: absolute; right: 0; bottom: 0;
    width: 34%; height: 3px; background: var(--amber);
}
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero-media { aspect-ratio: 16 / 10; }
}

.nav-logo img { height: 46px; width: auto; }
/* le gana a .footer-brand img de arriba, que fijaba toda imagen del footer en 40px */
.footer-brand .footer-logo { height: auto; width: 210px; margin-bottom: 1.15rem; }

/* ---------- Single-service framing ---------------------------------------- */
/* The twelve capabilities are no longer separately purchasable, so the service
   ledger loses its per-row CTA column and the section closes with one CTA. */

.ledger--svc .ledger-row { grid-template-columns: 3rem minmax(0, 1fr); }
@media (max-width: 720px) { .ledger--svc .ledger-row { grid-template-columns: 3rem minmax(0, 1fr); } }

.svc-cta {
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--line-hard);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.svc-cta p { max-width: 42rem; color: var(--muted); font-size: 1.02rem; }

/* amber is a graphic accent only — never a text colour on paper */
.pilar-h { border-bottom: 1px solid var(--line); }
.pilar-n { position: relative; padding-left: 1.6rem; }
.pilar-n::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 1.1rem; height: 3px; margin-top: -1px;
    background: var(--amber);
}

/* contact details joined the one form */
.bf-contact { border-top: 1px solid var(--line-hard); }
.bf-sub {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.contact-row {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-hard);
}

/* ══════════════════════════════════════════════════════════════════════════
   v7 — full-bleed video hero
   ══════════════════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    min-height: 100svh;
    padding: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    overflow: hidden;
    background: var(--night);
    isolation: isolate;
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    /* poster as a background too, so hiding the video for reduced-motion or a
       failed autoplay still leaves the frame rather than a black box */
    background: url('assets/scenes/hero-poster.webp') center 45% / cover no-repeat;
}
.hero-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
}
/* Veil is heavier bottom-left, where the type sits, and stays light top-right
   so the crane and the vessel still read. */
.hero-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(28,27,25,.90) 0%, rgba(28,27,25,.72) 38%, rgba(28,27,25,.28) 72%, rgba(28,27,25,.15) 100%),
        linear-gradient(0deg, rgba(28,27,25,.85) 0%, rgba(28,27,25,.10) 45%, rgba(28,27,25,.35) 100%);
}
/* The whole hero has to close above the fold: headline, lead, buttons AND the
   trust strip. So the vertical rhythm is driven by viewport height, not by a
   fixed scale, and every gap shrinks together as the screen gets shorter. */
.hero-inner {
    position: relative; z-index: 2;
    width: 100%;
    padding-top: calc(var(--nav-h) + clamp(1.25rem, 5.5vh, 6rem));
    padding-bottom: clamp(1rem, 3vh, 2.75rem);
    align-self: end;
}
.hero .eyebrow { color: var(--amber); }
/* 22ch keeps the headline at three lines instead of four, y esa línea que se
   ahorra es la que deja entrar la franja de abajo. */
.hero h1 {
    color: #F7F4EF;
    font-size: min(clamp(2.6rem, 6vw, 5.6rem), 10.5vh);
    margin-top: clamp(0.5rem, 1.6vh, 1.2rem);
    max-width: 22ch;
}
.hero .lead { color: rgba(247,244,239,.82); margin-top: clamp(0.7rem, 2vh, 1.5rem); max-width: 44rem; }
.hero-ctas { margin-top: clamp(0.9rem, 2.6vh, 2rem); }

/* Pantallas de laptop bajitas: el párrafo de apoyo es lo último que cede. */
@media (min-width: 901px) and (max-height: 720px) {
    .hero .lead { font-size: 1.0625rem; line-height: 1.4; }
}

/* ghost button, inverted for the dark hero */
.btn--ondark { border-color: rgba(247,244,239,.55); color: #F7F4EF; background: transparent; }
.btn--ondark:hover { background: #F7F4EF; color: var(--ink); border-color: #F7F4EF; }

/* the trust strip rides on the hero itself, on hairlines that work on dark */
.hero .proof {
    position: relative; z-index: 2;
    margin: 0;
    max-width: var(--wrap);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--gutter);
    border-top: 1px solid rgba(247,244,239,.22);
}
.hero .proof li { border-bottom: 0; padding: clamp(0.75rem, 2vh, 1.3rem) 1.5rem clamp(0.85rem, 2.2vh, 1.5rem) 0; }
.hero .proof li + li { border-left: 1px solid rgba(247,244,239,.14); padding-left: 1.5rem; }
.hero .proof .proof-k { color: var(--amber); }
.hero .proof .proof-v { color: rgba(247,244,239,.72); font-size: 0.9rem; }

@media (max-width: 900px) {
    .hero { min-height: 92svh; }
    .hero .proof { grid-template-columns: 1fr 1fr; }
    .hero .proof li + li { border-left: 0; padding-left: 0; }
    .hero .proof li:nth-child(2n) { border-left: 1px solid rgba(247,244,239,.14); padding-left: 1.25rem; }
}
@media (max-width: 560px) {
    .hero .proof { grid-template-columns: 1fr; }
    .hero .proof li { padding-block: 0.9rem; }
    .hero .proof li:nth-child(2n) { border-left: 0; padding-left: 0; }
    .hero .proof li + li { border-top: 1px solid rgba(247,244,239,.14); }
}
@media (prefers-reduced-motion: reduce) { .hero-bg video { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   v8 — el bloque de texto del scroll-world

   scroll-world.js inyecta su CSS envuelto en `@layer sw`, y las reglas dentro
   de una capa SIEMPRE pierden contra las reglas sin capa, sin importar la
   especificidad. Por eso el reset `* { margin: 0; padding: 0 }` de arriba
   aplastaba todos los márgenes y paddings del copy: número, antetítulo,
   título, cuerpo y chips quedaban pegados, y las píldoras salían cortando los
   descendentes de las letras.

   Estas reglas van sin capa, así que ganan. Los valores son los que la
   librería quería aplicar; los chips además cambian a naranja sólido.
   ══════════════════════════════════════════════════════════════════════════ */

#world .sw-copy__eyebrow { margin-top: 18px; }
#world .sw-copy__title   { margin-top: 14px; }
#world .sw-copy__body    { margin-top: 18px; }
#world .sw-copy__cta     { margin-top: 28px; }
#world .sw-btn           { padding: 13px 24px; }

#world .sw-copy__tags { margin-top: 26px; gap: 10px; }
#world .sw-copy__tags li {
    padding: 9px 17px 10px;          /* 1px extra abajo: la 'g' de Sourcing baja */
    line-height: 1.4;
    color: #fff;
    background: var(--sw-accent);
    border-color: var(--sw-accent);
    white-space: nowrap;             /* un chip nunca se parte en dos líneas */
}

/* La librería centra el copy con `top:50%; transform:translateY(-50%)`, pero el
   motor reescribe `transform` en cada frame para el parallax (translateY de
   ±2vh), así que ese -50% nunca llega a aplicarse: el bloque cuelga desde la
   mitad de la pantalla hacia abajo y se sale por abajo. Antes no se notaba
   porque el reset lo tenía aplastado a 286px; con el ritmo restituido pasa de
   400px y se corta. Centrado con flex, que no depende de transform.
   Solo de 861px para arriba: en móvil el copy va anclado abajo, no centrado. */
@media (min-width: 861px) {
    #world .sw-copy {
        top: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Otras dos víctimas del mismo choque de capas, encontradas revisando escena
   por escena:

   1. `img, video { height: auto }` (línea 69, sin capa) le ganaba al
      `height:100%` de la librería, así que el video de cada escena se quedaba
      en su alto natural. En una ventana de 1440x900 eso dejaba una franja
      crema de 90px cruzando el pie de la pantalla.

   2. `a { color: inherit }` (línea 70, sin capa) le ganaba al `color:#fff` del
      botón primario, y el texto terminaba del mismo color que su fondo:
      "Cuéntanos qué necesitas" salía invisible en la escena 07. */
#world .sw-scene__video,
#world .sw-scene__still { height: 100%; }
#world .sw-btn--primary,
#world .sw-topcta { color: #fff; }

/* Las etiquetas del riel de progreso (Búsqueda, Tránsito, Aduana…) caen en el
   mismo aplastamiento: su `padding: 5px 11px` se quedaba en cero y la píldora
   terminaba en 17px de alto para una letra de 12.5px. Sin capa, para que gane. */
#world .sw-route { padding: 18px 10px; }
#world .sw-route__label {
    padding: 7px 13px;
    line-height: 1.35;
    right: 30px;          /* la píldora quedaba rozando el punto activo */
}

/* ══════════════════════════════════════════════════════════════════════════
   v9 — el recorrido de los nueve pasos

   Los pasos ya no son nueve celdas sueltas: una línea los va enlazando en
   orden, y cuando la fila se acaba baja y regresa a la izquierda para seguir
   en la de abajo. La línea se dibuja midiendo la posición real de cada
   tarjeta, así que funciona igual con tres columnas, con dos o con una.
   ══════════════════════════════════════════════════════════════════════════ */

.stages-flow { position: relative; }

.stages-arrows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    color: var(--orange);   /* la punta de flecha hereda de aquí */
}
.stages-arrows path {
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.55;
}
.js .stages-arrows path { transition: stroke-dashoffset 1.1s var(--ease); }

/* El hueco entre filas es por donde pasa la curva de regreso. Sin él la línea
   no tendría por dónde bajar. */
.stages { row-gap: 3.5rem; }
.stages li { position: relative; z-index: 1; }

/* Los pasos son puntos de un recorrido, así que el número pesa más que antes. */
.st-n { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--faint); }
.stages li:hover .st-n { color: var(--orange-tx); }
.st-n::after { transition: width .25s var(--ease); }
.stages li:hover .st-n::after { width: 1.6rem; }

@media (max-width: 900px) { .stages { row-gap: 3rem; } }
@media (max-width: 560px) { .stages { row-gap: 2.25rem; } }
@media (prefers-reduced-motion: reduce) {
    .js .stages-arrows path { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v10 — los cuatro pilares, plegados

   Las doce fichas de servicio hacían el scroll larguísimo. Ahora cada pilar se
   ve por fuera y se abre al tocarlo, como una sección de preguntas frecuentes.
   Se usa <details>/<summary> nativo: funciona con teclado, lo lee el buscador
   aunque esté cerrado y no depende de JavaScript. El atributo name los hace
   excluyentes, así que abrir uno cierra el que estaba abierto.
   ══════════════════════════════════════════════════════════════════════════ */

.pilar {
    margin-top: 0;
    border-bottom: 1px solid var(--line);
}
.pilar:first-of-type { border-top: 1px solid var(--line-hard); margin-top: 2.5rem; }

.pilar > summary {
    display: block;                 /* mata el triangulito por defecto */
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 1.35rem 3.25rem 1.35rem 0;
    transition: color .2s var(--ease);
}
.pilar > summary::-webkit-details-marker { display: none; }
.pilar > summary:hover .pilar-t { color: var(--orange-tx); }
.pilar > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.pilar-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    padding-bottom: 0;
    margin: 0;
}
.pilar-t { transition: color .2s var(--ease); }
.pilar-c {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* El signo + que se vuelve − al abrir: dos barras, y la vertical gira y se va. */
.pilar > summary::before,
.pilar > summary::after {
    content: '';
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 15px;
    height: 2px;
    background: var(--ink);
    transform: translateY(-50%);
}
.pilar > summary::before {
    transform: translateY(-50%) rotate(90deg);
    transition: transform .3s var(--ease), opacity .25s var(--ease);
}
.pilar[open] > summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.pilar[open] > summary .pilar-t { color: var(--orange-tx); }

/* El contenido entra con la misma transición del resto del sitio. */
.pilar .ledger { border-top: 0; margin-top: 0; padding-bottom: 1.25rem; }
.pilar[open] .ledger { animation: pilar-abre .4s var(--ease) both; }
@keyframes pilar-abre {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.pilar .ledger-row:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .pilar > summary::before { transition: none; }
    .pilar[open] .ledger { animation: none; }
}

/* La v6 le ponía una línea al h3 del pilar; ahora la línea la lleva el
   <details>, así que la del título sobraba y cruzaba la fila entera. */
.pilar-h { border-bottom: 0; }

/* El bloque cierra con la regla gruesa del último pilar, y el llamado a la
   acción ya no repite otra línea a cuatro rem de distancia. */
.pilar:last-of-type { border-bottom: 1px solid var(--line-hard); }
#servicios .svc-cta { border-top: 0; margin-top: 2.25rem; padding-top: 0; }

/* En pantallas angostas el antetítulo se queda solo en su renglón, para que las
   cuatro filas rompan igual. Si no, "Producto y calidad" cabe al lado de su
   etiqueta y las otras tres no, y la lista se ve despareja. */
@media (max-width: 560px) {
    .pilar-n { flex: 0 0 100%; }
    .pilar > summary { padding-right: 2.75rem; }
}

/* El "01 / 07" de las escenas del scroll traía su propia mono escrita a mano
   dentro de la librería, así que la variable no lo alcanzaba. */
#world .sw-copy__num { font-family: var(--font-body); }

/* ══════════════════════════════════════════════════════════════════════════
   v11 — el formulario: obligatorio arriba, opcional abajo
   ══════════════════════════════════════════════════════════════════════════ */

/* Los títulos de cada campo en negrita y en tinta plena, no en gris. */
.bf-field legend, .bf-field .bf-label { font-weight: 700; color: var(--ink); }
.bf-sub { font-weight: 700; color: var(--ink); }

/* La frontera entre lo que hay que llenar y lo que ayuda pero no bloquea. */
.bf-sep {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--line-hard);
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.bf-sep span {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange-tx);
    margin-right: 0.7rem;
}
.bf-sep + .bf-field { border-top: 0; padding-top: 0.4rem; }

/* ══════════════════════════════════════════════════════════════════════════
   v12 — esquinas redondeadas

   La v5 puso `border-radius: 0` a propósito, para que los campos se leyeran
   como casillas de un documento de aduana. Se cambia: nada de esquinas vivas.
   Las píldoras (botones, chips, categorías) ya venían redondas y no se tocan.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --radius:    14px;   /* paneles y cajas grandes */
    --radius-sm: 10px;   /* campos de formulario */
}

.bf-note,
.field input,
.field textarea { border-radius: var(--radius-sm); }

.bf-out,
.quote-panel { border-radius: var(--radius); }

/* El modal a pantalla completa en móvil solo redondea arriba, que es el borde
   que se ve; abajo queda pegado al filo de la pantalla. */
@media (max-width: 860px) {
    .quote-panel { border-radius: var(--radius) var(--radius) 0 0; }
}

/* El recuadro del archivo adjunto y el aviso de error, en la misma familia. */
.bf-file::-webkit-file-upload-button { border-radius: 999px; }

/* Un <legend> se dibuja encima del borde del <fieldset> y le abre un hueco, así
   que "Categoría" salía con una línea saliéndole del costado. Con float deja de
   ser legend posicionado y pasa a comportarse como una etiqueta normal. */
#briefForm .bf-field legend { float: left; width: 100%; }
#briefForm .bf-field legend + * { clear: both; }

/* `:first-of-type` cuenta por etiqueta, y como .bf-field está en <div> y en
   <fieldset>, la regla gruesa se repetía en el primer fieldset. Solo el primer
   campo del formulario la lleva. */
#briefForm .bf-field { border-top-color: var(--line); }
#briefForm > .bf-field:first-child { border-top-color: var(--line-hard); }

/* Contacto: el botón de WhatsApp basta. Fuera la regla y fuera el teléfono
   escrito, que repetía el mismo destino, y el botón sube junto al texto. */
#contacto .contact-row {
    margin-top: 1.6rem;
    padding-top: 0;
    border-top: 0;
}

/* "puedes marcar varias": la pista al lado del título, sin peso ni mayúsculas,
   para que no compita con el rótulo del campo. */
.opt-hint {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--faint);
    font-size: 0.78rem;
    margin-left: 0.5rem;
}

/* La costura entre el formulario y Contacto sumaba 234px de aire, porque cada
   sección aporta su propio margen de 117px. Se acorta a la mitad: siguen siendo
   dos bloques con fondos distintos, pero dejan de leerse como un hueco. */
#solicitud { padding-bottom: clamp(3rem, 6.5vh, 5.5rem); }
#contacto  { padding-top:    clamp(3rem, 6.5vh, 5.5rem); }

/* ══════════════════════════════════════════════════════════════════════════
   v13 — los nueve pasos, en una sola pantalla

   Fuera las rayas divisorias: quien separa las columnas ahora es el aire, y
   quien enlaza los pasos es la flecha. Cada paso abre con su icono y su
   número, el título va en negrita, y todo el ritmo vertical se mide en vh
   para que el bloque entre completo sin scroll.
   ══════════════════════════════════════════════════════════════════════════ */

#proceso { padding-block: clamp(2rem, 4.8vh, 4rem); }
#proceso .section-head { gap: clamp(0.3rem, 1vh, 0.9rem); }
#proceso .section-head h2 { font-size: clamp(1.7rem, 2.7vw, 2.6rem); }
#proceso .section-head .lead { font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.42; }
/* La nota también arrastraba una raya. Fuera, como el resto. */
#proceso .note {
    margin-top: clamp(1rem, 2.6vh, 1.8rem);
    padding-top: 0;
    border-top: 0;
    font-size: 0.85rem;
}

.stages {
    border-top: 0;
    margin-top: clamp(1.1rem, 3vh, 2rem);
    row-gap: clamp(1.4rem, 4vh, 2.75rem);
}
.stages li {
    display: block;                       /* ya no es número + columna de texto */
    border: 0;
    padding: 0 2rem 0 0;
}
.stages li + li { border-left: 0; padding-left: 2rem; }
.stages li:nth-child(3n + 1) { padding-left: 0; }

/* icono y número comparten renglón: es el ancla de la flecha que viene */
.stages .st-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: inherit;
}
.stages .st-n { display: inline-block; width: auto; margin: 0; }
.stages .st-ico {
    display: block;
    width: 21px; height: 21px;
    flex: none;
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .25s var(--ease), transform .25s var(--ease);
}
.stages li:hover .st-ico { transform: translateY(-2px); }
.stages .st-n::after { display: none; }           /* la rayita ámbar la reemplaza el icono */
.stages .st-n { padding-top: 0; }

.stages strong { font-weight: 700; font-size: clamp(0.98rem, 1.1vw, 1.08rem); }
.stages .st-d { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.stages .st-act { margin-top: 0.35rem; }

@media (max-width: 900px) {
    .stages li, .stages li + li { padding-left: 0; padding-right: 1.25rem; }
    .stages li:nth-child(2n) { border-left: 0; padding-left: 1.25rem; }
}
@media (max-width: 560px) {
    .stages li:nth-child(2n) { padding-left: 0; }
}

/* Ver el módulo "Apagar el mundo del scroll" en app.js. */
#world.sw-apagado .sw-sky,
#world.sw-apagado .sw-stage,
#world.sw-apagado .sw-copylayer,
#world.sw-apagado .sw-route,
#world.sw-apagado .sw-hint,
#world.sw-apagado .sw-scrollbar { visibility: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   v14 — "Qué gestionamos" en oscuro

   La sección pasa al mismo gris de la línea gráfica, con texto en crema y el
   naranja reservado para los iconos. Se van las rayas: cada categoría es un
   bloque con su icono, su título en negrita y una línea de detalle debajo.
   ══════════════════════════════════════════════════════════════════════════ */

.section--night {
    background: var(--night);
    color: #F7F4EF;
}
.section--night .eyebrow { color: var(--amber); }
.section--night h2 { color: #F7F4EF; }
.section--night .lead { color: rgba(247, 244, 239, 0.72); }

#alcance .tags-grid {
    border-top: 0;                       /* la raya de la v5 ya no va */
    margin-top: clamp(2rem, 5vh, 3.25rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.75rem, 4vh, 2.75rem) 2rem;
    list-style: none;
}
#alcance .tags-grid li {
    padding: 0;
    border: 0;
    color: inherit;
    font-size: inherit;
}
#alcance .cat-ico {
    display: block;
    width: 26px; height: 26px;
    margin-bottom: 0.75rem;
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s var(--ease);
}
#alcance .tags-grid li:hover .cat-ico { transform: translateY(-3px); }
#alcance .tags-grid strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    color: #F7F4EF;
}
#alcance .tags-grid span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(247, 244, 239, 0.62);
}

@media (max-width: 1000px) { #alcance .tags-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { #alcance .tags-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { #alcance .tags-grid { grid-template-columns: 1fr; } }

/* estado de la subida de archivos del formulario */
.bf-file-status { margin-top: .5rem; font-size: .82rem; color: var(--ink-soft, #6b7280); }