/* ==========================================================================
   Capitulo claro 2 da home do ChatISP: "O produto por dentro"

   Secao de abas. Quatro situacoes de provedor e a tela do painel onde cada
   uma termina. Superficie: .em-papel.em-papel--fria, a folha fria (#eaece1),
   um degrau abaixo do marfim dos outros capitulos claros.

   Auditoria de superficie (20/09/2026): cada estado interativo desta secao
   foi percorrido sobre o papel frio. Nada aqui sabe se o fundo e claro ou
   escuro: sobre papel, --texto ja e tinta, --sup-2 ja e a folha branca do
   cartao e --verde ja e --verde-tinta. O que muda de verdade sobre papel e a
   LEITURA do estado ativo. No escuro "ativo" era mais claro, aqui "ativo" e
   mais solido: mais peso, fio verde inteiro, numero em acento. Os estados
   pendentes descem para tracejado, nunca para uma cor de alerta (a paleta so
   tem verde).

   Regras seguidas aqui:
   - Zero cor, raio, peso, tamanho de fonte, duracao ou curva escrito a mao.
   - A secao e .secao.em-papel; os tokens claros vem de tokens.css. Nenhuma
     regra de tema por componente, nenhum token --exp-* de cor.
   - Nenhum padding vertical proprio: o ritmo vem de --esp-secao, em .secao.
   - Container, sobretitulo e link com seta sao os do sistema (site.css).
   - Breakpoints: 1200 / 980 / 680 / 380, so.
   - prefers-reduced-motion e declarado uma unica vez, em site.css.

   Contrato de js/experiencias.js (nao renomear): [data-experiencias],
   .exp-navigation, .exp-tabs, .exp-stage, [data-exp-tab], [data-exp-panel],
   [data-exp-prev], [data-exp-next], [data-exp-count], [data-exp-status],
   .exp-counter, .exp-enhanced, [data-exp-dir], [data-exp-entra] e o atributo
   hidden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Casca da secao: divisa seca, sem sangria

   Este capitulo ja entrou e saiu do escuro por gradiente de 140px. Nao
   funciona: um degrade linear entre o papel e #070e0b passa a maior parte do
   percurso no cinza medio, e o que se ve e uma faixa suja de ponta a ponta.

   A divisa agora e deduzida pela vizinhanca, uma unica vez, em css/site.css
   (secao 05), e mora sempre DENTRO da secao escura vizinha. Daqui nao sai
   nenhum ::before de sangria, nenhum fio de borda, nenhum gradiente.

   O overflow e o que segura o deslocamento lateral da troca de aba (secao 4)
   dentro da faixa.
   -------------------------------------------------------------------------- */

.exp-section {
    /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
       daqui para dentro passam a medir esta caixa, que nunca rola, e o
       movimento congela. Nota longa em css/sec-conexoes.css. */
    overflow: hidden;
    overflow: clip;
}

/* O sobretitulo do sistema ja e --suave; aqui so o numero ganha respiro. */
.exp-section .sobretitulo b {
    margin-right: var(--e2);
}

/* Sem border-radius aqui: as setas ja sao --r-full e nao podem perder o raio
   justamente no foco. */
.exp-section :is(a, button):focus-visible,
.exp-panel:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: var(--e1);
}


/* --------------------------------------------------------------------------
   2. Cabecalho da secao
   -------------------------------------------------------------------------- */

/* A grade do cabecalho dividido e de site.css. Aqui so entra o que o sistema
   nao preve: a palavra destacada no h2 e a linha de ressalva. */
.exp-section .secao-cabecalho h2 em {
    font-style: normal;
    color: var(--verde);
}

.exp-section .secao-cabecalho--dividido > .exp-condicao {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--e5);
}

/* Ressalva de conteudo. Nao usa .nota porque --tenue sobre papel fica abaixo
   de 4.5:1 no corpo pequeno. */
.exp-condicao {
    max-width: 52ch;
    font-size: var(--c4);
    line-height: 1.7;
    color: var(--suave);
}


