/* ══════════════════════════════════════════════════════
   smart-cities.css — Yeapdata® · Smart Cities
   Estética: corporativa · tecnología de punta · fondos claros
   Tipografía: EurostileExtdBlack / Poppins
   Paleta: blancos y grises cálidos + pink corporativo + teal
   Animaciones: glitch title, city canvas, radar sweep,
                pipeline packet, ring KPIs, neural canvas,
                terminal log, HUD corners, partículas
   FONDO CLARO — una sección navy profundo máximo
   RESPONSIVE: 1280 / 1100 / 1024 / 900 / 768 / 600 / 480 / 380
══════════════════════════════════════════════════════ */

@import url('../master.css');

/* ─── VARIABLES ─── */
:root {
  --pink:        #E8006A;
  --pink-light:  #FF1D75;
  --pink-05:     rgba(232,0,106,.05);
  --pink-10:     rgba(232,0,106,.10);
  --pink-15:     rgba(232,0,106,.15);
  --pink-20:     rgba(232,0,106,.20);
  --pink-glow:   rgba(232,0,106,.28);

  --teal:        #00A896;
  --teal-05:     rgba(0,168,150,.05);
  --teal-10:     rgba(0,168,150,.10);
  --teal-20:     rgba(0,168,150,.20);
  --teal-glow:   rgba(0,168,150,.25);

  --navy:        #0B1437;
  --navy-2:      #0E1B4A;
  --navy-3:      #112060;

  --slate:       #4A5568;
  --slate-2:     #718096;

  --bg-white:    #FFFFFF;
  --bg-off:      #F8F9FC;
  --bg-light:    #F0F4FA;
  --bg-subtle:   #EBF0F8;
  --bg-card:     #FFFFFF;

  --brd:         #E2E8F0;
  --brd-2:       #CBD5E0;
  --brd-pink:    rgba(232,0,106,.18);
  --brd-teal:    rgba(0,168,150,.18);

  --t1:          #0F172A;
  --t2:          #334155;
  --t3:          #64748B;
  --t4:          #94A3B8;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:   0 32px 80px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
  --shadow-pink: 0 8px 32px rgba(232,0,106,.20);
  --shadow-teal: 0 8px 32px rgba(0,168,150,.18);

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

  --max:         1200px;
}

/* ─── RESET ─── */
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 }

/* ─── UTILS ─── */
.sc-wrap { max-width:var(--max); margin:0 auto; padding:5rem 2rem;}
.sc-wrap-sc { max-width:var(--max); margin:0 auto; padding:5rem 2rem; display: grid; grid-template-columns: repeat(2,1fr); column-gap: 15px;}
.pink-em { font-style:normal; color:var(--pink) }
.teal-em { font-style:normal; color:var(--teal) }


/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#FFFFFF 0%,#F0F4FA 50%,#EBF0F8 100%);
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(232,0,106,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,0,106,.04) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none; z-index:0;
}
.city-map-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.radar-canvas {
  position:absolute;
  top:-60px; right:-60px;
  width:400px; height:400px;
  opacity:.12;
  pointer-events:none; z-index:1;
}

/* HUD corners */
.hud-corner {
  position:absolute; z-index:3;
  width:22px; height:22px;
  pointer-events:none;
}
.hud-tl { top:2rem; left:2rem;
  border-top:2px solid var(--pink); border-left:2px solid var(--pink); opacity:.5 }
.hud-tr { top:2rem; right:2rem;
  border-top:2px solid var(--pink); border-right:2px solid var(--pink); opacity:.5 }
.hud-bl { bottom:2rem; left:2rem;
  border-bottom:2px solid var(--pink); border-left:2px solid var(--pink); opacity:.5 }
.hud-br { bottom:2rem; right:2rem;
  border-bottom:2px solid var(--pink); border-right:2px solid var(--pink); opacity:.5 }

/* Línea top */
.sys-line-top {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,var(--pink),var(--teal),var(--pink));
  z-index:5;
  background-size:200% 100%;
  animation:lineFlow 4s linear infinite;
}
@keyframes lineFlow {
  0%   { background-position:0% 0% }
  100% { background-position:200% 0% }
}

/* Hero inner */
.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 1.1fr;
  gap:4rem; align-items:center;
}

/* Terminal badge */
.term-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px;
  border:1px solid var(--brd-pink);
  border-radius:4px;
  background:var(--pink-05);
  font-family:'Poppins',sans-serif;
  font-size:.7rem; font-weight:500;
  color:var(--t3); letter-spacing:.05em;
  margin-bottom:1.5rem;
  opacity:0; animation:fadeUp .6s var(--ease) .1s forwards;
  backdrop-filter:blur(4px);
}
.tb-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 8px var(--pink-glow);
  animation:pinkPulse 1.6s ease infinite; flex-shrink:0;
}
@keyframes pinkPulse {
  0%,100% { box-shadow:0 0 0 0 var(--pink-glow) }
  50%     { box-shadow:0 0 0 8px transparent }
}
.tb-text   { color:var(--pink); font-weight:700; font-size:.68rem; letter-spacing:.14em }
.tb-sep    { color:var(--brd-2) }
.tb-coords { font-size:.62rem; font-family:'Courier New',monospace; color:var(--t4) }

/* Eyebrow */
.hero-industry-label {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal); margin-bottom:.8rem;
  opacity:0; animation:fadeUp .6s var(--ease) .25s forwards;
}

/* Título */
.hero-title {
  font-family:var(--font-family-base);
  font-size:var(--hero-title-size);
  font-weight:700; line-height:var(--hero-line-height);
  letter-spacing:-1.2px; margin-bottom:1.8rem;
  overflow:visible;
}
.ht-row {
  display:block; color:var(--t1);
  opacity:0; transform:translateX(-40px);
  animation:slideIn .9s var(--hard) forwards;
}
.r1 { animation-delay:.3s }
.r2 { animation-delay:.45s; color:var(--pink) }
.r3 { animation-delay:.6s }
@keyframes slideIn { to { opacity:1; transform:translateX(0) } }

/* Glitch */
.glitch-txt {
  position:relative; display:inline-block;
  animation:glitchBase 5s infinite;
}
.glitch-txt::before,.glitch-txt::after {
  content:attr(data-text);
  position:absolute; top:0; left:0; width:100%;
  font-family:inherit; font-size:inherit; font-weight:inherit;
  letter-spacing:inherit; line-height:inherit;
}
.glitch-txt::before {
  color:var(--teal); clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
  animation:glitchTop 5s infinite; opacity:.5;
}
.glitch-txt::after {
  color:var(--pink); clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
  animation:glitchBot 5s infinite; opacity:.5;
}
@keyframes glitchBase {
  0%,90%,100% { transform:translate(0) }
  91% { transform:translate(-2px,1px) }
  92% { transform:translate(2px,-1px) }
  93% { transform:translate(0) }
  96% { transform:translate(1px,2px) }
  97% { transform:translate(-1px,-1px) }
}
@keyframes glitchTop {
  0%,89%,100% { transform:translate(0) }
  90% { transform:translate(-4px,0) }
  91% { transform:translate(4px,0) }
  95% { transform:translate(-3px,0) }
}
@keyframes glitchBot {
  0%,88%,100% { transform:translate(0) }
  89% { transform:translate(4px,0) }
  90% { transform:translate(-3px,0) }
  94% { transform:translate(3px,0) }
}

