/* ============================================================
   MP Conecta — estilos. Paleta y tokens tomados del CSS original.
   ============================================================ */

:root {
  /* Hue del primario (tweakable). Esmeralda original = 158 */
  --primary-h: 158;
  --accent-h: 170;

  --bg:        hsl(150 12% 5%);
  --bg-2:      hsl(150 11% 6.5%);
  --fg:        hsl(40 15% 95%);
  --card:      hsl(150 10% 9% / 0.7);
  --card-solid:hsl(150 10% 9%);
  --muted-fg:  hsl(40 8% 60%);
  --border:    hsl(150 10% 16%);
  --border-soft: hsl(150 10% 16% / 0.6);

  --primary:   hsl(var(--primary-h) 65% 45%);
  --primary-bright: hsl(var(--primary-h) 80% 55%);
  --primary-fg: hsl(150 30% 6%);
  --accent:    hsl(var(--accent-h) 60% 42%);

  --glow-primary: 0 0 40px hsl(var(--primary-h) 65% 45% / 0.18);
  --glow-strong:  0 0 80px hsl(var(--primary-h) 65% 45% / 0.30);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --radius: 0.85rem;
  --maxw: 1180px;

  --tilt: 1; /* multiplicador de intensidad 3D (tweakable) */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- Fondo: mesh + grid sutil + capas parallax ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.bg-mesh {
  background-image:
    radial-gradient(at 18% 22%, hsl(var(--primary-h) 65% 45% / 0.10) 0px, transparent 45%),
    radial-gradient(at 82% 70%, hsl(var(--accent-h) 60% 42% / 0.07) 0px, transparent 45%);
}
.bg-grid {
  background-image:
    linear-gradient(hsl(150 10% 16% / 0.30) 1px, transparent 1px),
    linear-gradient(90deg, hsl(150 10% 16% / 0.30) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%);
  opacity: 0.6;
}
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
}
.bg-orb.a { width: 520px; height: 520px; left: -120px; top: 6%;
  background: radial-gradient(circle, hsl(var(--primary-h) 65% 45% / 0.18), transparent 70%); }
.bg-orb.b { width: 600px; height: 600px; right: -160px; top: 48%;
  background: radial-gradient(circle, hsl(var(--accent-h) 60% 42% / 0.14), transparent 70%); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-bright);
  padding: 7px 14px;
  border: 1px solid hsl(var(--primary-h) 65% 45% / 0.25);
  border-radius: 999px;
  background: hsl(var(--primary-h) 65% 45% / 0.06);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }

.section-head { max-width: 620px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 52px); margin-top: 18px; }
.section-head p { color: var(--muted-fg); font-size: clamp(16px, 1.7vw, 19px); margin-top: 16px; }

.text-gradient {
  background: linear-gradient(100deg, var(--primary-bright), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
  color: var(--primary-fg);
  box-shadow: var(--glow-primary), inset 0 1px 0 hsl(0 0% 100% / 0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-strong), inset 0 1px 0 hsl(0 0% 100% / 0.25); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: hsl(var(--primary-h) 65% 45% / 0.5); color: var(--primary-bright); transform: translateY(-2px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: hsl(150 12% 5% / 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
a.logo { color: inherit; }

/* Logo-mark: nodos conectados con pulso de energía (alusión n8n / automatización IA) */
.logo-mark { width: 30px; height: 30px; flex: 0 0 auto; overflow: visible; }
.logo-mark .lm-edges line { stroke: hsl(var(--primary-h) 65% 45% / 0.30); stroke-width: 1; }
.logo-mark .lm-flow line {
  stroke: var(--primary-bright); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 2 13; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 2px hsl(var(--primary-h) 70% 50% / 0.8));
  animation: lm-flow 2.6s linear infinite;
}
.logo-mark .lm-flow line:nth-child(2) { animation-delay: -0.6s; }
.logo-mark .lm-flow line:nth-child(3) { animation-delay: -1.3s; }
.logo-mark .lm-flow line:nth-child(4) { animation-delay: -1.9s; }
.logo-mark .lm-nodes circle { fill: var(--primary-bright); animation: lm-pulse 2.6s ease-in-out infinite; }
.logo-mark .lm-nodes circle.core { fill: var(--primary); r: 2.6px; filter: drop-shadow(0 0 3px hsl(var(--primary-h) 70% 50% / 0.7)); }
.logo-mark .lm-nodes circle:nth-child(2) { animation-delay: -0.7s; }
.logo-mark .lm-nodes circle:nth-child(3) { animation-delay: -1.4s; }
.logo-mark .lm-nodes circle:nth-child(4) { animation-delay: -2.0s; }
@keyframes lm-flow { to { stroke-dashoffset: -30; } }
@keyframes lm-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .logo-mark .lm-flow line, .logo-mark .lm-nodes circle { animation: none; }
}
.logo .mp { color: var(--fg); }
.logo .conecta { color: var(--primary-bright); }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-size: 15px; color: var(--muted-fg); font-weight: 500;
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--primary); transition: width .25s ease; border-radius: 2px;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { padding: 10px 20px; font-size: 15px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 150px 0 60px; text-align: center; perspective: 1400px; }
.hero h1 { font-size: clamp(42px, 7.2vw, 88px); font-weight: 700; }
.hero h1 .line2 { color: var(--primary-bright); }
.hero-sub { color: var(--muted-fg); font-size: clamp(17px, 2vw, 21px); max-width: 580px; margin: 26px auto 0; }
.hero-cta { display: flex; gap: 16px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }

/* mockup hero que se expande al scroll */
.hero-stage { perspective: 1600px; margin-top: 70px; }
.mockup {
  position: relative; width: min(880px, 92vw); margin: 0 auto;
  transform-style: preserve-3d; will-change: transform;
}
.mockup-glow { position: absolute; inset: -10% 10% -30%; z-index: -1;
  background: radial-gradient(ellipse at center, hsl(var(--primary-h) 65% 45% / 0.25), transparent 70%);
  filter: blur(50px); }

/* ---------- Chat WhatsApp mockup ---------- */
.chat {
  background: var(--card-solid); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 100px -30px hsl(0 0% 0% / 0.8), var(--glow-primary);
}
.chat-top {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: hsl(150 10% 11%); border-bottom: 1px solid var(--border);
}
.chat-ava { width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-bright), var(--accent));
  display: grid; place-items: center; color: var(--primary-fg); font-weight: 700; font-family: var(--font-display); }
