/* =========================================================
   VIATRANS — Landing page styles
   Design tokens ported 1:1 from the approved visual design.
   ========================================================= */

:root {
  /* Brand */
  --color-brand: #FEC400;
  --color-brand-deep: #E0A800;
  /* Same brand hue, darkened for AA text contrast on light backgrounds
     (the eyebrow labels) — #E0A800 on #FAF9F5 is only ~2:1. */
  --color-brand-text: #8F6A00;

  /* Neutrals */
  --color-ink: #14171C;
  --color-ink-2: #1C2128;
  --color-paper: #FAF9F5;
  --color-paper-2: #F1EFE8;
  --color-line-light: rgba(20, 23, 28, 0.10);
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-text-muted: #5B6068;
  --color-text-muted-dark: #A7ACB4;
  --color-text-faint-dark: #8A8F97;
  --color-text-faint-dark-2: #6B7078;

  /* Type */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(64px, 9vw, 112px);
  --section-pad-y-tight: clamp(56px, 8vw, 96px);

  /* Shape */
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-control: 10px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .25s;
  --dur-base: .3s;
  --dur-reveal: .7s;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-brand-deep); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--color-brand); color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }
.section--tight { padding-top: var(--section-pad-y-tight); padding-bottom: var(--section-pad-y-tight); }
.section--dark { background: var(--color-ink); color: var(--color-paper); }
.section--paper { background: var(--color-paper); }
.section--paper-2 { background: var(--color-paper-2); }
.section--brand { background: var(--color-brand); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--color-brand); color: var(--color-ink);
  padding: 10px 16px; border-radius: var(--radius-control);
  font-weight: 600; font-size: 14px; transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 12px; color: var(--color-ink); }

/* ---------- Colombia corner ribbon ----------
   Sizes itself to the empty margin OUTSIDE the centered container
   rather than a fixed pixel size. Below 1240px the container fills
   the viewport (minus its own padding) right up to the header's nav
   / tracking field / hamburger, so (100vw - 1240px)/2 is negative
   there and the clamp floor (56px, the old mobile-only size) wins —
   small and safely clear of header controls, same as before. Past
   1240px real empty margin opens up outside the container, so the
   ribbon grows to fill exactly that margin (never past the
   container's own edge) — bigger on wide desktop screens without
   ever overlapping header content. */
.co-ribbon {
  position: fixed; top: 0; right: 0; z-index: 110;
  width: clamp(56px, calc((100vw - 1240px) / 2), 150px);
  height: clamp(56px, calc((100vw - 1240px) / 2), 150px);
  overflow: hidden; pointer-events: none;
}
.co-ribbon span {
  position: absolute; top: 11%; right: -30%; width: 143%; height: 29%;
  transform: rotate(45deg); transform-origin: center;
  background: linear-gradient(to bottom, #FCD116 0 50%, #003893 50% 75%, #CE1126 75% 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

/* ---------- Type utilities ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-brand-text);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--color-brand-text); }
.eyebrow--on-dark { color: var(--color-brand); }
.eyebrow--on-dark::before { background: var(--color-brand); }

.section-title {
  font-size: clamp(1.7rem, 2vw + 1rem, 2.5rem);
  font-weight: 700; line-height: 1.15; max-width: 560px;
  margin-top: 14px;
}
.section-title--tight { font-size: clamp(1.6rem, 1.8vw + 1rem, 2.25rem); margin-top: 12px; }
.section-lede { margin-top: 12px; font-size: 13px; font-style: italic; color: var(--color-text-faint-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 600; padding: 15px 26px; border-radius: var(--radius-control);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.btn-sm { font-size: 13px; padding: 11px 20px; min-height: 44px; }
.btn-lg { font-size: 16.5px; padding: 18px 32px; }

.btn-primary { background: var(--color-brand); color: var(--color-ink); font-weight: 700; box-shadow: 0 10px 22px -10px rgba(254,196,0,.55); }
.btn-primary:hover { background: var(--color-brand-deep); color: var(--color-ink); transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(254,196,0,.55); }

.btn-outline-dark { background: transparent; color: var(--color-paper); border: 1px solid rgba(255,255,255,.28); }
.btn-outline-dark:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); color: var(--color-paper); }

.btn-outline-light { background: transparent; color: var(--color-ink); border: 1.5px solid rgba(20,23,28,.4); }
.btn-outline-light:hover { background: rgba(20,23,28,.06); border-color: rgba(20,23,28,.7); color: var(--color-ink); }

.btn-ink { background: var(--color-ink); color: var(--color-brand); font-weight: 700; box-shadow: 0 10px 22px -10px rgba(20,23,28,.4); }
.btn-ink:hover { opacity: .92; color: var(--color-brand); transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(20,23,28,.45); }

.btn[aria-disabled="true"] { cursor: not-allowed; }

/* ---------- Icons ---------- */
.icon-wrap {
  width: 44px; height: 44px; border-radius: var(--radius-control);
  background: rgba(20,23,28,.05); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.card:hover .icon-wrap { background: var(--color-brand); color: var(--color-ink); }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.js-disabled .reveal { opacity: 1; transform: none; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20, 23, 28, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px -16px rgba(0,0,0,.6); }

.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; padding-bottom: 16px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.brand__logo { height: 34px; width: auto; display: block; flex: none; }
.brand--sm .brand__logo { height: 28px; }
.brand__text { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--color-paper); letter-spacing: -0.02em; white-space: nowrap; }
.brand__suffix { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--color-brand); letter-spacing: -0.02em; white-space: nowrap; }
.brand--sm .brand__name, .brand--sm .brand__suffix { font-size: 19px; }
.brand__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand); display: inline-block; flex: none; }

/* The header brand lockup (logo + "VIATRANS") was wide
   enough on small phones to push the hamburger button off-screen —
   it was never behind the ribbon, it was clipped by overflow-x:hidden.
   Shrink it here, well before that happens. Since the "Rastrear envío"
   button was added to .header-actions, that group keeps its full width
   (flex: none) and the brand is the one that yields: below 430px the
   wordmark stacks ("VIATRANS" over "LTDA") beside the logo instead of
   running into the button, and the type steps down a little more. */
@media (max-width: 480px) {
  .brand { gap: 7px; }
  .brand__logo { height: 26px; }
  .brand__text { gap: 7px; }
  .brand__name, .brand__suffix { font-size: 16px; }
  .site-header__bar { gap: 8px; }
}
@media (max-width: 430px) {
  .brand__text { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; }
  .brand__dot { display: none; }
  .brand__name, .brand__suffix { font-size: 14px; }
}

