@font-face{
font-family:'Bungee';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(bungee.woff2) format('woff2');
}
@layer reset,tokens,base,layout,components,states,responsive;
@layer tokens{
:root{
color-scheme:light;
--rgb-primary:0 114 255;
--rgb-danger:255 0 0;
--rgb-ink:0 0 0;
--rgb-muted:93 102 122;
--rgb-faint:175 183 199;
--rgb-line:0 114 255;
--rgb-surface:255 255 255;
--rgb-surface-soft:245 249 255;
--rgb-shadow:0 0 0;
--rgb-success:21 153 87;
--rgb-warning:227 160 37;
--rgb-magenta:155 51 84;
--rgb-teal:15 118 110;
--rgb-violet:127 84 255;
--rgb-cyan:0 209 255;
--c-primary:rgb(var(--rgb-primary));
--c-primary-dark:#005dcc;
--c-primary-02:rgb(var(--rgb-primary) / .02);
--c-primary-03:rgb(var(--rgb-primary) / .03);
--c-primary-04:rgb(var(--rgb-primary) / .04);
--c-primary-05:rgb(var(--rgb-primary) / .05);
--c-primary-06:rgb(var(--rgb-primary) / .06);
--c-primary-07:rgb(var(--rgb-primary) / .07);
--c-primary-08:rgb(var(--rgb-primary) / .08);
--c-primary-10:rgb(var(--rgb-primary) / .10);
--c-primary-12:rgb(var(--rgb-primary) / .12);
--c-primary-14:rgb(var(--rgb-primary) / .14);
--c-primary-16:rgb(var(--rgb-primary) / .16);
--c-primary-18:rgb(var(--rgb-primary) / .18);
--c-primary-20:rgb(var(--rgb-primary) / .20);
--c-primary-22:rgb(var(--rgb-primary) / .22);
--c-primary-24:rgb(var(--rgb-primary) / .24);
--c-primary-28:rgb(var(--rgb-primary) / .28);
--c-primary-30:rgb(var(--rgb-primary) / .30);
--c-primary-32:rgb(var(--rgb-primary) / .32);
--c-primary-38:rgb(var(--rgb-primary) / .38);
--c-primary-48:rgb(var(--rgb-primary) / .48);
--c-link:var(--c-primary);
--c-link-hover:var(--c-danger);
--c-link-border:#0072ff30;
--c-stat-muted:#0072ff30;
--c-tag-bg:#e5f1ff;
--c-tag-text:var(--c-link);
--c-tag-meta:var(--c-stat-muted);
--c-tag-hover-bg:var(--c-danger);
--c-tag-hover-text:var(--c-surface);
--c-tag-active-bg:var(--c-primary);
--c-tag-active-text:var(--c-surface);
--c-danger:rgb(var(--rgb-danger));
--c-danger-04:rgb(var(--rgb-danger) / .04);
--c-danger-08:rgb(var(--rgb-danger) / .08);
--c-danger-10:rgb(var(--rgb-danger) / .10);
--c-danger-12:rgb(var(--rgb-danger) / .12);
--c-danger-18:rgb(var(--rgb-danger) / .18);
--c-danger-24:rgb(var(--rgb-danger) / .24);
--c-success:rgb(var(--rgb-success));
--c-success-soft:rgb(var(--rgb-success) / .09);
--c-whatsapp:#25d366;
--c-whatsapp-dark:#128c4a;
--c-warning:rgb(var(--rgb-warning));
--c-warning-soft:rgb(var(--rgb-warning) / .10);
--c-magenta:rgb(var(--rgb-magenta));
--c-teal:rgb(var(--rgb-teal));
--c-ai-violet:rgb(var(--rgb-violet));
--c-ai-cyan:rgb(var(--rgb-cyan));
--c-ink:rgb(var(--rgb-ink));
--c-text:var(--c-ink);
--c-text-muted:rgb(var(--rgb-muted));
--c-text-faint:rgb(var(--rgb-faint));
--c-surface:rgb(var(--rgb-surface));
--c-surface-glass:rgb(var(--rgb-surface) / .92);
--c-surface-soft:#f5f9ff;
--c-surface-muted:#f5f7fc;
--c-line-05:rgb(var(--rgb-line) / .05);
--c-line-08:rgb(var(--rgb-line) / .08);
--c-line-10:rgb(var(--rgb-line) / .10);
--c-line-12:rgb(var(--rgb-line) / .12);
--c-line-14:rgb(var(--rgb-line) / .14);
--c-line-16:rgb(var(--rgb-line) / .16);
--c-line-18:rgb(var(--rgb-line) / .18);
--c-line-20:rgb(var(--rgb-line) / .20);
--c-line-22:rgb(var(--rgb-line) / .22);
--c-line-30:rgb(var(--rgb-line) / .30);
--c-frame:rgb(var(--rgb-line) / .18);
--button-hover-scale:1.05;
--button-press-scale:1.10;
--button-scale-time:180ms;
--button-press-time:90ms;
--button-scale-ease:cubic-bezier(.2,.9,.2,1);
--font-ui:OpenSans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-brand:Bungee,system-ui,sans-serif;
--c-blue:var(--c-primary);
--c-blue-02:var(--c-primary-02);
--c-blue-04:var(--c-primary-04);
--c-blue-06:var(--c-primary-06);
--c-blue-08:var(--c-primary-08);
--c-blue-10:var(--c-primary-10);
--c-blue-16:var(--c-primary-16);
--c-blue-24:var(--c-primary-24);
--c-blue-32:var(--c-primary-32);
--c-green:var(--c-success);
--c-green-soft:var(--c-success-soft);
--c-amber:var(--c-warning);
--c-amber-soft:var(--c-warning-soft);
--c-red:var(--c-danger);
--c-red-soft:var(--c-danger-10);
--product-row-bg-hover:var(--c-surface-muted);
--price-card-bg:var(--c-surface);
--price-card-bg-hover:var(--c-surface);
--price-card-bg-active:var(--c-surface-soft);
--price-card-border:var(--c-line-18);
--price-card-border-hover:var(--c-line-20);
--price-card-border-active:var(--c-primary-28);
--price-card-ink-muted:var(--c-text-faint);
--price-card-ink-active:var(--c-primary);
--price-note-bg:var(--c-surface);
--price-note-bg-row-hover:var(--c-surface-soft);
--price-note-ink:var(--c-text-faint);
--price-note-ink-hover:var(--c-text-muted);
--price-note-mask:var(--c-surface);
--price-note-mask-row-hover:var(--c-surface-soft);
--n-00:var(--c-surface);
--n-05:#fbfcfe;
--n-10:#f6f8fb;
--n-15:#f1f4f8;
--n-20:#eef1f6;
--n-30:#dfe4ec;
--n-40:#b9c2d0;
--n-45:#a5afbf;
--n-48:#96a2b4;
--n-50:#8b96a8;
--n-52:#838fa2;
--n-54:#7b879a;
--n-58:#6f7b8f;
--n-60:#657184;
--n-70:#202020;
--n-80:var(--c-ink);
--line-05:var(--c-line-05);
--line-08:var(--c-line-08);
--line-12:var(--c-line-12);
--glass:var(--c-surface-glass);
--glass-soft:rgb(var(--rgb-surface) / .78);
--veil:rgb(var(--rgb-surface) / .72);
--shadow-xs:0 2px 8px rgb(var(--rgb-shadow) / .05);
--shadow-sm:0 8px 24px rgb(var(--rgb-shadow) / .07),0 2px 8px rgb(var(--rgb-shadow) / .05);
--shadow-md:0 18px 46px rgb(var(--rgb-shadow) / .10),0 6px 18px rgb(var(--rgb-shadow) / .06);
--shadow-lg:0 30px 90px rgb(var(--rgb-shadow) / .14),0 10px 30px rgb(var(--rgb-shadow) / .08);
--shadow-blue:0 16px 34px var(--c-primary-16);
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:28px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-14:56px;
--space-16:64px;
--text-2xs:10.5px;
--text-xs:11.5px;
--text-sm:12.5px;
--text-md:14px;
--text-lg:16px;
--text-xl:19px;
--text-2xl:22px;
--text-3xl:clamp(24px,3vw,34px);
--text-hero:clamp(20px,2.05vw,27px);
--text-product:clamp(30px,4.4vw,56px);
--lh-solid:1;
--lh-tight:1.18;
--lh-title:1.26;
--lh-ui:1.4;
--lh-copy:1.7;
--w-regular:400;
--w-medium:700;
--w-strong:700;
--w-bold:700;
--w-black:700;
--ls-tight:-.035em;
--ls-ui:-.015em;
--ls-caps:.12em;
--radius-xs:8px;
--radius-sm:10px;
--radius-md:14px;
--radius-lg:18px;
--radius-xl:24px;
--radius-2xl:32px;
--radius-pill:999px;
--icon-xs:14px;
--icon-sm:16px;
--icon-md:20px;
--icon-lg:24px;
--icon-xl:30px;
--icon-stroke:2;
--control-h:34px;
--control-h-lg:44px;
--top-z:30;
--sticky-z:14;
--modal-z:260;
--mask-z:250;
--page-max:1260px;
--search-max:1280px;
--search-w:min(var(--search-max),80vw);
--search-min-w:720px;
--search-top:calc(50svh - 31px);
--hero-logo-gap:52px;
--hero-logo-h:45px;
--hero-logo-top:calc(var(--search-top) - var(--hero-logo-gap) - (var(--hero-logo-h) / 2));
--search-active-top:92px;
--search-tools-active-top:164px;
--search-results-offset:206px;
--chrome-x:40px;
--frame-x:40px;
--chrome-inset:20px;
--frame-top-y:40px;
--frame-ink:var(--c-frame);
--search-pad-y:9.5px;
--search-pad-x:12px;
--search-radius:12px;
--search-select-w:254px;
--catalog-menu-w:500px;
--catalog-menu-h:314px;
--catalog-overlap:46px;
--search-select-h:40px;
--search-sep-h:36px;
--search-cart-size:40px;
--search-glow:0 10px 28px rgb(var(--rgb-primary) / .075),0 2px 8px rgb(var(--rgb-primary) / .055);
--search-focus-glow:0 12px 32px rgb(var(--rgb-primary) / .10),0 2px 8px rgb(var(--rgb-primary) / .06),0 0 0 3px var(--c-primary-04);
--modal-max:860px;
--product-max:1180px;
--page-pad:clamp(22px,4vw,48px);
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-soft:cubic-bezier(.2,.9,.2,1);
--time-fast:160ms;
--time:240ms;
--time-slow:560ms;
--scroll-track:var(--n-10);
--scroll-thumb:var(--c-line-30);
--scroll-thumb-hover:var(--c-primary);
--blue:var(--c-primary);
--n02:var(--n-00);
--n10:var(--n-10);
--n20:var(--n-20);
--n30:var(--n-30);
--n40:var(--n-40);
--n50:var(--n-50);
--n55:#778399;
--n60:var(--n-60);
--n70:var(--n-70);
--n80:var(--n-80);
--line:var(--line-12);
--soft-line:var(--line-08);
--shadow:var(--shadow-sm);
--shadow-strong:var(--shadow-lg);
--ease:var(--ease-out);
--hit:var(--ease-soft);
--c-blue-dark:var(--c-primary-dark);
--c-blue-12:var(--c-primary-12);
--c-blue-18:var(--c-primary-18);
--site-header-mask-bg:var(--c-surface);
--c-gray-text:var(--c-text-faint);
--table-soft-bg:var(--c-surface-muted);
--table-head-bg-soft:var(--c-surface-muted);
--table-head-ink:var(--c-text-muted);
--table-head-ink-soft:var(--c-stat-muted);
--site-ink-main:var(--c-ink);
--site-ink-muted:var(--c-text-faint);
--space-1-25:5px;
--space-1-5:6px;
--space-1-75:7px;
--space-2-25:9px;
--space-2-5:10px;
--space-3-5:14px;
--space-4-5:18px;
--space-5-5:22px;
--text-micro:9px;
--text-micro-lg:9.5px;
--text-3xs:10px;
--text-compact:11px;
--text-ui-sm:12px;
--text-ui:13px;
--text-title-sm:18px;
--text-title-md:20px;
--text-title-lg:24px;
--text-title-xl:28px;
--radius-2xs:4px;
--radius-3xs:5px;
--radius-compact:6px;
--radius-compact-lg:7px;
--radius-compact-xl:9px;
--radius-ui:11px;
--radius-control:12px;
--radius-control-lg:13px;
--radius-card:16px;
--radius-panel:20px;
--radius-panel-lg:22px;
--pad-control-y:var(--space-2);
--pad-control-x:var(--space-3);
--pad-card:var(--space-4);
--pad-panel:var(--space-4-5);
--n-12:#f3f6fa;
--n-34:#d1dbe8;
--n-38:#c4cedc;
--n-42:#b7c2d1;
--n-44:#aeb9c8;
--n-46:#a4afbf;
--n-55:#778399;
--n-56:#748096;
--n-62:#59667c;
--n-64:#526078;
--n-65:#4d5b73;
--n-66:#48566e;
--n-68:#3d4c64;
--n-72:#26364e;
--n-75:#18283f;
--n-78:var(--c-ink);
--n-82:var(--c-ink);
--n-88:var(--c-ink);
--n-90:var(--c-ink);
--w-semibold:600;
--time-med:var(--time);
}
}
@layer reset{
*,*::before,*::after{
box-sizing:border-box;
}
html,body{
min-height:100%;
overscroll-behavior-x:none;
overscroll-behavior-y:none;
}
html{
background:var(--n-00);
scrollbar-width:thin;
scrollbar-color:var(--scroll-thumb) var(--scroll-track);
scrollbar-gutter:stable;
overscroll-behavior:none;
}
body{
position:relative;
min-height:100vh;
margin:0;
overflow-x:hidden;
overscroll-behavior-x:none;
overscroll-behavior-y:none;
background:var(--n-00);
color:var(--c-text);
font-family:var(--font-ui);
text-rendering:geometricPrecision;
-webkit-font-smoothing:antialiased;
}
button,input,textarea,select{
margin:0;
font:inherit;
}
button{
padding:0;
border:0;
background:none;
color:inherit;
cursor:pointer;
scale:1;
transform-origin:center;
transition:scale var(--button-scale-time) var(--button-scale-ease);
}
@media (hover:hover) and (pointer:fine){
:is(button.button-animate,button.modal-foot-btn):not(:disabled):not([aria-disabled="true"]):hover{scale:var(--button-hover-scale);}
}
:is(button.button-animate,button.modal-foot-btn):not(:disabled):not([aria-disabled="true"]):active{
scale:var(--button-press-scale);
transition-duration:var(--button-press-time);
}
@keyframes siteButtonPressPop{
0%{scale:var(--button-press-scale);}
58%{scale:.985;}
100%{scale:1;}
}
.is-button-pop{
animation:siteButtonPressPop 220ms var(--button-scale-ease);
}
@media (prefers-reduced-motion:reduce){
button{transition:none!important;}
button:hover,button:active{scale:1!important;}
.is-button-pop{animation:none!important;}
}
button:disabled{
cursor:not-allowed;
opacity:.56;
}
a{
color:var(--c-link);
text-decoration-color:var(--c-link-border);
text-decoration-thickness:.08em;
text-underline-offset:.16em;
transition:color var(--time-fast) ease,border-color var(--time-fast) ease,text-decoration-color var(--time-fast) ease;
}
@media (hover:hover) and (pointer:fine){
a:hover{
color:var(--c-link-hover);
text-decoration-color:var(--c-link-hover);
}
}
a:not([role="button"]):not(.btn):not(.button):not(.product-add):not(.about-action):not(.summary-chip-action):not(.summary-chip-help){
scale:1;
}
:where(a.button-animate){
scale:1;
transform-origin:center;
transition:scale var(--button-scale-time) var(--button-scale-ease);
}
@media (hover:hover) and (pointer:fine){
a.button-animate:hover{scale:var(--button-hover-scale);}
}
a.button-animate:active{
scale:var(--button-press-scale);
transition-duration:var(--button-press-time);
}
img,svg{
display:block;
}
svg{
width:var(--icon-md);
height:var(--icon-md);
flex:0 0 auto;
fill:none;
stroke:currentColor;
stroke-width:var(--icon-stroke);
stroke-linecap:round;
stroke-linejoin:round;
}
input,textarea,select{
color:var(--n-80);
accent-color:var(--c-blue);
}
input,textarea{
caret-color:var(--c-blue);
}
input::placeholder,textarea::placeholder{
color:var(--n-50);
opacity:1;
}
:focus{
outline:none;
}
:focus-visible{
outline:2px solid var(--c-blue-24);
outline-offset:3px;
}
::selection{
background:var(--c-blue);
color:var(--n-00);
}
::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-track{
background:var(--scroll-track);
}
::-webkit-scrollbar-thumb{
min-height:44px;
border:3px solid var(--scroll-track);
border-radius:var(--radius-pill);
background:var(--scroll-thumb);
}
::-webkit-scrollbar-thumb:hover{
background:var(--scroll-thumb-hover);
}
::-webkit-scrollbar-corner{
background:var(--scroll-track);
}
.sprite{
position:absolute;
width:0;
height:0;
overflow:hidden;
}
[hidden]{
display:none!important;
}
}
@layer base{
.bg{
position:fixed;
inset:0;
z-index:-1;
background:var(--n-00);
}
.stage{
position:relative;
min-height:calc(100vh - 54px);
overflow:visible;
background:transparent;
}
.hero{
position:relative;
width:100%;
min-height:calc(100vh - 54px);
overflow:visible;
padding:0 var(--page-pad) 90px;
}
.hero::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
z-index:0;
height:calc(var(--search-top) + 12px);
pointer-events:none;
background:linear-gradient(180deg,rgb(var(--rgb-surface-soft) / .76) 0%,rgb(var(--rgb-surface) / 0) 100%);
transition:height .62s var(--ease-out),opacity var(--time) ease;
}
.is-searching .hero::before{
opacity:0;
}
.top{
position:fixed;
top:calc(var(--frame-top-y) - 18px);
left:calc(var(--frame-x) + var(--chrome-inset));
right:calc(var(--frame-x) + var(--chrome-inset));
z-index:var(--top-z);
width:auto;
max-width:none;
display:flex;
align-items:center;
justify-content:flex-end;
gap:var(--space-4);
opacity:0;
pointer-events:none;
transform:translateY(-8px);
transition:opacity var(--time-slow) var(--ease-out),transform var(--time-slow) var(--ease-out);
}
.site-ready .top{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}
.site-frame{
position:fixed;
top:var(--frame-top-y);
right:var(--frame-x);
bottom:30px;
left:var(--frame-x);
z-index:0;
pointer-events:none;
border-top:1px solid var(--frame-ink);
border-right:1px solid var(--frame-ink);
border-left:1px solid var(--frame-ink);
opacity:0;
transition:opacity .56s var(--ease-out),bottom .32s var(--ease-out);
}
.has-page-scroll .site-frame{
position:absolute;
}
.site-ready .site-frame{
opacity:1;
}
.frame-line{
display:none;
}
.actions{
position:relative;
isolation:isolate;
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:6px;
min-height:42px;
margin-left:auto;
padding:3px;
border-radius:var(--radius-md);
background:rgb(var(--rgb-surface) / .74);
box-shadow:0 1px 0 rgb(var(--rgb-muted) / .08),0 10px 24px rgb(var(--rgb-ink) / .035);
backdrop-filter:blur(14px);
}
}
@layer components{
.auth-link,.round,.link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
min-height:34px;
color:var(--c-blue);
font-size:var(--text-sm);
font-weight:var(--w-medium);
line-height:var(--lh-solid);
transition:color var(--time-fast) ease,background var(--time-fast) ease,transform var(--time-fast) ease,box-shadow var(--time-fast) ease;
}
.auth-link,.round{
position:relative;
width:38px;
height:36px;
border-radius:var(--radius-ui);
transform-origin:center;
}
.auth-link svg{
width:23px;
height:23px;
fill:currentColor;
stroke:none;
}
.round.fill svg{
width:24px;
height:24px;
fill:currentColor;
stroke:none;
}
.auth-link:hover,.round:hover{
color:var(--c-link-hover);
background:var(--c-blue-04);
scale:var(--button-hover-scale);
}
.account{
position:relative;
display:inline-flex;
align-items:center;
}
body.is-authenticated .account{
display:inline-flex;
}
}
@keyframes actionPulseScale{
0%{
transform:scale(1);
}
42%{
transform:scale(.92);
}
100%{
transform:scale(1.08);
}
}
@layer components{
.actions{
gap:0;
min-height:42px;
padding:3px;
padding-inline:8px!important;
margin-right:-8px!important;
overflow:visible;
}
.auth-link:hover,.auth-link:focus-visible,.round:hover,.round:focus-visible{
color:var(--c-link-hover);
background:var(--c-blue-04);
transform:scale(1.08);
animation:actionPulseScale .26s var(--ease-out) both;
}
.auth-link::before,.round::before,.auth-link::after,.round::after{
position:absolute;
left:50%;
z-index:8;
pointer-events:none;
opacity:0;
transform:translate(-50%,-4px) scale(.96);
transition:opacity .18s ease,transform .18s var(--ease-out);
}
.auth-link::before,.round::before{
content:attr(aria-label);
top:calc(100% + 11px);
padding:7px 9px;
border:.5px solid rgb(var(--rgb-ink) / .10);
border-radius:var(--radius-sm);
background:rgb(var(--rgb-surface) / .96);
color:var(--n-70);
box-shadow:0 12px 28px rgb(var(--rgb-ink) / .10),0 2px 8px rgb(var(--rgb-ink) / .05);
backdrop-filter:blur(12px);
font-size:var(--text-2xs);
font-weight:var(--w-strong);
line-height:1;
white-space:nowrap;
}
.auth-link::after,.round::after{
content:"";
top:calc(100% + 6px);
width:9px;
height:9px;
border-top:.5px solid rgb(var(--rgb-ink) / .10);
border-left:.5px solid rgb(var(--rgb-ink) / .10);
background:rgb(var(--rgb-surface) / .96);
transform:translate(-50%,-4px) rotate(45deg) scale(.96);
}
.auth-link:hover::before,.auth-link:focus-visible::before,.round:hover::before,.round:focus-visible::before,.auth-link:hover::after,.auth-link:focus-visible::after,.round:hover::after,.round:focus-visible::after{
opacity:1;
}
.auth-link:hover::before,.auth-link:focus-visible::before,.round:hover::before,.round:focus-visible::before{
transform:translate(-50%,0) scale(1);
}
.auth-link:hover::after,.auth-link:focus-visible::after,.round:hover::after,.round:focus-visible::after{
transform:translate(-50%,0) rotate(45deg) scale(1);
}
.hero-ico{
width:57px;
height:57px;
}
.hero-word{
height:24px;
width:167px;
}
.wholesale{
top:calc(var(--search-top) + 68px);
}
.wholesale svg{
width:16px;
height:16px;
}
}
@layer states{
body.is-searching::before{
height:calc(var(--search-active-top) + 150px);
background:linear-gradient(180deg,rgb(var(--rgb-surface) / .985) 0%,rgb(var(--rgb-surface) / .985) calc(100% - 46px),rgb(var(--rgb-surface) / 0) 100%);
}
}
body[data-site-route="inicio"]:not(.is-searching) .hero-logo{
pointer-events:none!important;
cursor:default!important;
}
.catalog-route .hero-logo,.is-searching .hero-logo{
pointer-events:auto!important;
cursor:pointer!important;
}
.is-searching .hero-logo{
top:var(--frame-top-y)!important;
left:calc(var(--frame-x) + var(--chrome-inset))!important;
opacity:.98!important;
transform-origin:left center!important;
transform:translate(0,-50%) scale(.60)!important;
animation:logoSearchIn273 .46s cubic-bezier(.18,1.08,.22,1) both!important;
}
.is-searching .hero-ico{
width:57px!important;
height:57px!important;
}
.is-searching .hero-word{
height:24px!important;
width:167px!important;
}
@keyframes logoSearchIn273{
from{
opacity:0;
transform:translate(0,calc(-50% + 12px)) scale(.60);
}
to{
opacity:.98;
transform:translate(0,-50%) scale(.60);
}
}
.wholesale svg{
transform:translateY(-2px)!important;
transform-origin:center!important;
}
@layer components{
.top{
top:calc(var(--frame-top-y) - 21px)!important;
z-index:120!important;
align-items:center!important;
justify-content:space-between!important;
pointer-events:none;
}
.top-logo,.crumbs,.actions{
pointer-events:auto;
}
.top-logo{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:6px;
min-width:0;
height:42px!important;
padding:0 var(--space-2)!important;
margin-left:-8px!important;
border-radius:0!important;
background:transparent!important;
color:var(--c-blue);
opacity:.98;
transform:translateY(1px);
transition:opacity var(--time-fast) ease,transform var(--time-fast) var(--ease-out),filter var(--time-fast) ease;
}
.top-logo:hover,.top-logo:focus-visible{
opacity:1;
transform:translateY(1px) scale(1.025);
filter:saturate(1.08);
}
.top-logo img:first-child{
width:34px;
height:34px;
flex:0 0 auto;
}
.top-logo img:last-child{
width:auto;
height:16px;
flex:0 0 auto;
}
.crumbs{
position:absolute;
top:50%;
left:50%;
z-index:80!important;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
max-width:min(620px,calc(100vw - 430px));
min-height:38px;
padding:0 13px;
border-radius:var(--radius-control-lg);
background:rgb(var(--rgb-surface) / .64);
box-shadow:inset 0 0 0 .5px rgb(var(--rgb-muted) / .08),0 10px 24px rgb(var(--rgb-ink) / .035);
color:rgb(var(--rgb-muted) / .82);
backdrop-filter:blur(14px);
transform:translate(-50%,-50%);
white-space:nowrap;
}
.crumb,.crumb>a,.crumb>span:not(.crumb-menu){
position:relative;
display:inline-flex;
align-items:center;
min-width:0;
}
.crumb>a,.crumb>span:not(.crumb-menu){
max-width:164px;
overflow:hidden;
color:inherit;
font-size:var(--text-compact);
font-weight:700;
line-height:1;
letter-spacing:-.01em;
text-overflow:ellipsis;
transition:color var(--time-fast) ease;
}
.crumb>a:hover,.crumb>a:focus-visible,.crumb.is-menu-open>a,.crumb.is-menu-open>span:not(.crumb-menu){
color:var(--c-link-hover);
}
.crumb [aria-current="page"]{
color:var(--n-70);
font-weight:700;
}
.crumb-sep{
color:rgb(var(--rgb-muted) / .34);
font-size:var(--text-md);
line-height:1;
}
.crumb-menu{
position:absolute;
top:calc(100% + 7px)!important;
left:50%;
z-index:160!important;
display:grid;
gap:0!important;
width:max-content;
min-width:230px;
max-width:min(360px,calc(100vw - 80px));
max-height:min(430px,calc(100vh - 122px));
overflow:visible auto!important;
padding:var(--space-1-5)!important;
border:.5px solid rgb(var(--rgb-ink) / .10);
border-radius:var(--radius-card);
background:rgb(var(--rgb-surface) / .975);
box-shadow:0 24px 70px rgb(var(--rgb-ink) / .14),0 4px 14px rgb(var(--rgb-ink) / .06);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translate(-50%,-4px) scale(.99)!important;
transform-origin:top center;
transition:opacity .18s ease,transform .22s var(--ease-out),visibility 0s linear .22s;
scrollbar-gutter:stable;
}
.crumb.is-menu-open .crumb-menu{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,0) scale(1)!important;
transition-delay:0s;
}
.crumb-menu::before{
content:"";
position:absolute;
top:-5px;
left:50%;
width:10px;
height:10px;
border-top:.5px solid rgb(var(--rgb-ink) / .10);
border-left:.5px solid rgb(var(--rgb-ink) / .10);
background:rgb(var(--rgb-surface) / .975);
transform:translateX(-50%) rotate(45deg);
}
.crumb-menu a{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:14px;
min-height:27px!important;
padding:0 var(--space-2)!important;
border-radius:var(--radius-xs)!important;
color:var(--n-70);
font-size:var(--text-xs)!important;
font-weight:var(--w-medium)!important;
letter-spacing:-.012em;
transition:color var(--time-fast) ease,background var(--time-fast) ease;
}
.crumb-menu a:hover,.crumb-menu a:focus-visible{
color:var(--c-link-hover);
background:var(--c-blue-04);
}
.crumb-menu a span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.crumb-menu a small{
color:var(--n-45);
font-size:var(--text-micro-lg)!important;
font-weight:var(--w-regular)!important;
font-variant-numeric:tabular-nums;
}
footer[data-site-chrome]{
position:fixed;
left:0;
right:0;
bottom:18px;
z-index:4;
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
gap:var(--space-4);
min-height:24px;
padding:0 calc(var(--frame-x) + var(--chrome-inset));
opacity:0;
pointer-events:none;
transform:translateY(10px);
transition:opacity .48s var(--ease-out),transform .48s var(--ease-out);
}
footer[data-site-chrome]::before{
content:"";
position:absolute;
left:var(--frame-x);
right:var(--frame-x);
top:50%;
z-index:0;
height:1px;
background:var(--c-frame);
}
.site-ready footer[data-site-chrome]{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}
footer[data-site-chrome]>span,footer[data-site-chrome]>nav{
position:relative;
z-index:1;
background:var(--n-00);
color:var(--n-70);
font-size:var(--text-2xs);
font-weight:520;
line-height:var(--lh-solid);
white-space:nowrap;
}
footer[data-site-chrome]>span:first-child{
justify-self:start;
padding:0 var(--space-3);
margin-left:calc(-1 * var(--space-3));
}
footer[data-site-chrome]>span:last-child{
justify-self:end;
padding:0 var(--space-3);
margin-right:calc(-1 * var(--space-3));
}
footer[data-site-chrome]>nav{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
justify-self:center;
padding:0 var(--space-3);
}
footer[data-site-chrome] button{
color:inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
transition:color var(--time-fast) ease;
}
footer[data-site-chrome] a{
display:inline-flex;
align-items:center;
gap:4px;
color:inherit;
text-decoration:none!important;
transition:color var(--time-fast) ease;
}
footer[data-site-chrome] a::after{
content:none!important;
}
footer[data-site-chrome] a:hover,footer[data-site-chrome] a:focus-visible{
color:var(--c-link-hover)!important;
border-color:var(--c-link-hover)!important;
text-decoration-color:var(--c-link-hover)!important;
}
footer[data-site-chrome] button:hover,footer[data-site-chrome] button:focus-visible{
color:var(--c-primary)!important;
}
footer[data-site-chrome] .footer-link-sep{
color:rgb(var(--rgb-muted) / .42);
font-size:var(--text-ui-sm);
font-weight:700;
line-height:1;
}
footer[data-site-chrome]>span:last-child svg{
width:11px;
height:11px;
fill:none;
stroke:currentColor;
stroke-width:1.22;
scale:var(--button-hover-scale);
}
.is-footer-detached footer[data-site-chrome]{
position:relative;
left:auto;
right:auto;
bottom:auto;
width:100%;
max-width:none;
margin:var(--space-8) auto 22px;
opacity:1;
pointer-events:auto;
transform:none;
}
}
@layer components{
.actions .auth-link,.actions .round{
transition:color .333s ease,background-color .333s ease,box-shadow .333s ease!important;
}
.actions .auth-link:hover,.actions .auth-link:focus-visible,.actions .round:hover,.actions .round:focus-visible{
color:var(--c-surface)!important;
background:var(--c-primary)!important;
transform:none!important;
animation:none!important;
box-shadow:none!important;
}
.actions .wa-link{
color:var(--c-whatsapp)!important;
}
.actions .wa-link:hover,.actions .wa-link:focus-visible{
color:var(--c-surface)!important;
background:var(--c-whatsapp)!important;
}
}
footer[data-site-chrome]>span,footer[data-site-chrome]>nav,footer[data-site-chrome] button,footer[data-site-chrome] a{
color:rgb(var(--rgb-muted) / .78)!important;
font-weight:430!important;
}
footer[data-site-chrome] .footer-link-sep{
color:rgb(var(--rgb-muted) / .42)!important;
font-weight:700!important;
}
@media (hover:hover) and (pointer:fine){
footer[data-site-chrome] a:hover,footer[data-site-chrome] a:focus-visible{
color:var(--c-link-hover)!important;
border-color:var(--c-link-hover)!important;
text-decoration-color:var(--c-link-hover)!important;
}
footer[data-site-chrome] button:hover,footer[data-site-chrome] button:focus-visible{
color:var(--c-primary)!important;
}
}
@layer components{
.top-logo,.actions{
position:relative;
isolation:isolate;
}
.top-logo::after,.actions::after{
content:"";
position:absolute;
left:-8px;
right:-8px;
top:50%;
z-index:0;
height:7px;
border-radius:var(--radius-pill);
background:var(--n-00,var(--c-surface));
transform:translateY(-50%);
pointer-events:none;
}
.top-logo>*,.actions>*{
position:relative;
z-index:1;
}
}
@layer components{

body[data-site-route="inicio"]:not(.is-searching){
--site-header-mask-bg:var(--c-surface-soft);
}
body.is-searching{
--site-header-mask-bg:rgb(var(--rgb-surface) / .985);
}
.top-logo,.top>.actions{
position:relative!important;
isolation:isolate;
align-self:center!important;
}
.top-logo::before,.top-logo::after,.top>.actions::before,.top>.actions::after{
content:""!important;
position:absolute!important;
top:50%!important;
left:-8px!important;
right:-8px!important;
z-index:0!important;
height:10px!important;
border:0!important;
border-radius:var(--radius-pill)!important;
background:var(--site-header-mask-bg)!important;
box-shadow:none!important;
transform:translateY(-50%)!important;
pointer-events:none!important;
}
.top-logo>*,.top>.actions>*{
position:relative;
z-index:1;
}
.top>.actions{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:6px!important;
min-height:42px!important;
height:42px!important;
padding:0 var(--space-2)!important;
margin-top:0!important;
margin-right:-8px!important;
margin-left:auto!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
color:var(--c-blue);
}
.top>.actions .round,.top>.actions .auth-link{
flex:0 0 auto;
}
}
@layer components{
.actions .auth-link svg,.actions .auth-link svg *{
fill:currentColor!important;
stroke:none!important;
}
body.is-authenticated .top>.actions .account,body.is-authenticated .account{
display:inline-flex!important;
}
}
@layer components{
.actions .account{
position:relative;
display:inline-flex;
align-items:center;
}
.actions .auth-link{
position:relative;
}
.account-cart-badge{
position:absolute;
top:-4px;
right:-5px;
display:inline-grid;
min-width:17px;
height:17px;
place-items:center;
padding:0 5px;
border:2px solid rgb(var(--rgb-surface) / .92);
border-radius:var(--radius-pill);
background:var(--c-danger);
color:var(--c-surface);
font-size:var(--text-3xs);
font-weight:700;
line-height:13px;
box-shadow:0 6px 16px rgb(var(--rgb-danger) / .28);
}
.account-cart-badge[hidden],.account-menu b[hidden],.account-menu [data-account-current-order][hidden]{
display:none!important;
}
.account-menu{
position:absolute;
top:calc(100% + 10px);
right:0;
z-index:80;
display:grid;
width:230px;
gap:4px;
padding:var(--space-2);
border:1px solid rgb(var(--rgb-line) / .14);
border-radius:var(--radius-md);
background:rgb(var(--rgb-surface) / .96);
box-shadow:0 20px 52px rgb(var(--rgb-primary) / .14),0 4px 14px rgb(var(--rgb-primary) / .07);
backdrop-filter:blur(14px);
}
.account-menu[hidden]{
display:none!important;
}
.account-menu button{
display:grid;
grid-template-columns:22px minmax(0,1fr) auto;
align-items:center;
gap:9px;
min-height:36px;
padding:0 var(--space-2-5);
border-radius:var(--radius-compact-xl);
color:var(--c-ink);
font-size:var(--text-ui);
font-weight:700;
text-align:left;
transition:background-color .18s ease,color .18s ease;
}
.account-menu button:hover{
background:rgb(var(--rgb-primary) / .06);
color:var(--c-primary);
}
.account-menu button svg{
width:20px;
height:20px;
color:currentColor;
fill:currentColor;
stroke:none;
}
.account-menu button span{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.account-menu button b{
display:inline-grid;
min-width:20px;
height:18px;
place-items:center;
padding:0 6px;
border-radius:var(--radius-2xs);
background:var(--n-20);
color:var(--n-50);
font-size:var(--text-compact);
font-weight:700;
line-height:18px;
}
.account-menu button[data-logout]{
margin-top:3px;
border-top:1px solid rgb(var(--rgb-line) / .10);
padding-top:3px;
}
}
@layer components{
.product-breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--space-2);
margin:var(--space-8) 0 var(--space-4);
color:var(--n-50);
font-size:var(--text-xs);
font-weight:var(--w-medium);
}
.product-breadcrumb a{
display:inline-flex;
align-items:center;
min-height:22px;
color:var(--c-blue);
font-weight:var(--w-bold);
text-decoration:none;
border-radius:var(--radius-pill);
transition:color var(--time-fast) ease,background var(--time-fast) ease,box-shadow var(--time-fast) ease;
}
.product-breadcrumb a:hover{
color:var(--c-link-hover);
background:var(--c-blue-06);
box-shadow:0 0 0 4px var(--c-blue-06);
}
.product-breadcrumb em{
color:var(--n-60);
font-style:normal;
}
}
@layer components{
.crumb{
z-index:1;
}
.crumb.is-menu-open{
z-index:90;
}
.crumb.is-menu-open::after{
content:"";
position:absolute;
left:-14px;
right:-14px;
top:100%;
height:14px;
pointer-events:auto;
}
.crumb-menu-pin{
position:absolute;
left:50%;
top:-14px;
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:14px;
color:rgb(var(--rgb-muted) / .66);
transform:translateX(-50%) rotate(180deg);
pointer-events:none;
}
.crumb-menu-pin svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.55;
stroke-linecap:round;
stroke-linejoin:round;
}
.crumb-menu a:hover small,.crumb-menu a:focus-visible small{
color:var(--n-42)!important;
}
}
@layer components{
.crumb-menu a small,.crumb-menu a:hover small,.crumb-menu a:focus-visible small,.crumb-menu a[aria-current="page"] small{
color:rgb(var(--rgb-muted) / .58)!important;
background:transparent!important;
font-weight:var(--w-regular)!important;
}
}
@layer responsive{
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:1ms!important;
animation-iteration-count:1!important;
scroll-behavior:auto!important;
transition-duration:1ms!important;
}
}
}
@layer components{
.sr-only{
position:absolute!important;
width:1px!important;
height:1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
clip-path:inset(50%)!important;
}
}
@layer components{
.cookie-consent{
position:fixed;
left:22px;
bottom:22px;
z-index:240;
box-sizing:border-box;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:10px;
width:min(460px,calc(100vw - 44px));
padding:10px 10px 10px 13px;
border:1px solid rgb(var(--rgb-line) / .14);
border-radius:var(--radius-card);
background:rgb(var(--rgb-surface) / .96);
box-shadow:0 16px 38px rgb(var(--rgb-ink) / .12),0 4px 12px rgb(var(--rgb-ink) / .05);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
color:var(--n-58);
transform:translateY(18px);
opacity:0;
pointer-events:none;
transition:opacity var(--time-med) ease,transform var(--time-med) ease,box-shadow var(--time-fast) ease;
}
.cookie-consent[hidden]{
display:none!important;
}
.cookie-consent:not([hidden]){
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.cookie-consent.is-hiding{
opacity:0;
transform:translateY(14px);
pointer-events:none;
}
.cookie-consent-text{
min-width:0;
}
.cookie-consent-text span{
display:block;
color:var(--n-58);
font-size:var(--text-ui-sm);
font-weight:500;
line-height:1.35;
letter-spacing:-.01em;
}
.cookie-consent-actions{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
}
.cookie-consent-actions button{
min-width:0;
border:0;
font-family:var(--font-ui);
font-size:var(--text-ui-sm);
font-weight:700;
line-height:1;
cursor:pointer;
transition:color var(--time-fast) ease,border-color var(--time-fast) ease,background var(--time-fast) ease,box-shadow var(--time-fast) ease,transform var(--time-fast) ease;
}
.cookie-consent-reject,.cookie-consent-more{
height:32px;
padding:0 4px;
background:transparent;
color:var(--c-blue);
}
.cookie-consent-reject:hover,.cookie-consent-reject:focus-visible,.cookie-consent-more:hover,.cookie-consent-more:focus-visible{
color:var(--c-primary-dark);
text-decoration:underline;
text-underline-offset:3px;
}
.cookie-consent-ok{
height:32px;
padding:0 13px;
border-radius:var(--radius-sm);
background:var(--c-blue);
color:var(--c-surface);
box-shadow:0 9px 20px rgb(var(--rgb-primary) / .15);
}
.cookie-consent-ok:hover,.cookie-consent-ok:focus-visible{
background:var(--c-primary-dark);
box-shadow:0 12px 24px rgb(var(--rgb-primary) / .2);
scale:var(--button-hover-scale);
}
}
@layer responsive{
@media (max-width:860px){
.cookie-consent{
left:50%;
right:auto;
bottom:calc(12px + env(safe-area-inset-bottom,0px));
grid-template-columns:1fr;
gap:9px;
width:min(430px,calc(100vw - 24px));
padding:10px 10px 10px 12px;
border-radius:var(--radius-card);
transform:translate(-50%,18px);
}
.cookie-consent:not([hidden]){
transform:translate(-50%,0);
}
.cookie-consent.is-hiding{
transform:translate(-50%,14px);
}
.cookie-consent-text span{
font-size:var(--text-xs);
line-height:1.34;
}
.cookie-consent-actions{
justify-content:flex-end;
flex-wrap:wrap;
gap:7px;
}
.cookie-consent-reject,.cookie-consent-more{
height:31px;
padding:0 3px;
}
.cookie-consent-ok{
height:31px;
padding:0 11px;
}
}
@media (max-width:380px){
.cookie-consent{
width:calc(100vw - 18px);
gap:7px;
padding:9px 9px 9px 11px;
}
.cookie-consent-text span{
font-size:var(--text-compact);
}
.cookie-consent-ok{
padding:0 var(--space-2-5);
}
}
}



/* STEP 794 — alternating attention cue for the header assistant */
.top>.actions>button[data-ai-open] svg{
width:22px;
height:22px;
color:var(--c-primary);
fill:currentColor;
stroke:none;
animation:headerAiColorCycle 6s ease-in-out infinite;
will-change:color,filter,transform;
}
.top>.actions>button[data-ai-open]:hover svg,.top>.actions>button[data-ai-open]:focus-visible svg{
animation:none;
color:currentColor;
filter:none;
}
@keyframes headerAiColorCycle{
0%{color:var(--c-primary);filter:drop-shadow(0 0 0 rgb(var(--rgb-primary) / 0));transform:scale(1);}
8%{color:#8b5cf6;filter:drop-shadow(0 0 5px rgb(139 92 246 / .28));transform:scale(1.04);}
18%{color:#ec4899;filter:drop-shadow(0 0 6px rgb(236 72 153 / .30));transform:scale(1.07);}
28%{color:#ff3b30;filter:drop-shadow(0 0 6px rgb(255 59 48 / .28));transform:scale(1.04);}
38%{color:#00b894;filter:drop-shadow(0 0 6px rgb(0 184 148 / .28));transform:scale(1.07);}
50%,100%{color:var(--c-primary);filter:drop-shadow(0 0 0 rgb(var(--rgb-primary) / 0));transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
.top>.actions>button[data-ai-open] svg{animation:none;}
}


/* STEP 795 — opt-in button scale and monochrome site-logo masks */
@layer components{
.site-logo-mark,.site-logo-word{
  display:block;
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.site-logo-mark{
  -webkit-mask-image:url('/hubo/assets/svg/ico.svg');
  mask-image:url('/hubo/assets/svg/ico.svg');
  aspect-ratio:1;
}
.site-logo-word{
  -webkit-mask-image:url('/hubo/assets/svg/logo.svg');
  mask-image:url('/hubo/assets/svg/logo.svg');
  aspect-ratio:6.94 / 1;
}
.top-logo .site-logo-mark{width:34px;height:34px;}
.top-logo .site-logo-word{width:111px;height:16px;}
.product-page-logo .site-logo-mark{width:34px;height:34px;}
.product-page-logo .site-logo-word{width:194px;height:28px;}
.content-page-logo .site-logo-mark{width:57px;height:57px;}
.content-page-logo .site-logo-word{width:187px;height:27px;}
}
@layer states{
button:not(.button-animate):not(.modal-foot-btn),
a[role="button"]:not(.button-animate),a.btn:not(.button-animate),a.button:not(.button-animate),
.product-add:not(.button-animate),.about-action:not(.button-animate),.missing-card a:not(.button-animate),
.summary-chip-action:not(.button-animate),.summary-chip-help:not(.button-animate){
  scale:1!important;
}
.auth-link:hover,.auth-link:focus-visible,.auth-link:active,
.round:hover,.round:focus-visible,.round:active,
.top-logo:hover,.top-logo:focus-visible,.top-logo:active{
  animation:none!important;
}
.auth-link:hover,.auth-link:focus-visible,.auth-link:active,
.round:hover,.round:focus-visible,.round:active{
  transform:none!important;
}
.top-logo:hover,.top-logo:focus-visible,.top-logo:active{
  transform:translateY(1px)!important;
}
}
@media (max-width:980px){
  .top-logo .site-logo-mark{width:30px;height:30px;}
  .top-logo .site-logo-word{width:97px;height:14px;}
}
@media (max-width:860px){
  .content-page-logo .site-logo-mark{width:42px;height:42px;}
  .content-page-logo .site-logo-word{width:139px;height:20px;}
}
@media (max-width:520px){
  .about-page-logo .site-logo-mark{width:42px;height:42px;}
  .about-page-logo .site-logo-word{width:139px;height:20px;}
}

/* STEP 796 — account popover pointer */
.account-menu::before{
  content:"";
  position:absolute;
  top:-7px;
  right:15px;
  z-index:-1;
  width:14px;
  height:14px;
  border-top:1px solid rgb(var(--rgb-line) / .14);
  border-left:1px solid rgb(var(--rgb-line) / .14);
  background:rgb(var(--rgb-surface) / .96);
  box-shadow:-3px -3px 12px rgb(var(--rgb-primary) / .045);
  transform:rotate(45deg);
}
.account-menu::before{z-index:0;pointer-events:none;}
.account-menu>*{position:relative;z-index:1;}