/* --------------------------------------------------------------------------
   3. Navegacao: abas e setas

   Tres estados, e sobre papel eles sobem em SOLIDEZ, nao em claridade:
     inativa  --suave, numero --suave, fio ausente
     hover    --texto, numero --texto, fio verde translucido
     ativa    --texto em --p-forte, numero --verde, fio verde inteiro
   -------------------------------------------------------------------------- */

/* stretch, e nao center: assim a aba tem a altura inteira da barra e o fio do
   estado ativo cai exatamente sobre o filete da navegacao, em vez de flutuar
   alguns pixels acima dele. */
.exp-navigation {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--e5);
    border-bottom: 1px solid var(--borda);
}

.exp-navigation[hidden],
.exp-counter[hidden],
.exp-panel[hidden] {
    display: none;
}

.exp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e7);
    min-width: 0;
}

.exp-tab {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: var(--e2);
    min-width: 0;
    min-height: var(--e7);
    padding: var(--e4) 0;
    border: 0;
    background: none;
    color: var(--suave);
    font-family: inherit;
    font-size: var(--c3);
    font-weight: var(--p-medio);
    letter-spacing: var(--tk3);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease);
}

.exp-tab-numero {
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    color: var(--suave);
    transition: color var(--dur-1) var(--ease);
}

/* O nome carrega um fantasma em negrito na mesma celula: a aba reserva desde
   sempre a largura do estado ativo, entao ligar --p-forte na selecao nao
   empurra as abas vizinhas meio pixel para o lado. */
.exp-tab-nome {
    display: inline-grid;
    grid-template-areas: 'nome';
    max-width: 100%;
}

.exp-tab-nome > span,
.exp-tab-nome::after {
    grid-area: nome;
}

.exp-tab-nome::after {
    content: attr(data-nome);
    font-weight: var(--p-forte);
    visibility: hidden;
}

.exp-tab::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--verde);
    transform: scaleX(0);
    transform-origin: left;
    transition:
        transform var(--dur-2) var(--ease),
        opacity var(--dur-2) var(--ease);
}

/* A troca tem lado: indo para a frente o fio cresce (e some) pela esquerda;
   voltando, pela direita. Quem escreve a direcao e o JS, na raiz. */
[data-exp-dir='tras'] .exp-tab::after {
    transform-origin: right;
}

.exp-tab:hover {
    color: var(--texto);
}

.exp-tab:hover .exp-tab-numero {
    color: var(--texto);
}

/* Hover so ensaia o fio: metade da presenca do estado ativo. */
.exp-tab:hover::after {
    opacity: .4;
    transform: scaleX(1);
}

.exp-tab[aria-selected='true'] {
    color: var(--texto);
    font-weight: var(--p-forte);
}

.exp-tab[aria-selected='true'] .exp-tab-numero {
    color: var(--verde);
}

.exp-tab[aria-selected='true']::after {
    opacity: 1;
    transform: scaleX(1);
}

.exp-arrows {
    display: flex;
    flex: none;
    gap: var(--e2);
    padding-bottom: var(--e3);
}

.exp-arrows button {
    display: grid;
    place-items: center;
    width: var(--e7);
    height: var(--e7);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-full);
    background: var(--sup-2);
    color: var(--texto);
    cursor: pointer;
    transition:
        border-color var(--dur-1) var(--ease),
        box-shadow var(--dur-2) var(--ease),
        color var(--dur-1) var(--ease);
}

.exp-arrows button:hover {
    border-color: var(--verde);
    color: var(--verde);
    box-shadow: var(--sombra-2);
}

/* Sobre papel o botao pressionado nao pode clarear: ele afunda, trocando a
   sombra de elevacao pela rasteira. */
.exp-arrows button:active {
    border-color: var(--verde);
    color: var(--verde);
    box-shadow: var(--sombra-1);
}

.exp-arrows .icone {
    width: var(--e5);
    height: var(--e5);
}