/* Subtítulo */
.hero-sub {
  font-family:var(--font-family-base);
  font-size:var(--hero-desc-size); font-weight:400;
  color:var(--t2); line-height:var(--hero-desc-line-height);
  max-width:480px; margin-bottom:2.2rem;
  opacity:0; animation:fadeUp .8s var(--ease) .78s forwards;
}

/* Acciones */
.hero-actions {
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .8s var(--ease) .92s forwards;
}
.btn-primary-city {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 32px;
  font-family:'Poppins',sans-serif;
  font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:4px;
  background:var(--pink); color:#fff;
  border:none; cursor:pointer; text-decoration:none;
  transition:all .4s var(--ease);
  box-shadow:var(--shadow-pink);
  position:relative; overflow:hidden;
}
.btn-primary-city::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent);
  opacity:0; transition:opacity .3s;
}
.btn-primary-city:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(232,0,106,.35) }
.btn-primary-city:hover::before { opacity:1 }
.btn-primary-city svg { transition:transform .3s }
.btn-primary-city:hover svg { transform:translateX(4px) }

.btn-ghost-city {
  display:inline-flex; align-items:center;
  padding:14px 28px;
  font-family:'Poppins',sans-serif;
  font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:4px; background:transparent;
  color:var(--t2); border:1.5px solid var(--brd-2);
  cursor:pointer; transition:all .3s; text-decoration:none;
}
.btn-ghost-city:hover {
  border-color:var(--pink); color:var(--pink);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(232,0,106,.12);
}

/* OPS Dashboard */
.ops-dashboard {
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-xl), 0 0 0 1px rgba(232,0,106,.04);
  opacity:0; animation:fadeUp 1s var(--ease) 1.05s forwards;
}
.od-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 1.2rem;
  background:var(--bg-off);
  border-bottom:1px solid var(--brd);
}
.od-dots { display:flex; gap:.4rem }
.od-dot  { width:9px; height:9px; border-radius:50%; background:var(--brd-2) }
.od-dot-pink { background:var(--pink) }
.od-label {
  font-family:'Poppins',sans-serif;
  font-size:.5rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--t4);
}
.od-status {
  display:flex; align-items:center; gap:.35rem;
  font-family:'Poppins',sans-serif;
  font-size:.5rem; font-weight:700;
  letter-spacing:.14em; color:var(--teal);
}
.od-status-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--teal); animation:tealGlow 1.4s infinite;
}
@keyframes tealGlow {
  0%,100% { box-shadow:0 0 0 0 var(--teal-glow) }
  50%     { box-shadow:0 0 0 6px transparent }
}
.od-map-wrap {
  position:relative;
  background:linear-gradient(135deg,var(--bg-light) 0%,var(--bg-subtle) 100%);
  border-bottom:1px solid var(--brd); overflow:hidden;
}
.od-map-svg { width:100%; height:auto }
.od-map-overlay {
  position:absolute; bottom:.5rem; right:.7rem;
  font-family:'Poppins',sans-serif;
  font-size:.42rem; font-weight:700;
  letter-spacing:.2em; color:var(--pink); opacity:.7;
}
.od-feeds { padding:.65rem .8rem; display:flex; flex-direction:column; gap:.35rem }
.od-feed {
  display:grid; grid-template-columns:30px 1fr 80px;
  align-items:center; gap:.55rem;
  padding:.42rem .5rem;
  border-radius:8px; border:1px solid var(--brd);
  background:var(--bg-off); transition:all .3s;
  opacity:0; transform:translateX(16px);
}
.od-feed:hover { background:var(--bg-light); border-color:var(--brd-pink) }
.odf-ico {
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--pink-10);
}
.odf-ico svg { width:13px; height:13px; color:var(--pink) }
.odf-ico.alert  { background:rgba(234,88,12,.08) }
.odf-ico.alert svg { color:#EA580C }
.odf-ico.resp   { background:var(--teal-10) }
.odf-ico.resp svg { color:var(--teal) }
.odf-ico.agency { background:rgba(100,116,139,.08) }
.odf-ico.agency svg { color:var(--slate-2) }
.odf-data  { display:flex; flex-direction:column; gap:1px }
.odf-label {
  font-family:'Poppins',sans-serif;
  font-size:.48rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--t4);
}
.odf-val {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1rem; font-weight:800; color:var(--t1); line-height:1;
}
.odf-val.amber { color:#D97706 }
.odf-val.teal  { color:var(--teal) }
.odf-val small { font-size:.52rem; opacity:.55; font-style:normal }
.odf-bar  { height:3px; background:var(--brd); border-radius:1.5px; overflow:hidden }
.odf-fill {
  height:100%; background:var(--pink); border-radius:1.5px;
  width:0; transition:width 1.4s var(--ease);
}
.odf-fill.amber { background:#D97706 }
.odf-fill.teal  { background:var(--teal) }
.od-sysbar {
  display:flex; justify-content:space-around;
  padding:.55rem .8rem;
  border-top:1px solid var(--brd); background:var(--bg-off);
}
.osb-sys {
  display:flex; align-items:center; gap:.35rem;
  font-family:'Poppins',sans-serif;
  font-size:.46rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--t3);
}
.osb-dot { width:6px; height:6px; border-radius:50% }
.osb-dot.green { background:#22C55E; box-shadow:0 0 4px rgba(34,197,94,.5) }
.osb-dot.amber { background:#D97706; box-shadow:0 0 4px rgba(217,119,6,.5) }
.osb-dot.cyan  { background:var(--teal); box-shadow:0 0 4px var(--teal-glow) }
.osb-dot.pink  { background:var(--pink); box-shadow:0 0 4px var(--pink-glow) }

/* Scroll indicator */
.scroll-terminal {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  z-index:4; opacity:0;
  animation:fadeUp .6s var(--ease) 1.6s forwards;
}
.st-cursor { color:var(--pink); font-size:.85rem; animation:cursorBlink 1.1s steps(1) infinite }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.st-text { font-family:'Courier New',monospace; font-size:.5rem; letter-spacing:.22em; color:var(--t4) }

/* Stats bar hero */
.hero-stats {
  display:flex; gap:2rem; margin-top:2.5rem;
  opacity:0; animation:fadeUp .8s var(--ease) 1.1s forwards;
}
.hs-item { display:flex; flex-direction:column; gap:.2rem }
.hs-val {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.4rem; font-weight:800; color:var(--pink); line-height:1;
}
.hs-val.teal { color:var(--teal) }
.hs-lbl { font-family:'Poppins',sans-serif; font-size:.66rem; font-weight:400; color:var(--t3) }
.hs-sep { width:1px; background:var(--brd); align-self:stretch }
.subsection-title-sc{color: white; padding: 15px 0px;}

/* ══════════════════════════════════════
   SECCIONES BASE
══════════════════════════════════════ */
.sc-sec     { padding:5px 0 80px 0; position:relative }
.off-sec    { background:var(--bg-off) }
.light-sec  { background:var(--bg-white) }
.subtle-sec { background:var(--bg-light) }
.cta-sec    { background:var(--bg-white); text-align:center }
.dark-navy  {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 50%,var(--navy-3) 100%);
  overflow:hidden;
}

/* Headers sección */
.sc-hdr { margin-bottom:3rem }
.sc-hdr.centered { text-align:center }
.sc-eyebrow {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--pink); display:inline-block; margin-bottom:.9rem;
}
.teal-eyebrow  { color:var(--teal) }
.white-eyebrow { color:rgba(255,255,255,.65) }
.sc-h2 {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:clamp(28px,3.5vw,46px);
  font-weight:800; letter-spacing:.3px; line-height:1.1; color:var(--t1);
}
.light-h2 { color:#fff }
.sc-divider {
  width:52px; height:3px; border-radius:2px;
  background:linear-gradient(to right,var(--pink),var(--teal));
  margin:1.2rem 0 2rem;
}
.center-div { margin-left:auto; margin-right:auto }
.sc-body {
  font-family:'Poppins',sans-serif;
  font-size:.97rem; font-weight:300;
  color:var(--t2); line-height:1.85; margin-bottom:1.4rem;
}
.sc-body strong { font-weight:600; color:var(--t1) }
.light-body { color:rgba(255,255,255,.65) }
.light-body strong { color:#fff }
.sc-blockquote {
  border-left:3px solid var(--pink);
  padding:1rem 1.4rem;
  background:var(--pink-05);
  border-radius:0 8px 8px 0;
  font-size:.94rem; font-style:italic;
  font-weight:300; color:var(--t1); line-height:1.75;
}
.sc-blockquote strong { font-style:normal; font-weight:600 }
.topo-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(232,0,106,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,0,106,.03) 1px,transparent 1px);
  background-size:60px 60px; pointer-events:none;
}

/* 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].visible { opacity:1; transform:none }


/* ══════════════════════════════════════
   QUÉ ES
══════════════════════════════════════ */
.quees-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.qg-left { position:relative }
.section-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:clamp(100px,13vw,190px);
  position:absolute; top:-1.5rem; left:-1rem;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,0,106,.07);
  pointer-events:none; user-select:none; z-index:0; line-height:1;
}
.qg-left > * { position:relative; z-index:1 }
.c2-arch {
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.c2a-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.3rem;
  background:var(--bg-off); border-bottom:1px solid var(--brd);
}
.c2a-tag {
  font-size:.5rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--t4);
}
.c2a-live {
  display:flex; align-items:center; gap:.35rem;
  font-size:.5rem; font-weight:700;
  letter-spacing:.14em; color:var(--teal);
}
.c2a-live i {
  width:6px; height:6px; border-radius:50%;
  background:var(--teal); display:block; animation:tealGlow 1.4s infinite;
}
.c2a-stack { padding:1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem }
.c2a-layer {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem .9rem;
  background:var(--bg-off); border:1px solid var(--brd);
  border-radius:8px; transition:all .35s var(--ease);
  opacity:0; transform:translateX(20px);
}
.c2a-layer.visible { opacity:1; transform:translateX(0) }
.c2a-layer:hover   { background:var(--bg-light); border-color:var(--brd-pink); box-shadow:var(--shadow-sm) }
.c2a-bar { width:3px; height:32px; border-radius:2px; background:var(--bc,var(--pink)); flex-shrink:0 }
.c2a-layer-ico {
  width:32px; height:32px; flex-shrink:0;
  border-radius:8px; background:var(--pink-10);
  display:flex; align-items:center; justify-content:center;
}
.c2a-layer-ico svg { width:15px; height:15px; color:var(--pink) }
.c2a-layer-content { flex:1 }
.c2a-layer-content strong { display:block; font-size:.8rem; color:var(--t1); margin-bottom:.1rem }
.c2a-layer-content span   { font-size:.66rem; color:var(--t3); font-weight:300 }
.c2a-arrow { font-size:.75rem; color:var(--t4); flex-shrink:0; transition:color .3s }
.c2a-check { color:var(--teal) }
.c2a-layer:hover .c2a-arrow { color:var(--pink) }
.c2a-kpis {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--brd);
}
.c2a-kpi {
  padding:.9rem; text-align:center;
  border-right:1px solid var(--brd);
  display:flex; flex-direction:column; gap:.12rem;
}
.c2a-kpi:last-child { border-right:none }
.ckv { font-family:'EurostileExtdBlack','Poppins',sans-serif; font-size:1.15rem; color:var(--t1); line-height:1 }
.ckv.pink { color:var(--pink) }
.ckv.teal { color:var(--teal) }
.ckv em   { font-style:normal; font-size:.58rem; opacity:.5 }
.ckl { font-size:.5rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--t4) }


