:root{
  --bg:#020a18;
  --bg-2:#07162c;
  --panel:#0b1b34;
  --panel-2:rgba(11,27,52,.76);
  --line:rgba(113,163,255,.18);
  --text:#edf4ff;
  --muted:#a7b8d8;
  --cyan:#80efff;
  --cyan-2:#3ab9ff;
  --blue:#2b7bff;
  --orange:#ff9f4a;
  --purple:#936dff;
  --green:#57dfc2;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:24px;
  --header-h:126px;
  --header-h-small:82px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(41,125,255,.18), transparent 60%),
    radial-gradient(1000px 600px at 20% 10%, rgba(0,183,255,.08), transparent 55%),
    linear-gradient(180deg,#020814 0%,#020b1d 35%,#050f21 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:-20%; pointer-events:none; z-index:-2;
  background:
    radial-gradient(circle at 15% 20%, rgba(128,239,255,.07), transparent 20%),
    radial-gradient(circle at 85% 10%, rgba(255,159,74,.06), transparent 18%),
    radial-gradient(circle at 70% 70%, rgba(43,123,255,.07), transparent 22%);
  animation:floatAura 18s ease-in-out infinite alternate;
}
@keyframes floatAura{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.06)}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.container{width:min(1240px,calc(100% - 48px));margin:0 auto}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;z-index:9999;padding:10px 14px;background:#fff;color:#000;border-radius:12px}

