/* ==========================================================================
   HAM Transport & Logistics — sistema de diseño v2
   Concepto: CARTA DE PORTE. Instrumento de precisión, no folleto.
   La línea naranja = la responsabilidad que no se corta en la frontera.
   Sin JavaScript. Todo el contenido vive en el HTML servido.
   v2 conserva el contrato de clases de v1: nada de lo ya construido se rompe.
   ========================================================================== */

/* --- Tipografía ----------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/plex-var-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Manual de marca 2024 — intactos */
  --navy: #1b325f;
  --navy-900: #101f3b;
  --navy-800: #16294c;
  --navy-700: #24406f;
  --navy-600: #33507f;
  --orange: #ff6600;
  --orange-light: #ff8534;
  --orange-dark: #b34500;      /* texto naranja sobre claro: 5.02:1 en --ground, 5.57:1 en papel */
  --black: #14171c;
  --ink-black: #0b0d11;
  --grey: #aaaaaa;
  --grey-light: #e6e7e8;

  /* Superficies */
  --paper: #ffffff;
  --ground: #f2f3f5;
  --ground-deep: #e6e7e8;
  --ink: #14171c;
  --ink-soft: #4d566a;
  --ink-faint: #6b7488;
  --rule: #d6d9de;
  --rule-soft: #e6e8ec;

  /* Sobre navy */
  --on-navy: #ffffff;
  --on-navy-soft: #c6d2e6;
  --on-navy-faint: #93a4c2;
  --hairline: rgba(255,255,255,.16);
  --hairline-strong: rgba(255,255,255,.28);

  /* Métrica */
  --measure: 66ch;
  --shell: 78rem;
  --shell-tight: 62rem;
  --gap: clamp(1.25rem, 4vw, 2.5rem);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Escala tipográfica fluida */
  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-base: 1.0625rem;
  --t-lead: clamp(1.125rem, .95rem + .75vw, 1.375rem);
  --t-h3:   clamp(1.1875rem, 1.08rem + .45vw, 1.4375rem);
  --t-h2:   clamp(1.75rem, 1.28rem + 2.1vw, 2.75rem);
  --t-h1:   clamp(2.35rem, 1.5rem + 3.9vw, 4.25rem);
  --t-mega: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Figtree', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --lift: 0 1px 2px rgba(16,31,59,.05), 0 12px 32px -12px rgba(16,31,59,.22);
  --lift-lg: 0 2px 4px rgba(16,31,59,.06), 0 28px 64px -24px rgba(16,31,59,.42);
}

/* --- Base ----------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
}
h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.024em;
  margin-top: 0;
}
h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.012em;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27,50,95,.35);
  transition: text-decoration-color .15s var(--ease), color .15s var(--ease);
}
a:hover { text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 1px; }

img, svg { max-width: 100%; height: auto; }
strong { font-weight: 600; }
::selection { background: var(--orange); color: #fff; }

/* --- Estructura ----------------------------------------------------------- */

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--tight { max-width: var(--shell-tight); }

.band { padding-block: clamp(3.25rem, 7vw, 6.5rem); position: relative; }
.band--paper  { background: var(--paper); }
.band--ground { background: var(--ground); }
.band--navy   { background: var(--navy); color: var(--on-navy); }
.band--black  { background: var(--ink-black); color: #fff; }
.band--tight  { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

.band--navy h2, .band--navy h3, .band--black h2, .band--black h3 { color: #fff; }
.band--navy a, .band--black a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.band--navy p, .band--black p { color: var(--on-navy-soft); }

/* Filete de continuidad: la línea que cruza de una sección a la otra */
.band--seam::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange) 0 34%, rgba(255,102,0,.18) 34% 100%);
}

/* --- Etiqueta de sección -------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 1.15rem;
  max-width: none;
}
.eyebrow::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
  max-width: 5.5rem;
}
.band--navy .eyebrow, .band--black .eyebrow, .hero .eyebrow { color: var(--orange-light); }
.band--navy .eyebrow::after, .band--black .eyebrow::after, .hero .eyebrow::after { background: var(--hairline-strong); }

/* Encabezado de sección en dos columnas: mata el hueco muerto de la derecha */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head > :last-child { padding-bottom: .35rem; }
.section-head h2 { margin-bottom: 0; }
@media (max-width: 54rem) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head h2 { margin-bottom: 1rem; }
}

.numeral {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-mega);
  line-height: .8;
  letter-spacing: -.055em;
  color: var(--orange);
  display: block;
  margin: 0 0 .12em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Barra de utilidad + encabezado -------------------------------------- */

.utility-bar {
  background: var(--navy-900);
  color: var(--on-navy-faint);
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--hairline);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 40px;
  flex-wrap: wrap;
}
.utility-bar a { color: var(--on-navy-soft); text-decoration: none; }
.utility-bar a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); }
.utility-bar__spacer { margin-left: auto; }
.utility-bar__sep { color: var(--navy-600); }
@media (max-width: 46rem) { .utility-bar { display: none; } }

