/*
 * hero-linear.css — Hero Linear-style para landing Espinaltech
 * Producto: Espinaltech (landing corporativa)
 * Paleta: --accent #ff8c00 + --accent-2 #00c8ff + --accent-3 #12d38f
 * Notas: scoped en .hero-linear; coexiste con site.css sin contaminar
 */

/* ============ SCOPED TOKENS ============ */
.hero-linear{
  --hl-accent-soft:#ffb16b;
  --hl-sans:'Inter',system-ui,sans-serif;
  --hl-mono:'IBM Plex Mono',ui-monospace,monospace;

  position:relative;
  background:var(--bg);
  padding:0;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--hl-sans);
}

/* mesh background — radial sutil bicromático */
.hero-linear::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 88% 18%, rgba(255,140,0,.18), transparent 60%),
    radial-gradient(700px 500px at 8% 82%, rgba(0,200,255,.10), transparent 65%),
    radial-gradient(1200px 700px at 50% -10%, rgba(255,140,0,.06), transparent 70%);
}
.hero-linear::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 80%);
}

/* ============ STATUS METABAR ============ */
.hl-meta{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:14px;
  padding:14px 40px;border-bottom:1px solid rgba(255,255,255,.06);
  font:500 10px/1 var(--hl-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);
  background:linear-gradient(180deg,rgba(255,140,0,.025),transparent);
}
.hl-meta .pulse{width:7px;height:7px;background:#12d38f;border-radius:50%;box-shadow:0 0 10px #12d38f;animation:hl-blink 1.6s infinite}
.hl-meta .brand{color:#fff;font-weight:700;letter-spacing:.24em}
.hl-meta .sep{color:var(--ink-dim);opacity:.5}
.hl-meta .ml{margin-left:auto;color:var(--accent)}

/* ============ MAIN GRID ============ */
.hl-wrap{
  position:relative;z-index:2;
  max-width:1320px;margin:0 auto;
  padding:96px 40px 88px;
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;
}

/* LEFT — copy */
.hl-kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px 7px 12px;margin-bottom:28px;
  border:1px solid rgba(255,140,0,.28);
  background:linear-gradient(180deg,rgba(255,140,0,.08),rgba(255,140,0,.03));
  border-radius:999px;
  font:600 11px/1 var(--hl-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--hl-accent-soft);
  backdrop-filter:blur(6px);
}
.hl-kicker .kdot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent),0 0 20px rgba(255,140,0,.4);
  flex-shrink:0;
}
.hl-kicker .ksep{opacity:.4}

