.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}:where(.brand-thumbnails-description),ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}:where(.brand-thumbnails-description)::before,ul.brand-thumbnails:before{clear:both;content:"";display:table}:where(.brand-thumbnails-description)::after,ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}:where(.brand-thumbnails-description li.first),ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(2n){margin-right:0}}:where(.brand-thumbnails-description li){float:left;margin:0 2% 1em 0;padding:0;position:relative;text-align:center}:where(.brand-thumbnails-description li.last),:where(.brand-thumbnails-description.columns-1 li){margin-right:0}:where(.brand-thumbnails-description li .term-thumbnail img){width:100%;display:inline}:where(.brand-thumbnails-description li .term-description){margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin: 0;
}
img,
picture,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
img {
height: auto;
}
iframe {
max-width: 100%;
border: 0;
}
input,
button,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
border: none;
background: transparent;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: vertical;
}
:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}@font-face {
font-family: "Montserrat";
src: url(//www.vitamania.pe/wp-content/themes/Vitamania/fonts/Montserrat-VariableFont_wght.woff2)
format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.vitamania.pe/wp-content/themes/Vitamania/fonts/Montserrat-Italic-VariableFont_wght.woff2)
format("woff2-variations");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Benoa";
src: url(//www.vitamania.pe/wp-content/themes/Vitamania/fonts/BenoaMedium.ttf) format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root { --font-main: "Montserrat", sans-serif;
--font-seccondary: "Benoa", sans-serif; --color-primary: oklch(82.895% 0.14276 83.638);
--color-seccondary: oklch(57.371% 0.10546 151.442);
--color-seccondary-dark: oklch(28.803% 0.02092 153.465);
--color-light: oklch(100% 0.00011 271.152);
--color-support: oklch(91.826% 0.02529 111.859);
--color-support-2: oklch(95.389% 0.05033 89.761);
--color-support-3: oklch(90.081% 0.00282 84.328);
--color-wa: oklch(76.096% 0.20144 149.762); --space-unit: 1rem; --p-sm: calc(var(--space-unit) * 0.5); --p-md: var(--space-unit); --p-lg: calc(var(--space-unit) * 1.5); --p-xl: calc(var(--space-unit) * 3);  --m-sm: calc(var(--space-unit) * 0.5); --m-md: var(--space-unit);
--m-lg: calc(var(--space-unit) * 1.5); --m-xl: calc(var(--space-unit) * 3);  --sh-normal: -4px 4px 24px 4px rgba(0, 0, 0, 0.15); --tr-short: 0.3s;
--tr-simple: ease;
}.container {
width: 100%;
max-width: 1280px;
padding-inline: var(--p-md);
margin: 0 auto;
} .alignleft {
float: left;
margin: 0 24px 24px 0;
}
.alignright {
float: right;
margin: 0 0 24px 24px;
}
.centered,
.aligncenter {
display: block;
margin: 0 auto 30px;
} .btn {
display: flex;
align-items: center;
justify-content: center;
height: 2.25rem;
gap: var(--p-sm);
border-radius: 8px;
padding-inline: var(--p-md);
font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1rem);
line-height: 2.25rem;
font-weight: 500;
color: var(--color-seccondary-dark);
background-color: var(--color-light);
transition: all var(--tr-short) var(--tr-simple);
&:hover {
background-color: var(--color-seccondary);
color: var(--color-light);
}
}
.btn-primary {
background-color: var(--color-primary);
}
.btn-seccondary-dark {
background-color: var(--color-seccondary-dark);
color: var(--color-light);
}
.btn-wa {
background-color: var(--color-wa);
color: var(--color-light);
} input[type="search"] {
border: solid 1px var(--color-seccondary-dark);
height: 100%;
max-height: 36px;
padding: var(--p-md);
width: 100%;
}
input[type="number"] {
width: 50px;
height: 36px;
border: solid 1px var(--color-seccondary-dark);
padding: var(--p-md) 0 var(--p-md) var(--p-md);
}  .lightbox-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
display: none; justify-content: center;
align-items: center;
z-index: 9999;  &.is-active {
display: flex;
} .lightbox-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff; padding: var(--p-lg);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
max-width: 90vw;
max-height: 90vh;
}
img {
max-width: 80vw;
max-height: 80vh;
object-fit: contain;
display: block;
border-radius: 4px;
} .lightbox-close {
position: absolute;
top: -12px;
right: -12px;
background: var(--color-seccondary-dark);
color: var(--color-primary);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 22px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: background var(--tr-short) var(--tr-simple);
&:hover {
background: var(--color-seccondary);
}
}
}body {
font-family: var(--font-main);
color: var(--color-seccondary-dark);
font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1rem);
line-height: 1.2188rem;
}
::placeholder {
color: #999 !important;
} h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
h1 {
font-family: var(--font-seccondary); font-size: clamp(2rem, 1.7rem + 1.25vw, 2.5rem);
line-height: 3.25rem;
font-weight: 500;
}
h2 {
font-family: var(--font-seccondary); font-size: clamp(1.625rem, 1.4rem + 0.94vw, 2rem);
line-height: 3rem;
font-weight: 500;
}
h3 {
font-family: var(--font-seccondary); font-size: clamp(1rem, 0.85rem + 0.63vw, 1.25rem);
line-height: 1.875rem;
font-weight: 500;
}
h4 {
font-family: var(--font-seccondary); font-size: clamp(0.9375rem, 0.85rem + 0.39vw, 1.125rem);
line-height: normal;
font-weight: 500;
}
h5 { font-size: clamp(0.75rem, 0.68rem + 0.31vw, 0.875rem);
line-height: normal;
font-weight: 500;
}
h6 { font-size: clamp(0.6875rem, 0.65rem + 0.16vw, 0.75rem);
line-height: normal;
font-weight: 500;
}
p { font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1rem);
line-height: 1.2188rem;
}
small { font-size: clamp(0.75rem, 0.68rem + 0.31vw, 0.875rem);
line-height: 1.375rem;
} .top-header {
background-color: var(--color-primary);
color: var(--color-seccondary-dark);
> .container {
display: flex;
justify-content: center;
align-items: center;
gap: var(--p-md);
padding-block: var(--p-md);
}
img {
width: 24px;
}
} .header {
position: sticky;
top: 0;
z-index: 99;
background-color: var(--color-seccondary-dark);
.logo {
display: inline-block;
}
.nav {
display: none;
@media (min-width: 992px) {
display: flex;
}
}
> .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--p-md);
gap: var(--p-md);
}
.menu-main {
display: flex;
gap: var(--p-lg);
}
.menu-item > a {
display: block;
padding-block: var(--p-sm);
border-bottom: solid 1px transparent;
transition: border-bottom var(--tr-short) var(--tr-simple);
color: var(--color-light);
&:hover {
border-bottom: solid 1px var(--color-light);
}
}
.menu-item.current-menu-item > a {
border-bottom: solid 1px var(--color-seccondary-dark);
}
.icons {
display: none;
gap: var(--p-lg);
align-items: center;
position: relative;
@media (min-width: 992px) {
display: flex;
}
}
.icon {
opacity: 1;
transition: opacity var(--tr-short) var(--tr-simple);
&:hover {
opacity: 0.6;
}
}
.search-block {
width: 0;
max-width: 100%;
height: 100%;
right: 0;
overflow: hidden;
position: absolute;
display: block;
transition: width var(--tr-short) var(--tr-simple);
&:hover {
width: 100%;
}
}
.search:hover ~ .search-block {
width: 100%;
}
.menu-toggle {
display: inline-block;
@media (min-width: 992px) {
display: none;
}
}
.menu-toggle .close,
.menu-toggle.show .bars {
display: none;
}
.menu-toggle .bars,
.menu-toggle.show .close {
display: inline-block;
}
svg {
stroke: var(--color-primary);
}
}
.menu-mobile {
height: 0;
max-height: 100dvh;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
background-color: var(--color-light);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--p-lg);
text-align: center;
transition: height var(--tr-short) var(--tr-simple);
&.show {
height: 100dvh;
}
.menu-close {
top: var(--m-md);
right: var(--m-md);
opacity: 0;
position: absolute;
}
.menu-main {
opacity: 0;
transition: opacity var(--tr-short) var(--tr-simple);
display: flex;
flex-direction: column;
gap: var(--p-lg);
}
&.show .menu-main,
&.show .menu-close {
opacity: 1;
}
.search-block {
width: 80%;
}
.icons {
display: flex;
justify-content: center;
align-items: center;
gap: var(--p-lg);
}
.menu-item > a {
color: var(--color-seccondary-dark);
transition: color var(--tr-short) var(--tr-simple);
&:hover {
color: var(--color-primary);
}
}
.menu-item.current-menu-item > a {
color: var(--color-primary);
}
} .banner-page-section {
padding-block: var(--p-lg);
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: start;
min-height: 300px;
.container {
display: flex;
flex-direction: column;
gap: var(--p-md);
}
h1 {
display: flex;
gap: var(--p-sm);
align-items: center;
width: 100%;
@media (min-width: 768px) {
width: 40%;
}
}
&.product-b h1 {
width: 100% !important;
}
p {
width: 100%;
@media (min-width: 768px) {
width: 40%;
}
}
} .products-section {
padding-block: var(--p-xl);
.container {
display: grid;
gap: var(--p-lg);
grid-template-columns: repeat(1, 1fr);
@media (min-width: 578px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 991px) {
grid-template-columns: repeat(4, 1fr);
}
}
article {
border: solid 1px var(--color-seccondary);
border-radius: 16px;
padding: var(--p-md);
position: relative;
display: flex;
flex-direction: column;
text-align: center;
transition: border var(--tr-short) var(--tr-simple);
&:nth-child(even) {
border: solid 1px var(--color-primary);
}
&:hover {
border: 1px solid var(--color-seccondary-dark);
}
}
img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.texts {
display: flex;
flex-direction: column;
gap: var(--m-md);
}
h3 {
transition: color var(--tr-short) var(--tr-simple);
}
h3:first-of-type {
color: var(--color-seccondary);
}
article:nth-child(even) h3:first-of-type {
color: var(--color-primary);
}
article:hover h3 {
color: var(--color-seccondary-dark) !important;
}
.screen-reader-text,
ins {
text-decoration: none;
}
del {
opacity: 0.5;
margin-right: var(--m-md);
}
a {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
} .basic-information-section {
padding-block: var(--p-xl);
.container {
display: flex;
flex-direction: column;
gap: var(--p-lg);
@media (min-width: 768px) {
flex-direction: row;
}
}
.image {
width: 100%;
max-width: 500px;
padding: var(--m-md);
border-radius: 16px;
border: solid 1px var(--color-seccondary);
}
.image img {
width: 100%;
cursor: pointer;
}
.texts {
display: flex;
flex-direction: column;
gap: var(--p-xl);
width: 100%;
}
.text {
display: flex;
flex-direction: column;
gap: var(--p-md);
}
.title {
display: flex;
flex-direction: column;
gap: var(--m-md);
text-align: center;
}
h3 {
color: var(--color-seccondary);
}
del {
opacity: 0.5;
margin-right: var(--m-md);
}
ins {
text-decoration: none;
}
.buttons-block {
display: flex;
flex-direction: column;
gap: var(--m-md);
align-items: start;
}
.cart-buttons {
display: flex;
gap: var(--p-lg);
flex-direction: column;
@media (min-width: 576px) {
flex-direction: row;
}
}
form.cart {
display: flex;
gap: var(--p-lg);
}
} .delivery-section {
background-color: var(--color-support-2);
padding-block: var(--p-xl);
.container {
display: flex;
gap: var(--p-lg);
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
}
}
.texts {
display: flex;
flex-direction: column;
gap: var(--p-lg);
width: 100%;
}
.title {
display: flex;
flex-direction: column;
gap: var(--p-md);
}
.accordion {
display: flex;
flex-direction: column;
gap: var(--p-lg);
}
.accordion-item .accordion-icon {
transform: rotate(0deg);
transition: transform var(--tr-short) var(--tr-simple);
}
.accordion-item[open] .accordion-icon {
transform: rotate(180deg);
transition: transform var(--tr-short) var(--tr-simple);
}
.accordion-item .tab-content {
padding-top: var(--p-md);
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--p-sm);
cursor: pointer;
list-style: none;
user-select: none;
border-bottom: solid 1px var(--color-seccondary-dark);
&::-webkit-details-marker {
display: none !important;
}
}
.image {
width: 100%;
max-width: 500px;
}
.image > img {
width: 100%;
cursor: pointer;
}
} .why-section {
padding-block: var(--p-xl);
.container {
display: flex;
flex-direction: column;
gap: var(--p-xl);
}
.why-grid {
display: grid;
gap: var(--p-lg);
grid-template-columns: repeat(1, 1fr);
@media (min-width: 578px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
grid-template-columns: repeat(4, 1fr);
}
img {
height: 100%;
object-fit: cover;
}
}
} .faq-section {
background-color: var(--color-support);
padding-block: var(--p-xl);
.container {
display: flex;
gap: var(--p-xl);
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
}
}
.texts {
display: flex;
flex-direction: column;
gap: var(--p-lg);
width: 100%;
}
.accordion {
display: flex;
flex-direction: column;
gap: var(--p-lg);
width: 100%;
}
.accordion-item .accordion-icon {
transform: rotate(0deg);
transition: transform var(--tr-short) var(--tr-simple);
}
.accordion-item[open] .accordion-icon {
transform: rotate(180deg);
transition: transform var(--tr-short) var(--tr-simple);
}
.accordion-item .tab-content {
padding-top: var(--p-md);
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--p-sm);
cursor: pointer;
list-style: none;
user-select: none;
border-bottom: solid 1px var(--color-seccondary-dark);
&::-webkit-details-marker {
display: none !important;
}
}
.content {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--p-lg);
align-items: start;
}
} .cta-section {
background-color: var(--color-seccondary-dark);
padding-block: var(--p-xl);
color: var(--color-light);
border-bottom: solid 5px var(--color-primary);
.container {
gap: var(--p-lg);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
h2 {
color: var(--color-primary);
display: flex;
justify-content: center;
align-items: center;
gap: var(--p-md);
}
.items {
display: flex;
justify-content: center;
gap: var(--p-md);
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
gap: var(--p-xl);
}
}
.item {
display: flex;
align-items: center;
gap: calc(var(--p-sm) / 2);
}
} footer {
background-color: var(--color-seccondary-dark);
padding-block: var(--p-xl);
color: var(--color-light);
.container {
display: flex;
gap: var(--p-lg);
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
}
}
.column {
display: flex;
flex-direction: column;
gap: var(--p-lg);
align-items: center;
width: 100%;
text-align: center;
@media (min-width: 768px) {
align-items: start;
text-align: left;
}
}
.social {
display: flex;
gap: var(--p-lg);
}
.social > a {
opacity: 1;
transition: opacity var(--tr-short) var(--tr-simple);
&:hover {
opacity: 0.5;
}
}
.menu {
display: flex;
flex-direction: column;
gap: var(--p-md);
}
a {
transition: color var(--tr-short) var(--tr-simple);
&:hover {
color: var(--color-primary);
}
}
.contact {
display: flex;
flex-direction: column;
gap: var(--p-sm);
}
} .wc-block-components-country-input {
margin-top: 12px !important;
}
.je-libro-reclamaciones-form {
display: flex;
flex-direction: column;
gap: var(--p-lg);
.je-seccion-libro {
display: flex;
flex-direction: column;
gap: var(--p-md);
}
input[type="text"],
select,
input[type="tel"],
input[type="email"] {
width: 100%;
padding: var(--p-sm) var(--p-md);
border: solid 1px var(--color-seccondary-dark);
}
textarea {
width: 100%;
padding: var(--p-sm) var(--p-md);
border: solid 1px var(--color-seccondary-dark);
height: 80px;
}
#je-btn-enviar-libro {
display: flex;
align-items: center;
justify-content: center;
height: 2.25rem;
gap: var(--p-sm);
border-radius: 8px;
padding-inline: var(--p-md);
font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1rem);
line-height: 2.25rem;
font-weight: 500;
color: var(--color-light);
background-color: var(--color-primary);
transition: all var(--tr-short) var(--tr-simple);
&:hover {
background-color: var(--color-seccondary);
color: var(--color-light);
}
}
a {
color: var(--color-primary);
transition: color var(--tr-short) var(--tr-simple);
font-weight: 700;
&:hover {
color: var(--color-seccondary);
}
}
}.categories-section {
padding-block: var(--p-lg) var(--p-xl);
.container {
display: flex;
flex-direction: column;
gap: var(--p-lg);
}
.title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
@media (min-width: 576px) {
flex-direction: row;
text-align: left;
}
}
.cards {
display: flex;
flex-direction: column;
gap: var(--p-lg);
@media (min-width: 768px) {
flex-direction: row;
}
}
.card {
display: flex;
width: 100%;
border-radius: 16px;
padding: var(--p-md);
gap: var(--p-md);
background-color: var(--color-support);
align-items: center;
position: relative;
transition: background-color var(--tr-short) var(--tr-simple);
flex-direction: column;
&:nth-child(even) {
background-color: var(--color-support-2) !important;
}
&:hover {
background-color: var(--color-support-3) !important;
}
@media (min-width: 576px) {
flex-direction: row;
}
}
.card a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.texts {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--p-md);
align-items: start;
}
.view-more {
display: flex;
justify-content: end;
gap: var(--p-sm);
width: 100%;
}
}.testimonials-section {
background-color: var(--color-support);
padding-block: var(--p-xl);
.container {
display: flex;
flex-direction: column;
gap: var(--p-lg);
}
h2 {
display: flex;
justify-content: center;
gap: var(--p-md);
align-items: center;
}
.testimonials {
display: flex;
gap: var(--p-lg);
align-items: center;
padding-block: var(--p-lg);
}
.testimonial-container {
width: 100%;
}
button {
border: none;
background-color: transparent;
cursor: pointer;
transition: opacity var(--tr-time-short) var(--tr-simple);
&:hover {
opacity: 0.7;
}
}
.testimonial {
width: 100%;
background-color: var(--color-light);
padding: var(--p-lg);
border-radius: 24px;
display: none;
flex-direction: column;
gap: var(--p-md);
align-items: start;
&.active {
display: flex;
}
.author {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
gap: var(--p-md);
}
}
}