/*
 * GovTools Hub — landing page (/) e páginas de caso (/clientes/{cliente}).
 * Espelha a proposta 4 do canvas de design: página clara, cor só como acento,
 * um único preenchimento saturado por tela (o botão "Agendar demonstração").
 * Papéis de cor do design system: teal = ação; aço = informação/IA; âmbar = conquista;
 * coral = alerta/problema (raio 6). Títulos em peso 500; nada de texto abaixo de 12px
 * (exceção: selo IA em caixa-alta de 11px no desktop).
 */

:root {
    --lp-bg: #f4f1e8;
    --lp-surface: #fbf9f2;
    --lp-surface-2: #efece1;
    --lp-divider: #e3ded0;
    --lp-text: #2f2b24;
    --lp-text-2: #4b473e;
    --lp-muted: #615c50;
    --lp-faint: #696459;
    --lp-outline: #857f72;
    --lp-action: #0c6e62;
    --lp-action-hover: #0a5c52;
    --lp-info: #2e6285;
    --lp-info-700: #41637f;
    --lp-info-100: #eaf3fb;
    --lp-info-tint: rgba(46, 98, 133, 0.1);
    --lp-info-line: rgba(46, 98, 133, 0.35);
    --lp-steel-900: #1f3346;
    --lp-steel-300: #aecfeb;
    --lp-reward-100: #faf0dc;
    --lp-reward-200: #f3ddb0;
    --lp-reward-300: #ecc987;
    --lp-reward-700: #8f6825;
    --lp-reward-800: #5f4517;
    --lp-alert-100: #fbe9e3;
    --lp-alert-700: #a04f38;
    --lp-teal-900: #1c3531;
    --lp-teal-500: #4cbcaa;
    --lp-teal-200: #c8ece4;
    --lp-ink: #12211d;
    --lp-neutral-200: #e2dcd0;
    --lp-neutral-300: #c4beb1;
    /* IA: o brilho roxo-rosa de tecnologia. Tons 700 para o texto passar de 4,5:1 sobre o creme */
    --lp-ai-violet: #6d28d9;
    --lp-ai-pink: #be185d;
    --lp-ai-gradient: linear-gradient(90deg, var(--lp-ai-violet), var(--lp-ai-pink));
    --lp-ai-tint: linear-gradient(90deg, rgba(109, 40, 217, 0.1), rgba(190, 24, 93, 0.1));
    --lp-ai-line: rgba(124, 58, 237, 0.35);
    --lp-ai-glow: rgba(168, 85, 247, 0.35);
    --lp-shadow: 0 12px 32px rgba(31, 51, 70, 0.14);
    --lp-gutter: 24px;
    --lp-section: 128px;
    --lp-font: Lexend, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

.lp {
    margin: 0;
    background: var(--lp-bg);
    color: var(--lp-text);
    font-family: var(--lp-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.lp a { color: var(--lp-action); }
.lp a:hover { color: var(--lp-action-hover); }
.lp :focus-visible { outline: 2px solid var(--lp-action); outline-offset: 2px; }
.lp-cta :focus-visible { outline-color: var(--lp-teal-200); }
.lp-icon { flex: none; display: block; }

.lp-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
}
.lp-skip:focus { top: 16px; }

.lp-container { width: min(1200px, 100% - 2 * var(--lp-gutter)); margin-inline: auto; }
.lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lp-section { padding-top: var(--lp-section); }
.lp-section--tight { padding-top: 96px; }

/* Tipografia */
.lp-h1 {
    font-size: 64px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.lp-h1--case { margin-top: 32px; max-width: 720px; font-size: 56px; line-height: 1.06; }
.lp-h2 {
    font-size: 44px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.lp-h2--lg { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; }
.lp-h3 { font-size: 20px; line-height: 1.3; font-weight: 500; }
.lp-caps { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-muted); }

/* Pílula-pergunta: o fio da conversa, acima de cada título */
.lp-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 14px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}
.lp-pill--info { background: var(--lp-info-tint); color: var(--lp-info); }
.lp-chip-ai .lp-icon { color: var(--lp-ai-pink); }
.lp-pill--ai { background: var(--lp-ai-tint); color: var(--lp-ai-violet); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.2), 0 0 22px rgba(219, 39, 119, 0.14); }
/* Texto de IA: gradiente roxo-rosa com brilho suave (quebra de linha mantém o gradiente em cada pedaço) */
.lp-ai-text { background: var(--lp-ai-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; filter: drop-shadow(0 0 10px var(--lp-ai-glow)); }
.lp-pill--amber { background: var(--lp-reward-200); color: var(--lp-reward-800); }
.lp-pill--coral { border-radius: 6px; background: var(--lp-alert-100); color: var(--lp-alert-700); }
.lp-pill--neutral { background: rgba(47, 43, 36, 0.07); color: var(--lp-text-2); }
.lp-pill--on-dark { background: rgba(200, 236, 228, 0.12); color: var(--lp-teal-200); }

.lp-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-heading--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.lp-heading__lead { max-width: 620px; font-size: 19px; line-height: 1.5; color: var(--lp-muted); text-wrap: balance; }
.lp-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 80px;
    align-items: end;
}
.lp-heading-row--end { grid-template-columns: minmax(0, 1fr) auto; }
.lp-heading-row__lead { font-size: 18px; line-height: 1.55; color: var(--lp-muted); text-wrap: pretty; }

/* Botões e links */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 26px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.lp .lp-btn--primary { background: var(--lp-action); color: var(--lp-surface); }
.lp .lp-btn--primary:hover { background: var(--lp-action-hover); color: var(--lp-surface); }
.lp .lp-btn--outline { border-color: var(--lp-action); color: var(--lp-action); background: transparent; }
.lp .lp-btn--outline:hover { background: rgba(12, 110, 98, 0.06); }
.lp .lp-btn--neutral { border-color: var(--lp-outline); color: var(--lp-text); }
.lp .lp-btn--neutral:hover { background: rgba(47, 43, 36, 0.05); color: var(--lp-text); }
.lp .lp-btn--inverse { background: var(--lp-teal-500); color: var(--lp-ink); }
.lp .lp-btn--inverse:hover { background: #74cbbb; color: var(--lp-ink); }
.lp-btn--sm { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
.lp-btn--block { display: flex; width: 100%; }
.lp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Etiquetas e selos */
.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.lp-tag--md { min-height: 28px; padding: 0 10px; font-size: 13px; }
.lp-tag--lg { min-height: 32px; padding: 0 12px; font-size: 14px; }
.lp-tag--info { color: var(--lp-info); background: var(--lp-info-tint); border: 1px solid var(--lp-info-line); }
.lp-tag--ai { color: var(--lp-ai-violet); background: var(--lp-ai-tint); border: 1px solid var(--lp-ai-line); box-shadow: 0 0 12px rgba(168, 85, 247, 0.18); }
.lp-tag--neutral { color: var(--lp-muted); background: rgba(47, 43, 36, 0.07); }
.lp-tag--reward { color: var(--lp-reward-800); background: var(--lp-reward-100); border: 1px solid var(--lp-reward-300); }
.lp-tag--reward .lp-icon { color: var(--lp-reward-700); }
.lp-chip-ai {
    align-self: flex-start;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9px;
    border: 1px solid var(--lp-ai-line);
    background: var(--lp-ai-tint);
    box-shadow: 0 0 12px var(--lp-ai-glow);
    color: var(--lp-ai-violet);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.lp-placeholder {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px dashed var(--lp-outline);
    font-size: 12.5px;
    color: var(--lp-muted);
}
.lp-band__period { flex: none; font-size: 15px; font-weight: 500; color: var(--lp-reward-800); }
.lp-placeholder--quote { padding: 0 10px; font-size: 22px; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.lp-icon-box {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-icon-box--lg { width: 48px; height: 48px; border-radius: 14px; }
.lp-icon-box--info { background: var(--lp-info-100); color: var(--lp-info); }
.lp-icon-box--ai { background: var(--lp-ai-tint); color: var(--lp-ai-violet); box-shadow: 0 0 16px rgba(168, 85, 247, 0.22); }
.lp-icon-box--reward { width: 44px; height: 44px; background: var(--lp-reward-100); color: var(--lp-reward-700); }
.lp-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--lp-surface-2);
    color: var(--lp-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Brasões */
.lp-seal { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.lp-seal--card { flex: none; width: 64px; height: 64px; }
.lp-seal--hero { flex: none; width: 80px; height: 80px; }
.lp-seal--quote { width: 96px; height: 96px; }
.lp-seals { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px 48px; }
.lp-seals__item, .lp-seals__item a {
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lp-muted);
    text-decoration: none;
}
.lp-seals--links { margin-top: 28px; }
.lp-seals__item a { min-height: 44px; border-radius: 12px; }
.lp .lp-seals__item a:hover span { color: var(--lp-action); text-decoration: underline; text-underline-offset: 3px; }

/* Cabeçalho flutuante */
/* O cabeçalho tem a mesma largura do conteúdo (lp-container), como na referência de diagramação. */
.lp-header { position: sticky; top: 0; z-index: 50; padding: 16px 0 0; }
.lp-header__bar {
    height: 64px;
    padding: 0 12px 0 24px;
    border-radius: 16px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
    box-shadow: 0 4px 14px rgba(47, 43, 36, 0.06);
    display: flex;
    align-items: center;
    gap: 32px;
    width: min(1200px, 100% - 2 * var(--lp-gutter));
    margin-inline: auto;
}
.lp-brand { flex: none; min-height: 44px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lp-brand__logo { height: 24px; width: auto; }
.lp-brand__logo--sm { height: 22px; }
.lp-nav { flex-grow: 1; display: flex; align-items: center; justify-content: center; gap: 32px; }
.lp .lp-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1; color: var(--lp-text-2); text-decoration: none; }
.lp .lp-nav a:hover { color: var(--lp-text); }
.lp .lp-nav a.is-current { color: var(--lp-text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--lp-action); }
.lp-header__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.lp-header__menu {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--lp-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Menu mobile: folha inferior */
.lp-menu {
    margin: auto 0 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: var(--lp-text);
}
.lp-menu::backdrop { background: rgba(29, 27, 24, 0.45); }
.lp-menu__sheet {
    padding: 8px 16px 24px;
    border-radius: 20px 20px 0 0;
    background: var(--lp-surface);
    box-shadow: 0 -12px 32px rgba(47, 43, 36, 0.16);
    display: flex;
    flex-direction: column;
}
.lp-menu__grip { align-self: center; width: 36px; height: 4px; border-radius: 999px; background: var(--lp-divider); }
.lp-menu__head { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-menu__head h2 { font-size: 17px; line-height: 1.3; font-weight: 500; }
.lp-menu__close { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--lp-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-menu__nav { margin-top: 4px; display: flex; flex-direction: column; }
.lp .lp-menu__nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--lp-divider);
    font-size: 16px;
    color: var(--lp-text);
    text-decoration: none;
}
.lp-menu__nav .lp-icon { color: var(--lp-faint); }
/* seção na tela (landing.js): no menu mobile, o item fica em teal e em peso 500 */
.lp .lp-menu__nav a.is-current { color: var(--lp-action); font-weight: 500; }
.lp .lp-menu__nav a.is-current .lp-icon { color: var(--lp-action); }
.lp-menu__nav + .lp-btn { margin-top: 16px; }

/* Abertura */
.lp-hero { padding-top: 72px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp .lp-announce {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
    font-size: 14px;
    line-height: 1.3;
    color: var(--lp-text);
    text-decoration: none;
    text-align: left;
}
.lp-announce__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--lp-info-tint);
    color: var(--lp-info);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.lp-announce__arrow { color: var(--lp-action); }
.lp-hero .lp-h1 { margin-top: 28px; max-width: 1080px; }
.lp-hero__lead { margin-top: 24px; max-width: 620px; font-size: 20px; line-height: 1.5; color: var(--lp-muted); text-wrap: balance; }
.lp-hero__ctas { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.lp-hero .lp-seals { margin-top: 64px; }

/* A imagem do produto */
.lp-product { position: relative; margin-top: 64px; width: 100%; padding-bottom: 40px; text-align: left; }
.lp-product__window {
    min-height: 540px;
    border-radius: 20px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
    box-shadow: 0 24px 60px rgba(47, 43, 36, 0.12);
    overflow: hidden;
    display: grid;
    grid-template-columns: 64px 540px minmax(0, 1fr);
}
.lp-product__rail { padding: 20px 0; background: var(--lp-surface-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-product__rail span { width: 40px; height: 40px; border-radius: 10px; color: var(--lp-muted); display: flex; align-items: center; justify-content: center; }
.lp-product__rail span.is-active { background: rgba(12, 110, 98, 0.12); color: var(--lp-action); }
.lp-product__list { padding: 24px 24px 0; border-right: 1px solid var(--lp-divider); }
.lp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-card-head__title { font-size: 17px; font-weight: 500; color: var(--lp-text); min-width: 0; }
.lp-today { margin-top: 16px; }
.lp-today__row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--lp-divider); }
.lp-today__row:last-child { border-bottom: 0; }
.lp-today__row.is-selected { margin: 0 -24px; padding-inline: 24px; background: rgba(12, 110, 98, 0.05); box-shadow: inset 2px 0 0 var(--lp-action); }
.lp-today__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--lp-surface-2); display: flex; align-items: center; justify-content: center; }
.lp-today__text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-today__dept { font-size: 12.5px; font-weight: 500; color: var(--lp-muted); }
.lp-today__subject { font-size: 15px; color: var(--lp-text); }
.lp-product__chat { background: var(--lp-bg); display: flex; flex-direction: column; }
.lp-chat-head { padding: 18px 24px; border-bottom: 1px solid var(--lp-divider); background: var(--lp-surface); display: flex; align-items: center; gap: 12px; }
.lp-chat-head__who { display: flex; flex-direction: column; gap: 2px; }
.lp-chat-head__name { font-size: 15px; font-weight: 500; }
.lp-chat-head__number { font-size: 12.5px; color: var(--lp-muted); }
.lp-chat { padding: 16px 14px 18px; background: var(--lp-bg); display: flex; flex-direction: column; gap: 10px; }
.lp-product__chat .lp-chat { flex-grow: 1; padding: 20px 24px; gap: 12px; }
.lp-bubble { max-width: min(330px, 100%); padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--lp-text); }
.lp-bubble--out { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--lp-surface-2); }
.lp-bubble--in { align-self: flex-start; width: min(300px, 100%); border-radius: 14px 14px 14px 4px; background: var(--lp-surface); border: 1px solid var(--lp-divider); display: flex; flex-direction: column; gap: 8px; }
.lp-bubble--audio { display: flex; align-items: center; gap: 10px; }
.lp-bubble--audio .lp-icon { color: var(--lp-muted); }
.lp-file { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--lp-surface-2); font-size: 13px; font-weight: 500; }
.lp-file .lp-icon { color: var(--lp-muted); }
.lp-handoff { margin-top: 4px; display: flex; align-items: center; gap: 10px; }
.lp-handoff > span[aria-hidden] { flex-grow: 1; height: 1px; background: var(--lp-divider); }
.lp-handoff__text { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--lp-muted); white-space: nowrap; }
.lp-win {
    position: absolute;
    left: 96px;
    bottom: 0;
    width: 260px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--lp-reward-100);
    box-shadow: 0 16px 40px rgba(47, 43, 36, 0.16);
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-win__icon { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--lp-surface); color: var(--lp-reward-700); display: flex; align-items: center; justify-content: center; }
.lp-win__text { display: flex; flex-direction: column; gap: 2px; }
.lp-win__title { font-size: 15px; font-weight: 500; color: var(--lp-reward-800); }
.lp-win__time { font-size: 12.5px; color: var(--lp-muted); }

/* Blocos lado a lado */
.lp-split { display: grid; column-gap: 80px; align-items: center; }
.lp-split--problem { grid-template-columns: 500px minmax(0, 1fr); }
.lp-split--ai { grid-template-columns: 620px minmax(0, 1fr); }
.lp-split--usage { grid-template-columns: minmax(0, 1fr) 660px; }

/* O problema */
.lp-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-quote { padding: 24px; border-radius: 6px; background: var(--lp-alert-100); display: flex; flex-direction: column; gap: 14px; }
.lp-quote blockquote { font-size: 20px; line-height: 1.35; color: var(--lp-text); }

/* Secretarias */
.lp-diagram {
    margin-top: 48px;
    padding: 56px;
    border-radius: 24px;
    background: var(--lp-surface-2);
    display: grid;
    grid-template-columns: 300px 70px 290px 70px minmax(0, 1fr);
    align-items: center;
}
.lp-diagram__numbers { display: flex; flex-direction: column; gap: 14px; }
.lp-diagram__numbers li {
    height: 60px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}
.lp-diagram__numbers .lp-icon { color: var(--lp-info); }
.lp-diagram__fan path, .lp-diagram__arrow path { stroke: var(--lp-outline); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-diagram__down { display: none; color: var(--lp-outline); justify-self: center; }
.lp-diagram__hub {
    padding: 26px 22px;
    border-radius: 20px;
    background: var(--lp-steel-900);
    box-shadow: 0 16px 40px rgba(31, 51, 70, 0.24);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lp-diagram__hub-name { font-size: 18px; font-weight: 500; color: var(--lp-surface); }
.lp-diagram__hub ul { display: flex; flex-direction: column; gap: 10px; }
.lp-diagram__hub li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--lp-surface); }
.lp-diagram__hub .lp-icon { color: var(--lp-steel-300); }
.lp-diagram__record { padding: 18px; border-radius: 16px; background: var(--lp-surface); border: 1px solid var(--lp-divider); display: flex; flex-direction: column; gap: 12px; }
.lp-diagram__record-head { display: flex; align-items: center; gap: 10px; }
.lp-diagram__record-name { font-size: 15px; font-weight: 500; white-space: nowrap; }
.lp-diagram__talked { font-size: 12.5px; color: var(--lp-muted); }

/* Quadros das ilustrações */
.lp-frame { position: relative; border-radius: 24px; }
.lp-frame--info { background: var(--lp-info-100); }
.lp-mock { border-radius: 16px; background: var(--lp-surface); box-shadow: var(--lp-shadow); }
.lp-mock-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--lp-action); color: var(--lp-action); font-size: 12.5px; font-weight: 500; }
.lp-mock-button--quiet { border-color: transparent; color: var(--lp-muted); padding: 0 8px; }

