/* * LANDING.CSS -- ESTILOS DA LANDING PAGE PUBLICA * * Depende de communy-core.css (carregado antes no ). * Prefixo: lp-* (landing page) * Escopo de body: .lp-public * * BREAKPOINTS PADRONIZADOS (mobile-first): * 480px -- mobile largo * 768px -- tablet * 992px -- notebook / nav desktop * 1280px -- desktop largo * * Uso: @media (min-width: 768px) { ... } * Evitar max-width exceto para overrides pontuais. * * Secoes (ordem fisica no arquivo): * 1. Reset & base 15. Banner * 2. Container & layout 16. Depoimentos * 3. Header & nav 17. Logo wall * 4. Drawer mobile 18. FAQ (home) * 5. Mega menu dropdown 19. Timeline (historia) * 6. Comparison table 20. Pagina de FAQ completa * 7. Footer 21. CTA / Formulario * 8. Secoes de conteudo 22. Problemas * 9. Botoes 23. Planos * 10. Hero 24-28. Blog (home, cards, * 11. Platform intro hero, listagem, artigo) * 12. Personas (tabs) * 13. Modulos * 14. Por que Communy */ /* -- 1. Reset & base */ *, *::before, *::after { box-sizing: border-box; } body.lp-public { margin: 0; padding: 0; } .lp-public { background: var(--app-bg-light); color: var(--app-text-primary); font-family: "Funnel Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } [data-theme-version="dark"] .lp-public { background: var(--app-bg-light); color: var(--app-text-primary); } /* -- 2. Container & layout */ .lp-container { width: min(100% - var(--app-container-gutter) * 2, var(--app-container-max)); margin-inline: auto; } @media (max-width: 768px) { .lp-container { width: min(100% - var(--app-container-gutter-sm) * 2, var(--app-container-max)); } } /* -- 3. Header & nav */ .lp-header { position: sticky; top: 0; z-index: 200; background: var(--app-surface-card); border-bottom: 1px solid var(--app-border-default); } .lp-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; } .lp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .lp-brand-logotype { display: none; } @media (min-width: 480px) { .lp-brand-logotype { display: block; } } .lp-nav { display: none; align-items: center; gap: 0.25rem; margin-inline-start: auto; } @media (min-width: 992px) { .lp-nav { display: flex; } } .lp-nav-link { padding: 0.4rem 0.75rem; border-radius: var(--app-radius-sm); font-size: 0.875rem; font-weight: 600; color: var(--app-text-muted); text-decoration: none; transition: color var(--app-transition), background var(--app-transition); } .lp-nav-link:hover, .lp-nav-link:focus-visible { color: var(--app-accent); background: var(--app-accent-hover); outline: none; } .lp-header-actions { display: none; align-items: center; gap: 12px; margin-inline-start: auto; } @media (min-width: 992px) { .lp-header-actions { display: flex; margin-inline-start: 1.5rem; } } .lp-menu-toggle { margin-inline-start: auto; } @media (min-width: 992px) { .lp-menu-toggle { display: none; } } /* -- 4. Drawer mobile */ .lp-drawer-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity var(--app-transition); } .lp-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .lp-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 400; width: min(320px, 85vw); background: var(--app-surface-card); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; } .lp-drawer:not([hidden]) { transform: translateX(0); } .lp-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--app-border-default); } .lp-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; } .lp-drawer-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--app-radius-sm); font-size: 0.9375rem; font-weight: 600; color: var(--app-text-primary); text-decoration: none; transition: background var(--app-transition), color var(--app-transition); } .lp-drawer-link:hover, .lp-drawer-link:focus-visible { background: var(--app-accent-hover); color: var(--app-accent); outline: none; } .lp-drawer-cta { display: flex; align-items: center; justify-content: center; height: var(--app-btn-height-compact); padding: 0 1rem; margin-block-start: 0.5rem; border-radius: var(--app-btn-radius); background: var(--app-accent); color: #fff; font-weight: var(--app-btn-font-weight); font-size: var(--app-btn-font-size); text-decoration: none; transition: background var(--app-transition); } .lp-drawer-cta:hover { background: var(--app-accent-dark); color: #fff; } .lp-drawer-divider { height: 1px; background: var(--app-border-default); margin-block: 0.5rem; } .lp-drawer-theme { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem; border-radius: var(--app-radius-sm); font-size: 0.9375rem; font-weight: 600; color: var(--app-text-muted); background: none; border: none; cursor: pointer; text-align: start; transition: background var(--app-transition), color var(--app-transition); } .lp-drawer-theme:hover { background: var(--app-surface-hover); color: var(--app-text-primary); } /* -- 5. Mega menu dropdown */ .lp-nav-dropdown { position: relative; } .lp-nav-dropdown-btn { display: flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; font-family: inherit; /* botão não herda a fonte da página por padrão → ficava com peso diferente */ } .lp-nav-chevron { font-size: 1.1em; color: var(--app-accent); position: relative; top: 1px; transition: transform 0.2s ease; } .lp-nav-dropdown-btn[aria-expanded="true"] .lp-nav-chevron { transform: rotate(180deg); } .lp-megamenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 480px; max-width: calc(100vw - 2rem); background: var(--app-surface-card); border: 1px solid var(--app-border-default); border-radius: var(--app-radius-lg, 1rem); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); padding: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; z-index: 500; } .lp-megamenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Abre o megamenu no hover/foco (em dispositivos com mouse), além do clique */ @media (hover: hover) { .lp-nav-dropdown:hover .lp-megamenu, .lp-nav-dropdown:focus-within .lp-megamenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .lp-nav-dropdown:hover .lp-nav-chevron, .lp-nav-dropdown:focus-within .lp-nav-chevron { transform: rotate(180deg); } /* ponte invisível: evita fechar ao cruzar o vão entre o botão e o painel */ .lp-megamenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } } .lp-megamenu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; } .lp-megamenu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--app-radius-sm); text-decoration: none; transition: background var(--app-transition); } .lp-megamenu-item--full { grid-column: 1 / -1; } .lp-megamenu-item:hover, .lp-megamenu-item:focus-visible { background: var(--app-accent-hover); outline: none; } .lp-megamenu-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--app-radius-sm); background: var(--app-accent-hover); color: var(--app-accent); display: flex; align-items: center; justify-content: center; } .lp-megamenu-item:hover .lp-megamenu-icon, .lp-megamenu-item:focus-visible .lp-megamenu-icon { background: color-mix(in srgb, var(--app-accent) 20%, transparent); } .lp-megamenu-title { font-size: 0.875rem; font-weight: 600; color: var(--app-text-primary); line-height: 1.3; } .lp-megamenu-desc { font-size: 0.75rem; color: var(--app-text-muted); line-height: 1.4; margin-top: 1px; } /* Drawer section label */ .lp-drawer-section-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--app-text-subtle); padding: 0.5rem 0.75rem 0.125rem; } /* -- 6. Comparison table */ /* padding-top alto: os cards de plano da pagina /funcionalidades fazem overlap sobre esta secao */ .lp-comparison { background: var(--app-surface-card); padding-block: 10rem 4rem; overflow: hidden; } .lp-ct-header { margin-bottom: 2.5rem; margin-top: 2rem; } .lp-ct-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); margin-block: 0; } .lp-ct-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.875rem; } /* Header */ .lp-ct-thead th { background: var(--app-surface-card); padding: 1.25rem 1rem 1rem; text-align: center; font-size: 0.8125rem; color: var(--app-text-primary); border-bottom: 2px solid var(--app-border-default); } .lp-ct-th-feature { text-align: left; width: 44%; } .lp-ct-th-plan { min-width: 110px; } .lp-ct-th-plan--highlight { background: color-mix(in srgb, var(--app-accent) 6%, var(--app-surface-card)); } .lp-ct-plan-badge { display: block; background: var(--app-accent); color: #fff; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 10px; border-radius: 999px; margin-bottom: 6px; } .lp-ct-plan-name { display: block; font-size: 0.875rem; font-weight: 700; color: var(--app-text-primary); } .lp-ct-plan-name--accent { color: var(--app-accent); } /* Category rows */ .lp-ct-category-cell { padding: 0; background: var(--app-bg-light); border-top: 1px solid var(--app-border-default); border-bottom: 1px solid var(--app-border-default); } .lp-ct-category-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.625rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--app-text-primary); text-align: left; } .lp-ct-category-icon { color: var(--app-accent); } .lp-ct-chevron { margin-left: auto; transition: transform 0.2s ease; } .lp-ct-category-btn[aria-expanded="false"] .lp-ct-chevron { transform: rotate(-90deg); } /* Feature rows */ .lp-ct-row td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--app-border-default); vertical-align: middle; } .lp-ct-row:last-child td { border-bottom: none; } .lp-ct-row.is-hidden { display: none; } .lp-ct-feature { color: var(--app-text-primary); text-align: left; line-height: 1.4; white-space: normal; } /* Cells */ .lp-ct-cell { text-align: center; width: 18%; } .lp-ct-cell--highlight { background: color-mix(in srgb, var(--app-accent) 5%, transparent); } .lp-ct-yes .app-icon { color: var(--app-color-success); font-size: 1.25rem; } .lp-ct-no .app-icon { color: var(--app-color-danger); font-size: 1.25rem; } /* Mobile: sticky left column */ @media (max-width: 767px) { .lp-ct-th-feature, .lp-ct-feature { position: sticky; left: 0; background: var(--app-surface-card); z-index: 2; font-size: 0.8rem; min-width: 160px; max-width: 200px; white-space: normal; word-break: break-word; } .lp-ct-table { min-width: 480px; } .lp-ct-thead .lp-ct-th-feature { z-index: 12; } } /* -- 6b. Comparativo competitivo (2 colunas, texto) -- ver DS_CANDIDATOS */ .lp-vs-wrap { overflow-x: auto; margin-block: 1.5rem; } .lp-vs-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; } .lp-vs-table th, .lp-vs-table td { padding: 1rem; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid var(--app-border-default); } .lp-vs-table thead th { color: var(--app-text-primary); border-bottom: 2px solid var(--app-border-default); } .lp-vs-dim { width: 22%; color: var(--app-text-muted); font-weight: 600; } .lp-vs-col--communy { background: color-mix(in srgb, var(--app-accent) 6%, transparent); color: var(--app-text-primary); } .lp-vs-table thead .lp-vs-col--communy { background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface-card)); } /* Frase de destaque (statement) -- ver DS_CANDIDATOS */ .lp-statement { margin-top: 1.5rem; max-width: 44ch; margin-inline: auto; font-size: clamp(1.25rem, 1rem + 1.6vw, 1.625rem); line-height: 1.35; font-weight: 700; color: var(--app-text-primary); } .lp-statement-accent { color: var(--app-accent); } /* -- 7. Footer */ .lp-footer { background: var(--app-surface-card); border-top: 1px solid var(--app-border-default); padding-block: 3rem 1.5rem; } .lp-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .lp-footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } } .lp-footer-brand { display: flex; flex-direction: column; gap: 1rem; } .lp-footer-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .lp-footer-logotype { opacity: 0.85; } .lp-footer-tagline { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; max-width: 260px; margin: 0; } .lp-footer-social { display: flex; gap: 0.5rem; } .lp-footer-social-link { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-sm); color: var(--app-text-muted); text-decoration: none; transition: color var(--app-transition), background var(--app-transition); } .lp-footer-social-link:hover { color: var(--app-accent); background: var(--app-accent-hover); } .lp-footer-social-link svg { width: 18px; height: 18px; } .lp-footer-apps { display: flex; flex-direction: column; gap: 0.625rem; } .lp-footer-apps-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-subtle); } .lp-footer-apps-badges { display: flex; flex-wrap: wrap; gap: 0.625rem; } .lp-store-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--app-radius-sm); background: var(--app-text-primary); color: var(--app-surface-card); text-decoration: none; transition: opacity var(--app-transition); } .lp-store-badge:hover { opacity: 0.85; } .lp-store-badge:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } .lp-store-badge-icon { width: 22px; height: 22px; flex-shrink: 0; } .lp-store-badge-text { display: flex; flex-direction: column; line-height: 1.1; } .lp-store-badge-small { font-size: 0.625rem; letter-spacing: 0.02em; } .lp-store-badge-name { font-size: 0.9375rem; font-weight: 700; } .lp-footer-heading { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-subtle); margin: 0 0 0.75rem; } .lp-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .lp-footer-links a { font-size: 0.9375rem; color: var(--app-text-muted); text-decoration: none; transition: color var(--app-transition); } .lp-footer-links a:hover { color: var(--app-accent); } .lp-footer-bottom { margin-block-start: 2.5rem; padding-block-start: 1.25rem; border-top: 1px solid var(--app-border-default); font-size: 0.8125rem; color: var(--app-text-subtle); } /* Footer slim — usado no diagnóstico (logo + social, divisória, copyright + CTA) */ .lp-footer--slim { padding-block: 2rem 1.5rem; } .lp-footer-slim-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lp-footer-slim-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-block-start: 1.5rem; } .lp-footer-slim-bottom a { color: var(--app-text-muted); text-decoration: none; font-weight: 600; } .lp-footer-slim-bottom a:hover { color: var(--app-accent); } /* -- 8. Secoes de conteudo -- base */ .lp-section { padding-block: clamp(3rem, 8vw, 5rem); } .lp-section--alt { background: var(--app-bg-light); } .lp-section--gradient { background: var(--lp-hero-bg); } /* Sub-bloco dentro de uma secao (ex.: "Edicoes anteriores" em eventos) */ .lp-subsection { padding-top: 2rem; } .lp-subsection > .lp-section-label + .lp-why-grid { margin-top: 1rem; } /* ── Por que a Communy: bloco de destaque (slot de imagem + card gradiente) ── */ .lp-why-communy-section { padding-block: clamp(3rem, 8vw, 5rem); } .lp-why-communy { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; } @media (min-width: 768px) { .lp-why-communy { grid-template-columns: 5fr 6fr; gap: 2rem; } } .lp-why-communy-mosaic { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 1rem; min-height: 360px; } .lp-wc-photo { grid-row: 1 / 3; position: relative; border-radius: var(--app-radius-lg, 1rem); overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.25); background: radial-gradient(circle at 30% 25%, rgba(23, 166, 197, 0.40), transparent 60%), linear-gradient(150deg, #11243a, #0a1626); } .lp-wc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lp-wc-photo .app-icon { font-size: 56px; } .lp-wc-logo { border-radius: var(--app-radius-lg, 1rem); background: var(--app-accent); display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .lp-wc-logo img { width: 84%; max-width: 156px; height: auto; } .lp-wc-phrase { margin: 0; border-radius: var(--app-radius-lg, 1rem); background: rgb(252, 235, 185); color: var(--app-accent); padding: 1.25rem 1.5rem; display: flex; align-items: center; font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.25rem); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; } @media (max-width: 767px) { .lp-why-communy-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: 0; } .lp-wc-photo { aspect-ratio: 4 / 3; } .lp-wc-logo, .lp-wc-phrase { display: none; } } .lp-why-communy-card { background: var(--lp-hero-bg); border-radius: var(--app-radius-lg, 1rem); padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .lp-why-communy-title { font-family: var(--lp-font-display); font-size: clamp(1.5rem, 3.2vw, 2.125rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.2; margin: 0.75rem 0 1rem; } .lp-why-communy-text { font-size: 1rem; color: var(--app-text-muted); line-height: 1.7; margin: 0 0 1.75rem; } /* Faixa de prova no hero das features (coluna estreita): mantém os 3 itens em uma linha */ .lp-page-hero .lp-hero-proof { flex-wrap: nowrap; gap: 0 1.25rem; align-items: flex-start; } .lp-page-hero .lp-hero-proof-item { padding-right: 1.25rem; } .lp-page-hero .lp-hero-proof-number { font-size: 1.25rem; } @media (max-width: 480px) { .lp-page-hero .lp-hero-proof { flex-wrap: wrap; gap: 1rem 1.25rem; } } .lp-section--white { background: var(--app-surface-card); } @media (min-width: 768px) { /* Texto à ESQUERDA: cinza (esq) → branco (dir) */ .lp-section--alt:has(.lp-persona-inner > .lp-persona-text:first-child) { background: linear-gradient(to right, var(--app-bg-light) 0%, var(--app-surface-card) 70%); } /* Texto à DIREITA: branco (esq) → cinza (dir) */ .lp-section--alt:has(.lp-persona-inner > .lp-persona-media:first-child) { background: linear-gradient(to left, var(--app-bg-light) 0%, var(--app-surface-card) 70%); } } .lp-section-header { text-align: center; max-width: 640px; margin-inline: auto; margin-block-end: 3rem; } .lp-section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-accent); margin-block-end: 0.75rem; } .lp-section-title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.2; margin: 0 0 1rem; } .lp-section-description { font-size: 1.0625rem; color: var(--app-text-muted); line-height: 1.7; margin: 0; } /* Nota centralizada após uma grade (ex.: os "quatro sinais" depois das dimensões) */ .lp-modules-note { text-align: center; max-width: 62ch; margin: 2.75rem auto 0; } /* -- 9. Botoes CTAs da landing sao intencionalmente maiores que os botoes do core (--app-btn-height-md = 48px, font 0.9375rem) para dar peso de marketing. Reusam os tokens do core (--app-accent, --app-btn-radius). Bg accent + texto branco e outline accent funcionam em light e dark sem override de tema. Para botoes compactos de UI, use os .app-btn-* do core. */ .lp-btn-primary, .lp-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: var(--app-btn-height-md); padding: 0 1.5rem; border-radius: var(--app-btn-radius); font-size: 0.9375rem; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background var(--app-transition), color var(--app-transition), border-color var(--app-transition); white-space: nowrap; } .lp-btn-primary { background: var(--app-accent); color: #fff; border-color: var(--app-accent); } .lp-btn-primary:hover, .lp-btn-primary:focus-visible { background: var(--app-accent-dark); border-color: var(--app-accent-dark); color: #fff; outline: none; } .lp-btn-ghost { background: transparent; color: var(--app-accent); border-color: var(--app-accent); } .lp-btn-ghost:hover, .lp-btn-ghost:focus-visible { background: var(--app-accent-hover); color: var(--app-accent); outline: none; } /* -- 10. Hero */ .lp-hero { display: flex; align-items: center; min-height: calc(80svh - 72px); /* deixa ~20% da próxima seção aparecer (dobra legível) */ padding-block: 3.5rem 2.5rem; background: var(--lp-hero-bg); background-size: 200% 200%; animation: lp-hero-gradient 10s ease-in-out infinite; } /* Pausa quando o hero sai da viewport (classe alternada via JS) */ .lp-hero.is-paused { animation-play-state: paused; } @keyframes lp-hero-gradient { 0% { background-position: 100% 100%; } /* amarelo */ 12% { background-position: 50% 50%; } /* branco (rápido) */ 44% { background-position: 0% 0%; } /* azul (chega) */ 56% { background-position: 0% 0%; } /* azul (~2s) */ 88% { background-position: 50% 50%; } /* branco (rápido) */ 100% { background-position: 100% 100%; } /* amarelo */ } @media (min-width: 768px) { /* Leve respiro a mais embaixo → bloco fica um pouco acima do centro */ .lp-hero { padding-block: 2.5rem 4rem; } } .lp-hero-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 768px) { .lp-hero-inner { grid-template-columns: 1fr 1fr; gap: 3rem; } } .lp-hero-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-accent); margin-block-end: 1rem; } .lp-hero-title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.15; margin: 0 0 1.25rem; } .lp-hero-description { font-size: 1.0625rem; color: var(--app-text-muted); line-height: 1.7; margin: 0 0 2rem; } .lp-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; } .lp-hero-proof { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 0 0 1.75rem; } .lp-hero-proof-item { display: flex; flex-direction: column; gap: 0.125rem; padding-right: 2rem; border-right: 1px solid var(--app-border-default); } .lp-hero-proof-item:last-child { padding-right: 0; border-right: none; } .lp-hero-proof-number { font-size: 1.5rem; font-weight: 700; color: var(--app-text-primary); line-height: 1.2; } .lp-hero-proof-label { font-size: 0.8125rem; color: var(--app-text-muted); line-height: 1.4; } .lp-hero-media { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.75rem; } .lp-hero-photo { grid-row: 1 / 3; aspect-ratio: 4 / 3; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--app-radius-lg, 1rem); background: var(--app-bg-light); } /* Selo circular (topo-direito) */ .lp-hero-seal { border-radius: var(--app-radius-lg, 1rem); background: var(--app-accent); display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .lp-hero-seal img { width: 84%; max-width: 132px; height: auto; display: block; } /* Frase em destaque (base-direita) */ .lp-hero-phrase { margin: 0; border-radius: var(--app-radius-lg, 1rem); background: rgb(252, 235, 185); color: var(--app-accent); padding: 1.25rem 1.5rem; display: flex; align-items: center; font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(0.875rem, 1.2vw, 1.125rem); line-height: 1.25; text-transform: uppercase; } @media (max-width: 767.98px) { .lp-hero-media { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; } .lp-hero-photo { grid-row: auto; } .lp-hero-seal, .lp-hero-phrase { display: none; } } /* -- 11. Platform intro */ .lp-platform { padding-block: 3.5rem; background: var(--app-bg-light); text-align: center; } .lp-platform-title { font-family: var(--lp-font-display); font-size: clamp(1.5rem, 3.5vw, 2.125rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.25; margin: 0 0 1rem; max-width: 640px; margin-inline: auto; } .lp-platform-description { font-size: 1rem; color: var(--app-text-muted); line-height: 1.7; max-width: 600px; margin: 0.75rem auto 0; } /* -- 12. Personas (tabs) */ .lp-personas-intro { text-align: center; padding-block: 0 2.5rem; max-width: 640px; margin-inline: auto; } /* Tab buttons row */ .lp-tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 1rem; padding-block-end: 3rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lp-tabs::-webkit-scrollbar { display: none; } .lp-section-header .lp-tabs { margin-block-start: 1.5rem; } @media (max-width: 767px) { .lp-tabs { justify-content: flex-start; } } .lp-tab-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: var(--app-btn-height-compact); padding: 0 1.125rem; border-radius: var(--app-radius-md); font-size: 0.9375rem; font-weight: 600; font-family: inherit; color: var(--app-text-muted); background: transparent; border: 1.5px solid var(--app-border-default); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color var(--app-transition), background var(--app-transition), border-color var(--app-transition); } .lp-tab-btn:hover { color: var(--app-accent); border-color: var(--app-accent); background: var(--app-accent-hover); } .lp-tab-btn[aria-selected="true"] { background: var(--app-accent); border-color: var(--app-accent); color: #fff; } /* Tab panels */ .lp-tab-panels { background: var(--app-surface-card); padding-block: 0 4rem; } @keyframes lp-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .lp-tab-panel:not([hidden]) { animation: lp-panel-in 0.5s ease; } .lp-persona-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 768px) { .lp-persona-inner { grid-template-columns: 1fr 1fr; gap: 4rem; } .lp-persona-inner.lp-persona-reverse .lp-persona-media { order: 2; } .lp-persona-inner.lp-persona-reverse .lp-persona-text { order: 1; } } .lp-persona-media { border-radius: var(--app-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--app-bg-light); } .lp-carousel { position: relative; } .lp-carousel-track { position: relative; width: 100%; height: 100%; } .lp-carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; } .lp-carousel-slide--active { opacity: 1; position: relative; } .lp-carousel-dots { position: absolute; bottom: 0.875rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 2; } .lp-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 0.3s; cursor: pointer; } .lp-carousel-dot--active { background: #fff; } .lp-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); color: var(--app-text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; } .lp-carousel-btn:hover { background: #fff; } .lp-carousel-btn--prev { left: 0.75rem; } .lp-carousel-btn--next { right: 0.75rem; } .lp-persona-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-persona-title { font-family: var(--lp-font-display); font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.25; margin: 0 0 1.25rem; } .lp-persona-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .lp-persona-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--app-text-muted); line-height: 1.5; } .lp-persona-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--app-accent); flex-shrink: 0; margin-top: 0.5rem; } /* -- 13. Modulos */ .lp-modules { padding-block: clamp(3rem, 8vw, 5rem); background: var(--lp-hero-bg); } .lp-modules-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-block-start: 2.5rem; } @media (min-width: 480px) { .lp-modules-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-modules-grid { grid-template-columns: repeat(4, 1fr); } } .lp-module-card { padding: 1.75rem 1.5rem; border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); background: var(--app-surface-card); display: flex; flex-direction: column; gap: 0.875rem; position: relative; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .lp-module-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); border-color: var(--app-accent); } .lp-module-icon { width: 44px; height: 44px; border-radius: var(--app-radius-sm); background: var(--app-accent-hover); display: flex; align-items: center; justify-content: center; color: var(--app-accent); } .lp-module-title { font-size: 1rem; font-weight: 700; color: var(--app-text-primary); margin: 0; } .lp-module-description { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; margin: 0; flex: 1; } /* Variante lista: cards horizontais (ícone à esquerda, texto à direita) — p/ contagens que não fecham no grid (ex.: 5 dimensões) */ .lp-modules-grid.lp-modules-grid--list { grid-template-columns: 1fr; gap: 0.75rem; max-width: 760px; margin-inline: auto; } .lp-modules-grid--list .lp-module-card { display: grid; grid-template-columns: auto 1fr; gap: 0 1.125rem; align-items: start; padding: 1.25rem 1.5rem; } .lp-modules-grid--list .lp-module-icon { grid-row: 1 / 3; } .lp-modules-grid--list .lp-module-title { grid-column: 2; } .lp-modules-grid--list .lp-module-description { grid-column: 2; margin-top: 0.25rem; } .lp-module-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; height: var(--app-btn-height-compact); padding: 0 0.75rem; font-size: var(--app-btn-font-size); font-weight: 600; color: var(--app-accent); text-decoration: none; background: transparent; border: none; border-radius: var(--app-radius-sm); white-space: nowrap; transition: background var(--app-transition), color var(--app-transition); } .lp-module-link:hover, .lp-module-card:hover .lp-module-link { background: var(--app-accent-hover); color: var(--app-accent); } .lp-module-card .lp-module-link::after { content: ''; position: absolute; inset: 0; } .lp-modules-cta { text-align: center; margin-block-start: 2.5rem; } /* Bloco de diagnóstico na home: texto à esquerda + card do guia à direita */ .lp-diag-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 768px) { .lp-diag-inner { grid-template-columns: 6fr 5fr; gap: 3rem; } } .lp-diag-inner .lp-blog-card { max-width: 440px; width: 100%; justify-self: center; } /* -- 14. Por que Communy */ /* -- 14b. Callout (sobre / citação centrada) */ .lp-callout { max-width: 720px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .lp-callout-title { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.3; } .lp-callout-sub { font-size: 1rem; color: var(--app-text-muted); line-height: 1.6; } .lp-why { padding-block: clamp(3rem, 8vw, 5rem); } .lp-why-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-block-start: 2.5rem; } @media (min-width: 640px) { .lp-why-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-why-grid { grid-template-columns: repeat(2, 1fr); } .lp-why-grid--3col { grid-template-columns: repeat(3, 1fr); } } .lp-why-card { padding: 1.75rem; border-radius: var(--app-radius-md); background: var(--app-surface-card); border: 1px solid var(--app-border-soft); display: flex; flex-direction: column; gap: 0.75rem; } .lp-why-icon { width: 48px; height: 48px; border-radius: var(--app-radius-sm); background: var(--app-accent-hover); display: flex; align-items: center; justify-content: center; color: var(--app-accent); } .lp-why-title { font-size: 1rem; font-weight: 700; color: var(--app-text-primary); margin: 0; } .lp-why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .lp-why-list li { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.55; padding-inline-start: 1rem; position: relative; } .lp-why-list li::before { content: "•"; position: absolute; inset-inline-start: 0; color: var(--app-accent); } .lp-why-text { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; margin: 0; } /* Cards de destaque em 3 colunas (comparação, eventos, sobre): mais presença */ .lp-why-grid--3col .lp-why-card { padding: clamp(1.75rem, 3vw, 2.25rem); gap: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .lp-why-grid--3col .lp-why-card:hover { transform: translateY(-4px); box-shadow: var(--app-shadow-card); border-color: var(--app-border-default); } .lp-why-grid--3col .lp-why-icon { width: 56px; height: 56px; border-radius: var(--app-radius-md); margin-block-end: 0.25rem; } .lp-why-grid--3col .lp-why-icon .app-icon { font-size: 28px; } .lp-why-grid--3col .lp-why-title { font-size: 1.125rem; } .lp-why-grid--3col .lp-why-text { font-size: 0.9375rem; line-height: 1.65; } /* Painel de funcionalidades por categoria (ex.: página de administradoras) */ .lp-feature-panel { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; } @media (min-width: 600px) { .lp-feature-panel { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-feature-panel { grid-template-columns: repeat(4, 1fr); } } .lp-feature-group { background: var(--app-surface-card); border: 1px solid var(--app-border-soft); border-radius: var(--app-radius-md); padding: 1.5rem 1.25rem; } .lp-feature-group-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--app-text-primary); margin: 0 0 1rem; } .lp-feature-group-title .app-icon { color: var(--app-accent); font-size: 22px; } .lp-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .lp-feature-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.45; } .lp-feature-list li::before { content: "✓"; color: var(--app-accent); font-weight: 700; flex-shrink: 0; } /* Painel de migração da Superlógica (página de administradoras) */ .lp-migrate { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; background: var(--app-surface-card); border: 1px solid var(--app-border-default); border-radius: var(--app-radius-lg, 1rem); padding: 2rem 1.75rem; box-shadow: var(--app-shadow-card); } @media (min-width: 768px) { .lp-migrate { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; padding: 2.75rem 2.5rem; } } .lp-migrate-text .lp-section-label { display: inline-block; margin-bottom: 0.75rem; } .lp-migrate-title { font-family: var(--lp-font-display); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.2; margin: 0 0 0.75rem; } .lp-migrate-lead { color: var(--app-text-muted); line-height: 1.6; margin: 0 0 1.5rem; } .lp-migrate-reassure { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.75rem; } .lp-migrate-point { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--app-text-primary); } .lp-migrate-point .app-icon { color: var(--app-accent); flex-shrink: 0; } .lp-migrate-card { background: var(--app-accent-hover); border-radius: var(--app-radius-md); padding: 1.5rem; } .lp-migrate-card-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--app-text-primary); margin: 0 0 1rem; } .lp-migrate-card-title .app-icon { color: var(--app-accent); } /* Infográfico de onboarding: bifurcação (2 caminhos) → convergência → pipeline compartilhado */ .lp-fork { max-width: 880px; margin: 2.5rem auto 0; } .lp-fork-intro { text-align: center; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--app-text-subtle); margin: 0 0 1.5rem; } .lp-fork-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; } .lp-fork-branch { display: flex; flex-direction: column; } .lp-fork-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 700; color: var(--app-text-primary); margin: 0 0 1.25rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--app-border-soft); } .lp-fork-head .app-icon { color: var(--app-accent); } /* Cauda pontilhada que preenche até a base da coluna (alinha as duas pontas da bifurcação) */ .lp-fork-tail { flex: 1 0 1.25rem; width: 0; margin-left: calc(1.75rem - 1.5px); border-left: 3px dotted var(--app-accent); opacity: 0.4; } /* Junção em ângulo reto: trilho horizontal ligando as duas pontas + descida central até o nó */ .lp-fork-join { position: relative; height: 1.75rem; } .lp-fork-rail { position: absolute; top: 0; left: 1.75rem; right: calc(50% - 2.75rem); border-top: 3px dotted var(--app-accent); opacity: 0.4; } .lp-fork-drop { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 3px dotted var(--app-accent); opacity: 0.4; } .lp-fork-merge { text-align: center; } .lp-onb-merge-node { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--app-accent); color: #fff; font-size: 24px; box-shadow: 0 0 0 6px var(--app-accent-hover); margin-bottom: 1rem; } .lp-onb-merge-label { font-weight: 700; color: var(--app-text-primary); margin: 0 0 1.5rem; } /* Pipeline vertical estilo "cenário de automação": nós circulares + linha pontilhada */ .lp-pipeline { list-style: none; max-width: 460px; margin: 0 auto; padding: 0; text-align: left; } .lp-pipeline--branch { max-width: none; } .lp-pipeline-node { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1.25rem; padding-bottom: 1.75rem; } .lp-pipeline-node:last-child { padding-bottom: 0; } /* Conector pontilhado descendo do nó atual até o próximo */ .lp-pipeline-node:not(:last-child)::before { content: ""; position: absolute; left: 1.75rem; top: 3.75rem; bottom: -0.25rem; transform: translateX(-50%); border-left: 3px dotted var(--app-accent); opacity: 0.4; } .lp-pipeline-icon { position: relative; z-index: 1; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%), var(--app-accent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .lp-pipeline-icon .app-icon { font-size: 26px; } .lp-pipeline-icon--num { font-family: var(--lp-font-display); font-weight: 700; font-size: 1.25rem; } .lp-pipeline-text { align-self: center; } .lp-pipeline-title { margin: 0; font-weight: 700; font-size: 1rem; color: var(--app-text-primary); } .lp-pipeline-desc { margin: 0.2rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--app-text-muted); } @media (max-width: 767.98px) { /* No mobile a bifurcação empilha: dois caminhos um sob o outro + descida central até a junção */ .lp-fork-branches { grid-template-columns: 1fr; gap: 0; } .lp-fork-branch + .lp-fork-branch { margin-top: 1.75rem; } .lp-fork-tail, .lp-fork-rail { display: none; } } /* Versão horizontal do infográfico (desktop largo): dois caminhos curvando até o nó central */ .lp-flowmap { display: none; } @media (min-width: 1280px) { .lp-fork { display: none; } .lp-flowmap { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 3rem; } .lp-flowmap-left { display: flex; flex-direction: column; align-self: center; gap: 4rem; } /* caminho de cima alinhado à direita: nó 2 encosta na mesma linha do nó 3 do de baixo → as curvas saem do mesmo ponto */ .lp-fm-branch--top { display: flex; flex-direction: column; align-items: flex-end; } .lp-fm-chip { display: inline-flex; align-items: center; gap: 0.4rem; width: max-content; margin: 0 0 1.25rem; border: 1.5px solid var(--app-accent); color: var(--app-accent); background: var(--app-surface-card); border-radius: 999px; padding: 0.4rem 1rem; font-family: var(--lp-font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .lp-fm-row { display: flex; } .lp-fm-stop { position: relative; width: 8rem; } .lp-fm-circle { position: relative; z-index: 1; width: 3.75rem; height: 3.75rem; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%), var(--app-accent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .lp-fm-circle .app-icon { font-size: 28px; } .lp-fm-badge { position: absolute; top: -4px; left: -4px; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--app-surface-card); color: var(--app-accent); font-family: var(--lp-font-display); font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* conector pontilhado horizontal entre paradas da mesma fileira */ .lp-fm-row .lp-fm-stop:not(:last-child)::after { content: ""; position: absolute; top: 1.875rem; left: calc(50% + 1.875rem); width: 4.25rem; border-top: 2px dotted var(--app-accent); opacity: 0.5; } /* só títulos (subtextos ocultos neste teste) — em fluxo, reservam espaço e não colidem */ .lp-fm-label { width: 8rem; margin-top: 0.9rem; } /* no pipeline compartilhado a legenda é absoluta → fileira fica na altura do círculo e alinha com o nó central */ .lp-fm-shared .lp-fm-label { position: absolute; top: 4.5rem; left: 0; margin-top: 0; } .lp-fm-title { margin: 0; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--app-text-primary); } .lp-fm-desc { display: none; } /* curvas de convergência (SVG estica; stroke fixo via vector-effect; pontos = dasharray) */ .lp-fm-wires { align-self: stretch; width: 4rem; flex-shrink: 0; } .lp-fm-wire { fill: none; stroke: var(--app-accent); stroke-width: 2; stroke-dasharray: 0.1 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.55; } } /* -- 15. Banner */ .lp-banner { padding-block: clamp(3rem, 8vw, 5rem); background: var(--app-surface-card); } .lp-banner-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 768px) { .lp-banner-inner { grid-template-columns: 1fr 1fr; gap: 4rem; } /* Inverte: imagem à esquerda, texto à direita (alterna com o bloco seguinte) */ .lp-banner--reverse .lp-banner-media { order: -1; } } .lp-banner-title { font-family: var(--lp-font-display); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.25; margin: 0.75rem 0 1rem; } .lp-banner-description { font-size: 1rem; color: var(--app-text-muted); line-height: 1.7; margin: 0 0 1.75rem; } .lp-banner-media { border-radius: var(--app-radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--app-bg-light); min-height: 200px; } .lp-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── 13b. Stats (mantido para eventual reuso) ─────────────── */ .lp-stats { padding-block: 4.5rem; background: var(--app-accent); } .lp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; text-align: center; } @media (min-width: 640px) { .lp-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .lp-stat-item { text-align: center; } .lp-stat-number { font-family: var(--lp-font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: #fff; line-height: 1; margin: 0 0 0.375rem; } .lp-stat-label { font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); line-height: 1.4; margin: 0; } .lp-stats-cta { text-align: center; margin-block-start: 3rem; } /* -- 16. Depoimentos */ .lp-testimonials { padding-block: clamp(3rem, 8vw, 5rem); background: var(--app-surface-card); position: relative; overflow: hidden; } .lp-testimonials::before { content: ''; position: absolute; top: -10%; right: -8%; left: auto; transform: none; width: 900px; height: 700px; border-radius: 50%; background: var(--app-accent); opacity: 0.12; filter: blur(90px); pointer-events: none; } .lp-testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-block-start: 2.5rem; } @media (min-width: 640px) { .lp-testimonials-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .lp-testimonial-card { margin: 0; padding: 1.5rem; border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); background: var(--app-surface-card); display: flex; flex-direction: column; gap: 0.625rem; } .lp-testimonial-body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .lp-testimonial-kicker { color: var(--app-accent); } .lp-testimonial-card blockquote { margin: 0; padding: 0; } .lp-testimonial-quote { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; margin: 0; } .lp-testimonial-caption { display: flex; flex-direction: column; gap: 0.125rem; } .lp-testimonial-author { font-size: 0.9375rem; font-weight: 700; color: var(--app-text-primary); margin: 0; } .lp-testimonial-role { font-size: 0.8125rem; color: var(--app-text-subtle); margin: 0; } /* -- 16b. Testimonials — variante com foto (eventos) */ .lp-testimonials-grid--4col { grid-template-columns: 1fr; } @media (min-width: 640px) { .lp-testimonials-grid--4col { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-testimonials-grid--4col { grid-template-columns: repeat(4, 1fr); } } .lp-testimonial-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--app-radius-sm); overflow: hidden; background: var(--app-surface-default); } .lp-testimonial-photo img { width: 100%; height: 100%; object-fit: cover; } .lp-testimonial-benefit { font-size: 0.875rem; font-weight: 600; color: var(--app-accent); margin: 0; } .lp-testimonial-edition { font-size: 0.75rem; color: var(--app-text-subtle); margin: 0; } /* -- 17. Logo wall */ .lp-logos { padding-block: 3rem; background: var(--app-surface-card); text-align: center; } .lp-logos-label { font-size: 0.8125rem; font-weight: 600; color: var(--app-text-subtle); margin: 0 0 2rem; text-transform: uppercase; letter-spacing: 0.06em; } .lp-logos-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; } .lp-logos-grid--spaced { gap: 1rem 4rem; } .lp-logo-item { height: 72px; display: flex; align-items: center; opacity: 0.5; transition: opacity var(--app-transition); } .lp-logo-item:hover { opacity: 1; } .lp-logo-item img { height: 100%; width: auto; object-fit: contain; filter: grayscale(1); transition: filter var(--app-transition); } .lp-logo-item:hover img { filter: grayscale(0); } /* -- 17b. Logo marquee (3 linhas animadas) */ .lp-logos-marquee { overflow: hidden; display: flex; flex-direction: column; gap: 1.25rem; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } @keyframes lp-marquee-fwd { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes lp-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } } .lp-logos-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: lp-marquee-fwd 40s linear infinite; } .lp-logos-track--reverse { animation-name: lp-marquee-rev; animation-duration: 45s; } .lp-logos-track--slow { animation-duration: 50s; } .lp-logos-marquee:hover .lp-logos-track { animation-play-state: paused; } .lp-logos-track .lp-logo-item { height: 56px; flex-shrink: 0; } .lp-logo-placeholder { font-size: 0.8125rem; font-weight: 600; color: var(--app-text-subtle); padding: 0.375rem 0.875rem; border: 1px solid var(--app-border-default); border-radius: var(--app-radius-sm); } /* -- 18. FAQ (home) */ .lp-faq { background: var(--app-surface-card); } .lp-faq-tabs { margin-block-end: 2rem; } .lp-faq-panel .lp-faq-list { margin-block-start: 0; } .lp-faq-list { max-width: 720px; margin-inline: auto; margin-block-start: 2.5rem; display: flex; flex-direction: column; background: var(--app-surface-card); border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); overflow: hidden; list-style: none; padding: 0; } .lp-faq-item { border-bottom: 1px solid var(--app-border-default); } .lp-faq-item:last-child { border-bottom: none; } .lp-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.25rem 1.5rem; background: none; border: none; text-align: start; font-size: 0.9375rem; font-weight: 700; color: var(--app-text-primary); cursor: pointer; font-family: inherit; transition: background var(--app-transition); } .lp-faq-question:hover { background: var(--app-surface-hover); } .lp-faq-question .app-icon { flex-shrink: 0; color: var(--app-accent); transition: transform var(--app-transition); } .lp-faq-item.is-open .lp-faq-question .app-icon { transform: rotate(180deg); } .lp-faq-answer { padding: 0 1.5rem 1.25rem; font-size: 0.9375rem; color: var(--app-text-muted); line-height: 1.7; } .lp-faq-footer { max-width: 720px; margin-inline: auto; margin-block-start: 1.5rem; padding-block-start: 1.5rem; border-top: 1px solid var(--app-border-default); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lp-faq-footer p { margin: 0; font-size: 0.9375rem; color: var(--app-text-muted); } .lp-faq-more { font-size: 0.9375rem; font-weight: 600; color: var(--app-accent); text-decoration: none; white-space: nowrap; } .lp-faq-more:hover { text-decoration: underline; } /* -- Breadcrumb (trilha de navegação visível; espelha o BreadcrumbList JSON-LD) */ .lp-breadcrumb { margin-bottom: 1.25rem; } .lp-breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 0.8125rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; } .lp-breadcrumb-item { display: inline-flex; align-items: center; } .lp-breadcrumb-sep { font-size: 1.125rem; color: var(--app-text-subtle); margin-inline: 0.125rem; } .lp-breadcrumb-link { color: var(--app-text-subtle); font-weight: 700; text-decoration: none; padding: 0.125rem 0.25rem; border-radius: var(--app-radius-sm); transition: color 0.15s ease, background-color 0.15s ease; } .lp-breadcrumb-link:hover { color: var(--app-accent); font-weight: 700; text-decoration: none; } .lp-breadcrumb-link:focus-visible { color: var(--app-accent); background: var(--app-accent-hover); outline: none; } .lp-breadcrumb-current { color: var(--app-accent); font-weight: 700; padding-inline: 0.25rem; } @media (max-width: 575.98px) { .lp-breadcrumb { margin-bottom: 1rem; } .lp-breadcrumb-list { font-size: 0.6875rem; letter-spacing: 0.06em; line-height: 1.6; } .lp-breadcrumb-sep { font-size: 1rem; } } /* -- 20. Pagina de FAQ completa */ .lp-page-hero { padding-block: 3.5rem 2.5rem; background: var(--lp-hero-bg); } .lp-page-hero--overlap { padding-bottom: 2rem; overflow: visible; } .lp-plan-summary { margin-top: 2.5rem; margin-bottom: -10rem; position: relative; z-index: 2; } .lp-plan-summary .lp-plan-card { transition: none; box-shadow: none; } .lp-plan-summary .lp-plan-card:hover { transform: none; box-shadow: none; border-color: var(--app-border-default); } .lp-plan-summary .lp-plan-card.lp-plan-card-featured:hover { border-color: var(--app-accent); } .lp-page-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .lp-page-hero-title { font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 700; font-family: var(--lp-font-display); color: var(--app-text-primary); line-height: 1.2; margin-block: 0.5rem 1rem; } .lp-page-hero-description { font-size: 1rem; color: var(--app-text-muted); line-height: 1.7; margin: 0 0 2rem; } .lp-page-hero-media { border-radius: var(--app-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; } .lp-page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-faqpage { padding-block: 4rem; } .lp-faqpage-layout { display: grid; grid-template-columns: 220px 1fr; gap: 3.5rem; align-items: start; } .lp-faqpage-sidebar { position: sticky; top: 5rem; } .lp-faqpage-nav-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--app-text-subtle); margin: 0 0 0.5rem; padding: 0; border: none; } .lp-faqpage-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-left: 2px solid var(--app-border-default); } .lp-faqpage-nav-list li { border: none; } .lp-faqpage-nav-link { display: block; padding: 0.3125rem 0.875rem; font-size: 0.875rem; font-weight: 400; color: var(--app-text-muted); text-decoration: none; line-height: 1.5; border-left: 2px solid transparent; margin-left: -2px; transition: color var(--app-transition), border-color var(--app-transition); } .lp-faqpage-nav-link:hover { color: var(--app-text-primary); } .lp-faqpage-nav-link.is-active { color: var(--app-accent); font-weight: 600; border-left-color: var(--app-accent); } .lp-faqpage-content { min-width: 0; } .lp-faqpage-section { margin-block-end: 3rem; scroll-margin-top: 5rem; } .lp-faqpage-section:last-child { margin-block-end: 0; } .lp-faqpage-section-title { font-size: 1.125rem; font-weight: 700; color: var(--app-text-primary); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--app-accent); display: inline-block; } .lp-faqpage-content .lp-faq-list { max-width: none; margin-inline: 0; margin-block-start: 0; } .lp-faqpage-cta { background: var(--lp-hero-bg); padding-block: 4rem; text-align: center; } .lp-faqpage-cta-title { font-size: clamp(1.375rem, 2.5vw, 1.875rem); font-weight: 700; font-family: var(--lp-font-display); color: var(--app-text-primary); margin: 0 0 0.75rem; } .lp-faqpage-cta-description { font-size: 1rem; color: var(--app-text-muted); max-width: 520px; margin-inline: auto; margin-bottom: 2rem; line-height: 1.6; } @media (max-width: 991.98px) { .lp-page-hero-inner { grid-template-columns: 1fr; } .lp-page-hero-media { display: none; } .lp-faqpage-layout { grid-template-columns: 1fr; gap: 2rem; } .lp-faqpage-sidebar { position: static; } .lp-faqpage-nav { border-radius: var(--app-radius-md); } .lp-faqpage-nav-title { display: none; } .lp-faqpage-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.375rem; border: none; } .lp-faqpage-nav-list li { border-bottom: none; } .lp-faqpage-nav-link { border: 1px solid var(--app-border-default); padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: 2rem; justify-content: center; } .lp-faqpage-nav-link::after { display: none; } .lp-faqpage-nav-link.is-active { border-color: var(--app-accent); background: var(--app-surface-hover); } } /* -- 21. CTA / Formulario */ .lp-cta-section { padding-block: clamp(3rem, 8vw, 5rem); background: var(--lp-hero-bg); } .lp-cta-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch; } @media (min-width: 768px) { .lp-cta-inner { grid-template-columns: 1fr 1fr; gap: 4rem; } } .lp-cta-text { display: flex; flex-direction: column; } .lp-cta-image { flex: 1 1 0; margin-block-start: 2rem; border-radius: var(--app-radius-md); overflow: hidden; min-height: 240px; position: relative; background: var(--app-bg-light); } .lp-cta-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lp-cta-title { font-family: var(--lp-font-display); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.25; margin: 0 0 0.875rem; } .lp-cta-description { font-size: 1rem; color: var(--app-text-muted); line-height: 1.7; margin: 0; } /* Atalho secundário de WhatsApp no CTA (opcional, via param do _cta.html) */ .lp-cta-whatsapp { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--app-text-muted); } .lp-cta-whatsapp-link { color: var(--app-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; } .lp-cta-whatsapp-link:hover { text-decoration: underline; } .lp-cta-whatsapp-link .app-icon { font-size: 18px; } .lp-cta-form { display: flex; flex-direction: column; gap: 0.875rem; } .lp-form-note { font-size: 0.8125rem; color: var(--app-text-subtle); margin-bottom: 0.5rem; } .lp-form-group { display: flex; flex-direction: column; gap: 0.375rem; } .lp-form-label { font-size: 0.8125rem; font-weight: 700; color: var(--app-text-primary); } .lp-form-control { height: 44px; padding: 0 0.875rem; border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-sm); font-size: 0.9375rem; color: var(--app-text-primary); background: var(--app-surface-card); font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color var(--app-transition); } .lp-form-control:focus { outline: none; border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-hover); } select.lp-form-control { appearance: none; 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='%235f6b7f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-inline-end: 2rem; cursor: pointer; } [data-theme-version="dark"] .lp-form-control { background: var(--app-surface-input-dark); border-color: var(--app-border-input-dark); color: var(--app-text-primary); } .lp-form-submit { width: 100%; height: var(--app-btn-height-md); border: none; border-radius: var(--app-btn-radius); background: var(--app-accent); color: #fff; font-size: 0.9375rem; font-weight: 700; cursor: pointer; font-family: inherit; margin-block-start: 0.25rem; transition: background var(--app-transition); } .lp-form-submit:hover { background: var(--app-accent-dark); } /* -- 21b. Persona description (override) */ .lp-personas-section { background: var(--app-surface-card); } .lp-persona-description { font-size: 0.9375rem; color: var(--app-text-muted); line-height: 1.6; margin: 0 0 1.25rem; } .lp-persona-link { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 1.25rem; height: var(--app-btn-height-compact); padding: 0 0.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--app-accent); text-decoration: none; background: transparent; border-radius: var(--app-radius-sm); transition: background var(--app-transition); } .lp-persona-link:hover { background: var(--app-accent-hover); color: var(--app-accent); } /* -- 22. Problemas */ .lp-problems { padding-block: clamp(3rem, 8vw, 5rem); background: var(--app-bg-light); } .lp-problems-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-block-start: 2.5rem; } @media (min-width: 640px) { .lp-problems-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .lp-problems-grid { grid-template-columns: repeat(3, 1fr); } } .lp-problem-card { padding: 1.5rem; border-radius: var(--app-radius-md); background: var(--app-surface-card); border: 1px solid var(--app-border-default); display: flex; flex-direction: column; gap: 1rem; } .lp-problem-before, .lp-problem-after { display: flex; flex-direction: column; gap: 0.375rem; } .lp-problem-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .lp-problem-kicker-before { color: var(--app-color-danger); } .lp-problem-kicker-after { color: var(--app-color-success); } .lp-problem-title { font-size: 0.9375rem; font-weight: 700; color: var(--app-text-primary); margin: 0; } .lp-problem-divider { border: none; border-top: 1px solid var(--app-border-default); margin: 0; } .lp-problem-description { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; margin: 0; } .lp-problems-cta { text-align: center; margin-block-start: 2.5rem; } /* -- 23. Planos */ .lp-plans { background: var(--lp-hero-bg); } .lp-plans-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-block-start: 2.5rem; align-items: stretch; } @media (min-width: 768px) { .lp-plans-grid { grid-template-columns: repeat(3, 1fr); } } .lp-plan-card { position: relative; overflow: hidden; padding: 2rem 1.75rem; border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); background: var(--app-surface-card); display: flex; flex-direction: column; gap: 1.25rem; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } .lp-plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); border-color: var(--app-accent); } .lp-plan-card-featured { overflow: visible; border-color: var(--app-accent); box-shadow: 0 0 0 1px var(--app-accent), var(--app-shadow-card); } .lp-plan-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--app-accent); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.875rem; border-radius: 100px; white-space: nowrap; } .lp-plan-header { display: flex; flex-direction: column; gap: 0.625rem; } .lp-plan-icon { width: 44px; height: 44px; border-radius: var(--app-radius-sm); background: var(--app-accent-hover); display: flex; align-items: center; justify-content: center; color: var(--app-accent); } .lp-plan-name { font-size: 1.125rem; font-weight: 700; color: var(--app-text-primary); margin: 0; } .lp-plan-description { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; margin: 0; } .lp-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .lp-plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.5; } .lp-plan-check { color: var(--app-accent); flex-shrink: 0; font-size: 1rem; margin-top: 0.05rem; } .lp-plan-cta { display: flex; align-items: center; justify-content: center; height: var(--app-btn-height-compact); padding: 0 1.25rem; border-radius: var(--app-btn-radius); font-size: var(--app-btn-font-size); font-weight: var(--app-btn-font-weight); text-decoration: none; text-align: center; transition: background var(--app-transition), color var(--app-transition); border: none; } .lp-plan-cta.lp-btn-ghost { color: var(--app-accent); background: transparent; gap: 4px; } .lp-plan-cta.lp-btn-ghost:hover, .lp-plan-card:hover .lp-plan-cta.lp-btn-ghost { background: var(--app-accent-hover); } .lp-plan-cta.lp-btn-primary { background: var(--app-accent); color: #fff; } .lp-plan-cta.lp-btn-primary:hover { background: var(--app-accent-dark); color: #fff; } /* -- 23b. Video modal */ .lp-video-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .lp-video-modal[hidden] { display: none; } .lp-video-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); cursor: pointer; } .lp-video-modal-box { position: relative; width: min(860px, 92vw); background: #000; border-radius: var(--app-radius-lg); overflow: hidden; z-index: 1; } .lp-video-modal-close { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 2; width: 2rem; height: 2rem; border-radius: 50%; border: none; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .lp-video-modal-player { position: relative; padding-top: 56.25%; } .lp-video-modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .lp-plans-note { text-align: center; margin-block-start: 1.75rem; font-size: 0.8125rem; color: var(--app-text-subtle); } /* -- 24. Blog — secao de artigos (home) */ .lp-articles { background: var(--app-bg-light); } .lp-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block-start: 2.5rem; } .lp-articles-footer { display: flex; justify-content: center; margin-block-start: 2.5rem; } /* -- 25. Blog — cards compartilhados */ .lp-blog-card { display: flex; flex-direction: column; background: var(--app-surface-card); border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); overflow: hidden; transition: box-shadow var(--app-transition); } .lp-blog-card:hover { box-shadow: var(--app-shadow-md); } .lp-blog-card--upcoming { opacity: 0.7; pointer-events: none; cursor: default; } .lp-blog-card-media { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--app-bg-light); flex-shrink: 0; } .lp-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .lp-blog-card:hover .lp-blog-card-media img { transform: scale(1.03); } /* Badge de estágio (círculo cor + número) no canto inferior direito da capa */ .lp-blog-cover-badge { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--lp-font-display); font-weight: 700; font-size: 1.0625rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); } .lp-blog-cover-badge[data-stage="hub"] { background: var(--app-accent); } .lp-blog-cover-badge[data-stage="1"] { background: var(--lp-stage-1); } .lp-blog-cover-badge[data-stage="2"] { background: var(--lp-stage-2); } .lp-blog-cover-badge[data-stage="3"] { background: var(--lp-stage-3); } .lp-blog-cover-badge[data-stage="4"] { background: var(--lp-stage-4); } .lp-blog-cover-badge[data-stage="5"] { background: var(--lp-stage-5); } .lp-blog-card-media--placeholder { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--app-bg-light) 0%, var(--app-border-default) 100%); flex-shrink: 0; } .lp-blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; gap: 0.5rem; } .lp-blog-card-meta { display: flex; align-items: center; gap: 0.625rem; } .lp-blog-card-category { font-size: 0.75rem; font-weight: 700; color: var(--app-accent); text-transform: uppercase; letter-spacing: 0.06em; } .lp-blog-card-read-time { font-size: 0.75rem; color: var(--app-text-subtle); } .lp-blog-card-badge { font-size: 0.6875rem; font-weight: 600; color: var(--app-text-subtle); background: var(--app-bg-light); border: 1px solid var(--app-border-default); border-radius: 2rem; padding: 0.125rem 0.5rem; } .lp-blog-card-title { font-size: 1rem; font-weight: 700; color: var(--app-text-primary); line-height: 1.4; margin: 0; } .lp-blog-card-title a { color: inherit; text-decoration: none; } .lp-blog-card-title a:hover { color: var(--app-accent); } .lp-blog-card-description { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.6; margin: 0; flex: 1; } .lp-blog-card-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; height: var(--app-btn-height-compact); padding: 0 0.75rem; font-size: var(--app-btn-font-size); font-weight: 600; color: var(--app-accent); text-decoration: none; background: transparent; border-radius: var(--app-radius-sm); margin-block-start: 0.25rem; transition: background var(--app-transition), color var(--app-transition); } .lp-blog-card-link:hover, .lp-blog-card:hover .lp-blog-card-link { background: var(--app-accent-hover); color: var(--app-accent); } /* -- 26. Blog — hero do artigo */ .lp-blog-hero { padding-block: 4rem 2rem; background: var(--lp-hero-bg); } .lp-blog-hero-title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.2; margin: 0.5rem 0 0.875rem; } .lp-blog-hero-description { font-size: 1.0625rem; color: var(--app-text-muted); line-height: 1.7; max-width: 56ch; margin: 0; } .lp-blog-listing { padding-block-start: 2rem; } .lp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* -- 27. Blog — listagem com sidebar */ .lp-blogpage { padding-block: 2rem 4rem; } .lp-blogpage-content { min-width: 0; } .lp-blogpage-section { margin-block-end: 3rem; } .lp-blogpage-section:last-child { margin-block-end: 0; } .lp-blogpage-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--app-text-subtle); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.75rem; } .lp-blogpage-section-title::after { content: ''; flex: 1; height: 1px; background: var(--app-border-default); } .lp-blogpage-section-intro { margin: -0.25rem 0 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--app-text-muted); max-width: 60ch; } .lp-blogpage-section-intro a { color: var(--app-accent); font-weight: 600; } /* -- 28. Blog — template de artigo */ .lp-article-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--app-border-default); z-index: 9999; } .lp-article-progress-bar { height: 100%; width: 0%; background: var(--app-accent); transition: width 0.1s linear; } .lp-article-wrap { padding-block: 3rem 5rem; } .lp-article-container { max-width: 780px; } .lp-article-header { margin-bottom: 2.5rem; } .lp-article-meta-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .lp-article-category { font-size: 0.75rem; font-weight: 700; color: var(--app-accent); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; } .lp-article-category:hover { color: var(--app-accent-dark); } .lp-article-read-time { font-size: 0.8125rem; color: var(--app-text-subtle); } .lp-article-title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: var(--app-text-primary); line-height: 1.2; margin: 0 0 0.875rem; } .lp-article-subtitle { font-size: 1.125rem; color: var(--app-text-muted); line-height: 1.6; margin: 0 0 1rem; } .lp-article-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--app-text-subtle); padding-block-start: 1rem; border-top: 1px solid var(--app-border-default); } .lp-share-btn--meta { margin-inline-start: auto; } .lp-share-feedback { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .lp-article-tools { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.75rem; } .lp-article-share { display: flex; gap: 0.625rem; } .lp-share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; font-weight: 500; color: var(--app-text-primary); background: var(--app-surface-card); border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); cursor: pointer; text-decoration: none; transition: background var(--app-transition), border-color var(--app-transition); white-space: nowrap; } .lp-share-btn:hover { background: var(--app-surface-hover); border-color: var(--app-border-soft); color: var(--app-text-primary); } .lp-article-summary-wrap { border: 1px solid var(--app-border-default); border-radius: var(--app-radius-md); overflow: hidden; } .lp-article-summary-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.875rem 1rem; font-size: 0.9375rem; font-weight: 700; color: var(--app-text-primary); background: var(--app-surface-card); border: none; cursor: pointer; text-align: left; transition: background var(--app-transition); } .lp-article-summary-toggle:hover { background: var(--app-surface-hover); } .lp-article-summary-toggle .app-icon { transition: transform var(--app-transition); flex-shrink: 0; } .lp-article-summary-toggle.is-open .app-icon { transform: rotate(180deg); } .lp-article-summary { padding: 1rem 1rem 1.125rem; border-top: 1px solid var(--app-border-default); background: var(--app-bg-light); } .lp-article-summary ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; } .lp-article-summary li { font-size: 0.9375rem; color: var(--app-text-muted); line-height: 1.6; } .lp-article-cover { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--app-radius-md); margin-bottom: 2.5rem; background: var(--app-bg-light); } .lp-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-article-body { font-size: 1.0625rem; line-height: 1.8; color: var(--app-text-muted); } .lp-article-body h2 { font-family: var(--lp-font-display); font-size: 1.5rem; font-weight: 700; color: var(--app-text-primary); margin: 2.5rem 0 0.75rem; line-height: 1.3; } .lp-article-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--app-text-primary); margin: 1.75rem 0 0.5rem; line-height: 1.4; } .lp-article-body p { margin: 0 0 1.25rem; } .lp-article-body ul, .lp-article-body ol { padding-left: 1.5rem; margin: 0 0 1.25rem; } .lp-article-body li { margin-bottom: 0.375rem; } .lp-article-body p a, .lp-article-body li a { color: var(--app-accent); text-decoration: underline; text-underline-offset: 2px; } .lp-article-body p a:hover, .lp-article-body li a:hover { color: var(--app-accent-dark); } .lp-article-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-block-start: 3.5rem; padding: 2rem; background: var(--app-surface-card); border: 1px solid var(--app-border-default); border-left: 4px solid var(--app-accent); border-radius: var(--app-radius-md); } .lp-article-cta-text { font-size: 1.0625rem; font-weight: 600; color: var(--app-text-primary); margin: 0; } .lp-article-cta-link { font-size: 0.875rem; color: var(--app-text-muted); text-decoration: none; } .lp-article-cta-link:hover { color: var(--app-accent); } /* ── Responsividade blog / artigo ───────────────────────────── */ @media (max-width: 991.98px) { .lp-articles-grid { grid-template-columns: 1fr 1fr; } .lp-blog-grid { grid-template-columns: 1fr 1fr; } .lp-blogpage .lp-faqpage-layout { grid-template-columns: 1fr; } .lp-blogpage .lp-faqpage-sidebar { position: static; } .lp-blogpage .lp-faqpage-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.375rem; border: none; } .lp-blogpage .lp-faqpage-nav-list li { border-bottom: none; } .lp-blogpage .lp-faqpage-nav-link { border: 1px solid var(--app-border-default); padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: 2rem; } .lp-blogpage .lp-faqpage-nav-link::after { display: none; } .lp-blogpage .lp-faqpage-nav-link.is-active { border-color: var(--app-accent); background: var(--app-surface-hover); } } @media (max-width: 575.98px) { .lp-articles-grid { grid-template-columns: 1fr; } .lp-blog-grid { grid-template-columns: 1fr; } .lp-article-cta { align-items: stretch; } .lp-article-cta .lp-btn { text-align: center; } } /* -- 28. Diagnóstico de maturidade (quiz) — mobile-first */ .lp-quiz { padding-block: 2.5rem 4rem; min-height: 70vh; } .lp-quiz-shell { max-width: 640px; } /* Header minimalista do diagnóstico (sem nav, sem distração) */ .lp-quiz-header { border-bottom: 1px solid var(--app-border-soft); padding-block: 0.875rem; } .lp-quiz-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .lp-quiz-back { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--app-text-muted); text-decoration: none; font-weight: 600; font-size: 0.9375rem; } .lp-quiz-back:hover { color: var(--app-accent); } .lp-quiz-back:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: var(--app-radius-sm); } .lp-quiz-back .app-icon { flex: none; font-size: 1.25rem; } .lp-quiz-back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 575.98px) { .lp-quiz-header .lp-brand-logotype { display: none; } } .lp-quiz-screen { display: none; } .lp-quiz-screen.is-active { display: block; } .lp-quiz-progress { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; } .lp-quiz-progress[hidden] { display: none; } .lp-quiz-progress-track { flex: 1; height: 6px; border-radius: var(--app-radius-pill, 999px); background: var(--app-border-soft); overflow: hidden; } .lp-quiz-progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--app-accent); transition: width 0.3s ease; } .lp-quiz-progress-label { flex: none; font-size: 0.8125rem; font-weight: 700; color: var(--app-text-subtle); } .lp-quiz-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-accent); margin-bottom: 0.75rem; } .lp-quiz-title { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; color: var(--app-text-primary); margin: 0 0 1rem; } .lp-quiz-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--app-text-muted); margin: 0 0 2rem; } .lp-quiz-question { font-family: var(--lp-font-display); font-size: clamp(1.375rem, 4vw, 1.875rem); line-height: 1.25; color: var(--app-text-primary); margin: 0 0 0.5rem; } .lp-quiz-hint { font-size: 0.9375rem; color: var(--app-text-subtle); margin: 0; } .lp-quiz-cta { width: 100%; margin-top: 1.75rem; } .lp-quiz-backstep { display: inline-flex; align-items: center; gap: 4px; margin: 1.5rem 0 0; padding: 0.375rem 0.75rem; background: transparent; border: none; border-radius: var(--app-radius-sm); font: inherit; font-weight: 600; font-size: 0.9375rem; color: var(--app-accent); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lp-quiz-backstep[hidden] { display: none; } .lp-quiz-backstep:hover { background: var(--app-accent-hover); } .lp-quiz-backstep:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: var(--app-radius-sm); } .lp-quiz-backstep .app-icon { font-size: 1.125rem; } .lp-quiz-options { display: grid; gap: 0.625rem; margin-top: 1.25rem; } .lp-quiz-option { display: flex; align-items: center; gap: 0.875rem; width: 100%; text-align: left; padding: 1rem 1.125rem; min-height: 56px; background: var(--app-surface-card); border: 1.5px solid var(--app-border-default); border-radius: var(--app-radius-md); color: var(--app-text-primary); cursor: pointer; font: inherit; transition: border-color 0.15s ease, background-color 0.15s ease; } .lp-quiz-option:hover { border-color: var(--app-accent); } .lp-quiz-option.is-selected { border-color: var(--app-accent); background: var(--app-accent-hover); } .lp-quiz-option:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } .lp-quiz-option-icon { flex: none; font-size: 1.625rem; color: var(--app-accent); } .lp-quiz-option-body { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; } .lp-quiz-option-label { font-weight: 600; line-height: 1.35; } .lp-quiz-option-desc { font-size: 0.875rem; color: var(--app-text-muted); } .lp-quiz-option-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--app-border-default); transition: border-color 0.15s ease, background-color 0.15s ease; } .lp-quiz-option.is-selected .lp-quiz-option-radio { border-color: var(--app-accent); background: var(--app-accent); box-shadow: inset 0 0 0 3px var(--app-surface-card); } .lp-quiz-form { display: grid; gap: 1rem; margin-top: 1.5rem; } .lp-quiz-rdform { margin-top: 1.5rem; } .lp-quiz-field { display: grid; gap: 0.375rem; } .lp-quiz-field[hidden] { display: none; } .lp-quiz-field > span { font-size: 0.875rem; font-weight: 600; color: var(--app-text-primary); } .lp-quiz-field input { padding: 0.75rem 0.875rem; border: 1.5px solid var(--app-border-default); border-radius: var(--app-radius-sm); background: var(--app-surface-card); color: var(--app-text-primary); font: inherit; } .lp-quiz-field input:focus-visible { outline: none; border-color: var(--app-accent); } .lp-quiz-formnote { font-size: 0.8125rem; color: var(--app-text-subtle); margin: 0.25rem 0 0; } .lp-quiz-result-card { background: var(--app-surface-card); border: 1px solid var(--app-border-soft); border-radius: var(--app-radius-lg); box-shadow: 0 6px 24px rgb(0 0 0 / 0.05); padding: 1.75rem 1.5rem; margin-bottom: 1.5rem; } .lp-quiz-result-head { text-align: center; margin-bottom: 2rem; } .lp-quiz-result-stagelabel { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-text-subtle); margin: 0.5rem 0 0.25rem; } .lp-quiz-result-stage { font-family: var(--lp-font-display); font-size: clamp(1.75rem, 5vw, 2.25rem); color: var(--app-text-primary); margin: 0 0 0.5rem; line-height: 1.15; } .lp-quiz-result-stage-desc { color: var(--app-text-muted); margin: 0 auto; max-width: 36ch; line-height: 1.5; } /* Pontos por dimensão — qualitativo (forte/ok/atenção), sem número */ .lp-result-points-wrap { margin-bottom: 2rem; } .lp-result-subhead { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-subtle); margin: 0 0 0.5rem; } .lp-result-points { display: flex; flex-direction: column; } .lp-result-point { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--app-border-soft); } .lp-result-point:last-child { border-bottom: none; } .lp-result-point-label { font-size: 0.9375rem; font-weight: 600; color: var(--app-text-primary); } .lp-result-point-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--app-text-muted); } .lp-result-point-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .lp-result-point.is-strong .lp-result-point-dot { background: var(--app-color-success); } .lp-result-point.is-mid .lp-result-point-dot { background: var(--app-color-warning); } .lp-result-point.is-weak .lp-result-point-dot { background: var(--app-color-danger); } .lp-quiz-result-cost { border-top: 1px solid var(--app-border-soft); padding-top: 1.25rem; margin-top: 0.25rem; } .lp-quiz-result-cost h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--app-text-primary); } .lp-quiz-result-cost p { margin: 0; color: var(--app-text-muted); line-height: 1.6; } .lp-quiz-result-actions { display: grid; gap: 0.75rem; } .lp-quiz-result-actions .lp-quiz-cta { margin-top: 0; text-align: center; } .lp-quiz-formnote[data-result-emailnote] { text-align: center; margin: 1.5rem auto 0; max-width: 40ch; } /* Artigos recomendados no resultado — reusa o card do blog (.lp-blog-card + imagem + badge) */ .lp-result-articles { margin-top: 2.75rem; text-align: left; } .lp-result-articles .lp-result-subhead { margin-bottom: 0.875rem; } .lp-result-articles-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .lp-result-articles-grid { grid-template-columns: 1fr 1fr; } } .lp-result-art { display: flex; flex-direction: column; gap: 0.5rem; } .lp-result-art .lp-blog-card { height: 100%; } .lp-result-art-context { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-accent); } /* Régua de estágios no resultado (estilo NN/g, com "você está aqui") */ .lp-result-stages { display: grid; gap: 0.375rem; margin: 0 0 2rem; } .lp-result-stage { display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.875rem; align-items: center; padding: 0.5rem 0.75rem; border-radius: var(--app-radius-md); opacity: 0.55; } .lp-result-stage.is-current { opacity: 1; background: var(--app-accent-hover); } .lp-result-stage-num { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; color: #fff; } .lp-result-stage:nth-child(1) .lp-result-stage-num { background: var(--lp-stage-1); } .lp-result-stage:nth-child(2) .lp-result-stage-num { background: var(--lp-stage-2); } .lp-result-stage:nth-child(3) .lp-result-stage-num { background: var(--lp-stage-3); } .lp-result-stage:nth-child(4) .lp-result-stage-num { background: var(--lp-stage-4); } .lp-result-stage:nth-child(5) .lp-result-stage-num { background: var(--lp-stage-5); } .lp-result-stage-name { font-weight: 700; color: var(--app-text-primary); } .lp-result-stage-here { display: inline-block; margin-left: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-accent); } .lp-result-stage-desc { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--app-text-muted); } .lp-result-insight { background: var(--app-surface-soft); border-left: 4px solid var(--app-accent); border-radius: var(--app-radius-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .lp-result-insight h3 { margin: 0 0 0.375rem; font-size: 1rem; color: var(--app-text-primary); } .lp-result-insight p { margin: 0; color: var(--app-text-muted); line-height: 1.55; } .lp-result-reco { margin: 0.625rem 0 0; padding-left: 1.1rem; } .lp-result-reco li { color: var(--app-text-muted); line-height: 1.5; margin-bottom: 0.375rem; } .lp-result-reco li::marker { color: var(--app-accent); } @media (min-width: 768px) { .lp-quiz { padding-block: 4rem 5rem; } .lp-quiz-shell { margin-inline: auto; } .lp-quiz-screen[data-screen="abertura"] .lp-quiz-cta { width: auto; min-width: 220px; } .lp-quiz-result-actions { grid-auto-flow: column; justify-content: center; } .lp-quiz-result-actions .lp-quiz-cta { width: auto; min-width: 220px; } } /* -- 28b. Timeline dos estágios de maturidade — vertical com cards (estilo hunzaboy/CSS Timeline) */ /* Escala de cor dos 5 estágios de maturidade (timeline, capas do blog, diagnóstico). Toda baseada em tokens registrados — quente (imaturo) → frio/verde (maduro). */ :root { --lp-stage-1: var(--app-color-danger); /* rosa — No Improviso */ --lp-stage-2: var(--app-tone-orange); /* laranja — Organizando */ --lp-stage-3: var(--app-color-info); /* azul — Digital, porém fragmentado */ --lp-stage-4: var(--app-accent); /* ciano — Integrado */ --lp-stage-5: var(--app-color-success); /* verde — Estratégico */ } .lp-timeline { list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 680px; } .lp-timeline-item { position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; } .lp-timeline-item:last-child { margin-bottom: 0; } .lp-timeline-item::before { content: ""; position: absolute; left: 1.5rem; top: 50%; height: calc(100% + 1.5rem); width: 2px; transform: translateX(-50%); background: var(--app-border-default); } .lp-timeline-item:last-child::before { display: none; } .lp-timeline-marker { position: relative; z-index: 1; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .lp-timeline-num { font-weight: 700; font-size: 1.0625rem; } .lp-timeline-card { background: var(--app-surface-card); border: 1px solid var(--app-border-soft); border-left: 4px solid var(--app-border-default); border-radius: var(--app-radius-md); padding: 1rem 1.25rem; box-shadow: 0 6px 20px rgb(0 0 0 / 0.05); } .lp-timeline-name { margin: 0 0 0.25rem; font-weight: 700; font-size: 1.0625rem; color: var(--app-text-primary); } .lp-timeline-desc { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--app-text-muted); } .lp-timeline-item:nth-child(1) .lp-timeline-marker { background: var(--lp-stage-1); } .lp-timeline-item:nth-child(1) .lp-timeline-card { border-left-color: var(--lp-stage-1); } .lp-timeline-item:nth-child(2) .lp-timeline-marker { background: var(--lp-stage-2); } .lp-timeline-item:nth-child(2) .lp-timeline-card { border-left-color: var(--lp-stage-2); } .lp-timeline-item:nth-child(3) .lp-timeline-marker { background: var(--lp-stage-3); } .lp-timeline-item:nth-child(3) .lp-timeline-card { border-left-color: var(--lp-stage-3); } .lp-timeline-item:nth-child(4) .lp-timeline-marker { background: var(--lp-stage-4); } .lp-timeline-item:nth-child(4) .lp-timeline-card { border-left-color: var(--lp-stage-4); } .lp-timeline-item:nth-child(5) .lp-timeline-marker { background: var(--lp-stage-5); } .lp-timeline-item:nth-child(5) .lp-timeline-card { border-left-color: var(--lp-stage-5); } /* Links da série na /maturidade usam o mesmo estilo do "Saiba mais" (.lp-persona-link). Só apertamos a margem dentro do card da timeline (o padrão é 1.25rem). */ .lp-timeline-card .lp-persona-link { margin-block-start: 0.5rem; } .lp-timeline-more { text-align: center; margin: 2rem 0 0; } /* -- 29. Reduced motion: desativa movimento nao essencial (vestibular). Colocado por ultimo para vencer por ordem de origem sem !important. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lp-tab-panel:not([hidden]) { animation: none; } .lp-logos-track { animation: none; } .lp-carousel-slide { transition: none; } .lp-hero { animation: none; } } /* -- 30. Impressão: "Salvar em PDF" do resultado em UMA página A4. Esconde o que não é o diagnóstico, comprime fontes/margens e preserva as cores. */ @media print { @page { size: A4 portrait; margin: 12mm; } .lp-quiz-back, .lp-footer, .lp-quiz-progress, .lp-quiz-result-actions, .lp-result-articles { display: none; } .lp-quiz-header { padding-block: 0.25rem; box-shadow: none; border: none; } .lp-quiz, .lp-quiz-shell { padding: 0; max-width: 100%; } /* card */ .lp-quiz-result-card { box-shadow: none; border: 1px solid #ddd; padding: 0.9rem 1.1rem; margin: 0; } .lp-quiz-result-head { margin-bottom: 0.55rem; } .lp-quiz-result-stagelabel { margin: 0.15rem 0 0.1rem; } .lp-quiz-result-stage { font-size: 1.4rem; margin: 0 0 0.2rem; } .lp-quiz-result-stage-desc { font-size: 0.85rem; line-height: 1.4; } /* régua de estágios — compacta, sem a descrição (já aparece no herói) */ .lp-result-stages { gap: 0.15rem; margin: 0 0 0.65rem; } .lp-result-stage { padding: 0.2rem 0.5rem; } .lp-result-stage-num { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; } .lp-result-stage-desc { display: none; } /* pontos por dimensão */ .lp-result-points-wrap { margin-bottom: 0.65rem; } .lp-result-subhead { margin-bottom: 0.3rem; } .lp-result-point { padding: 0.2rem 0; } /* próximo passo + custo */ .lp-result-insight { margin: 1.1rem 0 0.5rem; } .lp-result-insight h3, .lp-quiz-result-cost h3 { font-size: 0.95rem; margin: 0 0 0.25rem; } .lp-result-insight p, .lp-quiz-result-cost p { font-size: 0.85rem; line-height: 1.45; margin: 0 0 0.3rem; } .lp-result-reco { margin: 0.25rem 0 0; } .lp-result-reco li { font-size: 0.82rem; line-height: 1.4; } .lp-quiz-result-cost { padding-top: 0.9rem; margin-top: 0.6rem; } /* evita quebra feia caso ainda transborde */ .lp-result-point, .lp-result-stage, .lp-result-insight, .lp-quiz-result-cost { break-inside: avoid; } /* preserva as cores dos badges/dots/régua */ .lp-result-point-dot, .lp-result-stage-num, .lp-result-stage.is-current { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }