/* LOOK LAB: independent sample styles, no external libraries or fonts. */
:root{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #b888ff;outline-offset:4px}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
.wrap{max-width:1430px;margin:auto;padding-inline:clamp(20px,5vw,82px)}
.skip-link{position:absolute;z-index:30;top:-70px;padding:15px;background:#fff}.skip-link:focus{top:0}
.look-sample{--purple:#6a35ed;--ink:#101229;--muted:#5c6179;--line:#dcd8e8;color:var(--ink);background:#faf9ff}
.page-shell{overflow:hidden}
.look-lab-bar{background:#170f29;color:#fff;padding:9px 4vw;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.05em}
.lab-label{font-weight:750;display:flex;align-items:center;gap:8px}.lab-pulse{background:#ab72ff;width:7px;height:7px;border-radius:50%}.lab-internal{color:#a89cb9;font-weight:400;margin-left:8px}
.lab-choices{display:flex;align-items:center;gap:6px}
.lab-choices a{padding:6px 10px;border-radius:22px;color:#cbc2d9}
.lab-choices a.chosen{background:#554277;color:#fff}.lab-choices a:hover{color:#fff}
.lab-choices .lab-original{margin-left:12px;border-left:1px solid #645279;border-radius:0;padding-left:18px}
.site-top{min-height:86px;display:flex;gap:25px;align-items:center;justify-content:space-between;position:relative;z-index:3}
.brand img{width:133px;height:auto}.nav-links{display:flex;gap:clamp(10px,2vw,29px)}.nav-links a{font-size:12px;font-weight:650;white-space:nowrap}
.nav-links a:hover{color:var(--purple)}.nav-contact{font-size:12px;font-weight:750;border-radius:30px;padding:13px 22px;background:var(--purple);color:white;white-space:nowrap}
.nav-contact span{margin-left:8px}
.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:800;line-height:1.7}.eyebrow-line{display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px}
.accent{color:var(--purple)}
.hero{position:relative}.hero-inner{position:relative;min-height:630px;display:flex;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:650px;padding-block:60px 110px}
.hero h1{font-size:clamp(50px,6.2vw,95px);line-height:1.01;letter-spacing:-.072em;font-weight:770;margin-top:28px}
.hero-description{font-size:clamp(15px,1.25vw,18px);line-height:1.65;max-width:460px;color:var(--muted);margin-top:29px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:20px;justify-content:center;padding:13px 22px;border-radius:30px;font-size:12px;font-weight:750;min-height:47px;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--purple);color:white}.btn-outline{border:1px solid #9485ad}.btn-white{background:white;color:#15102b}.btn-text{color:#fff}
.hero-art{position:absolute;pointer-events:none;overflow:hidden;inset:0 0 0 42%}
.hero-art-wave{position:absolute;inset:0;background:url('/assets/look-samples/mesh-light.svg') center/cover no-repeat}
.hero-art-slab{position:absolute;bottom:0;right:0}
.hero-art-slab.slab-one{height:60%;width:41%;clip-path:polygon(58% 0,100% 0,100% 100%,0 100%);background:linear-gradient(122deg,#c4c6d4,#646c81 46%,#2c314a)}
.hero-art-slab.slab-two{height:48%;width:32%;clip-path:polygon(100% 0,100% 100%,7% 100%);background:repeating-linear-gradient(90deg,transparent 0 25px,#ffffff14 27px),linear-gradient(120deg,#545e76,#141a34)}
.hero-art-mark{position:absolute;right:28px;top:28%;writing-mode:vertical-rl;letter-spacing:.2em;font-size:10px;line-height:1.7;color:#655b89}
.hero-art-index{position:absolute;right:28px;bottom:35px;font-size:10px;letter-spacing:.18em;color:#625984}
.theme-editorial .hero{background:radial-gradient(ellipse at 70% 45%,#dbc9ffad,transparent 54%),linear-gradient(120deg,#fbfaff,#efebfa)}
.theme-editorial .hero-copy{max-width:640px}
.section-header{margin-bottom:35px}.section-header h2{font-size:clamp(32px,3.3vw,52px);line-height:1.12;letter-spacing:-.06em;margin-top:14px}
.section-header-inline{display:flex;align-items:end;justify-content:space-between;gap:45px}
.section-header-inline>p{max-width:360px;font-size:14px;line-height:1.7;color:var(--muted);padding-bottom:6px}
.problems{padding-block:80px 88px}.problem-list{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.problem{border-right:1px solid var(--line);padding:26px 24px 35px}.problem:first-child{padding-left:0}.problem:last-child{border:0}
.problem>span{display:block;color:var(--purple);font-size:12px;font-weight:800;margin-bottom:32px}
.problem strong{font-size:18px;letter-spacing:-.035em}.problem p{color:var(--muted);font-size:13px;line-height:1.55;margin-top:9px}
.solutions{padding-block:82px 99px;background:#f0eef8}
.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.solution{border-right:1px solid var(--line);padding:30px 24px;display:flex;flex-direction:column;transition:background .2s}
.solution:first-child{padding-left:0}.solution:last-child{border:0}.solution:hover{background:#fff}
.solution-icon{font-size:45px;color:var(--purple);font-weight:300}.solution-num{font-size:10px;color:#948fa6;letter-spacing:.1em;margin-top:12px}
.solution h3{font-size:18px;letter-spacing:-.045em;margin-top:27px}.solution p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:10px;flex:1}
.text-arrow{font-size:12px;font-weight:800;color:var(--purple);margin-top:29px}
.statement{position:relative;background:#0c0b21;color:#fff;overflow:hidden}
.statement::before{content:"";position:absolute;inset:0;opacity:.32;background:url('/assets/look-samples/mesh-dark.svg') center/cover}
.statement-inner{position:relative;z-index:1;min-height:420px;display:flex;align-items:center;justify-content:space-between;gap:50px;padding-block:65px}
.statement h2{font-size:clamp(35px,4.4vw,65px);letter-spacing:-.065em;line-height:1.12;margin-top:18px}
.statement h2 em{font-style:normal;color:#ba91ff}.outcome-list{list-style:none;margin:0;padding:0;width:34%;min-width:270px}
.outcome-list li{padding:16px 0;border-bottom:1px solid #8e77ba55;font-size:14px}
.outcome-list li:before{content:"—";color:#ac7cff;margin-right:10px}
.industry-block{padding-block:88px 105px}.industries{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.industries>a{background:#f1eff9;border:1px solid #e4e1ec;position:relative}
.industries img{width:100%;height:180px;padding:17px;object-fit:contain;background:#e7e4f6}
.industries span{display:block;font-size:13px;font-weight:750;padding:17px 32px 19px 15px}
.industries b{position:absolute;right:16px;bottom:17px;color:var(--purple)}
.closing{position:relative;overflow:hidden}.editorial-closing{background:radial-gradient(ellipse at 70% 130%,#9550ff,transparent 48%),linear-gradient(110deg,#1b0b55,#54219e);color:#fff}
.closing-inner{min-height:285px;padding-block:62px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.closing h2{font-size:clamp(35px,3.9vw,56px);letter-spacing:-.055em;margin-top:14px}
.closing p:not(.eyebrow){font-size:14px;line-height:1.6;max-width:520px;margin-top:12px;color:#ded1f5}
.sample-footer{padding-block:26px;display:flex;gap:20px;flex-wrap:wrap;color:#8e8aa4;font-size:11px}
.sample-footer a{color:var(--purple);font-weight:750}.sample-footer a:first-of-type{margin-left:auto}
/* Variant 03 — abstract, architectural, conversion-led. */
.theme-comercial{--purple:#a77bff;--muted:#706e86;background:#fff}
.theme-comercial .site-top{max-width:none;padding-inline:max(5vw,calc((100vw - 1430px)/2 + 82px));background:#080a1b;color:#fff}
.theme-comercial .nav-contact{background:#fff;color:#160e33}
.hero-comercial{background:radial-gradient(ellipse at 66% 87%,#872bb6 0%,#361258 30%,transparent 60%),linear-gradient(110deg,#080b1d,#150a36 75%,#0a0b1d);color:white}
.theme-comercial .hero-description{color:#d4cbe1}
.theme-comercial .hero h1{font-size:clamp(52px,6.3vw,98px)}
.theme-comercial .hero .accent{color:#cba1ff}
.theme-comercial .hero-art{left:43%}
.theme-comercial .hero-art-wave{background-image:url('/assets/look-samples/mesh-dark.svg');opacity:.8}
.theme-comercial .hero-art-slab.slab-one{height:88%;width:60%;clip-path:polygon(70% 0,100% 0,100% 100%,18% 100%);background:linear-gradient(145deg,#c1b5d0,#49506b 35%,#12192c 80%)}
.theme-comercial .hero-art-slab.slab-two{height:60%;width:44%;background:repeating-linear-gradient(95deg,transparent 0 22px,#ffffff12 24px),linear-gradient(120deg,#505e78,#11182d)}
.theme-comercial .hero-art-mark{color:#fff}
.benefits{background:#f6f5fb;color:#141028;padding-block:52px}
.benefits-inner{display:grid;grid-template-columns:1.9fr repeat(4,1fr);gap:0;align-items:center}
.benefits .eyebrow{color:#7034b7}.benefits h2{font-size:clamp(26px,2.5vw,37px);line-height:1.15;letter-spacing:-.05em;margin-top:12px}
.benefit{font-size:14px;line-height:1.35;border-left:1px solid #ccc4dd;min-height:70px;padding:13px 16px;font-weight:700}
.benefit span{display:block;font-size:10px;color:#7841bd;margin-bottom:13px}
.commercial-problems{padding-block:85px 67px;background:#fff;max-width:none;padding-inline:max(5vw,calc((100vw - 1430px)/2 + 82px))}
.commercial-problems .eyebrow{color:#7939cd}
.commercial-cases{background:#eeeef5}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.case{position:relative;min-height:400px;color:#fff;overflow:hidden;background:#19192c}
.case-visual,.case::after{position:absolute;inset:0}.case-visual img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.75);transition:transform .4s}
.case:hover .case-visual img{transform:scale(1.045)}
.case::after{content:"";background:linear-gradient(0deg,#0a0921f5,transparent 90%);pointer-events:none}
.case:nth-child(2)::after{background:linear-gradient(0deg,#201052ed,#05092244 92%)}
.case-copy{position:absolute;z-index:1;inset:auto 25px 30px}
.case-copy small{font-size:10px;letter-spacing:.16em;color:#dcc5ff}
.case-copy h3{font-size:clamp(29px,2.6vw,40px);line-height:1.13;letter-spacing:-.05em;margin:12px 0 27px}
.case-copy span{font-size:12px;font-weight:750}
.process{background:#f8f7fd;padding-block:90px 97px}
.process .eyebrow{color:#7442c8}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d9d4e5;margin-top:48px}
.process-grid>div{border-right:1px solid #d9d4e5;padding:23px 23px 0}
.process-grid>div:first-child{padding-left:0}.process-grid>div:last-child{border:0}
.process-grid span{color:#7a4ed1;font-size:12px;font-weight:750;display:block;margin-bottom:46px}
.process-grid h3{font-size:18px;letter-spacing:-.035em}.process-grid p{font-size:13px;color:#66637a;line-height:1.65;margin-top:11px}
.commercial-closing{background:radial-gradient(ellipse at 70% 10%,#7d3cd584,transparent 48%),linear-gradient(110deg,#070b20,#230d56 72%,#050a1a);color:#fff}
.commercial-closing::before{content:"";position:absolute;inset:0;opacity:.22;background:url('/assets/look-samples/mesh-dark.svg') center/cover}
.commercial-closing .closing-inner{position:relative;min-height:375px}
.commercial-closing h2{font-size:clamp(40px,4.5vw,65px)}
.commercial-closing .btn{margin-top:25px}
.closing-signature{font-size:11px;letter-spacing:.12em;color:#dfcffa;padding:18px 0 10px 30px;border-left:1px solid #9477b3;display:grid;gap:10px;align-self:end}
.closing-signature span:first-child{font-size:20px;font-weight:800}
.theme-comercial .sample-footer{background:#080a1b;max-width:none;padding-inline:max(5vw,calc((100vw - 1430px)/2 + 82px));color:#b3a6c9}
.theme-comercial .sample-footer a{color:#dfc3ff}
/* Comparison / index */
.compare-page{background:#f2f0f7;color:#15122f}
.compare-top{padding:25px 30px;background:#171126;color:#fff;display:flex;gap:27px;align-items:center}
.compare-brand{font-size:24px;font-weight:800;letter-spacing:-.06em}.compare-brand span{color:#a47afa}
.compare-top>div{margin-left:20px}.compare-top strong{font-size:17px}.compare-top p{font-size:12px;color:#c3b7d0;margin-top:5px}
.compare-back{margin-left:auto;border:1px solid #7e718c;padding:12px 18px;border-radius:25px;font-size:12px}
.compare-main{padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:23px;margin:auto;max-width:1800px}
.compare-card{background:#fff;overflow:hidden;border-radius:10px;box-shadow:0 5px 28px #11112812}
.compare-heading{padding:23px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.compare-heading span{font-size:10px;font-weight:850;letter-spacing:.13em;color:#6c33d8}
.compare-heading h1{font-size:24px;letter-spacing:-.05em;margin:5px 0}
.compare-heading p{font-size:12px;color:#77738c}
.compare-heading>a{border-radius:25px;background:#241051;color:#fff;font-size:12px;font-weight:750;padding:12px 16px;white-space:nowrap}
.compare-frame{position:relative;display:block;height:calc(100vh - 235px);min-height:420px;overflow:hidden}
.compare-frame iframe{width:100%;height:100%;border:0;pointer-events:none}
.compare-frame::after{content:"";position:absolute;inset:0;cursor:pointer}
.compare-bottom{padding:10px 18px 30px;text-align:center;font-size:12px;color:#79718b}
@media(max-width:1060px){
.nav-links{gap:11px}.nav-links a{font-size:11px}
.hero-art{left:49%}.hero-copy{max-width:58%}.hero h1{font-size:clamp(51px,6vw,77px)}
.theme-comercial .hero-art{left:48%}
.benefits-inner{grid-template-columns:repeat(4,1fr)}
.benefits-inner>div:first-child{grid-column:1/-1;margin-bottom:22px}
.solution{padding-inline:15px}
}
@media(max-width:760px){
.look-lab-bar{padding:9px 12px;flex-wrap:wrap;gap:7px}.lab-internal{display:none}
.lab-choices a{font-size:10px;padding:5px 7px}
.site-top{min-height:70px}.brand img{width:112px}.nav-links{display:none}
.nav-contact{font-size:11px;padding:11px}
.theme-comercial .site-top{padding-inline:20px}
.hero-inner{min-height:700px;align-items:start}
.hero-copy{width:100%;max-width:none;padding-top:70px;padding-bottom:290px}
.hero h1,.theme-comercial .hero h1{font-size:clamp(52px,10.8vw,76px)}
.hero-description{font-size:15px}
.hero-art,.theme-comercial .hero-art{inset:48% 0 0 0;opacity:.6}
.hero-art-mark{display:none}
.hero-art-slab.slab-one{height:50%}
.section-header-inline{display:block}
.section-header-inline>p{margin-top:18px}
.problems,.solutions,.industry-block,.process{padding-block:62px}
.problem-list,.solution-grid,.industries,.process-grid{grid-template-columns:repeat(2,1fr)}
.problem,.solution{padding:19px 14px;border-bottom:1px solid var(--line)}
.problem:nth-child(2),.solution:nth-child(2){border-right:0}
.problem:nth-child(3),.problem:nth-child(4),.solution:nth-child(3),.solution:nth-child(4){border-bottom:0}
.problem:first-child,.solution:first-child{padding-left:14px}
.statement-inner{display:block;min-height:0}.outcome-list{margin-top:35px;min-width:0;width:100%}
.closing-inner{display:block}.closing .btn{margin-top:26px}
.benefits-inner{grid-template-columns:repeat(2,1fr)}
.benefits-inner>div:first-child{grid-column:1/-1}
.commercial-problems{padding-inline:20px}
.case-grid{display:block}.case{min-height:330px}
.process-grid>div{padding:22px 14px;border-bottom:1px solid var(--line)}
.process-grid>div:nth-child(2){border-right:0}.process-grid>div:first-child{padding-left:14px}
.closing-signature{display:none}
.sample-footer a:first-of-type{margin-left:0}
.compare-top{flex-wrap:wrap}.compare-top>div{margin-left:0}.compare-back{margin-left:0}
.compare-main{grid-template-columns:1fr;padding:12px}.compare-frame{height:350px;min-height:0}
}
@media(max-width:400px){.lab-choices .lab-original{display:none}.btn{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Sticky navigation is intentionally limited to the approved commercial
   sample. overflow:clip prevents the sample shell from becoming a scroll
   container, which would otherwise disable position:sticky. */
.theme-comercial .page-shell{overflow:clip}
.theme-comercial .site-top{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(176,138,255,.15);
  box-shadow:0 8px 24px rgba(4,5,20,.13);
}
.theme-comercial #soluciones,
.theme-comercial #industrias{scroll-margin-top:95px}
@media(max-width:760px){
  .theme-comercial #soluciones,
  .theme-comercial #industrias{scroll-margin-top:77px}
}

/* 03 commercial base — 5 distinct service pillars, without changing
   the approved hero or architectural layout. */
.commercial-cases-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:48px;
  padding-block:58px 36px;
}
.commercial-cases-heading .eyebrow{color:#7040b2}
.commercial-cases-heading h2{
  font-size:clamp(30px,3.15vw,48px);
  font-weight:750;
  line-height:1.12;
  letter-spacing:-.06em;
  margin-top:14px;
}
.theme-comercial .commercial-cases-heading .accent{color:#7439da}
.commercial-cases-heading>p{
  font-size:14px;
  line-height:1.7;
  color:#615c78;
  max-width:355px;
}
.commercial-cases .case-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.commercial-cases .case{grid-column:span 2;min-height:370px}
.commercial-cases .case--wide{grid-column:span 3;min-height:320px}
.commercial-cases .case--wide .case-copy{max-width:470px}
.commercial-cases .case-copy p{
  color:#e4dfee;
  font-size:13px;
  line-height:1.6;
  margin-top:-12px;
  margin-bottom:21px;
  max-width:390px;
}
.commercial-cases .case-copy h3{font-size:clamp(26px,2.3vw,38px)}
.commercial-cases .case--wide .case-copy h3{font-size:clamp(29px,2.6vw,42px)}
@media(max-width:1050px){
  .commercial-cases-heading{align-items:start}
  .commercial-cases .case{min-height:340px}
  .commercial-cases .case--wide{min-height:340px}
}
@media(max-width:760px){
  .commercial-cases-heading{display:block;padding-block:46px 25px}
  .commercial-cases-heading>p{margin-top:17px}
  .commercial-cases .case-grid{display:block}
  .commercial-cases .case,.commercial-cases .case--wide{display:block;min-height:320px}
  .commercial-cases .case-copy h3,.commercial-cases .case--wide .case-copy h3{font-size:31px}
}


/* Commercial sample: existing ZopiTech clients, quietly displayed in
   grayscale without cards or fabricated business metrics. */
.theme-comercial .client-proof{
  background:#fff;
  color:#16142e;
  border-top:1px solid #e6e1ee;
  border-bottom:1px solid #e6e1ee;
  padding-block:46px 52px;
}
/* About ZopiTech: an editorial introduction alongside the real client
   gallery. Written directly in home.blade.php in ES/EN, with no fake metrics. */
.theme-comercial .about-company{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:start;
  gap:clamp(26px,5vw,86px);
  padding:5px 0 35px;
  margin:0 0 30px;
  border-bottom:1px solid rgba(111,80,163,.20);
}
.theme-comercial .about-company__heading .eyebrow{
  margin:0 0 15px;
  color:#6A35C4;
}
.theme-comercial .about-company__heading h2{
  margin:0;
  font-size:clamp(27px,3vw,40px);
  font-weight:770;
  line-height:1.15;
  letter-spacing:-.052em;
  color:#1A1530;
}
.theme-comercial .about-company__heading h2 span{color:#6934BA}
.theme-comercial .about-company__story{
  display:grid;
  gap:15px;
  max-width:610px;
  padding-top:10px;
}
.theme-comercial .about-company__story p{
  margin:0;
  font-size:clamp(13px,1vw,15px);
  line-height:1.76;
  color:#514A64;
}
.theme-comercial .about-company__story p:first-child{
  font-weight:550;
  color:#342C49;
}
.theme-comercial .client-proof{scroll-margin-top:20px}
@media(max-width:760px){
  .theme-comercial .about-company{
    display:block;
    padding-bottom:28px;
    margin-bottom:24px;
  }
  .theme-comercial .about-company__heading h2{
    font-size:clamp(27px,7vw,35px);
  }
  .theme-comercial .about-company__story{
    gap:12px;
    padding-top:18px;
  }
  .theme-comercial .about-company__story p{
    font-size:14px;
    line-height:1.7;
  }
}
.client-proof-heading{
  display:grid;
  grid-template-columns:1fr 1.65fr 1.3fr;
  align-items:baseline;
  gap:22px;
  padding-bottom:25px;
  border-bottom:1px solid #e4e0ea;
}
.client-proof-heading .eyebrow{color:#713cbf}
.client-proof-heading h2{font-size:clamp(20px,2vw,28px);font-weight:760;letter-spacing:-.046em}
.client-proof-heading>p:last-child{color:#68657a;font-size:13px;line-height:1.55}
.client-proof-logos{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:center;
  column-gap:24px;
  row-gap:22px;
  padding-top:27px;
}
.client-proof-logo{min-width:0;min-height:95px;display:flex;align-items:center;justify-content:center}
.client-proof-logo img{
  max-width:100%;
  max-height:69px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) saturate(0) contrast(.88);
  opacity:.65;
  transition:filter .22s ease,opacity .22s ease;
}
.client-proof-logo--seal img{max-height:87px}
.client-proof-logo:hover img{
  filter:grayscale(0) saturate(1) contrast(1);
  opacity:1;
}
@media(max-width:1050px){
  .client-proof-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 28px}
  .client-proof-heading{grid-template-columns:1fr 1.6fr}
  .client-proof-heading>p:last-child{grid-column:2}
}
@media(max-width:760px){
  .theme-comercial .client-proof{padding-block:40px}
  .client-proof-heading{display:block;padding-bottom:19px}
  .client-proof-heading h2{margin-top:9px}
  .client-proof-heading>p:last-child{margin-top:8px}
  .client-proof-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding-top:18px}
  .client-proof-logo{min-height:91px}
  .client-proof-logo img{max-height:61px}
  .client-proof-logo--seal img{max-height:82px}
}


/* Full-bleed cinematic background on the approved commercial HERO.
   Live-action footage stays under a deep branded veil, with all text above.
   The angular forms remain at low strength. */
.theme-comercial .hero-comercial{
  isolation:isolate;
  overflow:hidden;
}
.theme-comercial .hero-background-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
  z-index:0;
  opacity:.67;
  filter:grayscale(.48) saturate(.61) contrast(.91) brightness(.87) blur(.6px);
  pointer-events:none;
}
.theme-comercial .hero-comercial::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(6,8,24,.92) 0%,rgba(11,8,34,.77) 47%,rgba(19,6,44,.57) 100%),
    linear-gradient(0deg,rgba(8,7,25,.57),transparent 62%);
  pointer-events:none;
}
.theme-comercial .hero-comercial .hero-inner{z-index:2}
.theme-comercial .hero-comercial .hero-art{
  opacity:.26;
  mix-blend-mode:screen;
}
.theme-comercial .hero-comercial .hero-art-wave{opacity:.7}
.theme-comercial .hero-comercial .hero-art-slab{opacity:.4}
@media(max-width:760px), (prefers-reduced-motion:reduce){
  .theme-comercial .hero-background-video{display:none}
  .theme-comercial .hero-comercial .hero-art{
    opacity:.56;
    mix-blend-mode:normal;
  }
}

/* LOOK 03 / refined home — editorial composition, no neon or fake widgets.
   Preserve the original dark violet / big type / actual background footage. */
.theme-comercial .hero-comercial .hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(32px,4.3vw,72px);
  align-items:center;
  min-height:710px;
  padding-block:68px 85px;
}
.theme-comercial .hero-comercial .hero-copy{
  max-width:none;
  min-width:0;
  padding:18px 0 18px clamp(0px,1.4vw,22px);
}
.theme-comercial .hero-comercial h1{
  font-size:clamp(52px,5.25vw,78px);
  line-height:1.05;
  letter-spacing:-.073em;
  margin-top:26px;
}
.theme-comercial .hero-comercial .hero-description{
  max-width:510px;
  margin-top:30px;
  font-size:clamp(15px,1.13vw,17px);
  line-height:1.7;
}
.theme-comercial .hero-comercial .hero-actions{margin-top:29px}
.theme-comercial .hero-proofline{
  margin-top:52px;
  padding-top:23px;
  border-top:1px solid rgba(228,211,255,.21);
  color:#d6c9e4;
  font-size:11px;
  line-height:1.7;
  font-weight:650;
  letter-spacing:.06em;
}
.theme-comercial .hero-proofline span{padding-inline:8px;color:#9870ca}
/* The carousel is a single photographic editorial surface, not a
   collection of stacked cards. Existing imagery, not fabricated UI. */
.theme-comercial .capabilities-carousel{
  z-index:4;
  width:100%;
  min-width:0;
  align-self:center;
  color:#fff;
}
.theme-comercial .capabilities-carousel-stage{
  position:relative;
  height:clamp(370px,34vw,470px);
  border:1px solid rgba(210,189,239,.33);
  background:#111226;
  overflow:hidden;
}
.theme-comercial .capabilities-carousel-top{
  position:absolute;
  top:0;left:0;right:0;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:21px 23px;
  background:linear-gradient(180deg,rgba(7,8,25,.74),transparent);
}
.theme-comercial .capabilities-carousel-kicker{
  font-size:9px;
  font-weight:750;
  letter-spacing:.16em;
  color:#e2d6f5;
}
.theme-comercial .capabilities-carousel-top-actions{display:flex;align-items:center;gap:9px}
.theme-comercial .capabilities-carousel-top-actions [data-capability-count]{
  margin-right:15px;
  color:#ddd0f1;
  font-size:11px;
  letter-spacing:.08em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.theme-comercial .capabilities-carousel-top-actions button{
  width:34px;height:34px;
  display:grid;place-items:center;
  cursor:pointer;
  border:1px solid rgba(238,224,255,.36);
  border-radius:50%;
  color:#fff;
  background:rgba(12,11,37,.5);
  font-size:17px;
  line-height:1;
  transition:background .15s,border-color .15s;
}
.theme-comercial .capabilities-carousel-top-actions button:hover{
  background:rgba(114,66,172,.38);border-color:rgba(241,211,255,.74);
}
.theme-comercial .capabilities-carousel-slides,
.theme-comercial .capability-slide{position:absolute;inset:0}
.theme-comercial .capabilities-carousel-slides{margin:0;min-height:0}
.theme-comercial .capability-slide[hidden]{display:none!important}
.theme-comercial .capability-slide{overflow:hidden;background:#141128}
.theme-comercial .capability-slide-image{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.65) brightness(.79);
}
.theme-comercial .capability-slide::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,7,23,.98) 0%,rgba(9,9,30,.89) 24%,rgba(10,7,28,.5) 56%,rgba(8,10,24,.18) 100%);
  pointer-events:none;
}
.theme-comercial .capability-slide-content{
  position:absolute;
  z-index:2;
  left:clamp(22px,3vw,37px);
  right:clamp(22px,3vw,37px);
  bottom:clamp(22px,3vw,35px);
}
.theme-comercial .capability-tag{
  color:#d7b9ff;
  font-size:10px;
  font-weight:750;
  letter-spacing:.15em;
  line-height:1.6;
}
.theme-comercial .capability-slide h2{
  max-width:480px;
  margin-top:11px;
  font-size:clamp(27px,2.5vw,37px);
  line-height:1.1;
  letter-spacing:-.057em;
  font-weight:780;
}
.theme-comercial .capability-slide-description{
  max-width:425px;
  margin-top:13px;
  font-size:13px;
  line-height:1.63;
  color:#dbd4e6;
}
.theme-comercial .capability-slide-content a{
  display:inline-flex;align-items:center;gap:20px;
  margin-top:22px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(206,166,255,.76);
  color:#fff;font-size:12px;font-weight:750;
}
.theme-comercial .capability-slide-content a:hover{color:#d3b3ff}
.theme-comercial .capabilities-carousel-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-inline:1px solid rgba(210,189,239,.25);
  border-bottom:1px solid rgba(210,189,239,.25);
  background:rgba(9,9,30,.74);
}
.theme-comercial .capability-dot{
  position:relative;
  min-height:79px;
  width:auto;
  padding:19px 10px 15px 16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  border:0;
  border-right:1px solid rgba(210,189,239,.18);
  border-radius:0;
  color:#bdb3d0;
  background:transparent;
  opacity:1;
  text-align:left;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.theme-comercial .capability-dot:last-child{border-right:0}
.theme-comercial .capability-dot:before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:transparent;
  transition:background .2s;
}
.theme-comercial .capability-dot.is-active{
  color:#fff;
  background:rgba(95,52,132,.19);
}
.theme-comercial .capability-dot.is-active:before{background:#c49aff}
.theme-comercial .capability-dot:hover{color:#fff;background:rgba(103,62,156,.18)}
.theme-comercial .capability-dot-number{
  color:#ae87dc;
  font-size:10px;
  letter-spacing:.11em;
  font-variant-numeric:tabular-nums;
}
.theme-comercial .capability-dot-title{
  font-size:11px;
  font-weight:650;
  line-height:1.35;
}
.theme-comercial .capabilities-carousel button:focus-visible{
  outline:2px solid #d6b1ff;outline-offset:-4px;
}
/* The original photograph and violet veil continue BEHIND both columns. */
.theme-comercial .hero-comercial .hero-art{opacity:.18}
.theme-comercial .hero-comercial .hero-art-slab{opacity:.2}
@media(max-width:1190px){
  .theme-comercial .hero-comercial .hero-inner{
    grid-template-columns:minmax(0,1fr) minmax(380px,.97fr);
    gap:28px;min-height:650px;
  }
  .theme-comercial .hero-comercial h1{font-size:clamp(49px,5.1vw,68px)}
  .theme-comercial .hero-comercial .hero-copy{padding-left:0}
  .theme-comercial .hero-proofline{margin-top:38px}
  .theme-comercial .capability-dot{padding-left:12px}
}
@media(max-width:850px){
  .theme-comercial .hero-comercial .hero-inner{
    display:block;
    min-height:0;
    padding-block:64px 68px;
  }
  .theme-comercial .hero-comercial .hero-copy{max-width:690px;padding:0}
  .theme-comercial .hero-comercial h1{font-size:clamp(53px,7vw,77px)}
  .theme-comercial .hero-proofline{margin-top:34px}
  .theme-comercial .capabilities-carousel{
    max-width:690px;
    margin-top:53px;
  }
  .theme-comercial .capabilities-carousel-stage{height:450px}
  .theme-comercial .hero-comercial .hero-art{inset:26% 0 0 20%;opacity:.24}
}
@media(max-width:530px){
  .theme-comercial .hero-comercial .hero-inner{padding-block:52px 57px}
  .theme-comercial .hero-comercial h1{
    font-size:clamp(44px,9.8vw,61px);
    line-height:1.045;
    margin-top:23px;
  }
  .theme-comercial .hero-comercial .hero-description{margin-top:24px}
  .theme-comercial .hero-proofline{
    font-size:10px;
    margin-top:32px;
    padding-top:18px;
    letter-spacing:0;
  }
  .theme-comercial .hero-proofline span{padding-inline:4px}
  .theme-comercial .capabilities-carousel{margin-top:40px}
  .theme-comercial .capabilities-carousel-stage{height:420px}
  .theme-comercial .capabilities-carousel-top{padding:15px}
  .theme-comercial .capabilities-carousel-kicker{max-width:125px;font-size:8px;line-height:1.6}
  .theme-comercial .capabilities-carousel-top-actions [data-capability-count]{margin-right:2px;font-size:10px}
  .theme-comercial .capabilities-carousel-top-actions button{width:31px;height:31px}
  .theme-comercial .capability-slide-content{left:19px;right:19px;bottom:25px}
  .theme-comercial .capability-slide h2{font-size:30px}
  .theme-comercial .capability-slide-description{font-size:12px}
  .theme-comercial .capabilities-carousel-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  .theme-comercial .capability-dot{min-height:75px;padding:15px 5px 12px 8px}
  .theme-comercial .capability-dot-number{font-size:9px}
  .theme-comercial .capability-dot-title{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .theme-comercial .capability-dot,
  .theme-comercial .capability-dot:before,
  .theme-comercial .capabilities-carousel-top-actions button{transition:none}
}

/* The shared SVG symbol sprite was designed to be invisible in the
   main site's stylesheet. Keep it in the DOM for footer icons but ensure
   its default 300x150 SVG box cannot create a white band above the menu. */
.theme-comercial > .svg-sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}

/* LOOK 03: same live-site navigation destinations, still visually consistent
   with the approved sober/violet commercial hero. */
.theme-comercial .site-top{
  gap:clamp(12px,2vw,29px);
}
.theme-comercial .nav-links{
  display:flex;
  flex:1;
  justify-content:center;
  align-items:center;
  gap:clamp(11px,1.45vw,24px);
  min-width:0;
}
.theme-comercial .nav-links a{
  font-size:clamp(10px,.78vw,12px);
  letter-spacing:-.01em;
  color:#f2edf9;
  white-space:nowrap;
}
.theme-comercial .nav-links a:hover{color:#d4b8ff}
.theme-comercial .sample-nav-actions{
  display:flex;
  align-items:center;
  gap:clamp(10px,1vw,17px);
  flex:none;
}
.theme-comercial .sample-language-link{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  padding:8px;
  color:#eee6fb;
  border:1px solid rgba(222,201,255,.24);
}
.theme-comercial .sample-language-link:hover{background:rgba(178,125,252,.14)}
.theme-comercial .sample-menu-toggle{display:none}
@media(max-width:1180px){
  .theme-comercial .site-top{gap:16px}
  .theme-comercial .sample-menu-toggle{
    margin-left:auto;
    display:flex;
    flex:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    color:#fff;
    background:transparent;
    border:1px solid rgba(230,208,255,.36);
    cursor:pointer;
  }
  .theme-comercial .sample-menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:currentColor;
  }
  .theme-comercial .nav-links{
    display:none;
    position:absolute;
    z-index:60;
    top:100%;
    left:0;
    right:0;
    padding:16px max(20px,5vw) 22px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#0b0b20;
    border-bottom:1px solid rgba(222,201,255,.24);
    box-shadow:0 25px 32px rgba(0,0,0,.27);
  }
  .theme-comercial .nav-links.is-open{display:flex}
  .theme-comercial .nav-links a{
    font-size:14px;
    padding:12px 10px;
    border-bottom:1px solid rgba(219,197,255,.1);
  }
  .theme-comercial .nav-links a:last-child{border-bottom:0}
}
@media(max-width:530px){
  .theme-comercial .site-top{gap:10px}
  .theme-comercial .brand img{width:112px}
  .theme-comercial .sample-menu-toggle{width:38px;height:38px}
  .theme-comercial .sample-nav-actions{gap:8px}
  .theme-comercial .sample-language-link{font-size:10px;padding:7px 5px}
  .theme-comercial .nav-contact{font-size:10px;padding:10px 11px}
  .theme-comercial .nav-contact span{display:none}
}

/* The actual shared production footer partial is rendered here. Only
   presentation is themed. Names, links, legal copy, contact and social
   handles are read from the SAME global CMS content. */
.theme-comercial .footer{
  position:relative;
  z-index:1;
  background:linear-gradient(160deg,#080b20,#131027 70%,#080c22);
  color:#fff;
  padding:66px 0 24px;
  border-top:1px solid rgba(168,133,219,.26);
}
.theme-comercial .footer .shell{
  max-width:1430px;
  margin:auto;
  padding-inline:clamp(20px,5vw,82px);
}
.theme-comercial .footer__grid{
  display:grid;
  grid-template-columns:minmax(190px,1.35fr) repeat(4,minmax(0,1fr));
  column-gap:clamp(15px,3.1vw,50px);
  row-gap:42px;
}
.theme-comercial .footer__grid>div:not(.footer__about){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.theme-comercial .footer .brand--footer{display:inline-block}
.theme-comercial .footer .brand--footer .brand__image{
  display:block;width:160px;max-width:100%;height:auto;
}
.theme-comercial .footer__about>p{
  max-width:240px;
  font-size:12px;
  line-height:1.7;
  margin:18px 0 19px;
  color:#c6bddb;
}
.theme-comercial .footer h3{
  color:#fff;
  margin:0 0 16px;
  font-size:12px;
  font-weight:750;
  letter-spacing:.02em;
}
.theme-comercial .footer__grid a,
.theme-comercial .footer__grid p.contact,
.theme-comercial .footer__bottom a{
  color:#cfc9dc;
  font-size:11.5px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.theme-comercial .footer__grid>div:not(.footer__about)>a:not(.contact-link){
  margin-bottom:10px;
}
.theme-comercial .footer a:hover{color:#fff}
.theme-comercial .footer .social{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.theme-comercial .footer .social a{
  width:29px;height:29px;
  display:grid;place-items:center;
  background:rgba(214,190,255,.13);
  color:#eee2ff;
  border:1px solid rgba(214,190,255,.23);
  border-radius:50%;
}
.theme-comercial .footer .social a:hover{background:rgba(214,190,255,.25)}
.theme-comercial .footer .social svg,
.theme-comercial .footer .contact svg{
  width:15px;height:15px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
}
.theme-comercial .footer .contact{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 13px;
}
.theme-comercial .footer .contact svg{flex:none;margin-top:3px}
.theme-comercial .footer .contact-link--whatsapp{
  display:flex;align-items:center;gap:10px;margin-top:5px;
  padding:12px 11px;
  width:100%;
  border:1px solid rgba(107,194,157,.22);
  background:rgba(24,113,80,.15);
  color:#fff;
}
.theme-comercial .footer .contact-link--whatsapp svg{
  width:22px;height:22px;flex:none;
}
.theme-comercial .footer .contact-link--whatsapp span{
  display:flex;flex-direction:column;gap:4px;
}
.theme-comercial .footer .contact-link--whatsapp strong{font-size:12px}
.theme-comercial .footer .contact-link--whatsapp small{font-size:11px;color:#b6dfcb}
.theme-comercial .footer-cookie-button{
  font:inherit;
  text-align:left;
  cursor:pointer;
  border:0;padding:0;
  background:transparent;
  color:#cfc9dc;
  font-size:11.5px;
  line-height:1.75;
}
.theme-comercial .footer-cookie-button:hover{color:#fff}
.theme-comercial .footer__bottom{
  margin-top:51px;
  padding-top:22px;
  border-top:1px solid rgba(200,170,255,.2);
  color:#aeb0c1;
  font-size:10px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
}
.theme-comercial .footer__bottom div{
  display:flex;align-items:center;gap:25px;flex-wrap:wrap;
}
.theme-comercial .footer__bottom a,
.theme-comercial .footer__bottom button{font-size:10px}
.theme-comercial .whatsapp-float{
  position:fixed;
  z-index:45;
  right:19px;bottom:19px;
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;
  color:#fff;
  background:#126848;
  border:1px solid #52bb87;
  border-radius:24px;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  font-size:11px;
}
.theme-comercial .whatsapp-float svg{
  display:block;width:21px;height:21px;
  fill:none;stroke:currentColor;stroke-width:1.8;
}
.theme-comercial .whatsapp-float span{display:flex;flex-direction:column;gap:3px}
.theme-comercial .whatsapp-float small{font-size:10px}
@media(max-width:1120px){
  .theme-comercial .footer__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:38px;
  }
}
@media(max-width:700px){
  .theme-comercial .footer{padding:46px 0 23px}
  .theme-comercial .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .theme-comercial .footer__about{grid-column:1/-1}
  .theme-comercial .footer__about>p{max-width:490px}
  .theme-comercial .footer__bottom{display:block;margin-top:35px}
  .theme-comercial .footer__bottom div{margin-top:13px;gap:16px}
  .theme-comercial .whatsapp-float span{display:none}
  .theme-comercial .whatsapp-float{padding:12px}
}
@media(max-width:420px){
  .theme-comercial .footer__grid{grid-template-columns:1fr;gap:28px}
  .theme-comercial .footer__about{grid-column:1}
}

/* TYPOGRAPHY EXPERIMENT: match the font-size hierarchy of the live ZopiTech
   home (/), while preserving LOOK 03 geometry, spacing, backgrounds and video.
   Measured in Chrome at 1440 / 1024 / 390 px on 2026-10-23. */
.theme-comercial .site-top .nav-links a{
  font-size:clamp(11.5px,.91vw,13px);
  font-weight:700;
}
.theme-comercial .site-top .nav-contact{
  font-size:13px;
  font-weight:700;
}
.theme-comercial .hero-comercial h1{
  font-size:48px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-2.5px;
}
.theme-comercial .hero-comercial .hero-description{
  font-size:16px;
  line-height:1.75;
}
.theme-comercial .hero-comercial .hero-actions .btn{
  font-size:13px;
  font-weight:700;
}
.theme-comercial .capability-slide h2{
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.7px;
}
.theme-comercial .capability-slide-description{font-size:13px}
.theme-comercial .benefits h2{
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.5px;
}
.theme-comercial .client-proof-heading h2{
  font-size:21px;
  letter-spacing:-.5px;
}
.theme-comercial .commercial-problems h2,
.theme-comercial .commercial-cases-heading h2,
.theme-comercial .process h2{
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.7px;
}
.theme-comercial .commercial-cases .case-copy h3,
.theme-comercial .commercial-cases .case--wide .case-copy h3{
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.25px;
}
.theme-comercial .commercial-closing h2{
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.6px;
}
.theme-comercial .footer__grid a,
.theme-comercial .footer__grid p.contact,
.theme-comercial .footer__bottom a,
.theme-comercial .footer-cookie-button{font-size:11px}
@media(max-width:850px){
  .theme-comercial .hero-comercial h1{font-size:clamp(36px,5.7vw,48px)}
}
@media(max-width:530px){
  .theme-comercial .hero-comercial h1{
    font-size:36px;
    letter-spacing:-1.7px;
  }
  .theme-comercial .hero-comercial .hero-description{
    font-size:14px;
    line-height:1.75;
  }
  .theme-comercial .hero-comercial .hero-actions .btn{font-size:13px}
  .theme-comercial .site-top .nav-contact{font-size:10px}
  .theme-comercial .capability-slide h2{font-size:21px}
  .theme-comercial .benefits h2,
  .theme-comercial .commercial-problems h2,
  .theme-comercial .commercial-cases-heading h2,
  .theme-comercial .process h2{font-size:23px}
  .theme-comercial .commercial-cases .case-copy h3,
  .theme-comercial .commercial-cases .case--wide .case-copy h3{font-size:18px}
  .theme-comercial .commercial-closing h2{font-size:27px}
}

/* Commercial navigation, same left anchor as the old site's header.
   Keep the existing responsive menu behavior below 1181px. */
@media(min-width:1181px){
  .theme-comercial .site-top{
    justify-content:flex-start;
    gap:clamp(12px,1.4vw,22px);
  }
  .theme-comercial .nav-links{
    flex:0 1 auto;
    justify-content:flex-start;
    margin-left:clamp(0px,.7vw,12px);
    gap:clamp(11px,1.3vw,20px);
  }
  .theme-comercial .sample-nav-actions{margin-left:auto}
}
.theme-comercial .capability-slide:nth-child(2) .capability-slide-image{
  object-position:center 40%;
  filter:saturate(.82) brightness(.85);
}

/* ──────────────────────────────────────────────────────────────────
   ZOPITECH BRAND PALETTE LAB — 36 archived studies, local commercial view.
   Approved final for this home: 29 Violeta futurista (not a production deploy).
   JS changes only CSS variables on the preview body, never the CMS/site.
   ────────────────────────────────────────────────────────────────── */
.theme-comercial{
  --p-night:#0B0A17;--p-mid:#2A1D46;--p-glow:#6E39E7;
  --p-accent:#7F4DF5;--p-accent-soft:#CDBBFF;--p-accent-deep:#5728C0;
  --p-paper:#F8F5FF;--p-paper2:#EDE8FC;--p-canvas:#FFFFFF;
  --p-footer:#110E22;--p-ink:#22193A;
  background:var(--p-canvas);
  color:var(--p-ink);
}
/* Whole first screen: masthead, video color veil, headline and CTA. */
.theme-comercial .site-top{background:var(--p-night)}
.theme-comercial .nav-links a:hover{color:var(--p-accent-soft)}
.theme-comercial .sample-language-link:hover{background:color-mix(in srgb,var(--p-accent),transparent 87%)}
.theme-comercial .hero-comercial{
  background:
    radial-gradient(ellipse at 65% 87%,color-mix(in srgb,var(--p-glow),transparent 10%),var(--p-mid) 35%,transparent 64%),
    linear-gradient(110deg,var(--p-night),var(--p-mid) 73%,var(--p-night));
}
.theme-comercial .hero-comercial::before{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--p-night) 92%,transparent) 0%,
      color-mix(in srgb,var(--p-night) 76%,transparent) 47%,
      color-mix(in srgb,var(--p-mid) 59%,transparent) 100%),
    linear-gradient(0deg,color-mix(in srgb,var(--p-night) 48%,transparent),transparent 62%);
}
.theme-comercial .hero .accent,
.theme-comercial .hero-proofline span{color:var(--p-accent-soft)}
.theme-comercial .hero-art-wave{
  filter:hue-rotate(var(--p-wave-rotation,0deg));
}
.theme-comercial .hero-art-slab.slab-one{
  background:linear-gradient(145deg,color-mix(in srgb,var(--p-accent-soft) 55%,#bbbcc6),
    color-mix(in srgb,var(--p-mid) 65%,#49506b) 35%,var(--p-night) 80%);
}
.theme-comercial .hero-art-slab.slab-two{
  background:repeating-linear-gradient(95deg,transparent 0 22px,#ffffff12 24px),
    linear-gradient(120deg,color-mix(in srgb,var(--p-mid) 55%,#505e78),var(--p-night));
}
.theme-comercial .capabilities-carousel-stage{
  background:var(--p-night);
  border-color:color-mix(in srgb,var(--p-accent-soft) 36%,transparent);
}
.theme-comercial .capabilities-carousel-top{
  background:linear-gradient(180deg,color-mix(in srgb,var(--p-night) 78%,transparent),transparent);
}
.theme-comercial .capabilities-carousel-top-actions button{
  background:color-mix(in srgb,var(--p-night) 65%,transparent);
  border-color:color-mix(in srgb,var(--p-accent-soft) 36%,transparent);
}
.theme-comercial .capabilities-carousel-top-actions button:hover{
  background:color-mix(in srgb,var(--p-accent) 32%,transparent);
}
.theme-comercial .capability-slide{background:var(--p-night)}
.theme-comercial .capability-slide::after{
  background:linear-gradient(0deg,
    color-mix(in srgb,var(--p-night) 98%,transparent),
    color-mix(in srgb,var(--p-night) 87%,transparent) 24%,
    color-mix(in srgb,var(--p-night) 49%,transparent) 56%,
    color-mix(in srgb,var(--p-night) 18%,transparent));
}
.theme-comercial .capability-tag,
.theme-comercial .capability-slide-content a:hover{color:var(--p-accent-soft)}
.theme-comercial .capability-slide-content a{
  border-bottom-color:color-mix(in srgb,var(--p-accent-soft) 75%,transparent);
}
.theme-comercial .capabilities-carousel-nav{
  background:color-mix(in srgb,var(--p-night) 85%,transparent);
  border-color:color-mix(in srgb,var(--p-accent-soft) 25%,transparent);
}
.theme-comercial .capability-dot{
  border-right-color:color-mix(in srgb,var(--p-accent-soft) 16%,transparent);
}
.theme-comercial .capability-dot-number{color:var(--p-accent-soft)}
.theme-comercial .capability-dot.is-active{
  background:color-mix(in srgb,var(--p-accent) 17%,transparent);
}
.theme-comercial .capability-dot.is-active::before{background:var(--p-accent-soft)}
.theme-comercial .capability-dot:hover{
  background:color-mix(in srgb,var(--p-accent) 19%,transparent);
}
/* The scrollable landing sections are recolored as a cohesive whole. */
.theme-comercial .benefits,
.theme-comercial .process{
  background:var(--p-paper);
  color:var(--p-ink);
}
.theme-comercial .benefits .eyebrow,
.theme-comercial .process .eyebrow,
.theme-comercial .commercial-problems .eyebrow,
.theme-comercial .client-proof-heading .eyebrow,
.theme-comercial .commercial-cases-heading .eyebrow{
  color:var(--p-accent-deep);
}
.theme-comercial .benefit{border-left-color:color-mix(in srgb,var(--p-accent) 25%,#ccc)}
.theme-comercial .benefit span,
.theme-comercial .process-grid span{color:var(--p-accent-deep)}
.theme-comercial .client-proof{
  background:var(--p-canvas);
  color:var(--p-ink);
  border-color:color-mix(in srgb,var(--p-accent) 14%,#e6e1ee);
}
.theme-comercial .client-proof-heading{
  border-bottom-color:color-mix(in srgb,var(--p-accent) 16%,#e4e0ea);
}
.theme-comercial .commercial-problems,
.theme-comercial .commercial-problems.wrap{
  background:var(--p-canvas);
  color:var(--p-ink);
}
.theme-comercial .commercial-cases{
  background:var(--p-paper2);
  color:var(--p-ink);
}
.theme-comercial .commercial-cases-heading .accent{color:var(--p-accent-deep)}
.theme-comercial .case::after{
  background:linear-gradient(0deg,color-mix(in srgb,var(--p-night) 93%,transparent),transparent 90%);
}
.theme-comercial .case:nth-child(2)::after{
  background:linear-gradient(0deg,color-mix(in srgb,var(--p-mid) 90%,transparent),color-mix(in srgb,var(--p-night) 26%,transparent) 92%);
}
.theme-comercial .case-copy small{color:var(--p-accent-soft)}
.theme-comercial .process-grid,
.theme-comercial .process-grid>div{
  border-color:color-mix(in srgb,var(--p-accent) 22%,#d9d4e5);
}
.theme-comercial .commercial-closing{
  background:radial-gradient(ellipse at 70% 10%,color-mix(in srgb,var(--p-glow) 49%,transparent),transparent 48%),
    linear-gradient(110deg,var(--p-night),var(--p-mid) 72%,var(--p-night));
}
.theme-comercial .closing-signature{
  color:var(--p-accent-soft);
  border-left-color:var(--p-accent);
}
.theme-comercial .footer{
  background:linear-gradient(160deg,var(--p-footer),var(--p-mid) 70%,var(--p-footer));
  border-top-color:color-mix(in srgb,var(--p-accent-soft) 26%,transparent);
}
.theme-comercial .footer .social a{
  color:var(--p-accent-soft);
  background:color-mix(in srgb,var(--p-accent) 13%,transparent);
  border-color:color-mix(in srgb,var(--p-accent-soft) 23%,transparent);
}
.theme-comercial .footer .social a:hover{
  background:color-mix(in srgb,var(--p-accent) 28%,transparent);
}
.theme-comercial .footer__bottom{
  border-top-color:color-mix(in srgb,var(--p-accent-soft) 22%,transparent);
}
/* Palette selector lives only in the local commercial look: not deployed
   into the current public homepage or interior templates. */
.palette-explorer{
  position:fixed;
  z-index:120;
  left:18px;
  bottom:18px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#f4f0ff;
  font-size:12px;
  line-height:1.45;
}
.palette-explorer button{font:inherit;cursor:pointer}
.palette-explorer button:focus-visible{
  outline:2px solid #d5b6ff;outline-offset:3px;
}
.palette-explorer-toggle{
  display:flex;align-items:center;gap:10px;
  padding:12px 15px;
  color:#fff;
  background:#07172F;
  border:1px solid #9A89CB;
  box-shadow:0 7px 23px rgba(0,0,0,.24);
  border-radius:7px;
}
.palette-explorer-toggle strong{color:#e1cfff;font-weight:780}
.palette-explorer-toggle-swatches{
  display:flex;align-items:center;gap:0;
  padding:2px;
  border:1px solid #ffffff33;
}
.palette-explorer-toggle-swatches i{
  width:12px;height:20px;
  display:block;
}
.palette-explorer-toggle-swatches i:nth-child(1){background:#080b1d}
.palette-explorer-toggle-swatches i:nth-child(2){background:#a77bff}
.palette-explorer-toggle-swatches i:nth-child(3){background:#f6f5fb}
.palette-explorer-toggle-icon{margin-left:10px;color:#d4c0ff;font-size:18px}
.palette-explorer-panel[hidden]{display:none!important}
.palette-explorer-panel{
  position:absolute;
  left:0;
  bottom:calc(100% + 12px);
  width:min(420px,calc(100vw - 34px));
  max-height:min(620px,calc(100dvh - 112px));
  display:flex;
  flex-direction:column;
  color:#e8e7f2;
  background:#0B142C;
  border:1px solid #69779C;
  box-shadow:0 16px 55px rgba(0,0,0,.45);
  border-radius:9px;
  overflow:hidden;
}
.palette-explorer-header{
  padding:21px 21px 16px;
  display:flex;gap:16px;justify-content:space-between;
  background:linear-gradient(110deg,#101C3B,#191238);
}
.palette-explorer-eyebrow{font-size:9px;letter-spacing:.16em;color:#b7a8e5;font-weight:750}
.palette-explorer-header h2{
  margin:7px 0 5px;
  color:white;
  font-size:21px;
  letter-spacing:-.04em;
  line-height:1.2;
}
.palette-explorer-header p:not(.palette-explorer-eyebrow){
  color:#cbc5dd;font-size:11px;line-height:1.5;
}
.palette-explorer-close{
  flex:none;align-self:flex-start;
  width:31px;height:31px;
  border:1px solid #877bb0;
  border-radius:50%;
  color:#fff;
  background:transparent;
  font-size:22px!important;
  line-height:1;
}
.palette-explorer-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:13px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.palette-explorer-option{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  text-align:left;
  padding:12px 11px;
  color:#f3f0fb;
  background:#1a2541;
  border:1px solid #3A4663;
  border-radius:5px;
}
.palette-explorer-option:hover{background:#223050;border-color:#91A1C9}
.palette-explorer-option.is-active{
  background:#222249;
  border-color:#C5A5FF;
  box-shadow:inset 0 0 0 1px #C5A5FF;
}
.palette-explorer-option-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.palette-explorer-option-chips{display:flex;align-items:center;gap:3px}
.palette-explorer-option-chips i{
  display:block;width:20px;height:15px;border:1px solid #ffffff35;
}
.palette-explorer-option-number{color:#ADAFCB;font-size:9px;letter-spacing:.06em}
.palette-explorer-option strong{
  font-size:12px;
  line-height:1.25;
  color:#fff;
  font-weight:750;
}
.palette-explorer-option small{
  font-size:10px;
  line-height:1.35;
  color:#B9BFD3;
}
.palette-explorer-footer{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #3c4a68;
  padding:14px 16px;
  background:#0D1832;
}
.palette-explorer-current{display:flex;flex-direction:column;gap:4px}
.palette-explorer-current span{font-size:9px;letter-spacing:.11em;color:#B5B4D0}
.palette-explorer-current strong{font-size:12px;color:#fff}
.palette-explorer-footer button{
  flex:none;
  border:1px solid #B5A0EA;
  border-radius:4px;
  background:transparent;
  color:#E7D5FF;
  padding:9px 10px;
  font-size:11px;
}
.palette-explorer-footer button:hover{background:#302C56}
@media(max-width:530px){
  .palette-explorer{left:12px;bottom:12px}
  .palette-explorer-panel{max-height:calc(100dvh - 105px)}
  .palette-explorer-options{gap:6px;padding:10px}
  .palette-explorer-option{padding:11px 9px}
  .palette-explorer-header{padding:17px 16px 14px}
  .palette-explorer-toggle{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
  .palette-explorer button{transition:none}
}

/* Separate the original ten from the new, bolder twenty options. */
.palette-explorer-divider{
  grid-column:1/-1;
  padding:10px 3px 5px;
  color:#cdbde9;
  font-size:10px;
  font-weight:750;
  letter-spacing:.1em;
  border-bottom:1px solid #454766;
}
.palette-explorer-options{scrollbar-width:thin;scrollbar-color:#8875aa #1b2541}

/* Additional real CMS catalogue offerings, not new images:
   06 Datos, BI y Analítica; 07 Staff Augmentation.
   The five approved visual cards remain completely unchanged. */
.theme-comercial .service-extras{
  padding-block:29px 56px;
  color:var(--p-ink);
}
.theme-comercial .service-extras-label{
  color:var(--p-accent-deep);
  font-size:10px;
  font-weight:750;
  letter-spacing:.14em;
  padding-bottom:16px;
}
.theme-comercial .service-extras-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.theme-comercial .service-extra{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:26px 30px 23px;
  background:var(--p-canvas);
  border:1px solid color-mix(in srgb,var(--p-accent) 19%,#ddd);
  transition:border-color .18s,background .18s;
}
.theme-comercial .service-extra:hover{
  border-color:var(--p-accent);
  background:var(--p-paper);
}
.theme-comercial .service-extra-number{
  color:var(--p-accent-deep);
  font-size:10px;
  letter-spacing:.11em;
  font-weight:750;
}
.theme-comercial .service-extra h3{
  color:var(--p-ink);
  font-size:20px;
  line-height:1.24;
  font-weight:750;
  letter-spacing:-.03em;
  margin:16px 0 9px;
}
.theme-comercial .service-extra p{
  color:#676276;
  font-size:13px;
  line-height:1.6;
  max-width:420px;
  margin:0 0 19px;
  flex:1;
}
.theme-comercial .service-extra-link{
  color:var(--p-accent-deep);
  font-size:12px;
  font-weight:750;
}
.theme-comercial .service-extra-link span{margin-left:7px}
@media(max-width:760px){
  .theme-comercial .service-extras{padding-block:19px 43px}
  .theme-comercial .service-extras-grid{grid-template-columns:1fr}
  .theme-comercial .service-extra{padding:22px}
  .theme-comercial .service-extra h3{font-size:19px}
}

/* Shared chromatic treatment for hero film and closing CTA.
 * These two regions reuse exactly the same chosen lilac hue and strength.
 * The video and CTA retain their individual dark contrast-safe gradients.
 * Other cards, backgrounds and the approved #29 palette stay unchanged. */
.theme-comercial{
  --film-tint-color:#AD39E7;
  --film-tint-opacity:.22;
}
.theme-comercial .hero-video-tint{
  position:absolute;inset:0;z-index:1;
  background-color:var(--film-tint-color);
  opacity:var(--film-tint-opacity);
  pointer-events:none;
}
.theme-comercial .commercial-closing{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 72% 16%,
      color-mix(in srgb,var(--p-glow) 47%,transparent),transparent 58%),
    linear-gradient(110deg,var(--p-night),var(--p-mid) 73%,var(--p-night));
}
.theme-comercial .commercial-closing::before{
  z-index:0;
  opacity:.22;
}
.theme-comercial .commercial-closing::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:linear-gradient(105deg,
    color-mix(in srgb,var(--film-tint-color) 30%,transparent) 0%,
    color-mix(in srgb,var(--film-tint-color) 53%,transparent) 100%);
  opacity:var(--film-tint-opacity);
}
.theme-comercial .commercial-closing .closing-inner{
  position:relative;
  z-index:1;
}
.video-tint-explorer{
  position:fixed;
  z-index:121;
  right:18px;
  bottom:18px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:12px;
  line-height:1.45;
  color:#f2eaff;
}
.video-tint-explorer button{
  font:inherit;cursor:pointer;
}
.video-tint-explorer button:focus-visible,
.video-tint-explorer input:focus-visible{
  outline:2px solid #d2b6ff;outline-offset:3px;
}
.video-tint-toggle{
  display:flex;align-items:center;gap:11px;
  background:#101129;
  color:#fff;
  border:1px solid #a992df;
  border-radius:7px;
  box-shadow:0 7px 23px #0005;
  padding:12px 14px;
  font-weight:650!important;
}
.video-tint-toggle>span:last-child{font-size:17px;color:#d0baf4;margin-left:5px}
.video-tint-toggle-dot{
  display:block;width:18px;height:18px;
  flex:none;border:2px solid #efdeff;
  border-radius:50%;
  background:#AD39E7;
  box-shadow:0 0 0 3px #ffffff18;
}
.video-tint-panel[hidden]{display:none!important}
.video-tint-panel{
  display:flex;flex-direction:column;
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  width:min(355px,calc(100vw - 34px));
  max-height:calc(100dvh - 110px);
  overflow-y:auto;
  border:1px solid #62538e;
  border-radius:9px;
  color:#f2f0fc;
  background:#0c1026;
  box-shadow:0 19px 60px #0009;
}
.video-tint-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 19px 16px;
  background:linear-gradient(118deg,#101932,#25163d);
}
.video-tint-panel-head span{
  color:#baabe1;font-size:9px;letter-spacing:.12em;font-weight:780;
}
.video-tint-panel-head h2{
  color:#fff;font-size:21px;line-height:1.2;letter-spacing:-.04em;
  margin:6px 0 8px;font-weight:750;
}
.video-tint-panel-head p{
  color:#c7c2d8;font-size:11px;line-height:1.55;
}
.video-tint-close{
  display:grid;place-items:center;
  border:1px solid #9183b6;border-radius:50%;
  background:transparent;color:#fff;
  width:30px;height:30px;flex:none;
  font-size:22px!important;
}
.video-tint-panel-body{padding:19px;display:flex;flex-direction:column;gap:11px}
.video-tint-color-row{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.video-tint-color-row label{flex:1;color:#f1ebff;font-size:12px;font-weight:650}
.video-tint-color-row input[type=color]{
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  border:1px solid #9282c0;
  border-radius:4px;background:transparent;
  padding:3px;width:46px;height:32px;
}
.video-tint-color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.video-tint-color-row input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}
.video-tint-color-row output{font-size:11px;color:#d4c7f8;font-variant-numeric:tabular-nums}
.video-tint-slider-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;color:#f2ebff;font-weight:620;
}
.video-tint-slider-head output{
  color:#c9b5f6;
  font-variant-numeric:tabular-nums;
}
.video-tint-panel-body input[type=range]{
  display:block;
  cursor:pointer;
  width:100%;height:24px;
  margin:0 0 10px;
  accent-color:#b99aff;
}
.video-tint-panel-body input.video-tint-hue{
  appearance:none;-webkit-appearance:none;
  height:13px;border:1px solid #ffffff45;
  border-radius:30px;
  background:linear-gradient(90deg,
    #f44343 0%,#f4d343 16.6%,#61d44a 33.3%,
    #28cae0 50%,#5056ee 66.6%,#d336e3 83.3%,#f44343 100%);
  margin:8px 0 23px;
}
.video-tint-hue::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:18px;height:22px;border-radius:4px;
  border:2px solid #fff;background:#16122b;box-shadow:0 2px 5px #0008;
}
.video-tint-hue::-moz-range-thumb{
  width:16px;height:20px;border-radius:4px;
  border:2px solid #fff;background:#16122b;
}
.video-tint-presets-label{
  color:#b5a9d8;font-size:10px;font-weight:750;letter-spacing:.09em;
  margin-top:2px;
}
.video-tint-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.video-tint-presets button{
  padding:8px 5px;
  min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#191e3a;color:#e4ddf3;
  border:1px solid #3a4060;border-radius:4px;
  font-size:10px!important;
}
.video-tint-presets button:hover{border-color:#b3a0e9}
.video-tint-presets button[aria-pressed=true]{
  border-color:#c5aeff;box-shadow:inset 0 0 0 1px #c5aeff;
}
.video-tint-presets i{
  display:block;width:29px;height:18px;border-radius:3px;
  border:1px solid #ffffff4a;
}
.video-tint-panel-actions{
  display:flex;gap:8px;margin-top:12px;
}
.video-tint-panel-actions button{
  flex:1;min-width:0;padding:10px 6px;
  font-size:11px!important;font-weight:650!important;
  border-radius:4px;border:1px solid #afa0dd;
  color:#e8dcff;background:#1b2142;
}
.video-tint-panel-actions button:first-child{
  background:transparent;color:#e6e1fa;
}
.video-tint-panel-actions button:hover{background:#353050}
.video-tint-note{
  margin:0;color:#afa9d2;font-size:10px;line-height:1.5;
}
@media(max-width:760px), (prefers-reduced-motion:reduce){
  /* No video is playing in these modes: don't present a misleading tint tool. */
  .video-tint-explorer,.theme-comercial .hero-video-tint{display:none!important}
}