/* ============================================================ ARQUIVO GERADO — NÃO EDITAR À MÃO Gerado por scripts/build-css.sh a partir da ordem declarada em css/styles.css. Qualquer edição aqui é perdida na próxima execução; edite o arquivo de origem correspondente. ============================================================ */ /* ---------- css/base.css ---------- */ /* ============================================================ FONTE — Plus Jakarta Sans, hospedada no nosso domínio Blocos copiados VERBATIM da resposta do Google Fonts (css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800), com as URLs trocadas por caminhos locais. Copiar em vez de reescrever é deliberado: garante que a renderização não mude. Só latin e latin-ext. Os subsets cyrillic-ext e vietnamese foram descartados — o `unicode-range` já impedia o navegador de baixá-los, então não há ganho de bytes, só dois arquivos a menos para versionar. NÃO REMOVER os `unicode-range`: sem eles o navegador baixa os dois arquivos em vez de escolher um. Por que local e não do Google: a cadeia era CSS de terceiro → woff2 de OUTRO terceiro, dois saltos de DNS+TLS encadeados antes de o texto pintar. Agora é um arquivo do nosso domínio, pré-carregado no . ============================================================ */ /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { --bg-primary: #faf7f2; --bg-secondary: #f0ebe3; --bg-dark: #1e1e1e; --bg-card: #ffffff; --bg-form: rgba(30, 30, 30, 0.94); --text-primary: #1e1e1e; --text-secondary: #5c5c5c; --text-on-dark: #faf7f2; --text-muted: #8a8a8a; --accent-primary: #d4a853; --accent-hover: #c49743; --accent-soft: rgba(212, 168, 83, 0.12); --accent-moss: #4a6741; --accent-moss-soft: rgba(74, 103, 65, 0.1); --whatsapp: #25d366; --whatsapp-hover: #1da851; --border-light: #e5e0d8; --border-dark: rgba(255, 255, 255, 0.08); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; line-height: 1.7; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; } /* ============================================================ UTILITIES ============================================================ */ .container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; } .section-padding { padding: 4rem 0; } .section-padding-small { padding: 4rem 0; padding-top: 2rem; } .overline { display: inline-block; font-size: clamp(1rem, 3vw, 2rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-primary); } .section-title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; } /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ---------- css/buttons.css ---------- */ /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; line-height: 1; padding: 0.875rem 1.75rem; border-radius: var(--radius-full); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; cursor: pointer; } .btn:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; } .btn:active { transform: scale(0.98); } .btn--primary { background-color: var(--accent-primary); color: var(--text-primary); border: 2px solid var(--accent-primary); } .btn--primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } .btn--outline { background-color: transparent; color: var(--accent-primary); border: 2px solid var(--accent-primary); } .btn--outline:hover { background-color: var(--accent-primary); color: var(--text-primary); } /* ---------- css/whatsapp.css ---------- */ /* ============================================================ WHATSAPP — botão flutuante ============================================================ */ .whatsapp-fab { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 100; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background-color: var(--whatsapp); box-shadow: var(--shadow-md); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .whatsapp-fab:hover { background-color: var(--whatsapp-hover); box-shadow: var(--shadow-lg); } .whatsapp-fab:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 3px; } .whatsapp-fab:active { transform: scale(0.98); } .whatsapp-fab svg { width: 28px; height: 28px; } @media (min-width: 1024px) { .whatsapp-fab { right: 1.5rem; bottom: 1.5rem; width: 60px; height: 60px; } .whatsapp-fab svg { width: 30px; height: 30px; } } /* ---------- css/hero.css ---------- */ /* ============================================================ HERO SECTION ============================================================ */ .hero { position: relative; background-color: var(--bg-dark); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; } /* Visibilidade por breakpoint */ .hero--mobile { display: block; height: 80vh; background-color: var(--bg-secondary); } .hero--mobile .container { padding-top: 2rem; background-color: var(--bg-dark); } .hero--desktop { display: none; } .hero__inner { position: relative; z-index: 1; } /* ── Logo ── */ .hero__logo { display: inline-block; } .hero__logo img { height: auto; width: clamp(140px, 40vw, 200px); } /* Mobile: logo menor, funciona como assinatura e libera a dobra */ .hero--mobile .hero__logo img { width: 110px; } /* ── Hero mobile: conteúdo à esquerda, device sobreposto à direita ── */ .hero--mobile .hero__inner { padding: 2.5rem 0 3rem; } .hero--mobile .hero__content { max-width: 60%; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: start; gap: 1rem; } .hero--mobile .hero__device { position: absolute; right: 0; top: 10%; transform: translateX(35%); z-index: 0; pointer-events: none; } .hero--mobile .hero__device img { display: block; height: 70vh; width: auto; } /* ── Col brand/device/text (desktop) ── */ .hero__col-brand { display: flex; flex-direction: column; align-items: start; gap: 3rem; } .hero__col-device { display: flex; } .hero__col-device img { display: block; width: 100%; height: auto; } .hero__headline { font-size: clamp(1.5rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; color: var(--text-on-dark); margin-bottom: 1rem; max-width: 16ch; } .hero__headline2 { font-size: clamp(1.2rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; color: var(--text-on-dark); margin-bottom: 1.25rem; max-width: 16ch; } .hero__subheadline { font-size: clamp(0.9rem, 2.5vw, 1.1875rem); font-weight: 400; line-height: 1.65; color: rgba(250, 247, 242, 0.75); margin-bottom: 2rem; max-width: 52ch; } .hero__cta { margin-top: 3rem; margin-left: 1rem; } .hero__list { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; margin: 0; } .hero__list li { display: flex; align-items: center; gap: 0.625rem; color: var(--text-on-dark); font-size: 1rem; font-weight: 500; line-height: 1.4; } .hero__list li svg { flex-shrink: 0; width: 1.6rem; height: 1.6rem; padding: 2px; background-color: var(--accent-primary); border-radius: 12px; stroke-width: 2.5; } /* ---------- css/proff.css ---------- */ /* ============================================================ PROFF ============================================================ */ .proff { background-color: var(--bg-secondary); padding-bottom: 4rem; } .proff .container { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .proff__ctas { display: flex; flex-direction: row; gap: 1rem; justify-content: center; margin-bottom: 0; } .proff__proof { display: flex; flex-direction: row; width: 100%; background: transparent; border: none; padding: 0; margin-bottom: 0; gap: 0; } .proff__stat { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 1.25rem 0.5rem; text-align: center; border-right: 1px solid rgba(30, 30, 30, 0.12); } .proff__stat:last-of-type { border-right: none; } .proff__stat-number { font-size: clamp(1.25rem, 5.5vw, 2rem); font-weight: 800; color: var(--accent-primary); white-space: nowrap; } .proff__stat-label { font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); line-height: 1.3; } .proff__iconbar { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } .proff__iconbar-item { display: flex; align-items: center; flex: 1; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--bg-card); border: 1px solid rgba(30, 30, 30, 0.08); border-radius: var(--radius-md); font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .proff__iconbar-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--accent-soft); border-radius: var(--radius-sm); flex-shrink: 0; color: var(--accent-primary); } .proff__iconbar-icon svg { width: 18px; height: 18px; } /* ---------- css/how.css ---------- */ /* ============================================================ COMO FUNCIONA ============================================================ */ .how { background-color: var(--bg-primary); } .how__header { text-align: center; margin-bottom: 3rem; } .how__overline { margin-bottom: 0.75rem; } .how__steps { position: relative; display: flex; flex-direction: column; gap: 0; } .how__step { display: grid; grid-template-columns: auto 1fr; gap: 0; padding-bottom: 2.5rem; position: relative; } .how__step:last-child { padding-bottom: 0; } /* Vertical connector line on mobile */ .how__step-left { display: flex; flex-direction: column; align-items: center; gap: 0; } .how__step-num-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--accent-soft); border: 2px solid var(--accent-primary); border-radius: 50%; flex-shrink: 0; z-index: 1; } .how__step-num-label { font-size: 0.8125rem; font-weight: 800; color: var(--accent-primary); letter-spacing: 0.04em; } .how__step-line { width: 2px; flex: 1; background: linear-gradient(to bottom, var(--accent-primary), transparent); opacity: 0.3; margin-top: 4px; } .how__step-content { padding-top: 0.625rem; } .how__step-img { max-height: 40vh; width: 100%; margin-top: 1rem; margin-bottom: 0.5rem; object-fit: contain; } .how__step-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-left: 1rem; margin-bottom: 0.5rem; padding-right: 1rem; line-height: 1.3; } .how__step-text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.375rem; } .how__step-text li { position: relative; padding-left: 1.125rem; } .how__step-text li::before { content: "—"; position: absolute; left: 0; color: var(--accent-primary); font-weight: 700; } /* ---------- css/compat.css ---------- */ /* ============================================================ COMPATIBILIDADE ============================================================ */ .compat { background-color: var(--bg-secondary); } .compat__header { text-align: center; margin-bottom: 2.5rem; } .compat__overline { margin-bottom: 0.75rem; } .compat__title { max-width: 42ch; margin: 0 auto; } /* Mobile: carrossel horizontal com snap — card central em evidência, vizinhos aparecem parcialmente nas bordas */ .compat__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.25rem; margin-bottom: 2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .compat__grid::-webkit-scrollbar { display: none; } .compat__card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex: 0 0 42%; scroll-snap-align: center; padding-top: 2rem; padding-bottom: 3rem; gap: 1rem; transform: scale(0.8); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } /* Margens para o primeiro/último card conseguirem centralizar no snap */ .compat__card:first-child { margin-left: 26%; } .compat__card:last-child { margin-right: 26%; } .compat__card--center { transform: scale(1); opacity: 1; } .compat__device { width: 100%; max-height: 28vh; object-fit: contain; object-position: center; } .compat__brand { width: 80%; max-height: 4vh; object-fit: contain; object-position: center; } .compat__card--soon { opacity: 0.45; } .compat__card--soon.compat__card--center { opacity: 0.7; } .compat__soon-badge { position: absolute; width: 90%; text-align: center; top: 20%; background: var(--accent-primary); color: var(--bg-dark); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.2rem 0.45rem; border-radius: var(--radius-sm, 4px); line-height: 1; } .compat__cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* ---------- css/features.css ---------- */ /* ============================================================ FUNCIONALIDADES ============================================================ */ .features { background-color: var(--bg-primary); } .features__header { text-align: center; margin-bottom: 2.5rem; } .features__overline { margin-bottom: 0.75rem; } .features__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .feature-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.25s ease, transform 0.25s ease; } .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .feature-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .feature-card__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--accent-moss-soft); border-radius: 50%; flex-shrink: 0; color: var(--accent-moss); } .feature-card__icon svg { width: 22px; height: 22px; } .feature-card__badge { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--accent-soft); color: var(--accent-primary); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; } .feature-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 0.5rem; } .feature-card__text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; } /* ---------- css/gallery.css ---------- */ /* ============================================================ GALERIA DE ESTABELECIMENTOS ============================================================ */ .gallery { background-color: var(--bg-secondary); padding-top: 4rem; padding-bottom: 3rem; } .gallery__overline { margin-bottom: 0.5rem; } .gallery__title { margin-bottom: 0; text-align: center; } .gallery__subtitle { font-size: clamp(1rem, 3vw, 2rem); font-weight: 800; text-align: center; color: var(--accent-primary); margin: 0; } /* ── Carrossel ── */ .gallery__carousel { position: relative; overflow: hidden; margin-top: 2.5rem; } .gallery__track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .gallery__slide { width: 100%; position: relative; flex-shrink: 0; } .gallery__slide img { width: 100%; height: auto; } .gallery__label { position: absolute; bottom: 1rem; left: 1rem; background: rgba(30, 30, 30, 0.65); color: var(--text-on-dark); font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 1rem; border-radius: var(--radius-full); backdrop-filter: blur(6px); } /* ── Botões prev/next ── */ .gallery__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(250, 247, 242, 0.92); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: var(--shadow-md); transition: background 0.2s ease, transform 0.2s ease; z-index: 2; } .gallery__btn:hover { background: var(--bg-card); transform: translateY(-50%) scale(1.08); } .gallery__btn svg { width: 1.125rem; height: 1.125rem; } .gallery__btn--prev { left: 0.75rem; } .gallery__btn--next { right: 0.75rem; } /* ── Dots ── */ .gallery__dots { display: flex; justify-content: center; gap: 0.5rem; padding-top: 1.25rem; } .gallery__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-light); border: none; cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.25s ease; } .gallery__dot--active { background: var(--accent-primary); transform: scale(1.4); } /* ---------- css/testimonials.css ---------- */ /* ============================================================ DEPOIMENTOS ============================================================ */ .testimonials { background-color: var(--bg-dark); position: relative; overflow: hidden; } .testimonials::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 70% 60% at 50% 100%, rgba(212, 168, 83, 0.05) 0%, transparent 70% ); pointer-events: none; } .testimonials__header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 1; } .testimonials__overline { margin-bottom: 0.75rem; } .testimonials__title { color: var(--text-on-dark); } .testimonials__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } /* Card em formato de conversa (estilo WhatsApp) */ .chat-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } /* Barra superior da conversa */ .chat-card__header { display: flex; align-items: center; gap: 0.75rem; background: #075e54; padding: 0.75rem 1rem; } .chat-card__avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); color: #ffffff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; } .chat-card__name { font-size: 0.9375rem; font-weight: 600; color: #ffffff; line-height: 1.3; } .chat-card__place { font-size: 0.78125rem; color: rgba(255, 255, 255, 0.75); margin-top: 0.1rem; } /* Corpo da conversa */ .chat-card__bubbles { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; flex: 1; background: #efe7dd; padding: 1rem 1rem 1.25rem 1.25rem; } .chat-card__bubble { position: relative; background: #ffffff; color: #303030; max-width: 90%; font-size: 0.9375rem; line-height: 1.55; padding: 0.55rem 0.8rem; border-radius: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13); } /* Rabinho no primeiro balão do grupo */ .chat-card__bubble:first-child { border-top-left-radius: 0; } .chat-card__bubble:first-child::before { content: ""; position: absolute; top: 0; left: -8px; border-style: solid; border-width: 0 8px 10px 0; border-color: transparent #ffffff transparent transparent; } /* Curtidas — corações que sobem sobre a conversa */ .chat-card__likes { position: absolute; bottom: 0.5rem; right: 1.25rem; width: 60px; height: 100%; pointer-events: none; } .chat-card__heart { position: absolute; bottom: 0; left: 50%; font-size: var(--size, 1.25rem); color: #ff3b5c; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); opacity: 0; animation: chat-heart-float 2.2s ease-out forwards; } @keyframes chat-heart-float { 0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; } 10% { opacity: 0.95; } 40% { transform: translate(calc(-50% + var(--sway, 10px)), -56px) scale(1.05); } 70% { transform: translate(calc(-50% - var(--sway, 10px)), -98px) scale(1.15); opacity: 0.85; } 100% { transform: translate(-50%, -140px) scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .chat-card__heart { animation: none; opacity: 0; } } .testimonials__cta { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 2.5rem; } /* ---------- css/trust.css ---------- */ /* ============================================================ CONFIANÇA ============================================================ */ .trust { background-color: var(--bg-primary); } .trust__header { text-align: center; margin-bottom: 2.5rem; } .trust__overline { margin-bottom: 0.75rem; } .trust__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .trust-block { padding: 1.5rem 1.5rem 1.5rem 1.75rem; border-left: 3px solid var(--accent-primary); background: var(--bg-card); border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-sm); } .trust-block__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--accent-moss-soft); border-radius: var(--radius-sm); color: var(--accent-moss); margin-bottom: 0.875rem; } .trust-block__icon svg { width: 20px; height: 20px; } .trust-block__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.375rem; } .trust-block__text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; } /* ---------- css/faq.css ---------- */ /* ============================================================ FAQ ============================================================ */ .faq { background-color: var(--bg-primary); } .faq__header { text-align: center; margin-bottom: 2.5rem; } .faq__overline { margin-bottom: 0.75rem; } .faq__list { margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--border-light); } .faq__item:first-child { border-top: 1px solid var(--border-light); } details.faq__item summary { list-style: none; cursor: pointer; padding: 1.25rem 1rem 1.25rem 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; user-select: none; transition: color 0.2s ease; } details.faq__item summary::-webkit-details-marker { display: none; } details.faq__item summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 2px; } details.faq__item summary:hover { color: var(--accent-primary); } details.faq__item summary::after { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; transition: transform 0.25s ease; } details.faq__item[open] > summary::after { transform: rotate(180deg); } details.faq__item[open] > summary { color: var(--accent-primary); } .faq__answer { padding: 0 1rem 1.25rem 0; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; } /* ---------- css/cta.css ---------- */ /* ============================================================ CTA FINAL + FORMULÁRIO ============================================================ */ .cta-section { background-color: var(--bg-dark); position: relative; overflow: hidden; } .cta-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 50% at 20% 30%, rgba(74, 103, 65, 0.08) 0%, transparent 70% ), radial-gradient( ellipse 50% 40% at 80% 70%, rgba(212, 168, 83, 0.06) 0%, transparent 70% ); pointer-events: none; } .cta-section__inner { position: relative; z-index: 1; margin: 0 auto; text-align: center; } .cta-section__overline { margin-bottom: 0.875rem; } .cta-section__headline { font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; line-height: 1.2; color: var(--text-on-dark); margin-bottom: 2rem; } .cta-section__subtitle { font-size: clamp(1rem, 2.5vw, 1.0625rem); color: rgba(250, 247, 242, 0.7); line-height: 1.6; margin-bottom: 2.5rem; } /* Form */ .contact-form { max-width: 600px; margin: auto; background: var(--bg-form); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: left; } .form-group { margin-bottom: 1.125rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-on-dark); margin-bottom: 0.4rem; opacity: 0.9; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-dark); border-radius: var(--radius-sm); padding: 0.875rem 1rem; color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.28); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-right: 2.5rem; cursor: pointer; } .form-group select option { background: var(--bg-dark); color: var(--text-on-dark); } .form-group textarea { min-height: 100px; resize: vertical; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15); } .form-group input.error, .form-group select.error { border-color: #e05757; } .form-group .error-msg { display: block; font-size: 0.8rem; color: #e05757; margin-top: 0.3rem; } .form-api-error { font-size: 0.875rem; color: #e05757; margin-bottom: 1rem; text-align: center; } .form-submit-wrap { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .form-submit-wrap .btn { width: 100%; } .form-microcopy { font-size: 0.8125rem; color: var(--text-muted); text-align: center; } /* Form success */ .form-success { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; text-align: center; } .form-success.visible { display: flex; } .form-success__icon { width: 56px; height: 56px; background: var(--accent-moss-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-moss); } .form-success__icon svg { width: 28px; height: 28px; } .form-success__title { font-size: 1.25rem; font-weight: 700; color: var(--text-on-dark); } .form-success__text { font-size: 0.9375rem; color: rgba(250, 247, 242, 0.7); line-height: 1.6; } .rd-column, .rd-form, #rd-row-mnpwkiob .bricks--column > div { background: var(--bg-form) !important; border: none; } #pdv-mobile-revenda-c53521096dff5389e0f2 { background: var(--bg-form) !important; border: solid !important; border-color: var(--bg-form) !important; border-width: 1px; } #rd-form-mnpwkiod .with-select-flags > .phone-input-group > .phone-country { display: none !important; } #rd-form-mnpwkiod .with-select-flags > .phone-input-group > .phone { width: 100% !important; } ::placeholder { color: black; opacity: 1; /* Ensures full visibility in Firefox */ } /* ---------- css/footer.css ---------- */ /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--bg-dark); border-top: 1px solid var(--border-dark); padding: 2rem 0; } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .footer__logo img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: 0.6; margin: 0 auto; } .footer__links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; } .footer__links a { font-size: 0.8125rem; color: var(--text-muted); transition: color 0.2s ease; } .footer__links a:hover { color: var(--accent-primary); } .footer__links a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 2px; } .footer__sep { color: var(--text-muted); opacity: 0.4; } .footer__info { display: flex; flex-direction: column; gap: 0.25rem; } .footer__info p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; } .footer__info a { color: var(--text-muted); text-decoration: underline; transition: color 0.2s ease; } .footer__info a:hover { color: var(--accent-primary); } .footer__copy { font-size: 0.8125rem; color: var(--text-muted); opacity: 0.6; } /* ---------- css/cookie-consent.css ---------- */ /* ============================================================ BANNER DE COOKIES — override do widget do RD Station O banner é injetado pelo loader do RD e é a biblioteca Osano Cookie Consent. Classes públicas e estáveis (`cc-window`, `cc-message`, `cc-compliance`, `cc-btn`), DOM comum — sem shadow root nem iframe —, então dá para reestilizar daqui. No desktop a posição é resolvida no painel do RD (flutuante à esquerda). Este arquivo trata SÓ do mobile, onde o widget ignora essa configuração e volta para o rodapé em largura cheia, com 260px de altura numa tela de 844 — cobrindo o CTA e o botão de WhatsApp, que é a faixa que a landing existe para proteger. ── Três decisões que valem explicação ──────────────────── 1. O seletor é a raiz genérica `.cc-window`, nunca a variante. A biblioteca alterna entre cc-banner/cc-floating e cc-top/cc-bottom conforme a configuração do painel. Preso à variante, o override quebraria na próxima troca de config. 2. `!important` é necessário, não é desleixo. As regras da biblioteca são compostas (`.cc-window.cc-floating`) e o `