/* ══════════════════════════════════════════════════════
   salud.css — Yeapdata® · Industria Salud · 2026
   Estética: Precisión clínica · Tech corporativo · Fondos claros
   Paleta: Blancos, grises perla, acentos pink/teal
   Una sección oscura: azul-verde navy profundo
   Tipografía: Eurostile Extended / Poppins
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap');
@import url('../master.css');

/* ──────────────────────────────────────
   VARIABLES SISTEMA
────────────────────────────────────── */
:root {
  /* Marca */
  --pink:        #E61667;
  --pink-dark:   #c01256;
  --pink-10:     rgba(230,22,103,.08);
  --pink-15:     rgba(230,22,103,.15);
  --pink-20:     rgba(230,22,103,.20);
  --pink-glow:   rgba(230,22,103,.22);
  --teal:        #6DC0AA;
  --teal-dark:   #4AADA0;
  --teal-10:     rgba(109,192,170,.10);
  --teal-20:     rgba(109,192,170,.20);
  --blue:        #4B509C;
  --blue-10:     rgba(75,80,156,.10);
  --blue-20:     rgba(75,80,156,.18);

  /* Fondos claros */
  --bg-white:    #FFFFFF;
  --bg-pearl:    #F8F9FC;
  --bg-mist:     #F2F4F8;
  --bg-frost:    #EDF0F7;

  /* Sección oscura — azul-verde navy */
  --navy:        #0D1B2A;
  --navy2:       #112233;
  --navy3:       #162840;
  --navy-brd:    rgba(109,192,170,.12);
  --navy-brd2:   rgba(109,192,170,.20);

  /* Texto */
  --t1:          #0D1117;
  --t2:          #4A5568;
  --t3:          #718096;
  --t4:          #A0AEC0;

  /* Bordes claros */
  --brd:         #E2E8F0;
  --brd2:        #CBD5E0;

  /* Texto sobre oscuro */
  --inv:         rgba(255,255,255,.90);
  --inv-dim:     rgba(255,255,255,.55);
  --inv-faint:   rgba(255,255,255,.22);

  /* Easings */
  --ease:        cubic-bezier(.22,1,.36,1);
  --hard:        cubic-bezier(.76,0,.24,1);
  --spring:      cubic-bezier(.34,1.56,.64,1);

  --max:         1200px;
  --r-lg:        20px;
  --r-md:        14px;
  --r-sm:        10px;
}

/* ──────────────────────────────────────
   RESET + BASE
────────────────────────────────────── */
html { scroll-behavior:smooth }
body {
  background:var(--bg-white);
  color:var(--t1);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--pink); color:#fff }
svg,img,canvas { display:block }

/* ──────────────────────────────────────
   UTILIDADES
────────────────────────────────────── */
.inner { max-width:var(--max); margin:0 auto; padding:0 2rem }
.teal  { color:var(--teal-dark) }
.blue  { color:var(--blue) }
.pink  { color:var(--pink) }


/* ══════════════════════════════════════════════════════
   HERO — fondo blanco con sistema de partículas y grilla
══════════════════════════════════════════════════════ */
.s-hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--bg-white);
}

/* Grilla sutil */
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(75,80,156,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(75,80,156,.04) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none; z-index:0;
}

/* Gradiente radial perla en hero */
.hero-radial {
  position:absolute;
  top:-20%; right:-10%;
  width:900px; height:900px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(109,192,170,.07) 0%,
    rgba(230,22,103,.04) 40%,
    transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-radial-2 {
  position:absolute;
  bottom:-30%; left:-15%;
  width:700px; height:700px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(75,80,156,.05),transparent 65%);
  pointer-events:none; z-index:0;
}

/* Línea de acento superior */
.sys-top-line {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right,transparent,var(--pink),var(--teal-dark),transparent);
  z-index:5; opacity:.6;
}

/* Partículas */
.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none }
.hparticle {
  position:absolute; border-radius:50%; opacity:0;
  animation:pFloat var(--dur,7s) var(--del,0s) infinite ease-in-out;
}
@keyframes pFloat {
  0%   { opacity:0; transform:translateY(0) scale(0) }
  20%  { opacity:.6 }
  80%  { opacity:.15 }
  100% { opacity:0; transform:translateY(-100px) scale(2) }
}