.nav-links { display: none; align-items: center; gap: 22px; }
.nav-links a { font-size: 14px; font-weight: 500; color: #C9CCD1; transition: color var(--dur-fast) ease; }
.nav-links a:hover { color: var(--color-brand); }

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

.nav-toggle {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-control);
  border: 1px solid rgba(255,255,255,.18); color: var(--color-paper);
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }
/* Invisible 44x44 tap target — the visible 42px box stays the same size. */
.nav-toggle::after { content: ""; position: absolute; inset: -1px; }
.nav-toggle__icon { position: relative; width: 18px; height: 12px; }
.nav-toggle__icon span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease, top var(--dur-base) var(--ease-out);
}
.nav-toggle__icon span:nth-child(1) { top: 0; }
.nav-toggle__icon span:nth-child(2) { top: 5px; }
.nav-toggle__icon span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.mobile-menu {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  background: var(--color-ink); border-bottom: 1px solid rgba(255,255,255,.08);
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.mobile-menu.is-open { grid-template-rows: 1fr; }
.mobile-menu__inner { min-height: 0; }
.mobile-menu__list { display: flex; flex-direction: column; padding: 8px var(--container-pad) 20px; }
.mobile-menu__list a {
  padding: 14px 4px; font-size: 15px; font-weight: 500; color: #E4E6EA;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-menu__list a:hover { color: var(--color-brand); }
/* Header "Rastrear envío" — visible on every viewport; text scales down a
   little on phones so it sits comfortably next to the brand + hamburger. */
.header-track { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; font-size: 12px; }
@media (max-width: 1179px) {
  .header-track { padding: 9px 13px; font-size: 11.5px; }
}
@media (max-width: 460px) {
  .header-track { padding: 8px 11px; font-size: 11px; }
}
.header-track__input {
  width: 160px; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-control); padding: 9px 12px; color: var(--color-paper);
  font-family: var(--font-body); font-size: 13px;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.header-track__input::placeholder { color: var(--color-text-faint-dark); }
.header-track__input:focus { outline: none; border-color: var(--color-brand); background: rgba(255,255,255,.12); }

/* Raised from 860px: at 860-1179px, brand + full nav + tracking form
   don't fit in one row (measured ~950px of content vs ~800px available).
   Below 1180px we keep the hamburger + mobile menu, which already has
   room for everything and was verified to work at those widths. */
@media (min-width: 1180px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  color: var(--color-paper);
  background-color: var(--color-ink);
  /* This is also the fallback: it's what shows whenever .hero__bg-video
     stays empty (mobile, reduced motion, slow connections — see main.js),
     and it's what the video's own poster paints before the .mp4 has data. */
  background-image:
    linear-gradient(100deg, rgba(20,23,28,.95) 0%, rgba(20,23,28,.88) 40%, rgba(20,23,28,.62) 100%),
    url('../assets/fondo_bodega.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Sits behind everything, filling the section exactly like the CSS
   background it replaces once it has data to paint. */
.hero__bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Same dark gradient as .hero's own background-image, redrawn as a layer
   ABOVE the video so hero copy stays legible once it's playing. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(100deg, rgba(20,23,28,.95) 0%, rgba(20,23,28,.88) 40%, rgba(20,23,28,.62) 100%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(36px, 6vw, 64px);
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(56px, 9vw, 104px);
}
/* Mobile and reduced-motion both skip the video entirely (main.js never
   attaches a source), but this is a no-op safety net if that ever changes:
   the static image is the right call on narrow/motion-sensitive viewers
   either way, so never show the <video> element there. */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .hero__bg-video { display: none; }
}
.hero__content { flex: 1 1 420px; min-width: 280px; }
.hero__title {
  font-size: clamp(2.1rem, 3.4vw + 1rem, 3.6rem); font-weight: 800; line-height: 1.08;
  color: var(--color-paper); max-width: 640px; margin-top: 20px;
}
.hero__subtitle { margin-top: 20px; font-size: clamp(1rem, .4vw + .9rem, 1.15rem); line-height: 1.55; color: var(--color-text-muted-dark); max-width: 480px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero__badge {
  /* flex (not inline-flex) makes this a block-level box, so it always
     starts on its own line below the eyebrow — the eyebrow above is itself
     inline-flex, so an inline-flex badge would sit right next to it on wide
     screens instead of wrapping. width: fit-content keeps it pill-sized
     instead of stretching to the full block width. */
  display: flex; width: -webkit-fit-content; width: fit-content;
  align-items: center; gap: 7px;
  max-width: 100%; margin-top: 16px; padding: 7px 14px; border-radius: 999px;
  background: rgba(254,196,0,.12); border: 1px solid rgba(254,196,0,.35);
  color: var(--color-brand); font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
/* Guards against wrapping on the narrowest phones (≤340px) without ever
   truncating the text: the pill switches to two lines instead of overflowing,
   with the icon pinned to the top so it doesn't float oddly between lines. */
.hero__badge svg { flex: none; }
@media (max-width: 340px) {
  .hero__badge { align-items: flex-start; border-radius: 14px; padding: 8px 12px; gap: 6px; font-size: 12px; }
  .hero__badge svg { margin-top: 2px; }
}

.hero__visual {
  /* Matches video_entrada.mp4's native 720x1280 (9:16) so object-fit: cover
     never has to crop it — a mismatched ratio here cuts off the top/bottom. */
  position: relative; flex: 1 1 320px; min-width: 260px; max-width: 400px;
  aspect-ratio: 9 / 16; border-radius: var(--radius-panel); overflow: hidden;
  background: linear-gradient(155deg, var(--color-ink-2) 0%, var(--color-ink) 60%, #0D0F12 100%);
}
.hero__visual-inner { position: absolute; inset: 0; transition: transform .7s var(--ease-out); }
.hero__visual:hover .hero__visual-inner { transform: scale(1.05); }
/* Sits on top of the gradient/speed-line graphic above — that graphic
   stays as the fallback if the video is slow to load or fails. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.hero__visual:hover .hero__video { transform: scale(1.05); }
.speed-line { position: absolute; left: -30%; width: 120%; transform: rotate(-16deg); }
.speed-line--1 { top: -8%; height: 16%; background: linear-gradient(90deg, transparent, var(--color-brand) 45%, transparent); }
.speed-line--2 { top: 24%; height: 9%; background: linear-gradient(90deg, transparent, rgba(254,196,0,.55) 45%, transparent); }
.speed-line--3 { top: 48%; height: 5%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 45%, transparent); }
.speed-line--4 { top: 64%; height: 13%; background: linear-gradient(90deg, transparent, rgba(254,196,0,.35) 45%, transparent); }
.speed-line--5 { top: 85%; height: 6%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15) 45%, transparent); }
.glow-spot { position: absolute; right: -18%; bottom: -18%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(254,196,0,.2), transparent 70%); }
.glow-spot--left { left: -10%; right: auto; }

/* Operación section — smaller variant graphic (visual variety vs. hero) */
.speed-line--op-1 { top: 10%; height: 12%; background: linear-gradient(90deg, transparent, var(--color-brand) 45%, transparent); }
.speed-line--op-2 { top: 40%; height: 8%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 45%, transparent); }
.speed-line--op-3 { top: 66%; height: 15%; background: linear-gradient(90deg, transparent, rgba(254,196,0,.32) 45%, transparent); }

/* =========================================================
   CARD GRIDS (services / benefits)
   ========================================================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
.card {
  background: #FFFFFF; border: 1px solid var(--color-line-light); border-radius: var(--radius-card); padding: 28px 24px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(20,23,28,.22); border-color: rgba(254,196,0,.5); }
.card__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.card__text { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }

/* Mobile: stacked icon-on-top cards took ~180px each — 8 services +
   4+4 more meant a very long scroll. A compact icon-left row reads
   just as clearly and takes about half the height per card. */
@media (max-width: 640px) {
  .card-grid { gap: 10px; margin-top: 28px; }
  .card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
  .card .icon-wrap { width: 36px; height: 36px; margin-bottom: 0; }
  .card .icon-wrap svg { width: 18px; height: 18px; }
  .card__title { font-size: 15px; margin-bottom: 3px; }
  .card__text { font-size: 13px; }
  /* Deliberately NOT setting min-width:0 on the title/text here. They
     are flex items in this row layout, so zeroing it lets flex-shrink
     pull them below their longest word — which breaks titles
     mid-word ("Naciona/l") in the normal case. Their min-width:auto
     floor is what keeps each card's row intact; the grid track above
     is sized to respect it rather than fight it. */
}

/* =========================================================
   STATS — two dominant numbers + a short capability list.
   Kept visually distinct on purpose: real counts get the big
   typographic treatment, qualitative claims (flota propia,
   cobertura) don't pretend to be numbers.
   ========================================================= */
.stats-hero { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 72px); align-items: stretch; margin-top: clamp(32px, 5vw, 52px); }

.stats-hero__numbers { flex: 1 1 380px; display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 72px); }
.stat-big__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6.5vw, 5.25rem); color: var(--color-brand); line-height: 1; }
.stat-big__label { font-size: 15px; color: var(--color-text-muted-dark); margin-top: 12px; }

