/* ===== Hero (solo home) ===== */
.hero{position:relative;overflow:hidden;max-width:100%;background:var(--verde);border-radius:0 0 34px 34px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  animation:heroPan 24s ease-in-out infinite alternate}
@keyframes heroPan{from{transform:scale(1.06)}to{transform:scale(1.14) translate(-1.4%,-1.4%)}}
.hero__velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(10,44,34,.95) 0%,rgba(13,59,46,.84) 46%,rgba(13,59,46,.5) 100%)}
/* padding-top generoso: compensa que la nav ya no vive adentro (ahora es
   fija e independiente, ver base.css), para que el H1 no arranque debajo
   de donde flota la barra. */
.hero__inner{position:relative;z-index:2;overflow-x:hidden;max-width:1200px;margin:0 auto;padding:120px 40px 66px}

.hero__cuerpo{display:flex;align-items:center;min-height:378px}
.hero__texto{flex:1;color:#fff;max-width:480px}
.hero__texto h1{font-size:58px;line-height:1.06;font-weight:800;margin:0 0 20px}
.hero__sub{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 30px;max-width:440px}
.hero__acciones{display:flex;gap:16px;flex-wrap:wrap}

/* Bus: entrada lenta desde la derecha con escala, luego flotado suave */
.hero__bus{margin-left:auto;margin-right:-60px;flex:none;width:560px;max-width:52%;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.42))}
.js .hero__bus[data-anim]{transform:translateX(96px) scale(.93);
  transition:opacity 1.25s var(--ease) .3s, transform 1.4s var(--ease) .3s}
.js .hero__bus[data-anim].in{opacity:1;transform:none}
.hero__bus.in{animation:busFloat 6.5s ease-in-out 1.9s infinite}
@keyframes busFloat{0%,100%{transform:none}50%{transform:translateY(-13px)}}

/* H1: las letras caen una a una, enmascaradas por su propio contenedor */
.h1-anim .word{display:inline-block}
.js .h1-anim .char{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .2em;margin-bottom:-.2em}
.js .h1-anim .char > span{display:inline-block;transform:translateY(-120%);
  transition:transform .6s var(--ease);transition-delay:calc(var(--i,0) * .028s)}
.js .h1-anim.in .char > span{transform:translateY(0)}

@media (max-width:900px){
  .hero__inner{padding:96px 22px 46px}
  .hero__cuerpo{flex-direction:column;align-items:flex-start;min-height:0;gap:26px}
  .hero__texto{max-width:none}
  .hero__texto h1{font-size:40px}
  .hero__bus{width:100%;max-width:420px;margin:4px auto 0}
  .hero__bus.in{animation:none}
  /* En mobile el bus va apilado debajo del texto, no al costado: la entrada
     lateral de 96px no tiene sentido ahí y puede acercarse al borde del
     contenedor. La reemplazamos por una entrada vertical/escala, imposible
     de desbordar horizontalmente. */
  .js .hero__bus[data-anim]{transform:translateY(18px) scale(.96);
    transition:opacity 1.1s var(--ease) .3s, transform 1.1s var(--ease) .3s}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg img,.hero__bus.in{animation:none}
}