@import url("../fonts/fonts.css");

/* ============================================================
   Fletes USA — "The Route Survey", en papel

   El mundo sigue siendo la carta de ruta, pero impresa en claro
   y no en pantalla nocturna. La razon es del negocio, no de
   gusto: quien decide un flete de maquinaria suele tener 40+,
   escanea en vez de leer, y muchas veces mira el telefono a
   plena luz en un patio.

   De ahi las tres reglas que gobiernan todo el archivo:
     1. Fondo claro por defecto; el oscuro es acento, no base.
     2. Tipografia grande. Si dudas entre dos tamanos, el mayor.
     3. Cada dato importante se ve sin leer un parrafo.

   Los tokens de abajo son la fuente normativa. No metas valores
   sueltos en los componentes.
   ============================================================ */

:root {
  /* Fondos */
  --page: #ffffff;
  --tint: #f4f7fb;
  --tint-2: #e9eff7;
  --rule: #dbe3ee;
  --rule-soft: #edf1f7;

  /* Acento oscuro: pie y una sola banda de cierre */
  --deep: #0f1b2d;
  --deep-2: #17263c;
  --deep-rule: #2a3a52;

  /* Ruta y senal */
  --corridor: #1b5fd9;
  --corridor-deep: #12459f;
  --corridor-soft: #e8f0fe;
  --hazard: #f5a524;
  --hazard-deep: #a86407;
  --hazard-soft: #fff4e0;
  --clear: #16794f;
  --pin: #e02b20;
  --pin-deep: #a81d15;

  /* Texto */
  --ink: #0f1b2d;
  --ink-soft: #4e6076;
  --ink-faint: #7b8b9f;
  --on-deep: #eef3fa;
  --on-deep-soft: #9db0c8;

  /* Tipografia */
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: Barlow, system-ui, -apple-system, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, monospace;

  /* Espaciado */
  --s-hair: 4px;
  --s-xs: 8px;
  --s-sm: 14px;
  --s-md: 22px;
  --s-lg: 36px;
  --s-xl: 60px;
  --s-section: clamp(76px, 9vw, 140px);

  /* Forma */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Contenedor */
  --container: 1560px;
  --gutter: clamp(22px, 3vw, 48px);
  --rail: 64px;

  /* Sombras: suaves, solo donde algo se levanta de verdad */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06),
    0 2px 8px -2px rgba(15, 27, 45, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(15, 27, 45, 0.1),
    0 12px 32px -12px rgba(15, 27, 45, 0.18);
  --shadow-lg: 0 8px 24px -6px rgba(15, 27, 45, 0.12),
    0 32px 64px -24px rgba(15, 27, 45, 0.26);
  --focus: 0 0 0 3px rgba(27, 95, 217, 0.32);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--corridor);
  outline-offset: 2px;
}

::selection {
  background: var(--hazard);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--hazard);
  color: var(--ink);
  padding: 14px 22px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Tipografia ----------
   Escala deliberadamente grande. El publico no lee letra chica. */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 6.6vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.print > * {
  display: block;
}

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
}

/* Rotulo de seccion. Mono solo aqui y en los datos. */
.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Regla de la medida: todo numero con unidad va en mono */
.ann,
.measure {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.prose {
  max-width: 64ch;
}
.prose p + p {
  margin-top: var(--s-md);
}

.soft {
  color: var(--ink-soft);
}
.amber {
  color: var(--hazard-deep);
}

/* ---------- Fondos ---------- */

.ground-page {
  background: var(--page);
  color: var(--ink);
}
.ground-tint {
  background: var(--tint);
  color: var(--ink);
}
.ground-deep {
  background: var(--deep);
  color: var(--on-deep);
}
.ground-deep .soft {
  color: var(--on-deep-soft);
}
.ground-deep .amber {
  color: var(--hazard);
}
.ground-deep .headline,
.ground-deep .display,
.ground-deep .title {
  color: #fff;
}

/* Reticula de carta: presente pero discreta */
.graticule {
  position: relative;
}
.graticule::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 104px 104px;
  opacity: 0.5;
  mask-image: radial-gradient(
    ellipse 100% 80% at 50% 35%,
    #000 25%,
    transparent 100%
  );
}
.ground-deep.graticule::before {
  background-image: linear-gradient(to right, #24344c 1px, transparent 1px),
    linear-gradient(to bottom, #24344c 1px, transparent 1px);
  opacity: 0.6;
}

/* ---------- Layout ---------- */

/* A sangre: rompe el contenedor y ocupa el ancho de la ventana.
   Las fotos son el argumento de venta; encerrarlas en la columna
   de texto las convierte en ilustracion. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--s-section);
}

.section-head {
  display: grid;
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-lg) clamp(36px, 5vw, 76px);
    align-items: end;
  }
}
.section-head .ann {
  max-width: 46ch;
  padding-bottom: 5px;
  color: var(--ink-soft);
}
.ground-deep .section-head .ann {
  color: var(--on-deep-soft);
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-sm);
  color: var(--hazard-deep);
}
.section-tag::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--hazard);
  flex: none;
  border-radius: 2px;
}
.ground-deep .section-tag {
  color: var(--hazard);
}

/* El rail del corredor solo tiene sentido en pantallas anchas */
.spine {
  display: none;
}

/* ---------- Botones ----------
   Grandes y con etiqueta legible. Nada de mono diminuto. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  padding: 19px 34px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
    transform 0.12s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--hazard);
  color: var(--ink);
  border-color: var(--hazard);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: #ffb84d;
  border-color: #ffb84d;
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: var(--page);
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover {
  border-color: var(--corridor);
  color: var(--corridor);
  background: var(--corridor-soft);
}
.ground-deep .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.ground-deep .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--tint-2);
  border-color: var(--tint-2);
  color: var(--ink-faint);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn .tick {
  width: 8px;
  height: 8px;
  border-right: 2.5px solid currentColor;
  border-top: 2.5px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* ---------- Panel ---------- */

.panel {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.ground-deep .panel {
  background: var(--deep-2);
  border-color: #2a3a52;
  box-shadow: none;
}
.panel-flagged {
  border-top: 4px solid var(--hazard);
}

/* ---------- Bloque de autoridad ---------- */

.stamp {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--page);
  overflow: hidden;
}
.stamp > * {
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-right: 1px solid var(--rule);
}
.stamp > *:last-child {
  border-right: 0;
}
.stamp b {
  color: var(--hazard-deep);
  font-weight: 600;
}
.ground-deep .stamp {
  background: var(--deep-2);
  border-color: #2a3a52;
}
.ground-deep .stamp > * {
  color: var(--on-deep-soft);
  border-color: #2a3a52;
}
.ground-deep .stamp b {
  color: var(--hazard);
}

/* ---------- Llamada sobre foto ---------- */

.callout {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.callout-leader {
  width: clamp(28px, 5vw, 64px);
  height: 2px;
  background: var(--hazard);
  position: relative;
  flex: none;
}
.callout-leader::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 2px;
  height: 12px;
  background: var(--hazard);
}
.callout-body {
  background: var(--hazard);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---------- Marcador de via ---------- */

.waypoint {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
}
.waypoint::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--hazard);
  background: var(--page);
  border-radius: var(--r-sm);
  transform: rotate(45deg);
}
.ground-deep .waypoint::before {
  background: var(--deep);
}
.waypoint span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--hazard-deep);
}
.ground-deep .waypoint span {
  color: var(--hazard);
}