.stats-hero__features {
  flex: 1 1 260px; display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--color-line-dark); padding-top: clamp(24px, 4vw, 32px);
}
@media (min-width: 700px) {
  .stats-hero__features { border-top: none; border-left: 1px solid var(--color-line-dark); padding-top: 0; padding-left: clamp(28px, 4vw, 44px); }
}
.stat-feature { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--color-line-dark); }
.stat-feature:last-child { border-bottom: 1px solid var(--color-line-dark); }
.stat-feature__icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: rgba(254,196,0,.12); color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
}
.stat-feature__text { font-size: 14.5px; font-weight: 500; color: #E4E6EA; }

/* =========================================================
   OPERATION (split composition)
   ========================================================= */
.split { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 72px); align-items: center; }
/* Cobertura's 4-card grid is shorter than the map panel — align both
   to the same top edge instead of centering (which floated the map
   above the cards). */
#cobertura .split { align-items: flex-start; }
/* Once the split wraps, the map panel sits directly on top of the
   "Cobertura" heading and the shared flex gap alone read as too
   tight under a block that visually heavy. row-gap is the precise
   lever: it only applies BETWEEN wrapped lines, so it adds the
   breathing room in the stacked layout and stays inert in the
   side-by-side desktop one — no breakpoint needed, and it can't
   drift out of sync the way a hand-picked media query would. */
#cobertura .split { row-gap: calc(clamp(40px, 6vw, 72px) + 20px); }
/* There is deliberately no wrap-reverse modifier here. Cobertura and
   Ubicación both used one, whose only real effect was to flip the
   stacked order so the graphic sat ABOVE its heading on phones. Both
   sections now stack in source order — heading and copy first, then
   the map/graphic — which is also the order screen readers announce,
   so the visual and accessibility orders finally agree. On desktop it
   changed nothing either way: .split centres its items, so reversing
   a single-line cross axis was a no-op, and Cobertura is an explicitly
   placed grid at that width. */
.split__media {
  position: relative; flex: 1 1 380px; min-width: 280px; aspect-ratio: 4 / 3;
  border-radius: var(--radius-panel); overflow: hidden;
  background: linear-gradient(160deg, var(--color-ink-2) 0%, var(--color-ink) 65%, #0D0F12 100%);
}
.split__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.split__media--square {
  aspect-ratio: 1 / 1; background-color: var(--color-ink);
  background-image: url('../assets/co-dotted.svg'), radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  /* `contain`, not a percentage. co-dotted.svg is square (viewBox
     0 0 1000 1000), so ANY single-axis percentage crops it as soon as
     the panel stops being square: a width-based 95% overflows
     vertically on a landscape panel (which already crops it on phones,
     where the panel is 4/3.4), and a height-based one overflows
     horizontally on a portrait panel (which the desktop panel becomes
     at ~900px, where the card block is tall). `contain` fits by
     whichever side is smaller, so the outline stays whole at every
     ratio — and it is the same rule the route-map SVG above it
     follows via preserveAspectRatio's default "meet", which keeps the
     two graphics locked in scale with each other. */
  background-size: contain, 20px 20px;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
}
/* cargando_camion.webp is a tall 880x1187 (~3:4) photo — the default
   .split__media is a landscape 4:3, which would crop away most of the
   subject. Doubled-up selector (.split__media.split__media--portrait)
   beats the max-width:639px override below it in the cascade on
   specificity alone, so this ratio holds on mobile too. Capped
   max-width (echoing .hero__visual's own 400px cap on its 9:16 panel)
   keeps a 3:4 panel from growing implausibly tall on a wide viewport. */
.split__media.split__media--portrait { aspect-ratio: 3 / 4; flex: 0 1 380px; max-width: 420px; margin-inline: auto; }
.split__content { flex: 1 1 380px; min-width: 280px; }

.steps { margin-top: clamp(28px, 4vw, 40px); }
.step { display: flex; align-items: flex-start; gap: 20px; padding: 18px 0; border-top: 1px solid var(--color-line-light); }
.step:last-child { border-bottom: 1px solid var(--color-line-light); }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: rgba(20,23,28,.18); min-width: 40px; }
.step__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.step__text { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; }

/* =========================================================
   COVERAGE
   ========================================================= */
.cobertura-content { flex: 1.3 1 420px; }
/* Fixed 2 columns (not auto-fit) so the 5th card sits alone in its
   row instead of stretching to fill it. */
.cobertura-grid { grid-template-columns: 1fr; margin-top: 28px; }
/* Two columns from 600px, not 480px. Below 640px the cards switch to
   the compact "icon | title | text" row, which puts three flex items
   side by side and gives the card a min-content width of ~242px. Two
   of those plus the 10px gap need ~494px of track, but a 480px
   viewport only offers ~432px inside the container padding — and
   `1fr` is shorthand for minmax(auto, 1fr), whose `auto` floor
   refuses to shrink past min-content. So the tracks stayed 242px and
   the GRID overflowed its container instead of the cards getting
   narrower: visibly broken from 480px right up to 557px.
   body{overflow-x:hidden} then swallowed the resulting scrollbar,
   which is why this never registered as document-level overflow.

   600px also lines this grid up with the rest of the page, where
   .card-grid's auto-fit minmax(260px, 1fr) reaches two columns at
   about the same width. minmax(0, 1fr) drops the min-content floor
   as a second line of defence, so if the copy ever grows the tracks
   shrink and the text rewraps rather than bursting the container. */
@media (min-width: 600px) {
  .cobertura-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cobertura-media { flex: 1 1 280px; max-width: 340px; }
.route-map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Desktop: map panel sized to the CARD BLOCK, not to the whole column.
   The panel used to be a fixed 340px square capped by max-width, which
   read as small next to the cards, and lined up with their bottom
   edge while starting 37px below their top (the section used to carry
   a wrap-reverse modifier, which flips the cross axis and quietly
   turned align-items:flex-start into bottom alignment).

   The cards are nested inside .cobertura-content, so a flex sibling
   can never track them: it can only match the full column, heading
   included. display:contents dissolves that wrapper's box so its
   children join this grid directly, letting the card block and the
   map share row 4 — which is what pins the panel to the cards' exact
   top and bottom. Nothing in the HTML changes, and the wrapper is a
   plain div with no role, so it leaves the a11y tree untouched.

   The panel drops max-width and aspect-ratio here and stretches to
   the row instead, so its height IS the cards' height and its width
   is the column's full share (~450px at 1440px, up from 340px).
   Below this breakpoint the split stays flex and stacks exactly as
   before. */
/* Below the grid breakpoint, force the split to stack. Left to itself
   flex wraps on its own flex-basis arithmetic, which happens around
   ~820px — leaving a dead zone (roughly 820-899px) where the columns
   sat side by side under the OLD sizing and then jumped as the grid
   took over. Pinning both items to a full-width basis makes one
   breakpoint the single source of truth for "side by side". */
@media (max-width: 899px) {
  #cobertura .cobertura-content,
  #cobertura .cobertura-media { flex-basis: 100%; }
  /* The panel keeps its 340px cap while its flex line is full-width,
     so on a wide tablet it would sit flush left with a few hundred
     pixels of dead space beside it (.split leaves justify-content at
     its flex-start default). Auto inline margins centre the item
     itself — rather than justify-content on the container, which
     would also act on the full-width copy column. Below ~380px the
     cap stops binding, the margins resolve to 0, and nothing moves. */
  #cobertura .cobertura-media { margin-inline: auto; }
}

@media (min-width: 900px) {
  #cobertura .split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(40px, 6vw, 72px);
    /* Overrides the stacked-layout row-gap above: as grid rows these
       are the heading lines, which must not be pushed apart. */
    row-gap: 0;
    align-items: start;
  }
  #cobertura .cobertura-content { display: contents; }
  #cobertura .cobertura-content > .eyebrow { grid-area: 1 / 1; justify-self: start; }
  #cobertura .cobertura-content > .section-title { grid-area: 2 / 1; }
  #cobertura .cobertura-content > .section-lede { grid-area: 3 / 1; }
  #cobertura .cobertura-grid { grid-area: 4 / 1; }
  #cobertura .cobertura-media {
    grid-area: 4 / 2;
    align-self: stretch;
    /* Matches .cobertura-grid's own margin-top so both items start on
       the same line within the shared row. */
    margin-top: 28px;
    max-width: none;
    aspect-ratio: auto;
  }
}

