:root{--bg:#f0f0f5;--bg2:#e8e8f0;--bg3:#dcdcec;--card:#ffffff;--card2:#f5f5fc;--purple:#7c3aed;--purple2:#6d28d9;--purple3:#8b5cf6;--pg:rgba(124,58,237,.2);--pg2:rgba(124,58,237,.10);--text:#1a1640;--text2:#3a3560;--text3:#6b6490;--border:rgba(124,58,237,.2);--border2:rgba(124,58,237,.10);--font-head:"Exo 2",sans-serif;--font-body:"Rajdhani",sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.5;min-height:100vh}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}




.topbar-item svg{color:var(--purple2);flex-shrink:0}

.navbar{position:sticky;top:0;z-index:1000;background:rgba(10,10,15,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.navbar-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-p2c{font-family:var(--font-head);font-size:25px;font-weight:900;color:#fff;letter-spacing:-1px}
.logo-tech{font-family:var(--font-head);font-size:25px;font-weight:900;color:var(--purple2);letter-spacing:-1px}
.logo-sub{font-family:var(--font-body);font-size:9px;color:var(--purple3);letter-spacing:2px;text-transform:uppercase;display:block;margin-top:-3px;font-weight:500}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{font-family:var(--font-body);font-size:15px;font-weight:700;color:#ffffff!important;text-decoration:none;padding:7px 11px;border-radius:6px;transition:all .2s;letter-spacing:.5px;position:relative;cursor:pointer}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::after{content:'';position:absolute;bottom:0;left:11px;right:11px;height:2px;background:var(--purple2);border-radius:1px}
.nav-dropdown{position:relative}
.nav-dropdown-btn{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:#ffffff;background:none;border:none;cursor:pointer;padding:7px 11px;border-radius:6px;transition:all .2s;letter-spacing:.5px;display:flex;align-items:center;gap:4px}
.nav-dropdown-btn:hover{color:var(--purple3)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 2px);left:0;background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:16px;min-width:660px;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 30px var(--pg);z-index:200;padding-top:20px}
.nav-dropdown::before{content:'';position:absolute;top:100%;left:0;right:0;height:10px}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nav-dropdown-menu:hover{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mega-col{display:flex;flex-direction:column;gap:2px}
.mega-col-head{font-size:10px;font-weight:800;color:var(--purple3);letter-spacing:1.5px;text-transform:uppercase;padding:6px 8px 4px;background:var(--pg2);border-radius:6px;margin-bottom:4px}
.mega-item{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:6px;color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;transition:all .15s;cursor:pointer;white-space:nowrap}
.mega-item:hover{background:var(--pg2);color:var(--purple3)}
.mega-dot{width:5px;height:5px;border-radius:50%;background:var(--purple);flex-shrink:0}
.search-box{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .2s}
.search-box:focus-within{border-color:var(--purple2)}
.search-input{background:none;border:none;outline:none;padding:8px 13px;font-family:var(--font-body);font-size:13.5px;color:var(--text);width:190px}
.search-input::placeholder{color:var(--text3)}
.search-btn{background:var(--purple);border:none;cursor:pointer;padding:8px 13px;color:#fff;transition:background .2s;display:flex;align-items:center}
.search-btn:hover{background:var(--purple2)}
.wa-btn-nav{background:#25d366;border:none;cursor:pointer;width:36px;height:36px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;text-decoration:none;color:#fff}
.wa-btn-nav:hover{background:#20b858;transform:scale(1.05)}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:800px;display:flex;align-items:center;background:#f0eff8;padding-bottom:60px;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img:not(.hero-img-dark):not(.hero-img-light){width:100%;height:100%;object-fit:cover;object-position:right center;opacity:1}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,238,252,0.92) 0%,rgba(240,238,252,0.70) 30%,rgba(240,238,252,0.10) 52%,rgba(240,238,252,0) 65%)}
.hero-grad{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 50% 80% at 18% 50%,rgba(139,43,226,.22) 0%,transparent 60%)}


/* NEW HERO LAYOUT: left text + right PC animation */
.hero-inner{max-width:1400px;margin:0 auto;padding:70px 48px;position:relative;z-index:2;width:100%}
.hero-welcome{font-size:12px;color:rgba(255,255,255,0.8);letter-spacing:4px;text-transform:uppercase;font-weight:600;margin-bottom:7px}
.hero-title{font-family:var(--font-head);font-size:74px;font-weight:900;line-height:.92;margin-bottom:5px;text-shadow:0 0 40px rgba(139,43,226,.35);color:#ffffff!important}
.hero-title span{color:var(--purple2)}
.hero-subtitle{font-family:var(--font-head);font-size:23px;font-weight:700;color:#ffffff!important;margin-bottom:14px}
.hero-desc{font-size:14.5px;color:rgba(255,255,255,0.85);margin-bottom:26px;max-width:390px;line-height:1.7}
.hero-badges{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.hero-badge{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--text2);letter-spacing:1px;text-transform:uppercase}
.hero-badge svg{color:var(--purple2)}
.hero-cta{display:inline-flex;align-items:center;gap:9px;background:transparent;border:2px solid var(--purple2);color:var(--text);font-family:var(--font-body);font-size:13.5px;font-weight:700;padding:12px 24px;border-radius:8px;text-decoration:none;letter-spacing:1.5px;text-transform:uppercase;transition:all .25s}
.hero-cta:hover{background:var(--purple);border-color:var(--purple);box-shadow:0 0 30px var(--pg);transform:translateY(-2px)}

.hero-pc{display:flex;align-items:center;justify-content:center;position:relative}

/* SECTIONS */
.section{max-width:1400px;margin:0 auto;padding:52px 24px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.section-title{font-family:var(--font-head);font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}
.section-title::before{content:'';width:4px;height:24px;background:var(--purple2);border-radius:2px;display:inline-block}
.see-all{font-size:12.5px;color:var(--purple2);text-decoration:none;font-weight:600;display:flex;align-items:center;gap:4px;transition:color .2s;white-space:nowrap}
.see-all:hover{color:var(--purple3)}

/* MAIN CAT */
.main-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.main-cat-card{background:var(--card);border:1px solid var(--border2);border-radius:11px;padding:16px 10px;text-align:center;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:9px}
.main-cat-card:hover{border-color:var(--purple);background:var(--card2);transform:translateY(-3px);box-shadow:0 8px 26px var(--pg2)}
.main-cat-icon{width:44px;height:44px;background:var(--pg2);border-radius:9px;display:flex;align-items:center;justify-content:center}
.main-cat-icon svg{color:var(--purple2)}
.main-cat-name{font-size:11.5px;font-weight:700;color:var(--text2);letter-spacing:.5px;line-height:1.3;text-transform:uppercase}
.main-cat-card:hover .main-cat-name{color:var(--purple3)}

/* BRANDS MARQUEE */
.brands-section{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:36px 0;overflow:hidden;position:relative}
.brands-section::before,.brands-section::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.brands-section::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.brands-section::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.brands-track{display:flex;gap:64px;animation:marqueeBrands 35s linear infinite;width:max-content;align-items:center;padding:0 32px}
.brands-track:hover{animation-play-state:paused}
@keyframes marqueeBrands{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.brand-item{display:flex;align-items:center;justify-content:center;opacity:0.55;transition:all .3s;white-space:nowrap;flex-shrink:0;text-decoration:none;cursor:pointer;padding:8px 16px}
.brand-item:hover{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 8px rgba(168,85,247,0.5));}

/* SUBCAT */
.subcat-section{max-width:1400px;margin:0 auto;padding:0 24px 36px}
.subcat-group-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border2)}
.subcat-group-title{font-family:var(--font-head);font-size:19px;font-weight:800}
.subcat-badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:1px;text-transform:uppercase}
.badge-nvidia{background:rgba(118,185,0,.15);color:#76b900;border:1px solid rgba(118,185,0,.3)}
.badge-amd{background:rgba(237,28,36,.15);color:#ed1c24;border:1px solid rgba(237,28,36,.3)}
.badge-intel{background:rgba(0,113,197,.15);color:#0071c5;border:1px solid rgba(0,113,197,.3)}
.badge-ddr4{background:rgba(139,43,226,.15);color:var(--purple3);border:1px solid var(--border)}
.badge-ddr5{background:rgba(168,85,247,.2);color:var(--purple2);border:1px solid rgba(168,85,247,.4)}
.subcat-controls{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.subcat-toggle{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:7px 15px;border-radius:20px;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;transition:all .2s;letter-spacing:.5px}
.subcat-toggle:hover{border-color:var(--purple);color:var(--purple3)}
.subcat-toggle.active-toggle{background:var(--purple);border-color:var(--purple);color:#fff}
.subcat-divider{flex:1}
.subcat-see-all{font-size:12px;color:var(--purple2);text-decoration:none;font-weight:600;white-space:nowrap;cursor:pointer}
.subcat-see-all:hover{color:var(--purple3)}

/* SORT */
.sort-bar{display:flex;align-items:center;gap:7px;margin-bottom:13px;flex-wrap:wrap}
.sort-label{font-size:11.5px;color:var(--text3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.sort-btn{background:var(--card);border:1px solid var(--border2);color:var(--text3);padding:4px 11px;border-radius:6px;cursor:pointer;font-family:var(--font-body);font-size:12px;font-weight:600;transition:all .18s}
.sort-btn:hover{border-color:var(--purple);color:var(--purple3)}
.sort-btn.active-sort{background:var(--pg2);border-color:var(--purple);color:var(--purple3)}

/* PRODUCT CARDS */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.product-card{background:#1a1830;border:1px solid rgba(139,43,226,0.3);border-radius:11px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column}
.product-card:hover{border-color:var(--purple2);transform:translateY(-4px);box-shadow:0 12px 38px rgba(168,85,247,.35)}
.product-img{width:100%;height:165px;background:linear-gradient(135deg,var(--bg3),var(--bg2));display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border2);position:relative;overflow:hidden;}
.product-img svg{opacity:.1}
.product-img img.card-product-preview{width:100%;height:100%;object-fit:contain;padding:12px;display:block;position:absolute;inset:0;z-index:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));transition:transform .25s ease,opacity .25s ease}
.product-card:hover .product-img img.card-product-preview{transform:scale(1.04)}
.product-img .product-img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.product-img .product-img-badge{position:absolute;bottom:8px;right:8px;z-index:2;background:rgba(139,43,226,0.22);border:1px solid rgba(168,85,247,.25);border-radius:6px;padding:3px 7px;font-size:9px;font-weight:700;color:var(--purple3);letter-spacing:1px;backdrop-filter:blur(4px)}
.product-info{padding:11px;flex:1;display:flex;flex-direction:column;gap:6px;background:#1a1830}
.product-cat-tag{font-size:11px;font-weight:800;color:#c084fc;letter-spacing:1.5px;text-transform:uppercase;background:rgba(139,43,226,0.15);padding:2px 6px;border-radius:4px;display:inline-block;margin-bottom:2px}
.product-name{font-size:14px;font-weight:700;color:#f0f0ff;line-height:1.4;flex:1}
.product-price{font-family:var(--font-head);font-size:20px;font-weight:900;color:#ffffff}
.product-price-usd{font-family:var(--font-head);font-size:20px;font-weight:900;color:#c084fc}
.product-price-old{font-size:11.5px;color:var(--text3);text-decoration:line-through}
.product-consult{display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid var(--border);color:var(--text2);font-family:var(--font-body);font-size:11.5px;font-weight:600;padding:7px;border-radius:6px;cursor:pointer;transition:all .2s;text-decoration:none;margin-top:4px;letter-spacing:.5px;text-transform:uppercase}
.product-consult:hover{background:#25d366;border-color:#25d366;color:#fff}

/* REDES SECTION */
.redes-section{background:linear-gradient(135deg,rgba(139,43,226,.12),rgba(139,43,226,.04));border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:52px 0}
.redes-inner{max-width:1400px;margin:0 auto;padding:0 24px}
.redes-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:700px;margin:0 auto}
.red-card{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:28px;display:flex;align-items:center;gap:20px;text-decoration:none;transition:all .3s;position:relative;overflow:hidden}
.red-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s}
.red-card:hover{transform:translateY(-4px)}
.red-card.instagram::before{background:linear-gradient(135deg,rgba(225,48,108,.08),rgba(255,220,128,.04),rgba(64,93,230,.04))}
.red-card.facebook::before{background:linear-gradient(135deg,rgba(24,119,242,.08),rgba(24,119,242,.02))}
.red-card:hover::before{opacity:1}
.red-card.instagram:hover{border-color:rgba(225,48,108,.5);box-shadow:0 12px 40px rgba(225,48,108,.15)}
.red-card.facebook:hover{border-color:rgba(24,119,242,.5);box-shadow:0 12px 40px rgba(24,119,242,.15)}
.red-icon{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.red-icon.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.red-icon.fb{background:#1877f2}
.red-info h3{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text);margin-bottom:3px}
.red-info p{font-size:13px;color:var(--text3);margin-bottom:6px}
.red-handle{font-size:14px;font-weight:700;color:var(--purple3)}
.red-card.instagram .red-handle{background:linear-gradient(90deg,#f09433,#dc2743,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.red-card.facebook .red-handle{color:#1877f2;-webkit-text-fill-color:#1877f2}
.red-follow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:6px}

/* CATALOG */
#catalog-page{display:none;min-height:60vh}
.catalog-layout{max-width:1400px;margin:0 auto;padding:32px 24px;display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.sidebar{background:var(--card);border:1px solid var(--border2);border-radius:13px;padding:16px;position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar-section-title{font-size:9.5px;font-weight:800;color:var(--text3);letter-spacing:2px;text-transform:uppercase;padding:3px 8px;margin-bottom:4px;margin-top:10px}
.sidebar-section-title:first-child{margin-top:0}
.sidebar-all{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:7px;cursor:pointer;transition:all .15s;font-size:13px;color:var(--text2);font-weight:600}
.sidebar-all:hover,.sidebar-sub:hover{background:var(--bg3);color:var(--text)}
.sidebar-all.active,.sidebar-sub.active{background:var(--pg2);color:var(--purple3);font-weight:700}
.sidebar-sub{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 6px 18px;border-radius:6px;cursor:pointer;transition:all .15s;font-size:12px;color:var(--text3);font-weight:500}
.sidebar-count{display:none}

.sidebar-divider{height:1px;background:var(--border2);margin:8px 0}
.catalog-main-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:10px}
.catalog-title-block h2{font-family:var(--font-head);font-size:21px;font-weight:800}
.catalog-count{display:none}
.cat-search-input{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:8px 14px;font-family:var(--font-body);font-size:13px;color:var(--text);outline:none;width:230px;transition:border-color .2s}
.cat-search-input:focus{border-color:var(--purple2)}
.cat-search-input::placeholder{color:var(--text3)}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:11px}
.pagination{display:flex;gap:5px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.page-btn{min-width:34px;height:34px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;padding:0 9px;font-family:var(--font-body)}
.page-btn:hover{border-color:var(--purple);color:var(--purple3)}
.page-btn.active{background:var(--purple);border-color:var(--purple);color:#fff}
.page-btn:disabled{opacity:.35;cursor:not-allowed}
.no-results{text-align:center;padding:60px 20px;color:var(--text3);grid-column:1/-1}
.no-results h3{font-family:var(--font-head);font-size:17px;color:var(--text2);margin-bottom:5px;margin-top:10px}

/* FEATURES */
.features-bar{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:34px 0}
.features-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.feature-icon{width:50px;height:50px;background:var(--pg2);border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;justify-content:center}
.feature-icon svg{color:var(--purple2)}
.feature-title{font-family:var(--font-head);font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.feature-desc{font-size:12px;color:var(--text3);line-height:1.5}

/* NEWSLETTER */
.newsletter{background:linear-gradient(135deg,rgba(139,43,226,.15),rgba(139,43,226,.05));border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:42px 0}
.newsletter-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.newsletter-text h3{font-family:var(--font-head);font-size:21px;font-weight:800;margin-bottom:4px}
.newsletter-text p{color:var(--text2);font-size:13.5px}
.newsletter-form{display:flex;border-radius:8px;overflow:hidden;border:1px solid var(--border);flex:1;max-width:380px}
.newsletter-input{flex:1;background:var(--bg3);border:none;outline:none;padding:11px 15px;font-family:var(--font-body);font-size:13.5px;color:var(--text)}
.newsletter-input::placeholder{color:var(--text3)}
.newsletter-submit{background:var(--purple);border:none;color:#fff;padding:11px 20px;font-family:var(--font-body);font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:background .2s;white-space:nowrap}
.newsletter-submit:hover{background:var(--purple2)}

/* FOOTER */
footer{background:#f5f4ff;border-top:1px solid var(--border2);padding:50px 0 20px}
.footer-inner{max-width:1400px;margin:0 auto;padding:0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand p{color:var(--text3);font-size:13px;line-height:1.7;margin-top:10px;margin-bottom:16px}
.footer-social{display:flex;gap:9px}
.social-btn{width:33px;height:33px;border-radius:7px;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--text3);text-decoration:none;transition:all .2s}
.social-btn:hover{border-color:var(--purple);color:var(--purple2)}
.footer-col h4{font-family:var(--font-head);font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:13px;color:var(--text)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{color:var(--text3);text-decoration:none;font-size:13px;transition:color .2s}
.footer-col ul li a:hover{color:var(--purple3)}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px}
.footer-contact-item svg{color:var(--purple2);flex-shrink:0;margin-top:2px}
.footer-contact-item span{font-size:13px;color:var(--text3);line-height:1.5}
.footer-bottom{border-top:1px solid var(--border2);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-copy,.footer-dev{font-size:11.5px;color:var(--text3)}
.footer-dev span{color:var(--purple3)}
.wa-float{position:fixed;bottom:24px;right:24px;z-index:999;width:54px;height:54px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(37,211,102,.5);text-decoration:none;transition:all .25s;color:#fff}
.wa-float:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(37,211,102,.6)}

@media(max-width:1100px){.catalog-layout{grid-template-columns:1fr}.sidebar{position:static;max-height:none}.hero-inner{grid-template-columns:1fr 380px}.hero-pc{display:flex}}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr!important;padding:48px 24px!important}
  .hero-pc{display:none!important}
  .hero-title{font-size:52px}
  .hero-desc{max-width:100%}
  .hero-inner{padding:48px 20px}
  .features-inner{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .search-box{display:none}
  .redes-cards{grid-template-columns:1fr}
  .main-cats{grid-template-columns:repeat(3,1fr)}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .catalog-grid{grid-template-columns:repeat(2,1fr)}
  .catalog-layout{padding:20px 16px}
  .section{padding:36px 16px}
  .modal-body{grid-template-columns:1fr!important;gap:16px}
  .modal-box{border-radius:14px;max-height:95vh}
  .nav-dropdown-menu{min-width:96vw;left:-20px}
}
@media(max-width:600px){
  
  .topbar-item:nth-child(3){display:none}
  .features-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .newsletter-inner{flex-direction:column}
  .hero-title{font-size:42px}
  .hero-subtitle{font-size:18px}
  .main-cats{grid-template-columns:repeat(2,1fr)!important}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .catalog-grid{grid-template-columns:repeat(1,1fr)}
  .hero-badges{gap:12px}
  .hero-cta{font-size:13px;padding:11px 18px}
  .brands-track{gap:32px}
  .brand-item img{height:40px!important;max-width:120px!important}
  .section-title{font-size:20px}
  .modal-price,.modal-price-usd{font-size:26px!important}
  .modal-body{padding:16px 18px 24px!important}
  .subcat-controls{gap:6px}
  .subcat-toggle{padding:6px 10px;font-size:12px}
  .sort-bar{gap:5px}
  .sort-btn{padding:4px 8px;font-size:11px}
  .catalog-main-header{flex-direction:column;align-items:flex-start}
  .cat-search-input{width:100%!important}
  .redes-cards{grid-template-columns:1fr}
  .footer-col:nth-child(2),.footer-col:nth-child(3){display:none}
  .wa-float{width:48px;height:48px;bottom:18px;right:18px}
  .pagination{gap:4px}
  .page-btn{min-width:30px;height:30px;font-size:12px}
}

/* ═══════════════ PRODUCT MODAL ═══════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#13111f;border:1px solid rgba(139,43,226,0.4);
  border-radius:18px;max-width:860px;width:100%;max-height:90vh;
  overflow-y:auto;position:relative;
  box-shadow:0 0 80px rgba(139,43,226,0.3);
  animation:modalIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(0.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-box::-webkit-scrollbar{width:4px}
.modal-box::-webkit-scrollbar-thumb{background:var(--purple);border-radius:2px}
.modal-close{
  position:sticky;top:0;left:100%;z-index:10;
  float:right;margin:16px 16px 0 0;
  width:36px;height:36px;border-radius:50%;
  background:rgba(139,43,226,0.2);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.modal-close:hover{background:var(--purple);color:#fff;}
.modal-body{padding:28px 32px 36px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.modal-img-area{
  background:linear-gradient(135deg,#1a1830,#0d0b18);
  border-radius:14px;border:1px solid var(--border2);
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.modal-img-area::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(139,43,226,0.15),transparent 70%);
}
.modal-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0.3;}
.modal-img-placeholder svg{width:80px;height:80px;}
.modal-img-placeholder span{font-family:var(--font-head);font-size:13px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;}
.modal-info{display:flex;flex-direction:column;gap:16px;}
.modal-cat{font-size:10px;font-weight:800;color:var(--purple3);letter-spacing:2px;text-transform:uppercase;background:rgba(139,43,226,0.15);padding:3px 10px;border-radius:20px;display:inline-block;width:fit-content;}
.modal-title{font-family:var(--font-head);font-size:20px;font-weight:800;color:#fff;line-height:1.35;}
.modal-price-block{display:flex;flex-direction:column;gap:4px;padding:14px;background:#1a1830;border-radius:10px;border:1px solid var(--border);}
.modal-price-old{font-size:13px;color:var(--text3);text-decoration:line-through;}
.modal-price{font-family:var(--font-head);font-size:32px;font-weight:900;color:#fff;}
.modal-price-usd{font-family:var(--font-head);font-size:32px;font-weight:900;color:var(--purple3);}
.modal-divider{height:1px;background:var(--border2);}
.modal-specs{display:flex;flex-direction:column;gap:8px;}
.modal-specs-title{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--text2);letter-spacing:1px;text-transform:uppercase;}
.modal-spec-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;}
.modal-spec-key{color:var(--text3);font-weight:600;min-width:110px;flex-shrink:0;}
.modal-spec-val{color:var(--text);font-weight:500;line-height:1.5;}
.modal-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#25d366;color:#fff;border:none;border-radius:10px;
  padding:14px 24px;font-family:var(--font-body);font-size:15px;
  font-weight:700;cursor:pointer;text-decoration:none;
  letter-spacing:1px;text-transform:uppercase;
  transition:all .2s;width:100%;margin-top:4px;
}
.modal-wa-btn:hover{background:#20b858;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,0.4);}
.modal-badge-row{display:flex;gap:8px;flex-wrap:wrap;}
.modal-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--border);}
.modal-badge.stock-ok{background:rgba(34,197,94,0.1);color:#22c55e;border-color:rgba(34,197,94,0.3);}
.modal-badge.stock-no{background:rgba(239,68,68,0.1);color:#ef4444;border-color:rgba(239,68,68,0.3);}
@media(max-width:700px){
  .modal-body{grid-template-columns:1fr;gap:20px;}
  .modal-box{border-radius:14px;}
  .modal-price{font-size:26px;}
}

/* HERO SLIDER */
.hero-slides{position:relative;z-index:2;width:100%;max-width:560px;padding:0 0 0 32px}
.hero-slide{display:none;animation:slideIn .5s ease;color:#fff}
.hero-slide.active{display:block;color:#fff}
@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero-dots{display:flex;gap:10px;position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:20;}
.hero-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all .3s;border:2px solid rgba(255,255,255,0.3);padding:0;display:block;box-shadow:0 0 8px rgba(0,0,0,0.8);}
.hero-dot.active{background:var(--purple2);width:30px;border-radius:5px;border-color:var(--purple2);box-shadow:0 0 12px rgba(168,85,247,0.7);}

/* Featured grid in hero slide */
.hero-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.hero-feat-card{background:rgba(255,255,255,0.95);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:all .2s;backdrop-filter:blur(4px)}
.hero-feat-card:hover{border-color:var(--purple2);transform:translateY(-2px)}
.hero-feat-cat{font-size:9px;font-weight:700;color:var(--purple3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.hero-feat-name{font-size:11px;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:8px}
.hero-feat-price{font-family:var(--font-head);font-size:17px;font-weight:800;color:#fff}
.hero-feat-btn{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:4px;margin-top:6px;font-weight:600}

/* ═══════════════════════════════════ */
/* PC BUILDER SECTION                  */
/* ═══════════════════════════════════ */
.builder-section{background:linear-gradient(180deg,#f5f4ff 0%,#eeecff 40%,#e8e5ff 100%);border-top:1px solid var(--border2);padding:60px 0}
.builder-inner{max-width:1400px;margin:0 auto;padding:0 24px}
.builder-header{text-align:center;margin-bottom:40px}
.builder-header .section-title{justify-content:center;font-size:32px;margin-bottom:8px}
.builder-header p{color:var(--text2);font-size:15px}

/* STEPS ROW */
.builder-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:36px;flex-wrap:wrap;gap:4px}
.builder-step{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.builder-step-num{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:14px;font-weight:800;color:var(--text3);transition:all .3s}
.builder-step.active .builder-step-num{border-color:var(--purple2);background:var(--purple);color:#fff;box-shadow:0 0 20px var(--purple-glow)}
.builder-step.done .builder-step-num{border-color:var(--purple3);background:var(--purple-glow2);color:var(--purple3)}
.builder-step-label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.builder-step.active .builder-step-label{color:var(--purple3)}
.builder-step.done .builder-step-label{color:var(--purple3);opacity:.7}
.builder-step-line{width:40px;height:2px;background:var(--border2);margin-top:-20px;margin-bottom:20px;align-self:flex-start;margin-top:20px}
.builder-step-line.done{background:var(--purple3)}

/* MAIN BUILDER LAYOUT */
.builder-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}

/* SELECTION PANEL */
.builder-panel{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:24px}
.builder-panel-title{font-family:var(--font-head);font-size:18px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.builder-panel-title span{font-size:13px;color:var(--text3);font-weight:500;font-family:var(--font-body)}
.builder-compat-note{font-size:12px;color:var(--purple3);background:var(--purple-glow2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:16px;display:none}
.builder-compat-note.show{display:block}
.builder-search{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-family:var(--font-body);font-size:13px;color:var(--text);outline:none;width:100%;margin-bottom:14px;transition:border-color .2s}
.builder-search:focus{border-color:var(--purple2)}
.builder-search::placeholder{color:var(--text3)}
.builder-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-height:420px;overflow-y:auto;padding-right:4px}
.builder-products::-webkit-scrollbar{width:4px}
.builder-products::-webkit-scrollbar-thumb{background:var(--purple);border-radius:2px}
.builder-prod-card{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:12px;cursor:pointer;transition:all .2s;position:relative}
.builder-prod-card:hover{border-color:var(--purple);background:var(--card2)}
.builder-prod-card.selected{border-color:var(--purple2);background:rgba(168,85,247,0.1)}
.builder-prod-card.selected::after{content:'✓';position:absolute;top:8px;right:8px;width:20px;height:20px;background:var(--purple2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;line-height:20px;text-align:center}
.builder-prod-card.incompatible{opacity:0.35;cursor:not-allowed;filter:grayscale(50%)}
.builder-prod-name{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:6px}
.builder-prod-price{font-family:var(--font-head);font-size:17px;font-weight:800;color:#fff}
.builder-prod-price-usd{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--purple3)}
.builder-prod-tag{font-size:9px;font-weight:700;color:var(--purple3);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.builder-no-results{text-align:center;padding:40px;color:var(--text3);grid-column:1/-1}

/* NAVIGATION BUTTONS */
.builder-nav{display:flex;gap:10px;margin-top:18px;justify-content:space-between}
.builder-btn{padding:11px 24px;border-radius:8px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none;letter-spacing:.5px}
.builder-btn-prev{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.builder-btn-prev:hover{border-color:var(--purple);color:var(--purple3)}
.builder-btn-next{background:var(--purple);color:#fff}
.builder-btn-next:hover{background:var(--purple2);box-shadow:0 4px 20px var(--purple-glow)}
.builder-btn-next:disabled{opacity:.4;cursor:not-allowed}
.builder-btn-skip{background:transparent;color:var(--text3);border:1px solid var(--border2);font-size:13px;padding:11px 16px}
.builder-btn-skip:hover{color:var(--text2);border-color:var(--border)}

/* SUMMARY PANEL */
.builder-summary{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:20px;position:sticky;top:90px}
.builder-summary-title{font-family:var(--font-head);font-size:17px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.builder-summary-title svg{color:var(--purple2)}
.builder-summary-items{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.builder-summary-item{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:8px;background:var(--bg2);border-radius:8px;border:1px solid var(--border2)}
.builder-summary-item.empty{opacity:.4}
.builder-item-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.builder-item-cat{font-size:9px;font-weight:700;color:var(--purple3);text-transform:uppercase;letter-spacing:1px}
.builder-item-name{font-size:11px;color:var(--text2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.builder-item-price{font-family:var(--font-head);font-size:13px;font-weight:800;color:#fff;white-space:nowrap}
.builder-item-remove{width:18px;height:18px;border-radius:50%;background:rgba(239,68,68,.15);border:none;cursor:pointer;color:#ef4444;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.builder-item-remove:hover{background:#ef4444;color:#fff}
.builder-total{border-top:1px solid var(--border2);padding-top:14px;margin-bottom:14px}
.builder-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.builder-total-label{font-size:13px;color:var(--text3);font-weight:600}
.builder-total-price{font-family:var(--font-head);font-size:26px;font-weight:900;color:#fff}
.builder-total-usd{font-size:12px;color:var(--text3)}
.builder-wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;border:none;border-radius:10px;padding:12px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;letter-spacing:.5px;text-transform:uppercase;transition:all .2s;width:100%;margin-top:4px}
.builder-wa-btn:hover{background:#20b858;transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,211,102,.4)}
.builder-wa-btn:disabled,.builder-wa-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.builder-reset{display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:var(--text3);border:1px solid var(--border2);border-radius:8px;padding:8px;font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;margin-top:6px}
.builder-reset:hover{color:#ef4444;border-color:#ef4444}

/* COMPAT BADGES */
.compat-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.compat-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.5px}
.compat-ok{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.compat-warn{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.compat-err{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.3)}

@media(max-width:900px){
  .builder-layout{grid-template-columns:1fr}
  .builder-summary{position:static}
  .builder-steps{gap:2px}
  .builder-step-line{width:20px}
}

/* ═══════════════════════════════════ */
/* PC BUILDER PAGE                     */
/* ═══════════════════════════════════ */
#builder-page{background:#f5f4ff;min-height:100vh;}
#builder-page.active{display:block}

/* BRAND SELECT PAGE */
.builder-brand-page{min-height:100vh;background:linear-gradient(160deg,#f0eff8 0%,#e8e5ff 50%,#f0eff8 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;position:relative;overflow:hidden}
.builder-brand-page::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--purple) 1px,transparent 1px),linear-gradient(90deg,var(--purple) 1px,transparent 1px);background-size:60px 60px;opacity:.025}
.builder-brand-slogan{font-family:var(--font-head);font-size:clamp(28px,5vw,52px);font-weight:900;text-align:center;line-height:1.1;margin-bottom:12px;color:#1a1640}
.builder-brand-slogan span{color:var(--purple2)}
.builder-brand-sub{color:var(--text2);font-size:17px;text-align:center;margin-bottom:52px;max-width:500px}
.builder-brand-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:700px;width:100%}
.builder-brand-card{background:#ffffff;border:2px solid var(--border);border-radius:20px;padding:40px;cursor:pointer;transition:all .2s;text-align:center;min-width:200px;}
.builder-brand-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s}
.builder-brand-card.amd::before{background:radial-gradient(ellipse at 50% 0%,rgba(237,28,36,.12),transparent 70%)}
.builder-brand-card.intel::before{background:radial-gradient(ellipse at 50% 0%,rgba(0,113,197,.12),transparent 70%)}
.builder-brand-card:hover{transform:translateY(-6px)}
.builder-brand-card.amd:hover{border-color:#ed1c24;box-shadow:0 20px 60px rgba(237,28,36,.25)}
.builder-brand-card.intel:hover{border-color:#0071c5;box-shadow:0 20px 60px rgba(0,113,197,.25)}
.builder-brand-card:hover::before{opacity:1}
.builder-brand-logo{font-family:var(--font-head);font-size:48px;font-weight:900;margin-bottom:8px}
.builder-brand-card.amd .builder-brand-logo{color:#ed1c24}
.builder-brand-card.intel .builder-brand-logo{color:#0071c5}
.builder-brand-label{font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px}
.builder-brand-desc{font-size:13px;color:var(--text3);line-height:1.5}
.builder-brand-sockets{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.builder-socket-tag{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.5px}
.builder-brand-card.amd .builder-socket-tag{background:rgba(237,28,36,.1);color:#ed1c24;border:1px solid rgba(237,28,36,.3)}
.builder-brand-card.intel .builder-socket-tag{background:rgba(0,113,197,.1);color:#0071c5;border:1px solid rgba(0,113,197,.3)}
.builder-back-btn{position:absolute;top:24px;left:24px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:9px 18px;border-radius:8px;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:7px;text-decoration:none}
.builder-back-btn:hover{border-color:var(--purple);color:var(--purple3)}

/* BUILDER MAIN PAGE */
.builder-main-page{min-height:100vh;background:var(--bg)}
.builder-main-hero{background:linear-gradient(135deg,#ebe8ff 0%,#e0dcff 50%,#ebe8ff 100%);padding:32px 0;border-bottom:1px solid var(--border2)}
.builder-main-hero-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.builder-main-slogan{font-family:var(--font-head);font-size:clamp(22px,3vw,36px);font-weight:900;line-height:1.1;color:#1a1640}
.builder-main-slogan span{color:var(--purple2)}
.builder-main-brand-badge{display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:10px;font-family:var(--font-head);font-size:17px;font-weight:800}
.builder-main-brand-badge.amd{background:rgba(237,28,36,.1);border:1px solid rgba(237,28,36,.3);color:#ed1c24}
.builder-main-brand-badge.intel{background:rgba(0,113,197,.1);border:1px solid rgba(0,113,197,.3);color:#0071c5}

/* BUILDER LAYOUT */
.builder-content{max-width:1400px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}

/* LEFT COLUMN - selections */
.builder-left{background:var(--card);border:1px solid var(--border2);border-radius:16px;overflow:hidden;position:sticky;top:88px}
.builder-left-header{background:linear-gradient(135deg,rgba(139,43,226,.15),rgba(139,43,226,.05));padding:16px 20px;border-bottom:1px solid var(--border2)}
.builder-left-title{font-family:var(--font-head);font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.builder-steps-list{padding:12px}
.builder-step-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;transition:all .2s;margin-bottom:2px}
.builder-step-row:hover{background:var(--bg3)}
.builder-step-row.active{background:var(--purple-glow2);border:1px solid var(--border)}
.builder-step-row.done{opacity:.8}
.builder-step-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border2)}
.builder-step-row.active .builder-step-icon{background:var(--purple);border-color:var(--purple)}
.builder-step-row.done .builder-step-icon{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}
.builder-step-info{flex:1;min-width:0}
.builder-step-row-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.builder-step-row.active .builder-step-row-label{color:var(--purple3)}
.builder-step-row-val{font-size:12px;color:var(--text2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.builder-step-price{font-family:var(--font-head);font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.builder-step-check{width:16px;height:16px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex-shrink:0}
.builder-step-empty{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.builder-left-total{padding:14px 20px;border-top:1px solid var(--border2);background:var(--bg2)}
.builder-left-total-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.builder-left-total-price{font-family:var(--font-head);font-size:24px;font-weight:900;color:#fff;margin-bottom:10px}
.builder-wa-send{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;border:none;border-radius:8px;padding:11px;font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;width:100%;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}
.builder-wa-send:hover{background:#20b858;transform:translateY(-1px)}
.builder-wa-send[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}
.builder-reset-small{display:flex;align-items:center;justify-content:center;gap:5px;background:transparent;color:var(--text3);border:1px solid var(--border2);border-radius:7px;padding:7px;font-family:var(--font-body);font-size:11px;cursor:pointer;width:100%;margin-top:6px;transition:all .2s}
.builder-reset-small:hover{color:#ef4444;border-color:#ef4444}

/* RIGHT - product grid */
.builder-right{}
.builder-right-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.builder-right-title{font-family:var(--font-head);font-size:22px;font-weight:800}
.builder-right-title span{color:var(--text3);font-size:14px;font-weight:500;font-family:var(--font-body);margin-left:6px}
.builder-compat-bar{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px}
.builder-compat-bar.ok{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06)}
.builder-compat-bar.warn{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.06)}
.builder-right-search{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-family:var(--font-body);font-size:13px;color:var(--text);outline:none;width:240px;transition:border-color .2s}
.builder-right-search:focus{border-color:var(--purple2)}
.builder-right-search::placeholder{color:var(--text3)}
.builder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.bprod-card{background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:14px;cursor:pointer;transition:all .25s;position:relative}
.bprod-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 8px 30px rgba(139,43,226,.2)}
.bprod-card.selected{border-color:var(--purple2);background:rgba(168,85,247,.08)}
.bprod-card.selected::after{content:'✓ Seleccionado';position:absolute;top:10px;right:10px;background:var(--purple2);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;letter-spacing:.5px}
.bprod-card.incompatible{opacity:.3;cursor:not-allowed}
.bprod-cat{font-size:9px;font-weight:700;color:var(--purple3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px}
.bprod-name{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:8px;min-height:36px}
.bprod-price{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff}
.bprod-price-usd{font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--purple3)}
.bprod-incompat{font-size:9px;color:#ef4444;font-weight:700;margin-top:4px}
.builder-nav-btns{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px;flex-wrap:wrap}
.bnavbtn{padding:11px 24px;border-radius:8px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none;letter-spacing:.5px}
.bnavbtn-prev{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.bnavbtn-prev:hover{border-color:var(--purple);color:var(--purple3)}
.bnavbtn-next{background:var(--purple);color:#fff}
.bnavbtn-next:hover{background:var(--purple2);box-shadow:0 4px 20px var(--purple-glow)}
.bnavbtn-next:disabled{opacity:.35;cursor:not-allowed}
.bnavbtn-skip{background:transparent;color:var(--text3);border:1px solid var(--border2);font-size:13px;padding:11px 16px}
.bnavbtn-skip:hover{color:var(--text2)}

/* REVIEWS SECTION */
.reviews-section{padding:56px 0;background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);overflow:hidden}
.reviews-inner{max-width:1400px;margin:0 auto;padding:0 24px}
.reviews-track-wrap{position:relative;overflow:hidden;margin-top:28px}
.reviews-track-wrap::before,.reviews-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.reviews-track-wrap::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.reviews-track-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.reviews-track{display:flex;gap:18px;animation:reviewsScroll 35s linear infinite;width:max-content}
.reviews-track:hover{animation-play-state:paused}
@keyframes reviewsScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.review-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:20px;width:280px;flex-shrink:0;transition:all .2s}
.review-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 8px 30px rgba(139,43,226,.15)}
.review-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.review-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple2));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:17px;font-weight:800;color:#fff;flex-shrink:0}
.review-author{font-size:14px;font-weight:700;color:var(--text)}
.review-date{font-size:11px;color:var(--text3)}
.review-stars{display:flex;gap:2px;margin-bottom:8px}
.review-star{color:#f59e0b;font-size:14px}
.review-text{font-size:13px;color:var(--text2);line-height:1.6}
.review-fb{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:11px;color:#1877f2;font-weight:600}
.fb-note{text-align:center;margin-top:18px;font-size:13px;color:var(--text3)}
.fb-note a{color:var(--purple3);text-decoration:none;font-weight:600}
.fb-note a:hover{color:var(--purple2)}

@media(max-width:900px){
  .builder-content{grid-template-columns:1fr}
  .builder-left{position:static}
  .builder-brand-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .builder-brand-cards{grid-template-columns:1fr}
  .builder-brand-slogan{font-size:26px}
}

/* NOSOTROS SECTION */
.nosotros-section{background:linear-gradient(135deg,var(--bg) 0%,#e8e5ff 50%,var(--bg) 100%);border-top:1px solid var(--border2);padding:60px 0}
.nosotros-inner{max-width:1400px;margin:0 auto;padding:0 24px}
.nosotros-grid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.nosotros-born{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text2);background:var(--purple-glow2);border:1px solid var(--border);border-radius:8px;padding:9px 14px;margin-bottom:18px;width:fit-content}
.nosotros-born-icon{font-size:17px}
.nosotros-born strong{color:var(--purple3)}
.nosotros-text{font-size:15px;color:var(--text2);line-height:1.75;margin-bottom:14px}
.nosotros-text strong{color:var(--text)}
.nosotros-values{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.nosotros-value{display:flex;align-items:flex-start;gap:12px}
.nosotros-value-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.nosotros-value-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--text);margin-bottom:2px}
.nosotros-value-desc{font-size:13px;color:var(--text3);line-height:1.5}
.nosotros-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.nosotros-stat{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:20px 16px;text-align:center;transition:all .2s}
.nosotros-stat:hover{border-color:var(--purple);box-shadow:0 4px 20px var(--purple-glow2)}
.nosotros-stat-num{font-family:var(--font-head);font-size:28px;font-weight:900;color:var(--purple2);margin-bottom:4px}
.nosotros-stat-label{font-size:12px;color:var(--text3);font-weight:600;line-height:1.3}
.nosotros-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:#25d366;color:#fff;border-radius:10px;padding:14px;font-family:var(--font-body);font-size:15px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:.5px;transition:all .2s;width:100%}
.nosotros-cta:hover{background:#20b858;transform:translateY(-2px);box-shadow:0 6px 24px rgba(37,211,102,.4)}
@media(max-width:900px){.nosotros-grid{grid-template-columns:1fr}}

/* CONTACTO PAGE */
.contacto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contacto-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:22px;display:flex;align-items:flex-start;gap:16px;transition:all .2s}
.contacto-card:hover{border-color:var(--purple);box-shadow:0 4px 24px var(--purple-glow2)}
.contacto-card-icon{width:56px;height:56px;border-radius:12px;border:1px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contacto-card-info{flex:1}
.contacto-card-title{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--text);margin-bottom:4px}
.contacto-card-val{font-size:14px;color:var(--text2);margin-bottom:10px;font-weight:500}
.contacto-btn{display:inline-block;color:#fff;border-radius:7px;padding:8px 18px;font-family:var(--font-body);font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;letter-spacing:.5px}
.contacto-btn:hover{opacity:.85;transform:translateY(-1px)}
@media(max-width:600px){.contacto-grid{grid-template-columns:1fr}}

/* SERVICIO TECNICO PAGE */
.servicio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}
.servicio-card{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:28px 24px;transition:all .2s}
.servicio-card:hover{border-color:var(--purple);box-shadow:0 8px 30px var(--purple-glow2);transform:translateY(-3px)}
.servicio-icon{font-size:40px;margin-bottom:14px}
.servicio-title{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text);margin-bottom:14px}
.servicio-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.servicio-list li{font-size:14px;color:var(--text2);display:flex;align-items:center;gap:8px}
.servicio-list li::before{content:"✓";color:var(--purple2);font-weight:800;flex-shrink:0}
.servicio-presupuesto{background:linear-gradient(135deg,rgba(139,43,226,.15),rgba(139,43,226,.05));border:1px solid var(--border);border-radius:16px;padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.servicio-wa-btn{display:inline-flex;align-items:center;gap:12px;background:#25d366;color:#fff;border-radius:12px;padding:16px 28px;font-family:var(--font-body);font-size:17px;font-weight:800;text-decoration:none;text-transform:uppercase;letter-spacing:1px;transition:all .2s;white-space:nowrap;flex-shrink:0}
.servicio-wa-btn:hover{background:#20b858;transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,.4)}
@media(max-width:900px){.servicio-grid{grid-template-columns:1fr}}
@media(max-width:600px){.servicio-presupuesto{flex-direction:column}.servicio-wa-btn{width:100%;justify-content:center}}

.modal-description{font-size:14px;color:var(--text2);line-height:1.7;background:rgba(139,43,226,0.06);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:4px;}
.modal-description strong{color:var(--text)}

/* ═══════════════════════════════════ */
/* LIGHT MODE                          */
/* ═══════════════════════════════════ */















































































/* Theme toggle button */





















.featured-row{display:grid;grid-template-columns:repeat(8,minmax(180px,1fr));gap:12px;overflow-x:auto;padding-bottom:4px}
.featured-row::-webkit-scrollbar{height:3px}
.featured-row::-webkit-scrollbar-thumb{background:var(--purple);border-radius:2px}
@media(max-width:1200px){.featured-row{grid-template-columns:repeat(8,minmax(160px,1fr))}}
@media(max-width:900px){.featured-row{grid-template-columns:repeat(4,minmax(160px,1fr))}}
@media(max-width:600px){.featured-row{grid-template-columns:repeat(2,1fr)}}





















































/* ── BOTTOM SECTIONS LIGHT MODE ── */















































/* Footer always dark */
footer{background:#f5f4ff !important;color:#e0e0f0}
footer p{color:#9090b8 !important}
footer a{color:#9090b8 !important}
footer a:hover{color:#c4b5fd !important}
footer h4, footer .footer-col-title{color:#e0e0f0 !important}
footer li a{color:#9090b8 !important}
footer li a:hover{color:#c4b5fd !important}
footer .footer-contact-item{color:#9090b8 !important}
footer .footer-contact-item svg{color:var(--purple2)}
footer .footer-bottom{color:#6060a0 !important;border-color:#1e1a3a !important}
footer .footer-bottom a{color:#6060a0 !important}
footer [style*="color:var(--text"]{color:#9090b8 !important}
footer .social-btn{background:#1a1830 !important;color:#c4b5fd !important;border-color:#3d2a6e !important}
footer .social-btn:hover{background:var(--purple) !important;color:#fff !important}









/* ── PRODUCT IMAGE SEARCH ── */
.modal-img-area{position:relative;background:radial-gradient(ellipse at center,#1e1a35 0%,#0d0b18 100%);border-radius:14px;border:1px solid var(--border2);min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.modal-img-area img.prod-img{width:100%;height:100%;object-fit:contain;padding:20px;border-radius:14px;position:absolute;inset:0;opacity:0;transition:opacity .4s;filter:drop-shadow(0 4px 20px rgba(139,43,226,0.3));}
.modal-img-area img.prod-img.loaded{opacity:1;}
.modal-img-searching{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text3)}
.modal-img-searching .search-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--purple2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-img-searching p{font-size:12px;color:var(--text3)}
.modal-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0.3}
.modal-img-placeholder svg{width:80px;height:80px}
.modal-img-placeholder span{font-family:var(--font-head);font-size:13px;letter-spacing:2px;color:var(--text3);text-transform:uppercase}
.modal-img-retry{position:absolute;bottom:8px;right:8px;background:rgba(139,43,226,0.2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;color:var(--purple3);cursor:pointer;display:none}
.modal-img-retry:hover{background:var(--purple);color:#fff}



















/* ─── LIGHT MODE IMPROVEMENTS ─── */























/* ── PÁGINA DE CATEGORÍA ── */
.cat-page-wrap { max-width:1400px; margin:0 auto; padding:24px 24px 60px; }
.cat-page-header {
  display:flex; align-items:center; gap:16px;
  margin-bottom:28px; padding-bottom:18px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.btn-back {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--border);
  color:var(--text2); font-family:var(--font-body);
  font-size:13px; font-weight:600; padding:8px 16px;
  border-radius:8px; cursor:pointer; text-decoration:none;
  transition:all .2s; letter-spacing:.5px;
}
.btn-back:hover { background:var(--purple); border-color:var(--purple); color:#fff; }
.btn-back svg { width:16px; height:16px; }
.cat-page-title {
  font-family:var(--font-head); font-size:28px; font-weight:900;
  color:var(--text); letter-spacing:-0.5px;
  display:flex; align-items:center; gap:10px;
}
.cat-page-title span.cat-icon { font-size:24px; }
.cat-page-count {
  font-family:var(--font-body); font-size:13px;
  color:var(--text3); font-weight:500; margin-left:auto;
}
.cat-page-count strong { color:var(--purple3); }

/* Breadcrumb */
.breadcrumb {
  font-family:var(--font-body); font-size:12px;
  color:var(--text3); margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.breadcrumb a { color:var(--purple3); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Back button fixed bottom-left mobile */
@media(max-width:600px) {
  .btn-back-fixed {
    position:fixed; bottom:20px; left:16px; z-index:999;
    background:var(--purple); color:#fff;
    border:none; border-radius:50px;
    padding:10px 18px; font-size:13px; font-weight:700;
    display:flex; align-items:center; gap:6px;
    box-shadow:0 4px 20px rgba(139,43,226,0.5);
    text-decoration:none; cursor:pointer;
  }
}

/* Light mode para páginas de categoría */






/* hero-img */
.hero-img-dark, .hero-img-light {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-img-dark  { display: block; }
.hero-img-light { display: none;  }


/* Hero featured grid con imágenes */
.hero-feat-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}
.hero-feat-img {
  width: 100%;
  height: 110px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
  border-radius: 8px 8px 0 0;
}
.hero-feat-img img.card-product-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  position: absolute;
  inset: 0;
}
.hero-feat-info {
  padding: 8px;
}

/* main-cat-card como enlace */
a.main-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Modal páginas de categoría */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; display:none; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; }
.modal { background:#ffffff; border-radius:16px; max-width:800px; width:100%; max-height:90vh; overflow-y:auto; position:relative; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.modal-close { position:absolute; top:12px; right:12px; background:#f0eff8; border:none; border-radius:50%; width:32px; height:32px; font-size:16px; cursor:pointer; color:#1a1640; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--purple); color:#fff; }
.modal-inner { color:#1a1640; }

.brands-section img { filter: brightness(0) opacity(0.65) !important; }
.brands-section img:hover { filter: brightness(0) opacity(1) !important; }

/* ── SOPORTE REMOTO SECTION ─────────────────────────────────── */
.soporte-remoto-wrap { margin-top: 48px; }
.soporte-badge-wrap { text-align:center; margin-bottom:20px; }
.soporte-badge-tag {
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);
  border-radius:20px;padding:5px 16px;font-size:11px;font-weight:700;
  color:var(--purple3);letter-spacing:2px;text-transform:uppercase;
}
.soporte-remoto-title {
  font-family:var(--font-head);font-size:36px;font-weight:900;
  text-align:center;color:var(--text);margin-bottom:10px;line-height:1.1;
}
.soporte-remoto-title span { color:var(--purple2); }
.soporte-remoto-sub {
  font-size:15px;color:var(--text2);line-height:1.7;
  text-align:center;margin-bottom:28px;max-width:540px;margin-left:auto;margin-right:auto;
}
.soporte-hero-btns {
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;
}
.sr-btn-download {
  display:inline-flex;align-items:center;gap:11px;
  background:var(--purple2);color:#fff;font-family:var(--font-head);
  font-size:16px;font-weight:800;padding:15px 32px;border-radius:11px;
  text-decoration:none;letter-spacing:1px;text-transform:uppercase;
  transition:all .25s;box-shadow:0 6px 28px rgba(124,58,237,.40);
}
.sr-btn-download:hover {
  background:var(--purple);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(124,58,237,.55);
}
.sr-btn-wa {
  display:inline-flex;align-items:center;gap:10px;
  background:#25d366;color:#fff;font-family:var(--font-head);
  font-size:14px;font-weight:800;padding:15px 26px;border-radius:11px;
  text-decoration:none;letter-spacing:1px;text-transform:uppercase;
  transition:all .2s;box-shadow:0 4px 18px rgba(37,211,102,.35);
}
.sr-btn-wa:hover { background:#1ebe5d;transform:translateY(-2px); }
.sr-compat { font-size:12px;color:var(--text3);text-align:center;margin-top:4px; }
.sr-pasos-wrap { max-width:820px;margin:40px auto 0; }
.sr-pasos-title {
  font-family:var(--font-head);font-size:20px;font-weight:800;
  text-align:center;margin-bottom:28px;display:flex;align-items:center;
  justify-content:center;gap:12px;color:var(--text);
}
.sr-pasos-title::before,.sr-pasos-title::after {
  content:'';flex:1;height:1px;background:var(--border2);
}
.sr-paso {
  display:flex;gap:18px;align-items:flex-start;margin-bottom:14px;
  background:var(--card);border:1px solid var(--border2);border-radius:14px;
  padding:20px 22px;transition:all .2s;position:relative;
}
.sr-paso:hover { border-color:var(--purple);box-shadow:0 6px 24px rgba(124,58,237,.12);transform:translateY(-2px); }
.sr-paso:not(:last-child)::after {
  content:'';position:absolute;left:41px;bottom:-14px;
  width:2px;height:14px;background:var(--border2);z-index:1;
}
.sr-paso-num {
  width:38px;height:38px;border-radius:10px;background:var(--purple2);
  color:#fff;font-family:var(--font-head);font-size:20px;font-weight:900;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sr-paso-body { flex:1; }
.sr-paso-body h3 {
  font-family:var(--font-head);font-size:15px;font-weight:800;
  color:var(--text);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;
}
.sr-paso-body p { font-size:13.5px;color:var(--text2);line-height:1.6;margin:0; }
.sr-paso-body p strong { color:var(--purple3);font-weight:700; }
.sr-security {
  max-width:820px;margin:24px auto 0;
  background:rgba(124,58,237,.07);border:1px solid var(--border);
  border-left:4px solid var(--purple2);border-radius:10px;
  padding:14px 18px;display:flex;align-items:flex-start;gap:12px;
}
.sr-security svg { color:var(--purple2);flex-shrink:0;margin-top:2px; }
.sr-security p { font-size:13px;color:var(--text2);line-height:1.55;margin:0; }
.sr-security p strong { color:var(--text); }
.sr-actions {
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;padding:32px 0 8px;
}
@media(max-width:700px){
  .soporte-remoto-title{font-size:26px;}
  .sr-paso{flex-direction:column;gap:10px;}
  .sr-paso:not(:last-child)::after{display:none;}
  .soporte-hero-btns{flex-direction:column;}
  .sr-actions{flex-direction:column;}
}
/* ────────────────────────────────────────────────────────────── */