.site-header {
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--orange) 0 46%, var(--navy-700) 46% 100%);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  min-height: 82px;
  padding-block: .8rem;
  flex-wrap: wrap;
}
.site-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.site-header__logo img { width: 190px; height: 43px; display: block; }
@media (max-width: 30rem) { .site-header__logo img { width: 152px; height: 35px; } }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 1.9vw, 1.75rem);
  margin-left: auto;
  flex-wrap: wrap;
}
.nav a {
  color: var(--on-navy-soft);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav a:hover { color: #fff; border-bottom-color: var(--orange); }
.nav a[aria-current='page'] { color: #fff; border-bottom-color: var(--orange); }
.nav .btn { border-bottom: 2px solid transparent; }
.nav .btn:hover { border-bottom-color: transparent; }
.nav .btn--primary { padding: .7rem 1.15rem; font-size: .9375rem; }

.nav__lang {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-left: 1px solid var(--hairline-strong);
  padding-left: clamp(.85rem, 2vw, 1.4rem);
}
.nav__lang a { color: var(--on-navy-faint); }
.nav__lang a:hover { color: #fff; border-bottom-color: transparent; }

/* --- Botones -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.7rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .16s var(--ease);
}
.btn::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s var(--ease);
  opacity: .85;
}
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.btn--primary { background: var(--orange); color: var(--black); border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-light); border-color: var(--orange-light); }
.btn--ghost { background: transparent; color: #fff; border-color: var(--hairline-strong); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--outline { background: var(--paper); color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.0625rem; }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn::after { transition: none; } }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; align-items: center; }

.go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-weight: 600;
  font-size: .9875rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: .18rem;
  transition: color .15s var(--ease), gap .15s var(--ease);
}
.go:hover { color: var(--orange-dark); gap: .8rem; }
.band--navy .go, .band--black .go, .hero .go { color: #fff; }
.band--navy .go:hover, .band--black .go:hover { color: var(--orange-light); }

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

.hero {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(3.25rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Trama de corredor: líneas de ruta al sesgo, casi imperceptibles */
/* Capa 1: la fotografía */
.hero__photo { position: absolute; inset: 0; z-index: -2; }
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 64% 62%;
}
/* Capa 2: el velo. Sostiene el contraste del texto sobre la foto. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(74deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 84px),
    radial-gradient(110% 80% at 78% 4%, rgba(255,102,0,.13) 0%, rgba(255,102,0,0) 56%),
    linear-gradient(101deg,
      var(--navy) 0 30%,
      rgba(27,50,95,.94) 44%,
      rgba(16,31,59,.80) 66%,
      rgba(16,31,59,.62) 100%),
    linear-gradient(180deg, rgba(16,31,59,.55) 0%, rgba(16,31,59,0) 34%),
    linear-gradient(0deg, rgba(16,31,59,.80) 0%, rgba(16,31,59,.38) 26%, rgba(16,31,59,0) 46%);
}
@media (max-width: 62rem) {
  .hero::before {
    background:
      radial-gradient(110% 60% at 78% 4%, rgba(255,102,0,.13) 0%, rgba(255,102,0,0) 56%),
      linear-gradient(180deg, rgba(16,31,59,.86) 0%, rgba(16,31,59,.90) 52%, rgba(27,50,95,.96) 100%);
  }
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--on-navy-soft);
  max-width: 54ch;
  margin-top: 1.35rem;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 62rem) { .hero__grid { grid-template-columns: 1fr; } }

/* Sello de credencial sobre el hero */
.hero__stamp {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-light);
  border: 1px solid rgba(255,102,0,.42);
  padding: .5rem .85rem;
  margin-bottom: 1.6rem;
}
.hero__stamp::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* --- Recorrido: el documento de ruta ------------------------------------- */

.route {
  background: var(--navy-900);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--orange);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  box-shadow: var(--lift-lg);
  position: relative;
}
.route__title {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
  margin: 0 0 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--hairline);
  max-width: none;
}
.route__list { list-style: none; margin: 0; padding: 0; position: relative; }
.route__list::before {
  content: '';
  position: absolute;
  left: 8px;
  top: .95rem;
  bottom: 1.15rem;
  width: 3px;
  background: var(--orange);
}
.route__step { position: relative; padding-left: 2.4rem; padding-block: .68rem; }
.route__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 19px; height: 19px;
  border: 3px solid var(--orange);
  background: var(--navy-900);
  border-radius: 50%;
}
.route__step--ham::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,102,0,.18); }
.route__step b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.012em;
  color: #fff;
  margin-bottom: .1rem;
}
.route__step span { font-size: .8875rem; color: var(--on-navy-faint); line-height: 1.45; display: block; }
.route__step--ham b::after {
  content: 'HAM';
  display: inline-block;
  margin-left: .6rem;
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--orange);
  padding: .16rem .45rem;
  vertical-align: .14em;
}
.route__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--on-navy-soft);
  max-width: none;
}

/* --- Barra de respaldo ---------------------------------------------------- */

.proof-bar {
  background: var(--navy-900);
  color: #fff;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.proof-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 62rem) { .proof-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .proof-bar__grid { grid-template-columns: 1fr; } }

.proof-bar__item {
  padding: 1.75rem clamp(1.1rem, 2.4vw, 2rem);
  border-left: 1px solid var(--hairline);
  position: relative;
}
.proof-bar__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28px;
  height: 3px;
  background: var(--orange);
}
.proof-bar__item:first-child { border-left: 0; padding-left: 0; }
.proof-bar__item:first-child::before { left: 0; }
@media (max-width: 62rem) {
  .proof-bar__item { border-left: 0; border-top: 1px solid var(--hairline); padding-inline: 0; }
  .proof-bar__item::before { left: 0; }
  .proof-bar__item:first-child, .proof-bar__item:nth-child(2) { border-top: 0; }
}
@media (max-width: 34rem) {
  .proof-bar__item:nth-child(2) { border-top: 1px solid var(--hairline); }
}
.proof-bar__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
  margin-bottom: .6rem;
}
.proof-bar__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.32;
  letter-spacing: -.012em;
  color: #fff;
  display: block;
  text-wrap: pretty;
  hyphens: none;
}
.proof-bar__value .pending { white-space: nowrap; }

/* --- Índice de servicios: índice editorial, no tarjetas ------------------ */