/* ============ ROTATOR (replaces old kicker) ============ */
.hl-rotator{align-items:center}
.hl-rotator .ktext{color:#fff;font-weight:600}
.hl-rotator .krot{
  display:inline-block;
  height:12px;
  overflow:hidden;
  vertical-align:middle;
  min-width:172px;
  position:relative;
}
.hl-rotator .krot-track{
  display:flex;flex-direction:column;
  animation:hl-rotateScroll 12s cubic-bezier(.65,.05,.4,1) infinite;
  will-change:transform;
}
.hl-rotator .krot-track > span{
  display:block;
  height:12px;line-height:12px;
  color:var(--hl-accent-soft);
  font-weight:600;letter-spacing:.16em;
  white-space:nowrap;
}
@keyframes hl-rotateScroll{
  0%,18%   {transform:translateY(0)}
  22%,43%  {transform:translateY(-12px)}
  47%,68%  {transform:translateY(-24px)}
  72%,93%  {transform:translateY(-36px)}
  97%,100% {transform:translateY(-48px)}
}

.hl-h1{
  font-family:var(--hl-sans);
  font-weight:700;
  font-size:clamp(40px,5.6vw,84px);
  line-height:1.02;letter-spacing:-.035em;
  color:#fff;
  margin-bottom:24px;
  text-wrap:balance;
}
.hl-h1 .grad{
  color:#fff; /* fallback si background-clip:text falla */
  background:linear-gradient(180deg,#fff 0%, #fff 55%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hl-h1 .accent{
  color:#ff8c00; /* fallback */
  background:linear-gradient(90deg, #ffb16b 0%, #ff8c00 50%, #ffb16b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hl-sub{
  font:400 19px/1.55 var(--hl-sans);color:var(--ink-2);
  max-width:540px;margin-bottom:36px;
}
.hl-sub b{color:#fff;font-weight:600}

.hl-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.hl-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px;border-radius:10px;
  font:600 14px/1 var(--hl-sans);letter-spacing:-.005em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:pointer;border:1px solid transparent;
  text-decoration:none;
}
.hl-cta .arr{transition:transform .25s ease;font-size:13px}
.hl-cta:hover .arr{transform:translateX(3px)}
.hl-cta-primary{
  background:linear-gradient(180deg,#ff9a1c 0%, #ff8c00 100%);
  color:#1a0d00;
  border-color:rgba(255,255,255,.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 0 0 1px rgba(255,140,0,.5),
    0 8px 24px -8px rgba(255,140,0,.6),
    0 2px 4px rgba(0,0,0,.2);
}
.hl-cta-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 0 0 1px rgba(255,140,0,.6),
    0 14px 32px -8px rgba(255,140,0,.55),
    0 2px 4px rgba(0,0,0,.25);
}
.hl-cta-ghost{
  background:rgba(255,255,255,.04);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.hl-cta-ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
}

.hl-trust{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.06);
  font:500 11px/1.5 var(--hl-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
}
.hl-trust .label{color:var(--ink-2)}
.hl-trust .vsep{width:1px;height:14px;background:rgba(255,255,255,.12)}
.hl-trust .item{display:inline-flex;align-items:center;gap:8px;color:#cbd0e3;font-weight:500;letter-spacing:.06em}
.hl-trust .item i{color:var(--accent);font-size:11px;opacity:.85}

/* RIGHT — 3D mockup stage */
.hl-stage{
  position:relative;
  perspective:2400px;
  perspective-origin:50% 50%;
  min-height:520px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.hl-stage::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(520px 380px at 70% 55%, rgba(255,140,0,.32), transparent 65%),
    radial-gradient(360px 280px at 35% 75%, rgba(0,200,255,.14), transparent 70%);
  filter:blur(8px);
}

/* ============ FLOATING UI CHIPS ============ */
.hl-chip{
  position:absolute;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:10px;
  background:rgba(20,29,59,.72);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  font:600 11px/1 var(--hl-sans);color:#fff;letter-spacing:-.005em;
  box-shadow:0 8px 32px -12px rgba(0,0,0,.5);
}
.hl-chip i{font-size:11px}
.hl-chip.c1{top:4%;right:4%;left:auto}
.hl-chip.c1 i{color:#12d38f}
.hl-chip.c3{bottom:12%;left:14%}
.hl-chip.c3 i{color:#00c8ff}
.hl-chip.c5{bottom:30%;left:8%}
.hl-chip.c5 i{color:#12d38f}

/* pulse rings */
.hl-chip.c1::after,.hl-chip.c3::after,.hl-chip.c5::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;
  pointer-events:none;
}
.hl-chip.c1::after{border:1px solid rgba(18,211,143,.4);animation:hl-chipRing 2.6s ease-out infinite}
.hl-chip.c3::after{border:1px solid rgba(0,200,255,.35);animation:hl-chipRing 3s ease-out 1.6s infinite}
.hl-chip.c5::after{border:1px solid rgba(18,211,143,.4);animation:hl-chipRing 2.9s ease-out 3.2s infinite}

/* ============ MOCKUP (SoftClinic dark) ============ */
.hl-mock{
  position:relative;z-index:2;
  width:min(1100px,160%);
  margin-left:-38%;
  transform:rotateY(-15deg) rotateX(5deg) scale(.96);
  transform-style:preserve-3d;
  border-radius:14px;
  overflow:hidden;
  background:#0d1330;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 60px -20px rgba(0,0,0,.55),
    0 60px 120px -30px rgba(255,140,0,.25),
    0 80px 160px -40px rgba(0,0,0,.4);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.35) 33%,
    rgba(0,0,0,.65) 66%,
    #000 100%);
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.35) 33%,
    rgba(0,0,0,.65) 66%,
    #000 100%);
}
.hl-mock::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1.5px;z-index:5;
  background:linear-gradient(90deg, transparent 0%, rgba(255,140,0,.95) 50%, transparent 100%);
  background-size:30% 100%;background-repeat:no-repeat;
  animation:hl-dataFlow 4s cubic-bezier(.66,.02,.36,1) infinite;
  pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(255,140,0,.7));
}
.hl-mock::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,140,0,.06), transparent 35%);
  border-radius:inherit;
}
/* Texto a la izquierda por encima del mock */
.hl-left{position:relative;z-index:5}