/* --------------------------------------------------------------------------
   4. Palco e paineis
   -------------------------------------------------------------------------- */

.exp-stage {
    position: relative;
}

.exp-panel {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: var(--esp-grid);
    padding-block: var(--esp-bloco);
    min-width: 0;
}

/* Sem JS os quatro paineis ficam empilhados: o fio separa um do outro. */
.exp-panel + .exp-panel {
    border-top: 1px solid var(--borda);
}

.exp-enhanced .exp-panel + .exp-panel {
    border-top: 0;
}


/* --- Transicao de troca ---------------------------------------------------
   Trocar de aba nao e uma entrada, e uma TROCA: o painel que chega vem do
   lado para onde a navegacao andou. O JS escreve so dois atributos
   ([data-exp-dir] na raiz, [data-exp-entra] no painel que entra, este ultimo
   ainda dentro do hidden) e tira o segundo um reflow depois; o tempo, a curva
   e o deslocamento sao daqui, de tokens.

   Movimento desligado (pausa global ou prefers-reduced-motion): o JS nao
   escreve os atributos, entao a troca e seca e o painel nunca fica preso num
   estado invisivel. Por isso a troca e transicao, e nao @keyframes: animacao
   pausada no meio congelaria o painel em opacity 0.
   ------------------------------------------------------------------------ */

.exp-enhanced .exp-panel {
    transition:
        opacity var(--dur-2) var(--ease),
        transform var(--dur-2) var(--ease);
}

/* As duas colunas nao chegam juntas: o texto vem com o painel, a reconstrucao
   completa o movimento um degrau depois. */
.exp-enhanced .exp-visual {
    transition: opacity var(--dur-2) var(--ease-solto) var(--dur-1);
}

.exp-panel[data-exp-entra],
.exp-panel[data-exp-entra] .exp-visual {
    opacity: 0;
}

[data-exp-dir='frente'] .exp-panel[data-exp-entra] {
    transform: translate3d(var(--e5), 0, 0);
}

[data-exp-dir='tras'] .exp-panel[data-exp-entra] {
    transform: translate3d(calc(var(--e5) * -1), 0, 0);
}


/* --------------------------------------------------------------------------
   5. Coluna de texto do painel
   -------------------------------------------------------------------------- */

.exp-copy {
    min-width: 0;
}

/* Titulo de painel: um degrau acima do h3 padrao, porque aqui ele e o titulo
   da tela inteira. O resto (familia, peso, tracking) vem de site.css. */
.exp-copy h3 {
    margin-top: var(--e4);
    font-size: var(--t3);
    line-height: 1.12;
}

.exp-texto {
    margin-top: var(--e5);
    max-width: 46ch;
    font-size: var(--c2);
    line-height: 1.75;
    color: var(--suave);
}

/* A lista marcada e a do sistema; aqui so apertamos o ritmo e a medida, que
   nesta coluna convive com a reconstrucao ao lado. */
.exp-copy .lista-marcada {
    margin-top: var(--e6);
    gap: var(--e3);
    max-width: 46ch;
}

.exp-copy .lista-marcada .icone {
    flex: none;
}

.exp-copy code {
    font-family: var(--mono);
    font-size: var(--c4);
    padding: 0 var(--e1);
    border-radius: var(--r-sm);
    background: var(--verde-vidro);
    color: var(--verde);
}

.exp-copy .link-seta,
.exp-copy .exp-condicao {
    margin-top: var(--e6);
}


/* --------------------------------------------------------------------------
   6. Palco visual: primitivas compartilhadas pelas quatro reconstrucoes
   -------------------------------------------------------------------------- */

/* A bandeja onde a tela reconstruida pousa. Sobre papel ela e um degrau
   ABAIXO da folha da secao (--sup-1 e a folha fria escurecida), e quem a
   recorta e a borda forte: sombra escura aqui so sujaria o papel. Leva
   .mov-parallax (deriva vertical curta, no compositor) e [data-brilho]. */
