/* ───────────── base ───────────── */
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background:#04070d; color:#fff; }

::selection { background: rgba(0,212,255,.35); color:#fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background:#04070d; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#0d2235,#0a1828); border-radius:8px; border:2px solid #04070d; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #15405f, #0d2438); }

/* ───────────── ambient ───────────── */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.bg-scanlines {
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
}

/* ───────────── gradient text ───────────── */
.text-gradient {
  background: linear-gradient(90deg,#7ce6ff 0%,#00d4ff 50%,#3aa8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-warm {
  background: linear-gradient(90deg,#ffd089 0%,#ff7a18 60%,#ff5a14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ───────────── nav ───────────── */
#nav {
  background: rgba(4,7,13,.1);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1.5px solid #00d4ff;
  box-shadow: 0 0 22px rgba(0,212,255,.4), 0 2px 0 rgba(0,212,255,.6);
}
#nav.scrolled {
  background: rgba(4,7,13,.97);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

/* ───────────── fixed logo ───────────── */
.logo-fixed {
  position: fixed;
  top: 0px;
  left: 30px;
  z-index: 60;
  height: 100px;
  width: auto;
  display: flex;
  align-items: center;
}
.logo-fixed img {
  height: 100px;
  width: auto;
}
@media (max-width: 1023px) {
  .logo-fixed { display: none; }
}

/* ───────────── mobile logo (fixed, centrado) ───────────── */
.logo-mobile {
  position: fixed;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  height: 80px;
  width: auto;
  display: none;
  align-items: center;
  justify-content: center;
}
.logo-mobile img {
  height: 66px;
  width: auto;
}
@media (max-width: 1023px) {
  .logo-mobile { display: flex; }
}

/* ───────────── mobile nav ───────────── */
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
#menu-toggle.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-toggle.open .hamburger-line:nth-child(2) { opacity: 0; }
#menu-toggle.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobile-menu {
  background: rgba(4,7,13,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
#mobile-menu.open { display: flex; }

.mobile-nav-item {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: color .2s, padding-left .2s;
}
.mobile-nav-item:last-child { border-bottom: none; }
.mobile-nav-item:hover { color: #fff; padding-left: 28px; }

.nav-sobre-mi {
  color: #00d4ff !important;
  position: relative;
}
.nav-sobre-mi::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #00d4ff;
  opacity: 0.5;
}

/* ───────────── buttons ───────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 500; letter-spacing:.01em;
  color:#04070d; background: linear-gradient(180deg,#7ce6ff,#00d4ff);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 8px 30px -8px rgba(0,212,255,.7),
    0 2px 0 rgba(0,0,0,.2);
  transition: all .25s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 14px 38px -6px rgba(0,212,255,.85); filter:brightness(1.05); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  transition: all .25s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(0,212,255,.4); color:#fff; }
.play-tri { width:0; height:0; border-left:7px solid #00d4ff; border-top:5px solid transparent; border-bottom:5px solid transparent; filter: drop-shadow(0 0 6px rgba(0,212,255,.7)); }

/* ───────────── HUD tag ───────────── */
.hud-tag {
  display:inline-flex; align-items:center; gap:10px;
  padding: 7px 14px;
  border-radius: 999px;
  border:1px solid rgba(0,212,255,.25);
  background: rgba(0,212,255,.05);
  backdrop-filter: blur(12px);
}
.hud-tag .dot {
  width:7px; height:7px; border-radius:50%; background:#00d4ff;
  box-shadow: 0 0 10px #00d4ff, 0 0 22px rgba(0,212,255,.55);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity:1 } 50% { opacity:.4 } }

.status-dot {
  width:8px; height:8px; border-radius:50%; background:#22e07c;
  box-shadow: 0 0 8px #22e07c;
  animation: pulseDot 1.4s ease-in-out infinite;
  display:inline-block;
}

/* ───────────── hero brackets ───────────── */
.hero-bracket {
  position:absolute; width:42px; height:42px; pointer-events:none;
  border-color: rgba(0,212,255,.4);
}
.bracket-tl { top: 88px; left: 24px; border-top:1px solid; border-left:1px solid; }
.bracket-tr { top: 88px; right: 24px; border-top:1px solid; border-right:1px solid; }
.bracket-bl { bottom: 24px; left: 24px; border-bottom:1px solid; border-left:1px solid; }
.bracket-br { bottom: 24px; right: 24px; border-bottom:1px solid; border-right:1px solid; }

/* ───────────── hero readout strip ───────────── */
.readout { padding: 14px 18px; background: rgba(8,13,24,.55); }
.readout-label { font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.45); }
.readout-value { font-family: 'Space Grotesk', sans-serif; font-size:26px; margin-top:4px; color:#fff; font-weight:500; letter-spacing:-.02em; }

/* telemetry card */
.telemetry-card {
  width: 220px; padding: 16px;
  border-radius: 14px;
  background: rgba(8,13,24,.65);
  border: 1px solid rgba(0,212,255,.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.7), 0 0 30px -10px rgba(0,212,255,.25);
}
.bar { display:inline-block; width:6px; margin-right:3px; background: linear-gradient(180deg,#00d4ff,rgba(0,212,255,.2)); border-radius: 2px; box-shadow: 0 0 6px rgba(0,212,255,.5); animation: barFlick 2.2s ease-in-out infinite; }
.bar:nth-child(odd) { background: linear-gradient(180deg,#ff7a18,rgba(255,122,24,.2)); box-shadow:0 0 6px rgba(255,122,24,.45); }
.bar:nth-child(2n) { animation-delay:.4s; } .bar:nth-child(3n) { animation-delay:.8s; }
@keyframes barFlick { 0%,100% { opacity:.7 } 50% { opacity:1 } }

/* scroll cue */
.scroll-dash { width:1px; height:40px; background: linear-gradient(180deg, rgba(0,212,255,.6), transparent); position:relative; overflow:hidden; }
.scroll-dash::before { content:""; position:absolute; top:-30%; left:0; width:1px; height:30%; background:#00d4ff; animation: scrollDash 1.6s ease-in-out infinite; }
@keyframes scrollDash { 0% { top:-30% } 100% { top:130% } }

/* ───────────── ticker ───────────── */
.ticker { overflow:hidden; position:relative; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.ticker-track { display:flex; gap:64px; animation: ticker 38s linear infinite; white-space:nowrap; }
@keyframes ticker { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
.logo-word { font-family:'Space Grotesk', sans-serif; font-weight:500; font-size: 26px; letter-spacing:.04em; color: rgba(255,255,255,.4); transition: color .3s; }
.logo-word:hover { color:#fff; }

/* ───────────── section eyebrow ───────────── */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 24px;
  padding: 6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.section-eyebrow span:first-child {
  color: #00d4ff; padding: 2px 7px; border-radius:5px;
  background: rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.25);
  font-size: 10px;
}

/* ───────────── glass card (benefits) ───────────── */
.glass-card {
  position:relative; padding: 28px 26px 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  overflow:hidden;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.glass-card::before {
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, rgba(0,212,255,.5), transparent 40%, rgba(255,122,24,.4) 100%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.glass-card::after {
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle, rgba(0,212,255,.18), transparent 40%);
  opacity: 0; transition: opacity .4s; pointer-events:none;
  transform: translate(var(--mx,50%), var(--my,50%));
}
.glass-card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,.25); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 0 30px -10px rgba(0,212,255,.3); }
.glass-card:hover::before { opacity: 1; }
.glass-card:hover::after { opacity: 1; }

.card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(160deg, rgba(0,212,255,.15), rgba(0,212,255,.04));
  border:1px solid rgba(0,212,255,.25);
  color:#7ce6ff;
  box-shadow: 0 0 22px -6px rgba(0,212,255,.4) inset;
}
.card-icon.warm {
  background: linear-gradient(160deg, rgba(255,122,24,.18), rgba(255,122,24,.04));
  border-color: rgba(255,122,24,.3); color:#ffb070;
  box-shadow: 0 0 22px -6px rgba(255,122,24,.4) inset;
}
.card-icon svg { width:22px; height:22px; }
.card-num {
  position:absolute; top:24px; right:26px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.18em;
  color: rgba(255,255,255,.3);
}
.card-title { font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:500; margin-top:20px; letter-spacing:-.01em; }
.card-body { color: rgba(255,255,255,.6); font-size:14px; line-height:1.6; margin-top:10px; }
.card-list { margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:6px; font-family:'JetBrains Mono', monospace; font-size:11px; color: rgba(255,255,255,.5); letter-spacing:.04em; }
.card-list li { display:flex; align-items:center; gap:8px; }
.card-list li::before { content:""; width:4px; height:4px; background:#00d4ff; border-radius:50%; box-shadow: 0 0 6px #00d4ff; }

/* ───────────── dashboard frame ───────────── */
.dashboard-frame {
  border-radius: 22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(8,13,24,.6);
  backdrop-filter: blur(20px);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.7), 0 0 60px -20px rgba(0,212,255,.2);
}
.db-toolbar {
  display:flex; align-items:center; gap:16px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dot-r,.dot-y,.dot-g { width:11px; height:11px; border-radius:50%; }
.dot-r { background:#ff5f57; box-shadow:0 0 6px rgba(255,95,87,.5); }
.dot-y { background:#febb2e; box-shadow:0 0 6px rgba(254,187,46,.5); }
.dot-g { background:#28c840; box-shadow:0 0 6px rgba(40,200,64,.5); }

.db-cell { padding: 28px; background: rgba(8,13,24,.95); position:relative; }
.metric-label {
  font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.18em; color: rgba(255,255,255,.5);
}
.metric-num {
  font-family:'Space Grotesk', sans-serif; font-weight:300;
  font-size: 56px; letter-spacing:-.04em; line-height:1; margin: 14px 0 16px;
  color:#fff;
}
.metric-spark { display:flex; align-items:flex-end; gap:4px; height: 32px; }
.metric-spark span { display:block; flex:1; min-height:3px; border-radius:2px; opacity:.85; }
.sp-cyan span { background: linear-gradient(180deg,#00d4ff,rgba(0,212,255,.15)); box-shadow:0 0 8px rgba(0,212,255,.4); }
.sp-orange span { background: linear-gradient(180deg,#ff7a18,rgba(255,122,24,.15)); box-shadow:0 0 8px rgba(255,122,24,.4); }
.metric-foot { font-family:'JetBrains Mono', monospace; font-size:10px; color: rgba(255,255,255,.4); margin-top: 12px; letter-spacing:.06em; }

.chart-wrap { position:relative; }
.pulse-dot { animation: pulseScale 1.6s ease-in-out infinite; transform-origin: center; }
.pulse-ring { animation: pulseRing 1.8s ease-out infinite; transform-origin:600px 15px; }
@keyframes pulseScale { 0%,100% { r:4 } 50% { r:5 } }
@keyframes pulseRing  { 0% { r:4; opacity:.7 } 100% { r:18; opacity:0 } }

/* event feed */
.event-feed { display:flex; flex-direction:column; gap: 10px; }
.event-feed li {
  display:flex; align-items:center; gap:10px; padding: 10px 12px;
  border-radius: 8px; background: rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05);
  font-size: 12px;
}
.ev-tag {
  font-family:'JetBrains Mono', monospace; font-size:10px; padding: 3px 7px; border-radius:5px;
  letter-spacing:.05em;
}
.ev-tag.c { color:#7ce6ff; background: rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.25); }
.ev-tag.o { color:#ffb070; background: rgba(255,122,24,.12); border:1px solid rgba(255,122,24,.3); }
.ev-msg { flex:1; color: rgba(255,255,255,.75); }
.ev-time { font-family:'JetBrains Mono', monospace; font-size:10px; color: rgba(255,255,255,.35); }

/* ───────────── solution card ───────────── */
.solution-card {
  position:relative; display:block; border-radius: 18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  transition: all .4s ease;
}
.solution-card:hover { border-color: rgba(0,212,255,.3); transform: translateY(-3px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }

.sc-preview {
  height: 200px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 30% 30%, rgba(0,212,255,.18), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(255,122,24,.12), transparent 60%),
    #06101c;
}
.sc-preview::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(8,13,24,.6), transparent 50%);
}

/* preview 1: chat */
.sc-prev-1 { display:flex; flex-direction:column; gap:8px; padding: 24px; align-items:flex-start; justify-content:center; }
.chat-bubble {
  max-width:78%; padding: 8px 12px; border-radius: 12px; font-size:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05); backdrop-filter: blur(10px);
}
.chat-bubble.bot { color:#7ce6ff; border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.07); }
.chat-bubble.user { color:#ffb070; border-color: rgba(255,122,24,.3); background: rgba(255,122,24,.07); align-self:flex-end; }
.chat-bubble.typing { display:inline-flex; gap:4px; padding: 12px 14px; }
.chat-bubble.typing span { width:5px; height:5px; border-radius:50%; background:#7ce6ff; animation: typing 1.2s ease-in-out infinite; }
.chat-bubble.typing span:nth-child(2) { animation-delay:.2s; } .chat-bubble.typing span:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,100% { opacity:.3; transform: translateY(0) } 50% { opacity:1; transform: translateY(-3px) } }

/* preview 2: WA list */
.wa-frame { width: 86%; display:flex; flex-direction:column; gap:6px; padding: 14px; border-radius: 12px; background: rgba(8,13,24,.6); border:1px solid rgba(255,255,255,.08); }
.wa-line { display:flex; align-items:center; gap:10px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.wa-av { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-family:'JetBrains Mono', monospace; }
.wa-av.c { background: rgba(0,212,255,.2); color:#7ce6ff; border:1px solid rgba(0,212,255,.3); }
.wa-av.o { background: rgba(255,122,24,.2); color:#ffb070; border:1px solid rgba(255,122,24,.3); }
.wa-msg { font-size:11px; color: rgba(255,255,255,.7); }

/* preview 3: funnel */
.funnel { width:90%; display:flex; flex-direction:column; gap:9px; }
.f-row { display:grid; grid-template-columns: 60px 1fr 50px; align-items:center; gap:10px; font-family:'JetBrains Mono', monospace; font-size:10px; color: rgba(255,255,255,.55); }
.f-bar { height: 14px; border-radius: 4px; background: linear-gradient(90deg, #00d4ff, rgba(0,212,255,.2)); width: var(--w); box-shadow: 0 0 12px rgba(0,212,255,.4); }
.f-bar.warm { background: linear-gradient(90deg, #ff7a18, rgba(255,122,24,.2)); box-shadow: 0 0 12px rgba(255,122,24,.4); }
.f-num { color:#fff; font-size:11px; text-align:right; }

/* preview 4: agent grid */
.agent-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 16px; width: 100%; }
.ag {
  display:flex; align-items:center; gap:6px; padding: 10px; border-radius: 8px;
  background: rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.2);
  font-size:11px; color:#7ce6ff;
}
.ag.warm { background: rgba(255,122,24,.06); border-color: rgba(255,122,24,.25); color:#ffb070; }
.ag-icon { font-size:14px; }

/* preview 5: kanban */
.crm-board { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; width: 90%; }
.crm-col { display:flex; flex-direction:column; gap: 6px; padding: 8px; border-radius:8px; background: rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); }
.crm-h { font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:.16em; color: rgba(255,255,255,.4); text-transform:uppercase; }
.crm-card { display:block; height: 22px; border-radius:5px; background: linear-gradient(90deg, rgba(0,212,255,.4), rgba(0,212,255,.15)); border:1px solid rgba(0,212,255,.3); }
.crm-card.warm { background: linear-gradient(90deg, rgba(255,122,24,.4), rgba(255,122,24,.15)); border-color: rgba(255,122,24,.35); }
.crm-card.short { width: 70%; }

/* preview 6: marketing flow */
.mkt-flow { display:flex; align-items:center; gap:6px; padding: 16px; flex-wrap:wrap; justify-content:center; }
.node {
  padding: 8px 12px; border-radius:999px; font-family:'JetBrains Mono', monospace; font-size:10px;
  background: rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.3); color:#7ce6ff;
}
.node.warm { background: rgba(255,122,24,.08); border-color: rgba(255,122,24,.3); color:#ffb070; }
.conn { width: 16px; height: 1px; background: linear-gradient(90deg, rgba(0,212,255,.5), rgba(255,122,24,.5)); position:relative; }
.conn::after { content:""; width: 4px; height:4px; border-radius:50%; background:#fff; position:absolute; left:0; top:-1.5px; animation: dotMove 1.8s linear infinite; }
@keyframes dotMove { 0% { left:0 } 100% { left:100% } }

/* preview social: telegram → redes */
.sc-prev-social { flex-direction: column; gap: 12px; padding: 22px; }
.soc-tg-pill {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,.6);
  background: rgba(244,63,94,.07); border: 1px solid rgba(244,63,94,.22);
  border-radius: 8px; padding: 7px 14px; width: 100%;
}
.soc-tg-pill svg { flex-shrink: 0; }
.soc-flow-arrow { color: rgba(244,63,94,.4); font-size: 16px; line-height: 1; align-self: center; }
.soc-nets-row { display: flex; gap: 7px; width: 100%; justify-content: center; }
.soc-net-pill {
  display: flex; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; padding: 6px 10px; background: rgba(244,63,94,.04);
  letter-spacing: .06em;
}

.sc-foot { padding: 22px 24px 26px; position:relative; }
.sc-tag { display:inline-block; font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.18em; padding: 4px 9px; border-radius:5px; background: rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.25); color:#7ce6ff; text-transform:uppercase; }
.sc-title { font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:500; margin-top:14px; letter-spacing:-.01em; }
.sc-desc { color: rgba(255,255,255,.6); font-size:13px; line-height:1.6; margin-top:8px; }
.sc-arrow { position:absolute; right:24px; top:24px; color:#00d4ff; font-size:18px; transform: rotate(-45deg); transition: all .4s; }
.solution-card:hover .sc-arrow { transform: rotate(0deg) translateX(4px); }

/* ───────────── preview programador: Drive → Sheets → Redes ───────────── */
.sc-prev-programador { flex-direction: column; gap: 10px; padding: 20px 22px; }
.prog-drive-pill {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,.65);
  background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.28);
  border-radius: 8px; padding: 7px 13px; width: 100%;
}
.prog-drive-pill svg { flex-shrink: 0; }
.prog-sheet-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,.6);
  background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.22);
  border-radius: 8px; padding: 7px 13px; width: 100%;
}
.prog-flow-arrow { color: rgba(139,92,246,.5); font-size: 14px; align-self: center; line-height: 1; }
.prog-nets-row { display: flex; gap: 6px; width: 100%; justify-content: center; }
.prog-net-pill {
  display: flex; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; padding: 5px 9px; background: rgba(139,92,246,.05);
  letter-spacing: .05em;
}

/* ───────────── holo demo ───────────── */
.holo-frame {
  border-radius: 20px; overflow:hidden;
  border:1px solid rgba(0,212,255,.18);
  background:
    radial-gradient(circle at 30% 0%, rgba(0,212,255,.08), transparent 50%),
    rgba(6,12,22,.85);
  backdrop-filter: blur(18px);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 60px -20px rgba(0,212,255,.3);
}
.holo-top { display:flex; justify-content:space-between; align-items:center; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.kbd { font-family:'JetBrains Mono', monospace; font-size:10px; padding: 2px 6px; border-radius:4px; border:1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); background: rgba(255,255,255,.03); }
.holo-grid { display:grid; grid-template-columns: 1fr 1.1fr; min-height: 400px; }
@media (max-width:768px) { .holo-grid { grid-template-columns: 1fr; } }
.holo-pane { padding: 22px; border-bottom:1px solid rgba(255,255,255,.05); }
.holo-grid > .holo-pane { border-right:1px solid rgba(255,255,255,.05); }
.holo-col { display:flex; flex-direction:column; }
.pane-h { font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }

.agent-map { position:relative; height: 240px; }
.node-c {
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle,#00d4ff, rgba(0,212,255,.4));
  box-shadow: 0 0 14px #00d4ff, 0 0 30px rgba(0,212,255,.5);
  animation: nodePulse 2.4s ease-in-out infinite;
}
.node-c.warm { background: radial-gradient(circle,#ff7a18, rgba(255,122,24,.4)); box-shadow: 0 0 14px #ff7a18, 0 0 28px rgba(255,122,24,.4); }
.node-c.c1 { top: 30px; left: 50px; }
.node-c.c2 { top: 30px; right: 30px; animation-delay:.4s; }
.node-c.c3 { top: 50%; left: 45%; width: 18px; height:18px; animation-delay:.2s; }
.node-c.c4 { bottom: 30px; left: 30px; animation-delay:.6s; }
.node-c.c5 { bottom: 30px; right: 30px; animation-delay:.3s; }
.node-c.c6 { top: 18px; left: 45%; animation-delay:.8s; }
.node-c.c7 { bottom: 12px; left: 45%; animation-delay:.5s; }
@keyframes nodePulse { 0%,100% { transform: scale(1); opacity:1 } 50% { transform: scale(1.3); opacity:.7 } }

.flow-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding: 6px 0; }
.f-step {
  padding: 8px 14px; border-radius:999px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  border:1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.02);
}
.f-step.done { color:#7ce6ff; border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.08); }
.f-step.active { color:#ffb070; border-color: rgba(255,122,24,.5); background: rgba(255,122,24,.12); box-shadow: 0 0 16px -2px rgba(255,122,24,.5); animation: pulseDot 1.4s ease-in-out infinite; }
.f-arrow { width:18px; height:1px; background: linear-gradient(90deg, rgba(255,255,255,.3), transparent); position:relative; }
.f-arrow::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-right:1px solid rgba(255,255,255,.3); border-top:1px solid rgba(255,255,255,.3); transform: rotate(45deg); }

/* bullet rows */
.bullet-row { display:flex; align-items:center; gap:12px; font-size:14px; color: rgba(255,255,255,.75); }
.bul { width:8px; height:8px; border-radius:2px; background:#00d4ff; box-shadow: 0 0 10px #00d4ff; transform: rotate(45deg); }
.bul.orange { background:#ff7a18; box-shadow: 0 0 10px #ff7a18; }

/* ───────────── courses ───────────── */
.course-card {
  border-radius: 18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(8,13,24,.5);
  backdrop-filter: blur(12px);
  transition: all .4s ease;
}
.course-card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,.3); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
.course-thumb {
  position:relative; height: 160px; display:grid; place-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.course-thumb::after {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; opacity:.5;
}
.thumb-1 { background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.35), transparent 60%), #051422; }
.thumb-2 { background: radial-gradient(circle at 70% 30%, rgba(255,122,24,.3), transparent 60%), #1a0e05; }
.thumb-3 { background: radial-gradient(circle at 50% 50%, rgba(0,212,255,.3), rgba(255,122,24,.2) 60%, transparent 80%), #0a1020; }
.thumb-4 { background: radial-gradient(circle at 80% 80%, rgba(255,122,24,.35), transparent 55%), #1a0a14; }

.course-glyph { position:relative; z-index:1; font-size: 64px; color:#fff; opacity:.85; text-shadow: 0 0 30px rgba(0,212,255,.7), 0 0 60px rgba(0,212,255,.3); font-family: 'Space Grotesk', sans-serif; font-weight: 300; }
.thumb-2 .course-glyph, .thumb-4 .course-glyph { text-shadow: 0 0 30px rgba(255,122,24,.7), 0 0 60px rgba(255,122,24,.3); }
.course-pill { position:absolute; top: 14px; right: 14px; z-index:2; padding: 4px 10px; border-radius:999px; font-family:'JetBrains Mono', monospace; font-size:10px; background: rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px); color: rgba(255,255,255,.85); }

.course-body { padding: 22px 22px 24px; }
.course-tag { display:inline-block; font-family:'JetBrains Mono', monospace; font-size:10px; padding: 3px 8px; border-radius:5px; background: rgba(0,212,255,.1); color:#7ce6ff; border:1px solid rgba(0,212,255,.25); letter-spacing:.1em; }
.course-tag.warm { background: rgba(255,122,24,.12); color:#ffb070; border-color: rgba(255,122,24,.3); }
.course-title { font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:500; margin-top:12px; letter-spacing:-.01em; line-height:1.25; }
.course-desc { color: rgba(255,255,255,.55); font-size:13px; line-height:1.55; margin-top:8px; min-height:60px; text-align: justify; }
.course-foot { display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
.price-line { display:flex; align-items:baseline; gap: 8px; }
.price-old { font-family:'JetBrains Mono', monospace; font-size:12px; color: rgba(255,255,255,.35); text-decoration: line-through; }
.price-now { font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.course-cta { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em; color:#00d4ff; transition: transform .3s; }
.course-card:hover .course-cta { transform: translateX(3px); }

/* ───────────── testimonial ───────────── */
.testimonial {
  padding: 28px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  transition: all .4s ease;
}
.testimonial:hover { border-color: rgba(0,212,255,.25); transform: translateY(-3px); }
.testimonial blockquote { font-family:'Space Grotesk', sans-serif; font-size:17px; line-height:1.55; color: rgba(255,255,255,.85); font-weight: 300; }
.testimonial figcaption { display:flex; gap:14px; align-items:center; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); }
.ava { width: 38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:13px; background: linear-gradient(135deg, rgba(0,212,255,.3), rgba(0,212,255,.05)); border:1px solid rgba(0,212,255,.35); color:#7ce6ff; }
.ava.warm { background: linear-gradient(135deg, rgba(255,122,24,.3), rgba(255,122,24,.05)); border-color: rgba(255,122,24,.35); color:#ffb070; }
.t-name { font-size:14px; font-weight:500; color:#fff; }
.t-role { font-family:'JetBrains Mono', monospace; font-size:11px; color: rgba(255,255,255,.45); margin-top:2px; }

/* ───────────── footer ───────────── */
.foot-h { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom: 16px; }
.foot-list { display:flex; flex-direction:column; gap: 10px; color: rgba(255,255,255,.55); font-size:14px; }
.foot-list li { cursor:pointer; transition: color .25s; }
.foot-list li:hover { color:#fff; }
.ico-link { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-family:'Space Grotesk', sans-serif; transition: all .25s; }
.ico-link:hover { border-color: rgba(0,212,255,.4); color:#7ce6ff; background: rgba(0,212,255,.08); }

/* ───────────── reveal anim ───────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* card-demo: ocultar en móvil */
@media (max-width: 768px) { .card-demo { display: none !important; } }

/* responsive tweaks */
@media (max-width: 640px) {
  .hero-bracket { display:none; }
  .metric-num { font-size: 42px; }
  .course-desc { min-height: 0; }
}