/* WhatsApp: a conversa como o cidadão vê no celular. Cores, fonte e formas são as do aplicativo
   (tema claro), não os tokens da página: a ilustração precisa ser reconhecida como WhatsApp. */
.lp-wa {
    --wa-bar: #ffffff;
    --wa-wallpaper: #efeae2;
    --wa-in: #ffffff;
    --wa-out: #d9fdd3;
    --wa-text: #111b21;
    --wa-meta: #667781;
    --wa-icon: #54656f;
    --wa-hint: #8696a0;
    --wa-link: #027eb5;
    --wa-read: #53bdeb;
    --wa-green: #1daa61;
    --wa-green-dark: #008069;
    --wa-verified: #1d9bf0;
    --wa-line: #e9edef;
    --wa-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    /* Tamanho padrão: todo celular da página tem a mesma medida; o que não cabe some por cima, como numa conversa rolada */
    flex: none;
    width: min(300px, 100%);
    aspect-ratio: 300 / 640;
    min-height: 0;
    padding: 8px;
    border-radius: 38px;
    background: #1b1d1f;
    box-shadow: var(--lp-shadow);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.35;
    color: var(--wa-text);
}
/* Papel de parede: o bege do app com desenhos de traço próprios (wa-wallpaper.svg), como o padrão de figurinhas do WhatsApp */
.lp-wa__screen { height: 100%; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; background: var(--wa-wallpaper) url("wa-wallpaper.svg") 0 0 / 300px repeat; }
.lp-wa__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px; background: var(--wa-bar); color: var(--wa-icon); box-shadow: 0 1px 0 var(--wa-line); }
.lp-wa__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #dfe5e7; color: #ffffff; }
.lp-wa__avatar img { width: 100%; height: 100%; padding: 3px; border: 1px solid var(--wa-line); border-radius: 50%; background: #ffffff; object-fit: contain; }
.lp-wa__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-wa__title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lp-wa__name { min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wa-text); }
.lp-wa__verified { flex: none; color: var(--wa-verified); }
.lp-wa__status { font-size: 12px; color: var(--wa-meta); }
/* Mensagem mais alta que a tela: o celular mostra o começo dela, como quem acabou de abrir a conversa */
.lp-wa--from-top .lp-wa__chat { justify-content: flex-start; }
.lp-wa__chat { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px 12px; }
.lp-wa__day { align-self: center; padding: 5px 12px; border-radius: 8px; background: #ffffff; box-shadow: var(--wa-shadow); font-size: 12px; color: var(--wa-icon); }
.lp-wa__composer { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px 14px; }
.lp-wa__input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border-radius: 21px; background: #ffffff; box-shadow: var(--wa-shadow); display: flex; align-items: center; gap: 10px; color: var(--wa-hint); }
.lp-wa__placeholder { flex: 1 1 auto; font-size: 15px; }
.lp-wa__mic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--wa-green); color: #ffffff; display: flex; align-items: center; justify-content: center; }

