/*
Theme Name: Huber Solutions
Version: 6.1 Performance
*/

/* VARIABLES */
:root{
--primary:#1f9d55;--primary-600:#178447;--primary-300:#8ad5ad;--primary-light:#e6f7ee;
--ink:#0e1116;--ink-light:#2a3140;--muted:#5b6573;--line:#e7ebf0;--bg:#fbfcfe;--card:#fff;
--gradient-primary:linear-gradient(135deg,#1f9d55 0%,#16a34a 100%);
--shadow-sm:0 4px 12px rgba(10,14,29,.08);--shadow-md:0 12px 36px rgba(10,14,29,.12);
--shadow-lg:0 32px 72px rgba(10,14,29,.16);--shadow-xl:0 40px 80px rgba(10,14,29,.2);
--radius:24px;--radius-sm:12px;--radius-lg:32px;
--tr:all .32s cubic-bezier(.22,.61,.36,1);--tr-smooth:all .6s cubic-bezier(.22,.61,.36,1);
--section-padding:100px;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:var(--tr)}
a:hover{color:var(--primary)}

/* LAYOUT */
.container{width:min(1200px,94%);margin-inline:auto}
.site{min-height:100vh;display:flex;flex-direction:column}
.site-content{flex:1}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* SCROLL PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:var(--gradient-primary);z-index:9999;transition:width .1s ease}

/* TOP BAR */
.top-bar{background:#0f172a;color:#cbd5e1;font-size:.92rem;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.top-bar a{color:#e2e8f0;opacity:.92;transition:var(--tr)}
.top-bar a:hover{opacity:1;color:#fff}

/* HEADER */
.header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(150%) blur(12px);background:rgba(255,255,255,.85);border-bottom:1px solid rgba(15,23,42,.08);transition:var(--tr)}
.header.scrolled{box-shadow:var(--shadow-sm);background:rgba(255,255,255,.95)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:14px;transition:var(--tr)}
.brand:hover{transform:translateY(-2px)}
.brand-logo{width:48px;height:48px;object-fit:contain;transition:var(--tr)}
.brand:hover .brand-logo{transform:rotate(-5deg) scale(1.05)}
.brand-name{font-weight:800;letter-spacing:.3px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.menu{display:flex;gap:8px;align-items:center}
.menu .nav-link{padding:12px 14px;border-radius:12px;font-weight:600;color:#1f2937;position:relative;transition:var(--tr)}
.menu .nav-link::after{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%) scaleX(0);width:60%;height:2px;background:var(--primary);border-radius:2px;transition:var(--tr)}
.menu .nav-link:hover{background:var(--primary-light);color:var(--primary-600)}
.menu .nav-link:hover::after{transform:translateX(-50%) scaleX(1)}
.menu .nav-link.active::after{transform:translateX(-50%) scaleX(1)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:.82rem 1.2rem;font-weight:700;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden;white-space:nowrap}
.btn-lg{padding:1rem 1.6rem;font-size:1.05rem}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-3d{box-shadow:0 4px 0 var(--primary-600),var(--shadow-sm)}
.btn-3d:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--primary-600),var(--shadow-sm)}
.btn-3d:active{transform:translateY(4px);box-shadow:0 0 0 var(--primary-600),var(--shadow-sm)}
.btn-outline{border:2px solid var(--line);background:#fff;color:var(--ink)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-whatsapp{border-color:#25D366;color:#065f46}
.btn-whatsapp:hover{border-color:#22c55e;background:#dcfce7}

/* HERO */
.hero{position:relative;overflow:hidden;color:#0b1222;background:radial-gradient(1200px 500px at 10% 0%,#dff6e8 0%,transparent 70%),radial-gradient(1100px 600px at 100% 0%,#eaf7ff 0%,transparent 65%);isolation:isolate;min-height:90vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;will-change:transform}
.shape-1{width:600px;height:600px;background:radial-gradient(circle,rgba(31,157,85,.3),transparent);top:-200px;left:-100px}
.shape-2{width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.25),transparent);bottom:-150px;right:-100px}
.shape-3{width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.2),transparent);top:50%;right:20%}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:80px 0;align-items:center}
.hero-content{z-index:2}
.hero h1{font-size:3.5rem;line-height:1.08;margin:16px 0;font-weight:900}
.gradient-text{display:block;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lead{font-size:1.15rem;color:#2a3140;max-width:740px;margin:0 0 24px;line-height:1.75}
.kicker{display:inline-block;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;font-weight:800;color:var(--primary);padding:6px 12px;background:var(--primary-light);border-radius:8px}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-block;padding:.5rem .9rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:.88rem;transition:var(--tr)}
.badge:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.badge-pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,157,85,.4)}50%{box-shadow:0 0 0 10px rgba(31,157,85,0)}}
.cta-group{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.card-glow{position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(31,157,85,.15),transparent 70%);animation:glow-rotate 10s linear infinite}
@keyframes glow-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* SECTIONS */
.section{padding:var(--section-padding) 0;position:relative}
.section-head{text-align:center;margin-bottom:48px;max-width:800px;margin-left:auto;margin-right:auto}
.h2{font-size:2.6rem;margin:10px 0;font-weight:900;line-height:1.2}
.muted{color:var(--muted);font-size:1.05rem}

