/* ============================================================================
   LiveAPP IA — pagina publica do app da empresa.
   A casca usa o visual do site (landing.css). Aqui ficam a marca da empresa no topo e o app com o
   chat, na linguagem do Marketing Zap Design System (lime sobre forest, cartao branco de 20px,
   botao e chip em pilula, status em badge, nada de emoji de status).
   ============================================================================ */

.lv-body {
    --mz-brand: #9FE870;
    --mz-brand-hover: #8AD957;
    --mz-on-brand: #062F28;
    --mz-brand-soft: #E9F9DC;
    --mz-ink: #062F28;
    --mz-card: #ffffff;
    --mz-sunken: #F5F6F5;
    --mz-line: #E8EAE8;
    --mz-line-strong: #DFE1DF;
    --mz-text: #171918;
    --mz-text-2: #787878;
    --mz-text-3: #A9ACA9;
    --mz-danger-bg: #FDECEC;
    --mz-danger-fg: #B3272C;
    --mz-radius-card: 20px;
    --mz-radius-tile: 14px;
    --mz-radius-input: 12px;
    --mz-radius-pill: 999px;
    --mz-shadow-xs: 0 1px 2px rgba(6,47,40,.04);
    --mz-shadow-card: 0 2px 10px rgba(6,47,40,.05);
    --mz-shadow-sm: 0 1px 3px rgba(6,47,40,.05), 0 1px 2px rgba(6,47,40,.03);
    --mz-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mz-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #F1F2F1;
    font-family: var(--mz-font-sans);
    color: var(--mz-text);
}
.lv-body [hidden] { display: none !important; }

/* A casca nativa apresenta o cabeçalho e a navegação da instalação. */
.lv-body.lv-native .lp-shell > .lv-header { display: none; }
.lv-body.lv-native .lv-main { padding-top: 16px; }

.lv-header { justify-content: space-between; }
/* O cabecalho do site e escuro: o nome da empresa e o subtitulo precisam ser claros aqui (as
   cores do design system valem para o cartao branco do app, nao para esta faixa). */
