/*
 * éxodo · manual 3.7, capítulos Web y Grilla y espacio.
 * Gutter, section rhythm and structural dividers shared by every page.
 * Keep component padding, field states and animated progress lines local.
 */
:root {
  --pad: clamp(24px, 6vw, 110px);
  --section-space: clamp(90px, 13vh, 180px);
  --hair-d: rgba(243, 241, 236, 0.10);
  --hair-l: rgba(10, 10, 11, 0.12);
}

.whyar .whyar-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Company experience: one primary fact, with tenure and client breadth beside it. */
body .experience-proof {
  display: block;
  --experience-accent: #6FCE73;
  --experience-muted: #8A8782;
  --experience-hair: var(--hair-d);
}
body .experience-proof.act-light {
  --experience-accent: #1E6C22;
  --experience-muted: #56544F;
  --experience-hair: var(--hair-l);
}
.experience-proof .experience-tag {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 24px; color: var(--experience-muted);
  font-size: 11px; font-weight: 400; line-height: 1.8; letter-spacing: .22em;
}
.experience-proof .experience-tag::before {
  content: ''; width: 28px; height: 2px; background: var(--experience-accent);
}
.experience-proof .experience-head h2 {
  margin: 0; font-size: clamp(32px, 4.6vw, 72px);
  font-weight: 750; line-height: 1.04; letter-spacing: -.04em;
}
.experience-proof .experience-head em {
  display: inline-block; white-space: nowrap; font-family: 'Exodo Cursiva', sans-serif;
  font-size: 1.04em; font-style: normal; font-weight: 200;
}
.experience-proof.act-light .experience-head em { color: var(--experience-accent); }
body .experience-proof .experience-grid {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-rows: auto; gap: 0; margin-top: 48px;
  border-top: 1px solid var(--experience-hair);
}
body .experience-proof .experience-grid :is(.experience-main, .experience-fact) {
  display: block; grid-row: auto; padding: 0; border: 0;
  min-width: 0;
}
body .experience-proof .experience-grid .experience-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 40px 16px 0;
}
.experience-proof .experience-total {
  display: flex; align-items: baseline; gap: .055em; margin: 0;
  font-size: clamp(120px, 18vw, 260px); line-height: .95; letter-spacing: -.055em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.experience-proof .experience-number { font-weight: 200; }
.experience-proof :is(.experience-number, .experience-value) b { font-weight: inherit; }
.experience-proof .experience-number .experience-plus {
  position: relative; top: -.85em; font-size: .38em; vertical-align: baseline;
  line-height: 0; margin-right: .08em; font-weight: 200; color: var(--experience-accent);
}
.experience-proof .experience-unit {
  font-family: inherit; font-weight: 200; font-style: normal;
  font-size: .5em; letter-spacing: -.04em;
}
.experience-proof .experience-caption {
  margin: 16px 0 0; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 400; line-height: 1.8; letter-spacing: .22em;
  text-transform: uppercase; color: var(--experience-muted);
}
.experience-proof .experience-support {
  border-left: 1px solid var(--experience-hair);
  padding-left: clamp(32px, 4vw, 64px);
}
body .experience-proof .experience-grid .experience-fact { padding-block: 24px; }
body .experience-proof .experience-grid .experience-fact + .experience-fact {
  border-top: 1px solid var(--experience-hair);
}
.experience-proof .experience-since {
  margin: 0 0 8px; color: var(--experience-muted); font-size: 11px; line-height: 1.8;
}
.experience-proof .experience-value {
  margin: 0; font-size: clamp(56px, 6.3vw, 88px);
  font-weight: 200; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.experience-proof .experience-value .experience-plus {
  position: relative; top: -.85em; margin-left: .06em; color: var(--experience-accent);
  font-size: .38em; font-weight: 200; vertical-align: baseline; line-height: 0;
}
.experience-proof .experience-fact .experience-caption { margin-top: 16px; }
@media (max-width: 768px) {
  body .experience-proof .experience-grid { grid-template-columns: 1fr; margin-top: 32px; }
  body .experience-proof .experience-grid .experience-main { padding: 28px 0 32px; }
  .experience-proof .experience-total { font-size: clamp(100px, 28vw, 200px); gap: .08em; }
  .experience-proof .experience-unit { font-size: .44em; }
  .experience-proof .experience-support {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 20px auto auto; row-gap: 8px;
    border-left: 0; border-top: 1px solid var(--experience-hair); padding: 24px 0 0;
  }
  body .experience-proof .experience-grid .experience-fact {
    display: grid; grid-template-rows: 20px auto 1fr; grid-template-rows: subgrid;
    grid-row: span 3; row-gap: 8px;
    padding: 0 20px 0 0;
  }
  body .experience-proof .experience-grid .experience-fact + .experience-fact {
    border-top: 0; border-left: 1px solid var(--experience-hair); padding: 0 0 0 20px;
  }
  .experience-proof .experience-since { grid-row: 1; margin: 0; }
  .experience-proof .experience-value { grid-row: 2; font-size: clamp(48px, 12vw, 80px); }
  .experience-proof .experience-fact .experience-caption { grid-row: 3; margin: 8px 0 0; }
}

/* These wrappers previously used fixed gutters; inner columns keep theirs. */
#nav,
#N,
.foot,
.cth,
.cta,
.cta-cl,
.sd-cta,
.err {
  padding-inline: var(--pad);
}

/* Ordinary full-width sections share one rhythm, including on mobile.
 * Hero, pinned scenes, marquees and the footer retain their own composition.
 * Chapter 23 specifies a separate 14vh rhythm for .nextart.
 */
.metrics,
.whyar,
.svc,
.tech,
.cli,
.proc,
.narr,
.vals,
.hub,
.secd,
.diff,
.wall,
.nums,
.qbrk-d,
.prods,
.ocr,
.stackc,
.ints,
.api,
.cmain,
.direct,
.sd-stmt,
.how,
.acc,
.tf,
.eor,
.resp,
.offl,
.calc,
.steps,
.faq,
.qbrk,
.reforma,
.moneda,
.fees,
.featb,
.plist,
.aread,
.related,
.cta,
.cta-cl,
.sd-cta {
  padding-block: var(--section-space);
}

/* The home suite has an inline stylesheet and a more specific mobile rule. */
html #techSuite {
  padding: var(--section-space) var(--pad);
}

/* A long translated title may need more than one viewport. Keep the usual
 * full-screen composition when it fits, and grow instead of cropping it.
 * Bottom alignment keeps the existing text position in ordinary heroes. */
html body :is(.hero, .pgh, .sdh) {
  height: auto;
  min-height: 100svh;
}

@media (min-width: 769px) {
  html body :is(.hero-ct, .pgh-ct, .sdh-ct) {
    padding-top: 112px;
  }
}

/* Service visitors can read the offer and reach Contact without a full-screen
 * gap on mobile. Content still grows naturally in longer translations. */
@media (max-width: 768px) {
  .cmain { padding-block: 36px 64px; }
  html body .sdh:has(.sdh-action) { min-height: 0; }
  html body .sdh:has(.sdh-action) .sdh-ct { padding-top: 112px; padding-bottom: 48px; }
  .sdh:has(.sdh-action) .sdh-scroll { display: none; }
}

/* The wordmark is the same size and face in every language and both places. */
.n-logo,
.ft-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.04em;
}

