/* ========================================================================= VitalCigar core design tokens (OpenSpec rediseno-tienda). Loaded on EVERY page, before the page-specific sheets. Holds only: 1. the self-hosted font faces, 2. the design tokens home.css and later phases (listados, ficha) consume, 3. the sitewide components that replace text-inside-image banners. Every class is namespaced vc-* and no legacy element selector is touched, so this sheet is inert on pages that do not opt in (guide §1). ========================================================================= */ /* Self-hosted Poppins (latin subset, 3 weights) — no third-party font requests. Declaring the faces is free: only .vc-* elements actually request them. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/poppins-800.woff2") format("woff2"); } :root { --vc-green: #418613; --vc-green-dark: #2e6a0d; --vc-green-soft: #f1f7ec; --vc-action: #ff6000; --vc-action-dark: #d95200; --vc-sale: #d32f2f; --vc-bg: #ffffff; --vc-bg-soft: #f7f7f7; --vc-text: #1d1d1f; --vc-text-soft: #5f6368; --vc-border: #e5e5e5; --vc-radius: 10px; --vc-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --vc-maxw: 1200px; --vc-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); --vc-shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.09); } /* ---- Benefits topbar (sitewide) ---- Replaces img/cnt/envios-24-48-2025.png, whose baked-in pixels still read "50€" / "24-48h". Text is HTML fed from config, so the figures can never drift from the checkout again (guide §1: no promo text inside images). */ .vc-topbar { background: var(--vc-green); color: #fff; font-family: var(--vc-font); font-size: 0.85rem; line-height: 1.4; text-align: center; padding: 7px 12px; } .vc-topbar strong { font-weight: 600; } .vc-topbar a { color: #fff; text-decoration: underline; } .vc-topbar span + span::before { content: "·"; margin: 0 10px; opacity: 0.7; } @media (max-width: 760px) { .vc-topbar span.vc-topbar__extra { display: none; } } /* Legacy mobile header (.top_mvl) is absolute, 75px tall, over a 60px flow spacer: pad the topbar the missing 15px so its text sits fully below it (padding, not margin — a top margin would collapse into ). */ .esmovil .vc-topbar { padding-top: 22px; } /* ---- Header info items (sitewide) ---- Replace img/cnt/contacto-telefonico-2018.png and the shipping strip image with real text: selectable, translatable, readable by search engines. */ .vc-hdr-info { font-family: var(--vc-font); font-size: 0.82rem; color: var(--vc-text); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; } a.vc-hdr-info:hover { color: var(--vc-green-dark); } .vc-hdr-info svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--vc-green); } .vc-hdr-info strong { font-weight: 600; } .vc-hdr-info__soft { color: var(--vc-text-soft); } /* The legacy top strip is a dark bar: the default dark-on-white pair is unreadable there, so invert inside it (the strip is the only dark surface these items live on). */ .top-header .vc-hdr-info, .top-header a.vc-hdr-info { color: #fff; } .top-header a.vc-hdr-info:hover { color: #fff; text-decoration: underline; } .top-header .vc-hdr-info svg { color: #fff; opacity: 0.85; } .top-header .vc-hdr-info__soft { color: rgba(255, 255, 255, 0.72); } /* ---- Header trust claim (sitewide) ---- Replaces slogan-top-2018.png and slogan_top-nav15.png, both of which carried their copy as pixels inside an image slider (R6 + guide §2.3). No year count is rendered: the codebase quotes five, ten and fifteen years in three different places, so none of them is a verified claim. */ .vc-hdr-claim { font-family: var(--vc-font); text-align: center; line-height: 1.35; } .vc-hdr-claim__lead { display: block; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 600; color: var(--vc-green); text-decoration: none; } a.vc-hdr-claim__lead:hover { color: var(--vc-green-dark); } .vc-hdr-claim__legal { margin: 6px 0 0; font-size: 0.82rem; color: var(--vc-text-soft); } .vc-hdr-claim__age { display: inline-block; border: 1.5px solid var(--vc-text-soft); border-radius: 999px; padding: 0 6px; margin-right: 5px; font-size: 0.72rem; font-weight: 700; line-height: 1.5; } /* Compact branch (logo + claim on one line, no slider wrapper). */ .vc-hdr-claim--compact { text-align: left; } .vc-hdr-claim--compact .vc-hdr-claim__lead { font-size: 1.05rem; } .vc-hdr-claim--compact .vc-hdr-claim__legal { display: block; margin-top: 2px; } /* ---- Main menu (sitewide, task 8.2) ---- The legacy nav kept 2014 chrome: hard 1px boxes around every item and a dark filler bar. Restyled onto the token system — same markup, same item count (guide §3 caps first-level items at 8; there are 7). */ .top-header + .hdcn2 .menu2x, .menu2 .menu2x.sf-menu { font-family: var(--vc-font); } .menu2 .menu2x > li > a { font-family: var(--vc-font); font-weight: 500; letter-spacing: 0.01em; transition: background 0.15s ease, color 0.15s ease; } /* `:not(.icono-home-menu)` is load-bearing: the home item's draws its glyph from a sprite via the `background` shorthand, so tinting it here would paint over the icon and leave a bare coloured square. */ .menu2 .menu2x > li.mnhover > a:not(.icono-home-menu):hover { background-color: var(--vc-green-soft); color: var(--vc-green-dark); } .menu2 .menu2x > li.activo > a:not(.icono-home-menu) { background-color: var(--vc-green); color: #fff; } /* ---- Sidebar promo cards (sitewide) ---- Replace img/info_envio_gastos_gratis-2025.jpg and img/info_soporte.jpg (2014-era stock photos with text baked in) with token-styled HTML. */ .vc-promo { font-family: var(--vc-font); display: block; border: 1px solid var(--vc-border); border-radius: var(--vc-radius); background: var(--vc-bg); padding: 14px 15px; margin-bottom: 12px; text-decoration: none; color: var(--vc-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } a.vc-promo:hover { border-color: var(--vc-green); box-shadow: var(--vc-shadow); } .vc-promo__head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; } .vc-promo__head svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--vc-green); } .vc-promo__title { font-weight: 600; font-size: 0.95rem; color: var(--vc-text); line-height: 1.25; } .vc-promo__text { font-size: 0.82rem; color: var(--vc-text-soft); line-height: 1.45; margin: 0; } .vc-promo__text strong { color: var(--vc-text); font-weight: 600; } .vc-promo__link { display: inline-block; margin-top: 7px; font-size: 0.82rem; font-weight: 600; color: var(--vc-green-dark); } a.vc-promo:hover .vc-promo__link { text-decoration: underline; }