.lv-header .lv-brand-text strong { color: #fff; }
.lv-header .lv-brand-text small { color: #a7c4cd; }
.lv-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.lv-brand-logo { width: 52px; height: 52px; flex: 0 0 auto; object-fit: cover; border-radius: var(--mz-radius-tile); border: 1px solid var(--mz-line); background: #fff; }
.lv-brand-text { display: grid; gap: 2px; min-width: 0; }
.lv-brand-text strong { font-family: var(--mz-font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--mz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-brand-text small { color: var(--mz-text-2); font-size: .72rem; font-weight: 500; }
.lv-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--mz-radius-pill); background: var(--mz-brand-soft); color: var(--mz-ink); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.lv-badge.is-off { background: #F0F1F0; color: var(--mz-text-2); }

.lv-main { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 122px 0 40px; display: grid; gap: 16px; }

/* Convite para instalar: uma vez so, some quando o app ja esta aberto como aplicativo. */
.lv-instalar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; border-radius: var(--mz-radius-card); background: linear-gradient(160deg,#F2FCE8 0%,#DFF6C6 100%); border: 1px solid var(--mz-line); }
.lv-instalar-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-instalar-texto { flex: 1 1 320px; min-width: 0; }
.lv-instalar h1 { margin: 0 0 6px; font-family: var(--mz-font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; color: var(--mz-ink); }
.lv-instalar p { margin: 0; color: #3F5B52; font-size: .88rem; line-height: 1.5; }
.lv-passos { flex: 1 1 100%; margin: 4px 0 0; padding: 16px; border-radius: var(--mz-radius-tile); background: rgba(255,255,255,.72); }
.lv-passos ol { margin: 0; padding-left: 20px; color: #2F4A43; font-size: .86rem; line-height: 1.7; }
.lv-aviso { margin: 10px 0 0; color: #8a5300; font-size: .82rem; line-height: 1.6; }
/* Alternativa para Android: baixar o arquivo do app quando o navegador nao instala. */
.lv-arquivo { flex: 1 1 100%; margin: 0; color: #2F4A43; font-size: .84rem; line-height: 1.6; }
.lv-arquivo a { color: #0a5b52; font-weight: 700; }
.lv-button-claro { background: rgba(255,255,255,.85); color: var(--mz-ink); border-color: rgba(6,47,40,.14); }
.lv-button-claro:hover { background: #fff; }

/* Guia iPhone: Card, Button, Input e tons semanticos do Design Zap, isolados do CSS legado. */
.lv-body .lv-instalar { box-shadow: var(--mz-shadow-card); }
.lv-body .lv-instalar .lv-button { min-height: 44px; max-width: 100%; white-space: normal; line-height: 1.35; }
.lv-body .lv-instalar .lv-button:focus-visible,
.lv-body .lv-instalar summary:focus-visible { outline: 2px solid var(--mz-brand); outline-offset: 3px; box-shadow: 0 0 0 3px rgba(159,232,112,.55); }
.lv-body .lv-ios-intro { margin-bottom: 16px; color: var(--mz-ink); }
.lv-body .lv-ios-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 0; list-style: none; }
.lv-body .lv-ios-step { padding: 16px; border: 1px solid transparent; border-radius: var(--mz-radius-tile); color: var(--mz-ink); }
.lv-body .lv-ios-step-1 { background: #EAF2FD; border-color: #D0E2FA; }
.lv-body .lv-ios-step-2 { background: #FEF4E4; border-color: #FCE7C2; }
.lv-body .lv-ios-step-3 { background: #D6F4BE; border-color: #C2EE9D; }
.lv-body .lv-ios-step-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lv-body .lv-ios-step-mark span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--mz-radius-pill); background: var(--mz-ink); color: #fff; font-weight: 600; font-size: 13px; }
.lv-body .lv-ios-step-mark svg { width: 36px; height: 36px; }
.lv-body .lv-ios-step-1 svg { color: #2456B3; }
.lv-body .lv-ios-step-2 svg { color: #A96F17; }
.lv-body .lv-ios-step h2 { margin: 0 0 8px; font: 600 16px/1.35 var(--mz-font-display); letter-spacing: -.015em; color: var(--mz-ink); }
.lv-body .lv-ios-step p { font-size: 13px; line-height: 1.55; color: var(--mz-ink); }
.lv-body .lv-ios-app-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; overflow-wrap: anywhere; }
.lv-body .lv-ios-app-preview img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--mz-line); object-fit: cover; }
.lv-body .lv-ios-help { margin-top: 16px; display: grid; gap: 12px; justify-items: start; }
.lv-body .lv-ios-help .lv-aviso { padding: 14px; border-radius: var(--mz-radius-tile); background: #FEF4E4; color: #6B4814; font-size: 13px; }
.lv-body .lv-ios-help details { width: 100%; min-width: 0; padding: 16px; border: 1px solid var(--mz-line); border-radius: var(--mz-radius-tile); background: var(--mz-card); }
.lv-body .lv-ios-help summary { min-height: 44px; cursor: pointer; color: var(--mz-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.lv-body .lv-ios-help details p { font-size: 13px; color: var(--mz-ink); }
.lv-body .lv-ios-help label { display: block; margin: 12px 0 6px; font-size: 12px; color: var(--mz-text-2); }
.lv-body #lvIosLink { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 0 14px; margin-bottom: 12px; border: 1px solid var(--mz-line); border-radius: var(--mz-radius-input); background: var(--mz-card); color: var(--mz-ink); font: 13px/1.45 var(--mz-font-sans); }
.lv-body #lvIosLink:focus { outline: none; border-color: var(--mz-brand); box-shadow: 0 0 0 3px rgba(159,232,112,.55); }
.lv-body #lvIosCopyStatus:not(:empty) { margin-top: 12px; padding: 10px 12px; border-radius: var(--mz-radius-input); background: var(--mz-brand-soft); }
@media (max-width: 640px) {
    .lv-body .lv-ios-steps { grid-template-columns: 1fr; gap: 12px; }
    .lv-body .lv-ios-step { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
    .lv-body .lv-ios-step-mark { flex-direction: column; gap: 8px; margin: 0; }
    .lv-body .lv-instalar-acoes { width: 100%; }
    .lv-body .lv-instalar-acoes .lv-button { width: 100%; }
    .lv-body .lv-passos { padding: 12px; min-width: 0; }
}

.lv-app { display: flex; flex-direction: column; min-height: min(74vh, 660px); background: var(--mz-card); border: 1px solid var(--mz-line); border-radius: var(--mz-radius-card); box-shadow: var(--mz-shadow-card); overflow: hidden; }
/* Cabecalho do app: as medidas acompanham a largura da tela (clamp sobre vw), entao o bloco cresce e
   diminui junto com o aparelho, sem tamanho fixo por faixa. A quebra nao e decidida por ponto fixo:
   o nome tem uma largura minima confortavel e, quando as acoes nao cabem ao lado dele, elas descem
   sozinhas para a linha de baixo. Cada regra sai em duas linhas de proposito: a primeira vale no
   navegador antigo (sem clamp/min) e a segunda e a versao fluida. */
.lv-app-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--mz-line); }
.lv-app-topo { gap: clamp(8px, 1.2vw, 12px); padding: clamp(10px, 1.6vw, 16px) clamp(12px, 2.2vw, 20px); }
.lv-app-logo { width: 44px; height: 44px; flex: 0 0 auto; object-fit: cover; border-radius: var(--mz-radius-tile); border: 1px solid var(--mz-line); }
.lv-app-logo { width: clamp(36px, 11vw, 44px); height: clamp(36px, 11vw, 44px); }
.lv-app-nome { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lv-app-nome strong { font-family: var(--mz-font-display); font-size: 1rem; font-weight: 600; color: var(--mz-ink); }
.lv-app-nome strong { font-size: clamp(.95rem, 2.6vw, 1.05rem); }
.lv-app-nome small { color: var(--mz-text-2); font-size: .74rem; line-height: 1.35; }
.lv-app-nome small { font-size: clamp(.7rem, 1.9vw, .76rem); }
/* Acoes do cabecalho do app (avisos e 0800) num grupo proprio: no computador o grupo fica na ponta
   direita da linha; quando ele nao cabe ao lado do nome, desce inteiro para uma linha so dele e os
   dois botoes ficam do mesmo tamanho (largura minima igual para os dois). */
.lv-app-acoes { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; gap: 10px; margin-left: auto; }
.lv-app-acoes { flex: 0 1 max-content; gap: clamp(6px, 1.1vw, 10px); }

/* min-height:0 e o que deixa a conversa rolar dentro do cartao em vez de esticar a pagina. */
.lv-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; overflow-y: auto; background: var(--mz-sunken); }
.lv-linha { display: flex; }
.lv-linha.is-visitante { justify-content: flex-end; }
.lv-balao { max-width: 82%; padding: 9px 12px; border-radius: var(--mz-radius-tile); background: var(--mz-card); border: 1px solid var(--mz-line); box-shadow: var(--mz-shadow-xs); font-size: .86rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.lv-linha.is-visitante .lv-balao { background: var(--mz-brand-soft); border-color: transparent; color: var(--mz-ink); }
.lv-balao p { margin: 0; }
.lv-linha.is-hora { justify-content: center; }
.lv-hora { color: var(--mz-text-3); font-size: .7rem; }

.lv-composer { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--mz-line); background: var(--mz-card); }
.lv-composer input[type=text] { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--mz-line-strong); border-radius: var(--mz-radius-input); background: var(--mz-card); color: var(--mz-text); font-family: var(--mz-font-sans); font-size: .9rem; }
.lv-composer input[type=text]::placeholder { color: var(--mz-text-3); }
.lv-composer input[type=text]:focus { outline: none; border-color: var(--mz-brand); box-shadow: 0 0 0 3px rgba(159,232,112,.55); }
.lv-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--mz-radius-pill); font-family: var(--mz-font-sans); font-size: .86rem; font-weight: 600; letter-spacing: -.015em; cursor: pointer; transition: background .14s cubic-bezier(.22,.61,.36,1), transform .14s cubic-bezier(.22,.61,.36,1), box-shadow .14s cubic-bezier(.22,.61,.36,1); }
.lv-button:active { transform: scale(.98); box-shadow: none; }
.lv-button-primary { background: var(--mz-ink); color: #fff; box-shadow: var(--mz-shadow-sm); }
.lv-button-primary:hover { background: #0B3830; color: #fff; }
/* Link estilizado como botao: o site define "a { color: inherit }", que vencia a cor do botao. */
.lv-body a.lv-button { color: inherit; }
.lv-body a.lv-button-primary, .lv-body a.lv-button-primary:hover { color: #fff; }
.lv-body a.lv-button-claro { color: var(--mz-ink); }
.lv-button-enviar { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; background: var(--mz-brand); color: var(--mz-on-brand); }
.lv-button-enviar:hover { background: var(--mz-brand-hover); }
/* Microfone: mensagem de voz do cliente. Gravando, o botao vira o alerta da acao. */
/* touch-action/none + callout desligado: sem isso o proprio navegador cancela o gesto no meio da
   gravacao (vira rolagem no Android, menu de toque no iPhone) e o audio sai cortado. */
.lv-button-microfone {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
    background: var(--mz-card); color: var(--mz-ink); border-color: var(--mz-line-strong);
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lv-button-microfone:hover { border-color: var(--mz-brand); }
.lv-button-microfone.is-gravando { background: #E5484D; color: #fff; border-color: transparent; animation: lv-pulsa 1.4s ease-in-out infinite; }
/* Anexar comprovante (foto ou PDF): liberado depois da primeira mensagem. */
.lv-button-anexo { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; background: var(--mz-card); color: var(--mz-ink); border-color: var(--mz-line-strong); }
.lv-button-anexo:hover { border-color: var(--mz-brand); }
.lv-button-anexo[disabled] { opacity: .5; cursor: progress; }
@keyframes lv-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.lv-gravando { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--mz-sunken); border-top: 1px solid var(--mz-line); color: var(--mz-text); font-size: .84rem; }
.lv-ponto { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; animation: lv-pulsa 1.4s ease-in-out infinite; }
.lv-gravando-dica { color: var(--mz-text-2); font-size: .78rem; }
.lv-button-enviar-audio { min-height: 36px; padding: 0 16px; background: var(--mz-brand); color: var(--mz-on-brand); font-size: .8rem; }
.lv-cancelar { border: 0; background: transparent; color: var(--mz-text-2); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.lv-balao.is-audio { display: inline-flex; align-items: center; gap: 8px; }
.lv-body .lv-balao.is-plan-image { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--mz-radius-card); background: var(--mz-card); border: 1px solid var(--mz-line); box-shadow: var(--mz-shadow-card); min-width: 0; }
.lv-body .is-plan-image > p { white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-body .is-plan-image .lv-image-link { display:block; width:100%; }
.lv-body .is-plan-image > img, .lv-body .is-plan-image .lv-image-link img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: var(--mz-radius-tile); }
.lv-body .lv-balao.is-audio.has-media-player { display:flex; flex-direction:column; align-items:flex-start; min-width:0; width:260px; max-width:100%; }
.lv-body .has-media-player audio { display:block; width:100%; min-width:0; }
.lv-body .has-media-player a { color:var(--mz-ink); font-size:13px; }
.lv-body .has-media-player a:focus-visible, .lv-body .lv-image-link:focus-visible { outline:2px solid var(--mz-brand); outline-offset:3px; }
.lv-body .lv-plan-image-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-body .lv-plan-image-controls :is(a,button) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 40px; padding: 0 20px; border-radius: var(--mz-radius-pill); border: 1px solid var(--mz-line); background: var(--mz-card); color: var(--mz-ink); font: 500 13px var(--mz-font-sans); text-decoration: none; cursor: pointer; box-shadow: var(--mz-shadow-sm); }
.lv-body .lv-plan-image-controls button { background: var(--mz-on-brand); color: #fff; border-color: transparent; }
.lv-body .lv-plan-image-controls a:hover { background: var(--mz-sunken); }
.lv-body .lv-plan-image-controls button:hover { background: #0B493E; }
.lv-body .lv-plan-image-controls :is(a,button):focus-visible { outline: 2px solid var(--mz-brand); outline-offset: 3px; }
.lv-body .is-plan-image .lv-plan-image-status { color: var(--mz-text-2); font-size: 13px; }
.lv-body .is-plan-image [hidden] { display: none; }
.lv-button[disabled] { background: #F0F1F0; color: var(--mz-text-3); box-shadow: none; cursor: not-allowed; }
.lv-erro { margin: 0; padding: 12px 16px; background: var(--mz-danger-bg); color: var(--mz-danger-fg); font-size: .8rem; }
.lv-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Identificacao do visitante (nome opcional): agiliza o atendimento e entra no registro dos dados. */
.lv-identidade { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--mz-brand-soft); border-top: 1px solid var(--mz-line); }
.lv-identidade .lv-passo { margin: 0; color: var(--mz-text-2); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lv-identidade h3 { margin: 2px 0 0; font-family: var(--mz-font-display); font-size: 1.15rem; font-weight: 600; color: var(--mz-ink); }
.lv-identidade-ajuda { margin: 0 0 6px; color: #3F5B52; font-size: .82rem; line-height: 1.5; }
.lv-identidade-campos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-identidade input { flex: 1 1 220px; min-height: 44px; padding: 0 14px; border: 1px solid var(--mz-line-strong); border-radius: var(--mz-radius-input); background: #fff; color: var(--mz-text); font-family: var(--mz-font-sans); font-size: .9rem; }
.lv-identidade input:focus { outline: none; border-color: var(--mz-brand); box-shadow: 0 0 0 3px rgba(159,232,112,.55); }
.lv-button-marca { min-height: 40px; padding: 0 18px; background: var(--mz-brand); color: var(--mz-on-brand); font-size: .82rem; }
.lv-voce { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; background: var(--mz-sunken); border-top: 1px solid var(--mz-line); color: var(--mz-text-2); font-size: .78rem; }
.lv-voce strong { color: var(--mz-ink); }
.lv-finalizar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 10px 16px; border-top: 1px solid var(--mz-line); color: var(--mz-text-2); font-size: .78rem; }
/* Finalizar atendimento: verde escuro da marca com letra branca (pedido do cliente). */
.lv-button-finalizar { min-height: 36px; padding: 0 16px; background: var(--mz-ink); color: #fff; border-color: transparent; font-size: .8rem; }
.lv-button-finalizar:hover { background: #0B3830; color: #fff; }
.lv-redes { display: flex; flex-wrap: wrap; gap: 10px; }
/* Logomarcas das redes: quadrado arredondado na cor oficial da rede, com o desenho em branco. */
.lv-rede { display: inline-flex; align-items: center; justify-content: center; transition: transform .14s cubic-bezier(.22,.61,.36,1); }
.lv-rede:hover { transform: translateY(-2px); }
.lv-rede-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: #E8EAE8; color: #A9ACA9; }
.lv-rede-icone svg { width: 58%; height: 58%; display: block; }
.lv-body a.lv-rede { color: #fff; }
.lv-body a.lv-rede-whatsapp .lv-rede-icone { background: #25D366; color: #fff; }
.lv-body a.lv-rede-instagram .lv-rede-icone { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); color: #fff; }
.lv-body a.lv-rede-facebook .lv-rede-icone { background: #1877F2; color: #fff; }
.lv-body a.lv-rede-twitter .lv-rede-icone { background: #0F1419; color: #fff; }
/* Promocoes: um banner por vez, sempre na proporcao 1200x600 (2:1). Sem a proporcao fixa a arte
   quadrada esticava a faixa e o flexbox do celular acabava cortando o banner no meio; sem a largura
   cheia o computador mostrava um banner e meio, que ficava feio. */
.lv-promocoes { display: grid; gap: 10px; }
/* Rolagem lateral com encaixe: o dedo escolhe o banner. A barra de rolagem fica oculta porque os
   pontos ja mostram que existe mais de um. */
.lv-banners { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lv-banners::-webkit-scrollbar { display: none; }
/* A imagem preenche a caixa: nada de tarja preta nem espaco perdido quando a arte nao e 2:1.
   flex-basis 100% = exatamente um banner visivel por vez, no celular e no computador. */
.lv-banner { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1200 / 600; border-radius: var(--mz-radius-card); overflow: hidden; border: 1px solid var(--mz-line); background: var(--mz-card); box-shadow: var(--mz-shadow-card); }
.lv-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Pontos do carrossel de banners (nao confundir com .lv-ponto, a bolinha da gravacao de audio). */
.lv-promo-pontos { display: flex; justify-content: center; gap: 8px; }
.lv-promo-ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--mz-radius-pill); background: var(--mz-line-strong); cursor: pointer; transition: width .18s cubic-bezier(.22,.61,.36,1), background .18s cubic-bezier(.22,.61,.36,1); }
.lv-promo-ponto.is-ativo { width: 22px; background: var(--mz-brand); }
/* Os dois botoes de acao seguem a largura da tela: crescem e diminuem junto com o cabecalho e, na
   linha de baixo, dividem a largura em partes iguais (a mesma largura minima para os dois). */
.lv-avisos, .lv-0800 { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 14px; gap: 8px; justify-content: center; font-size: .78rem; line-height: 1.25; }
.lv-avisos, .lv-0800 { min-width: min(38vw, 170px); min-height: clamp(38px, 9vw, 44px); padding: 0 clamp(10px, 2.3vw, 14px); gap: clamp(6px, 1vw, 8px); font-size: clamp(.72rem, 2.4vw, .78rem); text-wrap: balance; }
/* Ícone de destaque "0800": o cliente pede a ligação e a central retorna. */
.lv-0800 { display: inline-flex; align-items: center; border-radius: var(--mz-radius-pill); background: var(--mz-brand); color: var(--mz-on-brand); font-weight: 600; }
.lv-0800:hover { background: var(--mz-brand-hover); }
.lv-0800 strong { font-family: var(--mz-font-display); }
/* Avisos no celular: pilula discreta ao lado do 0800; ligada, fica na cor da marca. */
.lv-avisos { display: inline-flex; align-items: center; border-radius: var(--mz-radius-pill); background: var(--mz-card); color: var(--mz-ink); border-color: var(--mz-line-strong); font-weight: 600; }
.lv-avisos:hover { border-color: var(--mz-brand); }
.lv-avisos.is-ligado { background: var(--mz-brand); color: var(--mz-on-brand); border-color: transparent; }
.lv-ligar { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--mz-brand-soft); border-top: 1px solid var(--mz-line); }
.lv-ligar h3 { margin: 2px 0 0; font-family: var(--mz-font-display); font-size: 1.15rem; color: var(--mz-ink); }
/* Contato e mapa de atendimento. */
.lv-contato { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 8px; }
.lv-contato h2 { margin: 0 0 12px; font-family: var(--mz-font-display); font-size: 1.2rem; color: var(--mz-ink); }
.lv-contato-linhas { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-contato-item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--mz-radius-pill); background: var(--mz-card); border: 1px solid var(--mz-line); color: var(--mz-ink); font-size: .84rem; font-weight: 600; }
.lv-contato-item:hover { border-color: var(--mz-brand); }
.lv-contato-endereco { margin: 14px 0 8px; color: var(--mz-text-2); font-size: .84rem; }
.lv-mapa { border-radius: var(--mz-radius-card); overflow: hidden; border: 1px solid var(--mz-line); box-shadow: var(--mz-shadow-card); background: var(--mz-card); }
.lv-mapa iframe { display: block; width: 100%; height: 260px; border: 0; }
@media (max-width: 720px) {
    .lv-banners { gap: 10px; }
    .lv-mapa iframe { height: 200px; }
}
.lv-aviso-info { margin: 0; padding: 10px 16px; background: var(--mz-brand-soft); color: var(--mz-ink); font-size: .82rem; }

.lv-footer { background: #061b29; color: #94adb8; }
.lv-footer .lv-brand-text strong { color: #fff; }
.lv-footer .lv-brand-text small { color: #94adb8; }
.lv-footer .lv-brand-logo { border-color: rgba(255,255,255,.16); }
/* Contato dentro do rodape: o bloco deixou de ser uma secao solta depois do cartao do app (em tela
   curta ele encostava no chat, era o que aparecia no iPhone com a barra do Safari) e passou a viver
   no rodape, ocupando a linha inteira e no tom do fundo escuro. */
.lv-footer .lv-contato { grid-column: 1 / -1; width: 100%; margin: 0; padding: 0; }
.lv-footer .lv-contato h2 { margin: 0 0 10px; color: #fff; font-size: 1.05rem; }
.lv-footer .lv-contato-item { background: transparent; border-color: rgba(255,255,255,.24); color: #e8f1f4; }
.lv-footer .lv-contato-item:hover { border-color: var(--mz-brand); }
.lv-footer .lv-contato-endereco { color: #94adb8; }
.lv-footer .lv-mapa { border-color: rgba(255,255,255,.18); box-shadow: none; }
/* Rodape personalizado da empresa: a grade se ajusta sozinha (uma coluna no celular, varias no
   desktop) e o icone acompanha o espaco disponivel, sem ficar gigante nem sumir. */
.lv-rodape { grid-column: 1 / -1; width: 100%; }
.lv-rodape-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lv-rodape-item { display: flex; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--mz-radius-tile, 14px); background: rgba(255,255,255,.04); }
.lv-rodape-item.is-link:hover { border-color: var(--mz-brand); }
.lv-rodape-conteudo { display: flex; align-items: center; gap: 10px; width: 100%; color: inherit; text-decoration: none; }
.lv-rodape-icone { flex: none; width: clamp(28px, 7vw, 44px); height: auto; max-height: clamp(28px, 7vw, 44px); object-fit: contain; }
.lv-rodape-texto { font-size: clamp(.8rem, 2.6vw, .92rem); line-height: 1.35; color: #e8f1f4; }
@media (max-width: 720px) { .lv-rodape-itens { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
    .lv-header { padding: 10px 14px; gap: 12px; }
    .lv-brand-logo { width: 44px; height: 44px; }
    .lv-brand-text strong { font-size: .95rem; }
    /* No celular o app ocupa o que sobra da tela: o campo de escrever fica sempre visivel, sem
       obrigar o cliente a rolar a pagina inteira. */
    /* min-height (e nao height): quando o banner + o cartao de instalar + o cartao do app nao cabem
       na altura da tela, a pagina cresce e rola em vez de deixar o conteudo do app passar por baixo
       das secoes seguintes (no iPhone a barra do Safari reduz a altura e isso acontecia). */
    .lv-main { display: flex; flex-direction: column; width: calc(100% - 24px); min-height: 100vh; min-height: 100svh; padding: 108px 0 12px; gap: 12px; }
    .lv-instalar { flex: 0 0 auto; padding: 16px; gap: 12px; }
    /* A faixa de banners e uma caixa fechada: sem isso o flexbox do celular espreme a faixa e
       entrega so uma tira da imagem. */
    .lv-promocoes { flex: 0 0 auto; }
    .lv-instalar h1 { font-size: 1.2rem; }
    .lv-app { flex: 1 1 auto; min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
    .lv-button { transition: none; }
}

/* Marketing Zap: Card, Button md, Input, Select, Badge e tiles, escopados à caixa privada. */
.lv-body .lv-private { padding: 20px; border-radius: 20px; border: 1px solid #E8EAE8; background: #fff; box-shadow: 0 2px 10px rgba(6,47,40,.05); color: #062F28; min-width: 0; }
.lv-body .lv-private-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.lv-body .lv-private h2 { margin: 0; font: 600 20px/1.3 var(--mz-font-display); letter-spacing: -.015em; color: #062F28; }
.lv-body .lv-private p { margin: 6px 0 0; font: 400 13px/1.5 var(--mz-font-sans); color: #787878; overflow-wrap: anywhere; }
.lv-body .lv-private-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 16px 0; }
.lv-body .lv-private label { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; color: #787878; font: 500 12px/1.35 var(--mz-font-sans); }
.lv-body .lv-private :is(input,select) { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid #E8EAE8; border-radius: 12px; background: #fff; color: #062F28; font: 400 13px/1.45 var(--mz-font-sans); box-shadow: 0 1px 2px rgba(6,47,40,.04); }
.lv-body .lv-private select { border-radius: 999px; }
.lv-body .lv-private :is(input,select):focus { outline: none; border-color: #9FE870; box-shadow: 0 0 0 3px rgba(159,232,112,.55); }
.lv-body .lv-private-button { box-sizing: border-box; min-height: 44px; padding: 8px 20px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid transparent; background: #062F28; color: #fff; box-shadow: 0 1px 3px rgba(6,47,40,.05),0 1px 2px rgba(6,47,40,.03); font: 500 13px/1.3 var(--mz-font-sans); letter-spacing: -.015em; cursor: pointer; text-decoration: none; transition: background .14s, transform .14s; overflow-wrap: anywhere; }
.lv-body .lv-private-button:hover { background: #0B3830; }
.lv-body .lv-private-button:active { transform: scale(.98); box-shadow: none; }
.lv-body .lv-private-button.is-secondary { background: #fff; color: #062F28; border-color: #E8EAE8; }
.lv-body .lv-private-button.is-secondary:hover { background: #F5F6F5; }
.lv-body .lv-private-button.is-danger { background: #E5484D; color: #fff; }
.lv-body .lv-private-button.is-danger:hover { background: #B3272C; }
.lv-body .lv-private-button:disabled { background: #F0F1F0; color: #787878; cursor: not-allowed; box-shadow: none; }
.lv-body .lv-private :is(button,summary):focus-visible { outline: 2px solid #9FE870; outline-offset: 3px; }
.lv-body .lv-private .lv-private-state { margin: 16px 0; padding: 12px 16px; border-radius: 14px; background: #FEF4E4; color: #A96F17; }
.lv-body .lv-private .lv-private-state.is-error { background: #FDECEC; color: #B3272C; }
.lv-body .lv-private .lv-private-state.is-success { background: #EAF7EF; color: #062F28; }
.lv-body .lv-private-list { display: grid; gap: 12px; }
.lv-body .lv-private-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 14px; border: 1px solid #E8EAE8; background: #F5F6F5; min-width: 0; }
.lv-body .lv-private-item > div { min-width: 0; overflow-wrap: anywhere; }
.lv-body .lv-private-item strong { font-size: 14px; font-weight: 600; }
.lv-body .lv-private-badge { display: inline-flex; gap: 4px; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #D6F4BE; color: #062F28; font: 500 11px/1 var(--mz-font-sans); }
.lv-body .lv-private-badge.is-read { background: #F0F1F0; color: #5C5F5C; }
.lv-body .lv-private-access { margin-top: 20px; padding-top: 16px; border-top: 1px solid #E8EAE8; }
.lv-body .lv-private-access summary { font: 600 14px/1.4 var(--mz-font-sans); cursor: pointer; min-height: 44px; display: list-item; align-content: center; }
.lv-body .lv-private-links { list-style: none; padding: 0; display: grid; gap: 12px; }
.lv-body .lv-private-links li { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 16px; border-radius: 14px; background: #F5F6F5; }
.lv-body .lv-private-dialog { box-sizing: border-box; padding: 20px; width: min(620px,calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; border: 1px solid #E8EAE8; border-radius: 20px; color: #062F28; box-shadow: 0 16px 40px rgba(6,47,40,.10); }
.lv-body .lv-private-dialog::backdrop { background: rgba(6,47,40,.4); }
.lv-body .lv-private-body { margin: 16px 0; white-space: pre-wrap; font: 400 14px/1.65 var(--mz-font-sans); overflow-wrap: anywhere; }
.lv-body .lv-private-document { margin-top: 16px; padding: 16px; border-radius: 14px; background: #F5F6F5; overflow-wrap: anywhere; white-space: pre-wrap; }
.lv-body .lv-private-document a { color: #114237; text-decoration: underline; }
@media(max-width:720px) {
    .lv-body .lv-private { flex: 0 0 auto; padding: 16px; }
    .lv-body .lv-private-item { flex-wrap: wrap; gap: 12px; }
    .lv-body .lv-private-controls > button { flex: 1 1 100%; }
    .lv-body .lv-private-item > button { width: 100%; }
}