/* CARDS */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:var(--tr);position:relative;overflow:hidden}
.card-hover:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--primary-300)}
.card-tilt{will-change:transform}
.card-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-100%) translateY(-100%);transition:transform .6s ease;pointer-events:none}
.card:hover .card-shine{transform:translateX(100%) translateY(100%)}
.card-highlight{border:2px solid var(--primary);background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%)}

/* ICONS */
.icon{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#f3faf6,#fff);border:1px solid var(--line);font-size:1.8rem;margin-bottom:14px;transition:var(--tr)}
.card:hover .icon{transform:scale(1.1) rotate(5deg);box-shadow:var(--shadow-md)}

/* FEATURES */
.features{list-style:none;margin:18px 0 0;padding:0}
.features li{padding:.5rem 0 .5rem 1.5rem;position:relative;color:#2a3140;transition:var(--tr)}
.features li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:900;font-size:1.2rem}
.features li:hover{transform:translateX(4px);color:var(--primary-600)}

/* PORTFOLIO */
.portfolio-item{display:block;border-radius:var(--radius);overflow:hidden;position:relative;transition:var(--tr)}
.portfolio-item:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.portfolio-image{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}
.portfolio-image img{width:100%;height:280px;object-fit:cover;transition:transform .6s ease}
.portfolio-item:hover img{transform:scale(1.08)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));display:flex;align-items:flex-end;padding:24px;opacity:0;transition:var(--tr)}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.overlay-content{color:#fff;display:flex;flex-direction:column;gap:6px}
.overlay-content strong{font-size:1.2rem;font-weight:800}
.overlay-content span{font-size:.95rem;opacity:.9}

/* CTA BANNER */
.cta-banner{background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%)}
.cta-box{background:var(--card);border:2px solid var(--primary);border-radius:var(--radius-lg);padding:48px;display:flex;align-items:center;justify-content:space-between;gap:32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(31,157,85,.1),transparent 70%);animation:glow-rotate 15s linear infinite;pointer-events:none}
.cta-content h3{font-size:1.8rem;margin:0 0 12px;font-weight:900}
.cta-content p{margin:0;color:var(--muted);font-size:1.05rem}
.cta-actions{display:flex;gap:12px;flex-shrink:0}

/* FAQ */
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 24px;box-shadow:var(--shadow-sm);transition:var(--tr);cursor:pointer}
.faq-item:hover{border-color:var(--primary-300);box-shadow:var(--shadow-md)}
.faq-item[open]{border-color:var(--primary);box-shadow:var(--shadow-md)}
.faq-item summary{list-style:none;cursor:pointer;font-weight:800;display:flex;align-items:center;gap:12px;padding:6px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{width:28px;height:28px;display:grid;place-items:center;background:var(--primary-light);border-radius:8px;font-size:1.4rem;color:var(--primary);transition:var(--tr);flex-shrink:0}
.faq-item[open] .faq-icon{transform:rotate(45deg);background:var(--primary);color:#fff}
.faq-answer{color:var(--muted);margin-top:12px;padding-left:40px;line-height:1.7}

/* CONTACT FORM */
.contact-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-md)}
.form-row{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-weight:600;font-size:.95rem;color:var(--ink-light)}
.control{width:100%;padding:15px 18px;border-radius:14px;border:2px solid #e6ebf1;outline:none;transition:var(--tr);font-family:inherit;font-size:1rem;background:#fff}
.control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(31,157,85,.15)}
textarea.control{min-height:150px;resize:vertical}
select.control{cursor:pointer}
.form-msg{padding:12px 16px;border-radius:12px;margin:16px 0;display:none;font-weight:600}
.form-msg.success{display:block;background:#dcfce7;color:#065f46;border:1px solid #86efac}
.form-msg.error{display:block;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.form-hint{margin-top:16px;font-size:.95rem;color:var(--muted)}
.form-hint a{color:var(--primary);font-weight:600}

/* CONTACT INFO */
.card-contact{height:100%}
.contact-details{display:flex;flex-direction:column;gap:16px}
.contact-item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;transition:var(--tr)}
.contact-item:hover{background:var(--primary-light)}
.contact-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--primary-light);border-radius:12px;font-size:1.4rem;flex-shrink:0}

