/* Letras gigantes partidas en dos líneas alrededor de la camioneta, como la
   referencia («Precision / Delivery»). Se usan en el hero y en el contacto final.
   La primera línea va arriba a la izquierda y la segunda abajo a la derecha;
   con el scroll se separan hacia los lados. */

.hero-gigante { pointer-events: none; }
.hero-gigante .hl-deriva, .hero-gigante .hl-letra { color: inherit; } /* evita la regla general «h1 span» */
.hero-gigante .hl-linea { position: absolute; white-space: nowrap; overflow: hidden; padding: .16em .06em .16em; }
.hero-gigante .hl-deriva { display: inline-block; }

/* letra por letra: entran desde abajo, salen hacia arriba */
.hero-gigante .hl-letra { display: inline-block; }
.hero-gigante .hl-linea { --base: 0ms; }
.hero-gigante .hl-b { --base: 110ms; }
.hero-gigante .hl-espera { --base: 300ms; }
.hero-gigante .hl-b.hl-espera { --base: 410ms; }
.hero-gigante .hl-entra .hl-letra { animation: hl-entra .85s cubic-bezier(.2, .75, .2, 1) both; animation-delay: calc(var(--base) + var(--i) * 34ms); }
.hero-gigante .hl-sale .hl-letra { animation: hl-sale .5s cubic-bezier(.6, 0, .4, 1) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes hl-entra { from { transform: translateY(108%) rotate(7deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hl-sale { to { transform: translateY(-108%) rotate(-5deg); opacity: 0; } }

/* ------------------------------------------------------------------ hero */
#inicio .hero-gigante {
  position: absolute; inset: 0; z-index: 6; margin: 0;
  font-size: clamp(60px, 9.6vw, 190px);
  line-height: .9; letter-spacing: -.055em; font-weight: 500;
  color: var(--ink);
}
#inicio .hero-gigante .hl-a { left: 3.2%; top: 20%; text-shadow: 0 2px 40px rgba(255, 255, 255, .45); transform: translateX(calc(var(--patio-progress, 0) * -4vw)); }
#inicio .hero-gigante .hl-b { right: 3.2%; bottom: clamp(140px, 19vh, 210px); color: var(--yellow); text-shadow: 0 4px 30px rgba(7, 19, 35, .35); transform: translateX(calc(var(--patio-progress, 0) * 4vw)); }

/* cada frase toma un color del logo: CARGA en rojo, la flecha en azul, el camino en amarillo */
#inicio .hero-gigante .hl-tono-rojo { color: var(--red); text-shadow: 0 4px 30px rgba(255, 255, 255, .35); }
#inicio .hero-gigante .hl-tono-azul { color: #1f56c4; text-shadow: 0 4px 30px rgba(255, 255, 255, .4); }
#inicio .hero-gigante .hl-tono-amarillo { color: var(--yellow); }

/* ------------------------------------------------------------------ contacto */
#contacto .contact-scene > div:first-child:not(.contact-stage) { top: 0; bottom: 0; left: 0; right: 0; padding: 7vh 5% 0; }
#contacto .hero-gigante {
  position: absolute; inset: 0; z-index: 3; margin: 0; max-width: none;
  font-size: clamp(54px, 7.6vw, 150px);
  line-height: .9; letter-spacing: -.055em; font-weight: 500;
  color: var(--ink);
}
#contacto .hero-gigante .hl-a { left: 3.2%; top: 11vh; transform: translateX(calc(var(--contact-progress, 0) * -2vw)); }
#contacto .hero-gigante .hl-b { right: 4.5%; bottom: 31vh; color: var(--red); transform: translateX(calc(var(--contact-progress, 0) * 1.5vw)); }
/* el difuminado de los datos se queda solo detrás del texto, sin velar la camioneta */
#contacto .contact-stage .contact-grid { backdrop-filter: none; background: linear-gradient(transparent, #fffffff0 26%, #fff); }

@media (max-width: 760px) {
  /* En teléfono las dos líneas se apilan abajo a la izquierda, sobre el asfalto
     oscuro (blanco + amarillo), justo encima del texto inferior (--hb). */
  #inicio .hero-gigante { font-size: clamp(46px, 15.5vw, 92px); line-height: .86; }
  #inicio .hero-gigante .hl-a { left: 4%; right: auto; top: auto; bottom: calc(var(--hb, 210px) + .98em); color: #fff; text-shadow: 0 2px 22px rgba(7, 19, 35, .45); transform: none; }
  #inicio .hero-gigante .hl-b { left: 4%; right: auto; bottom: calc(var(--hb, 210px) - .02em); transform: none; }
  /* sobre el asfalto oscuro, versiones más luminosas del rojo y el azul del logo */
  #inicio .hero-gigante .hl-tono-rojo { color: #ff4a3d; text-shadow: 0 2px 22px rgba(7, 19, 35, .5); }
  #inicio .hero-gigante .hl-tono-azul { color: #5b8fff; text-shadow: 0 2px 22px rgba(7, 19, 35, .5); }

  /* en teléfono las dos líneas van arriba: abajo están los datos de contacto */
  #contacto .hero-gigante { font-size: clamp(38px, 11.5vw, 80px); }
  #contacto .hero-gigante .hl-a { left: 4%; top: 9vh; }
  #contacto .hero-gigante .hl-b { right: 4%; bottom: auto; top: calc(9vh + 1em); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gigante .hl-letra { animation: none !important; }
  .hero-gigante .hl-linea { transform: none !important; }
}