.chat-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.chat-status { font-size: 12px; color: var(--primary-bright); display: flex; align-items: center; gap: 5px; }
.chat-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-bright); box-shadow: 0 0 8px var(--primary-bright); }
.chat-body {
  padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 280px;
  background:
    radial-gradient(at 100% 0%, hsl(var(--primary-h) 65% 45% / 0.04), transparent 50%),
    var(--card-solid);
}
.bubble { max-width: 76%; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.bubble.in { align-self: flex-start; background: hsl(150 8% 15%); border-bottom-left-radius: 5px; }
.bubble.out { align-self: flex-end; background: linear-gradient(180deg, var(--primary), hsl(var(--primary-h) 65% 38%));
  color: var(--primary-fg); border-bottom-right-radius: 5px; font-weight: 500; }
.bubble .time { display: block; font-size: 10.5px; opacity: 0.6; margin-top: 4px; text-align: right; }
.bubble .tag { font-size: 11px; font-weight: 600; color: var(--primary-bright); display: block; margin-bottom: 3px; }
.typing { align-self: flex-start; background: hsl(150 8% 15%); padding: 13px 16px; border-radius: 16px; border-bottom-left-radius: 5px; display: flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-fg); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* floating stat chips around mockup (3D depth) */
.float-chip {
  position: absolute; z-index: 3;
  background: hsl(45 33% 98% / 0.72); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid hsl(150 12% 86%); border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 20px 55px -18px hsl(0 0% 0% / 0.85);
  will-change: transform;
}
.float-chip .big { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--primary-bright); }
.float-chip .lbl { font-size: 12px; color: var(--muted-fg); }
.float-chip.tl { left: -40px; top: 30%; }
.float-chip.br { right: -36px; bottom: 22%; }
@media (max-width: 720px) { .float-chip { display: none; } }

/* ---------- Conector chat → hoja de cálculo ---------- */
.flow-connector { display: flex; flex-direction: column; align-items: center; margin: 34px auto 24px; }
.fc-pipe { width: 2px; height: 46px; border-radius: 2px; position: relative;
  background: linear-gradient(hsl(var(--primary-h) 65% 45% / 0), var(--primary)); }
.fc-spark { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-bright); box-shadow: 0 0 10px var(--primary-bright); transform: translateX(-50%);
  animation: fc-drop 1.9s ease-in infinite; }
@keyframes fc-drop { 0% { top: -2px; opacity: 0; } 18% { opacity: 1; } 100% { top: 46px; opacity: 0; } }
.fc-text { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--muted-fg); margin-top: 14px; }
.fc-emoji { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .fc-spark { animation: none; opacity: 0; } }