/* ---------- Barra de anuncio ----------
   Una franja oscura sobre la cabecera. Dice tres cosas que el
   visitante quiere saber antes de leer nada: que estamos operando,
   hasta donde llegamos y con que autoridad. Es el primer golpe de
   color oscuro de la pagina, y lo que evita que el sitio empiece
   en blanco absoluto. */

.topbar {
  background: var(--deep);
  color: var(--on-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.topbar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px var(--s-md);
  padding-block: 9px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  color: #fff;
}
/* El punto late despacio: dice "operando ahora" sin escribirlo. */
.topbar-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clear);
  box-shadow: 0 0 0 0 rgba(63, 178, 127, 0.6);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .topbar-status::before {
    animation: topbar-pulse 2.6s ease-out infinite;
  }
}
@keyframes topbar-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 178, 127, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(63, 178, 127, 0);
  }
}
.topbar-sep {
  color: rgba(255, 255, 255, 0.28);
}
.topbar-item {
  color: var(--on-deep-soft);
}
.topbar-item b {
  color: var(--hazard);
  font-weight: 500;
}
.topbar a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 165, 36, 0.6);
}
.topbar a:hover {
  color: var(--hazard);
}
/* En telefono solo sobrevive lo esencial: el resto compite con el
   propio titular de la pagina. */
@media (max-width: 719px) {
  .topbar-hide-sm {
    display: none;
  }
}

/* La cabecera se pega debajo de la barra, no encima de ella. */
.masthead {
  top: 0;
}

/* ---------- Cabecera ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  min-height: 100px;
  padding-block: 12px;
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.brand img {
  height: clamp(38px, 9vw, 52px);
  width: auto;
  max-width: none;
}

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  /* Se adapta al ancho disponible en vez de partirse en dos
     lineas: "LOAD BOARD" en dos renglones rompia la cabecera. */
  font-size: clamp(1.25rem, 1.35vw, 1.5rem);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.nav a:hover {
  background: var(--tint);
  color: var(--corridor);
}
.nav a[aria-current="page"] {
  color: var(--corridor);
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 3px;
  background: var(--hazard);
  border-radius: 2px;
}

/* Llamar y cotizar, uno encima del otro: ocupan menos ancho y
   dejan sitio a la navegacion. */
.masthead-actions {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-left: var(--s-sm);
  flex: none;
}
.masthead-actions .btn {
  padding: 8px 18px;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.masthead-actions .btn-ghost {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lang {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: none;
  margin-left: var(--s-sm);
}
/* En la cabecera el selector solo cabe cuando hay sitio para todo.
   Debajo de eso estorba: aplastaba el boton de menu a la mitad de
   su tamano. El menu desplegable ya trae su propio selector, asi
   que no se pierde nada. */
.masthead-in > .lang {
  display: none;
}
@media (min-width: 1200px) {
  .masthead-in > .lang {
    display: flex;
  }
}
.lang button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--page);
  border: 0;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.lang button svg {
  width: 22px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.18);
}
.lang button:hover {
  background: var(--tint);
  color: var(--ink);
}
.lang button[aria-pressed="true"] {
  background: var(--corridor);
  color: #fff;
}

.burger {
  margin-left: auto;
  flex: none;
  background: var(--page);
  border: 2px solid var(--rule);
  border-radius: var(--r-sm);
  width: 52px;
  height: 48px;
  display: grid;
  place-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 12px;
}
.burger i {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.drawer {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--page);
  padding: var(--s-sm) 0 var(--s-lg);
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.drawer.open {
  display: block;
}
.drawer a {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--ink);
  text-decoration: none;
}
.drawer .btn {
  width: 100%;
  margin-top: var(--s-sm);
}
.drawer .lang {
  margin: var(--s-md) 0 0;
  width: fit-content;
}

@media (min-width: 1200px) {
  .nav,
  .masthead-actions {
    display: flex;
  }
  .burger {
    display: none;
  }
  .drawer {
    display: none !important;
  }
}

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

.hero {
  position: relative;
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero-chart {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
}
.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-xl);
  padding-block: clamp(44px, 6vw, 84px) clamp(52px, 7vw, 96px);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-in {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.86fr);
    gap: clamp(40px, 5vw, 76px);
    align-items: start;
  }
  /* El panel alinea su borde superior con el del titular, no con
     el de toda la columna: el antetitulo va arriba del titulo y
     centrar contra la columna entera dejaba el panel colgando. */
  .hero-in .survey {
    margin-top: calc(var(--kicker-h, 18px) + 20px);
  }
}

.hero-copy .display {
  margin-bottom: var(--s-md);
}
.hero-copy .display em {
  font-style: normal;
  color: var(--corridor);
}
.hero-lede {
  color: var(--ink-soft);
  font-size: 1.375rem;
  line-height: 1.55;
  max-width: 46ch;
  margin-bottom: var(--s-lg);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-bottom: var(--s-lg);
}

/* La foto es el fondo de todo el hero. Desenfoque suave: lo justo
   para que el titular gane el contraste, pero se sigue viendo que
   son maquinas. Encima va un velo claro, no un borron. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  filter: blur(2px) saturate(1.12) contrast(1.04);
  transform: scale(1.03);
}
/* Dos velos: uno fuerte y estrecho detras del texto, otro muy
   leve sobre el resto. Asi el titular conserva su contraste y la
   foto se sigue viendo como foto. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.88) 30%,
      rgba(255, 255, 255, 0.34) 56%,
      rgba(255, 255, 255, 0.18) 100%
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

/* ---------- Panel de cotizacion ---------- */

