:root {
  --syatek-black:#171717;
  --syatek-green:#a4e821;
  --syatek-green-deep:#6ea813;
  --bg:#f5f8fc;
  --ink:#101623;
  --muted:#5b6577;
  --line:#dde4ef;
  --surface:#fff;
  --surface-2:#eef4ff;
  --blue:#1f5eff;
  --max:1180px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.container{width:min(100% - 2rem,var(--max));margin-inline:auto}
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:.2px}
.brand img{height:52px;width:auto}
.nav-shell{display:flex;align-items:center;gap:.85rem;margin-left:auto}
.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:46px;min-height:46px;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;color:#1f2937;box-shadow:0 8px 18px rgba(20,32,56,.06)}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:999px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.nav-links{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.nav-links a{text-decoration:none;color:#3e4758;font-weight:700;font-size:.95rem}
.nav-links a:hover{color:var(--ink)}
.lang{display:flex;gap:.4rem;margin-left:.35rem}
.lang select{padding:.35rem .55rem;border:1px solid #d8dee8;border-radius:10px;background:#fff;color:#1f2937;font-weight:700}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:34px;padding:0 .6rem;border:1px solid var(--line);border-radius:10px;font-size:.85rem}
.lang .active{background:var(--syatek-black);color:#fff;border-color:var(--syatek-black)}
.hero{position:relative;isolation:isolate;overflow:hidden;height:clamp(700px,67dvh,760px);display:flex;align-items:center}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#0e1422 0%,#1a2438 50%,#223452 100%);z-index:-3}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(130deg,rgba(164,232,33,.18),rgba(164,232,33,.02) 38%,rgba(255,255,255,0) 70%);z-index:-2}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0f172a}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,7,15,.56) 0%,rgba(4,12,18,.42) 34%,rgba(18,46,18,.18) 62%,rgba(8,24,18,.28) 100%),linear-gradient(135deg,rgba(164,232,33,.18),rgba(30,120,55,.08) 46%,rgba(255,255,255,0) 100%);pointer-events:none}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.72;filter:hue-rotate(82deg) saturate(1.32) brightness(.88);pointer-events:none}
.home-hero-media::after{background:linear-gradient(90deg,rgba(2,7,15,.77) 0%,rgba(4,12,18,.58) 34%,rgba(12,42,20,.27) 62%,rgba(8,24,18,.36) 100%),linear-gradient(135deg,rgba(164,232,33,.13),rgba(30,120,55,.06) 46%,rgba(255,255,255,0) 100%)}
.home-hero-video{opacity:.9;filter:hue-rotate(-80deg) saturate(1.55) brightness(1.22)}
.geo-hero-media::after{background:linear-gradient(90deg,rgba(2,7,15,.77) 0%,rgba(4,12,18,.58) 34%,rgba(12,42,20,.27) 62%,rgba(8,24,18,.36) 100%),linear-gradient(135deg,rgba(164,232,33,.13),rgba(30,120,55,.06) 46%,rgba(255,255,255,0) 100%)}
.geo-hero-video{opacity:.9;filter:hue-rotate(-80deg) saturate(1.55) brightness(1.22)}
.ensenada-hero-media{background:#07120e url(/assets/images/syatek-ensenada-harbor-32551324-hero.jpg) center/cover no-repeat}
.ensenada-hero-media::after{background:linear-gradient(90deg,rgba(2,7,15,.72) 0%,rgba(4,12,18,.56) 34%,rgba(10,38,24,.24) 62%,rgba(6,18,16,.4) 100%),linear-gradient(135deg,rgba(164,232,33,.12),rgba(28,118,76,.06) 46%,rgba(255,255,255,0) 100%)}
.service-video-hero .hero-media{background:#06110d}
.service-hero-media::after{z-index:2;background:linear-gradient(90deg,rgba(2,7,15,.78) 0%,rgba(4,14,14,.62) 34%,rgba(12,56,25,.3) 62%,rgba(4,18,15,.48) 100%),linear-gradient(135deg,rgba(164,232,33,.24),rgba(32,155,82,.12) 45%,rgba(255,255,255,0) 100%)}
.service-hero-media--ai::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(78,142,28,.34);mix-blend-mode:color;pointer-events:none}
.service-hero-video{position:relative;z-index:0;opacity:.72;filter:hue-rotate(-82deg) saturate(1.45) brightness(.8) contrast(1.06);object-position:center center}
.service-hero-media--consultoria::after{background:linear-gradient(90deg,rgba(2,7,15,.84) 0%,rgba(4,13,16,.66) 34%,rgba(14,52,28,.32) 62%,rgba(4,16,14,.56) 100%),linear-gradient(135deg,rgba(164,232,33,.26),rgba(28,144,78,.12) 42%,rgba(255,255,255,0) 100%)}
.service-hero-video--consultoria{opacity:.7;filter:hue-rotate(-76deg) saturate(1.32) brightness(.82) contrast(1.08)}
.service-hero-media--soluciones::after{background:linear-gradient(90deg,rgba(2,7,15,.82) 0%,rgba(4,14,16,.64) 34%,rgba(10,50,30,.32) 62%,rgba(4,17,14,.54) 100%),linear-gradient(135deg,rgba(164,232,33,.24),rgba(34,142,84,.12) 44%,rgba(255,255,255,0) 100%)}
.service-hero-video--soluciones{opacity:.7;filter:hue-rotate(-68deg) saturate(1.3) brightness(.8) contrast(1.08)}
.service-hero-media--soporte::after{background:linear-gradient(90deg,rgba(2,7,15,.84) 0%,rgba(4,14,18,.66) 34%,rgba(10,46,28,.3) 62%,rgba(4,16,14,.56) 100%),linear-gradient(135deg,rgba(164,232,33,.22),rgba(26,132,78,.1) 42%,rgba(255,255,255,0) 100%)}
.service-hero-video--soporte{opacity:.7;filter:hue-rotate(-72deg) saturate(1.22) brightness(.8) contrast(1.08)}
.service-hero-media--desarrollo::after{background:linear-gradient(90deg,rgba(2,7,15,.8) 0%,rgba(4,12,18,.62) 34%,rgba(10,48,28,.3) 62%,rgba(4,16,14,.52) 100%),linear-gradient(135deg,rgba(164,232,33,.22),rgba(30,136,80,.1) 42%,rgba(255,255,255,0) 100%)}
.service-hero-video--desarrollo{opacity:.7;filter:hue-rotate(-70deg) saturate(1.26) brightness(.8) contrast(1.08)}
.service-hero-media--ai::after{background:linear-gradient(90deg,rgba(2,7,15,.8) 0%,rgba(5,16,15,.64) 34%,rgba(44,68,16,.28) 62%,rgba(4,18,15,.52) 100%),linear-gradient(135deg,rgba(164,232,33,.28),rgba(255,213,48,.11) 38%,rgba(32,155,82,.08) 100%)}
.service-hero-video--ai{opacity:.7;filter:hue-rotate(76deg) saturate(1.15) brightness(.78) contrast(1.08)}
.hero h1,.hero .lead,.hero .hero-points,.hero .focus-note,.hero .about-hero-support,.hero .blog-hero-support{text-shadow:0 3px 20px rgba(0,0,0,.82),0 1px 3px rgba(0,0,0,.72)}
.hero .lead,.hero .about-hero-support,.hero .blog-hero-support{color:#f5f8ff;font-weight:600}
.focus-hero-media{background:#08130f url(/assets/images/syatek-enfoque-futuristic-27360-poster-perf.jpg) center/cover no-repeat}
.focus-hero-media::after{background:linear-gradient(90deg,rgba(2,10,8,.8) 0%,rgba(7,24,14,.68) 34%,rgba(95,112,12,.32) 62%,rgba(3,15,12,.64) 100%),linear-gradient(135deg,rgba(164,232,33,.42),rgba(255,213,48,.16) 34%,rgba(10,40,24,.2) 100%);mix-blend-mode:normal}
.focus-hero-video{opacity:.32;filter:hue-rotate(86deg) saturate(1.2) brightness(.42);object-position:center center}
.about-hero-media{background:#07120e}
.about-hero-media::after{background:linear-gradient(90deg,rgba(2,8,8,.62) 0%,rgba(4,18,12,.5) 36%,rgba(14,40,22,.26) 64%,rgba(3,12,14,.44) 100%),linear-gradient(135deg,rgba(164,232,33,.18),rgba(24,130,74,.12) 46%,rgba(4,20,16,.1) 100%)}
.about-hero-video{opacity:.56;filter:hue-rotate(78deg) saturate(1.08) brightness(.72);object-position:center center}
.contact-hero-media{background:#06120e}
.contact-hero-media::after{background:linear-gradient(90deg,rgba(2,8,10,.8) 0%,rgba(5,14,18,.64) 34%,rgba(10,52,28,.32) 62%,rgba(5,16,14,.54) 100%),linear-gradient(135deg,rgba(164,232,33,.24),rgba(28,132,78,.1) 42%,rgba(255,255,255,0) 100%)}
.contact-hero-video{opacity:.72;filter:hue-rotate(-70deg) saturate(1.28) brightness(.82) contrast(1.08);object-position:center center}
.mexico-hero-media{background:#06120e}
.mexico-hero-media::after{background:linear-gradient(90deg,rgba(2,8,10,.82) 0%,rgba(5,14,18,.66) 34%,rgba(10,52,28,.34) 62%,rgba(5,16,14,.56) 100%),linear-gradient(135deg,rgba(164,232,33,.24),rgba(30,132,80,.1) 42%,rgba(255,255,255,0) 100%)}
.mexico-hero-video{opacity:.74;filter:hue-rotate(-64deg) saturate(1.22) brightness(.84) contrast(1.08);object-position:center center}
.faq-hero-media{background:#07120e}
.faq-hero-media::after{background:linear-gradient(90deg,rgba(2,8,10,.8) 0%,rgba(5,14,18,.64) 34%,rgba(10,52,28,.32) 62%,rgba(5,16,14,.54) 100%),linear-gradient(135deg,rgba(164,232,33,.22),rgba(28,132,78,.1) 42%,rgba(255,255,255,0) 100%)}
.faq-hero-video{opacity:.72;filter:hue-rotate(-70deg) saturate(1.28) brightness(.82) contrast(1.08);object-position:center center}
.about-hero-lead{max-width:80ch}
.about-hero-support{max-width:86ch;margin:.15rem 0 0;color:#edf4ff;font-size:clamp(.98rem,1.45vw,1.12rem);line-height:1.55}
.about-hero-scope{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem;max-width:92ch}
.about-hero-scope span{display:inline-flex;align-items:center;min-height:36px;padding:0 .78rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#f4f8ff;font-weight:800;font-size:.88rem;backdrop-filter:blur(8px)}
.blog-hero-media{background:#071018 url(/assets/images/syatek-blog-server-room-90389-perf.jpg) center/cover no-repeat}
.blog-hero-media::after{background:linear-gradient(90deg,rgba(2,7,15,.82) 0%,rgba(4,12,20,.72) 36%,rgba(6,18,28,.48) 64%,rgba(4,10,18,.66) 100%),linear-gradient(135deg,rgba(164,232,33,.16),rgba(31,94,255,.1) 46%,rgba(4,20,28,.14) 100%)}
.blog-hero-lead{max-width:84ch}
.blog-hero-support{max-width:86ch;margin:.15rem 0 0;color:#edf4ff;font-size:clamp(.98rem,1.45vw,1.12rem);line-height:1.55}
.blog-hero-scope{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem;max-width:92ch}
.blog-hero-scope span{display:inline-flex;align-items:center;min-height:36px;padding:0 .78rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#f4f8ff;font-weight:800;font-size:.88rem;backdrop-filter:blur(8px)}
.hero-wrap{display:flex;flex-direction:column;justify-content:center;padding:3.6rem 0 3rem;color:#fff}
.kicker{display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;max-width:100%;gap:.5rem;padding:.35rem .7rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.08);font-size:.83rem;font-weight:700}
.kdot{width:8px;height:8px;border-radius:999px;background:var(--syatek-green)}
h1{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05;max-width:15ch;margin:.85rem 0 1rem;font-weight:900}
.hero h1{max-width:24ch;font-size:clamp(2rem,3.5vw,3.45rem)}
.lead{font-size:clamp(1rem,1.75vw,1.22rem);max-width:72ch;color:#d7deea}
.cta{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}
.btn{min-height:46px;padding:0 1rem;border-radius:12px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;border:1px solid transparent}
.btn-primary{background:var(--syatek-green);color:#132100}
.btn-primary:hover{background:#b8f24a}
.btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34)}
.hero-points{margin-top:1rem;color:#dbe6fa;font-size:.95rem}
.section{padding:3.6rem 0}
.section h2{font-size:clamp(1.5rem,2.2vw,2.2rem);margin:0 0 .75rem}
.sub{color:var(--muted);max-width:72ch}
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem;box-shadow:0 8px 24px rgba(20,32,56,.06)}
.icon-chip{display:inline-flex;min-width:30px;min-height:30px;border-radius:10px;background:#edf3ff;color:var(--blue);font-size:.78rem;font-weight:800;align-items:center;justify-content:center;margin-bottom:.5rem;border:1px solid #d8e5ff}
.card h3{margin:.05rem 0 .4rem;font-size:1.03rem}
.card p{margin:0;color:#4b5568}
.band{background:linear-gradient(180deg,#eef5e8,#f7fbff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process{display:grid;gap:1rem;grid-template-columns:1fr}
.step{display:flex;gap:.75rem;align-items:flex-start;background:#fff;border:1px solid var(--line);padding:.9rem;border-radius:14px}
.num{width:30px;height:30px;border-radius:999px;background:var(--syatek-black);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:0 0 auto}
.kpis{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem}
.kpi strong{font-size:1.35rem;color:var(--blue)}
.kpi .small{color:#627089}
.list{padding-left:1.1rem;color:#2c3445}
.showcase{display:grid;grid-template-columns:1fr;gap:1rem}
.showcase img{width:100%;border-radius:16px;border:1px solid var(--line);aspect-ratio:16/10;object-fit:cover}
.cta-block{background:#0f172a;color:#fff;border-radius:18px;padding:1.25rem;border:1px solid rgba(255,255,255,.14)}
.cta-block p{color:#ced7e8}
footer{padding:1.6rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}

@media (min-width:760px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .showcase{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:980px){
  .process{grid-template-columns:1.1fr .9fr}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
}

.card-media{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-bottom:.65rem}

.card-media-wide{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-bottom:.65rem}

/* --- Syatek process KPI background motifs (subtle, transparent) --- */
.kpi{position:relative;overflow:hidden;isolation:isolate}
.kpi > *{position:relative;z-index:2}
.kpi::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-repeat:no-repeat;
  background-position:right -8px bottom -8px;
  background-size:120px 120px;
  opacity:.16;
  pointer-events:none;
}

/* 1) 30+ años: experiencia + dedicación */
.kpis .kpi:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 200 200%3E%3Ccircle cx=118 cy=96 r=64 fill=%23171617/%3E%3Cpath d=M118 48l12 24 26 4-19 19 5 27-24-13-24 13 5-27-19-19 26-4z fill=%236ea813/%3E%3Cpath d=M70 134l16 6-3 24-13-8-13 8 2-23z fill=%23171617/%3E%3C/svg%3E");
}

/* 2) Enfoque PyME: industria/negocio */
.kpis .kpi:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 200 200%3E%3Crect x=34 y=82 width=132 height=78 rx=8 fill=%23171617/%3E%3Crect x=50 y=98 width=20 height=20 fill=%236ea813/%3E%3Crect x=78 y=98 width=20 height=20 fill=%236ea813/%3E%3Crect x=106 y=98 width=20 height=20 fill=%236ea813/%3E%3Crect x=134 y=98 width=20 height=20 fill=%236ea813/%3E%3Crect x=50 y=126 width=20 height=20 fill=%236ea813/%3E%3Crect x=78 y=126 width=20 height=20 fill=%236ea813/%3E%3Crect x=106 y=126 width=20 height=20 fill=%236ea813/%3E%3Cpath d=M62 82V64h76v18 stroke=%23171617 stroke-width=10 fill=none/%3E%3C/svg%3E");
}

/* 3) Bilingüe: banderas MX + US */
.kpis .kpi:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 200 200%3E%3Crect x=28 y=68 width=64 height=44 rx=4 fill=%23ffffff stroke=%23171617 stroke-width=2/%3E%3Crect x=28 y=68 width=21.3 height=44 fill=%23006f3c/%3E%3Crect x=70.7 y=68 width=21.3 height=44 fill=%23ce1126/%3E%3Ccircle cx=60 cy=90 r=4 fill=%23171617/%3E%3Crect x=108 y=88 width=64 height=44 rx=4 fill=%23ffffff stroke=%23171617 stroke-width=2/%3E%3Crect x=108 y=88 width=28 height=20 fill=%233c3b6e/%3E%3Cg fill=%23b22234%3E%3Crect x=108 y=88 width=64 height=4/%3E%3Crect x=108 y=96 width=64 height=4/%3E%3Crect x=108 y=104 width=64 height=4/%3E%3Crect x=108 y=112 width=64 height=4/%3E%3Crect x=108 y=120 width=64 height=4/%3E%3Crect x=108 y=128 width=64 height=4/%3E%3C/svg%3E");
}

/* 4) End-to-end: flechas verticales arriba/abajo */
.kpis .kpi:nth-child(4)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 200 200%3E%3Cpath d=M100 32l-24 24h14v48h20V56h14z fill=%23171617/%3E%3Cpath d=M100 168l24-24h-14V96H90v48H76z fill=%236ea813/%3E%3Crect x=94 y=82 width=12 height=36 fill=%23171617 opacity=.7/%3E%3C/svg%3E");
}

/* --- KPI motif fallback without data-URI (for CSP/cache issues) --- */
.kpis .kpi{position:relative;overflow:hidden}
.kpis .kpi::before,.kpis .kpi::after{content:"";position:absolute;pointer-events:none}

/* 1) +30 años: badge/rings */
.kpis .kpi:nth-child(1)::before{
  right:-18px;bottom:-22px;width:110px;height:110px;border-radius:999px;
  border:10px solid rgba(23,23,23,.14);
}
.kpis .kpi:nth-child(1)::after{
  right:16px;bottom:16px;width:14px;height:14px;border-radius:999px;background:rgba(110,168,19,.35);
}

/* 2) Enfoque PyME: bloques tipo industria */
.kpis .kpi:nth-child(2)::before{
  right:8px;bottom:8px;width:96px;height:72px;border-radius:10px;
  background:
    linear-gradient(rgba(110,168,19,.22),rgba(110,168,19,.22)) 8px 10px/16px 12px no-repeat,
    linear-gradient(rgba(110,168,19,.22),rgba(110,168,19,.22)) 30px 10px/16px 12px no-repeat,
    linear-gradient(rgba(110,168,19,.22),rgba(110,168,19,.22)) 52px 10px/16px 12px no-repeat,
    linear-gradient(rgba(110,168,19,.22),rgba(110,168,19,.22)) 8px 30px/16px 12px no-repeat,
    linear-gradient(rgba(110,168,19,.22),rgba(110,168,19,.22)) 30px 30px/16px 12px no-repeat,
    linear-gradient(rgba(110,168,19,.22),rgba(110,168,19,.22)) 52px 30px/16px 12px no-repeat,
    linear-gradient(rgba(23,23,23,.12),rgba(23,23,23,.12));
}

/* 3) Bilingüe: dos mini-banderas estilizadas */
.kpis .kpi:nth-child(3)::before{
  right:8px;bottom:12px;width:42px;height:28px;border-radius:4px;border:1px solid rgba(23,23,23,.14);
  background:linear-gradient(90deg,rgba(0,111,60,.35) 0 33%, rgba(255,255,255,.35) 33% 66%, rgba(206,17,38,.35) 66% 100%);
}
.kpis .kpi:nth-child(3)::after{
  right:56px;bottom:4px;width:42px;height:28px;border-radius:4px;border:1px solid rgba(23,23,23,.14);
  background:
    linear-gradient(rgba(178,34,52,.35),rgba(178,34,52,.35)) 0 0/100% 4px no-repeat,
    linear-gradient(rgba(178,34,52,.35),rgba(178,34,52,.35)) 0 8px/100% 4px no-repeat,
    linear-gradient(rgba(178,34,52,.35),rgba(178,34,52,.35)) 0 16px/100% 4px no-repeat,
    linear-gradient(rgba(178,34,52,.35),rgba(178,34,52,.35)) 0 24px/100% 4px no-repeat,
    linear-gradient(rgba(60,59,110,.35),rgba(60,59,110,.35)) 0 0/44% 56% no-repeat,
    linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35));
}

/* 4) End-to-end: flechas verticales */
.kpis .kpi:nth-child(4)::before{
  right:22px;bottom:8px;width:14px;height:72px;border-radius:8px;background:rgba(23,23,23,.2);
}
.kpis .kpi:nth-child(4)::after{
  right:16px;bottom:4px;width:26px;height:90px;
  background:
    conic-gradient(from 225deg at 50% 10px, rgba(23,23,23,.28) 90deg, transparent 0) top/26px 13px no-repeat,
    conic-gradient(from 45deg at 50% calc(100% - 10px), rgba(110,168,19,.5) 90deg, transparent 0) bottom/26px 13px no-repeat;
}

/* --- KPI real image backgrounds (requested by Bert) --- */
.kpis .kpi::before,
.kpis .kpi::after{display:none!important}
.kpi.kpi-bg{position:relative;overflow:hidden;isolation:isolate}
.kpi.kpi-bg > *{position:relative;z-index:2}
.kpi.kpi-bg::before{
  content:"";
  display:block!important;
  position:absolute;
  inset:0;
  z-index:1;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.22;
  pointer-events:none;
}
.kpi.kpi-bg-exp::before{background-image:url(/assets/images/syatek-kpi-exp-v3-vertical.png)}
.kpi.kpi-bg-pyme::before{background-image:url(/assets/images/syatek-kpi-pyme-v3-vertical.png)}
.kpi.kpi-bg-bi::before{background-image:url(/assets/images/syatek-kpi-bilingual-v3-vertical.png)}
.kpi.kpi-bg-e2e::before{background-image:url(/assets/images/syatek-kpi-end2end-v3-vertical.png)}

/* Anchor offset for sticky header */
#services, #process, #pymes { scroll-margin-top: 96px; }

/* Compact PyMEs section to fit better on 1080p */
#pymes.section { padding-top: 2.2rem; padding-bottom: 2.2rem; }
#pymes h2 { margin-bottom: .45rem; }
#pymes .list { margin: .35rem 0 .6rem; }
#pymes .list li { margin: .18rem 0; }
#pymes .card { padding: .75rem; border-radius: 14px; }
#pymes .card h3 { margin: .05rem 0 .28rem; font-size: .98rem; }
#pymes .card p { font-size: .92rem; line-height: 1.35; }
#pymes .card-media-wide { aspect-ratio: 21/9; margin-bottom: .45rem; }

@media (max-width: 900px) {
  #services, #process, #pymes { scroll-margin-top: 84px; }
  #pymes .card-media-wide { aspect-ratio: 16/9; }
}

/* Extra compact pass for 1080p visibility */
#pymes.section { padding-top: 1.8rem; padding-bottom: 1.8rem; }
#pymes h2 { margin-bottom: .3rem; }
#pymes .list { margin: .25rem 0 .45rem; font-size: .95rem; }
#pymes .list li { margin: .14rem 0; }
#pymes .grid.grid-3 { margin-top: .65rem !important; gap: .65rem; }
#pymes .card { padding: .62rem; }
#pymes .card h3 { font-size: .94rem; margin: .02rem 0 .2rem; }
#pymes .card p { font-size: .88rem; line-height: 1.28; }
#pymes .card-media-wide { aspect-ratio: 24/9; margin-bottom: .35rem; }

@media (max-width: 900px) {
  #pymes .card-media-wide { aspect-ratio: 16/9; }
}

/* PyMEs cards image shrink ~20% */
#pymes .card-media-wide {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 24/9;
}
@media (max-width: 900px) {
  #pymes .card-media-wide {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

/* Fix: revert PyMEs image size; shrink Services cards images instead */
#pymes .card-media-wide {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#services .card-media {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  #services .card-media,
  #pymes .card-media-wide {
    width: 100%;
  }
}

/* Services section tune: images +20%, cards -20% */
#services .card-media {
  width: 80%;
}
#services .card {
  padding: .8rem;
}
#services .card h3 {
  font-size: .92rem;
  margin: .04rem 0 .28rem;
}
#services .card p {
  font-size: .9rem;
  line-height: 1.3;
}
@media (max-width: 900px) {
  #services .card-media { width: 100%; }
}

/* Fine tune anchors + Services card compactness */
#services { scroll-margin-top: 112px; }

#services .card {
  padding: .62rem;
}
#services .card-media {
  width: 72%;
  aspect-ratio: 16/11;
  margin-bottom: .4rem;
}
#services .card h3 {
  font-size: .88rem;
  margin: .02rem 0 .2rem;
}
#services .card p {
  font-size: .84rem;
  line-height: 1.24;
}

@media (max-width: 900px) {
  #services { scroll-margin-top: 92px; }
  #services .card { padding: .8rem; }
  #services .card-media { width: 100%; aspect-ratio: 1/1; }
  #services .card h3 { font-size: .96rem; }
  #services .card p { font-size: .9rem; line-height: 1.32; }
}

/* Services: center media + cards 10% larger */
#services .card {
  padding: .7rem;
}
#services .card-media {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 79%;
}
#services .card h3 {
  font-size: .92rem;
}
#services .card p {
  font-size: .88rem;
  line-height: 1.28;
}

@media (max-width: 900px) {
  #services .card { padding: .85rem; }
  #services .card-media { width: 100%; }
  #services .card h3 { font-size: .98rem; }
  #services .card p { font-size: .92rem; }
}

/* Services images +10% taller */
#services .card-media {
  aspect-ratio: 16/12.1;
}
@media (max-width: 900px) {
  #services .card-media {
    aspect-ratio: 1/1;
  }
}

/* Services anchor: slightly lower landing */
#services { scroll-margin-top: 128px; }
@media (max-width: 900px) {
  #services { scroll-margin-top: 100px; }
}

/* Services anchor: move about ~2 lines upward */
#services { scroll-margin-top: 92px; }
@media (max-width: 900px) {
  #services { scroll-margin-top: 78px; }
}

/* Final tweak: services anchor a bit more up + header logo 80px */
#services { scroll-margin-top: 74px; }
@media (max-width: 900px) {
  #services { scroll-margin-top: 64px; }
}

.brand img {
  height: 80px;
  width: auto;
}
@media (max-width: 900px) {
  .brand img { height: 64px; }
}


/* ===== Process KPI redesign (2026-03-18) ===== */
#process .kpis{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.95rem;
}
#process .kpi.kpi-stat{
  background:linear-gradient(155deg,#ffffff 0%, #f8fbff 100%);
  border:1px solid #dbe4f2;
  border-radius:16px;
  box-shadow:0 10px 22px rgba(20,32,56,.07);
  padding:1rem .95rem;
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#process .kpi.kpi-stat:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(20,32,56,.11);
  border-color:#bfd0ea;
}
#process .kpi .kpi-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  margin-bottom:.55rem;
  font-size:1rem;
  border:1px solid transparent;
}
#process .kpi strong{
  font-size:1.18rem;
  line-height:1.2;
  color:#14284a;
  margin-bottom:.22rem;
}
#process .kpi .small{
  color:#4f607a;
  font-size:.9rem;
  line-height:1.35;
}
#process .kpi-exp .kpi-icon{background:#f7fbec;border-color:#d8ecb2}
#process .kpi-pyme .kpi-icon{background:#edf5ff;border-color:#cfe2ff}
#process .kpi-bi .kpi-icon{background:#f1efff;border-color:#d8d2ff}
#process .kpi-e2e .kpi-icon{background:#eef8f5;border-color:#cfeadf}