/* =========================================================
   UBICACIÓN (mapa)
   ========================================================= */
/* A visible diagonal gradient (brand → brand-deep) replaces the flat
   solid yellow from .section--brand, a dotted texture breaks up the
   field further, and a set of concentric "location ping" rings
   bottom-right gives the section its own distinct motif — different
   from every blob/arc used elsewhere on the page, tying the visual
   language to the section's actual subject (a pinned location). */
.location-section {
  position: relative; overflow: hidden;
  /* ::before is the dotted texture over the whole field, ::after
     the ping rings bottom-right — so the stack lights the top-left
     and lays a route arc through the middle. */
  background-image:
    radial-gradient(ellipse 28% 62% at 2% 6%, rgba(255,255,255,.20), transparent 70%),
    radial-gradient(ellipse 30% 56% at 96% 96%, rgba(20,23,28,.07), transparent 70%),
    radial-gradient(ellipse 44% 140% at 24% 50%, transparent 66%, rgba(255,255,255,.16) 67%, transparent 69%),
    linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
}
.location-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(20,23,28,.18) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000 0%, transparent 75%);
}
.location-section::after {
  content: ""; position: absolute; bottom: -22%; right: -12%;
  width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, transparent 45%, rgba(20,23,28,.18) 46%, transparent 48%),
    radial-gradient(circle, transparent 61%, rgba(20,23,28,.13) 62%, transparent 64%),
    radial-gradient(circle, transparent 77%, rgba(20,23,28,.08) 78%, transparent 80%);
}
.location-section > .container { position: relative; z-index: 1; }

/* Default .eyebrow color (dark gold) is tuned for contrast on the
   paper backgrounds, not the solid brand yellow here — swap it for
   ink, same as the title/lede below. */
.location-section .eyebrow { color: var(--color-ink); }
.location-section .eyebrow::before { background: var(--color-ink); }
.location-lede { margin-top: 12px; font-size: 15px; line-height: 1.6; color: rgba(20,23,28,.72); max-width: 480px; }

/* Reuses .split__media's flex sizing / aspect-ratio / rounded corners
   (content is first in source and the media second, so the map lands
   on the right of the desktop row and below the copy once the split
   stacks) — just swaps its dark decorative gradient for a real
   embedded map's framing. */
.map-embed {
  background: #FFFFFF; border: 1px solid rgba(20,23,28,.12);
  box-shadow: 0 22px 44px -26px rgba(20,23,28,.35);
}
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Desktop: give the embed a larger share of the row than the text
   column (it was an even ~50/50 split, which left the map reading
   small for the section whose whole point is the map). Only the flex
   ratio changes — the 4/3 aspect and every stacked breakpoint below
   are untouched, so this cannot affect the mobile layout. */
@media (min-width: 900px) {
  .location-section .map-embed { flex: 1.25 1 460px; }
}

/* Dirección textual dentro de la columna de contenido de Ubicación.
   Colores heredados de la sección (ink sobre el amarillo de marca). */
.location-address {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.location-address li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; color: var(--color-ink);
}
.location-address svg { flex: none; color: var(--color-ink); }

/* Formas de pago — mismo bloque/sección que Ubicación, ubicada debajo
   del split. Separada con una línea sobre el fondo de marca. En móvil
   cae naturalmente debajo de la ubicación porque es un bloque en flujo. */
.payments {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid rgba(20, 23, 28, .18);
}
.payments__head { margin: 0 0 clamp(20px, 3vw, 30px); }
.payments__title {
  font-size: clamp(1.2rem, .7vw + 1.05rem, 1.5rem);
  font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}
/* Cuadrícula predecible: 2 col en móvil, 3 col (3x2) en tablet/portátil
   y una sola fila de 6 en pantallas anchas. Evita filas huérfanas de una
   sola tarjeta que deja el auto-fit al haber 6 métodos. */