.survey {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.survey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: 20px 26px;
  border-bottom: 1px solid var(--rule);
  background: var(--tint);
}
.survey-head .label {
  color: var(--ink);
  font-size: 1rem;
}
.survey-status {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.survey-status::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
}
.survey-status[data-state="plotted"] {
  color: var(--corridor);
}
.survey-status[data-state="sent"] {
  color: var(--clear);
}

.survey-map {
  position: relative;
  height: 112px;
  background: var(--corridor-soft);
  border-bottom: 1px solid var(--rule);
}
.survey-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.survey-map .route {
  fill: none;
  stroke: var(--corridor);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 0.9s var(--ease);
}
.survey-map.plotted .route {
  stroke-dashoffset: 0;
}
.map-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.map-node i {
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--page);
  border: 2.5px solid var(--hazard);
  transform: rotate(45deg);
}
.map-node b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.map-node-a {
  left: 10.5%;
  top: 71%;
  transform: translate(-6px, -50%);
}
.map-node-b {
  right: 10.5%;
  top: 23%;
  transform: translate(6px, -50%);
  flex-direction: row-reverse;
}

.survey-body {
  padding: 26px;
}

/* Hueco reservado para el formulario que sirve el FMS */
.embed-slot {
  border: 2px dashed var(--rule);
  border-radius: var(--r-md);
  padding: 26px;
  text-align: left;
  background: var(--tint);
}
.embed-slot-tag {
  color: var(--hazard-deep);
  margin-bottom: 10px;
}
.embed-slot-note {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin-bottom: var(--s-md);
}
.embed-slot-actions {
  display: grid;
  gap: 10px;
}
.embed-slot-actions .btn {
  width: 100%;
}

/* ---------- Campos ---------- */

.field {
  margin-bottom: 18px;
}
.field > label,
.fieldset-label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--page);
  border: 2px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 15px 16px;
  color: var(--ink);
  font-size: 1.0625rem;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--corridor);
  box-shadow: var(--focus);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px),
    calc(100% - 15px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.field .hint {
  display: block;
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--ink-faint);
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: #c0392b;
}
.field.invalid > label {
  color: #c0392b;
}
.field .error {
  display: none;
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #c0392b;
}
.field.invalid .error {
  display: block;
}
.field-row {
  display: grid;
  gap: 18px;
}
@media (min-width: 440px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Barra de confianza ---------- */

.creds {
  border-bottom: 1px solid var(--rule);
  padding-block: 0;
}
.creds-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm) var(--s-lg);
  padding-block: var(--s-md);
}
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
}
.rating {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.14s var(--ease);
}
.rating:hover {
  color: var(--corridor);
}
.rating b {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.625rem;
  font-family: var(--font-display);
}

/* ---------- Rotulo de banda ---------- */

.band-title {
  text-align: center;
  padding-block: var(--s-lg) var(--s-md);
  color: var(--ink-faint);
}

/* ---------- Mosaico de cargas ----------
   Visual antes que texto: fotos grandes, a sangre, con el rotulo
   encima. Nada de tarjetas del ancho de un parrafo. */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 780px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(190px, 22vw);
  }
  /* Dos piezas mandan; el resto acompana. */
  .mosaic > :nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .mosaic > :nth-child(6) {
    grid-column: span 2;
  }
}
@media (min-width: 1200px) {
  .mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(210px, 17vw);
  }
  .mosaic > :nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .mosaic > :nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .mosaic > :nth-child(9) {
    grid-column: span 2;
  }
}

.cargo {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background: var(--tint-2);
}
.cargo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cargo:hover img {
  transform: scale(1.06);
}
.cargo-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-md);
  background: linear-gradient(
    to top,
    rgba(9, 17, 30, 0.94),
    rgba(9, 17, 30, 0.55) 62%,
    transparent
  );
  color: #fff;
}
.cargo-body .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.1vw, 2.25rem);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 5px;
  color: #fff;
}
.cargo-body .ann {
  color: #ffd489;
  font-size: 1rem;
}

/* ---------- Leyenda ---------- */

.legend {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
@media (min-width: 760px) {
  .legend {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-xl);
  }
}
.legend-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.legend-mark {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--corridor-soft);
  border-radius: var(--r-md);
}
.legend-mark svg {
  width: 34px;
  height: 34px;
}
.legend-item .title {
  margin-bottom: 4px;
}
.legend-item p {
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.55;
}

/* ---------- Corredor: proceso ---------- */

.corridor {
  position: relative;
  display: grid;
  gap: 0;
}
.corridor::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  bottom: 30px;
  width: 3px;
  background: var(--rule);
  border-radius: 2px;
}
.corridor::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  width: 3px;
  height: var(--draw, 0%);
  background: var(--corridor);
  border-radius: 2px;
  transition: height 0.6s var(--ease);
}
.leg {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-md);
  padding-block: var(--s-md);
  align-items: start;
}
/* En movil son dos columnas y tres hijos, asi que el texto caia
   solo en la columna del diamante, de 48px, y salia una palabra
   por linea. Va en la segunda columna, alineado bajo el titulo. */
