/*==============================================================================
  MOCKUPS DA LANDING

  Réplicas das telas do sistema, em HTML e CSS, com dados fictícios.

  Não são capturas por três motivos: captura mostra dados de clientes reais,
  envelhece a cada mudança de interface e pesa centenas de kilobytes por tela.
  Isto aqui acompanha o tema, fica nítido em qualquer resolução, encolhe no
  celular e custa alguns kilobytes de CSS para a página inteira.

  Todas as cores saem dos tokens `--az-*` da landing, então o claro e o escuro
  vêm de graça.
==============================================================================*/

.azm {
    --azm-fg: var(--az-text);
    --azm-fg-fraco: var(--az-text-muted);
    --azm-borda: var(--az-border);
    --azm-fundo: var(--az-surface);
    --azm-fundo-fraco: var(--az-bg-secondary);
    --azm-primaria: var(--az-primary);

    position: relative;
    overflow: hidden;
    border: 1px solid var(--azm-borda);
    border-radius: var(--az-radius-lg);
    background: var(--azm-fundo);
    box-shadow: var(--az-shadow-lg), 0 0 0 1px rgba(74, 108, 247, 0.14);
    font-family: var(--az-font);
    /* Mockup é ilustração: selecionar o texto dele não serve a nada e atrapalha
       quem tenta arrastar a página no toque. */
    user-select: none;
    text-align: left;
    container-type: inline-size;
}

/* Barra de janela: dá contexto de "isto é um aplicativo" sem precisar desenhar
   o navegador inteiro. */
.azm__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--azm-borda);
    background: var(--azm-fundo-fraco);
}

.azm__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--azm-borda);
}

.azm__bar i:nth-child(1) { background: #fb7185; }
.azm__bar i:nth-child(2) { background: #fbbf24; }
.azm__bar i:nth-child(3) { background: #34d399; }

.azm__url {
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--azm-fundo);
    border: 1px solid var(--azm-borda);
    color: var(--azm-fg-fraco);
    font-size: 11px;
    letter-spacing: .01em;
}

.azm__body { padding: 16px; display: grid; gap: 14px; }

/* ── Átomos ─────────────────────────────────────────────────────────────── */
.azm-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--azm-fg);
    letter-spacing: -.01em;
}

.azm-rotulo {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--azm-fg-fraco);
}

.azm-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid var(--azm-borda);
    background: var(--azm-fundo);
    color: var(--azm-fg);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.azm-btn--primaria {
    background: var(--azm-primaria);
    border-color: transparent;
    color: #fff;
}

.azm-btn--fantasma { background: transparent; }

.azm-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--azm-primaria) 12%, transparent);
    color: var(--azm-primaria);
    font-size: 10.5px;
    font-weight: 700;
}

.azm-pill--ok {
    background: color-mix(in srgb, var(--az-success) 16%, transparent);
    color: var(--az-success);
}

.azm-select {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 10px;
    border-radius: 9px;
    border: 1px solid var(--azm-borda);
    background: var(--azm-fundo);
    color: var(--azm-fg);
    font-size: 11.5px;
    font-weight: 600;
}

.azm-select::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--azm-fg-fraco);
}

/* ── Cartões de indicador ───────────────────────────────────────────────── */
.azm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.azm-kpi {
    padding: 11px 13px;
    border: 1px solid var(--azm-borda);
    border-radius: 12px;
    background: var(--azm-fundo);
    display: grid;
    gap: 3px;
}

.azm-kpi__topo {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--azm-fg-fraco);
    font-size: 10.5px;
    font-weight: 600;
}

.azm-kpi__icone {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--azm-primaria) 13%, transparent);
    color: var(--azm-primaria);
    font-size: 11px;
}

.azm-kpi__valor {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--azm-fg);
    letter-spacing: -.02em;
}

.azm-kpi__pe { font-size: 10px; color: var(--azm-fg-fraco); }

.azm-kpi--ok .azm-kpi__valor { color: var(--az-success); }
.azm-kpi--ok .azm-kpi__icone { background: color-mix(in srgb, var(--az-success) 16%, transparent); color: var(--az-success); }
.azm-kpi--alerta .azm-kpi__valor { color: var(--az-warning); }
.azm-kpi--alerta .azm-kpi__icone { background: color-mix(in srgb, var(--az-warning) 18%, transparent); color: var(--az-warning); }
.azm-kpi--perigo .azm-kpi__valor { color: var(--az-danger); }
.azm-kpi--perigo .azm-kpi__icone { background: color-mix(in srgb, var(--az-danger) 16%, transparent); color: var(--az-danger); }

/* ── Abas ───────────────────────────────────────────────────────────────── */
.azm-abas {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: var(--azm-fundo-fraco);
    border: 1px solid var(--azm-borda);
    overflow: hidden;
}

.azm-aba {
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--azm-fg-fraco);
    white-space: nowrap;
}

.azm-aba.is-ativa {
    background: var(--azm-fundo);
    color: var(--azm-fg);
    box-shadow: var(--az-shadow-sm);
}

/* ── Tabela ─────────────────────────────────────────────────────────────── */
.azm-tabela { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.azm-tabela th {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--azm-borda);
    color: var(--azm-fg-fraco);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.azm-tabela td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--azm-borda);
    color: var(--azm-fg);
}

.azm-tabela tr:last-child td { border-bottom: 0; }
.azm-tabela .azm-neg { color: var(--az-danger); font-weight: 700; }
.azm-tabela .azm-pos { color: var(--az-success); font-weight: 700; }

/*==============================================================================
  Agenda — a tela do calendário
==============================================================================*/
.azm-agenda { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }

.azm-agenda__topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.azm-agenda__mes { font-size: 14px; font-weight: 800; color: var(--azm-fg); margin-right: auto; }

.azm-agenda__seta {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--azm-borda);
    border-radius: 8px;
    color: var(--azm-fg-fraco);
    font-size: 11px;
}

.azm-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 10px;
    color: var(--azm-fg-fraco);
}

.azm-legenda span { display: inline-flex; align-items: center; gap: 4px; }

.azm-legenda i { width: 7px; height: 7px; border-radius: 50%; }

.azm-grade {
    border: 1px solid var(--azm-borda);
    border-radius: 11px;
    overflow: hidden;
}

.azm-grade__cab,
.azm-grade__semana { display: grid; grid-template-columns: repeat(7, 1fr); }

.azm-grade__cab span {
    padding: 7px 6px;
    border-bottom: 1px solid var(--azm-borda);
    background: var(--azm-fundo-fraco);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--azm-fg-fraco);
    text-transform: uppercase;
}

.azm-dia {
    min-height: 52px;
    padding: 5px 5px 6px;
    border-right: 1px solid var(--azm-borda);
    border-bottom: 1px solid var(--azm-borda);
    display: grid;
    align-content: start;
    gap: 3px;
}