/* Canvas ECG hero */
.ecg-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.045;
  pointer-events:none; z-index:0;
}

/* Inner hero */
.s-hero-inner {
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:120px 2rem 90px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}

/* ── BADGE pulso ── */
.s-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 18px;
  border-radius:999px;
  border:1px solid rgba(230,22,103,.20);
  background:rgba(230,22,103,.05);
  font-size:.72rem; font-weight:600;
  color:var(--t2); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:2rem;
  opacity:0; animation:fadeUp .7s var(--ease) .1s forwards;
}
.s-badge-beat {
  width:7px; height:7px; border-radius:50%;
  background:var(--pink); flex-shrink:0;
  box-shadow:0 0 0 0 var(--pink-glow);
  animation:beat 1.4s ease infinite;
}
@keyframes beat {
  0%   { box-shadow:0 0 0 0 var(--pink-glow) }
  50%  { box-shadow:0 0 0 8px rgba(230,22,103,0) }
  100% { box-shadow:0 0 0 0 rgba(230,22,103,0) }
}

/* ── TÍTULO ── */
.s-title {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:clamp(44px,6.5vw,88px);
  font-weight:900;
  line-height:.95;
  letter-spacing:-2px;
  margin-bottom:1.8rem;
}
.s-title-row {
  display:block;
  color:var(--t1);
  opacity:0; transform:translateY(105%);
  animation:rowReveal .9s var(--hard) forwards;
  overflow:hidden;
}
.row-1 { animation-delay:.18s }
.row-2 { animation-delay:.35s }
.row-3 { animation-delay:.52s }
.row-accent { color:var(--pink) }
.row-teal   { color:var(--teal-dark) }
.row-stroke {
  color:transparent;
  -webkit-text-stroke:2px rgba(13,17,23,.15);
}
@keyframes rowReveal { to { opacity:1; transform:translateY(0) } }

/* ── SUBTÍTULO ── */
.s-subtitle {
  font-size:.97rem; font-weight:300;
  color:var(--t2); line-height:1.88;
  max-width:480px; margin-bottom:2.4rem;
  opacity:0; animation:fadeUp .9s var(--ease) .72s forwards;
}

/* ── CTAs ── */
.s-hero-ctas {
  display:flex; gap:14px; flex-wrap:wrap; padding: 25px 0px;
  opacity:0; animation:fadeUp .8s var(--ease) .9s forwards;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 32px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:50px; background:var(--pink); color:#fff;
  border:none; cursor:pointer;
  transition:all .4s var(--ease);
  box-shadow:0 8px 30px rgba(230,22,103,.28);
  position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0; transition:opacity .3s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(230,22,103,.42) }
.btn-primary:hover::before { opacity:1 }
.btn-primary svg { transition:transform .3s }
.btn-primary:hover svg { transform:translateX(4px) }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:50px; background:transparent;
  color:var(--t3); border:1.5px solid var(--brd2);
  cursor:pointer; transition:all .3s;
}
.btn-ghost:hover { border-color:var(--pink); color:var(--pink); transform:translateY(-2px) }

/* ── VITAL CARD (dashboard flotante) ── */
.vital-card {
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:var(--r-lg);
  box-shadow:
    0 4px 6px rgba(13,17,23,.04),
    0 20px 60px rgba(13,17,23,.08),
    0 0 0 1px rgba(230,22,103,.04);
  overflow:hidden;
  opacity:0; animation:fadeUp 1s var(--ease) 1.1s forwards;
  transition:transform .6s var(--ease);
}
.vital-card:hover { transform:translateY(-6px) }

.vc-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 1.25rem;
  background:var(--bg-pearl);
  border-bottom:1px solid var(--brd);
}
.vc-dots { display:flex; gap:.35rem }
.vc-dot { width:9px; height:9px; border-radius:50%; background:var(--brd2) }
.vc-dot-pink { background:var(--pink) }
.vc-title {
  font-size:.52rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--t3);
}
.vc-live {
  display:flex; align-items:center; gap:.35rem;
  font-size:.52rem; font-weight:700; letter-spacing:.12em; color:var(--teal-dark);
}
.vc-live-dot {
  width:6px; height:6px; border-radius:50%; background:var(--teal-dark);
  animation:tealPulse 1.4s infinite;
}
@keyframes tealPulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(109,192,170,.5) }
  50%    { box-shadow:0 0 0 7px rgba(109,192,170,0) }
}