.leg > div {
  grid-column: 2;
}
@media (min-width: 900px) {
  .leg {
    grid-template-columns: 48px minmax(0, 320px) minmax(0, 1fr);
    gap: var(--s-lg);
    align-items: baseline;
  }
  /* Con tres columnas los tres hijos entran en una sola fila. */
  .leg > div {
    grid-column: auto;
  }
}
.leg-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
.leg p {
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1.55;
}
.leg .ann {
  display: block;
  margin-top: 10px;
  color: var(--hazard-deep);
  font-weight: 500;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.leg .waypoint::before {
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.leg.lit .waypoint::before {
  background: var(--hazard);
}
.leg.lit .waypoint span {
  color: var(--ink);
}

/* ---------- Cobertura ---------- */

.coverage {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 940px) {
  .coverage {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.85fr);
    gap: clamp(36px, 4vw, 72px);
  }
}
.coverage-map {
  position: relative;
  border-radius: var(--r-md);
  background: var(--tint);
  padding: var(--s-sm);
}
.coverage-map img {
  width: 100%;
  height: auto;
  display: block;
}
.coverage-map svg {
  position: absolute;
  inset: var(--s-sm);
  width: calc(100% - var(--s-sm) * 2);
  height: calc(100% - var(--s-sm) * 2);
  overflow: visible;
}
/* ---------- Pines por estado ----------
   Un pin en cada estado, encendiendose por turnos al azar. No es
   adorno: dice "operamos en todos", que es exactamente lo que la
   lista de al lado afirma en palabras. */

.pin-dot {
  fill: var(--pin);
  opacity: 0.3;
}
.pin-mark path {
  fill: var(--pin);
  stroke: #fff;
  stroke-width: 2;
}
.pin-eye {
  fill: #fff;
}
.pin-mark {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scale(0) translateY(6px);
  opacity: 0;
}
.pin-ring {
  fill: none;
  stroke: var(--pin);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pin-mark {
    animation: pin-drop var(--dur, 11s) var(--delay, 0s) infinite;
  }
  .pin-ring {
    animation: pin-ring var(--dur, 11s) var(--delay, 0s) infinite;
  }
}
@keyframes pin-drop {
  0%, 3% {
    transform: scale(0) translateY(8px);
    opacity: 0;
  }
  9% {
    transform: scale(1.16) translateY(0);
    opacity: 1;
  }
  12%, 58% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  66%, 100% {
    transform: scale(0) translateY(8px);
    opacity: 0;
  }
}
@keyframes pin-ring {
  0%, 8% {
    transform: scale(0.3);
    opacity: 0;
  }
  13% {
    opacity: 0.7;
  }
  30%, 100% {
    transform: scale(3);
    opacity: 0;
  }
}
/* Sin animacion, los pines se quedan puestos: el mensaje es el
   mismo aunque no haya movimiento. */
@media (prefers-reduced-motion: reduce) {
  .pin-mark {
    transform: none;
    opacity: 1;
  }
}

.lanes {
  display: grid;
  border-top: 2px solid var(--ink);
}
.lane {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-sm);
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.lane b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  text-transform: uppercase;
}
.lane .ann {
  color: var(--ink-soft);
}

/* ---------- Resenas ---------- */

.reports {
  display: grid;
  gap: var(--s-lg);
}
@media (min-width: 680px) {
  .reports {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1060px) {
  .reports {
    grid-template-columns: repeat(3, 1fr);
  }
}
.report {
  display: flex;
  flex-direction: column;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-md);
  box-shadow: var(--shadow-sm);
}
.report::before {
  content: "★★★★★";
  display: block;
  color: var(--hazard);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.report blockquote {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: var(--s-md);
  color: var(--ink);
}
.report figcaption {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--rule);
}
.report figcaption b {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  display: block;
}
.report-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Marcador de rostro: iniciales, no una cara de banco de imagenes.
   Poner la foto de un desconocido junto al nombre de un cliente
   real seria inventar a la persona. */
.avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--corridor-soft);
  border: 2px solid var(--corridor);
  color: var(--corridor-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.report .src {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.report .measure {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.reports-more {
  margin-top: var(--s-xl);
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq {
  border-top: 2px solid var(--ink);
  max-width: 940px;
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  text-transform: uppercase;
  line-height: 1.15;
  transition: color 0.14s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--corridor);
}
.faq summary .sign {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
}
.faq summary .sign::before,
.faq summary .sign::after {
  content: "";
  position: absolute;
  background: var(--hazard-deep);
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.faq summary .sign::before {
  inset: 11px 0 auto 0;
  height: 4px;
}
.faq summary .sign::after {
  inset: 0 11px auto 11px;
  height: 26px;
  width: 4px;
}
.faq details[open] summary .sign::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq details > .faq-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq details > .faq-body > div {
  overflow: hidden;
  min-height: 0;
}
.faq details.collapsing > .faq-body,
.faq details.expanding > .faq-body {
  grid-template-rows: 0fr;
}
.faq details.expanding.run > .faq-body {
  grid-template-rows: 1fr;
}
.faq .faq-body p {
  padding-bottom: var(--s-md);
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ---------- Puertas ---------- */

.doors {
  display: grid;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
}
@media (min-width: 720px) {
  .doors {
    grid-template-columns: 1fr 1fr;
  }
}
.door {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
    transform 0.16s var(--ease);
}
.door:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ground-deep .door {
  background: var(--deep-2);
  border-color: #2a3a52;
}
.ground-deep .door:hover {
  border-color: var(--hazard);
}
.door .title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  text-transform: uppercase;
}
.door p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.ground-deep .door p {
  color: var(--on-deep-soft);
}
.door .label {
  margin-top: auto;
  padding-top: var(--s-sm);
  color: var(--hazard-deep);
  font-size: 1rem;
}
.ground-deep .door .label {
  color: var(--hazard);
}

/* ---------- Contacto ---------- */

.contact {
  display: grid;
  gap: var(--s-xl);
}
@media (min-width: 940px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(40px, 5vw, 84px);
  }
}
.contact-facts {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: var(--s-lg);
}
.contact-facts a,
.contact-facts p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-md);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: #fff;
  transition: color 0.14s var(--ease);
}
.contact-facts a:hover {
  color: var(--hazard);
}
.contact-facts .k {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--on-deep-soft);
  min-width: 104px;
}
.contact-photo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

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

.footer {
  border-top: 1px solid var(--deep-2);
  padding-block: var(--s-xl) var(--s-lg);
}
/* El pie se acomoda solo: el navegador mete tantas columnas como
   quepan de 150px. Sin anchos inventados, porque un punto de corte
   a ojo siempre deja alguna pantalla con una columna sola y medio
   pie vacio al lado. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-lg) var(--s-md);
  align-items: start;
}

/* Las cinco columnas completas entran a partir de unos 860px. Por
   debajo de eso la marca se pone de ancho completo y hace de
   cabecera del pie, y las cuatro listas se reparten el resto. Si
   se dejara en columna, quedaria alta y flaca al lado de tres
   listas cortas. */
