/* NEBA — shared design tokens, typography, components */ /* Interim display face until FF Blur WOFF2 arrive — swap --font-display when ready. Fonts (Plus Jakarta Sans + Syne) load via in each page's — no @import here. */ /* FF Blur — enable when designer delivers licensed WOFF2 to fonts/ @font-face { font-family: 'FF Blur'; src: url('fonts/FFBlurPro-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'FF Blur'; src: url('fonts/FFBlurPro-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'FF Blur'; src: url('fonts/FFBlurPro-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } */ :root { --bg: #F5F4F2; --surface: #E3DDD2; --accent: #9C8A6E; --text-secondary: #4A3A2E; --text-primary: #1F150D; --white: #FFFFFF; --gray-light: #D8D2C8; --gray-mid: #7A6E62; --gray-faint: #F0EDE8; --font-display: 'Syne', 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --duration-fast: 120ms; --duration-color: 150ms; --duration-press: 160ms; --duration-motion: 200ms; --duration-drawer: 280ms; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; } h1, h2, .hero-title, .header-title, .card-name, .grano-varietal, .finca-title, .historia-title, .guia-title, .contact-title, .grano-info-name { font-family: var(--font-display); } a, button { touch-action: manipulation; } :where( .btn, .filter-btn, .grano-btn, .metodo-btn, .nav-toggle, .neba-wa-float, .contact-card, .grano-card, .card-actions a, .card-actions button, .cta-banner a ):active { transform: scale(0.97); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--text-primary); color: var(--white); padding: 12px 20px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, .btn:focus-visible, .filter-btn:focus-visible, .grano-btn:focus-visible, .metodo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 32px; cursor: pointer; border-radius: 2px; text-decoration: none; transition: transform var(--duration-press) var(--ease-out), background var(--duration-color) ease, border-color var(--duration-color) ease, color var(--duration-color) ease; } .btn-primary { background: var(--text-primary); color: var(--white); border: 1px solid var(--text-primary); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); } .btn-ghost { background: transparent; color: var(--text-primary); border: 0.5px solid var(--text-primary); } .btn-ghost:hover { background: var(--gray-faint); } .badge-prelaunch { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); border: 0.5px solid var(--accent); padding: 4px 10px; border-radius: 2px; margin-bottom: 8px; } footer { padding: 40px 48px; display: flex; justify-content: space-between; align-items: center; border-top: 0.5px solid var(--gray-light); background: var(--bg); } .footer-copy { font-size: 12px; color: var(--gray-mid); font-weight: 300; } .footer-tag { font-size: 12px; color: var(--gray-mid); font-weight: 200; letter-spacing: 1px; opacity: 0.7; } /* Floating WhatsApp — mobile only */ .neba-wa-float { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: transform var(--duration-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .neba-wa-float:hover { transform: scale(1.05); } } .receta-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 32px; border-top: 0.5px solid var(--gray-light); } @media (max-width: 768px) { footer { padding: 24px; flex-direction: column; gap: 8px; text-align: center; } .neba-wa-float { display: flex; } } @media (min-width: 769px) and (max-width: 1024px) { .granos-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (prefers-reduced-motion: reduce) { :where( .btn, .filter-btn, .grano-btn, .metodo-btn, .nav-toggle, .neba-wa-float, .contact-card, .grano-card, .card-actions a, .card-actions button, .cta-banner a ):active { transform: none; } }