/* ══════════════════════════════════════
   PROBLEMAS — terminal
══════════════════════════════════════ */
.incident-terminal {
  background:var(--bg-white);
  border:1px solid var(--brd);
  border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.it-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 1.3rem;
  background:var(--bg-off); border-bottom:1px solid var(--brd);
}
.it-dots { display:flex; gap:.38rem }
.it-dots span { width:9px; height:9px; border-radius:50%; background:var(--brd-2) }
.it-dots span:first-child { background:var(--pink) }
.it-title { font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--t4) }
.it-clock { font-family:'Courier New',monospace; font-size:.56rem; color:var(--t4); letter-spacing:.1em }
.it-body  { display:flex; flex-direction:column }
.it-row {
  display:grid;
  grid-template-columns:52px 70px 1fr 110px;
  align-items:center; gap:.8rem;
  padding:.75rem 1.3rem;
  border-bottom:1px solid var(--brd);
  transition:background .3s;
  opacity:0; transform:translateX(-14px);
}
.it-row.visible { opacity:1; transform:translateX(0) }
.it-row:hover   { background:var(--bg-off) }
.it-row:last-child { border-bottom:none }
.it-lvl {
  font-size:.58rem; font-weight:700;
  letter-spacing:.1em; padding:.22rem .4rem;
  border-radius:4px; text-align:center;
}
.it-lvl.crit { color:#DC2626; background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2) }
.it-lvl.high { color:#D97706; background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.2) }
.it-lvl.med  { color:var(--teal); background:var(--teal-10); border:1px solid var(--brd-teal) }
.it-id  { font-family:'Courier New',monospace; font-size:.62rem; color:var(--t4); letter-spacing:.06em }
.it-msg { font-size:.76rem; font-weight:300; color:var(--t2); line-height:1.4 }
.it-res { font-size:.56rem; font-weight:700; letter-spacing:.1em; text-align:right }
.it-res.open { color:#DC2626 }
.it-footer {
  display:flex; align-items:center; gap:.8rem;
  padding:.75rem 1.3rem;
  background:linear-gradient(to right,var(--pink-05),var(--teal-05));
  border-top:1px solid var(--brd);
  font-size:.7rem; font-weight:300; color:var(--t2);
}
.itf-ping  { width:8px; height:8px; border-radius:50%; background:var(--teal); flex-shrink:0; animation:tealGlow 1.4s infinite }
.itf-badge { margin-left:auto; font-size:.58rem; font-weight:700; letter-spacing:.12em; color:var(--pink) }


/* ══════════════════════════════════════
   CAPACIDADES — bento grid
══════════════════════════════════════ */
.cap-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1px;
  background:var(--brd); border:1px solid var(--brd);
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-lg); margin-top:2.5rem;
}
.cap-cell {
  background:var(--bg-white);
  padding:2.2rem 1.8rem;
  position:relative; overflow:hidden;
  transition:background .4s var(--ease);
  opacity:0; transform:translateY(18px);
}
.cap-cell.visible { opacity:1; transform:translateY(0) }
.cap-cell:hover   { background:var(--bg-off) }
.cap-cell::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 0 100%,rgba(232,0,106,.05),transparent 55%);
  opacity:0; transition:opacity .45s;
}
.cap-cell:hover::before { opacity:1 }
.cap-cell::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(to right,var(--pink),var(--teal));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.cap-cell:hover::after { transform:scaleX(1) }
.cap-lg { grid-row:1 / span }
.cap-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  position:absolute; top:-.3em; right:-.02em;
  font-size:5.5rem; font-weight:900; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,0,106,.06);
  pointer-events:none; user-select:none;
  transition:opacity .3s; padding-top:25px;
}
.cap-cell:hover .cap-num { opacity:0 }
.cap-ico {
  width:50px; height:50px;
  background:var(--pink-10); border:1px solid var(--brd-pink);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem; transition:all .35s var(--ease);
}
.cap-ico svg { width:22px; height:22px; color:var(--pink) }
.cap-cell:hover .cap-ico { background:var(--pink-20); transform:scale(1.08) }
.cap-cell h3 {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:1rem; color:var(--t1); margin-bottom:.6rem; transition:color .3s;
}
.cap-cell:hover h3 { color:var(--pink) }
.cap-cell p  { font-size:.78rem; color:var(--t2); font-weight:300; line-height:1.65 }
.cap-tags    { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem }
.cap-tags span {
  padding:.26rem .7rem;
  border:1px solid var(--brd-pink); border-radius:4px;
  font-size:.58rem; font-weight:500;
  color:var(--pink); background:var(--pink-05);
}
.cap-wave-deco {
  position:absolute; bottom:0; left:0; right:0;
  height:24px; width:100%; pointer-events:none;
}
.cap-wave-line {
  stroke:var(--brd-pink); stroke-width:1.2; fill:none;
  stroke-dasharray:700; stroke-dashoffset:700;
}
.cap-cell.visible .cap-wave-line { animation:drawLine 2.5s var(--ease) .4s forwards }
@keyframes drawLine { to { stroke-dashoffset:0 } }


