/* Las fuentes se cargan desde cada con preconnect: un @import aca las encolaba detras de esta hoja y retrasaba el LCP. */ :root{--orange:#ff5a00;--warm:#f5f4f1;--line:#dededb;--green:#2aa756;--wrap:1370px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--warm);color:var(--surface-dark);font-family:Inter,Arial,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}button,input,select{font:inherit}.wrap{width:min(calc(100% - 80px),var(--wrap));margin-inline:auto}.site-header{height:90px;padding-inline:max(40px,calc((100% - var(--wrap)) / 2));background:var(--ink-black);color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:44px;position:sticky;top:0;z-index:20;transition:box-shadow .3s ease}.logo img{width:60px;min-width:60px}.ico{display:block;width:21px;height:21px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}.ico-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.6 15.6L21 21'/%3E%3C/svg%3E")}/* Carrito del cliente (carrito-01.svg), como mask para que tome currentColor igual que el resto de los .ico-*. Viene en viewBox 95.769x83.212, mas ancho que alto: por eso no es un cuadrado. Trazo 5 y no 7: el dibujo trae cinco divisiones internas y a 18px el trazo grueso las empastaba. */ .ico-carrito{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95.769 83.212' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5,1.5h11.577c1.434,0,2.69,0.963,3.062,2.348l12.545,46.706c0.202,0.753,0.12,1.554-0.231,2.25l-3.259,6.462 c-1.063,2.109,0.469,4.598,2.831,4.598h52.441'/%3E%3Cpath d='M28.704,51.723h52.936c0.921,0,1.74-0.587,2.035-1.46l10.48-30.984c0.471-1.393-0.565-2.837-2.035-2.837H19.522'/%3E%3Cline x1='24.26' y1='34.083' x2='89.147' y2='34.083'/%3E%3Cline x1='69.939' y1='16.442' x2='65.488' y2='51.723'/%3E%3Cline x1='44.664' y1='16.442' x2='48.091' y2='51.723'/%3E%3Ccircle cx='31.469' cy='75.334' r='6.378'/%3E%3Ccircle cx='73.417' cy='75.334' r='6.378'/%3E%3C/svg%3E")} /* --- iconos del cliente (carpeta iconos/) ------------------------------- Van como archivo y no embebidos: cada uno trae su propio viewBox y el grosor se normalizo a ~1.6px a 26px, para que los cuatro pesen igual en la barra. Se recolorean igual que el resto, con currentColor. */ .ico-stock{--i:url("htg-assets/iconos/ico-stock.svg")} .ico-oficial{--i:url("htg-assets/iconos/ico-oficial.svg")} .ico-entrega{--i:url("htg-assets/iconos/ico-entrega.svg")} .ico-mas30{--i:url("htg-assets/iconos/ico-mas30.svg")} .ico-medalla{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.6' r='5.6'/%3E%3Cpath d='M8.3 13.3 6.6 20.8 12 18l5.4 2.8-1.7-7.5'/%3E%3C/svg%3E")} .ico-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.4 4-6.6 8-6.6s7 2.2 8 6.6'/%3E%3C/svg%3E")}.ico-cart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.2h3.1l2.6 12.1h10.1l2-8.9H6.2'/%3E%3Ccircle cx='9.8' cy='20' r='1.5'/%3E%3Ccircle cx='17.4' cy='20' r='1.5'/%3E%3C/svg%3E")}.chev{display:inline-block;width:9px;height:9px;background:currentColor;opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat}.main-nav{display:flex;gap:32px;align-items:center}.main-nav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:var(--t-small);text-transform:uppercase;font-weight:700;letter-spacing:.05em;color:#eaeaea;padding:34px 0;transition:color .2s}.main-nav a:hover,.main-nav .active{color:var(--orange)}.mini-search{width:clamp(200px,25vw,372px);height:46px;border:1px solid #262626;background:#151515;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 18px 0 22px}.mini-search input{width:100%;min-width:0;border:0;outline:0;background:none;color:#fff;font-size:var(--t-small)}.mini-search input::placeholder{color:#7d7d7d}.mini-search button{border:0;background:none;color:#cfcfcf;padding:0;display:grid;place-items:center;cursor:pointer;transition:color .2s}.mini-search button:hover{color:var(--orange)}.icon-btn{color:#fff;border:0;background:none;padding:0;position:relative;display:grid;place-items:center;cursor:pointer;transition:color .2s}.icon-btn:hover{color:var(--orange)}.cart b{position:absolute;display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;background:var(--orange);border-radius:50px;font:700 var(--t-micro) Inter,sans-serif;top:-6px;right:-7px}.site-header.is-stuck{box-shadow:0 1px 0 rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.42)}.menu-toggle{display:none}.hero{background:#050505;color:#fff}.hero-media{position:relative;height:600px;background:#050505;overflow:hidden}.hero-photo{position:absolute;top:0;right:0;width:48.5%;height:100%;object-fit:cover;object-position:center 50%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050505 0,#050505 55%,rgba(5,5,5,.82) 61%,rgba(5,5,5,.4) 69%,rgba(5,5,5,.11) 78%,rgba(5,5,5,0) 88%),linear-gradient(0deg,rgba(5,5,5,.8) 0,transparent 32%),linear-gradient(180deg,rgba(5,5,5,.5) 0,transparent 16%)}.hero-content{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0}.eyebrow{font-size:var(--t-small);text-transform:uppercase;font-weight:800;letter-spacing:.04em}.hero h1,.wholesale h2,.about h2{font-family:var(--display);text-transform:uppercase}.hero h1{margin:18px 0 24px}.hero .eyebrow{font-size:var(--t-small);letter-spacing:.09em}.hero-content>p:last-of-type{font-size:var(--t-lede);line-height:1.8;color:#e9e9e9}.hero .btn{height:54px;font-size:var(--t-small);padding:0 30px}.hero .btn.dark{border-color:#5c5c5c}.actions{display:flex;gap:20px;margin-top:34px}.btn{height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 25px;text-transform:uppercase;font-weight:800;font-size:var(--t-micro);border-radius:2px}.btn.primary{background:var(--orange);color:var(--ink-black)}.btn.primary span{font-size:20px;margin-left:24px}.btn.ghost{border:1px solid #aaa;color:#fff;background:rgba(0,0,0,.22)}.btn.dark{background:#0d0d0d;color:#fff;border:1px solid #2b2b2b;transition:background .2s}.btn.dark:hover{background:var(--line-dark)}.btn.primary{transition:background .2s}.hero-benefits{height:90px;display:flex;align-items:center;justify-content:space-around;color:#fff;text-transform:uppercase;font-size:var(--t-micro);font-weight:700;letter-spacing:.06em}.hero-benefits span{display:flex;align-items:center}.hero-benefits .ico{width:25px;height:25px;flex:none;color:var(--orange)}.ico-box{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21 7.5L12 2.5 3 7.5v9l9 5 9-5z'/%3E%3Cpath d='M3 7.5l9 5 9-5M12 12.5V21.5'/%3E%3C/svg%3E")}.ico-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1.8 5.4h11.4v10.2H1.8z'/%3E%3Cpath d='M13.2 8.9h3.9l3.1 3.1v3.6h-7z'/%3E%3Ccircle cx='6.2' cy='18.2' r='2'/%3E%3Ccircle cx='17.2' cy='18.2' r='2'/%3E%3C/svg%3E")}.ico-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M2.4 20.2c.8-3.7 3.2-5.6 6.6-5.6s5.8 1.9 6.6 5.6'/%3E%3Cpath d='M16.6 5.3a3.4 3.4 0 010 6.3M18.2 15c2.1.8 3.2 2.5 3.6 5.2'/%3E%3C/svg%3E")}.ico-invoice{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 2.6h14v18.8l-2.8-1.7-2.8 1.7-2.8-1.7-2.8 1.7L5 21.4z'/%3E%3Cpath d='M9 8.4h6M9 12.4h6'/%3E%3C/svg%3E")}.section{padding:44px 0 30px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.section-head h2{text-transform:uppercase;margin:0}.section-head a{font-size:var(--t-micro);text-transform:uppercase;font-weight:800}.wholesale{min-height:376px;margin-top:8px;background:var(--ink-black);color:#fff;display:grid;grid-template-columns:42% 58%;overflow:hidden;border-radius:3px}.wholesale-copy{padding:34px 42px;display:flex;flex-direction:column;justify-content:center}.wholesale h2{margin:12px 0 20px}.wholesale ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:0;font-size:var(--t-small);line-height:1.45}.wholesale li{display:block;padding:13px 0;border-top:1px solid #2a2a2a}.wholesale li:first-child{border-top:0;padding-top:0}.ico-wrench{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4 3.4a5.2 5.2 0 00-6.1 6.9L3.6 16a1.9 1.9 0 002.7 2.7l5.7-5.7a5.2 5.2 0 006.9-6.1l-3 3-2.6-.7-.7-2.6z'/%3E%3C/svg%3E")}.ico-tag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.9l-7.7 7.7a1.8 1.8 0 01-2.6 0l-7-7V3.4h10.2l7.1 7.1a1.8 1.8 0 010 2.4z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E")}.ico-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7.6' height='7.6' rx='1.2'/%3E%3Crect x='13.4' y='3' width='7.6' height='7.6' rx='1.2'/%3E%3Crect x='3' y='13.4' width='7.6' height='7.6' rx='1.2'/%3E%3Crect x='13.4' y='13.4' width='7.6' height='7.6' rx='1.2'/%3E%3C/svg%3E")}.ico-list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3.4 6.2h17.2M3.4 12h17.2M3.4 17.8h17.2'/%3E%3C/svg%3E")}.ico-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M7.8 12.2l2.9 2.9 5.5-5.9'/%3E%3C/svg%3E")}.wholesale .btn{align-self:flex-start;height:50px}.wholesale-photo{position:relative;overflow:hidden}.wholesale-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.wholesale-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.95) 0,rgba(10,10,10,.4) 7%,rgba(10,10,10,0) 19%)}.products{padding-bottom:46px}.section-head>div{display:flex;align-items:center;gap:12px}.section-head.light>div{display:block}.slide{width:32px;height:32px;border:1px solid #dcdcd9;border-radius:3px;background:#fff;color:#666;cursor:pointer;transition:border-color .2s,color .2s}.slide:hover{border-color:#b4b4b0;color:var(--surface-dark)}.product-track{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}.product-track article{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #ececea;border-radius:4px;padding:15px;transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease,box-shadow .35s ease}.product-track article:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,.61,.36,1)}.product-track article:hover,.product-track article:focus-within{transform:translateY(-4px);border-color:#dcd9d3;box-shadow:0 14px 30px rgba(22,19,15,.10)}.product-track article:hover:before,.product-track article:focus-within:before{transform:scaleX(1)}.product-track article img{width:100%;height:195px;object-fit:contain;margin-bottom:14px;transition:transform .5s cubic-bezier(.22,.61,.36,1)}.product-track article:hover img,.product-track article:focus-within img{transform:scale(1.05)}.product-track small{color:#9a9a9a;text-transform:uppercase;font-size:var(--t-micro);letter-spacing:.06em}.product-track h3{min-height:34px;font-weight:500;margin:6px 0 0;color:#22201d;transition:color .3s ease}.product-track article:hover h3{color:#000}.prod-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}.product-track strong{display:block;font-size:20px;letter-spacing:-.01em}.product-track p{display:flex;align-items:center;gap:6px;color:var(--green);font-size:var(--t-small);margin:6px 0 0}.product-track p:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}.product-track button{flex:none;width:42px;height:42px;border:0;border-radius:5px;background:var(--orange);display:grid;place-items:center;cursor:pointer;transition:background .25s}.product-track button:hover{background:#e05000}.product-track button .ico{width:20px;height:20px}.product-track button.added{background:var(--green)}.banners{margin:34px auto 42px}.banner-viewport{position:relative;border-radius:4px;overflow:hidden}.banner-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.banner-track::-webkit-scrollbar{display:none}.banner-slide{flex:0 0 100%;scroll-snap-align:start;display:block}.banner-slide img{display:block;width:100%;aspect-ratio:4934/692;object-fit:cover}.banner-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(8,8,8,.62);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s ease,background .2s ease}.banners:hover .banner-nav,.banner-nav:focus-visible{opacity:1}.banner-nav:hover{background:var(--orange)}.banner-nav.prev{left:14px}.banner-nav.next{right:14px}.banner-nav .chev{width:15px;height:15px}.banner-nav.prev .chev{transform:rotate(90deg)}.banner-nav.next .chev{transform:rotate(-90deg)}.banner-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}.banner-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#cfcdc8;cursor:pointer;transition:width .3s cubic-bezier(.22,.61,.36,1),background .25s ease,border-radius .3s ease}.banner-dots button:hover{background:#a9a7a2}.banner-dots button.active{width:24px;border-radius:5px;background:var(--orange)}.brands{--logo-scale:1.32;background:var(--warm);border-top:1px solid var(--line);padding:var(--s-lg) 0;overflow:hidden}.brands .eyebrow{margin:0 0 22px}.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}.marquee-track{display:flex;width:max-content;animation:marquee-run 42s linear infinite}.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}.marquee-set{display:flex;align-items:center;gap:84px;margin:0;padding:0 42px;list-style:none}.marquee-set li{flex:none;display:grid;place-items:center}.marquee-set img{display:block;height:calc(var(--h,28px) * var(--logo-scale));width:auto;max-width:none}@keyframes marquee-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}.about{margin:8px 0 0;min-height:296px;display:grid;background:var(--ink-black);color:#fff;overflow:hidden}.about-copy{display:flex;flex-direction:column;justify-content:center}.about h2{margin:11px 0 13px}.about-copy>p:not(.eyebrow){font-size:var(--t-small);line-height:1.62;color:#dcdcdc;max-width:40ch}.about .btn{height:48px}.about .actions{margin-top:20px;flex-wrap:wrap}.about-photo{position:relative;overflow:hidden}.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.about-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.95) 0,rgba(10,10,10,.35) 6%,rgba(10,10,10,0) 17%)}.faq{padding-top:34px;padding-bottom:58px}.faq-grid{display:block;border-top:1px solid #d9d6d0;counter-reset:faq}.faq details{position:relative;counter-increment:faq;border-bottom:1px solid #d9d6d0;background:none;padding:0}.faq details:after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)}.faq details[open]:after{transform:scaleX(1)}.faq summary{display:grid;grid-template-columns:66px 1fr 44px;align-items:center;padding:23px 0;cursor:pointer;list-style:none;color:var(--line-dark);font-size:16px;font-weight:500;transition:color .25s}.faq summary::-webkit-details-marker{display:none}.faq summary::marker{content:''}.faq summary:before{content:counter(faq,decimal-leading-zero);font-family:var(--display);font-size:var(--t-body);font-weight:700;letter-spacing:.1em;color:#b0aca4;transition:color .3s}.faq summary:after{content:'';width:20px;height:20px;justify-self:end;color:#8d8981;background:linear-gradient(currentColor,currentColor) center/100% 1.7px no-repeat,linear-gradient(currentColor,currentColor) center/1.7px 100% no-repeat;transition:transform .4s cubic-bezier(.22,.61,.36,1),color .25s}.faq summary:hover{color:#000}.faq summary:hover:before,.faq summary:hover:after{color:var(--orange)}.faq summary:focus-visible{outline:2px solid var(--orange-text);outline-offset:3px}.faq details[open] summary:before{color:var(--orange)}.faq details[open] summary:after{transform:rotate(135deg);color:var(--orange)}.faq details p{margin:0 0 27px;padding-left:66px;max-width:74ch;color:#5d5a55;font-size:var(--t-body);line-height:1.72}footer{background:var(--ink-black);color:#d8d5d0;padding:54px 0 0}.footer-grid{display:grid;grid-template-columns:1.55fr repeat(5,1fr);gap:0}.footer-grid>*{padding:0 26px}.footer-grid>*:first-child{padding-left:0}.footer-grid>*:last-child{padding-right:0}.footer-grid>*+*{border-left:1px solid var(--line-dark)}.footer-brand img{width:62px}.footer-brand p{font-size:var(--t-small);line-height:1.65;color:#8c8983;margin:20px 0 24px;max-width:30ch}.footer-social{display:flex;gap:10px}.footer-social a,.footer-social button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #242424;border-radius:50%;color:#c6c3bd;transition:border-color .25s,color .25s,background .25s}.footer-social a:hover,.footer-social button:hover{border-color:var(--orange);background:var(--orange);color:#fff}.footer-social a:focus-visible,.footer-social button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.footer-social .ico{width:17px;height:17px}.ico-ig{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E")}.ico-fb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.6 21v-8h2.7l.4-3.15h-3.1V7.85c0-.9.26-1.53 1.56-1.53h1.66V3.5c-.29-.04-1.28-.13-2.43-.13-2.41 0-4.06 1.47-4.06 4.18v2.3H7.6V13h2.73v8h3.27z'/%3E%3C/svg%3E")}.ico-wa{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E")}.footer-grid nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}.footer-grid nav b{font-family:var(--display);text-transform:uppercase;font-size:var(--t-body);font-weight:700;letter-spacing:.11em;color:#fff;margin-bottom:7px}.footer-grid nav a,.footer-grid nav button{padding:3px 0;font-size:var(--t-small);color:#8c8983;transition:color .2s}.footer-grid nav a:hover,.footer-grid nav button:hover{color:var(--orange)}.footer-grid nav a:focus-visible,.footer-grid nav button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.legal{border-top:1px solid var(--line-dark);margin-top:46px;padding:20px 0 24px;display:flex;justify-content:space-between;gap:18px;font-size:11.5px}.legal a{transition:color .2s}.legal a:hover{color:#d8d5d0}.legal span+span{display:flex;gap:22px} @media(max-width:1360px){.site-header{gap:26px}.main-nav{gap:22px}.main-nav a{font-size:var(--t-small);letter-spacing:.04em}.header-tools{gap:14px}} @media(max-width:1120px){.mini-search,.store-search-trigger{display:none}} @media(max-width:1000px){.site-header{grid-template-columns:auto 1fr auto;gap:22px}.main-nav{gap:16px}.mini-search{display:none}.wrap{width:min(calc(100% - 40px),var(--wrap))}.product-track{display:flex;overflow:auto;scroll-snap-type:x mandatory}.product-track article{min-width:210px;scroll-snap-align:start}.footer-grid{grid-template-columns:1fr repeat(3,1fr)}.footer-grid>*{padding:0 18px}.footer-brand{grid-column:span 4;padding:0 0 28px;border-bottom:1px solid var(--line-dark);margin-bottom:28px}.footer-grid>*+*{border-left:1px solid var(--line-dark)}.footer-brand+nav{border-left:0;padding-left:0}} @media(max-width:700px){body{font-size:13px}.wrap{width:calc(100% - 32px)}.site-header{height:66px;grid-template-columns:1fr auto auto;gap:15px}html{scroll-padding-top:78px}.logo img{width:44px}.menu-toggle{display:flex;width:38px;height:38px;border:0;background:none;flex-direction:column;gap:7px;justify-content:center}.menu-toggle span{height:2px;width:24px;background:#fff}.main-nav{display:none;position:absolute;top:66px;left:0;right:0;background:#080808;flex-direction:column;align-items:stretch;padding:15px 20px;gap:0}.main-nav.open{display:flex}.main-nav a{padding:15px 0;border-bottom:1px solid #222;justify-content:space-between}.header-tools{gap:16px}.header-tools .account{display:none}.hero-media{height:470px}.hero-slides{width:100%} .hero-photo{object-position:center 55%}.hero-shade{background:linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.55)),linear-gradient(0deg,rgba(5,5,5,.95) 0,transparent 45%)}.hero-content{top:50%}.hero h1{font-size:47px;line-height:1.02;margin:14px 0 18px}.hero-content>p:last-of-type{font-size:14px;line-height:1.65}.hero .btn{height:50px;font-size:var(--t-micro);padding:0 22px}.actions{gap:12px;margin-top:26px}.hero-content>p:last-of-type br{display:none}.actions{flex-wrap:wrap}.hero-benefits{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px 0}.wholesale{height:auto;grid-template-columns:1fr;margin-top:10px}.wholesale-copy{padding:30px 22px}.wholesale-photo{height:250px}.wholesale-fade{background:linear-gradient(180deg,rgba(10,10,10,.92) 0,rgba(10,10,10,0) 26%)}.wholesale h2{font-size:31px}.wholesale ul{font-size:var(--t-small);gap:12px}.section{padding-top:35px}.product-track article img{height:165px}.banners{margin:26px auto 32px}.banner-nav{opacity:1;width:34px;height:34px}.banner-nav.prev{left:8px}.banner-nav.next{right:8px}.brands{--logo-scale:1.02;padding-block:var(--s-md)}.marquee-set{gap:52px;padding:0 26px}.about{grid-template-columns:1fr;margin:28px 0 34px}.about-copy{padding:30px 22px}.about h2{font-size:28px}.about-photo{height:230px}.about-fade{background:linear-gradient(180deg,rgba(10,10,10,.9) 0,rgba(10,10,10,0) 24%)}.faq{padding-bottom:42px}.faq summary{grid-template-columns:44px 1fr 34px;padding:19px 0;font-size:var(--t-body)}.faq summary:before{font-size:var(--t-small)}.faq details p{padding-left:44px;font-size:var(--t-small)}.footer-grid{grid-template-columns:1fr 1fr;row-gap:30px}.footer-grid>*,.footer-grid>*+*{padding:0;border-left:0}.footer-brand{grid-column:span 2;padding-bottom:26px;border-bottom:1px solid var(--line-dark);margin-bottom:4px}.footer-grid nav a,.footer-grid nav button{padding:7px 0}.legal{flex-direction:column;gap:12px;align-items:flex-start}.legal span+span{gap:18px}.section-head h2{font-size:16px}} @media(max-width:860px){.catmux{height:auto;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:0;padding-bottom:12px;scrollbar-width:none;-ms-overflow-style:none}} /* Mayoristas */ .wholesale-page{background:var(--warm)}.wholesale-hero{height:600px;position:relative;background:#050505;color:#fff;overflow:hidden;display:grid;align-items:center}.wholesale-hero>img{position:absolute;top:0;right:0;width:50%;height:100%;object-fit:cover;object-position:56% center}.wholesale-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050505 0,#050505 53%,rgba(5,5,5,.84) 59%,rgba(5,5,5,.4) 68%,rgba(5,5,5,.11) 78%,rgba(5,5,5,0) 88%),linear-gradient(0deg,rgba(5,5,5,.75) 0,transparent 30%),linear-gradient(180deg,rgba(5,5,5,.5) 0,transparent 16%)}.wholesale-hero-content{position:relative;z-index:2}.wholesale-hero-content>p:last-of-type{font-size:16px;line-height:1.75;color:#e9e9e9}.wholesale-hero .btn{height:54px;font-size:var(--t-small);padding:0 30px}.wholesale-hero .btn.dark{border-color:#5c5c5c}.wholesale-hero h1{font:800 78px/.88 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;margin:18px 0 26px}.wholesale-hero h1 em{font-style:normal;color:var(--orange)}.wholesale-hero-content>p:not(.eyebrow){color:#ddd;font-size:var(--t-body);line-height:1.55}.wholesale-hero-index{position:absolute;z-index:2;right:4.5vw;bottom:55px;color:#fff;display:flex;gap:18px;align-items:flex-end}.wholesale-hero-index span{font:700 52px/1 'Barlow Condensed',sans-serif}.wholesale-hero-index p{font-size:var(--t-micro);text-transform:uppercase;line-height:1.45;border-left:1px solid #777;padding-left:18px;margin:0}.section-head.light{align-items:flex-end}.section-head.light h2{font:800 48px/.92 'Barlow Condensed',sans-serif;margin:8px 0 0}.wholesale-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;padding:62px 0 66px}.intro-copy h2{font-family:var(--display);text-transform:uppercase;margin:0}.intro-rule{display:block;width:58px;height:3px;background:var(--orange);margin:22px 0 22px}.intro-copy p{font-size:var(--t-body);line-height:1.82;color:#4f4c47;margin:0;max-width:54ch}.intro-photo img{width:100%;height:330px;object-fit:cover;border-radius:3px;display:block}.wholesale-categories{background:var(--ink-black);color:#fff;padding:52px 0 58px}.wholesale-categories .section-head{margin-bottom:26px}.wholesale-category-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:246px;gap:12px}.wc-tall{grid-row:span 2}.wc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px;border-radius:3px;background:#131313;color:#fff;transition:transform .4s cubic-bezier(.22,.61,.36,1)}.wc-card:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(164deg,#ff7526 0,#e04a00 72%,#cf4300 100%);opacity:0;transition:opacity .45s ease}.wc-card:hover:after,.wc-card:focus-visible:after{opacity:1}.wc-card:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:4;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,.61,.36,1)}.wc-card:hover:before,.wc-card:focus-visible:before{transform:scaleX(1)}.wc-txt{position:relative;z-index:3;max-width:46%}.wc-tall .wc-txt{max-width:none}.wc-txt h3{font-family:var(--display);text-transform:uppercase;margin:0 0 8px}.wc-txt p{font-size:var(--t-small);line-height:1.55;color:#a5a29c;margin:0;transition:color .45s ease}.wc-card:hover .wc-txt p{color:#ffe2d0}/* La pieza va a la derecha y el texto a la izquierda: las fotos de rubro son cuadradas y se contienen centradas, asi que una pieza centrada en la tarjeta le cae justo debajo al parrafo. Solo la tarjeta alta, que tiene 504px de alto y sitio de sobra, se queda con la pieza al medio y grande. */ .wc-card>img{position:absolute;z-index:1;right:18px;bottom:14px;width:44%;height:76%;object-fit:contain;transition:transform .55s cubic-bezier(.22,.61,.36,1)}.wc-card:hover>img{transform:scale(1.06)}.wc-tall>img{left:50%;right:auto;bottom:24px;height:70%;width:82%;transform:translateX(-50%)}.wc-tall:hover>img{transform:translateX(-50%) scale(1.06)}.wc-all{display:inline-flex;align-items:center;gap:14px;margin-top:26px;font-size:var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:.1em;transition:color .2s}.wc-all span{transition:transform .35s cubic-bezier(.22,.61,.36,1)}.wc-all:hover span{transform:translateX(5px)}.wholesale-process{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:62px 0 66px}.process-copy h2{font-family:var(--display);text-transform:uppercase;margin:12px 0 0}.process-steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin:26px 0 0;padding:0}.process-steps li{padding-top:18px;border-top:1px solid #d7d3cc}.process-steps b{display:block;font-size:var(--t-small);margin-bottom:6px}.process-steps p{font-size:var(--t-small);line-height:1.6;color:#5d5a55;margin:0}.process-photo img{width:100%;height:400px;object-fit:cover;border-radius:3px;display:block}.wc-close img{width:100%;height:auto;border-radius:3px;display:block}.wc-close-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--line)}.wc-close h2{font-family:var(--display);text-transform:uppercase;margin:0}.wc-close-side p{font-size:var(--t-body);line-height:1.8;color:#5d5a55;margin:0 0 26px;max-width:46ch}.wc-close .actions{margin-top:0;flex-wrap:wrap} @media(max-width:1000px){.wholesale-intro,.wholesale-process{grid-template-columns:1fr;gap:30px;padding:44px 0}.wc-close-grid{grid-template-columns:1fr;gap:26px}.intro-copy h2,.process-copy h2{font-size:36px}.intro-photo img,.process-photo img{height:280px}.wholesale-category-grid{grid-template-columns:1fr 1fr;grid-auto-rows:230px} /* sin fila doble deja de ser la tarjeta ancla: vuelve al reparto normal */ .wc-tall{grid-row:auto} .wc-tall>img{left:auto;right:18px;bottom:14px;width:44%;height:76%;transform:none} .wc-tall:hover>img{transform:scale(1.06)} .wc-tall .wc-txt{max-width:46%}} @media(max-width:700px){.intro-copy h2,.process-copy h2,.wc-close h2{font-size:29px}/* en una columna la tarjeta se angosta y la bajada de cada rubro pasa de dos lineas a cinco: la fila crece y la pieza cede ancho para que entren. */ .wholesale-category-grid{grid-template-columns:1fr;grid-auto-rows:220px} .wc-txt,.wc-tall .wc-txt{max-width:56%} .wc-card>img,.wc-tall>img{width:38%;height:72%}.process-steps{grid-template-columns:1fr;gap:20px}} @media(prefers-reduced-motion:reduce){.wc-card,.wc-card:after,.wc-card:before,.wc-card>img,.wc-all span{transition:none}}.wholesale-advice{padding:34px 0 78px}.contact-copy{background:#0b0b0b;color:#fff;padding:65px}.contact-copy>p:not(.eyebrow){color:#aaa;line-height:1.65}.contact-note{display:flex;gap:15px;margin-top:40px;padding-top:25px;border-top:1px solid #333}.contact-note>span{font-size:24px}.contact-note p{font-size:var(--t-small);margin:0}.wholesale-form{padding:55px 65px;display:flex;flex-direction:column;gap:20px}.wholesale-form>div{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wholesale-form label{display:flex;flex-direction:column;gap:9px;text-transform:uppercase;font-size:var(--t-micro);font-weight:800}.wholesale-form input,.wholesale-form textarea{border:0;border-bottom:1px solid #bbb;background:#f7f7f5;padding:14px;font-size:var(--t-small);outline:0;text-transform:none}.wholesale-form input:focus,.wholesale-form textarea:focus{border-color:var(--orange)}.wholesale-form .check{flex-direction:row;align-items:center;text-transform:none;font-weight:500;color:#666}.wholesale-form .check input{width:18px;height:18px;accent-color:var(--orange)}.wholesale-form .btn{border:0;align-self:flex-start}.form-status{font-size:var(--t-small);color:#777;min-height:14px;margin:0}.wholesale-faq .section-head>div h2{margin:5px 0 0}.wholesale-faq{padding-bottom:65px} @media(max-width:1000px){.wholesale-hero h1{font-size:66px}.contact-copy{padding:50px}.wholesale-form{padding:50px}} @media(max-width:700px){.wholesale-hero{height:660px}.wholesale-hero>img{object-position:62% center}.wholesale-hero-shade{background:linear-gradient(90deg,#000f,#0006),linear-gradient(0deg,#000d,transparent)}.wholesale-hero-content{padding-top:75px}.wholesale-hero h1{font-size:51px}.wholesale-hero-content>p:not(.eyebrow){font-size:var(--t-small)}.wholesale-hero-content br{display:none}.wholesale-hero .actions{flex-direction:column;align-items:flex-start}.wholesale-hero-index{right:18px;bottom:25px}.wholesale-categories{padding:52px 0}.section-head.light{align-items:flex-start}.section-head.light h2{font-size:40px}.wholesale-advice{padding:45px 0 55px}.contact-copy,.wholesale-form{padding:35px 24px}.wholesale-form>div{grid-template-columns:1fr}.wholesale-form .btn{width:100%}.wholesale-faq{padding-bottom:45px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none}.faq details:after,.faq summary:after,.product-track article,.product-track article:before,.product-track article img{transition:none}.product-track article:hover,.product-track article:focus-within{transform:none}.product-track article:hover img,.product-track article:focus-within img{transform:none}.store-product,.store-product:before,.quick-view,.scope-grid article,.scope-grid article:before{transition:none}.scope-grid article:hover{transform:none}.store-product:hover,.store-product:focus-within{transform:none}.marquee{overflow-x:auto}.banner-track{scroll-behavior:auto}.banner-dots button{transition:none}} /* Servicio técnico */ .service-page{background:var(--warm)}.st-hero{position:relative;height:600px;background:#080808;color:#fff;overflow:hidden}.st-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}.st-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,6,.95) 0,rgba(6,6,6,.82) 30%,rgba(6,6,6,.35) 60%,rgba(6,6,6,.1) 100%)}.st-hero-copy{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.st-hero h1{font-family:var(--display);text-transform:uppercase;margin:14px 0 20px}.st-hero h1 em{font-style:normal;color:var(--orange)}.st-hero-copy>p:not(.eyebrow){font-size:var(--t-body);line-height:1.75;color:#c4c1bb;margin:0 0 30px}.st-textlink{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:.1em;transition:color .2s}.st-textlink span{transition:transform .35s cubic-bezier(.22,.61,.36,1)}.st-textlink:hover{color:var(--orange)}.st-textlink:hover span{transform:translateX(5px)}.st-hero-copy .actions,.st-hero-copy>a.btn{display:inline-flex}.st-hero-copy>a.st-textlink{display:flex}.st-flow{background:#efedea;padding:60px 0 54px}.st-flow-top{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;padding-bottom:38px}.st-flow-top h2{font-family:var(--display);text-transform:uppercase;margin:0}.st-flow-copy p{font-size:var(--t-body);line-height:1.85;color:#4f4c47;margin:0 0 18px;max-width:56ch}.st-flow-copy p:last-child{margin-bottom:0}.st-flow-foot{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center;margin-top:42px;padding-top:42px;border-top:1px solid #d7d3cc}.st-flow-photo{margin:0}.st-flow-photo img{width:100%;height:304px;object-fit:cover;border-radius:3px;display:block}.st-flow-promise h3{font-family:var(--display);text-transform:uppercase;font-size:var(--d3);line-height:1.04;letter-spacing:-.004em;margin:0 0 20px}.st-steps{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:26px 0 0;border-top:1px solid #d7d3cc}.st-steps li{font-size:14px;color:var(--line-dark)}.st-steps li:not(:last-child):after{content:'·';color:var(--orange);margin:0 20px;font-weight:700}.st-rule{display:block;width:58px;height:3px;background:var(--orange);margin-bottom:26px}.st-guarantees{list-style:none;margin:0;padding:0}.st-guarantees li{padding:14px 0;border-bottom:1px solid #2a2a2a;font-size:var(--t-body);line-height:1.45}.st-guarantees li:last-child{border-bottom:0} @media(max-width:1000px){.st-hero{height:auto}.st-hero>img{position:relative;height:300px}.st-hero-shade{inset:auto 0 0 0;height:300px;background:linear-gradient(0deg,rgba(6,6,6,.95),rgba(6,6,6,.2))}.st-hero-copy{position:relative;transform:none;padding:42px 0 50px}.st-hero h1{font-size:46px}.st-flow-top{grid-template-columns:1fr;gap:24px}.st-flow-top h2{font-size:36px}.st-flow-foot{grid-template-columns:1fr;gap:28px}.st-flow-photo img{height:240px}} @media(max-width:700px){.st-hero h1{font-size:36px}.st-flow-top h2{font-size:29px}.st-flow-promise h3{font-size:25px}.st-steps li{font-size:var(--t-small)}.st-steps li:not(:last-child):after{margin:0 10px}.st-hero .btn{width:100%}} @media(prefers-reduced-motion:reduce){.st-textlink span{transition:none}} /* Nosotros */ .about-page{background:var(--warm)}.ab-hero{position:relative;background:var(--ink-black);color:#fff;height:560px;overflow:hidden}.ab-hero>img{position:absolute;top:0;right:0;width:66%;height:100%;object-fit:cover;object-position:center 52%}.ab-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-black) 0,var(--ink-black) 32%,rgba(10,10,10,.88) 42%,rgba(10,10,10,.45) 58%,rgba(10,10,10,.08) 76%,rgba(10,10,10,0) 90%)}.ab-hero-copy{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.ab-hero h1{font-family:var(--display);text-transform:uppercase;margin:14px 0 20px;max-width:15ch}.ab-hero h1 em{font-style:normal;color:var(--orange)}.ab-hero-copy>p:not(.eyebrow){font-size:var(--t-body);line-height:1.75;color:#c2bfb9;margin:0 0 30px}.ab-story{background:#efedea}.ab-story-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}.ab-story h2{font-family:var(--display);text-transform:uppercase;margin:0}.ab-story-line{list-style:none;margin:0;padding:0}.ab-ep{border-top:1px solid #d7d3cc;padding:28px 0 32px}.ab-ep:first-child{border-top:0;padding-top:4px}.ab-ep:last-child{padding-bottom:0}.ab-ep-year{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,3.6vw,56px);line-height:.88;letter-spacing:-.01em;color:var(--surface-dark);margin:0}.ab-ep--now .ab-ep-year{color:var(--orange-ink)}.ab-ep-tag{font-size:var(--t-small);text-transform:uppercase;letter-spacing:.11em;font-weight:600;color:var(--mute);margin:9px 0 18px}.ab-ep p:not([class]){font-size:var(--t-body);line-height:1.78;color:#4f4c47;margin:0 0 18px;max-width:56ch}.ab-ep p:last-child{margin-bottom:0}.ab-claim{font-family:var(--display);text-transform:uppercase;font-size:var(--d3);line-height:1.04;letter-spacing:-.004em;color:var(--orange-ink);margin-top:60px;padding-top:34px;border-top:1px solid #d7d3cc}.ab-gallery{background:var(--ink-black);padding:56px 0}.ab-gallery-grid{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:auto auto;gap:22px}.ab-gal-main{grid-row:span 2}.ab-gallery figure{margin:0;display:flex;flex-direction:column;gap:11px}.ab-gallery img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:3px;display:block}.ab-gal-main img{height:454px}.ab-gallery figure:not(.ab-gal-main) img{height:206px}.ab-gallery figcaption{font-size:var(--t-small);color:#b6b3ad;order:2} @media(max-width:1000px){.ab-hero{height:auto;padding:0}.ab-hero>img{position:relative;width:100%;height:300px}.ab-hero-shade{inset:auto 0 0 0;height:300px;background:linear-gradient(0deg,rgba(10,10,10,.96),rgba(10,10,10,.2))}.ab-hero-copy{position:relative;transform:none;padding:44px 0 52px}.ab-hero h1{font-size:46px;max-width:none}.ab-story-grid{grid-template-columns:1fr;gap:34px}.ab-story h2{font-size:38px}.ab-gallery-grid{grid-template-columns:1fr}.ab-gal-main{grid-row:auto}.ab-gal-main img,.ab-gallery figure:not(.ab-gal-main) img{height:230px}} @media(max-width:700px){.ab-hero h1{font-size:36px}.ab-story h2{font-size:31px}.ab-claim{margin-top:44px}} /* SOUL — micrositio */ .soul-page{--soul-pink:#ed0077;--soul-magenta:#bf006e;background:#090909;color:#fff}.soul-page .site-header{border-bottom:1px solid #ffffff1c}.soul-page .main-nav .active{color:#ff1790}.soul-page .cart b{background:var(--soul-pink)}.soul-hero-new{height:720px;position:relative;overflow:hidden;background:radial-gradient(circle at 74% 40%,#5c124e 0,#250c2f 26%,#0b0810 63%,#050505 100%)}.soul-hero-new:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 50deg,transparent,#ed00772c,transparent 28%,#882cff25,transparent 54%);animation:soulGlow 18s linear infinite}.soul-hero-noise{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(#fff 0.7px,transparent .8px);background-size:6px 6px;mix-blend-mode:overlay}.soul-hero-logo{position:absolute;z-index:3;left:5vw;top:55px;display:flex;align-items:center;gap:14px}.soul-hero-logo img{width:170px;filter:brightness(0) invert(1)}.soul-hero-logo span{font-size:var(--t-micro);letter-spacing:.2em;border-left:1px solid #fff;padding-left:14px}.soul-hero-title{position:absolute;z-index:3;left:5vw;top:190px}.soul-hero-title>p{font-size:var(--t-micro);letter-spacing:.22em;color:#d3a4cf}.soul-hero-title h1{font:700 83px/.88 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:20px 0 35px}.soul-hero-title h1 em{font-style:normal;color:#ff1690}.soul-link{font-size:var(--t-micro);text-transform:uppercase;font-weight:800;border-bottom:1px solid #ff1690;padding-bottom:9px}.soul-link span{color:#ff1690;margin-left:24px;font-size:18px}.soul-hero-products{position:absolute;z-index:2;width:58%;height:100%;right:1%;top:0}.soul-hero-products img{position:absolute;object-fit:contain;filter:drop-shadow(0 35px 28px #000)}.soul-hero-products img:nth-child(1){width:58%;height:72%;left:3%;top:15%;transform:rotate(-8deg)}.soul-hero-products img:nth-child(2){width:42%;height:54%;right:2%;top:10%;transform:rotate(9deg)}.soul-hero-products img:nth-child(3){width:38%;height:48%;right:12%;bottom:2%;transform:rotate(-18deg)}.soul-orbit{position:absolute;z-index:2;right:9%;top:9%;width:500px;height:500px;border:1px solid #ffffff25;border-radius:50%;animation:soulSpin 28s linear infinite}.soul-orbit:before,.soul-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid #ffffff15}.soul-orbit:before{inset:55px}.soul-orbit:after{inset:115px}.soul-orbit span{position:absolute;top:-6px;left:120px;font-size:var(--t-micro);letter-spacing:.2em;color:#ff1690}.soul-hero-foot{position:absolute;z-index:4;left:5vw;right:5vw;bottom:28px;display:flex;justify-content:space-between;font-size:var(--t-micro);letter-spacing:.17em;color:#9d859d}.soul-marquee{height:56px;background:linear-gradient(90deg,#ed0077,#7a0877,#381051);display:flex;align-items:center;overflow:hidden}.soul-marquee div{white-space:nowrap;font:700 18px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;animation:soulMarquee 25s linear infinite}.soul-banner-section{background:#f6f3f6;color:var(--ink-black);padding:90px 0 70px}.soul-section-intro{display:grid;grid-template-columns:.75fr 1.3fr 1fr;gap:55px;align-items:end;margin-bottom:45px}.soul-section-intro>div{display:flex;align-items:flex-start;gap:18px}.soul-section-intro>div span{font:700 30px 'Barlow Condensed',sans-serif;color:var(--soul-pink)}.soul-section-intro>div p{font-size:var(--t-micro);text-transform:uppercase;line-height:1.5;border-left:1px solid #bbb;padding-left:18px;margin:4px 0}.soul-section-intro h2{font:700 57px/.89 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:0}.soul-section-intro>p{font-size:var(--t-small);line-height:1.65;color:#666}.soul-banner-stage{width:100%;overflow:hidden}.soul-banner-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:18px;padding:0 5vw}.soul-banner-track::-webkit-scrollbar{display:none}.soul-banner-track figure{flex:0 0 82vw;margin:0;scroll-snap-align:center}.soul-banner-track img{width:100%;aspect-ratio:2048/288;object-fit:cover;box-shadow:0 18px 45px #1c001a20}.soul-banner-track figcaption{font-size:var(--t-micro);letter-spacing:.16em;margin-top:12px}.soul-banner-controls{width:90%;margin:22px auto 0;display:flex;align-items:center;justify-content:flex-end;gap:18px}.soul-banner-controls button{width:42px;height:42px;border:1px solid #ccc;background:transparent;font-size:20px}.soul-banner-controls span{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em}.soul-categories-new{display:grid;grid-template-columns:1.15fr .85fr 1fr;background:#090909}.soul-cat{height:520px;position:relative;overflow:hidden;padding:35px;border-right:1px solid #ffffff1d}.soul-cat:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 65%,#6f0c55,#100b13 60%)}.soul-cat.energy:before{background:radial-gradient(circle at 50% 65%,#581e75,#100b13 60%)}.soul-cat.connect:before{background:radial-gradient(circle at 50% 65%,#a00664,#100b13 60%)}.soul-cat>span,.soul-cat h2,.soul-cat p,.soul-cat i{position:relative;z-index:2}.soul-cat>span{font:700 24px 'Barlow Condensed',sans-serif;color:#ff1690}.soul-cat h2{font:700 51px 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:18px 0 5px}.soul-cat p{font-size:var(--t-small);color:#c5a9c1}.soul-cat img{position:absolute;z-index:1;width:82%;height:72%;left:9%;bottom:-5%;object-fit:contain;transition:.5s;filter:drop-shadow(0 25px 20px #000)}.soul-cat:hover img{transform:translateY(-12px) rotate(-3deg) scale(1.04)}.soul-cat i{position:absolute;right:25px;bottom:25px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#ff1690;font-style:normal}.soul-statement{position:relative;background:#f5f0f5;color:#0b0b0b;padding:130px 0 105px;overflow:hidden}.soul-statement-word{position:absolute;top:-65px;right:-20px;font:800 300px/.8 'Barlow Condensed',sans-serif;color:#e6dce5;letter-spacing:-.05em}.soul-statement-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .8fr;gap:100px;align-items:end}.soul-kicker{font-size:var(--t-micro);letter-spacing:.2em}.soul-statement h2{font:700 66px/.9 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:18px 0 0}.soul-statement-grid>div:last-child p{font-size:var(--t-small);line-height:1.7;color:#666}.soul-statement-grid>div:last-child a{display:inline-block;margin-top:24px;color:var(--soul-magenta);font-size:var(--t-micro);text-transform:uppercase;font-weight:800}.soul-feature{min-height:620px;display:grid;grid-template-columns:1.35fr .65fr;background:#120b14}.soul-feature-media{overflow:hidden;display:flex;align-items:center;background:#f5f2f5}.soul-feature-media img{width:100%;min-height:100%;object-fit:cover}.soul-feature-copy{padding:65px 5vw;display:flex;flex-direction:column;align-items:flex-start}.soul-feature-copy>span{font-size:var(--t-micro);letter-spacing:.2em;color:#ff1690}.soul-feature-copy>img{width:160px;filter:brightness(0) invert(1);margin-top:55px}.soul-feature-copy h2{font:700 62px/.88 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:35px 0 20px}.soul-feature-copy p{font-size:var(--t-micro);line-height:1.65;color:#ba9db4}.soul-button{display:inline-flex;align-items:center;justify-content:space-between;min-width:215px;height:48px;background:linear-gradient(90deg,#ed0077,#7c167f);color:#fff;padding:0 18px;text-transform:uppercase;font-size:var(--t-micro);font-weight:800;border:0;margin-top:auto}.soul-button b{font-size:18px}.soul-cta-new{min-height:360px;padding:75px 6vw;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:linear-gradient(120deg,#ed0077,#751075 58%,#2b103a)}.soul-cta-new>div:first-child>img{width:180px;filter:brightness(0) invert(1)}.soul-cta-new h2{font:700 52px/.9 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:20px 0 0}.soul-cta-new>div:last-child>p{max-width:450px;color:#f2d7ed;line-height:1.6}.soul-cta-new .actions{align-items:center}.soul-text-link{font-size:var(--t-micro);text-transform:uppercase;font-weight:800;border-bottom:1px solid #ffffff80;padding-bottom:8px}@keyframes soulGlow{to{transform:rotate(360deg)}}@keyframes soulSpin{to{transform:rotate(360deg)}}@keyframes soulMarquee{to{transform:translateX(-50%)}} @media(max-width:1000px){.soul-hero-title h1{font-size:67px}.soul-section-intro{grid-template-columns:.7fr 1.2fr 1fr;gap:30px}.soul-section-intro h2{font-size:48px}.soul-cat{height:440px}.soul-statement h2{font-size:56px}.soul-feature{grid-template-columns:1.15fr .85fr}} @media(max-width:700px){.soul-hero-new{height:720px}.soul-hero-logo{left:16px;top:35px}.soul-hero-logo img{width:135px}.soul-hero-title{left:16px;top:125px}.soul-hero-title h1{font-size:54px}.soul-hero-products{width:100%;height:52%;top:auto;bottom:18px}.soul-hero-products img:nth-child(1){width:58%;height:75%;left:1%;top:15%}.soul-hero-products img:nth-child(2){width:42%;height:60%;right:0;top:4%}.soul-hero-products img:nth-child(3){width:38%;height:49%;right:10%;bottom:-2%}.soul-orbit{width:330px;height:330px;right:-90px;top:300px}.soul-hero-foot{left:16px;right:16px}.soul-section-intro{grid-template-columns:1fr;padding:0 16px;gap:25px}.soul-section-intro h2{font-size:43px}.soul-banner-section{padding:60px 0 45px}.soul-banner-track{padding:0 16px}.soul-banner-track figure{flex-basis:calc(100vw - 32px);overflow-x:auto}.soul-banner-track img{width:900px;max-width:none;height:127px}.soul-banner-controls{width:calc(100% - 32px)}.soul-categories-new{grid-template-columns:1fr}.soul-cat{height:390px;border-bottom:1px solid #ffffff1d}.soul-cat h2{font-size:44px}.soul-statement{padding:90px 0 70px}.soul-statement-word{font-size:180px;top:-30px}.soul-statement-grid{grid-template-columns:1fr;gap:35px}.soul-statement h2{font-size:47px}.soul-feature{grid-template-columns:1fr}.soul-feature-media{min-height:240px}.soul-feature-media img{width:900px;max-width:none;min-height:0;height:127px;object-fit:cover}.soul-feature-copy{padding:45px 24px;min-height:520px}.soul-feature-copy>img{margin-top:40px}.soul-feature-copy h2{font-size:52px}.soul-cta-new{grid-template-columns:1fr;padding:55px 20px;gap:35px}.soul-cta-new .actions{flex-direction:column;align-items:flex-start}} @media(prefers-reduced-motion:reduce){.soul-hero-new:before,.soul-orbit,.soul-marquee div{animation:none}.soul-cat img{transition:none}} /* Tienda */ .store-page{background:#f3f3f0}.store-topline{height:30px;background:var(--orange);padding:0 38px;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;font-size:var(--t-micro);letter-spacing:.08em}.store-topline a{font-weight:800}.store-header{height:76px}.store-search-trigger{width:clamp(170px,18vw,250px);height:40px;border:1px solid #262626;background:#151515;color:#7d7d7d;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 0 20px;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:border-color .2s}.store-search-trigger:hover{border-color:#3a3a3a}.store-search-trigger .ico{color:#cfcfcf}.store-title{min-height:430px;display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center;padding-top:46px;padding-bottom:34px;border-bottom:1px solid #c8c8c3}.store-title-photo{width:100%;height:100%;max-height:400px;object-fit:contain;object-position:center}.store-title-text{min-width:0;align-self:center}.store-title>div:first-child>p{font-size:var(--t-micro);letter-spacing:.14em}.store-title h1{font:800 72px/.88 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:28px 0 0}.store-title h1 em{font-style:normal}/* Filete de 1px en el gris de linea: era un border-left naranja de 2px, la pestana de color al costado de un bloque de texto. El acento sigue en el rotulo de arriba, que es donde dice algo. */ .store-title-copy{border-left:1px solid var(--line);padding-left:22px;max-width:370px;margin-top:30px}.store-title-copy span{display:block;margin-bottom:7px;font-size:var(--t-micro);letter-spacing:.18em;font-weight:800}.store-title-copy p{font-size:var(--t-small);line-height:1.7;color:#5d5a55}.store-feature{height:375px;background:var(--ink-black);color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:.55fr 1.45fr;margin-top:38px}.store-feature-copy{padding:45px;position:relative;z-index:3}.store-feature-copy>span{font-size:var(--t-micro);letter-spacing:.18em}.store-feature-copy h2{font:700 42px/.9 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:28px 0 15px}.store-feature-copy p{font-size:var(--t-small);color:#aaa}.store-feature-copy a{display:inline-block;margin-top:25px;font-size:var(--t-micro);text-transform:uppercase;font-weight:800}.store-feature-products{position:relative;z-index:2}.store-feature-products img{position:absolute;object-fit:contain;filter:drop-shadow(0 24px 20px #000)}.store-feature-products img:nth-child(1){width:41%;height:94%;left:2%;top:3%;transform:rotate(-6deg)}.store-feature-products img:nth-child(2){width:34%;height:84%;left:36%;top:8%;transform:rotate(7deg)}.store-feature-products img:nth-child(3){width:31%;height:75%;right:1%;top:12%;transform:rotate(-12deg)}.store-feature-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 89px,#ffffff09 90px),repeating-linear-gradient(0deg,transparent 0 89px,#ffffff09 90px)}.store-catalog{padding-top:38px;padding-bottom:80px}.store-toolbar{height:62px;background:#fff;display:grid;grid-template-columns:155px 1fr 220px 90px;border:1px solid #deded8;position:sticky;top:0;z-index:12}.store-filter-toggle,.store-sort,.store-view{border:0;border-right:1px solid #deded8;background:#fff}.store-filter-toggle{display:flex;align-items:center;justify-content:space-between;padding:0 20px;text-transform:uppercase;font-size:var(--t-micro);font-weight:800}.store-filter-toggle span{font-size:20px}.store-search{display:flex;align-items:center;gap:12px;padding:0 20px}.store-search .ico{width:19px;height:19px;color:#8d8981;flex:none}.store-search span{font-size:21px}.store-search input{width:100%;border:0;outline:0;font-size:var(--t-micro)}.store-sort{display:flex;align-items:center;gap:12px;padding:0 15px;text-transform:uppercase;font-size:var(--t-micro)}.store-sort select{border:0;outline:0;background:transparent;font-size:var(--t-small);font-weight:700;flex:1}.store-view{display:flex}.store-view button{width:50%;border:0;background:#fff;color:#a8a5a0;display:grid;place-items:center;cursor:pointer;transition:color .2s}.store-view button:hover{color:#555}.store-view .ico{width:19px;height:19px}.store-view button.active{color:var(--surface-dark);background:#f2f1ee}.store-layout{display:grid;margin-top:24px;gap:28px}.store-filters{background:#fff;align-self:start}.filter-head{height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.filter-head b{text-transform:uppercase;font-size:var(--t-micro)}.filter-clear{border:0;background:none;font-size:var(--t-micro);text-transform:uppercase;font-weight:800;cursor:pointer}.store-filters fieldset{border:0;border-bottom:1px solid #e2e2dd;margin:0}.store-filters legend{width:100%;text-transform:uppercase;font-weight:800}.store-filters label{display:flex;gap:9px;cursor:pointer}.store-filters label span{margin-left:auto}.store-filters input{accent-color:var(--orange)}.store-filters fieldset a{text-transform:uppercase;font-size:var(--t-micro);font-weight:800}.store-filters fieldset p{font-size:var(--t-micro);line-height:1.5;color:#888}.store-results-head{height:36px;display:flex;justify-content:space-between;align-items:start}.store-results-head p{margin:0;font-size:var(--t-micro);text-transform:uppercase;color:#777}.store-results-head b{color:var(--surface-dark)}.active-filters{display:flex;gap:6px}.active-filters span{background:var(--surface-dark);color:#fff;padding:6px 8px}.store-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.store-product{position:relative;min-width:0;background:#fff;border:1px solid #ececea;border-radius:4px;overflow:hidden;transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease,box-shadow .35s ease}.store-product:before{content:'';position:absolute;z-index:3;top:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,.61,.36,1)}.store-product:hover,.store-product:focus-within{transform:translateY(-4px);border-color:#dcd9d3;box-shadow:0 14px 30px rgba(22,19,15,.10)}.store-product:hover:before,.store-product:focus-within:before{transform:scaleX(1)}.store-product-image{height:270px;position:relative;background:#f8f8f6;overflow:hidden}.store-product-image img{width:100%;height:100%;object-fit:contain;padding:20px;transition:.4s}.store-product:hover .store-product-image img{transform:scale(1.04)}.product-badge{position:absolute;z-index:2;left:12px;top:12px;background:var(--surface-dark);color:#fff;padding:6px 9px;border-radius:3px;font-size:var(--t-micro);font-weight:700;letter-spacing:.1em}.product-badge.neutral{background:#eee;color:var(--surface-dark)}.quick-view{position:absolute;z-index:2;left:12px;right:12px;bottom:-44px;height:38px;border:0;border-radius:4px;background:var(--surface-dark);color:#fff;text-transform:uppercase;font-size:var(--t-micro);font-weight:800;letter-spacing:.05em;cursor:pointer;transition:bottom .3s cubic-bezier(.22,.61,.36,1)}.store-product:hover .quick-view{bottom:12px}.store-product-info{padding:16px 16px 18px;position:relative}.store-product-info small{font-size:var(--t-micro);color:#9a9a9a;letter-spacing:.06em}.store-product-info h2{font-weight:500;min-height:44px;margin:8px 0;color:#22201d;transition:color .3s ease}.store-product:hover .store-product-info h2{color:#000}.availability{display:flex;align-items:center;gap:7px;font-size:var(--t-small);color:var(--mute);margin:0 0 12px}.availability:before{content:'';width:7px;height:7px;border-radius:50%;border:1.5px solid var(--orange);flex:none}.store-product-info strong{font-size:20px;letter-spacing:-.01em}.store-add{position:absolute;right:14px;bottom:14px;width:92px;height:38px;border:0;border-radius:5px;background:var(--orange);text-transform:uppercase;font-size:var(--t-micro);font-weight:800;letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;justify-content:space-around;transition:background .25s}.store-add:hover{background:#e05000}.store-add.added{background:#248d4d}.store-empty{text-align:center;padding:90px 20px;background:#fff}.store-empty .ico{width:34px;height:34px;margin:0 auto 16px;color:#b8b4ac}.cart-empty .ico{width:38px;height:38px;margin:0 auto 14px;color:#7d7a74}.store-empty>span{font-size:42px}.store-empty h2{font:700 28px 'Barlow Condensed',sans-serif;text-transform:uppercase}.store-empty p{font-size:var(--t-small);color:#777}.store-load-more{display:flex;margin:35px auto 0;min-width:250px;height:48px;align-items:center;justify-content:space-between;padding:0 18px;border:1px solid #bbb;background:transparent;text-transform:uppercase;font-size:var(--t-micro);font-weight:800}.store-load-more span{font-size:18px}.store-product-grid.compact{grid-template-columns:1fr}.store-product-grid.compact .store-product{display:grid;grid-template-columns:170px 1fr}.store-product-grid.compact .store-product-image{height:150px}.store-product-grid.compact .store-product-info h2{min-height:0}.store-wholesale-band{background:var(--orange)}.store-wholesale-band>.wrap{min-height:260px;display:grid;grid-template-columns:.55fr 1fr .45fr;align-items:center}.store-wholesale-band span{font-size:var(--t-micro);letter-spacing:.17em}.store-wholesale-band h2{font:700 42px/.9 'Barlow Condensed',sans-serif;text-transform:uppercase}.store-wholesale-band a{height:48px;border:1px solid #fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;text-transform:uppercase;font-size:var(--t-micro);font-weight:800}.store-wholesale-band a b{font-size:20px}.store-cart-overlay{position:fixed;inset:0;background:#0009;z-index:90}.store-cart-drawer{position:fixed;z-index:91;right:0;top:0;bottom:0;width:min(440px,100%);background:#fff;transform:translateX(100%);transition:.35s;display:grid;grid-template-rows:72px 1fr auto;color:var(--surface-dark)}.store-cart-drawer.open{transform:none}.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #ddd}.cart-drawer-head b{text-transform:uppercase;font-size:var(--t-micro)}.cart-drawer-head button{border:0;background:none;font-size:28px}.cart-drawer-items{padding:20px;overflow:auto}.cart-empty{text-align:center;padding-top:80px;color:#888}.cart-empty span{font-size:35px}.cart-drawer-item{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid #eee}.cart-drawer-item img{width:70px;height:70px;object-fit:contain}.cart-drawer-item b{font-size:var(--t-small)}.cart-drawer-item span{font-size:var(--t-small)}.cart-drawer-item button{border:0;background:none;color:#999}.cart-drawer-foot{border-top:1px solid #ddd;padding:20px}.cart-drawer-foot>div{display:flex;justify-content:space-between;text-transform:uppercase;font-size:var(--t-micro)}.cart-drawer-foot>button{width:100%;height:48px;border:0;background:var(--orange);display:flex;align-items:center;justify-content:space-between;padding:0 17px;text-transform:uppercase;font-size:var(--t-micro);font-weight:800;margin:18px 0 10px}.cart-drawer-foot small{font-size:var(--t-small);color:#999} @media(max-width:1100px){.store-product-grid{grid-template-columns:1fr 1fr}.store-feature{grid-template-columns:.7fr 1.3fr}} @media(max-width:700px){.store-topline{padding:0 12px}.store-topline b{display:none}.store-header{height:66px}.store-title{min-height:0;grid-template-columns:1fr;gap:8px;padding-top:38px}.store-title-photo{max-height:300px}.store-title h1{font-size:53px}.store-feature{width:calc(100% - 32px);height:540px;grid-template-columns:1fr}.store-feature-copy{padding:28px}.store-feature-products{position:absolute;left:0;right:0;bottom:0;height:58%}.store-toolbar{width:100%;height:auto;grid-template-columns:1fr 1fr;position:static}.store-filter-toggle,.store-sort{height:50px}.store-search{grid-column:span 2;grid-row:1;height:55px;border-bottom:1px solid #ddd}.store-view{display:none}.store-layout{grid-template-columns:1fr}.store-filters{position:fixed;z-index:80;left:0;right:0;bottom:0;max-height:75vh;overflow:auto;transform:translateY(110%);transition:.3s;box-shadow:0 -10px 30px #0004}.store-filters.open{transform:none}.store-product-grid{grid-template-columns:1fr 1fr;gap:6px}.store-product-image{height:190px}.store-product-info{padding:12px}.store-product-info h2{font-size:var(--t-micro);min-height:50px}.store-product-info strong{font-size:var(--t-small)}.store-add{position:static;width:100%;margin-top:12px}.quick-view{display:none}.store-wholesale-band>.wrap{min-height:340px;grid-template-columns:1fr;padding-top:45px;padding-bottom:45px}.store-wholesale-band h2{font-size:38px}.store-cart-drawer{width:100%}} /* Servicio técnico — banda de cierre */ .st-cta{background:#fff;padding:66px 0}.st-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.st-cta-title h2{font-family:var(--display);text-transform:uppercase;margin:12px 0 0}.st-cta-side p{font-size:14px;line-height:1.8;color:#5d5a55;margin:0 0 26px;max-width:46ch}.st-cta .actions{margin-top:0;flex-wrap:wrap}.st-cta .btn{height:52px;font-size:11.5px}.btn.line{border:1px solid #cbc7bf;color:var(--line-dark);background:#fff;transition:border-color .25s,background .25s}.btn.line:hover{border-color:var(--line-dark);background:#f4f2ee} @media(max-width:1000px){.st-cta{padding:48px 0}.st-cta-grid{grid-template-columns:1fr;gap:26px}.st-cta-title h2{font-size:40px}} @media(max-width:700px){.st-cta-title h2{font-size:32px}.st-cta .btn{width:100%}} /* Contacto */ .contact-page{background:var(--warm)}.ct-link{display:inline-block;font-size:var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--orange);padding-bottom:3px;transition:color .2s,border-color .2s}.ct-link:hover{color:#ff8340;border-color:#ff8340}.ct-link i{font-style:normal;margin-left:5px}.ct-hero{background:var(--ink-black);color:#fff;padding:82px 0 88px}.ct-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.ct-hero h1{font-family:var(--display);text-transform:uppercase;margin:0 0 22px}.ct-hero h1 em{font-style:normal;color:var(--orange)}.ct-hero-copy>p{font-size:var(--t-body);line-height:1.75;color:#b9b6b0;margin:0 0 32px;max-width:46ch}.ct-hero-dir{border-left:1px solid var(--line);padding-left:44px;align-self:center}.ct-dir{font-family:var(--display);font-size:40px;line-height:1.12;margin:0 0 22px;letter-spacing:.005em}.ct-facts{margin:34px 0 0;padding:0}.ct-facts>div{display:grid;grid-template-columns:.6fr 1.4fr;gap:22px;align-items:baseline;padding:15px 0;border-top:1px solid #2b2b2b}.ct-facts dt{font-size:var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:#8f8b85}.ct-facts dd{margin:0;font-size:var(--t-body);line-height:1.6;color:#d5d2cc}.ct-facts dd a{display:inline-block;border-bottom:1px solid #3f3f3f;padding:3px 0;transition:border-color .2s,color .2s}.ct-facts dd a:hover{color:#fff;border-color:var(--orange)}.ct-form-map{background:#efedea;padding:64px 0 70px}.ct-form-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:start}.ct-form h2{font-family:var(--display);text-transform:uppercase;margin:0 0 26px}.ct-form{display:flex;flex-direction:column;gap:16px}.ct-form label{display:flex;flex-direction:column;gap:7px;font-size:var(--t-small);color:#5d5a55}.ct-form label i{font-style:normal;color:#95918a}.ct-form input,.ct-form select,.ct-form textarea{border:1px solid #d9d5ce;background:#fff;border-radius:3px;padding:13px 14px;font-size:var(--t-small);color:var(--line-dark);outline:0;transition:border-color .2s}.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:var(--orange)}.ct-form textarea{resize:vertical;min-height:118px}.ct-form .check{flex-direction:row;align-items:flex-start;gap:10px;font-size:var(--t-small);line-height:1.5}.ct-form .check input{flex:none;width:24px;height:24px;margin-top:0;accent-color:var(--orange)}.ct-form .btn{align-self:flex-start;margin-top:6px}.ct-map{display:flex;flex-direction:column;align-items:flex-end;gap:16px}.ct-map iframe{width:100%;height:372px;border:0;border-radius:4px;display:block}.ct-front{align-self:stretch;margin:0}.ct-front img{width:100%;height:286px;object-fit:cover;object-position:center 68%;border-radius:4px;display:block}.ct-front figcaption{font-size:var(--t-small);color:var(--mute);margin-top:9px} @media(max-width:1000px){.ct-hero{padding:56px 0 60px}.ct-hero-grid{grid-template-columns:1fr;gap:38px}.ct-hero h1{font-size:56px}.ct-hero-dir{padding-left:26px}.ct-dir{font-size:32px}.ct-form-grid{grid-template-columns:1fr;gap:40px}.ct-map{align-items:stretch}.ct-map iframe{height:340px}.ct-map .ct-link{align-self:flex-end}.ct-facts>div{grid-template-columns:1fr;gap:6px}} @media(max-width:700px){.ct-hero h1{font-size:42px}.ct-dir{font-size:26px}.ct-form h2{font-size:30px}.ct-hero .btn{width:100%}} /* ========================================================================== HERO DESPIECE + CHROME Escala unificada, barra rotativa, header sin buscador y el despiece. Las reglas viejas de .hero* quedan arriba: las siguen usando mayoristas, nosotros y servicio-tecnico. ========================================================================== */ :root{ /* Escala. Antes cada seccion inventaba la suya: los h2 iban de 22 a 66px. */ /* Escala unica. Antes: 7 tamanos de H1, 14 de H2 y 17 de cuerpo. Razon constante ~1.53 entre pasos de display. */ --d1:clamp(42px,5.2vw,75px); /* titulo de pagina */ --d2:clamp(31px,3.4vw,49px); /* titulo de seccion */ --d3:clamp(24px,2.2vw,32px); /* subtitulo / bloque */ --d4:21px; /* rotulo de lista, titulo de tarjeta */ --t-lede:17px; --t-body:15px; --t-small:13px; --t-micro:11px; /* Grises tibios, sacados del crema. Nunca gris neutro sobre negro. */ --ink:#f5f4f1; --ink-2:#a8a49d; --ink-3:#7d7973; --night:#050505; --stage-h:clamp(400px,42vw,560px); --ease-out:cubic-bezier(.16,1,.3,1); /* El naranja de marca da 2.84:1 como texto sobre crema. Sirve como relleno y como texto sobre negro, no como texto sobre claro: para eso va una version quemada que llega a 4.85:1 sin salirse de la familia. */ --orange-ink:#c03d00; --orange-text:var(--orange-ink); /* Ritmo vertical. Antes las secciones iban de 16/26 a 130/105 sin relacion. */ --s-xl:clamp(52px,5vw,76px); --s-lg:clamp(40px,3.8vw,58px); --s-md:clamp(26px,2.4vw,36px); --s-sm:22px; --mute:#6b6660; /* gris tibio legible sobre blanco: 5.33:1 */ --green-ink:#1e7d40; /* el verde de stock daba 3.11:1 como texto */ /* Un solo stack de display: cuatro fallback distintos dibujaban los titulares con cuatro anchos durante el FOUT. */ --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif; /* Habia nueve negros casi iguales sin criterio que los separara: los cuatro filetes colapsan en uno y el fondo de banda en otro. */ --ink-black:#0a0a0a; /* fondo de header, footer y bandas */ --surface-dark:#111; /* tinta del cuerpo y superficie de UI sobre claro */ --line-dark:#1b1b1b; /* filete y borde sobre oscuro */ } /* --- superficies que el navegador dibuja y que igual son del diseno --- */ ::selection{background:var(--orange);color:#fff} input,textarea{caret-color:var(--orange)} :focus-visible{outline:2px solid var(--orange-text);outline-offset:3px} html{scrollbar-color:#c9c6c0 var(--warm);scrollbar-width:thin} *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-track{background:var(--warm)} *::-webkit-scrollbar-thumb{background:#c9c6c0;border:3px solid var(--warm);border-radius:6px} *::-webkit-scrollbar-thumb:hover{background:#a8a49d} /* --- iconos nuevos, mismo trazo 1.6 que el set existente --- */ .ico-arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14.5M12.8 6.3L19 12l-6.2 5.7'/%3E%3C/svg%3E")} .ico-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6l7.4 2.9v5.9c0 4.5-3 8.2-7.4 9.9-4.4-1.7-7.4-5.4-7.4-9.9V5.5z'/%3E%3Cpath d='M8.7 11.7l2.4 2.4 4.2-4.7'/%3E%3C/svg%3E")} .ico-store{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 9.8v10.4h15.6V9.8'/%3E%3Cpath d='M2.9 9.8l1.7-5.5h14.8l1.7 5.5a3 3 0 01-6 0 3 3 0 01-6 0 3 3 0 01-6 0z'/%3E%3Cpath d='M9.9 20.2v-5.8h4.2v5.8'/%3E%3C/svg%3E")} /* --- barra rotativa ------------------------------------------------------ */ .topbar{background:#000;color:var(--ink-2);border-bottom:1px solid var(--line-dark)} .topbar-in{display:flex;align-items:center;justify-content:center;gap:0;height:38px;margin-block:0} .topbar-item + .topbar-item{margin-left:34px;padding-left:34px;border-left:1px solid #262626} .topbar-item{margin:0;font-size:var(--t-micro);font-weight:600;letter-spacing:.07em; text-transform:uppercase;white-space:nowrap} /* --- header -------------------------------------------------------------- */ .header-tools{display:flex;align-items:center;gap:8px} .tool{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px; border:1px solid transparent;border-radius:2px;background:none;color:var(--ink); cursor:pointer;text-transform:uppercase;font-size:var(--t-micro);font-weight:700; letter-spacing:.07em;transition:border-color .22s,background .22s,color .22s} .tool .ico{width:19px;height:19px;flex:none} .tool:hover{border-color:#333;background:#141414} .tool--order{border-color:#2e2e2e} .tool--order:hover{border-color:var(--orange);color:#fff} .tool-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px; height:19px;padding:0 5px;border-radius:20px;background:var(--orange); font:800 10px/1 Inter,sans-serif;font-variant-numeric:tabular-nums} /* --- hero: reja general -------------------------------------------------- */ .dsp{background:var(--night);color:var(--ink);position:relative;overflow:hidden} /* La hoja del manual. Sin esto el despiece flota sobre negro. */ .dsp::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(245,244,241,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(245,244,241,.05) 1px,transparent 1px); background-size:58px 58px;background-position:center; -webkit-mask-image:radial-gradient(115% 92% at 70% 46%,#000 12%,transparent 76%); mask-image:radial-gradient(115% 92% at 70% 46%,#000 12%,transparent 76%)} .dsp-grid,.dsp-proof{position:relative;z-index:1} .dsp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,3.6vw,60px); align-items:stretch;padding:clamp(44px,4.6vw,64px) 0 clamp(40px,4vw,56px)} .dsp-copy{display:flex;flex-direction:column;justify-content:center;padding:6px 0} .dsp-copy h1{margin:0;font-family:var(--display);text-transform:uppercase; font-size:var(--d1);line-height:.94;letter-spacing:-.015em;text-wrap:balance} .dsp-lede{margin:22px 0 0;max-width:34em;font-size:var(--t-lede);line-height:1.62;color:var(--ink-2)} .dsp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .dsp .btn.primary{gap:12px} .dsp .btn.primary .ico{width:17px;height:17px;transition:transform .3s var(--ease-out)} .dsp .btn.primary:hover .ico{transform:translateX(4px)} .dsp .btn.dark{border-color:#333} /* --- hero: diagrama ------------------------------------------------------ */ .dsp-diagram{display:grid;grid-template-columns:auto minmax(226px,286px); height:var(--stage-h)} .dsp-stage{height:100%;display:flex;align-items:center;justify-content:flex-end} .dsp-svg{height:100%;width:auto;display:block;overflow:visible} /* trazo del dibujo tecnico: un solo peso, color por estado */ .dsp-svg .p{transition:color .32s var(--ease-out),opacity .32s} .dsp-svg .p--glass{color:rgba(245,244,241,.58)} .dsp-svg .p--modulo{color:rgba(245,244,241,.51)} .dsp-svg .p--bateria{color:rgba(245,244,241,.45)} .dsp-svg .p--placa{color:rgba(245,244,241,.42)} .dsp-svg .p--tapa{color:rgba(245,244,241,.40)} .dsp-svg .p--funda{color:rgba(245,244,241,.38)} .dsp-svg .p [stroke],.dsp-svg .p rect,.dsp-svg .p circle,.dsp-svg .p line,.dsp-svg .p path{ stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round; vector-effect:non-scaling-stroke} .dsp-svg .sh{fill:rgba(6,6,6,.88)} .dsp-svg .screen{fill:rgba(245,244,241,.05)} .dsp-svg .hair{opacity:.62} .dsp-svg .trace{opacity:.4} .dsp-svg .gleam{opacity:.3} .dsp-svg .ghost{fill:none;opacity:.34;stroke-dasharray:3 5} .dsp-leads{color:rgba(245,244,241,.24)} .dsp-leads line{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke} .dsp-leads circle{fill:currentColor;stroke:none} .dsp-leads .ld{transition:color .32s var(--ease-out),opacity .32s} /* --- hero: indice de piezas --------------------------------------------- */ .dsp-index{position:relative;height:100%;margin:0;padding:0;list-style:none} .dsp-row{position:absolute;left:0;right:0;top:var(--y);transform:translateY(-50%)} .dsp-cell{display:grid;grid-template-columns:30px minmax(0,1fr) auto; align-items:baseline;column-gap:12px;padding:3px 0;border-radius:2px} .dsp-lead{grid-row:1/3;align-self:center;height:1px;background:rgba(245,244,241,.24); transform-origin:left center;transition:background .32s var(--ease-out)} .dsp-name{font-family:var(--display);text-transform:uppercase; font-size:21px;line-height:1.06;letter-spacing:.005em;color:var(--ink); transition:color .32s var(--ease-out)} .dsp-count{font-size:var(--t-small);font-weight:700;color:var(--ink-2); font-variant-numeric:tabular-nums;transition:color .32s var(--ease-out)} /* La celda fantasma: la linea de calidades reserva su lugar siempre, apagada en vez de ausente. Nada se mueve al activarse. Apagada, no ilegible: #595651 daba 2.79:1 sobre el negro y esta linea lleva verdad de producto. */ .dsp-meta{grid-column:2/4;font-size:var(--t-small);line-height:1.35;color:var(--ink-3); margin-top:3px;transition:color .32s var(--ease-out)} .dsp-cell:hover .dsp-count,.dsp-cell:focus-visible .dsp-count{color:var(--ink)} .dsp-cell:hover .dsp-meta,.dsp-cell:focus-visible .dsp-meta{color:var(--ink-2)} .dsp-cell:hover .dsp-lead,.dsp-cell:focus-visible .dsp-lead{background:var(--orange)} /* estado activo propagado al dibujo */ .dsp-diagram.is-on .p{color:rgba(245,244,241,.12)} .dsp-diagram.is-on .dsp-leads .ld{opacity:.12} .dsp-diagram.is-on[data-on="0"] .p--glass,.dsp-diagram.is-on[data-on="1"] .p--modulo, .dsp-diagram.is-on[data-on="2"] .p--bateria,.dsp-diagram.is-on[data-on="3"] .p--placa, .dsp-diagram.is-on[data-on="4"] .p--tapa,.dsp-diagram.is-on[data-on="5"] .p--funda{ color:var(--orange)} .dsp-diagram.is-on[data-on="0"] .p--glass .sh,.dsp-diagram.is-on[data-on="1"] .p--modulo .sh, .dsp-diagram.is-on[data-on="2"] .p--bateria .sh,.dsp-diagram.is-on[data-on="3"] .p--placa .sh, .dsp-diagram.is-on[data-on="4"] .p--tapa .sh,.dsp-diagram.is-on[data-on="5"] .p--funda .sh{ fill:rgba(255,90,0,.07)} .dsp-diagram.is-on[data-on="0"] .ld[data-lead="0"],.dsp-diagram.is-on[data-on="1"] .ld[data-lead="1"], .dsp-diagram.is-on[data-on="2"] .ld[data-lead="2"],.dsp-diagram.is-on[data-on="3"] .ld[data-lead="3"], .dsp-diagram.is-on[data-on="4"] .ld[data-lead="4"],.dsp-diagram.is-on[data-on="5"] .ld[data-lead="5"]{ color:var(--orange);opacity:1} /* Atenuar la fila inactiva no puede costar legibilidad: el nombre sube y el resto se queda en --ink-3 (4.71:1). El apagado real lo hace el dibujo. */ .dsp-diagram.is-on .dsp-row:not(.is-on) .dsp-name{color:var(--ink-2)} .dsp-diagram.is-on .dsp-row:not(.is-on) .dsp-count{color:var(--ink-3)} /* --- hero: barra de confianza ------------------------------------------- */ .dsp-proof{border-top:1px solid var(--line-dark);background:#000} .dsp-proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 auto; padding:0;list-style:none} .dsp-proof-in li{display:grid;grid-template-columns:22px 1fr;column-gap:13px; align-items:start;padding:24px 30px 24px 0;border-left:1px solid var(--line-dark)} .dsp-proof-in li:first-child{border-left:0} .dsp-proof-in li:not(:first-child){padding-left:30px} .dsp-proof-in .ico{grid-row:1/3;width:22px;height:22px;margin-top:1px;color:var(--orange)} .dsp-proof-in b{font-size:var(--t-small);font-weight:800;text-transform:uppercase; letter-spacing:.05em;color:var(--ink)} .dsp-proof-in span{font-size:var(--t-small);line-height:1.45;color:var(--ink-3);margin-top:4px} /* --- el momento: el telefono entra armado y se abre --------------------- */ /* Ninguna entrada arranca en opacity:0. Un render que no llegue a correr la animacion (captura full-page, impresion, snapshot social, primer pintado lento) tiene que mostrar la pagina completa igual. Los rotulos, que son la evidencia del hero, no tocan la opacidad: solo se deslizan. */ @keyframes dsp-open{from{transform:translate(var(--dx),var(--dy));opacity:.25} to{transform:translate(0,0);opacity:1}} @keyframes dsp-row-in{from{transform:translateY(-50%) translateX(16px)} to{transform:translateY(-50%) translateX(0)}} @keyframes dsp-lead-in{from{transform:scaleX(0)}to{transform:scaleX(1)}} .dsp-svg .p{animation:dsp-open .9s var(--ease-out) both;animation-delay:calc(var(--i)*70ms)} .dsp-svg .p--glass{--dx:0px;--dy:0px;--i:0} .dsp-svg .p--modulo{--dx:46px;--dy:-78px;--i:1} .dsp-svg .p--bateria{--dx:92px;--dy:-156px;--i:2} .dsp-svg .p--placa{--dx:138px;--dy:-234px;--i:3} .dsp-svg .p--tapa{--dx:184px;--dy:-312px;--i:4} .dsp-svg .p--funda{--dx:230px;--dy:-390px;--i:5} .dsp-leads .ld{animation:dsp-open .8s var(--ease-out) both;--dx:0px;--dy:0px; animation-delay:520ms} .dsp-row{animation:dsp-row-in .7s var(--ease-out) both} .dsp-row:nth-child(1){animation-delay:.30s}.dsp-row:nth-child(2){animation-delay:.37s} .dsp-row:nth-child(3){animation-delay:.44s}.dsp-row:nth-child(4){animation-delay:.51s} .dsp-row:nth-child(5){animation-delay:.58s}.dsp-row:nth-child(6){animation-delay:.65s} .dsp-lead{animation:dsp-lead-in .7s var(--ease-out) both;animation-delay:.45s} /* --- adaptacion ---------------------------------------------------------- */ @media (max-width:1160px){ .dsp-grid{grid-template-columns:1fr;gap:34px} .dsp-copy{max-width:640px} .dsp-diagram{justify-self:center} } @media (max-width:900px){ /* Los tres mensajes se apilan en la misma celda de grid. Con posicion absoluta se colgaban de la caja de padding del wrap y quedaban cortados contra el borde. */ .topbar-in{display:grid;grid-template-columns:1fr;gap:0;height:36px; align-items:center;overflow:hidden} .topbar-item{grid-area:1/1;opacity:0;transition:opacity .5s;pointer-events:none; overflow:hidden;text-overflow:ellipsis} .topbar-item + .topbar-item{margin-left:0;padding-left:0;border-left:0} .topbar-item.is-on{opacity:1} .dsp-proof-in{grid-template-columns:1fr 1fr} .dsp-proof-in li{padding:18px 18px 18px 0} .dsp-proof-in li:nth-child(odd){border-left:0} .dsp-proof-in li:nth-child(even){padding-left:22px} .dsp-proof-in li:nth-child(n+3){border-top:1px solid var(--line-dark)} } @media (max-width:720px){ .tool{padding:0 10px;gap:6px;font-size:var(--t-micro);letter-spacing:.05em;height:36px} .header-tools{gap:4px} /* en la tienda el buscador propio esta a un scroll: el atajo del header sobra */ .store-header .tool--search{display:none} .dsp-grid{padding:24px 0 22px} .dsp-lede{font-size:var(--t-body);margin-top:14px} .dsp-actions{gap:10px;margin-top:22px} /* En pantalla chica el riel no entra: el dibujo se centra y el indice pasa abajo como lista. La pieza se sigue encendiendo al tocar su fila. */ .dsp-diagram{grid-template-columns:1fr;height:auto;gap:18px;width:100%} .dsp-stage{height:clamp(212px,54vw,300px);justify-content:center} /* sin el riel, el dibujo se centra sobre su propio contenido */ .dsp-svg{margin-right:-11%} .dsp-index{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:13px 20px} .dsp-row{position:static;transform:none;animation-name:none;opacity:1} .dsp-cell{grid-template-columns:minmax(0,1fr) auto;padding-top:11px; border-top:1px solid #232323} .dsp-lead{display:none} .dsp-svg .dsp-leads{display:none} .dsp-name{font-size:19px} .dsp-meta{grid-column:1/3} } @media (max-width:460px){ .dsp-index{grid-template-columns:1fr} .dsp-proof-in{grid-template-columns:1fr} .dsp-proof-in li{border-left:0;padding:15px 0} .dsp-proof-in li:nth-child(n+2){border-top:1px solid var(--line-dark);padding-left:0} } @media (prefers-reduced-motion:reduce){ .dsp-svg .p,.dsp-leads .ld,.dsp-row,.dsp-lead{animation:none} .dsp-row{opacity:1;transform:translateY(-50%)} .dsp .btn.primary:hover .ico{transform:none} } /* --- variante servicio tecnico: cinco capas, sin conteos ---------------- */ .dsp--st .dsp-copy h2{margin:0;font-family:var(--display); text-transform:uppercase;font-size:var(--d2);line-height:.96;letter-spacing:-.01em} .dsp--st .dsp-lede{margin-top:20px} .dsp--st .dsp-note{margin:18px 0 0;font-size:var(--t-small);color:var(--ink-3)} /* sin columna de conteo: el numero de catalogo no dice nada sobre una reparacion */ .dsp--st .dsp-cell{grid-template-columns:30px minmax(0,1fr)} .dsp--st .dsp-meta{grid-column:2/3} .dsp--st .dsp-diagram{grid-template-columns:auto minmax(220px,268px)} @media (max-width:720px){ .dsp--st .dsp-cell{grid-template-columns:minmax(0,1fr)} .dsp--st .dsp-meta{grid-column:1/2} } /* La barra de beneficios va sin iconos: el texto se explica solo. */ .hero-benefits span{gap:0} /* ========================================================================== ESCALA TIPOGRAFICA Reemplaza 68 reglas de tamano dispersas. Los clamp absorben los breakpoints, asi que los overrides por media query quedan sin efecto. ========================================================================== */ .hero h1,.wholesale-hero h1,.st-hero h1,.ab-hero h1,.ct-hero h1,.soul-hero-title h1,.store-title h1{font-size:var(--d1);line-height:.95;letter-spacing:-.012em} .wholesale h2,.about h2,.intro-copy h2,.process-copy h2,.st-flow-top h2,.st-cta-title h2,.wc-close h2,.ab-story h2,.ab-cta h2,.ct-form h2,.soul-statement h2,.soul-feature-copy h2,.soul-section-intro h2,.soul-cat h2,.soul-cta-new h2,.store-feature-copy h2,.section-head.light h2,.store-wholesale-band h2{font-size:var(--d2);line-height:1.02;letter-spacing:-.008em} .wc-txt h3{font-size:var(--d3);line-height:1.06;letter-spacing:-.004em} /* Rotulo de lista: mismo nivel en las dos grillas de la home. Estaba en Inter 22px, la unica familia distinta entre todos los titulares del sitio. */ .section-head h2{font-size:var(--d4);font-family:var(--display); font-weight:700;letter-spacing:.012em;line-height:1.05} .product-track h3,.store-product-info h2{font-size:var(--t-small);line-height:1.38} h1 em,h2 em{color:var(--orange-text)} /* Relleno naranja: el texto pasa a negro. Blanco sobre #ff5a00 da 3.13:1 y no llega al piso; el negro da 6.52:1 y ademas deja el naranja a full. */ .btn.primary,.tool-count,.store-add,.store-topline,.cart b, .cart-drawer-foot>button,.product-track button{color:var(--ink-black)} .btn.primary:hover{background:#e05000;color:var(--ink-black)} .store-wholesale-band{color:var(--ink-black)} .store-wholesale-band a{color:var(--ink-black)} .store-wholesale-band h2{color:var(--ink-black)} /* ========================================================================== MARCAS: la unica franja con colores ajenos a la paleta ========================================================================== */ .marquee-set img{filter:grayscale(1) contrast(.92);opacity:.6; transition:opacity .3s var(--ease-out)} .marquee-set img:hover{opacity:.95} /* ========================================================================== RITMO VERTICAL ========================================================================== */ .section,.soul-statement,.ab-story, .ct-form-map,.wholesale-intro,.wholesale-process,.st-flow,.ab-gallery, .wholesale-categories,.st-cta,.wholesale-advice,.soul-banner-section,.dsp-grid{ padding-block:var(--s-xl)} footer{padding-block:var(--s-lg) 0} .st-steps{padding-block:var(--s-md)} /* Cuatro casos que ganaban por especificidad o por !important */ .store-title h1 em,.store-title-copy span,.store-filter-toggle span{color:var(--orange-ink)} /* ========================================================================== COMPOSICION: romper las formas repetidas ========================================================================== */ /* 1. La home tenia dos bloques identicos de texto-izquierda + foto-derecha (mayorista y nosotros). El segundo se espeja. */ .about{grid-template-columns:62% 38%} .about-photo{grid-column:1;grid-row:1} .about-copy{grid-column:2;grid-row:1; padding:var(--s-md) max(40px,calc((100vw - var(--wrap)) / 2)) var(--s-md) 44px} .about-photo img{object-position:center 42%} .about-fade{transform:scaleX(-1)} /* 2. Y dos grillas de seis seguidas. Los destacados pasan a carrusel de cuatro: la tarjeta gana tamano y el ritmo deja de repetirse. */ .products .product-track{display:grid;grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:calc((100% - 54px) / 4);gap:18px;overflow-x:auto; scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px} .products .product-track::-webkit-scrollbar{display:none} .products .product-track article{scroll-snap-align:start} .products .product-track article img{height:210px} @media (max-width:900px){ .about{grid-template-columns:1fr} .about-photo{grid-row:1}.about-copy{grid-column:1;grid-row:2;padding:var(--s-md) 22px} .products .product-track{grid-auto-columns:74%} } /* Ultimas secciones fuera de escala */ .ct-hero,.soul-cta-new,.store-title,.store-catalog{padding-block:var(--s-xl)} .legal{padding-block:var(--s-sm)} /* Ultimos tres contrastes por debajo del piso, medidos sobre su fondo real */ .legal,.legal span,.legal a{color:var(--ink-2)} /* 3.62 -> 8.4:1 */ /* 4.07 -> 7.0:1 */ .store-filters label span{color:#6b6660} /* 2.32 -> 5.3:1 */ /* Los grises de apoyo estaban en #888/#999/#9a9a9a sobre blanco: entre 2.81 y 3.54:1. Todos bajan al mismo gris tibio del sistema. */ .product-track article>small,.store-product-info>small, .store-filters fieldset>p,.cart-empty p,.cart-drawer-foot>small, .store-product-info p.availability, .soul-banner-track figcaption,.soul-banner-controls span{color:var(--mute)} .prod-buy>div>p{color:var(--green-ink)} /* El magenta de SOUL a 10px daba 3.83:1. Se oscurece solo esa etiqueta; la paleta de la pagina queda como esta. */ .soul-kicker{color:#cc0068} .wc-close{padding-block:0 var(--s-xl)} /* --- tienda: los 26 rubros reales del listado --------------------------- */ .store-filters legend{font-size:var(--t-micro);letter-spacing:.08em} .store-filters label{font-size:var(--t-small)} .store-filters label span{font-variant-numeric:tabular-nums} .filter-scale{font-size:var(--t-micro);color:var(--mute); letter-spacing:.05em;text-transform:uppercase} .rubro-scroll{max-height:344px;overflow-y:auto;padding-right:12px; scrollbar-width:thin;scrollbar-color:#c9c7c2 transparent;overscroll-behavior:contain} .rubro-scroll::-webkit-scrollbar{width:5px} .rubro-scroll::-webkit-scrollbar-thumb{background:#c9c7c2;border-radius:3px} .rubro-fam{display:block;margin:20px 0 9px;padding-top:13px;border-top:1px solid #ebeae6; font-family:var(--display);font-size:var(--t-small); font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)} .rubro-fam:first-child{margin-top:0;padding-top:0;border-top:0} .rubro-scroll label{margin:8px 0} .active-filters span{font-size:var(--t-micro)} /* ========================================================================== SERVICIO TÉCNICO: el despiece en su nueva casa ========================================================================== */ /* El proceso quedaba dicho dos veces: pasos numerados en claro y las mismas garantias en prosa en una seccion aparte. Fundidas en una, la pagina son dos actos limpios: el proceso en claro, las piezas en oscuro. Las garantias heredan el fondo claro, asi que el filete y la tinta van sobre crema. */ .st-guarantees li{border-bottom-color:#dcdad5;color:#2a2724} .st-flow{--orange-text:var(--orange-ink)} /* Ahora el despiece abre el acto oscuro: su borde superior tiene que verse. #1a1a1a sobre #f5f4f1 no servía para nada cuando el vecino era negro. */ .dsp--st{border-top:0} /* Las filas del índice son links a su rubro en la tienda. Antes eran
: ni foco de teclado ni destino. El nombre toma el naranja de la pieza que enciende, así el par dibujo-rótulo se lee de una. */ .dsp-cell:hover .dsp-name,.dsp-cell:focus-visible .dsp-name{color:var(--orange)} .dsp-cell:focus-visible{outline:2px solid var(--orange);outline-offset:6px} .dsp--st .dsp-lede{max-width:34em} /* La pista de interaccion no puede ser otra linea gris igual que la nota: salian dos renglones de 13px en #7d7973 uno debajo del otro. En naranja sobre negro (6.5:1) se lee como accion y no como mas prosa. */ .dsp-hint{margin:22px 0 0;font-size:var(--t-micro);letter-spacing:.12em; text-transform:uppercase;font-weight:700;color:var(--orange)} /* El scroll de rubros necesita decir que sigue: 11 de 26 visibles y un corte limpio se lee como "estos son todos". Degradado abajo y arriba solo cuando hay algo fuera de vista (lo marca el JS con data-scroll). */ .rubro-box{position:relative} .rubro-box::after,.rubro-box::before{content:"";position:absolute;left:0;right:12px; height:34px;pointer-events:none;opacity:0;transition:opacity .25s} .rubro-box::before{top:0;background:linear-gradient(#fff,#fff0)} .rubro-box::after{bottom:0;background:linear-gradient(#fff0,#fff)} .rubro-box[data-scroll~="down"]::after,.rubro-box[data-scroll~="up"]::before{opacity:1} /* La lista de rubros pide más ancho que las 6 categorías inventadas que había: "Glass y protectores de cámara" no entra en 245px sin partirse en dos. */ @media (min-width:1001px){.store-layout{grid-template-columns:282px 1fr}} /* El aire bajo cada legend era 44px: 15 de margen + 20 del padding del fieldset (que empieza DESPUÉS del legend) + 9 del primer label. Se movió el padding superior al propio legend para que el número quede en 20. */ .store-filters fieldset{padding:0 18px 20px} .store-filters legend{padding:20px 0 0;margin-bottom:12px} .store-filters label{margin:8px 0;align-items:start} .store-filters input[type=checkbox]{margin-top:2px} .filter-scale{margin:0 0 14px} /* ========================================================================== MOBILE: lo que la revisión por página encontró roto ========================================================================== */ /* El despiece de servicio técnico nunca colapsó en mobile: la regla del hero `.dsp-diagram{grid-template-columns:1fr}` vive en el media query con especificidad 0,1,0 y `.dsp--st .dsp-diagram` la pisa con 0,2,0 desde fuera. Resultado: dos columnas de 390px de ancho total en una pantalla de 390, con el texto cortado a la derecha. */ @media (max-width:900px){ .dsp--st .dsp-diagram{grid-template-columns:1fr} /* sin riel de guías, la columna de 30px del lead es aire muerto */ .dsp--st .dsp-cell{grid-template-columns:minmax(0,1fr)} .dsp--st .dsp-lede{max-width:none} .dsp--st .dsp-svg{margin-right:0;max-width:min(300px,72%);margin-inline:auto} } /* último resto bajo el piso de la escala: el contador del pedido */ .tool-count{font-size:var(--t-micro)} /* Blancos de toque: once links quedaban en 14-19px de alto, por debajo del mínimo de 24px. Son links de texto, así que crecen por padding y área, no por tamaño de letra: el bloque no se mueve. */ @media (max-width:900px){ .section-head a,.store-feature-copy a,.store-filters fieldset a,.wc-all, .st-textlink,.ct-link,.soul-text-link,.soul-statement-grid>div:last-child a, .filter-clear{display:inline-flex;align-items:center;min-height:26px} .slide,.store-cart-close{width:42px;height:42px} } /* --- últimos tres que no pasaban AA ------------------------------------- */ /* #777 sobre crema da 4.03:1. Es el mismo rol que ya resolvió --mute. */ .store-results-head p,.form-status,.store-empty p{color:var(--mute)} /* "(opcional)" en los labels del formulario: 2.68:1 */ .ct-form label i{color:var(--mute)} /* La flecha de las tarjetas SOUL: blanco sobre magenta da 3.64:1, que alcanza para texto grande pero no a 14px. Sube a 20px en negrita —umbral de texto grande— en vez de tocar el magenta, que queda como está. */ .soul-cat i{font-size:20px;font-weight:700} /* En mobile el panel de filtros ya es una hoja que scrollea sola. Dejar adentro otro contenedor con scroll propio da dos áreas anidadas que en touch se pelean: la lista se abre entera y scrollea la hoja. */ @media (max-width:900px){ .rubro-scroll{max-height:none;overflow:visible;padding-right:0} .rubro-box::before,.rubro-box::after{display:none} } /* El footer bajó de 6 columnas a 4: se fueron las que solo tenían links a funciones que no existen (Cuenta, Información) y los destinos repetidos. */ .footer-grid{grid-template-columns:1.55fr repeat(3,1fr)} .footer-grid nav a,.footer-grid nav button{line-height:1.5} /* misma regla que el resto del sitio: sobre naranja el texto va en negro */ .footer-social a:hover,.footer-social button:hover{color:var(--ink-black)} @media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:700px){.footer-grid{grid-template-columns:1fr}} /* Los botones sociales ahora viven en la línea legal, que vuelve a tener dos lados. Más chicos: acá son un remate, no una acción principal. */ .legal .footer-social a,.footer-social button{width:36px;height:36px} .legal .footer-social .ico{width:15px;height:15px} .legal{align-items:center;padding-block:var(--s-sm)} .footer-brand p{margin-bottom:0} @media(max-width:700px){ .legal{flex-direction:column;align-items:flex-start;gap:16px} } /* ========================================================================== HEADER: logo más grande ========================================================================== */ /* El logo es un círculo: a 60px en una barra de 90 leía chico, porque un círculo deja las cuatro esquinas vacías y pesa menos que su caja. Sube a 76 y la barra a 100 para no dejarlo pegado a los bordes. */ .site-header{height:100px} .logo img{width:76px;min-width:76px} html{scroll-padding-top:114px} /* En mobile nunca se había achicado: la regla del media query pedía 44px pero el min-width:60px de la regla base la anulaba, así que quedaba un logo de 60px en una barra de 66. */ @media(max-width:700px){ .site-header{height:66px} .logo img{width:46px;min-width:46px} html{scroll-padding-top:78px} } /* ========================================================================== HEADER: el nav se colapsa ANTES de que se caiga, no después ========================================================================== */ /* El nav completo —seis ítems, con «Servicio técnico» adentro— necesita 953px de ancho. La hamburguesa arrancaba recién en 700, así que entre 700 y 953 los botones de Cuenta y Pedido se salían de la pantalla y arrastraban toda la página al scroll horizontal. Esa franja incluye una ventana de laptop sin maximizar y una tablet en vertical. La tienda lleva un botón más (Buscar) y su nav no entra hasta los 1.400px, así que colapsa antes que el resto. */ /* apariencia del botón, sin depender del breakpoint */ .menu-toggle{width:40px;height:40px;justify-self:start;padding:0;border:0; background:none;flex-direction:column;gap:6px;justify-content:center; cursor:pointer;color:#fff} .menu-toggle span{display:block;height:2px;width:24px;background:currentColor; border-radius:1px;transition:transform .28s var(--ease-out)} .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)} .menu-toggle:focus-visible{outline:2px solid var(--orange-text);outline-offset:3px} @media (max-width:1240px){ .store-header{grid-template-columns:auto 1fr auto;gap:20px} .store-header .menu-toggle{display:flex} /* el desplegable cuelga del alto real del header, no de un 66px a mano */ .store-header .main-nav{display:none;position:absolute;top:100%;left:0;right:0; z-index:19;background:var(--night);border-top:1px solid var(--line-dark); box-shadow:0 18px 40px rgba(0,0,0,.5);flex-direction:column; align-items:stretch;padding:4px 0 12px;gap:0} .store-header .main-nav.open{display:flex} .store-header .main-nav a{padding:16px max(40px,calc((100% - var(--wrap)) / 2)); border-bottom:1px solid var(--line-dark);justify-content:space-between;font-size:var(--t-small)} .store-header .main-nav a:last-child{border-bottom:0} } @media (max-width:1000px){ .site-header{grid-template-columns:auto 1fr auto;gap:20px} .menu-toggle{display:flex} .main-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:19; background:var(--night);border-top:1px solid var(--line-dark); box-shadow:0 18px 40px rgba(0,0,0,.5);flex-direction:column; align-items:stretch;padding:4px 0 12px;gap:0} .main-nav.open{display:flex} .main-nav a{padding:16px max(40px,calc((100% - var(--wrap)) / 2)); border-bottom:1px solid var(--line-dark);justify-content:space-between;font-size:var(--t-small)} .main-nav a:last-child{border-bottom:0} } /* En 360px —iPhone SE y buena parte del parque Android— el header pedía 423px: 40 de padding a cada lado más logo, hamburguesa y los dos botones. */ @media (max-width:430px){ .site-header{padding-inline:18px;gap:16px} .main-nav a{padding-inline:18px} .tool{padding:0 10px} .tool span{font-size:var(--t-micro)} } /* ========================================================================== 404 ========================================================================== */ /* La de GitHub Pages es una página de GitHub: quien erraba la URL de HTG aterrizaba en un sitio que no era HTG. Esta lleva el chrome real y, en vez de disculparse, ofrece los cuatro destinos que existen. */ .e404{background:var(--night);color:var(--ink)} .e404-in{padding-block:clamp(64px,9vw,132px) var(--s-xl);max-width:920px;margin-inline:auto} .e404-num{margin:0 0 20px;font-family:var(--display); font-size:var(--t-micro);font-weight:800;letter-spacing:.28em;color:var(--orange)} .e404 h1{margin:0;font-family:var(--display); font-weight:800;text-transform:uppercase;font-size:var(--d1);line-height:.98; letter-spacing:-.012em;color:var(--ink)} .e404-lede{margin:22px 0 0;max-width:30em;font-size:var(--t-lede);line-height:1.62;color:var(--ink-2)} .e404-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .e404-mapa{list-style:none;margin:var(--s-lg) 0 0;padding:0;display:grid; grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line-dark)} .e404-mapa a{display:block;padding:22px 0;border-bottom:1px solid var(--line-dark)} .e404-mapa li:nth-child(odd) a{padding-right:32px;border-right:1px solid var(--line-dark)} .e404-mapa li:nth-child(even) a{padding-left:32px} .e404-mapa b{display:block;font-family:var(--display); font-size:var(--d4);font-weight:700;text-transform:uppercase;letter-spacing:.005em; color:var(--ink);transition:color .25s var(--ease-out)} .e404-mapa span{display:block;margin-top:5px;font-size:var(--t-small);color:var(--ink-3)} .e404-mapa a:hover b,.e404-mapa a:focus-visible b{color:var(--orange)} @media(max-width:700px){ .e404-mapa{grid-template-columns:1fr} .e404-mapa li a{padding-inline:0;border-right:0} } /* ========================================================================== MOVIMIENTO ========================================================================== Un solo momento: la llegada de cada acto al scrollear. El estado oculto vive detrás de .mov, que agrega el JS: sin JS la página se ve entera, que es como tiene que fallar. Todo es transición, no animación con fill-mode: una animación puede quedar congelada a mitad de camino y dejar un bloque invisible. Ya pasó. Solo se mueven opacity y transform, así que no hay reflow ni salto de layout. ========================================================================== */ /* Los actos llegan. Se mueve el CONTENIDO, nunca la sección: animar el fondo haría aparecer el negro por encima del crema. */ .mov [data-rv]{opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} .mov [data-rv].is-in{opacity:1;transform:none} /* lo que ya estaba en pantalla al cargar no viaja: aparece y listo */ .mov [data-rv].is-ya{transition:none} @media (prefers-reduced-motion:reduce){ .mov [data-rv]{opacity:1;transform:none;transition:none} } /* ========================================================================== Pasos 1-5 de la critica del 2026-08-29. Home con el despiece al frente, rubros reales, pedido persistente, menu mobile como dialogo y el piso de accesibilidad que faltaba. ========================================================================== */ /* --- solo para lectores de pantalla ------------------------------------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* --- saltar al contenido ------------------------------------------------- Eran 10 tabulaciones hasta el primer CTA, en las ocho paginas. */ .skip-link{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-160%); padding:12px 20px;min-height:44px;display:inline-flex;align-items:center; background:var(--night);color:var(--ink);border:1px solid var(--orange); font-family:var(--display);text-transform:uppercase; font-size:var(--d4);line-height:1;letter-spacing:.02em; transition:transform .22s var(--ease-out)} .skip-link:focus{transform:translateY(0)} /* --- el pedido tiene contenido ------------------------------------------ */ .tool-count.has-items{background:var(--orange);color:#fff} /* --- menu mobile: el panel es modal y lo de atras esta inactivo ---------- */ .nav-scrim{position:fixed;inset:0;z-index:18;background:rgba(5,5,5,.62); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} body.nav-locked{overflow:hidden} @media(prefers-reduced-motion:reduce){.skip-link{transition:none}} /* --- blancos tactiles ---------------------------------------------------- El minimo es 44x44. El peor caso medido era el buscador de tienda: 15px. */ @media(max-width:900px){ .menu-toggle{width:44px;height:44px} .footer-social a,.footer-social button,.store-view button,.slide{min-width:44px;min-height:44px} .prod-buy button{min-width:44px;min-height:44px} footer nav a{min-height:44px;display:flex;align-items:center} .dsp-cell{padding:8px 0} } .store-search{min-height:44px;align-items:center} .store-search input{min-height:44px} .store-filter-toggle,.store-load-more,.filter-clear{min-height:44px} /* --- hero de la home: el despiece abre la pagina ------------------------- El CSS del despiece-hero ya vivia en esta hoja desde el primer build: lo unico que faltaba era el marcado. Esto solo agrega lo propio de la home. */ .dsp--home{background:var(--night);color:var(--ink);position:relative;overflow:hidden} .dsp--home .dsp-copy h1 em{font-style:normal;color:var(--orange)} .dsp-hint{margin:26px 0 0;font-size:var(--t-small);color:var(--ink-3)} /* La alternativa mayorista no compite con la accion primaria: antes eran dos botones del mismo peso y el primer viewport quedaba partido al medio. */ .dsp-alt{display:inline-flex;align-items:center;gap:9px;min-height:44px; font-size:var(--t-body);font-weight:600;color:var(--ink-2); border-bottom:1px solid rgba(245,244,241,.22); transition:color .24s var(--ease-out),border-color .24s var(--ease-out)} .dsp-alt span{transition:transform .3s var(--ease-out)} .dsp-alt:hover{color:var(--ink);border-color:var(--orange)} .dsp-alt:hover span{transform:translateX(4px)} /* Sin iconos: cada promesa se explica sola y la condicion va pegada abajo. */ .dsp-proof-in li{grid-template-columns:1fr} .dsp-proof-in span{max-width:34em} /* --- el local: la fachada, en segundo tiempo ---------------------------- */ .storefront{display:grid;grid-template-columns:1.05fr .95fr;align-items:center; gap:clamp(30px,4vw,64px); width:min(calc(100% - 80px),var(--wrap));margin:clamp(56px,6vw,88px) auto;} .storefront-photo img{width:100%;height:clamp(300px,34vw,460px);object-fit:cover} .storefront-copy h2{margin:0;font-family:var(--display); text-transform:uppercase;font-size:var(--d2);line-height:.96;letter-spacing:-.01em} .storefront-copy p{margin:20px 0 0;max-width:34em;font-size:var(--t-lede); line-height:1.62;color:var(--mute)} .storefront-copy .dsp-alt{margin-top:28px;color:var(--mute); border-bottom-color:rgba(17,17,17,.2)} .storefront-copy .dsp-alt:hover{color:var(--surface-dark);border-color:var(--orange-text)} /* El nombre del rubro es lo unico que la tarjeta no puede dejar de mostrar: al encogerse, "PROTECCION" y "ACCESORIOS" quedaban cortados por overflow. */ @media(max-width:900px){ .storefront{grid-template-columns:1fr;gap:26px;margin-block:clamp(40px,7vw,60px)} .storefront-photo img{height:clamp(240px,52vw,340px)} } /* --- blancos tactiles, segunda pasada ----------------------------------- La primera solo cubrio <=900px. Los controles del header y los links de accion median 36-40px de alto en desktop tambien, y el