/* Balão: o primeiro de cada sequência tem o bico; hora e tiques ficam na última linha, como no app */
.lp-wa-msg { position: relative; max-width: 90%; border-radius: 8px; background: var(--wa-in); box-shadow: var(--wa-shadow); font-size: 13.5px; line-height: 18px; }
.lp-wa-msg--in { align-self: flex-start; }
.lp-wa-msg--out { align-self: flex-end; background: var(--wa-out); }
.lp-wa-msg:not(.lp-wa-msg--tail) { margin-top: -5px; }
.lp-wa-msg--tail.lp-wa-msg--in { border-top-left-radius: 0; }
.lp-wa-msg--tail.lp-wa-msg--out { border-top-right-radius: 0; }
.lp-wa-msg--tail::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.lp-wa-msg--tail.lp-wa-msg--in::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lp-wa-msg--tail.lp-wa-msg--out::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.lp-wa-msg__body { position: relative; padding: 6px 8px 8px 9px; }
.lp-wa-msg__text { overflow-wrap: anywhere; }
.lp-wa-msg__text strong { font-weight: 600; }
.lp-wa-msg__spacer { display: inline-block; width: 46px; }
.lp-wa-msg--out .lp-wa-msg__spacer { width: 66px; }
.lp-wa-msg__meta { position: absolute; right: 8px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 15px; color: var(--wa-meta); }
.lp-wa-msg__meta .lp-icon { color: var(--wa-read); }
.lp-wa-msg__link { color: var(--wa-link); text-decoration: underline; }
/* Anexo (a guia em PDF, por exemplo) e rodapé de mensagem de modelo */
.lp-wa-msg:has(.lp-wa-msg__doc) { width: 90%; }
.lp-wa-msg__doc { display: flex; align-items: center; gap: 10px; margin: 4px 4px 0; padding: 9px 10px; border-radius: 6px; background: rgba(11, 20, 26, 0.05); }
.lp-wa-msg__doc-icon { flex: none; width: 30px; height: 36px; border-radius: 4px; background: #e2584d; color: #ffffff; display: flex; align-items: center; justify-content: center; }
.lp-wa-msg__doc-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-wa-msg__doc-name { font-size: 13px; line-height: 17px; overflow-wrap: anywhere; color: var(--wa-text); }
.lp-wa-msg__doc-meta { font-size: 12px; line-height: 15px; color: var(--wa-meta); }
.lp-wa-msg__footer { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--wa-meta); }
/* Botões interativos em verde, como no app (lista, formulário, link) */
.lp-wa-msg__action { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border-top: 1px solid var(--wa-line); font-size: 14px; font-weight: 500; color: var(--wa-green-dark); }
/* Botão de resposta rápida: caixa separada logo abaixo do balão, texto neutro (verde fica para lista, link e copiar) */
.lp-wa-reply { align-self: flex-start; width: 90%; margin-top: -5px; min-height: 38px; padding: 0 12px; border-radius: 8px; background: var(--wa-in); box-shadow: var(--wa-shadow); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #3b4a54; }
/* Mensagem citada no alto do balão (a escolha de uma lista cita a mensagem da prefeitura) */
.lp-wa-msg__quote { display: flex; flex-direction: column; gap: 1px; margin: 4px 4px 0; padding: 5px 8px 6px 10px; border-left: 4px solid #06cf9c; border-radius: 6px; background: rgba(11, 20, 26, 0.05); }
.lp-wa-msg__quote-author { font-size: 12.5px; font-weight: 600; line-height: 16px; color: #06a882; }
.lp-wa-msg__quote-text { font-size: 12.5px; line-height: 16px; color: var(--wa-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Resposta de formulário enviada pelo cidadão: ícone, nome do formulário e "Resposta enviada." */
.lp-wa-msg__response { display: flex; align-items: center; gap: 10px; padding: 8px 12px 2px 8px; }
.lp-wa-msg__response-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 128, 105, 0.12); color: var(--wa-green-dark); display: flex; align-items: center; justify-content: center; }
.lp-wa-msg__response-text { display: flex; flex-direction: column; gap: 1px; }
.lp-wa-msg__response-title { font-size: 14px; font-weight: 600; color: var(--wa-text); }
.lp-wa-msg__response-note { font-size: 12px; color: var(--wa-meta); }
.lp-wa-msg--response .lp-wa-msg__text { min-height: 0; }

/* Formulário do WhatsApp (Flow): folha branca sobre a conversa escurecida */
/* Chat escurecido atrás do Flow: o mesmo papel de parede sob uma camada preta de 40% */
.lp-wa--flow .lp-wa__screen { background: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / .4)), var(--wa-wallpaper) url("wa-wallpaper.svg") 0 0 / 300px repeat; }
.lp-wa__sheet { flex: 1 1 auto; min-height: 0; margin-top: 24px; border-radius: 16px 16px 0 0; background: #ffffff; display: flex; flex-direction: column; }
.lp-wa__sheet-bar { flex: none; display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 14px 14px 10px; color: var(--wa-icon); }
.lp-wa__sheet-title { text-align: center; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wa-text); }
.lp-wa__sheet-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 6px 16px 18px; }
.lp-wa__sheet-heading { margin-bottom: -2px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.lp-wa-field { position: relative; display: block; padding: 11px 12px; border: 1px solid var(--wa-hint); border-radius: 8px; font-size: 14px; line-height: 19px; }
.lp-wa-field__label { position: absolute; top: -9px; left: 8px; padding: 0 4px; background: #ffffff; font-size: 12px; line-height: 16px; color: var(--wa-meta); }
.lp-wa__sheet-footer { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px 18px; box-shadow: 0 -1px 0 var(--wa-line); }
.lp-wa__sheet-button { align-self: stretch; height: 42px; border-radius: 21px; background: var(--wa-green-dark); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: #ffffff; }
.lp-wa__sheet-note { font-size: 12px; text-align: center; color: var(--wa-meta); }
.lp-wa__sheet-note span { color: var(--wa-link); }

/* Inteligência artificial */
/* O celular do cidadão à esquerda; à direita, o que chega à equipe e aos administradores */
.lp-ai-figure { padding: 40px 28px; display: grid; grid-template-columns: 300px minmax(0, 320px); grid-template-rows: 1fr 1fr; justify-content: center; column-gap: 20px; row-gap: 16px; }
.lp-ai-figure__phone { grid-row: 1 / span 2; }
.lp-ai-figure__suggestion { align-self: end; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.lp-ai-figure__suggestion p { font-size: 14px; line-height: 1.45; }
.lp-ai-figure__queue { font-size: 12.5px; font-weight: 500; color: var(--lp-muted); }
.lp-ai-figure__actions { display: flex; align-items: center; gap: 8px; }
.lp-ai-figure__weekly { align-self: start; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.lp-ai-figure__weekly > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.lp-ai-figure__weekly-title { font-size: 15px; font-weight: 500; }
.lp-ai-figure__weekly-text { font-size: 12.5px; color: var(--lp-muted); }
.lp-points { margin-top: 36px; }
.lp-point { padding: 18px 0; border-top: 1px solid var(--lp-divider); }
.lp-point:last-child { border-bottom: 1px solid var(--lp-divider); }
.lp-point__title { font-size: 18px; line-height: 1.3; font-weight: 500; }
.lp-point__text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--lp-muted); }

/* Faixas */
.lp-band { margin-top: var(--lp-section); padding: 96px 0; }
.lp-band--amber { background: var(--lp-reward-100); }
.lp-band--results { padding: 80px 0; }
.lp-band__inner { display: flex; flex-direction: column; }
.lp-band__note { margin-top: 24px; text-align: center; font-size: 13px; color: var(--lp-muted); }
.lp-band__note--start { margin-top: 20px; text-align: left; }

/* Fluxo zero clique */
.lp-flow { margin-top: 56px; display: grid; grid-template-columns: 240px 44px 240px 44px 250px 60px minmax(0, 1fr); align-items: center; }
.lp-flow__node {
    padding: 18px;
    border-radius: 16px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-reward-300);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.lp-flow__node .lp-tag { align-self: flex-start; }
.lp-flow__node.is-raised { box-shadow: 0 12px 32px rgba(60, 44, 15, 0.12); }
.lp-flow__title { font-size: 16px; font-weight: 500; }
.lp-flow__text { font-size: 13px; color: var(--lp-muted); }
.lp-flow__link { position: relative; height: 24px; }
.lp-flow__link::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; border-top: 1.5px dashed var(--lp-reward-700); }
.lp-flow__link::after { content: ""; position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid var(--lp-reward-700); border-right: 1.5px solid var(--lp-reward-700); transform: translateY(-50%) rotate(45deg); }
.lp-flow__branch { position: relative; align-self: stretch; }
.lp-flow__branch::before { content: ""; position: absolute; left: 0; width: 50%; top: 50%; border-top: 1.5px dashed var(--lp-reward-700); }
.lp-flow__branch::after { content: ""; position: absolute; left: 50%; right: 0; top: calc(16.66% + 2px); bottom: calc(16.66% + 2px); border: 1.5px dashed var(--lp-reward-700); border-right: 0; border-radius: 10px 0 0 10px; }
.lp-flow__outcomes { display: flex; flex-direction: column; gap: 12px; }
.lp-flow__outcomes li { min-height: 76px; padding: 14px 16px; border-radius: 14px; background: var(--lp-surface); border: 1px solid var(--lp-reward-300); display: flex; flex-direction: column; gap: 4px; text-align: left; }
.lp-flow__trigger { font-size: 12.5px; color: var(--lp-muted); }
.lp-flow__result { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.lp-flow__result .lp-icon { color: var(--lp-info); }
.lp-examples { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.lp-example-card { padding: 24px; border-radius: 20px; background: var(--lp-surface); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lp-example-card h3 { font-size: 18px; line-height: 1.3; font-weight: 500; }

/* Fluxo do clima na página de caso */
.lp-flow--case { margin-top: 48px; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 280px; align-items: stretch; }
.lp-flow--case .lp-flow__node { border-color: var(--lp-divider); }
.lp-flow--case .lp-flow__link { align-self: center; }
.lp-flow--case .lp-flow__link::before, .lp-flow--case .lp-flow__link::after { border-color: var(--lp-outline); }
.lp-flow__node--apart { margin-left: 24px; }
.lp-flow--case .lp-flow__title { font-size: 17px; }
.lp-flow--case .lp-flow__text { font-size: 14px; }

/* Clientes */
.lp-carousel-controls { display: flex; align-items: center; gap: 8px; }
.lp-carousel-controls__count { margin-right: 8px; font-size: 14px; color: var(--lp-text-2); }
.lp-round-button {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--lp-action);
    background: var(--lp-surface);
    color: var(--lp-action);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 150ms ease-out;
}
.lp-round-button:disabled { opacity: 0.45; cursor: default; }
.lp-carousel { margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.lp-carousel::-webkit-scrollbar { display: none; }
.lp-carousel__track { display: flex; gap: 24px; width: max-content; }
.lp-carousel__item { flex: none; width: 360px; scroll-snap-align: start; display: flex; }
.lp .lp-client-card {
    width: 100%;
    padding: 28px;
    border-radius: 20px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-divider);
    color: var(--lp-text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
/* O carrossel é área de rolagem e corta o que passa da borda do card: hover e foco ficam por dentro */
.lp .lp-client-card:hover { color: var(--lp-text); border-color: rgba(12, 110, 98, 0.45); box-shadow: inset 0 0 0 1px rgba(12, 110, 98, 0.45); }
.lp .lp-client-card:focus-visible { outline-offset: -4px; }
.lp-client-card__head { display: flex; align-items: center; gap: 16px; }
.lp-client-card__city { font-size: 22px; line-height: 1.25; font-weight: 500; }
.lp-client-card__city span, .lp-case-hero__name span { font-size: 14px; font-weight: 400; color: var(--lp-muted); }
.lp-client-card__uses { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lp-divider); display: flex; flex-direction: column; gap: 10px; }
.lp-carousel__hint { display: none; margin-top: 14px; font-size: 13px; color: var(--lp-text-2); }

/* Fornecedores */
.lp-chips { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lp .lp-chips a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--lp-surface); border: 1px solid var(--lp-divider); font-size: 16px; font-weight: 500; color: var(--lp-text-2); text-decoration: none; transition: border-color 150ms ease-out, color 150ms ease-out; }
.lp .lp-chips a:hover { border-color: var(--lp-action); color: var(--lp-action); }
.lp-chips__icon { flex: none; width: 28px; height: 28px; object-fit: contain; }
.lp-chips__external { color: var(--lp-action); }
/* Chamado aos fornecedores, sob os ícones: tom leve de teal para chamar atenção; o botão fica em contorno
   (preenchimento saturado é só do "Agendar demonstração") */
.lp-vendor-cta { margin: 48px auto 0; max-width: 920px; padding: 28px 32px; border-radius: 24px; background: rgba(200, 236, 228, 0.4); border: 1px solid rgba(12, 110, 98, 0.18); display: flex; align-items: center; gap: 24px; text-align: left; }
.lp-vendor-cta__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lp-vendor-cta__label { padding: 5px 12px; border-radius: 14px; background: var(--lp-surface); font-size: 14px; font-weight: 500; color: var(--lp-action); }
.lp-vendor-cta__title { font-size: 22px; line-height: 1.3; font-weight: 500; color: var(--lp-text); text-wrap: balance; }
.lp-vendor-cta__points { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.lp-vendor-cta__points li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.45; color: var(--lp-text-2); }
.lp-vendor-cta__points li:first-child { font-weight: 500; color: var(--lp-text); }
.lp-vendor-cta__points .lp-icon { flex: none; margin-top: 3px; color: var(--lp-action); }
.lp-vendor-cta .lp-btn { flex: none; }

/* Quem acredita: logos soltos, sem card (pedido do produto, set/2026); o tooltip mostra o rótulo */
.lp-backers { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.lp-backers__group { display: flex; flex-direction: column; align-items: center; }
.lp-backers__label { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
/* Centralizado sob o título (pedido do produto, set/2026): os logos do grupo lado a lado; sem espaço, descem para a linha de baixo, também no centro */
.lp-backers__logos { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 72px; }
.lp-backers__logo { position: relative; display: flex; }
.lp-backers__logo img { height: auto; }
/* Tooltip embaixo e centrado no logo (acima, cobriria o rótulo do grupo); fora do layout até o hover, para o texto escondido não alargar a página no celular */
.lp-backers__logo .lp-tooltip { display: none; z-index: 1; top: calc(100% + 8px); bottom: auto; width: max-content; max-width: 200px; white-space: normal; }
.lp-backers__logo:hover .lp-tooltip { display: block; opacity: 1; }

/* Convite final */
.lp-cta { padding: 88px 80px; border-radius: 28px; background: var(--lp-teal-900); display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-cta__title { margin-top: 20px; max-width: 760px; font-size: 48px; line-height: 1.1; color: var(--lp-surface); }
.lp-cta__lead { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--lp-neutral-300); }
.lp-cta .lp-btn { margin-top: 36px; }

/* Rodapé */
.lp-footer { padding: 56px 0 40px; }
.lp-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.lp-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.lp-brand--static { min-height: 0; }
.lp-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--lp-muted); }
.lp-footer__navs { display: flex; align-items: flex-start; gap: 72px; }
.lp-footer__nav { display: flex; flex-direction: column; align-items: flex-start; }
.lp-footer__nav .lp-caps { margin-bottom: 6px; }
.lp .lp-footer__nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--lp-muted); text-decoration: none; }
.lp .lp-footer__nav a:hover { color: var(--lp-action); text-decoration: underline; text-underline-offset: 3px; }
.lp .lp-footer__nav a[aria-current="page"] { color: var(--lp-text); font-weight: 500; }

/* Página de caso */
.lp-back { padding-top: 40px; }
.lp-case-hero { padding-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 80px; align-items: start; }
.lp-case-hero__city { display: flex; align-items: center; gap: 16px; }
/* o brasão encosta na esquerda da caixa: alinha com a primeira letra do título logo abaixo */
.lp-case-hero__city .lp-seal--hero { object-position: left center; }
.lp-case-hero__city > span { display: flex; flex-direction: column; gap: 2px; }
.lp-case-hero__prefix { font-size: 14px; color: var(--lp-muted); }
.lp-case-hero__name { font-size: 24px; line-height: 1.2; font-weight: 500; }
.lp-case-hero__name span { font-size: 16px; }
.lp-case-hero__uses { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.lp-case-hero__uses .lp-tags { gap: 8px; }

/* Página de secretaria (/saude, /fazenda…): o nome que o Google já conhece, a promessa e o resumo ao lado */
.lp-department-hero { display: flex; flex-direction: column; align-items: flex-start; }
.lp-h1--department { font-size: 56px; line-height: 1.06; }
.lp-department-hero__promise { margin-top: 20px; max-width: 640px; font-size: 24px; line-height: 1.4; color: var(--lp-text-2); text-wrap: balance; }
.lp-department-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lp-summary__clients { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; }
.lp .lp-summary__client { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--lp-text); text-decoration: none; }
.lp .lp-summary__client:hover span { color: var(--lp-action); text-decoration: underline; text-underline-offset: 3px; }
.lp-summary__client img { width: 28px; height: 28px; object-fit: contain; mix-blend-mode: multiply; }
.lp-department-note { margin-top: 28px; font-size: 16px; line-height: 1.5; color: var(--lp-text-2); }
.lp-usage-stack { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-usage-caption { font-size: 13px; line-height: 1.5; color: var(--lp-muted); }
.lp-chips--departments { margin-top: 28px; }
/* Só o nome da secretaria, sem ícone: padding igual dos dois lados */
.lp .lp-chips--departments a { padding: 0 16px; }
.lp-summary { padding: 28px; border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-divider); }
.lp-summary__title { font-size: 16px; font-weight: 500; }
.lp-summary dl { margin-top: 12px; }
.lp-summary dl > div { padding: 14px 0; border-bottom: 1px solid var(--lp-divider); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-summary dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.lp-summary dt { font-size: 14px; color: var(--lp-muted); }
.lp-summary dd { font-size: 15px; font-weight: 500; text-align: right; }
.lp-summary__stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lp-summary__note { font-size: 12px; font-weight: 400; color: var(--lp-muted); }
.lp-summary__systems { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lp-summary__system { position: relative; display: inline-flex; }
.lp-summary__system img { width: 28px; height: 28px; object-fit: contain; }
/* Ícone sem rótulo leva tooltip (regra ui-tooltips); a landing não carrega o Alpine do painel */
.lp-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--lp-text); color: var(--lp-surface); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms ease-out; }
.lp-summary__system:hover .lp-tooltip { opacity: 1; }
.lp-band--results { margin-top: 96px; }
/* Três ou quatro números ocupam a linha inteira */
.lp-stats { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.lp-stats li { padding: 28px; border-radius: 20px; background: var(--lp-surface); display: flex; flex-direction: column; gap: 12px; }
.lp-stats__value { font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.lp-stats__label { font-size: 16px; line-height: 1.4; }
/* Colunas de no mínimo 260px: quatro soluções cabem numa linha; com menos, os cards mantêm a largura */
.lp-solutions { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.lp-solutions.lp-solutions--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-solution { padding: 28px; border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-divider); display: flex; flex-direction: column; gap: 14px; }
.lp-solution h3 { font-size: 20px; line-height: 1.3; font-weight: 500; }
.lp-solution p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--lp-muted); }
.lp-steps { margin-top: 36px; }
.lp-steps li { padding: 16px 0; border-top: 1px solid var(--lp-divider); display: flex; align-items: center; gap: 16px; font-size: 17px; line-height: 1.4; }
.lp-steps li:last-child { border-bottom: 1px solid var(--lp-divider); }
.lp-steps__number { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--lp-info-100); color: var(--lp-info); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
/* Os dois celulares lado a lado, no tamanho padrão (a coluna tem 660px); sem espaço para os dois, o formulário desce */
.lp-usage-figure { padding: 40px 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 20px; }
.lp-testimonial { padding: 56px 64px; border-radius: 24px; background: var(--lp-surface); border: 1px solid var(--lp-divider); display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.lp-testimonial__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lp-testimonial blockquote { font-size: 30px; line-height: 1.35; }
.lp-testimonial__author { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; color: var(--lp-muted); }

/* Privacidade e termos: a casca da landing; o texto tem a largura do menu do topo (lp-container) */
.lp-legal { padding: 72px 0 24px; }
.lp-legal__head { padding-bottom: 32px; border-bottom: 1px solid var(--lp-divider); display: flex; flex-direction: column; gap: 20px; }
.lp-legal__title { font-size: 52px; line-height: 1.06; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.lp-legal__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 15px; color: var(--lp-muted); }
.lp-legal__langs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--lp-surface-2); }
.lp-legal__langs a { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--lp-muted); text-decoration: none; }
.lp-legal__langs a[aria-current] { background: var(--lp-surface); color: var(--lp-text); box-shadow: 0 1px 2px rgba(31, 51, 70, 0.12); }
.lp-legal__body { font-size: 17px; line-height: 1.7; color: var(--lp-text-2); }
.lp-legal__body h2 { margin-top: 48px; font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--lp-text); }
.lp-legal__body > h2:first-child { margin-top: 40px; }
.lp-legal__body p, .lp-legal__body ul { margin-top: 16px; }
.lp-legal__body ul { padding-left: 24px; list-style: disc; display: flex; flex-direction: column; gap: 10px; }
.lp-legal__body li::marker { color: var(--lp-action); }
.lp-legal__body strong { font-weight: 500; color: var(--lp-text); }
.lp-legal__body a { text-decoration: underline; text-underline-offset: 3px; }