.azm-dia:nth-child(7n) { border-right: 0; }
.azm-grade__semana:last-child .azm-dia { border-bottom: 0; }

.azm-dia__n { font-size: 10.5px; font-weight: 700; color: var(--azm-fg); }
.azm-dia--fora { background: var(--azm-fundo-fraco); }
.azm-dia--fora .azm-dia__n { color: var(--azm-fg-fraco); opacity: .55; }

.azm-dia--hoje .azm-dia__n {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--az-success);
    color: #fff;
}

/* O evento é a unidade de informação da agenda: sem ele o calendário seria só
   uma grade de números. */
.azm-ev {
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--azm-primaria) 16%, transparent);
    color: var(--azm-primaria);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.azm-ev--feito { background: color-mix(in srgb, var(--az-success) 16%, transparent); color: var(--az-success); }
.azm-ev--passado { background: var(--azm-fundo-fraco); color: var(--azm-fg-fraco); }

/* ── Coluna lateral: mini calendário e resumo do dia ────────────────────── */
.azm-lado { display: grid; gap: 10px; align-content: start; }

.azm-mini {
    padding: 10px;
    border: 1px solid var(--azm-borda);
    border-radius: 11px;
    background: var(--azm-fundo);
}

.azm-mini__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--azm-fg);
}

.azm-mini__grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.azm-mini__grade span {
    padding: 3px 0;
    font-size: 8.5px;
    color: var(--azm-fg-fraco);
}

.azm-mini__grade b {
    padding: 3px 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--azm-fg);
    border-radius: 5px;
    position: relative;
}

.azm-mini__grade b.is-hoje { background: var(--azm-primaria); color: #fff; }

/* Ponto sob o dia: diz que há agendamento sem precisar de mais uma linha. */
.azm-mini__grade b.tem::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    background: var(--azm-primaria);
}

.azm-mini__grade b.is-hoje.tem::after { background: #fff; }

.azm-resumo {
    padding: 11px;
    border: 1px solid var(--azm-borda);
    border-radius: 11px;
    background: var(--azm-fundo);
    display: grid;
    gap: 7px;
}

.azm-resumo__data { font-size: 13px; font-weight: 800; color: var(--azm-fg); }
.azm-resumo__dia { font-size: 10px; color: var(--azm-fg-fraco); margin-top: -5px; }

.azm-resumo__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--azm-fundo-fraco);
    font-size: 10.5px;
    color: var(--azm-fg);
}

.azm-resumo__hora { font-weight: 800; color: var(--azm-primaria); }

.azm-contadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.azm-contadores b { display: block; font-size: 16px; font-weight: 800; color: var(--azm-fg); }
.azm-contadores span { font-size: 8.5px; color: var(--azm-fg-fraco); }

/*==============================================================================
  Link público — a página que o cliente abre para agendar
==============================================================================*/
/* A coluna do QR encolheu: deitado, o mockup divide a largura com a coluna da
   esquerda, e 176px espremiam o campo do link a ponto de o botao "Copiar" ficar
   por baixo do quadro do QR. */
.azm-link { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 14px; }

/* Sem isto o campo do link nao encolhe abaixo do proprio conteudo e vaza para
   fora da coluna. */
.azm-link > * { min-width: 0; }

.azm-link__campo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 7px 7px 13px;
    border: 2px solid color-mix(in srgb, var(--azm-primaria) 45%, transparent);
    border-radius: 11px;
    background: var(--azm-fundo);
}

.azm-link__url {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--azm-fg-fraco);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.azm-link__url b { color: var(--azm-fg); font-weight: 800; }

.azm-compartilhar { display: flex; flex-wrap: wrap; gap: 6px; }

/* QR: é o que transforma um balcão físico em canal de agendamento. */
.azm-qr {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 12px;
    border: 1px solid var(--azm-borda);
    border-radius: 12px;
    background: var(--azm-fundo);
    text-align: center;
}

.azm-qr__quadro {
    width: 108px;
    height: 108px;
    border-radius: 8px;
    background:
        repeating-conic-gradient(#0b1120 0% 25%, #ffffff 0% 50%) 0 0 / 9px 9px,
        #ffffff;
    box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px var(--azm-borda);
}

.azm-qr__ajuda { font-size: 9px; color: var(--azm-fg-fraco); line-height: 1.45; }

.azm-checklist { display: grid; gap: 6px; }

.azm-checklist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--azm-fundo-fraco);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--azm-fg);
}

.azm-checklist__ok {
    width: 17px;
    height: 17px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--az-success);
    color: #fff;
    font-size: 9px;
}

/*==============================================================================
  Painel — indicadores e gráficos
==============================================================================*/
.azm-graficos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }

.azm-quadro {
    padding: 12px;
    border: 1px solid var(--azm-borda);
    border-radius: 12px;
    background: var(--azm-fundo);
    display: grid;
    gap: 10px;
    align-content: start;
}

