/* =========================================================================
   Teste da Avie (avie.me/teste/<token>), direcao B "Conversa em papel".
   Spec: docs/frontend/teste-avie-direcoes.md · mockup: docs/frontend/mockups/
   teste-avie-direcoes.html. Tokens = os da home publica (home_d.css, bloco
   .hd) + os novos comentados. Fraunces so em titulo, nunca em numero (.tn).
   Fonte minima 11px. Pagina publica de tema unico claro, como o site.
   Faixas: < 560 tela cheia | 560 a 1023 topo + conversa + dicas | >= 1024
   ficha | conversa | dicas.
   ========================================================================= */
@font-face { font-family: "Avie Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url("/static/fonts/avie/fraunces-latin.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Avie Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url("/static/fonts/avie/fraunces-latin-ext.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Avie Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/static/fonts/avie/instrument-sans-latin.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Avie Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/static/fonts/avie/instrument-sans-latin-ext.woff2?v=20260613-type") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Avie Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap;
    src: url("/static/fonts/avie/instrument-sans-italic-latin.woff2?v=20260613-type") format("woff2"); }

:root {
    color-scheme: light;
    /* marca */
    --wine: #6D3746; --bordo: #351A24; --nude: #F5ECE4; --rose: #C9A7A0; --gold: #B9985A;
    /* derivados que ja existem em home_d.css */
    --paper: #FFFCF9; --cream: #FBF6F1; --rose-soft: #F2E4E0; --gold-ink: #82662E; --gold-light: #E9D6A8;
    --white: #FFFFFF; --ink: #351A24; --text: #5A4048; --muted: #75555C;
    --line: rgba(53,26,36,.12); --line-2: rgba(53,26,36,.22);
    --on-dark: #F5ECE4; --on-dark-2: rgba(245,236,228,.76);
    /* novos desta tela */
    --ok: #2F7A55;                       /* novo: ponto "online" da Clara */
    --scrim: rgba(26,14,19,.48);         /* novo: fundo atras do pop-up */
    --err: #9B2C2C;                      /* novo: linha de erro abaixo da caixa (AA sobre papel) */
    /* forma */
    --r-s: 8px; --r-m: 14px; --r-l: 22px; --pill: 999px;
    --sh-1: 0 1px 2px rgba(53,26,36,.05), 0 10px 28px -16px rgba(53,26,36,.22);
    --sh-2: 0 30px 70px -34px rgba(53,26,36,.5);
    --sans: "Avie Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: "Avie Fraunces", Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.tav { margin: 0; background: var(--nude); color: var(--ink); font: 400 15px/1.45 var(--sans);
    -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.tav :where(p, h1, h2, h3, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.tav :where(ul, ol) { list-style: none; }
.tav button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.tav a { color: inherit; text-decoration: none; }
.tav :focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.tav [hidden] { display: none !important; }
.tav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.glyph { fill: currentColor; stroke: none; }
.rib { width: 26px; height: 12px; flex: none; fill: currentColor; }
.tn { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- pecas comuns ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
    border-radius: var(--pill); font: 600 15px/1.2 var(--sans); white-space: nowrap; border: 1px solid transparent; text-align: center; }
.btn .i { width: 18px; height: 18px; }
.btn.full { width: 100%; }
/* `.tav button` zera a borda de todo botao; o fantasma precisa do contorno. */
.tav .btn.gh { border: 1px solid var(--line-2); }
.btn.pri { background: var(--wine); color: var(--nude); }
.btn.gh { background: transparent; border-color: var(--line-2); color: var(--wine); }
.btn.is-wait { cursor: progress; opacity: .9; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--wine); }
.brand .rib { width: 34px; height: 16px; }
.brand b { font: 600 23px/1 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); letter-spacing: -.01em; }
.mono { display: grid; place-items: center; border-radius: 50%; flex: none; font: 600 15px/1 var(--serif);
    font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: .02em; }
