:root{
  --ink:#1a1625;
  --violet:#7c2ae8;
  --violet-bright:#9b4bff;
  --violet-deep:#5b1ec2;
  --lilac:#c9a6f2;
  --lilac-pale:#f6f1fc;
  --lilac-line: rgba(124,42,232,0.15);
  --white:#ffffff;
  --grey:#6b6478;
  --line-dark: rgba(26,22,37,0.10);
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--white);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.02em;
  font-weight:700;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}
::selection{background:var(--violet); color:var(--white);}
:focus-visible{outline:2px solid var(--violet-bright); outline-offset:3px;}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 32px; max-width:var(--maxw); margin:0 auto;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
}
.nav-logo img{ height:32px; width:auto; }
.nav-links{
  display:flex; gap:32px; list-style:none;
}
.nav-links a{
  color:var(--grey); font-size:14px; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{color:var(--violet);}
.nav-cta{
  background:var(--violet-bright); color:var(--white);
  padding:10px 20px; border-radius:100px; font-size:14px; font-weight:600;
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(155,75,255,.35);}
.nav-toggle{display:none;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  background: radial-gradient(ellipse 120% 70% at 75% -10%, var(--lilac-pale) 0%, var(--white) 55%);
  overflow:hidden;
  display:flex; align-items:center;
  padding:140px 0 60px;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--lilac-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lilac-line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.6;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 75%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--violet); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:8px; height:8px; border-radius:2px;
  background:var(--violet-bright);
  transform:rotate(45deg);
}
.hero h1{
  color:var(--ink);
  font-size:clamp(40px, 6vw, 72px);
  line-height:0.98;
  margin-bottom:24px;
}
.hero h1 .accent{
  color:var(--violet-bright);
  display:block;
}
.hero p.lead{
  color:var(--grey); font-size:18px; max-width:480px; margin-bottom:28px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.btn-primary{
  background:var(--violet-bright); color:var(--white);
  padding:15px 28px; border-radius:100px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s, box-shadow .2s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(155,75,255,.4);}
.btn-secondary{
  border:1px solid var(--line-dark); color:var(--ink);
  padding:15px 26px; border-radius:100px; font-weight:600; font-size:15px;
  transition:border-color .2s, background .2s;
}
.btn-secondary:hover{border-color:var(--violet-bright); background:rgba(124,42,232,.06);}

.hero-tagline{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lilac-pale); border:1px solid var(--lilac-line);
  color:var(--violet); font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:100px; margin:2px 0 22px;
}

.hero-contact-bar{
  position:relative; z-index:2;
  margin-top:8px;
  display:flex; flex-wrap:wrap; gap:0;
  border:1px solid var(--line-dark);
  background:var(--white);
  border-radius:100px;
  padding:6px;
  width:fit-content;
  box-shadow:0 12px 30px rgba(124,42,232,.08);
}
.hero-contact-bar a{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; font-size:13.5px; font-weight:500; color:var(--ink);
  border-radius:100px; transition:background .2s, color .2s;
  white-space:nowrap;
}
.hero-contact-bar a:hover{ background:var(--lilac-pale); color:var(--violet); }
.hero-contact-bar svg{ color:var(--violet); flex:0 0 auto; }

.hero-stats{
  position:relative; z-index:2;
  margin-top:52px;
  display:flex; gap:0; border-top:1px solid var(--line-dark);
}
.hero-stats div{
  flex:1; padding:20px 0 0; border-right:1px solid var(--line-dark);
}
.hero-stats div:last-child{border-right:none;}
.hero-stats strong{
  display:block; font-family:'Space Grotesk'; color:var(--ink); font-size:26px;
}
.hero-stats span{color:var(--grey); font-size:13px;}

/* signature ascending arrow */
.hero-mark{
  position:relative; height:440px;
  display:flex; align-items:center; justify-content:center;
}
.hero-mark svg{ width:100%; height:100%; overflow:visible; }
.arrow-path{
  fill:none;
  stroke:var(--violet-bright);
  stroke-width:14;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:draw 1.8s cubic-bezier(.65,0,.35,1) .3s forwards;
  filter:drop-shadow(0 0 20px rgba(155,75,255,.35));
}
.arrow-head{
  fill:var(--violet-bright);
  opacity:0;
  animation:fadeIn .4s ease .9s forwards;
  filter:drop-shadow(0 0 16px rgba(155,75,255,.4));
}
.arrow-n{
  fill:var(--ink);
  stroke:var(--lilac);
  stroke-width:2;
  opacity:0;
  animation:fadeIn .6s ease 1.4s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }

