/* landing-demo.css — seção de demonstração da landing (Passo 20).
   Arquivo separado de propósito: a landingtest é DESCARTÁVEL. Se o teste não
   compensar, some este CSS + landingtest.html + landingtest.js e nada da
   landing real é afetado. Só tokens — herda tema e contraste do resto. */

.trial-section { padding: 72px 0; background: var(--color-bg-soft, #0f1020); }
.trial-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.trial-badge {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-primary, #10b981);
    background: color-mix(in srgb, var(--color-primary, #10b981) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #10b981) 35%, transparent);
    margin-bottom: 14px;
}
.trial-title { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 10px; color: var(--color-text, #fff); }
.trial-sub   { color: var(--color-text-muted, #9ca3af); font-size: 1rem; line-height: 1.6; }

.trial-app {
    max-width: 900px; margin: 0 auto; padding: 24px;
    background: var(--color-bg-card, #13141f);
    border: 1px solid var(--color-border, rgba(255,255,255,.08));
    border-radius: 16px; box-shadow: var(--shadow-lg, 0 14px 28px rgba(0,0,0,.25));
}

.trial-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.trial-kpi {
    padding: 14px; border-radius: 11px; text-align: center;
    background: color-mix(in srgb, var(--color-text, #fff) 4%, transparent);
    border: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.trial-kpi-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted, #9ca3af); margin-bottom: 6px; }
.trial-kpi-val   { font-size: 1.25rem; color: var(--color-text, #fff); font-variant-numeric: tabular-nums; }
.trial-neg { color: #ff6b6b !important; }
.trial-pos { color: #34d399 !important; }

.trial-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* ⚠️ OBRIGATÓRIO junto com o display acima: o atributo `hidden` do HTML só
   funciona por causa da regra `[hidden]{display:none}` do user-agent, e QUALQUER
   `display` declarado pelo autor a vence. Sem esta linha, `form.hidden = true`
   não esconde nada e a parede aparece COM o formulário ainda ativo ao lado. */
.trial-form[hidden] { display: none; }
.trial-input {
    padding: 11px 13px; border-radius: 9px; font-size: .92rem; font-family: inherit;
    color: var(--color-text, #fff);
    background: color-mix(in srgb, var(--color-text, #fff) 6%, transparent);
    border: 1px solid var(--color-border-strong, rgba(255,255,255,.16));
}
.trial-desc  { flex: 1 1 220px; }
.trial-valor { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.trial-add {
    padding: 11px 22px; border: none; border-radius: 9px; cursor: pointer;
    font-weight: 700; font-size: .92rem; font-family: inherit;
    background: var(--color-primary, #10b981); color: #ffffff;
}
.trial-add:hover { filter: brightness(1.08); }
.trial-erro { min-height: 18px; margin: 4px 0 12px; font-size: .82rem; color: #ff6b6b; }

.trial-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trial-lista-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-text-muted, #9ca3af); margin-bottom: 8px;
}
.trial-limpar {
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted, #9ca3af); text-decoration: underline;
}
.trial-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.trial-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 4px;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.trial-item-desc { flex: 1; color: var(--color-text, #fff); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-item-val  { font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trial-item-del  { background: none; border: none; cursor: pointer; color: var(--color-text-muted, #9ca3af); font-size: .85rem; padding: 2px 4px; }
.trial-item-del:hover { color: #ff6b6b; }
.trial-vazio { color: var(--color-text-muted, #9ca3af); font-size: .86rem; padding: 14px 2px; line-height: 1.5; }

.trial-graf-titulo { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted, #9ca3af); margin-bottom: 8px; }
.trial-bar-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 9px; margin-bottom: 9px; }
.trial-bar-lbl { font-size: .8rem; color: var(--color-text, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-bar-track { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--color-text, #fff) 8%, transparent); overflow: hidden; }
.trial-bar-fill  { display: block; height: 100%; border-radius: 5px; transition: width .35s ease; }
.trial-bar-val   { font-size: .8rem; color: var(--color-text-muted, #9ca3af); font-variant-numeric: tabular-nums; }

.trial-nota { margin: 18px 0 0; font-size: .8rem; color: var(--color-text-muted, #9ca3af); text-align: center; }
.trial-cta  { display: block; width: fit-content; margin: 16px auto 0; }


/* ── Enriquecimento: crédito, reserva, rosca e insight ────────────────────── */
.trial-kpis { grid-template-columns: repeat(4, 1fr); }
.trial-res { color: #fbbf24 !important; }

.trial-item-tag {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    vertical-align: middle;
}
.trial-tag-saida    { background: color-mix(in srgb, #ff6b6b 20%, transparent); color: #ff9d9d; }
.trial-tag-entrada  { background: color-mix(in srgb, #34d399 20%, transparent); color: #6ee7b7; }
.trial-tag-credito  { background: color-mix(in srgb, #60a5fa 20%, transparent); color: #93c5fd; }
.trial-tag-reserva  { background: color-mix(in srgb, #fbbf24 20%, transparent); color: #fcd34d; }

/* Rosca em SVG: o furo do meio carrega o total */
.trial-rosca-wrap { position: relative; width: 148px; margin: 0 auto 16px; }
.trial-rosca { width: 148px; height: 148px; transform: rotate(-90deg); }
.trial-rosca circle { transition: stroke-dasharray .4s ease; }
.trial-rosca-centro {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
.trial-rosca-centro span  { font-size: .95rem; font-weight: 700; color: var(--color-text, #fff); font-variant-numeric: tabular-nums; }
.trial-rosca-centro small { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted, #9ca3af); margin-top: 2px; }

.trial-insight {
    display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; padding: 13px 15px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--color-primary, #10b981) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #10b981) 26%, transparent);
}
.trial-insight[hidden] { display: none; }
.trial-insight-ico { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.trial-insight-txt { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--color-text, #fff); }


/* ══ v2 — chat, dashboard rica, select corrigido ═══════════════════════════ */

/* 🔴 SELECT: o tema da landing deixava o fundo do menu branco e as opções
   "transparentes" (texto claro sobre branco). Aqui as duas pontas ficam
   explícitas — o <option> herda do SO, então precisa de cor própria. */
.trial-select { appearance: none; padding-right: 30px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.trial-select option { background: #13141f; color: #fff; }

.trial-kpi { display: flex; flex-direction: column; gap: 2px; }
.trial-kpi-sub { font-size: .64rem; color: var(--color-text-muted, #9ca3af); letter-spacing: .01em; }
.trial-kpi--saldo { border-color: color-mix(in srgb, var(--color-primary, #10b981) 40%, transparent); }

/* Barra de saúde do mês */
.trial-barra-saude { margin-bottom: 18px; }
.trial-saude-top { display: flex; justify-content: space-between; font-size: .72rem;
    color: var(--color-text-muted, #9ca3af); margin-bottom: 6px; letter-spacing: .03em; }
.trial-saude-track { height: 7px; border-radius: 4px; overflow: hidden;
    background: color-mix(in srgb, var(--color-text, #fff) 9%, transparent); }
.trial-saude-fill { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .45s ease, background .3s ease; }


/* Chat */
.trial-chat { flex: 1; min-height: 190px; max-height: 240px; overflow-y: auto; padding: 12px;
    border-radius: 11px; margin-bottom: 10px;
    background: color-mix(in srgb, var(--color-text, #fff) 3%, transparent);
    border: 1px solid var(--color-border, rgba(255,255,255,.08)); }
.trial-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; margin-bottom: 8px;
    font-size: .85rem; line-height: 1.5; animation: trialFade .25s ease; }
.trial-msg--bot { background: color-mix(in srgb, var(--color-text, #fff) 7%, transparent);
    color: var(--color-text, #fff); border-bottom-left-radius: 4px; }
.trial-msg--user { margin-left: auto; background: var(--color-primary, #10b981); color: #fff;
    border-bottom-right-radius: 4px; font-weight: 600; }
@keyframes trialFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.trial-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.trial-chip { padding: 7px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .78rem;
    color: var(--color-text, #fff);
    background: color-mix(in srgb, var(--color-text, #fff) 6%, transparent);
    border: 1px solid var(--color-border-strong, rgba(255,255,255,.16));
    transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.trial-chip:hover { background: color-mix(in srgb, var(--color-primary, #10b981) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-primary, #10b981) 45%, transparent); transform: translateY(-1px); }
.trial-chip--pergunta { border-style: dashed; }

/* Para onde foi o dinheiro — centralizado */
.trial-graf-wrap { text-align: center; padding-top: 6px; border-top: 1px solid var(--color-border, rgba(255,255,255,.08)); }
.trial-graf-inner { display: flex; align-items: center; justify-content: center; gap: 30px;
    flex-wrap: wrap; margin-top: 12px; }
.trial-graf { flex: 1 1 320px; max-width: 420px; text-align: left; }
.trial-rosca-wrap { margin: 0; flex-shrink: 0; }

.trial-item-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.trial-item-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Insights: cartões, não uma linha só */
.trial-insights { display: grid; gap: 10px; margin-top: 20px; }
.trial-insight { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 11px;
    background: color-mix(in srgb, var(--color-primary, #10b981) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #10b981) 24%, transparent);
    animation: trialFade .3s ease; }
.trial-insight-tit { display: block; font-size: .85rem; color: var(--color-text, #fff); margin-bottom: 3px; }
.trial-insight-txt { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--color-text-muted, #cbd5e1); }

.trial-cta { font-size: 1rem; padding: 14px 32px; }



/* ══ v3 — DOIS CARDS IRMÃOS ════════════════════════════════════════════════
   Correção de layout: o chat estava DENTRO do card de transações, o que
   empilhava informação demais numa caixa só e pesava a estética. Agora são dois
   cards lado a lado — o painel manda no espaço, o assistente acompanha. */
.trial-grid {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px; align-items: start; max-width: 1120px; margin: 0 auto;
}
.trial-app { max-width: none; margin: 0; }

/* Card do assistente: mais leve que o painel, e acompanha a rolagem no desktop */
.trial-app--chat {
    display: flex; flex-direction: column; position: sticky; top: 24px;
    background: color-mix(in srgb, var(--color-bg-card, #13141f) 92%, var(--color-primary, #10b981));
}
.trial-chat-head {
    display: flex; align-items: center; gap: 11px; padding-bottom: 13px; margin-bottom: 13px;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.trial-chat-avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: color-mix(in srgb, var(--color-primary, #10b981) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #10b981) 38%, transparent);
}
.trial-chat-nome { display: block; font-size: .9rem; color: var(--color-text, #fff); }
.trial-chat-status {
    display: block; font-size: .68rem; color: var(--color-primary, #10b981);
    letter-spacing: .02em;
}
.trial-chat { min-height: 230px; max-height: 300px; }

/* Insights e fecho agora vivem FORA dos cards, alinhados à grade */
.trial-insights { max-width: 1120px; margin: 20px auto 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.trial-nota { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* ── Cabeçalho dos cards (título + ícone) ─────────────────────────────────── */
/* Sem emoji em lugar nenhum: ícones Font Awesome, mesma linguagem do app. */
.trial-card-head {
    display: flex; align-items: center; gap: 11px;
    padding-bottom: 13px; margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.08));
}
.trial-card-ico {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
    color: var(--color-primary, #10b981);
    background: color-mix(in srgb, var(--color-primary, #10b981) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #10b981) 32%, transparent);
}
.trial-card-tit { display: block; font-size: .95rem; color: var(--color-text, #fff); letter-spacing: -.01em; }
.trial-card-sub { display: block; font-size: .7rem; color: var(--color-text-muted, #9ca3af); margin-top: 1px; }
.trial-chat-avatar i { font-size: .95rem; color: var(--color-primary, #10b981); }

/* Ícone do insight vira <i>, não emoji */
.trial-insight-ico { font-size: .95rem; line-height: 1.5; flex-shrink: 0; color: var(--color-primary, #10b981); }

.trial-nota i { color: var(--color-text-muted, #9ca3af); margin-right: 5px; }


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — o DESKTOP acima fica INTOCADO de propósito.
   Tudo daqui para baixo vive dentro de media query: nenhuma regra desta seção
   alcança telas largas. Foram removidos 3 blocos antigos espalhados que se
   contradiziam (um mirava .trial-body, que nem existe mais, e os KPIs eram
   definidos duas vezes com valores diferentes).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ≤ 980px: os dois cards deixam de dividir a linha ────────────────────── */
@media (max-width: 980px) {
    .trial-grid      { grid-template-columns: 1fr; gap: 16px; }
    /* Sticky só faz sentido lado a lado; empilhado, ele "gruda" atrapalhando. */
    .trial-app--chat { position: static; }
    .trial-graf-inner { gap: 22px; }
}

/* ── ≤ 720px: celular ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .trial-section { padding: 48px 0; }
    .trial-head    { margin-bottom: 24px; }
    .trial-title   { font-size: clamp(1.35rem, 6vw, 1.75rem); }
    .trial-sub     { font-size: .92rem; }

    .trial-app { padding: 16px; border-radius: 14px; }

    /* KPIs 2×2: quatro numa linha vira ilegível; um por linha rola demais. */
    .trial-kpis    { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
    .trial-kpi     { padding: 11px 10px; }
    .trial-kpi-val { font-size: 1.05rem; }
    .trial-kpi-sub { font-size: .6rem; }

    /* Formulário em grade: tipo e descrição ocupam a linha; valor e botão
       dividem a última. Assim nada fica com largura de sobra nem espremido. */
    /* 2×2: [tipo][valor] em cima, [descrição][lançar] embaixo. Ocupa a largura
       toda sem deixar campo com sobra nem espremido, e mantém o polegar perto
       do botão. */
    .trial-form {
        display: grid; gap: 8px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "tipo valor" "desc botao";
    }
    .trial-select { grid-area: tipo;  width: 100%; }
    .trial-valor  { grid-area: valor; width: 100%; text-align: right; }
    .trial-desc   { grid-area: desc;  width: 100%; }
    .trial-add    { grid-area: botao; white-space: nowrap; width: 100%; }
    /* Alvo de toque confortável (WCAG sugere ~44px). */
    .trial-input, .trial-add { min-height: 46px; font-size: 16px; }
    /* 16px evita o zoom automático do iOS ao focar o campo. */

    .trial-lista     { max-height: 220px; }
    .trial-item      { padding: 10px 2px; gap: 8px; }
    .trial-item-desc { font-size: .86rem; }
    .trial-item-val  { font-size: .86rem; }
    .trial-item-del  { min-width: 32px; min-height: 32px; }

    /* Rosca em cima, barras embaixo — lado a lado não cabe. */
    .trial-graf-inner { flex-direction: column; }
    .trial-graf       { flex: 1 1 auto; width: 100%; max-width: none; }
    .trial-rosca-wrap, .trial-rosca { width: 132px; }
    .trial-rosca      { height: 132px; }
    .trial-bar-row    { grid-template-columns: 72px 1fr auto; gap: 7px; }
    .trial-bar-lbl    { font-size: .74rem; }
    .trial-bar-val    { font-size: .72rem; }

    /* Chat mais baixo: no celular ele não pode empurrar o resto para fora. */
    .trial-chat { min-height: 150px; max-height: 210px; padding: 10px; }
    .trial-msg  { max-width: 92%; font-size: .84rem; }

    /* Chips numa faixa que ROLA na horizontal, em vez de uma parede de botões
       que ocupa meia tela. Snap para parar alinhado no dedo. */
    .trial-chips {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
        padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .trial-chips::-webkit-scrollbar { display: none; }
    .trial-chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 38px; }

    .trial-card-head  { padding-bottom: 11px; margin-bottom: 12px; }
    .trial-card-ico, .trial-chat-avatar { width: 34px; height: 34px; }

    .trial-insights { grid-template-columns: 1fr; gap: 9px; margin-top: 16px; }
    .trial-insight  { padding: 11px 13px; }

    .trial-cta  { width: 100%; text-align: center; }
    .trial-nota { font-size: .76rem; line-height: 1.6; }
}

/* ── ≤ 400px: telas estreitas ────────────────────────────────────────────── */
@media (max-width: 400px) {
    .trial-app     { padding: 13px; }
    .trial-kpi-val { font-size: .95rem; }
    /* O 2×2 continua: é mais legível que empilhar 4 campos. Só encolhe. */
    .trial-form    { gap: 7px; }
    .trial-input, .trial-add { font-size: 15px; padding-left: 10px; padding-right: 10px; }
    .trial-bar-row { grid-template-columns: 62px 1fr auto; }
}


/* ── Ícone da marca no cabeçalho do card ─────────────────────────────────── */
.trial-card-ico img { display: block; width: 22px; height: 22px; border-radius: 5px; }
.trial-chat-avatar svg { width: 19px; height: 19px; color: var(--color-primary, #10b981); }
.trial-nota-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--color-text-muted, #9ca3af); }
.trial-insight-ico { width: 19px; height: 19px; }

/* ── "Digitando…" no chat ─────────────────────────────────────────────────── */
.trial-msg--typing { display: flex; gap: 4px; align-items: center; padding: 12px; width: fit-content; }
.trial-msg--typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-text-muted, #9ca3af);
    animation: trialPulse 1.1s infinite ease-in-out;
}
.trial-msg--typing span:nth-child(2) { animation-delay: .16s; }
.trial-msg--typing span:nth-child(3) { animation-delay: .32s; }
@keyframes trialPulse { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
    .trial-msg--typing span { animation: none; opacity: .6; }
    .trial-bar-fill, .trial-saude-fill, .trial-rosca circle { transition: none; }
}

/* ── Mais respiro e sofisticação no celular ──────────────────────────────── */
@media (max-width: 720px) {
    /* Chat mais alto: o usuário-alvo é mobile, e conversa curta demais não
       mostra o produto. */
    .trial-chat { min-height: 230px; max-height: 300px; }
    /* Cabeçalhos centralizados deixam o card mais equilibrado no estreito. */
    .trial-card-head { justify-content: center; text-align: left; }
    .trial-kpi { text-align: center; align-items: center; }
    .trial-graf-titulo { text-align: center; display: block; }
    .trial-lista-head { font-size: .68rem; }
    /* Rolagem do chat com inércia e sem barra visível. */
    .trial-chat { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .trial-chat::-webkit-scrollbar { display: none; }
}

/* ══ CORREÇÃO — chat inoperante no celular ════════════════════════════════
   Causa (clássica de flexbox): `.trial-chips` é filho de um flex COLUMN e tem
   `overflow-x:auto` com `nowrap`. Como o padrão de um item flex é
   `min-width:auto`, ele se recusa a encolher e fica tão largo quanto o conteúdo
   — empurrando o card inteiro para fora da tela e levando os chips junto. Quem
   olhava via um card cortado e botões inalcançáveis: "o chat não responde".
   `min-width: 0` devolve ao item o direito de encolher e ativa a rolagem
   horizontal de verdade. */
.trial-app--chat,
.trial-col,
.trial-chat,
.trial-chips { min-width: 0; }
.trial-grid  { min-width: 0; }

/* O CTA flutuante do mobile é `position: fixed` na faixa de baixo com z-index
   999. Sem folga, ele cobre justamente a fileira de chips e engole o toque.
   Esta reserva garante que sempre exista espaço para rolar os chips acima dele. */
@media (max-width: 720px) {
    .trial-app--chat { padding-bottom: 20px; }
    .trial-chips     { scroll-padding-left: 16px; }
    /* Área de toque confortável e sem "seleção azul" ao tocar. */
    .trial-chip {
        min-height: 40px; padding: 9px 15px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .trial-add, .trial-item-del, .trial-limpar { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    /* Respiro no fim da seção para o CTA fixo nunca cobrir o último conteúdo. */
    .trial-section { padding-bottom: 96px; }

    /* O ícone "i" ficava ACIMA do texto: como <svg> é inline e o parágrafo é
       centralizado, com o texto quebrando em várias linhas ele sobrava sozinho
       na primeira. Flex resolve de vez — ícone e texto sempre lado a lado, e o
       `align-items: flex-start` alinha o ícone à PRIMEIRA linha, não ao meio do
       bloco. `flex-shrink: 0` impede que ele seja esmagado no estreito. */
    .trial-nota {
        display: flex; align-items: flex-start; gap: 7px;
        text-align: left; max-width: 30rem; margin-inline: auto;
    }
    .trial-nota-ico { flex-shrink: 0; margin: 2px 0 0; width: 15px; height: 15px; }
}


/* ══ A PAREDE, O PORTÃO E A BORDA ═════════════════════════════════════════
   Três peças com a mesma tese: a vitrine prova capacidade e cria desejo, mas
   não entrega o valor recorrente. Ver a nota no topo de landing-demo.js. */

/* ── A parede: troca de lugar com o formulário ao atingir MAX_ITENS ──────── */
.trial-parede {
    margin: 4px 0 12px; padding: 18px 16px; text-align: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-primary, #10b981) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #10b981) 30%, transparent);
}
.trial-parede[hidden] { display: none; }
.trial-parede-tit {
    display: block; font-size: .98rem; color: var(--color-text, #fff); margin-bottom: 5px;
}
.trial-parede-txt {
    margin: 0 0 14px; font-size: .84rem; line-height: 1.55;
    color: var(--color-text-muted, #cbd5e1);
}
.trial-parede-txt em { font-style: normal; color: var(--color-text, #fff); }
.trial-parede-cta { display: inline-block; font-size: .92rem; padding: 11px 24px; }
.trial-parede-hint {
    display: block; margin-top: 10px; font-size: .76rem;
    color: var(--color-text-muted, #9ca3af);
}

/* ── O portão: insights retidos (título à vista, corpo fechado) ──────────── */
/* Tom deliberadamente mais frio que o insight liberado: o contraste entre os
   dois é o que comunica "isto aqui está fechado" sem precisar dizer. */
.trial-insight--retido {
    background: color-mix(in srgb, var(--color-text-muted, #9ca3af) 7%, transparent);
    border-color: color-mix(in srgb, var(--color-text-muted, #9ca3af) 22%, transparent);
}
.trial-retido-lista {
    margin: 7px 0 8px; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 5px;
}
.trial-retido-lista li {
    font-size: .83rem; line-height: 1.4;
    color: var(--color-text, #fff);
    padding-left: 15px; position: relative;
}
/* O traço faz as vezes de item de lista sem marcador redondo, que na caixa
   fria parecia bullet de erro. */
.trial-retido-lista li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 8px; height: 1px;
    background: color-mix(in srgb, var(--color-primary, #10b981) 60%, transparent);
}

/* ── A borda à vista: o que ficou de fora ────────────────────────────────── */
.trial-borda {
    max-width: 1120px; margin: 22px auto 0; padding: 15px 18px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-text-muted, #9ca3af) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--color-text-muted, #9ca3af) 26%, transparent);
    text-align: center;
}
.trial-borda-tit {
    display: block; font-size: .86rem; font-weight: 700;
    color: var(--color-text, #fff); margin-bottom: 6px;
}
.trial-borda-txt {
    margin: 0; font-size: .82rem; line-height: 1.6;
    color: var(--color-text-muted, #cbd5e1);
}
.trial-borda-txt strong { color: var(--color-text, #fff); font-weight: 600; }

@media (max-width: 640px) {
    .trial-borda { padding: 14px; }
    .trial-borda-txt { font-size: .79rem; }
}