/* ==========================================================================
   Galindo Gutiérrez · «La carga en movimiento» · cabecera-hero.css
   Cabecera y Acto 1 · Presencia.
   ========================================================================== */

/* 1. Cabecera --------------------------------------------------------------- */

.cabecera {
  position: absolute;
  z-index: 40;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--cabecera-h);
  padding-inline: var(--margen);
  color: var(--blanco);
}
/* Sin JS la cabecera se queda arriba del hero; con JS acompaña y gana fondo al desplazarse. */
.js .cabecera {
  position: fixed;
}
.cabecera::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--profundo);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.1);
  opacity: 0;
  transition: opacity 240ms var(--estado);
}
.cabecera.es-solida::before {
  opacity: 1;
}

/* Logotipo completo en todos los anchos. En pantallas angostas ocupa el espacio que deja el botón
   «Cotizar» (hasta 13,25 rem) y conserva su proporción oficial; nunca se sustituye por el símbolo solo. */
.cabecera__marca {
  display: flex;
  flex: 0 1 13.25rem;
  align-items: center;
  min-width: 0;
  min-height: 2.75rem;
}
.marca {
  display: block;
  width: 100%;
  height: auto;
  /* Las piezas del símbolo se desplazan unos píxeles al armarse: no deben recortarse en el borde del lienzo. */
  overflow: visible;
}

/* El contacto no cede ancho: lo que se ajusta en pantallas angostas es el logotipo, de forma proporcional. */
.cabecera__contacto {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.cabecera__telefono {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  font: 700 1.0625rem/1 var(--titular);
  letter-spacing: 0.03em;
  text-decoration: none;
}
.cabecera__telefono:hover {
  text-decoration: underline;
  text-decoration-color: var(--naranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.cabecera__cotizar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.9rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 2px;
  color: inherit;
  font: 700 1rem/1 var(--titular);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color var(--micro) var(--estado), border-color var(--micro) var(--estado),
    color var(--micro) var(--estado);
}
.cabecera__cotizar svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--naranja);
  transition: color var(--micro) var(--estado);
}
.cabecera__cotizar:hover {
  border-color: var(--naranja);
  background: var(--naranja);
  color: var(--profundo);
}
.cabecera__cotizar:hover svg {
  color: currentColor;
}

@media (max-width: 23.99em) {
  /* A 320 px el botón cede unos píxeles para que el nombre del logotipo siga leyéndose. */
  .cabecera {
    gap: 0.625rem;
  }
  .cabecera__cotizar {
    gap: 0.4rem;
    padding-inline: 0.625rem 0.6875rem;
  }
}
@media (min-width: 48em) {
  .cabecera__marca {
    flex: none;
  }
  .marca {
    width: auto;
    height: 2.875rem;
  }
  .cabecera__telefono {
    display: inline-flex;
  }
}

/* 2. Acto 1 · Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(100svh, 40rem);
  overflow: clip;
  background: var(--profundo);
  color: var(--blanco);
}
/* Luz de piso bajo el vehículo: da suelo y profundidad sin poner capas sobre la fotografía. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: -30%;
  bottom: -26%;
  height: 78%;
  background: radial-gradient(closest-side, var(--marino) 0%, rgb(11 45 82 / 0.5) 48%, rgb(11 45 82 / 0) 100%);
  pointer-events: none;
}

.hero__texto {
  position: relative;
  padding: calc(var(--cabecera-h) + clamp(1rem, 4.5vh, 3rem)) var(--margen) 0 var(--texto-x);
}
.hero__titulo {
  position: relative;
  z-index: 1;
  margin: 0;
  font: 700 clamp(3.5rem, 17.4vw, 6.5rem) / 0.9 var(--titular);
  letter-spacing: -0.022em;
}
/* En pantallas angostas la segunda línea parte sola en dos: «lo que / importa.» */
.hero__linea:last-child > span {
  max-width: 5.2em;
}
.hero__accion {
  position: relative;
  z-index: 3;
  max-width: 21rem;
  margin-top: clamp(1rem, 2.6vh, 2rem);
}
.hero__apoyo {
  margin: 0 0 clamp(1rem, 2.4vh, 1.75rem);
  color: var(--acero-claro);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
}
.hero__llamada {
  margin: 0;
  color: var(--acero-claro);
  font-size: 0.9375rem;
}
.hero__llamada .telefono {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-left: 0.25rem;
  color: var(--blanco);
}