/* ---------- Hoja de cálculo (estilo Sheets, fondo claro para contraste) ---------- */
.sheet {
  width: min(880px, 92vw); margin: 0 auto;
  background: #ffffff; border: 1px solid hsl(150 12% 84%); border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 100px -30px hsl(0 0% 0% / 0.75), var(--glow-primary);
}
.sheet-top { display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  background: hsl(45 28% 97%); border-bottom: 1px solid hsl(150 12% 88%); }
.sheet-top .ico { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto;
  background: hsl(var(--primary-h) 52% 32%); color: #fff; display: grid; place-items: center; }
.sheet-top .ico svg { width: 17px; height: 17px; }
.sheet-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: hsl(150 22% 14%); }
.sheet-sub { font-size: 12px; color: hsl(150 7% 46%); }
.sheet-scroll { overflow-x: auto; }
.sheet-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 12.5px; }
.sheet-table th, .sheet-table td { border: 1px solid hsl(150 14% 89%); padding: 9px 13px; text-align: left; white-space: nowrap; }
.sheet-table thead th { background: hsl(150 42% 20%); color: hsl(150 55% 86%);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; }
.sheet-table .rownum { background: hsl(45 24% 96%); color: hsl(150 7% 50%); text-align: center; width: 36px; font-size: 11px; }
.sheet-table tbody td { color: hsl(150 18% 20%); }
.sheet-table tr.hot td { background: hsl(var(--primary-h) 58% 50% / 0.12); }
.sheet-table tr.hot .rownum { background: hsl(var(--primary-h) 55% 50% / 0.20); }
.sheet-table tr.warm td { background: hsl(45 88% 55% / 0.16); }
.sheet-table tr.warm .rownum { background: hsl(45 80% 55% / 0.26); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; }
.badge.hot { background: hsl(var(--primary-h) 60% 45% / 0.16); color: hsl(var(--primary-h) 72% 28%);
  border: 1px solid hsl(var(--primary-h) 60% 45% / 0.45); }
.badge.warm { background: hsl(45 90% 55% / 0.22); color: hsl(38 92% 32%); border: 1px solid hsl(45 85% 50% / 0.45); }

/* ---------- Sección genérica ---------- */
.block { padding: 110px 0; }

/* Cómo funciona — pasos */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.step {
  position: relative; padding: 30px 26px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border); backdrop-filter: blur(8px);
}
.step-num {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: hsl(var(--primary-h) 65% 45% / 0.12); color: var(--primary-bright);
  border: 1px solid hsl(var(--primary-h) 65% 45% / 0.25);
}
.step h3 { font-size: 21px; margin-top: 18px; }
.step p { color: var(--muted-fg); font-size: 15px; margin-top: 10px; }
.step-line { position: absolute; top: 49px; right: -11px; width: 22px; height: 1px; background: var(--border); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step-line { display: none; } }

/* Servicios — tarjetas con tilt 3D */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 56px; }
.svc {
  position: relative; padding: 34px 30px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, hsl(150 10% 10%), hsl(150 11% 7%));
  border: 1px solid var(--border);
  transform-style: preserve-3d; will-change: transform;
  transition: border-color .3s, box-shadow .3s;
}
.svc::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary-h) 65% 45% / 0.10), transparent 45%);
}
.svc:hover { border-color: hsl(var(--primary-h) 65% 45% / 0.4); box-shadow: 0 30px 70px -30px hsl(0 0% 0% / 0.7); }
.svc:hover::before { opacity: 1; }
.svc-ico {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: hsl(var(--primary-h) 65% 45% / 0.10); border: 1px solid hsl(var(--primary-h) 65% 45% / 0.22);
  color: var(--primary-bright); transform: translateZ(40px);
}
.svc-ico svg { width: 26px; height: 26px; }
.svc h3 { font-size: 23px; margin-top: 20px; transform: translateZ(28px); }
.svc p { color: var(--muted-fg); font-size: 15.5px; margin-top: 12px; transform: translateZ(18px); }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; transform: translateZ(22px); }
.svc-tag { font-size: 12.5px; color: var(--muted-fg); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: hsl(150 10% 12%); }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }

/* Para quién */
.audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.aud {
  padding: 26px 22px; border-radius: var(--radius); text-align: center;
  background: var(--card); border: 1px solid var(--border); backdrop-filter: blur(8px);
}
.aud-ico { width: 46px; height: 46px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center;
  background: hsl(var(--accent-h) 60% 42% / 0.12); color: var(--primary-bright); }
