/* ================================================================ n.Call — Folha de estilos principal Hospedar em repositório público e referenciar no : ================================================================ */ /* ── Variáveis globais ────────────────────────────────────────── */ :root { --nc-primary: #1B6EC2; --nc-primary-dark: #134E8A; --nc-primary-light: #E8F1FB; --nc-accent: #8B5CF6; --nc-green: #10B981; --nc-red: #DC2626; --nc-text: #1A1A2E; --nc-text-soft: #6B7280; --nc-border: #E5E7EB; --nc-surface: #FFFFFF; --nc-bg-alt: #F3F7FF; --nc-bg-subtle: #FAFBFC; --nc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --nc-shadow-md: 0 4px 16px rgba(27,110,194,0.08); --nc-shadow-lg: 0 10px 24px rgba(27,110,194,0.18); --nc-radius-sm: 8px; --nc-radius-md: 14px; --nc-radius-lg: 18px; --nc-radius-pill: 999px; --nc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --nc-transition: 0.25s cubic-bezier(0.4,0,0.2,1); } /* ── Reset mínimo ────────────────────────────────────────────── */ .nc-page *, .nc-page *::before, .nc-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .nc-page { font-family: var(--nc-font); color: var(--nc-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── Scroll reveal (CSS-only: anima na entrada sem depender de JS) ── */ .nc-reveal { animation: nc-fade-up 0.65s cubic-bezier(0.4,0,0.2,1) both; } .nc-reveal.delay-1 { animation-delay: 0.10s; } .nc-reveal.delay-2 { animation-delay: 0.20s; } .nc-reveal.delay-3 { animation-delay: 0.30s; } .nc-reveal.delay-4 { animation-delay: 0.40s; } .nc-reveal.delay-5 { animation-delay: 0.50s; } /* ── Keyframes ───────────────────────────────────────────────── */ @keyframes nc-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.08); } } @keyframes nc-float-r { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 15px) scale(1.06); } } @keyframes nc-ping { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.55); } 70% { box-shadow: 0 0 0 12px rgba(139,92,246,0); } 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); } } @keyframes nc-ping-cta { 0% { box-shadow: 0 0 0 0 rgba(27,110,194,0.40); } 80% { box-shadow: 0 0 0 18px rgba(27,110,194,0); } 100% { box-shadow: 0 0 0 0 rgba(27,110,194,0); } } @keyframes nc-ping-green { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.50); } 80% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } @keyframes nc-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes nc-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } /* ── Componentes comuns ──────────────────────────────────────── */ .nc-section { padding: 88px 24px; } .nc-inner { max-width: 1080px; margin: 0 auto; } .nc-inner--narrow { max-width: 780px; margin: 0 auto; } .nc-inner--mid { max-width: 880px; margin: 0 auto; } .nc-section-head { text-align: center; margin-bottom: 52px; } /* Eyebrow / pílula de label */ .nc-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: var(--nc-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 18px; } .nc-eyebrow--blue { background: var(--nc-primary-light); color: var(--nc-primary-dark); } .nc-eyebrow--red { background: #FEF2F2; color: var(--nc-red); } .nc-eyebrow--purple { background: #F5F3FF; color: var(--nc-accent); } .nc-eyebrow--white { background: rgba(255,255,255,0.18); color: #fff; } .nc-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nc-accent); animation: nc-ping 2s ease-out infinite; flex: none; } /* Títulos */ .nc-title { font-size: clamp(28px, 4.5vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--nc-text); margin-bottom: 14px; } .nc-title--white { color: #ffffff; } .nc-title--large { font-size: clamp(32px, 5.5vw, 52px); } .nc-title em { font-style: italic; font-weight: 600; color: var(--nc-primary); } /* Subtítulo de seção */ .nc-lead { font-size: 16px; line-height: 1.65; color: var(--nc-text-soft); max-width: 620px; margin: 0 auto; } .nc-lead--white { color: rgba(255,255,255,0.88); } /* ── Blobs decorativos ───────────────────────────────────────── */ .nc-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .nc-blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.45; will-change: transform; } .nc-blob--a { width: 340px; height: 340px; background: #BFDBFE; top: -80px; right: -60px; animation: nc-float 14s ease-in-out infinite; } .nc-blob--b { width: 260px; height: 260px; background: #DDD6FE; bottom: -60px; left: -40px; animation: nc-float-r 18s ease-in-out infinite; } .nc-blob--c { width: 200px; height: 200px; background: #A7F3D0; top: 30%; left: 10%; animation: nc-float 22s ease-in-out infinite reverse; } /* ── 1. HERO ─────────────────────────────────────────────────── */ .nc-hero { position: relative; isolation: isolate; overflow: hidden; padding: 96px 24px 88px; background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%); text-align: center; } .nc-hero__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; } .nc-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 32px auto; max-width: 860px; } .nc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-pill); font-size: 13px; font-weight: 500; color: var(--nc-text); box-shadow: var(--nc-shadow-sm); cursor: default; transition: transform var(--nc-transition), box-shadow var(--nc-transition), border-color var(--nc-transition), color var(--nc-transition); } .nc-chip:hover { transform: translateY(-3px); border-color: var(--nc-primary); color: var(--nc-primary-dark); box-shadow: 0 8px 20px rgba(27,110,194,0.12); } .nc-chip img { flex: none; vertical-align: middle; } .nc-hero__cta-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 8px; } .nc-hero__trust { font-size: 13px; color: var(--nc-text-soft); display: inline-flex; align-items: center; gap: 6px; } .nc-hero__trust::before { content: "✓"; color: var(--nc-green); font-weight: 700; } /* ── Botões ──────────────────────────────────────────────────── */ .nc-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-family: var(--nc-font); font-size: 15px; font-weight: 600; text-decoration: none; border-radius: var(--nc-radius-md); cursor: pointer; transition: transform var(--nc-transition), box-shadow var(--nc-transition), background var(--nc-transition); } .nc-btn--primary { background: var(--nc-primary); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 24px rgba(27,110,194,0.28); } .nc-btn--primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(27,110,194,0.40); animation: nc-ping-cta 2.4s ease-out infinite; pointer-events: none; } .nc-btn--primary:hover { background: var(--nc-primary-dark); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 14px 30px rgba(19,78,138,0.36); } .nc-btn--white { background: #ffffff; color: var(--nc-primary-dark); box-shadow: 0 8px 20px rgba(0,0,0,0.14); } .nc-btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.20); } .nc-btn--lg { padding: 18px 38px; font-size: 16px; } /* ── 2. O PROBLEMA ───────────────────────────────────────────── */ .nc-problema { padding: 88px 24px; background: var(--nc-surface); } .nc-cards-problema { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .nc-card-problema { flex: 1 1 220px; max-width: 260px; padding: 28px 22px; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: 16px; box-shadow: var(--nc-shadow-sm); text-align: center; transition: transform var(--nc-transition), box-shadow var(--nc-transition); } .nc-card-problema:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(220,38,38,0.10); } .nc-card-problema__stat { font-size: 44px; font-weight: 700; color: var(--nc-red); line-height: 1; margin-bottom: 8px; } .nc-card-problema__title { font-size: 14px; font-weight: 600; color: var(--nc-text); margin-bottom: 6px; } .nc-card-problema__desc { font-size: 13px; line-height: 1.55; color: var(--nc-text-soft); } .nc-footnote { margin: 32px auto 0; max-width: 640px; font-size: 12px; color: #9CA3AF; text-align: center; line-height: 1.5; } /* ── 3. COMO FUNCIONA ────────────────────────────────────────── */ .nc-como { padding: 88px 24px; background: var(--nc-bg-alt); } .nc-steps { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; } .nc-step { flex: 1 1 280px; max-width: 320px; padding: 32px 28px; background: var(--nc-surface); border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-md); transition: transform var(--nc-transition), box-shadow var(--nc-transition); } .nc-step:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(27,110,194,0.14); } .nc-step__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--nc-primary); color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 20px; } .nc-step__title { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--nc-text); margin-bottom: 10px; } .nc-step__desc { font-size: 14px; line-height: 1.6; color: var(--nc-text-soft); } /* ── 4. COMPLEMENTO ──────────────────────────────────────────── */ .nc-complemento { padding: 88px 24px; background: var(--nc-surface); } .nc-table-wrap { border: 1px solid var(--nc-border); border-radius: 16px; overflow: hidden; box-shadow: var(--nc-shadow-sm); } .nc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .nc-table thead tr { background: #F5F7FA; } .nc-table th { padding: 14px 20px; text-align: left; font-size: 11px; font-weight: 700; color: var(--nc-text-soft); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--nc-border); } .nc-table th:not(:first-child) { text-align: center; } .nc-table th.nc-table__th--highlight { color: var(--nc-primary-dark); background: #F0F7FF; } .nc-table td { padding: 14px 20px; border-bottom: 1px solid var(--nc-border); } .nc-table tbody tr:last-child td { border-bottom: none; } .nc-table td:not(:first-child) { text-align: center; } .nc-table td:first-child { font-weight: 500; } .nc-table td.nc-table__td--highlight { background: #FAFCFF; color: var(--nc-green); font-weight: 700; } .nc-table td.nc-table__td--no { color: var(--nc-red); } .nc-table tbody tr { transition: background var(--nc-transition); } .nc-table tbody tr:hover { background: #F9FBFF; } /* ── 5. PARA QUEM ────────────────────────────────────────────── */ .nc-para-quem { padding: 88px 24px; background: var(--nc-bg-subtle); } .nc-cards-publico { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .nc-card-publico { flex: 1 1 190px; max-width: 220px; padding: 28px 20px; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: 14px; text-align: center; transition: transform var(--nc-transition), box-shadow var(--nc-transition), border-color var(--nc-transition); } .nc-card-publico:hover { transform: translateY(-4px); border-color: var(--nc-primary); box-shadow: 0 12px 28px rgba(27,110,194,0.10); } .nc-card-publico img { margin-bottom: 14px; transition: transform var(--nc-transition); } .nc-card-publico:hover img { transform: scale(1.08); } .nc-card-publico__title { font-size: 15px; font-weight: 600; color: var(--nc-text); margin-bottom: 6px; } .nc-card-publico__desc { font-size: 13px; line-height: 1.5; color: var(--nc-text-soft); } /* ── 6. ROADMAP ──────────────────────────────────────────────── */ .nc-roadmap { padding: 88px 24px; background: var(--nc-surface); } .nc-roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .nc-roadmap-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--nc-bg-subtle); border-radius: 12px; border-left: 3px solid var(--nc-accent); transition: transform var(--nc-transition), box-shadow var(--nc-transition), background var(--nc-transition); } .nc-roadmap-item:hover { transform: translateX(4px); background: #F5F3FF; box-shadow: 0 4px 16px rgba(139,92,246,0.10); } .nc-roadmap-item img { flex: none; } .nc-roadmap-item__title { font-size: 14px; font-weight: 600; color: var(--nc-text); margin-bottom: 4px; } .nc-roadmap-item__desc { font-size: 13px; line-height: 1.5; color: var(--nc-text-soft); } /* ── 7. SUS GRATUITO ─────────────────────────────────────────── */ .nc-sus { padding: 88px 24px; background: linear-gradient(135deg, #134E8A 0%, #1B6EC2 100%); color: #fff; text-align: center; position: relative; overflow: hidden; } .nc-sus::before { content: ""; position: absolute; width: 400px; height: 400px; background: rgba(255,255,255,0.06); border-radius: 50%; top: -120px; right: -100px; } .nc-sus::after { content: ""; position: absolute; width: 280px; height: 280px; background: rgba(255,255,255,0.05); border-radius: 50%; bottom: -80px; left: -60px; } .nc-sus__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .nc-sus__title { font-size: clamp(32px, 5vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: #fff; margin-bottom: 18px; } .nc-sus__lead { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto 32px; } /* ── 8. INVESTIMENTO ─────────────────────────────────────────── */ .nc-investimento { padding: 88px 24px; background: var(--nc-surface); } .nc-preco-group-title { font-size: 17px; font-weight: 600; color: var(--nc-text); text-align: center; margin: 0 0 20px; } .nc-preco-cards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 40px; } .nc-preco-card { flex: 1 1 240px; max-width: 280px; padding: 28px 24px; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: 16px; text-align: center; transition: transform var(--nc-transition), box-shadow var(--nc-transition); } .nc-preco-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(27,110,194,0.12); } .nc-preco-card--destaque { background: #F0F7FF; border: 2px solid var(--nc-primary); position: relative; } .nc-preco-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: var(--nc-primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--nc-radius-pill); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .nc-preco-card__faixa { font-size: 11px; font-weight: 700; color: var(--nc-text-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .nc-preco-card--destaque .nc-preco-card__faixa { color: var(--nc-primary-dark); } .nc-preco-card__valor { font-size: 38px; font-weight: 700; color: var(--nc-primary); line-height: 1; margin-bottom: 6px; } .nc-preco-card__unidade { font-size: 13px; color: var(--nc-text-soft); } .nc-preco-ps { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 32px; } .nc-preco-ps-card { flex: 1 1 200px; max-width: 250px; padding: 20px; background: var(--nc-bg-subtle); border: 1px solid var(--nc-border); border-radius: 12px; text-align: center; transition: transform var(--nc-transition); } .nc-preco-ps-card:hover { transform: translateY(-2px); } .nc-preco-ps-card__faixa { font-size: 11px; font-weight: 700; color: var(--nc-text-soft); text-transform: uppercase; margin-bottom: 6px; } .nc-preco-ps-card__valor { font-size: 24px; font-weight: 700; color: var(--nc-primary); } .nc-preco-ps-card__unidade { font-size: 12px; color: var(--nc-text-soft); } .nc-preco-obs { text-align: center; font-size: 13px; color: var(--nc-text-soft); margin-top: 8px; } .nc-preco-obs--small { font-size: 11px; color: #9CA3AF; margin-top: 10px; } .nc-preco-obs a { color: var(--nc-primary); text-decoration: none; font-weight: 600; } .nc-preco-obs a:hover { text-decoration: underline; } /* ── 9. SOBRE / VALIDAÇÃO ────────────────────────────────────── */ .nc-sobre { padding: 88px 24px; background: var(--nc-bg-alt); text-align: center; } .nc-sobre__lead { font-size: 16px; line-height: 1.75; color: var(--nc-text-soft); max-width: 660px; margin: 0 auto 44px; } .nc-stats { display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; } .nc-stat { text-align: center; transition: transform var(--nc-transition); } .nc-stat:hover { transform: scale(1.06); } .nc-stat__num { font-size: 34px; font-weight: 700; color: var(--nc-primary); line-height: 1; } .nc-stat__label { font-size: 12px; color: var(--nc-text-soft); margin-top: 6px; line-height: 1.5; } /* ── 10. FAQ ─────────────────────────────────────────────────── */ .nc-faq { padding: 88px 24px; background: var(--nc-surface); } .nc-faq-list { margin-top: 0; } .nc-faq details { margin-bottom: 10px; padding: 18px 22px; background: var(--nc-bg-subtle); border: 1px solid var(--nc-border); border-radius: 12px; transition: box-shadow var(--nc-transition), border-color var(--nc-transition); } .nc-faq details[open] { border-color: var(--nc-primary); box-shadow: 0 0 0 3px var(--nc-primary-light); } .nc-faq summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--nc-text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; } .nc-faq summary::-webkit-details-marker { display: none; } .nc-faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--nc-primary); flex: none; transition: transform var(--nc-transition); } .nc-faq details[open] summary::after { transform: rotate(45deg); } .nc-faq details p { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--nc-text-soft); } /* ── 11. CTA FINAL ───────────────────────────────────────────── */ .nc-cta-final { padding: 88px 24px; background: linear-gradient(135deg, #1B6EC2 0%, #134E8A 100%); color: #fff; text-align: center; position: relative; overflow: hidden; } .nc-cta-final::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E") repeat; pointer-events: none; } .nc-cta-final__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .nc-cta-final__title { font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: #fff; margin-bottom: 16px; } .nc-cta-final__lead { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.9); max-width: 540px; margin: 0 auto 36px; } .nc-cta-final__trust { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,0.72); } /* ── 12. WHATSAPP FLUTUANTE ──────────────────────────────────── */ .nc-whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: #25D366; color: #ffffff; font-family: var(--nc-font); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: var(--nc-radius-pill); box-shadow: 0 8px 24px rgba(37,211,102,0.38); transition: transform var(--nc-transition), box-shadow var(--nc-transition); } .nc-whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37,211,102,0.45); animation: nc-ping-green 2.2s ease-out infinite; pointer-events: none; } .nc-whatsapp-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 32px rgba(37,211,102,0.48); } .nc-whatsapp-float img { flex: none; vertical-align: middle; } /* ── Responsivo ──────────────────────────────────────────────── */ @media (max-width: 768px) { .nc-section, .nc-hero, .nc-problema, .nc-como, .nc-complemento, .nc-para-quem, .nc-roadmap, .nc-sus, .nc-investimento, .nc-sobre, .nc-faq, .nc-cta-final { padding: 64px 18px; } .nc-title { font-size: clamp(24px, 7vw, 34px); } .nc-sus__title { font-size: clamp(26px, 7vw, 38px); } .nc-cta-final__title { font-size: clamp(24px, 7vw, 36px); } .nc-table { font-size: 12px; } .nc-table th, .nc-table td { padding: 10px 12px; } .nc-whatsapp-float span.nc-whatsapp-float__label { display: none; } .nc-whatsapp-float { padding: 14px; } } /* ── Acessibilidade: sem animação ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .nc-blob, .nc-eyebrow__dot, .nc-btn--primary::before, .nc-whatsapp-float::before { animation: none !important; } .nc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } * { transition-duration: 0.01ms !important; } }