/* Assistente da cidade (/clientes/{cidade}/{assistente}): a Sol de Alvorada, parada, acenando.
   São duas imagens da própria arte (resources/landing/sol/build.py): o corpo e, por cima, o antebraço
   com a mão, que balança no cotovelo. Posição do braço e eixo do aceno em % da figura, medidos pelo
   build.py (ele imprime os valores). */
/* Abertura. Desktop: texto à esquerda, centralizado na altura, e a Sol à direita. Até 960px vira uma coluna
   na ordem do HTML: a Sol entra logo depois do subtítulo, antes da etiqueta e dos botões. */
.lp-sol-hero {
    padding-top: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    grid-template-areas: ". stage" "city stage" "title stage" "lead stage" "tags stage" "ctas stage" ". stage";
    column-gap: 64px;
    justify-items: start;
}
.lp-sol-hero > .lp-case-hero__city { grid-area: city; }
/* o "O" de "Oi!" começa 3px depois da borda do texto (1px no celular): o brasão acompanha */
.lp-sol-hero .lp-seal--hero { margin-left: 3px; }
.lp-sol-hero__title { grid-area: title; margin-top: 32px; }
.lp-sol-hero__lead { grid-area: lead; margin-top: 20px; max-width: 520px; font-size: 20px; line-height: 1.5; color: var(--lp-muted); text-wrap: pretty; }
.lp-sol-hero__tags { grid-area: tags; margin-top: 24px; }
.lp-sol-hero__ctas { grid-area: ctas; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

.lp-sol-stage { grid-area: stage; justify-self: stretch; height: clamp(560px, calc(100svh - 200px), 780px); display: flex; align-items: center; justify-content: center; }
.lp-sol-figure { position: relative; height: 91%; aspect-ratio: 720 / 1840; }
/* sombra no chão, sob os tênis */
.lp-sol-figure::before { content: ""; position: absolute; left: 29%; width: 52%; top: 95.6%; height: 3.6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 41, 20, 0.26), rgba(59, 41, 20, 0)); }
.lp-sol-figure__body { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-sol-figure__arm {
    position: absolute;
    left: 7.917%;
    top: 17.935%;
    width: 24.722%;
    height: auto;
    transform-origin: 28.65% 96.44%;
    animation: lp-sol-wave 2.8s ease-in-out infinite;
}
/* três balanços e uma pausa, sem parar de vez */
@keyframes lp-sol-wave {
    0%, 68%, 100% { rotate: 0deg; }
    11% { rotate: -9deg; }
    24% { rotate: 6deg; }
    37% { rotate: -9deg; }
    51% { rotate: 5deg; }
}

.lp-sol-points { max-width: 760px; }

/* Chamada na página do caso: a assistente num quadro com o sol ao fundo, ligada à página em 3D */
.lp-sol-teaser { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 64px; align-items: center; }
.lp-sol-teaser__art { aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fffaf0 0%, #fff4dc 30%, var(--lp-reward-200) 58%, var(--lp-reward-300) 100%); }
.lp-sol-teaser__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.lp-sol-teaser .lp-btn { margin-top: 8px; gap: 10px; }

@media (max-width: 1180px) {
    .lp-sol-hero { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
}
@media (max-width: 960px) {
    .lp-sol-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "city" "title" "lead" "stage" "tags" "ctas"; }
    .lp-sol-stage { margin-top: 16px; height: clamp(440px, 62svh, 600px); }
}
@media (max-width: 640px) {
    .lp-sol-hero__title { margin-top: 24px; }
    .lp-sol-hero .lp-seal--hero { margin-left: 1px; }
    .lp-sol-hero__lead { margin-top: 16px; font-size: 17px; }
    .lp-sol-stage { height: clamp(420px, 58svh, 540px); }
    .lp-sol-hero__ctas { margin-top: 28px; flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
    .lp-sol-hero__ctas .lp-btn { min-height: 52px; }
    .lp-sol-teaser { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .lp-sol-teaser__art { width: min(240px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-sol-figure__arm { animation: none; }
}

/* Tablet: blocos lado a lado viram coluna */
@media (max-width: 1180px) {
    .lp-header { padding: 12px 0 0; }
    .lp-nav { gap: 20px; }
    .lp-split, .lp-split--problem, .lp-split--ai, .lp-split--usage, .lp-case-hero {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }
    .lp-split--ai > figure { order: 2; }
    .lp-heading-row { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .lp-heading-row--end { grid-template-columns: minmax(0, 1fr) auto; }
    .lp-product__window { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); }
    .lp-diagram { grid-template-columns: minmax(0, 1fr); justify-items: stretch; row-gap: 16px; padding: 32px; }
    .lp-diagram__fan, .lp-diagram__arrow { display: none; }
    .lp-diagram__down { display: block; }
    .lp-flow, .lp-flow--case { grid-template-columns: minmax(0, 1fr); row-gap: 0; max-width: 560px; margin-inline: auto; width: 100%; }
    .lp-flow__link, .lp-flow__branch { height: 40px; }
    .lp-flow__link::before { left: 28px; right: auto; top: 0; bottom: 6px; border-top: 0; border-left: 1.5px dashed var(--lp-reward-700); }
    .lp-flow__link::after { left: 24px; right: auto; top: auto; bottom: 4px; transform: rotate(135deg); }
    .lp-flow__branch::before { left: 28px; width: 0; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--lp-reward-700); }
    .lp-flow__branch::after { display: none; }
    .lp-flow__node--apart { margin: 20px 0 0; }
    .lp-flow--case .lp-flow__link::before { border-left-color: var(--lp-outline); }
    .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-solutions, .lp-examples { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
    .lp-nav, .lp-header__actions .lp-btn { display: none; }
    .lp-header__bar { gap: 8px; padding: 0 4px 0 14px; }
    .lp-brand { flex-grow: 1; }
    .lp-header__menu { display: flex; }
    .lp-product__window { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .lp-product__rail { display: none; }
    .lp-product__list { border-right: 0; border-bottom: 1px solid var(--lp-divider); padding-bottom: 8px; }
    .lp-win { position: relative; left: auto; bottom: auto; margin: -20px 0 0 16px; width: fit-content; }
    .lp-product { padding-bottom: 0; }
}

/* Mobile */
@media (max-width: 640px) {
    :root { --lp-gutter: 16px; --lp-section: 56px; }
    .lp-header { padding: 8px 0 0; }
    .lp-header__bar { height: 56px; padding: 0 4px 0 14px; border-radius: 14px; }
    .lp-header .lp-brand__logo { height: 22px; }
    .lp-section--tight { padding-top: 52px; }

    .lp-h1 { font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; }
    .lp-h1--case { margin-top: 24px; font-size: 34px; }
    .lp-h2, .lp-h2--lg { font-size: 28px; line-height: 1.15; }
    .lp-cta__title { font-size: 28px; }
    .lp-pill { font-size: 15px; }
    .lp-heading-row--end { grid-template-columns: minmax(0, 1fr); }
    .lp-heading-row__lead, .lp-heading__lead { font-size: 17px; }

    .lp-hero { padding-top: 40px; }
    .lp-hero .lp-h1 { margin-top: 24px; }
    .lp-hero__lead { margin-top: 16px; font-size: 17px; }
    .lp-hero__ctas { margin-top: 28px; flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
    .lp-hero .lp-btn { min-height: 52px; }
    .lp-hero .lp-seals { margin-top: 40px; gap: 20px 12px; width: 100%; }
    .lp-hero .lp-seals__item { width: calc((100% - 36px) / 4); }
    .lp-seals--links .lp-seals__item, .lp-seals__item a { width: auto; }
    .lp-hero .lp-seal { width: 48px; height: 48px; }
    .lp-product { margin-top: 40px; }
    .lp-product__list { padding: 16px 16px 4px; }
    .lp-today__row { align-items: flex-start; flex-wrap: wrap; column-gap: 12px; row-gap: 6px; padding: 14px 0; }
    .lp-today__row > .lp-tag, .lp-today__row > .lp-chip-ai { margin-left: 52px; }
    .lp-today__row.is-selected { margin: 0 -16px; padding-inline: 16px; }
    .lp-product__chat .lp-chat { padding: 16px 14px 28px; }
    .lp-chat-head { padding: 14px 16px; }
    .lp-chip-ai { font-size: 12px; }

    .lp-quotes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .lp-quote { padding: 18px; flex-direction: row; align-items: flex-start; gap: 12px; }
    .lp-quote blockquote { font-size: 18px; }

    .lp-diagram { margin-top: 32px; padding: 20px; border-radius: 20px; }
    .lp-diagram__record-name { white-space: normal; }

    .lp-frame { border-radius: 24px; }
    /* 12px de respiro lateral: o celular padrão (300px) cabe inteiro a partir de 360px de tela */
    .lp-ai-figure, .lp-usage-figure { padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .lp-ai-figure__suggestion, .lp-ai-figure__weekly { align-self: stretch; }
    .lp-points { margin-top: 24px; }
    .lp-point__title { font-size: 17px; }

    .lp-vendor-cta { margin-top: 32px; padding: 22px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .lp-vendor-cta__title { font-size: 19px; }
    .lp-vendor-cta .lp-btn { align-self: stretch; }
    .lp-backers { margin-top: 32px; gap: 36px; }
    .lp-backers__logos { margin-top: 16px; gap: 24px 32px; }

    .lp-legal { padding-top: 40px; }
    .lp-legal__title { font-size: 34px; }
    .lp-legal__body { font-size: 16px; }
    .lp-legal__body h2 { margin-top: 40px; font-size: 21px; }

    .lp-band { padding: 52px 0 56px; }
    .lp-band--results { margin-top: 52px; }
    .lp-flow { margin-top: 32px; }
    .lp-examples { margin-top: 32px; gap: 12px; }
    .lp-example-card { padding: 18px; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .lp-example-card h3 { flex: 1 1 200px; font-size: 16px; }

    .lp-carousel { margin: 32px calc(-1 * var(--lp-gutter)) 0; padding-inline: var(--lp-gutter); scroll-padding-inline: var(--lp-gutter); }
    .lp-carousel__track { gap: 12px; }
    .lp-carousel__item { width: 290px; }
    .lp .lp-client-card { padding: 22px; }
    .lp-seal--card { width: 56px; height: 56px; }
    .lp-client-card__city { font-size: 19px; }
    .lp-carousel-controls { display: none; }
    .lp-carousel__hint { display: block; }

    .lp .lp-chips a { min-height: 44px; padding: 0 14px 0 10px; font-size: 14px; }
    .lp .lp-chips--departments a { padding: 0 14px; }
    .lp-chips__icon { width: 24px; height: 24px; }

    .lp-cta { padding: 48px 20px; border-radius: 24px; }
    .lp-cta .lp-btn { align-self: stretch; }

    .lp-footer__inner { flex-direction: column; }
    .lp-footer__navs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .lp .lp-footer__nav a { min-height: 44px; }

    .lp-back { padding-top: 24px; }
    .lp-case-hero__name { font-size: 20px; }
    .lp-h1--department { font-size: 36px; }
    .lp-department-hero__promise { margin-top: 16px; font-size: 18px; line-height: 1.45; }
    .lp-department-hero__ctas { margin-top: 28px; align-self: stretch; flex-direction: column; align-items: stretch; gap: 10px; }
    .lp-department-note { margin-top: 20px; font-size: 15px; }
    .lp-seal--hero { width: 64px; height: 64px; }
    .lp-summary { padding: 20px; }
    .lp-stats { margin-top: 32px; gap: 12px; }
    .lp-stats li { padding: 16px; }
    .lp-stats__value { font-size: 36px; }
    .lp-stats__label { font-size: 14px; }
    .lp-solutions { margin-top: 32px; gap: 12px; }
    .lp-solutions.lp-solutions--pairs { grid-template-columns: minmax(0, 1fr); }
    .lp-solution { padding: 20px; flex-direction: row; align-items: flex-start; }
    .lp-steps { margin-top: 24px; }
    .lp-steps li { font-size: 16px; }
    .lp-testimonial { padding: 28px 20px; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .lp-seal--quote { width: 72px; height: 72px; }
    .lp-testimonial blockquote { font-size: 22px; }
    .lp-placeholder--quote { font-size: 18px; }
    .lp-seals--links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
}

@media (min-width: 961px) {
    .lp-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-carousel { scroll-behavior: auto; }
    .lp-btn, .lp-round-button, .lp .lp-client-card, .lp .lp-chips a, .lp-tooltip { transition: none; }
}