.vc-ecg-row {
  display:flex; align-items:center; gap:.8rem;
  padding:.9rem 1.25rem .7rem;
  border-bottom:1px solid var(--brd);
}
.vc-ecg-canvas { flex:1; height:40px }
.vc-ecg-label { display:flex; align-items:baseline; gap:3px; flex-shrink:0 }
.vc-ecg-val {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.7rem; font-weight:900; color:var(--pink); line-height:1;
}
.vc-ecg-unit { font-size:.6rem; font-weight:600; color:var(--t3); letter-spacing:.06em }

.vc-metrics { display:grid; grid-template-columns:repeat(3,1fr) }
.vc-metric {
  padding:.9rem .8rem;
  border-right:1px solid var(--brd);
  display:flex; flex-direction:column; gap:.4rem;
  transition:background .3s;
  cursor:default;
}
.vc-metric:last-child { border-right:none }
.vc-metric:hover { background:var(--bg-pearl) }
.vc-m-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.25rem; font-weight:900; color:var(--pink); line-height:1;
}
.vc-m-num.teal { color:var(--teal-dark) }
.vc-m-num.blue { color:var(--blue) }
.vc-m-label {
  font-size:.5rem; font-weight:500; line-height:1.35;
  color:var(--t3); text-transform:uppercase; letter-spacing:.06em;
}
.vc-m-bar { height:2px; background:var(--bg-mist); border-radius:1px; overflow:hidden }
.vc-m-fill {
  height:100%; background:var(--pink); border-radius:1px;
  width:0; transition:width 1.6s var(--ease);
}
.vc-m-fill.teal { background:var(--teal-dark) }
.vc-m-fill.blue { background:var(--blue) }

/* Scroll hint */
.scroll-hint {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  z-index:3; opacity:0; animation:fadeUp .6s var(--ease) 1.8s forwards;
}
.scroll-hint span {
  font-size:.5rem; letter-spacing:.24em; text-transform:uppercase; color:var(--t4);
}
.scroll-needle {
  width:1px; height:40px;
  background:linear-gradient(to bottom,transparent,var(--pink));
  animation:needlePulse 2s ease-in-out infinite;
}
@keyframes needlePulse {
  0%,100%{ transform:scaleY(1); opacity:.4 }
  50%    { transform:scaleY(1.3) translateY(4px); opacity:1 }
}


/* ══════════════════════════════════════════════════════
   SECCIONES — base
══════════════════════════════════════════════════════ */
.sec { padding:50px 0; position:relative; overflow:hidden }
.sec-white  { background:var(--bg-white) }
.sec-pearl  { background:var(--bg-pearl) }
.sec-mist   { background:var(--bg-mist) }
.sec-navy   { background:var(--navy); }     /* única sección oscura */
.sec-cta    { background:var(--bg-white); text-align:center }

/* Eyebrow */
.eyebrow {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:.65rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--pink); display:inline-block; margin-bottom:.85rem;
}
.eyebrow-teal { color:var(--teal-dark) }
.eyebrow-light { color:rgba(109,192,170,.8) }

/* H2 sección */
.sec-h2 {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:clamp(26px,3.4vw,44px);
  font-weight:900; letter-spacing:.2px; line-height:1.08; color:var(--t1);
}
.sec-h2-light { color:#fff }

/* Barra accent */
.accent-bar {
  width:44px; height:3px; background:var(--pink);
  margin:1.1rem 0 1.8rem; border-radius:2px;
}
.accent-bar.teal-bar { background:var(--teal-dark) }
.centered-bar { margin-left:auto; margin-right:auto }

/* Body copy */
.body-copy {
  font-size:.95rem; font-weight:300;
  color:var(--t2); line-height:1.88; margin-bottom:1.5rem;
}
.body-copy strong { font-weight:600; color:var(--t1) }
.light-copy { color:var(--inv-dim) }
.light-copy strong { color:#fff }

.lead-copy {
  font-size:.95rem; font-weight:300;
  color:var(--t2); line-height:1.75; max-width:540px;
}
.lead-copy-light { color:var(--inv-dim) }

.sec-header { margin-bottom:3rem }
.sec-header.centered { text-align:center }
.sec-header.centered .lead-copy { margin:0 auto }

/* Reveals */
[data-reveal="left"]  { opacity:0; transform:translateX(-28px); transition:opacity .9s var(--ease),transform .9s var(--ease) }
[data-reveal="right"] { opacity:0; transform:translateX(28px);  transition:opacity .9s var(--ease),transform .9s var(--ease) }
[data-reveal="up"]    { opacity:0; transform:translateY(28px);  transition:opacity .9s var(--ease),transform .9s var(--ease) }
[data-reveal].visible { opacity:1; transform:none }

/* Glows sección navy */
.navy-glow-l {
  position:absolute; top:15%; left:-8%;
  width:550px; height:550px; border-radius:50%;
  background:radial-gradient(circle,rgba(109,192,170,.06),transparent 65%);
  pointer-events:none;
}
.navy-glow-r {
  position:absolute; bottom:10%; right:-8%;
  width:450px; height:450px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,22,103,.05),transparent 65%);
  pointer-events:none;
}


