@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;650;700;800&display=swap"); :root { --primary: #e11d48; --primary-hover: #be123c;
--accent: #10b981; --accent-hover: #059669;
--danger: #ef4444;
--font-title: 'Outfit', 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
--shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px;
} html:not(.dark) {
--bg-primary: #ffffff;
--bg-secondary: #f3f4f6; --bg-card: rgba(255, 255, 255, 0.9);
--bg-input: #f9fafb;
--text-primary: #0f172a; --text-secondary: #4b5563; --border-color: #e5e7eb;
--glass-bg: rgba(255, 255, 255, 0.85);
--glass-border: rgba(229, 231, 235, 0.5);
--shadow-box: 0 8px 32px 0 rgba(15, 23, 42, 0.08);
} html.dark {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: rgba(30, 41, 59, 0.7);
--bg-input: #0f172a;
--text-primary: #f9fafb;
--text-secondary: #9ca3af;
--border-color: #374151;
--glass-bg: rgba(15, 23, 42, 0.85);
--glass-border: rgba(55, 65, 81, 0.5);
--shadow-box: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
body, html {
overflow-x: hidden;
}
body {
font-family: var(--font-body);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title);
font-weight: 700;
color: var(--text-primary);
}
a {
text-decoration: none;
color: inherit;
}
input, button, select, textarea {
font-family: inherit;
color: inherit;
} ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover);
} .container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
}
.hidden {
display: none !important;
}
.text-gradient {
background: linear-gradient(135deg, var(--primary) 0%, #f43f5e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} .main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-b: 1px solid var(--glass-border);
z-index: 100;
display: flex;
align-items: center;
transition: all var(--transition-normal);
border-bottom: 1px solid var(--border-color);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
} .brand {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
font-weight: 800;
font-family: var(--font-title);
letter-spacing: -0.5px;
cursor: pointer;
}
.logo-icon-box {
width: 42px;
height: 42px;
background: #111827;
border-radius: var(--border-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.3rem;
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
transition: all var(--transition-fast);
}
.brand span {
font-weight: 850;
} .dark .brand-text-dark {
color: #f9fafb !important;
} .nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-link {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-secondary);
position: relative;
padding: 6px 0;
transition: color var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: width var(--transition-fast);
}
.nav-link:hover {
color: var(--text-primary);
}
.nav-link:hover::after {
width: 100%;
} .header-actions {
display: flex;
align-items: center;
gap: 16px;
}
.circle-action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
}
.circle-action-btn:hover {
border-color: var(--primary);
background-color: var(--bg-primary);
transform: translateY(-2px);
}
.cart-badge {
position: absolute;
top: -4px;
right: -4px;
background-color: var(--primary);
color: white;
font-size: 0.75rem;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.quote-btn-header {
background-color: var(--primary);
color: white;
border: none;
border-radius: var(--border-radius-sm);
padding: 10px 20px;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2);
transition: all var(--transition-fast);
}
.quote-btn-header:hover {
background-color: var(--primary-hover);
transform: translateY(-2px);
}
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: var(--text-primary);
} .hero-section {
padding: 160px 0 80px 0;
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 32px;
align-items: center;
}
.hero-info {
display: flex;
flex-direction: column;
gap: 18px;
}
.hero-badge {
align-self: flex-start;
background-color: rgba(225, 29, 72, 0.08);
border: 1px solid rgba(225, 29, 72, 0.2);
color: var(--primary);
border-radius: 50px;
padding: 6px 12px;
font-size: 0.76rem;
font-weight: 750;
letter-spacing: 0.8px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 6px rgba(225, 29, 72, 0.06);
}
.hero-badge span {
width: 6px;
height: 6px;
background-color: var(--primary);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 6px var(--primary);
}
.hero-info h1 {
font-size: 3.1rem;
line-height: 1.15;
letter-spacing: -1.2px;
font-weight: 850;
font-family: var(--font-title);
color: var(--text-primary);
margin-top: 4px;
}
.hero-info p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-secondary);
max-width: 580px;
}
.hero-actions-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.btn-primary-large {
background: linear-gradient(135deg, var(--primary) 0%, #ff4b72 100%);
color: white;
border: none;
border-radius: var(--border-radius-md);
padding: 14px 28px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 20px rgba(225, 29, 72, 0.25);
display: flex;
align-items: center;
gap: 8px;
transition: all var(--transition-fast);
}
.btn-primary-large:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(225, 29, 72, 0.35);
}
.btn-secondary-large {
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
padding: 14px 28px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.btn-secondary-large:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(225, 29, 72, 0.08);
}
.hero-visual {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
width: 100%;
}
.sag-wheel-art {
grid-column: 2;
order: 2;
width: 280px;
height: 280px;
border-radius: 50%;
border: 4px dashed rgba(225, 29, 72, 0.15);
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: spinSlow 90s linear infinite;
flex-shrink: 0;
}
.sag-wheel-inner {
width: 210px;
height: 210px;
border-radius: 50%;
border: 2px solid rgba(225, 29, 72, 0.25);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sag-wheel-core {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
border: 3px solid var(--primary);
box-shadow: 0 0 30px rgba(225, 29, 72, 0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--primary);
animation: counterSpin 90s linear infinite;
}
.sag-wheel-core i {
font-size: 2.5rem;
margin-bottom: 4px;
}
.sag-wheel-core span {
font-size: 0.55rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.floating-card {
position: static;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 24px 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-fast);
animation: floatEffect 6s ease-in-out infinite;
}
.floating-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.fc-1 {
grid-column: 1;
order: 1;
}
.fc-2 {
grid-column: 3;
order: 3;
animation-delay: 3s;
}
.fc-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(225, 29, 72, 0.08);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
border: 1px solid rgba(225, 29, 72, 0.15);
margin-bottom: 4px;
}
.fc-info h4 {
font-size: 0.88rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 2px;
}
.fc-info p {
font-size: 0.76rem;
color: var(--text-secondary);
font-weight: 500;
line-height: 1.3;
} .metrics-section {
padding: 60px 0;
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.metric-card {
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 24px 28px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-fast);
}
.metric-card:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.metric-icon-box {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(225, 29, 72, 0.1) 0%, rgba(225, 29, 72, 0.02) 100%);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
flex-shrink: 0;
border: 1px solid rgba(225, 29, 72, 0.15);
transition: all var(--transition-fast);
}
.metric-card:hover .metric-icon-box {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: rotate(15deg);
}
.metric-data h3 {
font-size: 2.1rem;
font-weight: 850;
line-height: 1.1;
color: var(--text-primary);
margin-bottom: 4px;
}
.metric-data p {
font-size: 0.78rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 700;
line-height: 1.3;
}
@media (max-width: 1024px) {
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.metrics-grid {
grid-template-columns: 1fr;
}
.metric-card {
padding: 20px 24px;
}
} .catalog-section {
padding: 80px 0;
}
.section-header-centered {
text-align: center;
margin-bottom: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.section-badge {
background-color: rgba(225, 29, 72, 0.06);
color: var(--primary);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
padding: 6px 16px;
border-radius: 50px;
border: 1px solid rgba(225, 29, 72, 0.12);
display: inline-block;
}
.section-header-centered h2 {
font-size: 2.6rem;
font-weight: 850;
max-width: 700px;
line-height: 1.2;
letter-spacing: -1px;
color: var(--text-primary);
}
.section-divider {
width: 50px;
height: 4px;
background-color: var(--primary);
border-radius: 4px;
margin-top: 4px;
} .catalog-toolbar {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 40px;
}
.search-bar-row {
width: 100%;
max-width: 600px;
margin: 0 auto;
position: relative;
}
.search-icon-inside {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.catalog-search-input {
width: 100%;
padding: 16px 20px 16px 52px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
font-size: 1rem;
outline: none;
box-shadow: var(--shadow-sm);
transition: all var(--transition-fast);
}
.catalog-search-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.15);
background-color: var(--bg-primary);
} .filter-pills-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.filter-pill {
border: 1px solid var(--border-color);
background-color: var(--bg-secondary);
padding: 12px 24px;
border-radius: 50px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 10px;
transition: all var(--transition-fast);
}
.filter-pill:hover {
border-color: var(--primary);
color: var(--text-primary);
transform: translateY(-1px);
}
.filter-pill.active {
background-color: var(--primary);
border-color: var(--primary);
color: white;
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
} .products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 32px;
} .product-card {
background-color: var(--bg-card);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: transparent;
transition: background-color var(--transition-fast);
}
.product-card:hover {
transform: translateY(-8px);
border-color: rgba(225, 29, 72, 0.2);
box-shadow: var(--shadow-box);
}
.product-card:hover::before {
background-color: var(--primary);
}
.product-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.product-card-icon {
font-size: 2rem;
}
.product-category-badge {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
border-radius: 4px;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.product-card-body {
margin-bottom: 24px;
}
.product-brand {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--primary);
letter-spacing: 1px;
margin-bottom: 6px;
}
.product-title {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
cursor: pointer;
transition: color var(--transition-fast);
}
.product-title:hover {
color: var(--primary);
}
.product-code {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 12px;
}
.product-description {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-features {
display: flex;
flex-direction: column;
gap: 6px;
}
.product-features span {
font-size: 0.75rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.product-features span i {
color: var(--accent);
}
.product-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.product-price {
font-size: 1.15rem;
font-weight: 750;
display: flex;
flex-direction: column;
}
.tax-tag {
font-size: 0.65rem;
font-weight: 500;
color: var(--text-secondary);
}
.quote-tag {
color: var(--primary);
font-size: 0.95rem;
font-weight: 750;
text-transform: uppercase;
}
.add-to-cart-btn {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-primary);
border-radius: var(--border-radius-sm);
padding: 10px 16px;
font-size: 0.8rem;
font-weight: 650;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all var(--transition-fast);
}
.add-to-cart-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.add-to-cart-btn.in-cart {
background-color: rgba(16, 185, 129, 0.1);
border-color: var(--accent);
color: var(--accent);
}
.add-to-cart-btn.in-cart:hover {
background-color: var(--danger);
border-color: var(--danger);
color: white;
}
.add-to-cart-btn.in-cart:hover i::before {
content: "\f00d"; }
.add-to-cart-btn.in-cart:hover span {
display: none;
}
.add-to-cart-btn.in-cart:hover::after {
content: "Quitar";
} .no-results-box {
grid-column: 1 / -1;
text-align: center;
padding: 64px 24px;
}
.no-results-box i {
font-size: 3rem;
color: var(--text-secondary);
margin-bottom: 16px;
}
.no-results-box h3 {
font-size: 1.5rem;
margin-bottom: 8px;
} .services-section {
padding: 100px 0;
background-color: var(--bg-secondary);
}
.services-columns-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: center;
}
.services-info-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.services-info-col h2 {
font-size: 2.3rem;
font-weight: 850;
line-height: 1.25;
margin-top: 10px;
color: var(--text-primary);
}
.services-info-col .section-divider {
margin: 20px 0;
width: 60px;
height: 4px;
background-color: var(--primary);
border-radius: 2px;
}
.services-intro-text {
font-size: 1.05rem;
color: var(--text-secondary);
line-height: 1.6;
}
.services-cards-col {
display: flex;
flex-direction: column;
gap: 24px;
}
.service-card-horizontal {
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 24px;
display: flex;
gap: 20px;
align-items: flex-start;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.service-card-horizontal:hover {
transform: translateX(5px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.service-card-horizontal .service-icon-box {
width: 50px;
height: 50px;
border-radius: var(--border-radius-md);
background-color: rgba(225, 29, 72, 0.08);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.service-card-horizontal .service-details h3 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--text-primary);
}
.service-card-horizontal .service-details p {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.45;
}
@media (max-width: 900px) {
.services-columns-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.services-info-col h2 {
font-size: 1.8rem;
}
}  .about-section {
padding: 120px 0;
background-color: var(--bg-primary);
position: relative;
overflow: hidden;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.about-visual {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 48px;
position: relative;
display: flex;
flex-direction: column;
gap: 32px;
box-shadow: var(--shadow-lg);
z-index: 2;
}
.experience-badge-large {
position: absolute;
top: -30px;
left: -30px;
background: linear-gradient(135deg, var(--primary) 0%, #be123c 100%);
color: white;
width: 110px;
height: 110px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4);
border: 4px solid var(--bg-primary);
animation: pulse-glow 3s infinite alternate;
}
@keyframes pulse-glow {
0% {
transform: scale(1);
box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4);
}
100% {
transform: scale(1.05);
box-shadow: 0 10px 35px rgba(225, 29, 72, 0.6);
}
}
.experience-badge-large span {
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
}
.experience-badge-large p {
font-size: 0.65rem;
font-weight: 750;
text-transform: uppercase;
letter-spacing: 1px;
}
.about-logo-placeholder {
font-size: 4.5rem;
margin-bottom: 8px;
align-self: center;
filter: drop-shadow(0 4px 12px rgba(225, 29, 72, 0.2));
}
.about-features-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-feature-item {
display: flex;
align-items: center;
gap: 16px;
font-size: 0.95rem;
font-weight: 700;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
padding: 16px 20px;
border-radius: var(--border-radius-md);
transition: all var(--transition-fast);
}
.about-feature-item:hover {
border-color: var(--primary);
transform: translateX(5px);
}
.about-feature-item i {
color: var(--accent);
font-size: 1.25rem;
}
.about-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.about-content h2 {
font-size: 2.5rem;
font-weight: 850;
line-height: 1.2;
color: var(--text-primary);
}
.about-content p {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.6;
} .faq-section {
padding: 100px 0;
background-color: var(--bg-secondary);
position: relative;
overflow: hidden;
}
.faq-section::before {
content: '?';
position: absolute;
top: -40px;
right: -20px;
font-size: 28rem;
font-weight: 900;
color: rgba(225, 29, 72, 0.03);
line-height: 1;
pointer-events: none;
user-select: none;
font-family: var(--font-title);
} .faq-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: flex-start;
margin-bottom: 56px;
}
.faq-header-left {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-header-left h2 {
font-size: 2.8rem;
font-weight: 850;
line-height: 1.15;
letter-spacing: -1.2px;
color: var(--text-primary);
font-family: var(--font-title);
}
.faq-header-left > p {
font-size: 1.05rem;
color: var(--text-secondary);
line-height: 1.65;
max-width: 520px;
}
.faq-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
padding-top: 8px;
}
.faq-stat-card {
display: flex;
align-items: center;
gap: 14px;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 20px 28px;
box-shadow: var(--shadow-sm);
}
.faq-stat-number {
font-size: 3rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
font-family: var(--font-title);
}
.faq-stat-label {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.8px;
line-height: 1.5;
}
.faq-support-hint {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-secondary);
font-size: 0.9rem;
}
.faq-support-hint i {
color: var(--primary);
font-size: 1.1rem;
}
.faq-support-hint a {
color: var(--primary);
font-weight: 700;
text-decoration: none;
transition: opacity var(--transition-fast);
}
.faq-support-hint a:hover {
opacity: 0.75;
text-decoration: underline;
} .faq-container {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
} .accordion-item {
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
transition: background-color var(--transition-fast);
border-left: 4px solid transparent;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-item.active {
border-left-color: var(--primary);
background-color: var(--bg-primary);
}
.accordion-item:hover:not(.active) {
background-color: var(--bg-secondary);
} .accordion-header {
padding: 24px 32px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
user-select: none;
}
.accordion-q-label {
font-size: 0.8rem;
font-weight: 900;
color: var(--primary);
opacity: 0.4;
font-family: var(--font-title);
letter-spacing: 1px;
min-width: 24px;
transition: opacity var(--transition-fast);
}
.accordion-item.active .accordion-q-label {
opacity: 1;
}
.accordion-header h3 {
flex: 1;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
transition: color var(--transition-fast);
line-height: 1.3;
}
.accordion-item.active .accordion-header h3 {
color: var(--primary);
}
.accordion-icon-box {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1.5px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 0.85rem;
transition: all var(--transition-fast);
background-color: var(--bg-secondary);
flex-shrink: 0;
}
.accordion-item.active .accordion-icon-box {
border-color: var(--primary);
color: var(--primary);
background-color: rgba(225, 29, 72, 0.06);
transform: rotate(180deg);
} .accordion-content {
max-height: 0;
overflow: hidden;
padding: 0 32px 0 76px;
color: var(--text-secondary);
font-size: 0.98rem;
line-height: 1.7;
transition: max-height 0.35s ease, padding 0.35s ease;
}
.accordion-item.active .accordion-content {
max-height: 300px;
padding-bottom: 28px;
} .contact-section {
padding: 120px 0;
background-color: var(--bg-primary);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 80px;
align-items: flex-start;
}
.contact-info-panel {
display: flex;
flex-direction: column;
gap: 36px;
}
.contact-info-panel h3 {
font-size: 2.2rem;
font-weight: 850;
line-height: 1.25;
color: var(--text-primary);
}
.contact-info-panel p {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.5;
}
.contact-channels {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-channel-card {
display: flex;
gap: 20px;
padding: 24px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.contact-channel-card:hover {
transform: translateY(-4px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.ccc-icon-box {
width: 52px;
height: 52px;
border-radius: var(--border-radius-md);
background-color: rgba(225, 29, 72, 0.08);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.contact-channel-card:hover .ccc-icon-box {
background-color: var(--primary);
color: white;
}
.ccc-details h4 {
font-size: 1rem;
font-weight: 750;
color: var(--text-primary);
}
.ccc-details p {
font-size: 0.92rem;
color: var(--text-secondary);
margin-top: 4px;
line-height: 1.4;
} .contact-form-panel {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 40px 44px;
box-shadow: var(--shadow-md);
} .form-panel-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-color);
}
.form-panel-icon {
width: 48px;
height: 48px;
border-radius: var(--border-radius-md);
background: linear-gradient(135deg, rgba(225,29,72,0.1) 0%, rgba(225,29,72,0.05) 100%);
border: 1px solid rgba(225,29,72,0.15);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.form-panel-header h4 {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 2px;
}
.form-panel-header p {
font-size: 0.82rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 5px;
}
.form-group-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.form-label {
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-secondary);
letter-spacing: 0.8px;
display: flex;
align-items: center;
gap: 4px;
}
.form-required {
color: var(--primary);
font-size: 0.75rem;
} .form-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.form-input-icon {
position: absolute;
left: 14px;
color: var(--text-secondary);
font-size: 0.9rem;
pointer-events: none;
transition: color var(--transition-fast);
z-index: 1;
}
.form-input, .form-select, .form-textarea {
background-color: var(--bg-primary);
border: 1.5px solid var(--border-color);
border-radius: var(--border-radius-md);
padding: 13px 16px 13px 40px;
font-size: 0.95rem;
color: var(--text-primary);
outline: none;
transition: all var(--transition-fast);
width: 100%;
font-family: var(--font-body);
}
.form-input:hover, .form-select:hover {
border-color: rgba(225, 29, 72, 0.3);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
background-color: var(--bg-primary);
} .form-input-wrapper:has(.form-input:focus) .form-input-icon,
.form-input-wrapper:has(.form-select:focus) .form-input-icon {
color: var(--primary);
}
.form-textarea {
padding: 14px 16px;
resize: vertical;
min-height: 150px;
line-height: 1.6;
} .btn-submit {
width: 100%;
background: linear-gradient(135deg, var(--primary) 0%, #ff4b72 100%);
color: white;
border: none;
border-radius: var(--border-radius-md);
padding: 16px 32px;
font-size: 1rem;
font-weight: 750;
cursor: pointer;
box-shadow: 0 6px 20px rgba(225, 29, 72, 0.28);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all var(--transition-fast);
margin-top: 8px;
position: relative;
overflow: hidden;
}
.btn-submit-arrow {
margin-left: auto;
transition: transform var(--transition-fast);
font-size: 0.85rem;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(225, 29, 72, 0.38);
}
.btn-submit:hover .btn-submit-arrow {
transform: translateX(4px);
} .form-privacy-note {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 16px;
font-size: 0.78rem;
color: var(--text-secondary);
opacity: 0.75;
}
.form-privacy-note i {
font-size: 0.72rem;
color: var(--accent);
} .main-footer {
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-color);
padding: 100px 0 50px 0;
color: var(--text-secondary);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr 1fr;
gap: 80px;
margin-bottom: 80px;
}
.footer-brand-col {
display: flex;
flex-direction: column;
gap: 24px;
}
.footer-brand-col p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-secondary);
}
.footer-socials {
display: flex;
gap: 14px;
}
.social-circle-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.social-circle-btn:hover {
background-color: var(--primary);
border-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(225, 29, 72, 0.3);
}
.footer-links-col h4, .footer-contact-col h4 {
font-size: 0.9rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-primary);
letter-spacing: 1px;
margin-bottom: 24px;
position: relative;
padding-bottom: 10px;
}
.footer-links-col h4::after, .footer-contact-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 3px;
background-color: var(--primary);
border-radius: 2px;
}
.footer-links-list {
display: flex;
flex-direction: column;
gap: 14px;
list-style: none;
}
.footer-links-list a {
font-size: 0.95rem;
color: var(--text-secondary);
transition: all var(--transition-fast);
text-decoration: none;
display: inline-block;
}
.footer-links-list a:hover {
color: var(--primary);
transform: translateX(6px);
}
.footer-contact-list {
display: flex;
flex-direction: column;
gap: 18px;
list-style: none;
}
.footer-contact-list li {
display: flex;
gap: 14px;
align-items: flex-start;
font-size: 0.92rem;
line-height: 1.5;
}
.footer-contact-list li i {
color: var(--primary);
font-size: 1.1rem;
margin-top: 2px;
}
.footer-bottom {
border-top: 1px solid var(--border-color);
padding-top: 40px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-secondary);
}
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
} .modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(11, 19, 41, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 200;
}
.modal-container {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
max-width: 900px;
width: 100%;
overflow: hidden;
box-shadow: var(--shadow-premium);
position: relative;
}
.modal-close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: var(--bg-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: all var(--transition-fast);
z-index: 10;
}
.modal-close-btn:hover {
background-color: var(--danger);
color: white;
border-color: var(--danger);
}
.modal-grid {
display: grid;
grid-template-cols: 0.85fr 1.15fr;
min-height: 500px;
}
.modal-visual-panel {
background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(225, 29, 72, 0.1) 100%);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
gap: 16px;
position: relative;
}
.modal-visual-icon {
font-size: 5rem;
text-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modal-visual-brand {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary);
border: 1px solid rgba(225, 29, 72, 0.2);
padding: 4px 12px;
border-radius: 30px;
}
.modal-details-panel {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.modal-category {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--primary);
letter-spacing: 1px;
margin-bottom: 8px;
}
.modal-details-panel h2 {
font-size: 2rem;
line-height: 1.25;
margin-bottom: 8px;
}
.modal-product-code {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
.modal-description {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
.modal-specs {
margin-bottom: 28px;
}
.modal-specs h4 {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 12px;
}
.modal-specs ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.modal-specs li {
font-size: 0.85rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 10px;
}
.modal-specs li i {
color: var(--accent);
}
.modal-price-box {
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
padding: 16px 24px;
margin-bottom: 28px;
}
.modal-price-val {
font-size: 1.75rem;
font-weight: 800;
display: flex;
align-items: baseline;
gap: 8px;
}
.tax-info {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary);
}
.modal-price-quote {
color: var(--primary);
font-size: 1.4rem;
font-weight: 800;
text-transform: uppercase;
}
.quote-desc {
display: block;
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: none;
font-weight: 400;
margin-top: 4px;
}
.modal-action-row {
display: flex;
gap: 16px;
}
.qty-selector {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
background-color: var(--bg-primary);
border-radius: var(--border-radius-sm);
overflow: hidden;
}
.qty-btn {
width: 40px;
height: 44px;
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
font-weight: 700;
transition: background-color var(--transition-fast);
}
.qty-btn:hover {
background-color: var(--bg-secondary);
}
#modal-qty-input {
width: 44px;
height: 44px;
border: none;
background: none;
text-align: center;
font-size: 1rem;
font-weight: 700;
outline: none;
}
.modal-action-btn {
flex-grow: 1;
background-color: var(--primary);
color: white;
border: none;
border-radius: var(--border-radius-sm);
padding: 12px 24px;
font-size: 0.95rem;
font-weight: 650;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2);
transition: all var(--transition-fast);
}
.modal-action-btn:hover {
background-color: var(--primary-hover);
} .cart-drawer-overlay {
position: fixed;
inset: 0;
background-color: rgba(11, 19, 41, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 150;
}
.cart-drawer {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 500px;
height: 100vh;
background-color: var(--bg-secondary);
box-shadow: -8px 0 32px rgba(0,0,0,0.3);
z-index: 160;
display: flex;
flex-direction: column;
transition: transform var(--transition-normal);
}
.translate-x-full {
transform: translateX(100%);
}
.cart-drawer-header {
padding: 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-drawer-header h3 {
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 10px;
}
.cart-close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-secondary);
transition: color var(--transition-fast);
}
.cart-close-btn:hover {
color: var(--text-primary);
} .cart-drawer-body {
flex-grow: 1;
overflow-y: auto;
padding: 24px;
display: flex;
flex-direction: column;
} .cart-empty-box {
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 320px;
}
.cart-empty-box i {
font-size: 4rem;
color: var(--text-secondary);
opacity: 0.5;
}
.cart-empty-box h4 {
font-size: 1.2rem;
}
.cart-empty-box p {
font-size: 0.85rem;
color: var(--text-secondary);
} .cart-item-row {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 0;
border-bottom: 1px solid var(--border-color);
}
.cart-item-meta {
display: flex;
align-items: center;
gap: 12px;
}
.cart-item-icon-small {
font-size: 1.5rem;
}
.cart-item-details {
display: flex;
flex-direction: column;
}
.cart-item-title {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
}
.cart-item-code {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 2px;
}
.cart-item-actions-panel {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-item-qty-selector {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
background-color: var(--bg-primary);
border-radius: var(--border-radius-sm);
overflow: hidden;
}
.cart-qty-btn {
width: 28px;
height: 28px;
background: none;
border: none;
cursor: pointer;
font-weight: 700;
}
.cart-qty-val {
font-size: 0.85rem;
font-weight: 700;
min-width: 28px;
text-align: center;
}
.cart-item-price-col {
display: flex;
align-items: center;
gap: 16px;
}
.cart-item-price {
font-size: 0.95rem;
font-weight: 700;
}
.cart-remove-item-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 0.9rem;
transition: color var(--transition-fast);
}
.cart-remove-item-btn:hover {
color: var(--danger);
} .cart-drawer-footer {
padding: 24px;
border-top: 1px solid var(--border-color);
background-color: var(--bg-primary);
}
.cart-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.cart-summary-row span {
font-size: 0.9rem;
color: var(--text-secondary);
}
.cart-summary-row strong {
font-size: 1.15rem;
font-weight: 850;
}
.cart-notice-box {
background-color: rgba(225, 29, 72, 0.05);
border: 1px solid rgba(225, 29, 72, 0.12);
border-radius: 6px;
padding: 10px 14px;
font-size: 0.75rem;
color: var(--primary);
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 20px;
} .cart-checkout-form {
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid var(--border-color);
padding-top: 20px;
}
.cart-checkout-form h4 {
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 4px;
}
.cart-form-input {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 10px 14px;
font-size: 0.85rem;
outline: none;
transition: border-color var(--transition-fast);
}
.cart-form-input:focus {
border-color: var(--primary);
}
.btn-send-wa {
background-color: var(--accent);
color: white;
border: none;
border-radius: var(--border-radius-sm);
padding: 14px;
font-weight: 650;
font-size: 0.95rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
transition: all var(--transition-fast);
width: 100%;
margin-top: 8px;
}
.btn-send-wa:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
}
.btn-clear-cart {
background: none;
border: none;
font-size: 0.8rem;
color: var(--text-secondary);
cursor: pointer;
text-decoration: underline;
align-self: center;
margin-top: 12px;
}
.btn-clear-cart:hover {
color: var(--danger);
} .floating-cart-btn {
position: fixed;
bottom: 24px;
right: 24px;
background-color: var(--primary);
color: white;
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
z-index: 90;
transition: transform var(--transition-normal);
border: none;
}
.floating-cart-btn:hover {
transform: scale(1.08) !important;
background-color: var(--primary-hover);
} .floating-cart-btn.btn-hidden {
transform: translateY(96px);
opacity: 0;
pointer-events: none;
}
.floating-cart-btn.btn-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.floating-badge {
position: absolute;
top: -2px;
right: -2px;
background-color: var(--accent);
color: white;
font-size: 0.7rem;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} .toast-notification {
position: fixed;
bottom: 32px;
left: 32px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-left: 4px solid var(--accent);
border-radius: var(--border-radius-sm);
padding: 16px 20px;
box-shadow: var(--shadow-lg);
z-index: 250;
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
font-weight: 600;
transform: translateY(120px);
opacity: 0;
transition: all var(--transition-normal);
pointer-events: none;
}
.toast-notification i {
color: var(--accent);
font-size: 1.25rem;
}
.toast-notification.show {
transform: translateY(0);
opacity: 1;
} .status-modal-overlay {
z-index: 300;
}
.status-modal-content {
max-width: 480px;
padding: 40px;
text-align: center;
}
.status-modal-content i {
font-size: 3.5rem;
margin-bottom: 20px;
}
.status-modal-content h3 {
font-size: 1.5rem;
margin-bottom: 12px;
}
.status-modal-content p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 24px;
}
.btn-status-ok {
background-color: var(--primary);
color: white;
border: none;
border-radius: var(--border-radius-sm);
padding: 12px 28px;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.btn-status-ok:hover {
background-color: var(--primary-hover);
} @keyframes spinSlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes counterSpin {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes floatEffect {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
} @media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.hero-visual {
grid-template-columns: 1fr;
gap: 24px;
height: auto;
}
.sag-wheel-art {
grid-column: 1;
margin: 0 auto;
}
.fc-1 {
grid-column: 1;
}
.fc-2 {
grid-column: 1;
}
.hero-badge {
align-self: center;
}
.hero-info h1 {
font-size: 2.75rem;
}
.hero-info p {
margin: 0 auto;
}
.hero-actions-row {
justify-content: center;
}
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-grid {
grid-template-columns: 1fr;
}
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.faq-header {
grid-template-columns: 1fr;
gap: 32px;
}
.faq-header-right {
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.faq-header-left h2 {
font-size: 2.2rem;
} .header-search-box-wrapper {
display: none;
}
}
@media (max-width: 768px) {
.main-header {
height: 64px;
} #user-profile-btn,
#wishlist-btn,
#theme-toggle-btn {
display: none;
} #cart-drawer-trigger {
display: none;
} .header-actions {
gap: 8px;
} .brand {
font-size: 1.25rem;
gap: 8px;
}
.logo-icon-box {
width: 34px;
height: 34px;
font-size: 1.05rem;
}
.hero-section {
padding-top: 120px;
}
.hero-info h1 {
font-size: 2.25rem;
}
.nav-links {
display: none;
}
.mobile-menu-btn {
display: block;
}
.header-actions .quote-btn-header {
display: none;
}
.metrics-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.modal-grid {
grid-template-columns: 1fr;
}
.modal-visual-panel {
border-right: none;
border-bottom: 1px solid var(--border-color);
padding: 30px;
}
.modal-visual-icon {
font-size: 4rem;
}
.modal-details-panel {
padding: 30px;
}
.form-group-row {
grid-template-columns: 1fr;
gap: 0;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
} .products-grid {
grid-template-columns: 1fr;
gap: 20px;
} .sag-wheel-art {
width: min(280px, 80vw);
height: min(280px, 80vw);
}
.sag-wheel-inner {
width: min(210px, 60vw);
height: min(210px, 60vw);
}
.sag-wheel-core {
width: min(120px, 35vw);
height: min(120px, 35vw);
} .contact-form-panel {
padding: 28px 20px;
} .accordion-header {
padding: 18px 20px;
gap: 12px;
}
.accordion-content {
padding: 0 20px 0 56px;
}
.accordion-item.active .accordion-content {
padding-bottom: 20px;
} .hero-section {
padding-top: 100px;
padding-bottom: 60px;
}
.hero-info h1 {
font-size: 1.9rem;
}
.section-header-centered h2 {
font-size: 1.9rem;
}
.faq-header-left h2 {
font-size: 1.9rem;
} .hero-actions-row {
flex-direction: column;
align-items: stretch;
}
.btn-primary-large,
.btn-secondary-large {
justify-content: center;
width: 100%;
}
} .mobile-menu-drawer {
display: flex;
flex-direction: column;
gap: 16px;
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-color);
padding: 24px;
position: absolute;
top: 70px;
left: 0;
width: 100%;
box-shadow: var(--shadow-md);
z-index: 99;
}
.mobile-menu-drawer a {
font-size: 1.1rem;
font-weight: 650;
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
}  .header-top-bar {
background-color: var(--primary);
color: #ffffff;
height: 40px;
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.top-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.top-bar-container strong {
font-weight: 700;
}
@media (max-width: 768px) {
.top-bar-email {
display: none;
}
.header-top-bar {
font-size: 0.75rem;
text-align: center;
justify-content: center;
}
} .main-header {
top: 40px !important; background-color: #111827 !important; border-bottom: 1px solid #1f2937 !important;
color: #ffffff !important;
}
.main-header .brand span.brand-text-dark {
color: #ffffff !important;
}
.main-header .nav-link {
color: #9ca3af !important;
font-weight: 650;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.main-header .nav-link:hover {
color: #ffffff !important;
} .header-search-box-wrapper {
flex: 1;
max-width: 320px;
margin: 0 24px;
}
.header-search-input-group {
display: flex;
background-color: #1f2937;
border: 1px solid #374151;
border-radius: var(--border-radius-sm);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.header-search-input-group:focus-within {
border-color: var(--primary);
}
.header-search-field {
width: 100%;
background: none;
border: none;
padding: 8px 12px;
color: #ffffff;
font-size: 0.85rem;
outline: none;
}
.header-search-field::placeholder {
color: #6b7280;
}
.header-search-btn {
background: none;
border: none;
padding: 0 14px;
color: #9ca3af;
cursor: pointer;
transition: color var(--transition-fast);
}
.header-search-btn:hover {
color: var(--primary);
}
@media (max-width: 1024px) {
.header-search-box-wrapper {
display: none; }
} .main-header .circle-action-btn {
background-color: #1f2937 !important;
border-color: #374151 !important;
color: #ffffff !important;
}
.main-header .circle-action-btn:hover {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
transform: translateY(-2px);
} .filter-bar-sub {
position: fixed;
top: 110px; left: 0;
width: 100%;
height: 60px;
background-color: #f3f4f6;
border-bottom: 1px solid #e5e7eb;
z-index: 90;
display: flex;
align-items: center;
}
html.dark .filter-bar-sub {
background-color: #1e293b;
border-bottom: 1px solid #374151;
}
.filter-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
}
.filter-toggle-group {
display: flex;
align-items: center;
gap: 8px;
}
.filter-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
}
.toggle-pill {
border: 1px solid var(--border-color);
background-color: var(--bg-primary);
color: var(--text-secondary);
padding: 6px 16px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all var(--transition-fast);
}
.toggle-pill#pill-repuestos {
border-radius: 20px 0 0 20px;
border-right: none;
}
.toggle-pill#pill-equipos {
border-radius: 0 20px 20px 0;
border-left: none;
}
.toggle-pill.active {
background-color: #f59e0b; border-color: #f59e0b;
color: #ffffff;
}
.filter-select-group {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
max-width: 600px;
}
.filter-select {
width: 100%;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
padding: 6px 12px;
font-size: 0.85rem;
color: var(--text-primary);
outline: none;
cursor: pointer;
}
.btn-filter-run {
background-color: #9ca3af;
color: #ffffff;
border: none;
border-radius: var(--border-radius-sm);
padding: 6px 20px;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all var(--transition-fast);
text-transform: uppercase;
}
.btn-filter-run:hover {
background-color: var(--primary);
box-shadow: 0 4px 10px rgba(225, 29, 72, 0.2);
} .hero-section {
margin-top: 170px !important; }
@media (max-width: 900px) {
.filter-bar-sub {
position: relative;
top: 0;
height: auto;
padding: 16px 0;
}
.filter-bar-container {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.filter-select-group {
flex-direction: column;
max-width: 100%;
}
.hero-section {
margin-top: 110px !important; }
} .product-card {
background-color: #ffffff !important; color: #111827 !important;
border: 1px solid #e5e7eb !important;
border-radius: 4px !important; padding: 20px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.product-card::before {
display: none !important; }
.product-card:hover {
border-color: #f59e0b !important; box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
transform: none !important; } .product-card-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px !important;
z-index: 10;
}
.badge-sale {
background-color: #000000;
color: #ffffff;
font-size: 0.65rem;
font-weight: 750;
padding: 3px 8px;
border-radius: 2px;
text-transform: uppercase;
}
.badge-b2b {
background-color: #111827;
color: #ffffff;
font-size: 0.65rem;
font-weight: 750;
padding: 3px 8px;
border-radius: 2px;
text-transform: uppercase;
}
.card-wishlist-btn {
background: none;
border: none;
font-size: 1.1rem;
color: #9ca3af;
cursor: pointer;
transition: color var(--transition-fast), transform var(--transition-fast);
}
.card-wishlist-btn:hover,
.card-wishlist-btn.active {
color: var(--primary);
transform: scale(1.1);
} .product-media-wrapper {
background-color: #f9fafb;
height: 180px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: pointer;
margin-bottom: 16px;
}
.product-media-wrapper .product-card-icon {
font-size: 3.5rem;
transition: transform 0.5s ease;
}
.product-media-wrapper:hover .product-card-icon {
transform: scale(1.1);
} .product-hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition-fast);
z-index: 5;
}
.product-media-wrapper:hover .product-hover-overlay {
opacity: 1;
}
.action-view {
background-color: #ffffff;
border: 1px solid #111827;
color: #111827;
padding: 6px 14px;
font-size: 0.75rem;
font-weight: 700;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.action-view:hover {
background-color: #111827;
color: #ffffff;
} .product-card-body {
margin-bottom: 16px !important;
}
.product-brand {
font-size: 0.7rem !important;
color: var(--primary) !important;
font-weight: 700 !important;
text-transform: uppercase;
margin-bottom: 4px !important;
}
.product-card-body .product-title {
font-size: 0.95rem !important;
color: #111827 !important;
font-weight: 750 !important;
margin-bottom: 6px !important;
line-height: 1.4 !important;
}
.product-card-body .product-code {
font-size: 0.75rem !important;
color: #6b7280 !important;
margin-bottom: 8px !important;
}
.product-card-body .product-description {
font-size: 0.8rem !important;
color: #4b5563 !important;
margin-bottom: 0 !important;
line-height: 1.5 !important;
} .product-price-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 2px;
}
.price-sale {
font-size: 1.3rem;
font-weight: 800;
color: #111827;
}
.price-regular {
font-size: 0.85rem;
color: #ef4444; text-decoration: line-through;
font-weight: 500;
}
.price-quote {
font-size: 1.25rem;
font-weight: 800;
color: var(--primary);
text-transform: uppercase;
}
.installment-info {
font-size: 0.7rem;
color: #6b7280;
margin-bottom: 14px;
font-weight: 500;
} .card-action-row {
display: flex;
gap: 8px;
width: 100%;
}
.card-qty-selector {
display: flex;
align-items: center;
border: 1px solid #d1d5db;
border-radius: 2px;
overflow: hidden;
}
.card-qty-btn {
background-color: #f3f4f6;
border: none;
width: 28px;
height: 38px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.card-qty-btn:hover {
background-color: #e5e7eb;
}
.card-qty-input {
width: 30px;
border: none;
text-align: center;
font-size: 0.85rem;
font-weight: 700;
background: none;
pointer-events: none;
}
.product-card-footer .add-to-cart-btn {
flex-grow: 1;
background-color: #f59e0b !important; border: none !important;
color: #ffffff !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
border-radius: 2px !important;
padding: 10px 14px !important;
justify-content: center;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1) !important;
}
.product-card-footer .add-to-cart-btn:hover {
background-color: #d97706 !important;
}
.product-card-footer .add-to-cart-btn.in-cart {
background-color: #10b981 !important; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1) !important;
}
.product-card-footer .add-to-cart-btn.in-cart:hover {
background-color: #ef4444 !important;
}
.product-card-footer .add-to-cart-btn.in-cart:hover span {
display: inline !important;
}
.product-card-footer .add-to-cart-btn.in-cart:hover::after {
display: none !important;
} .promo-slider-section {
position: relative;
width: 100%;
height: 480px;
background-color: #111827;
overflow: hidden;
margin-top: 170px; }
@media (max-width: 900px) {
.promo-slider-section {
margin-top: 110px;
height: 400px;
}
}
.promo-slider-container {
position: relative;
width: 100%;
height: 100%;
}
.promo-slides-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.promo-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
display: flex;
align-items: center;
z-index: 1;
}
.promo-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.slide-content-container {
width: 100%;
display: flex;
align-items: center;
}
.slide-content {
max-width: 600px;
color: #ffffff;
z-index: 5;
transform: translateY(20px);
opacity: 0;
transition: transform 0.6s ease 0.3s, opacity 0.6s ease 0.3s;
}
.promo-slide.active .slide-content {
transform: translateY(0);
opacity: 1;
}
.slide-badge {
background-color: var(--primary);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 16px;
}
.slide-title {
font-size: 2.5rem;
font-weight: 850;
line-height: 1.2;
margin-bottom: 16px;
color: #ffffff !important;
}
.slide-subtitle {
font-size: 1.05rem;
color: #d1d5db;
margin-bottom: 28px;
line-height: 1.5;
}
.slide-btn {
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
}
@media (max-width: 768px) {
.slide-title {
font-size: 1.8rem;
}
.slide-subtitle {
font-size: 0.9rem;
margin-bottom: 20px;
}
} .slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(31, 41, 55, 0.6);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all var(--transition-fast);
}
.slider-arrow:hover {
background-color: var(--primary);
border-color: var(--primary);
}
.prev-arrow {
left: 24px;
}
.next-arrow {
right: 24px;
}
.slider-dots {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all var(--transition-fast);
}
.slider-dot.active, .slider-dot:hover {
background-color: var(--primary);
width: 28px;
border-radius: 5px;
} .promo-slider-section + .hero-section {
margin-top: 0 !important;
} .catalog-top-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
margin: 0 auto;
}
.catalog-top-row .search-bar-row {
margin: 0 auto !important;
width: 100%;
max-width: 600px;
}
.grid-layout-control {
display: flex;
align-items: center;
gap: 12px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
padding: 8px 18px;
border-radius: 50px;
}
.layout-control-label {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.5px;
}
.layout-btn-group {
display: flex;
gap: 4px;
}
.layout-btn {
background: transparent;
border: none;
color: var(--text-secondary);
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.85rem;
font-weight: 750;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.layout-btn:hover {
background-color: rgba(225, 29, 72, 0.08);
color: var(--primary);
}
.layout-btn.active {
background-color: var(--primary);
color: white !important;
box-shadow: 0 4px 10px rgba(225, 29, 72, 0.25);
}
@media (min-width: 1024px) {
.products-grid.cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.products-grid.cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.products-grid.cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.products-grid.cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.products-grid.cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
}
@media (max-width: 1023px) {
.grid-layout-control {
display: none;
}
} @media (max-width: 900px) { .filter-bar-sub {
position: relative !important;
top: 0 !important;
height: auto !important;
padding: 12px 0 !important;
}
.filter-bar-container {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.filter-select-group {
flex-direction: column !important;
max-width: 100% !important;
} .hero-section {
margin-top: 0 !important;
padding-top: 40px !important;
padding-bottom: 60px !important;
}
.promo-slider-section {
margin-top: 0 !important;
height: 380px !important;
} .main-header {
top: 40px !important;
}
}
@media (max-width: 768px) { .header-top-bar {
font-size: 0.72rem !important;
text-align: center !important;
justify-content: center !important;
height: 36px !important;
}
.main-header {
top: 36px !important;
height: 60px !important;
} .hero-section {
margin-top: 0 !important;
padding-top: 32px !important;
padding-bottom: 48px !important;
} .promo-slider-section {
margin-top: 0 !important;
height: 320px !important;
}
.slide-title {
font-size: 1.5rem !important;
}
.slide-subtitle {
font-size: 0.85rem !important;
margin-bottom: 16px !important;
}
.slide-content {
max-width: 90% !important;
} .hero-visual {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.fc-1, .fc-2 {
grid-column: 1 !important;
max-width: 100% !important;
}
.sag-wheel-art {
grid-column: 1 !important;
margin: 0 auto !important;
width: min(240px, 75vw) !important;
height: min(240px, 75vw) !important;
} .products-grid,
.products-grid.cols-2,
.products-grid.cols-3,
.products-grid.cols-4,
.products-grid.cols-5,
.products-grid.cols-6 {
grid-template-columns: 1fr !important;
gap: 16px !important;
} .services-grid {
grid-template-columns: 1fr !important;
} .about-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
} .contact-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
} .footer-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
} .form-group-row {
grid-template-columns: 1fr !important;
gap: 0 !important;
} .metrics-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
} .about-section,
.services-section,
.faq-section,
.contact-section {
padding: 60px 0 !important;
} .catalog-section {
padding: 48px 0 !important;
} .section-header-centered h2,
.faq-header-left h2 {
font-size: 1.75rem !important;
letter-spacing: -0.5px !important;
}
.faq-header {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) { .metrics-grid {
grid-template-columns: 1fr !important;
} .hero-actions-row {
flex-direction: column !important;
gap: 10px !important;
}
.btn-primary-large,
.btn-secondary-large {
width: 100% !important;
justify-content: center !important;
padding: 14px 20px !important;
} .promo-slider-section {
height: 260px !important;
}
.slide-title {
font-size: 1.25rem !important;
} .accordion-header {
padding: 16px !important;
gap: 10px !important;
}
.accordion-q-label {
display: none !important; }
.accordion-content {
padding: 0 16px !important;
}
.accordion-item.active .accordion-content {
padding-bottom: 16px !important;
} .contact-form-panel {
padding: 24px 16px !important;
} .form-panel-header {
gap: 12px !important;
}
}table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;*cursor:hand;background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/css/DataTables-1.10.18/images/sort_both.png)}table.dataTable thead .sorting_asc{background-image:url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/css/DataTables-1.10.18/images/sort_asc.png)}table.dataTable thead .sorting_desc{background-image:url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/css/DataTables-1.10.18/images/sort_desc.png)}table.dataTable thead .sorting_asc_disabled{background-image:url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/css/DataTables-1.10.18/images/sort_asc_disabled.png)}table.dataTable thead .sorting_desc_disabled{background-image:url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/css/DataTables-1.10.18/images/sort_desc_disabled.png)}table.dataTable tbody tr{background-color:#ffffff}table.dataTable tbody tr.selected{background-color:#B0BED9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#acbad4}table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f6f6f6}table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#aab7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#fafafa}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad5}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:whitesmoke}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1{background-color:#a6b4cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a8b5cf}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b7d1}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#fafafa}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fcfcfc}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fefefe}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad5}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#aebcd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{background-color:#ececec}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{background-color:#efefef}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{background-color:#a2aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{background-color:#a3b0c9}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{background-color:#a5b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:4px 17px 4px 4px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:4px}table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent;border-radius:2px}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #979797;background-color:white;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,.dataTables_wrapper.no-footer div.dataTables_scrollBody>table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}}div.DTFC_Blocker{
background-color:white;
}
div.DTFC_LeftWrapper table.dataTable,
div.DTFC_RightWrapper table.dataTable{
margin-bottom:0;
z-index:2;
}
div.DTFC_LeftWrapper table.dataTable.no-footer,
div.DTFC_RightWrapper table.dataTable.no-footer{
border-bottom:none;
}
div.DTFC_LeftFootWrapper table.compare-list,
div.DTFC_LeftHeadWrapper table.compare-list {
border: 0;
} a.compare.disabled:not(.added) {
opacity: 0.6;
pointer-events: none;
} .yith-woocompare-popup-container {
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,.95);
z-index: 1000;
}
a.yith-woocompare-popup-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 40px;
width: 40px;
color: #434343;
text-decoration: none;
z-index: 2;
line-height: 1;
background-color: rgba(255,255,255,.7);
text-align: center;
}
body.yith-woocompare-popup-open {
overflow-y: hidden;
}
body.yith-woocompare-popup,
.yith-woocompare-table-wrapper {
box-sizing: border-box;
font-size: 16px;
color: #747373;
background: none !important;
margin: 0;
max-height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
body.yith-woocompare-popup,
.yith-woocompare-table-scroll-wrapper {
position: relative;
padding: 5%;
}
body.yith-woocompare-popup #yith-woocompare {
padding: 10px;
}
#yith-woocompare-table_wrapper {
margin: 10px 0;
}
#yith-woocompare table.dataTable.compare-list thead th,
#yith-woocompare table.dataTable.compare-list thead td,
#yith-woocompare table.dataTable.compare-list tfoot td,
#yith-woocompare table.dataTable.compare-list tfoot th {
border: 0;
vertical-align: middle;
}
#yith-woocompare table.compare-list {
width: 100%;
border-bottom: 0;
border-top: 0;
margin: 0;
table-layout: auto;
}
#yith-woocompare table.compare-list tr {
background: #fff;
}
#yith-woocompare table.compare-list tbody tr .filler {
padding: 0!important;
}
#yith-woocompare table.compare-list td:not(.filler) {
min-width: 300px;
width: 300px;
text-align: center;
vertical-align: middle;
}
#yith-woocompare table.compare-list tbody th:not(.filler) {
min-width: 300px;
width: 300px;
overflow: hidden;
text-align: left;
font-weight: 700;
}
#yith-woocompare table.dataTable.compare-list tbody th,
#yith-woocompare table.dataTable.compare-list tbody td {
border-right: none;
border-top: 1px solid #e7e7e7;
border-bottom: none;
border-left: none;
padding-block: 10px;
vertical-align: middle;
}
#yith-woocompare table.dataTable.compare-list:not(.compact) tbody td {
padding-inline: 40px;
}
#yith-woocompare table.dataTable.compare-list tbody tr:first-child th,
#yith-woocompare table.dataTable.compare-list tbody tr:first-child td {
border-top: none;
}
#yith-woocompare table.compare-list tbody td.last-column {
width: auto;
border-right: 0;
}
#yith-woocompare table.dataTable.compare-list tbody .product_info th,
#yith-woocompare table.dataTable.compare-list tbody .product_info td {
vertical-align: top;
}
#yith-woocompare table.dataTable.compare-list tbody tr.label-row td {
font-weight: 700;
color: #434343;
padding-bottom: 0;
}
#yith-woocompare table.dataTable.compare-list tbody tr.label-row + tr td {
border-top: none;
}
#yith-woocompare .dataTables_scrollBody::-webkit-scrollbar {
-webkit-appearance: none;
height: 4px;
}
#yith-woocompare .dataTables_scrollBody::-webkit-scrollbar-thumb {
background-color: #e7e7e7;
border-radius: 10px;
}
.rtl #yith-woocompare table.compare-list tbody th {
text-align: right;
} .yith_woocompare_table_image {
text-align: center;
margin-top: 20px;
}
.yith_woocompare_table_image img {
display: inline-block;
max-width: 100%;
} table.compare-list img {
width: 100%;
height: auto;
}
table.compare-list tr.product_info td {
vertical-align: top;
}
table.compare-list .remove {
margin-bottom: 10px;
}
table.compare-list .remove a {
text-transform: uppercase;
text-decoration: none;
text-align: center;
}
table.compare-list .remove a span{
padding: 0 5px;
}
table.compare-list .image-wrap {
display: block;
position: relative;
line-height: 0;
}
table.compare-list .image-wrap .image-overlay {
position: absolute;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.4);
line-height: normal;
}
table.compare-list .image-wrap:hover .image-overlay {
display: block;
}
table.compare-list .image-wrap:hover .image-overlay .remove a {
display: block;
background: #fff;
font-size: 0;
position: absolute;
right: 20px;
bottom: 20px;
margin: 0;
border-radius: 4px;
cursor: pointer;
width: 30px;
height: 30px;
line-height: 30px;
}
table.compare-list .image-wrap:hover .image-overlay .remove a > span {
display: none;
}
table.compare-list .image-wrap:hover .image-overlay .remove a:after {
content: "\00D7";
font-size: 20px;
}
table.compare-list .product-anchor {
display: block;
}
table.compare-list .product_title {
margin-top: 0;
margin-bottom: 5px;
font-size: 15px;
color: #000;
text-decoration: none;
font-weight: 400;
}
table.compare-list .product_info td > * {
margin-bottom: 25px;
}
table.compare-list .product_info td a {
text-decoration: none;
box-shadow: none;
cursor: pointer;
}
#yith-woocompare  .added_to_cart,
#yith-woocompare .button {
margin: 0;
cursor: pointer;
position: relative;
text-decoration: none;
white-space: nowrap;
display: inline-block;
}
#yith-woocompare .empty-comparison {
text-align: center;
margin: 200px auto;
}
a.button.yith_woocompare_clear {
color: #b80001;
padding: 6px 10px;
}
div.compare-table-clear {
text-align: right;
margin: 10px 0;
}
table.compare-list  .product_info .button.loading,
table.compare-list  .add-to-cart .button.loading {
padding-right: 30px;
} table.compare-list.with-stock-icons tr.stock:not(.label-row) td {
font-size: 0;
}
table.compare-list  tr.stock:not(.label-row) td.in-stock {
background-color: #f2fcde;
color: #01a71c;
}
table.compare-list  tr.stock td.out-of-stock {
background-color: #fff0e8;
color: #ff4200;
}
table.compare-list.with-stock-icons tr.stock td.in-stock span.availability-label:before {
content: '';
background: url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/images/green-check.svg) no-repeat center center;
font-size: 20px;
display: block;
height: 30px;
}
table.compare-list.with-stock-icons tr.stock td.out-of-stock span.availability-label:before {
content: "\00D7";
font-size: 50px;
line-height: 0;
vertical-align: middle;
} table.compare-list  tr.rating .star-rating {
float: none;
display: inline-block;
vertical-align: middle;
} table.compare-list tr.price {
color: #3e3e3e;
display: table-row; }
table.compare-list  tr.price del {
opacity: 0.8;
} #yith-woocompare-share {
margin-top: 20px
}
#yith-woocompare-share h3 {
margin-top: 0;
font-size: 17px;
font-weight: 700;
margin-bottom: 15px;
}
#yith-woocompare-share ul {
padding: 0 0 50px;
list-style: none;
margin: 0;
display: flex;
gap: 25px;
}
#yith-woocompare-share a {
display: block;
box-shadow: none;
outline: none;
color: #434343
}
#yith-woocompare-share a svg {
width: 20px;
height: 20px;
vertical-align: middle;
} #yith-woocompare-related {
margin: 20px 0;
}
#yith-woocompare-related h3.yith-woocompare-related-title {
font-size: 17px;
font-weight: 700;
margin-top: 0;
margin-bottom: 20px;
}
#yith-woocompare-related .yith-woocompare-related-wrapper {
position: relative;
background: #fff;
}
#yith-woocompare-related .related-products {
padding: 0;
list-style: none;
margin: 0;
overflow-x: hidden;
}
#yith-woocompare-related .related-products .owl-item {
display: inline-block;
}
#yith-woocompare-related .related-products .related-product {
text-align: center;
}
#yith-woocompare-related .related-products .related-product a {
text-decoration: none;
}
#yith-woocompare-related .related-products .related-product h3 {
font-size: 15px;
color: #333;
margin-top: 0;
margin-bottom: 10px;
}
#yith-woocompare-related .related-products .related-product .product-price {
font-size: 13px;
color: #333;
margin-bottom: 10px;
}
#yith-woocompare-related .related-products .related-product > div {
margin-bottom: 10px;
}
#yith-woocompare-related .related-products .related-product div.product-image {
position: relative;
margin-bottom: 10px;
}
#yith-woocompare-related .related-products .related-product div.product-image img {
height: auto;
max-width: 100%;
}
#yith-woocompare-related .related-products .related-product div.product-image img.onsale.yit-image {
margin: 0;
position: absolute;
top: 5px;
right: 5px;
z-index: 5;
width: auto;
}
#yith-woocompare-related .related-slider-nav div {
position: absolute;
top: -45px;
width: 30px;
height: 35px;
cursor: pointer;
border: 1px solid #e7e7e7;
text-align: center;
background: #ffffff url(//cimed.cl/wp-content/plugins/yith-woocommerce-compare/assets/images/nav-arrow.png) no-repeat;
cursor: pointer;
}
#yith-woocompare-related .related-slider-nav div.related-slider-nav-prev {
right: 35px;
background-position: -3px -31px;
}
#yith-woocompare-related .related-slider-nav div.related-slider-nav-next {
right: 0;
background-position: 0 1px;
} #yith-woocompare-cat-nav {
margin-top: 20px;
text-align: center;
}
#yith-woocompare-cat-nav h3 {
margin-top: 0;
margin-bottom: 15px;
text-align: center;
}
#yith-woocompare-cat-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#yith-woocompare-cat-nav ul li {
display: inline-block;
margin-right: 10px;
font-weight: 700;
}
#yith-woocompare-cat-nav ul li a {
text-decoration: none;
color: #7b7b7b;
}
#yith-woocompare-cat-nav ul li .active {
border-bottom: 2px solid;
}
#yith-woocompare-cat-nav ul li:last-child {
margin-right: 0;
} #yith-woocompare-preview-bar {
position: fixed;
bottom: 0;
width: 100vw;
display: none;
background: rgba(0, 0, 0, .8);
box-sizing: border-box;
padding: 20px;
color: #fff;
z-index: 99;
}
#yith-woocompare-preview-bar.shown {
display: block;
}
#yith-woocompare-preview-bar .container {
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
margin: auto;
padding: 0;
}
#yith-woocompare-preview-bar .compare-list {
list-style: none;
display: flex;
align-items: center;
gap: 30px;
margin: 0;
padding: 0;
}
#yith-woocompare-preview-bar .compare-list li{
align-self: stretch;
width: 80px;
}
#yith-woocompare-preview-bar .compare-list li.product-placeholder {
border: 1px dashed #fff;
display: flex;
align-items: center;
padding-inline: 15px;
}
#yith-woocompare-preview-bar .compare-list .image-wrap {
position: relative;
}
#yith-woocompare-preview-bar .compare-list .image-wrap > a {
font-size: 0;
display: block;
}
#yith-woocompare-preview-bar .compare-list .image-wrap img {
max-width: 100%;
}
#yith-woocompare-preview-bar .compare-list .image-wrap .remove a {
display: block;
color: #000;
background: #fff;
font-size: 0;
position: absolute;
right: -10px;
top: -10px;
margin: 0;
border-radius: 50%;
cursor: pointer;
width: 25px;
height: 25px;
line-height: 25px;
text-decoration: none;
text-align: center;
}
#yith-woocompare-preview-bar .compare-list .image-wrap .remove a:hover {
background: #eee;
}
#yith-woocompare-preview-bar .compare-list .image-wrap .remove a:after {
content: "\00D7";
font-size: 25px;
} table.compare-list  .container-image-and-badge {
position: relative;
display: inline-block;
} table.compare-list .bundled_product_list {
margin: 25px 0;
}
table.compare-list div.bundled_product {
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
margin-bottom: 10px;
}
table.compare-list .bundled_product:after,
table.compare-list .bundled_product:before {
display: table;
content: '';
clear: both;
}
table.compare-list .bundled_product .bundled_product_images {
display: inline-block;
float: left;
}
table.compare-list .bundled_product .bundled_product_images img {
max-width: 80px;
}
table.compare-list .bundled_product .details {
display: block;
overflow: hidden;
padding-left: 10px;
text-align: left;
padding-top: 10px;
}
table.compare-list .bundled_product .details .bundled_product_title,
table.compare-list .bundled_product .details .price {
font-size: 90%;
}
table.compare-list .bundled_product .details .price {
margin-bottom: 0;
} table.compare-list .yith-ywraq-add-to-quote {
margin-top: 10px;
} .yith-woocompare-counter a {
box-shadow: none !important;
}
.yith-woocompare-counter span > span {
display: inline-block;
vertical-align: middle;
}
.yith-woocompare-counter span.yith-woocompare-icon {
margin-right: 5px;
}
.yith-woocompare-counter span.yith-woocompare-icon img {
max-width: 50px;
height: auto;
}
.yith-woocompare-counter span.yith-woocompare-count {
color: #555;
font-weight: 400;
font-size: 13px;
}
.yith-woocompare-counter a:hover span.yith-woocompare-count {
color: #000;
}
.yith-woocompare-error {
padding: 10px;
border: 1px solid #ffc5c2;
border-radius: 5px;
background-color: #ffe6e5;
position: relative;
}
.yith-woocompare-error p {
margin: 0;
color: #ff645c;
padding-left: 25px;
font-size: 13px;
}
.yith-woocompare-error::before {
font-family: WooCommerce;
content: '\e016';
color: #b81c23;
display: inline-block;
position: absolute;
} .yith-wccp-compare {
text-align: center;
} @media( max-width: 1200px ) {
#yith-woocompare-preview-bar header{
display: none;
}
}
@media( max-width: 991px ) {
#yith-woocompare-preview-bar .container {
max-width: 100%;
}
#yith-woocompare table.dataTable.compare-list tbody tr:not(.product_info) td {
text-align: left;
}
#yith-woocompare table.dataTable.compare-list tbody tr.stock td {
background: transparent;
}
#yith-woocompare table.dataTable.compare-list tbody tr.stock td .availability-label {
display: inline-block;
width: 30px;
}
}
@media( max-width: 768px ) {
div.DTFC_LeftBodyWrapper {
pointer-events: none;
}
#yith-woocompare-preview-bar .container {
gap: 15px;
}
#yith-woocompare-preview-bar .compare-list {
gap: 15px;
}
#yith-woocompare-preview-bar .compare-list li,
#yith-woocompare-preview-bar .compare-list li.product-placeholder {
width: 50px;
}
#yith-woocompare-preview-bar .compare-list li.product-placeholder {
padding-inline: 0;
text-align: center;
}
#yith-woocompare-preview-bar .compare-list li .image-wrap > a {
height: auto;
}
#yith-woocompare table.compare-list thead th,
#yith-woocompare table.compare-list tfoot th,
#yith-woocompare table.compare-list tr .filler {
display: none;
}
}
@media( max-width: 480px ) {
#yith-woocompare table.dataTable.compare-list tbody th {
padding: 10px 5px;
}
#yith-woocompare table.compare-list tbody th {
width: 60px;
max-width: 60px;
min-width: 60px;
font-size: 10px;
}
#yith-woocompare table.compare-list td {
width: 160px;
max-width: 160px;
min-width: 160px;
}
#yith-woocompare-preview-bar .compare-list li,
#yith-woocompare-preview-bar .compare-list li.product-placeholder {
display: none;
}
#yith-woocompare-preview-bar .compare-list li:first-of-type,
#yith-woocompare-preview-bar .compare-list li:nth-of-type(2),
#yith-woocompare-preview-bar .compare-list li:nth-of-type(3) {
display: block;
}
#yith-woocompare-preview-bar .compare-list li.product-placeholder span{
display: none;
}
}.yith-woocompare-widget-content ul.products-list li:not( .list_empty ) {
position: relative;
padding: 5px 0;
border-bottom: 1px solid #dfdfdf;
}
.yith-woocompare-widget-content ul.products-list {
list-style: none;
margin: 0 0 15px;
}
.yith-woocompare-widget-content ul.products-list li {
display: flex;
align-items: center;
gap: 15px;
}
.yith-woocompare-widget-content ul.products-list li .remove {
color: #000;
font-weight: 400;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
}
.yith-woocompare-widget-content ul.products-list li img {
max-width: 50px;
height: auto;
display: block;
vertical-align: middle;
float: left;
}
.yith-woocompare-widget-content ul.products-list li .product-info {
cursor: pointer;
font-size: 15px;
font-weight: 400;
outline: none;
text-decoration: none;
}
.yith-woocompare-widget-content ul.products-list li .product-info:before,
.yith-woocompare-widget-content ul.products-list li .product-info:after {
content: '';
display: table;
clear: both;
}
.yith-woocompare-widget-content a.compare-widget,
.yith-woocompare-widget-content a.compare {
float: right;
line-height: 1;
cursor: pointer;
padding: 8px 10px;
font-size: 13px;
border: 0;
white-space: nowrap;
display: inline-block;
}
.yith-woocompare-widget-content a.compare-widget:hover,
.yith-woocompare-widget-content a.compare:hover {
color: #ffffff;
background-color: #303030;
}
.yith-woocompare-widget-content a.clear-all {
outline: none;
font-size: 12px;
cursor: pointer;
}