/* FOOTER */
.site-footer{background:#0b1222;color:#cbd5e1;margin-top:auto}
.footer-top{padding:72px 0}
.footer-brand{font-size:1.3rem;font-weight:900;color:#fff;margin-bottom:12px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:6px 0}
.footer-links a{display:inline-block;padding:6px 0;color:#cbd5e1;transition:var(--tr)}
.footer-links a:hover{color:#fff;transform:translateX(4px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}

/* FLOATING DOCK */
.contact-dock{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;z-index:999}
.dock-btn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow-md);transition:var(--tr-smooth);position:relative;cursor:pointer}
.dock-btn:hover{transform:translateY(-4px) scale(1.1);box-shadow:var(--shadow-xl)}
.dock-wa{background:linear-gradient(135deg,#25D366,#128C7E)}
.dock-call{background:linear-gradient(135deg,#0ea5e9,#0284c7)}
.dock-mail{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.dock-tip{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(6px);background:#0b1222;color:#fff;padding:8px 14px;border-radius:8px;font-size:.88rem;font-weight:600;opacity:0;pointer-events:none;transition:var(--tr);white-space:nowrap;box-shadow:var(--shadow-lg)}
.dock-btn:hover .dock-tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* MOBILE BAR */
.mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:998;display:none;grid-template-columns:repeat(3,1fr);gap:8px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px;box-shadow:0 -4px 12px rgba(0,0,0,.08)}
.mobile-cta-bar a{display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:12px;padding:12px 10px;font-weight:700;font-size:.9rem;border:2px solid var(--line);transition:var(--tr)}
.mobile-cta-bar a:nth-child(1){border-color:#25D366;color:#064e3b}
.mobile-cta-bar a:nth-child(1):hover{background:#dcfce7}
.mobile-cta-bar a:nth-child(2){border-color:#0ea5e9;color:#075985}
.mobile-cta-bar a:nth-child(2):hover{background:#e0f2fe}
.mobile-cta-bar a:nth-child(3){border-color:#6366f1;color:#312e81}
.mobile-cta-bar a:nth-child(3):hover{background:#e0e7ff}

/* MOBILE MENU */
.menu-toggle{display:none;border:none;background:transparent;cursor:pointer;padding:8px;flex-direction:column;gap:5px;transition:var(--tr)}
.menu-toggle span{width:28px;height:3px;background:var(--ink);border-radius:2px;transition:var(--tr)}
.menu-toggle:hover span{background:var(--primary)}

/* ANIMATIONS */
[data-animate="fade-up"]{opacity:0;transform:translateY(40px);transition:var(--tr-smooth)}
[data-animate="fade-up"].animated{opacity:1;transform:translateY(0)}
[data-animate="fade-left"]{opacity:0;transform:translateX(40px);transition:var(--tr-smooth)}
[data-animate="fade-left"].animated{opacity:1;transform:translateX(0)}
[data-animate="fade"]{opacity:0;transition:var(--tr-smooth)}
[data-animate="fade"].animated{opacity:1}
[data-animate="zoom-in"]{opacity:0;transform:scale(.9);transition:var(--tr-smooth)}
[data-animate="zoom-in"].animated{opacity:1;transform:scale(1)}

/* DELAYS */
[data-delay="100"].animated{transition-delay:.1s}
[data-delay="200"].animated{transition-delay:.2s}
[data-delay="300"].animated{transition-delay:.3s}
[data-delay="400"].animated{transition-delay:.4s}
[data-delay="500"].animated{transition-delay:.5s}
[data-delay="600"].animated{transition-delay:.6s}
[data-delay="700"].animated{transition-delay:.7s}
[data-delay="750"].animated{transition-delay:.75s}
[data-delay="800"].animated{transition-delay:.8s}
[data-delay="850"].animated{transition-delay:.85s}

/* INFO ROW */
.info-row{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-top:24px}

/* RESPONSIVE */
@media (max-width:991px){
:root{--section-padding:80px}
.hero-inner{grid-template-columns:1fr;gap:32px;padding:60px 0}
.hero h1{font-size:2.8rem}
.h2{font-size:2.2rem}
.grid-3{grid-template-columns:repeat(2,1fr)}
.menu{display:none;position:absolute;left:0;right:0;top:70px;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border-top:1px solid var(--line);flex-direction:column;padding:16px;box-shadow:var(--shadow-lg);animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.menu.open{display:flex}
.menu .nav-link{padding:16px;width:100%;text-align:center}
.menu .btn{margin:8px 0;width:100%}
.menu-toggle{display:flex}
.cta-box{flex-direction:column;text-align:center;padding:32px 24px}
.cta-actions{width:100%;flex-direction:column}
.cta-actions .btn{width:100%}
}

@media (max-width:767px){
:root{--section-padding:60px}
.hero h1{font-size:2.2rem}
.h2{font-size:1.8rem}
.lead{font-size:1rem}
.grid-3,.grid-2{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.contact-dock{display:none}
.mobile-cta-bar{display:grid}
body{padding-bottom:70px}
.cta-group{flex-direction:column}
.cta-group .btn{width:100%;justify-content:center}
.footer-bottom{flex-direction:column;text-align:center;gap:12px}
.info-row{flex-direction:column;text-align:center}
}

@media (max-width:575px){
.hero-inner{padding:40px 0}
.hero h1{font-size:1.9rem}
.section{padding:50px 0}
.card{padding:20px}
.btn{padding:.7rem 1rem;font-size:.95rem}
.btn-lg{padding:.85rem 1.2rem}
.top-bar{font-size:.85rem}
.top-bar .container{flex-direction:column;gap:8px}
.top-bar .container>div{flex-direction:column;gap:8px}
}

/* ACCESSIBILITY */
*:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (prefers-contrast:high){:root{--line:#000}.card{border-width:2px}.btn{border-width:2px}}