/* ============================================================
   www.tecnopacific.com — hero.css   Hero animado del inicio
   La foto de Buenaventura entra con un corte diagonal y la avenida
   de luz se enciende; luego viajan pulsos de luz por ella, como
   datos por fibra. La máscara hero-luces*.webp recorta solo las
   estelas de luz de cada foto (día y noche).

   Sin JavaScript o con "reducir movimiento" el hero queda quieto
   y completo: las animaciones solo corren con html.hero-anim
   (lo pone el <head>) y arrancan con html.hero-go (hero.js).
   ============================================================ */
:root { --hero-luces: url('/assets/img/general/Inicio/hero-luces.webp'); }
html.hero-dia { --hero-luces: url('/assets/img/general/Inicio/hero-luces-dia.webp'); }

/* ── Título por líneas ── */
.hero h1 .hl { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .hl > span { display: inline-block; }

/* ── Foto lateral (computador y tablet horizontal) ── */
.hero-visual { display: none; }
@media (min-width: 769px) {
  .hero-v::before { display: none; }
  .hero-visual {
    display: block; position: absolute; top: 0; right: 0; z-index: 0;
    width: 48%; height: 100%; overflow: hidden;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero-visual::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 30%);
  }
  .hero-scene { position: absolute; inset: 0; scale: 1.04; translate: var(--mx, 0px) var(--my, 0px); }
  .hero-scene > *, .hero-glow > .hero-flow { position: absolute; inset: 0; }
  .hero-photo { background: var(--hero-img) center / cover no-repeat; }

  /* Capas de luz: solo se ven dentro de las estelas de la avenida */
  .hero-lit, .hero-flow {
    -webkit-mask: var(--hero-luces) center / cover no-repeat;
            mask: var(--hero-luces) center / cover no-repeat;
    mix-blend-mode: screen; opacity: 0;
  }
  .hero-lit { background: #fff; }
  .hero-flow {
    background: linear-gradient(to top,
      rgba(255,255,255,0) 41%, rgba(255,236,200,.75) 47%, #fff 50%,
      rgba(255,236,200,.75) 53%, rgba(255,255,255,0) 59%) 0 0 / 100% 250% no-repeat;
  }
  html:not(.hero-dia) .hero-flow {
    background-image: linear-gradient(to top,
      rgba(255,255,255,0) 41%, rgba(180,230,255,.75) 47%, #fff 50%,
      rgba(180,230,255,.75) 53%, rgba(255,255,255,0) 59%);
  }
  /* De día las estelas ya son claras: el pulso va blanco azulado y se pinta
     encima (sin aclarar), para que contraste con el naranja */
  html.hero-dia .hero-flow {
    mix-blend-mode: normal;
    background-image: linear-gradient(to top,
      rgba(150,215,255,0) 43%, rgba(150,215,255,.85) 48%, #fff 50%,
      rgba(150,215,255,.85) 52%, rgba(150,215,255,0) 57%);
  }
  .hero-glow { filter: blur(10px); }
  html.hero-dia .hero-glow { filter: blur(14px) brightness(1.15); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .hero-visual { width: 50%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
  .hero-visual::after { background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.1) 35%); }
}

/* ── Entrada ── */
html.hero-anim .hero-visual { transition: clip-path 1.4s cubic-bezier(.77,0,.18,1); }
html.hero-anim .hero-scene  { transition: scale 2.8s cubic-bezier(.16,1,.3,1); }
html.hero-anim .hero-v::before { transition: opacity 1.2s ease, transform 2.4s cubic-bezier(.16,1,.3,1); }
html.hero-anim .hero h1 .hl > span { transition: transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: .3s; }
html.hero-anim .hero h1 .hl:nth-child(2) > span { transition-delay: .42s; }
html.hero-anim .hero h1 .hl:nth-child(3) > span { transition-delay: .54s; }
html.hero-anim .hero-sub,
html.hero-anim .hero-btns { transition: opacity .9s ease .8s, transform .9s cubic-bezier(.2,.8,.2,1) .8s; }
html.hero-anim .hero-btns { transition-delay: .95s; }

html.hero-anim:not(.hero-go) .hero-visual { clip-path: polygon(100% 0, 100% 0, 100% 100%, 88% 100%); }
html.hero-anim:not(.hero-go) .hero-scene { scale: 1.22; }
html.hero-anim:not(.hero-go) .hero-v::before { opacity: 0; transform: scale(1.08); }
html.hero-anim:not(.hero-go) .hero h1 .hl > span { transform: translateY(105%); }
html.hero-anim:not(.hero-go) .hero-sub,
html.hero-anim:not(.hero-go) .hero-btns { opacity: 0; transform: translateY(18px); }

/* ── La avenida se enciende y luego corren los pulsos ── */
html.hero-go .hero-lit  { animation: hero-lit 2.2s ease-out 1.1s both; }
html.hero-go .hero-flow { opacity: 1; animation: hero-flow 4.2s cubic-bezier(.35,.45,.45,1) 1.4s infinite both; }
.hero-v.is-off .hero-flow { animation-play-state: paused; }

@keyframes hero-lit {
  0%   { opacity: 0; }
  22%  { opacity: .9; }
  100% { opacity: 0; }
}
/* De abajo (cerca) hacia arriba (lejos), frenando con la distancia */
@keyframes hero-flow {
  0%        { background-position: 0 0; }
  80%, 100% { background-position: 0 100%; }
}