/* ───────────────────────────────────────────────────────────────────────── Braggio Lubricantes — landing page styles Blueprint / technical-sheet look: square corners, hairline rules, registration marks, one accent (corporate navy). ───────────────────────────────────────────────────────────────────────── */ :root { /* palette */ --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-accent: #193b65; --color-accent-100: #eaeff6; --color-accent-200: #ccd8e8; --color-accent-300: #a4b7d1; --color-accent-400: #7590b4; --color-accent-500: #4c6c98; --color-accent-600: #2f5280; --color-accent-700: #234570; --color-accent-800: #193b65; --color-accent-900: #122a48; /* Mercado Libre — reservado exclusivamente para la llamada a la tienda */ --color-ml: #ffe600; --color-ml-600: #f2da00; --color-ml-700: #e3cd00; --color-ml-edge: #d8c400; /* type */ --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Barlow", system-ui, sans-serif; /* rhythm */ --leading: 24px; --half: 12px; --edge: clamp(20px, 5vw, 72px); --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; text-wrap: pretty; min-height: 100vh; } img { display: block; max-width: 100%; } figure { margin: 0; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — bilingual switching: driven by data-lang on — */ [data-lang="en"] [data-es] { display: none !important; } [data-lang="es"] [data-en] { display: none !important; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 50; padding: var(--space-3); background: var(--color-accent); color: #fff; } .skip-link:focus { left: 0; } /* ── layout ─────────────────────────────────────────────────────────────── */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); } section { padding: 0 0 calc(3 * var(--leading)); } .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center; } .split--start { align-items: start; } .split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* ── typography ─────────────────────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } h1 { font-size: clamp(40px, 5.6vw, 78px); line-height: clamp(42px, 5.9vw, 82px); margin: var(--leading) 0 0; margin-left: -0.052em; } h1 span { display: block; } h2 { font-size: 34px; line-height: calc(1.5 * var(--leading)); } h3 { font-size: 22px; line-height: var(--leading); } .kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin: 0 0 var(--half); } .rule { height: 1px; border: 0; margin: 0 0 var(--leading); background: var(--color-divider); } .rule--tight { margin-bottom: calc(var(--leading) - var(--half)); } .rule--loose { margin-bottom: calc(var(--leading) + 8px); } .lead { font-size: 17px; line-height: calc(1.2 * var(--leading)); max-width: 58ch; margin: calc(1.5 * var(--leading)) 0 0; } .prose { font-size: 16px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: var(--leading) 0 0; max-width: 50ch; } .prose--first { margin-top: 0; } .note { font-size: 15px; line-height: var(--leading); margin: var(--leading) 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* ── blueprint frame ────────────────────────────────────────────────────── */ .blueprint { position: relative; border: 1px solid var(--color-divider); } .blueprint > .corner { position: absolute; width: 11px; height: 11px; pointer-events: none; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; } .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } .corner.tl { top: -6px; left: -6px; } .corner.tr { top: -6px; right: -6px; } .corner.bl { bottom: -6px; left: -6px; } .corner.br { bottom: -6px; right: -6px; } .panel { padding: var(--leading); } /* ── nav ────────────────────────────────────────────────────────────────── */ .nav { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-text); } .nav-brand { display: block; width: 220px; height: 64px; flex: 0 0 auto; margin-right: auto; } .nav-brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; } .nav-links { display: flex; align-items: center; gap: var(--space-4); } .nav a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; } .nav a:hover { color: var(--color-accent); } .lang { display: flex; align-items: center; border: 1px solid var(--color-divider); flex: 0 0 auto; } .lang button { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; padding: 6px 10px; border: 0; cursor: pointer; background: transparent; color: var(--color-text); } .lang button + button { border-left: 1px solid var(--color-divider); } .lang button[aria-pressed="true"] { background: var(--color-accent); color: #fff; } /* ── buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid var(--color-divider); border-radius: 0; padding: var(--space-2) calc(var(--space-3) * 1.2); } .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); } .btn-primary:hover { background: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); } .btn-ghost { color: var(--color-accent); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-ml { background: var(--color-ml); border-color: var(--color-ml-edge); color: var(--color-accent-900); font-size: 15px; letter-spacing: 0.04em; padding: var(--space-3) calc(var(--space-3) * 1.6); } .btn-ml:hover { background: var(--color-ml-600); } .btn-ml:active { background: var(--color-ml-700); } .btn-arrow { font-style: normal; font-size: 13px; line-height: 1; } /* cuadro amarillo que marca los accesos secundarios a la tienda */ .btn-mark { width: 9px; height: 9px; flex: 0 0 auto; background: var(--color-ml); border: 1px solid var(--color-ml-edge); } .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); } /* ── hero data sheet ────────────────────────────────────────────────────── */ .sheet-head { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--color-accent-900); color: var(--color-bg); } .sheet-head > span { padding: var(--half) var(--leading); font-size: 13px; line-height: var(--leading); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .sheet-head > span:first-child { flex: 1; min-width: 16ch; } .sheet-head > span + span { border-left: 1px solid color-mix(in srgb, var(--color-bg) 35%, transparent); white-space: nowrap; opacity: 0.78; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); } .stat { padding: var(--leading); } .stat + .stat { border-left: 1px solid var(--color-divider); } .stat-value { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; line-height: calc(1.5 * var(--leading)); letter-spacing: 0.02em; } .stat-label { display: block; font-size: 14px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* ── service cards ──────────────────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); } .cards + .cards { margin-top: clamp(20px, 3vw, 48px); } .cards--pair { grid-template-columns: repeat(2, 1fr); } .card p { font-size: 15px; line-height: var(--leading); margin: var(--leading) 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* ── brand grid ─────────────────────────────────────────────────────────── */ .brands { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--color-divider); border-width: 1px 0 0 1px; } .brand { display: grid; gap: var(--half); justify-items: center; align-content: center; padding: var(--leading) var(--half); border: 1px solid var(--color-divider); border-width: 0 1px 1px 0; } .brand img { width: 100%; height: 64px; object-fit: contain; } .brand span { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent); text-align: center; } /* ── tienda online (Mercado Libre) ──────────────────────────────────────── */ .store-panel { background: var(--color-surface); } .store-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .store-copy { padding: var(--leading); } .store-copy .actions { margin-top: calc(1.5 * var(--leading)); } /* las filas se reparten la altura de la columna de texto, como en .stats */ .store-points { border-left: 1px solid var(--color-divider); display: grid; grid-auto-rows: 1fr; } .store-point { display: grid; align-content: center; padding: var(--half) var(--leading); } .store-point + .store-point { border-top: 1px solid var(--color-divider); } .store-point-term { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; line-height: var(--leading); letter-spacing: 0.04em; text-transform: uppercase; } .store-point-note { display: block; font-size: 14px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* ── form ───────────────────────────────────────────────────────────────── */ .fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--leading) var(--space-3); } .field { display: block; } .field--full { grid-column: 1 / -1; } .field > span { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } .form-status { font-size: 14px; line-height: var(--leading); margin: var(--leading) 0 0; color: var(--color-accent-700); min-height: var(--leading); } /* ── contact / map / hours ──────────────────────────────────────────────── */ .contact-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--leading); row-gap: var(--half); font-size: 15px; line-height: var(--leading); } .contact-list dt { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .contact-list dd { margin: 0; } .contact-list a { color: var(--color-accent-700); } .map { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(1) contrast(1.08); } .map-caption { display: flex; flex-wrap: wrap; gap: var(--half); justify-content: space-between; padding: var(--half) var(--leading); border-top: 1px solid var(--color-divider); font-size: 13px; line-height: var(--leading); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .map-caption a { color: var(--color-accent-700); } .hours-head { display: block; padding: var(--half) var(--leading); border-bottom: 1px solid var(--color-divider); font-size: 13px; line-height: var(--leading); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .hours { display: grid; grid-template-columns: 1fr max-content; row-gap: var(--half); column-gap: var(--leading); padding: var(--leading); font-size: 15px; line-height: var(--leading); } .hours .closed { color: color-mix(in srgb, var(--color-text) 70%, transparent); } /* ── footer ─────────────────────────────────────────────────────────────── */ .footer { padding: calc(2 * var(--leading)) 0; border-top: 1px solid var(--color-divider); font-size: 13px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); display: flex; flex-direction: column; gap: var(--leading); } .footer-row { display: flex; flex-wrap: wrap; gap: var(--leading); justify-content: space-between; align-items: baseline; } /* certification mark — reproduced as issued, never restyled */ .footer-cert { display: flex; align-items: center; gap: var(--leading); padding-bottom: var(--leading); border-bottom: 1px solid var(--color-divider); } .footer-cert img { flex: 0 0 auto; width: 260px; height: auto; } .footer-cert p { margin: 0; max-width: 58ch; } .footer-brand { display: flex; align-items: baseline; gap: 0.42em; font-size: 15px; color: var(--color-accent-800); text-transform: uppercase; } .footer-brand b { font-weight: 700; letter-spacing: 0.06em; } .footer-brand i { font-style: normal; font-weight: 400; letter-spacing: 0.2em; } /* ── section spacing helpers ────────────────────────────────────────────── */ .hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); } .sheet-section { padding-bottom: calc(2.5 * var(--leading)); } .about { padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); } .store { padding-bottom: calc(3 * var(--leading)); } .visit { padding-bottom: calc(2 * var(--leading)); } .visit-head { margin-bottom: calc(1.5 * var(--leading)); } /* ── responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .nav { flex-wrap: wrap; } .nav-brand { width: 170px; height: 48px; margin-right: 0; } .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .lang { margin-left: auto; } .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); } .cards { grid-template-columns: repeat(2, 1fr); } .brands { grid-template-columns: repeat(3, 1fr); } .store-body { grid-template-columns: minmax(0, 1fr); } .store-points { border-left: 0; border-top: 1px solid var(--color-divider); } } @media (max-width: 640px) { h1 { margin-left: 0; } .stats { grid-template-columns: minmax(0, 1fr); } .stat + .stat { border-left: 0; border-top: 1px solid var(--color-divider); } .sheet-head > span { min-width: 100%; } .sheet-head > span + span { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-bg) 35%, transparent); } .cards { grid-template-columns: minmax(0, 1fr); } .brands { grid-template-columns: repeat(2, 1fr); } .fields { grid-template-columns: minmax(0, 1fr); } .btn-ml { width: 100%; } .contact-list { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .contact-list dd { margin-bottom: var(--half); } .footer-row { flex-direction: column; gap: var(--half); } .footer-cert { flex-direction: column; align-items: flex-start; } } @media print { .nav, .lang, .map, .actions { display: none !important; } }