/* ── LOJA MONTENEGRO – IDENTIDADE VISUAL ── */ /* Fonte DM Sans carregada via no do HTML (não bloqueante) */ :root { --mtn-dark: #211e1b; --mtn-darker: #121110; --mtn-accent: #c1662e; --mtn-gold: #d9a441; --mtn-light: #f8f3ec; } body { font-family: 'DM Sans', sans-serif; } /* ── BARRA DE URGÊNCIA ── */ .urgency-bar-light { background: var(--mtn-dark); text-align: center; padding: 10px 16px; color: #fff; font-size: 13px; font-weight: 600; border-bottom: 2px solid var(--mtn-accent); } .urgency-bar-light span { color: var(--mtn-gold); font-weight: 700; } /* ── HEADER LOJA MONTENEGRO ── */ .header-cc { background: linear-gradient(to bottom, #121110, #211e1b); padding: 20px 0 0; } .ha-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; } .ha-menu-icon { display: none; cursor: pointer; flex-shrink: 0; background: none; border: none; padding: 0; } .ha-logo { flex-shrink: 0; } .ha-logo img { height: 75px; display: block; object-fit: contain; filter: brightness(0) invert(1); } /* Logo SVG inline */ .brand-logo-svg { height: 44px; display: block; } .ha-search { flex: 1; max-width: 550px; display: flex; align-items: center; background: #fff; border-radius: 4px; padding: 6px 16px; height: 44px; border: none; } .ha-search input { border: none; outline: none; width: 100%; height: 100%; font-size: 14px; font-family: 'DM Sans', sans-serif; } .ha-search button { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; } .ha-search svg { width: 20px; height: 20px; fill: #6b7280; } .ha-cart { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; flex-shrink: 0; background: none; border: none; } .ha-cart-icon { position: relative; display: flex; } .ha-cart-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2; } .ha-cart-badge { position: absolute; top: -5px; right: -8px; background: var(--mtn-accent); color: #fff; font-size: 11px; font-weight: 800; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ha-links { border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; gap: 30px; padding: 12px 20px; overflow-x: auto; white-space: nowrap; } .ha-links a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; opacity: 0.9; } .ha-links a:hover { opacity: 1; text-decoration: underline; } @media (min-width: 769px) { .ha-links[hidden] { display: flex !important; } } /* ── BOTÕES LARANJA (ALTA CONVERSÃO) ── */ .button.button-primary, .button-primary { background: linear-gradient(135deg, #a8531f 0%, var(--mtn-accent) 100%) !important; border-color: var(--mtn-accent) !important; box-shadow: 0 8px 25px rgba(193,102,46,0.45) !important; } .button.button-primary:hover, .button-primary:hover { background: #a8531f !important; transform: translateY(-2px); box-shadow: 0 12px 35px rgba(193,102,46,0.6) !important; } .special-offer-badge { background: var(--mtn-accent) !important; } .badge-accent { background: var(--mtn-accent) !important; } .marquee-strip { background: var(--mtn-dark) !important; } /* Remove barra de anúncio do Layout base */ .announcement { display: none; } /* ── FOOTER LOJA MONTENEGRO ── */ .footer-cc { background: linear-gradient(to bottom, #121110, #211e1b) !important; padding: 50px 0 0; color: #fff; font-family: 'DM Sans', sans-serif; } .fg-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; padding: 0 20px; } .fg-col { text-align: center; } .fg-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mtn-gold); } .fg-col p, .fg-col a { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.6; text-decoration: none; display: block; margin-bottom: 6px; transition: color 0.2s; } .fg-col a:hover { color: var(--mtn-accent); text-decoration: underline; } .footer-cc .fg-logo { max-width: 160px; margin: 0 auto 16px; display: block; object-fit: contain; filter: brightness(0) invert(1); } .fg-contact-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 12px; color: rgba(255,255,255,0.8); justify-content: center; } .fg-contact-item svg { width: 14px; height: 14px; fill: var(--mtn-accent); flex-shrink: 0; margin-top: 2px; } .fg-security-box { background: rgba(255,255,255,0.08); border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; justify-content: center; border: 1px solid rgba(193,102,46,0.2); } .fg-security-box svg { width: 18px; height: 18px; fill: none; stroke: var(--mtn-accent); stroke-width: 1.5; } .fg-bottom-bar { background: var(--mtn-darker); width: 100%; padding: 20px; border-top: 2px solid var(--mtn-accent); } .fg-bottom-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; padding: 0 20px; } .fg-copyright { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; text-align: center; } /* ── RESPONSIVO MOBILE ── */ @media (max-width: 768px) { .ha-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 12px; } .ha-menu-icon { display: flex; align-items: center; grid-column: 1; grid-row: 1; } .ha-logo { display: flex; justify-content: center; grid-column: 2; grid-row: 1; } .ha-logo img { height: 40px; margin: 0 auto; } .brand-logo-svg { height: 34px; margin: 0 auto; } .ha-cart { display: flex; justify-content: flex-end; grid-column: 3; grid-row: 1; } .ha-cart .cart-text { display: none; } .ha-search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 100%; margin: 0; height: 40px; } .ha-links { display: none; flex-direction: column; gap: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; text-align: left; } .ha-links:not([hidden]) { display: flex; } .ha-links a { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; width: 100%; } .fg-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; text-align: center; } .fg-col { display: flex; flex-direction: column; align-items: center; } .fg-col h4 { margin-bottom: 10px; } .fg-contact-item { justify-content: center; } .fg-security-box { justify-content: center; } .fg-bottom-inner { flex-direction: column-reverse; justify-content: center; text-align: center; gap: 12px; } .fg-copyright { font-size: 12px; } } /* ═══════════════════════════════════════════════ RECURSOS AVANÇADOS — ALTA CONVERSÃO ═══════════════════════════════════════════════ */ /* ── BARRA DE CONFIANÇA ── */ .brand-trust-bar { background: var(--mtn-light); border-bottom: 2px solid rgba(193,102,46,0.18); padding: 13px 0; } .ztb-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; padding: 0 20px; } .ztb-item { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: var(--mtn-dark); text-transform: uppercase; letter-spacing: 0.06em; } .ztb-item svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── PULSAÇÃO NO CTA ── */ @keyframes cta-pulse { 0%, 100% { box-shadow: 0 8px 25px rgba(193,102,46,0.45); } 50% { box-shadow: 0 8px 40px rgba(193,102,46,0.8), 0 0 0 10px rgba(193,102,46,0.08); } } #buy-now, #sticky-buy { animation: cta-pulse 2.6s ease-in-out infinite; } /* ── SEÇÃO BENEFÍCIOS ── */ .benefits-section { background: #fff; padding: 64px 0; } .section-eyebrow { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--mtn-accent); text-transform: uppercase; margin-bottom: 10px; display: block; } .section-title { text-align: center; font-size: clamp(22px, 3vw, 32px); color: var(--mtn-dark); margin: 0 0 40px; font-weight: 800; line-height: 1.2; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .benefit-card { background: var(--mtn-light); border: 1px solid rgba(193,102,46,0.12); border-radius: 18px; padding: 30px 22px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; } .benefit-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(193,102,46,0.14); } .benefit-icon { width: 58px; height: 58px; background: linear-gradient(135deg, #a8531f, var(--mtn-accent)); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .benefit-icon svg { width: 28px; height: 28px; fill: #fff; } .benefit-card h3 { font-size: 15px; font-weight: 800; color: var(--mtn-dark); margin: 0 0 8px; } .benefit-card p { font-size: 13px; color: #64748b; margin: 0; line-height: 1.65; } /* ── TABELA DE ESPECIFICAÇÕES ── */ .specs-section { background: var(--mtn-light); padding: 64px 0; } .specs-table { max-width: 720px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 30px rgba(15,23,42,0.09); } .specs-row { display: flex; border-bottom: 1px solid #f1f5f9; } .specs-row:last-child { border-bottom: none; } .specs-row:nth-child(odd) { background: #fff; } .specs-row:nth-child(even) { background: #fafafa; } .specs-label { width: 44%; padding: 15px 20px; font-size: 13px; font-weight: 700; color: var(--mtn-dark); background: rgba(193,102,46,0.05) !important; border-right: 2px solid rgba(193,102,46,0.15); } .specs-value { padding: 15px 20px; font-size: 13px; color: #475569; flex: 1; line-height: 1.5; } /* ── WHATSAPP FLUTUANTE ── */ .whatsapp-float { position: fixed; bottom: 88px; left: 20px; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(37,211,102,0.55); z-index: 900; text-decoration: none; animation: wa-float 3s ease-in-out infinite; } .whatsapp-float:hover { background: #1ebe5d; } .whatsapp-float svg { width: 30px; height: 30px; fill: #fff; } @keyframes wa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ── ANIMAÇÕES DE SCROLL ── */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; } /* ── SEÇÃO DE GARANTIA ── */ .guarantee-section { background: linear-gradient(135deg, #211e1b 0%, #3a332c 100%); padding: 72px 0; } .guarantee-card { display: flex; gap: 48px; align-items: center; max-width: 900px; margin: 0 auto; padding: 0 20px; } .guarantee-shield { flex-shrink: 0; width: 110px; height: 110px; background: rgba(193,102,46,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid rgba(193,102,46,0.4); } .guarantee-shield svg { width: 54px; height: 54px; fill: var(--mtn-accent); stroke: none; } .guarantee-content .section-eyebrow { text-align: left; margin-bottom: 6px; } .guarantee-content h2 { font-size: clamp(20px, 2.8vw, 28px); color: #fff; margin: 0 0 14px; font-weight: 800; line-height: 1.25; } .guarantee-content p { color: rgba(255,255,255,0.75); font-size: 15px; margin: 0 0 20px; line-height: 1.6; } .guarantee-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .guarantee-list li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600; } .guarantee-list svg { width: 18px; height: 18px; stroke: var(--mtn-accent); fill: none; stroke-width: 2.5; flex-shrink: 0; } /* ── BANNER CTA MEIO DE PÁGINA ── */ .midcta-section { background: var(--mtn-accent); padding: 72px 0; text-align: center; } .midcta-inner { max-width: 700px; margin: 0 auto; padding: 0 20px; } .midcta-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); text-transform: uppercase; margin: 0 0 14px; } .midcta-section h2 { font-size: clamp(24px, 3.5vw, 38px); color: #fff; margin: 0 0 12px; font-weight: 900; line-height: 1.2; } .midcta-section h2 span { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5); text-underline-offset: 4px; } .midcta-sub { font-size: 15px; color: rgba(255,255,255,0.85); margin: 0 0 32px; } .midcta-btn { display: inline-block; background: #211e1b; color: #ffffff; font-family: inherit; font-size: 17px; font-weight: 900; letter-spacing: 0.04em; padding: 18px 44px; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 36px rgba(0,0,0,0.35); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .midcta-btn:hover { background: #3a332c; transform: translateY(-3px); box-shadow: 0 14px 44px rgba(0,0,0,0.4); } /* Sub-note abaixo do botão */ .cta-sub-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 7px 0 0; font-size: 11px; color: #6b7280; text-align: center; } .cta-sub-note svg { flex-shrink: 0; stroke: #9ca3af; } /* Trust trio redesenhado */ .trust-trio { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .tt-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; } .tt-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tt-green { background: #dcfce7; } .tt-green svg { stroke: #16a34a; width: 20px; height: 20px; } .tt-blue { background: #dbeafe; } .tt-blue svg { stroke: #2563eb; width: 20px; height: 20px; fill: none; } .tt-item .tt-icon svg[viewBox="0 0 24 24"] { width: 20px; height: 20px; fill: none; } .tt-text { display: flex; flex-direction: column; gap: 2px; } .tt-text strong { font-size: 13px; color: #111827; } .tt-text span { font-size: 12px; color: #6b7280; } /* ── OFERTA ESTÁTICA + BOTÕES DE VARIANTE ── */ .special-offer { cursor: default; grid-template-columns: 1fr auto; } .special-offer:hover { transform: none; border-color: var(--accent); } .offer-color-selector { display: grid; gap: 7px; margin-top: 8px; padding: 14px 15px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; } /* Variant selector cards */ .variant-buttons { display: flex; flex-direction: column; gap: 8px; } .variant-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff; color: #111827; font-family: inherit; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .variant-btn:hover:not(.active) { border-color: #211e1b; background: #f8fafc; } .variant-btn.active { border-color: #211e1b; background: #211e1b; box-shadow: 0 4px 16px rgba(15,32,68,0.25); } /* Flash ao trocar variante */ @keyframes variantFlash { 0% { opacity: 0.35; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } #main-product-image.variant-flash { animation: variantFlash 0.35s ease-out forwards; } /* Thumbnail de produto no botão */ .vb-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 2px solid transparent; transition: border-color 0.15s; } .variant-btn.active .vb-thumb { border-color: rgba(255,255,255,0.3); } /* Texto e badge */ .vb-label { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vb-name { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.2; } .variant-btn.active .vb-name { color: #fff; } /* Checkmark */ .vb-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .vb-check svg { width: 12px; height: 12px; stroke: transparent; transition: stroke 0.15s; } .variant-btn.active .vb-check { background: #c1662e; border-color: #c1662e; } .variant-btn.active .vb-check svg { stroke: #fff; } /* ── GATILHOS DE PERSUASÃO ── */ /* 7. Ancoragem de valor */ .price-savings { display: inline-flex; align-items: center; margin: 10px 0 0; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #a8531f; background: #fff7ed; border: 1px solid #e8c8a8; border-radius: 999px; } .price-savings strong { color: #c1662e; font-weight: 800; margin-left: 3px; } /* 6. Reciprocidade */ .bonus-box { display: flex; align-items: flex-start; gap: 10px; background: #f8f3ec; border: 1px dashed #d9a441; border-radius: 10px; padding: 12px 14px; margin: 16px 0 0; } .bonus-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; } .bonus-text { font-size: 12.5px; color: #211e1b; line-height: 1.5; } .bonus-text strong { color: #a8531f; } /* Preço, de/por e desconto sempre na mesma linha */ .price-block { flex-wrap: nowrap; } .price-block s { flex-basis: auto; } /* Formas de pagamento: rótulo em cima, ícones dos cartões embaixo */ .buy-pay-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-align: center; } .buy-pay-icons span { flex-basis: 100%; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 2px; } .buy-pay-icons img { height: 26px; width: auto; } /* 10 + 5. Risco zero + autoridade, junto ao botão */ .cta-badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cta-badge { display: inline-flex; align-items: center; gap: 5px; background: #f8f3ec; border: 1px solid #e8c8a8; color: #6b3517; font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 999px; } /* Seção "Quem somos" sem foto — só texto, centralizado */ .about-grid-solo { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; } /* 12–20. Selos e garantias institucionais */ .trust-badges-section { background: #f8f3ec; } .tb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; padding: 0 20px; } .tb-card { background: #fff; border: 1px solid rgba(193,102,46,0.14); border-radius: 16px; padding: 26px 20px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; } .tb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(33,30,27,0.1); } .tb-icon { font-size: 30px; margin-bottom: 12px; line-height: 1; } .tb-card h3 { font-size: 14.5px; font-weight: 800; color: #211e1b; margin: 0 0 8px; } .tb-card p { font-size: 12.5px; color: #6b7280; margin: 0; line-height: 1.6; } .tb-card p strong { color: #a8531f; } /* ── RESPONSIVO EXTRAS ── */ @media (max-width: 768px) { .tb-grid { grid-template-columns: 1fr 1fr; } .ztb-inner { gap: 14px; } .ztb-item { font-size: 10px; } .benefits-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .specs-table { margin: 0 16px; } .whatsapp-float { bottom: 80px; left: 14px; width: 50px; height: 50px; } .guarantee-card { flex-direction: column; gap: 24px; text-align: center; } .guarantee-content .section-eyebrow { text-align: center; } .guarantee-list { display: inline-flex; align-self: center; } .guarantee-list li { justify-content: flex-start; align-items: flex-start; text-align: left; } .guarantee-list svg { margin-top: 2px; } } @media (max-width: 420px) { .benefits-grid { grid-template-columns: 1fr; } .tb-grid { grid-template-columns: 1fr; } } @media (max-width: 380px) { .price-block { gap: 6px 8px; } .price-block strong { font-size: 34px; } .price-block s { font-size: 12px; } .price-block span { font-size: 10px; padding: 4px 7px; } }