.index { border-top: 2px solid var(--navy); }
.index__item {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: start;
  padding: clamp(1.65rem, 3vw, 2.35rem) clamp(.75rem, 1.5vw, 1.25rem) clamp(1.65rem, 3vw, 2.35rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background-color .18s var(--ease), padding-left .18s var(--ease);
}
.index__item::before {
  content: '';
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s var(--ease);
}
.index__item:hover { background: var(--paper); padding-left: 1.15rem; }
.index__item:hover::before { transform: scaleY(1); }
.index__item:hover .index__name { color: var(--orange-dark); }
.index__item:hover .index__go::after { transform: translateX(4px); }
.index__item:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.band--ground .index__item:hover { background: var(--paper); }

@media (max-width: 60rem) {
  .index__item { grid-template-columns: 3.25rem minmax(0, 1fr) 2rem; }
}
@media (max-width: 40rem) {
  .index__item { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .index__go { grid-column: 2; margin-top: .9rem; }
}

.index__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--orange);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: .1rem;
}
.index__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -.022em;
  color: var(--navy);
  margin: 0;
  line-height: 1.14;
  text-wrap: balance;
  transition: color .15s var(--ease);
}
.index__desc {
  display: block;
  margin: 0;
  color: var(--ink-soft);
  font-size: .9875rem;
  line-height: 1.55;
  max-width: 52ch;
}
@media (max-width: 60rem) {
  .index__name { margin-bottom: .5rem; }
}
.index__go {
  align-self: center;
  justify-self: end;
  font-weight: 600;
  font-size: 0;
  color: var(--navy);
  white-space: nowrap;
}
.index__go::after {
  content: '';
  display: block;
  width: 11px; height: 11px;
  border-right: 2px solid var(--orange);
  border-top: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
@media (max-width: 40rem) {
  .index__go { justify-self: start; font-size: .875rem; color: var(--navy); border-bottom: 2px solid var(--orange); padding-bottom: .15rem; }
  .index__go::after { display: inline-block; margin-left: .45rem; vertical-align: middle; }
}

/* --- Corredor: la pieza gráfica de marca --------------------------------- */

.corridor { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.corridor svg { display: block; width: 100%; height: auto; }
.corridor__note {
  margin: 1.1rem 0 0;
  font-size: .875rem;
  color: var(--ink-faint);
  max-width: 70ch;
}
.band--navy .corridor__note, .band--black .corridor__note { color: var(--on-navy-faint); }

/* --- Tablas --------------------------------------------------------------- */

.table-wrap { margin: 1.9rem 0 0; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--lift); }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat,
    linear-gradient(to left, var(--paper) 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat,
    linear-gradient(to right, rgba(16,31,59,.14), rgba(255,255,255,0)) left center / 14px 100% no-repeat,
    linear-gradient(to left, rgba(16,31,59,.14), rgba(255,255,255,0)) right center / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table.data {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.42;
  font-variant-numeric: tabular-nums lining-nums;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: 1.3rem 1.35rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.caption-title {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -.018em;
  color: var(--navy);
  line-height: 1.22;
  margin-bottom: .35rem;
}
.caption-note { display: block; font-size: .875rem; color: var(--ink-soft); max-width: 62ch; }

table.data thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  padding: .9rem 1.15rem;
  vertical-align: bottom;
  white-space: nowrap;
}
table.data tbody th { font-weight: 600; color: var(--navy); text-align: left; min-width: 11rem; }
table.data th, table.data td { padding: .95rem 1.15rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.data tbody tr:nth-child(even) th,
table.data tbody tr:nth-child(even) td { background: #f6f7f9; }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }

table.data tbody th:first-child, table.data thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--rule);
}
table.data thead th:first-child { background: var(--navy); }
table.data tbody tr:nth-child(even) th:first-child { background: #f6f7f9; }

.num { text-align: right; }
.unit { display: block; font-size: .78rem; color: var(--ink-faint); }
.key-cell { box-shadow: inset 3px 0 0 var(--orange); font-weight: 600; }

.table-hint { display: block; padding: .75rem 1.35rem; font-size: .8rem; color: var(--ink-faint); border-top: 1px solid var(--rule); background: #fafbfc; }
@media (min-width: 62rem) { .table-hint { display: none; } }
.table-foot { padding: .95rem 1.35rem; font-size: .85rem; color: var(--ink-soft); border-top: 1px solid var(--rule); background: #fafbfc; }
.table-foot p { max-width: 78ch; margin: 0; }

/* --- Dato pendiente ------------------------------------------------------- */

.pending {
  display: inline;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  color: #8a4400;
  background: #fff1e3;
  box-shadow: inset 0 -2px 0 var(--orange);
  padding: .12rem .4rem;
  white-space: normal;
}
/* Los corchetes viven en el HTML, no aquí: así el texto del FAQPage coincide
   carácter por carácter con el visible y un solo grep encuentra los dos lados. */
.band--navy .pending, .band--black .pending, .hero .pending, .proof-bar .pending, .route .pending, .closer .pending, .site-footer .pending {
  color: #ffd0a6;
  background: rgba(255,102,0,.14);
  box-shadow: inset 0 -2px 0 var(--orange);
}
.tbd { color: var(--ink-soft); font-style: normal; }

/* --- Paneles sí / no ------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-top: 2rem;
}
@media (max-width: 48rem) { .split { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--lift);
}
.panel--yes { border-top: 3px solid var(--orange); }
.panel--no  { border-top: 3px solid var(--grey); }
.panel h3 { margin-top: 0; }
.panel ul { margin: 0; padding-left: 1.15rem; }
.panel li { margin-bottom: .68rem; color: var(--ink-soft); }
.panel li:last-child { margin-bottom: 0; }
.panel--yes li::marker { color: var(--orange); }
.panel--no  li::marker { color: var(--grey); }

/* --- Pasos numerados ------------------------------------------------------ */

.steps {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: clamp(.9rem, 2vw, 1.75rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4375rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--orange);
  font-variant-numeric: lining-nums tabular-nums;
}
.steps b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.014em;
  color: var(--navy);
  margin-bottom: .3rem;
}
.steps p { margin: 0; color: var(--ink-soft); }

/* --- Argumento central: cita editorial ----------------------------------- */

.pull {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 56rem) { .pull { grid-template-columns: 1fr; } }
.pull--photo {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: center;
}
@media (max-width: 56rem) { .pull--photo { grid-template-columns: 1fr; } }
.pull__body { margin-top: 1.5rem; }
.pull__photo { margin: 0; position: relative; }
.pull__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pull__photo::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 4.5rem; height: 4px;
  background: var(--orange);
}
@media (max-width: 56rem) { .pull__photo img { aspect-ratio: 16 / 10; } }
.pull__claim {
  margin-bottom: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.65rem, 1.1rem + 2.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.pull__claim em { font-style: normal; color: var(--orange); }
.pull__rule {
  width: 4.5rem;
  margin-top: .35rem;
  height: 3px;
  background: var(--orange);
  margin: 0 0 1.6rem;
  border: 0;
}
.pull__body p { color: #b8c4d8; }
.pull__body p + p { margin-top: 1.05em; }

/* --- Registro de evidencia ------------------------------------------------ */

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 48rem) { .ledger { grid-template-columns: 1fr; } }
.ledger__item {
  padding: clamp(1.6rem, 3vw, 2.15rem) clamp(1.3rem, 3vw, 2.15rem);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.ledger__item:nth-child(even) { border-right: 0; }
@media (max-width: 48rem) { .ledger__item { border-right: 0; padding-inline: 0; } }
.ledger__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--orange);
  display: block;
  margin-bottom: .8rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.ledger__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
  margin-bottom: .55rem;
}
.ledger__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.5625rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 .75rem;
  max-width: none;
}
.ledger__note { font-size: .9375rem; line-height: 1.55; color: var(--on-navy-faint); margin: 0; max-width: 46ch; }

/* --- Preguntas frecuentes ------------------------------------------------- */

.faq { margin-top: 2.25rem; border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--rule); background: var(--paper); }
.faq details[open] { background: #fbfcfd; }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  padding: 1.35rem clamp(1rem, 2.4vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  transition: background-color .14s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: #f5f7f9; }
.faq summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.faq summary h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.014em;
  flex: 1;
  line-height: 1.34;
}
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 13px; height: 13px;
  margin-top: .42rem;
  border-right: 2.5px solid var(--orange);
  border-bottom: 2.5px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: .72rem; }