.eb { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); }
.eb .rib { width: 22px; height: 10px; color: var(--wine); }
.fi { display: grid; gap: 10px; }
.fi > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.fi dt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.fi dt .i { width: 16px; height: 16px; color: var(--wine); }
.fi dd { font-size: 14px; line-height: 1.4; color: var(--ink); font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.inv { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--pill); border: 1px solid var(--line);
    font-size: 11px; font-weight: 500; color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.doc { display: flex; gap: 12px; align-items: center; min-width: 0; }
.doc > div { display: grid; gap: 2px; min-width: 0; }
.doc small { font-size: 12px; color: var(--muted); }
.doc b { font: 600 18px/1.2 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); }
.doc span[data-f] { font-size: 13px; font-weight: 600; color: var(--wine); }
.note { font-size: 12.5px; line-height: 1.45; color: var(--text); font-style: italic; }
.foot { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 14px; box-shadow: var(--sh-1); }
.card .mono { width: 46px; height: 46px; background: var(--wine); color: var(--nude); font-size: 17px; }
.card hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.skel { display: block; height: 10px; margin: 5px 0 7px; border-radius: 5px; width: var(--w, 140px); max-width: 100%;
    background: linear-gradient(90deg, rgba(53,26,36,.07) 0%, rgba(53,26,36,.15) 50%, rgba(53,26,36,.07) 100%);
    background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.prog { position: relative; height: 2px; background: var(--line); }
.prog::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); min-width: 6px; background: var(--gold); transition: width .4s ease; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--pill);
    border: 1px solid var(--line); background: var(--white); font: 500 12.5px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.pill .i { width: 14px; height: 14px; color: var(--wine); }
.pill.warn { background: var(--wine); border-color: var(--wine); color: var(--nude); }
.pill.warn .i { color: var(--gold-light); }

/* ---------- pagina ---------- */
.pg { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.b-top { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: var(--paper);
    border-bottom: 1px solid var(--line); flex: none; }
.b-tag { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink);
    padding-left: 14px; border-left: 1px solid var(--line-2); height: 20px; display: flex; align-items: center; }
.b-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.b-top .prog { position: absolute; left: 0; right: 0; bottom: -1px; }
.b-strip { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--cream); border-bottom: 1px solid var(--line);
    font-size: 13px; color: var(--text); flex: none; white-space: nowrap; overflow: hidden; }
.b-strip b { font: 600 15px/1 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); }
.b-strip .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rose); flex: none; }
.b-strip-ficha { margin-left: auto; font-weight: 600; color: var(--wine) !important; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.b-strip-ficha .i { width: 15px; height: 15px; }
.b-main { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: 288px minmax(0, 1fr) 276px;
    gap: 24px; padding: 22px 28px; max-width: 1400px; width: 100%; margin: 0 auto; }
.b-chat { min-height: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-1);
    background: var(--cream); position: relative; display: flex; flex-direction: column; }
.b-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; }
.b-col .card { box-shadow: none; }
.b-col .card .doc b { font-size: 17px; }
.tipcard { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.tipcard .eb { color: var(--muted); }
.tips { display: grid; gap: 11px; }
.tips li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.tips b { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.tips li > div > span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.tips .ck { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.tips .ck .i { width: 13px; height: 13px; stroke-width: 2.2; }
.tips li.done .ck { background: var(--wine); border-color: var(--wine); color: var(--nude); }
.tips li.now .ck { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,152,90,.2); }
.b-cta { background: var(--bordo); color: var(--on-dark); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.b-cta p { font: 600 18px/1.22 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--nude); }
.b-cta .btn { background: var(--nude); color: var(--bordo); }

/* ---------- conversa ---------- */
.app { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--cream); }
.app > * { flex: none; }
.ch { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; background: var(--paper); }
.ava { position: relative; width: 44px; height: 44px; background: var(--rose-soft); color: var(--wine); font-size: 16px; }
.ava::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--paper); }
.is-ended .ava::after { background: var(--rose); }
.who { display: grid; gap: 1px; min-width: 0; }
.who b { font: 600 20px/1.15 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); }
.who .clin { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.is-typing { color: var(--wine); font-style: italic; }
.b-badge { align-self: flex-start; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--sans);
    letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); padding-top: 4px; }
.b-badge .rib { width: 20px; height: 9px; color: var(--wine); }
.b-meta { display: flex; align-items: center; gap: 6px; padding: 0 18px 12px; background: var(--paper); }
.b-meta-pills { display: flex; gap: 6px; min-width: 0; flex-wrap: wrap; }
.chip-f { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 4px 0 10px;
    font: 600 12.5px/1 var(--sans); color: var(--wine) !important; }
