/* ========================================================================= S1mples — Sistema de gestão para o varejo Folha de estilo única, compartilhada por todas as páginas. Tema trocável por módulo via classes no : (padrão azul) · .theme-orange (Autopeças) · .theme-green (Farmácia) ========================================================================= */ /* ---------- Tokens ------------------------------------------------------- */ :root { /* Marca — Azul S1mples (#1F73D0) */ --brand: #1F73D0; --brand-600: #1763bc; --brand-700: #11569f; --brand-800: #0c3f76; --brand-400: #4f97e3; --brand-300: #8ebcef; --brand-ink: #0c2a4d; --brand-tint: #eaf2fc; --brand-tint-2: #d9e8fb; --brand-accent: #16c0d8; /* realce secundário (ciano) */ --grad: linear-gradient(135deg, #2f87e8 0%, #1763bc 100%); --grad-vivid: linear-gradient(135deg, #38b1ff 0%, #1f73d0 55%, #134f99 100%); --ring: rgba(31,115,208,.30); /* Neutros */ --ink: #0d1b2e; --ink-2: #2f435a; --muted: #61748a; --line: #e6ecf3; --line-2: #eff4f9; --bg: #ffffff; --bg-soft:#f4f8fc; --navy: #0a1626; --navy-2: #0f2138; /* WhatsApp */ --whats: #25D366; --whats-600:#1da851; /* Forma & profundidade */ --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --shadow-sm: 0 2px 8px rgba(13,27,46,.06); --shadow: 0 14px 40px -16px rgba(13,27,46,.22); --shadow-lg: 0 36px 80px -30px rgba(13,27,46,.34); --shadow-brand: 0 22px 50px -20px var(--ring); --container: 1180px; --header-h: 76px; } /* Tema Autopeças — Laranja (#ED7F02) */ .theme-orange { --brand: #ED7F02; --brand-600: #d86f00; --brand-700: #b35c00; --brand-800: #874500; --brand-400: #f59b3c; --brand-300: #f8bd77; --brand-ink: #663700; --brand-tint: #fdf2e3; --brand-tint-2: #fbe1c4; --brand-accent: #ffb24d; --grad: linear-gradient(135deg, #f59324 0%, #d86f00 100%); --grad-vivid: linear-gradient(135deg, #ffab3d 0%, #ed7f02 55%, #b35c00 100%); --ring: rgba(237,127,2,.32); } /* Tema Restaurante — Vermelho leve (#E0514B) */ .theme-red { --brand: #E0514B; --brand-600: #d23e38; --brand-700: #b2322d; --brand-800: #8a2723; --brand-400: #ec817c; --brand-300: #f2aeaa; --brand-ink: #6e211d; --brand-tint: #fdecec; --brand-tint-2: #fbd6d4; --brand-accent: #f2aeaa; --grad: linear-gradient(135deg, #ee6f66 0%, #d6433d 100%); --grad-vivid: linear-gradient(135deg, #f48b83 0%, #e0514b 55%, #b2322d 100%); --ring: rgba(224,81,75,.30); } /* Tema Farmácia — Verde (#2FAE79 / menta #85DAB3) */ .theme-green { --brand: #2FAE79; --brand-600: #259863; --brand-700: #1c7d50; --brand-800: #14603d; --brand-400: #5cc599; --brand-300: #85dab3; --brand-ink: #115138; --brand-tint: #e7f7ef; --brand-tint-2: #cdeedd; --brand-accent: #85dab3; --grad: linear-gradient(135deg, #45c794 0%, #229469 100%); --grad-vivid: linear-gradient(135deg, #6fd6aa 0%, #2fae79 55%, #1c7d50 100%); --ring: rgba(47,174,121,.30); } /* ---------- Base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--brand-600); text-decoration: none; } a:hover { color: var(--brand-700); } h1, h2, h3, h4 { font-family: "Poppins", "Inter", system-ui, sans-serif; color: var(--ink); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); } h3 { font-size: 1.28rem; } p { margin: 0 0 1rem; color: var(--ink-2); } ::selection { background: var(--brand); color: #fff; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: 92px 0; } .section--tight { padding: 64px 0; } .section--soft { background: var(--bg-soft); } .section--tintbg { background: radial-gradient(1100px 460px at 88% -10%, var(--brand-tint), transparent 60%), var(--bg); } .center { text-align: center; } .muted { color: var(--muted); } .nowrap { white-space: nowrap; } /* ---------- Utilitários de cabeçalho de seção --------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: "Poppins", sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-tint); border: 1px solid var(--brand-tint-2); padding: .42em .9em; border-radius: 999px; margin-bottom: 18px; } .eyebrow.on-dark { color: #cfe2fb; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); } .sec-head { max-width: 720px; margin: 0 auto 54px; } .sec-head.left { margin-left: 0; } .sec-head p { font-size: 1.12rem; color: var(--muted); margin-bottom: 0; } /* ---------- Botões ------------------------------------------------------- */ .btn { --btn-bg: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1; cursor: pointer; border: 0; padding: 15px 26px; border-radius: 12px; transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn svg { width: 1.15em; height: 1.15em; } .btn--primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); } .btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 26px 56px -20px var(--ring); } .btn--ghost { background: #fff; color: var(--brand-700); box-shadow: inset 0 0 0 1.6px var(--brand-tint-2); } .btn--ghost:hover { color: var(--brand-800); box-shadow: inset 0 0 0 1.6px var(--brand-300); transform: translateY(-2px); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { color: #fff; background: #16263c; transform: translateY(-2px); } .btn--light { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.28); } .btn--light:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); } .btn--whats { background: var(--whats); color: #fff; box-shadow: 0 16px 36px -16px rgba(37,211,102,.6); } .btn--whats:hover { background: var(--whats-600); color: #fff; transform: translateY(-2px); } .btn--lg { padding: 18px 32px; font-size: 1.06rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------- Cabeçalho / Navegação --------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(13,27,46,.4); } .nav { display: flex; align-items: center; gap: 22px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 12px; font-family: "Poppins", sans-serif; } .brand-logo { height: 30px; width: auto; display: block; } .brand-word { font-size: 1.46rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink); line-height: 1; } .brand-sub { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-tint); vertical-align: middle; font-family: "Poppins", sans-serif; } .nav-spacer { flex: 1; } .nav-menu { display: flex; align-items: center; gap: 4px; } .nav-menu > a, .nav-link { font-family: "Poppins", sans-serif; font-weight: 500; font-size: .98rem; color: var(--ink-2); padding: 10px 14px; border-radius: 10px; transition: color .18s, background .18s; position: relative; } .nav-menu > a:hover, .nav-link:hover { color: var(--brand-700); background: var(--brand-tint); } .nav-menu > a.active { color: var(--brand-700); } .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 6px; } /* Dropdown "O S1mples" */ .has-drop { position: relative; } .drop-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; } .drop-toggle .chev { width: 14px; height: 14px; transition: transform .25s ease; } .has-drop:hover .drop-toggle .chev, .has-drop.open .drop-toggle .chev { transform: rotate(180deg); } .drop-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); width: 340px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; z-index: 120; } .has-drop:hover .drop-menu, .has-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .drop-item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 14px; transition: background .16s; } .drop-item:hover { background: var(--bg-soft); } .drop-item img, .drop-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; } .drop-ico { display: grid; place-items: center; color: #fff; font-size: 1.1rem; } .drop-item > span { display: flex; flex-direction: column; } .drop-item .d-t { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .96rem; color: var(--ink); line-height: 1.25; } .drop-item .d-s { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; } .nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: var(--brand-tint); border-radius: 12px; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--brand-700); margin: 4px auto; border-radius: 2px; transition: .25s; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------- Hero --------------------------------------------------------- */ .hero { position: relative; padding: 70px 0 84px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(820px 520px at 78% -8%, var(--brand-tint), transparent 62%), radial-gradient(680px 480px at 8% 8%, var(--brand-tint), transparent 60%); } .hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; } .hero h1 { margin-bottom: 20px; } .hero h1 .hl { color: var(--brand); } .hero .lead { font-size: 1.22rem; color: var(--ink-2); max-width: 560px; margin-bottom: 14px; } .hero .sub { font-size: 1.04rem; color: var(--muted); max-width: 560px; } .hero .btn-row { margin: 28px 0 18px; } .hero-note { font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 8px; } .hero-note svg { width: 18px; height: 18px; color: var(--brand); flex: none; } .stat-row { display: flex; flex-wrap: wrap; gap: 30px 40px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .stat .num { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.85rem; color: var(--brand-ink); line-height: 1; letter-spacing: -.02em; } .stat .lbl { font-size: .85rem; color: var(--muted); margin-top: 5px; max-width: 150px; } /* Mockup do produto no hero */ .hero-visual { position: relative; } .app-window { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; z-index: 2; } .app-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .app-bar i { width: 11px; height: 11px; border-radius: 50%; background: #d6dee8; display: block; } .app-bar i:nth-child(1){ background:#ff6159; } .app-bar i:nth-child(2){ background:#ffbd2e; } .app-bar i:nth-child(3){ background:#28c840; } .app-bar .app-tt { margin-left: 8px; font-size: .8rem; color: var(--muted); font-family: "Poppins", sans-serif; } .app-body { padding: 18px; display: grid; gap: 14px; } .app-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .app-search { flex: 1; height: 38px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-size: .85rem; } .app-chip { font-size: .72rem; font-weight: 700; color: var(--brand-700); background: var(--brand-tint); border-radius: 999px; padding: 6px 11px; font-family: "Poppins", sans-serif; } .cart-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; } .cart-line b { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .92rem; color: var(--ink); } .cart-line .q { font-size: .78rem; color: var(--muted); } .cart-line .v { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--ink); align-self: center; } .app-total { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-radius: 14px; background: var(--grad); color: #fff; } .app-total span { font-size: .82rem; opacity: .9; } .app-total b { font-family: "Poppins", sans-serif; font-size: 1.5rem; font-weight: 800; } .app-cta { text-align: center; padding: 13px; border-radius: 12px; background: var(--ink); color: #fff; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .95rem; } .float-card { position: absolute; z-index: 3; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 13px 15px; display: flex; align-items: center; gap: 11px; font-size: .85rem; } .float-card .fc-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; } .float-card b { font-family: "Poppins", sans-serif; display: block; color: var(--ink); font-size: .92rem; } .float-card .fc-s { color: var(--muted); font-size: .76rem; } .float-1 { top: 18px; left: -26px; } .float-2 { bottom: 30px; right: -22px; } .hero-visual .blob { position: absolute; inset: -10% -14% auto auto; width: 76%; aspect-ratio: 1; background: var(--grad-vivid); filter: blur(60px); opacity: .22; border-radius: 50%; z-index: 0; } /* ---------- Faixa de confiança ------------------------------------------ */ .trust { padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); } .trust-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; } .trust .t-i { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); font-weight: 600; font-family: "Poppins", sans-serif; font-size: .94rem; } .trust .t-i svg { width: 20px; height: 20px; color: var(--brand); } .trust .t-sep { width: 1px; height: 22px; background: var(--line); } /* ---------- Cards de recurso (bento) ------------------------------------ */ .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; } .feature { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-tint-2); } .feature.col-6 { grid-column: span 6; } .feature.col-4 { grid-column: span 4; } .feature.col-12 { grid-column: span 12; } .f-ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--grad); margin-bottom: 18px; box-shadow: var(--shadow-brand); } .f-ico svg { width: 27px; height: 27px; } .feature h3 { margin-bottom: 8px; } .feature p { margin-bottom: 0; color: var(--muted); font-size: .98rem; } .feature .f-deco { position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; border-radius: 50%; background: var(--brand-tint); opacity: .5; z-index: 0; } .feature > * { position: relative; z-index: 1; } .tick-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; } .tick-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .98rem; color: var(--ink-2); } .tick-list svg { width: 21px; height: 21px; color: var(--brand); flex: none; margin-top: 1px; } .tick-list.on-dark li { color: #c8d6e6; } .tick-list.on-dark svg { color: var(--brand-300); } /* ---------- Problema → Solução ------------------------------------------ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; } .pcard { border-radius: var(--r-lg); padding: 30px; border: 1px solid var(--line); } .pcard.bad { background: #fdf4f4; border-color: #f6dcdc; } .pcard.good { background: var(--brand-tint); border-color: var(--brand-tint-2); } .pcard h3 { display: flex; align-items: center; gap: 10px; } .pcard .badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; } .pcard.bad .badge { background: #e2615b; } .pcard.good .badge { background: var(--brand); } .pcard ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; } .pcard li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); } .pcard li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; } .pcard.bad li svg { color: #d9534f; } .pcard.good li svg { color: var(--brand); } /* ---------- Módulos (segmentos) ----------------------------------------- */ .modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .mod-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: transform .25s, box-shadow .25s, border-color .25s; } .mod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .mod-card img { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 16px; } .mod-card h3 { font-size: 1.12rem; margin-bottom: 6px; } .mod-card p { font-size: .92rem; color: var(--muted); flex: 1; } .mod-card .mc-link { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9rem; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; } .mod-card .mc-link svg { width: 16px; height: 16px; transition: transform .2s; } .mod-card:hover .mc-link svg { transform: translateX(4px); } .mc-orange { color: #ED7F02; } .mc-green { color: #2FAE79; } .mc-blue { color: var(--brand-600); } .mc-red { color: #E0514B; } /* ---------- Passos ------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: s; } .step { position: relative; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .step::before { counter-increment: s; content: counter(s); font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1rem; color: #fff; width: 40px; height: 40px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; margin-bottom: 16px; box-shadow: var(--shadow-brand); } .step h3 { font-size: 1.08rem; margin-bottom: 6px; } .step p { font-size: .92rem; color: var(--muted); margin: 0; } /* ---------- Planos ------------------------------------------------------- */ .plan-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin: 0 auto 14px; } .plan-toggle button { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9rem; border: 0; background: none; color: var(--muted); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: .2s; } .plan-toggle button.active { background: #fff; color: var(--brand-700); box-shadow: var(--shadow-sm); } .plan-toggle .save { font-size: .72rem; color: var(--brand); font-weight: 700; } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; position: relative; transition: transform .25s, box-shadow .25s; } .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .plan.featured { border: 0; background: var(--navy); color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-8px) scale(1.012); } .plan.featured:hover { transform: translateY(-12px) scale(1.012); } .plan.featured h3, .plan.featured .price b { color: #fff; } .plan-flag { position: absolute; top: 18px; right: 18px; font-family: "Poppins", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--grad); padding: 6px 12px; border-radius: 999px; box-shadow: 0 10px 22px -8px var(--ring); /* escondido por padrão — entra deslizando do lado no hover do card */ opacity: 0; transform: translateX(22px); pointer-events: none; transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.4, .5, 1); } .plan.featured:hover .plan-flag, .plan.featured:focus-within .plan-flag { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .plan-flag { transition: opacity .2s ease; transform: none; } } .plan .p-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 4px; } .plan .p-desc { font-size: .92rem; color: var(--muted); min-height: 42px; } .plan.featured .p-desc { color: #aebfd2; } .p-from { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .8rem; color: var(--muted); margin-top: 16px; } .plan.featured .p-from { color: #93a6bd; } .price { display: flex; align-items: baseline; gap: 4px; margin: 2px 0 4px; } .price .cur { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--muted); font-size: 1rem; } .price b { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 2.7rem; color: var(--ink); letter-spacing: -.02em; line-height: 1; } .price .cents { font-size: .42em; font-weight: 800; vertical-align: .55em; margin-left: 1px; } .price .per { font-size: .9rem; color: var(--muted); } .plan.featured .price .cur, .plan.featured .price .per { color: #aebfd2; } .plan .p-meta { font-size: .82rem; color: var(--muted); margin-bottom: 20px; } .plan.featured .p-meta { color: #93a6bd; } .plan .btn { margin-bottom: 22px; } .plan ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 13px; } .plan.featured ul { border-top-color: rgba(255,255,255,.14); } .plan li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--ink-2); } .plan li svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: 2px; } .plan.featured li { color: #d3deea; } .plan.featured li svg { color: var(--brand-300); } .plan li.off { color: #aab7c4; } .plan li.off svg { color: #cfd8e2; } .plans-foot { text-align: center; margin-top: 30px; color: var(--muted); font-size: .94rem; } /* ---------- Citação / depoimento ---------------------------------------- */ .quote { max-width: 860px; margin: 0 auto; text-align: center; } .quote .qm { font-family: "Poppins", sans-serif; font-size: 3.4rem; line-height: 1; color: var(--brand); opacity: .55; } .quote p { font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--ink); letter-spacing: -.01em; line-height: 1.35; } .quote .who { color: var(--muted); font-size: .96rem; font-family: "Inter", sans-serif; font-weight: 400; } /* ---------- Faixa CTA (escura) ------------------------------------------ */ .cta-band { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: 64px; text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(700px 360px at 50% -30%, rgba(31,115,208,.5), transparent 70%); opacity: .9; } .theme-orange .cta-band::before { background: radial-gradient(700px 360px at 50% -30%, rgba(237,127,2,.45), transparent 70%); } .theme-green .cta-band::before { background: radial-gradient(700px 360px at 50% -30%, rgba(47,174,121,.45), transparent 70%); } .theme-red .cta-band::before { background: radial-gradient(700px 360px at 50% -30%, rgba(224,81,75,.45), transparent 70%); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: #fff; } .cta-band p { color: #b6c5d8; max-width: 620px; margin: 0 auto 26px; font-size: 1.1rem; } /* ---------- Página interna: hero ---------------------------------------- */ .page-hero { position: relative; padding: 64px 0 30px; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(760px 420px at 82% -20%, var(--brand-tint), transparent 60%); } .crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--brand-700); } .page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); } .page-hero .lead { font-size: 1.18rem; color: var(--ink-2); max-width: 680px; } /* Faixa de identidade do módulo (no topo das páginas de produto) */ .mod-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 50px 0 20px; } .mod-badge { display: inline-flex; align-items: center; gap: 12px; padding: 9px 9px 9px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); margin-bottom: 22px; } .mod-badge img { width: 34px; height: 34px; border-radius: 9px; } .mod-badge span { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink); padding-right: 6px; } .mod-badge .tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-tint); padding: 5px 10px; border-radius: 999px; } /* ---------- Lista de capacidades (páginas de produto) ------------------- */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: transform .22s, box-shadow .22s; } .cap:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .cap .c-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-700); margin-bottom: 15px; } .cap .c-ico svg { width: 23px; height: 23px; } .cap h3 { font-size: 1.06rem; margin-bottom: 6px; } .cap p { font-size: .92rem; color: var(--muted); margin: 0; } /* Mockup genérico de "tela" para páginas de produto */ .screen { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .screen .s-top { background: var(--grad); color: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; } .screen .s-top b { font-family: "Poppins", sans-serif; font-weight: 700; } .screen .s-top .s-tabs { display: flex; gap: 6px; } .screen .s-top .s-tabs i { width: 26px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.4); display: block; } .screen .s-top .s-tabs i:first-child { background: #fff; width: 34px; } .screen .s-body { padding: 20px; display: grid; gap: 14px; } .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .kpi { border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .kpi .k-l { font-size: .74rem; color: var(--muted); } .kpi .k-v { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--ink); } .kpi .k-up { font-size: .72rem; color: var(--brand); font-weight: 700; } .bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 8px 4px 0; border: 1px solid var(--line); border-radius: 14px; } .bars span { flex: 1; border-radius: 6px 6px 0 0; background: var(--grad); opacity: .9; } /* ---------- Rodapé ------------------------------------------------------- */ .site-footer { background: var(--navy); color: #c2d0e0; padding: 70px 0 30px; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } .foot-brand .brand-word { color: #fff; } .foot-brand p { color: #91a3ba; font-size: .94rem; max-width: 300px; margin-top: 14px; } .site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-family: "Poppins", sans-serif; margin-bottom: 16px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .site-footer a { color: #aebfd2; font-size: .95rem; } .site-footer a:hover { color: #fff; } .socials { display: flex; gap: 10px; margin-top: 18px; } .socials a { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.07); display: grid; place-items: center; color: #cdd9e8; transition: .2s; } .socials a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); } .socials svg { width: 19px; height: 19px; } .foot-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: .85rem; color: #8499b1; } /* ---------- WhatsApp flutuante ------------------------------------------ */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: var(--whats); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -8px rgba(37,211,102,.7); transition: transform .2s; } .wa-float:hover { transform: scale(1.08); color: #fff; } .wa-float svg { width: 30px; height: 30px; } .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: wa-pulse 2.4s infinite; } @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* ---------- Aviso de cookies (LGPD) ------------------------------------- */ .cookie-banner { position: fixed; left: 22px; bottom: 22px; z-index: 96; width: min(420px, calc(100vw - 44px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 20px 22px; animation: cookie-in .4s ease both; } @keyframes cookie-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .cookie-banner p { font-size: .9rem; color: var(--ink-2); margin: 0 0 15px; line-height: 1.55; } .cookie-banner p b { font-family: "Poppins", sans-serif; color: var(--ink); } .cookie-actions { display: flex; gap: 10px; } .cookie-actions .btn { flex: 1; padding: 11px 16px; font-size: .92rem; } .cookie-prefs { background: none; border: 0; color: #8499b1; font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .cookie-prefs:hover { color: #fff; } @media (max-width: 560px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; } } /* ---------- Formulário de contato --------------------------------------- */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px; box-shadow: var(--shadow); } .field { margin-bottom: 16px; } .field label { display: block; font-family: "Poppins", sans-serif; font-weight: 500; font-size: .88rem; color: var(--ink); margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: .98rem; color: var(--ink); background: var(--bg-soft); transition: border-color .18s, background .18s, box-shadow .18s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-300); background: #fff; box-shadow: 0 0 0 4px var(--ring); } .field textarea { resize: vertical; min-height: 110px; } .form-status { padding: 12px 15px; border-radius: 11px; font-size: .92rem; margin-top: 6px; display: none; } .form-status.ok { display: block; background: var(--brand-tint); color: var(--brand-800); } .form-status.err { display: block; background: #fdeceb; color: #b4322c; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); } .consent input { width: auto; margin-top: 3px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } .contact-list { display: grid; gap: 14px; margin: 22px 0 26px; } .contact-item { display: flex; gap: 14px; align-items: center; } .contact-item .ci-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-tint); color: var(--brand-700); display: grid; place-items: center; flex: none; } .contact-item .ci-ico svg { width: 22px; height: 22px; } .contact-item b { font-family: "Poppins", sans-serif; display: block; font-size: .96rem; color: var(--ink); } .contact-item span { font-size: .9rem; color: var(--muted); } /* ---------- Faixa de logos de módulos (rodapé das páginas) -------------- */ .mod-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .mod-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9rem; color: var(--ink-2); transition: .2s; } .mod-pill:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--ink); } .mod-pill img { width: 30px; height: 30px; border-radius: 8px; } /* ---------- FAQ accordion ----------------------------------------------- */ .faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 20px 22px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-q .pm { width: 24px; height: 24px; flex: none; position: relative; } .faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: .25s; } .faq-q .pm::before { width: 14px; height: 2px; } .faq-q .pm::after { width: 2px; height: 14px; } .faq-item.open .faq-q .pm::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a p { padding: 0 22px 20px; margin: 0; color: var(--muted); font-size: .96rem; } /* ---------- Animação de entrada ----------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .wa-float::after { animation: none; } html { scroll-behavior: auto; } } /* ---------- Responsivo --------------------------------------------------- */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-visual { max-width: 480px; margin: 0 auto; } .mod-hero { grid-template-columns: 1fr; } .split, .contact-grid { grid-template-columns: 1fr; } .modules, .steps { grid-template-columns: repeat(2, 1fr); } .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .plan.featured { transform: none; } .plan.featured:hover { transform: translateY(-4px); } .cap-grid { grid-template-columns: repeat(2, 1fr); } .feature.col-6, .feature.col-4 { grid-column: span 6; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 860px) { .nav-toggle { display: block; } .nav-menu { display: flex; position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 14px 20px 22px; gap: 4px; box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav-menu.open { transform: none; opacity: 1; visibility: visible; } .nav-menu > a { padding: 13px 12px; border-radius: 10px; } .has-drop { width: 100%; } .drop-menu { position: static; left: auto; width: 100%; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 4px 0 8px 12px; display: none; } .has-drop:hover .drop-menu, .has-drop.open .drop-menu { display: block; transform: none; } .drop-toggle { width: 100%; justify-content: space-between; padding: 13px 12px; border-radius: 10px; } .drop-toggle:hover { background: var(--brand-tint); } .nav-menu .btn { margin-top: 8px; } } @media (max-width: 620px) { body { font-size: 16px; } .section { padding: 64px 0; } .container { padding: 0 18px; } .modules, .steps, .cap-grid, .bento { grid-template-columns: 1fr; } .feature.col-6, .feature.col-4, .feature.col-12 { grid-column: span 1; } .bento { display: grid; } .cta-band { padding: 40px 24px; } .foot-grid { grid-template-columns: 1fr; } .brand-sub { display: none; } .stat-row { gap: 22px 30px; } .float-card { display: none; } .btn-row .btn { width: 100%; } }