.payments__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
  .payments__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1140px) {
  .payments__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Cada método de pago tiene su propio color de marca (--accent). Se usa
   en el borde superior, el aro del ícono, el resplandor al pasar el mouse
   y —de forma sutil— como velo de color detrás del contenido. Así cada
   tarjeta se identifica de un vistazo manteniendo la coherencia del set.
   --accent-2 es un color secundario opcional (por defecto = --accent);
   solo Bre-B lo usa para reproducir su degradado azul → verde. */
.payment-card--bank      { --accent: #1D4ED8; }
.payment-card--nequi     { --accent: #7C3AED; }
.payment-card--breb      { --accent: #1B4DE0; --accent-2: #10C9A6; }
.payment-card--daviplata { --accent: #E4002B; }
.payment-card--cash      { --accent: #15803D; }
.payment-card--cards     { --accent: #0E7490; }

.payment-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
  padding: 26px 16px 22px;
  /* Velo de color muy diluido: el blanco domina (>=88%) para no restar
     legibilidad; el tinte arranca arriba a la izquierda (--accent) y se
     desvanece hacia --accent-2 en el resto de la tarjeta (glass suave). */
  background:
    radial-gradient(130% 105% at 12% 0%,
      color-mix(in srgb, var(--accent) 15%, #FFFFFF) 0%,
      color-mix(in srgb, var(--accent-2, var(--accent)) 7%, #FFFFFF) 45%,
      color-mix(in srgb, var(--accent-2, var(--accent)) 3%, #FFFFFF) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(20, 23, 28, .10));
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow:
    0 14px 30px -22px color-mix(in srgb, var(--accent) 35%, rgba(20, 23, 28, .45)),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.payment-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb, var(--accent-2, var(--accent)) 60%, #FFFFFF));
  z-index: 2;
}
/* Halo de color difuminado en la esquina opuesta: aporta profundidad
   tipo glassmorphism sin oscurecer el área del texto. */
.payment-card::after {
  content: ""; position: absolute; right: -30%; bottom: -40%;
  width: 75%; height: 75%; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent-2, var(--accent)) 22%, transparent) 0%,
    transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.payment-card__icon,
.payment-card__label { position: relative; z-index: 1; }
.payment-card:hover,
.payment-card:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow:
    0 20px 36px -18px color-mix(in srgb, var(--accent) 45%, rgba(20,23,28,.4)),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  background:
    radial-gradient(130% 105% at 12% 0%,
      color-mix(in srgb, var(--accent) 20%, #FFFFFF) 0%,
      color-mix(in srgb, var(--accent-2, var(--accent)) 9%, #FFFFFF) 45%,
      color-mix(in srgb, var(--accent-2, var(--accent)) 4%, #FFFFFF) 100%);
}
.payment-card:hover .payment-card__icon,
.payment-card:focus-within .payment-card__icon {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Chip blanco de tamaño fijo: unifica logos de distinta proporción y
   evita cualquier deformación con object-fit: contain. */
.payment-card__icon {
  flex: none; width: 76px; height: 76px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid color-mix(in srgb, var(--accent) 18%, rgba(20, 23, 28, .12));
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 30%, rgba(20, 23, 28, .35));
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.payment-card__icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
}
.payment-card__label {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--color-ink);
  /* Reserva 2 renglones para que las filas queden parejas tanto si el
     nombre ocupa una línea ("Nequi") como dos ("Tarjetas débito y crédito"). */
  min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 560px) {
  .payment-card { padding: 22px 12px 18px; }
}
@media (max-width: 380px) {
  .payments__grid { grid-template-columns: 1fr; }
  .payment-card { flex-direction: row; text-align: left; gap: 16px; padding: 16px 18px; }
  .payment-card__icon { width: 56px; height: 56px; border-radius: 12px; }
  .payment-card::before { width: 4px; height: 100%; right: auto; }
  /* En fila el nombre va junto al ícono, sin reservar dos renglones. */
  .payment-card__label { min-height: 0; display: block; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--color-ink); color: var(--color-paper); }
.footer-top {
  display: flex; flex-wrap: wrap; gap: 40px;
  padding-top: clamp(48px, 7vw, 72px); padding-bottom: 40px;
  border-bottom: 1px solid var(--color-line-dark);
}
.footer-col--brand { flex: 1 1 260px; min-width: 220px; }
.footer-col { flex: 1 1 160px; min-width: 150px; }
.footer-col__title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint-dark); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
/* :not(.btn) so this generic link color doesn't fight the WhatsApp
   button's own .btn-primary color (dark text on its yellow background). */
.footer-links a:not(.btn), .footer-links span { font-size: 14px; color: #C9CCD1; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 9px; }
.footer-contact-link svg { flex: none; color: var(--color-text-faint-dark); }
/* Address wraps to two lines — align the pin icon to the first line
   instead of centering it across both. */
.footer-contact-link--address { align-items: flex-start; }
.footer-contact-link--address svg { margin-top: 3px; }
.footer-tagline { font-size: 13.5px; color: var(--color-text-faint-dark); line-height: 1.5; max-width: 260px; margin-top: 14px; }

/* La fila envuelve sola: con 7 iconos se acomoda en 1 o 2 líneas según
   el ancho disponible sin desbordar el pie de página. */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.social-link {
  position: relative;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; color: #C9CCD1;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
/* Invisible 44x44 tap target — the visible 38px box stays the same size. */
.social-link::after { content: ""; position: absolute; inset: -3px; }
.social-link svg { flex: none; }
.social-link:hover { background: var(--color-brand); color: var(--color-ink); border-color: var(--color-brand); transform: translateY(-2px); }
.social-link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.social-link[aria-disabled="true"] { cursor: not-allowed; }

/* Móvil estrecho: iconos algo más compactos para que las 7 redes
   quepan en dos filas limpias. */
@media (max-width: 400px) {
  .social-row { gap: 8px; }
  .social-link { width: 34px; height: 34px; border-radius: 9px; }
}

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: clamp(24px, 4vw, 32px); }
.footer-bottom small { font-size: 12.5px; color: var(--color-text-faint-dark); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal span { font-size: 12.5px; color: var(--color-text-faint-dark); }
.footer-legal a { color: var(--color-text-faint-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   FLOATING WHATSAPP BUTTON
   ========================================================= */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #FFFFFF;
  border-radius: 999px; padding: 14px 20px 14px 14px;
  box-shadow: 0 12px 28px -10px rgba(20,23,28,.45);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
  animation: wa-breathe 3.2s ease-in-out infinite;
}
.whatsapp-float:hover { transform: translateY(-3px); background: #1FBE5C; box-shadow: 0 16px 32px -8px rgba(37,211,102,.55); color: #FFFFFF; }
.whatsapp-float__icon {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.whatsapp-float__label { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.whatsapp-float__label--short { display: none; }
.whatsapp-float[aria-disabled="true"] { cursor: not-allowed; }

@keyframes wa-breathe {
  0%, 100% { box-shadow: 0 12px 28px -10px rgba(20,23,28,.45), 0 0 0 0 rgba(37,211,102,.45); }
  50% { box-shadow: 0 12px 28px -10px rgba(20,23,28,.45), 0 0 0 10px rgba(37,211,102,0); }
}

@media (max-width: 640px) {
  .whatsapp-float { right: 14px; bottom: 14px; padding: 11px 16px 11px 11px; gap: 8px; }
  .whatsapp-float__icon { width: 26px; height: 26px; }
  .whatsapp-float__icon svg { width: 20px; height: 20px; }
  .whatsapp-float__label { font-size: 12.5px; }
}
@media (max-width: 360px) {
  .whatsapp-float__label--full { display: none; }
  .whatsapp-float__label--short { display: inline; }
}

/* =========================================================
   AMBIENT SECTION BACKGROUNDS
   Every section from Servicios down gets a deliberately bold,
   clearly-visible background composition — big gradient blobs,
   organic shapes, ring outlines and hairline textures that read
   as designed, not as a faint hint of color. Each section uses a
   different shape language / color mix so the page feels like a
   sequence of composed moments while scrolling, not one effect
   copy-pasted down the page.

   Technique: two pseudo-elements per section (::before / ::after),
   each sized in %, so every shape scales with the section instead
   of the viewport — same responsive behaviour at any breakpoint,
   no media queries needed. Plain gradients only (no blur/
   backdrop-filter) — cheap to paint, no JS/reflow. The section
   keeps position:relative + overflow:hidden so every shape is
   clipped to its own box: shapes sit right at the edges (negative
   top/left/right/bottom offsets) so they read as continuing past
   the section, without ever causing horizontal scroll or spilling
   onto a neighboring section's content. Giving the section's
   direct .container position:relative + z-index:1 guarantees real
   content always paints above the decoration, regardless of
   ::before/::after tree order.
   ========================================================= */

/* ---- Desktop layer stacks ----
   Same idea as the phone tier further down (a stack of gradient
   layers on the section's own background-image, so the field stays
   alive across the whole section instead of only at two corners),
   but composed for the opposite proportions: a desktop section is
   WIDE and short, so the layers spread along the X axis — left
   halo, centre sweep, right depth — where the phone spreads them
   down the Y axis.

   Every layer is a full-box gradient that places its own shape via
   `at X% Y%`, including the ring/arc shapes (an `ellipse W% H%`
   ring reads as a long curve crossing the section). Keeping every
   layer full-box means no background-size/background-position
   lists are needed anywhere — which matters because those lists
   repeat cyclically when a media query swaps in a different number
   of image layers, and would silently misplace the phone stacks.
   The closing linear-gradient tints each section's top and bottom
   edge so neighbouring sections bleed into one another.

   Two calibration rules matter here, and getting either wrong
   turns the page muddy rather than composed:

   1. A desktop section is wide and SHORT, so a given percentage
      covers far more of it than the same percentage does on a
      tall phone section. Desktop alphas therefore run roughly
      half the mobile ones (≤.16 on paper, ≤.13 on dark) — enough
      to read clearly, while leaving clean paper breathing between
      the shapes instead of one continuous yellow field.
   2. Each stack is placed to COMPLEMENT that section's two
      pseudo-element shapes, never to overlap them: where
      ::before/::after already hold two corners, the layers take
      the opposite corners and the centre. Stacking a wash on top
      of an existing blob just saturates that one corner and
      leaves the rest flat — the exact problem this is fixing. */

/* Servicios — the page's first "worked" background: a big two-tone
   blob top-right (gradient clearly visible, not a token hint) and
   an organic, ring-bordered shape bottom-left with a fine diagonal
   hairline texture inside it. 8 cards fill most of the middle, so
   the pseudo-element shapes live in the padding that brackets
   them, while the layer stack carries the area behind/around. */
#servicios {
  position: relative; overflow: hidden;
  /* ::before holds top-right, ::after bottom-left — so the stack
     takes top-left, bottom-right and a centre arc. */
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse 22% 44% at 1% 10%, rgba(254,196,0,.15), transparent 68%),
    radial-gradient(ellipse 26% 48% at 99% 92%, rgba(224,168,0,.12), transparent 70%),
    radial-gradient(ellipse 46% 130% at 26% 50%, transparent 63%, rgba(254,196,0,.15) 64%, transparent 66%),
    linear-gradient(180deg, rgba(254,196,0,.05) 0%, transparent 22%, rgba(20,23,28,.022) 62%, rgba(254,196,0,.055) 100%);
}
#servicios::before {
  content: ""; position: absolute; top: -24%; right: -16%;
  width: 66%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 30%, rgba(254,196,0,.46), transparent 60%),
    radial-gradient(circle at 72% 70%, rgba(224,168,0,.24), transparent 62%);
}
#servicios::after {
  content: ""; position: absolute; bottom: -24%; left: -15%;
  width: 48%; aspect-ratio: 1; pointer-events: none;
  border-radius: 42% 58% 68% 32% / 45% 40% 60% 55%;
  background:
    radial-gradient(circle at 35% 35%, rgba(20,23,28,.11), transparent 72%),
    repeating-linear-gradient(124deg, rgba(254,196,0,.14) 0 2px, transparent 2px 18px);
  border: 1.5px solid rgba(254,196,0,.32);
}
#servicios > .container { position: relative; z-index: 1; }

/* Cifras — two warm glows anchor opposite corners of the dark
   field (the same light language as the hero's .glow-spot directly
   above), plus a large thin ring bottom-left for geometric
   structure — a nod to the dashed .route-map further down. */
.cifras-section {
  position: relative; overflow: hidden;
  /* ::before holds top-right, ::after bottom-left. */
  background-color: var(--color-ink);
  background-image:
    radial-gradient(ellipse 24% 56% at 2% 12%, rgba(254,196,0,.10), transparent 68%),
    radial-gradient(ellipse 28% 52% at 98% 94%, rgba(224,168,0,.09), transparent 70%),
    radial-gradient(ellipse 40% 150% at 66% 50%, transparent 66%, rgba(254,196,0,.11) 67%, transparent 69%),
    linear-gradient(180deg, rgba(254,196,0,.05) 0%, transparent 24%, transparent 74%, rgba(254,196,0,.04) 100%);
}
.cifras-section::before {
  content: ""; position: absolute; top: -38%; right: -10%;
  width: 52%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(254,196,0,.30), transparent 68%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px);
}
.cifras-section::after {
  content: ""; position: absolute; bottom: -46%; left: -14%;
  width: 42%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 63%, rgba(254,196,0,.16) 64%, transparent 66%);
}
.cifras-section > .container { position: relative; z-index: 1; }

/* Por qué VIATRANS — an organic ring-bordered blob (irregular
   border-radius, for variety against Servicios' circles) bottom-
   left, plus a dot-grid-textured glow top-right for a second,
   clearly different layer. */
#nosotros {
  position: relative; overflow: hidden;
  /* ::before holds bottom-left and ::after top-right; a top-LEFT
     wash here would merge with ::before into one heavy left band,
     so the stack lights the title band across the centre instead
     and keeps the bottom-right corner light. */
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse 30% 40% at 42% 0%, rgba(254,196,0,.11), transparent 70%),
    radial-gradient(ellipse 24% 44% at 99% 96%, rgba(224,168,0,.10), transparent 70%),
    radial-gradient(ellipse 50% 135% at 74% 50%, transparent 64%, rgba(254,196,0,.13) 65%, transparent 67%),
    linear-gradient(180deg, rgba(254,196,0,.045) 0%, transparent 24%, rgba(20,23,28,.02) 62%, rgba(254,196,0,.05) 100%);
}
/* Lighter here than its counterparts in the other sections on
   purpose: anchored bottom-left against the tall image panel beside
   it, a blob at full strength would rise across most of the left
   edge and read as a heavy yellow band rather than a shape. The
   phone tier restores the fuller strength, once the panel has
   stacked above this content instead of sitting beside it. */
#nosotros::before {
  content: ""; position: absolute; bottom: -22%; left: -14%;
  width: 40%; aspect-ratio: 1; pointer-events: none;
  border-radius: 42% 58% 68% 32% / 45% 40% 60% 55%;
  background: radial-gradient(circle at 35% 35%, rgba(254,196,0,.19), transparent 72%);
  border: 1.5px solid rgba(254,196,0,.16);
}
#nosotros::after {
  content: ""; position: absolute; top: -20%; right: -12%;
  width: 40%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 60% 40%, rgba(224,168,0,.22), transparent 68%),
    radial-gradient(rgba(20,23,28,.10) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 18px 18px;
}
#nosotros > .container { position: relative; z-index: 1; }

/* Cómo trabajamos — a thick arc (a ring gradient, only its edge
   visible) curving in from the right, echoing a route line behind
   the step-by-step process, plus a small filled blob + short
   diagonal accents top-left for balance. */
.operacion-section {
  position: relative; overflow: hidden;
  /* ::before holds the right-centre arc, ::after top-left — so the
     stack takes bottom-left, the right edge low, and a soft
     centre band. */
  background-color: var(--color-paper-2);
  background-image:
    radial-gradient(ellipse 24% 48% at 2% 92%, rgba(254,196,0,.14), transparent 70%),
    radial-gradient(ellipse 26% 44% at 99% 16%, rgba(224,168,0,.11), transparent 70%),
    radial-gradient(ellipse 40% 40% at 52% 104%, rgba(254,196,0,.12), transparent 70%),
    linear-gradient(180deg, rgba(254,196,0,.05) 0%, transparent 24%, rgba(20,23,28,.022) 62%, rgba(254,196,0,.055) 100%);
}
.operacion-section::before {
  content: ""; position: absolute; top: 50%; right: -22%;
  width: 60%; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 58%, rgba(254,196,0,.30) 60%, rgba(254,196,0,.30) 64%, transparent 66%);
}
.operacion-section::after {
  content: ""; position: absolute; top: -18%; left: -10%;
  width: 34%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 40% 40%, rgba(20,23,28,.10), transparent 70%),
    repeating-linear-gradient(64deg, rgba(20,23,28,.06) 0 1.5px, transparent 1.5px 20px);
}
.operacion-section > .container { position: relative; z-index: 1; }

/* Cobertura — the section's subject (reach across a territory) gets
   an explicit motif rather than the generic corner blobs used
   before: concentric "coverage radar" rings radiating from the left
   edge, a dotted territory patch bottom-right, and a dashed route
   arc sweeping between them — the same dashed language as the
   .route-map SVG in the panel, scaled up to section size.

   The washes live on the section's own background-image (four
   stacked gradient layers) instead of on the two pseudo-elements,
   which frees ::before/::after for the crisp ring/texture shapes.
   Layers positioned with `at X% Y%` are placed INSIDE the box, so
   unlike negatively-offset pseudo-elements they can never be pushed
   out of view no matter how tall the section grows. */
#cobertura {
  position: relative; overflow: hidden;
  background-color: var(--color-paper);
  background-image:
    /* Route nodes — a scatter of waypoints reading as a network
       across the section. Placed in the bands that stay open on
       desktop (above the title, below the cards, and the margins
       outside the container) so they are never buried behind the
       opaque cards or the map panel. */
    radial-gradient(circle 5px at 7% 13%, rgba(224,168,0,.50), transparent 100%),
    radial-gradient(circle 7px at 26% 7%, rgba(254,196,0,.55), transparent 100%),
    radial-gradient(circle 4px at 45% 14%, rgba(224,168,0,.42), transparent 100%),
    radial-gradient(circle 6px at 67% 6%, rgba(254,196,0,.48), transparent 100%),
    radial-gradient(circle 5px at 95% 16%, rgba(224,168,0,.45), transparent 100%),
    radial-gradient(circle 6px at 12% 94%, rgba(254,196,0,.45), transparent 100%),
    radial-gradient(circle 4px at 38% 97%, rgba(224,168,0,.40), transparent 100%),
    radial-gradient(circle 6px at 72% 93%, rgba(254,196,0,.42), transparent 100%),
    radial-gradient(circle 5px at 94% 88%, rgba(224,168,0,.42), transparent 100%),
    /* Connecting arcs — wide, flat ring gradients whose visible
       edge reads as a route curving across the full width. */
    radial-gradient(ellipse 58% 150% at 30% 46%, transparent 65%, rgba(254,196,0,.17) 66%, transparent 68%),
    radial-gradient(ellipse 46% 130% at 88% 56%, transparent 67%, rgba(224,168,0,.15) 68%, transparent 70%),
    /* Washes spread along the X axis — ::before holds the left
       centre (radar) and ::after the bottom-right (territory),
       so these take the top band and the bottom-left. */
    radial-gradient(ellipse 30% 46% at 50% 1%, rgba(254,196,0,.15), transparent 70%),
    radial-gradient(ellipse 26% 46% at 99% 8%, rgba(224,168,0,.13), transparent 70%),
    radial-gradient(ellipse 34% 42% at 6% 104%, rgba(254,196,0,.14), transparent 70%),
    linear-gradient(168deg, rgba(254,196,0,.06) 0%, transparent 30%, rgba(20,23,28,.03) 64%, rgba(254,196,0,.07) 100%);
}
/* Coverage radar: three concentric rings + a soft core, anchored to
   the left edge and vertically centred so it reads across the whole
   section height rather than sitting in one corner. */
#cobertura::before {
  content: ""; position: absolute; top: 50%; left: -20%;
  width: 60%; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(254,196,0,.17), transparent 54%),
    radial-gradient(circle, transparent 37%, rgba(254,196,0,.34) 38%, transparent 40%),
    radial-gradient(circle, transparent 55%, rgba(254,196,0,.26) 56%, transparent 58%),
    radial-gradient(circle, transparent 73%, rgba(224,168,0,.20) 74%, transparent 76%);
}
/* Territory patch: a dot grid (echoing co-dotted.svg in the panel)
   faded out at its edges by a mask, ringed by a dashed route circle. */
