/* =========================================================
   TREND M · Hero "El procesador"
   Casos reales entran al logo, los 4 nodos se encienden en orden
   (Conexión → Automatización → IA → Resultado) y sale la solución.
   El texto del hero se ve desde el primer momento (no afecta a Google).
   ========================================================= */
#inicio .tm-fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;display:block}
#inicio .tm-in{position:absolute;inset:0;z-index:3;pointer-events:none}
#inicio .tm-out{position:absolute;inset:0;z-index:7;pointer-events:none}

/* Foco del primer caso */
#inicio .hero-copy{transition:opacity .6s ease}
#inicio.tm-focus .hero-copy{opacity:.4}
#inicio .hero-brand{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
#inicio.tm-focus .hero-brand{transform:scale(1.1)}

/* Capa sobre el logo: brillo, nodos, barra de recorrido y estado */
#inicio .tm-logo-fx{position:absolute;pointer-events:none;z-index:2;--pulse:41,182,232}
#inicio .tm-logo-fx .tm-glow{position:absolute;inset:12.9%;border-radius:50%;box-shadow:0 0 70px rgba(var(--pulse),0),0 0 140px rgba(var(--pulse),0);transition:box-shadow .35s ease}
#inicio .tm-logo-fx.busy .tm-glow{box-shadow:0 0 80px rgba(var(--pulse),.55),0 0 160px rgba(var(--pulse),.22)}
#inicio .tm-logo-fx.flash .tm-glow{animation:tmFlash .45s ease}
@keyframes tmFlash{40%{box-shadow:0 0 100px rgba(var(--pulse),.7),0 0 180px rgba(var(--pulse),.3)}}
#inicio .tm-nd{position:absolute;width:8%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(var(--kc),.75) 35%,rgba(var(--kc),0) 72%);box-shadow:0 0 22px 7px rgba(var(--kc),.85);
  transition:opacity .25s ease,transform .25s ease}
#inicio .tm-nd.hold{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
#inicio .tm-scan{position:absolute;left:31.15%;top:59.86%;width:37.06%;height:1.2%;transform:translateY(-50%);border-radius:4px;
  background:linear-gradient(90deg,#29b6e8,#f0f5ff 33%,#e3197f 66%,#f2c230);box-shadow:0 0 12px rgba(255,255,255,.55);
  clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path .3s ease,opacity .3s ease}
#inicio .tm-status{--kc:41,182,232;position:absolute;left:50%;top:89%;transform:translate(-50%,0);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:190px;padding:7px 14px;border-radius:999px;
  background:rgba(7,22,48,.85);border:1px solid rgba(var(--kc),.35);font-size:12px;color:#93a8c2;opacity:0;
  transition:opacity .5s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
#inicio .tm-status.on{opacity:1}
#inicio .tm-status.step{color:rgb(var(--kc));box-shadow:0 0 22px rgba(var(--kc),.25)}
#inicio .tm-status i{width:7px;height:7px;border-radius:50%;background:rgb(var(--kc));transition:background .25s ease}

/* Mensaje que entra */
#inicio .tm-msg{position:absolute;left:0;top:0;max-width:220px;padding:9px 13px 8px;border-radius:14px 14px 14px 4px;background:rgba(16,35,66,.95);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(0,0,0,.3);color:#d4e0ee;font-size:13px;line-height:1.35;will-change:transform,opacity;opacity:0}
#inicio .tm-msg.big{font-size:15px;max-width:260px;padding:11px 15px 10px}
#inicio .tm-msg small{display:block;font-size:9.5px;letter-spacing:.12em;color:#93a8c2;margin-bottom:3px;text-transform:uppercase}

/* Solución que sale */
#inicio .tm-sol{position:absolute;left:0;top:0;width:236px;padding:12px 14px 11px;border-radius:14px;background:rgba(9,26,54,.94);
  border:1px solid rgba(41,182,232,.45);box-shadow:0 16px 36px rgba(0,0,0,.4),0 0 26px rgba(41,182,232,.14);will-change:transform,opacity;opacity:0}
#inicio .tm-sol__txt{font-size:13.5px;line-height:1.35;font-weight:600;color:#fff}
#inicio .tm-sol__row{display:flex;align-items:center;gap:6px;margin-top:9px}
#inicio .tm-sol__row i{width:10px;height:10px;border-radius:50%;border:2px solid rgb(var(--kc));transition:background .25s ease,box-shadow .25s ease}
#inicio .tm-sol__row i.on{background:rgb(var(--kc));box-shadow:0 0 8px rgba(var(--kc),.8)}
#inicio .tm-sol__row b{margin-left:4px;font-size:9.5px;letter-spacing:.14em;font-weight:700;color:#93a8c2}

/* En computadora el titular es muy alto y el logo quedaba centrado más abajo, fuera de la primera pantalla.
   Lo subimos a la altura del titular para que la animación se vea completa. */
@media (min-width:761px){
  #inicio .hero-brand{align-self:start;margin-top:clamp(12px,4vh,48px)}
}

@media (max-width:760px){
  /* En celular el logo quedaba debajo de todo el texto y la animación no se veía al abrir.
     Lo pasamos arriba del titular, más chico, para que el impacto sea inmediato. */
  #inicio .hero-brand{order:-1;align-self:center;justify-self:center;margin:0 auto;max-width:none;min-height:230px}
  #inicio .hero-brand:before{width:225px;height:225px}
  #inicio .hero-grid{gap:30px;padding-top:26px}
  #inicio .hero-logo{width:min(44vw,170px)!important;height:auto!important;max-width:none}
  #inicio .tm-in{z-index:8}
  #inicio .tm-msg{font-size:12px;max-width:170px}
  #inicio .tm-msg.big{font-size:14px;max-width:230px}
  #inicio .tm-sol{width:220px}
  #inicio.tm-focus .hero-copy{opacity:.5}
}
@media (prefers-reduced-motion:reduce){#inicio .tm-fx,#inicio .tm-in,#inicio .tm-out,#inicio .tm-logo-fx{display:none}}