/*
 * é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);
}

/* 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);
}