/* ========================================================================== GABI AI — site institucional · folha de estilo compartilhada Brand tokens + componentes. Tema claro/escuro por prefers-color-scheme e por [data-theme] (o toggle carimba o ). Uma fonte de verdade pra todas as páginas (index, funcionalidades, planos, cases, blog). ========================================================================== */ :root { --bg: #f7f5f1; --surface: #ffffff; --surface-2: #fbfaf8; --ink: #0b051d; --ink-soft: rgba(11, 5, 29, 0.60); --ink-faint: rgba(11, 5, 29, 0.40); --line: rgba(11, 5, 29, 0.10); --card: #f6f2ff; --pink: #ffa8cd; --pink-hover: #ff97c3; --rose-deep: #b02a67; --eggplant: #2c2242; --eggplant-deep: #1a1030; --gold: #a87d1f; --green: #2f9e5f; --wa-out: #d9fdd3; --wa-in: #ffffff; --wa-bg: #efe7dd; --radius: 18px; --shadow: 0 1px 2px rgba(11,5,29,.04), 0 12px 34px -18px rgba(11,5,29,.22); --shadow-lg: 0 30px 80px -40px rgba(11,5,29,.45); --maxw: 1140px; --font: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #14111c; --surface: #1e1a2b; --surface-2: #191524; --ink: #f3f1f7; --ink-soft: rgba(243, 241, 247, 0.66); --ink-faint: rgba(243, 241, 247, 0.42); --line: rgba(243, 241, 247, 0.13); --card: #221c33; --pink: #ffa8cd; --pink-hover: #ffb8d6; --rose-deep: #ffbcda; --eggplant: #efe7dd; --gold: #e3c05a; --green: #4fd58a; --wa-out: #144d37; --wa-in: #1f2c33; --wa-bg: #0d1418; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7); --shadow-lg: 0 40px 90px -40px rgba(0,0,0,.8); } } :root[data-theme="dark"] { --bg: #14111c; --surface: #1e1a2b; --surface-2: #191524; --ink: #f3f1f7; --ink-soft: rgba(243,241,247,0.66); --ink-faint: rgba(243,241,247,0.42); --line: rgba(243,241,247,0.13); --card: #221c33; --pink: #ffa8cd; --pink-hover: #ffb8d6; --rose-deep: #ffbcda; --eggplant: #efe7dd; --gold: #e3c05a; --green: #4fd58a; --wa-out: #144d37; --wa-in: #1f2c33; --wa-bg: #0d1418; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7); --shadow-lg: 0 40px 90px -40px rgba(0,0,0,.8); } :root[data-theme="light"] { --bg: #f7f5f1; --surface: #ffffff; --surface-2: #fbfaf8; --ink: #0b051d; --ink-soft: rgba(11,5,29,0.60); --ink-faint: rgba(11,5,29,0.40); --line: rgba(11,5,29,0.10); --card: #f6f2ff; --pink: #ffa8cd; --pink-hover: #ff97c3; --rose-deep: #b02a67; --eggplant: #2c2242; --gold: #a87d1f; --green: #2f9e5f; --wa-out: #d9fdd3; --wa-in: #ffffff; --wa-bg: #efe7dd; --shadow: 0 1px 2px rgba(11,5,29,.04), 0 12px 34px -18px rgba(11,5,29,.22); --shadow-lg: 0 30px 80px -40px rgba(11,5,29,.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; font-weight: 800; } h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); } h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); } h3 { font-size: 1.28rem; letter-spacing: -0.02em; line-height: 1.15; } p { margin: 0; } a { color: inherit; text-decoration: none; } .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-deep); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--pink); border-radius: 2px; } .eyebrow.center { justify-content: center; } .lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--ink-soft); line-height: 1.55; } .tnum { font-variant-numeric: tabular-nums; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; padding: 14px 22px; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; transition: transform .16s ease, background .16s ease, border-color .16s ease; white-space: nowrap; } .btn:active { transform: scale(.975); } .btn-pink { background: var(--pink); color: #0b051d; box-shadow: 0 10px 24px -12px rgba(255,168,205,.9); } .btn-pink:hover { background: var(--pink-hover); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink-faint); } .btn-dark { background: var(--ink); color: var(--bg); } .btn-sm { padding: 10px 16px; font-size: 14px; } /* Nav */ header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .nav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -0.04em; } .logo .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--pink); position: relative; flex: none; box-shadow: inset 0 0 0 1px rgba(11,5,29,.06); display: grid; place-items: center; } .logo .mark::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #0b051d; box-shadow: 6px 0 0 -3px #0b051d; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 15px; color: var(--ink-soft); font-weight: 500; transition: color .15s; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-links a.active { font-weight: 700; } .nav-right { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); } .theme-toggle:hover { color: var(--ink); } .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; place-items: center; } .mobile-menu { display: none; border-bottom: 1px solid var(--line); background: var(--bg); } .mobile-menu.open { display: block; } .mobile-menu nav { display: flex; flex-direction: column; padding: 8px 24px 18px; } .mobile-menu a { padding: 12px 0; font-size: 16px; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .mobile-menu a:last-child { border-bottom: 0; } @media (max-width: 860px) { .nav-links { display: none; } .nav-toggle { display: grid; } .nav-cta-desktop { display: none; } } /* Dropdown "Para o seu nicho" ------------------------------------------- */ .nav-nicho { position: relative; } .nicho-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 500; color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; transition: color .15s; } .nicho-btn svg { transition: transform .18s; } .nav-nicho:hover .nicho-btn, .nav-nicho:focus-within .nicho-btn { color: var(--ink); } .nav-nicho:hover .nicho-btn svg, .nav-nicho:focus-within .nicho-btn svg { transform: rotate(180deg); } .nicho-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); width: 306px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px -24px rgba(11,5,29,.5); opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; z-index: 60; } .nicho-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* ponte: hover não cai no gap */ .nav-nicho:hover .nicho-menu, .nav-nicho:focus-within .nicho-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nicho-menu a { display: block; padding: 10px 12px; border-radius: 11px; transition: background .14s; } .nicho-menu a:hover { background: color-mix(in srgb, var(--pink) 16%, transparent); } .nicho-menu a.active { background: color-mix(in srgb, var(--pink) 22%, transparent); } .nicho-menu a b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; } .nicho-menu a span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; } .mm-group { padding: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } /* Faixa de nichos (cross-link no rodapé das páginas de nicho) */ .nicho-cross { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 22px; } .nicho-cross a { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: transform .14s, border-color .14s; } .nicho-cross a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pink) 55%, var(--line)); } .nicho-cross a b { display: block; font-size: 15px; color: var(--ink); } .nicho-cross a span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; } @media (max-width: 760px){ .nicho-cross { grid-template-columns: 1fr 1fr; } } /* Hero (home) */ .hero { padding: clamp(48px, 8vw, 92px) 0 40px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .hero h1 { margin-top: 20px; } .hero h1 .hi { background: linear-gradient(transparent 62%, var(--pink) 62%); padding: 0 2px; } .hero .lead { margin-top: 22px; max-width: 30ch; } .hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; } .hero-note b { color: var(--ink-soft); font-weight: 600; } /* Page hero (interior pages) */ .page-hero { padding: clamp(46px, 7vw, 84px) 0 clamp(20px, 3vw, 34px); } .page-hero .lead { margin-top: 20px; max-width: 56ch; } .page-hero h1 { margin-top: 16px; font-size: clamp(2.3rem, 5vw, 3.7rem); } .page-hero.center { text-align: center; } .page-hero.center .eyebrow { justify-content: center; } .page-hero.center .lead { margin-left: auto; margin-right: auto; } .crumb { font-size: 13px; color: var(--ink-faint); margin-bottom: 8px; } .crumb a:hover { color: var(--ink-soft); } /* WhatsApp phone */ .phone { justify-self: center; width: 340px; max-width: 100%; background: var(--eggplant-deep); border-radius: 40px; padding: 12px; box-shadow: var(--shadow-lg); position: relative; } .phone .screen { border-radius: 30px; overflow: hidden; background: var(--wa-bg); position: relative; } .wa-head { background: var(--eggplant); color: #fff; display: flex; align-items: center; gap: 11px; padding: 14px 16px 12px; } .wa-head .av { width: 40px; height: 40px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; font-weight: 800; color: #0b051d; font-size: 18px; flex: none; } .wa-head .who { line-height: 1.2; } .wa-head .who b { font-size: 15.5px; } .wa-head .who span { font-size: 12px; color: rgba(255,255,255,.72); display: block; } .wa-body { padding: 16px 13px 14px; min-height: 428px; display: flex; flex-direction: column; gap: 9px; background-image: radial-gradient(rgba(11,5,29,.035) 1px, transparent 1px); background-size: 22px 22px; } .bub { max-width: 82%; padding: 8px 11px 9px; border-radius: 12px; font-size: 14.5px; line-height: 1.42; box-shadow: 0 1px 1px rgba(11,5,29,.08); opacity: 0; transform: translateY(8px); animation: pop .45s cubic-bezier(.2,.7,.3,1) forwards; } .bub .t { font-size: 10.5px; color: var(--ink-faint); float: right; margin: 6px 0 -2px 10px; } .bub.in { background: var(--wa-in); color: var(--ink); align-self: flex-start; border-top-left-radius: 4px; } .bub.out { background: var(--wa-out); color: var(--ink); align-self: flex-end; border-top-right-radius: 4px; } @keyframes pop { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .bub { animation: none; opacity: 1; transform: none; } } .typing { align-self: flex-start; background: var(--wa-in); border-radius: 12px; border-top-left-radius: 4px; padding: 12px 14px; display: inline-flex; gap: 4px; box-shadow: 0 1px 1px rgba(11,5,29,.08); } .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s infinite; } .typing i:nth-child(2){ animation-delay: .2s; } .typing i:nth-child(3){ animation-delay: .4s; } @keyframes blink { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} } .booking { align-self: center; background: color-mix(in srgb, var(--green) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); color: var(--ink); border-radius: 12px; padding: 9px 13px; font-size: 12.8px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; opacity: 0; animation: pop .5s ease forwards; } .booking .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb,var(--green) 22%, transparent); } /* Sections */ section { padding: clamp(64px, 9vw, 104px) 0; } section.tight { padding: clamp(40px, 6vw, 68px) 0; } .section-alt { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sec-head { max-width: 640px; } .sec-head.center { max-width: 720px; margin: 0 auto; text-align: center; } .sec-head h2 { margin-top: 16px; } .sec-head .lead { margin-top: 18px; } .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* Stat strip */ .stat-strip { background: var(--ink); color: var(--bg); border-radius: 26px; padding: 40px clamp(24px,4vw,48px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; box-shadow: var(--shadow); } @media (max-width: 780px){ .stat-strip { grid-template-columns: repeat(2,1fr); gap: 30px 24px; } } .stat .n { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; } .stat .n .u { color: var(--pink); } .stat .l { margin-top: 6px; font-size: 14px; color: color-mix(in srgb, var(--bg) 66%, transparent); line-height: 1.4; } /* Pain cards */ .pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; } @media (max-width: 760px){ .pain-grid { grid-template-columns: 1fr; } } .pain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow); } .pain .ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--rose-deep) 12%, var(--surface)); color: var(--rose-deep); } .pain h3 { font-size: 1.08rem; } .pain p { margin-top: 5px; font-size: 14.6px; color: var(--ink-soft); line-height: 1.5; } /* Gabi block */ .bia { background: linear-gradient(160deg, var(--eggplant), var(--eggplant-deep)); color: #f3eef8; border-radius: 30px; padding: clamp(36px,5vw,64px); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; box-shadow: var(--shadow-lg); } @media (max-width: 880px){ .bia { grid-template-columns: 1fr; gap: 34px; } } .bia .eyebrow { color: var(--pink); } .bia .eyebrow::before { background: var(--pink); } .bia h2 { color: #fff; margin-top: 16px; } .bia p.lead { color: rgba(243,238,248,.76); margin-top: 18px; } .bia-quote { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; } .qb { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-left: 3px solid var(--pink); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; } .qb b { color: var(--pink); } .bia-traits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .bia-traits li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: rgba(243,238,248,.9); } .bia-traits .chk { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--pink); color: #0b051d; display: grid; place-items: center; font-weight: 800; font-size: 13px; margin-top: 1px; } /* Feature grid */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; } @media (max-width: 920px){ .feat-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px){ .feat-grid { grid-template-columns: 1fr; } } .feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease; } .feat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pink) 55%, var(--line)); } .feat .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--pink); color: #0b051d; display: grid; place-items: center; margin-bottom: 18px; } .feat h3 { font-size: 1.14rem; } .feat p { margin-top: 8px; font-size: 14.6px; color: var(--ink-soft); line-height: 1.52; } .feat .tag { margin-top: 14px; display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rose-deep); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 46px; counter-reset: s; } @media (max-width: 780px){ .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); } .step .num { font-size: 13px; font-weight: 800; color: var(--rose-deep); letter-spacing: .1em; } .step h3 { margin-top: 12px; font-size: 1.14rem; } .step p { margin-top: 8px; font-size: 14.6px; color: var(--ink-soft); } /* Panel showcase */ .panel-show { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; } @media (max-width: 900px){ .panel-show { grid-template-columns: 1fr; gap: 36px; } } .os { background: var(--eggplant-deep); border-radius: 34px; padding: 14px; box-shadow: var(--shadow-lg); max-width: 330px; width: 100%; justify-self: center; } .os .os-screen { background: #14111c; border-radius: 24px; padding: 22px 18px 26px; color: #f3f1f7; } .os .hello { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; } .os .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 20px; } .os .card { background: #fff; color: #0b051d; border-radius: 15px; padding: 12px 13px; } .os .card .k { font-size: 11px; color: rgba(11,5,29,.5); font-weight: 600; } .os .card .v { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; } .os .apps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px 8px; } .os .app { text-align: center; font-size: 10px; color: rgba(243,241,247,.75); } .os .app .sq { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg,#ffa8cd,#e97bb0); margin: 0 auto 6px; display: grid; place-items: center; color: #0b051d; } .panel-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 18px; } .panel-list li { display: flex; gap: 14px; } .panel-list .chk { width: 26px; height: 26px; flex: none; border-radius: 8px; background: color-mix(in srgb,var(--green) 16%, var(--surface)); color: var(--green); display: grid; place-items: center; font-weight: 800; } .panel-list b { font-weight: 700; } .panel-list span { color: var(--ink-soft); font-size: 15px; } /* Pricing */ .price-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; margin-top: 46px; } @media (max-width: 820px){ .price-wrap { grid-template-columns: 1fr; } } .price-card { border-radius: 26px; padding: 36px; box-shadow: var(--shadow); } .price-main { background: var(--pink); color: #0b051d; } .price-main .eyebrow { color: #7a1746; } .price-main .eyebrow::before { background: #0b051d; } .price-main .big { font-size: clamp(2.6rem,5vw,3.4rem); font-weight: 800; letter-spacing: -.03em; margin-top: 14px; } .price-main .big small { font-size: 1.05rem; font-weight: 600; opacity: .7; letter-spacing: 0; } .price-main .sub { margin-top: 10px; font-size: 15.5px; color: rgba(11,5,29,.7); max-width: 34ch; } .price-main ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; } .price-main li { display: flex; gap: 10px; font-size: 15px; font-weight: 500; } .price-main li b { font-weight: 800; } .price-side { background: var(--ink); color: var(--bg); display: flex; flex-direction: column; } .price-side h3 { color: var(--bg); font-size: 1.3rem; } .price-side p { color: color-mix(in srgb,var(--bg) 66%, transparent); margin-top: 12px; font-size: 15px; } .price-side .spacer { flex: 1; min-height: 22px; } /* Modo cards (planos) */ .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; } @media (max-width: 820px){ .mode-grid { grid-template-columns: 1fr; } } .mode { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 32px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; } .mode.feature { border-color: color-mix(in srgb, var(--pink) 60%, var(--line)); } .mode .badge { position: absolute; top: 20px; right: 22px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0b051d; background: var(--pink); padding: 5px 11px; border-radius: 999px; } .mode h3 { font-size: 1.4rem; } .mode .desc { margin-top: 10px; color: var(--ink-soft); font-size: 15px; min-height: 46px; } .mode ul { list-style: none; padding: 0; margin: 22px 0 24px; display: flex; flex-direction: column; gap: 13px; } .mode li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; } .mode li .c { color: var(--green); flex: none; margin-top: 2px; } .mode .foot { margin-top: auto; } /* Comparison table */ .cmp { width: 100%; border-collapse: collapse; margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .cmp th, .cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15px; } .cmp thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; } .cmp td:first-child, .cmp th:first-child { font-weight: 600; } .cmp tr:last-child td { border-bottom: 0; } .cmp .yes { color: var(--green); font-weight: 700; } .cmp .no { color: var(--ink-faint); } .cmp-scroll { overflow-x: auto; } /* Feature detail rows */ .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .frow + .frow { margin-top: clamp(56px, 8vw, 96px); } .frow.rev .frow-media { order: -1; } @media (max-width: 880px){ .frow { grid-template-columns: 1fr; gap: 30px; } .frow.rev .frow-media { order: 0; } } .frow h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; } .frow .lead { margin-top: 16px; } .frow ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; } .frow ul li { display: flex; gap: 11px; font-size: 15.3px; color: var(--ink-soft); align-items: flex-start; } .frow ul .c { color: var(--green); flex: none; margin-top: 2px; } .frow-media { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 30px; box-shadow: var(--shadow); min-height: 240px; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .frow-media .kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); } /* Mini WhatsApp bubbles for media panes (static) */ .mini-chat { display: flex; flex-direction: column; gap: 8px; } .mini { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 1px rgba(11,5,29,.08); } .mini.in { background: var(--wa-in); color: var(--ink); align-self: flex-start; border-top-left-radius: 4px; border: 1px solid var(--line); } .mini.out { background: var(--wa-out); color: var(--ink); align-self: flex-end; border-top-right-radius: 4px; } /* Metric tiles */ .metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } @media (max-width: 620px){ .metrics { grid-template-columns: 1fr 1fr; } } .metric { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; } .metric .n { font-size: clamp(1.7rem,3vw,2.3rem); font-weight: 800; letter-spacing: -.03em; } .metric .n .u { color: var(--rose-deep); } .metric .l { margin-top: 5px; font-size: 13.5px; color: var(--ink-soft); } /* Trust band */ .trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; } @media (max-width: 760px){ .trust { grid-template-columns: 1fr; } } .trust .t { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .trust .t .ic { color: var(--rose-deep); margin-bottom: 12px; } .trust .t h3 { font-size: 1.05rem; } .trust .t p { margin-top: 7px; font-size: 14.4px; color: var(--ink-soft); } /* Cases */ .case-list { display: flex; flex-direction: column; gap: 22px; margin-top: 46px; } .case { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: clamp(28px,4vw,42px); box-shadow: var(--shadow); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } @media (max-width: 860px){ .case { grid-template-columns: 1fr; gap: 28px; } } .case .avatar { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(160deg, var(--pink), #e97bb0); color: #0b051d; display: grid; place-items: center; font-weight: 800; font-size: 20px; } .case .who { display: flex; align-items: center; gap: 14px; } .case .who b { font-size: 1.15rem; display: block; } .case .who span { font-size: 13.5px; color: var(--ink-soft); } .case blockquote { margin: 20px 0 0; font-size: clamp(1.15rem,2.1vw,1.5rem); line-height: 1.4; letter-spacing: -.01em; } .case .quote-mark { color: var(--pink); font-weight: 800; } .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; } @media (max-width: 860px){ .testi-grid { grid-template-columns: 1fr; } } .testi { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); } .testi p { font-size: 15.5px; line-height: 1.55; } .testi .by { margin-top: 18px; display: flex; align-items: center; gap: 12px; } .testi .by .a { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; color: var(--rose-deep); } .testi .by b { font-size: 14.5px; } .testi .by span { font-size: 12.5px; color: var(--ink-soft); display: block; } .stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; margin-bottom: 12px; } /* Blog */ .post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; } @media (max-width: 900px){ .post-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px){ .post-grid { grid-template-columns: 1fr; } } .post { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; } .post:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pink) 55%, var(--line)); } .post .thumb { height: 148px; background: linear-gradient(150deg, var(--pink), #e97bb0); position: relative; } .post .thumb.eg { background: linear-gradient(150deg, var(--eggplant), var(--eggplant-deep)); } .post .thumb.gr { background: linear-gradient(150deg, #7ed0a2, var(--green)); } .post .thumb .cat { position: absolute; left: 14px; bottom: 12px; background: rgba(255,255,255,.9); color: #0b051d; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; } .post .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .post .meta { font-size: 12.5px; color: var(--ink-faint); } .post h3 { margin-top: 8px; font-size: 1.16rem; } .post p { margin-top: 9px; font-size: 14.4px; color: var(--ink-soft); line-height: 1.5; flex: 1; } .post .more { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--rose-deep); display: inline-flex; gap: 6px; align-items: center; } .post.featured { grid-column: 1 / -1; flex-direction: row; } .post.featured .thumb { width: 44%; height: auto; min-height: 260px; flex: none; } .post.featured .body { justify-content: center; padding: clamp(26px,4vw,44px); } .post.featured h3 { font-size: clamp(1.5rem,2.6vw,2.1rem); } .post.featured p { flex: none; font-size: 15.5px; } @media (max-width: 700px){ .post.featured { flex-direction: column; } .post.featured .thumb { width: 100%; min-height: 180px; } } /* Article (blog post) */ .article { max-width: 720px; margin: 0 auto; } .article .meta { font-size: 13.5px; color: var(--ink-faint); } .article h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 14px 0 0; } .article .body { margin-top: 34px; } .article .body p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); } .article .body h2 { font-size: clamp(1.4rem,2.6vw,1.8rem); margin-top: 42px; } .article .body h3 { margin-top: 30px; } .article .body ul { margin: 18px 0 0; padding-left: 22px; color: var(--ink-soft); } .article .body ul li { margin-top: 10px; line-height: 1.6; } .article .body blockquote { margin: 30px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--pink); font-size: 1.2rem; line-height: 1.5; color: var(--ink); font-weight: 500; } .article .body strong { color: var(--ink); font-weight: 700; } /* FAQ */ .faq { max-width: 780px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; } details.qa { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; box-shadow: var(--shadow); } details.qa summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px; align-items: center; } details.qa summary::-webkit-details-marker { display: none; } details.qa summary .pm { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: transform .2s, background .2s; color: var(--ink-soft); } details.qa[open] summary .pm { transform: rotate(45deg); background: var(--pink); color: #0b051d; border-color: transparent; } details.qa .a { padding: 0 0 20px; color: var(--ink-soft); font-size: 15.2px; line-height: 1.6; } /* CTA band (reusable) */ .final { text-align: center; } .final-card { background: linear-gradient(155deg, var(--eggplant), var(--eggplant-deep)); color: #fff; border-radius: 34px; padding: clamp(44px,7vw,84px) 24px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .final-card::before { content:""; position:absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,168,205,.5), transparent); top: -140px; right: -80px; filter: blur(6px); } .final-card h2 { color: #fff; position: relative; max-width: 18ch; margin: 0 auto; } .final-card p { color: rgba(255,255,255,.78); margin: 18px auto 0; max-width: 46ch; position: relative; } .final-form { position: relative; margin: 30px auto 0; display: flex; gap: 10px; max-width: 460px; flex-wrap: wrap; justify-content: center; } .final-form input { flex: 1; min-width: 220px; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 15px; font-family: inherit; } .final-form input::placeholder { color: rgba(255,255,255,.55); } .final-form input:focus { outline: 2px solid var(--pink); outline-offset: 1px; } .final-mini { position: relative; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.6); } /* Footer */ footer.ft { border-top: 1px solid var(--line); padding: 52px 0 40px; margin-top: 20px; } .ft-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .ft-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin: 0 0 14px; font-weight: 700; } .ft-col a { display: block; color: var(--ink-soft); font-size: 14.5px; padding: 4px 0; } .ft-col a:hover { color: var(--ink); } .ft-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; } .ft-brand { max-width: 260px; } .ft-brand p { font-size: 14px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; } /* Bloco institucional (OPS-06.10) — dados legais da TANGE que a Meta lê na verificação de negócio. Sempre visível ao final, em fonte legível (NUNCA reduzir a ponto de exigir zoom no celular). */ .ft-legal { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); } .ft-legal-desc { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.55; max-width: 74ch; } .ft-legal-org { font-size: 13.5px; color: var(--ink-faint); margin: 0; line-height: 1.65; } .ft-legal-org strong { color: var(--ink-soft); font-weight: 700; } .ft-legal-org a { color: var(--ink-soft); } .ft-legal-org a:hover { color: var(--ink); } @media (max-width: 640px) { .ft-legal { margin-top: 32px; padding-top: 22px; } .ft-legal-org { font-size: 13.5px; } } /* Notice / honesty banner */ .notice { margin-top: 20px; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--ink-soft); border-radius: 14px; padding: 14px 18px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; } .notice .ic { color: var(--gold); flex: none; margin-top: 1px; } svg { display: block; } :focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; border-radius: 4px; }