/* Fastblock · site layer. Tokens from the Fastblock design system, mapped onto
   the scrollcraft roles. The engine stylesheet is untouched. */
:root {
  --sc-canvas:      #03142B;   /* navy 950 */
  --sc-surface:     #051F40;   /* navy 900, the logo ground */
  --sc-ink:         #FFFFFF;
  --sc-ink-soft:    #C3CEDD;   /* navy-tinted, never flat grey */
  --sc-accent:      #0A5CFF;   /* the speed blue. CTA, active stop, glass in the corte */
  --sc-accent-ink:  #FFFFFF;
  --sc-font-display: "League Spartan", "Futura", "Century Gothic", sans-serif;
  --sc-font-text:    "Figtree", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sc-shadow-color: 214 86% 7%;

  --fb-navy-800: #003362;
  --fb-navy-900: #051F40;
  --fb-black:    #0A0B0D;
  --fb-gray-50:  #F7F8FA;
  --fb-gray-200: #E2E5EA;
  --fb-gray-600: #58616E;
  --paper:       #FFFFFF;
  --paper-ink:   #0A0B0D;
  --paper-soft:  #3A414C;
  --skew: -12deg;
  --cut: 18px;
  --bar-h: 72px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

body { background: var(--sc-canvas); }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 10px 14px; background: var(--paper); color: var(--paper-ink);
  transform: translateY(-160%); transition: transform 160ms var(--ease);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- type -- */
.d {
  font-family: var(--sc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.d--xl { font-size: clamp(3rem, 1.4rem + 6.4vw, 7.25rem); }
.d--lg { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); }
.over {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lede {
  margin: var(--sc-5) 0 0;
  font-size: var(--sc-t-lg);
  line-height: 1.42;
  max-width: 34ch;
  text-wrap: pretty;
  color: var(--sc-ink);
}
.body {
  margin: var(--sc-5) 0 0;
  max-width: 44ch;
  line-height: 1.62;
  letter-spacing: 0.004em;
  text-wrap: pretty;
  color: var(--sc-ink);
  font-weight: 500;
}
.cap {
  margin: var(--sc-5) 0 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
}
.n { font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.94em; letter-spacing: -0.01em; white-space: nowrap; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  --b-bg: transparent; --b-ink: var(--sc-ink);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; text-decoration: none; white-space: nowrap;
  color: var(--b-ink); background: var(--b-bg);
  border: 2px solid currentColor; border-radius: 2px;
  cursor: pointer;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease), color 160ms var(--ease);
}
.btn--accent { --b-bg: var(--sc-accent); --b-ink: #fff; border-color: var(--sc-accent); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn::after {
  content: ""; width: 14px; height: 2px; background: currentColor;
  transform: skewX(var(--skew)); transition: transform 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { --b-bg: #0047D6; border-color: #0047D6; }
  .btn:hover::after { transform: translateX(4px) skewX(var(--skew)); }
}
.btn:active { transform: translateY(1px); }

.link {
  display: inline-flex; gap: 10px; margin-top: var(--sc-6);
  font-family: var(--sc-font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em;
  text-decoration-color: var(--sc-accent);
  min-height: 44px; align-items: center;
}
@media (hover: hover) and (pointer: fine) { .link:hover span { transform: translateX(4px); } }
.link span { transition: transform 160ms var(--ease); }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sc-gutter);
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bar__mark img { height: 40px; width: auto; }
.bar__mark .bar__word { height: 21px; }
.bar__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.bar__nav > a:not(.btn) {
  font-family: var(--sc-font-display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 0.9rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
@media (hover: hover) and (pointer: fine) { .bar__nav > a:not(.btn):hover { border-bottom-color: var(--sc-accent); } }
.bar__route { display: none; }

/* --------------------------------------------------------------- scrims --
   Shaped to the copy, never full frame. Opacity follows the copy it serves. */
.scrim { opacity: 0; transition: none; }
.scrim--hero {
  background:
    linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 84%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 46%, transparent) 26%, transparent 50%),
    linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 0%, transparent 44%);
}
.scrim--left {
  background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 58%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 30%, transparent 54%);
}
.scrim--right {
  background: linear-gradient(to left, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 34%, transparent 60%);
}
.scrim--finale {
  background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 46%, transparent 70%);
}
/* a top band so the bar always has a ground, whatever the clip does */
.sc-world__copy::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 48%, transparent), transparent);
}