.chip-f .i { width: 15px; height: 15px; }
.wall { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
    padding: 6px 18px 18px; scrollbar-width: thin; }
.wall > * { flex: none; }
.day { display: flex; align-items: center; gap: 10px; align-self: stretch; margin: 14px 0 4px; font: 600 11px/1 var(--sans);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.m { position: relative; max-width: 84%; overflow-wrap: anywhere; margin-top: 12px; padding: 9px 13px 10px; font-size: 15px; line-height: 1.45; border-radius: 18px; }
.m.in { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--ink); }
.m.out { align-self: flex-end; background: var(--wine); color: var(--nude); border-bottom-right-radius: 6px; }
.m.in + .m.in { margin-top: 4px; border-top-left-radius: 6px; }
.m.out + .m.out { margin-top: 4px; border-top-right-radius: 6px; }
.m.in strong { color: var(--bordo); font-weight: 600; }
.m.out strong { font-weight: 600; }
.m .meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 7px -2px -4px 12px; font-size: 11px; line-height: 1;
    white-space: nowrap; font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.m.out .meta { color: rgba(245,236,228,.72); }
.m .tk { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m.out .tk { color: var(--gold-light); }
.m.pending { opacity: .72; }
.m.pending .tk { opacity: .5; }
.nar { display: grid; justify-items: center; gap: 7px; width: min(330px, 92%); margin: 20px auto 10px; text-align: center; align-self: center; }
.nar-k { display: flex; align-items: center; gap: 10px; width: 100%; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.nar-k::before, .nar-k::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(185,152,90,0), var(--gold)); }
.nar-k::after { background: linear-gradient(90deg, var(--gold), rgba(185,152,90,0)); }
.nar-k .rib { width: 22px; height: 10px; color: var(--gold); }
.nar-k span { white-space: nowrap; }
.nar p { font: italic 400 15.5px/1.45 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); text-wrap: balance; }
/* Balao com numero (dia e hora da consulta): Fraunces nunca em numero. */
.nar p.nar-num { font: italic 400 14.5px/1.45 var(--sans); }
.typing { align-self: flex-start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px;
    max-width: 100%; margin-top: 12px; padding: 12px 14px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; }
.dots { display: inline-flex; gap: 4px; align-items: center; color: var(--wine); }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: tp 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .16s; } .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes tp { 0%, 60%, 100% { transform: none; opacity: .3; } 30% { transform: translateY(-3px); opacity: .95; } }
.stage { color: var(--wine); font-weight: 600; font-size: 13px; line-height: 1.3; }
.steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font: 500 11.5px/1 var(--sans); color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 5px; }
.steps li + li::before { content: ""; width: 8px; height: 1px; background: var(--line-2); margin-right: 1px; }
.steps i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-2); }
.steps .done { color: var(--text); }
.steps .done i { background: var(--wine); border-color: var(--wine); }
.steps .now { color: var(--wine); font-weight: 600; }
.steps .now i { border-color: var(--gold); background: var(--gold); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(185,152,90,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(0,0,0,0); } }
.stage-h { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* caixa de mensagem */
.foot-slot { background: var(--paper); }
.comp { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 6px; border-top: 1px solid var(--line); }
.fld { flex: 1; min-width: 0; min-height: 46px; max-height: 140px; border-radius: 23px; border: 1px solid var(--line-2); background: var(--white);
    padding: 12px 16px; color: var(--ink); font: 400 16px/1.35 var(--sans); resize: none; overflow-y: auto; }
.fld::placeholder { color: var(--muted); }
.send { width: 46px; height: 46px; border-radius: 50%; background: var(--wine) !important; color: var(--nude) !important; display: grid !important; place-items: center; flex: none; }
.send .i { width: 20px; height: 20px; }
.send[aria-disabled="true"] { opacity: .55; }
.comp-err { padding: 0 18px 4px; font-size: 12.5px; color: var(--err); }
.foot-slot > .foot { padding: 2px 14px 10px; text-align: center; font-size: 11px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }

/* travado */
.dock { padding: 12px 14px 8px; border-top: 1px solid var(--line); display: grid; gap: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.conv { background: var(--bordo); color: var(--on-dark); border-radius: 18px; padding: 16px 16px 14px; display: grid; gap: 10px; position: relative; overflow: hidden; }
.conv .eb { color: var(--gold-light); }
.conv .eb .i { width: 14px; height: 14px; }
.conv h3 { font: 600 21px/1.18 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--nude); text-wrap: balance; max-width: 24ch; }
.conv .btn { background: var(--nude); color: var(--bordo); }
.conv .sum { display: grid; gap: 5px; }
.conv .sum li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--on-dark-2); }
.conv .sum .i { width: 15px; height: 15px; color: var(--gold-light); stroke-width: 2; }
.dock .re { background: var(--white); }
.dock .why { text-align: center; font-size: 11.5px; color: var(--muted); }