.azm-quadro__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Gráfico de linha desenhado em SVG: acompanha o tema e não pesa. */
.azm-linha { width: 100%; height: 108px; display: block; }
.azm-linha__area { fill: color-mix(in srgb, var(--azm-primaria) 16%, transparent); }
.azm-linha__traco { fill: none; stroke: var(--azm-primaria); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.azm-linha__ponto { fill: var(--azm-fundo); stroke: var(--azm-primaria); stroke-width: 2; }
.azm-linha__eixo { stroke: var(--azm-borda); stroke-width: 1; }

.azm-rosca { display: grid; place-items: center; gap: 9px; }

.azm-rosca__anel {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    /* Três fatias: a proporção é a mensagem, não os números exatos. */
    background: conic-gradient(
        var(--azm-primaria) 0 38%,
        var(--az-success) 38% 55%,
        var(--az-accent, #22d3ee) 55% 100%);
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
            mask: radial-gradient(circle, transparent 54%, #000 55%);
}

.azm-rosca__legenda { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; font-size: 9.5px; color: var(--azm-fg-fraco); }
.azm-rosca__legenda span { display: inline-flex; align-items: center; gap: 4px; }
.azm-rosca__legenda i { width: 8px; height: 8px; border-radius: 50%; }

/*==============================================================================
  Extrato — o dinheiro entrando e saindo
==============================================================================*/
.azm-filtro {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 8px;
    align-items: end;
}

.azm-campo { display: grid; gap: 4px; }

.azm-campo__caixa {
    padding: 7px 10px;
    border: 1px solid var(--azm-borda);
    border-radius: 9px;
    background: var(--azm-fundo);
    color: var(--azm-fg-fraco);
    font-size: 11px;
}

/*==============================================================================
  Responsivo

  Abaixo de 720px a coluna lateral sai e a grade vira lista: um mockup que
  força rolagem lateral no celular estraga a página em vez de ilustrá-la.
==============================================================================*/
/* 720px era largo demais: a coluna do mockup nas secoes de produto tem ~566px,
   entao TODOS eles caiam para uma coluna so e ficavam altos que nao acabavam
   mais — calendario, lista do dia e contadores empilhados um sob o outro. Em
   460px eles seguem lado a lado no desktop e so empilham no celular, que e
   onde isso faz sentido. A coluna do mockup tem ~560px nas secoes de produto:
   qualquer limite acima disso empilha tudo sem necessidade. */
@container (max-width: 460px) {
    .azm-agenda,
    .azm-link,
    .azm-graficos { grid-template-columns: 1fr; }

    .azm-agenda__lado,
    .azm-lado { order: -1; }

    .azm-dia { min-height: 40px; }
    .azm-ev { font-size: 8px; }
    .azm-filtro { grid-template-columns: 1fr 1fr; }
    .azm-qr__quadro { width: 92px; height: 92px; }
}

@container (max-width: 480px) {
    .azm__body { padding: 12px; }
    .azm-kpis { grid-template-columns: repeat(2, 1fr); }
    .azm-kpi__valor { font-size: 18px; }
    .azm-tabela th:nth-child(2),
    .azm-tabela td:nth-child(2) { display: none; }
}

/*==============================================================================
  Orelha de compartilhamento

  Colada na borda direita, fechada por padrão. O painel desliza para dentro da
  tela; a aba fica sempre visível para quem quiser reabrir.
==============================================================================*/
.az-orelha {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    font-family: var(--az-font);
}

/* A aba é a única parte visível quando o painel está fechado. */
.az-orelha__aba {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 9px;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: var(--az-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: -6px 0 20px -8px rgba(74, 108, 247, .7);
    transition: background var(--az-fast) var(--az-ease);
}

.az-orelha__aba:hover { background: var(--az-primary-hover); }

.az-orelha__aba i { font-size: 17px; }

.az-orelha__aba-texto { writing-mode: vertical-rl; text-orientation: mixed; }

.az-orelha__painel {
    width: 0;
    overflow: hidden;
    opacity: 0;
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: var(--az-shadow-lg);
    transition: width var(--az-base) var(--az-ease), opacity var(--az-fast) var(--az-ease);
}

.az-orelha.is-aberta .az-orelha__painel {
    width: 264px;
    padding: 15px;
    opacity: 1;
}

.az-orelha__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--az-text);
    font-size: 14px;
}

.az-orelha__fechar {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--az-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.az-orelha__fechar:hover { background: var(--az-bg-secondary); color: var(--az-text); }

.az-orelha__texto {
    margin: 0 0 12px;
    color: var(--az-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.az-orelha__redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* A cor da rede entra pela variável `--rede`, definida no próprio elemento:
   uma regra só serve às quatro. */
.az-orelha__rede {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid var(--az-border);
    border-radius: 10px;
    background: var(--az-card);
    color: var(--az-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--az-fast) var(--az-ease),
                background var(--az-fast) var(--az-ease);
}

.az-orelha__rede i { color: var(--rede); font-size: 16px; }

.az-orelha__rede:hover {
    border-color: var(--rede);
    background: color-mix(in srgb, var(--rede) 12%, transparent);
    color: var(--az-text);
}

.az-orelha__link {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.az-orelha__link input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--az-border);
    border-radius: 9px;
    background: var(--az-bg-secondary);
    color: var(--az-text-muted);
    font-size: 11.5px;
}

.az-orelha__copiar {
    flex: none;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--az-primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.az-orelha__aviso {
    display: block;
    min-height: 15px;
    margin-top: 7px;
    color: var(--az-success);
    font-size: 11px;
    font-weight: 600;
}

/* No celular a orelha vai para o rodapé e o painel ocupa a largura: um painel
   de 264px preso à lateral cobriria metade da tela. */
@media (max-width: 640px) {
    .az-orelha { top: auto; bottom: 16px; transform: none; }
    .az-orelha__aba { padding: 11px 8px; }
    .az-orelha__aba-texto { display: none; }
    .az-orelha.is-aberta .az-orelha__painel { width: min(78vw, 264px); }
}

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

/*==============================================================================
  Blocos de texto persuasivo

  Uma lista com o benefício em negrito e a explicação em seguida: a pessoa que
  varre a página lê só os negritos e ainda entende a proposta; quem se
  interessa lê o resto.
==============================================================================*/
.az-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.az-list li {
    position: relative;
    padding-left: 30px;
    color: var(--az-text-muted);
    line-height: 1.6;
}

.az-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--az-primary) 16%, transparent);
    box-shadow: inset 0 0 0 2px var(--az-primary);
}

.az-list li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 5px;
    height: 8px;
    border-right: 2px solid var(--az-primary);
    border-bottom: 2px solid var(--az-primary);
    transform: rotate(42deg);
}

.az-list strong { display: block; color: var(--az-text); font-weight: 700; margin-bottom: 2px; }

/*==============================================================================
  Antes e depois

  A comparação faz o problema doer antes de a solução aparecer. É mais honesta
  que uma lista de recursos: descreve o dia da pessoa, não o nosso produto.
==============================================================================*/
.az-antes-depois {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Cada coluna tem a sua cor, declarada uma vez: o vermelho conta o problema, o
   verde conta a saida, e tudo dentro dela — selo, marcador, fio do topo —
   acompanha sem repetir a cor em cada regra. */
.az-coluna {
    --az-col-cor: var(--az-danger);
    position: relative;
    padding: 30px 28px 26px;
    border: 1px solid var(--az-border);
    border-radius: 22px;
    background: var(--az-card);
    overflow: hidden;
    transition: transform var(--az-base) var(--az-ease),
        box-shadow var(--az-base) var(--az-ease);
}

.az-coluna::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--az-col-cor), transparent);
}

/* Brilho da cor da coluna atras do selo. */
.az-coluna::after {
    content: "";
    position: absolute;
    top: -34%;
    left: -10%;
    width: 60%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--az-col-cor) 22%, transparent), transparent 70%);
    pointer-events: none;
}

.az-coluna:hover { transform: translateY(-4px); box-shadow: var(--az-shadow); }

.az-coluna > * { position: relative; }

/* A coluna da direita e a resposta: fica um degrau acima, com a cor da marca. */
.az-coluna--depois {
    --az-col-cor: var(--az-success);
    border-color: color-mix(in srgb, var(--az-primary) 34%, transparent);
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--az-success) 7%, transparent),
            color-mix(in srgb, var(--az-primary) 5%, transparent)),
        var(--az-card);
    box-shadow: var(--az-glow);
}

.az-coluna__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 20px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--az-col-cor) 30%, transparent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--az-col-cor) 13%, transparent);
    color: var(--az-col-cor);
}

/* Ponto na frente do selo: dá o sinal de estado antes de a pessoa ler. */
.az-coluna__selo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--az-col-cor);
}

.az-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; }

/* Linha fina entre os itens: seis frases seguidas viram um bloco cinza sem
   ela, e a coluna deixa de ser uma lista para virar um paragrafo. */