/* ============ MOCK CHROME (window bar) ============ */
.mk-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:#161e3b;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mk-bar .dt{width:11px;height:11px;border-radius:50%}
.mk-bar .dt.r{background:#ff5f57}
.mk-bar .dt.y{background:#febc2e}
.mk-bar .dt.g{background:#28c840}
.mk-bar .url{
  margin-left:14px;flex:1;max-width:280px;
  padding:5px 10px;border-radius:6px;
  background:#0a1126;border:1px solid rgba(255,255,255,.06);
  font:500 10px/1 var(--hl-mono);color:#aab3ce;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;
}
.mk-bar .url i{color:#7a83a3;font-size:9px}
.mk-bar .badge{
  margin-left:auto;
  font:600 9px/1 var(--hl-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#7fd3c4;padding:4px 8px;border-radius:6px;background:rgba(95,179,167,.18);
  animation:hl-liveDot 1.6s ease-in-out infinite;
}

/* ============ MOCK BODY ============ */
.mk-body{display:grid;grid-template-columns:160px 1fr;min-height:420px}

/* sidebar */
.mk-sb{
  background:linear-gradient(180deg,#1a2e2a 0%, #0e2220 100%);
  padding:14px 12px;
  color:#cce8e2;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  border-right:1px solid rgba(255,255,255,.04);
}
.mk-sb::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px 160px at 50% 0%, rgba(95,179,167,.22), transparent 70%);
}
.mk-sb .logo{
  display:flex;align-items:center;gap:8px;
  font:700 12px/1 var(--hl-sans);letter-spacing:-.01em;color:#fff;
  padding:6px 6px 14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.mk-sb .logo .lmark{
  width:22px;height:22px;border-radius:6px;
  background:#5fb3a7;
  display:inline-flex;align-items:center;justify-content:center;
  font:800 10px/1 var(--hl-sans);color:#0a1126;
}
.mk-sb .nav{display:flex;flex-direction:column;gap:2px}
.mk-sb .nv{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:6px;
  font:500 11px/1 var(--hl-sans);color:rgba(255,255,255,.62);letter-spacing:-.005em;
  cursor:pointer;
}
.mk-sb .nv i{font-size:10px;width:12px;color:rgba(255,255,255,.45)}
.mk-sb .nv.on{background:rgba(95,179,167,.22);color:#fff;font-weight:600;border:1px solid rgba(95,179,167,.3)}
.mk-sb .nv.on i{color:#7fd3c4}
.mk-sb .pro{
  margin-top:auto;
  padding:10px;border-radius:8px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.mk-sb .pro .pt{font:700 10px/1.2 var(--hl-sans);color:#fff;margin-bottom:3px}
.mk-sb .pro .ps{font:500 9px/1.3 var(--hl-sans);color:rgba(255,255,255,.55)}

/* main */
.mk-main{
  padding:16px 18px;
  background:#0d1330;
  display:flex;flex-direction:column;gap:14px;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:24px 24px;
}
.mk-head{display:flex;align-items:center;gap:10px}
.mk-head .ttl{font:700 14px/1 var(--hl-sans);color:#fff;letter-spacing:-.015em}
.mk-head .ttl .meta{font:500 10px/1 var(--hl-mono);color:#7d86a3;letter-spacing:.06em;margin-left:8px;text-transform:uppercase}
.mk-head .acts{margin-left:auto;display:flex;gap:6px}
.mk-head .acts .a{
  width:24px;height:24px;border-radius:6px;background:#161e3b;border:1px solid rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;color:#aab3ce;font-size:10px;
}
.mk-head .acts .a.pri{background:#5fb3a7;border-color:#5fb3a7;color:#0a1126;width:auto;padding:0 10px;font:600 10px/1 var(--hl-sans);letter-spacing:.02em}

.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-stat{
  background:#161e3b;border:1px solid rgba(255,255,255,.06);border-radius:8px;
  padding:10px 12px;
  animation:hl-statPulse 3.5s ease-in-out infinite;
}
.mk-stat:nth-child(2){animation-delay:.7s}
.mk-stat:nth-child(3){animation-delay:1.4s}
.mk-stat .lb{font:500 9px/1 var(--hl-mono);color:#7d86a3;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.mk-stat .vl{font:700 16px/1 var(--hl-sans);color:#fff;letter-spacing:-.02em}
.mk-stat .vl span{font:600 9px/1 var(--hl-sans);color:#12d38f;margin-left:5px;letter-spacing:0}
.mk-stat.b .vl span{color:#ffa033}

/* calendar */
.mk-cal{
  background:#161e3b;border:1px solid rgba(255,255,255,.06);border-radius:8px;
  padding:12px;flex:1;display:flex;flex-direction:column;gap:10px;
}
.mk-cal .ch{display:flex;align-items:center;gap:8px}
.mk-cal .ch .day{font:700 11px/1 var(--hl-sans);color:#fff;letter-spacing:-.01em}
.mk-cal .ch .day b{color:#7fd3c4;font-weight:700}
.mk-cal .ch .seg{
  margin-left:auto;display:inline-flex;background:rgba(255,255,255,.05);border-radius:6px;padding:2px;
}
.mk-cal .ch .seg span{
  font:600 9px/1 var(--hl-sans);color:#aab3ce;padding:5px 9px;border-radius:5px;letter-spacing:.02em;
}
.mk-cal .ch .seg span.on{background:rgba(255,255,255,.1);color:#fff}

.mk-grid{
  display:grid;grid-template-columns:34px 1fr 1fr 1fr 1fr;
  border-top:1px solid rgba(255,255,255,.06);
}
.mk-grid .h{
  font:600 9px/1 var(--hl-mono);color:#7d86a3;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.06);
}
.mk-grid .h.t{text-align:left;padding-left:0}
.mk-grid .tm{font:500 9px/1 var(--hl-mono);color:#7d86a3;padding:10px 4px 0 0;letter-spacing:.04em}
.mk-grid .cell{
  border-top:1px solid rgba(255,255,255,.05);border-left:1px solid rgba(255,255,255,.05);
  min-height:34px;position:relative;
}
.mk-grid .cell:first-child{border-left:none}
.mk-evt{
  position:absolute;left:3px;right:3px;
  border-radius:5px;padding:5px 6px;
  font:600 9px/1.2 var(--hl-sans);color:#fff;letter-spacing:-.005em;
  display:flex;flex-direction:column;gap:2px;overflow:hidden;
}
.mk-evt .pt{font-weight:700}
.mk-evt .px{font:500 8px/1 var(--hl-mono);opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.mk-evt.tl{background:linear-gradient(180deg,#3d8278,#2d6058);box-shadow:0 4px 12px -4px rgba(95,179,167,.4);top:2px;height:46px}
.mk-evt.tl2{background:linear-gradient(180deg,#3d8278,#2d6058);box-shadow:0 4px 12px -4px rgba(95,179,167,.4);top:14px;height:38px}
.mk-evt.or{background:linear-gradient(180deg,#d97700,#b35e00);color:#fff;box-shadow:0 4px 12px -4px rgba(255,140,0,.4);top:50px;height:32px}
.mk-evt.cy{background:linear-gradient(180deg,#1182a3,#0a6985);box-shadow:0 4px 12px -4px rgba(0,200,255,.3);top:2px;height:60px}
.mk-evt.gr{background:rgba(95,179,167,.12);color:#7fd3c4;border:1px solid rgba(95,179,167,.25);top:6px;height:28px}
.mk-evt.gr .pt{color:#bbe2dc}
.mk-evt.gr .px{color:#7fd3c4}

/* ============ INDUSTRIES STRIP ============ */
.hl-industries{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.06);
  padding:24px 40px;
  max-width:1320px;margin:0 auto;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.15));
}
.hl-industries .lb{font:600 10px/1 var(--hl-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.hl-industries .ind{
  display:inline-flex;align-items:center;gap:9px;
  font:600 13px/1 var(--hl-sans);color:#cbd0e3;letter-spacing:-.005em;
  padding:6px 0;
}
.hl-industries .ind i{color:var(--accent);font-size:12px;opacity:.9}
.hl-industries .vsep{width:1px;height:14px;background:rgba(255,255,255,.1)}
.hl-industries .ml{margin-left:auto;font:500 10px/1 var(--hl-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hl-industries .ind-custom{color:#7fd3c4;border:1px dashed rgba(127,211,196,.4);padding:6px 12px;border-radius:20px}
.hl-industries .ind-custom i{color:#7fd3c4}

/* ============ ANIMATIONS ============ */
@keyframes hl-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hl-fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hl-mockIn{from{opacity:0;transform:rotateY(-28deg) rotateX(8deg) scale(.86)}to{opacity:1;transform:rotateY(-15deg) rotateX(5deg) scale(.96)}}
@keyframes hl-chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hl-glowBreath{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes hl-meshDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-18px)}}
@keyframes hl-liveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}
@keyframes hl-shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes hl-statPulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes hl-dataFlow{0%{background-position:-40% 0}100%{background-position:140% 0}}
@keyframes hl-chipRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.18);opacity:0}}
@keyframes hl-wordIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hl-cursorBlink{50%{opacity:0}}
@keyframes hl-cursorOut{to{opacity:0;width:0}}

.hero-linear .hl-kicker{animation:hl-fadeUp .7s .1s both}
.hero-linear .hl-h1{opacity:1}
.hero-linear .hl-sub{animation:hl-fadeUp .8s .9s both}
.hero-linear .hl-ctas{animation:hl-fadeUp .8s 1.05s both}
.hero-linear .hl-trust{animation:hl-fadeUp .8s 1.2s both}
.hero-linear .hl-mock{animation:hl-mockIn 1.1s .55s both;will-change:transform;transition:transform .18s ease-out}
.hero-linear .hl-chip.c1{animation:hl-fadeUp .8s .9s both, hl-chipFloat 5.2s ease-in-out 1.7s infinite}
.hero-linear .hl-chip.c3{animation:hl-fadeUp .8s 1.05s both, hl-chipFloat 4.8s ease-in-out 2s infinite}
.hero-linear .hl-chip.c5{animation:hl-fadeUp .8s 1.2s both, hl-chipFloat 5s ease-in-out 2.2s infinite}
.hero-linear .hl-stage::before{animation:hl-glowBreath 4.5s ease-in-out infinite}
.hero-linear::before{animation:hl-meshDrift 14s ease-in-out infinite}
.hero-linear .hl-h1 .accent{background-size:200% 100% !important;animation:hl-shimmer 9s linear infinite}

/* Word-by-word H1 */
.hero-linear .hl-h1 .word{
  display:inline-block;
  opacity:0;
  transform:translateY(28px) rotate(2deg);
  filter:blur(6px);
  animation:hl-wordIn .9s cubic-bezier(.22,.92,.43,1) both;
}
.hero-linear .hl-h1 .cursor{
  display:inline-block;width:.07em;height:.85em;
  background:var(--accent);
  margin-left:.05em;vertical-align:-.08em;
  animation:hl-cursorBlink 1s steps(2) infinite, hl-cursorOut .3s 4s forwards;
}

/* ============ ICON ANIMATIONS — scroll glow + hover ============ */

/* Icons in industries strip — pulse glow rotativo */
@keyframes hl-iconWave{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 transparent)}
  50%{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 8px currentColor)}
}
.hero-linear .hl-industries .ind i{
  display:inline-block;
  animation:hl-iconWave 3.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .25s);
  transition:transform .25s ease, filter .25s ease;
}
.hero-linear .hl-industries .ind:nth-child(2) i{--i:0}
.hero-linear .hl-industries .ind:nth-child(4) i{--i:1}
.hero-linear .hl-industries .ind:nth-child(6) i{--i:2}
.hero-linear .hl-industries .ind:nth-child(8) i{--i:3}
.hero-linear .hl-industries .ind:nth-child(10) i{--i:4}

/* Icons in trust strip — entrance + hover glow */
.hero-linear .hl-trust .item i{
  transition:transform .3s cubic-bezier(.22,.92,.43,1), filter .3s ease, color .3s ease;
}
.hero-linear .hl-trust .item:hover i{
  transform:scale(1.18) rotate(-6deg);
  filter:drop-shadow(0 0 8px var(--accent));
  color:var(--hl-accent-soft);
}

/* Hover en industries: icono brilla, item se levanta */
.hero-linear .hl-industries .ind{
  transition:transform .25s ease;
  cursor:default;
}
.hero-linear .hl-industries .ind:hover{transform:translateY(-2px)}
.hero-linear .hl-industries .ind:hover i{
  filter:drop-shadow(0 0 10px currentColor);
  transform:scale(1.18);
}

/* Chips: el ícono pulsa sutil con glow del color del ícono */
.hero-linear .hl-chip i{
  display:inline-block;
  animation:hl-iconWave 4s ease-in-out infinite;
}
.hero-linear .hl-chip.c1 i{animation-delay:.5s}
.hero-linear .hl-chip.c3 i{animation-delay:1.5s}
.hero-linear .hl-chip.c5 i{animation-delay:2.5s}

/* Mock sidebar nav: hover slide-in + glow */
.hero-linear .mk-sb .nv{transition:background .25s ease, color .25s ease, transform .25s ease}
.hero-linear .mk-sb .nv i{transition:color .25s ease, transform .25s ease, filter .25s ease}
.hero-linear .mk-sb .nv:hover{background:rgba(95,179,167,.14);transform:translateX(2px)}
.hero-linear .mk-sb .nv:hover i{color:#7fd3c4;filter:drop-shadow(0 0 6px #7fd3c4)}

/* Mock action buttons */
.hero-linear .mk-head .acts .a{transition:background .25s ease, transform .25s ease}
.hero-linear .mk-head .acts .a:hover{transform:translateY(-1px);background:#1d2750}
.hero-linear .mk-head .acts .a:hover i{color:#7fd3c4}

/* Lock icon en URL: pulse muy sutil */
.hero-linear .mk-bar .url i{
  animation:hl-iconWave 5s ease-in-out infinite;
  animation-delay:1.2s;
}

/* Scroll-triggered: cuando el icono entra en viewport, brillito una vez */
.hero-linear .hl-icon-revealed{
  animation:hl-iconReveal 1.2s ease-out forwards, hl-iconWave 3.6s ease-in-out 1.2s infinite;
}
@keyframes hl-iconReveal{
  0%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}
  40%{filter:drop-shadow(0 0 14px currentColor);transform:scale(1.2)}
  100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}
}

/* Arrows en CTAs: hover effect ya existe — refuerzo brillito */
.hero-linear .hl-cta .arr i{transition:filter .3s ease}
.hero-linear .hl-cta:hover .arr i{filter:drop-shadow(0 0 6px currentColor)}

/* Mock chrome dots — pulso suave continuo */
@keyframes hl-dotsPulse{0%,100%{opacity:1}50%{opacity:.55}}
.hero-linear .mk-bar .dt{animation:hl-dotsPulse 2.4s ease-in-out infinite}
.hero-linear .mk-bar .dt.r{animation-delay:0s}
.hero-linear .mk-bar .dt.y{animation-delay:.4s}
.hero-linear .mk-bar .dt.g{animation-delay:.8s}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .hl-wrap{grid-template-columns:1fr;gap:48px;padding:64px 28px 56px}
  .hl-stage{min-height:auto;perspective:1800px}
  .hl-mock{transform:rotateY(-10deg) rotateX(4deg) scale(.94);width:100%;max-width:600px;margin:0 auto;mask-image:none;-webkit-mask-image:none}
  .hl-chip.c1{top:-2%;right:0}
  .hl-chip.c3{bottom:0;left:0}
  .hl-chip.c5{display:none}
  .hl-left{z-index:auto}
}
@media(max-width:640px){
  .hl-wrap{padding:48px 20px 40px}
  .hl-mock{transform:none;width:100%}
  .hl-chip{display:none}
  .hl-industries{padding:20px;gap:14px}
  .hl-industries .vsep{display:none}
  .hl-meta{padding:12px 20px;font-size:9px;gap:8px;flex-wrap:wrap}
  .hl-meta .ml{margin-left:0;width:100%;order:5}
  /* En móvil: NO usar word-by-word, mostrar texto directo */
  .hero-linear .hl-h1 .word{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-linear *{animation:none !important;transition:none !important}
}