/* ══════════════════════════════════════════════════════
   QUÉ ES — layout asimétrico claro
══════════════════════════════════════════════════════ */
.quees-wrap {
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:80px; align-items:center;
}
.ghost-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:clamp(100px,13vw,180px);
  font-weight:900; line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(13,17,23,.048);
  position:absolute; top:-1.2rem; left:-1rem;
  pointer-events:none; user-select:none; z-index:0;
}
.quees-left { position:relative }
.quees-left > * { position:relative; z-index:1 }

/* Pull quote */
.pull-quote {
  border-left:3px solid var(--pink);
  padding:.9rem 1.3rem;
  background:var(--pink-10);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.92rem; font-style:italic; font-weight:300;
  color:var(--t1); line-height:1.72; margin-top:1.4rem;
}
.pull-quote strong { font-style:normal; font-weight:700 }

/* Model stack */
.model-stack {
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:var(--r-lg);
  box-shadow:0 4px 6px rgba(13,17,23,.04), 0 24px 60px rgba(13,17,23,.08);
  overflow:hidden;
}
.ms-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.4rem;
  background:var(--bg-pearl);
  border-bottom:1px solid var(--brd);
}
.ms-label {
  font-size:.52rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--t3);
}
.ms-status-dot { width:7px; height:7px; border-radius:50%; background:var(--teal-dark); animation:tealPulse 1.4s infinite }

.ms-layers { padding:1rem 1.4rem; display:flex; flex-direction:column; gap:.5rem }
.ms-layer {
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; padding:.72rem .9rem;
  background:var(--bg-pearl);
  border:1px solid var(--brd);
  border-radius:var(--r-sm);
  opacity:0; transform:translateX(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s, box-shadow .3s;
}
.ms-layer.visible { opacity:1; transform:translateX(0) }
.ms-layer:hover { background:var(--bg-white); box-shadow:0 4px 16px rgba(230,22,103,.08); border-color:rgba(230,22,103,.15) }
.ms-bar { width:3px; height:34px; border-radius:1.5px; background:var(--c,var(--pink)); flex-shrink:0 }
.ms-content { display:flex; align-items:center; gap:.7rem; flex:1 }
.ms-n { font-size:.55rem; font-weight:700; color:var(--t4); flex-shrink:0 }
.ms-content strong { display:block; font-size:.78rem; font-weight:700; color:var(--t1); margin-bottom:.08rem }
.ms-content span { font-size:.68rem; color:var(--t3); font-weight:300 }
.ms-arrow { font-size:.72rem; color:var(--t4); flex-shrink:0; transition:color .3s }
.ms-layer:hover .ms-arrow { color:var(--pink) }

.ms-footer {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--brd);
}
.ms-kpi {
  padding:.85rem 1rem; text-align:center;
  border-right:1px solid var(--brd);
  display:flex; flex-direction:column; gap:.1rem;
}
.ms-kpi:last-child { border-right:none }
.ms-kv {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.1rem; color:var(--t1); line-height:1;
}
.ms-kv em { font-style:normal; font-size:.6rem; color:var(--t3) }
.ms-kv.teal { color:var(--teal-dark) }
.ms-kv.blue { color:var(--blue) }
.ms-kl { font-size:.5rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--t4) }