.az-coluna li {
    position: relative;
    padding: 12px 0 12px 30px;
    border-top: 1px solid color-mix(in srgb, var(--az-border) 70%, transparent);
    color: var(--az-text-muted);
    line-height: 1.55;
}

.az-coluna li:first-child { border-top: 0; padding-top: 2px; }
.az-coluna li:first-child::before { top: 3px; }

.az-coluna li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 13px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--az-col-cor);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* Só o símbolo muda: o fundo cheio e o branco vêm da regra de cima, e repetir
   a versão pálida aqui deixava o visto quase invisível sobre o verde claro. */
.az-coluna--depois li::before { content: "✓"; }

/*==============================================================================
  Faixa de números
==============================================================================*/
.az-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 34px;
    border-radius: var(--az-radius-lg);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--az-primary) 12%, transparent),
        color-mix(in srgb, var(--az-accent) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--az-primary) 26%, transparent);
    text-align: center;
}

.az-numero__valor {
    display: block;
    font-size: clamp(2rem, 4.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--az-primary), var(--az-accent));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.az-numero__texto {
    display: block;
    margin-top: 6px;
    color: var(--az-text-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Nota de rodapé dos números: promessa sem origem é promessa vazia. */
.az-numeros__nota {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    color: var(--az-text-muted);
    font-size: 11.5px;
    opacity: .85;
}

/*==============================================================================
  Fundo por seção

  Antes havia duas faixas alternando: fundo e fundo-secundário. Uma página
  longa com dois tons vira um corredor — nada diz onde um assunto termina e o
  próximo começa.

  Cada seção passa a ter um tom próprio, tirado da mesma paleta: brilhos
  radiais suaves na cor da marca, com ângulo e intensidade diferentes. É
  suficiente para separar os assuntos sem transformar a página num carnaval —
  a cor é sempre a mesma, muda só onde e quanto.
==============================================================================*/

/* O brilho vive num pseudoelemento para não competir com o conteúdo, que fica
   acima dele pelo z-index já definido em `.az-section > .az-shell`. */
.az-section[id]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Recursos: brilho no alto, puxando o olho para baixo, para dentro da página. */
#landingFeatures::before {
    background:
        radial-gradient(70% 55% at 50% -8%, color-mix(in srgb, var(--az-primary) 13%, transparent), transparent 68%);
}

/* Antes e depois: dividido ao meio — o vermelho de um lado, o verde do outro,
   ecoando as duas colunas. */
#landingAntesDepois {
    background: linear-gradient(180deg, var(--az-bg) 0%, var(--az-bg-secondary) 30%, var(--az-bg-secondary) 70%, var(--az-bg) 100%);
}

#landingAntesDepois::before {
    background:
        radial-gradient(46% 60% at 16% 42%, color-mix(in srgb, var(--az-danger) 9%, transparent), transparent 70%),
        radial-gradient(46% 60% at 84% 42%, color-mix(in srgb, var(--az-success) 11%, transparent), transparent 70%);
}

/* Ferramentas e link: os dois blocos que mostram o produto trabalhando. O
   brilho vem do lado da tela, apontando para o mockup. */
#landingTools::before {
    background: radial-gradient(58% 70% at 12% 50%, color-mix(in srgb, var(--az-primary) 11%, transparent), transparent 70%);
}

#landingLink {
    background: linear-gradient(180deg, var(--az-bg) 0%, color-mix(in srgb, var(--az-primary) 5%, var(--az-bg)) 50%, var(--az-bg) 100%);
}

#landingLink::before {
    background:
        radial-gradient(52% 62% at 84% 44%, color-mix(in srgb, var(--az-accent) 13%, transparent), transparent 70%),
        radial-gradient(40% 50% at 10% 76%, color-mix(in srgb, var(--az-primary) 10%, transparent), transparent 72%);
}

/* Financeiro: verde discreto — é a seção que fala de dinheiro entrando. */
#landingRelatorios::before,
#landingSaques::before {
    background: radial-gradient(56% 66% at 78% 40%, color-mix(in srgb, var(--az-success) 10%, transparent), transparent 72%);
}

#landingSaques {
    background: linear-gradient(180deg, var(--az-bg) 0%, var(--az-bg-secondary) 26%, var(--az-bg-secondary) 74%, var(--az-bg) 100%);
}

#landingEvolucao::before {
    background: radial-gradient(60% 68% at 20% 46%, color-mix(in srgb, var(--az-primary) 12%, transparent), transparent 70%);
}

/* Suporte: azul-ciano, a cor de "tem gente do outro lado". */
#landingSuporte::before {
    background:
        radial-gradient(50% 60% at 20% 38%, color-mix(in srgb, var(--az-accent) 12%, transparent), transparent 70%),
        radial-gradient(48% 56% at 82% 70%, color-mix(in srgb, var(--az-primary) 9%, transparent), transparent 72%);
}

/* Planos: o ponto mais quente da página inteira. É onde a decisão acontece. */
#Planos {
    background: linear-gradient(180deg,
        var(--az-bg) 0%,
        color-mix(in srgb, var(--az-primary) 8%, var(--az-bg)) 40%,
        color-mix(in srgb, var(--az-primary) 8%, var(--az-bg)) 60%,
        var(--az-bg) 100%);
}

#Planos::before {
    background:
        radial-gradient(58% 46% at 50% 6%, color-mix(in srgb, var(--az-primary) 18%, transparent), transparent 66%),
        radial-gradient(44% 44% at 50% 96%, color-mix(in srgb, var(--az-accent) 12%, transparent), transparent 70%);
}

#landingFAQ::before {
    background: radial-gradient(54% 60% at 78% 22%, color-mix(in srgb, var(--az-primary) 9%, transparent), transparent 72%);
}

#landingContact::before {
    background: radial-gradient(56% 62% at 22% 26%, color-mix(in srgb, var(--az-accent) 10%, transparent), transparent 72%);
}

/*==============================================================================
  Separadores entre seções

  Uma linha finíssima em degradê, mais forte no meio: marca a emenda sem virar
  uma régua atravessando a página.
==============================================================================*/
.az-section[id] + .az-section[id]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--az-primary) 34%, transparent),
        transparent);
    pointer-events: none;
    z-index: 0;
}

/*==============================================================================
  Cabeçalho de seção com mais presença
==============================================================================*/
.az-section .az-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--az-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--az-primary) 26%, transparent);
    color: var(--az-primary-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* O ponto pulsante diz "isto está vivo" sem custar uma linha de texto. */
.az-section .az-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--az-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-primary) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .az-section .az-eyebrow::before { animation: az-pulso 2.6s ease-in-out infinite; }
}

@keyframes az-pulso {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-primary) 22%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--az-primary) 8%, transparent); }
}

/*==============================================================================
  Painel do topo — refino

  O mockup do hero é a primeira coisa que a pessoa vê. Antes ele era plano:
  caixas de mesma altura, mesmo tom, sem hierarquia. As regras abaixo dão
  profundidade e sinais de aplicativo real — barra de busca, avatar, ícones de
  navegação, item ativo com marca lateral.
==============================================================================*/