.faq__answer { padding: 0 clamp(1rem, 2.4vw, 1.6rem) 1.6rem; }
.faq__answer p { max-width: 74ch; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* --- Cierre --------------------------------------------------------------- */

.closer {
  background: var(--ink-black);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.closer::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(85% 120% at 88% 100%, rgba(255,102,0,.17) 0%, rgba(255,102,0,0) 60%);
}
.closer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) { .closer__grid { grid-template-columns: 1fr; } }
.closer h2 { color: #fff; max-width: 20ch; }
.closer p { color: #a8b2c4; max-width: 54ch; }
.closer__contact {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .9375rem;
  color: #a8b2c4;
  max-width: none;
}
.closer__contact a { color: #fff; }

/* --- Pie ------------------------------------------------------------------ */

.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-soft);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  font-size: .9375rem;
  border-top: 3px solid var(--orange);
}
.site-footer h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
  font-family: var(--sans);
  margin-bottom: 1.15rem;
}
.site-footer p { color: var(--on-navy-faint); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
}
@media (max-width: 62rem) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .68rem; line-height: 1.45; }
.site-footer a { color: var(--on-navy-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.site-footer__logo { width: 172px; height: 39px; margin-bottom: 1.25rem; display: block; }
.site-footer__legal {
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  justify-content: space-between;
  font-size: .875rem;
  color: var(--on-navy-faint);
}

/* --- Migas de pan --------------------------------------------------------- */

.crumbs { background: var(--paper); border-bottom: 1px solid var(--rule); font-size: .875rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .95rem 0; }
.crumbs li::after { content: '/'; margin-left: .5rem; color: var(--grey); }
.crumbs li:last-child::after { content: ''; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); }
.crumbs [aria-current='page'] { color: var(--navy); font-weight: 600; }

/* --- Fotografía: hueco diseñado, no caja gris --------------------------- */

.shot { position: relative; background: var(--navy-800); overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--wide  { aspect-ratio: 16 / 9; }
.shot--tall  { aspect-ratio: 4 / 5; }
.shot--squat { aspect-ratio: 3 / 2; }
.shot__brief {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .45rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background:
    repeating-linear-gradient(74deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 46px),
    linear-gradient(180deg, rgba(16,31,59,0) 40%, rgba(11,13,17,.82) 100%);
  border: 1px solid var(--hairline);
}
.shot__tag {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.shot__desc { font-size: .875rem; line-height: 1.45; color: var(--on-navy-soft); margin: 0; max-width: 40ch; }
figure.shot-figure { margin: 0; }
figure.shot-figure figcaption { margin-top: .7rem; font-size: .8125rem; color: var(--ink-faint); }

/* --- Auxiliares ----------------------------------------------------------- */

.lede { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-soft); max-width: 58ch; }
.band--navy .lede, .band--black .lede { color: var(--on-navy-soft); }
.rule-note {
  border-left: 3px solid var(--orange);
  background: var(--paper);
  padding: 1rem 1.35rem;
  margin: 1.9rem 0 0;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.55;
}
.band--paper .rule-note { background: var(--ground); }
.stack > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }
.skip {
  position: absolute; left: -9999px;
  background: var(--orange); color: #fff;
  padding: .8rem 1.35rem; font-weight: 600; z-index: 99;
}
.skip:focus { left: 1rem; top: 1rem; }
.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;
}

