/*
 * 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; coexiste con site.css sin contaminar
 */

/* ============ SCOPED TOKENS ============ */
.hero{
  --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::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::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  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 ============ */

/* ============ MAIN GRID ============ */

/* LEFT — copy */





/* RIGHT — 3D mockup stage */
.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::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:470px}

/* 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;
}
.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 ============ */

/* ============ 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 .hl-chip.c1{animation:hl-fadeUp .8s .9s both, hl-chipFloat 5.2s ease-in-out 1.7s infinite}
.hero .hl-chip.c3{animation:hl-fadeUp .8s 1.05s both, hl-chipFloat 4.8s ease-in-out 2s infinite}
.hero .hl-chip.c5{animation:hl-fadeUp .8s 1.2s both, hl-chipFloat 5s ease-in-out 2.2s infinite}
.hero .hl-stage::before{animation:hl-glowBreath 4.5s ease-in-out infinite}
.hero::before{animation:hl-meshDrift 14s ease-in-out infinite}
/* Word-by-word H1 */
/* ============ 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)}
}
/* Icons in trust strip — entrance + hover glow */
/* Hover en industries: icono brilla, item se levanta */
/* Chips: el ícono pulsa sutil con glow del color del ícono */
.hero .hl-chip i{
  display:inline-block;
  animation:hl-iconWave 4s ease-in-out infinite;
}
.hero .hl-chip.c1 i{animation-delay:.5s}
.hero .hl-chip.c3 i{animation-delay:1.5s}
.hero .hl-chip.c5 i{animation-delay:2.5s}

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

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

/* Lock icon en URL: pulse muy sutil */
.hero .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 .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 */
/* Mock chrome dots — pulso suave continuo */
@keyframes hl-dotsPulse{0%,100%{opacity:1}50%{opacity:.55}}
.hero .mk-bar .dt{animation:hl-dotsPulse 2.4s ease-in-out infinite}
.hero .mk-bar .dt.r{animation-delay:0s}
.hero .mk-bar .dt.y{animation-delay:.4s}
.hero .mk-bar .dt.g{animation-delay:.8s}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .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-chip{display:none}
          /* En móvil: NO usar word-by-word, mostrar texto directo */
  .hero }
@media(prefers-reduced-motion:reduce){
  .hero *{animation:none !important;transition:none !important}
}
/* ══════════════════════════════════════════════════════════════
   MOTION CARD RAIL — crossfade de 6 mockups
   Réplica exacta de mockup/motion-card-demo.html (validado por el usuario).
   Valores: hold 5s · overlap 2s · floatY 10px · depth 10px
   Único sistema que gobierna .hl-stage / .hl-rail / .hl-mock.
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative}

/* Escenario — el mockup vive en la mitad derecha, sin salirse */
.hero .hl-stage{
  position:absolute;z-index:1;pointer-events:none;
  /* El texto (.hero-in, max 1240px centrado) termina en calc(50% + 620px/2 - ...).
     En 1920px eso deja ~920px libres a la derecha: se usan TODOS.
     Sin tope fijo en px — un tope de 700 desperdiciaba 182px en pantallas anchas. */
  right:24px;top:50%;
  transform:translateY(-50%);
  left:calc(50% + 20px);
  width:auto;
  display:flex;align-items:center;justify-content:stretch;
  /* la perspectiva va dentro del transform del rail (compatible Firefox) */
}
.hero .hl-stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 400px at 60% 55%, rgba(255,140,0,.34), transparent 66%),
    radial-gradient(360px 280px at 30% 75%, rgba(0,200,255,.12), transparent 70%);
  filter:blur(10px);
  animation:hl-glowBreath 4.5s ease-in-out infinite;
}