#cobertura::after {
  content: ""; position: absolute; bottom: -18%; right: -12%;
  width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(224,168,0,.20), transparent 64%),
    radial-gradient(rgba(20,23,28,.15) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 20px 20px;
  border: 1.5px dashed rgba(224,168,0,.34);
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 82%);
  mask-image: radial-gradient(circle, #000 58%, transparent 82%);
}
#cobertura > .container { position: relative; z-index: 1; }

/* Footer — the page's closing field gets the boldest treatment: a
   large two-tone glow spilling down from Ubicación above, a thin
   ring anchored bottom-right, a faint dot-grid wash tying it back
   to the map/route motif, and a hairline brand-tinted seam marking
   where the footer begins. */
.site-footer {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(254,196,0,.35);
  /* ::before is the big glow spilling in from Ubicación above,
     ::after the ring bottom-right — so the stack takes the two
     left corners and threads an arc through the right half. */
  background-color: var(--color-ink);
  background-image:
    radial-gradient(ellipse 26% 64% at 1% 10%, rgba(254,196,0,.11), transparent 68%),
    radial-gradient(ellipse 30% 54% at 4% 98%, rgba(224,168,0,.09), transparent 70%),
    radial-gradient(ellipse 46% 145% at 76% 48%, transparent 67%, rgba(254,196,0,.11) 68%, transparent 70%),
    linear-gradient(180deg, rgba(254,196,0,.07) 0%, transparent 26%, transparent 78%, rgba(254,196,0,.04) 100%);
}
.site-footer::before {
  content: ""; position: absolute; top: -62%; left: 50%;
  width: 74%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 40% 55%, rgba(254,196,0,.20), transparent 62%),
    radial-gradient(circle at 65% 40%, rgba(224,168,0,.12), transparent 66%),
    radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
}
.site-footer::after {
  content: ""; position: absolute; bottom: -30%; right: -14%;
  width: 38%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 62%, rgba(254,196,0,.14) 64%, transparent 67%);
}
.site-footer > .container { position: relative; z-index: 1; }