/* Moldura: sombra em camadas e um fio de luz na borda de cima, que é o que
   separa "cartão" de "retângulo". */
.az-mock {
    border-radius: 18px;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, .06) inset,
        0 30px 60px -30px rgba(2, 6, 20, .55),
        0 0 0 1px color-mix(in srgb, var(--az-primary) 18%, transparent);
}

.az-page.light .az-mock {
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, .9) inset,
        0 24px 56px -28px rgba(11, 17, 32, .3),
        0 0 0 1px rgba(11, 17, 32, .07);
}

/* ── Barra lateral ──────────────────────────────────────────────────────── */
.az-mock__side {
    gap: 2px;
    padding: 16px 11px;
    background: linear-gradient(180deg, #141d3a 0%, #0d1428 100%);
}

.az-mock__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-inline: 3px;
}

.az-mock__marca {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--az-primary), var(--az-accent));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.az-mock__nav {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 9px;
    color: rgba(255, 255, 255, .58);
    font-size: 11.5px;
    font-weight: 500;
}

.az-mock__nav i { font-size: 14px; opacity: .85; }

/* Item ativo: fundo, cor cheia e uma marca à esquerda. Sem a marca, o realce
   some quando o fundo é sutil. */
.az-mock__nav.is-active {
    position: relative;
    background: color-mix(in srgb, var(--az-primary) 26%, transparent);
    color: #fff;
    font-weight: 700;
}

.az-mock__nav.is-active::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--az-accent);
}

/* Cartão de perfil no pé: fecha a coluna e diz que há uma pessoa logada. */
.az-mock__perfil {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 9px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
}

.az-mock__avatar {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--az-primary), var(--az-accent));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.az-mock__perfil-txt { display: flex; flex-direction: column; min-width: 0; }
.az-mock__perfil-txt b { color: #fff; font-size: 11px; font-weight: 700; }
.az-mock__perfil-txt i { color: rgba(255, 255, 255, .5); font-size: 9px; font-style: normal; }

/* ── Barra superior ─────────────────────────────────────────────────────── */
.az-mock__busca {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    max-width: 260px;
    margin-inline: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--az-border);
    background: var(--az-bg-secondary);
    color: var(--az-text-muted);
    font-size: 10.5px;
}

/* ── Indicadores ────────────────────────────────────────────────────────── */
.az-mock__kpi {
    position: relative;
    padding: 12px 13px;
    border-radius: 12px;
}

.az-mock__kpi-ico {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 12px;
}

.az-mock__kpi-ico--azul  { background: color-mix(in srgb, var(--az-primary) 16%, transparent); color: var(--az-primary); }
.az-mock__kpi-ico--ciano { background: color-mix(in srgb, var(--az-accent) 18%, transparent); color: var(--az-accent); }
.az-mock__kpi-ico--verde { background: color-mix(in srgb, var(--az-success) 18%, transparent); color: var(--az-success); }
.az-mock__kpi-ico--ambar { background: color-mix(in srgb, var(--az-warning) 20%, transparent); color: var(--az-warning); }

/* A variação vira pastilha: solta, ela lia como mais um número da caixa. */
.az-mock__kpi i {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    font-style: normal;
}

.az-mock__kpi i.up { background: color-mix(in srgb, var(--az-success) 16%, transparent); color: var(--az-success); }
.az-mock__kpi i.down { background: color-mix(in srgb, var(--az-danger) 16%, transparent); color: var(--az-danger); }

/* ── Próximos atendimentos ──────────────────────────────────────────────── */
.az-mock__ini {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.az-mock__ini--1 { background: linear-gradient(135deg, #4a6cf7, #7c8ffb); }
.az-mock__ini--2 { background: linear-gradient(135deg, #10b981, #34d399); }
.az-mock__ini--3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }

.az-mock__list li { display: flex; align-items: center; gap: 10px; }

/* O selo de situação some no celular: sem espaço, hora e nome importam mais. */
@media (max-width: 560px) {
    .az-mock__busca { display: none; }
    .az-mock__perfil { display: none; }
    .az-mock__list em { display: none; }
}

/*==============================================================================
  Atendimento — a conversa do assinante com o suporte
==============================================================================*/
.azm-chat__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--azm-borda);
}

.azm-chat__icone {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--azm-primaria) 14%, transparent);
    font-size: 14px;
}

.azm-chat__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.azm-chat__id b { font-size: 12.5px; font-weight: 700; color: var(--azm-fg); }
.azm-chat__id small { font-size: 9.5px; color: var(--azm-fg-fraco); }

.azm-chat {
    display: grid;
    gap: 9px;
    padding: 12px;
    border-radius: 12px;
    background: var(--azm-fundo-fraco);
}

.azm-msg {
    max-width: 84%;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.5;
}

.azm-msg p { margin: 0; }

.azm-msg__autor {
    display: block;
    margin-bottom: 3px;
    font-size: 9.5px;
    font-weight: 700;
    opacity: .8;
}

/* Cliente à esquerda, suporte à direita e na cor da marca: quem falou se
   reconhece antes de a frase ser lida. */
.azm-msg--cliente {
    justify-self: start;
    background: var(--azm-fundo);
    border: 1px solid var(--azm-borda);
    color: var(--azm-fg);
    border-bottom-left-radius: 4px;
}

.azm-msg--suporte {
    justify-self: end;
    background: var(--azm-primaria);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* O anexo dentro da mensagem é o ponto da seção: mostrar o problema em vez
   de descrevê-lo. */
.azm-anexo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--azm-borda);
    border-radius: 9px;
    background: var(--azm-fundo-fraco);
}

.azm-anexo__ico { font-size: 14px; }
.azm-anexo__txt { display: flex; flex-direction: column; }
.azm-anexo__txt b { font-size: 10.5px; color: var(--azm-fg); }
.azm-anexo__txt small { font-size: 9px; color: var(--azm-fg-fraco); }

.azm-chat__campo { display: flex; align-items: center; gap: 8px; }

/*------------------------------------------------------------- CRM ---------*/

/* Funil: três colunas fixas. `auto-fit` deixaria o kanban virar lista no
   contêiner estreito do mockup, e é justamente a leitura lado a lado que
   comunica "isto é um funil". */
.azm-funil {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.azm-funil__col {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 9px 8px 8px;
    border: 1px solid var(--azm-borda);
    border-radius: 10px;
    background: var(--azm-fundo-fraco);
    overflow: hidden;
}

/* Fio de cor no topo: é o que separa as etapas sem pintar três fundos. */
.azm-funil__col::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--azm-primaria);
}

.azm-funil__col--novo::before { background: var(--azm-primaria); }
.azm-funil__col--conversa::before { background: var(--az-warning); }
.azm-funil__col--fechado::before { background: var(--az-success); }