/* fim */
.is-ended .wall { opacity: .5; filter: saturate(.5); }
.endp { background: var(--paper); border-radius: var(--r-l) var(--r-l) 0 0; padding: 22px 20px 16px; display: grid; gap: 12px;
    box-shadow: 0 -24px 50px -28px rgba(26,14,19,.55); border-top: 1px solid var(--line); max-height: 78vh; overflow: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.endp h2 { font: 600 30px/1.05 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); letter-spacing: -.015em; }
.endp .why { font-size: 14.5px; color: var(--text); }
.recap { display: grid; gap: 7px; padding: 12px 14px; border-radius: var(--r-m); background: var(--cream); border: 1px solid var(--line); }
.recap p { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.recap li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink); }
.recap .i { width: 15px; height: 15px; color: var(--wine); stroke-width: 2; }
.endp .q { font-size: 15px; font-weight: 600; color: var(--ink); }
.endp .end-n { font-size: 12.5px; color: var(--muted); text-align: center; }
.endp .reread { justify-self: center; font-size: 13px; font-weight: 600; color: var(--wine); border-bottom: 1px solid var(--line-2) !important; min-height: 32px; }
.endbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text);
    padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.endbar .btn { margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 13.5px; }

/* abertura e preparando */
.wel { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; background: var(--nude); }
.wel-top { display: flex; align-items: center; justify-content: space-between; }
.wel-top .brand .rib { width: 28px; height: 13px; }
.wel-top .brand b { font-size: 20px; }
.wel h1 { font: 600 38px/1.02 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--bordo); margin-top: 8px; }
.wel .lead { font-size: 16.5px; line-height: 1.45; color: var(--text); max-width: 30ch; }
.wel .clara { display: flex; gap: 10px; align-items: center; font-size: 13px; line-height: 1.4; color: var(--text); }
.wel .clara .mono { width: 30px; height: 30px; font-size: 12px; background: var(--rose-soft); color: var(--wine); }
.wel .btn.pri { min-height: 52px; font-size: 16px; }
.wel .w-meta { font-size: 12.5px; color: var(--muted); text-align: center; }
.wel .foot { text-align: center; }
.ideas { display: grid; gap: 10px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.ideas > p { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ideas-l { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ideas-l button { padding: 8px 13px; min-height: 40px; border-radius: 18px 18px 6px 18px; background: var(--rose-soft); color: var(--wine); font-size: 13.5px; font-weight: 500; }
.wel-eb { display: none !important; }

/* pop-ups (dialog nativo: foco preso e Esc fecham por padrao) */
.dlg { width: min(400px, calc(100vw - 32px)); border: 0; background: var(--paper); border-radius: var(--r-l); padding: 24px 22px 18px; box-shadow: var(--sh-2); color: var(--ink); }
.dlg[open] { display: grid; gap: 10px; }
.dlg::backdrop { background: var(--scrim); }
.dlg .eb .i { width: 15px; height: 15px; color: var(--wine); }
.dlg-t { font: 600 22px/1.22 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--bordo); text-wrap: balance; }
.dlg-q { font-size: 15px; color: var(--text); }
.dlg-n { font-size: 12.5px; color: var(--muted); }
.dlg-err { font-size: 12.5px; color: var(--err); }
.dlg-b { display: grid; gap: 8px; margin-top: 8px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-head .x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); margin: -10px -10px 0 0; }
.dlg-ficha .fi { margin-top: 6px; }
.nojs { padding: 24px; text-align: center; }

/* ---------- formulario do avie.me (/teste) ---------- */
body.tav-form-page { min-height: 100%; height: auto; }
.tf { max-width: 560px; margin: 0 auto; padding: 18px 16px 32px; display: grid; gap: 18px; }
.tf-top { display: flex; align-items: center; justify-content: space-between; }
.tf-top .brand .rib { width: 28px; height: 13px; }
.tf-top .brand b { font-size: 20px; }
.tf-hero { display: grid; gap: 10px; }
.tf-hero h1 { font: 600 34px/1.06 var(--serif); font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.02em; color: var(--bordo); text-wrap: balance; }
.tf-hero .lead { font-size: 16.5px; line-height: 1.45; color: var(--text); }
.tf-form { gap: 10px; }
.tf-l { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.tf-l span { font-weight: 400; color: var(--muted); }
.tf-in { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--white); padding: 11px 14px;
    color: var(--ink); font: 400 16px/1.35 var(--sans); }
textarea.tf-in { resize: vertical; min-height: 70px; }
.tf-in::placeholder { color: var(--muted); }
.tf-in[aria-invalid="true"] { border-color: var(--err); }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-row > div { display: grid; gap: 6px; min-width: 0; }
.tf-pre { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); padding-left: 12px; }
.tf-pre span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tf-pre .tf-in { border: 0; min-width: 0; padding-left: 8px; }
.tf-pos { padding: 0 12px 0 0; }
.tf-pos .tf-in { padding-left: 14px; }
.tf-pub { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.tf-pub legend { padding: 0; margin-bottom: 8px; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-chip { position: relative; display: inline-flex; }
.tf-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tf-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--pill);
    border: 1px solid var(--line-2); background: var(--white); font: 500 14px/1.2 var(--sans); color: var(--ink); cursor: pointer; }