/* --- Aviso de maqueta ----------------------------------------------------- */

.staging-note {
  max-width: none;
  margin: 0;
  background: var(--orange);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  padding: .6rem 1rem;
  line-height: 1.4;
}

/* --- Impresión ------------------------------------------------------------ */

@media print {
  .site-header, .utility-bar, .staging-note, .closer, .btn-row { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .band { padding-block: 1.2cm; }
  .hero, .band--navy, .band--black, .proof-bar, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .band--navy h2, .band--black h2 { color: var(--navy) !important; }
  .faq details { break-inside: avoid; }
}


/* --- Encabezado en móvil: fila fija + tira de enlaces desplazable ------ */

@media (max-width: 52rem) {
  .site-header__inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'logo cta' 'nav nav';
    align-items: center;
    row-gap: .35rem;
    min-height: 0;
    padding-block: .85rem .25rem;
  }
  .site-header__logo { grid-area: logo; }
  .site-header__cta  { grid-area: cta; justify-self: end; }
  .nav {
    grid-area: nav;
    margin-left: 0;
    flex-wrap: nowrap;
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: .35rem .55rem;
    /* aviso de que hay más: degradado en el borde derecho */
    -webkit-mask-image: linear-gradient(90deg, #000 0 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0 90%, transparent 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: .9rem; }
  .nav .btn--primary { display: none; }          /* el CTA ya vive arriba */
  .nav__lang { border-left: 0; padding-left: 0; margin-left: .25rem; }
  .site-header__cta.btn--primary { padding: .72rem 1.1rem; font-size: .9375rem; min-height: 44px; }
}
@media (min-width: 52.0625rem) {
  .site-header__cta { display: none; }           /* en escritorio el CTA va dentro del nav */
}

/* ==========================================================================
   Ajustes 2-sep tras la revisión de diseño
   ========================================================================== */

/* --- Corredor: dos composiciones ----------------------------------------
   El SVG ancho escalaba a 0.292 en 390 px y renderizaba texto de 3.2 a 5 px.
   Debajo de 64rem entra una composición apilada con texto HTML real.        */

.corridor__wide  { display: block; }
.corridor__stack { display: none; }

@media (max-width: 64rem) {
  .corridor__wide  { display: none; }
  .corridor__stack { display: block; }
}

.corridor__origin {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1rem;
  max-width: none;
}

.corridor__routes {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.9rem;
  position: relative;
  padding-top: .5rem;
}
.corridor__routes::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 1.2rem;
  bottom: .8rem;
  width: 3px;
  background: var(--orange);
}
.corridor__routes li {
  position: relative;
  padding-block: .75rem;
}
.corridor__routes li::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 1.15rem;
  width: 17px; height: 17px;
  border: 3px solid var(--orange);
  background: var(--paper);
  border-radius: 50%;
}
.corridor__routes b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -.018em;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: .18rem;
}
.corridor__routes span { font-size: .9375rem; color: var(--ink-soft); }

.corridor__border {
  border-top: 3px solid var(--orange);
  padding-top: .7rem;
  margin: 0 0 .3rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange-dark);
  max-width: none;
}

/* --- Mapa de corredores -------------------------------------------------
   El contorno es geográfico; las curvas comunican corredores operativos,
   no una ruta carretera exacta. El detalle textual vive fuera del SVG para
   seguir siendo legible y accesible en cualquier ancho.                    */

.corridor__legacy { display: none !important; }

.corridor-map {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(17rem, .72fr);
  background: var(--navy-900);
  border: 1px solid rgba(27,50,95,.18);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift-lg);
}
.corridor-map__figure {
  margin: 0;
  padding: clamp(.35rem, 1.2vw, .85rem);
  background: var(--navy-900);
}
.corridor-map__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
}
.corridor-map__routes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  color: #fff;
  border-left: 1px solid var(--hairline);
  background:
    linear-gradient(135deg, rgba(255,102,0,.08), transparent 38%),
    var(--navy-900);
}
.corridor-map__kicker {
  margin: 0 0 1.25rem;
  color: var(--orange-light);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.corridor-map__routes ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.corridor-map__routes li {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hairline);
}
.corridor-map__num {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(255,133,52,.7);
  border-radius: 50%;
  color: var(--orange-light);
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.corridor-map__routes b {
  display: block;
  color: #fff;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.corridor-map__routes small {
  display: block;
  margin-top: .25rem;
  color: var(--on-navy-faint);
  font-size: .8125rem;
  line-height: 1.4;
}
.corridor-map__foot {
  margin: 1.25rem 0 0;
  color: var(--on-navy-soft);
  font-size: .85rem;
  line-height: 1.5;
}

@media (max-width: 58rem) {
  .corridor-map { grid-template-columns: 1fr; }
  .corridor-map__routes { border-left: 0; border-top: 1px solid var(--hairline); }
  .corridor-map__routes ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .corridor-map__routes li { padding-inline: .85rem; border-right: 1px solid var(--hairline); }
  .corridor-map__routes li:first-child { padding-left: 0; }
  .corridor-map__routes li:last-child { padding-right: 0; border-right: 0; }
}
@media (max-width: 42rem) {
  .corridor-map__figure { padding: .3rem; }
  .corridor-map__routes { padding: 1.35rem; }
  .corridor-map__routes ol { grid-template-columns: 1fr; }
  .corridor-map__routes li,
  .corridor-map__routes li:first-child,
  .corridor-map__routes li:last-child { padding-inline: 0; border-right: 0; }
}

/* --- Nota bajo el CTA: qué pasa después de dar clic --------------------- */

.cta-note {
  margin: 1.35rem 0 0;
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: #a6b5cf;            /* 5.34:1 sobre el peor fondo del hero; --on-navy-faint daba 4.39 */
  padding-left: 1rem;
  border-left: 2px solid var(--hairline-strong);
}

/* --- El diferenciador pesa más que el resto del catálogo ---------------- */

.index__item--lead { padding-left: 1.15rem; }
.index__item--lead::before { transform: scaleY(1); }      /* el filete vive siempre */
.index__item--lead .index__name { font-size: 1.5rem; }
@media (max-width: 40rem) {
  .index__item--lead .index__name { font-size: 1.375rem; }
}

/* --- WhatsApp flotante ---------------------------------------------------
   La spec lo pide en las 20 páginas. El número sigue pendiente de HAM.       */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .8rem 1.15rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--orange);
  box-shadow: var(--lift-lg);
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.wa:hover { background: var(--navy-700); transform: translateY(-2px); }
.wa:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.wa svg { flex: 0 0 auto; }
@media (max-width: 30rem) {
  .wa { padding: .8rem; }
  .wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } }
