/* Theme Name: CobChat Theme URI: https://cob.chat Description: Tema filho do Hello Elementor para o site do CobChat (cobrança multicanal da Cubo Sistemas). Cabeçalho e rodapé em PHP (menus em Aparência › Menus, textos em Aparência › Personalizar); páginas montadas no Elementor com as classes deste CSS. Author: Cubo Sistemas Author URI: https://cubosis.com.br Template: hello-elementor Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 8.1 Text Domain: cobchat */ /* ========================================================= Como este CSS conversa com o Elementor - Seções e cards são containers do Elementor com uma classe (Avançado › Classes CSS). - Para padding, borda, raio e gap dos containers, o tema define as VARIÁVEIS do Elementor (--padding-top, --border-radius, --row-gap...). Assim, o que for alterado no editor continua valendo, porque a regra do editor tem prioridade sobre a do tema. - Botões: classe no widget (btn btn--primary) estiliza o interno. ========================================================= */ /* ---------- Tokens ---------- */ :root { --navy: #0c2c57; --navy-600: #102f5a; --navy-500: #1b437a; --navy-100: #e3eaf4; --navy-50: #eef3f9; --orange: #f4550d; --orange-600: #dc4a08; --orange-100: #fde6da; --orange-50: #fff1ea; --bg: #f6f8fc; --surface: #ffffff; --text: #102b50; --muted: #61728a; --muted-2: #8a99ad; --border: #e8edf3; --border-2: #d9e1ea; --green: #25d366; /* WhatsApp */ --green-700: #128c7e; --blue: #2f6fed; /* Webchat */ --purple: #7c5cff; /* E-mail */ --shadow-card: 0 8px 28px rgba(21, 51, 88, .05); --shadow-card-lg: 0 24px 60px rgba(21, 51, 88, .10); --shadow-btn: 0 14px 34px rgba(16, 47, 90, .14); --shadow-orange: 0 14px 34px rgba(244, 85, 13, .22); --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --container: 1200px; --gutter: 24px; --header-h: 76px; --font: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.admin-bar { --admin-bar: 32px; } @media (max-width: 782px) { body.admin-bar { --admin-bar: 46px; } } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--navy-500); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.15; letter-spacing: -.035em; font-weight: 800; color: var(--navy); } h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -.045em; } h2 { font-size: clamp(30px, 3.8vw, 44px); } h3 { font-size: 22px; letter-spacing: -.02em; } h4 { font-size: 17px; letter-spacing: -.01em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; 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: -9999px; top: 8px; z-index: 999; background: #fff; padding: 10px 14px; border-radius: 8px; } .skip-link:focus { left: 16px; } /* Títulos do Elementor: o plugin força line-height 1; devolvemos o do tema */ h1.elementor-heading-title { line-height: 1.08; } h2.elementor-heading-title, h3.elementor-heading-title, h4.elementor-heading-title, h5.elementor-heading-title { line-height: 1.15; } .elementor-widget-text-editor p + p { margin-top: .9em; } /* Containers do Elementor: sem padding padrão; caixas largas ganham a calha lateral */ .e-con.e-con-boxed { --padding-left: var(--gutter); --padding-right: var(--gutter); } /* Largura automática para widgets que ficam lado a lado (botões, chips, bolhas) */ .e-con .elementor-widget.w-auto { width: auto; } /* Linhas "ícone/número + texto" que continuam lado a lado no celular (o Elementor liga flex-wrap no mobile) */ .e-con.step, .e-con.contact-card { --flex-wrap: nowrap; } .e-con.step > .e-con, .e-con.contact-card > .e-con { --width: auto; --flex-grow: 1; --flex-basis: 0; min-width: 0; } .accent { color: var(--orange); } .lead, .elementor-widget.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); line-height: 1.65; max-width: 60ch; } .text-center { text-align: center; } .text-center .lead { margin-inline: auto; } /* ---------- Seções ---------- */ .e-con.sec { --padding-top: clamp(64px, 8vw, 112px); --padding-bottom: clamp(64px, 8vw, 112px); } .e-con.sec--tight { --padding-top: clamp(40px, 5vw, 64px); --padding-bottom: clamp(40px, 5vw, 64px); } .sec--white { background: var(--surface); } .sec--navy { background: var(--navy); color: #fff; } .sec--navy h2, .sec--navy h3, .sec--navy h4 { color: #fff; } .sec--navy .lead { color: rgba(255,255,255,.72); } /* -20px: o container da seção já separa os filhos com o gap padrão do Elementor (20px); total = o do site HTML */ .e-con.sec-head { --row-gap: 16px; max-width: 900px; --margin-bottom: calc(clamp(36px, 5vw, 56px) - 20px); } .e-con.sec-head--center { --margin-left: auto; --margin-right: auto; --align-items: center; text-align: center; } .sec-head .lead { max-width: none; } .sec-head--center .lead { margin-inline: auto; } .kicker:not(.elementor-widget), .elementor-widget.kicker .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border); color: var(--navy); font-size: 13.5px; font-weight: 700; letter-spacing: 0; line-height: 1.4; box-shadow: var(--shadow-card); } .kicker:not(.elementor-widget)::before, .elementor-widget.kicker .elementor-heading-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(244,85,13,.14); } .elementor-widget.kicker { width: auto; } .e-con .elementor-widget.kicker:not(:last-child) { margin-bottom: 4px; } /* ---------- Botões (HTML puro e widget Botão do Elementor) ---------- */ a.btn, button.btn, .elementor-widget.btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-md); border: 1.5px solid transparent; font-family: var(--font); font-weight: 700; font-size: 15.5px; line-height: 1; white-space: nowrap; text-decoration: none !important; background: none; color: inherit; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; } .elementor-widget.btn .elementor-button-content-wrapper { gap: 10px; align-items: center; } .elementor-widget.btn .elementor-button-icon svg { width: 18px; height: 18px; fill: currentColor; } a.btn:hover, .elementor-widget.btn .elementor-button:hover { transform: translateY(-2px); } a.btn:active, .elementor-widget.btn .elementor-button:active { transform: translateY(0); } a.btn svg { width: 18px; height: 18px; flex: none; } .btn--primary:not(.elementor-widget), .elementor-widget.btn--primary .elementor-button { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); } .btn--primary:not(.elementor-widget):hover, .elementor-widget.btn--primary .elementor-button:hover { background: var(--orange-600); color: #fff; } .btn--navy:not(.elementor-widget), .elementor-widget.btn--navy .elementor-button { background: var(--navy-600); color: #fff; box-shadow: var(--shadow-btn); } .btn--navy:not(.elementor-widget):hover, .elementor-widget.btn--navy .elementor-button:hover { background: var(--navy-500); color: #fff; } .btn--outline:not(.elementor-widget), .elementor-widget.btn--outline .elementor-button { background: #fff; color: var(--navy); border-color: var(--border-2); } .btn--outline:not(.elementor-widget):hover, .elementor-widget.btn--outline .elementor-button:hover { border-color: var(--navy); color: var(--navy); } .btn--ghost:not(.elementor-widget), .elementor-widget.btn--ghost .elementor-button { background: transparent; color: var(--navy); } .btn--ghost:not(.elementor-widget):hover, .elementor-widget.btn--ghost .elementor-button:hover { background: var(--navy-50); transform: none; } .btn--white:not(.elementor-widget), .elementor-widget.btn--white .elementor-button { background: #fff; color: var(--navy); } .btn--white:not(.elementor-widget):hover, .elementor-widget.btn--white .elementor-button:hover { background: var(--bg); color: var(--navy); } .btn--sm:not(.elementor-widget), .elementor-widget.btn--sm .elementor-button { min-height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; } .btn--lg:not(.elementor-widget), .elementor-widget.btn--lg .elementor-button { min-height: 58px; padding: 0 30px; font-size: 16.5px; } .btn--block:not(.elementor-widget), .elementor-widget.btn--block .elementor-button { width: 100%; } .elementor-widget.btn:not(.btn--block) { width: auto; } .e-con.btn-row { --flex-direction: row; --flex-wrap: wrap; --align-items: center; --gap: 12px; --row-gap: 12px; --column-gap: 12px; } .btn-note, .elementor-widget.btn-note { font-size: 14px; color: var(--muted); } .btn-note { display: flex; align-items: center; gap: 8px; } .btn-note svg { width: 16px; height: 16px; color: var(--green-700); flex: none; } .elementor-widget.btn-note .elementor-icon-list-item { font-size: 14px; color: var(--muted); } .elementor-widget.btn-note .elementor-icon-list-icon svg { fill: var(--green-700); } /* "Saiba mais →" — widget Botão com a classe link-arrow */ .link-arrow, .elementor-widget.link-arrow .elementor-button { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); background: none; padding: 0; border: 0; border-radius: 0; font-size: inherit; line-height: 1.3; } .link-arrow svg, .elementor-widget.link-arrow .elementor-button-icon svg { width: 16px; height: 16px; transition: transform .18s; fill: currentColor; } .link-arrow:hover, .elementor-widget.link-arrow .elementor-button:hover { text-decoration: none; color: var(--orange); } .link-arrow:hover svg, .elementor-widget.link-arrow .elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); } .elementor-widget.link-arrow { width: auto; } .elementor-widget.link-arrow .elementor-button-content-wrapper { gap: 6px; align-items: center; } .elementor-widget.link-arrow .elementor-button-text { font-size: 16px; } .elementor-widget.link-arrow--sm .elementor-button-text { font-size: 14.5px; } /* ---------- Header (PHP: header.php) ---------- */ .header { position: sticky; top: var(--admin-bar, 0); z-index: 50; background: rgba(246, 248, 252, .85); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; } .header.is-scrolled { background: rgba(255,255,255,.92); border-bottom-color: var(--border); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .header__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; } .header__logo { display: flex; align-items: center; flex: none; } .header__logo img { height: 42px; width: auto; } .header--home .header__logo { align-items: flex-start; align-self: flex-start; --logo-h: 112px; margin-top: 4px; transition: margin-top .55s cubic-bezier(.22,.8,.3,1); } .header--home .header__logo img { height: var(--logo-h); transition: height .55s cubic-bezier(.22,.8,.3,1); } .header--home.is-compact .header__logo, .header--home.menu-open .header__logo { --logo-h: 42px; margin-top: calc((var(--header-h) - 42px) / 2); } .header--home:not(.is-ready) .header__logo, .header--home:not(.is-ready) .header__logo img { transition: none; } @media (prefers-reduced-motion: reduce) { .header--home .header__logo, .header--home .header__logo img { transition: none; } } .nav { display: flex; align-items: center; margin-left: auto; } .nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .nav li { margin: 0; } .nav a { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 10px; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; } .nav a:hover { background: var(--navy-50); text-decoration: none; } .nav .current-menu-item > a, .nav .current_page_parent > a, .nav a[aria-current="page"] { color: var(--orange); } .header__actions { display: flex; align-items: center; gap: 8px; } .header__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: 10px; background: #fff; align-items: center; justify-content: center; flex: none; padding: 0; } .header__toggle svg { width: 22px; height: 22px; } .header__toggle .ico-close { display: none; } .header.menu-open .header__toggle .ico-menu { display: none; } .header.menu-open .header__toggle .ico-close { display: block; } /* ---------- Hero (home) ---------- */ .e-con.hero { --padding-top: clamp(40px, 6vw, 88px); --padding-bottom: clamp(56px, 7vw, 100px); --overflow: hidden; background: radial-gradient(ellipse 60% 48% at 95% 20%, rgba(244,85,13,.08), transparent 70%), radial-gradient(ellipse 60% 48% at 5% 95%, rgba(12,44,87,.07), transparent 75%), var(--bg); } /* Widget HTML decorativo: ocupa a seção inteira e fica atrás do conteúdo */ .e-con > .elementor-widget.deco, .e-con-inner > .elementor-widget.deco { position: absolute; inset: 0; width: auto; margin: 0; pointer-events: none; z-index: 0; } .e-con.hero > .e-con-inner { position: relative; z-index: 1; } .ambient { position: absolute; border-radius: 50%; pointer-events: none; border: 1px solid rgba(12,44,87,.06); } .ambient--1 { width: 680px; height: 680px; right: -300px; top: -320px; } .ambient--2 { width: 900px; height: 900px; right: -420px; top: -430px; } .e-con.hero__grid { --flex-direction: row; --align-items: center; --gap: clamp(28px, 3.5vw, 48px); --column-gap: clamp(28px, 3.5vw, 48px); --row-gap: 28px; position: relative; } .e-con.hero__copy { --width: 42%; --row-gap: 0; --flex-shrink: 1; } .e-con.hero__visual { --width: 58%; --row-gap: 0; } .hero__copy h1 { max-width: 13ch; font-size: clamp(36px, 4.3vw, 54px); } .hero__copy .elementor-widget.lead { margin-top: 22px; } .hero__copy .e-con.btn-row { --margin-top: 32px; } .hero__copy .btn-row .elementor-widget.btn { flex: 1 1 auto; } .hero__copy .btn-row .elementor-widget.btn .elementor-button { width: 100%; padding-inline: 22px; } .hero__copy .elementor-widget.btn-note { margin-top: 14px; } /* As pílulas de canal ficam num widget HTML (div.hero__channels), não num container */ .hero__channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--navy); } .chip svg { width: 18px; height: 18px; } .chip--wa svg { color: var(--green-700); } .chip--web svg { color: var(--blue); } .chip--mail svg { color: var(--purple); } /* Moldura de browser com print do app (container .browser = barra + widget Imagem) */ @media (min-width: 1025px) { .e-con.hero__visual { --margin-right: calc(-1 * clamp(0px, (100vw - var(--container)) / 2 + var(--gutter) - 40px, 160px)); } } .e-con.browser { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --row-gap: 0; --gap: 0; --border-radius: var(--r-lg); --overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card-lg); } .browser__bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #f3f5f9; border-bottom: 1px solid var(--border); } .browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9dfe8; } .browser__url { margin-left: 10px; flex: 1; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--border); font-size: 11.5px; color: var(--muted-2); display: flex; align-items: center; padding: 0 10px; gap: 6px; } .browser__url svg { width: 11px; height: 11px; } .browser img, .browser .elementor-widget-image img { width: 100%; height: auto; display: block; } .browser .elementor-widget-image a { display: block; } .browser--tall img { aspect-ratio: 16 / 10.4; object-fit: cover; object-position: top left; } .browser img, .panel-shot img { cursor: zoom-in; } /* Bolhas flutuantes: widget HTML com a classe float-wrap (posição) e o conteúdo .float (visual) */ .e-con > .elementor-widget.float-wrap { position: absolute; width: auto; z-index: 2; } .float { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card-lg); padding: 10px 12px; display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; color: var(--navy); } .float__ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; } .float__ico svg { width: 18px; height: 18px; } .float small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; } .float-wrap--wa { left: -24px; top: 16%; } .float--wa .float__ico { background: #e4f8ec; color: var(--green-700); } .float-wrap--mail { right: -12px; top: 46%; } .float--mail .float__ico { background: #efeaff; color: var(--purple); } .float-wrap--stat { left: 8%; bottom: -26px; } .float--stat .float__ico { background: var(--orange-50); color: var(--orange); } .float--stat strong { font-size: 15px; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float--wa { animation: floatY 6s ease-in-out infinite; } .float--mail { animation: floatY 7s ease-in-out infinite 1s; } /* ---------- Faixa de canais ---------- */ .e-con.channels { --padding-top: 28px; --padding-bottom: 28px; border-block: 1px solid var(--border); background: #fff; } .e-con.channels > .e-con-inner { --flex-direction: row; --align-items: center; --justify-content: space-between; --flex-wrap: wrap; --gap: 16px 32px; --row-gap: 16px; --column-gap: 32px; } .channels__title, .elementor-widget.channels__title { font-weight: 700; color: var(--navy); font-size: 15px; white-space: nowrap; width: auto; } .channels__list { display: flex; flex-wrap: wrap; gap: 14px 36px; justify-content: flex-end; } .elementor-widget.channels__list { width: auto; } .channel { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); font-size: 15.5px; } .channel svg { width: 26px; height: 26px; } .channel--wa svg { color: var(--green-700); } .channel--web svg { color: var(--blue); } .channel--mail svg { color: var(--purple); } /* ---------- Grades (containers em grade do Elementor) ---------- */ .e-con.stats, .e-con.results, .e-con.cards-3, .e-con.grid-4, .e-con.grid-3, .e-con.plans, .e-con.platforms, .e-con.flow, .e-con.steps--3 { --row-gap: 20px; --column-gap: 20px; } .e-con.cards-3 { --row-gap: 22px; --column-gap: 22px; } .e-con.grid-4, .e-con.grid-3, .e-con.platforms, .e-con.flow { --row-gap: 18px; --column-gap: 18px; } .e-con.plans { --row-gap: 22px; --column-gap: 22px; --align-items: stretch; } /* ---------- Stats ---------- */ .e-con.stat { --padding-top: 26px; --padding-right: 24px; --padding-bottom: 26px; --padding-left: 24px; --row-gap: 8px; --border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); } .stat .elementor-heading-title, .stat strong { display: block; font-size: clamp(30px, 3vw, 38px); font-weight: 800; color: var(--navy); letter-spacing: -.04em; line-height: 1.05; } .stat p, .stat span { display: block; color: var(--muted); font-size: 15px; } /* ---------- Cards genéricos (problema, recursos, complementos) ---------- */ .e-con.pain { --padding-top: 30px; --padding-right: 28px; --padding-bottom: 30px; --padding-left: 28px; --row-gap: 10px; --border-radius: var(--r-xl); background: #fff; border: 1px solid var(--border); } .pain__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--orange-50); color: var(--orange); margin-bottom: 10px; } .pain__ico svg { width: 24px; height: 24px; } .pain p { color: var(--muted); font-size: 15.5px; } .e-con.sec-cta { --margin-top: 44px; --align-items: center; --row-gap: 12px; text-align: center; } .e-con.feat { --padding-top: 24px; --padding-right: 22px; --padding-bottom: 24px; --padding-left: 22px; --row-gap: 10px; --border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); } .feat__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; } .feat__ico svg { width: 21px; height: 21px; } .feat h4 { margin-top: 6px; } .feat p { color: var(--muted); font-size: 14.5px; line-height: 1.5; } .feat .elementor-widget.link-arrow { margin-top: auto; padding-top: 6px; } .e-con.feat--soon { border-style: dashed; background: transparent; } .feat--soon .feat__ico { background: var(--orange-50); color: var(--orange); } .badge-soon { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--orange-50); color: var(--orange-600); font-size: 12px; font-weight: 700; } .elementor-widget.badge-soon-wrap { width: auto; margin-top: auto; } .e-con.addon { --padding-top: 26px; --padding-right: 24px; --padding-bottom: 26px; --padding-left: 24px; --row-gap: 6px; --border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); } .addon__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--orange-50); color: var(--orange); display: grid; place-items: center; margin-bottom: 10px; } .addon__ico svg { width: 21px; height: 21px; } .addon h4 { font-size: 18px; } .addon p { color: var(--muted); font-size: 14.5px; } .addon__price, .addon strong { display: block; margin-top: 8px; color: var(--navy); font-size: 17px; font-weight: 800; } .addon__price small, .addon strong small { font-weight: 500; color: var(--muted); font-size: 13.5px; } /* ---------- Abas de funcionalidades (widget Abas aninhadas) ---------- */ .elementor-widget.feature-tabs { --n-tabs-heading-justify-content: center; --n-tabs-heading-wrap: wrap; --n-tabs-title-gap: 8px; --n-tabs-gap: 40px; --n-tabs-title-padding-block-start: 11px; --n-tabs-title-padding-block-end: 11px; --n-tabs-title-padding-inline-start: 18px; --n-tabs-title-padding-inline-end: 18px; --n-tabs-title-border-radius: var(--r-pill); --n-tabs-border-width: 1px; --n-tabs-border-color: var(--border-2); --n-tabs-title-background-color: #fff; --n-tabs-title-background-color-hover: #fff; --n-tabs-title-background-color-active: var(--navy); --n-tabs-title-color: var(--navy); --n-tabs-title-color-hover: var(--navy); --n-tabs-title-color-active: #fff; --n-tabs-icon-color: var(--navy); --n-tabs-icon-color-hover: var(--navy); --n-tabs-icon-color-active: #fff; --n-tabs-icon-size: 16px; --n-tabs-icon-gap: 8px; --n-tabs-title-font-size: 14.5px; } .elementor-widget.feature-tabs .e-n-tab-title { border-style: solid; font-weight: 700; font-size: 14.5px; font-family: var(--font); transition: background .15s, border-color .15s, color .15s; } .elementor-widget.feature-tabs .e-n-tab-title:hover { border-color: var(--navy); } .elementor-widget.feature-tabs .e-n-tab-title[aria-selected="true"] { border-color: var(--navy); } .elementor-widget.feature-tabs .e-n-tab-title-text { font-size: 14.5px; } .e-con.feature-split { --flex-direction: row; --align-items: center; --gap: clamp(28px, 5vw, 64px); --column-gap: clamp(28px, 5vw, 64px); --row-gap: 28px; } .e-con.feature-split > .e-con:first-child { --width: 45%; } .e-con.feature-split > .e-con:last-child { --width: 55%; } /* Invertido (print à esquerda): como no HTML (grid .9fr 1.1fr), o texto fica com a coluna maior */ .e-con.feature-split--reverse > .e-con:first-child { order: 2; --width: 55%; } .e-con.feature-split--reverse > .e-con:last-child { --width: 45%; } .e-con.feature-split > .e-con { --row-gap: 0; } /* ...menos a grade de mini-cards (Funcionalidades › Canais e integrações), que mantém o espaço entre os cards */ .e-con.feature-split > .e-con.cards-3 { --row-gap: 22px; --column-gap: 22px; } .feature-split h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; margin-bottom: 14px; } .feature-split h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 14px; } .feature-split .elementor-widget.lead { font-size: 17px; } .feature-split .elementor-widget-text-editor:not(.lead) { color: var(--muted); } .feature-split .elementor-widget.checklist { margin-top: 22px; } .feature-split .elementor-widget.link-arrow { margin-top: 24px; } .feature-split .elementor-widget.kicker { margin-bottom: 20px; } /* Lista com check verde (widget Lista de ícones com a classe checklist) */ .elementor-widget.checklist .elementor-icon-list-items { display: grid; gap: 12px; } .elementor-widget.checklist .elementor-icon-list-item { align-items: flex-start; font-size: 16px; line-height: 1.6; padding: 0; margin: 0; } .elementor-widget.checklist .elementor-icon-list-icon { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #e4f8ec; display: grid; place-items: center; margin-top: 2px; } .elementor-widget.checklist .elementor-icon-list-icon svg { width: var(--e-icon-list-icon-size, 13px); height: var(--e-icon-list-icon-size, 13px); margin: 0; fill: var(--green-700); } .elementor-widget.checklist .elementor-icon-list-text { padding-inline-start: 12px; align-self: flex-start; } .elementor-widget.checklist .elementor-icon-list-text strong { font-weight: 700; } .checklist--sm .elementor-icon-list-item { font-size: 15px; } .elementor-widget.checklist--sm .elementor-icon-list-items { gap: 9px; } /* ---------- Canais (cards) ---------- */ .e-con.channel-card { --padding-top: 34px; --padding-right: 30px; --padding-bottom: 34px; --padding-left: 30px; --row-gap: 10px; --border-radius: var(--r-xl); --overflow: hidden; background: #fff; border: 1px solid var(--border); position: relative; } .e-con.channel-card::after { content: ""; position: absolute; inset: auto -40px -40px auto; width: 160px; height: 160px; border-radius: 50%; opacity: .12; pointer-events: none; } .channel-card--wa::after { background: var(--green); } .channel-card--web::after { background: var(--blue); } .channel-card--mail::after { background: var(--purple); } .channel-card__ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 12px; } .channel-card__ico svg { width: 28px; height: 28px; } .channel-card--wa .channel-card__ico { background: #e4f8ec; color: var(--green-700); } .channel-card--web .channel-card__ico { background: #e6eefe; color: var(--blue); } .channel-card--mail .channel-card__ico { background: #efeaff; color: var(--purple); } .channel-card p { color: var(--muted); font-size: 15.5px; } /* Mini-cards de canal dentro de um feature-split (Funcionalidades › Canais e integrações): título do tamanho dos cards da Início, e não o h3 grande do feature-split */ .cobchat .feature-split .channel-card h3 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 0; } .channel-card .elementor-widget.checklist { margin-top: 8px; } /* ---------- Resultados ---------- */ .e-con.result { --padding-top: 28px; --padding-right: 26px; --padding-bottom: 28px; --padding-left: 26px; --row-gap: 10px; --border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .result .elementor-heading-title, .result strong { display: block; font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #fff; } .result .elementor-heading-title span, .result strong span { color: var(--orange); } .result p { color: rgba(255,255,255,.75); font-size: 15px; } .results-note, .elementor-widget.results-note { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.5); } /* ---------- Onboarding ---------- */ .e-con.onboarding { --flex-direction: row; --align-items: center; --gap: clamp(32px, 5vw, 72px); --column-gap: clamp(32px, 5vw, 72px); --row-gap: 32px; } .e-con.onboarding > .e-con { --width: 50%; --row-gap: 0; } .e-con.steps { --row-gap: 14px; --margin-top: 26px; } .e-con.step { --flex-direction: row; --align-items: flex-start; --gap: 16px; --column-gap: 16px; --padding-top: 18px; --padding-right: 20px; --padding-bottom: 18px; --padding-left: 20px; --border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); } .e-con.step > .e-con { --row-gap: 4px; } .e-con.step > .elementor-widget.step__n-wrap { width: auto; } .step__n { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; } .step p { color: var(--muted); font-size: 15px; } .e-con.team-card { --padding-top: 36px; --padding-right: 36px; --padding-bottom: 36px; --padding-left: 36px; --row-gap: 10px; --border-radius: var(--r-xl); --overflow: hidden; background: var(--navy); color: #fff; position: relative; } .e-con.team-card::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; right: -120px; top: -140px; background: radial-gradient(circle, rgba(244,85,13,.45), transparent 70%); pointer-events: none; } .team-card > * { position: relative; z-index: 1; } .team-card h3 { color: #fff; font-size: 26px; } .team-card p { color: rgba(255,255,255,.75); } .avatars { display: flex; margin-top: 16px; } .avatars span { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--navy); margin-left: -12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; } .avatars span:first-child { margin-left: 0; } .team-card .elementor-widget.btn { margin-top: 16px; } /* ---------- Teaser de planos ---------- */ .e-con.teaser { --flex-direction: row; --align-items: center; --gap: 40px; --column-gap: 40px; --row-gap: 24px; --padding-top: clamp(32px, 4vw, 56px); --padding-right: clamp(32px, 4vw, 56px); --padding-bottom: clamp(32px, 4vw, 56px); --padding-left: clamp(32px, 4vw, 56px); --border-radius: var(--r-xl); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); } .e-con.teaser > .e-con:first-child { --width: 60%; --row-gap: 12px; } .e-con.teaser > .e-con.teaser__price { --width: 40%; --row-gap: 0; text-align: right; } .e-con.teaser__price > .elementor-widget.btn { align-self: flex-end; } .teaser h2 { font-size: clamp(26px, 3vw, 36px); } .teaser .elementor-widget.lead { font-size: 17px; } .teaser__price .teaser__from { color: var(--muted); font-size: 14px; } .teaser__price .elementor-heading-title { font-size: clamp(40px, 4.5vw, 56px); letter-spacing: -.05em; color: var(--navy); line-height: 1; margin: 6px 0 18px; } .teaser__price .elementor-heading-title em { font-style: normal; font-size: .4em; letter-spacing: 0; color: var(--muted); font-weight: 600; } /* ---------- FAQ (widget Accordion aninhado) ---------- */ .elementor-widget.faq { --n-accordion-item-title-space-between: 12px; --n-accordion-border-width: 1px; --n-accordion-border-color: var(--border); --n-accordion-border-style: solid; --n-accordion-border-radius: var(--r-lg); --n-accordion-padding: 20px 24px; --n-accordion-title-font-size: 17px; --n-accordion-icon-size: 22px; --n-accordion-icon-normal-color: var(--orange); --n-accordion-icon-active-color: var(--orange); --n-accordion-icon-hover-color: var(--orange); --n-accordion-title-normal-color: var(--navy); --n-accordion-title-hover-color: var(--navy); --n-accordion-title-active-color: var(--navy); --n-accordion-item-title-distance-from-content: 0; } .elementor-widget.faq .e-n-accordion-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .elementor-widget.faq .e-n-accordion-item-title { border: 0; border-radius: 0; font-weight: 700; font-family: var(--font); } .elementor-widget.faq .e-n-accordion-item-title-text { font-weight: 700; line-height: 1.6; margin: 0; letter-spacing: -.01em; } /* O CSS gerado por página (.elementor-N .elementor-element-X) força 0px; aqui vence por especificidade */ .cobchat .elementor-widget.faq.elementor-widget-n-accordion { --n-accordion-item-title-space-between: 12px; } .elementor-widget.faq .e-n-accordion-item[open] > .e-n-accordion-item-title { border-bottom: 1px solid var(--border); } .elementor-widget.faq .e-n-accordion-item-title-icon { transition: transform .2s; } .elementor-widget.faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon { transform: rotate(45deg); } .elementor-widget.faq .e-n-accordion-item > .e-con { --padding-top: 18px; --padding-right: 24px; --padding-bottom: 24px; --padding-left: 24px; color: var(--muted); font-size: 16px; line-height: 1.65; } .elementor-widget.faq .e-n-accordion-item > .e-con a { font-weight: 600; } /* ---------- CTA final ---------- */ .e-con.final { --padding-top: clamp(64px, 8vw, 112px); --padding-bottom: clamp(64px, 8vw, 112px); } .e-con.final__box { --padding-top: clamp(48px, 6vw, 84px); --padding-right: clamp(24px, 5vw, 64px); --padding-bottom: clamp(48px, 6vw, 84px); --padding-left: clamp(24px, 5vw, 64px); --border-radius: var(--r-xl); --overflow: hidden; --align-items: center; --row-gap: 16px; background: var(--navy); color: #fff; text-align: center; position: relative; } .final__box > *:not(.deco) { position: relative; z-index: 1; } .final__box .glow { position: absolute; border-radius: 50%; pointer-events: none; } .final__box .glow--1 { width: 520px; height: 520px; left: -200px; bottom: -300px; background: radial-gradient(circle, rgba(244,85,13,.5), transparent 68%); } .final__box .glow--2 { width: 460px; height: 460px; right: -160px; top: -240px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); } .final__box h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); max-width: 18ch; margin-inline: auto; } .final__box .elementor-widget.lead { color: rgba(255,255,255,.75); margin-inline: auto; } .final__box .e-con.btn-row { --justify-content: center; --margin-top: 16px; } .final__box .elementor-widget.btn-note { color: rgba(255,255,255,.65); } .final__box .elementor-widget.btn-note .elementor-icon-list-item { color: rgba(255,255,255,.65); justify-content: center; } .final__box .elementor-widget.btn-note .elementor-icon-list-icon svg { fill: var(--green); } /* ---------- Footer (PHP: footer.php) ---------- */ .footer { background: #fff; border-top: 1px solid var(--border); padding-top: clamp(48px, 6vw, 72px); } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } .footer__brand img { height: 44px; width: auto; } .footer__brand p { color: var(--muted); font-size: 15px; margin-top: 18px; max-width: 32ch; } .footer__brand p a { font-weight: 700; } .social { display: flex; gap: 8px; margin-top: 20px; } .social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--navy); } .social a:hover { background: var(--navy-50); } .social svg { width: 18px; height: 18px; } .footer__col h4 { margin-bottom: 14px; } .footer__col ul { display: grid; gap: 10px; } .footer__col a { color: var(--muted); font-size: 15px; } .footer__col a:hover { color: var(--orange); text-decoration: none; } .footer__bottom { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--border); padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted-2); font-size: 13.5px; } .footer__bottom a { color: var(--muted); } /* ========================================================= PÁGINA: Planos ========================================================= */ .e-con.page-hero { --padding-top: clamp(48px, 6vw, 88px); --padding-bottom: clamp(32px, 4vw, 48px); --align-items: center; --row-gap: 20px; --overflow: hidden; text-align: center; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(244,85,13,.08), transparent 70%), var(--bg); } .page-hero h1 { max-width: 18ch; margin-inline: auto; } .page-hero .elementor-widget.lead { margin-inline: auto; } .pay-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .pay-badges span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--navy); } .pay-badges svg { width: 17px; height: 17px; color: var(--orange); } .e-con.plan { --padding-top: 34px; --padding-right: 30px; --padding-bottom: 30px; --padding-left: 30px; --row-gap: 0; --border-radius: var(--r-xl); background: #fff; border: 1.5px solid var(--border); position: relative; } .e-con.plan--featured { border-color: var(--orange); box-shadow: var(--shadow-card-lg); } .elementor-widget.plan__badge-wrap { position: absolute; top: -14px; left: 30px; width: auto; } .plan__badge { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); background: var(--orange); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; } .plan h3 { font-size: 24px; } .plan__tag, .plan .elementor-widget.plan__tag { color: var(--muted); font-size: 15px; margin-top: 6px; min-height: 48px; } .plan__price { margin-top: 22px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .plan__price .cur { font-size: 18px; font-weight: 700; color: var(--muted); } .plan__price .val { font-size: 52px; font-weight: 800; letter-spacing: -.05em; color: var(--navy); line-height: 1; } .plan__price .per { font-size: 14px; color: var(--muted); width: 100%; margin-top: 4px; } .plan__price .val--text { font-size: 34px; } .plan .elementor-widget.btn { margin-top: 24px; } .plan__label, .elementor-widget.plan__label .elementor-heading-title { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0; } .elementor-widget.plan__label { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); } .plan .elementor-widget.checklist { margin-top: 12px; } .plan .elementor-widget.checklist .elementor-icon-list-items { gap: 11px; } .plan .elementor-widget.checklist .elementor-icon-list-item { font-size: 15px; } .plan .elementor-widget.checklist .elementor-icon-list-icon { width: 20px; height: 20px; } .plan .elementor-widget.checklist .elementor-icon-list-icon svg { width: 12px; height: 12px; } .plan .elementor-widget.checklist .elementor-icon-list-text { padding-inline-start: 10px; } .plans-note, .elementor-widget.plans-note { margin-top: 26px; text-align: center; color: var(--muted); font-size: 14px; } /* Calculadora (shortcode [cobchat_calc]) */ .calc { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; } .calc__panel { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px; } .calc__plan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; } .calc__plan label { cursor: pointer; position: relative; } .calc__plan input { position: absolute; opacity: 0; pointer-events: none; } .calc__plan span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border: 1.5px solid var(--border-2); border-radius: var(--r-md); font-weight: 700; color: var(--navy); font-size: 16px; } .calc__plan span small { font-weight: 600; color: var(--muted); font-size: 13px; } .calc__plan input:checked + span { border-color: var(--orange); background: var(--orange-50); } .calc__plan input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; } .calc__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); } .calc__row:first-of-type { border-top: 0; padding-top: 0; } .calc__row h4 { font-size: 16px; } .calc__row p { font-size: 13.5px; color: var(--muted); margin-top: 2px; } .stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border-2); border-radius: 10px; overflow: hidden; flex: none; } .stepper button { width: 40px; height: 40px; border: 0; background: #fff; font-size: 20px; font-weight: 700; color: var(--navy); display: grid; place-items: center; padding: 0; } .stepper button:hover { background: var(--navy-50); } .stepper button:disabled { color: var(--muted-2); cursor: not-allowed; background: #fff; } .stepper input { width: 60px; height: 40px; padding: 0; text-align: center; font: inherit; font-weight: 800; font-size: 16px; color: var(--navy); border: 0; border-inline: 1.5px solid var(--border-2); border-radius: 0; background: #fff; -moz-appearance: textfield; appearance: textfield; } .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stepper input:focus { outline: none; background: var(--orange-50); box-shadow: inset 0 0 0 2px var(--orange); } .switch { position: relative; display: inline-flex; align-items: center; flex: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__knob { width: 50px; height: 30px; border-radius: 999px; background: #d9dfe8; position: relative; transition: background .2s; } .switch__knob::after { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fff; top: 3px; left: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .2s; } .switch input:checked + .switch__knob { background: var(--orange); } .switch input:checked + .switch__knob::after { transform: translateX(20px); } .switch input:focus-visible + .switch__knob { outline: 3px solid var(--orange); outline-offset: 2px; } .calc__summary { background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: 30px; position: sticky; top: calc(var(--header-h) + var(--admin-bar, 0px) + 16px); } .calc__summary h3 { color: #fff; font-size: 20px; margin-bottom: 18px; } .calc__lines { display: grid; gap: 10px; } .calc__lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgba(255,255,255,.8); } .calc__lines div[hidden] { display: none; } .calc__total { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); } .calc__total small { display: block; color: rgba(255,255,255,.6); font-size: 14px; } .calc__total strong { display: block; font-size: 46px; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; margin-top: 4px; } .calc__total strong em { font-style: normal; font-size: 16px; letter-spacing: 0; font-weight: 600; color: rgba(255,255,255,.6); margin-left: 4px; } .calc__summary .btn { margin-top: 22px; width: 100%; } .calc__summary .note { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.5); } /* Tabela comparativa (widget HTML com a classe compare-wrap) */ .compare-wrap { overflow: clip; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; } .compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; } .compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--border); } .compare th:first-child, .compare td:first-child { text-align: left; } .compare thead th { position: sticky; top: calc(var(--header-h) + var(--admin-bar, 0px)); background: #fff; z-index: 1; font-size: 16px; color: var(--navy); border-bottom: 2px solid var(--border-2); } .compare thead th small { display: block; font-weight: 600; color: var(--muted); font-size: 13px; } .compare thead th.is-featured { color: var(--orange); } .compare tbody th { font-weight: 600; color: var(--text); } .compare .group td, .compare .group th { background: var(--bg); font-weight: 800; color: var(--navy); font-size: 14px; } .compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; } .compare .ok svg { width: 20px; height: 20px; margin-inline: auto; color: var(--green-700); } .compare .no svg { width: 18px; height: 18px; margin-inline: auto; color: #c4ccd8; } .compare td.txt { color: var(--muted); font-size: 14px; } .e-con.consult { --flex-direction: row; --align-items: center; --justify-content: space-between; --gap: 24px; --column-gap: 24px; --row-gap: 16px; --padding-top: 30px; --padding-right: 34px; --padding-bottom: 30px; --padding-left: 34px; --border-radius: var(--r-xl); --margin-top: 40px; background: #fff; border: 1px solid var(--border); } .e-con.consult > .e-con { --row-gap: 6px; --width: auto; --flex-grow: 1; } .consult h3 { font-size: 22px; } .consult p { color: var(--muted); } /* ========================================================= PÁGINA: Contato ========================================================= */ .e-con.contact { --flex-direction: row; --align-items: flex-start; --gap: clamp(28px, 4vw, 56px); --column-gap: clamp(28px, 4vw, 56px); --row-gap: 28px; } .e-con.contact > .e-con:first-child { --width: 57%; --row-gap: 0; } .e-con.contact > .e-con.contact__side { --width: 43%; --row-gap: 14px; } .form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow-card-lg); } .form-card__title { font-size: 26px; } .form-card__sub { color: var(--muted); margin: 6px 0 24px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-weight: 600; font-size: 14px; color: var(--navy); } .field small { font-weight: 500; color: var(--muted); } .field input, .field select, .field textarea { width: 100%; font: inherit; font-weight: 500; font-size: 15px; color: var(--text); padding: 13px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; } .field textarea { resize: vertical; min-height: 112px; } .field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; 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='%236c7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .field select:invalid { color: var(--muted-2); } .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(244,85,13,.14); } .form-card.was-validated .field :invalid { border-color: #d93025; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 4px 0 22px; line-height: 1.5; font-weight: 500; } .consent input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--orange); } .form-card.was-validated .consent input:invalid { outline: 2px solid #d93025; outline-offset: 1px; border-radius: 3px; } .form-card .btn { width: 100%; } .form-card .btn:disabled { opacity: .6; cursor: wait; transform: none; } .form__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--muted); } .form__hint svg { width: 16px; height: 16px; color: var(--green-700); } .form__err { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #b3261e; font-weight: 600; font-size: 14px; } .form__ok { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #e4f8ec; color: var(--green-700); font-weight: 600; font-size: 15px; } .form__ok:focus { outline: none; } .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .e-con.contact-card { --flex-direction: row; --align-items: flex-start; --gap: 16px; --column-gap: 16px; --padding-top: 22px; --padding-right: 22px; --padding-bottom: 22px; --padding-left: 22px; --border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); } .e-con.contact-card > .e-con { --row-gap: 4px; } .e-con.contact-card > .elementor-widget.contact-card__ico-wrap { width: auto; } .contact-card__ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #e4f8ec; color: var(--green-700); } .contact-card__ico svg { width: 22px; height: 22px; } .contact-card__ico--mail { background: #efeaff; color: var(--purple); } .contact-card__ico--clock { background: var(--orange-50); color: var(--orange); } .contact-card__ico--support { background: var(--navy-50); color: var(--navy); } .contact-card h3 { font-size: 17px; } .contact-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; } .contact-card .elementor-widget.link-arrow { margin-top: 6px; } .e-con.steps--3 { --margin-top: 0; --align-items: start; } /* ========================================================= PÁGINA: Funcionalidades / Integrações ========================================================= */ .e-con.subnav { --position: sticky; top: calc(var(--header-h) + var(--admin-bar, 0px)); z-index: 40; --padding-top: 10px; --padding-bottom: 10px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--border); } .subnav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .subnav__inner::-webkit-scrollbar { display: none; } .subnav__inner a { flex: none; padding: 9px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; color: var(--muted); } .subnav__inner a:hover { background: var(--navy-50); text-decoration: none; color: var(--navy); } .subnav__inner a.is-active { background: var(--navy); color: #fff; } .e-con.fblock { --padding-top: clamp(56px, 7vw, 96px); --padding-bottom: clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--header-h) + 64px); } .e-con.fblock + .e-con.fblock { border-top: 1px solid var(--border); } .fblock__ico { width: 50px; height: 50px; border-radius: 14px; background: var(--orange-50); color: var(--orange); display: grid; place-items: center; margin-bottom: 10px; } .fblock__ico svg { width: 26px; height: 26px; } .e-con.panel-shot { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --border-radius: var(--r-lg); --overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card-lg); background: #fff; } .panel-shot img { width: 100%; height: auto; display: block; } .panel-shot .elementor-widget-image a { display: block; } .e-con.flow__step { --padding-top: 28px; --padding-right: 26px; --padding-bottom: 28px; --padding-left: 26px; --row-gap: 8px; --border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); } .flow__n { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; margin-bottom: 8px; } .flow__step p { color: var(--muted); font-size: 15px; } .e-con.platform { --padding-top: 28px; --padding-right: 20px; --padding-bottom: 28px; --padding-left: 20px; --row-gap: 4px; --align-items: center; --border-radius: var(--r-lg); text-align: center; background: #fff; border: 1px solid var(--border); } .platform__ico svg { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--navy); } .platform h4 { font-size: 16px; } .platform p { color: var(--muted); font-size: 14px; } /* ---------- Tamanhos de título por componente ---------- O CSS do kit do Elementor (.elementor-kit-N h2 {...}) carrega depois deste arquivo; o prefixo .cobchat (classe do body) dá a estas regras prioridade sobre o kit sem perder a edição por elemento no editor. */ .cobchat .hero__copy h1 { font-size: clamp(36px, 4.3vw, 54px); } .cobchat .feature-split h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; } .cobchat .feature-split h2 { font-size: clamp(28px, 3.2vw, 38px); } .cobchat .team-card h3 { font-size: 26px; } .cobchat .teaser h2 { font-size: clamp(26px, 3vw, 36px); } .cobchat .final__box h2 { font-size: clamp(30px, 4vw, 48px); } .cobchat .plan h3 { font-size: 24px; } .cobchat .addon h4 { font-size: 18px; } .cobchat .consult h3 { font-size: 22px; } .cobchat .form-card__title { font-size: 26px; } .cobchat .calc__row h4 { font-size: 16px; } .cobchat .calc__summary h3 { font-size: 20px; } .cobchat .contact-card h3 { font-size: 17px; } .cobchat .platform h4 { font-size: 16px; } .cobchat .elementor-widget.faq .e-n-accordion-item-title-text { font-size: var(--n-accordion-title-font-size, 17px); } /* ---------- Reveal discreto (classe reveal nos cards) ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .reveal.is-visible, .elementor-editor-active .reveal, .elementor-editor-preview .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .float--wa, .float--mail { animation: none; } .btn, .link-arrow svg { transition: none; } } /* ========================================================= Responsivo ========================================================= */ @media (max-width: 1100px) { .float-wrap--wa { left: -8px; } .float-wrap--mail { right: -8px; } } @media (max-width: 1024px) { .e-con.hero__grid { --flex-direction: column; } .e-con.hero__copy, .e-con.hero__visual { --width: 100%; } .hero__copy h1 { max-width: 16ch; } .e-con.hero__visual { --margin-top: 12px; } .float-wrap--stat { bottom: -18px; } .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .e-con.feature-split, .e-con.onboarding, .e-con.teaser, .e-con.contact { --flex-direction: column; } .e-con.feature-split > .e-con:first-child, .e-con.feature-split > .e-con:last-child, .e-con.feature-split--reverse > .e-con:first-child, .e-con.feature-split--reverse > .e-con:last-child, .e-con.onboarding > .e-con, .e-con.teaser > .e-con:first-child, .e-con.teaser > .e-con.teaser__price, .e-con.contact > .e-con:first-child, .e-con.contact > .e-con.contact__side { --width: 100%; } .e-con.feature-split--reverse > .e-con:first-child { order: 0; } .e-con.teaser > .e-con.teaser__price { text-align: left; } .e-con.teaser__price > .elementor-widget.btn { align-self: flex-start; } .calc { grid-template-columns: 1fr; } .calc__summary { position: static; } } /* Header: menu hambúrguer antes dos demais breakpoints, porque o menu com 6 itens não cabe abaixo de ~1080px */ @media (max-width: 1080px) { .nav { display: none; } .header__actions .btn--ghost { display: none; } .header__toggle { display: inline-flex; } .header.menu-open .nav { display: block; position: absolute; left: 0; right: 0; top: var(--header-h); background: #fff; border-bottom: 1px solid var(--border); padding: 12px var(--gutter) 20px; box-shadow: 0 24px 40px rgba(21,51,88,.12); } .header.menu-open .nav ul { flex-direction: column; align-items: stretch; gap: 4px; } .header.menu-open .nav a { padding: 14px 12px; font-size: 16px; display: flex; } } @media (max-width: 860px) { :root { --header-h: 66px; } .compare-wrap { overflow-x: auto; } .compare thead th { position: static; } .header__logo img { height: 36px; } .header--home .header__logo { --logo-h: 60px; } .header--home.is-compact .header__logo, .header--home.menu-open .header__logo { --logo-h: 36px; margin-top: calc((var(--header-h) - 36px) / 2); } .e-con.plan--featured { order: -1; } .e-con.channels > .e-con-inner { --justify-content: flex-start; } .channels__list { justify-content: flex-start; } .e-con.consult { --flex-direction: column; --align-items: flex-start; } } @media (max-width: 560px) { :root { --gutter: 16px; } .field-row { grid-template-columns: 1fr; } .form-card { padding: 22px 18px; } .header--home .header__logo { --logo-h: 36px; margin-top: calc((var(--header-h) - 36px) / 2); } body { font-size: 16px; } .footer__grid { grid-template-columns: 1fr 1fr; } .e-con.btn-row > .elementor-widget.btn { width: 100%; } .e-con.btn-row > .elementor-widget.btn .elementor-button { width: 100%; } .e-con > .elementor-widget.float-wrap--wa, .e-con > .elementor-widget.float-wrap--mail { display: none; } .float-wrap--stat { left: 12px; bottom: -16px; } .calc__plan { grid-template-columns: 1fr; } .calc__row { flex-direction: column; align-items: flex-start; } .e-con.plan { --padding-top: 30px; --padding-right: 22px; --padding-bottom: 24px; --padding-left: 22px; } .plan__price .val { font-size: 44px; } .e-con.pain, .e-con.channel-card { --padding-top: 26px; --padding-right: 22px; --padding-bottom: 26px; --padding-left: 22px; } } /* ========================================================= Âncoras abaixo do cabeçalho fixo (seções e widgets com ID) ========================================================= */ .elementor-element[id] { scroll-margin-top: calc(var(--header-h) + var(--admin-bar, 0px) + 16px); } /* ========================================================= Lightbox dos prints (assets/js/main.js; o mesmo do site HTML) ========================================================= */ .zoomable { cursor: zoom-in; } .zoomable:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(12, 44, 87, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__img { max-width: min(1400px, 94vw); max-height: 84vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 40px 100px rgba(0,0,0,.45); background: #fff; transform: scale(.96); transition: transform .2s ease; cursor: zoom-out; } .lightbox.is-open .lightbox__img { transform: scale(1); } .lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: var(--shadow-card-lg); cursor: pointer; } .lightbox__close svg { width: 20px; height: 20px; } .lightbox__caption { max-width: 90vw; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: var(--navy); font-size: 13.5px; font-weight: 600; text-align: center; margin: 0; } .lightbox__caption[hidden] { display: none; } body.has-lightbox { overflow: hidden; } @media (max-width: 560px) { .lightbox { padding: 12px; } .lightbox__img { border-radius: 10px; max-height: 80vh; } } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__img { transition: none; } } /* ========================================================= Páginas legais (Política de privacidade) ========================================================= */ .e-con.legal { --row-gap: 0; } .legal .elementor-widget-text-editor { color: var(--muted); font-size: 16.5px; line-height: 1.7; } .legal .elementor-widget-text-editor p { margin: 0 0 14px; } .legal .elementor-widget-text-editor ul { padding-left: 22px; margin: 0 0 14px; display: grid; gap: 8px; } .legal .elementor-widget-text-editor strong { color: var(--navy); font-weight: 600; } .legal .elementor-widget-heading { margin-top: 28px; margin-bottom: 12px; } .cobchat .legal h2 { font-size: 24px; } .legal__toc { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: 20px 24px; margin: 8px 0 20px; } .legal__toc strong { display: block; color: var(--navy); margin-bottom: 10px; } .legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; } .legal__toc li { padding: 3px 0; break-inside: avoid; } .legal__toc a { color: var(--navy-500); font-weight: 600; } @media (max-width: 640px) { .legal__toc ol { columns: 1; } } /* Foco por teclado no botão de fechar do lightbox (o reset do Hello põe um anel preto retangular em todo