@media (max-width: 859px) {
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Con sitio de sobra, la marca y el alta al boletin piden mas
   ancho que una lista de enlaces: una lleva parrafo y la otra un
   campo de texto. */
@media (min-width: 1240px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
    gap: var(--s-lg) var(--s-xl);
  }
}
.footer h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-sm);
}
.footer li {
  margin-bottom: 11px;
}
.footer li a {
  font-size: 1.125rem;
  color: var(--on-deep-soft);
  text-decoration: none;
  transition: color 0.14s var(--ease);
}
.footer li a:hover {
  color: var(--hazard);
}
.footer-brand img {
  height: 46px;
  width: auto;
  max-width: none;
  margin-bottom: var(--s-md);
}
.footer-brand p {
  color: var(--on-deep-soft);
  font-size: 1.0625rem;
  max-width: 32ch;
  margin-bottom: var(--s-md);
}
.socials {
  display: flex;
  gap: var(--s-xs);
}
.socials a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  color: var(--on-deep-soft);
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease),
    background 0.14s var(--ease);
}
.socials a:hover {
  color: var(--ink);
  background: var(--hazard);
  border-color: var(--hazard);
}
.socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-md);
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9375rem;
  color: var(--on-deep-soft);
}
.footer-base a {
  text-decoration: none;
}
.footer-base a:hover {
  color: var(--hazard);
}

/* ---------- Barra de accion movil ---------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px -8px rgba(15, 27, 45, 0.24);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
}
.actionbar.show {
  transform: translateY(0);
}
.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 22px;
  background: var(--page);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--ink);
}
.actionbar a.primary {
  background: var(--hazard);
  color: var(--ink);
}
.actionbar svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
@media (min-width: 1200px) {
  .actionbar {
    display: none;
  }
}

/* ---------- Pagina de servicios: matriz comparativa ----------
   Los tres datos de cada servicio son las mismas tres preguntas en
   los cinco. Repetirlas cinco veces en bloques identicos obliga a
   recordar; enfrentarlas en una matriz deja compararlas de un
   vistazo, que es como lee este publico.

   En escritorio: una columna de rotulos y cinco de servicios, cada
   una encabezada por una foto real. En movil se rompe en tarjetas
   apiladas y cada celda recupera su propio rotulo. */

.servicenav {
  position: sticky;
  top: 100px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.servicenav-in {
  display: flex;
  gap: var(--s-xs);
  overflow-x: auto;
  padding-block: 12px;
  scrollbar-width: none;
}
.servicenav-in::-webkit-scrollbar {
  display: none;
}
.servicenav a {
  flex: none;
  padding: 12px 20px;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}
.servicenav a:hover {
  border-color: var(--corridor);
  color: var(--corridor);
}
.servicenav a[aria-current="true"] {
  background: var(--corridor);
  border-color: var(--corridor);
  color: #fff;
}

.matrix {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 1000px) {
  .matrix {
    grid-template-columns: minmax(150px, 0.62fr) repeat(5, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, auto);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .matrix-labels,
  .svc {
    grid-row: span 5;
    display: grid;
    grid-template-rows: subgrid;
  }
}

/* Columna de rotulos: solo tiene sentido cuando hay que comparar */
.matrix-labels {
  display: none;
}
@media (min-width: 1000px) {
  .matrix-labels {
    display: grid;
    background: var(--tint);
  }
  .matrix-labels > * {
    display: flex;
    align-items: center;
    padding: var(--s-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
  }
  .matrix-labels > :first-child {
    border-top: 0;
  }
}

.svc {
  display: grid;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-margin-top: 190px;
}
@media (min-width: 1000px) {
  .svc {
    border: 0;
    border-radius: 0;
  }
}

/* Cabecera de columna: la foto hace el trabajo visual */
.svc-head {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.svc-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.svc:hover .svc-head img {
  transform: scale(1.05);
}
.svc-head-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-md);
  background: linear-gradient(
    to top,
    rgba(9, 17, 30, 0.94),
    rgba(9, 17, 30, 0.5) 58%,
    rgba(9, 17, 30, 0.12)
  );
  color: #fff;
}
.svc-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  color: var(--hazard);
  margin-bottom: 6px;
}
.svc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  line-height: 1.03;
  text-transform: uppercase;
  color: #fff;
}

.svc-cell {
  padding: var(--s-md);
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
}
.svc-cell b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
/* En escritorio el rotulo vive en la columna de la izquierda */
@media (min-width: 1000px) {
  .svc-cell b {
    display: none;
  }
}
.svc-cell.is-spec {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--corridor);
  background: var(--corridor-soft);
}

/* Servicio apuntado desde el pie o desde los chips */
.svc:target,
.svc.is-active {
  box-shadow: inset 0 0 0 3px var(--hazard);
}

/* ---------- Pagina de plataforma ---------- */

/* Dos publicos enfrentados: el que manda la carga y el que la
   lleva. Puestos lado a lado se entiende de un vistazo que el
   sistema sirve a los dos. */
.twoside {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 860px) {
  .twoside {
    grid-template-columns: 1fr 1fr;
  }
}
.side {
  padding: var(--s-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--corridor);
}
.side-alt {
  border-top-color: var(--hazard);
}
.side-tag {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--corridor);
  margin-bottom: 10px;
}
.side-alt .side-tag {
  color: var(--hazard-deep);
}
.side-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: var(--s-md);
}
.side-list {
  display: grid;
  gap: 14px;
}
.side-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.side-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--corridor);
  transform: rotate(45deg);
}
.side-alt .side-list li::before {
  background: var(--hazard);
}

/* Bolsa de carga, sobre fondo oscuro */
.boardrow {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 820px) {
  .boardrow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.boardcell {
  background: var(--deep);
  padding: var(--s-md);
}
.boardcell-k {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hazard);
  margin-bottom: 10px;
}
.boardcell-v {
  color: var(--on-deep-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Lo que se construye a pedido */
.prodgrid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 680px) {
  .prodgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .prodgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.prod {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
    transform 0.16s var(--ease);
}
.prod:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.prod-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--corridor-soft);
  color: var(--corridor);
  margin-bottom: var(--s-md);
}
.prod-mark svg {
  width: 32px;
  height: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.prod p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ---------- Freight News ----------
   La seccion de blog. Las tarjetas y el articulo comparten el
   mundo visual del resto: papel, azul de ruta y ambar de senal.
   El articulo se lee, asi que ahi la medida de linea y el ritmo
   vertical mandan sobre cualquier otra cosa. */

/* Enlace destacado en la cabecera */
.nav a.nav-news,
.drawer a.nav-news {
  color: var(--hazard-deep);
}
.nav a.nav-news:hover {
  color: var(--hazard-deep);
  background: var(--hazard-soft);
}

/* --- Rejilla de tarjetas --- */

.newsgrid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 720px) {
  .newsgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .newsgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* En el indice el primero manda: ocupa dos columnas y la foto
     se pone horizontal. */
  .newsgrid > .newscard-lead {
    grid-column: span 2;
  }
  .newsgrid > .newscard-lead .newscard-link {
    flex-direction: row;
  }
  .newsgrid > .newscard-lead .newscard-img {
    flex: 0 0 52%;
    aspect-ratio: auto;
  }
  .newsgrid > .newscard-lead .newscard-title {
    font-size: 2rem;
  }
}