/* ══════════════════════════════════════
   PROCESO — pipeline
══════════════════════════════════════ */
.data-pipeline { position:relative; margin-top:3.5rem; padding-bottom:1rem }
.dp-track {
  position:absolute;
  top:28px; left:9%; right:9%; height:2px;
  background:var(--brd); border-radius:1px; overflow:visible;
}
.dp-progress {
  height:100%; width:0;
  background:linear-gradient(to right,var(--pink),var(--teal));
  border-radius:1px; transition:width 2s var(--ease);
}
.dp-progress.go { width:100% }
.dp-packet {
  position:absolute; top:50%;
  transform:translate(-50%,-50%);
  left:0; opacity:0; pointer-events:none;
  transition:left 2s var(--ease),opacity .2s;
}
.dp-packet.go { left:100%; opacity:1 }
.dp-packet-core {
  width:14px; height:14px; border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 16px var(--pink-glow),0 0 32px rgba(232,0,106,.15);
  animation:packetPulse 2s ease infinite;
}
@keyframes packetPulse {
  0%,100% { transform:scale(1) }
  50%     { transform:scale(1.4) }
}
.dp-steps {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1rem; position:relative; z-index:1;
}
.dp-step {
  text-align:center;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.dp-step.visible { opacity:1; transform:translateY(0) }
.dp-node {
  width:58px; height:58px; 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;
  position:relative; z-index:1;
  box-shadow:var(--shadow-md); transition:all .45s var(--ease);
}
.dp-node svg { width:20px; height:20px; color:var(--t3); transition:color .3s }
.dp-node-glow {
  position:absolute; inset:-8px; border-radius:50%;
  border:1px solid rgba(232,0,106,.16);
  opacity:0; transition:opacity .4s;
}
.dp-step:hover .dp-node { background:var(--pink); border-color:var(--pink); box-shadow:var(--shadow-pink); transform:scale(1.1) }
.dp-step:hover .dp-node svg { color:#fff }
.dp-step:hover .dp-node-glow { opacity:1 }
.dp-step h4 { font-family:'EurostileExtdMedium','Poppins',sans-serif; font-size:.86rem; color:var(--t1); margin-bottom:.35rem }
.dp-step p  { font-size:.72rem; color:var(--t3); line-height:1.55; font-weight:300 }


/* ══════════════════════════════════════
   KPIs — sección NAVY
══════════════════════════════════════ */
.kpi-bg-pattern {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px; pointer-events:none;
}
.kpi-glow-orb { position:absolute; border-radius:50%; pointer-events:none }
.kpi-orb-1 {
  width:500px; height:500px; top:-100px; left:-100px;
  background:radial-gradient(circle,rgba(232,0,106,.12) 0%,transparent 60%);
}
.kpi-orb-2 {
  width:400px; height:400px; bottom:-80px; right:-60px;
  background:radial-gradient(circle,rgba(0,168,150,.10) 0%,transparent 60%);
}
.kpi-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; margin-bottom:2.5rem;
}
.kpi-card {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:30px 18px;
  text-align:center; position:relative; overflow:hidden;
  transition:all .45s var(--ease);
  opacity:0; transform:translateY(24px);
  backdrop-filter:blur(10px);
}
.kpi-card.visible { opacity:1; transform:translateY(0) }
.kpi-card:hover  { border-color:rgba(232,0,106,.3); transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.3) }
.kpi-ghost-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-55%);
  font-size:5rem; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);
  pointer-events:none; user-select:none; white-space:nowrap;
}
.kpi-ring-wrap { position:relative; width:130px; height:130px; margin:0 auto 1.1rem; z-index:1 }
.kpi-ring-svg  { width:100%; height:100%; transform:rotate(-90deg) }
.kr-track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:5 }