/* ---------------------------------------------------------- copy blocks -- */
.blk { max-width: min(40rem, 70vw); }
.blk--hero { left: var(--sc-gutter); bottom: clamp(3rem, 11vh, 8rem); max-width: min(60rem, 72vw); }
/* the company's full mark opens the page, above the overline, in the brand's
   horizontal lockup (logo-row): isotype left of the name, 1.98x its height,
   0.45x apart. --word-h is tied to the overline so the mark spans exactly the
   overline's measure and sits flush on the copy's left edge. */
.hero__brand { --word-h: calc(var(--sc-t-xs) * 2.93); display: flex; align-items: center; gap: calc(var(--word-h) * 0.45); width: max-content; margin: 0 0 clamp(2rem, 1.2rem + 1.4vw, 2.75rem); }
.hero__iso { display: block; height: calc(var(--word-h) * 1.98); width: auto; }
/* FASTBLOCK, not the whole wordmark, on the isotype's centre line; CONSTRUCTORA
   hangs below it. The name's cap band sits 17.5% of the image above its middle. */
.hero__word, .bar__mark .bar__word { transform: translateY(17.5%); }
.hero__word { display: block; height: var(--word-h); width: auto; }
.blk--lead { left: var(--sc-gutter); right: auto; bottom: clamp(3rem, 12vh, 8.5rem); }
.blk--trail {
  inset-inline: auto; right: calc(var(--sc-gutter) + 168px); left: auto;
  bottom: clamp(3rem, 12vh, 8.5rem);
}
.blk--wide { max-width: min(46rem, 62vw); }
.blk .d + .lede, .blk .d + .body { margin-top: var(--sc-5); }

.clients {
  list-style: none; margin: var(--sc-6) 0 0; padding: var(--sc-5) 0 0;
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
  columns: 3; column-gap: var(--sc-6);
  font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(0.84rem, 0.76rem + 0.26vw, 0.98rem);
  line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase;
  max-width: 46rem;
}
.clients li { break-inside: avoid; padding: 4px 0; }

/* ------------------------------------------------- the editorial spread -- */
/* The plates live in their own field to the right of the copy column and left
   of the corte, so no viewport can stack paper behind the headline. */
.spread {
  position: absolute; z-index: 20; pointer-events: none; opacity: 0; visibility: hidden;
  left: calc(var(--sc-gutter) + min(36rem, 42vw)); right: calc(var(--sc-gutter) + 160px);
  top: calc(var(--bar-h) + 2vh); bottom: 4vh;
}
.blk--narrow { max-width: min(34rem, 40vw); }
.plate {
  position: absolute; margin: 0;
  background: var(--paper); padding: 10px 10px 0;
  box-shadow: var(--sc-e3);
  will-change: transform;
}
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--a figcaption { text-align: right; }
.plate figcaption {
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--paper-soft); padding: 10px 2px 12px;
}
.plate__frame { overflow: hidden; }
.plate--a { right: 0; top: 4%; width: min(78%, 560px); }
.plate--a img { aspect-ratio: 3 / 2; height: auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%); }
.plate--b { left: 0; bottom: 2%; width: min(30%, 230px); }
.plate--b img { aspect-ratio: 2 / 3; height: auto; }
.plate--c { right: 6%; bottom: 0; width: min(26%, 210px); }
.plate--c img { aspect-ratio: 2 / 3; height: auto; }

/* ----------------------------------------------------------------- crane -- */
.crane {
  position: absolute; inset: 0; pointer-events: none; z-index: 30;
  will-change: transform, opacity;
}
.crane__jib {
  position: absolute; left: -3vw; top: -7vh; width: 62vw; aspect-ratio: 16 / 9;
  /* the cutout is navy; a near steel jib against daylight reads near-black,
     slightly soft because it sits far in front of the focal plane */
  background: url("assets/crane.png?v=cd44d9c3") left top / contain no-repeat;
  filter: brightness(0.55) saturate(0.4) blur(1.2px);
  opacity: 0.94;
  transform-origin: 6% 18%;
  will-change: transform;
}

/* a column of density under each text block, sized to it by site.js. A sibling
   of the copy, never a child, so the contrast pass measures it. */