.tf-chip input:checked + span { background: var(--wine); border-color: var(--wine); color: var(--nude); }
.tf-chip input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 2px; }
.tf-err { padding: 10px 12px; border-radius: 10px; background: #FBEDEA; color: var(--err); font-size: 14px; }
.tf-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tf-go { min-height: 52px; font-size: 16px; margin-top: 6px; }
.tf-off { gap: 12px; }
.tf-foot { text-align: center; }
@media (max-width: 420px) { .tf-row { grid-template-columns: 1fr; } .tf-hero h1 { font-size: 30px; } }

/* ---------- faixas ---------- */
@media (min-width: 560px) {
    .ch .b-badge, .b-meta, .prog-in { display: none !important; }
    .wel { background: var(--cream); justify-content: center; align-items: center; text-align: center; padding: 32px; }
    .wel > * { max-width: 380px; width: 100%; }
    .wel .lead { margin-inline: auto; }
    .wel h1 { font-size: 44px; }
    .wel .clara { justify-content: center; }
    .wel-go { width: 260px !important; margin-inline: auto; }
    .wel-top, .wel-card, .wel-note, .wel-foot { display: none !important; }
    .wel-eb { display: flex !important; justify-content: center; }
    .ideas { max-width: 420px; }
}
@media (max-width: 559.98px) {
    .b-top, .b-strip, .b-col { display: none !important; }
    .b-main { display: flex; padding: 0; gap: 0; }
    .b-chat { flex: 1; border: 0; border-radius: 0; box-shadow: none; }
    .ideas { display: none; }
    .wel h1 { font-size: 34px; }
    .dlg-ficha[open] { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r-l) var(--r-l) 0 0;
        padding-bottom: max(18px, env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; }
}
@media (min-width: 560px) and (max-width: 1023.98px) {
    .b-top { padding: 12px 24px; }
    .b-left { display: none !important; }
    .b-main { grid-template-columns: minmax(0, 1fr) 244px; padding: 20px 24px; gap: 20px; }
    .tips li > div > span { display: none; }
}
@media (min-width: 1024px) {
    .b-strip { display: none !important; }
    /* O aviso de dados ficticios ja esta na ficha e embaixo da caixa. */
    .b-right-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}