.exp-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--e5);
    min-width: 0;
    padding: var(--e7) var(--e6) var(--e8);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 90% at 88% 0, var(--verde-vidro), transparent 58%),
        var(--sup-1);
    --mov-forca: 2%;
}

/* Rotulo obrigatorio: os numeros e conversas das telas sao inventados. */
.exp-cenario {
    position: absolute;
    left: 50%;
    bottom: var(--e5);
    transform: translateX(-50%);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--suave);
    white-space: nowrap;
}

/* Superficie elevada: e o que faz a tela parecer captura, nao caixa. */
.exp-janela,
.exp-ficha,
.exp-agenda,
.exp-painel,
.exp-fluxo,
.exp-ia-lista {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    background: var(--sup-2);
    box-shadow: var(--sombra-3);
}

.exp-janela {
    /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
       daqui para dentro passam a medir esta caixa, que nunca rola, e o
       movimento congela. Nota longa em css/sec-conexoes.css. */
    overflow: hidden;
    overflow: clip;
}

/* Barra de titulo da janela */
.exp-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borda);
    background: var(--sup-1);
}

.exp-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-size: var(--c3);
    font-weight: var(--p-max);
    letter-spacing: var(--tk3);
    color: var(--texto);
}

.exp-marca i {
    width: var(--e3);
    height: var(--e3);
    border-radius: var(--r-sm);
    background: var(--verde);
}

.exp-marca b {
    font-size: var(--c5);
    font-weight: var(--p-medio);
    letter-spacing: 0;
    color: var(--suave);
}

/* Selo/pill interno das telas */
.exp-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: var(--e1) var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    background: var(--sup-2);
    font-size: var(--c5);
    font-weight: var(--p-medio);
    color: var(--suave);
    white-space: nowrap;
}

.exp-chip--verde {
    border-color: var(--verde-linha);
    background: var(--verde-vidro);
    color: var(--verde);
    font-weight: var(--p-forte);
}

/* Rotulo de campo dentro das telas */
.exp-rotulo {
    display: flex;
    align-items: center;
    gap: var(--e2);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--suave);
}

.exp-rotulo .icone {
    width: var(--e4);
    height: var(--e4);
    color: var(--verde);
}

.exp-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--e6);
    height: var(--e6);
    border-radius: var(--r-full);
    background: var(--verde-vidro);
    color: var(--verde);
    font-size: var(--c5);
    font-weight: var(--p-max);
}

/* Segmentado (dia/semana/mes, hoje/7/30) */
.exp-segmentos {
    display: inline-flex;
    flex: none;
    padding: var(--e1);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    background: var(--sup-1);
    font-size: var(--c5);
    color: var(--suave);
}

.exp-segmentos i {
    padding: var(--e1) var(--e3);
    border-radius: var(--r-full);
    font-style: normal;
}

.exp-segmento--ativo {
    background: var(--sup-2);
    box-shadow: var(--sombra-2);
    color: var(--texto);
    font-weight: var(--p-forte);
}


/* --------------------------------------------------------------------------
   7. Tela 01: atendimento
   -------------------------------------------------------------------------- */

.exp-janela-corpo {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
}

.exp-rail {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e4);
    border-right: 1px solid var(--borda);
    background: var(--sup-1);
}

.exp-historico {
    display: grid;
    gap: var(--e1);
    padding: var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    background: var(--sup-2);
    font-size: var(--c5);
    line-height: 1.45;
}

.exp-historico strong {
    font-weight: var(--p-forte);
    color: var(--texto);
}

.exp-historico span {
    color: var(--suave);
}

.exp-resumo {
    display: grid;
    gap: var(--e2);
    margin-top: auto;
    padding: var(--e3);
    border: 1px solid var(--verde-linha);
    border-radius: var(--r-md);
    background: var(--verde-vidro);
    font-size: var(--c5);
    line-height: 1.6;
    color: var(--suave);
}

.exp-conversa {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e4);
    min-width: 0;
}