.ft-logo {
  color: #f3f1ec;
}

.n-logo span,
.ft-logo span,
.ft-logo em {
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  font-style: normal;
  letter-spacing: inherit;
  color: inherit;
  opacity: 0.5;
}

/* Dark structural dividers. Set only the existing side, so removed borders
 * stay removed and hover/accent/selection rules keep their original behavior.
 */
.foot,
.ft-bot,
.acc-list,
.how-tab,
.tf-row,
.faq-list,
.open-rows {
  border-top-color: var(--hair-d);
}

#N,
.how-tab:last-of-type,
.acc-item,
.faq-item,
.orow {
  border-bottom-color: var(--hair-d);
}

.hcard,
.rel-card,
.resp-card,
.flip-f,
.prod-card {
  border-color: var(--hair-d);
}

body.theme-verde .ah-by {
  border-top-color: var(--hair-d);
  border-bottom-color: var(--hair-d);
}

/* These 1px grid gaps are separators, not the background of their cells. */
.offl-grid,
.int-grid {
  background-color: var(--hair-d);
  border-color: var(--hair-d);
}

.secd-grid {
  background-color: var(--hair-l);
  border-color: var(--hair-l);
}

/* Light structural dividers; form underlines and option buttons are excluded. */
.featb-card,
.aprose .sign,
.as,
.as-art,
.fs-recap {
  border-top-color: var(--hair-l);
}

.as-art:last-of-type,
.fs-recap-row {
  border-bottom-color: var(--hair-l);
}

.aprose .checklist {
  border-color: var(--hair-l);
}

body.theme-verde .aprose .pull {
  border-bottom-color: var(--hair-l);
}

.lang-sep {
  background-color: var(--hair-d);
}