/* ---------- SECTION SHELL ---------- */
section{ padding:110px 0; position:relative; }
.section-tint{ background:var(--lilac-pale); }
.tag{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--violet); margin-bottom:14px;
}
h2.head{
  font-size:clamp(30px, 4vw, 46px); margin-bottom:16px; max-width:640px;
}
p.sub{ color:var(--grey); font-size:17px; max-width:560px; }
.section-head{ margin-bottom:60px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}

/* divider arrow rule — recurring signature element */
.rule{
  height:3px; width:64px; margin-bottom:26px;
  background:linear-gradient(90deg, var(--ink) 0%, var(--violet-bright) 100%);
  border-radius:2px;
}

/* ---------- INTRO / VALUE ---------- */
.intro{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.intro-visual{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:20px;
  padding:40px;
  position:relative;
  min-height:320px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(124,42,232,.08);
}
.intro-visual svg{ width:80%; }
.intro-list{ list-style:none; margin-top:28px; display:grid; gap:14px; }
.intro-list li{
  display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink);
}
.intro-list li::before{
  content:''; flex:0 0 auto; width:9px; height:9px; margin-top:6px;
  background:var(--violet-bright); transform:rotate(45deg); border-radius:2px;
}

/* ---------- SECTOR CARDS ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.arch-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:28px 28px 14px 14px;
  padding:30px 22px;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.arch-card:hover{
  transform:translateY(-6px);
  border-color:var(--violet-bright);
  box-shadow:0 16px 40px rgba(124,42,232,.14);
}
.arch-icon{
  width:52px; height:56px;
  border:2px solid var(--violet);
  border-radius:26px 26px 8px 8px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  color:var(--violet);
}
.arch-card h3{ font-size:19px; margin-bottom:12px; }
.arch-card ul{ list-style:none; display:grid; gap:7px; }
.arch-card li{ font-size:14px; color:var(--grey); }

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:20px;
  padding:38px 30px;
  min-height:340px;
  display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--violet-bright); box-shadow:0 16px 40px rgba(124,42,232,.12); }
.service-card h3{ color:var(--ink); font-size:21px; margin-bottom:14px; }
.service-card ul{ list-style:none; display:grid; gap:8px; margin-top:auto; padding-top:18px; }
.service-card li{ font-size:14px; color:var(--grey); padding-left:16px; position:relative; }
.service-card li::before{
  content:'—'; position:absolute; left:0; color:var(--violet-bright);
}
.service-card.feature{ background:linear-gradient(150deg, var(--violet) 0%, var(--violet-deep) 100%); border-color:transparent; }
.service-card.feature h3, .service-card.feature p{ color:var(--white); }
.service-card.feature .arch-icon{ border-color:rgba(255,255,255,.6); color:#fff; }
.service-card.feature li{ color:rgba(255,255,255,.85); }
.service-card.feature li::before{ color:#fff; }
.service-card.feature:hover{ box-shadow:0 20px 46px rgba(124,42,232,.3); }

/* ---------- COMPLEMENTOS ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

/* ---------- WHY US ---------- */
.why-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
.why-list{ list-style:none; display:grid; gap:0; border-top:1px solid var(--line-dark); }
.why-list li{
  display:flex; align-items:center; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line-dark);
  font-size:16px;
}
.check{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--violet-bright); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.why-panel{
  background:linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 100%);
  color:var(--white);
  border-radius:24px; padding:48px;
  position:relative; overflow:hidden;
}
.why-panel::before{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.why-panel h3{ font-size:26px; margin-bottom:14px; position:relative; color:var(--white); }
.why-panel p{ color:rgba(255,255,255,.85); font-size:15.5px; margin-bottom:26px; position:relative; }
.why-panel .btn-primary{ background:var(--white); color:var(--violet-deep); }
.why-panel .btn-primary:hover{ box-shadow:0 10px 28px rgba(0,0,0,.2); }

/* ---------- MADE TO MEASURE BANNER ---------- */
.measure{
  background:linear-gradient(120deg, var(--violet) 0%, var(--violet-deep) 100%);
  color:var(--white);
  text-align:center;
  padding:100px 32px;
  position:relative;
  overflow:hidden;
}
.measure::after{
  content:'';
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:48px 48px;
}
.measure-inner{ position:relative; max-width:700px; margin:0 auto; }
.measure h2{ font-size:clamp(30px,5vw,50px); margin-bottom:18px; color:var(--white); }
.measure p{ font-size:18px; color:#ece4fa; }

/* ---------- CLIENTES ---------- */
.clients-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.client-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:16px;
  padding:22px 18px;
  display:flex; align-items:center; justify-content:center;
  min-height:120px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.client-card:hover{ transform:translateY(-4px); border-color:var(--violet-bright); box-shadow:0 14px 34px rgba(124,42,232,.12); }
.client-card img{ max-height:56px; width:auto; max-width:100%; }
.client-name{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:17px; text-align:center; letter-spacing:-0.01em; }
.client-name small{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.client-card--ghost{ border-style:dashed; color:var(--grey); font-size:13.5px; font-weight:500; background:transparent; }

/* ---------- PLANS ---------- */
.plans-price-banner{
  display:inline-flex; align-items:baseline; gap:10px;
  background:var(--lilac-pale); border:1px solid var(--lilac-line);
  padding:14px 24px; border-radius:100px; margin-bottom:8px;
}
.plans-price-banner span.label{ font-size:14px; color:var(--grey); font-weight:500; }
.plans-price-banner span.price{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:20px; color:var(--violet-deep); }

.plans-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px;
}
.plan-card{
  background:var(--white); border:1px solid var(--line-dark); border-radius:18px;
  padding:26px 22px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.plan-card:hover{ transform:translateY(-4px); border-color:var(--violet-bright); box-shadow:0 14px 34px rgba(124,42,232,.1); }
.plan-card h3{ font-size:17px; margin-bottom:6px; }
.plan-card span{ font-size:13.5px; color:var(--grey); }

/* ---------- CONTACT / FOOTER ---------- */
footer{ background:var(--lilac-pale); color:var(--ink); padding:90px 0 0; }
.contact-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px; padding-bottom:60px;
  border-bottom:1px solid var(--line-dark);
}
.contact-grid h2{ color:var(--ink); font-size:clamp(30px,4vw,44px); margin-bottom:18px; }
.contact-grid p{ color:var(--grey); font-size:16px; max-width:440px; margin-bottom:28px; }
.contact-detail{ display:grid; gap:16px; }
.contact-detail a, .contact-detail div{ display:flex; gap:14px; align-items:flex-start; }
.contact-detail .ico{
  width:38px; height:38px; border:1px solid var(--line-dark); background:var(--white);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--violet);
}
.contact-detail strong{ display:block; font-size:13px; color:var(--grey); font-weight:500; margin-bottom:2px;}
.contact-detail span{ font-size:15.5px; color:var(--ink); }
.contact-detail a:hover span{ color:var(--violet); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding:28px 0;
  flex-wrap:wrap; gap:12px;
}
.foot-bottom img{ height:28px; }
.foot-bottom p{ color:var(--grey); font-size:13px; }
.foot-stripe{ height:6px; background:linear-gradient(90deg, var(--ink) 0%, var(--violet-deep) 35%, var(--violet-bright) 65%, var(--lilac) 100%); }

/* ---------- DATA & BUSINESS INTELLIGENCE ---------- */
.subhead{
  font-size:clamp(22px, 2.6vw, 30px); margin-bottom:14px;
}
.subhead--spaced{ margin-top:86px; }
.subhead-sub{ margin-bottom:38px; }
.bi-explainer{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.bi-lead{ color:var(--grey); font-size:16.5px; max-width:520px; margin-bottom:8px; }
.bi-lead strong{ color:var(--ink); font-weight:600; }
.bi-steps{ list-style:none; display:grid; gap:0; margin-top:20px; }
.bi-steps li{
  display:flex; gap:18px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--line-dark);
}
.bi-steps li:last-child{ border-bottom:none; }
.bi-step-n{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:13px;
  color:var(--violet-bright); flex:0 0 auto; padding-top:2px;
}
.bi-steps strong{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); }
.bi-steps span{ font-size:14px; color:var(--grey); }
.bi-visual{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:20px;
  padding:36px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(124,42,232,.08);
}
.bi-visual svg{ width:100%; height:auto; display:block; }