.exp-conversa-topo {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borda);
}

.exp-conversa-topo p {
    display: grid;
    min-width: 0;
    margin-right: auto;
}

.exp-conversa-topo strong {
    font-size: var(--c4);
    font-weight: var(--p-forte);
    color: var(--texto);
}

.exp-conversa-topo span {
    font-size: var(--c5);
    color: var(--suave);
}

.exp-balao {
    display: grid;
    gap: var(--e2);
    padding: var(--e3);
    border-radius: var(--r-md);
    font-size: var(--c4);
    line-height: 1.6;
    color: var(--texto);
}

.exp-balao--cliente {
    border: 1px solid var(--borda);
    border-top-left-radius: var(--r-sm);
    background: var(--sup-1);
    margin-right: var(--e7);
}

.exp-hora {
    justify-self: end;
    font-size: var(--c5);
    color: var(--suave);
}

/* Player de audio com forma de onda */
.exp-audio {
    display: flex;
    align-items: center;
    gap: var(--e3);
}

.exp-audio-play {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--e6);
    height: var(--e6);
    border-radius: var(--r-full);
    background: var(--verde);
    color: var(--sup-2);
}

.exp-audio-play .icone {
    width: var(--e3);
    height: var(--e3);
    fill: currentColor;
}

.exp-onda {
    display: flex;
    align-items: center;
    gap: calc(var(--e1) / 2);
    flex: 1;
    height: var(--e5);
    min-width: 0;
}

.exp-onda i {
    flex: 1;
    height: var(--h);
    min-height: var(--e1);
    border-radius: var(--r-full);
    background: var(--verde);
    opacity: .3;
}

.exp-onda i:nth-child(-n + 9) {
    opacity: .85;
}

.exp-audio-tempo {
    flex: none;
    font-size: var(--c5);
    font-style: normal;
    color: var(--suave);
}

.exp-transcricao {
    display: flex;
    gap: var(--e2);
    padding-top: var(--e2);
    border-top: 1px dashed var(--borda);
    font-size: var(--c5);
    line-height: 1.6;
    color: var(--suave);
}

.exp-transcricao .icone {
    flex: none;
    width: var(--e4);
    height: var(--e4);
    color: var(--verde);
}

/* Nota interna: fica no papel-2 com fio de destaque, sem cor nova no sistema */
.exp-nota {
    display: grid;
    gap: var(--e2);
    padding: var(--e3);
    border-left: 2px solid var(--verde);
    border-radius: var(--r-sm);
    background: var(--sup-1);
    font-size: var(--c5);
    line-height: 1.6;
    color: var(--suave);
}

.exp-composer {
    display: grid;
    gap: var(--e3);
    margin-top: auto;
    padding: var(--e3);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-md);
    background: var(--sup-2);
    box-shadow: var(--sombra-2);
    font-size: var(--c4);
    line-height: 1.6;
    color: var(--texto);
}

.exp-atalho {
    display: inline-block;
    margin-right: var(--e2);
    padding: 0 var(--e2);
    border-radius: var(--r-sm);
    background: var(--verde-vidro);
    color: var(--verde);
    font-family: var(--mono);
    font-size: var(--c5);
    font-weight: var(--p-forte);
}

.exp-composer-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid var(--borda);
    font-size: var(--c5);
    color: var(--suave);
}

.exp-composer-acoes span {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
}

.exp-composer-acoes .icone {
    width: var(--e4);
    height: var(--e4);
    color: var(--verde);
}


/* --------------------------------------------------------------------------
   8. Tela 02: tickets e agenda
   -------------------------------------------------------------------------- */

/* O cartao de agenda e menor e desalinhado de proposito: da a impressao de
   duas janelas empilhadas na mesa, nao de dois blocos centralizados. */
.exp-visual--tickets .exp-agenda {
    max-width: 480px;
    margin-right: 0;
    box-shadow: var(--sombra-2);
}

.exp-ficha {
    padding: var(--e5);
}

.exp-ficha-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
}