.kpi-ring-center { 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:800;
  color:#fff; line-height:1; letter-spacing:-.03em;
}
.kpi-val.pink { color:var(--pink) }
.kpi-val.teal { color:var(--teal) }
.kpi-card h5  { font-size:.74rem; font-weight:400; color:rgba(255,255,255,.55); line-height:1.45; margin-bottom:.9rem }
.kpi-sub-bar  { height:2px; background:rgba(255,255,255,.08); border-radius:1px; overflow:hidden }
.ksb-fill {
  height:100%; background:var(--pink); border-radius:1px;
  width:0; transition:width 1.8s var(--ease);
}
.ksb-fill.teal  { background:var(--teal) }
.ksb-fill.white { background:rgba(255,255,255,.5) }
.kpi-chips { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center }
.kc-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.1rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:4px;
  font-size:.74rem; font-weight:500;
  color:rgba(255,255,255,.55);
  opacity:0; transform:scale(.88) translateY(8px);
  transition:all .45s var(--ease); cursor:default;
  backdrop-filter:blur(4px);
}
.kc-chip.visible { opacity:1; transform:scale(1) translateY(0) }
.kc-chip:hover   { border-color:var(--pink); color:#fff; transform:scale(1.02) translateY(-2px) }
.kc-chip i { width:5px; height:5px; border-radius:50%; background:var(--teal); display:block }
.kc-chip b { font-weight:700; color:var(--teal) }


/* ══════════════════════════════════════
   DIFERENCIAL
══════════════════════════════════════ */
.neural-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.22;
}
.diff-layout {
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:80px; align-items:start;
  position:relative; z-index:1;
}
.dl-left { position:relative }
.tool-stack { display:flex; flex-direction:column; gap:.55rem; margin-top:1.8rem }
.ts-row {
  display:flex; align-items:center; gap:.8rem;
  padding:.75rem 1rem;
  background:var(--bg-white); border:1px solid var(--brd);
  border-radius:8px; transition:all .3s var(--ease);
  opacity:0; transform:translateX(-16px);
  box-shadow:var(--shadow-sm);
}
.ts-row.visible { opacity:1; transform:translateX(0) }
.ts-row:hover   { border-color:var(--brd-pink); box-shadow:var(--shadow-md) }
.ts-tag {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--pink); white-space:nowrap;
  background:var(--pink-10); border:1px solid var(--brd-pink);
  padding:.22rem .6rem; border-radius:4px; flex-shrink:0;
}
.teal-tag { color:var(--teal); background:var(--teal-10); border-color:var(--brd-teal) }
.blue-tag { color:#6366F1; background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.18) }
.ts-row span { font-size:.74rem; color:var(--t2); font-weight:300 }
.diff-cards-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--brd);
  border:1px solid var(--brd); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.dc {
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1.8rem 1.5rem;
  background:var(--bg-white); transition:background .4s var(--ease);
  opacity:0; transform:translateY(14px);
}
.dc.visible { opacity:1; transform:translateY(0) }
.dc:hover   { background:var(--bg-off) }
.dc-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;
}
.dc-check svg { width:12px; height:12px; color:var(--pink) }
.dc h5 { font-size:.84rem; color:var(--t1); margin-bottom:.25rem }
.dc p  { font-size:.74rem; color:var(--t2); line-height:1.6; font-weight:300 }


/* ══════════════════════════════════════
   CERTIFICACIONES
══════════════════════════════════════ */
.cert-grid {
  display:flex; align-items:center; justify-content:center;
  gap:2rem; flex-wrap:wrap; margin-top:2.5rem;
}
.cert-item {
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.5rem 1.8rem;
  background:var(--bg-white); border:1px solid var(--brd);
  border-radius:12px; box-shadow:var(--shadow-sm);
  transition:all .3s var(--ease);
  opacity:0; transform:translateY(16px); min-width:140px;
}
.cert-item.visible { opacity:1; transform:translateY(0) }
.cert-item:hover   { border-color:var(--brd-pink); box-shadow:var(--shadow-md) }
.cert-badge {
  width:56px; height:56px;
  background:linear-gradient(135deg,#1E40AF,#2563EB);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.cert-badge svg { width:28px; height:28px; color:#fff }
.cert-name {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:.7rem; font-weight:700;
  color:var(--t1); letter-spacing:.05em; text-align:center;
}
.cert-num { font-size:.55rem; color:var(--t4); font-family:'Courier New',monospace }
.cert-big-stat {
  display:flex; align-items:center; gap:1.5rem;
  justify-content:center; margin-bottom:2rem;
}
.cbs-val {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:4rem; color:var(--pink); line-height:1; font-weight:900;
}
.cbs-lbl { font-size:.9rem; color:var(--t2); font-weight:300; line-height:1.5; max-width:200px }


/* ══════════════════════════════════════
   MODALIDADES DE CONTRATACIÓN
══════════════════════════════════════ */
.modal-wrap { margin-top:4rem }
.modal-title-sm {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:1.1rem; text-align:center;
  color:var(--t1); margin-bottom:2rem;
}
.modal-cards-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.modal-card-sc {
  background:var(--bg-white); border:1px solid var(--brd);
  border-radius:12px; padding:2rem 1.5rem;
  text-align:center; box-shadow:var(--shadow-sm);
  transition:all .3s; position:relative;
}
.modal-card-sc:hover { box-shadow:0 8px 32px rgba(232,0,106,.1); border-color:var(--brd-pink) }
.modal-card-sc--featured { border:2px solid var(--pink); box-shadow:var(--shadow-pink) }
.modal-card-sc--featured:hover { box-shadow:0 16px 48px rgba(232,0,106,.22); border-color:var(--pink) }
.modal-card-sc--teal:hover { box-shadow:0 8px 32px rgba(0,168,150,.1); border-color:var(--brd-teal) }
.mcs-badge {
  position:absolute; top:-11px; left:50%;
  transform:translateX(-50%);
  background:var(--pink); color:#fff;
  font-size:.6rem; font-weight:700;
  letter-spacing:.12em; padding:.2rem .8rem;
  border-radius:20px; white-space:nowrap;
}
.mcs-num {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:1.8rem; color:var(--pink);
  margin-bottom:.5rem; line-height:1;
}
.mcs-num--teal { color:var(--teal) }
.mcs-h { font-size:.9rem; color:var(--t1); margin-bottom:.5rem; font-weight:600 }
.mcs-p { font-size:.75rem; color:var(--t3); line-height:1.6 }


/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.cta-city-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.08;
}
.cta-top-line {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,var(--pink),var(--teal),var(--pink));
  background-size:200% 100%;
  animation:lineFlow 4s linear infinite; z-index:2;
}
.cta-box {
  position:relative; z-index:1;
  max-width:720px; margin:0 auto; padding:0 2rem;
  opacity:0; transform:translateY(22px);
  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(30px,4vw,56px);
  font-weight:800; letter-spacing:.3px; line-height:1.06;
  color:var(--t1); margin-bottom:1rem;
}
.cta-p { font-size:.97rem; font-weight:300; color:var(--t2); line-height:1.82; margin-bottom:2.5rem }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn-cta-outline {
  display:inline-flex; align-items:center;
  padding:14px 30px; font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:4px; background:transparent;
  color:var(--t2); border:1.5px solid var(--brd-2);
  cursor:pointer; transition:all .3s; text-decoration:none;
}
.btn-cta-outline:hover { border-color:var(--pink); color:var(--pink); transform:translateY(-2px); box-shadow:0 4px 16px rgba(232,0,106,.12) }

/* Extras */
.gradient-txt {
  background:linear-gradient(90deg,var(--pink),var(--teal));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.deco-orb   { position:absolute; border-radius:50%; pointer-events:none }
.orb-pink-lg { width:400px; height:400px; background:radial-gradient(circle,rgba(232,0,106,.06) 0%,transparent 65%) }
.orb-teal-lg { width:350px; height:350px; background:radial-gradient(circle,rgba(0,168,150,.06) 0%,transparent 65%) }
.tech-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .8rem; border:1px solid var(--brd);
  border-radius:20px; font-size:.65rem; font-weight:500;
  color:var(--t3); background:var(--bg-white); box-shadow:var(--shadow-sm);
}
.tech-badge i { width:5px; height:5px; border-radius:50%; background:var(--pink) }

