/* familia.css — o molde denso dos agentes gerados por catálogo * * MISSÃO FAMILIA-AGENTES, 28/08/2026. * Só as páginas geradas por scripts/gerar-landing-agente.mjs usam este arquivo. * As 10 landings artesanais continuam em produto.css, intocadas. * * Duas regras de forma vindas do §4 da RECON-VITEX: * · item 8 — ritmo de inversão de fundo: claro → cinza → claro → cor → claro. * Cria seção percebida sem custo de arte. * · identidade por VARIÁVEL, não por desenho: --fa-accent no é a única * cor que muda entre um agente e outro. Nenhum hex novo por agente. * * Herda tipografia, botões e grid de tokens.css / components.css. */ /* ── herói ───────────────────────────────────────────────────────────────── */ .section_fa-hero { padding: 96px 0 56px; } .fa-volta { display: inline-block; margin-bottom: 28px; font-size: .9375rem; color: #585858; text-decoration: none; } .fa-volta:hover { color: #0f172a; } .fa-hero_marca { display: flex; align-items: center; gap: 20px; } .fa-hero_glifo { display: grid; place-items: center; flex: none; width: 68px; height: 68px; border-radius: 18px; background: color-mix(in srgb, var(--g) 14%, transparent); color: var(--g); font-size: 2rem; font-weight: 600; line-height: 1; } .fa-hero_marca h1 { margin: 0; } .fa-hero_cat { margin: 4px 0 0; font-size: 1.0625rem; font-weight: 500; } .fa-hero_frase { max-width: 62ch; margin: 28px 0 0; font-size: 1.25rem; line-height: 1.55; color: #334155; } .fa-hero_ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .button.is-ghost { background: transparent; color: #0f172a; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); } .button.is-ghost:hover { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .38); } /* ── estado honesto (só em agente que ainda não roda) ────────────────────── */ /* Sem data-obra-only DE PROPÓSITO: a auditoria de 28/08 mostrou que os * [PENDENTE] da casa estavam todos escondidos do visitante. Marcar o buraco só * para nós não é marcar o buraco. */ .section_fa-estado { background: #FFFBEB; border-block: 1px solid #FDE68A; } .fa-estado { max-width: 78ch; } .fa-estado h2 { margin: 0 0 12px; } .fa-estado > p { margin: 0; color: #3F3018; line-height: 1.6; } .fa-estado_grid { display: grid; gap: 20px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .fa-estado_rot { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #92400E; } .fa-estado_grid p { margin: 0; color: #3F3018; line-height: 1.55; } /* ── as 6 funcionalidades, grade 2×3 ─────────────────────────────────────── */ .fa-grid-6 { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); } .fa-card { padding: 24px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); } .fa-card h3 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 600; } .fa-card p { margin: 0; color: #585858; line-height: 1.55; font-size: .9375rem; } /* ── faixa de encaixe: para quem é + integrações ─────────────────────────── */ .section_fa-encaixe { background: #F6F7F9; border-block: 1px solid #E8EAEE; } .fa-encaixe { display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .fa-personas { margin: 20px 0 0; padding: 0; list-style: none; } .fa-personas li { position: relative; padding: 0 0 0 26px; margin-bottom: 14px; color: #334155; line-height: 1.55; } .fa-personas li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 100%; background: var(--fa-accent); } .fa-pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .fa-pilula { padding: 7px 14px; border-radius: 999px; background: #fff; font-size: .875rem; color: #334155; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); } .fa-nota { margin: 16px 0 0; font-size: .8125rem; color: #6B7280; } /* ── rotina em 4 passos ──────────────────────────────────────────────────── */ .fa-passos { display: grid; gap: 20px; margin: 36px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: passo; } .fa-passos li { padding-top: 16px; border-top: 2px solid var(--fa-accent); } .fa-passo_n { display: block; margin-bottom: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--fa-accent); } .fa-passos h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; } .fa-passos p { margin: 0; color: #585858; font-size: .9375rem; line-height: 1.55; } /* ── contra o processo atual ─────────────────────────────────────────────── */ .fa-contra { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .fa-contra_col { padding: 28px; border-radius: 18px; background: #F6F7F9; } .fa-contra_col.is-com { background: color-mix(in srgb, var(--g) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 28%, transparent); } .fa-contra_col h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 600; } .fa-contra_col ul { margin: 0; padding-left: 20px; } .fa-contra_col li { margin-bottom: 10px; color: #334155; line-height: 1.5; } /* ── dúvidas ─────────────────────────────────────────────────────────────── */ .fa-faq { margin-top: 32px; max-width: 78ch; } .fa-faq_item { border-bottom: 1px solid #E8EAEE; } .fa-faq_item summary { padding: 20px 0; cursor: pointer; font-weight: 500; font-size: 1.0625rem; list-style: none; } .fa-faq_item summary::-webkit-details-marker { display: none; } .fa-faq_item summary::after { content: "+"; float: right; color: var(--fa-accent); font-weight: 600; } .fa-faq_item[open] summary::after { content: "−"; } .fa-faq_item p { margin: 0 0 22px; color: #585858; line-height: 1.6; max-width: 68ch; } /* ── fecho ───────────────────────────────────────────────────────────────── */ .section_fa-fecho { background: color-mix(in srgb, var(--g) 8%, #fff); border-top: 1px solid color-mix(in srgb, var(--g) 20%, transparent); } .section_fa-fecho h2 { margin: 0 0 12px; } .section_fa-fecho p { margin: 0; color: #334155; max-width: 62ch; } /* ── glifo tipográfico no dropdown, para agente ainda sem arte ───────────── */ .fa-glifo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; background: rgba(15, 23, 42, .06); color: #334155; font-weight: 600; } .fa-glifo.is-mini { font-size: .875rem; } .helpera_drawer__item.is-atual { background: rgba(15, 23, 42, .05); } /* ── telefone ────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .section_fa-hero { padding: 64px 0 40px; } .fa-hero_glifo { width: 54px; height: 54px; border-radius: 14px; font-size: 1.5rem; } .fa-hero_frase { font-size: 1.0625rem; } .fa-hero_ctas .button { width: 100%; justify-content: center; } } /* Movimento é opt-in e degrada: sem JS, .anima permanece visível. */ @media (prefers-reduced-motion: reduce) { .fa-card, .fa-passos li { transition: none !important; } } /* Integração declarada e ainda não no ar. FAMILIA-AGENTES (28/08): a primeira versão desta página listava "Arquivo (PDF ou imagem)" e "Exportação para planilha" como se funcionassem — e a porta só aceitava texto colado. É a mesma falha que a auditoria de 28/08 apontou nas páginas da concorrência (§4 ❌ item 3 do RECON-VITEX). Marcar é mais barato que prometer. */ .fa-pilula.is-embreve { background: transparent; color: #6B7280; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); border-style: dashed; } .fa-pilula.is-embreve small { display: block; font-size: .6875rem; letter-spacing: .02em; opacity: .8; }