/* ============================================
GRUPO 2 MM – MEJORAS VISUALES
============================================ */
/* 1. TIPOGRAFIA – Google Fonts Inter */
@import url(«https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap»);
body, p, li, td, input, textarea, select, button {
font-family: «Inter», -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 15px;
line-height: 1.7;
color: #2d3748;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
font-family: «Poppins», «Inter», sans-serif !important;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: #0A2540;
}
/* 2. COLORES DE MARCA CONSISTENTES */
:root {
–g2mm-blue-dark: #0A2540;
–g2mm-blue: #0074BC;
–g2mm-blue-light: #e8f4fd;
–g2mm-gray: #64748b;
–g2mm-gray-light: #f8fafc;
–g2mm-border: #e2e8f0;
}
/* 3. BOTONES – Hover y transiciones */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.button, button.button,
input[type=»submit»],
.woocommerce a.button,
.woocommerce button.button {
transition: all 0.25s ease !important;
font-family: «Inter», sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
border-radius: 6px !important;
}
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(0, 116, 188, 0.3) !important;
opacity: 0.92 !important;
}
/* 4. WOOCOMMERCE – Tarjetas de producto mejoradas */
.woocommerce ul.products li.product {
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
transition: all 0.3s ease !important;
background: #ffffff !important;
border: 1px solid var(–g2mm-border) !important;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: «Inter», sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #0A2540 !important;
line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price {
color: var(–g2mm-blue) !important;
font-weight: 700 !important;
font-size: 16px !important;
}
.woocommerce ul.products li.product img {
transition: transform 0.35s ease !important;
}
.woocommerce ul.products li.product:hover img {
transform: scale(1.04) !important;
}
/* 5. FORMULARIOS – Estilos mejorados */
input[type=»text»],
input[type=»email»],
input[type=»tel»],
input[type=»url»],
textarea,
select,
.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-textarea textarea {
border: 1.5px solid var(–g2mm-border) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: «Inter», sans-serif !important;
font-size: 15px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
background: #fafafa !important;
}
input:focus, textarea:focus, select:focus,
.elementor-field-type-text input:focus,
.elementor-field-type-email input:focus,
.elementor-field-type-textarea textarea:focus {
border-color: var(–g2mm-blue) !important;
box-shadow: 0 0 0 3px rgba(0, 116, 188, 0.12) !important;
outline: none !important;
background: #ffffff !important;
}
/* 6. CARDS / CAJAS DE CONTENIDO */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
border-radius: 12px !important;
padding: 28px 24px !important;
transition: all 0.3s ease !important;
border: 1px solid transparent !important;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
background: #f0f7ff !important;
border-color: var(–g2mm-blue-light) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(0, 116, 188, 0.1) !important;
}
/* 7. BLOG – Tarjetas de articulos */
.elementor-posts .elementor-post {
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
transition: all 0.3s ease !important;
}
.elementor-posts .elementor-post:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
}
/* 8. LINKS */
a {
transition: color 0.2s ease !important;
}
a:hover {
color: var(–g2mm-blue) !important;
}
/* 9. CHECKOUT WOOCOMMERCE */
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
border-radius: 10px !important;
overflow: hidden !important;
border: 1px solid var(–g2mm-border) !important;
}
/* 10. BARRA DE NAVEGACION */
.site-header, header.header {
box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
/* 11. SECCION HERO – Mejor legibilidad */
.elementor-widget-pix-text p,
.elementor-widget-text-editor p {
line-height: 1.75 !important;
}
/* 12. BADGES Y ETIQUETAS WOOCOMMERCE */
.woocommerce span.onsale {
background: var(–g2mm-blue) !important;
border-radius: 6px !important;
font-family: «Inter», sans-serif !important;
font-weight: 600 !important;
}
/* 13. SCROLLBAR PERSONALIZADO */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(–g2mm-blue); }
/* 14. ANIMACIONES SUAVES AL CARGAR */
.elementor-section {
animation: fadeInUp 0.5s ease both;
}
@keyframes fadeInUp {
from { opacity: 0.85; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}