/* precio / periodicidad dentro de las tarjetas de servicio */
.price-badge{
  align-self:flex-start;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.02em;
  background:var(--lilac-pale); color:var(--violet-deep);
  border:1px solid var(--lilac-line);
  padding:5px 12px; border-radius:100px; margin-bottom:14px;
}
.service-card.feature .price-badge{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); color:#fff;
}
.card-lead{ font-size:14.5px; color:var(--grey); }
.service-card.feature .card-lead{ color:rgba(255,255,255,.85); }
.stack-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.chip{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:500;
  background:var(--white); border:1px solid var(--lilac-line); color:var(--violet-deep);
  padding:5px 11px; border-radius:100px;
}
.service-card.feature .chip{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff;
}

/* espacio reservado para demos / casos reales */
.demo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.demo-slot{
  border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--line-dark); background:var(--white);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.demo-slot:hover{ transform:translateY(-4px); border-color:var(--violet-bright); box-shadow:0 14px 34px rgba(124,42,232,.12); }
.demo-slot img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.demo-slot .demo-caption{ padding:16px 20px; font-size:13.5px; color:var(--grey); }
.demo-slot .demo-caption strong{ display:block; font-size:15.5px; color:var(--ink); margin-bottom:2px; }
.demo-slot.is-empty{
  border-style:dashed; background:transparent;
  align-items:center; justify-content:center; text-align:center;
  min-height:210px; gap:6px;
}
.demo-slot.is-empty:hover{ transform:none; box-shadow:none; border-color:var(--lilac); }
.demo-ph{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; color:var(--ink); }
.demo-slot.is-empty .demo-caption{
  padding:0; font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--violet);
}

