/* ===========================================================================
   PÁGINAS DE EMPRESA (page-empresa.php)
   Entradilla del hero, recorridos animados (intermodal e industrial) y servicios con icono.
   =========================================================================== */

/* ---------- hero con texto largo ---------- */
.hero-empresa .wrap > div > *{animation:emp-sube .9s var(--ease) both}
.hero-empresa .wrap > div > :nth-child(2){animation-delay:.08s}
.hero-empresa .wrap > div > :nth-child(3){animation-delay:.16s}
.hero-empresa .wrap > div > :nth-child(4){animation-delay:.26s}
.hero-empresa .wrap > div > :nth-child(5){animation-delay:.36s}
.hero-empresa .wrap > div > :nth-child(6){animation-delay:.46s}
.hero-empresa .wrap > div > :nth-child(7){animation-delay:.56s}
.hero-empresa .empresa-chips{animation:none}
.hero .empresa-lead{font-family:var(--f-display);font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:600;line-height:1.1;color:var(--navy);max-width:40rem;margin-bottom:var(--s4)}
.empresa-texto{max-width:46rem;margin-bottom:var(--s4)}
.hero .empresa-texto p{max-width:none;font-size:1.05rem;line-height:1.65;color:#3D4C5E;margin-bottom:var(--s3)}
.empresa-texto strong{color:var(--navy);font-weight:700}
.empresa-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--s5);padding:0;max-width:52rem}
.empresa-chips li{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;background:var(--fog);color:var(--navy);font-family:var(--f-datos);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;animation:emp-sube .7s var(--ease) both;animation-delay:calc(.5s + var(--i, 0) * 70ms)}
.empresa-chips li::before{content:"";width:7px;height:7px;flex:none;background:var(--yellow)}
@keyframes emp-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- recorrido intermodal ---------- */
.intermodal{background:var(--navy-deep);color:#fff;padding:var(--s7) 0;overflow:hidden}
.intermodal-cab{max-width:46rem;margin-bottom:var(--s5)}
.intermodal .eyebrow{color:var(--yellow)}
.intermodal h2{color:#fff;font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:700;line-height:1;text-wrap:balance}
.intermodal-cab p:not(.eyebrow){margin-top:var(--s3);font-size:1.12rem;color:#C9D6EA}

.im-marco{position:relative;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(0,62,173,.18),rgba(0,62,173,0) 70%)}
.im-escena{display:block;width:100%;height:auto;aspect-ratio:1200/400}
@media (max-width:760px){.im-escena{aspect-ratio:480/400}}

.im-lejos{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.im-agua{fill:rgba(0,62,173,.35)}
.im-olas path{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2}
.im-olas{animation:im-olas 3.4s linear infinite}
.im-olas-2{animation-duration:4.6s;opacity:.7}
.im-olas-3{animation-duration:6s;opacity:.45}
@keyframes im-olas{to{transform:translateX(-40px)}}
.im-muelle{fill:rgba(255,255,255,.03)}
.im-linea{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5}
.im-linea-fina{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1}
.im-carril{fill:none;stroke:#fff;stroke-width:2}
.im-traviesas{fill:none;stroke:rgba(255,255,255,.3);stroke-width:4;stroke-dasharray:2 10}
.im-marcas{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:14 12}
.im-estructura{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.5;stroke-linejoin:round}
.im-estructura .im-relleno,.im-solido{fill:#0B2F75}
.im-solido{stroke:rgba(255,255,255,.8);stroke-width:1.5;stroke-linejoin:round}
.im-caja{fill:#0B2F75;stroke:rgba(255,255,255,.5);stroke-width:1.2}
.im-caja-azul{fill:#003EAD}
.im-caja-lejos{opacity:.45}
.im-franja{fill:none;stroke:var(--yellow);stroke-width:2}
.im-faro{fill:var(--yellow)}
.im-haz{fill:url(#im-haz-degradado);opacity:0;transition:opacity .5s}
.im-haz.es-encendida{opacity:1}
.im-rueda circle{fill:var(--navy-deep);stroke:#fff;stroke-width:1.5}
.im-rueda path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1}
.im-baliza{fill:var(--yellow);animation:im-parpadeo 1.3s steps(1) infinite}
.im-baliza-2{animation-delay:.65s}
@keyframes im-parpadeo{50%{opacity:.15}}
.im-luz{transition:fill .25s}
.im-luz-roja{fill:#4A1A1A}
.im-luz-verde{fill:#123B27}
.im-luz-roja.es-encendida{fill:#FF5A4F}
.im-luz-verde.es-encendida{fill:#3BE08A}
.im-cable{fill:none;stroke:rgba(255,255,255,.65);stroke-width:1}
.im-carro{fill:#fff}
.im-spreader{fill:#C9D6EA}
.im-protagonista{fill:var(--yellow)}
.im-ondulado{fill:none;stroke:rgba(0,34,96,.4);stroke-width:1.2}
.im-marca-caja{font-family:var(--f-datos);font-size:7.5px;font-weight:600;letter-spacing:.08em;fill:var(--navy-deep)}
.im-rastro{fill:none;stroke:var(--yellow);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;stroke-linejoin:round;animation:im-hormigas .9s linear infinite}
@keyframes im-hormigas{to{stroke-dashoffset:-9}}
.im-humo circle{fill:#fff}
.im-interior{fill:#00112E}
.im-fachada{fill:#0B2F75;fill-rule:evenodd;stroke:rgba(255,255,255,.8);stroke-width:1.5;stroke-linejoin:round}
.im-puerta{fill:url(#im-lamas);stroke:rgba(255,255,255,.8);stroke-width:1.2}
.im-ventana{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.45);stroke-width:1;transition:fill .6s}
.es-entregado .im-ventana{fill:var(--yellow)}
.im-ok circle{fill:var(--yellow)}
.im-ok path{fill:none;stroke:var(--navy-deep);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* pausa y reanudar */
.im-control{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:40px;height:40px;padding:0;background:rgba(0,22,62,.6);color:#fff;border:1px solid rgba(255,255,255,.35);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.im-control:hover,.im-control:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--navy-deep)}
.im-control .icono{width:18px;height:18px}
.im-icono-play,.im-control.es-pausado .im-icono-pausa{display:none}
.im-control.es-pausado .im-icono-play{display:block}

/* línea de etapas, como un plano de metro */
.im-etapas{position:relative;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:var(--s5) 0 0;padding:0;--avance:0}
.im-etapas-via{position:absolute;top:9px;left:10%;right:10%;height:2px;background:rgba(255,255,255,.18);pointer-events:none}
.im-etapas-progreso{position:absolute;inset:0;background:var(--yellow);transform-origin:left;transform:scaleX(var(--avance))}
.im-etapas-tren{position:absolute;top:-5px;left:calc(var(--avance) * 100%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(247,211,16,.22)}
.im-etapas button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:0 6px;background:none;border:0;color:inherit;font:inherit;text-align:center;cursor:pointer}
.im-etapa-punto{width:20px;height:20px;border-radius:50%;background:var(--navy-deep);border:2px solid rgba(255,255,255,.4);transition:border-color .3s,background .3s,transform .4s var(--ease)}
.im-etapa-num{margin-top:6px;font-family:var(--f-datos);font-size:.66rem;letter-spacing:.14em;color:rgba(255,255,255,.5);transition:color .3s}
.im-etapa-nombre{font-family:var(--f-display);font-size:1.35rem;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.65);transition:color .3s}
.im-etapa-corto{display:none}
.im-etapa-texto{max-width:16rem;font-size:.84rem;line-height:1.45;color:rgba(201,214,234,.75)}
.es-hecha .im-etapa-punto{border-color:var(--yellow);background:var(--yellow)}
.es-activa .im-etapa-punto{border-color:var(--yellow);transform:scale(1.25)}
.es-activa .im-etapa-num{color:var(--yellow)}
.es-activa .im-etapa-nombre,.im-etapas button:hover .im-etapa-nombre{color:#fff}
.im-etapas button:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

@media (max-width:760px){
  .intermodal{padding:var(--s6) 0}
  .im-etapas button{padding:0 2px}
  .im-etapa-num,.im-etapa-texto,.im-etapa-largo{display:none}
  .im-etapa-corto{display:block}
  .im-etapa-nombre{font-family:var(--f-datos);font-size:.6rem;font-weight:600;letter-spacing:.02em}
}

/* ---------- recorrido industrial (de la mina a la obra) ----------
   Comparte marco, dibujo, botón y etapas con el intermodal; aquí solo va lo suyo. */
.ind-talud{fill:#0A2864;stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-linejoin:round}
.ind-estratos{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:6 5}
.ind-brazo{fill:none;stroke:rgba(255,255,255,.85);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ind-cinta{fill:none;stroke:rgba(255,255,255,.7);stroke-width:2;stroke-dasharray:3 5;animation:ind-cinta .6s linear infinite}
@keyframes ind-cinta{to{stroke-dashoffset:8}}
.ind-mineral{fill:#A85C36;stroke:rgba(255,255,255,.3);stroke-width:.8}
.ind-granos circle{fill:#C9774A}
.ind-fosa{fill:rgba(0,10,32,.55);stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 4}
.ind-brillo{fill:#FF7A1A}
.ind-llama{fill:#FF9A3C}
.ind-boca{fill:#2A1A10;transition:fill .4s}
.ind-boca.es-encendida{fill:#FF8A2A}
.ind-chispas circle{fill:#FFB347}
.ind-lecho{fill:#0B2F75;stroke:rgba(255,255,255,.6);stroke-width:1;stroke-linejoin:round}
.ind-viga{stroke:rgba(0,22,62,.55);stroke-width:1}
.ind-viga-alas{fill:none;stroke:rgba(0,22,62,.45);stroke-width:1}
.ind-viga-halo{fill:#FF7A1A}
.ind-rotulo{font-family:var(--f-datos);font-size:5.4px;font-weight:600;letter-spacing:.05em;fill:#fff}
.ind-torre{fill:rgba(255,255,255,.75)}
.ind-pala{fill:#fff;transition:fill .6s}
.ind-tension{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2;transition:stroke .5s}
.es-energia .ind-pala{fill:var(--yellow)}
.es-energia .ind-tension{stroke:var(--yellow);stroke-dasharray:6 6;animation:ind-flujo .5s linear infinite}
@keyframes ind-flujo{to{stroke-dashoffset:-12}}
.es-energia .im-ventana{fill:var(--yellow)}

/* ---------- servicios con icono, sin tarjeta ---------- */
.servicios-iconos-seccion{background:var(--fog)}
.servicios-iconos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);list-style:none;margin:0;padding:0;text-align:center}
.servicio-circulo{position:relative;display:grid;place-items:center;width:116px;height:116px;margin:0 auto var(--s4);border-radius:50%;background:#fff;border:2px solid var(--yellow);color:#E0B400;transition:background .35s,color .35s,transform .5s var(--ease)}
/* órbita discontinua que gira despacio alrededor de cada icono */
.servicio-circulo::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(224,180,0,.55);animation:emp-orbita 22s linear infinite}
.servicio-circulo .icono{width:54px;height:54px;stroke-width:1.4}
.servicios-iconos h3{font-size:1.45rem;color:var(--navy);line-height:1.1;text-wrap:balance}
.servicios-iconos li:hover .servicio-circulo{background:var(--yellow);color:var(--navy-deep);transform:translateY(-6px)}
@keyframes emp-orbita{to{transform:rotate(360deg)}}

/* entrada: el círculo crece, el icono se dibuja y el título sube */
.im-js .servicios-iconos li .servicio-circulo{opacity:0;transform:scale(.55)}
.im-js .servicios-iconos li .icono > *{stroke-dasharray:100;stroke-dashoffset:100}
.im-js .servicios-iconos li h3{opacity:0;transform:translateY(14px)}
.im-js .servicios-iconos li.es-visible .servicio-circulo{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--i) * 130ms),transform .8s var(--ease) calc(var(--i) * 130ms),background .35s,color .35s}
.im-js .servicios-iconos li.es-visible .icono > *{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease) calc(.25s + var(--i) * 130ms)}
.im-js .servicios-iconos li.es-visible h3{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(.35s + var(--i) * 130ms),transform .7s var(--ease) calc(.35s + var(--i) * 130ms)}
.im-js .servicios-iconos li.es-visible:hover .servicio-circulo{transform:translateY(-6px);transition-delay:0s}

@media (max-width:960px){.servicios-iconos{grid-template-columns:1fr 1fr;row-gap:var(--s6)}}
@media (max-width:640px){
  .servicio-circulo{width:96px;height:96px}
  .servicio-circulo .icono{width:44px;height:44px}
  .servicios-iconos h3{font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  .hero-empresa .wrap > div > *,.empresa-chips li,.im-olas,.im-baliza,.im-rastro,.servicio-circulo::after,.ind-cinta,.es-energia .ind-tension{animation:none}
}