.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(3,10,22,.94), rgba(3,10,22,.82));
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(111,166,255,.12);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(128,239,255,.4), transparent);
}
.site-header.scrolled{box-shadow:0 12px 38px rgba(0,0,0,.28)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h);transition:min-height .35s ease}
.site-header.scrolled .nav-wrap{min-height:var(--header-h-small)}
.brand{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.brand img{height:92px;width:auto;transition:height .35s ease, transform .35s ease, filter .35s ease;filter:drop-shadow(0 10px 30px rgba(15,129,255,.24))}
.site-header.scrolled .brand img{height:58px}
.brand:hover img{transform:translateY(-2px) scale(1.02)}
.nav{display:flex;align-items:center;gap:14px;flex:1 1 auto;justify-content:center;flex-wrap:wrap}
.nav a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:18px; color:#d8e5fb; font-weight:700; font-size:1rem;
  transition:all .25s ease; border:1px solid transparent;
}
.nav a:hover{color:#fff; background:rgba(42,84,155,.14)}
.nav a.active,.nav a[aria-current="page"]{background:linear-gradient(180deg, rgba(41,114,228,.34), rgba(12,36,76,.65));border-color:rgba(115,172,255,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.2)}
.header-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.menu-toggle{display:none !important}
.btn, .btn.primary, .btn.btn-primary{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 28px; border-radius:20px; font-weight:800; letter-spacing:.01em;
  border:1px solid rgba(114,169,255,.28); color:#f7fbff; cursor:pointer;
  background:linear-gradient(180deg, rgba(12,40,88,.86), rgba(7,23,50,.95));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn::before{
  content:""; position:absolute; inset:-10px auto -10px -60px; width:36px;
  transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  opacity:0; transition:opacity .2s ease, left .65s ease;
}
.btn:hover{transform:translateY(-2px); border-color:rgba(128,239,255,.36); box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 0 1px rgba(128,239,255,.08), 0 0 28px rgba(69,176,255,.12)}
.btn:hover::before{left:110%; opacity:1}
.btn.ghost{background:rgba(6,16,33,.44)}
.text-link{font-weight:700;color:var(--cyan)}
.text-link:hover{color:#fff}

.page-main{padding-bottom:32px}
.hero{position:relative; min-height:calc(100svh - 20px); display:flex; align-items:center; overflow:hidden; isolation:isolate; padding:60px 0}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 20% 40%, rgba(0,136,255,.14), transparent 25%), radial-gradient(circle at 85% 18%, rgba(255,159,74,.08), transparent 16%);
}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.04) brightness(.8)}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(1,6,17,.92) 0%, rgba(2,10,24,.78) 34%, rgba(2,10,24,.38) 62%, rgba(2,10,24,.24) 100%), linear-gradient(180deg, rgba(2,10,24,.30), rgba(2,10,24,.46) 100%)}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:46px; align-items:center; position:relative}
.kicker,.eyebrow{display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.16em; font-size:.95rem; font-weight:900; color:var(--orange); margin-bottom:18px}
.kicker::before,.eyebrow::before{content:""; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #ffd3ab, var(--orange)); box-shadow:0 0 20px rgba(255,159,74,.55)}
h1,h2,h3{margin:0 0 16px; line-height:.98}
h1{font-size:clamp(3rem,7vw,6.5rem); max-width:860px; text-wrap:balance}
h2{font-size:clamp(2rem,4vw,3.6rem)}
h3{font-size:1.3rem}
.lead{font-size:clamp(1.08rem,1.8vw,1.45rem); line-height:1.68; color:#d8e5fb; max-width:850px}
p{line-height:1.7;color:#d8e5fb;margin:0 0 16px}.muted{color:var(--muted)}
.gradient-text{background:linear-gradient(90deg, #dff7ff 0%, var(--cyan) 30%, #cbdcc6 60%, var(--orange) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.chips{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 32px}
.chip{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid rgba(106,151,255,.22); background:rgba(4,14,31,.42); color:#dce9ff; backdrop-filter:blur(12px)}
.dot{width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px rgba(128,239,255,.75)}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:6px}
.hero-visual{position:relative}
.hero-visual img{width:100%; aspect-ratio:1.05/1; object-fit:cover; border-radius:32px; border:1px solid rgba(111,169,255,.22); box-shadow:0 26px 90px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.03); animation:floatVisual 8s ease-in-out infinite}
@keyframes floatVisual{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-visual::after{content:""; position:absolute; inset:auto -4% -6% 18%; height:38%; border-radius:50%; background:radial-gradient(circle, rgba(73,160,255,.32), transparent 70%); filter:blur(35px); z-index:-1}
.visual-badge{position:absolute; left:24px; right:24px; bottom:24px; display:flex; justify-content:space-between; gap:16px; padding:15px 18px; border-radius:18px; background:rgba(6,17,38,.74); border:1px solid rgba(111,168,255,.18); backdrop-filter:blur(12px); font-weight:700; color:#dbe7ff}

.section{position:relative; padding:92px 0; isolation:isolate; overflow:hidden}
.section::before{content:""; position:absolute; inset:18px 0 18px 0; z-index:-2; background-size:cover; background-position:center; opacity:.26; filter:saturate(1.05); border-radius:30px}
.section::after{content:""; position:absolute; inset:18px 0 18px 0; z-index:-1; border-radius:30px; background:linear-gradient(180deg, rgba(4,11,24,.68), rgba(4,11,24,.84)); border:1px solid rgba(108,159,255,.08)}
body.page-index #servicios::before, body.page-servicios #servicios::before{background-image:url('../images/hero-servicios.jpg')}
body.page-index #soluciones::before, body.page-soluciones #soluciones::before{background-image:url('../images/hero-soluciones.jpg')}
body.page-index #ia::before, body.page-ia #ia::before{background-image:url('../images/hero-ia.jpg')}
body.page-nosotros #nosotros::before{background-image:url('../images/hero-nosotros.jpg')}
body.page-contacto #contacto::before{background-image:url('../images/hero-contacto.jpg')}
.section-title{max-width:900px; margin-bottom:34px}
.grid{display:grid; gap:22px}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card,.service-card,.step-card,.metric-card,.contact-card,.contact-form,.feature-image,.ai-infographic,.cta,.contact-wrap > .reveal > .feature-image{
  position:relative; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(8,19,40,.82), rgba(7,18,38,.72));
  border:1px solid rgba(113,163,255,.16);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(10px);
}
.card,.service-card,.step-card,.metric-card,.contact-card{padding:24px}
.card::before,.service-card::before,.step-card::before,.metric-card::before{
  content:""; position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.18; transform:scale(1.04); transition:transform .35s ease, opacity .35s ease;
}
.service-card:nth-child(4n+1)::before{background-image:url('../images/module-cloud.jpg')}
.service-card:nth-child(4n+2)::before{background-image:url('../images/module-integration.jpg')}
.service-card:nth-child(4n+3)::before{background-image:url('../images/module-observability.jpg')}
.service-card:nth-child(4n)::before{background-image:url('../images/module-security.jpg')}
.ai-capabilities .card:nth-child(1)::before{background-image:url('../images/module-cloud.jpg')}
.ai-capabilities .card:nth-child(2)::before{background-image:url('../images/module-integration.jpg')}
.ai-capabilities .card:nth-child(3)::before{background-image:url('../images/module-observability.jpg')}
.ai-capabilities .card:nth-child(4)::before{background-image:url('../images/module-security.jpg')}
.step-card:nth-child(1)::before{background-image:url('../images/module-cloud.jpg')}
.step-card:nth-child(2)::before{background-image:url('../images/module-integration.jpg')}
.step-card:nth-child(3)::before{background-image:url('../images/module-observability.jpg')}
.step-card:nth-child(4)::before{background-image:url('../images/module-security.jpg')}
.card:hover::before,.service-card:hover::before,.step-card:hover::before,.metric-card:hover::before{opacity:.28; transform:scale(1.08)}
.card:hover,.service-card:hover,.step-card:hover,.metric-card:hover,.contact-card:hover,.feature-image:hover,.contact-form:hover{transform:translateY(-4px); border-color:rgba(128,239,255,.24); box-shadow:0 24px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(128,239,255,.06), 0 0 28px rgba(77,171,255,.1)}
.card,.service-card,.step-card,.metric-card,.contact-card,.feature-image,.contact-form{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}

.card-icon,.mini-icon,.step-icon{
  display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px;
  border-radius:18px; margin-bottom:16px; color:#e8f2ff;
  background:linear-gradient(180deg, rgba(20,45,87,.95), rgba(10,23,46,.95));
  border:1px solid rgba(109,163,255,.2); box-shadow:0 10px 30px rgba(0,0,0,.2), inset 0 0 25px rgba(255,255,255,.02)
}
.card-icon.blue{color:#93d4ff}.card-icon.cyan{color:var(--cyan)}.card-icon.purple{color:#ccbaff}.card-icon.green{color:#7ce8d4}.card-icon.orange{color:#ffc284}
.service-card ul,.card ul{padding-left:18px; margin:12px 0 16px; color:#d8e5fb}
.service-card li,.card li{margin:8px 0}
.process{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.step-num{display:inline-flex; width:42px; height:42px; border-radius:14px; align-items:center; justify-content:center; font-weight:900; background:rgba(255,159,74,.12); color:#ffd4af; margin-bottom:18px; border:1px solid rgba(255,159,74,.18)}
.metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.metric-card strong{display:block; font-size:2.15rem; margin-bottom:10px; color:#fff}
.metric-card span{display:block; font-weight:800; margin-bottom:8px}
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:28px; align-items:center}
.feature-image{padding:14px}
.feature-image img{width:100%; height:min(480px,48vw); object-fit:cover; border-radius:18px}
.check-list{display:grid; gap:14px; margin:24px 0}.check-item{display:flex; align-items:flex-start; gap:14px}
.check-item strong{color:#fff}
.ai-wrap{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.ai-visual{padding:14px}
.ai-diagram-img{width:100%; border-radius:18px; border:1px solid rgba(111,168,255,.12)}
.ai-metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px}
.ai-metric{padding:18px; border-radius:18px; background:rgba(8,20,40,.62); border:1px solid rgba(111,168,255,.14)}
.ai-metric strong{display:block; font-size:1.4rem; margin-bottom:6px}
.contact-wrap{display:grid; grid-template-columns:1.02fr .98fr; gap:26px}
.contact-form{padding:26px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:grid; gap:8px; font-weight:700; color:#e8f0ff; margin-bottom:14px}
input,select,textarea{
  width:100%; background:rgba(4,12,26,.75); color:#fff; border:1px solid rgba(109,163,255,.18); border-radius:16px; padding:15px 16px; font:inherit; outline:none;
}
textarea{min-height:140px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(128,239,255,.5); box-shadow:0 0 0 4px rgba(128,239,255,.08)}
.contact-card{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; margin-bottom:16px}
.cta{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px}
.footer-logo{max-height:70px; width:auto; margin-bottom:16px}
.site-footer{padding:34px 0 28px; border-top:1px solid rgba(111,168,255,.12); background:linear-gradient(180deg, rgba(3,9,20,.6), rgba(3,9,20,.92))}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:24px}
.footer-title{font-weight:900; margin-bottom:14px}
.footer-links{display:grid; gap:10px; color:var(--muted)}
.footer-links a:hover{color:#fff}
.social{display:flex; gap:12px; margin-top:18px}.social a{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(111,168,255,.18);background:rgba(8,20,40,.62)}
.legal{display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:.95rem; margin-top:26px; padding-top:22px; border-top:1px solid rgba(111,168,255,.12)}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform:none}

/* page-specific decorative overlays */
body.page-servicios #servicios::after, body.page-index #servicios::after{background:linear-gradient(180deg, rgba(4,11,24,.72), rgba(4,11,24,.88)), radial-gradient(circle at 88% 18%, rgba(128,239,255,.08), transparent 18%)}
body.page-ia #ia::after, body.page-index #ia::after{background:linear-gradient(180deg, rgba(4,11,24,.72), rgba(4,11,24,.88)), radial-gradient(circle at 70% 20%, rgba(128,239,255,.14), transparent 22%)}

@media (max-width: 1120px){
  .hero-grid,.split,.ai-wrap,.contact-wrap{grid-template-columns:1fr}
  .cols-4,.process,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta{flex-direction:column; align-items:flex-start}
}
@media (max-width: 820px){
  :root{--header-h:96px; --header-h-small:78px}
  .container{width:min(100% - 28px, 1240px)}
  .nav{display:none}
  .header-actions .btn{padding:0 18px; min-height:50px; font-size:.94rem}
  .brand img{height:74px}
  .site-header.scrolled .brand img{height:52px}
  .hero{min-height:auto; padding:42px 0 64px}
  .hero-visual img{aspect-ratio:1.15/1}
  .visual-badge{position:static; margin-top:16px}
  .cols-4,.process,.metrics,.cols-2,.ai-metrics,.form-row,.footer-grid{grid-template-columns:1fr}
  .legal{flex-direction:column}
}


/* Strategic alliances */
.alliances-section::before{background-image:url('../images/hero-nosotros.jpg'); opacity:.22}
.alliances-section::after{background:linear-gradient(180deg, rgba(4,11,24,.74), rgba(4,11,24,.9)), radial-gradient(circle at 15% 20%, rgba(128,239,255,.12), transparent 20%), radial-gradient(circle at 86% 64%, rgba(255,159,74,.08), transparent 22%)}
.alliance-highlight{
  display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; margin:10px 0 26px; padding:28px;
  border-radius:26px; background:linear-gradient(135deg, rgba(14,42,88,.78), rgba(5,17,37,.78));
  border:1px solid rgba(128,239,255,.18); box-shadow:0 24px 70px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.03); overflow:hidden; position:relative;
}
.alliance-highlight::before{content:""; position:absolute; inset:-60% auto auto -10%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(128,239,255,.18), transparent 68%); filter:blur(8px)}
.highlight-label{display:inline-flex; padding:9px 14px; border-radius:999px; background:rgba(128,239,255,.08); border:1px solid rgba(128,239,255,.18); color:var(--cyan); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; margin-bottom:10px}
.highlight-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.highlight-metrics span{padding:16px; border-radius:18px; background:rgba(4,12,26,.62); border:1px solid rgba(111,168,255,.14)}
.highlight-metrics strong{display:block; font-size:1.05rem; color:#fff; margin-bottom:6px}.highlight-metrics small{display:block; color:var(--muted); line-height:1.35}
.alliances-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.alliance-card{position:relative; padding:22px; border-radius:24px; background:linear-gradient(180deg, rgba(8,19,40,.86), rgba(6,16,34,.78)); border:1px solid rgba(113,163,255,.15); box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.025); overflow:hidden; transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease}
.alliance-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 0%, rgba(128,239,255,.13), transparent 32%), radial-gradient(circle at 100% 100%, rgba(255,159,74,.08), transparent 34%); opacity:.85; z-index:-1}
.alliance-card:hover{transform:translateY(-6px); border-color:rgba(128,239,255,.30); box-shadow:0 28px 68px rgba(0,0,0,.45), 0 0 35px rgba(56,171,255,.12)}
.alliance-logo{height:98px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; padding:16px 18px; border-radius:18px; background:linear-gradient(180deg, rgba(3,12,28,.92), rgba(3,12,28,.72)); border:1px solid rgba(111,168,255,.13); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.alliance-logo img{max-width:100%; max-height:74px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(128,239,255,.12))}
.alliance-logo img.logo-oracle{max-height:86px}
.alliance-logo img.logo-bimbo{max-height:78px}
.alliance-logo img.logo-televisa{max-height:76px}
.alliance-logo img.logo-televisaunivision{max-height:78px}
.alliance-logo img.logo-gcp{max-height:72px}
.alliance-logo img.logo-aws{max-height:70px}
.alliance-tag{display:inline-flex; margin-top:10px; color:#d7edff; background:rgba(128,239,255,.07); border:1px solid rgba(128,239,255,.14); padding:8px 10px; border-radius:999px; font-size:.83rem; font-weight:800}
@media (max-width:1120px){.alliances-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.alliance-highlight{grid-template-columns:1fr}.highlight-metrics{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:820px){.alliances-grid{grid-template-columns:1fr}.highlight-metrics{grid-template-columns:1fr}.alliance-logo{height:86px}}