.exp-ficha-titulo {
    margin-top: var(--e4);
    font-family: var(--titulo);
    font-size: var(--t6);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    color: var(--texto);
}

.exp-ficha-origem {
    margin-top: var(--e1);
    font-size: var(--c5);
    color: var(--suave);
}

.exp-campos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e3);
    margin: var(--e5) 0;
    padding: var(--e4) 0;
    border-block: 1px solid var(--borda);
}

.exp-campos dt {
    font-size: var(--c5);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--suave);
}

.exp-campos dd {
    margin: var(--e1) 0 0;
    font-size: var(--c4);
    font-weight: var(--p-forte);
    color: var(--texto);
}

.exp-etapas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--c5);
    color: var(--suave);
}

/* Escada de intensidade, nao de cor: etapa por vir e fio tracejado; etapa
   cumprida e fio inteiro em acento; a atual ganha o peso. Nunca um vermelho
   ou um ambar: a paleta so tem verde. */
.exp-etapas li {
    padding-top: var(--e3);
    border-top: 2px dashed var(--borda-forte);
}

.exp-etapas .exp-etapa--feita,
.exp-etapas .exp-etapa--atual {
    border-top-style: solid;
    border-top-color: var(--verde);
    color: var(--texto);
}

.exp-etapas .exp-etapa--atual {
    font-weight: var(--p-forte);
    color: var(--verde);
}

.exp-tempo {
    display: grid;
    gap: var(--e2);
    list-style: none;
    margin: var(--e5) 0 0;
    padding: var(--e4) 0 0;
    border-top: 1px solid var(--borda);
    font-size: var(--c5);
    line-height: 1.6;
    color: var(--suave);
}

.exp-tempo li {
    display: flex;
    gap: var(--e3);
}

.exp-tempo i {
    flex: none;
    font-style: normal;
    font-weight: var(--p-forte);
    color: var(--texto);
}

.exp-agenda {
    padding: var(--e4);
}

.exp-agenda-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e4);
}

.exp-compromisso {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3);
    border: 1px solid var(--verde-linha);
    border-radius: var(--r-md);
    background: var(--verde-vidro);
}

.exp-data {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--e8);
    padding: var(--e2) 0;
    border-radius: var(--r-sm);
    background: var(--sup-2);
}

.exp-data i {
    font-size: var(--c5);
    font-style: normal;
    letter-spacing: var(--tk-largo);
    color: var(--suave);
}

.exp-data strong {
    font-family: var(--titulo);
    font-size: var(--t5);
    font-weight: var(--p-max);
    letter-spacing: var(--tk3);
    color: var(--texto);
}

.exp-compromisso p {
    display: grid;
    gap: var(--e1);
    min-width: 0;
}

.exp-compromisso strong {
    font-size: var(--c4);
    font-weight: var(--p-forte);
    color: var(--texto);
}

.exp-compromisso span {
    font-size: var(--c5);
    color: var(--suave);
}

.exp-alertas {
    display: grid;
    gap: var(--e2);
    list-style: none;
    margin: var(--e4) 0 0;
    padding: 0;
    font-size: var(--c5);
    line-height: 1.5;
    color: var(--suave);
}

.exp-alertas li {
    display: flex;
    align-items: center;
    gap: var(--e2);
}

.exp-alertas .icone {
    flex: none;
    width: var(--e4);
    height: var(--e4);
    color: var(--verde);
}


/* --------------------------------------------------------------------------
   9. Tela 03: inteligencia artificial
   -------------------------------------------------------------------------- */

.exp-ia-corpo {
    display: grid;
    gap: var(--e3);
    padding: var(--e5);
}

.exp-ia-campo {
    padding: var(--e3);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-md);
    background: var(--sup-1);
    font-size: var(--c4);
    line-height: 1.6;
    color: var(--suave);
}

.exp-ia-barra {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
    font-size: var(--c5);
    color: var(--suave);
}

.exp-ia-barra i {
    font-style: normal;
}

