.vbfb-notification {
position: fixed;
left: 0;
right: 0;
z-index: 999999;
padding: 16px;
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
} .vbfb-notification--top {
top: 0;
}
.vbfb-notification--bottom {
top: auto;
bottom: 0;
transform: translateY(100%);
} .vbfb-notification--visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
} .vbfb-notification--fade {
transform: translateY(0);
}
.vbfb-notification--fade:not(.vbfb-notification--visible) {
opacity: 0;
} .vbfb-notification__container {
max-width: 600px;
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
background: #ffffff;
}  .vbfb-notification--success .vbfb-notification__container {
background: #D1FAE5;
color: #065F46;
border-left: 4px solid #10B981;
}
.vbfb-notification--success .vbfb-notification__icon {
color: #10B981;
} .vbfb-notification--error .vbfb-notification__container {
background: #FEE2E2;
color: #991B1B;
border-left: 4px solid #EF4444;
}
.vbfb-notification--error .vbfb-notification__icon {
color: #EF4444;
} .vbfb-notification__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 2px;
}
.vbfb-notification__content {
flex: 1;
min-width: 0;
}
.vbfb-notification__message {
margin: 0;
font-size: 15px;
line-height: 1.5;
font-weight: 500;
}
.vbfb-notification__close {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
color: currentColor;
opacity: 0.6;
transition: opacity 0.2s ease, background-color 0.2s ease;
margin: -4px -4px -4px 0;
}
.vbfb-notification__close:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.05);
}
.vbfb-notification__close:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.vbfb-notification__close:active {
transform: scale(0.95);
} @media (max-width: 640px) {
.vbfb-notification {
padding: 12px;
}
.vbfb-notification__container {
padding: 14px 16px;
gap: 10px;
}
.vbfb-notification__message {
font-size: 14px;
}
}  @media (prefers-reduced-motion: reduce) {
.vbfb-notification {
transition: opacity 0.1s ease;
transform: none !important;
}
.vbfb-notification__close:active {
transform: none;
}
} @media (prefers-contrast: high) {
.vbfb-notification__container {
border: 2px solid currentColor;
}
.vbfb-notification__close:focus {
outline-width: 3px;
}
}  .vbfb-notification * {
box-sizing: border-box;
}
.vbfb-notification p {
margin: 0;
}
.vbfb-notification button {
font-family: inherit;
} .vbfb-notification--loading .vbfb-notification__icon {
animation: vbfb-spin 1s linear infinite;
}
@keyframes vbfb-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} .vbfb-notification:not(:first-of-type) {
top: auto;
bottom: auto;
position: relative;
margin-top: 8px;
}:root{
--vb-gold: #D8C4A0;
--vb-gold-600: #c9b48f; --vb-black: #000000; --vb-text: #374151; --vb-muted: #6B7280; } body {
font-family: "GT Standard L", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.75;
color: var(--vb-text);
background-color: #ffffff;
font-weight: 400;
} h1, h2, h3, h4, h5, h6 {
font-family: "GT Standard L", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem; color: #000;
} h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; font-weight: 600; } h5 { font-size: 1rem;     font-weight: 600; } h6 { font-size: 0.9375rem;font-weight: 600; }  @media (min-width: 768px) {
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem; }
} p {
font-size: 1rem;
font-weight: 400;
line-height: 1.75;
}
.info {
color: red;
font-style: italic;
} a {
text-decoration: none !important;
}  .text-gold   { color: var(--vb-gold) !important; }
.bg-gold     { background-color: var(--vb-gold) !important; }
.border-gold { border-color: var(--vb-gold) !important; } .text-heading { color: var(--vb-black) !important; } .text-body  { color: var(--vb-text) !important; }
.text-muted { color: var(--vb-muted) !important; } .hover\:text-gold:hover   { color: var(--vb-gold) !important; }
.hover\:bg-gold:hover     { background-color: var(--vb-gold-600) !important; }
.hover\:border-gold:hover { border-color: var(--vb-gold-600) !important; } .link {
color: var(--vb-text);
text-decoration: none;
transition: color .18s ease;
}
.link:hover { color: var(--vb-gold); } a.link-underline,
.link-underline a { position: relative;
text-decoration: none;
color: inherit;
}
a.link-underline::after,
.link-underline a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px; height: 2px;
background: var(--vb-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
a.link-underline:hover::after,
a.link-underline:focus-visible::after,
.link-underline a:hover::after,
.link-underline a:focus-visible::after {
transform: scaleX(1);
} .link-underline--thin::after { height: 1px; }
.link-underline--thick::after { height: 3px; } @media (prefers-reduced-motion: reduce) {
a.link-underline::after,
.link-underline a::after { transition: none; }
} .btn {
display: inline-block;
padding: 0.5rem 1.5rem;
font-weight: 600;
font-size: 1rem;
border-radius: 0.375rem;
text-align: center;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
box-shadow: none;
will-change: transform;
transform: translateZ(0);
}
.btn-full {
display: block;     
width: 100%;        
}
.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(0.99); } @media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
.btn:hover, .btn:active { transform: none; }
} .btn-gold { background-color: #D8C4A0; color: #fff; }
.btn-gold:hover {
background-color: #c9b48f;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
} .btn-gray { background-color: #B4B4B4; color: #fff; }
.btn-gray:hover {
background-color: #9e9e9e;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
} .btn-black { background-color: #000; color: #fff; }
.btn-black:hover {
background-color: #000;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
} .btn-gold-opuesto {
background-color: #fff;
color: #D8C4A0;
border: 2px solid #D8C4A0;
}
.btn-gold-opuesto:hover {
background-color: #fff;
color: #D8C4A0;
border: 2px solid #D8C4A0;
}
.btn-gray-opuesto {
background-color: #fff;
color: #B4B4B4;
border: 2px solid #B4B4B4;
}
.btn-gray-opuesto:hover {
background-color: #fff;
color: #B4B4B4;
border: 2px solid #B4B4B4;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}  #site-header {
}
#site-header.header--scrolled {
background-color: #ffffff;
color: #000000;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
} .menu-primary a {
color: inherit;
text-decoration: none;
font-weight: 500;
padding: .5rem .25rem;
position: relative;
transition: color .2s ease;
}
.menu-primary li > a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 2px; background: #D8C4A0;
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
.menu-primary li:hover > a::after,
.menu-primary li:focus-within > a::after { transform: scaleX(1); } #site-header.header--scrolled #primary-menu-toggle svg { color: #000000; }  #mobile-menu[hidden]{ display:none !important; } .body--no-scroll { overflow: hidden; }
.body--menu-open #site-header { opacity: 0; pointer-events: none; } #mobile-menu nav a{
display: inline-block;
padding-bottom: .25rem;
border-bottom: 2px solid transparent;
font-weight: 600;
font-size: 1.125rem; color: #000;
text-decoration: none;
transition: border-color .2s ease;
}
#mobile-menu nav a:hover,
#mobile-menu nav a:focus-visible { border-color: #D8C4A0; }
#mobile-menu .current-menu-item > a { border-color: #D8C4A0; } #mega-products[aria-hidden="true"]{ display:none !important; } #faqs [data-accordion-trigger] .faq-q{color:var(--vb-text);transition:color .2s}
#faqs [data-accordion-trigger] .faq-indicator{color:#9CA3AF;border-color:#9CA3AF;transition:color .2s,border-color .2s,transform .2s}
#faqs [data-accordion-trigger][aria-expanded="true"] .faq-q{color:var(--vb-gold)}
#faqs [data-accordion-trigger][aria-expanded="true"] .faq-indicator{color:var(--vb-gold);border-color:var(--vb-gold);transform:rotate(180deg)} @keyframes vb-scroll-dot {
0%, 20%   { transform: translateY(0);   opacity: 1; }
60%       { transform: translateY(8px); opacity: .25; }
100%      { transform: translateY(0);   opacity: 1; }
}
.scroll-dot {
animation: vb-scroll-dot 1.6s ease-in-out infinite;
will-change: transform, opacity;
} @media (prefers-reduced-motion: reduce) {
.scroll-dot { animation: none; }
}  #mobile-menu .mobile-cats .sub-menu {
display: none;
margin-top: 0.25rem;
padding-left: 1.25rem;
font-size: 0.95em;
line-height: 1.5;
} #mobile-menu .mobile-cats li.is-open > .sub-menu {
display: block;
} #mobile-menu .mobile-cats .menu-item-has-children > a {
display: flex;
align-items: center;
justify-content: space-between;
} #mobile-menu .mobile-cats .mobile-cats-chevron {
font-size: 0.8em;
transition: transform 0.2s ease;
} #mobile-menu .mobile-cats li.is-open > a .mobile-cats-chevron {
transform: rotate(180deg);
}  #mega-products section {
height: 100vh;
max-height: 100vh;
} .mega-panel-2cols {
display: grid;
grid-template-columns: 280px 340px;
grid-template-areas: "sidebar categories";
width: 620px;
transition: all 0.3s ease;
}
.mega-panel-3cols {
display: grid;
grid-template-columns: 280px 340px 1fr;
grid-template-areas: "sidebar categories subcategories";
width: 85vw;
max-width: 1600px;
transition: all 0.3s ease;
} .mega-sidebar {
grid-area: sidebar;
}
.mega-categories {
grid-area: categories;
}
.mega-subcategories {
grid-area: subcategories;
display: none; } .mega-panel-3cols .mega-subcategories {
display: block;
}  #mega-products [data-close-mega] {
color: var(--vb-text) !important;
}
#mega-products [data-close-mega]:hover {
color: var(--vb-black) !important;
} #mega-products svg {
color: currentColor;
} @media (max-width: 1280px) {
.mega-panel-3cols {
grid-template-columns: 240px 300px 1fr;
width: 90vw;
}
} @media (max-width: 767px) {
#mega-products {
display: none !important;
}
} #mega-products section {
transition: width 0.3s ease, grid-template-columns 0.3s ease;
} #banner-que-necesitas h2,
#banner-que-necesitas p {
color: #ffffff !important;
}
#banner-que-necesitas .btn {
background-color: #000000;
color: #ffffff;
border: none;
}
#banner-que-necesitas .btn:hover {
background-color: #111111;
} #blog-content h2,
#blog-content h3,
#blog-content h4 {
margin-top: 1rem; 
}  .vb-marquee-line {
overflow: hidden;
} .vb-marquee__inner {
white-space: nowrap;
} .vb-marquee__inner--line1 {
animation: vb-marquee-scroll 38s linear infinite;
} .vb-marquee__inner--line2 {
animation: vb-marquee-scroll 48s linear infinite;
animation-delay: -5s; animation-direction: reverse;
} @keyframes vb-marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} .vb-marquee__word--gradient {
background-image: linear-gradient(
to right,
var(--vb-gold),
rgba(216, 196, 160, 0)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}  .no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .vb-thumb {
flex: 0 0 calc((100% - (12px * 3)) / 4); }
@media (min-width: 768px) {
.vb-thumb {
flex: 0 0 calc((100% - (12px * 4)) / 5); }
} .aspect-video iframe{
width: 100% !important;
height: 100% !important;
display: block;
}   .vb-wysiwyg > * {
margin: 0 0 1rem;
}
.vb-wysiwyg > *:last-child {
margin-bottom: 0;
} .vb-wysiwyg h2,
.vb-wysiwyg h3,
.vb-wysiwyg h4 {
margin: 2rem 0 1rem;
font-weight: 800;
line-height: 1.2;
}
.vb-wysiwyg h2 { font-size: 1.75rem; }
.vb-wysiwyg h3 { font-size: 1.35rem; }
.vb-wysiwyg h4 { font-size: 1.15rem; } .vb-wysiwyg p {
line-height: 1.75;
} .vb-wysiwyg a {
text-decoration: underline;
text-underline-offset: 3px;
} .vb-wysiwyg ul,
.vb-wysiwyg ol {
padding-left: 1.25rem;
margin: 0 0 1rem;
list-style-position: outside;
}
.vb-wysiwyg ul { list-style-type: disc; }
.vb-wysiwyg ol { list-style-type: decimal; }
.vb-wysiwyg li {
margin: 0.35rem 0;
} .vb-wysiwyg table {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0;
font-size: 0.95em;
} .vb-wysiwyg th,
.vb-wysiwyg td {
border: 1px solid rgba(0,0,0,.12);
padding: .75rem;
text-align: left;
vertical-align: top;
} .vb-wysiwyg thead th {
font-weight: 800;
} @media (max-width: 768px) {
.vb-wysiwyg table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
} .vb-wysiwyg th,
.vb-wysiwyg td {
white-space: nowrap;
}
} .vb-wysiwyg strong { font-weight: 800; }
.vb-wysiwyg em { font-style: italic; } .vb-wysiwyg br {
line-height: 1.75;
} .mobile-cats,
.mobile-cats ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-cats > li + li {
margin-top: 10px;
} .mobile-cats > li > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 16px;
border-radius: 14px;
background: rgba(0,0,0,.04);
color: #111;
text-decoration: none;
font-weight: 600;
font-size: 18px;
line-height: 1.15;
transition: background .15s ease, transform .05s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-cats > li > a:hover { background: rgba(0,0,0,.06); }
.mobile-cats > li > a:active { background: rgba(0,0,0,.10); transform: scale(.99); } .mobile-cats .sub-menu {
margin-top: 10px;
padding-left: 0;
border-left: 0;
}
.mobile-cats .sub-menu li + li {
margin-top: 6px;
} .mobile-cats .sub-menu a {
display: block;
width: 100%;
background: transparent;
color: #111;
text-decoration: none;
font-weight: 500;
font-size: 16px;
line-height: 1.2;
padding: 10px 6px 10px 18px; border-radius: 0;
transition: background .15s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-cats .sub-menu a:hover { background: rgba(0,0,0,.04); }
.mobile-cats .sub-menu a:active { background: rgba(0,0,0,.08); } .vb-catalogo-global {
min-height: 100vh;
}
.vb-catalogo-wrap {
width: 100%;
height: calc(100vh - var(--vb-header-offset, 0px));
}
.vb-catalogo-wrap iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}