.newscard {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.newscard:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.newscard-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.newscard-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tint-2);
}
.newscard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.newscard:hover .newscard-img img {
  transform: scale(1.05);
}
.newscard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-md);
}
.newscard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.newscard-cat {
  color: var(--hazard-deep);
  font-weight: 500;
}
.newscard-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
}
.newscard-excerpt {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* --- Articulo --- */

.post-head {
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 44px);
}
.post-wrap {
  max-width: 820px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-md);
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--corridor);
}
.post-cat {
  color: var(--hazard-deep);
  margin-bottom: 12px;
}
.post-title {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  text-transform: none;
  letter-spacing: -0.01em;
}
.post-excerpt {
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: var(--s-md);
  max-width: 44ch;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--s-md);
  margin-top: var(--s-md);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink-faint);
}

.post-hero {
  max-height: clamp(260px, 42vw, 520px);
  overflow: hidden;
  background: var(--tint-2);
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El cuerpo es para leer: medida corta y aire entre bloques. */
.post-body {
  padding-block: clamp(40px, 5vw, 72px);
}
.post-body > * + * {
  margin-top: var(--s-md);
}
.post-body p {
  font-size: 1.25rem;
  line-height: 1.7;
  max-width: 62ch;
  color: var(--ink);
}
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: var(--s-xl);
}
.post-body h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  margin-top: var(--s-lg);
}
.post-body .bullets,
.post-body .steps {
  max-width: 62ch;
  display: grid;
  gap: 12px;
}
.post-body .bullets li,
.post-body .steps li {
  position: relative;
  padding-left: 34px;
  font-size: 1.1875rem;
  line-height: 1.6;
}
.post-body .bullets li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--hazard);
  transform: rotate(45deg);
}
.post-body .steps {
  counter-reset: step;
}
.post-body .steps li {
  counter-increment: step;
}
.post-body .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--corridor);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--corridor);
}
.post-body blockquote {
  border-left: 4px solid var(--hazard);
  padding-left: var(--s-md);
  max-width: 60ch;
}
.post-body blockquote p {
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 500;
}
.post-body .note {
  background: var(--corridor-soft);
  border-radius: var(--r-md);
  padding: var(--s-md);
  max-width: 62ch;
}
.post-body .note p {
  font-size: 1.125rem;
  margin: 0;
}
.post-figure {
  max-width: none;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Mas articulos --- */

.morerow {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-md);
}
@media (min-width: 720px) {
  .morerow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.morecard {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-md);
  align-items: center;
  padding: var(--s-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.morecard:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-sm);
}
.morecard img {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.morecard span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Suscripcion --- */

.subscribe {
  display: grid;
  gap: var(--s-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .subscribe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 5vw, 84px);
  }
}
.subscribe-form .field > label {
  color: #fff;
}
.subscribe-form .field input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.subscribe-form .field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-form .field input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hazard);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28);
}
.subscribe-form .btn {
  width: 100%;
}
.subscribe-note {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--on-deep-soft);
}
.subscribe-ok {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--s-md);
  border: 2px solid var(--clear);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 1.125rem;
}
.subscribe-ok::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--clear);
  transform: rotate(45deg);
}

/* Bloque de Freight News en el pie.
   Cuando no entra como quinta columna se queda solo en su fila, y
   una caja de 160px con 360 vacios al lado se ve rota. Asi que en
   ese caso toma la fila entera y se pone horizontal: el texto a la
   izquierda y el formulario a la derecha. */
@media (max-width: 1239px) {
  .footer-news {
    grid-column: 1 / -1;
    padding-top: var(--s-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}
@media (max-width: 1239px) and (min-width: 620px) {
  .footer-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    column-gap: var(--s-xl);
    align-items: center;
  }
  .footer-news h3,
  .footer-news p {
    grid-column: 1;
  }
  .footer-news form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .footer-news p {
    margin-bottom: 0;
    max-width: 44ch;
  }
}
.footer-news p {
  color: var(--on-deep-soft);
  font-size: 1rem;
  margin-bottom: var(--s-sm);
}
.footer-news form {
  display: grid;
  gap: 10px;
}
/* Con sitio, el campo y el boton van uno al lado del otro. */
@media (min-width: 420px) {
  .footer-news form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
@media (min-width: 1240px) {
  .footer-news form {
    grid-template-columns: 1fr;
  }
}
.footer-news input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  color: #fff;
  font-size: 1rem;
}
.footer-news input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.footer-news input:focus {
  outline: none;
  border-color: var(--hazard);
}
.footer-news .btn {
  padding: 13px 20px;
  font-size: 1rem;
}

/* ---------- Franjas de carga ----------/* ---------- Pagina de plataforma ---------- */

/* Dos publicos enfrentados: el que manda la carga y el que la
   lleva. Puestos lado a lado se entiende de un vistazo que el
   sistema sirve a los dos. */
.twoside {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 860px) {
  .twoside {
    grid-template-columns: 1fr 1fr;
  }
}
.side {
  padding: var(--s-lg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--corridor);
}
.side-alt {
  border-top-color: var(--hazard);
}
.side-tag {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--corridor);
  margin-bottom: 10px;
}
.side-alt .side-tag {
  color: var(--hazard-deep);
}
.side-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: var(--s-md);
}
.side-list {
  display: grid;
  gap: 14px;
}
.side-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.side-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--corridor);
  transform: rotate(45deg);
}
.side-alt .side-list li::before {
  background: var(--hazard);
}

