:root { --color-primary: #99cc00; --color-primary-dark: #263238; --color-primary-light: #789e04; --color-active: #a57865; --color-other-cat: #55a1a9;  --color-junior: #5B6ABB; 
--color-bunk: #a9c11f; 
--color-wall: #c876d8; 
--color-pullout: #a4bf58; 
--color-kids: #4ca0c4; 
--color-baby: #c28f58; 
--color-wardrobes: #54a9b0;
--color-bedrooms: #7E8CA3; --color-modular: #D99058; --color-aux: #8E8577; --color-office: #5F8A72;  --color-submenu: #8B7355; --color-submenu-active: #6B5335;  --gap-small: 8px;
--gap-medium: 16px;
--padding-button: 10px 16px; --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.15);
--shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.2); --radius-button: 4px; --transition-button: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} #navcontainer {
margin: 0 0 25px;
padding: 0;
text-align: center;
}
#navcontainer ol {
padding: 0;
margin: 0 0 var(--gap-medium) 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
list-style: none;
} #navcontainer ol li {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
}  #navcontainer ol li a {
display: block;
color: white !important;
background: var(--color-primary);
padding: var(--padding-button);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
border-radius: var(--radius-button);
box-shadow: var(--shadow-button);
transition: var(--transition-button);
text-decoration: none;
letter-spacing: 0.5px;
text-align: center;
cursor: pointer;
user-select: none;
} #navcontainer ol li a:hover {
background: var(--color-primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-button-hover);
} #navcontainer ol li.active > a,
#navcontainer > ol > li.act > a {
background: var(--color-active);
transform: translateY(0);
position: relative;
} #filters > li.otrocat > a {
background: var(--color-other-cat) !important;
} #navcontainer ol li.active > a:after,
#navcontainer > ol > li.act > a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 2px;
background: rgba(255, 255, 255, 0.7);
border-radius: 1px;
}  #navcontainer ol li.btn-tipo > a {
background-color: var(--btn, var(--color-primary));
}
#navcontainer ol li.btn-tipo > a:hover {
background-color: var(--btn-hover, var(--btn, var(--color-primary-light)));
}
#navcontainer ol li.btn-tipo.active > a,
#navcontainer > ol > li.btn-tipo.act > a {
background-color: var(--btn-active, var(--btn, var(--color-active)));
}  #navcontainer ol li.junior {
--btn: var(--color-junior);
--btn-hover: #6B7BC8;
--btn-active: #4A59AA;
} #navcontainer ol li.bunk {
--btn: var(--color-bunk);
--btn-hover: #a2ce2a;
--btn-active: #86b019;
} #navcontainer ol li.wardrobes {
--btn: var(--color-wardrobes);
--btn-hover: #60b6bd;
--btn-active: #4a989e;
}
#navcontainer ol li.pullout    { --btn: var(--color-pullout); } #navcontainer ol li.wall       { --btn: var(--color-wall); } #navcontainer ol li.kids       { --btn: var(--color-kids); } #navcontainer ol li.baby       { --btn: var(--color-baby); } #navcontainer ol li.bedrooms   { --btn: var(--color-bedrooms); } #navcontainer ol li.modular    { --btn: var(--color-modular); } #navcontainer ol li.aux        { --btn: var(--color-aux); } #navcontainer ol li.office     { --btn: var(--color-office); }   #navcontainer ol li.wall-h      { --btn: #b45cc6; } #navcontainer ol li.wall-v      { --btn: #d894e4; } #navcontainer ol li.wall-double { --btn: #a147b3; } #navcontainer ol li.wall-twin   { --btn: #e3b0eb; }  #navcontainer ol li.wardrobes-custom { --btn: #5cbcc4; } #navcontainer ol li.doors-hinged     { --btn: #3f8f96; } #navcontainer ol li.doors-sliding    { --btn: #6fbcc2; } #navcontainer ol li.builtin          { --btn: #2f767c; } #navcontainer ol li.walkin           { --btn: #8fd0d5; }  #navcontainer ol li.brand-up    { --btn: #b0566a; }
#navcontainer ol li.brand-flat  { --btn: #c47a5b; }
#navcontainer ol li.brand-grow  { --btn: #7a9b5e; }
#navcontainer ol li.brand-pukka { --btn: #8a6ba8; }
#navcontainer ol li.brand-nest  { --btn: #4f8fa8; }  #navcontainer ol li.c-sub {
display: grid;
padding: 0;
}
#navcontainer ol li.c-sub ul.submenu {
padding: 8px;
margin: 5px 0 0;
background: white;
border-radius: 4px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
#navcontainer ol li.c-sub ul.submenu li {
display: inline-block;
}
#navcontainer ol li.c-sub ul.submenu li a {
padding: 6px 12px;
font-size: 14px;
color: #455a64;
background: #f5f5f5;
box-shadow: none;
text-transform: none;
}
#navcontainer ol li.c-sub ul.submenu li a:hover {
background: #e0e0e0;
transform: translateY(-1px);
}
#navcontainer ol li.c-sub ul.submenu li a.active {
background: var(--color-primary);
color: white;
} @media only screen and (max-width: 1079px) {
#navcontainer ol {
gap: 8px;
}
#navcontainer ol li a {
padding: 8px 12px;
font-size: 14px;
}
}
@media only screen and (max-width: 540px) {
#navcontainer ol {
gap: 6px;
}
#navcontainer ol li a {
padding: 6px 10px;
font-size: 13px;
}
#navcontainer ol li.c-sub {
width: 95% !important;
}
} #submenu-container {
margin: 15px 0;
padding: 0;
text-align: center;
}
#submenu-container ol {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gap-small);
}
#submenu-container ol li {
display: inline-block;
cursor: pointer;
list-style: none;
}
#submenu-container ol li a {
display: block;
color: #fff !important;
padding: var(--padding-button);
font-size: 15px;
background: var(--color-submenu);
border-radius: var(--radius-button);
box-shadow: var(--shadow-button);
transition: var(--transition-button);
text-decoration: none;
}
#submenu-container ol li a:hover {
background: var(--color-submenu-active);
box-shadow: var(--shadow-button-hover);
transform: translateY(-2px);
} #submenu-container ol li.active > a {
background: var(--color-submenu-active);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
transform: scale(1.05);
font-weight: bold;
} #containerpint,
div#containerpint {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-auto-rows: 0;
max-width: 1540px;
width: 100% !important;
margin: 20px auto;
min-height: 300px;
list-style: none;
padding: 0 !important;
} div#containerpint div.itempint {
display: block;
max-width: 500px;
overflow: visible;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border-radius: 2px;
background: #eee;
margin: auto;
} div#containerpint div.itempint.noshadow {
box-shadow: none;
background-color: #ffffff !important;
} div#containerpint div.contentpint.intercalado {
padding: 40px 30px 30px 30px;
} div#containerpint .flex-video2 {
position: relative;
cursor: pointer;
width: 500px;
max-width: 100%;
} div#containerpint a.pint {
position: relative;
vertical-align: top;
display: flex;
} div#containerpint a:visited {
border: 2px solid black;
} div#containerpint div.txtbase {
min-height: 40px;
width: 100%;
font-size: 14px;
line-height: 1.3em;
margin: 0;
padding: 6px;
text-align: center;
position: relative;
background-color: #ffffff; color: #000000;  display: flex;
align-items: center;
justify-content: center;
} div#containerpint div.txtbase > span {
display: block;
overflow-wrap: break-word;
text-wrap: balance;
} div#containerpint div.txtbase.txt-long > span {
max-width: 380px;
margin-left: auto;
margin-right: auto;
} div#containerpint span.scp-pint-new {
display: block;
position: absolute;
top: 0px !important;
right: 0px !important;
width: 75px;
height: 75px;
padding: 0px;
margin: 0px;
}
div#containerpint span.scp-pint-new img {
display: inherit;
}  @media only screen and (max-width: 1079px) {
div#containerpint {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
div#containerpint div.itempint {
margin-bottom: 0;
width: 100%;
} div#containerpint div.txtbase.txt-long > span {
max-width: 100%;
}
} @media only screen and (min-width: 1080px) and (max-width: 1579px) {
div#containerpint {
width: 1080px !important;
}
} @media all and (min-width: 900px) {
div#containerpint.m-sub {
margin-top: 40px;
}
}  .scp-image-container {
position: relative;
display: block;
} .scp-ficha-btn {
position: absolute;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 12px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
z-index: 999;
pointer-events: auto;
border-radius: 0;
}
.scp-ficha-btn:hover {
background: rgba(0, 0, 0, 0.9);
color: white;
text-decoration: none;
} .scp-image-container .pint {
display: block;
position: relative;
} div#containerpint span.scp-pint-new {
display: block;
position: absolute;
top: 0;
right: 0;
width: 75px;
height: 75px;
padding: 0;
margin: 0;
z-index: 2;
pointer-events: none;
}