/* Match the product catalogue palette on each dedicated product page. */
.product-page:has(.mark-pdf){ --product-rgb: 255 94 110; }
.product-page:has(.mark-nexo){ --product-rgb: 74 213 135; }
.product-page:has(.mark-conecta){ --product-rgb: 255 151 68; }
.product-page:has(.mark-coordina){ --product-rgb: 166 177 192; }
.product-page:has(.mark-vault){ --product-rgb: 76 137 255; }
.product-page:has(.mark-docu){ --product-rgb: 249 218 74; }
.product-page:has(.mark-soporte){ --product-rgb: 111 212 255; }
.product-page:has(.mark-cuadrante){ --product-rgb: 167 108 244; }
.product-page:has(.mark-qr){ --product-rgb: 246 136 194; }
.product-page:has(.mark-aula){ --product-rgb: 247 167 84; }
.product-page:has(.mark-volante){ --product-rgb: 203 173 255; }
.product-page:has(.mark-abastece){ --product-rgb: 181 145 38; --product-ink: 244 214 119; }
.product-page:has(.mark-seo){ --product-rgb: 174 44 61; --product-ink: 255 157 166; --product-button-ink:255 245 247;}

.product-page .product-mark{color:rgb(var(--product-ink,var(--product-rgb)));background:linear-gradient(145deg,rgb(var(--product-rgb) / .25),rgb(var(--product-rgb) / .1));border:1px solid rgb(var(--product-rgb) / .4);box-shadow:inset 0 1px 0 rgb(var(--product-rgb) / .15),0 15px 50px rgb(var(--product-rgb) / .1)}
.product-page .product-mark svg{filter:drop-shadow(0 0 12px rgb(var(--product-rgb) / .2))}
.product-page .product-hero-grid .button{background:rgb(var(--product-rgb));border-color:rgb(var(--product-rgb));color:rgb(var(--product-button-ink,7 21 43));box-shadow:0 10px 28px rgb(var(--product-rgb) / .22)}
.product-page .product-hero-grid .button:hover{background:rgb(var(--product-rgb));border-color:rgb(var(--product-ink,var(--product-rgb)));box-shadow:0 16px 38px rgb(var(--product-rgb) / .3);filter:brightness(1.08)}
.product-page .product-hero-grid .button:focus-visible{outline:2px solid rgb(var(--product-ink,var(--product-rgb)));outline-offset:5px}

/* Let the product introduction use the space left by its removed label. */
.product-page .product-detail{grid-template-columns:1fr}