/* ─── KPI sin números ─── */

/* Texto central (reemplaza números) */
.kpi-label {
  font-family:'EurostileExtdBlack','Poppins',sans-serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  line-height:1.2;
  padding:0 6px;
}

/* Ring estático (sin animación por porcentaje) */
.static-ring {
  stroke-dasharray:289;
  stroke-dashoffset:120; /* controla "llenado visual" */
  opacity:.85;
  transition:all .8s var(--ease);
}

/* Hover sutil para mantener dinamismo */
.kpi-card:hover .static-ring {
  stroke-dashoffset:90;
  opacity:1;
}

/* Barra inferior fija */
.static-bar {
  width:70%;
  opacity:.75;
  transition:all .8s var(--ease);
}

/* Hover barra */
.kpi-card:hover .static-bar {
  width:85%;
  opacity:1;
}

/* ── 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 }
}

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


/* ══════════════════════════════════════════════════════
   RESPONSIVE — breakpoints unificados
   1280 → 1100 → 1024 → 900 → 768 → 600 → 480 → 380
══════════════════════════════════════════════════════ */

/* ── 1280px ── */
@media(max-width:1280px){
  .hero-inner  { padding:100px 2rem 80px; gap:3rem }
  .quees-grid  { gap:60px }
  .diff-layout { gap:60px }
}

/* ── 1100px ── */
@media(max-width:1100px){
  .hero-inner    { grid-template-columns:1fr; padding:96px 2rem 72px }
  .ops-dashboard { max-width:520px; width:100% }

  .quees-grid    { grid-template-columns:1fr; gap:3rem }
  .section-num   { font-size:clamp(80px,11vw,140px) }

  .cap-grid      { grid-template-columns:1fr 1fr }
  .cap-lg        { grid-row:auto; grid-column:1 / span 2 }

  .diff-layout   { grid-template-columns:1fr; gap:3rem }
  .diff-cards-grid { grid-template-columns:1fr 1fr }

  .kpi-row       { grid-template-columns:repeat(2,1fr) }

  .dp-steps      { grid-template-columns:repeat(3,1fr) }
  .dp-track      { display:none }

  .modal-cards-grid { gap:1.2rem }
}

/* ── 1024px ── */
@media(max-width:1024px){
  .hero-inner    { padding:88px 2rem 64px }
  .ops-dashboard { width:100%; max-width:540px }
  .hero-stats    { gap:1.5rem }

  .c2a-kpis  { grid-template-columns:repeat(3,1fr) }

  .it-row    { grid-template-columns:52px 70px 1fr 110px }
  .it-id     { display:none }

  .cap-grid  { grid-template-columns:1fr 1fr }
  .cap-lg    { grid-column:1 / span 2 }

  .dp-steps  { grid-template-columns:repeat(3,1fr); row-gap:2.5rem }
  .dp-track  { display:none }

  .kpi-row   { grid-template-columns:repeat(2,1fr) }
  .kpi-chips { gap:.45rem }

  .diff-layout     { grid-template-columns:1fr }
  .diff-cards-grid { grid-template-columns:1fr 1fr }

  .cert-grid { gap:1.2rem }
}

/* ── 900px ── */
@media(max-width:900px){
  .sc-sec  { padding:80px 0 }
  .hero-inner { padding:80px 1.75rem 60px }
  .hero-title { font-size:var(--hero-title-size); letter-spacing:-1.5px }
  .hero-sub   { font-size:var(--hero-desc-size) }
  .hero-stats { gap:1.2rem }
  .hs-val     { font-size:1.2rem }

  .od-feeds { padding:.55rem .7rem }
  .od-feed  { grid-template-columns:28px 1fr 72px; gap:.45rem; padding:.38rem .45rem }

  .c2a-stack { padding:.8rem 1rem }
  .c2a-layer { padding:.6rem .75rem }

  .it-row { grid-template-columns:52px 1fr 80px; gap:.6rem; padding:.65rem 1rem }
  .it-id  { display:none }

  .cap-cell { padding:1.8rem 1.5rem }

  .dp-steps { grid-template-columns:repeat(2,1fr); row-gap:2.5rem }
  .dp-node  { width:52px; height:52px }

  .kpi-ring-wrap { width:110px; height:110px }
  .kpi-card      { padding:24px 14px }

  .tool-stack  { gap:.4rem }
  .ts-row span { font-size:.7rem }
  .diff-cards-grid { grid-template-columns:1fr }

  .cert-grid { gap:1rem }
  .cert-item { padding:1.2rem 1.4rem; min-width:120px }
  .cert-badge { width:48px; height:48px }

  /* Modalidades — 2 columnas */
  .modal-cards-grid         { grid-template-columns:1fr 1fr; gap:1.2rem }
  .modal-card-sc--featured  { grid-column:1 / span 2 }
}

/* ── 768px ── */
@media(max-width:768px){

  .sc-sec  { padding:68px 0 }

  .hero-inner   { padding:80px 1.5rem 56px; grid-template-columns:1fr }
  .hero-title   { font-size:var(--hero-title-size); letter-spacing:-1px }
  .hero-sub     { font-size:var(--hero-desc-size); max-width:100% }
  .hero-actions { gap:10px }
  .btn-primary-city,
  .btn-ghost-city { padding:12px 22px; font-size:.73rem }
  .hero-stats   { gap:.9rem; margin-top:2rem; flex-wrap:wrap }
  .hs-sep       { height:22px }
  .hs-val       { font-size:1.1rem }

  .hud-corner       { width:16px; height:16px }
  .hud-tl,.hud-bl   { left:1rem }
  .hud-tr,.hud-br   { right:1rem }
  .hud-tl,.hud-tr   { top:1rem }
  .hud-bl,.hud-br   { bottom:1rem }

  .term-badge { font-size:.64rem; padding:6px 12px }
  .tb-coords  { display:none }

  .ops-dashboard { max-width:100% }
  .od-feed  { grid-template-columns:26px 1fr 64px; gap:.4rem }
  .odf-val  { font-size:.85rem }

  .section-num { display:none }
  .c2a-kpis    { grid-template-columns:1fr }
  .c2a-kpi     { border-right:none; border-bottom:1px solid var(--brd) }
  .c2a-kpi:last-child { border-bottom:none }
  .c2a-layer   { padding:.55rem .7rem; gap:.55rem }
  .c2a-layer-content strong { font-size:.76rem }
  .c2a-layer-content span   { font-size:.62rem }

  .it-row   { grid-template-columns:48px 1fr; gap:.5rem; padding:.6rem .9rem }
  .it-res   { display:none }
  .it-msg   { font-size:.72rem }
  .it-footer { flex-wrap:wrap; gap:.5rem; font-size:.66rem }

  .cap-grid { grid-template-columns:1fr }
  .cap-lg   { grid-column:1 }
  .cap-cell { padding:1.6rem 1.4rem }

  .dp-steps { grid-template-columns:repeat(2,1fr); row-gap:2rem }
  .dp-node  { width:50px; height:50px }
  .dp-step h4 { font-size:.82rem }
  .dp-step p  { font-size:.7rem }

  .kpi-row      { grid-template-columns:1fr 1fr }
  .kpi-ring-wrap { width:100px; height:100px }
  .kpi-val      { font-size:1.1rem }
  .kpi-card h5  { font-size:.7rem }
  .kpi-chips    { gap:.38rem }
  .kc-chip      { font-size:.7rem; padding:.45rem .85rem }

  .diff-cards-grid { grid-template-columns:1fr }
  .dc { padding:1.5rem 1.2rem }

  .cert-big-stat { gap:1rem }
  .cbs-val { font-size:3rem }
  .cert-grid { gap:.9rem }
  .cert-item { padding:1.1rem 1.2rem; min-width:100px }

  .modal-cards-grid        { grid-template-columns:1fr 1fr; gap:1.2rem }
  .modal-card-sc--featured { grid-column:1 / span 2 }

  .cta-h2 { font-size:clamp(28px,7vw,44px) }
  .cta-p  { font-size:.9rem }
  .cta-btns { flex-wrap:wrap }
  .btn-primary-city,
  .btn-cta-outline { width:100%; justify-content:center; max-width:320px }

  .sc-blockquote   { font-size:.88rem; padding:.8rem 1.1rem }
  .scroll-terminal { display:none }
}