.azm-funil__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--azm-fg-fraco);
}

.azm-funil__cab b {
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--azm-fundo);
    border: 1px solid var(--azm-borda);
    font-size: 8.5px;
    color: var(--azm-fg);
}

.azm-oport {
    display: grid;
    gap: 1px;
    padding: 6px 7px;
    border: 1px solid var(--azm-borda);
    border-radius: 8px;
    background: var(--azm-fundo);
}

.azm-oport b { font-size: 10px; font-weight: 700; color: var(--azm-fg); }
.azm-oport span { font-size: 8.5px; color: var(--azm-fg-fraco); }

.azm-oport--ok {
    border-color: color-mix(in srgb, var(--az-success) 34%, transparent);
    background: color-mix(in srgb, var(--az-success) 8%, var(--azm-fundo));
}

/* No mockup a conversa é citação, não a tela inteira: duas falas bastam para
   dizer que o WhatsApp vive dentro do sistema. */
.azm-chat--curto { max-height: none; padding: 0; }

.azm-zap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--az-success) 32%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--az-success) 10%, var(--azm-fundo));
}

.azm-zap__ico {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--az-success);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.azm-zap__txt { flex: 1; min-width: 0; font-size: 10px; color: var(--azm-fg); }


.azm-chat__entrada {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--azm-borda);
    border-radius: 10px;
    background: var(--azm-fundo);
    color: var(--azm-fg-fraco);
    font-size: 11.5px;
}

/*==============================================================================
  Planos — o ponto de decisão da página

  A seção precisa parar o olho. Ganha respiro maior, um título de peso e as
  três garantias que respondem às objeções antes de o preço aparecer: cartão,
  fidelidade e tempo de instalação.
==============================================================================*/
#Planos { padding-block: 120px; }

.az-head--planos { max-width: 720px; margin-bottom: 40px; }

.az-title--planos { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.035em; }

.az-garantias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 26px;
}

.az-garantia {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--az-primary) 24%, transparent);
    background: color-mix(in srgb, var(--az-primary) 8%, var(--az-surface));
    color: var(--az-text);
    font-size: 13px;
    font-weight: 600;
}

.az-garantia i { color: var(--az-primary); font-size: 15px; }

/* O alternador mensal/anual ganha moldura: solto no meio da seção ele parecia
   um controle esquecido, e é ele que revela o desconto. */
.az-billing__inner {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--az-border);
    background: var(--az-surface);
    box-shadow: var(--az-shadow-sm);
}

@media (max-width: 640px) {
    #Planos { padding-block: 84px; }
    .az-garantia { font-size: 12px; padding: 7px 13px; }
    .az-billing__inner { padding: 9px 14px; }
}

/*==============================================================================
  Correções de legibilidade nos mockups

  Herdar a cor não bastou: a folha do tema pinta `p` e `span` diretamente, e
  regra direta vence herança. Onde o fundo é sólido, a cor do texto passa a ser
  declarada nos próprios filhos.
==============================================================================*/
.azm-msg--suporte,
.azm-msg--suporte p,
.azm-msg--suporte b,
.azm-msg--suporte span,
.azm-msg--suporte .azm-msg__autor { color: #fff; }

.azm-msg--cliente,
.azm-msg--cliente p,
.azm-msg--cliente .azm-msg__autor { color: var(--azm-fg); }

.azm-msg--cliente .azm-msg__autor { color: var(--azm-fg-fraco); }

/* O anexo dentro do balão do suporte tem fundo próprio: precisa da cor do
   texto normal de volta, senão fica branco sobre claro. */
.azm-msg--suporte .azm-anexo,
.azm-msg--suporte .azm-anexo b { color: var(--azm-fg); }

.azm-msg--suporte .azm-anexo small { color: var(--azm-fg-fraco); }

/* Mesma armadilha nos demais mockups: qualquer superfície de cor cheia. */
.azm-btn--primaria,
.azm-btn--primaria b,
.azm-btn--primaria span { color: #fff; }

.azm-dia--hoje .azm-dia__n,
.azm-mini__grade b.is-hoje { color: #fff; }

.azm-checklist__ok,
.azm-kpi__icone { line-height: 1; }

/*==============================================================================
  Título dos planos em uma linha

  "Comece hoje. Cancele quando quiser." perde a força quebrado ao meio: o
  segundo pedaço é justamente o que derruba a objeção. O tamanho acompanha a
  largura da tela para caber inteiro em qualquer aparelho.
==============================================================================*/
.az-title--planos {
    white-space: nowrap;
    font-size: clamp(1.05rem, 4.6vw, 3.2rem);
}

/* A orelha e o botão de copiar também têm fundo cheio: os filhos precisam da
   cor declarada, pelo mesmo motivo dos balões. */
.az-orelha__aba,
.az-orelha__aba i,
.az-orelha__aba span,
.az-orelha__copiar { color: #fff; }

/* Fundo cheio no balão do suporte da conversa do hero. */
.az-mock__ini,
.az-mock__avatar,
.az-mock__marca { color: #fff; }

/*==============================================================================
  Centralização dos títulos

  O cabeçalho de seção já era centralizado, mas o bloco tinha largura de 660px
  e alinhamento herdado em alguns pontos — títulos curtos ficavam encostados à
  esquerda dentro do próprio bloco. Aqui a regra vale para todos.
==============================================================================*/
.az-section .az-head,
.az-section .az-head * { text-align: center; }

.az-section .az-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
}

.az-section .az-title {
    /* `balance` distribui as linhas em vez de deixar uma palavra órfã na
       última — o desequilíbrio é o que faz um título centralizado parecer
       torto. */
    text-wrap: balance;
    margin-inline: auto;
}

.az-section .az-lead { max-width: 62ch; margin-inline: auto; text-wrap: pretty; }

/* O título dos planos fica numa linha só e centralizado em qualquer largura. */
.az-title--planos { margin-inline: auto; text-align: center; }

/*==============================================================================
  Título de uma linha só

  Usado onde a frase perde a força quebrada ao meio. O tamanho acompanha a
  largura da tela para caber inteiro em qualquer aparelho, em vez de estourar
  a lateral.
==============================================================================*/
.az-title--linha {
    white-space: nowrap;
    font-size: clamp(1.05rem, 4.4vw, 3.1rem);
}

/*==============================================================================
  Cabeçalho de apresentação em duas colunas

  A promessa de um lado, o produto funcionando do outro — sem rolar a página.
  Antes era tudo centralizado e empilhado: a prova só aparecia depois de uma
  rolagem, que é justamente onde se perde quem ainda não decidiu ficar.
==============================================================================*/
.az-hero__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

@media (min-width: 62rem) {
    .az-hero__grade {
        /* A coluna do produto é maior: é a que precisa mostrar detalhe. */
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 56px;
    }

    /* Fora do centro: numa coluna estreita, texto centralizado obriga o olho
       a reencontrar o começo de cada linha. */
    .az-hero__copy {
        max-width: none;
        margin-inline: 0;
        text-align: left;
    }

    .az-hero__subtitle { margin-inline: 0; }
    .az-hero__grade .az-btn-row { justify-content: flex-start; }
    .az-hero__stage { margin-top: 0; }
}

/* Selo acima do título. */
.az-hero__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--az-primary) 30%, transparent);
    background: color-mix(in srgb, var(--az-primary) 10%, transparent);
    color: var(--az-primary-light);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.az-hero__selo i { color: var(--az-primary); font-size: 15px; }

/* Sinais de confiança. */
.az-hero__provas {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.az-hero__provas li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--az-text-muted);
    font-size: 13.5px;
    font-weight: 500;
}

.az-hero__provas i {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--az-success) 18%, transparent);
    color: var(--az-success);
    font-size: 10px;
}

