/* ==========================================================================
   DevnexHub — shared components (used by index.php and contact.php)
   Load AFTER style.css. All new classes are prefixed `dx-` so nothing
   collides with the older rules inside style.css.
   ========================================================================== */
:root{
  --dx-blue:#1465F3; --dx-blue-d:#0e3d8a; --dx-blue-l:#eaf1ff; --dx-ink:#0f1b2d;
  --dx-muted:#4b5563; --dx-line:#e3e9f2; --dx-soft:#f3f7ff; --dx-navy:#0b1220;
  --dx-ease:cubic-bezier(.22,.8,.24,1);
}
html{scroll-padding-top:84px}
body{background:#fff}
.dx-wrap{max-width:1260px;margin:0 auto;padding:0 24px;width:100%}
.dx-center{text-align:center}
.dx-blue{color:var(--dx-blue)}

/* ---------- scroll progress bar + cursor spotlight ---------- */
.dx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#1465F3,#5b9bff,#1465F3);z-index:2000;pointer-events:none}

/* ---------- reveal-on-scroll ---------- */
.js .dx-reveal{opacity:0;transition:opacity .9s var(--dx-ease),transform .9s var(--dx-ease);
  transition-delay:var(--d,0s);will-change:opacity,transform}
.js .dx-reveal[data-r="up"],.js .dx-reveal:not([data-r]){transform:translateY(46px)}
.js .dx-reveal[data-r="down"]{transform:translateY(-36px)}
.js .dx-reveal[data-r="left"]{transform:translateX(-70px)}
.js .dx-reveal[data-r="right"]{transform:translateX(70px)}
.js .dx-reveal[data-r="zoom"]{transform:scale(.86)}
.js .dx-reveal[data-r="flip"]{transform:perspective(900px) rotateX(24deg) translateY(40px);transform-origin:50% 100%}
.js .dx-reveal.is-in{opacity:1;transform:none}

/* ---------- section badge + heading ---------- */
.dx-badge{display:inline-block;padding:8px 22px;border:1.5px solid var(--dx-blue);border-radius:999px;
  font:600 13px/1 'Inter',sans-serif;color:var(--dx-blue);background:#fff;margin-bottom:16px;
  position:relative;overflow:hidden}
.dx-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(20,101,243,.18) 50%,transparent 70%);
  transform:translateX(-120%);animation:dxShine 3.6s ease-in-out infinite}
@keyframes dxShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.dx-head{max-width:760px;margin:0 auto 46px;text-align:center}
.dx-head.left{margin:0 0 30px;text-align:left}
.dx-head h2{font:700 38px/1.18 'Poppins',sans-serif;color:#000;margin-bottom:12px}
.dx-head p{color:var(--dx-muted);font-size:16px;line-height:1.65}

/* ---------- buttons (extends .btn from style.css) ---------- */
.dx-btn-pill{border-radius:999px!important}
.dx-white{filter:brightness(0) invert(1)}
.btn[data-magnetic]{transition:transform .25s var(--dx-ease),box-shadow .25s,background .25s}
.btn-primary.dx-shine{position:relative;overflow:hidden}
.btn-primary.dx-shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:dxBtnShine 3.4s ease-in-out infinite}
@keyframes dxBtnShine{0%,60%{left:-60%}100%{left:140%}}