/* ══════════════════════════════════════════════════════
   PROBLEMAS — cards con onda ECG (fondo perla)
══════════════════════════════════════════════════════ */
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }

.pain-card {
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:var(--r-lg); padding:26px 22px;
  position:relative; overflow:hidden;
  transition:all .45s var(--ease);
  opacity:0; transform:translateY(28px) scale(.97);
}
.pain-card.visible { opacity:1; transform:translateY(0) scale(1) }
.pain-card:hover {
  border-color:rgba(230,22,103,.22);
  transform:translateY(-6px);
  box-shadow:0 16px 44px rgba(230,22,103,.09);
}
.pain-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--pink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.pain-card:hover::after { transform:scaleX(1) }

/* Wave ECG */
.pain-wave { width:100%; height:24px; margin-bottom:1rem; overflow:visible }
.wave-line {
  stroke:var(--pink); stroke-width:1.3; fill:none;
  stroke-dasharray:300; stroke-dashoffset:300;
}
.pain-card.visible .wave-line { animation:drawWave 1.4s var(--ease) forwards }
@keyframes drawWave { to { stroke-dashoffset:0 } }

.pain-ico {
  width:42px; height:42px;
  background:var(--pink-10); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.85rem; transition:background .3s;
}
.pain-ico svg { width:19px; height:19px; color:var(--pink) }
.pain-card:hover .pain-ico { background:var(--pink-20) }
.pain-card h4 { font-size:.9rem; font-weight:700; color:var(--t1); margin-bottom:.4rem }
.pain-card p  { font-size:.77rem; font-weight:300; color:var(--t2); line-height:1.65; margin-bottom:1rem }

.pain-level { display:flex; align-items:center; gap:.55rem }
.pain-lvl-dot { width:6px; height:6px; border-radius:50%; background:var(--lc,var(--pink)); flex-shrink:0 }
.pain-lvl-track { flex:1; height:2px; background:var(--bg-mist); border-radius:1px; overflow:hidden }
.pain-lvl-fill { height:100%; background:var(--pink); border-radius:1px; width:0; transition:width 1.1s var(--ease) }
.pain-lvl-fill.blue-fill { background:var(--blue) }
.pain-lvl-fill.teal-fill { background:var(--teal-dark) }
.pain-card.visible .pain-lvl-fill { width:var(--fw,0%) }
.pain-lvl-text { font-size:.57rem; font-weight:600; color:var(--t3); white-space:nowrap }


/* ══════════════════════════════════════════════════════
   CAPACIDADES — BENTO grid (sección NAVY — única oscura)
══════════════════════════════════════════════════════ */
.bento-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:1px;
  background:var(--navy-brd);
  border:1px solid var(--navy-brd);
  border-radius:var(--r-lg); overflow:hidden;
  margin-top:2.5rem;
}
.bento-cell {
  background:var(--navy2);
  padding:2.2rem 1.8rem;
  position:relative; overflow:hidden;
  transition:background .4s var(--ease);
  opacity:0; transform:translateY(16px);
}
.bento-cell.visible { opacity:1; transform:translateY(0) }
.bento-cell:hover { background:var(--navy3) }

.bento-cell::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 0% 100%,rgba(109,192,170,.07),transparent 55%);
  opacity:0; transition:opacity .45s;
}
.bento-cell:hover::before { opacity:1 }
.bento-cell::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:linear-gradient(to right,var(--teal-dark),var(--pink));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.bento-cell:hover::after { transform:scaleX(1) }

.bento-lg { grid-row:1 / span }
.bento-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  position:absolute; top:-.2em; right:-.02em;
  font-size:5.5rem; font-weight:900; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.04);
  pointer-events:none; user-select:none;
  transition:opacity .3s; padding-top:20px;
}
.bento-cell:hover .bento-num { opacity:0 }

.bento-ico {
  width:48px; height:48px;
  background:rgba(109,192,170,.1);
  border:1px solid rgba(109,192,170,.18);
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem;
  transition:all .35s var(--ease);
}
.bento-ico svg { width:22px; height:22px; color:var(--teal) }
.bento-cell:hover .bento-ico { background:rgba(109,192,170,.18); transform:scale(1.07) }