.exp-ia-botao {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e2) var(--e4);
    border-radius: var(--r-full);
    background: var(--verde);
    color: var(--sup-2);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    box-shadow: var(--sombra-2);
}

.exp-ia-botao .icone {
    width: var(--e4);
    height: var(--e4);
}

.exp-ia-saida {
    display: grid;
    gap: var(--e2);
    padding: var(--e4);
    border: 1px solid var(--verde-linha);
    border-radius: var(--r-md);
    background: var(--verde-vidro);
    font-size: var(--c4);
    line-height: 1.7;
    color: var(--texto);
}

.exp-ia-acoes {
    display: flex;
    gap: var(--e2);
    margin-top: var(--e2);
    font-size: var(--c5);
    color: var(--suave);
}

.exp-ia-acoes i {
    padding: var(--e1) var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    background: var(--sup-2);
    font-style: normal;
}

.exp-ia-acoes .exp-ia-acao--forte {
    border-color: var(--verde);
    color: var(--verde);
    font-weight: var(--p-forte);
}

.exp-ia-aviso {
    display: flex;
    align-items: center;
    gap: var(--e2);
    font-size: var(--c5);
    line-height: 1.5;
    color: var(--suave);
}

.exp-ia-aviso .icone {
    flex: none;
    width: var(--e4);
    height: var(--e4);
    color: var(--verde);
}

.exp-ia-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e4);
    list-style: none;
    padding: var(--e4);
    box-shadow: var(--sombra-2);
}

.exp-ia-lista li {
    display: grid;
    gap: var(--e1);
    font-size: var(--c5);
    line-height: 1.5;
}

.exp-ia-lista strong {
    font-size: var(--c4);
    font-weight: var(--p-forte);
    color: var(--texto);
}

.exp-ia-lista span {
    color: var(--suave);
}


/* --------------------------------------------------------------------------
   10. Tela 04: gestao
   -------------------------------------------------------------------------- */

.exp-painel {
    padding: var(--e5);
}

.exp-painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
}

.exp-indicadores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e4);
    margin: var(--e4) 0;
    padding: var(--e4) 0;
    border-block: 1px solid var(--borda);
}

.exp-indicadores p {
    display: grid;
    gap: var(--e1);
}

.exp-indicadores i {
    font-size: var(--c5);
    font-style: normal;
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--suave);
}

.exp-indicadores strong {
    display: flex;
    align-items: baseline;
    gap: var(--e1);
    font-family: var(--titulo);
    font-size: var(--t4);
    font-weight: var(--p-max);
    letter-spacing: var(--tk2);
    color: var(--texto);
}

.exp-indicadores strong span {
    font-family: var(--fonte);
    font-size: var(--c5);
    font-weight: var(--p-medio);
    letter-spacing: 0;
    color: var(--suave);
}

.exp-calor-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e3);
}

.exp-calor-grade {
    display: grid;
    gap: calc(var(--e1) / 2);
}

.exp-calor-linha {
    display: grid;
    grid-template-columns: var(--e6) repeat(24, minmax(0, 1fr));
    align-items: center;
    gap: calc(var(--e1) / 2);
}

.exp-calor-dia {
    font-size: var(--c5);
    font-style: normal;
    line-height: 1;
    color: var(--suave);
}

.exp-calor-linha b {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background: var(--verde);
    opacity: calc(.07 + var(--n) * .88);
}

.exp-calor-horas {
    display: flex;
    justify-content: space-between;
    margin-top: var(--e2);
    padding-left: var(--e6);
    font-size: var(--c5);
    color: var(--suave);
}

.exp-calor-horas i {
    font-style: normal;
}

.exp-fluxo {
    max-width: 480px;
    margin-left: 0;
    padding: var(--e4);
    box-shadow: var(--sombra-2);
}

.exp-fluxo ul {
    display: grid;
    gap: var(--e2);
    list-style: none;
    margin: var(--e3) 0 0;
    padding: 0;
}