@media print { .wa { display: none; } }

/* --- Copy nuevo, pendiente de VBO: se marca en la maqueta y sale en producción */
.nueva { border-bottom: 2px dotted var(--orange); }
.band--navy .nueva, .band--black .nueva, .hero .nueva { border-bottom-color: var(--orange-light); }
@media print { .nueva { border-bottom: 0; } }


/* ==========================================================================
   Patrones del Manual de Marca 2024
   Fuente: "HAM SOLUCIONES EN MOVIMIENTO.pdf" (CorelDRAW, sep-2024)
   ========================================================================== */

:root {
  /* El manual construye todos sus bloques de color con esquinas generosas. */
  --radius: 14px;
  --radius-sm: 6px;
}

/* --- 1. Titular a dos pesos --------------------------------------------
   El manual titula siempre igual: "PALETA DE COLORES", "IDENTIDAD VISUAL",
   "NUESTROS VALORES". Primera parte ligera, remate en negra.
   Cambia el ENFASIS, nunca el texto.                                      */

h2 { font-weight: 400; }
h2 b, h2 strong { font-weight: 800; color: inherit; }
.hero h1 b { font-weight: 800; }
.hero h1 { font-weight: 500; }

/* --- 2. Isotipo sobredimensionado y sangrado ---------------------------
   En el manual el elefante se usa gigante y cortado por el borde:
   en las libretas, detras del camion, en la portada de seccion.           */

.mark-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mark-field svg {
  position: absolute;
  right: -8%;
  bottom: -34%;
  width: min(62%, 780px);
  height: auto;
  color: var(--orange);
  opacity: .13;
}
@media (max-width: 56rem) {
  .mark-field svg { right: -22%; bottom: -18%; width: 88%; opacity: .1; }
}
.closer > .shell { position: relative; z-index: 1; }

/* --- 3. Mosaico tono sobre tono ----------------------------------------
   El bloque naranja del manual repite el isotipo en un tono mas claro.    */

.tile-mark {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20560%20330%22%20width%3D%22560%22%20height%3D%22330%22%3E%3Cg%20transform%3D%22translate%280%2C330%29%20scale%280.1%2C-0.1%29%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.07%22%3E%3Cpath%20d%3D%22M3970%203205%20c-609%20-104%20-1060%20-599%20-1097%20-1202%20l-6%20-92%20-846%20-4%20c-835%0A-3%20-847%20-3%20-946%20-26%20-452%20-102%20-785%20-323%20-926%20-616%20-66%20-135%20-69%20-163%20-69%0A-672%20l0%20-453%20349%200%20350%200%203%20303%20c4%20287%205%20305%2028%20366%2053%20147%20173%20278%20315%20346%0A116%2055%20151%2059%20465%2060%20l285%200%203%20-537%202%20-538%20350%200%20350%200%200%20540%200%20540%20778%200%0Ac806%200%20908%20-4%201007%20-39%20169%20-60%20314%20-203%20376%20-374%2022%20-58%2023%20-79%2027%20-364%20l3%0A-303%20355%200%20355%200%20-4%20973%20c-4%201064%200%20998%20-64%201202%20-88%20280%20-299%20549%20-561%20712%0A-252%20157%20-597%20227%20-882%20178z%20m360%20-711%20c203%20-57%20378%20-237%20425%20-435%208%20-37%2015%0A-112%2015%20-177%20l0%20-112%20-37%2019%20c-58%2029%20-203%2078%20-290%2097%20-64%2015%20-147%2019%20-473%2024%0Al-395%205%203%2055%20c14%20263%20234%20498%20506%20541%2066%2010%20176%202%20246%20-17z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 74px auto;
  background-position: center;
}
.site-footer { position: relative; }
.site-footer > .shell { position: relative; z-index: 1; }

/* --- 4. Esquinas del manual --------------------------------------------
   Antes iban a 0 por criterio mio. El manual manda: sus bloques de color
   llevan radio generoso. Se aplica a superficies y media, no a las reglas. */

.route, .panel, .shot, .pull__photo img, .table-wrap, .site-header__cta,
.rule-note { border-radius: var(--radius); }
.shot, .pull__photo { overflow: hidden; }
.pull__photo img { display: block; }
.btn { border-radius: var(--radius-sm); }
.hero__stamp { border-radius: 999px; }
.wa { border-radius: 999px; }

/* El botón flotante tapaba "Aviso de privacidad" al llegar al final.
   Se le da al pie el aire suficiente para que el enlace legal nunca quede debajo. */
.site-footer { padding-bottom: clamp(5.5rem, 8vw, 7rem); }
@media print { .site-footer { padding-bottom: 2rem; } }

/* --- Pie compacto ---------------------------------------------------------
   Antes medía 463 px, de los cuales 112 eran solo aire para librar el botón
   flotante. Ahora el aire se pone SOLO donde estorba: en la fila legal.      */