.bento-cell h3 { font-size:1rem; color:#fff; margin-bottom:.55rem; transition:color .3s }
.bento-cell:hover h3 { color:var(--teal) }
.bento-cell p { font-size:.77rem; color:var(--inv-dim); font-weight:300; line-height:1.65 }

.bento-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem }
.bento-chips span {
  padding:.26rem .72rem;
  border:1px solid rgba(109,192,170,.22);
  border-radius:50px;
  font-size:.57rem; font-weight:600;
  color:rgba(109,192,170,.7);
  background:rgba(109,192,170,.06);
}

/* Mini wave en bento-lg */
.bento-wave { position:absolute; bottom:0; left:0; right:0; height:28px; width:100%; pointer-events:none }
.bw-line { stroke:rgba(109,192,170,.14); stroke-width:1.5; fill:none; stroke-dasharray:600; stroke-dashoffset:600 }
.bento-cell.visible .bw-line { animation:drawWave 2.5s var(--ease) .4s forwards }


/* ══════════════════════════════════════════════════════
   PROCESO — timeline horizontal
══════════════════════════════════════════════════════ */
.proc-container { position:relative; margin-top:3.5rem; padding-bottom:1rem }
.proc-rail {
  position:absolute; top:27px; left:9%; right:9%;
  height:2px; background:var(--brd); border-radius:1px; overflow:visible;
}
.proc-rail-fill {
  height:100%;
  background:linear-gradient(to right,var(--pink),var(--teal-dark));
  width:0; border-radius:1px; transition:width 1.8s var(--ease);
}
.proc-rail-fill.go { width:100% }
.proc-beat {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--pink); top:50%; transform:translate(-50%,-50%); left:0%;
  opacity:0; pointer-events:none; transition:left 1.8s var(--ease), opacity .3s;
}
.proc-beat.go { left:100%; opacity:1; animation:beatTrail 1.8s var(--ease) forwards }
@keyframes beatTrail {
  0%   { left:0%;   box-shadow:0 0 0 0 var(--pink-glow) }
  50%  { box-shadow:0 0 0 10px rgba(230,22,103,0) }
  100% { left:100%; box-shadow:0 0 0 0 rgba(230,22,103,0) }
}

.proc-steps-row { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; position:relative; z-index:1 }
.proc-step {
  text-align:center;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.proc-step.visible { opacity:1; transform:translateY(0) }
.proc-node {
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--brd); background:var(--bg-white);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.1rem;
  font-size:.7rem; font-weight:700; color:var(--pink);
  position:relative; z-index:1;
  box-shadow:0 2px 12px rgba(13,17,23,.06);
  transition:all .45s var(--ease);
}
.proc-node-pulse {
  position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(230,22,103,.15); opacity:0; transition:opacity .4s;
}
.proc-step:hover .proc-node { background:var(--pink); color:#fff; border-color:var(--pink); box-shadow:0 8px 28px rgba(230,22,103,.3); transform:scale(1.12) }
.proc-step:hover .proc-node-pulse { opacity:1 }
.proc-step h4 { font-size:.86rem; font-weight:700; color:var(--t1); margin-bottom:.3rem }
.proc-step p  { font-size:.72rem; font-weight:300; color:var(--t2); line-height:1.55 }


/* ══════════════════════════════════════════════════════
   KPIs — rings SVG + counters (fondo mist)
══════════════════════════════════════════════════════ */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:2.5rem; padding: 30px; }
.kpi-card {
  background:var(--bg-white); border:1px solid var(--brd);
  border-radius:var(--r-lg); padding:28px 20px; text-align:center;
  transition:all .45s var(--ease);
  opacity:0; transform:translateY(24px);
}
.kpi-card.visible { opacity:1; transform:translateY(0) }
.kpi-card:hover {
  border-color:rgba(230,22,103,.2); transform:translateY(-6px);
  box-shadow:0 16px 44px rgba(230,22,103,.09);
}
.kpi-ring-wrap { position:relative; width:130px; height:130px; margin:0 auto 1rem }
.kpi-ring-svg { width:100%; height:100%; transform:rotate(-90deg) }
.ring-track { fill:none; stroke:var(--brd); stroke-width:5 }
.ring-fill {
  fill:none; stroke:var(--pink); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:251.2; stroke-dashoffset:251.2;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.ring-fill.teal-ring { stroke:var(--teal-dark) }
.ring-fill.blue-ring { stroke:var(--blue) }
.kpi-ring-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.kpi-val {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.3rem; font-weight:900; color:var(--pink); line-height:1;
}
.kpi-val.teal { color:var(--teal-dark) }
.kpi-val.blue { color:var(--blue) }
.kpi-card h5 { font-size:.73rem; font-weight:400; color:var(--t2); line-height:1.45 }

/* SLA Chips */
.sla-chips { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top: 20px; }
.sla-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem;
  background:var(--bg-white); border:1px solid var(--brd);
  border-radius:50px;
  font-size:.73rem; font-weight:500; color:var(--t1);
  box-shadow:0 1px 4px rgba(13,17,23,.05);
  opacity:0; transform:scale(.9) translateY(8px);
  transition:all .45s var(--ease); cursor:default;
}
.sla-chip.visible { opacity:1; transform:scale(1) translateY(0) }
.sla-chip:hover { border-color:var(--pink); box-shadow:0 4px 18px rgba(230,22,103,.12); transform:scale(1.03) translateY(-2px) }
.sla-chip i { width:6px; height:6px; border-radius:50%; background:var(--pink); display:block; flex-shrink:0; font-style:normal }
.sla-chip b { font-weight:700; color:var(--pink) }