.exp-fluxo li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e2) var(--e3);
    border-radius: var(--r-sm);
    background: var(--sup-1);
    font-size: var(--c5);
    color: var(--texto);
    overflow: hidden;
}

.exp-fluxo li::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p);
    background: var(--verde-linha);
}

.exp-fluxo i,
.exp-fluxo strong {
    position: relative;
}

.exp-fluxo i {
    font-style: normal;
}

.exp-fluxo strong {
    font-weight: var(--p-max);
}

.exp-fluxo-pe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e3);
    margin-top: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid var(--borda);
    font-size: var(--c5);
    color: var(--suave);
}

.exp-fluxo-pe span {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
}

.exp-fluxo-pe .icone {
    width: var(--e4);
    height: var(--e4);
    color: var(--verde);
}


/* --------------------------------------------------------------------------
   11. Rodape da secao, contador e regiao de status
   -------------------------------------------------------------------------- */

.exp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
    padding-top: var(--e5);
    border-top: 1px solid var(--borda);
}

.exp-footer p {
    max-width: 62ch;
    font-size: var(--c4);
    line-height: 1.6;
    color: var(--suave);
}

.exp-counter {
    flex: none;
    font-size: var(--c3);
    letter-spacing: var(--tk-largo);
    color: var(--suave);
}

.exp-counter strong {
    font-weight: var(--p-max);
    color: var(--texto);
}

/* A regiao viva [data-exp-status] usa .sr-only de site.css, a unica
   implementacao de conteudo so para leitor de tela do site. */


/* --------------------------------------------------------------------------
   12. Breakpoints: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .exp-panel {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }

    .exp-tabs {
        gap: var(--e5);
    }

    .exp-visual {
        padding: var(--e6) var(--e5) var(--e7);
    }

    .exp-janela-corpo {
        grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    }

    .exp-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .exp-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Acompanha o empilhamento do cabecalho dividido feito em site.css. */
    .exp-section .secao-cabecalho--dividido > .exp-condicao {
        grid-column: 1;
        grid-row: auto;
        margin-top: var(--e4);
    }

    .exp-visual {
        gap: var(--e4);
    }

    .exp-janela,
    .exp-ficha,
    .exp-painel,
    .exp-fluxo,
    .exp-agenda,
    .exp-ia-lista {
        max-width: 620px;
    }

    .exp-visual--tickets .exp-agenda,
    .exp-fluxo {
        max-width: 560px;
    }

    .exp-marca b {
        display: none;
    }
}

@media (max-width: 680px) {
    .exp-navigation {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .exp-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--e4);
    }

    .exp-tab {
        white-space: normal;
        text-align: left;
        line-height: 1.4;
    }

    .exp-arrows {
        justify-content: flex-end;
        padding-block: var(--e3);
        border-top: 1px solid var(--borda);
    }

    .exp-visual {
        padding: var(--e5) var(--e4) var(--e7);
        border-radius: var(--r-lg);
    }

    /* A fila lateral e contexto: no celular a conversa fica com a tela toda. */
    .exp-rail {
        display: none;
    }

    .exp-janela-corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .exp-balao--cliente {
        margin-right: var(--e5);
    }

    .exp-etapas,
    .exp-ia-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exp-indicadores {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e3);
    }

    .exp-ficha,
    .exp-painel,
    .exp-ia-corpo {
        padding: var(--e4);
    }

    .exp-visual--tickets .exp-agenda,
    .exp-fluxo {
        margin-inline: auto;
    }

    .exp-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e3);
    }
}

@media (max-width: 380px) {
    .exp-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .exp-campos,
    .exp-etapas,
    .exp-ia-lista {
        grid-template-columns: minmax(0, 1fr);
    }

    .exp-calor-linha {
        grid-template-columns: var(--e5) repeat(24, minmax(0, 1fr));
    }

    .exp-calor-horas {
        padding-left: var(--e5);
    }

    .exp-composer-acoes {
        gap: var(--e3);
    }
}