.aud-ico svg { width: 24px; height: 24px; }
.aud h4 { font-size: 17px; margin-top: 16px; }
.aud p { font-size: 13.5px; color: var(--muted-fg); margin-top: 7px; }
@media (max-width: 820px) { .audience { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .audience { grid-template-columns: 1fr; } }

/* Por qué nosotros — split con números */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 30px; }
.why-list { display: flex; flex-direction: column; gap: 14px; }
.why-item { display: flex; gap: 16px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border); }
.why-item .chk { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: hsl(var(--primary-h) 65% 45% / 0.14); color: var(--primary-bright); }
.why-item .chk svg { width: 17px; height: 17px; }
.why-item h4 { font-size: 17px; }
.why-item p { font-size: 14px; color: var(--muted-fg); margin-top: 5px; }
.why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat { padding: 28px 24px; border-radius: var(--radius); background: linear-gradient(160deg, hsl(150 10% 10%), hsl(150 11% 7%)); border: 1px solid var(--border); }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 46px); }
.stat .num .text-gradient { display: inline; }
.stat .lbl { color: var(--muted-fg); font-size: 14px; margin-top: 6px; }
@media (max-width: 880px) { .why { grid-template-columns: 1fr; gap: 36px; } }

/* CTA final */
.cta-final { padding: 130px 0; }
.cta-card {
  position: relative; overflow: hidden; text-align: center;
  padding: 70px 40px; border-radius: 26px;
  background: linear-gradient(160deg, hsl(150 12% 10%), hsl(150 13% 6%));
  border: 1px solid hsl(var(--primary-h) 65% 45% / 0.25);
  box-shadow: var(--glow-strong);
}
.cta-card::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, hsl(var(--primary-h) 65% 45% / 0.18), transparent 60%); }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { font-size: clamp(32px, 5vw, 56px); }
.cta-card p { color: var(--muted-fg); font-size: 18px; max-width: 520px; margin: 18px auto 34px; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 50px 0 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .muted { color: var(--muted-fg); font-size: 14px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--muted-fg); font-size: 14px; transition: color .2s; }
.footer-links a:hover { color: var(--primary-bright); }

/* ============================================================
   BANDAS CLARAS — variación de fondo (blanco cálido) para
   romper la monotonía oscura.
   ============================================================ */
