/* ═══════════════════════════════════════════ Q-WERK · style.css · v3 "Bodega Premium" Reskin estilo Vivero Tamez: verde bosque + dorado + Merriweather ── DOS wayfindings ── DORADO = marca / acción · HUE DE ACENTO = índice de producto (nunca texto) ═══════════════════════════════════════════ */ /* Fuentes: cargar vía en (preconnect + Merriweather/Open Sans/Oswald). Fallback drop-in (descomentar si no se editó el ): @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Open+Sans:wght@400;600;700&family=Oswald:wght@500;600;700&display=swap'); */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Verdes (estructura / bandas oscuras) ── */ --green-deep: #0b2013; --green-darkest: #091b10; --green-panel: #2c4033; --green-line: #1b3323; /* ── Dorado (marca / acción) ── */ --gold: #fbd654; --gold-deep: #d9ad1f; --gold-ink: #8a6a08; /* ÚNICO dorado válido como TEXTO sobre papel (~4.8:1) */ --gold-soft: rgba(251,214,84,0.14); /* ── Papel / crema (catálogo escaneable) ── */ --paper: #f6f1e4; --paper-2: #ede5d2; --card: #fffdf6; --card-line: #e3dac2; --plinth: #f3ecd9; /* ── Tinta / texto ── */ --ink: #14231a; --ink-soft: #4f5a49; --cream: #fffcf1; --cream-soft: rgba(255,252,241,0.74); --cream-mut: rgba(255,252,241,0.5); /* ── Remapeo de tokens LEGACY (drop-in) ── */ --dark: #0b2013; --darker: #091b10; --black: #091b10; --white: #fffdf6; --gray-light: #ede5d2; --gray-mid: #e3dac2; --text: #14231a; --text-soft: #4f5a49; --green: #0b2013; /* verde bosque real (NO remapear a dorado) */ /* ── Tipografía ── */ --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --font-ui: 'Oswald', 'Arial Narrow', sans-serif; /* ── Forma / sombra ── */ --r-pill: 16px; --r-card: 14px; --r-btn: 10px; --r-chip: 4px; --shadow-sm: 0 4px 16px rgba(9,27,16,0.08); --shadow-md: 0 12px 34px rgba(9,27,16,0.14); --shadow-pop: 0 14px 44px rgba(9,27,16,0.24); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased; counter-reset: sec; } img { display: block; max-width: 100%; } /* ── Container ── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* ── Typography ── */ h1, h2 { font-family: var(--font-display); } h2 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--ink); line-height: 1.12; margin-bottom: 1.25rem; letter-spacing: -0.02em; } h2.light { color: var(--cream); } .label { display: inline-block; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.6rem; } .label-light { color: var(--gold); } /* ── Numeración editorial de secciones (graft de C) ── */ .section .label { counter-increment: sec; } .section .label::before { content: counter(sec, decimal-leading-zero) " "; font-family: var(--font-display); font-weight: 900; color: var(--gold-ink); font-size: 1.3em; } .section-green .label::before, .section-dark .label::before, .cta-final .label::before { color: var(--gold); } /* ════════════════════════════ NAV — pill flotante ════════════════════════════ */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; padding: 1rem clamp(0.75rem, 3vw, 1.5rem) 0; transition: padding 0.3s, box-shadow 0.3s; } .nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(9,27,16,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(251,214,84,0.24); border-radius: var(--r-pill); padding: 0.55rem 0.9rem 0.55rem 0.6rem; box-shadow: var(--shadow-sm); transition: background 0.3s, box-shadow 0.3s; } #navbar.scrolled .nav-inner { background: rgba(9,27,16,0.92); box-shadow: var(--shadow-md); } .nav-logo { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green-panel); text-decoration: none; flex-shrink: 0; transition: background 0.2s; } .nav-logo img { height: 26px; width: auto; opacity: 0.95; transition: opacity 0.2s; } .nav-logo:hover { background: #34503f; } .nav-logo:hover img { opacity: 1; } .nav-links { list-style: none; display: flex; align-items: center; gap: 1.75rem; } .nav-links a { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-soft); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--gold); } /* COTIZAR — pastilla dorada (marca / acción) */ .nav-links .nav-cta a, .nav-links li:last-child a { background: var(--gold); color: var(--green-darkest); padding: 0.45rem 1rem; border-radius: var(--r-btn); font-weight: 700; transition: background 0.2s, color 0.2s; } .nav-links .nav-cta a:hover, .nav-links li:last-child a:hover { background: var(--gold-deep); color: var(--green-darkest); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--cream-soft); border-radius: 2px; } /* ════════════════════════════ HERO — centrado (respeta el inline justify-content:center) ════════════════════════════ */ .hero { background: var(--green-deep); background-image: radial-gradient(120% 80% at 50% 0%, rgba(251,214,84,0.06), transparent 60%); min-height: 80vh; display: flex; align-items: center; justify-content: center; padding-top: 72px; } .hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5rem 2rem; max-width: 720px; } .hero-label { display: inline-block; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .hero-label::after { content: ''; display: block; width: 64px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0.9rem auto 0; } .hero-text h1 { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; color: var(--cream); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 0.9rem; } .hero-text h1 .accent { color: var(--gold); } .hero-sub { font-size: 1.2rem; font-style: normal; color: var(--cream-mut); margin-bottom: 2.5rem; font-weight: 400; } /* ════════════════════════════ BOTONES ════════════════════════════ */ .btn { display: inline-block; font-family: var(--font-ui); padding: 0.85rem 2rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; border-radius: var(--r-btn); transition: background 0.2s, filter 0.2s, transform 0.15s, box-shadow 0.2s; } .btn:hover { transform: translateY(-1px); } /* .btn-green → fill dorado (Ver productos / WhatsApp sol-card) */ .btn-green { background: var(--gold); color: var(--green-darkest); } .btn-green:hover { background: var(--gold-deep); } /* .btn-white → crema (CTA principal hero / cta-final) */ .btn-white { background: var(--cream); color: var(--green-darkest); padding: 0.85rem 2.2rem; border-radius: var(--r-btn); font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; display: inline-block; transition: filter 0.2s, transform 0.15s; } .btn-white:hover { filter: brightness(0.96); transform: translateY(-1px); } .btn-sm { padding: 0.55rem 1.2rem; font-size: 0.72rem; } .btn-lg { padding: 1rem 2.6rem; font-size: 0.9rem; } .btn-text { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--gold); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } .btn-text:hover { color: var(--gold-ink); border-color: var(--gold-deep); } /* ════════════════════════════ COLOR STRIPE — firma de marca (arcoíris desaturado + filete dorado) ════════════════════════════ */ .color-stripe { display: flex; height: 5px; filter: saturate(0.82); border-top: 2px solid var(--gold); } .color-stripe span { flex: 1; } /* ════════════════════════════ SECTIONS — ritmo papel ↔ bosque ════════════════════════════ */ .section { padding: 5.5rem 0; } .section-gray { background: var(--paper-2); } .section-green { background: var(--green-deep); } .section-dark { background: var(--green-darkest); } .section-green .label-light, .section-dark .label-light { color: var(--gold); } .section-intro { color: var(--ink-soft); font-size: 1rem; max-width: 580px; margin-bottom: 2.5rem; margin-top: -0.5rem; } /* Links de contenido sobre papel */ .container p a { color: var(--gold-ink); font-weight: 600; } .container p a:hover { color: var(--gold-deep); } /* ════════════════════════════ SECCIÓN VERDE — PILARES ════════════════════════════ */ .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.5rem; } .pillar { display: flex; flex-direction: column; gap: 0.75rem; } .pillar-icon { width: 48px; height: 48px; background: var(--gold-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; } .pillar-icon svg { width: 24px; height: 24px; color: var(--gold); } .pillar h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--cream); letter-spacing: -0.01em; } .pillar p { font-size: 0.9rem; color: var(--cream-soft); line-height: 1.65; } /* ════════════════════════════ QUIÉNES SOMOS / STATS (páginas internas) ════════════════════════════ */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .col-text p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1rem; } .col-text p:last-child { margin-bottom: 0; } .col-stats { display: flex; flex-direction: column; gap: 1px; background: var(--card-line); } .stat-card { background: var(--paper-2); padding: 1.5rem 1.75rem; display: flex; align-items: center; gap: 1.25rem; } .stat-card strong { font-family: var(--font-display); font-size: 2.8rem; font-weight: 900; color: var(--ink); min-width: 70px; line-height: 1; letter-spacing: -0.03em; } .stat-card span { font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; } /* ════════════════════════════ MISIÓN / VISIÓN (páginas internas) ════════════════════════════ */ .mv-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 3.5rem; align-items: start; } .mv-card .label { margin-bottom: 0.75rem; } .mv-card p { color: var(--cream-soft); font-size: 1rem; line-height: 1.75; } .mv-divider { background: var(--green-line); align-self: stretch; } /* ════════════════════════════ PRODUCTOS ════════════════════════════ */ .line-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .line-title::after { content: ''; flex: 1; height: 1px; background: var(--card-line); } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; background: transparent; border: none; } .products-grid--one { display: block; background: transparent; border: none; } .products-grid--one .product-card { max-width: 380px; } .product-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; position: relative; } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); z-index: 1; } /* Franja de acento superior = índice de producto (--accent vive en .product-img-wrap) */ .product-img-wrap { background: var(--plinth); border-top: 4px solid var(--accent, var(--gold)); border-bottom: 1px solid var(--card-line); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 1.25rem; height: 200px; } .product-img-wrap img { height: 100%; width: auto; object-fit: contain; transition: transform 0.3s; } .product-card:hover .product-img-wrap img { transform: scale(1.04); } .product-body { padding: 1.25rem 1.4rem 1.6rem; flex: 1; display: flex; flex-direction: column; } .product-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; } /* Código = tinta (nunca el acento como texto) + punto/tick de índice */ .product-code { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink) !important; display: inline-flex; align-items: center; } .product-code::before, .guide-code::before, .modal-code::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent, var(--gold)); margin-right: 0.45rem; flex-shrink: 0; } .product-ph { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; color: var(--cream); background: var(--green-panel); padding: 0.2rem 0.55rem; border-radius: 20px; text-transform: uppercase; white-space: nowrap; } .product-body h4 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--ink); margin-bottom: 0.25rem; line-height: 1.3; letter-spacing: -0.01em; } .product-tag { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.8rem; display: block; } .product-body p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.65; flex: 1; } /* ── Presentaciones (legacy) ── */ .product-sizes { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.6rem; margin-bottom: 0.25rem; } .sizes-label { font-weight: 700; color: var(--ink); } /* ── Precios en tarjeta (scope alto para vencer el