/* =========================================================
   RESPONSIVE ADAPTATIONS (beyond fluid clamp/auto-fit)
   ========================================================= */
@media (max-width: 639px) {
  .hero__actions .btn { width: 100%; }
  .split__media { aspect-ratio: 4 / 3.4; }
}

/* =========================================================
   AMBIENT BACKGROUNDS — TABLET / MOBILE
   Every shape above is positioned with top/bottom as a % of
   its OWN section's height. That works on desktop, where
   section height tracks viewport height closely — but on
   phones/small tablets the same sections stack much taller
   (cards go to one column, footer columns stack, 8 service
   cards become a long list), so those percentages resolve
   against a much bigger number and push the shapes hundreds
   of pixels above/below the visible box. They don't get
   hidden — they get shoved off-screen by the math. Below
   900px every affected offset switches to vw units instead,
   which track the (predictable, shrinking) viewport width
   rather than the section's unpredictable content height, so
   each shape stays anchored to the corner it's meant to
   occupy regardless of how tall the content stack gets.
   Below 640px a further pass reshapes the bottom/top shape of
   the tallest sections (Servicios, Nosotros, Cobertura,
   Footer) into an elongated vertical form that makes real use
   of the narrow, tall phone canvas instead of just shrinking
   a circle. Everything still sits behind each section's
   z-index:1 .container, and still clips at overflow:hidden
   section edges, so nothing ever covers text/cards/buttons
   and the controlled screen-edge bleed stays controlled. */