/* No celular tudo centraliza e o brilho de fundo do palco encolhe: em tela
   estreita ele vazava para fora da coluna. */
@media (max-width: 61.99rem) {
    .az-hero__grade { gap: 40px; }
    .az-hero__provas { justify-content: center; }
    .az-hero__stage { margin-top: 0; }
    .az-hero__stage::before { width: min(560px, 96%); }
}

@media (max-width: 30rem) {
    .az-hero__selo { font-size: 12px; padding: 6px 13px; }
    .az-hero__provas { gap: 6px 14px; }
    .az-hero__provas li { font-size: 12.5px; }
}

/*==============================================================================
  Selo e botões do cabeçalho — acabamento

  O selo era uma pastilha lisa. Ganha degradê, brilho e um ponto pulsante: é a
  primeira coisa que a pessoa lê, e o que remove o risco antes do preço.
==============================================================================*/
.az-hero__selo {
    position: relative;
    padding: 8px 18px 8px 15px;
    border: 1px solid color-mix(in srgb, var(--az-primary) 38%, transparent);
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--az-primary) 16%, transparent),
            color-mix(in srgb, var(--az-accent) 14%, transparent));
    color: var(--az-primary-light);
    font-size: 13.5px;
    letter-spacing: .01em;
    box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--az-primary) 70%, transparent);
}

.az-hero__selo i {
    font-size: 16px;
    color: var(--az-primary);
}

/* Ponto pulsante à direita: diz que a oferta está de pé agora. */
.az-hero__selo::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--az-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-success) 26%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .az-hero__selo::after { animation: az-selo-pulso 2.4s ease-in-out infinite; }
}

@keyframes az-selo-pulso {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-success) 26%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--az-success) 6%, transparent); }
}

/*==============================================================================
  Botões do cabeçalho lado a lado

  Empilhados eles ocupavam duas linhas mesmo sobrando espaço, o que empurrava
  as garantias para baixo e enfraquecia a chamada. Só empilham quando a tela
  realmente não comporta os dois.
==============================================================================*/
.az-hero__grade .az-btn-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.az-hero__grade .az-btn-row .az-btn {
    /* Não encolhe o texto ao ponto de quebrar, mas cede largura antes de
       empurrar o vizinho para a linha de baixo. */
    flex: 0 1 auto;
    white-space: nowrap;
}

/* Abaixo de 30rem os dois não cabem lado a lado sem virar texto ilegível:
   aí sim empilham, cada um ocupando a linha inteira. */
@media (max-width: 30rem) {
    .az-hero__grade .az-btn-row { flex-wrap: wrap; }

    .az-hero__grade .az-btn-row .az-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/*==============================================================================
  Carrossel da proposta

  Os itens ficam empilhados no mesmo lugar e a troca é por opacidade. Assim a
  altura do bloco não pula a cada mensagem — e um cabeçalho que salta de tamanho
  a cada dez segundos empurra o resto da página junto.
==============================================================================*/
.az-carrossel__palco {
    position: relative;
    display: grid;
}

/* Todos ocupam a mesma célula: a altura vira a do item mais alto e para de
   variar. */
.az-carrossel__item {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .5s var(--az-ease), transform .5s var(--az-ease);
}

.az-carrossel__item.is-ativo {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.az-carrossel__item .az-hero__title,
.az-carrossel__item .az-hero__subtitle { margin-bottom: 0; }

.az-carrossel__item .az-hero__title { margin-bottom: 20px; }

.az-carrossel__pontos {
    display: flex;
    gap: 8px;
    margin-top: 26px;
}

.az-carrossel__ponto {
    width: 26px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--az-text-muted) 32%, transparent);
    cursor: pointer;
    transition: background var(--az-fast) var(--az-ease), width var(--az-base) var(--az-ease);
}

.az-carrossel__ponto.is-ativo { width: 40px; background: var(--az-primary); }

.az-carrossel__ponto:focus-visible { outline: 2px solid var(--az-primary); outline-offset: 3px; }

@media (max-width: 61.99rem) {
    .az-carrossel__pontos { justify-content: center; }
}

/* Sem movimento: a troca continua acontecendo, mas sem deslize. */
@media (prefers-reduced-motion: reduce) {
    .az-carrossel__item { transition: none; transform: none; }
}

/*==============================================================================
  Selo sobre faixa colorida

  A regra geral do selo usa a cor de destaque sobre fundo claro. Nas faixas de
  cor cheia — o convite final e a faixa da equipe — isso vira azul sobre azul,
  e o texto some. Ali ele passa a ser branco sobre um véu translúcido.
==============================================================================*/
.az-cta .az-eyebrow,
.az-band .az-eyebrow,
.az-section.az-cta .az-eyebrow,
.az-section.az-band .az-eyebrow {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

.az-cta .az-eyebrow::before,
.az-band .az-eyebrow::before {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

@media (prefers-reduced-motion: no-preference) {
    .az-cta .az-eyebrow::before,
    .az-band .az-eyebrow::before { animation: az-pulso-claro 2.6s ease-in-out infinite; }
}

@keyframes az-pulso-claro {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, .1); }
}

/* O botão sobre a faixa também precisa de contraste próprio: o fantasma
   herda a borda escura e some no azul. */