.colscrim {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1;
  pointer-events: none; opacity: 0;
  background: color-mix(in oklab, var(--sc-canvas) 66%, transparent);
  -webkit-mask: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-composite: intersect;
  will-change: transform, opacity;
}

/* ---------------------------------------------------------------- corte -- */
.corte {
  position: fixed; z-index: 50;
  right: var(--sc-gutter); top: 50%;
  transform: translateY(-46%);
  width: 150px;
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; column-gap: 14px;
  color: var(--sc-ink);
}
.corte__read {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px;
  text-shadow: 0 1px 10px rgb(3 20 43 / 0.6);
}
.corte__phase { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.corte__level { font-family: var(--sc-font-mono); font-weight: 500; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.corte__svg { width: 64px; height: auto; max-height: 58vh; overflow: visible; }
.corte__svg .lv { fill: rgb(255 255 255 / 0.04); stroke: rgb(255 255 255 / 0.5); stroke-width: 0.6; transition: fill 140ms linear; }
.corte__svg .lv.is-concrete { fill: #C9CED6; stroke: rgb(255 255 255 / 0.9); }
.corte__svg .lv.is-glass { fill: var(--sc-accent); stroke: #9DBBFF; }
.corte__svg .ground { stroke: #fff; stroke-width: 1.2; }
.corte__svg .soil { stroke: rgb(255 255 255 / 0.28); stroke-width: 0.5; }
.corte__svg .crane-line { stroke: rgb(255 255 255 / 0.55); stroke-width: 0.6; fill: none; }
.corte__dir {
  list-style: none; margin: 0; padding: 0; align-self: center;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateX(6px); visibility: hidden;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
}
.corte.is-directory .corte__dir { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.corte__dir a {
  position: relative; display: flex; align-items: center; min-height: 34px; padding-left: 16px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--sc-ink-soft);
  text-shadow: 0 1px 10px rgb(3 20 43 / 0.7);
}
.corte__dir a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 2px; margin-top: -1px;
  background: currentColor; transform: skewX(var(--skew)); transform-origin: left;
  transition: transform 200ms var(--ease), background-color 200ms var(--ease);
}
.corte__dir a[aria-current="step"] { color: var(--sc-ink); }
.corte__dir a[aria-current="step"]::before { background: var(--sc-accent); transform: scaleX(1.6) skewX(var(--skew)); height: 4px; margin-top: -2px; }
@media (hover: hover) and (pointer: fine) { .corte__dir a:hover { color: var(--sc-ink); } }

/* --------------------------------------------------------------- cartel --
   The close: a Peruvian obra sign, set as paper on the visitor's own lot.
   Chamfered top-right corner, the brand's --cut-corner. */
.cartel-wrap { --sc-ink: var(--paper-ink); color: var(--paper-ink); left: var(--sc-gutter); right: auto; top: calc(var(--bar-h) + 2vh); bottom: auto; max-width: none; width: min(560px, 46vw); }
.cartel {
  color: var(--paper-ink);
  padding: 28px 26px 18px;
}
/* The paper is a sibling sized to the cartel by site.js?v=ad29154d, so the contrast pass
   measures ink on paper instead of ink on the lot. Chamfered top-right corner,
   the brand's --cut-corner, navy head rule. */
.paper {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(var(--fb-navy-800), var(--fb-navy-800)) top / 100% 6px no-repeat, var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  will-change: transform, opacity;
}
.cartel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--paper-ink); }
.cartel__head h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); letter-spacing: 0.02em; line-height: 1; }
.cartel__logo { height: 18px; width: auto; }
.cartel__rows { margin: 0; }
.cartel__rows > div {
  display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--fb-gray-200); min-height: 50px;
}
.cartel__rows dt { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-soft); }
.cartel__rows dd { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.08rem; text-transform: uppercase; letter-spacing: 0.02em; }
.cartel input, .cartel select {
  width: 100%; min-height: 44px; padding: 8px 2px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em;
  color: var(--fb-navy-800); background: transparent;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  transition: border-color 160ms var(--ease);
}
.cartel input::placeholder { color: #7A8391; text-transform: none; font-weight: 500; }
.cartel select { text-transform: uppercase; cursor: pointer; }
.cartel input:hover, .cartel select:hover { border-bottom-color: var(--fb-gray-200); }
.cartel input:focus-visible, .cartel select:focus-visible { outline: none; border-bottom-color: var(--sc-accent); }
.cartel input[aria-invalid="true"] { border-bottom-color: #D62839; }
.cartel__area { display: flex; align-items: center; gap: 8px; }
.cartel__area span { font-family: var(--sc-font-mono); font-size: 0.9rem; color: var(--paper-soft); }
.cartel__err { margin: 12px 0 0; color: #B11F2F; font-weight: 600; font-size: 0.92rem; }
.cartel__go { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.cartel__mail {
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--fb-navy-800); text-decoration: underline; text-underline-offset: 0.25em;
}
.cartel__note { margin: 10px 0 0; font-size: 0.82rem; color: var(--paper-soft); }
.cartel :focus-visible { outline-color: var(--sc-accent); }

.foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--fb-gray-200);
  font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--paper-soft);
}
.foot a { min-height: 28px; display: inline-flex; align-items: center; }