@media (max-width: 900px) {
  #servicios::before { top: -12vw; right: -18vw; width: 56vw; }
  #servicios::after { bottom: -14vw; left: -16vw; width: 44vw; }

  .cifras-section::before { top: -16vw; right: -12vw; width: 48vw; }
  .cifras-section::after { bottom: -18vw; left: -12vw; width: 36vw; }

  /* Restores the fuller strength the desktop rule tones down —
     from here the section is tall enough that this reads as a
     blob rather than a band up the left edge. */
  #nosotros::before {
    bottom: -14vw; left: -12vw; width: 42vw;
    background: radial-gradient(circle at 35% 35%, rgba(254,196,0,.34), transparent 72%);
    border-color: rgba(254,196,0,.28);
  }
  #nosotros::after { top: -14vw; right: -10vw; width: 34vw; }

  .operacion-section::after { top: -14vw; left: -9vw; width: 30vw; }

  #cobertura::before { top: -14vw; left: -10vw; width: 34vw; }
  #cobertura::after { bottom: -12vw; right: -9vw; width: 26vw; }

  .location-section::after { bottom: -16vw; right: -10vw; width: 38vw; }

  .site-footer::before { top: -22vw; width: 84vw; }
  .site-footer::after { bottom: -14vw; right: -10vw; width: 32vw; }

  /* ---- Distributed background layers (tablet AND phone) ----
     Two pseudo-elements can only ever make two shapes, and from
     here down the sections run tall enough (cards drop to 1-2
     columns, footer columns stack) that two corner shapes leave
     most of the scroll flat. So each section paints a STACK of
     gradient layers on its own background-image, each layer set
     at a different height with `at X% Y%` — roughly top / upper-
     middle / middle / lower-middle / bottom — keeping the field
     alive the whole way down.

     Because those positions are percentages resolved inside the
     box, they scale with the section instead of being pushed out
     of it: the same stack distributes correctly on a 700px-tall
     tablet section and a 2000px-tall phone one, which is why this
     lives at the 900px tier rather than being duplicated per
     breakpoint. The closing linear-gradient tints each section's
     top and bottom edges so neighbours bleed into one another
     instead of meeting at a hard seam.

     Alphas stay moderate (≤.34 on paper, ≤.18 on the dark ink
     sections) so body copy keeps its contrast, and all real
     content still paints above via each section's z-index:1
     container. */
  #servicios {
    background-color: var(--color-paper);
    background-image:
      radial-gradient(ellipse 92% 13% at 92% 2%, rgba(254,196,0,.36), transparent 68%),
      radial-gradient(ellipse 78% 10% at 2% 24%, rgba(254,196,0,.24), transparent 70%),
      radial-gradient(ellipse 88% 11% at 98% 46%, rgba(224,168,0,.22), transparent 70%),
      radial-gradient(ellipse 80% 10% at 0% 68%, rgba(254,196,0,.24), transparent 70%),
      radial-gradient(ellipse 95% 12% at 70% 92%, rgba(224,168,0,.20), transparent 70%),
      linear-gradient(180deg, rgba(254,196,0,.10) 0%, transparent 26%, rgba(20,23,28,.035) 60%, rgba(254,196,0,.10) 100%);
  }

  .cifras-section {
    background-color: var(--color-ink);
    background-image:
      radial-gradient(ellipse 85% 30% at 95% 4%, rgba(254,196,0,.20), transparent 68%),
      radial-gradient(ellipse 70% 24% at 0% 52%, rgba(254,196,0,.13), transparent 70%),
      radial-gradient(ellipse 90% 26% at 80% 98%, rgba(224,168,0,.14), transparent 70%),
      linear-gradient(180deg, rgba(254,196,0,.07) 0%, transparent 30%, transparent 70%, rgba(254,196,0,.06) 100%);
  }

  #nosotros {
    background-color: var(--color-paper);
    background-image:
      radial-gradient(ellipse 85% 14% at 96% 3%, rgba(224,168,0,.26), transparent 70%),
      radial-gradient(ellipse 75% 12% at 0% 34%, rgba(254,196,0,.26), transparent 70%),
      radial-gradient(ellipse 90% 13% at 95% 64%, rgba(254,196,0,.22), transparent 70%),
      radial-gradient(ellipse 80% 12% at 6% 96%, rgba(224,168,0,.22), transparent 70%),
      linear-gradient(180deg, rgba(254,196,0,.09) 0%, transparent 28%, rgba(20,23,28,.035) 62%, rgba(254,196,0,.10) 100%);
  }

  .operacion-section {
    background-color: var(--color-paper-2);
    background-image:
      radial-gradient(ellipse 80% 12% at 4% 4%, rgba(254,196,0,.24), transparent 70%),
      radial-gradient(ellipse 90% 14% at 98% 38%, rgba(254,196,0,.26), transparent 70%),
      radial-gradient(ellipse 75% 12% at 0% 72%, rgba(224,168,0,.20), transparent 70%),
      radial-gradient(ellipse 95% 12% at 60% 99%, rgba(254,196,0,.18), transparent 70%),
      linear-gradient(180deg, rgba(254,196,0,.09) 0%, transparent 30%, rgba(20,23,28,.03) 64%, rgba(254,196,0,.09) 100%);
  }

  /* Ubicación — the dotted texture spreads across the full field
     and two washes give the flat yellow depth top and bottom,
     instead of a single ring in one corner. */
  .location-section {
    background-image:
      radial-gradient(ellipse 90% 20% at 8% 2%, rgba(255,255,255,.30), transparent 70%),
      radial-gradient(ellipse 85% 22% at 100% 60%, rgba(20,23,28,.10), transparent 70%),
      radial-gradient(ellipse 95% 18% at 20% 100%, rgba(224,168,0,.55), transparent 72%),
      linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
  }
  .location-section::before {
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 0%, transparent 82%);
    mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 0%, transparent 82%);
  }

  .site-footer {
    background-color: var(--color-ink);
    background-image:
      radial-gradient(ellipse 95% 18% at 50% 1%, rgba(254,196,0,.20), transparent 68%),
      radial-gradient(ellipse 80% 14% at 0% 30%, rgba(254,196,0,.12), transparent 70%),
      radial-gradient(ellipse 85% 14% at 100% 58%, rgba(224,168,0,.13), transparent 70%),
      radial-gradient(ellipse 90% 16% at 30% 92%, rgba(254,196,0,.11), transparent 70%),
      linear-gradient(180deg, rgba(254,196,0,.09) 0%, transparent 26%, transparent 74%, rgba(254,196,0,.05) 100%);
  }
}

/* ---------------------------------------------------------
   PHONE (≤640px) — phone-only adjustments on top of the layer
   stacks above. Those stacks already distribute correctly here
   (their positions are percentages), so this tier only reshapes
   the two pseudo-elements per section: on a narrow, tall canvas
   an elongated vertical blob hugging a screen edge reads as
   designed, where a shrunken circle just reads as a smudge.
   --------------------------------------------------------- */
@media (max-width: 640px) {
  /* --- Servicios: 8 stacked cards, the tallest paper section --- */
  #servicios::before { top: -10vw; right: -22vw; width: 62vw; }
  #servicios::after {
    width: 34vw; height: 86vw; aspect-ratio: auto;
    bottom: 22%; left: -14vw;
    border-radius: 40% 60% 55% 45% / 20% 25% 75% 80%;
  }

  /* --- Por qué VIATRANS --- */
  #nosotros::before {
    width: 32vw; height: 78vw; aspect-ratio: auto;
    bottom: 14%; left: -12vw;
    border-radius: 45% 55% 60% 40% / 25% 30% 70% 75%;
  }
  #nosotros::after { top: -10vw; right: -14vw; width: 40vw; }

  /* --- Cómo trabajamos: route arc pulled to the right edge and
     re-centred on the steps list so the curve sweeps past the
     01-04 rows instead of sitting off to one side. --- */
  .operacion-section::before { top: 62%; right: -34vw; width: 78vw; }

  /* --- Cobertura: the radar motif kept, restacked vertically.
     The opaque map panel is first in the flow on mobile, so the
     radar drops below it to sweep behind the title/lede instead
     of being hidden by it, and the territory patch becomes a
     tall dashed oval running down beside the card column.

     This section also gets its own (stronger) wash stack rather
     than the shared one: its stacked cards span all but ~20px of
     the viewport, so the middle band has almost no open canvas —
     decoration there reads only through the thin side margins
     and the 10px card gaps, which needs more contrast to carry. */
  #cobertura {
    background-color: var(--color-paper);
    background-image:
      radial-gradient(ellipse 95% 13% at 88% 2%, rgba(254,196,0,.38), transparent 70%),
      radial-gradient(ellipse 70% 14% at -5% 32%, rgba(254,196,0,.40), transparent 68%),
      radial-gradient(ellipse 70% 14% at 105% 56%, rgba(224,168,0,.34), transparent 68%),
      radial-gradient(ellipse 75% 13% at -5% 80%, rgba(254,196,0,.32), transparent 68%),
      radial-gradient(ellipse 95% 14% at 60% 100%, rgba(224,168,0,.30), transparent 70%),
      linear-gradient(180deg, rgba(254,196,0,.14) 0%, transparent 26%, rgba(20,23,28,.05) 60%, rgba(254,196,0,.16) 100%);
  }
  #cobertura::before {
    top: 26%; left: -34vw; width: 88vw; transform: none;
    background:
      radial-gradient(circle, rgba(254,196,0,.22), transparent 54%),
      radial-gradient(circle, transparent 37%, rgba(254,196,0,.46) 38%, transparent 40%),
      radial-gradient(circle, transparent 55%, rgba(254,196,0,.38) 56%, transparent 58%),
      radial-gradient(circle, transparent 73%, rgba(224,168,0,.30) 74%, transparent 76%);
  }
  #cobertura::after {
    width: 46vw; height: 72vw; aspect-ratio: auto;
    bottom: -6vw; right: -20vw;
  }

  /* --- Ubicación: location-ping rings enlarged so they still
     register against the full-width yellow field. --- */
  .location-section::after { bottom: -14vw; right: -14vw; width: 52vw; }

  /* --- Footer: the closing field, tallest of all on mobile
     (brand block + 2 link columns + contact + legal). The top
     glow spreads near edge-to-edge with a soft vertical beam
     layered in; the bottom-right ring stretches into a tall
     sliver running down the last column. --- */
  .site-footer::before {
    top: -16vw; width: 96vw;
    background:
      radial-gradient(circle at 40% 55%, rgba(254,196,0,.20), transparent 62%),
      radial-gradient(circle at 65% 40%, rgba(224,168,0,.13), transparent 66%),
      linear-gradient(180deg, rgba(254,196,0,.10), transparent 65%),
      radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 20px 20px;
  }
  .site-footer::after {
    width: 30vw; height: 66vw; aspect-ratio: auto;
    bottom: 8%; right: -10vw;
  }
}