.az-cta .az-btn--ghost,
.az-band .az-btn--ghost {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.az-cta .az-btn--ghost:hover,
.az-band .az-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Respiro entre os pontos do carrossel e a linha de botões: colados, o ponto
   ativo parecia parte do botão e o clique ia para o alvo errado. */
.az-carrossel { margin-bottom: 34px; }
.az-carrossel__pontos { margin-top: 30px; }

@media (max-width: 30rem) {
    .az-carrossel { margin-bottom: 26px; }
    .az-carrossel__pontos { margin-top: 24px; }
}

/*==============================================================================
  Retorno do formulário de contato
==============================================================================*/
.az-form__aviso {
    display: grid;
    gap: 3px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: var(--az-radius);
    border: 1px solid;
    text-align: left;
}

.az-form__aviso strong { font-size: 14.5px; font-weight: 700; }
.az-form__aviso span { font-size: 13px; opacity: .9; }
.az-form__aviso span:empty { display: none; }

.az-form__aviso--ok {
    border-color: color-mix(in srgb, var(--az-success) 42%, transparent);
    background: color-mix(in srgb, var(--az-success) 12%, transparent);
    color: var(--az-success);
}

.az-form__aviso--erro {
    border-color: color-mix(in srgb, var(--az-danger) 42%, transparent);
    background: color-mix(in srgb, var(--az-danger) 12%, transparent);
    color: var(--az-danger);
}

/*==============================================================================
  Botão do plano — legibilidade no hover

  O estado de hover pintava o texto de branco mantendo o fundo azul-claro
  translúcido: branco sobre claro, quase invisível justamente no momento em que
  a pessoa está com o ponteiro sobre o botão para clicar.

  Agora o hover preenche com a cor cheia — aí o branco tem contraste.
==============================================================================*/
.az-page .az-plan .btn-label-primary:hover,
.az-page .az-plan .btn-label-primary:focus-visible {
    background-color: var(--az-primary) !important;
    border-color: var(--az-primary);
    color: #fff !important;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--az-primary) 85%, transparent);
}

/* Em repouso o texto precisa de contraste próprio: a cor de destaque sobre o
   véu claro é o que se lê antes do hover. */
.az-page .az-plan .btn-label-primary {
    font-weight: 700;
    color: var(--az-primary) !important;
    border-width: 1px;
}

.az-page.dark .az-plan .btn-label-primary { color: var(--az-primary-light) !important; }

/* O botão do plano popular já é sólido; só ganha o mesmo realce ao passar. */
.az-page .az-plan .btn-primary:hover,
.az-page .az-plan .btn-primary:focus-visible {
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--az-primary) 85%, transparent);
}

/*==============================================================================
  Faixa dos planos ocupando a largura toda

  A seção de decisão precisa se separar do resto da página de ponta a ponta —
  não só num retângulo central. A cor é a da marca nos dois temas: um véu
  claro no tema claro, um azul profundo no escuro.
==============================================================================*/
#Planos {
    background:
        radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--az-primary) 16%, transparent), transparent 70%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--az-primary) 7%, var(--az-bg)) 0%,
            color-mix(in srgb, var(--az-primary) 11%, var(--az-bg)) 50%,
            color-mix(in srgb, var(--az-primary) 7%, var(--az-bg)) 100%);
    border-block: 1px solid color-mix(in srgb, var(--az-primary) 22%, transparent);
}

.az-page.dark #Planos {
    background:
        radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--az-primary) 26%, transparent), transparent 70%),
        linear-gradient(180deg, #101a35 0%, #0d1730 50%, #101a35 100%);
    border-block-color: color-mix(in srgb, var(--az-primary) 34%, transparent);
}

/* Os cartões precisam se destacar do fundo agora colorido. */
.az-page #Planos .az-plan {
    background: var(--az-surface);
    border-color: color-mix(in srgb, var(--az-primary) 18%, var(--az-border));
    box-shadow: 0 20px 45px -28px rgba(11, 17, 32, .3);
}

.az-page.dark #Planos .az-plan {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
}

/*==============================================================================
  Conversa de WhatsApp — a réplica do aparelho
==============================================================================*/

/* ---------------------------- o aparelho -------------------------------- */

.az-fone-pai { position: relative; }

.azm-fone {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

/* Mancha de cor atrás do aparelho: dá profundidade sem pedir uma imagem. */
.azm-fone__vulto {
    position: absolute;
    inset: -12% -18% -6% -18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, #25d366 22%, transparent), transparent 70%);
    filter: blur(6px);
    z-index: 0;
}

.azm-fone__corpo {
    position: relative;
    z-index: 1;
    border-radius: 30px;
    border: 8px solid #0b0f18;
    background: #0b0f18;
    box-shadow: var(--az-shadow-lg);
    overflow: hidden;
}

.azm-fone__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #1f2c33;
}

.azm-fone__voltar { color: #8fa3ab; font-size: 20px; line-height: 1; }

.azm-fone__avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #07130c;
    font-weight: 700;
    font-size: 13px;
}

.azm-fone__quem strong { display: block; color: #e9edef; font-size: 13.5px; }
.azm-fone__quem small { display: block; color: #8fa3ab; font-size: 11px; }

/* O papel de parede do WhatsApp, feito com dois gradientes: nenhuma imagem
   para carregar, e a textura acompanha qualquer largura. */
.azm-fone__tela {
    display: grid;
    gap: 10px;
    padding: 14px 12px 18px;
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 255, 255, .04) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 46%, rgba(255, 255, 255, .03) 0 2px, transparent 3px),
        #0b141a;
    background-size: 90px 90px, 120px 120px, auto;
}

.azm-fone__dia {
    justify-self: center;
    padding: 3px 10px;
    border-radius: var(--az-radius-pill);
    background: rgba(255, 255, 255, .06);
    color: #8fa3ab;
    font-size: 10.5px;
}

.azm-fone__balao {
    position: relative;
    /* Encolhe até o texto: sem isto o grid estica todos os balões ao mesmo
       tamanho, e uma resposta de três palavras fica do tamanho da longa. */
    justify-self: start;
    max-width: 86%;
    padding: 8px 10px 18px;
    border-radius: 10px 10px 10px 2px;
    background: #202c33;
    color: #e9edef;
    font-size: 12.5px;
    line-height: 1.5;
}

/* A resposta do cliente vem do outro lado, em verde — é o que mostra que a
   conversa aconteceu, e não que o sistema falou sozinho. */
.azm-fone__balao--dele {
    justify-self: end;
    border-radius: 10px 10px 2px 10px;
    background: #005c4b;
}

.azm-fone__link { color: #53bdeb; word-break: break-all; }

.azm-fone__hora {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 9.5px;
    color: #8fa3ab;
}

.azm-fone__balao--dele .azm-fone__hora { color: #a5cbbd; }

/* Selos flutuantes: ficam nas bordas do aparelho, onde não cobrem a conversa. */
.azm-fone__selo {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: var(--az-radius-pill);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    box-shadow: var(--az-shadow);
    color: var(--az-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.azm-fone__selo i { color: #25d366; font-size: 15px; }

/* Os dois ficam onde a conversa não passa: o de cima na faixa à direita, que
   os balões recebidos não alcançam, e o de baixo rente ao pé do aparelho,
   depois do último balão. A 16% do fundo o selo caía em cima da terceira
   linha do lembrete e comia o "confirmar?". */
.azm-fone__selo--alto { top: 11%; right: -17%; }
.azm-fone__selo--baixo { bottom: 2%; left: -14%; }

@media (max-width: 575px) {
    .azm-fone__selo--alto { right: -6%; }
    .azm-fone__selo--baixo { left: -4%; }
    .azm-fone__selo { font-size: 11px; padding: 6px 10px; }
}