/* Base compartida mínima. Cada sección conserva sus propios estilos. */
* { box-sizing: border-box; }
body { margin: 0; background: #041e40; }
.express-hero {
  --navy: #041e40;
  --orange: #ff592b;
  --yellow: #ffda16;
  color: #fafafa;
  background: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.express-hero__content {
  padding: 5.7vw 5.6vw 17.5vw;
}
.express-hero__logo { display: block; width: 48%; height: auto; margin-left: -1.5%; }
.express-hero__eyebrow {
  display: flex; align-items: center; gap: 1.6vw;
  margin: 5.4vw 0 5.3vw; color: var(--yellow);
  font-size: 2.15vw; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.express-hero__eyebrow::before { content: ""; width: 6vw; height: .85vw; background: var(--orange); flex-shrink: 0; }
.express-hero__title {
  margin: 0 0 4.4vw -1.5vw;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 11.9vw; line-height: .96; font-weight: 900; font-style: italic;
  letter-spacing: -.035em;
}
.express-hero__title > span { display: block; }
.express-hero__accent { color: var(--yellow); }
.express-hero__title > .express-hero__last-line { font-size: .77em; line-height: 1.15; letter-spacing: -.025em; }
.express-hero__description { margin: 0; font-size: 3.55vw; line-height: 1.34; letter-spacing: .012em; }
.express-hero__cta {
  width: 100%; margin-top: 4.5vw; min-height: 12.2vw; padding: 2vw 2.8vw;
  border: 0; border-radius: 3.6vw; background: var(--orange); color: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 2vw;
  font-family: Arial, sans-serif; font-size: 4.35vw; font-weight: 900; letter-spacing: -.035em;
}
.express-hero__cta[aria-disabled="true"] { cursor: default; }
.express-hero__cta svg { width: 5vw; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.8; }
.express-hero__promise { display: flex; align-items: center; justify-content: center; gap: .25vw; margin-top: 13.4vw; white-space: nowrap; }
.express-hero__speed { width: 14vw; flex-shrink: 0; }
.express-hero__promise-title {
  margin: 0; font-size: 5.8vw; font-weight: 900; letter-spacing: -.055em;
  -webkit-text-stroke: .7vw #06101f; paint-order: stroke fill;
}
.express-hero__promise-description { margin: .45vw 0 0; font-size: 2.9vw; letter-spacing: -.035em; text-shadow: 1px 1px 2px #000; }
.express-hero__scene { border-top: 1.65vw solid var(--orange); }
.express-hero__scene-label { padding: 4.1vw 6vw 0; }
.express-hero__scene-label p { margin: 0 0 2.6vw; font-size: 2.65vw; font-weight: 700; }
.express-hero__scene-label span { display: block; width: 17vw; height: .65vw; background: var(--yellow); position: relative; }
.express-hero__scene-label span::after { content: ""; position: absolute; left: 0; top: 2.3vw; width: 11vw; height: .45vw; background: var(--orange); }
.express-hero__train { display: block; width: 100%; height: auto; margin-top: 2.8vw; }

/* Escritorio: tren de fondo con desvanecido direccional; móvil sin cambios. */
@media (min-width: 900px) {
  .express-hero { position: relative; isolation: isolate; }

  .express-hero__content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 48px 130px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "logo logo"
      "eyebrow eyebrow"
      "title description"
      "title cta"
      "title promise";
    column-gap: clamp(40px, 5vw, 88px);
    grid-template-rows: auto auto 1fr auto 1fr;
  }
  .express-hero__logo { grid-area: logo; width: 260px; margin-left: -12px; }
  .express-hero__eyebrow { grid-area: eyebrow; gap: 12px; margin: 34px 0 32px; font-size: 16px; }
  .express-hero__eyebrow::before { width: 38px; height: 5px; }
  .express-hero__title { grid-area: title; font-size: clamp(60px, 6.3vw, 88px); margin: 0 0 0 -6px; }
  .express-hero__description {
    grid-area: description; align-self: end;
    font-size: clamp(20px, 1.8vw, 25px); line-height: 1.5;
    max-width: 460px; margin: 0 0 26px;
  }
  .express-hero__mobile-break { display: none; }
  .express-hero__cta {
    grid-area: cta; margin: 0; min-height: 76px;
    padding: 18px 22px; border-radius: 22px; gap: 16px;
    font-size: clamp(17px, 1.55vw, 22px); text-align: left; line-height: 1.3;
  }
  .express-hero__cta svg { width: 30px; }
  .express-hero__promise { grid-area: promise; align-self: start; justify-content: flex-start; margin-top: 32px; gap: 8px; white-space: normal; }
  .express-hero__speed { width: 64px; }
  .express-hero__promise-title { font-size: clamp(23px, 2.1vw, 30px); -webkit-text-stroke: 4px #06101f; }
  .express-hero__promise-description { font-size: 15px; line-height: 1.4; margin-top: 5px; max-width: 360px; }
  /* La ilustración es decorativa: no altera el tamaño ni la opacidad del texto. */
  .express-hero__scene {
    position: absolute; inset: 0; z-index: 0;
    border: 0; pointer-events: none;
  }
  .express-hero__scene::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to bottom, #041e40 0%, rgba(4,30,64,.92) 23%, rgba(4,30,64,.15) 65%, #041e40 100%),
      linear-gradient(to right, rgba(4,30,64,.98) 0%, rgba(4,30,64,.94) 34%, rgba(4,30,64,.72) 52%, rgba(4,30,64,.38) 78%, rgba(4,30,64,.28) 100%);
  }
  .express-hero__scene-label {
    position: absolute; z-index: 3;
    bottom: 32px; right: max(48px, calc((100% - 1224px) / 2));
    padding: 0;
  }
  .express-hero__scene-label p { font-size: 14px; margin-bottom: 14px; }
  .express-hero__scene-label span { width: 110px; height: 4px; }
  .express-hero__scene-label span::after { top: 12px; width: 70px; height: 3px; }
  .express-hero__train {
    /* Tamaño y anclaje estables: al estrechar la ventana se recorta el lado izquierdo,
       sin escalar la ilustración ni desplazar verticalmente el tren. */
    position: absolute; top: -50px; right: 0;
    width: 1860px; max-width: none; height: auto; margin: 0;
  }
}
/* Etiqueta del tren exclusiva de móvil y tablet. */
@media (min-width: 900px) {
  .express-hero__scene-label--mobile { display: none; }
}

/* Botón móvil: frase completa en una línea, con espacio para la flecha. */
@media (max-width: 899px) {
  .express-hero__cta { font-size: 3.7vw; padding-inline: 2.4vw; gap: 1.5vw; }
  .express-hero__cta > span { white-space: nowrap; }
}

/* Texto y flecha agrupados en todos los tamaños. */
.express-hero__cta { justify-content: center; gap: clamp(10px, 2vw, 24px); }
.express-hero__cta > span { white-space: nowrap; }
@media (min-width: 900px) {
  .express-hero__cta { font-size: clamp(13px, 1.4vw, 20px); gap: clamp(10px, 1.2vw, 18px); padding-inline: 14px; }
}

/* Laptop pequeña: botón compacto sin afectar móvil ni escritorio amplio. */
@media (min-width: 900px) and (max-width: 1100px) {
  .express-hero__cta { width: fit-content; max-width: 100%; justify-self: start; min-height: 58px; padding: 14px 20px; border-radius: 18px; }
}