/* ==========================================================================
   Express Rentals — landing
   El selector de altura dejó de ser la portada: ahora es la segunda pantalla.
   Arriba entra una primera pantalla amplia y tipográfica — papel blanco, aire,
   y un titular que dice el negocio entero en tres verbos.

   Las ocho familias del catálogo se traducen a tres intenciones: subir (tijeras,
   articuladas, telescópicas), cargar (telehandlers, grúas, montacargas,
   retroexcavadoras) y mover (servicio de plataforma). Es la misma flota,
   dicha como la diría un cliente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Primera pantalla
   -------------------------------------------------------------------------- */
.lp {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 72px);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 5rem var(--s-5) 7rem;

  /* Isla de papel dentro de un sitio que arranca en marino: los tokens se
     redefinen aquí y todo lo de adentro se adapta solo. */
  --bg: #FFFFFF;
  --text: #101A2E;
  --text-dim: #5D6E8A;
  --text-soft: #64738D;
  --line-strong: #C6D0E0;
  background: var(--bg);
  color: var(--text);
}

/* Marcas de regla en los dos cantos: el motivo de medición del sitio, dicho
   sin gritar. Cortas cada 26 px; las largas van en .lp__ticks. */
.lp::before,
.lp::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(35, 50, 104, .22) 0 1px,
    transparent 1px 26px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.lp::before { left: 0; }
.lp::after  { right: 0; }

/* Marcas largas cada quinta división — una regla real no es homogénea. */
.lp__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    repeating-linear-gradient(to bottom, rgba(35, 50, 104, .34) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(to bottom, rgba(35, 50, 104, .34) 0 1px, transparent 1px 130px);
  background-size: 56px 100%, 56px 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.lp__in {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  max-width: 1100px;
  width: 100%;
}

.lp__eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}

/* El titular: la única voz alta de la pantalla. */
.lp__h1 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.9rem, 9.5vw, 8.25rem);
  line-height: .88;
  letter-spacing: -.038em;
  max-width: 15ch;
  text-wrap: balance;
  margin: 0;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Fondo del hero — dos fotos reales de equipo
   Genie (boom, abajo a la derecha) y una grúa (abajo a la izquierda), para
   que a simple vista se entienda que esto es maquinaria pesada. Ambas
   comparten el mismo tratamiento: fondo blanco de estudio + mix-blend-
   mode:multiply, que funde el blanco con el papel sin recortar siluetas —
   sólo queda la línea del equipo.
   -------------------------------------------------------------------------- */