/* Product-specific demo presentation. */
.product-page .product-detail{display:block;padding:clamp(45px,6vw,95px) max(5%,calc((100% - 1280px)/2));background:radial-gradient(ellipse at 20% 30%,rgb(var(--product-rgb) / .065),transparent 65%),#050c17;color:#eaf4ff}
.pd-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.35fr .85fr;gap:45px;padding:clamp(25px,4.5vw,65px);border:1px solid rgb(var(--product-rgb) / .23);border-radius:28px;background:linear-gradient(135deg,#0e1c2d,#07111e);box-shadow:0 25px 80px #0003,inset 0 1px #edf5ff08}
.pd-panel::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 100% 0,rgb(var(--product-rgb) / .1),transparent 60%)}
.product-page .product-detail .pd-copy h2{font-size:clamp(30px,3.5vw,49px);line-height:1.1;letter-spacing:-.045em;margin:0 0 26px;max-width:650px;color:#edf5ff}
.product-page .product-detail .pd-copy>p{max-width:620px;font-size:15px;line-height:1.8;color:#a5bbd0;margin:0 0 17px}
.pd-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:29px}
.product-page .product-detail .pd-button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;margin:0;padding:13px 23px;border:1px solid rgb(var(--product-rgb));border-radius:11px;background:rgb(var(--product-rgb));color:rgb(var(--product-button-ink,7 21 43));font-size:13px;font-weight:650;text-decoration:none;box-shadow:0 10px 30px rgb(var(--product-rgb) / .13);transition:transform .25s,box-shadow .25s}
.product-page .product-detail .pd-button:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgb(var(--product-rgb) / .25)}
.product-page .product-detail .pd-catalog-link{display:inline-block;margin:0;padding:4px 0;border-bottom:1px solid #9bbddd35;color:#a9bed2;font-size:12px;font-weight:400;text-decoration:none}
.product-page .product-detail a:focus-visible{outline:2px solid rgb(var(--product-ink,var(--product-rgb)));outline-offset:5px}
.pd-demo{align-self:center;position:relative;min-width:0;padding:24px;border:1px solid rgb(var(--product-rgb) / .2);border-radius:20px;background:radial-gradient(ellipse at 50% 40%,rgb(var(--product-rgb) / .09),transparent 75%),#050d18}
.pd-demo-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.pd-demo-top>span{font:9px/1.5 Consolas,monospace;letter-spacing:.12em;color:#728fa9}.pd-demo-top i{width:4px;height:4px;border-radius:50%;background:rgb(var(--product-ink,var(--product-rgb)));box-shadow:0 0 12px rgb(var(--product-rgb) / .5)}
.pd-demo-art{display:grid;place-items:center;position:relative;isolation:isolate;height:155px;margin-top:12px}.pd-demo-art::before{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgb(var(--product-rgb) / .12),transparent 65%);z-index:-1}
.pd-demo-core{display:grid;place-items:center;width:87px;height:87px;border:1px solid rgb(var(--product-rgb) / .3);border-radius:24px;background:linear-gradient(140deg,rgb(var(--product-rgb) / .17),#0a1424);box-shadow:inset 0 1px #ffffff12,0 12px 30px #0003;color:rgb(var(--product-ink,var(--product-rgb)));font:500 26px/1 var(--body);letter-spacing:-.05em}
.pd-demo-orbit{position:absolute;top:50%;left:50%;width:142px;height:142px;transform:translate(-50%,-50%);border:1px solid rgb(var(--product-rgb) / .17);border-radius:50%;animation:pdOrbit 30s linear infinite}.pd-demo-orbit::before{content:'';position:absolute;top:-2px;left:50%;width:4px;height:4px;border-radius:50%;background:rgb(var(--product-ink,var(--product-rgb)));box-shadow:0 0 10px rgb(var(--product-rgb) / .6)}
.pd-demo h3{font-size:19px;font-weight:550;line-height:1.3;letter-spacing:-.025em;color:#dbeafa;margin:8px 0 7px;text-align:center}
.product-page .product-detail .pd-demo>p{font-size:12px;color:#839eb8;text-align:center;margin:0 0 20px}
.pd-demo-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.pd-demo-tags span{padding:6px 9px;border:1px solid #87aacc19;border-radius:7px;color:#8fa9c2;background:#7aacc606;font-size:9px;line-height:1.4}
.pd-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;list-style:none;margin:0;padding:30px 0 0;border-top:1px solid #8bacce20}
.pd-steps li{display:flex;align-items:flex-start;gap:13px;min-width:0}.pd-steps li>span{font:10px/1.6 Consolas,monospace;color:rgb(var(--product-ink,var(--product-rgb)));padding-top:2px}.pd-steps h3{font-size:15px;line-height:1.35;font-weight:500;letter-spacing:-.015em;color:#d2e3f4;margin:0 0 10px}
.product-page .product-detail .pd-steps p{font-size:12px;line-height:1.75;color:#8fa9c2;margin:0}
@keyframes pdOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1000px){.pd-panel{grid-template-columns:1fr .8fr;gap:30px}.pd-actions{gap:16px}.pd-demo{padding:20px}.pd-steps{gap:18px}}
@media(max-width:700px){.pd-panel{grid-template-columns:1fr;border-radius:20px;gap:30px}.pd-demo{width:100%;max-width:400px;justify-self:center}.pd-steps{grid-template-columns:1fr;gap:23px}.product-page .product-detail .pd-copy h2{font-size:clamp(28px,7vw,37px)}.product-page .product-detail .pd-copy>p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.pd-demo-orbit{animation:none}.product-page .product-detail .pd-button{transition:none}.product-page .product-detail .pd-button:hover{transform:none}}
/* Compact hero and holographic product showcase. */
.product-page .product-hero{min-height:620px;padding-top:4rem;padding-bottom:4rem}
.product-page .product-hero-grid{margin-top:0}
.product-page .pd-demo{position:relative;isolation:isolate;overflow:hidden;padding:23px 23px 28px;border-radius:24px;border-color:rgb(var(--product-rgb) / .32);background:radial-gradient(ellipse at 50% 48%,rgb(var(--product-rgb) / .1),transparent 65%),linear-gradient(160deg,#07111f,#030813);box-shadow:inset 0 1px 0 rgb(var(--product-rgb) / .15),0 25px 60px #0004}
.pd-demo::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--product-ink,var(--product-rgb))),transparent);box-shadow:0 0 20px rgb(var(--product-rgb) / .5)}
.product-page .pd-holo{height:245px;margin:6px -10px 0;perspective:700px}
.product-page .pd-holo::before{width:240px;height:240px;background:radial-gradient(circle,rgb(var(--product-rgb) / .16),transparent 65%)}
.pd-holo-grid{position:absolute;inset:0;background-image:linear-gradient(rgb(var(--product-rgb) / .055) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--product-rgb) / .055) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.pd-holo-rings{position:absolute;left:50%;top:50%;width:245px;height:245px;transform:translate(-50%,-50%);color:rgb(var(--product-ink,var(--product-rgb)));filter:drop-shadow(0 0 5px rgb(var(--product-rgb) / .2))}
.pd-holo-ring-a,.pd-holo-ring-b{transform-origin:180px 180px;animation:pdHoloOrbit 32s linear infinite}.pd-holo-ring-b{animation-duration:47s;animation-direction:reverse}
.pd-holo-crystal{position:relative;display:grid;place-items:center;width:112px;height:128px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(145deg,rgb(var(--product-rgb) / .7),rgb(var(--product-rgb) / .1) 48%,rgb(var(--product-rgb) / .38));color:rgb(var(--product-ink,var(--product-rgb)));animation:pdHoloFloat 7s ease-in-out infinite;box-shadow:inset 0 0 45px rgb(var(--product-rgb) / .2)}
.pd-holo-crystal::before{content:'';position:absolute;inset:1px;clip-path:inherit;background:linear-gradient(130deg,rgb(var(--product-rgb) / .17),#07101e 65%)}
.pd-holo-facet{position:absolute;z-index:1;inset:1px;clip-path:polygon(50% 0,100% 25%,50% 50%,0 25%);background:linear-gradient(150deg,rgb(var(--product-rgb) / .22),transparent)}
.pd-holo-crystal svg{position:relative;z-index:2;width:62px;height:62px;filter:drop-shadow(0 0 12px rgb(var(--product-rgb) / .35))}
.pd-holo-beam{position:absolute;left:50%;top:8%;height:84%;width:1px;background:linear-gradient(transparent,rgb(var(--product-rgb) / .35),transparent);box-shadow:0 0 25px rgb(var(--product-rgb) / .4);opacity:.6}
.pd-holo-floor{position:absolute;bottom:10px;left:50%;width:140px;height:30px;transform:translateX(-50%);border:1px solid rgb(var(--product-rgb) / .2);border-radius:50%;background:radial-gradient(ellipse,rgb(var(--product-rgb) / .18),transparent 70%);box-shadow:0 0 20px rgb(var(--product-rgb) / .1)}
.product-page .pd-demo h3{margin-top:10px;color:rgb(var(--product-ink,var(--product-rgb)))}
.product-page .product-detail .pd-demo>p{margin-bottom:0}
@keyframes pdHoloOrbit{to{transform:rotate(360deg)}}
@keyframes pdHoloFloat{50%{transform:translateY(-7px) rotateY(12deg) rotateZ(2deg)}}
@media(max-width:800px){.product-page .product-hero{min-height:0;padding-top:3rem;padding-bottom:3rem}.product-page .product-hero-grid{gap:2.5rem}}
@media(prefers-reduced-motion:reduce){.pd-holo-ring-a,.pd-holo-ring-b,.pd-holo-crystal{animation:none}}
/* Dimensional product core: solid faces, intersecting orbital planes and energy. */
.product-page .pd-holo-volume{height:300px;perspective:none;overflow:visible;margin-top:0}
.product-page .pd-holo-volume::before{width:285px;height:285px;background:radial-gradient(ellipse,rgb(var(--product-rgb) / .18),transparent 70%)}
.pd-energy-cloud{position:absolute;inset:0;background:radial-gradient(ellipse at 32% 30%,rgb(var(--product-rgb) / .15),transparent 50%),radial-gradient(ellipse at 80% 70%,rgb(var(--product-rgb) / .09),transparent 48%);animation:pdCloudDrift 10s ease-in-out infinite alternate}
.pd-energy-grid{position:absolute;left:-20%;right:-20%;bottom:15px;height:100px;background-image:linear-gradient(rgb(var(--product-rgb) / .1) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--product-rgb) / .1) 1px,transparent 1px);background-size:25px 25px;transform:perspective(200px) rotateX(55deg);mask-image:radial-gradient(ellipse,#000,transparent 65%)}
.pd-energy-rail{position:absolute;left:-10%;right:-10%;top:48%;height:1px;transform:rotate(-17deg);background:linear-gradient(90deg,transparent,rgb(var(--product-rgb) / .45),transparent);box-shadow:0 0 25px rgb(var(--product-rgb) / .35)}
.pd-core-stage{position:absolute;inset:0;perspective:650px;perspective-origin:50% 45%;transform-style:preserve-3d}
.pd-core-scene{position:absolute;left:50%;top:48%;width:230px;height:230px;margin:-115px 0 0 -115px;transform-style:preserve-3d;animation:pdCoreLevitate 8s ease-in-out infinite}
.pd-volume-cube{position:absolute;width:94px;height:94px;left:50%;top:50%;margin:-47px 0 0 -47px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-30deg);animation:pdCubeTurn 28s linear infinite}
.pd-volume-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border:1px solid rgb(var(--product-ink,var(--product-rgb)) / .8);background:linear-gradient(145deg,rgb(var(--product-rgb) / .32),#081320 75%),#081320;box-shadow:inset 0 0 30px rgb(var(--product-rgb) / .18);color:rgb(var(--product-ink,var(--product-rgb)));overflow:hidden}
.pd-volume-face::before{content:'';position:absolute;inset:7px;border:1px solid rgb(var(--product-rgb) / .2);pointer-events:none}
.pd-volume-face::after{content:'';position:absolute;inset:-100%;background:linear-gradient(110deg,transparent 45%,rgb(var(--product-ink,var(--product-rgb)) / .18) 50%,transparent 55%);animation:pdFaceShine 9s ease-in-out infinite;pointer-events:none}
.pd-volume-face svg{width:57px;height:57px;filter:drop-shadow(0 0 8px rgb(var(--product-rgb) / .4))}
.face-front{transform:translateZ(47px)}.face-back{transform:rotateY(180deg) translateZ(47px)}.face-left{transform:rotateY(-90deg) translateZ(47px)}.face-right{transform:rotateY(90deg) translateZ(47px)}.face-top{transform:rotateX(90deg) translateZ(47px);background:linear-gradient(135deg,rgb(var(--product-rgb) / .48),#102235),#102235}.face-bottom{transform:rotateX(-90deg) translateZ(47px)}
.pd-energy-orbit{position:absolute;width:214px;height:214px;left:50%;top:50%;margin:-107px 0 0 -107px;border:1px solid rgb(var(--product-ink,var(--product-rgb)) / .4);border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 10px rgb(var(--product-rgb) / .12),inset 0 0 10px rgb(var(--product-rgb) / .1)}
.pd-energy-orbit::before{content:'';position:absolute;inset:6px;border:1px dashed rgb(var(--product-rgb) / .2);border-radius:50%}
.pd-energy-orbit::after{content:'';position:absolute;width:6px;height:6px;left:50%;top:-3px;border-radius:50%;background:rgb(var(--product-ink,var(--product-rgb)));box-shadow:0 0 10px rgb(var(--product-rgb)),0 0 22px rgb(var(--product-rgb) / .7)}
.orbit-alpha{transform:rotateX(68deg) rotateZ(-30deg);animation:pdAlphaOrbit 19s linear infinite}.orbit-beta{transform:rotateY(62deg) rotateX(-18deg);animation:pdBetaOrbit 24s linear infinite reverse;border-color:rgb(var(--product-rgb) / .22)}.orbit-gamma{width:174px;height:174px;margin:-87px 0 0 -87px;transform:rotateX(20deg) rotateY(-25deg);border-style:dashed;border-color:rgb(var(--product-rgb) / .2);animation:pdGammaOrbit 35s linear infinite}
.pd-energy-particles{position:absolute;inset:0;pointer-events:none}.pd-energy-particles i{position:absolute;left:var(--particle-x);top:var(--particle-y);width:var(--particle-size);height:var(--particle-size);border-radius:50%;background:rgb(var(--product-ink,var(--product-rgb)));box-shadow:0 0 10px rgb(var(--product-rgb) / .6);opacity:0;animation:pdParticleRise 5s var(--particle-delay) ease-in-out infinite}
.pd-core-ground{position:absolute;bottom:20px;left:50%;width:165px;height:26px;transform:translateX(-50%);background:radial-gradient(ellipse,rgb(var(--product-rgb) / .25),transparent 65%);filter:blur(5px);animation:pdGroundPulse 8s ease-in-out infinite}
.pd-core-brackets{position:absolute;inset:18px 5px;border:1px solid rgb(var(--product-rgb) / .18);clip-path:polygon(0 0,16% 0,16% 1%,1% 1%,1% 14%,0 14%,0 0,100% 0,100% 14%,99% 14%,99% 1%,84% 1%,84% 0,100% 0,100% 100%,84% 100%,84% 99%,99% 99%,99% 86%,100% 86%,100% 100%,0 100%,0 86%,1% 86%,1% 99%,16% 99%,16% 100%,0 100%);pointer-events:none}
@keyframes pdCubeTurn{to{transform:rotateX(-18deg) rotateY(330deg)}}
@keyframes pdCoreLevitate{50%{transform:translateY(-9px)}}
@keyframes pdAlphaOrbit{to{transform:rotateX(68deg) rotateZ(330deg)}}
@keyframes pdBetaOrbit{to{transform:rotateY(62deg) rotateX(-18deg) rotateZ(360deg)}}
@keyframes pdGammaOrbit{to{transform:rotateX(20deg) rotateY(-25deg) rotateZ(360deg)}}
@keyframes pdParticleRise{0%,100%{opacity:0;transform:translateY(12px)}35%{opacity:.65}80%{opacity:.15;transform:translateY(-22px)}}
@keyframes pdFaceShine{0%,60%,100%{transform:translateX(-35%)}85%{transform:translateX(35%)}}
@keyframes pdCloudDrift{to{transform:scale(1.1) translate(3%,-3%);opacity:.5}}
@keyframes pdGroundPulse{50%{opacity:.45;transform:translateX(-50%) scale(.8)}}
@media(prefers-reduced-motion:reduce){.pd-holo-volume *,.pd-holo-volume *::before,.pd-holo-volume *::after{animation:none!important}.pd-energy-particles i{opacity:.35}}
/* Start the product background at the viewport edge and size the hero to its content. */
body:has(.product-page){background:#06111f}
body:has(.product-page)>.site-header{position:fixed;left:50%;transform:translateX(-50%);margin:0;z-index:50}
.product-page{margin-top:0}
.product-page .product-hero{min-height:0;padding-top:clamp(140px,10vw,165px);padding-bottom:clamp(36px,4vw,56px)}
@media(max-width:800px){.product-page .product-hero{padding-top:125px;padding-bottom:36px}}