/* ---------- forms ---------- */
.dx-card{background:#fff;border-radius:22px;box-shadow:0 14px 40px -14px rgba(15,27,45,.22);border:1px solid rgba(227,233,242,.9)}
.dx-form{padding:30px 32px 32px}
.dx-form h3{font:600 26px/1.2 'Poppins',sans-serif;color:#000}
.dx-form .dx-sub{color:var(--dx-ink);font-size:14px;margin:4px 0 18px}
.dx-row{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.dx-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;min-width:0}
.dx-field label{font:500 13.5px/1.2 'Inter',sans-serif;color:var(--dx-ink)}
.dx-field label i{color:#e11d48;font-style:normal}
.dx-input{position:relative;display:flex;align-items:center}
.dx-input>img,.dx-input>svg{position:absolute;left:14px;width:17px;height:17px;object-fit:contain;opacity:.75;pointer-events:none;transition:opacity .25s,transform .25s}
.dx-input input,.dx-input select,.dx-field textarea{width:100%;border:1.5px solid #b9c1cd;border-radius:9px;background:#fff;
  font:400 14px/1.4 'Inter',sans-serif;color:var(--dx-ink);padding:13px 14px;outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s}
.dx-input input{padding-left:44px}
.dx-input select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background:#fff url("../images/icons/icon_down.png") no-repeat right 14px center/14px}
.dx-input select:invalid{color:#7b8696}
.dx-field textarea{resize:vertical;min-height:110px}
.dx-input input::placeholder,.dx-field textarea::placeholder{color:#7b8696}
.dx-input input:focus,.dx-input select:focus,.dx-field textarea:focus{border-color:var(--dx-blue);box-shadow:0 0 0 4px rgba(20,101,243,.13)}
.dx-input:focus-within>img,.dx-input:focus-within>svg{opacity:1;transform:scale(1.12)}
.dx-field.has-error input,.dx-field.has-error select,.dx-field.has-error textarea{border-color:#e11d48;box-shadow:0 0 0 4px rgba(225,29,72,.1)}
.dx-field.has-error{animation:dxShake .4s}
@keyframes dxShake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.dx-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.dx-attach{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#eef4ff;border:1px solid #cfd9ea;
  border-radius:9px;padding:14px 16px;transition:border-color .25s,background .25s}
.dx-attach.is-drag,.dx-attach:hover{border-color:var(--dx-blue);background:#e4eeff}
.dx-attach strong{display:flex;align-items:center;gap:8px;font:600 14px 'Inter',sans-serif;color:#000}
.dx-attach strong img{width:15px;height:15px}
.dx-attach span.dx-hint{display:block;font-size:12px;color:#5b6472;margin-top:2px}
.dx-attach .dx-choose{border:1px solid #c5cedd;background:#fff;border-radius:6px;padding:7px 14px;font:500 12px 'Inter',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.25s}
.dx-attach .dx-choose:hover{background:var(--dx-blue);color:#fff;border-color:var(--dx-blue)}
.dx-filename{display:block;font-size:12px;color:var(--dx-blue);margin-top:6px;min-height:16px}

.dx-submit-row{display:flex;align-items:center;gap:22px;margin-top:20px;flex-wrap:wrap}
.dx-send{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:260px;padding:15px 28px;border-radius:9px;color:#fff;
  font:600 14px 'Inter',sans-serif;background:linear-gradient(180deg,#2f7bff,#0f52d6);box-shadow:0 14px 26px -12px rgba(20,101,243,.75),inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;overflow:hidden;transition:transform .25s var(--dx-ease),box-shadow .25s}
.dx-send:hover{transform:translateY(-2px);box-shadow:0 20px 30px -12px rgba(20,101,243,.8)}
.dx-send img{width:16px;height:16px;transition:transform .35s var(--dx-ease)}
.dx-send:hover img{transform:translate(4px,-4px) rotate(8deg)}
.dx-send.is-loading{pointer-events:none;opacity:.85}
.dx-send.is-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dxSpin .7s linear infinite}
.dx-send.is-loading img{display:none}
.dx-send.dx-block{width:100%}
@keyframes dxSpin{to{transform:rotate(360deg)}}
.dx-privacy{display:flex;align-items:center;gap:10px;font-size:11.5px;line-height:1.35;color:#6b7280}
.dx-privacy img{width:26px;height:26px}
.dx-msg{margin-top:14px;font-size:13.5px;line-height:1.5;border-radius:9px;padding:0 14px;max-height:0;overflow:hidden;opacity:0;transition:.4s var(--dx-ease)}
.dx-msg.show{max-height:120px;opacity:1;padding:11px 14px}
.dx-msg.ok{background:#e8f9ef;color:#0b7a3b;border:1px solid #b7ebcb}
.dx-msg.err{background:#fff0f2;color:#b4123a;border:1px solid #ffc9d3}

/* ---------- FAQ accordion ---------- */
.dx-faq-item{border:1px solid #b9c1cd;border-radius:6px;background:#fff;margin-bottom:12px;transition:border-color .3s,box-shadow .3s}
.dx-faq-item:hover{border-color:#8fa7d6}
.dx-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;padding:12px 16px;
  font:600 13.5px/1.4 'Inter',sans-serif;color:#000;cursor:pointer;transition:color .25s}
.dx-faq-q .dx-pm{position:relative;width:14px;height:14px;flex:none}
.dx-faq-q .dx-pm::before,.dx-faq-q .dx-pm::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:#555;transition:transform .35s var(--dx-ease),background .25s}
.dx-faq-q .dx-pm::after{transform:rotate(90deg)}
.dx-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--dx-ease)}
.dx-faq-a>div{overflow:hidden}
.dx-faq-a p{padding:0 16px 14px;font-size:12.5px;line-height:1.6;color:#2b3445}
.dx-faq-item.open{border-color:#8db0f5;box-shadow:0 10px 24px -14px rgba(20,101,243,.5)}
.dx-faq-item.open .dx-faq-q{color:var(--dx-blue)}
.dx-faq-item.open .dx-pm::after{transform:rotate(0)}
.dx-faq-item.open .dx-pm::before,.dx-faq-item.open .dx-pm::after{background:var(--dx-blue)}
.dx-faq-item.open .dx-faq-a{grid-template-rows:1fr}

/* ---------- testimonials carousel (JS positions the cards) ---------- */
.dx-testi{position:relative;display:flex;align-items:center;gap:14px}
.dx-testi-stage{position:relative;flex:1;height:190px;perspective:1200px;overflow:visible}
.dx-tcard{position:absolute;top:8px;bottom:8px;left:0;width:calc((100% - 36px)/3);background:#fff;border-radius:10px;padding:16px 20px;
  box-shadow:0 6px 18px -4px rgba(15,27,45,.28);color:#000;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .8s var(--dx-ease),opacity .6s,background .6s,color .6s;opacity:0;pointer-events:none;will-change:transform}
.dx-tcard.pos--1,.dx-tcard.pos-0,.dx-tcard.pos-1{opacity:1;pointer-events:auto}
.dx-tcard.pos--1{transform:translateX(0)}
.dx-tcard.pos-0{transform:translateX(calc(100% + 18px)) translateY(-6px) scale(1.04);z-index:2;
  background:linear-gradient(180deg,#2f7bff 0%,#1465F3 55%,#0e4fd0 100%);color:#fff;box-shadow:0 22px 34px -12px rgba(20,101,243,.7)}
.dx-tcard.pos-1{transform:translateX(calc(200% + 36px))}
.dx-tcard.pos-out-l{transform:translateX(-60%) scale(.9)}
.dx-tcard.pos-out-r{transform:translateX(calc(300% + 54px)) scale(.9)}
.dx-tcard .dx-th{display:flex;justify-content:space-between;align-items:flex-start}
.dx-tcard .dx-q{font:700 26px/1 'Poppins',serif;color:inherit;opacity:.7}
.dx-stars{display:flex;gap:2px}
.dx-stars img{width:13px;height:13px;object-fit:contain}
.dx-tcard p{font-size:11.5px;line-height:1.55;font-weight:500}
.dx-tperson{display:flex;align-items:center;gap:10px}
.dx-tperson img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.dx-tperson b{display:block;font:600 13px 'Poppins',sans-serif}
.dx-tperson small{display:flex;align-items:center;gap:6px;font-size:11px;opacity:.85}
.dx-flag{display:inline-block;width:16px;height:11px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.dx-flag.es{background:linear-gradient(#c60b1e 25%,#ffc400 25% 75%,#c60b1e 75%)}
.dx-tarrow{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(15,27,45,.3);display:grid;place-items:center;
  transition:transform .25s,background .25s;z-index:3}
.dx-tarrow:hover{background:var(--dx-blue);transform:scale(1.12)}
.dx-tarrow img{width:12px;height:12px}
.dx-tarrow:hover img{filter:brightness(0) invert(1)}

/* ---------- floating decorative dots ---------- */
.dx-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7fb0ff,#1465F3);box-shadow:0 8px 20px rgba(20,101,243,.45);
  animation:dxFloat 6s ease-in-out infinite;pointer-events:none}
@keyframes dxFloat{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-22px) translateX(8px)}}

/* ---------- canvas network background ---------- */
canvas[data-network]{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .dx-head h2{font-size:30px}
  .dx-row{grid-template-columns:1fr}
  .dx-form{padding:24px 20px}
  .dx-testi-stage{height:200px}
  .dx-tcard{width:100%}
  .dx-tcard.pos--1,.dx-tcard.pos-1,.dx-tcard.pos-out-l,.dx-tcard.pos-out-r{opacity:0;pointer-events:none}
  .dx-tcard.pos--1{transform:translateX(-30%)}
  .dx-tcard.pos-1{transform:translateX(30%)}
  .dx-tcard.pos-0{transform:none}
}
@media (max-width:600px){
  .dx-head h2{font-size:26px}
  .dx-send{min-width:0;width:100%}
  .dx-attach{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .js .dx-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .dx-badge::after,.btn-primary.dx-shine::after,.dx-dot{animation:none!important}
}

/* after the entrance animation finishes, hover/tilt effects get a snappy transition */
.js .dx-reveal.dx-done{transition:transform .28s ease-out,box-shadow .4s,opacity .3s,background .3s;transition-delay:0s}

/* marquee (used by the contact-page feature strip) */
.dx-marquee-track{display:flex;width:max-content}
.dx-marquee-track.is-run{animation:dxMarquee 46s linear infinite}
.dx-marquee:hover .dx-marquee-track{animation-play-state:paused}
@keyframes dxMarquee{to{transform:translateX(-50%)}}

/* testimonials: taller stage so longer reviews never collide with the person row */
.dx-testi-stage{height:222px}
.dx-tcard{padding:18px 22px;gap:8px}
@media (max-width:991px){.dx-testi-stage{height:240px}}

/* ==========================================================================
   Site-wide additions: header, active link, floating buttons, captcha
   ========================================================================== */
.dx-skip{position:absolute;left:-999px;top:8px;z-index:3000;background:var(--dx-blue);color:#fff;padding:10px 16px;border-radius:8px}
.dx-skip:focus{left:12px}
img{-webkit-user-drag:none}

/* header: active link underline (as in Figma) */
.nav-menu a.nav-link{position:relative}
.nav-menu a.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--dx-blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--dx-ease)}
.nav-menu a.nav-link.active::after,.nav-menu a.nav-link:hover::after{transform:scaleX(1)}
.nav-menu a.nav-link.active{color:var(--dx-blue)}
.header-actions{gap:12px}
.header-actions .btn{padding:11px 18px;font-size:13px;border-radius:6px}
.dx-wa-btn{background:#fff;color:#128c4a!important;border:1.5px solid #25d366!important}
.dx-wa-btn:hover{background:#25d366;color:#fff!important}
.dx-wa-btn .btn-icon{width:17px;height:17px}
.nav-cta-m{display:none}
@media (max-width:1180px){.header-actions .dx-wa-btn span{display:none}.header-actions .dx-wa-btn{padding:10px 12px}}
@media (max-width:991px){
  .header-actions .dx-wa-btn{display:none}
  .nav-cta-m{display:block;width:100%}
  .nav-cta-m .btn{display:flex;width:100%;justify-content:center}
  .nav-menu{max-height:calc(100vh - 70px);overflow:auto}
  .nav-menu .dropdown-menu{padding-left:10px}
}

/* social icons that are not live yet */
.social-row a.is-off{cursor:default;opacity:.9}
.social-row a.is-off:hover{transform:none;box-shadow:none}
.ft-contact{margin:0 0 16px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ft-contact a:hover{color:#fff}

/* floating WhatsApp + back to top */
.dx-wa-float{position:fixed;left:18px;bottom:20px;z-index:1500;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;
  box-shadow:0 12px 26px -8px rgba(37,211,102,.7);transition:transform .3s var(--dx-ease)}
.dx-wa-float img{width:28px;height:28px;filter:brightness(0) invert(1)}
.dx-wa-float::before,.dx-wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);animation:dxWa 2.6s ease-out infinite}
.dx-wa-float::after{animation-delay:1.3s}
.dx-wa-float:hover{transform:scale(1.1) rotate(-6deg)}
@keyframes dxWa{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.dx-top{position:fixed;right:20px;bottom:22px;z-index:1500;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--dx-blue);display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(20,101,243,.55);opacity:0;visibility:hidden;transform:translateY(30px) scale(.7);transition:opacity .4s,transform .5s cubic-bezier(.34,1.5,.5,1),visibility .4s,background .3s,color .3s}
.dx-top.show{opacity:1;visibility:visible;transform:none}
.dx-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dx-top-ring circle{fill:none;stroke-width:3}
.dx-top-ring .bg{stroke:#e3ecff}
.dx-top-ring .fg{stroke:var(--dx-blue);stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset .15s linear}
.dx-top-ic{width:22px;height:22px;position:relative;transition:transform .35s var(--dx-ease)}
.dx-top:hover{background:var(--dx-blue);color:#fff;transform:translateY(-5px) scale(1.06)}
.dx-top:hover .dx-top-ring .bg{stroke:rgba(255,255,255,.25)}.dx-top:hover .dx-top-ring .fg{stroke:#fff}
.dx-top:hover .dx-top-ic{animation:dxRocket .9s ease-in-out infinite}
@keyframes dxRocket{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:600px){.dx-top,.dx-wa-float{width:48px;height:48px;bottom:16px}.dx-top{right:14px}.dx-wa-float{left:14px}}

/* reCAPTCHA */
.dx-captcha{margin-top:18px;min-height:78px;max-width:100%;overflow:hidden}
@media (max-width:380px){.dx-captcha .dx-recaptcha{transform:scale(.88);transform-origin:0 0}}
.hm-sol-a::after{content:"";position:absolute;inset:0;z-index:2}
.hm-more{position:relative;z-index:1;font:600 12px 'Inter',sans-serif;color:var(--dx-blue);margin:-6px 0 12px;opacity:.85;transition:transform .3s}
.hm-sol:hover .hm-more{transform:translateX(5px)}

/* never let decorative/marquee content create sideways scrolling */
.dx-marquee{overflow:hidden}
main{overflow-x:clip}