/* ========================================= DERECHOTECA MASTER STYLE (PLATINUM + LEGACY) ========================================= */ body{font-family:'Montserrat', sans-serif; -webkit-font-smoothing:antialiased; color:#1a1a1a}/* ========================================= 2. PLATINUM HEADER (TOP BAR + NAVBAR) ========================================= */ .top-bar{background-color:#000; color:#fff; padding:10px 0; font-size:0.85rem; position:relative; z-index:1031; border-bottom:1px solid #333}.top-bar a{color:#fff !important; text-decoration:none; transition:color 0.3s ease; display:inline-flex; align-items:center}.top-bar a:hover{color:#C5A059 !important}.social-icon{margin-right:15px; display:inline-block}.social-icon svg{fill:#fff; width:16px; height:16px; transition:fill 0.3s ease}.social-icon:hover svg{fill:#C5A059}.top-bar-cta{font-weight:400; margin-right:10px; color:#ccc}.top-bar-phone{font-weight:700; color:#fff}.navbar{background-color:rgba(255, 255, 255, 0.98); padding:5px 0; border-bottom:1px solid rgba(0,0,0,0.05); box-shadow:0 4px 30px rgba(0,0,0,0.02); z-index:1030}.navbar-brand{padding-left:15px; transition:transform 0.3s ease}.navbar-brand:hover{transform:scale(1.02)}.navbar-nav .nav-link{color:#000; margin:0 0.6em; font-weight:600; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.5px; transition:color 0.3s ease}.navbar-nav .nav-link:not(.disabled):hover, .navbar-nav .nav-link:not(.disabled):focus{color:#C5A059}.dropdown-toggle::after{display:inline-block !important; margin-left:0.4em; vertical-align:middle; content:"" !important; border-top:0.3em solid #000; border-right:0.3em solid transparent; border-bottom:0; border-left:0.3em solid transparent; width:0; height:0; opacity:0.6; transition:transform 0.2s ease, border-top-color 0.2s ease}.nav-item.show .dropdown-toggle::after{transform:rotate(180deg); border-top-color:#C5A059; opacity:1}.dropdown-menu{border:none; border-radius:0 0 10px 10px; border-top:3px solid #C5A059; box-shadow:0 15px 40px rgba(0,0,0,0.1); padding:15px 0; margin-top:0; background-color:#fff}.dropdown-item{padding:10px 25px; font-weight:500; color:#444; transition:all 0.2s}.dropdown-item:hover, .dropdown-item:focus{background-color:#f8f8f8; color:#C5A059; padding-left:30px; text-decoration:none}.btn-try-free{font-family:'Montserrat', sans-serif; font-weight:700; padding:0.6rem 2rem; font-size:0.9rem; border-radius:50px; background-color:#000; color:#fff !important; border:2px solid #000; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.1); text-decoration:none; display:inline-block}.btn-try-free:hover{background-color:#fff; color:#000 !important; border-color:#000; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.15)}.navbar-toggler{border:none; padding:0.2rem 0.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center}.navbar-toggler:focus{outline:none}.navbar-toggler-icon-custom{width:24px; height:3px; background-color:#000; position:relative; display:block; transition:all 0.2s}.navbar-toggler-icon-custom::before, .navbar-toggler-icon-custom::after{content:''; width:24px; height:3px; background-color:#000; position:absolute; left:0; transition:all 0.2s}.navbar-toggler-icon-custom::before{top:-7px}.navbar-toggler-icon-custom::after{top:7px}.navbar-toggler-text{font-size:9px; font-weight:800; text-transform:uppercase; color:#000; margin-top:12px; letter-spacing:1px}.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom{background-color:transparent}.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom::before{transform:rotate(45deg); top:0}.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon-custom::after{transform:rotate(-45deg); top:0}.azulia{position:relative; text-decoration:none; display:inline-block}.azulia::before{content:''; position:absolute; width:100%; height:2px; background:#C5A059; bottom:-2px; left:0; transform:scaleX(0); transition:transform 0.3s}.azulia:hover::before{transform:scaleX(1)}/* ========================================= 3. RESPONSIVE UTILITIES ========================================= */ @media (max-width:991px){.top-bar{display:block !important; padding:6px 0}.top-bar .container-fluid{display:flex !important; justify-content:space-between !important; align-items:center !important}.social-desktop, .top-bar-quote, .top-bar-cta{display:none !important}.navbar-collapse{background:#fff; padding:20px; position:absolute; top:100%; left:0; right:0; box-shadow:0 10px 40px rgba(0,0,0,0.15); border-top:1px solid #eee; max-height:85vh; overflow-y:auto}.btn-try-free{width:100%; text-align:center; margin-top:15px}}/* ========================================= 4. LEGACY SECTIONS (HERO, SEARCH, SLIDERS) ========================================= */ .search-container{position:relative; margin-left:auto; width:50%}#searchForm{display:flex; align-items:center; width:100%}#searchInput{width:100%; padding:4px; padding-left:15px; border:1px solid #ccc; border-radius:18px 0 0 18px}#searchButton{padding:4px; background-color:#eee; border:none; border-radius:0 18px 18px 0; cursor:pointer}#searchButton .material-icons{font-size:24px; color:#333}.result-container{position:fixed; top:50px; left:0; right:0; margin-left:18%; width:100%; max-width:600px; border:1px solid #ddd; padding:10px; border-radius:5px; background-color:#f9f9f9; box-shadow:0 2px 5px rgba(0,0,0,0.2); z-index:1000; display:none}.result-container .search-result-item{width:100%; padding:10px; border-bottom:1px solid #ddd}.result-container .search-result-item:hover{background-color:#f2f2f2; cursor:pointer}.result-container .search-result-item:last-child{border-bottom:none}@media (max-width:768px){.search-container{display:none}}.hero-section{background-color:#f8f9fa; background-image:linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(220, 220, 220, 0.5) 1px, transparent 1px), linear-gradient(rgba(220, 220, 220, 0.5) 1px, transparent 1px); background-size:100% 100%, 10px 10px, 10px 10px; background-position:0 0, -5px -5px, 5px 5px; min-height:400px; display:flex; flex-direction:column; justify-content:center; align-items:center}.hero-title{font-family:'Roboto', sans-serif; font-weight:900; font-size:2.5rem; color:#333; margin-bottom:1rem}.hero-subtitle{font-size:1.2rem; color:#666}.feature-card{background:linear-gradient(to right, #ffffff, #fff5f5); color:black; border:none; border-radius:0.5rem; box-shadow:0 4px 8px rgba(0, 0, 0, 0.1); transition:transform 0.3s ease}.feature-card:hover{transform:translateY(-10px)}.icon-feature{font-size:48px; margin-bottom:20px}.feature-card-title{font-family:'Roboto', sans-serif; color:#d49090}.feature-title{font-size:2rem; color:#333; margin-bottom:30px}.swiper-slide{display:flex; flex-direction:column; justify-content:center; align-items:center}.swiper-slide img{max-width:100%; height:auto; transition:border 0.3s ease; border:1px solid grey}.swiper-slide img.selected{border:7px solid green}.steps-inline{display:flex; align-items:center; justify-content:center; font-family:'Roboto', sans-serif}.step-small{font-size:0.9rem; color:#333; background-color:#f2f2f2; padding:5px 10px; border-radius:5px; margin:0 5px}.highlighted-step{color:#d49090; font-weight:bold}.btn-hero{font-size:1rem; color:white; background:linear-gradient(to right, #00b4db, #0083b0); border:none; padding:1rem 2rem; transition:transform 0.3s ease, box-shadow 0.3s ease; border-radius:0.25rem}.btn-hero:hover, .btn-hero:focus{transform:scale(1.05); box-shadow:0 5px 15px rgba(0, 123, 255, 0.4); text-decoration:none; color:white}.button_small{display:inline-block; padding:5px 10px; font-size:0.8rem; color:#666; background-color:#fff; border:1px dotted #d0cdcd8f; border-radius:25px; text-align:center; text-decoration:none; transition:all 0.3s ease; margin-top:4px}.button_small:hover{color:#333; border-color:#666; text-decoration:none}.password-strength-meter{display:flex; justify-content:space-between; width:100%; margin-top:10px}.strength-bar{width:20%; height:5px; background-color:#ddd; margin-right:2px; border-radius:2px}.strength-bar.strong{background-color:#4caf50}#address-input{color:#333}.custom-file-input, #image-preview-logo, #image-preview-foto{display:none}#image-preview-logo, #image-preview-foto{display:block}.upload-link-wrapper{color:#007bff; cursor:pointer; text-decoration:none; font-weight:500; display:inline-block; margin:5px 0 15px 0; transition:color 0.3s}.upload-link-wrapper i{margin-right:5px}.clickable{cursor:pointer}.clickable:hover{background-color:#f2f2f2}.live-link{margin-top:10px}.app_title{font-size:1.4rem; font-family:arial; font-weight:bold}.app_subtitle{font-size:0.85rem; font-family:arial; font-weight:bold}.mega-menu{display:none}.wrapper{position:relative; display:inline-block}.material-symbols-outlined.icon-shopping-cart{font-size:25px; color:#000; vertical-align:middle}.product-count{content:attr(data-icon-label); position:absolute; font-style:normal; font-family:Arial, Sans-serif !important; top:-6px; right:-13px; font-weight:bolder; background-color:#ff4400; box-shadow:1px 1px 3px 0 rgba(0, 0, 0, 0.3); font-size:11px; padding:0 2px; opacity:.9; line-height:17px; letter-spacing:-0.5px; height:17px; min-width:17px; border-radius:99px; color:#fff; text-align:center; z-index:1}.icon-shopping-cart{color:rgb(57, 117, 228)}.icon-shopping-cart:hover, .fa-store:hover, .fa-heart:hover{color:red}.fa-store{color:red}.fa-store:hover{color:rgb(57, 117, 228)}.fa-heart{color:grey}.rrss_sesion{position:fixed; right:35px; bottom:40px; width:38px; height:34px; z-index:2147483003}.rrss{position:fixed; right:35px; bottom:30px; width:28px; height:34px; z-index:2147483003}