body.layout-modern #wrapper, #page #wrapper { background-color: #fcf9f8; }#header, #header .header-top { background-color: #fcf9f8; }#footer { background-color: #e5e2e1; }:root{--content-width: 1200px;--content-edge-padding-x: 15px;--content-edge-padding-y: 0px;--body-font-family: "Nunito Sans", var(--fallback-font);--heading-font-family: "Plus Jakarta Sans", var(--fallback-font);--subheading-font-family: "Plus Jakarta Sans", var(--fallback-font);--font-size-body: 14px;--palette1: #D20A14!important;--palette2: #F28712!important;--palette3: #D20A14!important;--palette4: #1d1c1c!important;--palette10: #D20A14!important;--btn-primary-bg-color: #D20A14;--product-title-hover-color: #1d1d1b;--btn-radius: 8px;}@media (min-width: 1025px){.container {max-width:1200px;}}@media (min-width: 1025px){.container {max-width:1200px;}}.hero-section .page-title-wrapper{min-height:100px;}/* ======================================================== DISEÑO UX/UI - VARIABLES GLOBALES Y SISTEMA DE DISEÑO ======================================================== */ :root { /* Fuentes */ --qm-font-display: 'Be Vietnam Pro', sans-serif; --qm-font-base: 'Plus Jakarta Sans', sans-serif; /* Paleta de Colores */ --qm-color-primary: #a6000b; --qm-color-primary-dark: #930008; --qm-color-primary-variant: #d20a14; --qm-color-primary-light: #ffe3df; --qm-color-primary-badge: #ffdad5; --qm-color-primary-badge-text: #410001; --qm-color-secondary: #686000; --qm-color-secondary-variant: #6d6400; --qm-color-secondary-light: #f5e300; --qm-color-accent-brown: #7c4100; /* Colores de Superficie y Fondos */ --qm-color-bg: #fcf9f8; --qm-color-surface: #eae7e7; --qm-color-surface-light: #f0eded; --qm-color-surface-container: #f6f3f2; --qm-color-surface-variant: #e5e2e1; --qm-color-border-card: #e7bdb7; --qm-color-white: #ffffff; /* Colores de Texto */ --qm-color-text-dark: #1b1c1c; --qm-color-text-secondary: #5d3f3b; --qm-color-text-muted: #926f6a; /* Bordes Redondeados (Border Radius) - Optimizados para DRY */ --qm-radius-xs: 4px; --qm-radius-sm: 6px; --qm-radius-md: 8px; --qm-radius-lg: 12px; --qm-radius-xl: 16px; --qm-radius-2xl: 20px; --qm-radius-3xl: 24px; --qm-radius-card: 1rem; /* 16px */ --qm-radius-btn: 0.75rem; /* 12px */ --qm-radius-pill: 9999px; /* Espaciado (Padding / Margin) */ --qm-spacing-xs: 4px; --qm-spacing-sm: 8px; --qm-spacing-md: 12px; --qm-spacing-lg: 16px; --qm-spacing-xl: 20px; --qm-spacing-2xl: 24px; --qm-spacing-3xl: 32px; } /* ======================================================== CLASES DE UTILIDAD (DRY) ======================================================== */ /* Breakout para expandir elementos al ancho completo del viewport */ .qm-full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* Estilo base para badges */ .qm-badge-base { display: inline-block; padding: 6px 16px; border-radius: var(--qm-radius-pill); font-size: 14px; font-weight: 600; margin-bottom: var(--qm-spacing-2xl); } /* Estilo base para iconos SVG de fondo */ .qm-svg-icon-base { width: 24px; height: 24px; display: inline-block; background-repeat: no-repeat; background-position: center; } /* Estilos de bordes redondeados y fondos reutilizables para páginas específicas */ .qm-rounded-lg-white { background-color: var(--qm-color-white); border-radius: var(--qm-radius-xl); } .qm-rounded-md-all { border-radius: var(--qm-radius-md); } /* ======================================================== DISEÑO UX/UI - ABOUT PAGE (PREFIJO .qm-) ======================================================== */ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined'); .qm-about-page { font-family: var(--qm-font-base); color: var(--qm-color-text-dark); background-color: var(--qm-color-bg); overflow-x: hidden; position: relative; line-height: 1.5; z-index: 1; width: 100vw; margin-left: calc(50% - 50vw); } /* Tipografía Compartida */ .qm-title-xl { font-family: var(--qm-font-display); font-size: 48px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: var(--qm-color-primary); margin-bottom: var(--qm-spacing-3xl); } .qm-title-xl span { color: var(--qm-color-secondary); font-weight: 900; } .qm-title-lg { font-family: var(--qm-font-display); font-size: 32px; line-height: 1.25; font-weight: 700; margin-bottom: var(--qm-spacing-2xl); } .qm-title-md { font-family: var(--qm-font-display); font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--qm-color-white); margin-bottom: var(--qm-spacing-lg); } .qm-desc { font-size: 18px; color: var(--qm-color-text-secondary); margin-bottom: 40px; } /* Hero Section */ .qm-hero-new { position: relative; padding: 80px 40px 128px; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .qm-hero-new { grid-template-columns: 1fr 1fr; } } .qm-badge { composes: qm-badge-base; display: inline-block; padding: 6px 16px; border-radius: var(--qm-radius-pill); font-size: 14px; font-weight: 600; margin-bottom: var(--qm-spacing-2xl); background-color: var(--qm-color-primary-badge); color: var(--qm-color-primary-badge-text); letter-spacing: 0.01em; } .qm-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .qm-glow { position: absolute; width: 500px; height: 500px; background-color: rgba(245, 227, 0, 0.3); border-radius: 50%; filter: blur(64px); z-index: 0; animation: qmPulse 4s infinite alternate; } @keyframes qmPulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } } .qm-hero-img { position: relative; z-index: 1; border-radius: var(--qm-radius-3xl); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: rotate(3deg); transition: transform 0.7s ease; width: 100%; max-width: 400px; aspect-ratio: 4/5; object-fit: cover; } .qm-hero-img:hover { transform: rotate(0deg); } /* Bento Grid Section */ .qm-section-bento { padding: 96px 40px; max-width: 1280px; margin: 0 auto; } .qm-section-header { text-align: center; margin-bottom: 64px; } .qm-header-line { width: 80px; height: 4px; background-color: var(--qm-color-secondary); margin: 0 auto; border-radius: var(--qm-radius-pill); } .qm-bento-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .qm-bento-grid { grid-template-columns: repeat(3, 1fr); } .qm-bento-span-2 { grid-column: span 2; } } .qm-bento-item { border-radius: var(--qm-radius-3xl); padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .qm-bento-item p { font-size: 16px; line-height: 1.5; } .qm-bg-lowest { background-color: var(--qm-color-white); border: 1px solid var(--qm-color-border-card); } .qm-bg-lowest .qm-title-md { color: var(--qm-color-primary); } .qm-bg-lowest p { color: var(--qm-color-text-secondary); } .qm-bento-year { margin-top: 32px; display: flex; align-items: center; gap: 16px; color: var(--qm-color-primary); } .qm-bento-year span:first-child { font-size: 36px; font-weight: 900; } .qm-bento-year span:last-child { font-size: 16px; font-weight: 600; } .qm-bento-circle { position: absolute; right: -80px; bottom: -80px; width: 256px; height: 256px; background-color: rgba(166, 0, 11, 0.05); border-radius: 50%; transition: transform 0.5s ease; } .qm-bento-item:hover .qm-bento-circle { transform: scale(1.1); } .qm-bg-primary { background-color: var(--qm-color-primary); color: var(--qm-color-white); justify-content: center; } .qm-bg-primary .material-symbols-outlined { position: absolute; top: 16px; right: 16px; font-size: 64px; opacity: 0.2; } .qm-bg-secondary { background-color: var(--qm-color-primary-variant); border: 1px solid var(--qm-color-secondary); color: var(--qm-color-white); justify-content: flex-end; } .qm-bg-secondary .qm-title-md { color: var(--qm-color-white); } .qm-bg-surface { background-color: var(--qm-color-surface-light); } .qm-bg-surface .qm-title-md { color: var(--qm-color-primary); } .qm-bg-surface p { color: var(--qm-color-text-secondary); } .qm-bento-split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 768px) { .qm-bento-split { grid-template-columns: 1fr 1fr; } } .qm-bento-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--qm-radius-xl); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: transform 0.5s ease; } .qm-bento-item:hover .qm-bento-img { transform: scale(1.05); } /* Valores Section */ .qm-section-values { background-color: var(--qm-color-surface); padding: 96px 40px; } .qm-values-container { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px; align-items: center; } @media (min-width: 1024px) { .qm-values-container { flex-direction: row; } } .qm-values-text, .qm-values-visual { flex: 1; width: 100%; } .qm-values-list-new { display: flex; flex-direction: column; gap: 24px; } .qm-value-card-new { display: flex; align-items: flex-start; gap: 20px; padding: 24px; background-color: var(--qm-color-bg); border-radius: var(--qm-radius-xl); border: 1px solid var(--qm-color-border-card); transition: border-color 0.3s ease; } .qm-value-card-new:hover { border-color: var(--qm-color-primary); } .qm-icon-wrap { padding: 12px; border-radius: var(--qm-radius-lg); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .qm-icon-red { background-color: rgba(166, 0, 11, 0.1); color: var(--qm-color-primary); } .qm-icon-yellow { background-color: rgba(104, 96, 0, 0.1); color: var(--qm-color-secondary); } .qm-icon-brown { background-color: rgba(124, 65, 0, 0.1); color: var(--qm-color-accent-brown); } .qm-icon-dark { background-color: var(--qm-color-surface-variant); color: var(--qm-color-text-secondary); } .qm-value-card-new:hover .qm-icon-red { background-color: var(--qm-color-primary); color: #fff; } .qm-value-card-new:hover .qm-icon-yellow { background-color: var(--qm-color-secondary); color: #fff; } .qm-value-card-new:hover .qm-icon-brown { background-color: var(--qm-color-accent-brown); color: #fff; } .qm-value-card-new:hover .qm-icon-dark { background-color: var(--qm-color-text-secondary); color: #fff; } .qm-value-card-new h4 { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; } .qm-icon-red + div h4 { color: var(--qm-color-primary); } .qm-icon-yellow + div h4 { color: var(--qm-color-secondary); } .qm-icon-brown + div h4 { color: var(--qm-color-accent-brown); } .qm-icon-dark + div h4 { color: var(--qm-color-text-secondary); } .qm-value-card-new p { font-size: 14px; color: var(--qm-color-text-secondary); margin: 0; } .qm-values-visual { position: relative; } .qm-values-img { position: relative; z-index: 10; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--qm-radius-3xl); border: 4px solid #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .qm-values-shape-1 { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background-color: var(--qm-color-secondary); border-radius: 50%; opacity: 0.2; z-index: 0; } .qm-values-shape-2 { position: absolute; bottom: -40px; left: -40px; width: 240px; height: 240px; background-color: var(--qm-color-primary); border-radius: 50%; opacity: 0.1; z-index: 0; } /* CTA Consolidación */ .qm-section-cta { padding: 80px 40px; text-align: center; } .qm-cta-card { max-width: 896px; margin: 0 auto; background-color: var(--qm-color-primary); color: var(--qm-color-white); border-radius: 40px; padding: 48px; position: relative; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(166, 0, 11, 0.4); } .qm-cta-card .material-symbols-outlined { position: absolute; top: 0; right: 0; font-size: 200px; padding: 32px; opacity: 0.1; } .qm-cta-badge { composes: qm-badge-base; display: inline-block; padding: 6px 16px; border-radius: var(--qm-radius-pill); font-size: 14px; font-weight: 600; margin-bottom: var(--qm-spacing-2xl); background-color: rgba(255, 255, 255, 0.2); color: var(--qm-color-white); position: relative; z-index: 10; } .qm-cta-card .qm-title-lg { color: var(--qm-color-white); position: relative; z-index: 10; } .qm-cta-card p { font-size: 18px; opacity: 0.9; position: relative; z-index: 10; } /* Iconos Material */ .material-symbols-outlined { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Clases para Iconos SVG Inline */ .qm-bento-icon-bg { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; opacity: 0.2; display: block; flex-shrink: 0; } .qm-value-icon { width: 24px; height: 24px; display: block; flex-shrink: 0; } .qm-cta-icon-bg { position: absolute; top: 0; right: 0; width: 200px; height: 200px; padding: 32px; opacity: 0.1; display: block; box-sizing: border-box; } .qm-cta-wrapper { background-color: var(--qm-color-primary); min-height: 20vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; } /* flex-row en sm (pantallas más grandes) */ @media (min-width: 640px) { .qm-cta-wrapper { flex-direction: row; } } /* ========================================= BOTONES CTA ABOUT ========================================= */ /* Estilos base para ambos botones */ .qm-btn { font-family: inherit; font-weight: 700; padding: 1rem 2.5rem; border-radius: var(--qm-radius-btn); font-size: 1rem; cursor: pointer; border: none; outline: none; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* Efecto al hacer clic común */ .qm-btn:active { transform: scale(0.95); } /* --- Botón Principal (Pedir ahora) --- */ .qm-btn-primary { background-color: var(--qm-color-white); color: var(--qm-color-primary); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .qm-btn-primary:hover { background-color: var(--qm-color-secondary-light); color: var(--qm-color-secondary); } /* --- Botón Secundario (Ver sabores) --- */ .qm-btn-secondary { background-color: transparent; color: var(--qm-color-white); border: 2px solid var(--qm-color-white); padding: calc(1rem - 2px) calc(2.5rem - 2px); } .qm-btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--qm-color-white); } /* Iconos Dinámicos SVG */ .qm-icon-balance { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23a6000b'%3E%3Cpath d='M80-120v-80h360v-447q-26-9-45-28t-28-45H240l120 280q0 50-41 85t-99 35q-58 0-99-35t-41-85l120-280h-80v-80h247q12-35 43-57.5t70-22.5q39 0 70 22.5t43 57.5h247v80h-80l120 280q0 50-41 85t-99 35q-58 0-99-35t-41-85l120-280H593q-9 26-28 45t-45 28v447h360v80H80Zm585-320h150l-75-174-75 174Zm-520 0h150l-75-174-75 174Zm335-280q17 0 28.5-11.5T520-760q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760q0 17 11.5 28.5T480-720Z'/%3E%3C/svg%3E"); } .qm-icon-trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23686000'%3E%3Cpath d='M280-120v-80h160v-124q-49-11-87.5-41.5T296-442q-75-9-125.5-65.5T120-640v-40q0-33 23.5-56.5T200-760h80v-80h400v80h80q33 0 56.5 23.5T840-680v40q0 76-50.5 132.5T664-442q-18 46-56.5 76.5T520-324v124h160v80H280Zm0-408v-152h-80v40q0 38 22 68.5t58 43.5Zm285 93q35-35 35-85v-240H360v240q0 50 35 85t85 35q50 0 85-35Zm115-93q36-13 58-43.5t22-68.5v-40h-80v152Zm-200-52Z'/%3E%3C/svg%3E"); } .qm-icon-handshake { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%237c4100'%3E%3Cpath d='M475-160q4 0 8-2t6-4l328-328q12-12 17.5-27t5.5-30q0-16-5.5-30.5T817-607L647-777q-11-12-25.5-17.5T591-800q-15 0-30 5.5T534-777l-11 11 74 75q15 14 22 32t7 38q0 42-28.5 70.5T527-522q-20 0-38.5-7T456-550l-75-74-175 175q-3 3-4.5 6.5T200-435q0 8 6 14.5t14 6.5q4 0 8-2t6-4l136-136 56 56-135 136q-3 3-4.5 6.5T285-350q0 8 6 14t14 6q4 0 8-2t6-4l136-135 56 56-135 136q-3 2-4.5 6-1.5 8q0 8 6 14t14 6q4 0 7.5-1.5t6.5-4.5l136-135 56 56-136 136q-3 3-4.5 6.5T454-180q0 8 6.5 14t14.5 6Zm-1 80q-37 0-65.5-24.5T375-166q-34-5-57-28t-28-57q-34-5-56-28.5T206-336q-38-5-62-33t-24-66q0-20 7.5-38.5T149-506l232-231 131 131q2 3 6 4.5t8 1.5q9 0 15-5.5t6-14.5q0-4-1.5-8t-4.5-6L398-777q-11-12-25.5-17.5T342-800q-15 0-30 5.5T285-777L144-635q-9 9-15 21t-8 24q-2 12 0 24.5t8 23.5l-58 58q-17-23-25-50.5T40-590q2-28 14-54.5T87-692l141-141q24-23 53.5-35t60.5-12q31 0 60.5 12t52.5 35l11 11 11-11q24-23 53.5-35t60.5-12q31 0 60.5 12t52.5 35l169 169q23 23 35 53t12 61q0 31-12 60.5T873-437L545-110q-14 14-32.5 22T474-80Zm-99-560Z'/%3E%3C/svg%3E"); } .qm-icon-activity { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%235d3f3b'%3E%3Cpath d='M574.5-774.5Q560-789 560-810t14.5-35.5Q589-860 610-860t35.5 14.5Q660-831 660-810t-14.5 35.5Q631-760 610-760t-35.5-14.5Zm0 660Q560-129 560-150t14.5-35.5Q589-200 610-200t35.5 14.5Q660-171 660-150t-14.5 35.5Q631-100 610-100t-35.5-14.5Zm160-520Q720-649 720-670t14.5-35.5Q749-720 770-720t35.5 14.5Q820-691 820-670t-14.5 35.5Q791-620 770-620t-35.5-14.5Zm0 380Q720-269 720-290t14.5-35.5Q749-340 770-340t35.5 14.5Q820-311 820-290t-14.5 35.5Q791-240 770-240t-35.5-14.5Zm60-190Q780-459 780-480t14.5-35.5Q809-530 830-530t35.5 14.5Q880-501 880-480t-14.5 35.5Q851-430 830-430t-35.5-14.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880v80q-134 0-227 93t-93 227q0 134 93 227t227 93v80Zm132-212L440-464v-216h80v184l148 148-56 56Z'/%3E%3C/svg%3E"); } .qm-icon-rocket { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23ffffff'%3E%3Cpath d='m226-559 78 33q14-28 29-54t33-52l-56-11-84 84Zm142 83 114 113q42-16 90-49t90-75q70-70 109.5-155.5T806-800q-72-5-158 34.5T492-656q-42 42-75 90t-49 90Zm155-121.5q0-33.5 23-56.5t57-23q34 0 57 23t23 56.5q0 33.5-23 56.5t-57 23q-34 0-57-23t-23-56.5ZM565-220l84-84-11-56q-26 18-52 32.5T532-299l33 79Zm313-653q19 121-23.5 235.5T708-419l20 99q4 20-2 39t-20 33L538-80l-84-197-171-171-197-84 167-168q14-14 33.5-20t39.5-2l99 20q104-104 218-147t235-24ZM157-321q35-35 85.5-35.5T328-322q35 35 34.5 85.5T327-151q-25 25-83.5 43T82-76q14-103 32-161.5t43-83.5Zm57 56q-10 10-20 36.5T180-175q27-4 53.5-13.5T270-208q12-12 13-29t-11-29q-12-12-29-11.5T214-265Z'/%3E%3C/svg%3E"); } .qm-icon-celebration { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23ffffff'%3E%3Cpath d='M160-80q-17 0-28.5-11.5T120-120v-200q0-33 23.5-56.5T200-400v-160q0-33 23.5-56.5T280-640h160v-58q-18-12-29-29t-11-41q0-15 6-29.5t18-26.5l56-56 56 56q12 12 18 26.5t6 29.5q0 24-11 41t-29 29v58h160q33 0 56.5 23.5T760-560v160q33 0 56.5 23.5T840-320v200q0 17-11.5 28.5T800-80H160Zm120-320h400-400Zm-80 240h560-560Zm560-240H200h560Z'/%3E%3C/svg%3E"); } /* ======================================================== PRODUCT DETAIL (PÁGINA DE DETALLE DE PRODUCTO) ======================================================== */ .page-product .product-container, .page-cart .cart-grid-body .card { background-color: var(--qm-color-white); border-radius: var(--qm-radius-2xl); padding: var(--qm-spacing-xl); margin-top: var(--qm-spacing-xl) } .product-page-style-2 .sidebar .sidebar-wrapper .sidebar-service .blockreassurance_product, .product-page-style-3 .sidebar .sidebar-wrapper .sidebar-service .blockreassurance_product { composes: qm-rounded-lg-white; background-color: var(--qm-color-white); border-radius: var(--qm-radius-xl); margin-top: 0; } .images-container .product-cover-container, .images-container .product-cover picture, .product-zoom-container, .images-container .product-cover-container .swiper-wrapper .swiper-slide .product-zoom-img { border-radius: var(--qm-radius-xl); } .images-container .product-cover picture { border: none; outline: none; } .social-share a.social-share-btn { border-radius: var(--qm-radius-md); } .product-variants>.product-variants-item ul li { border-radius: var(--qm-radius-md); } .product-page-style-3 .product-prices { gap: var(--qm-spacing-sm); } .product-quantity #quantity_wanted, .input-group .form-control:not(:first-child):not(:last-child) { border-radius: var(--qm-radius-sm) 0 0 var(--qm-radius-sm); } .product-quantity .input-group-btn-vertical .btn { border-radius: var(--qm-radius-xs); } .product-page-style-3 .tab_wrapper .tabs { border-radius: var(--qm-radius-md); } /* ========================================================================== REDISEÑO DE TARJETA DE PRODUCTO (¡QUE MARQUESAS! STYLE) ========================================================================== */ /* Contenedor principal de la tarjeta */ .product.product-grid-style-1 article.product-miniature { display: flex; flex-direction: column; background-color: var(--qm-color-bg); border-radius: var(--qm-radius-card); overflow: hidden; position: relative; border: 1px solid var(--qm-color-surface-variant); box-shadow: 0 4px 20px rgba(210, 10, 20, 0.05); transition: all 0.3s ease-in-out; align-items: stretch; } /* Efecto Hover sobre la tarjeta */ .product.product-grid-style-1 article.product-miniature:hover { box-shadow: 0 8px 30px rgba(210, 10, 20, 0.12); transform: translateY(-2px); } /* Área superior de la imagen */ .product.product-grid-style-1 .thumbnail-container { position: relative; background-color: var(--qm-color-surface-container); padding: 1rem; display: block; text-align: center; align-items: center; justify-content: center; overflow: hidden; width: 100%; } /* Forzar proporciones y transiciones en la imagen del producto */ .product.product-grid-style-1 .product-thumbnail img { width: 100%; height: 240px; object-fit: contain; transition: transform 0.5s ease; } .product.product-grid-style-1 article.product-miniature:hover .product-thumbnail img { transform: scale(1.05); } /* Etiqueta / Flag "Nuevo" */ .product.product-grid-style-1 .product-flags { position: absolute; top: 1rem; left: 1rem; list-style: none; padding: 0; margin: 0; z-index: 2; } .product.product-grid-style-1 .product-flag.new { background-color: var(--qm-color-secondary-light); color: var(--qm-color-secondary-variant); padding: 0.25rem 0.75rem; border-radius: var(--qm-radius-pill); font-family: var(--qm-font-base); font-size: 12px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.05); text-transform: uppercase; } /* Contenedor de Información inferior */ .product.product-grid-style-1 .product-description { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; background: var(--qm-color-bg); } /* Título del Producto */ .product.product-grid-style-1 .product-title { margin: 0 0 0.5rem 0; } .product.product-grid-style-1 .product-title a { font-family: var(--qm-font-display); font-size: 20px; font-weight: 700; color: var(--qm-color-primary); text-decoration: none; line-height: 28px; } /* Estrellas de Reseña */ .product.product-grid-style-1 .product-list-reviews { margin-bottom: 1rem; } /* Bloque de Precio */ .product.product-grid-style-1 .product-price-and-shipping { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .product.product-grid-style-1 .price { font-family: var(--qm-font-base); font-size: 18px; font-weight: 700; color: var(--qm-color-text-dark); } /* Ocultar descripciones secundarias repetitivas en grid */ .product.product-grid-style-1 .product-desc, .product.product-grid-style-1 .availability { display: none; } /* ========================================================================== EL BOTÓN DE COMPRA REVOLUCIONARIO ========================================================================== */ /* Ocultar el botón pequeño duplicado sobre la imagen si existiese */ .thumbnail-top .product-add-to-cart { display: none; } /* Darle estilo al contenedor del botón inferior */ .product-description .product-add-to-cart { margin-top: auto; width: 100%; } .product-description .product-add-to-cart form { width: 100%; } /* El botón principal nativo modificado */ .product-description .add-to-cart .btn.btn-primary.add-to-cart { width: 100%; padding: 0.75rem 1.5rem; background-color: var(--qm-color-primary-variant); color: var(--qm-color-white); border-radius: var(--qm-radius-btn); font-family: var(--qm-font-base); font-size: 14px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 4px 0 var(--qm-color-primary); transform: translateY(0px); transition: all 0.15s ease; } .product-description .product-add-to-cart { text-align: center; margin-top: 0.3rem; padding: 0.5rem 0; width: 100%; } /* Hover & Active del Botón */ .product-description .add-to-cart .btn.btn-primary.add-to-cart:hover { background-color: var(--qm-color-primary); } .product-description .add-to-cart .btn.btn-primary.add-to-cart:active { box-shadow: 0 0px 0 var(--qm-color-primary); transform: translateY(4px); } .product.product-grid-style-1 .wishlist-button-add:hover { color: var(--qm-color-primary); background: var(--qm-color-white); } .products.product-loop:not(.list, .product-list) .product-miniature .thumbnail-container .thumbnail-top { border: none; } .products.product-loop:not(.list,.product-list) .product-grid-style-1 .product-miniature .thumbnail-container .product-description { background-color: transparent; margin-top: 0.5rem; padding: 0; min-height: 0; } /* ======================================================== DISEÑO UX/UI - 404 PAGE ======================================================== */ /* 1. OCULTAR EL HERO TITLE ORIGINAL */ /* Funciona si el body tiene la clase, o mediante :has si encuentra la sección 404 */ body.page-pagenotfound #hero_section, body:has(#wrapper .page-not-found) #hero_section { display: none !important; } /* 2. SETUP DEL CONTENEDOR PRINCIPAL (Rompiendo el Grid del CMS) */ #wrapper .page-not-found { position: relative; /* Expande la sección al ancho completo de la pantalla ignorando el .container padre */ width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; min-height: 70vh; display: grid; grid-template-columns: 1fr; gap: var(--qm-spacing-xl); padding: var(--qm-spacing-3xl) var(--qm-spacing-xl); box-sizing: border-box; background-color: var(--qm-color-bg); /* Inyección de fondos: Textura de puntos + Resplandor (Blob) desenfocado en el centro */ background-image: radial-gradient(rgba(210, 10, 20, 0.08) 1px, transparent 1px), radial-gradient(circle at center, rgba(166, 0, 11, 0.05) 0%, transparent 60%); background-size: 24px 24px, 100vw 100vw; background-position: 0 0, center center; background-repeat: repeat, no-repeat; overflow: hidden; align-content: center; justify-items: center; text-align: center; } /* Layout Desktop usando Grid Areas */ @media (min-width: 1024px) { #wrapper .page-not-found { grid-template-columns: 1fr 1fr; grid-template-areas: "image title" "image desc" "image actions"; gap: 16px 48px; justify-items: start; text-align: left; padding: 80px 40px; } } /* 3. INYECCIÓN DE LA IMAGEN (A través de pseudo-elemento ::before) */ #wrapper .page-not-found::before { content: ""; display: block; width: 100%; max-width: 450px; aspect-ratio: 1 / 1; background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBU-qaQKx7a21gFeaksHO6DN3wDbLtMG_UKeKpRwRw6EuWjudEBNexH6OzGm-Sym9CNcFUV601gEB_8c7IauHcsTsYx4wOuSf7nIEaAn1oUrjTE3XSN6USyl9Mjfn3slhtriGYtgsI_8c36yksQwK-YcVLqggMAQbz7-UgBOPz0nTHrgddgiM_BO6nf9UyztKg8Ey8S5VS1Qbn_Gqr3-jw1hy1P06yVBjgCR9LUVlFknMb27bHM0xEu6cn4EZ8DWJZY53pIPgpyhG0b'); background-size: cover; background-position: center; border-radius: var(--qm-radius-xl); box-shadow: 0 25px 50px -12px rgba(166, 0, 11, 0.2); transform: rotate(-3deg); transition: transform 0.5s ease; grid-area: image; order: 4; /* En móvil, se ubica al final (debajo del buscador) */ margin-top: var(--qm-spacing-2xl); z-index: 2; } @media (min-width: 1024px) { #wrapper .page-not-found::before { order: unset; margin-top: 0; justify-self: end; align-self: center; } } #wrapper .page-not-found:hover::before { transform: rotate(0deg); } /* 4. TARJETA FLOTANTE ANIMADA (A través de pseudo-elemento ::after) */ #wrapper .page-not-found::after { content: "error"; font-family: 'Material Icons', 'Material Icons Outlined', sans-serif; display: none; background-color: var(--qm-color-white); color: var(--qm-color-primary); font-size: 36px; padding: var(--qm-spacing-lg); border-radius: var(--qm-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); transform: rotate(6deg); animation: qm-bounce 2.5s infinite; z-index: 10; pointer-events: none; } @media (min-width: 1024px) { #wrapper .page-not-found::after { display: flex; align-items: center; justify-content: center; grid-area: image; align-self: end; justify-self: end; margin-right: -24px; margin-bottom: 24px; } } /* 5. ESTILIZACIÓN DE TEXTOS NATIVOS CMS (H4 y P) */ /* El H4 pasa a comportarse y verse como el título .qm-title-xl */ #wrapper .page-not-found h4 { grid-area: title; order: 1; font-family: var(--qm-font-display); font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: var(--qm-color-primary); margin: 0; z-index: 2; } @media (min-width: 768px) { #wrapper .page-not-found h4 { font-size: 48px; } } /* Inyectando el "Badge" nativo (Error 404) ENCIMA del H4 sin usar HTML */ #wrapper .page-not-found h4::before { content: "Error 404"; display: table; padding: 6px 16px; background-color: var(--qm-color-primary-badge); color: var(--qm-color-primary-badge-text); border-radius: var(--qm-radius-pill); font-family: var(--qm-font-base); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 auto var(--qm-spacing-lg) auto; animation: qm-pulse-opacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @media (min-width: 1024px) { #wrapper .page-not-found h4::before { margin-left: 0; } } /* El párrafo se comporta como .qm-desc */ #wrapper .page-not-found p { grid-area: desc; order: 2; font-family: var(--qm-font-base); font-size: 18px; color: var(--qm-color-text-secondary); max-width: 500px; margin: 0; z-index: 2; } /* 6. REDISEÑO DEL WIDGET DE BÚSQUEDA A BOTÓN DE "CATÁLOGO" */ #wrapper .page-not-found #search_widget { grid-area: actions; order: 3; width: 100%; max-width: 320px; z-index: 2; margin-top: var(--qm-spacing-md); } #wrapper .page-not-found #search_widget form { display: flex; align-items: center; justify-content: center; background-color: var(--qm-color-primary-variant); border-radius: var(--qm-radius-md); padding: 18px 24px; box-shadow: 0 4px 0 0 var(--qm-color-primary-dark); cursor: pointer; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; } #wrapper .page-not-found #search_widget form:active { transform: translateY(4px); box-shadow: none; } #wrapper .page-not-found #search_widget form:hover { background-color: var(--qm-color-primary); } /* Texto visible del falso botón */ #wrapper .page-not-found #search_widget form::before { content: "Ir a la Tienda"; font-family: var(--qm-font-base); font-size: 16px; font-weight: 700; color: var(--qm-color-white); margin-left: 32px; /* Deja espacio para el icono */ pointer-events: none; /* Evita que bloquee el clic */ } /* Icono inyectado del falso botón */ #wrapper .page-not-found #search_widget form::after { content: "storefront"; font-family: 'Material Icons', 'Material Icons Outlined', sans-serif; color: var(--qm-color-white); font-size: 24px; position: absolute; left: 32px; pointer-events: none; } /* Ocultamos el campo de texto y el boton limpiar originales */ #wrapper .page-not-found #search_widget form input, #wrapper .page-not-found #search_widget form i.clear { display: none !important; } /* Expandimos el trigger original (la lupa) para que cubra todo el botón */ #wrapper .page-not-found #search_widget form i.search { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; /* Ocultamos la lupa original */ background: transparent; cursor: pointer; z-index: 10; display: block; margin: 0; padding: 0; } /* 7. ORNAMENTO TEXTUAL INYECTADO (El Placer de lo Artesanal) */ #wrapper .page-not-found #search_widget::after { content: "— El Placer de lo Artesanal —"; display: block; margin-top: var(--qm-spacing-2xl); font-size: 12px; font-family: var(--qm-font-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-style: italic; color: var(--qm-color-text-muted); opacity: 0.6; text-align: center; } @media (min-width: 1024px) { #wrapper .page-not-found #search_widget::after { text-align: left; } } /* 8. ANIMACIONES CLAVE */ @keyframes qm-pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes qm-bounce { 0%, 100% { transform: translateY(-15%) rotate(6deg); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0) rotate(6deg); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } /* ======================================================== PAGE CART (PÁGINA DEL CARRITO) ======================================================== */ .page-cart .blockreassurance_product, .page-order .blockreassurance_product { border-radius: var(--qm-radius-2xl); padding: var(--qm-spacing-xl); margin-top: var(--qm-spacing-xl) } .page-cart .cart-grid-right .card.cart-summary { margin: var(--qm-spacing-xl) 0 var(--qm-spacing-xl) 0; border-radius: var(--qm-radius-2xl); } #cart .product-line-grid-left img, .elementor-cart__product-image img { border: none; } .page-registration input[type=text] { border-radius: var(--qm-radius-md) }