.lp__fondo {
  display: block;
  position: absolute;
  z-index: 1;
  height: auto;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* telescopica.jpg (sin recortar) tiene ~17.5% de margen blanco de fábrica
   debajo de las llantas — su "piso" visual queda arriba del borde de la
   caja. La grúa (grua-fondo.jpg) sí está recortada al ras del contenido,
   así que su "piso" es directamente el borde de su caja. bottom (1%) se
   calibró para que ambos "pisos" caigan en la misma línea. */
.lp__fondo--boom {
  right: -4%;
  bottom: -10%;
  width: min(42%, 520px);
  opacity: .85;
}
.lp__fondo--grua {
  left: -1%;
  bottom: 1%;
  width: min(28%, 335px);
  opacity: .8;
}

@media (max-width: 900px) {
  .lp__fondo--boom { width: min(65%, 380px); opacity: .7; }
  .lp__fondo--grua { display: none; }
}
/* En desktop las fotos viven en el margen lateral que deja el texto
   centrado — en móvil ese margen no existe (el texto ocupa casi todo el
   ancho). En vez de repetir el mismo tratamiento en miniatura, se deja
   una sola máquina (la Genie, no las dos), centrada y de fondo completo,
   mucho más tenue — funciona como textura detrás del texto en vez de
   como acento en una esquina. La grúa se quita para no saturar. */
@media (max-width: 640px) {
  .lp__fondo--grua { display: none; }
  .lp__fondo--boom {
    right: auto;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: 92%;
    opacity: .22;
  }
}

.lp__lead {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Botones cápsula: ruptura deliberada con el paralelogramo del sistema.
   El paralelogramo es correcto para la herramienta; aquí pelea con el aire. */
.lp__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.lp__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: .9rem 1.75rem;
  font-family: var(--display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}
.lp__btn:hover { transform: translateY(-1px); }
.lp__btn svg { flex-shrink: 0; }

.lp__btn--solid { background: var(--marca); color: #fff; }
.lp__btn--solid:hover { background: #16204a; }

.lp__btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.lp__btn--ghost:hover { border-color: var(--text); }

/* Franja de cifras: el respaldo, dicho en voz baja. */
.lp__stats {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.25rem;
  margin-top: var(--s-5);
}
.lp__stats b { color: var(--text); font-weight: 600; }

/* Pie de pantalla: la señal de que abajo hay una herramienta. */
.lp__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.lp__cue svg { animation: lpCue 2.4s var(--ease) infinite; }
@keyframes lpCue {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Header sobre papel
   El header es marino en todo el sitio. Sólo mientras la primera pantalla está
   a la vista se vuelve papel, para no ponerle una tapa oscura al blanco.
   La clase la pone el marcado (la página carga arriba) y la quita app.js al
   salir de la landing: si el JS falla, el header se queda claro — que sobre
   contenido oscuro se lee como una barra blanca, no como un error.
   -------------------------------------------------------------------------- */
.hdr--claro {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F3F6FB;
  --text: #101A2E;
  --text-dim: #5D6E8A;
  --text-soft: #64738D;
  --line: #DDE4EF;
  --line-strong: #B9C5D8;
  --line-soft: #EAEFF6;
  --accent: #2A7FD4;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(16, 26, 46, .06);
}
@supports not (backdrop-filter: blur(1px)) {
  .hdr--claro { background: #FFFFFF; }
}
.hdr--claro .logo img { content: url('../img/logo-wordmark-color.svg'); }

/* --------------------------------------------------------------------------
   Marcas — puente entre la portada blanca y la herramienta oscura
   Franja de logos en movimiento continuo. Fondo claro a propósito: casi
   todas las marcas traen tipografía oscura sin caja de color, así que
   necesitan piso blanco para leerse (sobre el marino de .tool-lbl
   desaparecerían). El movimiento nunca se detiene, ni en hover — es una
   franja de marcas, no un control interactivo. Sin JS: el loop es un
   @keyframes puro sobre transform, así que no depende de que ninguna
   librería termine de inicializar para moverse (la causa más común de
   carruseles "que no se mueven en ciertos equipos"). La segunda <ul> es
   un duplicado aria-hidden para que el loop sea perfecto: a -50% queda
   exactamente donde empezó la primera tanda. Solo se detiene si el
   sistema operativo pide prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.marcas {
  background: #FFFFFF;
  border-top: 1px solid #E4E9F1;
  padding-block: var(--s-6);
}
.marcas__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--s-5); }
.marcas__eyebrow { display: block; text-align: center; color: #64738D; margin-bottom: var(--s-5); }
.marcas__track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marcas__scroll {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marcas-scroll 46s linear infinite;
  animation-play-state: running !important;
}
.marcas__strip {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Casilla de ancho fijo + max-height (sin forzar el logo a llenarla) — es
   la misma proporción que usa globalintegra.mx en "Marcas que confían en
   nosotros": 168px de casilla, tope de 88px, cada quien a su tamaño
   natural dentro de eso. Da el aire "elegante" que un height:100% a huevo
   no da, porque las marcas muy apaisadas (Zoomlion, Sinoboom...) no se
   estiran de más para llenar la altura completa. */
.marcas__strip li {
  flex: 0 0 auto;
  width: 130px;
  padding-inline: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marcas__strip img {
  max-width: 100%;
  max-height: 46px;
  width: auto;
  height: auto;
}

@keyframes marcas-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (min-width: 700px) {
  .marcas__strip li { width: 168px; padding-inline: 10px; }
  .marcas__strip img { max-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .marcas__scroll { animation: none; }
  .marcas__track { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   La herramienta, ya como segunda pantalla
   Deja de ser la portada: se le pone un rótulo que explica qué es y se le
   quita la exigencia de ocupar la pantalla completa.
   -------------------------------------------------------------------------- */
.tool-lbl {
  background: #080D1E;
  color: #FBFCFE;
}
.tool-lbl__in {
  max-width: var(--max);
  margin-inline: auto;
  /* Antes s-8 (48px) arriba: dejaba mucho aire muerto entre el cambio de
     color (blanco -> marino) y el texto, que se sentía "caído". s-6
     (32px) sigue separándolo del borde de arriba sin ser tanto. */
  padding: var(--s-6) var(--s-5) 0;
}
.tool-lbl .eyebrow { color: #4FA3E3; }
.tool-lbl p {
  color: #AFBDD1;
  max-width: 58ch;
  margin-top: var(--s-2);
  font-size: var(--t-base);
}

/* Con la landing arriba, el hero ya no tiene que llenar la pantalla. */
.lp-page .hero__grid { min-height: 0; padding-block: var(--s-6) var(--s-10); }

/* --------------------------------------------------------------------------
   Adaptaciones
   -------------------------------------------------------------------------- */

/* Laptops de 13" (≈720–800 px de alto): el titular a 9.5vw empuja la franja de
   cifras y la señal de scroll fuera de la pantalla. Se aprieta todo un escalón
   en vez de dejar que la primera pantalla se desborde. */
@media (max-height: 860px) {
  .lp { padding-block: 3rem 5rem; }
  .lp__in { gap: .9rem; }
  .lp__h1 { font-size: clamp(2.6rem, 7.4vw, 6.25rem); }
  .lp__stats { margin-top: .7rem; }
}

@media (max-width: 900px) {
  .lp::before, .lp::after, .lp__ticks { display: none; }
}

@media (max-width: 640px) {
  .lp { min-height: calc(100svh - 60px); }
  .lp__h1 { letter-spacing: -.03em; }
  .lp__btn { padding: .8rem 1.4rem; }
  .lp__cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp__cue svg { animation: none; }
  .lp__btn:hover { transform: none; }
}