@media (max-width:560px){
  #process .kpis{grid-template-columns:1fr}
  #process .kpi.kpi-stat{min-height:112px}
}


/* ===== KPI icon style override (font-awesome, text-color) ===== */
#process .kpi .kpi-icon{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  align-self:flex-start;
  margin:0 0 .55rem 0;
  font-size:1.26rem;
  color:#14284a;
  background:transparent !important;
  border:none !important;
  border-radius:0;
  padding:0;
}
#process .kpi .kpi-icon i{line-height:1;color:inherit}

/* 2026-04-09 premium polish pass */
.header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px)}
.nav-links{gap:1rem}
.nav-links a{position:relative;padding:.25rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-.2rem;height:2px;border-radius:999px;background:var(--syatek-green);opacity:0;transform:scaleX(.55);transition:opacity .18s ease,transform .18s ease}
.nav-links a:hover::after{opacity:1;transform:scaleX(1)}
.hero-wrap{display:flex;flex-direction:column;justify-content:center;padding:3.6rem 0 3rem}
.card{border-radius:18px;box-shadow:0 12px 30px rgba(20,32,56,.055)}
.cta-block{background:linear-gradient(135deg,#0f172a 0%,#152543 100%);box-shadow:0 18px 42px rgba(15,23,42,.18)}
.section h2{letter-spacing:-.02em}

@media (max-width: 900px) {
  .hero{height:clamp(680px,88dvh,760px)}
  .hero-wrap{padding:3rem 0 2.4rem}
  .hero h1{font-size:clamp(1.85rem,9.2vw,2.55rem)}
  .hero .lead{font-size:1rem}
  .hero-points,.focus-note{font-size:.88rem}
  .focus-panel{display:none}
  .hero-media::after{background:linear-gradient(180deg,rgba(2,7,15,.58) 0%,rgba(3,12,16,.44) 46%,rgba(8,24,18,.38) 100%),linear-gradient(135deg,rgba(164,232,33,.15),rgba(30,120,55,.08) 46%,rgba(255,255,255,0) 100%)}
  .hero-video{opacity:.62;filter:hue-rotate(82deg) saturate(1.28) brightness(.82);object-position:56% center}
  .home-hero-media::after{background:linear-gradient(180deg,rgba(2,7,15,.79) 0%,rgba(3,12,16,.64) 46%,rgba(8,24,18,.48) 100%),linear-gradient(135deg,rgba(164,232,33,.12),rgba(30,120,55,.05) 46%,rgba(255,255,255,0) 100%)}
  .home-hero-video{opacity:.82;filter:hue-rotate(-80deg) saturate(1.45) brightness(1.08);object-position:56% center}
  .geo-hero-media::after{background:linear-gradient(180deg,rgba(2,7,15,.79) 0%,rgba(3,12,16,.64) 46%,rgba(8,24,18,.48) 100%),linear-gradient(135deg,rgba(164,232,33,.12),rgba(30,120,55,.05) 46%,rgba(255,255,255,0) 100%)}
  .geo-hero-video{opacity:.82;filter:hue-rotate(-80deg) saturate(1.45) brightness(1.08);object-position:56% center}
  .service-hero-media::after{background:linear-gradient(180deg,rgba(2,7,15,.82) 0%,rgba(3,12,16,.66) 48%,rgba(8,24,18,.5) 100%),linear-gradient(135deg,rgba(164,232,33,.18),rgba(30,120,55,.08) 46%,rgba(255,255,255,0) 100%)}
  .service-hero-video{opacity:.62;filter:hue-rotate(-82deg) saturate(1.34) brightness(.74) contrast(1.06);object-position:56% center}
  .service-hero-media--consultoria::after{background:linear-gradient(180deg,rgba(2,7,15,.86) 0%,rgba(3,12,16,.7) 48%,rgba(8,24,18,.56) 100%),linear-gradient(135deg,rgba(164,232,33,.24),rgba(28,144,78,.1) 44%,rgba(255,255,255,0) 100%)}
  .service-hero-video--consultoria{opacity:.6;filter:hue-rotate(-76deg) saturate(1.22) brightness(.74) contrast(1.08);object-position:54% center}
  .service-hero-media--soluciones::after{background:linear-gradient(180deg,rgba(2,7,15,.84) 0%,rgba(3,12,16,.68) 48%,rgba(8,24,18,.54) 100%),linear-gradient(135deg,rgba(164,232,33,.2),rgba(34,142,84,.1) 44%,rgba(255,255,255,0) 100%)}
  .service-hero-video--soluciones{opacity:.6;filter:hue-rotate(-68deg) saturate(1.2) brightness(.72) contrast(1.08);object-position:54% center}
  .service-hero-media--soporte::after{background:linear-gradient(180deg,rgba(2,7,15,.84) 0%,rgba(3,12,16,.68) 48%,rgba(8,24,18,.54) 100%),linear-gradient(135deg,rgba(164,232,33,.2),rgba(26,132,78,.08) 44%,rgba(255,255,255,0) 100%)}
  .service-hero-video--soporte{opacity:.6;filter:hue-rotate(-72deg) saturate(1.12) brightness(.72) contrast(1.08);object-position:54% center}
  .service-hero-media--desarrollo::after{background:linear-gradient(180deg,rgba(2,7,15,.84) 0%,rgba(3,12,16,.68) 48%,rgba(8,24,18,.54) 100%),linear-gradient(135deg,rgba(164,232,33,.2),rgba(30,136,80,.08) 44%,rgba(255,255,255,0) 100%)}
  .service-hero-video--desarrollo{opacity:.6;filter:hue-rotate(-70deg) saturate(1.16) brightness(.72) contrast(1.08);object-position:54% center}
  .service-hero-media--ai::after{background:linear-gradient(180deg,rgba(2,7,15,.84) 0%,rgba(3,12,16,.68) 48%,rgba(8,24,18,.52) 100%),linear-gradient(135deg,rgba(164,232,33,.22),rgba(255,213,48,.08) 42%,rgba(32,155,82,.06) 100%)}
  .service-hero-media--ai::before{background:rgba(78,142,28,.38)}
  .service-hero-video--ai{opacity:.6;filter:hue-rotate(76deg) saturate(1.08) brightness(.72) contrast(1.08);object-position:54% center}
  .focus-hero-media::after{background:linear-gradient(180deg,rgba(2,10,8,.82) 0%,rgba(7,24,14,.72) 48%,rgba(3,15,12,.7) 100%),linear-gradient(135deg,rgba(164,232,33,.36),rgba(255,213,48,.12) 42%,rgba(10,40,24,.18) 100%)}
  .focus-hero-video{opacity:.24;object-position:center center}
  .about-hero-media::after{background:linear-gradient(180deg,rgba(2,8,8,.66) 0%,rgba(4,18,12,.54) 48%,rgba(3,12,14,.5) 100%),linear-gradient(135deg,rgba(164,232,33,.16),rgba(24,130,74,.1) 50%,rgba(4,20,16,.08) 100%)}
  .about-hero-video{opacity:.45;object-position:center center}
  .contact-hero-media::after{background:linear-gradient(180deg,rgba(2,8,10,.84) 0%,rgba(4,14,18,.68) 48%,rgba(5,16,14,.58) 100%),linear-gradient(135deg,rgba(164,232,33,.2),rgba(28,132,78,.08) 44%,rgba(255,255,255,0) 100%)}
  .contact-hero-video{opacity:.62;filter:hue-rotate(-70deg) saturate(1.18) brightness(.74) contrast(1.08);object-position:54% center}
  .mexico-hero-media::after{background:linear-gradient(180deg,rgba(2,8,10,.86) 0%,rgba(4,14,18,.7) 48%,rgba(5,16,14,.6) 100%),linear-gradient(135deg,rgba(164,232,33,.2),rgba(30,132,80,.08) 44%,rgba(255,255,255,0) 100%)}
  .mexico-hero-video{opacity:.64;filter:hue-rotate(-64deg) saturate(1.14) brightness(.76) contrast(1.08);object-position:54% center}
  .faq-hero-media::after{background:linear-gradient(180deg,rgba(2,8,10,.84) 0%,rgba(4,14,18,.68) 48%,rgba(5,16,14,.58) 100%),linear-gradient(135deg,rgba(164,232,33,.2),rgba(28,132,78,.08) 44%,rgba(255,255,255,0) 100%)}
  .faq-hero-video{opacity:.62;filter:hue-rotate(-70deg) saturate(1.18) brightness(.74) contrast(1.08);object-position:54% center}
  .about-hero-support{font-size:.95rem;line-height:1.48}
  .about-hero-scope{gap:.42rem;margin-top:.85rem}
  .about-hero-scope span{min-height:32px;padding:0 .62rem;font-size:.78rem}
  .blog-hero-media::after{background:linear-gradient(180deg,rgba(2,7,15,.84) 0%,rgba(4,12,20,.74) 48%,rgba(4,10,18,.72) 100%),linear-gradient(135deg,rgba(164,232,33,.12),rgba(31,94,255,.08) 50%,rgba(4,20,28,.12) 100%)}
  .blog-hero-support{font-size:.95rem;line-height:1.48}
  .blog-hero-scope{gap:.42rem;margin-top:.85rem}
  .blog-hero-scope span{min-height:32px;padding:0 .62rem;font-size:.78rem}
  .header{overflow:visible}
  .nav{position:relative;padding:.55rem 0}
  .brand img{height:58px}
  .nav-shell{position:relative}
  .nav-toggle{display:inline-flex}
  .nav-shell.is-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-shell.is-open .nav-toggle span:nth-child(2){opacity:0}
  .nav-shell.is-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-links{
    position:absolute;
    top:calc(100% + .7rem);
    right:0;
    left:auto;
    width:min(320px, calc(100vw - 2rem));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.2rem;
    padding:.7rem;
    border:1px solid rgba(196,207,224,.95);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 40px rgba(15,23,42,.16);
    backdrop-filter:blur(12px);
    flex-wrap:nowrap;
  }
  .nav-shell.is-open .nav-links{display:flex}
  .nav-links a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 .8rem;
    border-radius:12px;
  }
  .nav-links a::after{display:none}
  .nav-links a:hover{background:#f4f8ff}
  .lang{margin-left:0;padding-top:.25rem}
  .lang select{width:100%;min-height:46px}
}