.nojs { position: fixed; inset: auto 0 0 0; z-index: 300; margin: 0; padding: 16px var(--sc-gutter); background: var(--paper); color: var(--paper-ink); }

/* --------------------------------------------------------------- mobile -- */
/* --------------------------------------------------------------- mobile --
   Authored for the phone, not shrunk from the desktop: every block is sized
   to fit between the bar and the bottom edge of a 360x640 screen. */
@media (max-width: 860px) {
  :root { --bar-h: 60px; }

  /* bar: mark, the two pages, one CTA. Always visible. */
  .bar { padding-inline: 16px; }
  /* the whole mark stays: isotype with the name beside it */
  .bar__mark { gap: 8px; }
  .bar__mark img { height: 28px; }
  .bar__mark .bar__word { height: 13px; }
  .bar__nav { gap: 12px; }
  .bar__nav > a:not(.btn) { display: inline-flex; font-size: 0.72rem; letter-spacing: 0.08em; }
  .bar .btn { min-height: 40px; padding: 0 12px; font-size: 0.72rem; letter-spacing: 0.06em; }
  .bar .btn::after { display: none; }

  /* copy: one band at the bottom, never taller than the screen allows */
  .blk, .blk--hero, .blk--lead, .blk--trail, .blk--wide, .blk--narrow {
    left: 20px; right: 20px; max-width: none; text-align: left;
    bottom: calc(clamp(1.75rem, 6svh, 3.25rem) + env(safe-area-inset-bottom, 0px));
  }
  .d--xl { font-size: clamp(2.5rem, 1.2rem + 7.5vw, 3.6rem); }
  .d--lg { font-size: clamp(2rem, 1.15rem + 5vw, 2.7rem); }
  .over { font-size: 0.66rem; letter-spacing: 0.2em; margin-bottom: 12px; }
  .hero__brand { --word-h: 28px; margin-bottom: 26px; }
  .lede { font-size: 1.04rem; margin-top: 16px; }
  .body { font-size: 0.96rem; line-height: 1.55; margin-top: 16px; }
  .cap { margin-top: 12px; }
  .blk .d + .lede, .blk .d + .body { margin-top: 16px; }

  /* obras block: the figures stay, the client list becomes one compact run */
  .blk--wide .d--lg { font-size: clamp(1.8rem, 1.1rem + 4.4vw, 2.4rem); }
  .clients {
    columns: auto; display: flex; flex-wrap: wrap; gap: 2px 0;
    margin-top: 16px; padding-top: 14px; font-size: 0.68rem; line-height: 1.5;
  }
  .clients li { padding: 0; }
  .clients li:not(:last-child)::after { content: "·"; margin: 0 0.5em; color: var(--sc-accent); }
  .clients li:nth-child(n+11) { display: none; }
  .clients li:nth-child(10)::after { content: ""; margin: 0; }
  .link { margin-top: 14px; }

  .scrim--hero, .scrim--left, .scrim--right, .scrim--finale {
    background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 36%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 60%, transparent 76%);
  }

  /* the corte: a slim gauge on the right while the tower rises, then it leaves */
  .corte { right: 12px; top: calc(var(--bar-h) + 14px); transform: none; width: auto; grid-template-columns: 30px; pointer-events: none; }
  .corte__read { margin-bottom: 8px; align-items: flex-end; }
  .corte__phase { font-size: 0.58rem; letter-spacing: 0.16em; }
  .corte__level { font-size: 1.2rem; }
  .corte__svg { width: 30px; justify-self: end; max-height: 28svh; }
  .corte__dir { display: none; }
  .corte { transition: opacity 240ms var(--ease), visibility 0s linear 240ms; }
  .corte.is-directory { opacity: 0; visibility: hidden; }

  /* one plate on a phone, in the top half, clear of the copy band */
  .spread { left: 20px; right: 20px; top: calc(var(--bar-h) + 14px); bottom: auto; height: auto; }
  .spread .plate--a { position: relative; left: auto; right: auto; top: auto; width: 100%; }
  .spread .plate--b, .spread .plate--c { display: none; }
  .plate { padding: 8px 8px 0; }
  .plate figcaption { font-size: 0.64rem; padding: 8px 2px 10px; }

  .crane__jib { width: 150vw; left: -30vw; }

  /* the cartel fits a 640px-tall phone whole; scrolls inside itself if it ever cannot.
     No overscroll containment: a swipe on the white sheet has to reach the page,
     or the reader is stuck at the end of the flight with no way back up. */
  .cartel-wrap {
    left: 12px; right: 12px; width: auto;
    top: calc(var(--bar-h) + 6px); bottom: auto;
    max-height: calc(100svh - var(--bar-h) - 12px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .cartel { padding: 16px 14px 12px; }
  .cartel__head { padding-bottom: 10px; }
  .cartel__head h2 { font-size: 1.3rem; }
  .cartel__logo { height: 14px; }
  .cartel__rows > div { grid-template-columns: 5.6rem 1fr; min-height: 42px; gap: 8px; }
  .cartel__rows dt { font-size: 0.6rem; letter-spacing: 0.14em; }
  .cartel__rows dd { font-size: 0.92rem; }
  /* 16px or iOS zooms the page when a field is touched */
  .cartel input, .cartel select { font-size: 16px; min-height: 40px; padding: 6px 2px; }
  .cartel__go { margin-top: 12px; gap: 4px 16px; }
  .cartel__go .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .cartel__mail { min-height: 36px; font-size: 0.9rem; }
  .cartel__note { font-size: 0.74rem; margin-top: 6px; }
  .foot { font-size: 0.62rem; gap: 0 12px; margin-top: 10px; padding-top: 8px; }
  .foot a[href*="facebook"] { display: none; }
}

/* narrow phones: the CTA says "Cotiza" so the full logo keeps its room */
@media (max-width: 420px) { .bar .btn .long { display: none; } }

/* 320px phones (SE 1st gen, small Androids): the whole mark and both links still
   fit, a step smaller and closer together, so the name never runs under "Obras" */
@media (max-width: 359px) {
  .bar { padding-inline: 12px; }
  .bar__mark { flex-shrink: 0; gap: 6px; }
  .bar__mark img { height: 26px; }
  .bar__mark .bar__word { height: 12px; }
  .bar__nav { gap: 10px; }
  .bar__nav > a:not(.btn) { font-size: 0.68rem; letter-spacing: 0.06em; }
  .bar .btn { padding: 0 10px; font-size: 0.68rem; }
}

/* short phones (SE, small Androids): tighten once more */
@media (max-width: 860px) and (max-height: 700px) {
  .d--xl { font-size: clamp(2.2rem, 1.1rem + 6.5vw, 3rem); }
  .d--lg { font-size: clamp(1.75rem, 1.05rem + 4.4vw, 2.3rem); }
  .lede, .body { font-size: 0.92rem; }
  .hero__brand { margin-bottom: 20px; }
  .cap { display: none; }
  .clients li:nth-child(n+7) { display: none; }
  .clients li:nth-child(6)::after { content: ""; margin: 0; }
  .spread .plate--a { width: 86%; }
  .cartel__rows > div { min-height: 38px; }
  .cartel input, .cartel select { min-height: 36px; }
  .cartel__note { display: none; }
}

@media (max-height: 760px) and (min-width: 861px) {
  .cartel__rows > div { min-height: 42px; }
  .cartel { padding: 16px 22px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .crane__jib, .plate { transform: none !important; }
}