/* Bolsa de carga, sobre fondo oscuro */
.boardrow {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 820px) {
  .boardrow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.boardcell {
  background: var(--deep);
  padding: var(--s-md);
}
.boardcell-k {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hazard);
  margin-bottom: 10px;
}
.boardcell-v {
  color: var(--on-deep-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Lo que se construye a pedido */
.prodgrid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 680px) {
  .prodgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .prodgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.prod {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
    transform 0.16s var(--ease);
}
.prod:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.prod-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--corridor-soft);
  color: var(--corridor);
  margin-bottom: var(--s-md);
}
.prod-mark svg {
  width: 32px;
  height: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.prod p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ---------- Freight News ----------
   La seccion de blog. Las tarjetas y el articulo comparten el
   mundo visual del resto: papel, azul de ruta y ambar de senal.
   El articulo se lee, asi que ahi la medida de linea y el ritmo
   vertical mandan sobre cualquier otra cosa. */

/* Enlace destacado en la cabecera */
.nav a.nav-news,
.drawer a.nav-news {
  color: var(--hazard-deep);
}
.nav a.nav-news:hover {
  color: var(--hazard-deep);
  background: var(--hazard-soft);
}

/* --- Rejilla de tarjetas --- */

.newsgrid {
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 720px) {
  .newsgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .newsgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* En el indice el primero manda: ocupa dos columnas y la foto
     se pone horizontal. */
  .newsgrid > .newscard-lead {
    grid-column: span 2;
  }
  .newsgrid > .newscard-lead .newscard-link {
    flex-direction: row;
  }
  .newsgrid > .newscard-lead .newscard-img {
    flex: 0 0 52%;
    aspect-ratio: auto;
  }
  .newsgrid > .newscard-lead .newscard-title {
    font-size: 2rem;
  }
}

.newscard {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.newscard:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.newscard-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.newscard-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tint-2);
}
.newscard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.newscard:hover .newscard-img img {
  transform: scale(1.05);
}
.newscard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-md);
}
.newscard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.newscard-cat {
  color: var(--hazard-deep);
  font-weight: 500;
}
.newscard-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
}
.newscard-excerpt {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* --- Articulo --- */

.post-head {
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 44px);
}
.post-wrap {
  max-width: 820px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-md);
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--corridor);
}
.post-cat {
  color: var(--hazard-deep);
  margin-bottom: 12px;
}
.post-title {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  text-transform: none;
  letter-spacing: -0.01em;
}
.post-excerpt {
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: var(--s-md);
  max-width: 44ch;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--s-md);
  margin-top: var(--s-md);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink-faint);
}

.post-hero {
  max-height: clamp(260px, 42vw, 520px);
  overflow: hidden;
  background: var(--tint-2);
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El cuerpo es para leer: medida corta y aire entre bloques. */
.post-body {
  padding-block: clamp(40px, 5vw, 72px);
}
.post-body > * + * {
  margin-top: var(--s-md);
}
.post-body p {
  font-size: 1.25rem;
  line-height: 1.7;
  max-width: 62ch;
  color: var(--ink);
}
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: var(--s-xl);
}
.post-body h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  margin-top: var(--s-lg);
}
.post-body .bullets,
.post-body .steps {
  max-width: 62ch;
  display: grid;
  gap: 12px;
}
.post-body .bullets li,
.post-body .steps li {
  position: relative;
  padding-left: 34px;
  font-size: 1.1875rem;
  line-height: 1.6;
}
.post-body .bullets li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--hazard);
  transform: rotate(45deg);
}
.post-body .steps {
  counter-reset: step;
}
.post-body .steps li {
  counter-increment: step;
}
.post-body .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--corridor);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--corridor);
}
.post-body blockquote {
  border-left: 4px solid var(--hazard);
  padding-left: var(--s-md);
  max-width: 60ch;
}
.post-body blockquote p {
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 500;
}
.post-body .note {
  background: var(--corridor-soft);
  border-radius: var(--r-md);
  padding: var(--s-md);
  max-width: 62ch;
}
.post-body .note p {
  font-size: 1.125rem;
  margin: 0;
}
.post-figure {
  max-width: none;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Mas articulos --- */

.morerow {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-md);
}
@media (min-width: 720px) {
  .morerow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.morecard {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-md);
  align-items: center;
  padding: var(--s-sm);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--page);
  text-decoration: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.morecard:hover {
  border-color: var(--corridor);
  box-shadow: var(--shadow-sm);
}
.morecard img {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.morecard span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Suscripcion --- */

.subscribe {
  display: grid;
  gap: var(--s-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .subscribe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 5vw, 84px);
  }
}
.subscribe-form .field > label {
  color: #fff;
}
.subscribe-form .field input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.subscribe-form .field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-form .field input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hazard);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.28);
}
.subscribe-form .btn {
  width: 100%;
}
.subscribe-note {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--on-deep-soft);
}
.subscribe-ok {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--s-md);
  border: 2px solid var(--clear);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 1.125rem;
}
.subscribe-ok::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--clear);
  transform: rotate(45deg);
}

/* Bloque de Freight News en el pie.
   Cuando no entra como quinta columna se queda solo en su fila, y
   una caja de 160px con 360 vacios al lado se ve rota. Asi que en
   ese caso toma la fila entera y se pone horizontal: el texto a la
   izquierda y el formulario a la derecha. */
@media (max-width: 1239px) {
  .footer-news {
    grid-column: 1 / -1;
    padding-top: var(--s-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}
@media (max-width: 1239px) and (min-width: 620px) {
  .footer-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    column-gap: var(--s-xl);
    align-items: center;
  }
  .footer-news h3,
  .footer-news p {
    grid-column: 1;
  }
  .footer-news form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .footer-news p {
    margin-bottom: 0;
    max-width: 44ch;
  }
}
.footer-news p {
  color: var(--on-deep-soft);
  font-size: 1rem;
  margin-bottom: var(--s-sm);
}
.footer-news form {
  display: grid;
  gap: 10px;
}
/* Con sitio, el campo y el boton van uno al lado del otro. */
@media (min-width: 420px) {
  .footer-news form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
@media (min-width: 1240px) {
  .footer-news form {
    grid-template-columns: 1fr;
  }
}
.footer-news input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  color: #fff;
  font-size: 1rem;
}
.footer-news input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.footer-news input:focus {
  outline: none;
  border-color: var(--hazard);
}
.footer-news .btn {
  padding: 13px 20px;
  font-size: 1rem;
}

/* ---------- Franjas de carga ----------
   Fotos reales de equipos que la empresa ya movio. Van a sangre y
   sin recuadro: son la prueba, no una ilustracion. */

.loadstrip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
@media (min-width: 720px) {
  .loadstrip {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .loadstrip-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
.loadstrip figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint-2);
}
.loadstrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.loadstrip figure:hover img {
  transform: scale(1.05);
}

/* ---------- Carrusel de cargas ----------
   Se desliza de verdad: rueda, arrastre, flechas y teclado. El
   scroll nativo hace el trabajo pesado, asi que funciona en tactil
   sin nada extra y se puede recorrer con Tab. */

.rail {
  position: relative;
}
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 30vw);
  gap: 3px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.rail-track::-webkit-scrollbar {
  display: none;
}
.rail-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
@media (min-width: 720px) {
  .rail-track {
    grid-auto-columns: minmax(300px, 23vw);
  }
}
@media (min-width: 1200px) {
  .rail-track {
    grid-auto-columns: minmax(340px, 19vw);
  }
}
.rail-track > figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint-2);
  scroll-snap-align: start;
}
.rail-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.rail-track > figure:hover img {
  transform: scale(1.05);
}

