/* Hero de la home: "el camión de las ocho cajas" (js/hero-camion.js).
   Sin JS o con "reducir movimiento" (.hc--quieto) el SVG queda en su
   cuadro de reposo, ubicado en la zona libre del hero. Con JS (.hc--vivo)
   el SVG ocupa todo el hero y la cámara la maneja el script. */
.hc{position:relative;min-height:100svh;background:#0E2A5C;color:#F7F5F0;overflow:clip;isolation:isolate}
.hc>.hc-escena{grid-area:auto}
.hc-escena{position:absolute;z-index:0;pointer-events:none;top:max(72px,9svh);left:16px;right:16px;height:50svh}
.hc-escena svg,.hc-escena>img{display:block;width:100%;height:100%;overflow:visible}
.hc-escena>img{object-fit:contain}
/* Con JS, la imagen quieta no se muestra: el script la cambia por el SVG inline y arranca la escena. */
@media (scripting:enabled){.hc-escena>img{visibility:hidden}}
.hc-pie{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.hc [data-hc-texto]{max-width:34rem}
.hc .ins-hero-h1{font-size:clamp(2.05rem,4.3vw,4.5rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.hc .ins-hero-rotulo{color:#53BDEB}
@media (min-width:900px){
  .hc-escena{top:max(80px,9svh);bottom:5svh;left:46vw;right:3vw;height:auto}
  .hc [data-hc-texto]{max-width:min(44vw,40rem)}
}
.hc--vivo .hc-escena{inset:0;height:auto}
.hc--vivo .hc-escena svg{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hc-escena svg *{transition:none!important;animation:none!important}}