/* ── 600px ── */
@media(max-width:600px){

  .sc-sec  { padding:56px 0 }

  .hero-inner   { padding:68px 1.25rem 48px }
  .hero-title   { font-size:var(--hero-title-size); letter-spacing:-.8px }
  .hero-sub     { font-size:var(--hero-desc-size); line-height:var(--hero-desc-line-height) }
  .hero-actions { flex-direction:column; gap:8px }
  .btn-primary-city,
  .btn-ghost-city { width:100%; justify-content:center; text-align:center }
  .hero-stats { gap:.7rem }
  .hs-val     { font-size:1rem }
  .hs-lbl     { font-size:.58rem }
  .hs-sep     { height:18px }

  .term-badge { gap:6px; font-size:.6rem; padding:5px 10px; margin-bottom:1.2rem }
  .tb-sep     { display:none }

  .od-feed   { grid-template-columns:24px 1fr; gap:.35rem; padding:.35rem .4rem }
  .odf-bar   { display:none }
  .odf-val   { font-size:.82rem }
  .od-sysbar { gap:.5rem; flex-wrap:wrap; justify-content:center; padding:.5rem }
  .osb-sys   { font-size:.42rem }

  .c2a-header { padding:.6rem 1rem }
  .c2a-stack  { padding:.7rem .85rem; gap:.4rem }
  .c2a-layer  { padding:.5rem .6rem; gap:.5rem }
  .c2a-bar    { height:28px }

  .incident-terminal { border-radius:8px }
  .it-row   { grid-template-columns:44px 1fr; padding:.55rem .8rem; gap:.4rem }
  .it-lvl   { font-size:.54rem; padding:.18rem .3rem }
  .it-msg   { font-size:.68rem }
  .it-footer { padding:.6rem .8rem; font-size:.62rem }
  .itf-badge { font-size:.54rem }

  .cap-cell   { padding:1.4rem 1.2rem; border-radius:0 }
  .cap-ico    { width:42px; height:42px }
  .cap-ico svg { width:18px; height:18px }
  .cap-cell h3 { font-size:.92rem }
  .cap-cell p  { font-size:.75rem }
  .cap-num    { font-size:4rem }

  .dp-steps { grid-template-columns:1fr; max-width:360px; margin:0 auto; row-gap:1.8rem }
  .dp-node  { width:46px; height:46px }
  .dp-step h4 { font-size:.8rem }
  .dp-step p  { font-size:.68rem }

  .kpi-row      { grid-template-columns:1fr 1fr; gap:14px }
  .kpi-ring-wrap { width:90px; height:90px }
  .kpi-val      { font-size:1rem }
  .kpi-card     { padding:20px 12px; border-radius:10px }
  .kpi-card h5  { font-size:.65rem }
  .kpi-chips    { gap:.32rem }
  .kc-chip      { font-size:.65rem; padding:.38rem .72rem }
  .kc-chip b    { font-size:.62rem }

  .tool-stack  { gap:.35rem }
  .ts-row      { padding:.62rem .85rem; gap:.6rem }
  .ts-tag      { font-size:.56rem; padding:.18rem .5rem }
  .ts-row span { font-size:.68rem }
  .dc          { padding:1.3rem 1rem; gap:.65rem }
  .dc-check    { width:24px; height:24px; border-radius:7px }
  .dc h5       { font-size:.8rem }
  .dc p        { font-size:.7rem }

  .cert-grid  { grid-template-columns:1fr 1fr; gap:.8rem }
  .cert-item  { padding:1rem; min-width:unset }
  .cert-badge { width:44px; height:44px; border-radius:10px }
  .cert-badge svg { width:22px; height:22px }
  .cert-name  { font-size:.64rem }
  .cert-num   { font-size:.5rem }
  .cbs-val    { font-size:2.5rem }
  .cbs-lbl    { font-size:.84rem }

  .modal-cards-grid        { grid-template-columns:1fr; gap:1rem }
  .modal-card-sc--featured { margin-top:.8rem; grid-column:auto }

  .cta-h2 { font-size:clamp(24px,8vw,36px) }
  .cta-p  { font-size:.85rem }
  .cta-btns { flex-direction:column; align-items:center }
  .btn-primary-city,
  .btn-cta-outline { max-width:100% }
}

/* ── 480px ── */
@media(max-width:480px){

  .sc-sec  { padding:48px 0 }

  .hero-inner { padding:60px 1rem 44px }
  .hero-title { font-size:var(--hero-title-size); letter-spacing:-.5px }
  .hero-sub   { font-size:var(--hero-desc-size) }
  .hero-stats { flex-wrap:wrap; gap:.55rem }
  .hs-sep     { height:16px }

  .od-topbar { padding:.5rem .8rem }
  .od-label  { display:none }
  .od-feeds  { padding:.45rem .55rem; gap:.28rem }
  .od-feed   { grid-template-columns:22px 1fr; padding:.3rem .38rem }
  .odf-val   { font-size:.78rem }
  .odf-label { font-size:.4rem }

  .sc-blockquote { font-size:.82rem; padding:.7rem 1rem }
  .c2a-layer     { gap:.45rem }
  .c2a-layer-ico { width:28px; height:28px; border-radius:7px }
  .c2a-layer-ico svg { width:13px; height:13px }

  .it-topbar { padding:.5rem .8rem }
  .it-title  { font-size:.44rem }
  .it-row    { padding:.5rem .65rem; gap:.35rem }
  .it-lvl    { font-size:.5rem }
  .it-msg    { font-size:.64rem }

  .cap-grid  { border-radius:10px }
  .cap-cell  { padding:1.2rem 1rem }
  .cap-cell h3 { font-size:.88rem }
  .cap-cell p  { font-size:.72rem }
  .cap-tags span { font-size:.54rem; padding:.2rem .5rem }

  .kpi-row      { grid-template-columns:1fr 1fr; gap:12px }
  .kpi-ring-wrap { width:80px; height:80px }
  .kpi-val      { font-size:.95rem }
  .kpi-card     { padding:16px 10px; border-radius:8px }
  .kpi-card h5  { font-size:.6rem }
  .kpi-chips    { gap:.28rem }
  .kc-chip      { font-size:.6rem; padding:.32rem .6rem }

  .ts-row  { padding:.55rem .75rem }
  .ts-tag  { font-size:.52rem }

  .cert-big-stat { flex-direction:column; gap:.5rem; text-align:center }
  .cbs-val { font-size:2.2rem }
  .cert-grid  { grid-template-columns:1fr 1fr; gap:.65rem }
  .cert-item  { padding:.85rem; border-radius:10px }

  .cta-h2  { font-size:clamp(22px,7.5vw,32px) }
  .cta-p   { font-size:.82rem }
  .sc-h2   { font-size:clamp(24px,7vw,36px) }
  .sc-body { font-size:.9rem }
}