.hero__vehiculo {
  --camion-w: min(136vw, 46rem);
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  /* El alto reservado sale del ancho del camión (proporción 1554:933): nunca invade el CTA ni el teléfono. */
  min-height: calc(var(--camion-w) * 0.6004 + 3.25rem);
  margin: 0;
  pointer-events: none;
}
.hero__camion {
  position: absolute;
  left: 9vw;
  bottom: 3.25rem;
  width: var(--camion-w);
}
/* Sombra de contacto: ancla el camión al piso siguiendo la diagonal de sus ruedas. */
.hero__camion::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: -2%;
  bottom: -5%;
  height: 34%;
  background: radial-gradient(closest-side, rgb(2 9 18 / 0.78) 0%, rgb(2 9 18 / 0.4) 55%, rgb(2 9 18 / 0) 100%);
  transform: rotate(-9deg);
}
.hero__camion picture,
.hero__camion img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__ficha {
  position: absolute;
  right: var(--margen);
  bottom: 1rem;
  max-width: 11rem;
  color: var(--acero-claro);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: right;
}

.hero__sigue {
  position: absolute;
  z-index: 3;
  left: var(--riel-x);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  height: 4.75rem;
  padding: 0 0.5rem 1rem 0.9rem;
  color: var(--acero-claro);
  font-size: 0.875rem;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--micro) var(--estado);
}
.hero__sigue:hover {
  color: var(--blanco);
}
.hero__sigue-linea {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--hilo);
  overflow: hidden;
  background: var(--naranja);
}
.hero__sigue-linea::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1.1rem;
  width: 100%;
  height: 1.1rem;
  background: var(--hielo);
}
.motion .hero__sigue-linea::after {
  animation: sigue 2.6s var(--estado) 1.8s infinite;
}
@keyframes sigue {
  0% {
    transform: translateY(0);
  }
  60%,
  100% {
    transform: translateY(8rem);
  }
}

/* Antes de que el módulo de movimiento tome el control, lo que va a entrar espera fuera de cuadro.
   El apoyo, el CTA y el teléfono nunca se ocultan. */
.intro-pendiente [data-hero-linea] {
  transform: translateY(110%);
}
.intro-pendiente [data-hero-imagen],
.intro-pendiente [data-cabecera-marca],
.intro-pendiente .hero__ficha {
  opacity: 0;
}

@media (min-width: 60em) {
  /* Titular y camión se dimensionan con la misma unidad (--u) para que su relación
     —el titular termina justo antes del espejo— se mantenga en cualquier proporción de pantalla. */
  .hero {
    display: block;
    min-height: max(100svh, 38rem);
    --u: min(1vw, 1.78vh);
  }
  .hero::before {
    left: 26%;
    right: -12%;
    bottom: -34%;
    height: 96%;
  }
  .hero__texto {
    padding-top: calc(var(--cabecera-h) + clamp(1.5rem, 9vh, 6rem));
  }
  .hero__titulo {
    font-size: clamp(3.75rem, calc(var(--u) * 6.8), 10.5rem);
  }
  .hero__linea:last-child > span {
    max-width: none;
  }
  .hero__accion {
    max-width: 20.5rem;
    margin-top: clamp(1.25rem, 3.4vh, 2.5rem);
  }
  .hero__apoyo {
    font-size: 1.125rem;
  }
  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero__vehiculo {
    position: absolute;
    right: calc(var(--u) * -6);
    bottom: clamp(1.5rem, 6.5vh, 4.25rem);
    width: calc(var(--u) * 68);
    min-height: 0;
  }
  .hero__camion {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
  }
  .hero__ficha {
    right: calc(var(--u) * 6 + var(--margen));
    bottom: -0.75rem;
    max-width: none;
    font-size: 0.875rem;
  }
  .hero__sigue {
    height: clamp(4.75rem, 13vh, 7rem);
  }
}