/* ============================================================ VAROSA · CSS PERSONALIZADO · Paquete v1 ------------------------------------------------------------ Identidad de marca + arreglo del logo gigante. Selectores VERIFICADOS sobre el tema real de la tienda (inspección del storefront, 03/07/2026). NO son inventados. Colores de marca: #15C9E4 cyan · #4672B1 azul · #FFAD00 ámbar · #325895 navy Nota tipográfica: el tema trae Poppins (cuerpo) y Manrope (títulos). "Bw Mitga" es una fuente de pago que NO se puede cargar libremente en web, así que usamos Montserrat en toda la tienda (es la fuente del mockup que aprobaste y combina con la identidad). Si más adelante compran licencia web de Bw Mitga, se sustituye aquí. Cómo pegar: Configuración (engranaje) -> buscar "CSS" -> Codigo -> CSS personalizado -> pegar TODO -> Guardar. La linea @import debe quedar como PRIMERA linea (ya lo esta). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); :root{ --varosa-cyan:#15C9E4; --varosa-blue:#4672B1; --varosa-amber:#FFAD00; --varosa-navy:#325895; } /* ---------- 1) TIPOGRAFÍA DE MARCA ---------- */ body, .theme-menu, .theme-menu a, .theme-site-name{ font-family:'Montserrat', system-ui, Arial, sans-serif !important; } /* ---------- 2) ARREGLO DEL LOGO GIGANTE ---------- El tema renderiza el logo con height:128px (por eso sale enorme y empuja/encima el nombre y el menú). Lo limitamos a ~50px. >> Recomendado ADEMÁS: bajar la "altura del logo" en los ajustes del tema; este CSS funciona como respaldo seguro. */ .theme-header .theme-logo-parent{ height:auto !important; } .theme-header .theme-logo-parent img{ height:auto !important; max-height:50px !important; width:auto !important; } /* Logo en versión móvil */ .theme-mobile-header-logo img{ height:auto !important; max-height:40px !important; width:auto !important; } /* ---------- 3) NOMBRE DEL SITIO JUNTO AL LOGO ---------- */ .theme-site-name{ color:var(--varosa-navy) !important; font-weight:800 !important; } /* ---------- 4) BARRA SUPERIOR (TOPBAR) EN NAVY ---------- Hoy sale en negro; la pasamos al navy de marca. */ .theme-header-topbar{ background:var(--varosa-navy) !important; } .theme-header-topbar, .theme-header-topbar a{ color:#eaf2fb !important; } .theme-header-topbar a:hover{ color:var(--varosa-cyan) !important; } /* ---------- 5) MENÚ DE NAVEGACIÓN ---------- */ .theme-menu a{ color:var(--varosa-navy) !important; font-weight:600 !important; } .theme-menu a:hover, .theme-menu .theme-menu-selected > a{ color:var(--varosa-cyan) !important; } /* ---------- 6) TÍTULOS DE SECCIÓN ---------- */ h2, h3, .theme-section-title{ color:var(--varosa-navy) !important; } /* ============================================================ OPCIONAL (probar aparte y verificar antes de dejar fijo): Recolorea los botones primarios del tema al ámbar de marca. Afecta TODOS los botones primarios de la tienda (incluye "Agregar al carrito"). Si no te gusta, borrá este bloque. ============================================================ */ /* .zpbutton-type-primary{ background:var(--varosa-amber) !important; border-color:var(--varosa-amber) !important; color:#25313f !important; } .zpbutton-type-primary:hover{ background:#e59b00 !important; border-color:#e59b00 !important; } */ .theme-footer-area{ display:none !important; }
VAROSA
Soluciones que inspiran confianza, transforman y crean impacto.