/* ── 380px — target 360×740 ── */
@media(max-width:380px){

  .sc-sec  { padding:40px 0 }

  .hero        { min-height:auto; overflow:visible }
  .hero-inner  { padding:52px .9rem 36px; gap:1.6rem }
  .hero-title  { font-size:var(--hero-title-size); letter-spacing:-.3px; word-break:break-word; overflow-wrap:break-word }
  .hero-sub    { font-size:var(--hero-desc-size); line-height:var(--hero-desc-line-height); margin-bottom:1.6rem; max-width:100% }
  .term-badge  { font-size:.56rem; padding:4px 8px; margin-bottom:1rem; gap:5px }
  .tb-dot      { width:5px; height:5px }
  .hero-industry-label { font-size:.6rem; margin-bottom:.6rem }

  .btn-primary-city,
  .btn-ghost-city { padding:10px 16px; font-size:.68rem; width:100%; justify-content:center }
  .hero-actions   { gap:7px; flex-direction:column }

  .hero-stats { gap:.45rem; margin-top:1.4rem; flex-wrap:wrap }
  .hs-val     { font-size:.95rem }
  .hs-lbl     { font-size:.54rem }
  .hs-sep     { height:14px }

  .hud-corner   { display:none }
  .sys-line-top { height:2px }

  .ops-dashboard { border-radius:8px }
  .od-topbar     { padding:.42rem .65rem }
  .od-dots       { gap:.28rem }
  .od-dot        { width:7px; height:7px }
  .od-map-wrap   { max-height:100px; overflow:hidden }
  .od-feeds      { padding:.38rem .5rem; gap:.24rem }
  .od-feed       { grid-template-columns:20px 1fr; padding:.28rem .35rem; border-radius:6px }
  .odf-val       { font-size:.74rem }
  .odf-label     { font-size:.38rem }
  .od-sysbar     { padding:.42rem .5rem; gap:.3rem }
  .osb-sys       { font-size:.38rem }
  .osb-dot       { width:5px; height:5px }

  .sc-h2         { font-size:clamp(20px,7vw,28px) }
  .sc-body       { font-size:.82rem }
  .sc-eyebrow    { font-size:.62rem }
  .sc-blockquote { font-size:.78rem; padding:.65rem .9rem }
  .c2a-stack     { padding:.6rem .75rem; gap:.35rem }
  .c2a-layer     { padding:.45rem .55rem; gap:.4rem; border-radius:6px }
  .c2a-layer-ico { width:26px; height:26px; border-radius:6px }
  .c2a-layer-ico svg { width:13px; height:13px }
  .c2a-layer-content strong { font-size:.72rem }
  .c2a-layer-content span   { font-size:.58rem }
  .c2a-bar   { height:24px; width:2.5px }
  .c2a-kpi   { padding:.7rem .6rem }
  .ckv       { font-size:1rem }
  .ckl       { font-size:.44rem }

  .it-topbar { padding:.45rem .65rem }
  .it-title  { letter-spacing:.12em; font-size:.4rem }
  .it-row    { padding:.45rem .6rem; gap:.3rem }
  .it-lvl    { font-size:.46rem; padding:.15rem .28rem }
  .it-msg    { font-size:.6rem; line-height:1.35 }
  .it-footer { padding:.5rem .6rem; font-size:.58rem; gap:.4rem }
  .itf-badge { font-size:.5rem }

  .cap-cell    { padding:1.1rem .9rem }
  .cap-ico     { width:38px; height:38px; border-radius:8px }
  .cap-ico svg { width:16px; height:16px }
  .cap-cell h3 { font-size:.84rem; margin-bottom:.45rem }
  .cap-cell p  { font-size:.69rem }
  .cap-tags    { margin-top:.9rem; gap:.3rem }
  .cap-tags span { font-size:.5rem; padding:.18rem .44rem }

  .dp-step h4 { font-size:.76rem }
  .dp-step p  { font-size:.64rem }
  .dp-node    { width:42px; height:42px }

  .kpi-row      { grid-template-columns:1fr 1fr; gap:10px }
  .kpi-ring-wrap { width:70px; height:70px }
  .kpi-val      { font-size:.85rem }
  .kpi-card     { padding:14px 8px; border-radius:8px }
  .kpi-card h5  { font-size:.56rem; line-height:1.35 }
  .kpi-ghost-num { font-size:3.5rem }
  .kpi-sub-bar  { height:1.5px }
  .kpi-chips    { gap:.24rem }
  .kc-chip      { font-size:.56rem; padding:.28rem .5rem; border-radius:3px }

  .ts-row      { padding:.5rem .65rem; gap:.5rem }
  .ts-tag      { font-size:.5rem; padding:.15rem .44rem }
  .ts-row span { font-size:.64rem }
  .dc          { padding:1.1rem .9rem; gap:.55rem }
  .dc-check    { width:22px; height:22px; border-radius:6px }
  .dc-check svg { width:10px; height:10px }
  .dc h5       { font-size:.76rem }
  .dc p        { font-size:.66rem }

  .cert-big-stat { gap:.4rem }
  .cbs-val    { font-size:2rem }
  .cbs-lbl    { font-size:.78rem; max-width:160px }
  .cert-grid  { grid-template-columns:1fr 1fr; gap:.55rem }
  .cert-item  { padding:.75rem; min-width:unset; border-radius:10px }
  .cert-badge { width:38px; height:38px; border-radius:8px }
  .cert-badge svg { width:18px; height:18px }
  .cert-name  { font-size:.58rem }
  .cert-num   { font-size:.44rem }

  .modal-cards-grid { gap:.85rem }
  .mcs-num  { font-size:1.4rem }
  .mcs-h    { font-size:.84rem }
  .mcs-p    { font-size:.7rem }

  .cta-h2  { font-size:clamp(20px,7vw,28px) }
  .cta-p   { font-size:.78rem }
  .btn-primary-city,
  .btn-cta-outline { padding:10px 14px; font-size:.66rem }
  .sc-divider { margin:.9rem 0 1.4rem }
}