.rail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--page);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: opacity 0.2s var(--ease), transform 0.15s var(--ease),
    background 0.15s var(--ease);
}
.rail-nav:hover {
  background: var(--hazard);
  transform: translateY(-50%) scale(1.06);
}
.rail-nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-prev {
  left: 14px;
}
.rail-next {
  right: 14px;
}
.rail-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 719px) {
  .rail-nav {
    width: 46px;
    height: 46px;
  }
  .rail-prev {
    left: 8px;
  }
  .rail-next {
    right: 8px;
  }
}

/* Barra de avance: dice cuanto falta sin ocupar sitio */
.rail-bar {
  height: 4px;
  background: var(--rule);
  margin-top: 3px;
  overflow: hidden;
}
.rail-bar span {
  display: block;
  height: 100%;
  width: var(--seen, 20%);
  background: var(--corridor);
  transition: width 0.15s linear;
}

/* Variante del carril para logos: piezas mas angostas, fondo claro
   y el logo centrado. Comparte comportamiento con el de fotos. */
.rail-logos .rail-track {
  grid-auto-columns: minmax(180px, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .rail-logos .rail-track {
    grid-auto-columns: minmax(220px, 1fr);
  }
}
.rail-logos .rail-track > figure {
  aspect-ratio: auto;
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: var(--s-sm);
  background: var(--page);
}
.ground-tint .rail-logos .rail-track > figure {
  background: var(--tint);
}
.rail-logos img {
  width: auto;
  height: auto;
  max-height: 96px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.92;
}
.rail-logos .rail-track > figure:hover img {
  transform: scale(1.06);
  opacity: 1;
}
.rail-logos-seals img {
  filter: invert(1) grayscale(1);
  opacity: 0.6;
  max-height: 74px;
}
.rail-logos-seals .rail-track > figure:hover img {
  filter: invert(1) grayscale(1);
  opacity: 0.9;
}

/* Franja ancha: una sola foto a lo largo, como corte de respiro */
.loadband {
  position: relative;
  height: clamp(240px, 32vw, 420px);
  overflow: hidden;
}
.loadband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.loadband-copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  background: linear-gradient(
    100deg,
    rgba(9, 17, 30, 0.86) 0%,
    rgba(9, 17, 30, 0.6) 42%,
    rgba(9, 17, 30, 0.15) 100%
  );
}
.loadband-copy .headline {
  color: #fff;
}
.loadband-copy p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
  margin-top: var(--s-sm);
}

/* ---------- Video de presentacion ---------- */

.videoblock {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--deep);
  max-width: 980px;
  margin-inline: auto;
}
.videoblock video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--deep);
}

/* ---------- Equipo ---------- */

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-md);
}
@media (min-width: 620px) {
  .team {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .team {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1160px) {
  .team {
    grid-template-columns: repeat(6, 1fr);
  }
}
.member {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint-2);
  border: 1px solid var(--rule);
}
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.member-open .member-photo img {
  filter: grayscale(1);
  opacity: 0.35;
}
.member-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
}
.member-open .member-name {
  color: var(--ink-faint);
}
.member-role {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.member-langs {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.team-note {
  margin-top: var(--s-lg);
  color: var(--ink-faint);
  max-width: 70ch;
}

/* ---------- Paginas interiores ---------- */

.pagehead {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--tint) 0%, var(--page) 100%);
  padding-block: clamp(52px, 7vw, 96px) clamp(40px, 5vw, 68px);
}
.pagehead .display {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
}
.pagehead p {
  color: var(--ink-soft);
  font-size: 1.25rem;
  max-width: 60ch;
  margin-top: var(--s-md);
}

.wip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--hazard);
  background: var(--hazard-soft);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hazard-deep);
  margin-bottom: var(--s-md);
}
.wip::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--hazard);
  transform: rotate(45deg);
}

.outline {
  display: grid;
  border-top: 2px solid var(--ink);
  max-width: 940px;
}
.outline li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.outline .title {
  margin-bottom: 4px;
}
.outline p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* ---------- Movimiento ---------- */

.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }

  .print > * {
    clip-path: inset(0 0 108% 0);
    transform: translateY(0.16em);
    transition: clip-path 0.85s var(--ease), transform 0.85s var(--ease);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .print.in > *,
  .in .print > * {
    clip-path: inset(0 0 -14% 0);
    transform: none;
  }

  .stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .stagger.in > *,
  .in .stagger > * {
    opacity: 1;
    transform: none;
  }

  .lift {
    opacity: 0;
    transform: translateY(18px);
    animation: lift-in 0.7s var(--ease) forwards;
    animation-delay: calc(0.2s + var(--i, 0) * 110ms);
  }
  @keyframes lift-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .survey {
    opacity: 0;
    transform: translate3d(22px, 12px, 0);
    animation: survey-in 0.85s var(--ease) 0.45s forwards;
  }
  @keyframes survey-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .lane-line {
    stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 1.5s var(--ease);
    transition-delay: calc(var(--i, 0) * 220ms);
  }
  .in .lane-line {
    stroke-dashoffset: 0;
  }
  .lane-node rect {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.2);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(0.5s + var(--i, 0) * 160ms);
  }
  .in .lane-node rect {
    opacity: 1;
    transform: scale(1);
  }

  .hero-route {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: draw-route 2.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
  }
  @keyframes draw-route {
    to {
      stroke-dashoffset: 0;
    }
  }
}

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