.site-footer {
  padding-block: clamp(2.25rem, 3.5vw, 3rem) clamp(2.25rem, 3vw, 2.75rem);
  font-size: .9rem;
}
.site-footer__logo { width: 148px; height: 34px; margin-bottom: .85rem; }
.site-footer h2 { margin-bottom: .75rem; }
.site-footer li { margin-bottom: .5rem; }
.site-footer__grid { gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.site-footer p { font-size: .875rem; line-height: 1.5; }

.site-footer__legal {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  font-size: .8125rem;
}
/* El botón flotante vive abajo a la derecha. En vez de recortar el ancho de la
   fila legal (que la descuadraba), se le da altura para que el aviso quede arriba. */
.site-footer__legal { padding-bottom: 3.25rem; }
@media print { .site-footer__legal { padding: 1.1rem 0 0; } }

/* --- Correcciones de revisión UX -----------------------------------------

   1) El servicio destacado llevaba padding-left propio y su numeral quedaba
      18 px a la derecha de los otros tres: se leía como error de alineación,
      no como jerarquía. La jerarquía la carga el filete y el cuerpo del
      nombre; la reja no se mueve.
   2) El hover desplazaba la fila 1.15 rem. Un desplazamiento de layout al
      pasar el cursor es ruido: se cambia por el filete y el fondo.          */

.index__item:hover { padding-left: 0; }
.index__item--lead { padding-left: 0; }
.index__item::before { width: 4px; }

/* 3) El subrayado punteado del copy pendiente competía con la lectura.
      Se cambia por un realce tenue que se ve sin romper la línea de texto. */
.nueva {
  border-bottom: 0;
  background: rgba(255,102,0,.10);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .06em .18em;
  border-radius: 2px;
}
.band--navy .nueva, .band--black .nueva, .hero .nueva {
  background: rgba(255,133,52,.16);
}
@media print { .nueva { background: none; padding: 0; } }

/* 4) Cuando el split lleva fotografía, la columna de texto se centra contra
      ella. Con align-items:start quedaba un hueco de ~150 px a la derecha.   */
.split:has(.shot-figure) { align-items: center; }
@media (max-width: 48rem) { .split:has(.shot-figure) { align-items: start; } }

/* 5) En móvil el pie apilaba las 4 columnas y llegaba a 824 px: una pantalla
      entera de pie. Las dos listas cortas van a la par; marca y contacto,
      que llevan correos largos, siguen a todo lo ancho.                     */
@media (max-width: 36rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid > :first-child,
  .site-footer__grid > :last-child { grid-column: 1 / -1; }
}


/* --- Hero de páginas interiores ------------------------------------------
   En la portada el flanco derecho lo ocupa el panel de ruta. En las páginas
   interiores quedaba un vacío de ~600 px. Se llena con el isotipo sangrado,
   que es como el manual usa el elefante en las portadas de sección.         */

.hero:not(:has(.hero__grid))::after {
  content: '';
  position: absolute;
  right: -4%;
  top: 8%;
  width: min(44%, 580px);
  aspect-ratio: 560 / 330;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20560%20330%22%20width%3D%22560%22%20height%3D%22330%22%3E%3Cg%20transform%3D%22translate%280%2C330%29%20scale%280.1%2C-0.1%29%22%20fill%3D%22%23ff6600%22%20fill-opacity%3D%220.14%22%3E%3Cpath%20d%3D%22M3970%203205%20c-609%20-104%20-1060%20-599%20-1097%20-1202%20l-6%20-92%20-846%20-4%20c-835%0A-3%20-847%20-3%20-946%20-26%20-452%20-102%20-785%20-323%20-926%20-616%20-66%20-135%20-69%20-163%20-69%0A-672%20l0%20-453%20349%200%20350%200%203%20303%20c4%20287%205%20305%2028%20366%2053%20147%20173%20278%20315%20346%0A116%2055%20151%2059%20465%2060%20l285%200%203%20-537%202%20-538%20350%200%20350%200%200%20540%200%20540%20778%200%0Ac806%200%20908%20-4%201007%20-39%20169%20-60%20314%20-203%20376%20-374%2022%20-58%2023%20-79%2027%20-364%20l3%0A-303%20355%200%20355%200%20-4%20973%20c-4%201064%200%20998%20-64%201202%20-88%20280%20-299%20549%20-561%20712%0A-252%20157%20-597%20227%20-882%20178z%20m360%20-711%20c203%20-57%20378%20-237%20425%20-435%208%20-37%2015%0A-112%2015%20-177%20l0%20-112%20-37%2019%20c-58%2029%20-203%2078%20-290%2097%20-64%2015%20-147%2019%20-473%2024%0Al-395%205%203%2055%20c14%20263%20234%20498%20506%20541%2066%2010%20176%202%20246%20-17z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 62rem) {
  .hero:not(:has(.hero__grid))::after { right: -16%; top: auto; bottom: 4%; width: 74%; opacity: .7; }
}
.hero:not(:has(.hero__grid)) > .shell { position: relative; z-index: 1; }

/* Controles del formulario al radio del sistema */
.ctrl, .qform input, .qform select, .qform textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
  border-radius: var(--radius-sm);
}

/* Contenedor del texto en el bloque de argumento con fotografía.
   Existe para que .pull--photo tenga exactamente dos hijos en la reja. */
.pull__text { min-width: 0; }

/* --- Ajustes 22-sep (revisión de Rodolfo en producción) ------------------ */

/* Nuestros servicios: sin filete fijo en el primero (se pegaba con el hover del
   segundo) y flecha dentro de un círculo que se llena al pasar el cursor.
   El giro de la flecha se conserva: antes el hover lo pisaba y quedaba "¬". */