.section-light {
  position: relative; z-index: 1;
  background:
    radial-gradient(at 85% 0%, hsl(var(--primary-h) 50% 70% / 0.10) 0px, transparent 42%),
    radial-gradient(at 5% 100%, hsl(var(--accent-h) 45% 70% / 0.08) 0px, transparent 42%),
    hsl(45 33% 97.5%);
  color: hsl(150 18% 13%);
  border-top: 1px solid hsl(150 12% 90%);
  border-bottom: 1px solid hsl(150 12% 90%);
}
.section-light .section-head h2 { color: hsl(150 22% 11%); }
.section-light .section-head p,
.section-light .step p, .section-light .svc p, .section-light .aud p,
.section-light .person-role { color: hsl(150 7% 40%); }
.section-light .step h3, .section-light .svc h3,
.section-light .aud h4, .section-light .person-name { color: hsl(150 20% 14%); }
.section-light .eyebrow {
  color: hsl(var(--primary-h) 72% 30%);
  background: hsl(var(--primary-h) 65% 45% / 0.10);
  border-color: hsl(var(--primary-h) 65% 45% / 0.30);
}
.section-light .eyebrow .dot { background: hsl(var(--primary-h) 70% 38%); box-shadow: 0 0 8px hsl(var(--primary-h) 70% 45% / 0.6); }
.section-light .text-gradient {
  background: linear-gradient(100deg, hsl(var(--primary-h) 72% 36%), hsl(var(--accent-h) 60% 34%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-light .step, .section-light .aud {
  background: #fff; border-color: hsl(150 12% 90%); backdrop-filter: none;
  box-shadow: 0 1px 2px hsl(150 10% 50% / 0.06), 0 18px 40px -28px hsl(150 30% 20% / 0.30);
}
.section-light .svc {
  background: linear-gradient(165deg, #fff, hsl(45 33% 98%));
  border-color: hsl(150 12% 90%);
  box-shadow: 0 1px 2px hsl(150 10% 50% / 0.06), 0 18px 40px -28px hsl(150 30% 20% / 0.30);
}
.section-light .svc:hover { border-color: hsl(var(--primary-h) 60% 50% / 0.5); box-shadow: 0 30px 60px -30px hsl(150 40% 25% / 0.35); }
.section-light .svc::before { background: radial-gradient(500px circle at var(--mx,50%) var(--my,50%), hsl(var(--primary-h) 65% 45% / 0.07), transparent 45%); }
.section-light .step-num { background: hsl(var(--primary-h) 65% 45% / 0.12); color: hsl(var(--primary-h) 72% 32%); border-color: hsl(var(--primary-h) 65% 45% / 0.28); }
.section-light .step-line { background: hsl(150 12% 86%); }
.section-light .svc-ico, .section-light .aud-ico {
  background: hsl(var(--primary-h) 65% 45% / 0.10); color: hsl(var(--primary-h) 72% 32%);
  border: 1px solid hsl(var(--primary-h) 65% 45% / 0.22);
}
.section-light .svc-tag { background: hsl(45 25% 96%); border-color: hsl(150 12% 88%); color: hsl(150 7% 42%); }

/* ============================================================
   CHIPS FLOTANTES — variante texto (sin números inventados)
   ============================================================ */
.float-chip.text {
  display: flex; align-items: center; gap: 11px; max-width: 210px;
}
.float-chip .chip-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: hsl(var(--primary-h) 60% 45% / 0.14); color: hsl(var(--primary-h) 72% 32%);
  border: 1px solid hsl(var(--primary-h) 65% 45% / 0.30);
}
.float-chip .chip-ico svg { width: 17px; height: 17px; }
.float-chip .chip-txt { font-size: 12.5px; line-height: 1.3; color: hsl(150 20% 16%); font-weight: 500; }

/* ============================================================
   CASO REAL — banda oscura destacada
   ============================================================ */
.case { padding: 96px 0; }
.case-card {
  position: relative; max-width: 760px; margin: 48px auto 0; padding: 48px 44px;
  border-radius: 22px; background: linear-gradient(160deg, hsl(150 12% 10%), hsl(150 13% 6.5%));
  border: 1px solid hsl(var(--primary-h) 65% 45% / 0.25); box-shadow: var(--glow-strong);
}
.case-card .quote-mark { font-family: var(--font-display); font-size: 64px; line-height: 0.6; color: hsl(var(--primary-h) 65% 45% / 0.35); }
.case-tag { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-bright); margin-top: 18px; }
.case-line { font-size: clamp(17px, 2vw, 20px); margin-top: 16px; color: var(--fg); }
.case-line.first { margin-top: 22px; }
.case-line b { font-family: var(--font-display); }
.case-line .lead { color: var(--primary-bright); }
.case-result { margin-top: 26px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); }

/* ============================================================
   POR QUÉ — 3 columnas
   ============================================================ */
.why3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.why-col { padding: 34px 28px; border-radius: var(--radius); text-align: center;
  background: var(--card); border: 1px solid var(--border); backdrop-filter: blur(8px); }
.why-col .ico { width: 54px; height: 54px; margin: 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: hsl(var(--primary-h) 65% 45% / 0.10); color: var(--primary-bright); border: 1px solid hsl(var(--primary-h) 65% 45% / 0.22); }
.why-col .ico svg { width: 26px; height: 26px; }
.why-col h3 { font-size: 20px; margin-top: 20px; }
.why-col p { font-size: 14.5px; color: var(--muted-fg); margin-top: 11px; }
@media (max-width: 820px) { .why3 { grid-template-columns: 1fr; } }

/* ============================================================
   LAS PERSONAS DETRÁS — equipo
   ============================================================ */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 760px; margin: 56px auto 0; }
.person {
  text-align: center; padding: 36px 30px; border-radius: var(--radius); background: #fff;
  border: 1px solid hsl(150 12% 90%); box-shadow: 0 1px 2px hsl(150 10% 50% / 0.06), 0 18px 40px -28px hsl(150 30% 20% / 0.30);
}
.person image-slot {
  width: 104px; height: 104px; margin: 0 auto; display: block;
  border: 3px solid hsl(var(--primary-h) 65% 45% / 0.25);
}
.person img {
  width: 104px; height: 104px; margin: 0 auto; display: block;
  border-radius: 50%; object-fit: cover;
  border: 3px solid hsl(var(--primary-h) 65% 45% / 0.25);
}

.person-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-top: 18px; }
.person-role { font-size: 13.5px; color: hsl(var(--primary-h) 72% 34%) !important; font-weight: 600; margin-top: 4px; }
.person-quote { font-size: 14.5px; font-style: italic; color: hsl(150 7% 42%); margin-top: 16px; line-height: 1.55; }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } }

/* ---------- Animaciones de entrada (estado inicial) ---------- */
.reveal { opacity: 0; transform: translateY(34px); }
.reveal-blur { opacity: 0; transform: translateY(20px); filter: blur(12px); }
[data-mask] { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-blur { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-mask] { clip-path: none !important; }
  html { scroll-behavior: auto; }
}