/* ══════════════════════════════════════════════════════
   DIFERENCIAL — grid (fondo mist, tarjetas blancas)
══════════════════════════════════════════════════════ */
.diff-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin-top:2.5rem;
}
.diff-item {
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.7rem 1.5rem;
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:var(--r-lg);
  transition:all .4s var(--ease);
  opacity:0; transform:translateX(-14px);
}
.diff-item.visible { opacity:1; transform:translateX(0) }
.diff-item:nth-child(even) { transform:translateX(14px) }
.diff-item:nth-child(even).visible { transform:translateX(0) }
.diff-item:hover { border-color:rgba(230,22,103,.18); box-shadow:0 8px 32px rgba(230,22,103,.07); transform:translateY(-3px) !important }

.diff-check {
  width:28px; height:28px; flex-shrink:0;
  border-radius:8px; background:var(--pink-10);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
  transition:background .3s;
}
.diff-item:hover .diff-check { background:var(--pink-20) }
.diff-check svg { width:12px; height:12px; color:var(--pink) }
.diff-item h5 { font-size:.86rem; font-weight:700; color:var(--t1); margin-bottom:.25rem }
.diff-item p  { font-size:.74rem; color:var(--t2); line-height:1.6; font-weight:300 }


/* ══════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════ */
.cta-glow {
  position:absolute; bottom:-80px; left:50%; transform:translateX(-50%);
  width:800px; height:350px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(230,22,103,.07),transparent 65%);
  pointer-events:none;
}
.cta-top-line {
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent,rgba(230,22,103,.2),transparent);
}
.cta-box {
  position:relative; z-index:1;
  max-width:680px; margin:0 auto; padding:0 2rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.cta-box.visible { opacity:1; transform:translateY(0) }
.cta-h2 {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:clamp(28px,3.6vw,46px);
  font-weight:900; line-height:1.08; color:var(--t1); margin-bottom:.9rem;
}
.cta-sub {
  font-size:.95rem; font-weight:300; color:var(--t2); line-height:1.8; margin-bottom:2.4rem;
}
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:50px; background:transparent;
  color:var(--t3); border:1.5px solid var(--brd2);
  cursor:pointer; transition:all .3s;
}
.btn-outline:hover { border-color:var(--pink); color:var(--pink); transform:translateY(-2px) }


/* ══════════════════════════════════════════════════════
   KEYFRAMES GLOBALES
══════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px) }
  to   { opacity:1; transform:translateY(0) }
}


/* ══════════════════════════════════════════════════════
   FLOATING TECH ELEMENTS — decorativos SVG animados
══════════════════════════════════════════════════════ */
.tech-float {
  position:absolute; pointer-events:none; opacity:.5;
  animation:techFloat 6s ease-in-out infinite;
}
.tech-float-2 { animation-delay:-2s; animation-duration:8s }
.tech-float-3 { animation-delay:-4s; animation-duration:7s }
@keyframes techFloat {
  0%,100%{ transform:translateY(0) rotate(0deg) }
  33%    { transform:translateY(-12px) rotate(2deg) }
  66%    { transform:translateY(6px) rotate(-1.5deg) }
}