.index__item--lead::before { transform: scaleY(0); }
.index__item--lead:hover::before { transform: scaleY(1); }
.index__item::before { top: 0; bottom: 0; }
.index__item:hover .index__name { color: var(--navy); }
.index__item:hover .index__num { color: var(--orange-dark); }
@media (min-width: 40.01rem) {
  .index__go {
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border: 1.5px solid var(--rule);
    border-radius: 999px;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  }
  .index__go { position: relative; }
  .index__go::after { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: 0; transform: translate(-70%, -50%) rotate(45deg); }
  .index__item:hover .index__go { background: var(--orange); border-color: var(--orange); transform: translateX(4px); }
  .index__item:hover .index__go::after { transform: translate(-70%, -50%) rotate(45deg); border-color: #fff; }
}

/* Pie: textura a la mitad y letra con más cuerpo. El aviso legal se va a la
   izquierda junto a la razón social para que el botón flotante no lo tape.  */
.site-footer .tile-mark { opacity: .4; }
.site-footer { font-weight: 500; }
.site-footer a { color: #e3e9f3; font-weight: 500; }
.site-footer p { color: #c3cde0; font-weight: 450; }
.site-footer h2 { font-weight: 700; color: #fff; letter-spacing: .12em; }
.site-footer__legal { justify-content: flex-start; color: #b5c1d8; font-weight: 500; }
.site-footer__legal span + span::before { content: '·'; margin-right: 1.75rem; color: var(--hairline-strong); }

/* Botón Cotiza del header: más peso, texto oscuro con contraste AA sobre
   naranja, sombra y un leve levantamiento al pasar el cursor. */
.nav .btn--primary, .site-header__cta.btn--primary {
  font-weight: 700;
  color: var(--black);
  letter-spacing: .01em;
  padding: .72rem 1.3rem;
  box-shadow: 0 6px 18px -6px rgba(255,102,0,.55), inset 0 -2px 0 rgba(0,0,0,.12);
}
.nav .btn--primary:hover, .site-header__cta.btn--primary:hover {
  background: var(--orange-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(255,102,0,.65), inset 0 -2px 0 rgba(0,0,0,.12);
}

/* Nuestros servicios en tablet y móvil: la descripción caía en la columna
   angosta del número y se partía palabra por palabra. Posición explícita. */
@media (max-width: 60rem) {
  .index__num  { grid-column: 1; grid-row: 1 / span 2; }
  .index__name { grid-column: 2; grid-row: 1; }
  .index__desc { grid-column: 2; grid-row: 2; }
  .index__go   { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 40rem) {
  .index__go { grid-column: 2; grid-row: 3; }
}

/* --- Revisión de Astra, 22-sep ------------------------------------------- */

/* F5: el naranja de marca sobre claro da 2.94:1. Números y flechas sobre fondo
   claro usan un naranja más profundo (4.1:1); el de marca se queda en fondos y acentos. */
:root { --orange-ink: #d45500; }
.index__num, .steps li::before { color: var(--orange-ink); }
.faq summary::after { border-color: var(--orange-ink); }
.band--navy .steps li::before, .band--black .steps li::before { color: var(--orange); }

/* F14: el "01" decorativo competía con el título; queda un filete corto. */
.band-rule { display: block; width: 48px; height: 3px; background: var(--orange); margin-bottom: 1.25rem; }

/* F12: en tarjetas de la misma fila, el enlace va siempre al pie. */
.split > .panel { display: flex; flex-direction: column; }
.split > .panel > p { margin-bottom: 1.25rem; }
.split > .panel > .go { margin-top: auto; align-self: flex-start; }

/* F4: botón de cotizar justo después de las tablas técnicas. */
.table-cta { margin-top: 1.5rem; margin-bottom: 1.25rem; }

/* F11: la página actual se distingue en el menú sin depender del color. */
.nav a[aria-current='page'] { font-weight: 700; border-bottom-width: 2px; }

/* F3: en móvil el menú va en un desplegable; Cotiza queda siempre a la vista. */
.nav-toggle { display: none; }
.nav-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 52rem) {
  .site-header__inner {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: 'logo toggle cta' 'nav nav nav';
    column-gap: .6rem;
    padding-block: .85rem;
  }
  .nav-toggle {
    grid-area: toggle;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: 0 .9rem;
    color: #fff; font-weight: 600; font-size: .9375rem;
    border: 1.5px solid var(--hairline-strong); border-radius: var(--radius-sm);
    cursor: pointer; user-select: none;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 16px; height: 2px; background: currentColor; position: relative;
  }
  .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
  .nav-toggle span::before { top: -5px; }
  .nav-toggle span::after { top: 5px; }
  .nav-check:focus-visible + .nav-toggle { outline: 3px solid var(--orange); outline-offset: 2px; }
  .nav {
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
    padding: .5rem 0 .25rem;
    border-top: 1px solid var(--hairline);
    margin-top: .6rem;
  }
  .nav-check:checked ~ .nav { display: flex; }
  .nav a { display: flex; align-items: center; min-height: 48px; font-size: 1rem; border-bottom: 1px solid var(--hairline); }
  .nav a[aria-current='page'] { color: #fff; border-bottom-color: var(--hairline); box-shadow: inset 3px 0 0 var(--orange); padding-left: .75rem; }
}
.corridor-map__figure picture { display: block; }
@media (max-width: 36rem) { .site-footer__legal span + span::before { display: none; } }

/* La barra del hover de servicios tapaba el "0" del número: vive fuera de la fila. */
.index__item::before { left: -1rem; width: 3px; border-radius: 2px; }
/* Pie: la textura de isotipos baja otra vez para que el texto lea limpio. */
.site-footer .tile-mark { opacity: .2; }

/* producción: sin marcas de revisión */
.nueva { border-bottom: 0 !important; background: none !important; box-shadow: none !important; }