/* EL CARRIL — la deriva vive aquí, una sola vez (igual que el demo) */
.hero .hl-rail{
  --hl-floatY:10px;
  --hl-depth:10px;
  --hl-overlap:2s;
  position:relative;
  display:grid;
  width:100%;
  transform-style:preserve-3d;
  /* rotar desde el centro-derecha: el borde derecho queda anclado
     y la rotación gana profundidad hacia la izquierda, sin desbordar */
  transform-origin:85% 50%;
  /* UNA sola animación sobre transform.
     Firefox NO soporta `rotate: y <ang>`; y dos animaciones sobre
     transform y rotate por separado no componen. Todo va junto aquí.
     Periodo 39s = mcm(9,13) → conserva la sensación de 9s/13s desfasados
     usando keyframes en los múltiplos de cada ciclo. */
  animation:hl-drift 39s ease-in-out infinite;
}
@keyframes hl-drift{
  0%     {transform:perspective(1600px) rotateY(-15deg)   rotateX(5deg) translate3d(0,-10px,0)}
  11.5%  {transform:perspective(1600px) rotateY(-13.8deg) rotateX(5deg) translate3d(0,10px,0)}
  23%    {transform:perspective(1600px) rotateY(-12.5deg) rotateX(5deg) translate3d(0,-10px,0)}
  34.6%  {transform:perspective(1600px) rotateY(-13.2deg) rotateX(5deg) translate3d(0,10px,0)}
  46.2%  {transform:perspective(1600px) rotateY(-15deg)   rotateX(5deg) translate3d(0,-10px,0)}
  57.7%  {transform:perspective(1600px) rotateY(-13.8deg) rotateX(5deg) translate3d(0,10px,0)}
  69.2%  {transform:perspective(1600px) rotateY(-12.5deg) rotateX(5deg) translate3d(0,-10px,0)}
  80.8%  {transform:perspective(1600px) rotateY(-14.1deg) rotateX(5deg) translate3d(0,10px,0)}
  100%   {transform:perspective(1600px) rotateY(-15deg)   rotateX(5deg) translate3d(0,-10px,0)}
}

/* Mockups apilados en la misma celda — grid, no absolute */
.hero .hl-mock{
  grid-area:1 / 1;
  position:relative;
  width:100%;margin:0;
  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,.22),
    0 80px 160px -40px rgba(0,0,0,.4);
  opacity:0;
  transform:translate3d(0,0,calc(var(--hl-depth) * -1));
}
/* will-change SOLO en las 2 capas que cruzan */
.hero .hl-mock.is-live,
.hero .hl-mock.is-leaving{will-change:transform,opacity}
/* destello del cambio — luz diagonal que recorre la capa que entra */
.hero .hl-mock.is-live .mk-body::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 40%,
    rgba(255,190,120,.16) 47%,
    rgba(255,225,180,.28) 50%,
    rgba(255,190,120,.16) 53%,
    transparent 60%);
  background-size:260% 260%;
  background-repeat:no-repeat;
  animation:hl-flash 2.2s cubic-bezier(.4,0,.2,1) 1;
}
@keyframes hl-flash{
  0%  {background-position:170% 170%;opacity:0}
  18% {opacity:1}
  85% {opacity:1}
  100%{background-position:-70% -70%;opacity:0}
}
.hero .mk-body{position:relative}

.hero .hl-mock.is-live{
  opacity:1;transform:translate3d(0,0,0);z-index:2;
  transition:opacity var(--hl-overlap) cubic-bezier(.4,0,.2,1),
             transform var(--hl-overlap) cubic-bezier(.4,0,.2,1);
}
.hero .hl-mock.is-leaving{
  opacity:0;transform:translate3d(0,0,var(--hl-depth));z-index:1;
  transition:opacity var(--hl-overlap) cubic-bezier(.4,0,.2,1),
             transform var(--hl-overlap) cubic-bezier(.4,0,.2,1);
}

/* Barrido de luz superior — el efecto que aprobaste */
.hero .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));
}
.hero .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;
}

