/* styles.clean.css — Versão corrigida Alterações principais: - Desaninhamento de media queries (compatível com CSS puro) - Corrigido nome do arquivo de background (removido espaço) - Mantida estrutura e comentários originais */ /*=============================================== 01. Variáveis (CSS Custom Properties) ===============================================*/ :root { /* Layout */ --max-width: 1100px; --banner-height: 520px; --card-height: 340px; /* fallback desktop */ --card-center-height: 420px; --radius: 14px; --transition-fast: 0.28s; /* Cores */ --accent: #d9b89c; --accent-2: #cda07e; --text: #efeae4; --muted: rgba(255, 255, 255, 0.75); --brown-100: 122, 90, 60; /* RGB usado em gradientes */ /* Quickview (modal) — prefixadas) */ --qv-brown-rgb: 140, 94, 56; --qv-brown-alpha: 0.22; --qv-brown-alpha-top: 0.18; --qv-title: #ffe7b3; --qv-text-light: #fff8f2; --qv-text-muted: rgba(255, 248, 242, 0.86); --qv-radius: 12px; --qv-z: 999999; } /*=============================================== 02. Reset / Base ===============================================*/ * { box-sizing: border-box; margin: 0; padding: 0 } html, body { height: 100%; scroll-behavior: smooth } /* --- Remover background do body e usar elemento .site-bg --- */ body { color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* desativa qualquer background herdado */ background: none !important; background-image: none !important; background-attachment: initial !important; color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Elemento fixo de fundo — INSERIR logo após o */ .site-bg-img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; /* mantém o crop como cover */ object-position: center 25%; z-index: -9999; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* segurança: evita fixed sendo preso a um ancestor transformado (garanta .site-bg como child direto de pra evitar este problema) */ body>.site-bg { position: fixed; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px } /* Skip link (accessibility) */ .skip-link { position: fixed; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden } .skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 8px 12px; background: #111; color: #fff; border-radius: 8px; z-index: 9999 } /*=============================================== 03. Tipografia ===============================================*/ h1, h2, h3 { color: #fff; font-weight: 700; margin: 0 } h1 { font-size: 44px; line-height: 1.04 } h2 { font-size: 32px } .lead { color: var(--muted); font-size: 15px; margin-bottom: 16px } p { color: rgba(255, 250, 245, 0.95) } /*=============================================== 04. Botões (reutilizáveis) ===============================================*/ .btn-primary { display: inline-block; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; background: linear-gradient(90deg, rgba(217, 184, 156, 0.18), rgba(217, 184, 156, 0.06)); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform var(--transition-fast), box-shadow var(--transition-fast) } .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45) } .btn-secondary { display: inline-block; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px; background: transparent; color: #fff; font-weight: 600 } /*=============================================== 05. Navbar Fixa ===============================================*/ .navbar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: var(--max-width); padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); z-index: 1200 } .brand { display: flex; align-items: center; gap: 12px } .brand-badge { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(213, 170, 137, 0.14) } .brand-title { font-size: 13px; font-weight: 700 } .nav-links { display: flex; gap: 18px; align-items: center } /*=============================================== 06. Hero (layout principal) ===============================================*/ .hero { position: relative; width: 100%; min-height: 76vh; padding: 0 0 24px; padding-top: clamp(88px, 10vh, 120px); display: block } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 3, 2, 0.02), rgba(6, 3, 2, 0.06)); z-index: 1; pointer-events: none } .hero-content { position: relative; max-width: min(calc(var(--max-width) + 240px), 1280px); padding-right: clamp(140px, 22vw, 320px); padding: 36px 12px 0; display: flex; gap: 24px; align-items: flex-start; justify-content: flex-start; margin-left: 120px } @media (max-width:900px) { .hero-content { margin-left: 22px } } @media (max-width:480px) { .hero-content { margin-left: 8px } } .intro { padding: 6px 0 4px } .intro .name { font-size: 12px; letter-spacing: 3px; font-weight: 600; margin-bottom: 10px; color: rgba(255, 255, 255, 0.9) } .intro h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.08; letter-spacing: 0.2px; margin-bottom: 10px } .intro p { max-width: 560px; font-size: clamp(14px, 1.6vw, 16px); color: rgba(255, 250, 245, 0.92); margin: 10px 0 14px } .cta-row { gap: 12px } .cta-row .btn-primary { padding: 12px 18px; border-radius: 28px } .cta-row .btn-secondary { padding: 10px 16px; border-radius: 22px } /* Visual do Hero — bolha/visual à direita */ .hero-visual { position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex: 0 0 auto; padding-right: 0; pointer-events: none; width: 100%; min-height: 76vh; display: flex; align-items: center; justify-content: flex-end } .bubble { width: clamp(380px, 36vw, 540px); height: clamp(380px, 36vw, 540px); border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translateY(-10px); transition: transform .6s cubic-bezier(0.2, 0.9, 0.3, 1) } .bubble:hover { transform: translateY(-20px) scale(1.02) } /*=============================================== Hero Main Block (perfil) — estilo único, consolidado ===============================================*/ .hero-main-block { display: flex; align-items: center; gap: 38px; background: linear-gradient(120deg, rgba(217, 184, 156, 0.13) 0%, rgba(205, 160, 126, 0.09) 100%); border-radius: 28px; border: 2.5px solid var(--accent); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18), 0 2px 16px rgba(217, 184, 156, 0.08); padding: 38px; margin: 0 auto 32px; max-width: 820px; position: relative; z-index: 10 } .hero-main-visual { flex: 0 0 140px; display: flex; align-items: center; justify-content: center } .hero-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 6px 24px rgba(217, 184, 156, 0.18); background: #fff } .hero-main-text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px } .hero-main-text h1 { font-size: 2.3rem; font-weight: 900; line-height: 1.13; margin: 0 0 8px; color: #fff } .hero-highlight { color: var(--accent); font-size: 2.1rem; font-weight: 900; display: block } .hero-sub { font-size: 1.15rem; font-weight: 700; color: var(--muted); margin-top: 2px } .hero-lead { font-size: 1.08rem; color: var(--muted); margin: 0 0 10px; font-weight: 500; line-height: 1.5 } .hero-main-ctas { display: flex; gap: 16px; margin-top: 10px } .hero-main-ctas .btn-primary { padding: 13px 22px; font-size: 16px; border-radius: 14px } .hero-main-ctas .btn-secondary { padding: 12px 18px; border-radius: 14px } @media (max-width:900px) { .hero-main-block { margin-top: 60px !important; flex-direction: column; gap: 18px; padding: 28px 12px 22px 12px; max-width: 98vw; height: 1px !important; } .hero-avatar { width: 90px; height: 90px } .hero-main-text h1, .hero-highlight { font-size: 1.5rem } } @media (max-width:600px) { .hero-main-block { padding: 18px 4vw 14px; height: 1px !important; } .hero-main-text h1, .hero-highlight { font-size: 1.1rem } .hero-avatar { width: 64px; height: 64px } .hero-main-ctas { flex-direction: column; gap: 8px } } /*=============================================== 07. Banners e Cards ===============================================*/ .banners-wrapper { position: relative; margin-top: 18px; width: 100% } .banners-wrapper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--banner-height); background: linear-gradient(180deg, rgba(var(--brown-100), 0.62), rgba(var(--brown-100), 0.38)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30); backdrop-filter: blur(4px); z-index: 1; pointer-events: none } .banners { position: relative; z-index: 3; max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 28px; padding: 60px 12px; align-items: center } .card { position: relative; border-radius: var(--radius); overflow: visible; background: transparent; transform-style: preserve-3d } .card-image { position: relative; height: var(--card-height); border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48); overflow: hidden; transition: transform .36s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow .36s, filter .36s } .card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; z-index: 1 } .card:hover .card-image { transform: translateY(-8px) scale(1.02); box-shadow: 0 44px 110px rgba(0, 0, 0, 0.6); filter: brightness(1.02) } .card.center .card-image { height: var(--card-height); border-radius: 12px; transform: none; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48) } /* Neutraliza o efeito fixo do card com .center */ .card.center .card-image { height: var(--card-height) !important; border-radius: 12px !important; transform: none !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48) !important; } /* Novo: efeito aplicado dinamicamente ao card central visível */ .card.is-center .card-image { height: var(--card-center-height); border-radius: 16px; transform: translateY(-18px); box-shadow: 0 46px 130px rgba(0, 0, 0, 0.62); transition: transform .28s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow .28s ease, height .28s ease; } .card.is-center .card-caption h3 { font-size: 20px; } .card.is-center .card-caption p { font-size: 14px; } .banners .card-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 10%, rgba(0, 0, 0, 0.08) 100%); z-index: 2 } .card-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); border-radius: 0 0 12px 12px; z-index: 3; pointer-events: none } .card-caption { position: absolute; left: 50%; bottom: 18px; width: 88%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #fff; font-weight: 700; z-index: 4 } .card-caption.compact h3 { font-size: 16px; margin-bottom: 4px } .card-caption.compact p { font-size: 13px; margin: 0; opacity: 0.95 } .card-caption.center-caption h3 { font-size: 20px; margin-bottom: 6px } .card-caption.center-caption p { font-size: 14px; margin: 0; opacity: 0.97 } /*=============================================== 08. Seção Sobre ===============================================*/ .about { padding: 70px 0 60px; background: transparent; color: rgba(255, 255, 255, 0.95); position: relative; z-index: 2 } .about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: center } .about-image-portrait { width: 340px; height: 440px; border-radius: 18px; background-size: cover; background-position: center 25%; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); border: 6px solid rgba(255, 255, 255, 0.03) } .about-text-v2 h2 { font-size: 30px; margin-bottom: 10px } .about-text-v2 h2 span { color: var(--accent) } .about-text-v2 .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 } .bio-block h4 { font-size: 14px; margin-bottom: 6px; color: var(--accent) } .bio-block p { margin: 0; color: var(--muted); font-size: 14px } .highlights { list-style: none; margin: 16px 0 8px; padding: 0 } .highlights li { font-weight: 600; margin-bottom: 10px; color: rgba(255, 255, 255, 0.95) } /*=============================================== 09. Footer ===============================================*/ .site-footer { padding: 42px 0 22px } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 28px; align-items: start } .footer-brand { display: flex; flex-direction: column; gap: 12px } .footer-brand h3 { margin: 0 } .footer-brand .muted { margin: 0 } .socials-row { display: flex; gap: 10px; margin-top: 4px } .social-btn { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease } .social-btn:hover { background: linear-gradient(135deg, rgba(217, 184, 156, 0.18), rgba(205, 160, 126, 0.10)); border-color: rgba(255, 255, 255, 0.12); transform: translateY(-2px); color: var(--accent) } .footer-list { list-style: none; padding: 0; margin: 0 } .footer-list li { margin-bottom: 8px; color: var(--muted) } .footer-newsletter h4 { margin-bottom: 6px } .newsletter-form { display: flex; gap: 8px; margin-top: 10px } .newsletter-form input[type="email"] { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.04); color: #fff; outline: none } .newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.55) } .newsletter-form .btn-primary { padding: 10px 14px } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.03) } .back-to-top { color: var(--muted); font-weight: 700 } .back-to-top:hover { color: var(--accent) } /* Toast */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px); background: rgba(0, 0, 0, 0.9); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1); z-index: 1400; font-weight: 600 } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto } /*=============================================== 10. WhatsApp Float Button ===============================================*/ .whatsapp-btn { position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: linear-gradient(90deg, #25d366, #1da851); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(29, 168, 81, 0.18); transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms; z-index: 1400 } .whatsapp-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(29, 168, 81, 0.22) } .whatsapp-btn .wa-text { font-size: 14px; line-height: 1 } /*=============================================== 11. Reveal Animation ===============================================*/ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s cubic-bezier(0.2, 0.9, 0.3, 1) } .reveal.in-view { opacity: 1; transform: none } /*=============================================== 12. Shop Hero (cards de produto) ===============================================*/ .shop-hero { margin-top: 32px; position: relative; z-index: 50; max-width: var(--max-width); padding: 38px 0 32px; border-radius: 22px; background: linear-gradient(135deg, rgba(217, 184, 156, 0.10), rgba(205, 160, 126, 0.04)); border: 2.5px solid var(--accent); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18), 0 2px 16px rgba(217, 184, 156, 0.08) } .shop-hero-content { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 1px; width: 100% } .shop-hero-text { flex: 1 1 440px; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 0 18px } .shop-hero-text h2 { font-size: 30px; margin-bottom: 10px; color: var(--accent); font-weight: 800; letter-spacing: 0.5px } .shop-hero-text .lead { margin-bottom: 10px; font-size: 16px; color: var(--muted) } .shop-quicklist { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-weight: 600; align-items: center } .shop-quicklist li strong { color: var(--accent); margin-right: 6px } .shop-hero-ctas { display: flex; gap: 14px; margin-top: 18px; align-items: center; justify-content: center } .shop-hero-card { flex: 0 0 300px; /* fixa largura base menor */ width: 300px; /* garante largura no flex layout */ max-width: 300px; background: rgba(40, 32, 24, 0.86); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.30); border: 1.5px solid var(--accent); margin-right: 40px; /* evita margem duplicada */ align-self: center; padding: 12px; /* opcional: reduz espaço interno */ } .shop-badge { align-self: flex-start; margin: 14px 18px 0 18px; padding: 7px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #181415; font-weight: 800; font-size: 13px } @media (max-width: 480px) { .shop-badge { font-size: 13px; font-weight: 800; margin: 1px 1px 0 1px; } } .shop-image { width: 100%; height: 180px; background-size: cover; background-position: center; border-radius: 8px; margin: 12px 18px 0 18px; box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.22) } .shop-card-body { padding: 18px 18px 14px 18px; display: flex; flex-direction: column; gap: 12px } .shop-card-body h3 { margin: 0; font-size: 19px; font-weight: 700 } .shop-prices { display: flex; gap: 10px; align-items: center; justify-content: center } .old-price { text-decoration: line-through; color: rgba(255, 255, 255, 0.45); font-weight: 700 } .new-price { color: var(--accent); font-weight: 900; font-size: 19px } .shop-card-actions { display: flex; gap: 10px; margin-top: 8px; justify-content: center } .shop-card-actions .btn-primary { flex: 1; padding: 12px 0; border-radius: 10px; font-size: 15px } .shop-card-actions .btn-secondary { flex: 1; padding: 12px 0; border-radius: 10px; font-size: 15px } @media (max-width: 768px) { .shop-hero-content { width: 100%; flex-direction: column; } } /*=============================================== 13. Quickview Modal (consolidado) ===============================================*/ .quickview-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: var(--qv-z); -webkit-font-smoothing: antialiased } .quickview-modal[aria-hidden="false"] { display: flex } .quickview-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.36); backdrop-filter: blur(3px) saturate(110%); z-index: calc(var(--qv-z) + 1) } .quickview-panel { position: relative; z-index: calc(var(--qv-z) + 2); width: min(820px, 94vw); max-height: 88vh; border-radius: var(--qv-radius); padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; overflow: visible; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45) } .qv-inner { width: 100%; max-width: 720px; margin: 18px; border-radius: calc(var(--qv-radius) - 2px); background: linear-gradient(180deg, rgba(var(--qv-brown-rgb), var(--qv-brown-alpha-top)), rgba(var(--qv-brown-rgb), var(--qv-brown-alpha))) !important; border: 1px solid rgba(0, 0, 0, 0.16); padding: 26px; color: var(--qv-text-light); display: flex; flex-direction: column; gap: 12px; overflow: auto; max-height: calc(88vh - 36px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) } .quickview-head { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 } .quickview-title { margin: 0; font-size: 1.22rem; font-weight: 800; color: var(--qv-title); letter-spacing: 0.2px; text-align: center; padding: 4px 8px } .quickview-close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.10); color: var(--qv-brown-rgb); display: inline-grid; place-items: center; cursor: pointer; font-weight: 700; transition: transform .12s ease, background .12s ease; z-index: calc(var(--qv-z) + 3) } .quickview-close:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16); outline: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) } .quickview-body { color: var(--qv-text-light); font-size: 1rem; line-height: 1.6; margin-top: 6px; text-align: center; max-width: 680px; margin-left: auto; margin-right: auto } .quickview-desc p { margin: 8px 0; white-space: pre-wrap; color: var(--qv-text-light); font-weight: 600 } .quickview-desc p:first-child { font-weight: 800; font-size: 1.06rem; color: var(--qv-title); margin-bottom: 6px } .quickview-desc ul { padding: 0; margin: 8px auto 0; list-style: none; display: inline-grid; gap: 8px; text-align: left; max-width: 440px } .quickview-desc li { position: relative; padding-left: 28px; color: var(--qv-text-light); font-weight: 700 } .quickview-desc li::before { content: "✓"; position: absolute; left: 0; top: 0; transform: translateY(2px); width: 22px; height: 22px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(180deg, #2ebf54, #0aa84b); border-radius: 6px; font-size: 12px; box-shadow: 0 6px 14px rgba(10, 168, 75, 0.12) } .quickview-divider { height: 1px; width: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.02)); margin: 10px 0 14px; border-radius: 2px } .quickview-actions { margin-top: 6px; display: flex; gap: 10px; justify-content: center; align-items: center; padding-bottom: 2px } .quickview-actions .btn-primary { padding: 10px 16px; border-radius: 10px; font-weight: 800; background: linear-gradient(90deg, #c9a063, #e7c77a); color: #0b0b0b; border: 0; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) } .quickview-actions .btn-secondary { background: transparent; border: 1px solid rgba(255, 255, 255, 0.10); color: var(--qv-text-light); padding: 8px 12px; border-radius: 10px; font-weight: 700 } .modal-open { overflow: hidden !important } /*=============================================== 14. Small Gallery Modal (center-gallery-modal) ===============================================*/ #center-gallery-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 210000; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial } #center-gallery-modal[aria-hidden="false"] { display: flex } .cg-overlay { position: absolute; inset: 0; background: rgba(6, 7, 9, 0.56); backdrop-filter: blur(3px); z-index: 1 } .cg-panel { position: relative; z-index: 2; width: min(900px, 94vw); max-height: calc(88vh - 24px); border-radius: 12px; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.02)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.56) } .cg-stage { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 260px; aspect-ratio: 16/9; max-height: calc(80vh - 120px) } .cg-stage img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .22s ease, transform .26s ease; user-select: none; -webkit-user-drag: none } .cg-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 0; display: inline-grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); z-index: 4 } .cg-prev { left: 8px } .cg-next { right: 8px } .cg-arrow:hover { transform: translateY(-50%) scale(1.05); background: rgba(255, 255, 255, 0.10) } .cg-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.06); color: #fff; display: inline-grid; place-items: center; cursor: pointer; z-index: 6 } .cg-caption { font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); text-align: center; min-height: 1.1em } .cg-dots { display: flex; gap: 8px; margin-top: 6px } .cg-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.18); padding: 0; cursor: pointer } .cg-dots button.active { background: rgba(255, 255, 255, 0.95) } /*=============================================== 15. Mobile banners carousel (forçar comportamento) ===============================================*/ .banners-nav { display: none } @media (max-width:768px) { .banners, .banners-wrapper .banners, #mobile-banners { display: flex !important; flex-direction: row; flex-wrap: nowrap !important; gap: 14px !important; padding: 14px 12px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important } .banners .card, #mobile-banners .card { flex: 0 0 86% !important; max-width: 86% !important; scroll-snap-align: center !important; box-sizing: border-box !important; margin: 0 !important } .banners .card .card-image, #mobile-banners .card .card-image { height: 260px !important } #mobile-banners::-webkit-scrollbar { display: none } .banners-nav { display: block !important; position: absolute !important; inset: auto 8px auto 8px !important; pointer-events: none; z-index: 999 !important } .banners-nav .b-nav { pointer-events: auto !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; display: inline-grid !important; place-items: center !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.36) !important; color: #fff !important; font-size: 20px !important; cursor: pointer !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important } .banners-nav .b-prev { left: 8px !important } .banners-nav .b-next { right: 8px !important } } @media (max-width:600px) { .banners .card, #mobile-banners .card { flex: 0 0 92% !important; max-width: 92% !important } .banners .card .card-image, #mobile-banners .card .card-image { height: 240px !important } } @media (max-width:400px) { .banners .card, #mobile-banners .card { flex: 0 0 94% !important; max-width: 94% !important } .banners .card .card-image, #mobile-banners .card .card-image { height: 220px !important } .banners-nav .b-prev { left: 6px !important } .banners-nav .b-next { right: 6px !important } } /*=============================================== 16. Responsividade genérica e fixes ===============================================*/ @media (max-width:1100px) { .about-grid { grid-template-columns: 320px 1fr } .hero-content { padding-right: clamp(110px, 20vw, 260px) } .bubble { width: clamp(320px, 34vw, 460px); height: clamp(320px, 34vw, 460px) } } @media (min-width:769px) and (max-width:900px) { .banners { grid-template-columns: 1fr; padding: 36px 14px; gap: 18px } .about-grid { grid-template-columns: 1fr; gap: 18px } .about-image-portrait { width: 100%; height: 320px; border-radius: 12px } .hero-content { flex-direction: column; gap: 18px; padding-top: 16px; padding-right: clamp(90px, 22vw, 220px) } .bubble { margin-right: -64px; width: 300px; height: 300px } .footer-inner { flex-direction: column; gap: 18px } } @media (max-width:768px) { :root { --card-height: 220px } .about-image-portrait { background-position: center 25% } } @media (max-width:600px) { .shop-hero-text h2 { font-size: 22px } .shop-hero-card { max-width: 98vw } .shop-image { height: 100px } .shop-card-body h3 { font-size: 16px } .shop-prices .new-price { font-size: 16px } } @media (max-width:480px) { h1 { font-size: 28px } .bubble { display: none } .whatsapp-btn { bottom: 12px; right: 12px; padding: 10px 12px } } @media (max-width:400px) { :root { --card-height: 180px } .about-image-portrait { background-position: center 55% } } /* Mobile: central card matches others */ @media (max-width:900px) { .banners .card.center .card-image { height: var(--card-height) !important; border-radius: 12px !important; transform: none !important } .banners .card.center .card-caption h3 { font-size: 16px } .banners .card.center .card-caption p { font-size: 13px } } @media (max-width:400px) { .banners .card.center .card-caption h3 { font-size: 12px } .banners .card.center .card-caption p { font-size: 10.5px } } /* Page transition overlay */ .page-transition { position: fixed; inset: 0; z-index: 2000; background: linear-gradient(135deg, rgba(217, 184, 156, 0.08), rgba(205, 160, 126, 0.06)), rgba(0, 0, 0, 0.60); backdrop-filter: blur(2px); transform: translateY(100%); opacity: 0; transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .28s ease; pointer-events: none } .page-transition.active, .page-transition.opening { transform: translateY(0); opacity: 1; pointer-events: auto } @media (prefers-reduced-motion:reduce) { .page-transition { transition: none !important } } /* RESET DE CORES DE LINKS (reintroduzido) */ /* Remove cor azul e underline padrão de todos os links */ a, a:link, a:visited { color: inherit; /* herda a cor do elemento pai */ text-decoration: none; /* remove underline */ -webkit-tap-highlight-color: transparent; /* remove highlight em dispositivos touch */ } /* Hover / active (desktop e teclado) */ a:hover, a:active { color: var(--accent); text-decoration: none; transition: color .18s ease; } /* Foco acessível (visível ao navegar com teclado) */ a:focus { outline: 3px solid rgba(217, 184, 156, 0.18); outline-offset: 3px; border-radius: 6px; } /* Links específicos em navegação / footer / sociais — mantém contraste e peso */ .nav-links a, .footer-columns a, .socials a, .socials-row a { color: inherit; font-weight: 600; } .nav-links a:hover, .footer-columns a:hover, .socials a:hover, .socials-row a:hover { color: var(--accent); } /* Força visited se algum navegador aplicar cor diferente */ a:visited { color: inherit; } /* Mobile: se houver apenas 1 card, esconder as setas do carousel (JS também deve fazer) */ .banners-wrapper.has-one .banners-nav { display: none !important; } /* End of file */ /* PATCH: corrige sobreposição nos pontos <= 768px */ @media (max-width: 768px) { /* 1) reduz a "máscara" / vinheta que fica acima dos banners (evita cortar a parte de baixo) */ .banners-wrapper::before { height: calc(var(--card-height, 220px) + 64px) !important; /* menos agressivo que 520px */ } /* 2) remove o translate exagerado do card central (evita puxar o conteúdo pra cima) */ .card.center .card-image { transform: none !important; margin-bottom: 8px !important; /* garante espaçamento extra */ } /* 3) empurra a imagem da seção Sobre pra baixo (remove "mordida" nos banners) */ #sobre .about-image-portrait { margin-top: 22px !important; /* aumente para 28–36px se quiser mais espaço */ position: relative !important; z-index: 2 !important; /* mantém a ordem visual esperada */ } /* 4) reduz padding vertical dos banners para o layout mobile ficar mais harmonioso */ .banners { padding-top: 30px !important; padding-bottom: 20px !important; gap: 12px !important; } /* 5) garante que o card central use tamanho padrão do mobile (evita overflow visual) */ .banners .card.center .card-image, #mobile-banners .card .card-image { height: var(--card-height, 220px) !important; border-radius: 12px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48) !important; } } /* ===== FULL FORCE FIX PARA 400px/PEQUENO ===== */ @media (max-width: 420px) { /* força wrapper ocupar a viewport e centralizar via translate */ .banners-wrapper, .banners-wrapper .banners, .banners, #mobile-banners { position: relative !important; width: 100vw !important; max-width: none !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 6vw !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; justify-content: flex-start !important; align-items: center !important; z-index: 3 !important; } /* protege contra containers parent com padding/transform */ .container, .hero-content, .page-inner, main, .site-wrapper { padding-left: 6vw !important; padding-right: 6vw !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* cards: largura controlada e snap central */ .banners .card, #mobile-banners .card { flex: 0 0 86% !important; max-width: 86% !important; margin: 0 !important; scroll-snap-align: center !important; box-sizing: border-box !important; } /* garante altura e remove transforms que possam puxar pra cima/direita */ .banners .card .card-image, .banners .card.center .card-image, #mobile-banners .card .card-image { height: var(--card-height, 160px) !important; transform: none !important; margin: 0 0 6px 0 !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important; overflow: hidden !important; } /* legenda e caption dentro da área visível */ .card-caption { left: 50% !important; transform: translateX(-50%) !important; bottom: 10px !important; width: 92% !important; text-align: center !important; z-index: 4 !important; } /* pseudo-maskagem atrás dos cards */ .banners-wrapper::before { height: calc(var(--card-height, 160px) + 32px) !important; z-index: 1 !important; pointer-events: none !important; } /* removendo decorações que podem sobrepor o carrossel */ .bubble, .hero-visual, .hero-avatar { display: none !important; } /* ajustar botões nav do carrossel (se existirem) */ .banners-nav { display: block !important; z-index: 6 !important; pointer-events: auto !important; } .banners-nav .b-nav { width: 40px !important; height: 40px !important; top: 50% !important; transform: translateY(-50%) !important; } } /* === FINAL FIX: banners 400px (override de conflitos e desalinhamento) === */ @media (max-width: 400px) { /* Usa 220px para não perder área visual e padroniza referência */ :root { --card-height: 220px !important; } /* Faixa com padding simétrico + snap estável */ .banners, .banners-wrapper .banners, #mobile-banners { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; scroll-padding-left: 50% !important; scroll-padding-right: 50% !important; justify-content: flex-start !important; align-items: center !important; margin: 0 auto !important; max-width: 100% !important; } /* Cards mais largos (cheios) e centralizados no snap */ .banners .card, #mobile-banners .card { flex: 0 0 94% !important; max-width: 94% !important; margin: 0 !important; scroll-snap-align: center !important; box-sizing: border-box !important; } /* Altura consistente e sem translate que “puxa” o centro */ .banners .card .card-image, .banners .card.center .card-image, #mobile-banners .card .card-image { height: var(--card-height) !important; transform: none !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important; } /* Máscara superior acompanha a nova altura */ .banners-wrapper::before { height: calc(var(--card-height) + 28px) !important; z-index: 1 !important; pointer-events: none !important; } /* Legenda centralizada e dentro da área visível */ .card-caption { left: 50% !important; transform: translateX(-50%) !important; bottom: 10px !important; width: 92% !important; text-align: center !important; z-index: 4 !important; } } /* === /FINAL FIX === */ /* ===== OVERRIDE FINAL ≤420px: centraliza e remove deslocamento do wrapper ===== */ @media (max-width: 420px) { /* 1) Reset do wrapper (remove 100vw + translate) */ .banners-wrapper { width: 100% !important; max-width: 100% !important; left: auto !important; right: auto !important; transform: none !important; margin: 0 auto !important; } /* 2) Remove paddings forçados nos wrappers de página (evita empurrar faixa) */ .container, .hero-content, .page-inner, main, .site-wrapper { padding-left: 0 !important; padding-right: 0 !important; } /* 3) Faixa do carrossel: flex + snap central, sem padding assimétrico */ .banners, .banners-wrapper .banners, #mobile-banners { /* mantém flex e snap */ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; /* sem padding lateral de container; usa scroll-padding para centrar no snap */ padding-left: 0 !important; padding-right: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; scroll-padding-left: 50% !important; scroll-padding-right: 50% !important; justify-content: flex-start !important; align-items: center !important; margin: 0 auto !important; max-width: 100% !important; } /* 4) Cards “cheios” e centrados no snap */ .banners .card, #mobile-banners .card { flex: 0 0 94% !important; max-width: 94% !important; margin: 0 !important; scroll-snap-align: center !important; box-sizing: border-box !important; } } /* ===== /OVERRIDE FINAL ≤420px ===== */ /* PATCH RÁPIDO: corrige overflow, centraliza snap e posicionamento das setas em <=420px */ @media (max-width: 420px) { /* wrapper protege contra overflow vertical/horizontal */ .banners-wrapper { width: 100% !important; max-width: 100% !important; left: auto !important; transform: none !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; /* evita scroll indesejado do wrapper */ } /* o carrossel em si faz o scroll horizontal */ .banners, .banners-wrapper .banners, #mobile-banners { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; padding: 0 6vw !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; scroll-padding-left: 50% !important; scroll-padding-right: 50% !important; justify-content: flex-start !important; align-items: center !important; margin: 0 auto !important; } /* cards ocupam quase toda a largura (snap central) */ .banners .card, #mobile-banners .card { flex: 0 0 94% !important; max-width: 94% !important; margin: 0 !important; scroll-snap-align: center !important; box-sizing: border-box !important; min-width: 0 !important; } /* garante que a imagem interna não puxe o layout para fora */ .banners .card .card-image, .banners .card.center .card-image, #mobile-banners .card .card-image { height: var(--card-height, 220px) !important; transform: none !important; margin: 0 !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important; } /* legenda dentro da área visível */ .card-caption { left: 50% !important; transform: translateX(-50%) !important; bottom: 10px !important; width: 92% !important; text-align: center !important; } /* setas do nav do carrossel: visíveis e sobre o carrossel */ .banners-nav { display: block !important; z-index: 20 !important; pointer-events: auto !important; } .banners-nav .b-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; display: inline-grid !important; place-items: center !important; left: 8px !important; right: 8px !important; } .banners-nav .b-prev { left: 8px !important; right: auto !important; } .banners-nav .b-next { right: 8px !important; left: auto !important; } /* se houver algum elemento a 100vw que cause overflow, bloqueia scroll global */ html, body { overflow-x: hidden !important; } /* remove paddings laterais de containers pais que empurram o carrossel */ .container, .hero-content, .page-inner, main, .site-wrapper { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } } /* FIX: centralizar legenda do card sobre a imagem em telas pequenas */ @media (max-width: 420px) { /* garante que o card esteja centrado como bloco dentro do carrossel */ .banners .card, #mobile-banners .card { display: block !important; width: 94% !important; /* mesmo tamanho do snap */ max-width: 94% !important; margin: 0 auto !important; box-sizing: border-box !important; position: relative !important; /* referência para posição absoluta da legenda */ } /* imagem como bloco centralizado e com posição relativa */ .banners .card .card-image, #mobile-banners .card .card-image { width: 100% !important; margin: 0 auto !important; position: relative !important; /* a legenda ficará relativa a este elemento */ transform: none !important; overflow: hidden !important; } /* legenda centralizada exata em relação à card-image */ .banners .card .card-caption, #mobile-banners .card .card-caption { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 10px !important; width: calc(100% - 32px) !important; /* garante margem interna confortável */ max-width: 88% !important; padding: 0 12px !important; text-align: center !important; box-sizing: border-box !important; z-index: 6 !important; } /* se algum container pai tiver paddings que deslocam o carrossel, neutraliza */ .container, .hero-content, .page-inner, main, .site-wrapper { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } } /* AJUSTE: empurra a seção de banners pra baixo em telas pequenas (<=400px) */ @media (max-width: 400px) { .banners-wrapper { /* valor principal — ajusta quanto desce (troque 28px se quiser mais/menos) */ margin-top: calc(28px + env(safe-area-inset-top)) !important; /* garante que não “coma” o topo visualmente */ padding-top: 6px !important; /* mantém o stacking/contexto visual */ z-index: 2 !important; } /* se o hero estiver por cima por causa do ::before, reduz a máscara um pouco */ .banners-wrapper::before { height: calc(var(--card-height, 220px) + 18px) !important; } /* prevenção extra: se algum header fixo estiver empurrando, adiciona espaço */ .hero { padding-top: calc(88px + env(safe-area-inset-top)) !important; } } /* HIDE: removes banners de promoção / destaque no topo em telas muito pequenas */ @media (max-width: 400px) { /* seletores comuns — aplica display:none com !important para garantir override */ .hero-visual, .bubble, .hero-promo, .promo-banner, .top-promo, .banner-highlight, .promo-highlight, .promo, .banner--promo, .highlight-banner, .hero .promo, #promo, /* id comum */ #top-promo { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* caso o espaço esteja vindo da máscara (::before) ou do wrapper, ajusta também */ .banners-wrapper::before, .hero::before { display: none !important; height: 0 !important; } /* evita gaps deixados por containers pai */ .hero, .banners-wrapper, .hero-visual { padding-top: 0 !important; } } /* ==== FIX RÁPIDO: evita que o hero/grupo de texto fique colado na navbar fixa (mobile ≤420/400px) ==== */ /* Defina uma altura base do navbar (ajuste se o seu navbar for maior/menor) */ :root { --site-navbar-height: 56px; /* ajuste se necessário (ex: 64px) */ } /* garante que o navbar respeite área segura do topo (notch) */ .navbar { top: calc(env(safe-area-inset-top, 10px)); } /* para telas pequenas: empurra o hero para baixo com prioridade */ @media (max-width: 420px) { /* força padding-top do hero para ficar abaixo do navbar + folga */ .hero { padding-top: calc(var(--site-navbar-height) + 12px) !important; } /* garante que o conteúdo interno não esteja "colado" */ .hero-content { padding-top: 8px !important; /* reduzido: o principal é o padding do .hero */ } /* extra: adiciona margem extra no bloco principal de texto caso o hero tenha elementos absolutos */ .hero-main-block { margin-top: 60px !important; height: 1px !important; } } /* variante mais específica para 400px (se quiser maior folga) */ @media (max-width: 400px) { .hero { /* se ainda estiver muito perto, aumente o +12px para +18px ou +24px */ padding-top: calc(var(--site-navbar-height) + 18px) !important; } .hero-main-block { margin-top: 70px !important; height: 1px !important; } } /* === COMPACT HERO (mobile ≤420px) === */ :root { --site-navbar-height: 48px; /* ajustar para 44/40/56 conforme seu navbar real */ } @media (max-width: 420px) { /* empurra o hero só o suficiente para não ficar atrás da navbar */ .hero { padding-top: calc(var(--site-navbar-height) + 8px) !important; } /* reduz margem/padding do conteúdo principal para ficar mais "encaixado" */ .hero-content { padding-top: 6px !important; padding-left: 12px !important; padding-right: 12px !important; margin-left: 0 !important; } /* compacta o bloco principal (card) */ .hero-main-block { padding: 18px 18px !important; gap: 12px !important; max-width: 94vw !important; border-radius: 14px !important; } /* tipografia mais compacta */ .hero-main-text h1, .hero-highlight { font-size: 1.05rem !important; /* título menor */ line-height: 1.06 !important; } .hero-sub { font-size: 0.95rem !important; font-weight: 700 !important; } .hero-lead { font-size: 0.92rem !important; line-height: 1.45 !important; margin-bottom: 8px !important; } /* CTA menor e mais enxuto */ .hero-main-ctas { gap: 10px !important; margin-top: 6px !important; } .hero-main-ctas .btn-primary { padding: 9px 12px !important; font-size: 14px !important; border-radius: 12px !important; } /* garante que a bolha/visual não atrapalhe (se já estiver oculto, ok) */ .hero-visual, .bubble { display: none !important; } /* evita que o avatar (se existir) ocupe muito espaço */ .hero-avatar { display: none !important; } /* pequenos ajustes de espaçamento geral */ .banners-wrapper { margin-top: 18px !important; } } /* === CAROUSEL GLOBAL (desktop + mobile) === */ /* Força o #mobile-banners a ser carrossel horizontal também no desktop */ #mobile-banners { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 18px !important; padding: 14px 12px !important; overflow-x: auto !important; /* scroll funcional */ -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; } /* Cards no desktop (~3 por tela). Mobile segue regras dos @media existentes */ #mobile-banners .card { flex: 0 0 32% !important; max-width: 32% !important; scroll-snap-align: center !important; box-sizing: border-box !important; } /* Esconde a barra de scroll (somente setas visíveis) */ #mobile-banners { -ms-overflow-style: none !important; /* IE/Edge legado */ scrollbar-width: none !important; /* Firefox */ } #mobile-banners::-webkit-scrollbar { /* Chrome/Safari/Edge */ display: none !important; height: 0 !important; } /* === SETAS CENTRADAS SOBRE OS BANNERS (sempre visíveis) === */ .banners-wrapper { position: relative !important; } /* ancora as setas */ .banners-wrapper .banners-nav { display: block !important; position: absolute !important; inset: 0 !important; /* cobre toda a área dos banners */ pointer-events: none !important; /* eventos só nos botões */ z-index: 1000 !important; /* acima das imagens e overlays */ } /* Botões: centralizados verticalmente, encostados nas laterais */ .banners-wrapper .banners-nav .b-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; display: inline-grid !important; place-items: center !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.42) !important; color: #fff !important; font-size: 20px !important; cursor: pointer !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important; pointer-events: auto !important; /* clique habilitado */ } /* Lados (esquerda/direita) */ .banners-wrapper .banners-nav .b-prev { left: 8px !important; right: auto !important; } .banners-wrapper .banners-nav .b-next { right: 8px !important; left: auto !important; } /* Tweak: em telas muito pequenas, usa botões um pouco menores */ @media (max-width: 420px) { .banners-wrapper .banners-nav .b-nav { width: 40px !important; height: 40px !important; } } /* Selo CTA “Saiba mais” nos banners (pill com gradiente) */ .card .card-image { position: relative; /* ancora o selo */ } .card .card-cta { position: absolute; top: 10px; right: 10px; z-index: 1100; /* acima da imagem, abaixo/igual às setas */ display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; color: #181415; /* contraste no gradiente */ background: linear-gradient(90deg, var(--accent), var(--accent-2)); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 0, 0, 0.06) inset; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); pointer-events: none; /* não bloqueia o clique no card */ transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .card .card-cta::before { content: "↗"; font-weight: 900; font-size: 12px; color: #181415; opacity: .9; } .card:hover .card-cta { transform: translateY(-2px) scale(1.02); filter: brightness(1.06) saturate(1.05); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.06) inset; } /* Mobile: menor e com respiro das bordas */ @media (max-width: 420px) { .card .card-cta { width: 60%; top: 8px; right: 8px; font-size: 10px; padding: 6px 10px; letter-spacing: .25px; } .card .card-cta::before { font-size: 11px; } } /* === Destaque dinâmico sem tremor (mantém altura fixa) === */ /* Override do antigo is-center: só pintura/transform, sem mudar layout */ .card.is-center .card-image { height: var(--card-height) !important; /* altura fixa, sem reflow */ border-radius: 12px !important; transform: translateY(-10px) scale(1.04) !important; /* efeito suave */ box-shadow: 0 36px 110px rgba(0, 0, 0, 0.60) !important; z-index: 5 !important; will-change: transform; transition: transform .22s cubic-bezier(.2, .9, .3, 1), box-shadow .22s ease !important; } /* Evita “disputa” com hover: mantém o mesmo efeito quando central + hover */ .card.is-center:hover .card-image { transform: translateY(-10px) scale(1.04) !important; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.62) !important; } /* Mobile/Tablet: se quiser todos iguais, pode manter; caso contrário, com o transform não há tremor */ @media (max-width: 900px) { .banners .card.is-center .card-image { transform: translateY(-6px) scale(1.02) !important; /* mais sutil no mobile */ box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5) !important; } } /* Nav das setas sem fundo/borda no container */ .banners-wrapper .banners-nav { background: transparent !important; border: 0 !important; } /* Setas: sem borda nativa, sem aparência do navegador e com fundo sutil */ .banners-wrapper .banners-nav .b-nav { border: 0 !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; /* visual mais leve (não sobrepõe a imagem) */ background: rgba(0, 0, 0, 0.28) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; user-select: none !important; } /* Remove a borda interna padrão do Firefox */ .banners-wrapper .banners-nav .b-nav::-moz-focus-inner { border: 0 !important; } /* Hover/focus discretos (sem “aura” forte) */ .banners-wrapper .banners-nav .b-nav:hover, .banners-wrapper .banners-nav .b-nav:focus-visible { background: rgba(0, 0, 0, 0.45) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important; } /* Estado ativo com leve feedback */ .banners-wrapper .banners-nav .b-nav:active { transform: translateY(-50%) scale(0.98) !important; } /* Acessibilidade: foco visível, porém sutil (sem contorno agressivo) */ /* Espaço extra entre os banners e a seção Sobre */ #sobre { margin-top: clamp(56px, 8vw, 120px) !important; } /* Tablets e menores: folga extra */ @media (max-width: 768px) { #sobre { margin-top: clamp(60px, 10vw, 140px) !important; } .about-text-v2 { max-width: 100%; margin: 0 auto !important; text-align: center !important; } } /* Telefones pequenos: folga máxima */ @media (max-width: 400px) { #sobre { margin-top: clamp(48px, 12vw, 160px) !important; } } /* Reduz o tamanho da foto do Sobre (mais compacto e centralizado) */ #sobre .about-image-portrait { width: min(78%, 660px) !important; max-width: 660px !important; aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 260px !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 900px) { #sobre .about-image-portrait { width: min(30%, 400px) !important; max-width: 580px !important; min-height: 220px !important; background-position: center 13% !important; } .about-text-v2 { max-width: 100%; margin: 0 auto !important; text-align: center !important; } } @media (max-width: 768px) { #sobre .about-image-portrait { width: min(40%, 580px) !important; max-width: 580px !important; min-height: 220px !important; background-position: center 13% !important; } } @media (max-width: 600px) { #sobre .about-image-portrait { width: 40% !important; min-height: 200px !important; background-position: center 13% !important; } .about-text-v2 { max-width: 100%; margin: 0 auto !important; text-align: center !important; } } @media (max-width: 400px) { #sobre .about-image-portrait { width: 60% !important; min-height: 180px !important; background-position: center 13% !important; } } /* FIX: legendas sempre visíveis acima das imagens (inclui quando .is-center) */ .card .card-caption { z-index: 60 !important; /* acima do z-index da .card-image (até 5) */ pointer-events: none; /* não bloqueia o clique no card */ } /* Legibilidade melhor em fundos claros */ .card .card-caption h3, .card .card-caption p { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); } /* Em telas pequenas, mantém a prioridade */ @media (max-width: 420px) { .card .card-caption { z-index: 60 !important; } } /* center-gallery dots e estilos básicos do modal */ #center-gallery-modal { align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 10000; display: none; } #center-gallery-modal[aria-hidden="false"] { display: flex; } .cg-panel { max-width: 920px; width: 96vw; margin: 20px; } .cg-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; } .cg-stage img { max-width: calc(100% - 120px); max-height: 70vh; transition: opacity .18s ease; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); } .cg-arrow { background: none; border: none; font-size: 28px; cursor: pointer; padding: 8px 12px; } .cg-dots { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; } .cg-dot { width: 44px; height: 44px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.08); background-color: #f5f5f5; background-size: cover; background-position: center; cursor: pointer; opacity: .7; } .cg-dot.active { outline: 2px solid #c9a063; opacity: 1; transform: translateY(-2px); } /* Faixa marrom horizontal atrás do #sobre (mais clara, cobrindo também o título) */ #sobre::before { content: ""; position: absolute; left: 50%; top: 10px; /* descola levemente da borda superior da seção */ transform: translateX(-50%); /* só no eixo X */ width: 100vw; /* cobre a largura da tela */ height: 520px; /* altura da faixa (não altera a seção) */ background: linear-gradient(180deg, rgba(var(--brown-100), 0) 0%, rgba(var(--brown-100), 0.10) 18%, rgba(var(--brown-100), 0.28) 46%, rgba(var(--brown-100), 0.24) 100%); box-shadow: none; /* remove borda/halo que “briga” com os banners */ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); /* máscara extra (opcional) para fade suave em browsers modernos */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); pointer-events: none; z-index: -1; /* fica atrás do conteúdo do #sobre */ } /* Responsivo: mantém alturas já definidas (apenas reusa overrides) */ @media (max-width: 900px) { #sobre::before { height: 480px; } } @media (max-width: 768px) { #sobre::before { height: 420px; } } @media (max-width: 600px) { #sobre::before { height: 360px; } } @media (max-width: 400px) { #sobre::before { height: 300px; } } /* Garante ancoragem e stacking isolado do pseudo-elemento */ #sobre { position: relative; /* ancora o ::before */ isolation: isolate; /* evita interferência com banners */ z-index: 0; } /* Mobile 400px: faixa ocupa a altura total da seção e layout empilhado */ @media (max-width: 400px) { #sobre::before { top: 0; /* alinha no topo da seção */ height: 100%; /* cobre de cima a baixo */ width: 100vw; /* mantém de ponta a ponta */ transform: translateX(-50%); /* centraliza no eixo X */ /* gradiente mais uniforme e claro no mobile */ background: linear-gradient(180deg, rgba(var(--brown-100), 0.18) 0%, rgba(var(--brown-100), 0.26) 35%, rgba(var(--brown-100), 0.26) 65%, rgba(var(--brown-100), 0.18) 100%); /* remove a máscara para preencher toda a altura no mobile */ -webkit-mask-image: none; mask-image: none; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } /* Sobre empilhado de cima para baixo */ .about-grid { grid-template-columns: 1fr; gap: 14px; align-items: start; } .about-text-v2 { text-align: center; margin: 0 auto; max-width: 100%; } } /* =========================== PATCH RÁPIDO: Corrige hero colapsado e evita esconder carrossel Cole no FINAL do seu arquivo CSS =========================== */ /* 1) Garante que hero-main-block mantenha altura natural em todos os breakpoints */ .hero-main-block { height: auto !important; min-height: 120px; /* ajuste conforme necessidade */ } /* 2) Corrige ocorrências em media queries onde height:1px foi aplicado */ @media (max-width: 900px) { .hero-main-block { height: auto !important; min-height: 140px !important; margin-top: 60px !important; padding-bottom: 18px !important; } } @media (max-width: 420px) { .hero-main-block { height: auto !important; min-height: 120px !important; margin-top: 58px !important; padding: 16px !important; } } /* 3) Evita ocultar scroll horizontal globalmente (remover overflow-x:hidden em html/body) */ /* Se você tem overflow-x:hidden no CSS, prefira comentar/ajustar; forço aqui um comportamento seguro: */ html, body { overflow-x: visible !important; } /* 4) Protege o carrossel - garante que o #mobile-banners pode rolar */ /* Mantém overflow hidden apenas no wrapper que causa problemas (se existir), senão não toca no global */ .banners-wrapper { overflow: visible !important; } /* 5) Tornar safe-area + navbar consistente (defina uma única vez) */ :root { --site-navbar-height: 56px; /* ajuste para o real */ } /* mobile: padding-top do hero abaixo do navbar */ @media (max-width: 420px) { .hero { padding-top: calc(var(--site-navbar-height) + 12px) !important; } .hero-content { padding-top: 8px !important; } } /* 6) reduzir sombras / backdrop-filter em telas pequenas para performance */ @media (max-width: 600px) { .bubbles, .bubble, .hero-visual, .banners-wrapper::before { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* FINAL OVERRIDE — Faixa marrom visível e mais forte no mobile */ /* ≤600px: mais opaca, sem blur e com altura suficiente para a faixa dos cards */ @media (max-width: 600px) { .banners-wrapper::before { display: block !important; /* reativa se algum bloco ocultou */ top: 0 !important; height: calc(var(--card-height, 240px) + 56px) !important; background: linear-gradient(180deg, rgba(var(--brown-100), 0.82) 0%, rgba(var(--brown-100), 0.58) 100%) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 1 !important; /* atrás dos cards, à frente do fundo */ pointer-events: none !important; } } /* ≤400px: ainda mais marcada e um pouco mais baixa (acompanha cards menores) */ @media (max-width: 400px) { .banners-wrapper::before { display: block !important; /* override do bloco que escondia */ height: calc(var(--card-height, 220px) + 36px) !important; background: linear-gradient(180deg, rgba(var(--brown-100), 0.90) 0%, rgba(var(--brown-100), 0.62) 100%) !important; } } /* esconde navbar em páginas que têm .no-navbar */ .no-navbar .navbar { display: none !important; visibility: hidden; height: 0; overflow: hidden; } /* evita que o conteúdo fique colado no topo caso o header antes dava espaçamento */ .no-navbar main, .no-navbar .container { padding-top: 24px; /* ajuste conforme seu layout */ }