/* Líneas conectoras en hero */
.connect-lines { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.connect-line {
  position:absolute; background:linear-gradient(to right,transparent,rgba(230,22,103,.08),transparent);
  height:1px;
  animation:lineScan 4s ease-in-out infinite;
}
.connect-line:nth-child(2) { animation-delay:-1.5s; background:linear-gradient(to right,transparent,rgba(109,192,170,.07),transparent) }
.connect-line:nth-child(3) { animation-delay:-3s }
@keyframes lineScan {
  0%   { opacity:0; transform:scaleX(0) }
  20%  { opacity:1 }
  80%  { opacity:1 }
  100% { opacity:0; transform:scaleX(1) }
}

/* Contador chips animados hero */
.hero-stats-row {
  display:flex; gap:1.5rem; margin-top:2rem;
  opacity:0; animation:fadeUp .8s var(--ease) 1.05s forwards;
}
.hstat {
  display:flex; flex-direction:column; gap:.2rem;
}
.hstat-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.5rem; font-weight:900; color:var(--t1); line-height:1;
}
.hstat-num em { font-style:normal; color:var(--pink); font-size:1rem }
.hstat-lbl { font-size:.58rem; font-weight:500; color:var(--t3); letter-spacing:.06em; text-transform:uppercase }
.hstat-sep { width:1px; height:2.5rem; background:var(--brd); align-self:center }

/* Animated ring decorativo en hero */
.hero-ring-deco {
  position:absolute; right:4%; top:50%; transform:translateY(-50%);
  width:420px; height:420px; pointer-events:none; z-index:0;
}
.ring-deco-outer {
  fill:none; stroke:rgba(230,22,103,.07); stroke-width:1;
  animation:ringRotate 20s linear infinite;
  transform-origin:center;
}
.ring-deco-mid {
  fill:none; stroke:rgba(109,192,170,.06); stroke-width:1;
  animation:ringRotate 14s linear infinite reverse;
  transform-origin:center;
}
.ring-deco-inner {
  fill:none; stroke:rgba(75,80,156,.05); stroke-width:1;
  animation:ringRotate 9s linear infinite;
  transform-origin:center;
}
@keyframes ringRotate { to { transform:rotate(360deg) } }


/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .s-hero-inner   { grid-template-columns:1fr; gap:3rem }
  .vital-card     { display:none }
  .quees-wrap     { grid-template-columns:1fr; gap:3rem }
  .bento-grid     { grid-template-columns:1fr 1fr }
  .bento-lg       { grid-row:auto; grid-column:1/span 2 }
  .kpi-row        { grid-template-columns:repeat(2,1fr) }
  .diff-grid      { grid-template-columns:1fr }
  .pain-grid      { grid-template-columns:repeat(2,1fr) }
  .proc-steps-row { grid-template-columns:repeat(3,1fr) }
  .proc-rail      { display:none }
  .proc-beat      { display:none }
  .hero-ring-deco { display:none }
  .hero-stats-row { gap:1rem }
}
@media(max-width:768px) {
  .s-hero-inner   { padding:80px 1.5rem 60px }
  .s-title        { font-size:clamp(36px,10vw,56px); letter-spacing:-1px }
  .pain-grid      { grid-template-columns:1fr }
  .bento-grid     { grid-template-columns:1fr }
  .bento-lg       { grid-column:1 }
  .kpi-row        { grid-template-columns:1fr }
  .proc-steps-row { grid-template-columns:repeat(2,1fr) }
  .ghost-num      { display:none }
  .ms-footer      { grid-template-columns:1fr }
  .ms-kpi         { border-right:none; border-bottom:1px solid var(--brd) }
  .ms-kpi:last-child { border-bottom:none }
  .vc-metrics     { grid-template-columns:repeat(2,1fr) }
  .inner          { padding:0 1.5rem }
  .hero-stats-row { flex-wrap:wrap; gap:.8rem }
}
@media(max-width:480px) {
  .s-title        { font-size:2.4rem; letter-spacing:-.5px }
  .proc-steps-row { grid-template-columns:1fr }
  .diff-grid      { grid-template-columns:1fr }
}