/* ============================================================================= Cadu Vendas — site da marca (caduvendas.com.br) Identidade: a mesma dos prints da Play (assets/store-assets/playstore-frames.html) — papel manteiga, verde-musgo, ocre e dourado; Fraunces nos títulos, DM Sans no texto. Os celulares são mockups em HTML/CSS no tema escuro do app. ========================================================================== */ /* ── Fontes ───────────────────────────────────────────────────────────────── Hospedadas aqui (mesmos arquivos que o Google Fonts servia, recorte latino, variáveis no peso). Sem ir a outro domínio, o texto aparece bem mais cedo no celular. Licença: SIL OFL 1.1 — assets/fonts/OFL-*.txt. As páginas fazem preload dos dois arquivos no . */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-wght-normal.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; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans-latin-wght-normal.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; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* papel */ --paper-50: #fdfaf2; --paper-100: #faf6ec; --paper-200: #f0e9d8; --paper-300: #e8ddc3; --paper-400: #d8cbaa; /* tinta */ --ink-900: #3d2817; --ink-700: #5c402a; --ink-500: #7a5c42; /* um tom abaixo do #8A6B4F do app, pra passar no contraste AA */ /* verde da marca */ --brand-950: #16301f; --brand-900: #1f4029; --brand-800: #24503a; --brand-700: #2d5a3d; --brand-500: #3f6b4e; --brand-100: #deebe2; --brand-active: #2b7f47; --mint: #a6e3b7; --mint-soft: #dcebdf; /* ocre e dourado */ --ocre-700: #c77423; --ocre-500: #d4823a; --ocre-100: #fbefd9; --ocre-text: #9a5512; /* ocre legível em texto pequeno */ --gold: #e8c547; /* tema escuro do app (mockups e seções escuras) */ --d-bg: #0c0d0e; --d-raised: #17191b; --d-sunken: #101214; --d-border: #26292d; --d-border-strong: #3a3e44; --d-text: #f2f3f1; --d-text2: #b9beba; --d-muted: #929893; /* o #878D88 do app, um pouco mais claro: passa no AA sobre os cards tingidos */ --d-primary: #2ea35d; --d-on-brand: #0b2415; --d-money: #4fc57e; --d-accent: #fb923c; --d-warning: #fbbf24; --d-danger: #e5484d; --d-danger-text: #eb5b5f; /* vermelho como texto (contraste AA) */ --d-danger-strong: #d4383d; /* vermelho atrás de texto branco (contraste AA) */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wrap: 1180px; --gutter: 20px; --header-h: 68px; --pad-y: clamp(64px, 8vw, 112px); --radius: 20px; --radius-l: 28px; --shadow-card: 0 1px 2px rgba(61, 40, 23, 0.06), 0 10px 30px rgba(61, 40, 23, 0.08); --shadow-float: 0 18px 50px rgba(20, 30, 22, 0.28); color-scheme: light; } /* ── Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; background: var(--paper-100); color: var(--ink-900); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--brand-active); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--brand-700); } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.1; text-wrap: balance; } p { margin: 0; } p + p { margin-top: 1em; } b, strong { font-weight: 700; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--gold); color: var(--ink-900); } .i { flex: none; fill: none; stroke: currentColor; } .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; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--gold); color: var(--ink-900); font-weight: 700; text-decoration: none; transition: top 0.15s; } .skip-link:focus { top: 12px; } .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 379px) { :root { --gutter: 16px; } } /* ── Tipografia de seção ────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 16px; border-radius: 999px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; background: var(--brand-100); color: var(--brand-900); } .eyebrow img { width: 24px; height: 24px; border-radius: 7px; } .h1 { font-size: clamp(2.45rem, 1.55rem + 3.9vw, 4.6rem); font-weight: 900; line-height: 1.03; letter-spacing: -0.028em; } .h2 { font-size: clamp(2.05rem, 1.4rem + 2.7vw, 3.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; } .h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .lead { margin-top: 20px; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); font-weight: 500; line-height: 1.45; color: var(--ink-700); max-width: 34em; } .hl { color: var(--brand-700); } .muted { color: var(--ink-700); } .center { text-align: center; } .center .lead { margin-inline: auto; } .sec-head { max-width: 780px; margin: 0 auto 48px; text-align: center; } .sec-head .lead { margin-inline: auto; } /* ── Seções e fundos (os mesmos dos prints da Play) ─────────────────────── */ .sec { position: relative; padding-block: var(--pad-y); overflow: hidden; } .sec > .wrap { position: relative; z-index: 2; } /* Seções fora da tela só são desenhadas quando chegam perto: o navegador pula estilo, layout e pintura delas no carregamento — alivia bastante o celular (a home tem 8 mockups). O texto continua no HTML pra busca e leitor de tela. */ @supports (content-visibility: auto) { .sec { content-visibility: auto; contain-intrinsic-size: auto 820px; } } @media (max-width: 859px) { .sec { contain-intrinsic-size: auto 1150px; } } .bg-paper { background: var(--paper-100); } .bg-paper-2 { background: var(--paper-200); } .bg-green { background: linear-gradient(168deg, #2d5a3d 0%, #24503a 55%, #1f4029 100%); color: var(--paper-50); } .bg-ocre { background: linear-gradient(170deg, #fbefd9 0%, #f4d4a0 100%); } .bg-dark { background: linear-gradient(170deg, #101213 0%, #0c0d0e 60%, #060607 100%); color: var(--d-text); } .bg-green .lead { color: var(--mint-soft); } .bg-green .eyebrow { background: rgba(255, 255, 255, 0.12); color: var(--mint); border: 1px solid rgba(255, 255, 255, 0.18); } .bg-green .hl { color: var(--gold); } .bg-green a:not(.btn):not(.btn-play) { color: var(--mint); } .bg-ocre .eyebrow { background: rgba(255, 255, 255, 0.75); color: var(--ocre-text); } .bg-ocre .hl { color: var(--brand-700); } .bg-dark .lead { color: var(--d-text2); } .bg-dark .eyebrow { background: #10331e; color: var(--d-money); border: 1px solid #1d4a2e; } .bg-dark .hl { color: var(--d-money); } .bg-dark a:not(.btn):not(.btn-play) { color: var(--d-money); } /* bolhas e brilhos decorativos */ .blob { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; } .spark { position: absolute; z-index: 3; pointer-events: none; } /* ── Botões ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--brand-700); color: var(--paper-50); box-shadow: 0 8px 20px rgba(45, 90, 61, 0.25); } .btn--primary:hover { background: var(--brand-900); color: var(--paper-50); } .btn--ghost { background: transparent; color: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand-700); } .btn--ghost:hover { background: rgba(45, 90, 61, 0.08); color: var(--brand-900); } .bg-green .btn--ghost { color: var(--paper-50); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); } .bg-green .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); } .bg-dark .btn--ghost { color: var(--d-text); box-shadow: inset 0 0 0 1.5px var(--d-border-strong); } .bg-dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.06); } /* botão da Google Play: 2 linhas, como um selo de loja */ .btn-play { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 26px 10px 12px; border-radius: 999px; background: var(--brand-700); color: var(--paper-50); text-decoration: none; box-shadow: 0 10px 24px rgba(31, 64, 41, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .btn-play:hover { transform: translateY(-2px); background: var(--brand-900); color: var(--paper-50); box-shadow: 0 14px 30px rgba(31, 64, 41, 0.34); } .btn-play__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--ink-900); } .btn-play__ic .i { width: 18px; height: 18px; margin-left: 2px; } .btn-play__txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .btn-play__txt small { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; } .btn-play__txt b { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; } .bg-green .btn-play, .bg-dark .btn-play, .site-footer .btn-play { background: var(--paper-100); color: var(--brand-900); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); } .bg-green .btn-play:hover, .bg-dark .btn-play:hover, .site-footer .btn-play:hover { background: #fff; color: var(--brand-900); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 32px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; text-decoration: none; } .link-arrow .i { width: 18px; height: 18px; transition: transform 0.15s ease; } .link-arrow:hover .i { transform: translateX(3px); } /* ── Cabeçalho ──────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(31, 64, 41, 0.95); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); color: var(--paper-50); border-bottom: 1px solid rgba(255, 255, 255, 0.07); transition: box-shadow 0.2s ease; } .site-header.is-scrolled { box-shadow: 0 8px 24px rgba(10, 20, 13, 0.25); } .site-header__in { display: flex; align-items: center; gap: 16px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper-50); font-family: var(--font-display); font-size: 1.32rem; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .brand:hover { color: #fff; } .brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav a { padding: 8px 12px; border-radius: 999px; color: var(--mint-soft); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .nav a:hover, .nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.09); color: #fff; } .nav .btn { margin-left: 8px; min-height: 42px; padding: 9px 18px; background: var(--paper-100); color: var(--brand-900); } .nav .btn:hover { background: #fff; color: var(--brand-900); } .nav-toggle { display: none; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--paper-50); cursor: pointer; } .nav-toggle .i { width: 24px; height: 24px; } .nav-toggle .i-close { display: none; } .nav-toggle[aria-expanded="true"] .i-open { display: none; } .nav-toggle[aria-expanded="true"] .i-close { display: block; } @media (max-width: 919px) { .nav-toggle { display: grid; } .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 12px var(--gutter) 24px; background: var(--brand-900); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(10, 20, 13, 0.35); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; } .nav a { padding: 13px 14px; font-size: 1.05rem; } .nav .btn { margin: 10px 0 0; min-height: 50px; } } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 88px); } .hero > .wrap { position: relative; z-index: 2; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 32px; align-items: center; } .hero__text .lead { color: var(--mint-soft); } .hero__lead-strong { display: block; margin-bottom: 10px; color: var(--paper-50); font-size: 1.12em; font-weight: 600; } .trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 0.98rem; font-weight: 600; color: #f0f5f0; } .trust li { display: inline-flex; align-items: center; gap: 10px; } .check-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--mint); flex: none; } .check-dot .i { width: 15px; height: 15px; } /* o celular aparece inteiro: a altura sai da escala dele (--hero-s) */ .hero__media { --hero-s: 0.72; position: relative; height: calc(866px * var(--hero-s) + 24px); } .hero__phones { position: absolute; inset: 0; } .hero__phones .device--back { --s: 0.6; position: absolute; left: 2%; top: 72px; transform: rotate(-7deg); transform-origin: bottom right; } .hero__phones .device--front { --s: var(--hero-s); position: absolute; right: 4%; top: 0; } .hero__cadu { position: absolute; left: 18%; bottom: 0; z-index: 6; width: clamp(120px, 12vw, 170px); transform: rotate(-8deg); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)); } /* entre o tablet e o desktop não cabem os dois celulares lado a lado */ @media (min-width: 860px) and (max-width: 1099px) { .hero__media { --hero-s: 0.66; } .hero__phones .device--back { display: none; } .hero__phones .device--front { left: 50%; right: auto; margin-left: calc(-205px * var(--s)); } .hero__cadu { left: 0; } } @media (max-width: 859px) { .hero__grid { grid-template-columns: 1fr; gap: 0; text-align: center; } .hero__text { padding-bottom: 36px; } .hero__text .lead { margin-inline: auto; } .hero .cta-row, .hero .trust { justify-content: center; } .hero__media { --hero-s: 0.6; max-width: 440px; width: 100%; margin-inline: auto; } .hero__phones .device--back { display: none; } .hero__phones .device--front { left: 50%; right: auto; margin-left: calc(-205px * var(--s)); } .hero__cadu { left: 0; width: 124px; } } @media (max-width: 379px) { .hero__media { --hero-s: 0.54; } .hero__cadu { width: 104px; } } /* ── Faixa de benefícios ────────────────────────────────────────────────── */ .benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .benefit { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: var(--radius); background: var(--paper-50); box-shadow: var(--shadow-card); color: var(--ink-900); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } a.benefit:hover { transform: translateY(-3px); color: var(--ink-900); box-shadow: 0 1px 2px rgba(61, 40, 23, 0.06), 0 16px 40px rgba(61, 40, 23, 0.12); } .benefit > div { display: flex; flex-direction: column; gap: 4px; } .benefit b { font-size: 1.08rem; line-height: 1.3; } .benefit > div > span { color: var(--ink-700); font-size: 0.97rem; line-height: 1.5; } .ic-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-100); color: var(--brand-700); flex: none; } .ic-tile .i { width: 24px; height: 24px; } .ic-tile--ocre { background: var(--ocre-100); color: var(--ocre-text); } .ic-tile--gold { background: #fbf1c9; color: #7a5d05; } @media (max-width: 979px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 519px) { .benefits { grid-template-columns: 1fr; } .benefit { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; } } /* ── Seção dividida: texto + celular (as telas dos prints) ──────────────── */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .split--rev .split__text { order: 2; } /* o celular aparece inteiro, centralizado ao lado do texto */ .split__media { position: relative; display: flex; align-items: center; justify-content: center; } .split__media .device { --s: 0.68; } .split__media .blob { width: 500px; height: 500px; left: 50%; top: 50%; margin: -250px 0 0 -250px; } .checks { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; } .checks li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; } .checks .check-dot { margin-top: -1px; background: var(--brand-100); color: var(--brand-700); } .checks b { color: inherit; } .bg-green .checks .check-dot { background: rgba(255, 255, 255, 0.14); color: var(--mint); } .bg-dark .checks .check-dot { background: #10331e; color: var(--d-money); } .bg-ocre .checks .check-dot { background: rgba(255, 255, 255, 0.7); color: var(--brand-700); } .bg-green .checks li { color: #eef4ef; } .bg-dark .checks li { color: var(--d-text2); } .bg-dark .checks b { color: var(--d-text); } .tag-premium { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--ink-900); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; } @media (max-width: 859px) { .split { grid-template-columns: 1fr; gap: 40px; } .split--rev .split__text { order: 0; } .split__media .device { --s: 0.62; } .split__media .blob { width: 400px; height: 400px; margin: -200px 0 0 -200px; } } @media (max-width: 379px) { .split__media .device { --s: 0.56; } } /* ── Pra quem é ─────────────────────────────────────────────────────────── */ .segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .segment { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; border-radius: var(--radius); background: var(--paper-50); box-shadow: var(--shadow-card); } .segment h3 { font-size: 1.28rem; } .segment p { margin: 0; } .segment .kinds { color: var(--ink-900); font-weight: 600; line-height: 1.4; } .segment p:last-child { color: var(--ink-700); font-size: 0.97rem; } .segments-note { margin: 28px auto 0; max-width: 44em; text-align: center; color: var(--ink-700); } @media (max-width: 979px) { .segments { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 519px) { .segments { grid-template-columns: 1fr; } } /* ── Grade de recursos extras ───────────────────────────────────────────── */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .feature { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius); background: var(--paper-50); box-shadow: var(--shadow-card); } .feature h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; } .feature p { margin-top: 4px; color: var(--ink-700); font-size: 0.97rem; line-height: 1.5; } @media (max-width: 979px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .features { grid-template-columns: 1fr; } } /* ── Privacidade (seção escura) ─────────────────────────────────────────── */ .privacy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .privacy-item { padding: 24px 22px; border-radius: var(--radius); background: var(--d-raised); border: 1px solid var(--d-border); } .privacy-item .ic-tile { background: #10331e; color: var(--d-money); } .privacy-item h3 { margin-top: 16px; font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; letter-spacing: 0; color: var(--d-text); } .privacy-item p { margin-top: 6px; color: var(--d-text2); font-size: 0.97rem; line-height: 1.55; } @media (max-width: 979px) { .privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 519px) { .privacy-grid { grid-template-columns: 1fr; } } /* ── Passos (como começar) ──────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: passo; } .step { position: relative; padding: 28px 24px 26px; border-radius: var(--radius); background: var(--paper-50); box-shadow: var(--shadow-card); counter-increment: passo; } .step::before { content: counter(passo); display: block; margin-bottom: 14px; font-family: var(--font-display); font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--brand-700); } .step h3 { font-size: 1.3rem; } .step p { margin-top: 8px; color: var(--ink-700); } @media (max-width: 859px) { .steps { grid-template-columns: 1fr; } .step { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 22px; } .step::before { grid-row: span 2; margin: 0; font-size: 2.6rem; } } /* ── Planos ─────────────────────────────────────────────────────────────── */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: var(--radius-l); background: var(--paper-50); box-shadow: var(--shadow-card); } .plan__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.015em; } .plan__desc { margin-top: 6px; color: var(--ink-700); font-size: 0.97rem; } .plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 22px; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; } .plan__price .amount { font-size: 2.6rem; line-height: 1; } .plan__price .per { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ink-700); } .plan__alt { margin-top: 8px; color: var(--ink-700); font-size: 0.95rem; } .plan__list { display: grid; gap: 11px; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--paper-300); list-style: none; font-size: 0.97rem; line-height: 1.45; } .plan__list li { display: flex; gap: 10px; } .plan__list .i { width: 18px; height: 18px; margin-top: 2px; color: var(--brand-active); } .plan__cta { padding-top: 26px; margin-top: auto; } .plan__cta .btn { width: 100%; } .plan--premium { background: linear-gradient(168deg, #2d5a3d 0%, #24503a 55%, #1f4029 100%); color: var(--paper-50); box-shadow: var(--shadow-float); } .plan--premium .plan__desc, .plan--premium .plan__alt, .plan--premium .plan__price .per { color: var(--mint-soft); } .plan--premium .plan__list { border-top-color: rgba(255, 255, 255, 0.16); } .plan--premium .plan__list .i { color: var(--gold); } .plan--premium .btn--primary { background: var(--gold); color: var(--ink-900); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); } .plan--premium .btn--primary:hover { background: #f2d563; color: var(--ink-900); } .plan__badge { position: absolute; top: -13px; right: 22px; padding: 5px 12px; border-radius: 999px; background: var(--gold); color: var(--ink-900); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); } .plans-note { max-width: 50em; margin: 28px auto 0; color: var(--ink-700); font-size: 0.93rem; text-align: center; } @media (max-width: 979px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .plan--premium { order: -1; } } /* ── Perguntas frequentes ───────────────────────────────────────────────── */ .faq { max-width: 860px; margin-inline: auto; } .faq details { border-radius: 18px; background: var(--paper-50); box-shadow: var(--shadow-card); } .faq details + details { margin-top: 12px; } .faq summary { position: relative; display: block; padding: 20px 60px 20px 24px; font-size: 1.08rem; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 16px; height: 2.5px; margin-top: -1px; border-radius: 2px; background: var(--brand-700); transition: transform 0.2s ease; } .faq summary::after { transform: rotate(90deg); } .faq details[open] summary::after { transform: rotate(0deg); } .faq summary:hover { color: var(--brand-700); } .faq__a { padding: 0 24px 22px; color: var(--ink-700); } .faq__a a { font-weight: 600; } /* ── CTA final ──────────────────────────────────────────────────────────── */ .cta-final { text-align: center; } .cta-final .h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.8rem); } .cta-final .lead { margin-inline: auto; } .cta-final .cta-row { justify-content: center; } .cta-final__cadu { width: clamp(170px, 20vw, 250px); margin: 36px auto -20px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.25)); } /* ── Rodapé ─────────────────────────────────────────────────────────────── */ .site-footer { background: var(--brand-950); color: var(--mint-soft); padding: 64px 0 28px; font-size: 0.97rem; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; } .site-footer .brand { font-size: 1.45rem; } .site-footer__tag { margin-top: 12px; color: var(--mint); font-weight: 600; } .site-footer__about { margin-top: 10px; max-width: 24em; color: #b7cdbd; } .site-footer .btn-play { margin-top: 22px; } .site-footer h2 { margin-bottom: 14px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-50); } .site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .site-footer a:not(.btn-play):not(.brand) { color: var(--mint-soft); text-decoration: none; } .site-footer a:not(.btn-play):not(.brand):hover { color: #fff; text-decoration: underline; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #9fb8a6; font-size: 0.87rem; } .site-footer__bottom p { margin: 0; } @media (max-width: 859px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 459px) { .site-footer__grid { grid-template-columns: 1fr; } } /* ── Páginas de recurso ─────────────────────────────────────────────────── */ .breadcrumb { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.9rem; font-weight: 600; } .breadcrumb li + li::before { content: "›"; margin-right: 6px; opacity: 0.6; } .breadcrumb a { text-decoration: none; } .breadcrumb [aria-current] { opacity: 0.8; } .bg-paper .breadcrumb, .bg-ocre .breadcrumb { color: var(--ink-700); } .bg-green .breadcrumb { color: var(--mint-soft); } .bg-dark .breadcrumb { color: var(--d-text2); } .page-hero { padding-top: clamp(36px, 5vw, 64px); } .h1--page { font-size: clamp(2.2rem, 1.45rem + 3vw, 3.9rem); } .page-hero .cta-row { margin-top: 28px; } .table-wrap--wide table { min-width: 620px; } .prose { max-width: 760px; margin-inline: auto; } .prose h2 { margin-top: 56px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 900; letter-spacing: -0.02em; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 30px; font-size: 1.25rem; } .prose p, .prose ul, .prose ol { margin-top: 14px; color: var(--ink-700); } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: 8px; } .prose strong { color: var(--ink-900); } /* trilha e links dentro de .prose não herdam o recuo/espaço das listas do texto */ .prose .breadcrumb { margin: 0 0 22px; padding: 0; } .prose .breadcrumb li + li { margin-top: 0; } .bg-green .prose .breadcrumb { color: var(--mint-soft); } .callout { margin-top: 24px; padding: 20px 22px; border-radius: 18px; background: var(--paper-50); box-shadow: var(--shadow-card); border-left: 4px solid var(--brand-700); } .callout--ocre { border-left-color: var(--ocre-700); } .callout p { margin: 0; color: var(--ink-700); } .callout p + p { margin-top: 8px; } .formula { padding: 2px 8px; border-radius: 8px; background: var(--paper-200); color: var(--ink-900); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .table-wrap { margin-top: 18px; overflow-x: auto; border-radius: 16px; background: var(--paper-50); box-shadow: var(--shadow-card); } .table-wrap table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.97rem; } .table-wrap th, .table-wrap td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-300); } .table-wrap th { background: var(--paper-200); color: var(--ink-900); font-weight: 700; } .table-wrap tr:last-child td { border-bottom: 0; } .table-wrap td { color: var(--ink-700); } .related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .related a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: var(--radius); background: var(--paper-50); box-shadow: var(--shadow-card); color: var(--ink-900); text-decoration: none; transition: transform 0.15s ease; } .related a:hover { transform: translateY(-3px); color: var(--ink-900); } .related b { font-size: 1.02rem; line-height: 1.35; } .related a > span:last-child { color: var(--ink-700); font-size: 0.93rem; line-height: 1.45; } @media (max-width: 979px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 459px) { .related { grid-template-columns: 1fr; } } /* cartão flutuante do Pix (ilustração, página /pix/) */ .pix-card { position: absolute; z-index: 7; right: -4px; bottom: 70px; width: 196px; padding: 16px; border-radius: 22px; background: var(--paper-50); color: var(--ink-900); box-shadow: var(--shadow-float); text-align: center; } .pix-card__label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); } .pix-card__label .i { width: 16px; height: 16px; } .pix-card__qr { width: 118px; height: 118px; margin: 12px auto 10px; color: var(--ink-900); } .pix-card__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; } .pix-card__hint { margin-top: 2px; font-size: 0.8rem; color: var(--ink-700); } @media (max-width: 859px) { .pix-card { right: 50%; margin-right: -200px; bottom: 40px; width: 170px; } .pix-card__qr { width: 100px; height: 100px; } } @media (max-width: 459px) { .pix-card { right: 8px; margin-right: 0; } } /* ── Calculadora de preço (/precificacao/) ──────────────────────────────── */ .calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--paper-50); box-shadow: var(--shadow-float); } .calc__form { padding: 30px 30px 32px; } .calc__form fieldset { margin: 22px 0 0; padding: 0; border: 0; } .calc__form legend { margin-bottom: 10px; padding: 0; font-weight: 700; } .field { display: block; } .field + .field { margin-top: 16px; } .field__label { display: block; margin-bottom: 7px; font-weight: 700; line-height: 1.35; } .field__hint { display: block; margin-top: 6px; color: var(--ink-700); font-size: 0.9rem; } .field__box { display: flex; align-items: center; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--paper-300); transition: box-shadow 0.15s ease; } .field__box:focus-within { box-shadow: inset 0 0 0 2px var(--brand-700); } .field__affix { padding: 0 0 0 14px; color: var(--ink-700); font-weight: 700; } .field__affix--end { padding: 0 14px 0 0; } .field input { width: 100%; min-width: 0; height: 52px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-900); font: inherit; font-size: 1.1rem; font-weight: 700; outline: none; } .modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .modes label { position: relative; cursor: pointer; } .modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .modes span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--paper-300); background: #fff; font-weight: 700; line-height: 1.25; transition: box-shadow 0.15s ease, background-color 0.15s ease; } .modes small { color: var(--ink-700); font-size: 0.8rem; font-weight: 500; } .modes input:checked + span { background: var(--brand-100); box-shadow: inset 0 0 0 2px var(--brand-700); } .modes input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; } .calc__result { display: flex; flex-direction: column; padding: 30px; background: linear-gradient(170deg, #101213 0%, #0c0d0e 60%, #060607 100%); color: var(--d-text); } .calc__eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); } .calc__price { margin-top: 6px; font-family: var(--font-display); font-size: clamp(2.8rem, 2rem + 3vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--d-money); } .calc__unit { margin-top: 6px; color: var(--d-text2); } .calc__rows { margin: 24px 0 0; padding: 18px; border-radius: 18px; background: var(--d-raised); border: 1px solid var(--d-border); } .calc__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.97rem; } .calc__rows div + div { margin-top: 10px; } .calc__rows dt { color: var(--d-text2); } .calc__rows dd { margin: 0; font-weight: 700; color: var(--d-text); text-align: right; } .calc__rows .is-money { color: var(--d-money); } .calc__note { margin-top: 16px; color: var(--d-muted); font-size: 0.88rem; line-height: 1.5; } .calc__warn { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #3a2c08; color: var(--d-warning); font-size: 0.9rem; font-weight: 600; } .calc__warn[hidden] { display: none; } @media (max-width: 859px) { .calc { grid-template-columns: 1fr; } .calc__form, .calc__result { padding: 24px 20px; } } @media (max-width: 459px) { .modes { grid-template-columns: 1fr; } } /* ── Páginas legais ─────────────────────────────────────────────────────── */ .legal-hero { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); } .legal-hero .h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); } .legal-hero .updated { margin-top: 14px; color: var(--mint-soft); font-size: 0.97rem; } .legal { padding-block: 48px 88px; } .legal .prose h2 { margin-top: 44px; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); font-weight: 700; letter-spacing: -0.01em; } .legal .prose h3 { margin-top: 26px; font-size: 1.12rem; } .legal .prose > :first-child { margin-top: 0; } .ident { margin-top: 20px; padding: 18px 22px; border-radius: 16px; background: var(--paper-50); box-shadow: var(--shadow-card); } .ident p { margin: 0; font-size: 0.98rem; } .ident p + p { margin-top: 4px; } .legal code { padding: 1px 6px; border-radius: 6px; background: var(--paper-200); font-size: 0.9em; } .legal-links, .prose .legal-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--paper-300); } .legal-links a { padding: 9px 16px; border-radius: 999px; background: var(--paper-50); box-shadow: inset 0 0 0 1px var(--paper-300); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .legal-links a:hover { box-shadow: inset 0 0 0 1.5px var(--brand-700); } /* ── 404 ────────────────────────────────────────────────────────────────── */ .notfound { min-height: calc(100vh - var(--header-h) - 200px); display: grid; place-items: center; text-align: center; } .notfound img { width: 170px; margin: 0 auto 24px; } .notfound .cta-row { justify-content: center; } .notfound .lead { margin-inline: auto; } /* ============================================================================= Mockup do celular + telas do app (tema escuro do Cadu) Unidades em px "lógicos" do app (tela de 392px); o tamanho final vem de --s. ========================================================================== */ .device { --s: 0.7; position: relative; z-index: 4; flex: none; width: calc(410px * var(--s)); height: calc(866px * var(--s)); } .phone { position: absolute; top: 0; left: 0; width: 410px; height: 866px; padding: 9px; border-radius: 54px; background: #111412; box-shadow: inset 0 0 0 2px #2c322d, 0 36px 80px rgba(0, 0, 0, 0.34), 0 10px 26px rgba(0, 0, 0, 0.24); transform: scale(var(--s)); transform-origin: 0 0; color: var(--d-text); font-family: var(--font-body); font-size: 14px; line-height: normal; letter-spacing: normal; text-align: left; user-select: none; -webkit-user-select: none; } .m-screen { position: relative; width: 392px; height: 848px; overflow: hidden; border-radius: 45px; background: var(--d-bg); } .m-punch { position: absolute; top: 13px; left: 50%; z-index: 40; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #000; } .m-sb { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 6px 28px 0; font-size: 15px; font-weight: 700; } .m-sb svg { width: 42px; height: 15px; color: var(--d-text); } .m-pad { padding: 0 16px; } .m-row { display: flex; align-items: center; } .m-between { justify-content: space-between; } .m-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.8px; color: var(--d-text); } .m-sub { font-size: 14px; color: var(--d-text2); } .m-money { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.3px; } .m-cap { font-size: 12px; font-weight: 500; letter-spacing: 0.2px; } .m-sec { font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--d-text2); } .m-see { font-size: 14px; font-weight: 700; color: var(--d-money); } .m-card { border-radius: 20px; background: var(--d-raised); border: 1px solid var(--d-border); } .m-div { height: 1px; margin: 0 16px; background: var(--d-border); } .m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--d-border); background: var(--d-raised); font-size: 14px; font-weight: 700; color: var(--d-text2); white-space: nowrap; } .m-chip.is-sel { background: var(--d-primary); border-color: var(--d-primary); color: var(--d-raised); } .m-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--d-sunken); color: var(--d-text2); font-size: 11px; font-weight: 700; } .m-badge--red { background: var(--d-danger-strong); color: #fff; } .m-chips { display: flex; gap: 8px; overflow: hidden; } /* tab bar e botão flutuante */ .m-tabbar-wrap { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 30; display: flex; justify-content: center; } .m-tabbar { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--d-raised); border: 1px solid var(--d-border); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); } .m-tab { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; color: var(--d-text2); } .m-tab svg { width: 22px; height: 22px; } .m-tab.is-active { width: auto; gap: 6px; padding: 0 16px; background: var(--d-primary); color: var(--d-raised); } .m-tab.is-active span { color: var(--d-on-brand); font-size: 14px; font-weight: 700; } .m-fab { position: absolute; right: 16px; bottom: 96px; z-index: 29; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--d-primary); color: var(--d-on-brand); font-size: 16px; font-weight: 700; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); } .m-fab .plus { margin-top: -3px; font-size: 26px; font-weight: 300; } .m-fab--circle { justify-content: center; width: 64px; height: 64px; padding: 0; } .m-fab--circle .plus { margin: 0; } /* listas de venda */ .m-sale { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .m-sale__ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 999px; } .m-sale__mid { flex: 1; min-width: 0; } .m-sale__title { display: block; overflow: hidden; font-size: 16px; font-weight: 700; color: var(--d-text); white-space: nowrap; } .m-sale__sub { margin-top: 2px; font-size: 12px; color: var(--d-muted); } .m-sale__val { font-size: 18px; color: var(--d-money); } /* cores de apoio */ .m-bg-brand { background: #10331e; color: var(--d-primary); } .m-bg-ok { background: #10331e; color: var(--d-money); } .m-bg-warn { background: #3a2c08; color: var(--d-warning); } .c-money { color: var(--d-money); } .c-text2 { color: var(--d-text2); } .c-muted { color: var(--d-muted); } .c-warn { color: var(--d-warning); } .c-danger { color: var(--d-danger-text); } .c-ok { color: var(--d-money); } /* caixa: cartão de faturamento */ .m-hero-card { padding: 24px; border-radius: 24px; background: var(--d-primary); color: var(--d-raised); } .m-hero-card__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(11, 36, 21, 0.25); } .m-ring { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(11, 36, 21, 0.25); color: var(--d-on-brand); } .m-vr { width: 1px; margin: 0 12px; align-self: stretch; background: rgba(11, 36, 21, 0.25); } .m-alert { padding: 12px; border-radius: 20px; background: #3b2410; border: 1px solid var(--d-accent); } .m-alert__ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 999px; background: rgba(251, 146, 60, 0.14); color: var(--d-accent); } /* pedidos */ .m-stat { flex: 1; padding: 12px; border-radius: 16px; border: 1px solid var(--d-border); text-align: center; } .m-stat b { display: block; font-size: 14px; } .m-stat--danger { background: rgba(229, 72, 77, 0.14); color: var(--d-danger-text); } .m-stat--warn { background: rgba(251, 191, 36, 0.14); color: var(--d-warning); } .m-stat--ok { background: rgba(79, 197, 126, 0.14); color: var(--d-money); } .m-stat .m-title { font-size: 28px; color: inherit; } .m-box { flex: 1; padding: 12px; border-radius: 20px; background: var(--d-sunken); } .m-avatar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--d-primary); color: var(--d-raised); font-size: 18px; font-weight: 700; } .m-avatar--sm { width: 40px; height: 40px; font-size: 16px; } .m-avatar--danger { background: var(--d-danger-strong); color: #fff; } .m-progress { display: flex; flex: 1; gap: 3px; } .m-progress span { flex: 1; height: 4px; border-radius: 999px; background: var(--d-border-strong); } .m-progress .is-warn { background: var(--d-warning); } .m-progress .is-danger { background: var(--d-danger); } .m-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; background: var(--d-primary); color: var(--d-raised); font-size: 14px; font-weight: 700; } .m-btn--outline { background: transparent; border: 1.5px solid var(--d-primary); color: var(--d-primary); } .m-btn--lg { height: 52px; font-size: 16px; } .m-margin { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: #10331e; color: var(--d-money); font-size: 12px; font-weight: 600; } .m-margin--warn { background: #3a2c08; color: var(--d-warning); } /* nova venda */ .m-prod { position: relative; flex: 1; min-height: 130px; padding: 12px; border-radius: 20px; border: 1.5px solid var(--d-border); background: var(--d-raised); } .m-prod.is-sel { background: #10331e; border-color: var(--d-primary); } .m-prod__name { margin-top: 4px; padding-right: 32px; font-size: 16px; font-weight: 700; color: var(--d-text); } .m-prod .m-money { margin-top: 4px; font-size: 16px; color: var(--d-money); } .m-qty { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--d-primary); color: var(--d-raised); font-size: 14px; font-weight: 700; } .m-steppers { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; } .m-steppers span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--d-primary); color: var(--d-raised); font-size: 18px; font-weight: 600; } .m-cartbar { position: absolute; left: 16px; right: 16px; bottom: 24px; padding: 12px 14px; border-radius: 24px; background: var(--d-primary); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); color: var(--d-raised); } .m-cartbar__count { position: absolute; top: -2px; right: -2px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--d-accent); color: #2a1503; font-size: 12px; font-weight: 700; } .m-finalizar { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--d-accent); color: #2a1503; font-size: 16px; font-weight: 700; } /* relatórios */ .m-bars { position: relative; height: 110px; margin-top: 16px; } .m-bars__avg { position: absolute; left: 0; right: 0; top: 34px; border-top: 2px dashed var(--d-border-strong); } .m-bars__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10px; } .m-bars__cols span { flex: 1; border-radius: 6px 6px 3px 3px; background: #27904f; } .m-bars__cols .is-top { background: var(--d-primary); } .m-bars__cols .is-off { background: var(--d-border-strong); } .m-days { display: flex; gap: 10px; margin-top: 6px; } .m-days span { flex: 1; font-size: 11px; text-align: center; color: var(--d-muted); } .m-meter { height: 8px; margin-top: 6px; border-radius: 999px; background: var(--d-sunken); } .m-meter span { display: block; height: 8px; border-radius: 999px; background: var(--d-primary); } .m-meter .is-ok { background: var(--d-money); } /* ── Movimento reduzido ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ── Impressão (páginas legais) ─────────────────────────────────────────── */ @media print { .site-header, .site-footer, .skip-link, .legal-links { display: none !important; } body, .bg-green { background: #fff !important; color: #000 !important; } .legal-hero .updated { color: #333 !important; } }