/* llamada a la acción de la sección */
.data-cta{
  margin-top:76px;
  background:linear-gradient(150deg, var(--violet) 0%, var(--violet-deep) 100%);
  color:var(--white); border-radius:24px; padding:48px;
  display:grid; grid-template-columns:1.3fr auto; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.data-cta::before{
  content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.data-cta > div{ position:relative; }
.data-cta h3{ font-size:26px; color:var(--white); margin-bottom:10px; }
.data-cta p{ color:rgba(255,255,255,.85); font-size:15.5px; max-width:520px; }
.data-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.data-cta .btn-primary{ background:var(--white); color:var(--violet-deep); }
.data-cta .btn-primary:hover{ box-shadow:0 10px 28px rgba(0,0,0,.22); }
.data-cta .btn-secondary{ border-color:rgba(255,255,255,.45); color:var(--white); }
.data-cta .btn-secondary:hover{ border-color:var(--white); background:rgba(255,255,255,.12); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-mark{ height:280px; order:-1; }
  .intro, .why-wrap, .contact-grid{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .services-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .bi-explainer{ grid-template-columns:1fr; gap:40px; }
  .demo-grid{ grid-template-columns:1fr; }
  .data-cta{ grid-template-columns:1fr; padding:40px 32px; }
  .clients-grid{ grid-template-columns:repeat(3,1fr); }
  .plans-grid{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }
}
@media (max-width: 560px){
  .grid-4{ grid-template-columns:1fr; }
  .wrap, .hero-inner{ padding-left:20px; padding-right:20px; }
  section{ padding:72px 0; }
  .clients-grid{ grid-template-columns:repeat(2,1fr); }
  .plans-grid{ grid-template-columns:1fr; }
  .bi-visual{ padding:22px; }
  .subhead--spaced{ margin-top:60px; }
  .data-cta{ margin-top:56px; padding:34px 24px; }
}