/* ── Paletas por producto ── */
.hero .m-clinic .mk-sb{background:linear-gradient(180deg,#1a2e2a 0%,#0e2220 100%);color:#cce8e2}
.hero .m-clinic .mk-sb .lmark{background:#5fb3a7}
.hero .m-clinic .mk-sb .nv.on{background:rgba(95,179,167,.22);border:1px solid rgba(95,179,167,.3)}
.hero .m-clinic .mk-sb .nv.on i{color:#7fd3c4}
.hero .m-clinic .mk-sb::after{background:radial-gradient(220px 160px at 50% 0%,rgba(95,179,167,.22),transparent 70%)}
.hero .m-clinic .mk-head .acts .a.pri{background:#5fb3a7;border-color:#5fb3a7;color:#0a1126}
.hero .m-clinic .tg{background:rgba(95,179,167,.18);color:#7fd3c4}

.hero .m-inmo .mk-sb{background:linear-gradient(180deg,#31201a 0%,#1c1210 100%);color:#f0dcd2}
.hero .m-inmo .mk-sb .lmark{background:#c8663d;color:#fff}
.hero .m-inmo .mk-sb .nv.on{background:rgba(200,102,61,.24);border:1px solid rgba(200,102,61,.34)}
.hero .m-inmo .mk-sb .nv.on i{color:#e8a483}
.hero .m-inmo .mk-sb::after{background:radial-gradient(220px 160px at 50% 0%,rgba(200,102,61,.22),transparent 70%)}
.hero .m-inmo .mk-head .acts .a.pri{background:#c8663d;border-color:#c8663d;color:#fff}
.hero .m-inmo .tg{background:rgba(200,102,61,.2);color:#e8a483}

.hero .m-hr .mk-sb{background:linear-gradient(180deg,#16224a 0%,#0b1330 100%);color:#ccd8f2}
.hero .m-hr .mk-sb .lmark{background:#4d7cff;color:#fff}
.hero .m-hr .mk-sb .nv.on{background:rgba(77,124,255,.22);border:1px solid rgba(77,124,255,.32)}
.hero .m-hr .mk-sb .nv.on i{color:#9db6ff}
.hero .m-hr .mk-sb::after{background:radial-gradient(220px 160px at 50% 0%,rgba(77,124,255,.2),transparent 70%)}
.hero .m-hr .mk-head .acts .a.pri{background:#4d7cff;border-color:#4d7cff;color:#fff}
.hero .m-hr .tg{background:rgba(77,124,255,.18);color:#9db6ff}

.hero .m-cmh .mk-sb{background:linear-gradient(180deg,#12304a 0%,#0a1a2c 100%);color:#cfe4f2}
.hero .m-cmh .mk-sb .lmark{background:#2c7da0;color:#fff}
.hero .m-cmh .mk-sb .nv.on{background:rgba(44,125,160,.26);border:1px solid rgba(44,125,160,.36)}
.hero .m-cmh .mk-sb .nv.on i{color:#8fcbe8}
.hero .m-cmh .mk-sb::after{background:radial-gradient(220px 160px at 50% 0%,rgba(44,125,160,.24),transparent 70%)}
.hero .m-cmh .mk-head .acts .a.pri{background:#2c7da0;border-color:#2c7da0;color:#fff}
.hero .m-cmh .tg{background:rgba(44,125,160,.22);color:#8fcbe8}

.hero .m-legal .mk-sb{background:linear-gradient(180deg,#2a2036 0%,#171122 100%);color:#e4d8ee}
.hero .m-legal .mk-sb .lmark{background:#8b6bb1;color:#fff}
.hero .m-legal .mk-sb .nv.on{background:rgba(139,107,177,.24);border:1px solid rgba(139,107,177,.34)}
.hero .m-legal .mk-sb .nv.on i{color:#c4a8e0}
.hero .m-legal .mk-sb::after{background:radial-gradient(220px 160px at 50% 0%,rgba(139,107,177,.22),transparent 70%)}
.hero .m-legal .mk-head .acts .a.pri{background:#8b6bb1;border-color:#8b6bb1;color:#fff}
.hero .m-legal .tg{background:rgba(139,107,177,.2);color:#c4a8e0}

.hero .m-esr .mk-sb{background:linear-gradient(180deg,#2b1a1a 0%,#180f0f 100%);color:#f0d4d4}
.hero .m-esr .mk-sb .lmark{background:#c8503d;color:#fff}
.hero .m-esr .mk-sb .nv.on{background:rgba(200,80,61,.24);border:1px solid rgba(200,80,61,.34)}
.hero .m-esr .mk-sb .nv.on i{color:#e89383}
.hero .m-esr .mk-sb::after{background:radial-gradient(220px 160px at 50% 0%,rgba(200,80,61,.22),transparent 70%)}
.hero .m-esr .mk-head .acts .a.pri{background:#c8503d;border-color:#c8503d;color:#fff}
.hero .m-esr .tg{background:rgba(200,80,61,.2);color:#e89383}

/* ── Panel de filas ── */
.hero .mk-panel{
  background:#161e3b;border:1px solid rgba(255,255,255,.06);border-radius:8px;
  padding:12px;flex:1;
}
.hero .mk-panel .pnt{font:700 11px/1 var(--hl-sans);color:#fff;letter-spacing:-.01em}
.hero .mk-rows{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.hero .mk-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.03);
}
.hero .mk-row .n{font:600 11px/1.3 var(--hl-sans);color:#e8ecf7;letter-spacing:-.005em}
.hero .mk-row .s{font:500 9px/1 var(--hl-mono);color:#7d86a3;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.hero .tg{font:600 9px/1 var(--hl-sans);padding:4px 8px;border-radius:5px;white-space:nowrap}

/* ── Responsive ── */
@media(max-width:1100px){
  .hero .hl-stage{left:calc(50% - 30px);right:16px;width:auto;opacity:.6}
}
@media(max-width:900px){
  .hero .hl-stage{
    display:block;position:relative;
    left:auto;right:auto;top:auto;transform:none;
    width:100%;margin:40px 0 0;opacity:1;
  }
  .hero{min-height:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero .hl-rail{animation:none}
  .hero .hl-mock{transition:none}
}