/* =============================================================================
   Tenet Tecnologia · tenet.ia.br · css/pecas.css
   As peças visuais da /otto, na ordem do que vende (correção do dono, 27/09):

     1 .peca-fila      responde na hora: a fila viva às 23:04, "respondeu na
                       hora", e o aviso do Otto por cima (.fila-aviso)
     2 .peca-conversa  inteligente de verdade: foto, preço e estoque, em três
                       negócios (moda, colchões, estética) — a estrela
     3 .peca-persona   a marca sempre igual: três vendedores contra o Otto
     4 .peca-tecnica   técnica de venda: acolhe → entende → sugere → combina → fecha
     5 .peca-quadro    a venda chega pronta: oi → negociação → comprou
     6 .peca-bento     o que vem junto: sete quadradinhos iOS 26, sem azul
     7 .peca-cuidado   cuidado com o dado: seis ícones

   Desde o plano v3, a PT usa as peças do bloco "v3", no fim da camada
   (fila do herói, cinco ramos, persona com régua, ticket e funil, bento
   com verbos, dado em cristal); a EN segue nas de cima até o dono aprovar
   a PT. A tela bloqueada das 23:04 (.peca-dor) saiu: nenhuma página a usava.

   Carregar depois de /css/base.css; tudo mora em @layer pecas.

   Regras:
   - Só CSS. A CSP é script-src 'none' e style-src 'self': nada de style="".
     O que muda de peça para peça vai em data-* e em classe.
   - As telas do app repetem o painel (painel/src/estilo): lista agrupada,
     bolhas, cartão do quadro, dock de vidro. A fonte da tela é a do sistema,
     como no app; 1em na .tela equivale a uns 15 pt de iPhone.
   - Dados fictícios, de vários negócios. Nenhum nome ou número real.
   - Sem azul: nem os selos de canal (monocromáticos), nem o "interativo" do
     painel, nem o estágio "novo". Confere com scripts/site-tenet/conferir-azul.py.
   - Movimento: o estado final é o padrão. As animações só existem com
     prefers-reduced-motion: no-preference. As de rolagem usam
     animation-timeline: view() dentro de @supports; sem suporte, a peça fica
     parada no fim. Elas são só de entrada: começam em "entry 0%" (a borda
     de cima da peça tocando a de baixo da tela) e não têm fill para trás.
     Fora da tela, acima ou abaixo, a peça já está no estado final: a
     captura de página inteira, a prévia de link e quem rola rápido veem
     tudo. A única animação contínua da EN (a fila viva) tem "Pausar".
   ========================================================================== */

/* O número de segundos da fila viva: inteiro, para o counter() mostrar
   1, 2, 3, 4 e não 1,37. Fora da camada, como os @property da home. */
@property --seg { syntax: "<integer>"; inherits: false; initial-value: 0; }

@layer pecas {

/* ================================================================ tokens */
/* A paleta do painel (tokens.css e tema-escuro.css), trocada em light-dark().
   Tudo que é tela do app pinta com --a-*. O "interativo" azul do painel vira
   grafite; o estágio "novo", grafite; o rótulo do autor, ametista. */
:where(.peca) {
  --a-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, var(--sans);
  --a-fundo:        light-dark(#f1f1f4, #111114);
  --a-papel:        light-dark(#ffffff, #1b1b21);
  --a-papel-2:      light-dark(#f4ece0, #25211c);
  --a-papel-3:      light-dark(#ece4d8, #2f2a24);
  --a-elevado:      light-dark(#ffffff, #2c2c33);
  --a-borda:        light-dark(#e2e2e7, #3d3d46);
  --a-borda-forte:  light-dark(#80808a, #797982);
  --a-aro:          light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .07));
  --a-tinta:        light-dark(#1b1b21, #f1f1f4);
  --a-tinta-2:      light-dark(#3a3a44, #cdcdd4);
  --a-tinta-3:      light-dark(#4e4e58, #adadb6);
  --a-selecao:      light-dark(rgb(27 27 33 / .07), rgb(241 241 244 / .10));
  --a-bolha-deles:  light-dark(#ffffff, #28282d);
  --a-bolha-borda:  light-dark(#e9e4dc, #37373d);
  --a-bolha-nossa:  light-dark(#e0e0e8, #34333b);
  --a-bolha-nossa-borda: light-dark(#cacad2, #46454d);
  --a-midia:        light-dark(#efe9df, #29241f);
  --a-otto:         light-dark(#6d3bcd, #b298f9);
  --a-otto-veu:     light-dark(rgb(109 59 205 / .10), rgb(178 152 249 / .16));
  --a-otto-selo:    light-dark(#6d3bcd, #c4b0fb);   /* texto sobre o véu: 5,4:1 no escuro */
  --a-ok-tinta:    light-dark(#155f38, #6cd79a);
  --a-ok-fundo:     light-dark(#e6f3ec, #12301f);
  --a-ok-borda:     light-dark(#b5dbc6, #1f5738);
  --a-ok-traco:     light-dark(#1f8a4c, #3fbf73);
  --a-atencao-tinta: light-dark(#7c4305, #f0b055);
  --a-atencao-traco: light-dark(#b36d0c, #e89c2c);
  --a-urgente-tinta: light-dark(#9b1a11, #ff8a80);
  --a-urgente-traco: light-dark(#bf281e, #f0564b);
  --a-negociacao:   light-dark(#b42a68, #e36b9e);
  --a-marca:        light-dark(#1b1b21, #f1f1f4);
  --a-sombra-1:     0 1px 2px light-dark(rgb(27 27 33 / .06), rgb(0 0 0 / .4)), 0 2px 8px -4px light-dark(rgb(27 27 33 / .10), rgb(0 0 0 / .5));
  --a-vidro:        light-dark(rgb(252 250 246 / .72), rgb(38 34 30 / .72));
  --a-vidro-forte:  light-dark(rgb(252 250 246 / .88), rgb(38 34 30 / .88));
  /* avatares: as cores do painel sem as duas azuis */
  --av-coral:  light-dark(#fbe3d9, #3b2419);  --av-coral-t:  light-dark(#a33b12, #e49776);
  --av-musgo:  light-dark(#e3eddc, #1f2c19);  --av-musgo-t:  light-dark(#3f5a1f, #9fc07a);
  --av-ambar:  light-dark(#f8e9cf, #34270f);  --av-ambar-t:  light-dark(#8a4b06, #e0aa5a);
  --av-vinho:  light-dark(#f6dfe8, #3a1a27);  --av-vinho-t:  light-dark(#962556, #e693b8);
  --av-lilas:  light-dark(#ece4fa, #2a2140);  --av-lilas-t:  light-dark(#5f33b3, #bba4e8);
  --a-ambiente:
    radial-gradient(60% 40% at 92% -6%, light-dark(rgb(145 103 234 / .20), rgb(119 60 214 / .26)), transparent 70%),
    radial-gradient(55% 45% at -10% 46%, light-dark(rgb(211 185 151 / .38), rgb(158 128 94 / .14)), transparent 70%);
}
@supports not (color: light-dark(#000, #fff)) {
  :where(.peca) {
    --a-fundo: #f1f1f4; --a-papel: #ffffff; --a-papel-2: #f4ece0; --a-papel-3: #ece4d8; --a-elevado: #ffffff;
    --a-borda: #e2e2e7; --a-borda-forte: #80808a; --a-aro: rgb(0 0 0 / .06);
    --a-tinta: #1b1b21; --a-tinta-2: #3a3a44; --a-tinta-3: #4e4e58; --a-selecao: rgb(27 27 33 / .07);
    --a-bolha-deles: #ffffff; --a-bolha-borda: #e9e4dc; --a-bolha-nossa: #e0e0e8; --a-bolha-nossa-borda: #cacad2;
    --a-midia: #efe9df; --a-otto: #6d3bcd; --a-otto-veu: rgb(109 59 205 / .10); --a-otto-selo: #6d3bcd;
    --a-ok-tinta: #155f38; --a-ok-fundo: #e6f3ec; --a-ok-borda: #b5dbc6; --a-ok-traco: #1f8a4c;
    --a-atencao-tinta: #7c4305; --a-atencao-traco: #b36d0c; --a-urgente-tinta: #9b1a11; --a-urgente-traco: #bf281e;
    --a-negociacao: #b42a68; --a-marca: #1b1b21;
    --a-sombra-1: 0 1px 2px rgb(27 27 33 / .06), 0 2px 8px -4px rgb(27 27 33 / .10);
    --a-vidro: rgb(252 250 246 / .72); --a-vidro-forte: rgb(252 250 246 / .88);
    --av-coral: #fbe3d9; --av-coral-t: #a33b12; --av-musgo: #e3eddc; --av-musgo-t: #3f5a1f;
    --av-ambar: #f8e9cf; --av-ambar-t: #8a4b06; --av-vinho: #f6dfe8; --av-vinho-t: #962556;
    --av-lilas: #ece4fa; --av-lilas-t: #5f33b3;
    --a-ambiente:
      radial-gradient(60% 40% at 92% -6%, rgb(145 103 234 / .20), transparent 70%),
      radial-gradient(55% 45% at -10% 46%, rgb(211 185 151 / .38), transparent 70%);
  }
  @media (prefers-color-scheme: dark) {
    :where(.peca) {
      --a-fundo: #111114; --a-papel: #1b1b21; --a-papel-2: #25211c; --a-papel-3: #2f2a24; --a-elevado: #2c2c33;
      --a-borda: #3d3d46; --a-borda-forte: #797982; --a-aro: rgb(255 255 255 / .07);
      --a-tinta: #f1f1f4; --a-tinta-2: #cdcdd4; --a-tinta-3: #adadb6; --a-selecao: rgb(241 241 244 / .10);
      --a-bolha-deles: #28282d; --a-bolha-borda: #37373d; --a-bolha-nossa: #34333b; --a-bolha-nossa-borda: #46454d;
      --a-midia: #29241f; --a-otto: #b298f9; --a-otto-veu: rgb(178 152 249 / .16); --a-otto-selo: #c4b0fb;
      --a-ok-tinta: #6cd79a; --a-ok-fundo: #12301f; --a-ok-borda: #1f5738; --a-ok-traco: #3fbf73;
      --a-atencao-tinta: #f0b055; --a-atencao-traco: #e89c2c; --a-urgente-tinta: #ff8a80; --a-urgente-traco: #f0564b;
      --a-negociacao: #e36b9e; --a-marca: #f1f1f4;
      --a-sombra-1: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px -4px rgb(0 0 0 / .5);
      --a-vidro: rgb(38 34 30 / .72); --a-vidro-forte: rgb(38 34 30 / .88);
      --av-coral: #3b2419; --av-coral-t: #e49776; --av-musgo: #1f2c19; --av-musgo-t: #9fc07a;
      --av-ambar: #34270f; --av-ambar-t: #e0aa5a; --av-vinho: #3a1a27; --av-vinho-t: #e693b8;
      --av-lilas: #2a2140; --av-lilas-t: #bba4e8;
      --a-ambiente:
        radial-gradient(60% 40% at 92% -6%, rgb(119 60 214 / .26), transparent 70%),
        radial-gradient(55% 45% at -10% 46%, rgb(158 128 94 / .14), transparent 70%);
    }
  }
}

/* uma sétima cor de quadradinho, só no bento: o vinho do estágio
   "negociação" do painel (matiz 330, longe do azul). Glifo branco a 7,4:1. */
.quadradinho[data-cor="vinho"] { --q-cor: #962556; }

/* ============================================================ comum */
/* os ícones das peças moram num <svg class="sprite"> no alto da página */
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.peca { position: relative; color: var(--tinta); }
.peca svg { flex: none; }

/* --- a tela do app dentro da .celular --- */
.app {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--a-ambiente), var(--a-fundo);
  color: var(--a-tinta);
  font-family: var(--a-fonte); font-size: 1em; line-height: 1.3;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.app-status {
  flex: none; height: 3.25em;
  display: flex; align-items: center; justify-content: space-between;
  padding: .35em 1.75em 0 2.15em;
  font-size: 1em; font-weight: 650; font-variant-numeric: tabular-nums;
}
.app-status-sinais { display: flex; align-items: center; gap: .35em; }
.app-status-sinais svg { height: .78em; width: auto; fill: currentColor; }

/* a barra de início do iPhone */
.app::after {
  content: ""; position: absolute; z-index: 6; left: 50%; bottom: .5em; translate: -50% 0;
  inline-size: 9.2em; block-size: .34em; border-radius: 99px;
  background: var(--a-tinta); opacity: .85;
}

.app-avatar {
  flex: none; display: grid; place-items: center;
  inline-size: 2.65em; aspect-ratio: 1; border-radius: 50%;
  background: var(--av-lilas); color: var(--av-lilas-t);
  font-weight: 650; font-size: 1em; line-height: 1;
}
.app-avatar[data-cor="coral"] { background: var(--av-coral); color: var(--av-coral-t); }
.app-avatar[data-cor="musgo"] { background: var(--av-musgo); color: var(--av-musgo-t); }
.app-avatar[data-cor="ambar"] { background: var(--av-ambar); color: var(--av-ambar-t); }
.app-avatar[data-cor="vinho"] { background: var(--av-vinho); color: var(--av-vinho-t); }

/* o selo "Com a IA": o roxo marca o Otto falando, nunca espera nem resultado */
.selo-ia {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .05em .5em .05em .35em; border-radius: 99px;
  background: var(--a-otto-veu); color: var(--a-otto);
  font-size: .8em; font-weight: 650; white-space: nowrap;
}
.selo-ia svg { inline-size: .95em; block-size: .95em; fill: currentColor; }

/* o ícone do Otto nas conversas: o mesmo do app (os dois T no anel, no
   quadradinho ametista), nunca o símbolo preto. img/otto-app.png, 96 px,
   tirado de painel/public/icone-512.png. */
.otto-app { display: block; flex: none; inline-size: 1.1em; block-size: 1.1em; border-radius: 24%; }
.selo-ia .otto-app { inline-size: 1.05em; block-size: 1.05em; }

/* o selo de canal: monocromático, glifo + nome em texto */
.canal { display: inline-flex; align-items: center; gap: .28em; white-space: nowrap; }
.canal svg { inline-size: 1.05em; block-size: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* o selo verde de resultado: "respondeu em 4 s" */
.selo-ok {
  display: inline-flex; align-items: center; gap: .28em;
  padding: .08em .55em .08em .4em; border-radius: 99px;
  background: var(--a-ok-fundo); color: var(--a-ok-tinta);
  box-shadow: inset 0 0 0 1px var(--a-ok-borda);
  font-size: .8em; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.selo-ok svg { inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* o dock de vidro do iOS 26 */
.app-dock {
  position: absolute; z-index: 5; left: 1em; right: 1em; bottom: 1.35em;
  display: flex; gap: .15em; padding: .28em;
  border-radius: 99px;
  background: var(--vidro-brilho), var(--a-vidro);
  -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur);
  box-shadow: var(--vidro-sombra), inset 0 1px 0 var(--vidro-luz), 0 0 0 .5px var(--a-aro);
}
.app-dock > span {
  flex: 1 1 0; min-width: 0;
  display: grid; place-items: center; gap: .1em; padding: .3em 0 .25em;
  border-radius: 99px;
  color: var(--a-tinta-2); font-size: .72em; font-weight: 600;
}
.app-dock > span[data-atual] { background: var(--a-selecao); color: var(--a-tinta); font-weight: 700; }
.app-dock svg { inline-size: 1.85em; block-size: 1.85em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-dock > span[data-atual] svg { fill: currentColor; }

/* --- botão Pausar (só onde há animação contínua) --- */
.peca-pausa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.peca-pausa input {
  appearance: none; margin: 0; width: 16px; height: 16px; border-radius: 4px; flex: none;
  border: 1px solid var(--borda-campo); display: grid; place-items: center; cursor: pointer;
}
.peca-pausa input::before { content: ""; width: 6px; height: 8px; border-inline: 2px solid var(--tinta-3); }
.peca-pausa input:checked::before { width: 0; height: 0; border: 0; border-left: 7px solid var(--tinta); border-block: 4.5px solid transparent; margin-left: 2px; }
.peca-pausa:hover { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .peca-pausa { display: none; } }

/* ================================================ 1 · a fila viva */
/* Três clientes chegam por três canais. O relógio de espera conta 1, 2, 3,
   4 s e vira "respondeu em 4 s". Em loop de 15 s por linha, com Pausar.
   Parado (sem movimento ou pausado no fim), mostra as três respondidas. */
.peca-fila { display: grid; justify-items: center; gap: 12px; }
.peca-fila .celular { --celular: 320px; }

.app-cabeca { flex: none; padding: .2em 1.1em .55em; display: grid; gap: .1em; }
.app-cabeca-linha { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.app-titulo { font-size: 2.2em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.app-sub { font-size: .87em; color: var(--a-tinta-3); font-weight: 500; }

/* o interruptor "Atendendo", ligado: o verde do iPhone que dá 3:1 */
.app-interruptor { display: inline-flex; align-items: center; gap: .4em; font-size: .87em; font-weight: 600; color: var(--a-tinta); }
.app-interruptor::after {
  content: ""; inline-size: 2.9em; block-size: 1.75em; border-radius: 99px;
  background: radial-gradient(circle at calc(100% - .875em) 50%, #fff .68em, transparent .72em), light-dark(#248a3d, #2f9e4f);
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06);
}

.app-segmentado {
  flex: none; margin: 0 1.1em .35em;
  display: flex; padding: .2em; border-radius: 99px;
  background: var(--a-selecao);
  font-size: .82em; font-weight: 600; color: var(--a-tinta-2);
}
.app-segmentado > span { flex: 1; text-align: center; padding: .38em 0; border-radius: 99px; white-space: nowrap; }
.app-segmentado > span[data-atual] { background: var(--a-elevado); color: var(--a-tinta); box-shadow: var(--a-sombra-1); }

.app-rotulo-grupo { margin: .6em 1.1em .35em; font-size: .87em; font-weight: 600; color: var(--a-tinta-2); }

.app-grupo {
  margin: 0 .95em; display: flex; flex-direction: column;
  border-radius: 1.05em; background: var(--a-papel);
  box-shadow: 0 0 0 1px var(--a-aro), var(--a-sombra-1);
}
.fila-linha {
  --atraso: 0s;
  position: relative;
  display: grid; grid-template-columns: 2.65em minmax(0, 1fr); gap: .8em; align-items: center;
  padding: .6em .85em .6em 1em; min-height: 4.8em;
}
/* atrasos negativos: a fila abre com a Mariana e a Júlia já respondidas, e a
   Luana (o tênis às 23:04, que o Otto fecha com o link de compra) chega no alto. Depois, uma nova conversa a cada 5 s, e nunca fica um
   bloco branco no grupo "Agora". */
.fila-linha:nth-child(2) { --atraso: -10s; }
.fila-linha:nth-child(3) { --atraso: -5s; }
.fila-linha + .fila-linha::before {
  content: ""; position: absolute; top: 0; left: 4.45em; right: 0; height: 1px; background: var(--a-borda);
}
.fila-texto { display: grid; gap: .08em; min-width: 0; }
.fila-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5em; }
.fila-nome { font-weight: 650; font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-tinta); }
.fila-estado { display: grid; justify-items: end; }
.fila-estado > * { grid-area: 1 / 1; }
.fila-relogio {
  counter-reset: seg var(--seg);
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .95em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--a-tinta);
  opacity: 0;
}
.fila-relogio::before { content: ""; inline-size: .42em; block-size: .42em; border-radius: 50%; background: var(--a-atencao-traco); }
.fila-relogio::after { content: counter(seg) " s"; }
.fila-previa { display: grid; font-size: .92em; color: var(--a-tinta-2); min-width: 0; }
.fila-previa > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-previa .fila-pergunta { opacity: 0; }
.fila-previa b { color: var(--a-otto); font-weight: 650; }
/* a miniatura da foto do produto que o Otto manda junto com a resposta */
.fila-miniatura { display: inline-block; inline-size: 1.35em; block-size: 1.35em; margin-left: .1em; vertical-align: -.35em; border-radius: .3em; box-shadow: 0 0 0 1px var(--a-borda); object-fit: cover; }
.fila-meta {
  display: flex; align-items: center; gap: .45em; min-width: 0; overflow: hidden;
  font-size: .8em; color: var(--a-tinta-3); font-weight: 500; white-space: nowrap;
}
.fila-meta .fila-loja { overflow: hidden; text-overflow: ellipsis; color: var(--a-tinta-2); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .fila-linha[data-seg] { animation: fila-chega 15s var(--atraso) infinite backwards; }
  .fila-linha[data-seg="4"] .fila-relogio  { animation: fila-conta-4 15s var(--atraso) infinite backwards steps(1, end), fila-antes-4 15s var(--atraso) infinite backwards linear; }
  .fila-linha[data-seg="3"] .fila-relogio  { animation: fila-conta-3 15s var(--atraso) infinite backwards steps(1, end), fila-antes-3 15s var(--atraso) infinite backwards linear; }
  .fila-linha[data-seg="2"] .fila-relogio  { animation: fila-conta-2 15s var(--atraso) infinite backwards steps(1, end), fila-antes-2 15s var(--atraso) infinite backwards linear; }
  .fila-linha[data-seg="4"] .fila-pergunta { animation: fila-antes-4 15s var(--atraso) infinite backwards; }
  .fila-linha[data-seg="3"] .fila-pergunta { animation: fila-antes-3 15s var(--atraso) infinite backwards; }
  .fila-linha[data-seg="2"] .fila-pergunta { animation: fila-antes-2 15s var(--atraso) infinite backwards; }
  .fila-linha[data-seg="4"] :is(.selo-ok, .fila-resposta) { animation: fila-depois-4 15s var(--atraso) infinite backwards; }
  .fila-linha[data-seg="3"] :is(.selo-ok, .fila-resposta) { animation: fila-depois-3 15s var(--atraso) infinite backwards; }
  .fila-linha[data-seg="2"] :is(.selo-ok, .fila-resposta) { animation: fila-depois-2 15s var(--atraso) infinite backwards; }
  .peca:has(.peca-pausa input:checked) :is(.fila-linha, .fila-linha *) { animation-play-state: paused; }
}
/* 1 s = 6,667% de 15 s. Chega em 3%, some de 93% a 97%. */
@keyframes fila-chega {
  0%       { opacity: 0; translate: 0 -.45em; }
  3%, 93%  { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes fila-conta-4 { 0% { --seg: 0; } 6.667% { --seg: 1; } 13.333% { --seg: 2; } 20% { --seg: 3; } 26.667%, 100% { --seg: 4; } }
@keyframes fila-conta-3 { 0% { --seg: 0; } 6.667% { --seg: 1; } 13.333% { --seg: 2; } 20%, 100% { --seg: 3; } }
@keyframes fila-conta-2 { 0% { --seg: 0; } 6.667% { --seg: 1; } 13.333%, 100% { --seg: 2; } }
@keyframes fila-antes-4 { 0%, 26.4% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes fila-antes-3 { 0%, 19.8% { opacity: 1; } 21.4%, 100% { opacity: 0; } }
@keyframes fila-antes-2 { 0%, 13.1% { opacity: 1; } 14.7%, 100% { opacity: 0; } }
@keyframes fila-depois-4 { 0%, 26.667% { opacity: 0; scale: .92; } 29%, 100% { opacity: 1; scale: 1; } }
@keyframes fila-depois-3 { 0%, 20% { opacity: 0; scale: .92; } 22.4%, 100% { opacity: 1; scale: 1; } }
@keyframes fila-depois-2 { 0%, 13.333% { opacity: 0; scale: .92; } 15.7%, 100% { opacity: 1; scale: 1; } }
.fila-resposta, .selo-ok { transform-origin: 100% 50%; }
.fila-previa .fila-resposta { transform-origin: 0 50%; }

/* o aviso do Otto por cima do telefone, às 23:04: a cena "fora do horário"
   dentro do herói. Vidro claro de notificação do iOS; parado, ele já está lá. */
.fila-aviso {
  position: absolute; z-index: 2; top: 52%;
  left: max(0px, calc(50% - 218px));
  inline-size: min(272px, 100% - 24px);
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 1px 10px; align-items: start;
  padding: 11px 13px 12px 11px; border-radius: 22px;
  /* quase opaco: a fila de trás não pode vazar pelo texto do aviso */
  background: var(--vidro-brilho), color-mix(in srgb, var(--a-elevado) 94%, transparent);
  -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur);
  box-shadow: inset 0 1px 0 var(--vidro-luz), 0 0 0 1px var(--a-aro), 0 24px 48px -16px light-dark(rgb(58 42 24 / .30), rgb(0 0 0 / .75)), var(--vidro-sombra);
  font-family: var(--a-fonte); font-size: 13.5px; line-height: 1.3; color: var(--a-tinta);
  text-align: left;
}
.aviso-icone { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.aviso-icone[data-app="otto"] .otto-app { inline-size: 100%; block-size: 100%; border-radius: inherit; }
.fila-aviso .aviso-icone { grid-row: span 2; inline-size: 38px; border-radius: 10px; }
.fila-aviso .aviso-topo { display: flex; align-items: baseline; gap: .5em; margin: 0; }
.fila-aviso .aviso-topo b { font-weight: 650; }
.fila-aviso .aviso-topo span { margin-left: auto; font-size: .85em; color: var(--a-tinta-3); font-variant-numeric: tabular-nums; }
.fila-aviso p { margin: 0; }
@media (max-width: 480px) {
  .fila-aviso { top: 55%; font-size: 12.5px; }
}
/* o aviso vem depois da resposta da Luana e acompanha o ciclo de 15 s
   da fila: desce aos 4,5 s, fica, e sai junto com as linhas. Parado (sem
   movimento ou pausado), ele já está lá. */
@media (prefers-reduced-motion: no-preference) {
  .fila-aviso { animation: aviso-desce 15s cubic-bezier(.2, .8, .2, 1) infinite backwards; }
  .peca:has(.peca-pausa input:checked) .fila-aviso { animation-play-state: paused; }
}
@keyframes aviso-desce {
  0%, 30%   { opacity: 0; translate: 0 -14px; scale: .96; }
  34.5%, 92% { opacity: 1; translate: 0 0; scale: 1; }
  96%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}

/* ======================================= 2 · a conversa que vende */
/* A estrela. Três telefones, três negócios: o Otto responde na hora com a
   foto, o preço e o que tem (catálogo ligado). A conversa se escreve ao
   rolar (view()): a pergunta, o "digitando", a resposta com a foto, os
   detalhes e o "respondeu em 4 s". No celular, os três viram carrossel. */
.peca-conversa { view-timeline: --conversa block; display: grid; gap: clamp(20px, 3vw, 36px); }
.conversa-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px); align-items: start; justify-items: center;
}
.conversa-cel { display: grid; justify-items: center; gap: 14px; margin: 0; inline-size: 100%; }
.conversa-cel .celular { --celular: 336px; }
.conversa-cel:nth-child(2) { margin-top: clamp(0px, 4vw, 56px); }
.conversa-cel figcaption {
  font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
@media (max-width: 860px) {
  .conversa-trio {
    display: flex; gap: 16px; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margem)); padding: 4px var(--margem) 12px;
    scroll-padding-inline: var(--margem);
  }
  .conversa-trio::-webkit-scrollbar { display: none; }
  /* é rolável pelo teclado (tabindex=0): o foco fica dentro da faixa, que
     vai até a borda da tela e cortaria o contorno de fora */
  .conversa-trio:focus-visible { outline-offset: -3px; border-radius: 18px; }
  .conversa-cel { flex: 0 0 min(80vw, 320px); scroll-snap-align: center; }
  .conversa-cel:nth-child(2) { margin-top: 0; }
}

/* a tela da conversa: cabeçalho de vidro, fio de linho, composer */
.app-conversa { background: var(--a-papel-2); }
.conversa-cabeca {
  flex: none; display: grid; grid-template-columns: auto 2.1em minmax(0, 1fr); align-items: center; gap: .55em;
  padding: .1em 1em .6em .7em;
  background: var(--vidro-brilho), var(--a-vidro-forte);
  box-shadow: 0 1px 0 var(--a-borda);
}
.conversa-cabeca > svg { inline-size: 1.25em; block-size: 1.25em; fill: none; stroke: var(--a-tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.conversa-cabeca .app-avatar { inline-size: 2.1em; font-size: .9em; }
.conversa-quem { display: grid; min-width: 0; line-height: 1.2; }
.conversa-quem b { font-size: 1em; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-quem span { font-size: .75em; color: var(--a-tinta-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5em; padding: .7em .8em 5em; overflow: hidden; }
.conversa-dia {
  align-self: center; padding: .2em .7em; border-radius: 99px;
  background: var(--vidro-brilho), var(--a-vidro);
  box-shadow: 0 0 0 .5px var(--a-borda);
  color: var(--a-tinta-3); font-size: .75em; font-weight: 600;
}

.msg { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; }
.msg-nossa { align-items: flex-end; }
.bolha {
  max-inline-size: 84%;
  padding: .5em .75em; border-radius: 1.05em;
  background: var(--a-bolha-deles); border: 1px solid var(--a-bolha-borda);
  box-shadow: var(--a-sombra-1);
  font-size: 1em; line-height: 1.35; color: var(--a-tinta);
  overflow-wrap: anywhere;
}
.msg-nossa .bolha { background: var(--a-bolha-nossa); border-color: var(--a-bolha-nossa-borda); }
.bolha-autor {
  display: flex; align-items: center; gap: .3em; margin-bottom: .3em;
  font-size: .68em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--a-otto);
}
.bolha-autor svg { inline-size: 1.1em; block-size: 1.1em; fill: currentColor; }
.bolha-autor .otto-app { inline-size: 1.45em; block-size: 1.45em; }
.bolha-foto {
  display: block; inline-size: 13.5em; max-inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5;
  margin-bottom: .45em; border-radius: .55em; object-fit: cover;
  background: var(--a-midia); box-shadow: inset 0 0 0 1px var(--a-aro);
}
.bolha-foto[data-forma="quadrada"] { aspect-ratio: 1; }
.bolha p { margin: 0; }
.bolha-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; margin-top: .4em; font-size: .85em; }
.bolha-linha b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--a-tinta); }
.bolha-ok { color: var(--a-ok-tinta); font-weight: 650; display: inline-flex; align-items: center; gap: .25em; }
.bolha-ok::before { content: ""; inline-size: .45em; block-size: .45em; border-radius: 50%; background: var(--a-ok-traco); }
.cores { display: inline-flex; gap: .25em; }
.cores > i { inline-size: .95em; block-size: .95em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.cores > i[data-cor="terracota"] { background: #b8583a; }
.cores > i[data-cor="oliva"] { background: #6f7443; }
.cores > i[data-cor="areia"] { background: #d9c3a3; }
.chip {
  display: inline-flex; align-items: center; padding: .15em .55em; border-radius: 99px;
  background: var(--a-papel); box-shadow: inset 0 0 0 1px var(--a-borda-forte);
  font-size: .95em; font-weight: 600; color: var(--a-tinta); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip[data-marcado] { background: var(--a-tinta); color: var(--a-papel); box-shadow: none; }
.servico {
  display: grid; grid-template-columns: 2.3em minmax(0, 1fr); gap: .15em .6em; align-items: center;
  margin-bottom: .45em; padding: .55em .6em; border-radius: .7em;
  background: var(--a-papel); box-shadow: inset 0 0 0 1px var(--a-borda);
}
.servico .quadradinho { --quadradinho: 2.3em; grid-row: span 2; }
.servico b { font-size: .92em; font-weight: 650; }
.servico span:not(.quadradinho) { font-size: .8em; color: var(--a-tinta-3); font-variant-numeric: tabular-nums; }
.msg-assinatura { display: flex; align-items: center; gap: .4em; font-size: .72em; color: var(--a-tinta-3); font-variant-numeric: tabular-nums; }
.msg-assinatura .selo-ok { font-size: 1em; }

/* a resposta e o "digitando" moram na mesma célula: nada pula */
.msg-resposta { display: grid; justify-items: end; }
.msg-resposta > * { grid-area: 1 / 1; }
.digitando { display: none; }
.digitando .bolha { display: inline-flex; gap: .28em; padding: .7em .8em; align-self: start; }
.digitando i { inline-size: .45em; block-size: .45em; border-radius: 50%; background: var(--a-tinta-3); }

.composer {
  position: absolute; z-index: 4; left: .8em; right: .8em; bottom: 1.6em;
  display: flex; align-items: center; gap: .5em;
}
.composer > span {
  flex: 1; padding: .6em .95em; border-radius: 99px;
  background: var(--vidro-brilho), var(--a-vidro-forte);
  box-shadow: var(--vidro-sombra), 0 0 0 .5px var(--a-aro);
  color: var(--a-tinta-3); font-size: .95em;
}
.composer > i {
  flex: none; display: grid; place-items: center; inline-size: 2.4em; aspect-ratio: 1; border-radius: 50%;
  background: var(--a-tinta); color: var(--a-papel);
}
.composer svg { inline-size: 1.2em; block-size: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* a faixa dos negócios: "para moda · colchões · ótica · …" */
.segmentos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 auto; max-inline-size: 60rem;
}
.segmentos li {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: 99px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linha-forte);
  font-size: var(--t-pequeno); font-weight: 500; color: var(--tinta-2); white-space: nowrap;
}
.segmentos li:first-child {
  background: transparent; box-shadow: none; padding-inline: 4px 2px;
  font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.segmentos li[data-exemplo] { background: var(--sup-2); color: var(--tinta); font-weight: 600; }
/* a promessa, logo acima dos negócios: cada cliente atendida como única */
.segmentos-apoio {
  justify-self: center; margin-bottom: calc(-1 * clamp(8px, 1.6vw, 20px));
  font-family: var(--serif); font-optical-sizing: auto; font-style: italic; font-weight: 380;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.25; letter-spacing: -.01em;
  color: var(--tinta-2); text-align: center; text-wrap: balance;
}

/* Só entrada: cada fala entra pela própria posição (view() dela), a partir
   da borda de baixo da tela, sem fill para trás. O "digitando" fica de fora:
   sem fill, ele cobriria a resposta. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .peca-conversa :is(.msg-pergunta, .msg-resposta > .msg:not(.digitando), .msg-depois, .msg-fecho) {
      animation: surge-baixo linear; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes surge-baixo { from { opacity: 0; translate: 0 .8em; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes revela { from { opacity: 0; clip-path: inset(0 0 100% 0 round .55em); } to { opacity: 1; clip-path: inset(0 0 0 0 round .55em); } }
@keyframes digitando { 0% { opacity: 0; scale: .9; } 20%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
@keyframes pulo { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -.25em; opacity: 1; } }
.msg-pergunta, .msg-depois, .msg-resposta > .msg { transform-origin: 0 100%; }
.msg-resposta > .msg-nossa, .msg-fecho { transform-origin: 100% 100%; }

/* ======================================== 3 · a marca, sempre igual */
/* A mesma pergunta, três vendedores de três jeitos (soltos, tortos, um
   que não respondeu) contra o Otto três vezes no tom da marca, alinhado. */
.peca-persona {
  display: grid; gap: clamp(20px, 3vw, 32px);
  font-family: var(--a-fonte); font-size: clamp(14px, .86rem + .2vw, 16px);
}
.persona-pergunta { display: flex; justify-content: center; }
.persona-pergunta .bolha { max-inline-size: 26em; font-size: 1.05em; }
.persona-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.persona-lado {
  position: relative; display: grid; align-content: start; gap: 1.1em;
  padding: 1.25em 1.25em 1.5em; border-radius: 20px;
  background: var(--a-papel-2); box-shadow: inset 0 0 0 1px var(--linha);
}
.persona-cabeca {
  display: flex; align-items: center; gap: .5em; min-height: 2em;
  font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.persona-cabeca .quadradinho { --quadradinho: 28px; }
.persona-fala { display: grid; gap: .25em; justify-items: start; }
.persona-quem { font-size: .78em; font-weight: 600; color: var(--a-tinta-3); padding-inline: .3em; }
.persona-fala .bolha { max-inline-size: 100%; }
/* escalonadas e retas (correção do dono, 27/09: nada inclinado) */
.persona-soltas .persona-fala:nth-of-type(1) { margin-left: 4%; }
.persona-soltas .persona-fala:nth-of-type(2) { margin-left: 18%; }
.persona-soltas .persona-fala:nth-of-type(3) { margin-left: 8%; }
.persona-soltas .persona-fala:nth-of-type(2) .bolha { font-weight: 600; letter-spacing: .01em; }
.persona-soltas .persona-fala[data-vazia] .bolha {
  background: transparent; border: 1px dashed var(--a-borda-forte); box-shadow: none;
  color: var(--a-tinta-3); font-style: italic;
}
.persona-otto .persona-fala { justify-items: end; }
.persona-otto .persona-quem { color: var(--a-otto); }
.persona-otto .bolha {
  inline-size: 100%; max-inline-size: 22em;
  background: var(--a-bolha-nossa); border-color: var(--a-bolha-nossa-borda);
  border-inline-end: 3px solid var(--a-otto);
}
.persona-tom { display: flex; flex-wrap: wrap; gap: .35em; justify-content: flex-end; }
.persona-tom .chip { font-size: .78em; }

@media (max-width: 720px) {
  .persona-lados { grid-template-columns: minmax(0, 1fr); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A primeira fala de cada lado já está lá quando o quadro entra: nenhuma
       caixa vazia com o título no meio da tela. As outras seguem a própria
       posição (view() de cada uma) e terminam de chegar ainda na metade de
       baixo da tela, em qualquer largura. */
    .peca-persona .persona-fala:not(:nth-child(1 of .persona-fala)) {
      animation: surge-baixo linear; animation-timeline: view(); animation-range: entry 0% cover 24%;
    }
    .persona-soltas .persona-fala:not(:nth-child(1 of .persona-fala)) { animation-name: cai-torto; }
  }
}
@keyframes cai-torto { from { opacity: 0; translate: 0 -1em; } }

/* ================================================= 4 · técnica de venda */
/* A conversa com o passo de cada fala na margem. Os marcadores acendem em
   ordem ao rolar, sem gritar: ponto e rótulo em mono. */
.peca-tecnica {
  font-family: var(--a-fonte); font-size: clamp(14px, .86rem + .2vw, 16px);
  max-inline-size: 40rem; margin-inline: auto;
  padding: 1.4em 1.2em 1.6em; border-radius: 24px;
  background: var(--a-papel-2); box-shadow: inset 0 0 0 1px var(--linha), 0 30px 60px -40px var(--sombra-cor);
}
.tecnica-cabeca {
  display: flex; align-items: center; gap: .6em; margin-bottom: 1.1em; padding-bottom: .9em;
  border-bottom: 1px solid var(--a-borda);
}
.tecnica-cabeca .app-avatar { inline-size: 2.2em; font-size: .9em; }
.tecnica-cabeca b { font-weight: 650; }
.tecnica-cabeca span:last-child { margin-left: auto; font-size: .8em; color: var(--a-tinta-3); }
.tecnica-lista { position: relative; display: grid; gap: .55em; }
/* o trilho: uma linha fina que liga os marcadores */
.tecnica-lista::before {
  content: ""; position: absolute; left: calc(5.2em + .5em + .5em - .5px); top: .8em; bottom: .8em; width: 1px;
  background: linear-gradient(var(--a-borda), var(--a-borda-forte) 50%, var(--a-borda));
}
.tec {
  position: relative;   /* pinta por cima do trilho */
  display: grid; grid-template-columns: 5.2em 1em minmax(0, 1fr); align-items: center; gap: 0 .5em;
}
.tec > .msg { grid-column: 3; }
.tec-passo {
  /* o texto é .72em: a coluna do ponto e o vão voltam a 1em e .5em de fora */
  grid-column: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) calc(1em / .72); align-items: center; gap: calc(.5em / .72);
  font-family: var(--mono); font-size: .72em; font-stretch: var(--mono-l); letter-spacing: .05em;
  text-transform: lowercase; text-align: right; color: var(--a-otto);
}
.tec-passo::after {
  content: ""; justify-self: center; inline-size: 1.05em; block-size: 1.05em; border-radius: 50%;
  background: var(--a-otto); box-shadow: 0 0 0 .3em var(--a-papel-2), 0 0 0 calc(.3em + 1px) var(--a-otto-veu);
}
.tec .bolha { max-inline-size: 100%; }
.tec .msg-nossa .bolha { max-inline-size: 92%; }
.tec-produto { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: .6em; align-items: center; }
.tec-produto img { inline-size: 3.4em; block-size: 3.4em; border-radius: .5em; object-fit: cover; background: var(--a-midia); }
.tec-produto b { display: block; font-weight: 650; }
.tec-fim { display: flex; justify-content: flex-end; margin-top: .6em; }
.tec-fim .selo-ok { font-size: .85em; }

@media (max-width: 480px) {
  .tec { grid-template-columns: 4.3em 1em minmax(0, 1fr); gap: 0 .35em; }
  .tec-passo { gap: calc(.35em / .72); }
  .tecnica-lista::before { left: calc(4.3em + .35em + .5em - .5px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A primeira fala (a da cliente) já está no quadro quando ele entra. As
       outras seguem a própria posição (view() de cada uma): chegam ao entrar
       na tela e terminam ainda na metade de baixo, e o marcador do passo
       acende logo depois. Rolando devagar, nenhuma caixa fica vazia. */
    .peca-tecnica :is(.tec:not(:first-child), .tec-passo, .tec-fim) { animation-timeline: view(); animation-fill-mode: none; animation-timing-function: linear; }
    .peca-tecnica .tec:not(:first-child), .peca-tecnica .tec-fim { animation-name: surge-baixo; animation-range: entry 0% cover 22%; }
    .peca-tecnica .tec-passo { animation-name: acende; animation-range: entry 0% cover 28%; }
  }
}
@keyframes acende { 0%, 45% { color: var(--a-tinta-3); filter: grayscale(1); opacity: .5; } 100% { color: var(--a-otto); filter: none; opacity: 1; } }

/* ============================================ 5 · a venda chega pronta */
/* O quadro do painel em três colunas: Oi, Negociação, Comprou. Um cartão viaja
   de ponta a ponta e chega com o selo "o Otto fechou"; outro espera na
   negociação, pronto para a vendedora só confirmar. */
.peca-quadro {
  --q-pad: 8px; --q-gap: 10px; --q-cabeca: 44px; --q-vaga: 7.2em;
  view-timeline: --quadro block;
  max-inline-size: 60rem; margin-inline: auto;
  position: relative; container-type: inline-size;
  font-family: var(--a-fonte); font-size: clamp(12px, .7rem + .25vw, 14.5px);
  padding: 14px; border-radius: 26px;
  background: var(--a-ambiente), var(--a-fundo);
  box-shadow: inset 0 0 0 1px var(--linha), 0 30px 60px -40px var(--sombra-cor);
}
.quadro-colunas { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--q-gap); align-items: start; }
.q-col {
  min-width: 0; grid-template-columns: minmax(0, 1fr);
  display: grid; align-content: start; gap: var(--q-pad); padding: 0 var(--q-pad) var(--q-pad);
  border-radius: 16px; background: var(--a-vidro);
  box-shadow: inset 0 0 0 1px var(--a-aro);
  min-height: 100%;
}
.q-cabeca {
  display: flex; align-items: center; gap: .5em; height: var(--q-cabeca); margin: 0;
  margin-inline: calc(-1 * var(--q-pad)); padding-inline: calc(var(--q-pad) + .35em);
  border-radius: 16px 16px 0 0;
  box-shadow: inset 0 3px 0 var(--etapa), 0 1px 0 var(--a-borda);
  font-weight: 650; color: var(--a-tinta);
}
.q-col[data-etapa="oi"] { --etapa: var(--a-tinta-3); }
.q-col[data-etapa="negociacao"] { --etapa: var(--a-negociacao); }
.q-col[data-etapa="pago"] { --etapa: var(--a-ok-traco); }
.q-cabeca::before { content: ""; inline-size: .6em; block-size: .6em; border-radius: 50%; background: var(--etapa); flex: none; }
.q-cabeca span { margin-left: auto; font-size: .85em; color: var(--a-tinta-2); font-variant-numeric: tabular-nums; }
.q-cartao {
  position: relative; display: grid; gap: .15em;
  padding: .7em .7em .65em .8em; border-radius: 12px;
  background: var(--a-elevado); box-shadow: 0 0 0 1px var(--a-aro), var(--a-sombra-1);
  min-width: 0;
}
.q-cartao b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-produto { font-size: .86em; color: var(--a-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-valor { font-size: .86em; font-weight: 650; font-variant-numeric: tabular-nums; }
.q-rodape { display: flex; align-items: center; gap: .4em; margin-top: .25em; font-size: .78em; color: var(--a-tinta-3); min-width: 0; }
.q-rodape .canal { overflow: hidden; }
.q-selo {
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis;
  justify-self: start; display: inline-flex; align-items: center; gap: .3em; margin-top: .35em;
  padding: .12em .55em .12em .4em; border-radius: 99px;
  font-size: .76em; font-weight: 650; white-space: nowrap;
}
.q-selo svg { inline-size: 1.05em; block-size: 1.05em; fill: currentColor; }
.q-selo .otto-app { inline-size: 1.2em; block-size: 1.2em; }
.q-selo[data-tipo="otto"] { background: var(--a-otto-veu); color: var(--a-otto-selo); }
.q-selo[data-tipo="pronta"] { background: var(--a-ok-fundo); color: var(--a-ok-tinta); box-shadow: inset 0 0 0 1px var(--a-ok-borda); }
.q-cartao[data-pronta] { box-shadow: 0 0 0 1.5px var(--a-ok-traco), var(--a-sombra-1); }
.q-pronta-lista { display: grid; gap: .1em; margin-top: .3em; font-size: .78em; color: var(--a-tinta-2); }
.q-pronta-lista span::before { content: "✓ "; color: var(--a-ok-traco); font-weight: 700; }
/* a vaga por onde o viajante passa: tracejada, quase não se vê */
.q-vaga { border-radius: 12px; border: 1px dashed var(--a-borda-forte); opacity: .45; block-size: var(--q-vaga); }
/* o viajante: mede uma coluna menos o respiro e anda uma coluna por vez.
   --q-cols, --q-meio e --q-fim dizem quantas colunas há e onde ele passa
   (em colunas): com três, sai do Oi, passa pela Negociação e para no Comprou. */
.quadro-colunas { --q-cols: 3; --q-meio: 1; --q-fim: 2; }
.q-viajante {
  --q-passo: calc(100% + 2 * var(--q-pad) + var(--q-gap));
  position: absolute; z-index: 2; top: calc(var(--q-cabeca) + var(--q-pad));
  left: var(--q-pad); inline-size: calc((100% - (var(--q-cols) - 1) * var(--q-gap)) / var(--q-cols) - 2 * var(--q-pad));
  block-size: var(--q-vaga); align-content: start;
  translate: calc(var(--q-fim) * var(--q-passo)) 0;
}
.q-viajante .q-selo { position: absolute; right: .5em; top: -.8em; margin: 0; box-shadow: 0 0 0 2px var(--a-elevado); }
/* as medidas moram na .quadro-colunas: uma consulta de contêiner não
   estiliza o próprio contêiner (.peca-quadro), só o que está dentro dele */
@container (max-width: 520px) {
  .quadro-colunas { --q-pad: 5px; --q-gap: 6px; --q-cabeca: 38px; }
  .q-rodape .canal span, .q-cartao .q-pronta-lista span:nth-child(n+3) { display: none; }
  .q-viajante .q-selo { right: auto; left: .4em; top: -.9em; }
  .q-cabeca { font-size: .92em; gap: .4em; }
  .q-cabeca span, .q-longo { display: none; }
  .q-selo { font-size: .7em; }
}
/* no celular, três colunas cortavam os nomes: ficam só a Negociação e o
   Comprou, com letra maior. O viajante sai da Negociação e para no Comprou. */
@container (max-width: 460px) {
  .quadro-colunas {
    --q-cols: 2; --q-meio: .5; --q-fim: 1; --q-pad: 7px; --q-gap: 8px; --q-cabeca: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13.5px;
  }
  .q-col[data-etapa="oi"] { display: none; }
  .q-cabeca span { display: inline; }
  .q-longo { display: inline; }
  .q-rodape .canal span, .q-cartao .q-pronta-lista span:nth-child(n+3) { display: inline; }
  .q-selo { font-size: .78em; }
}
@container (max-width: 300px) {
  .q-longo { display: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .q-viajante { animation: viaja linear; animation-timeline: --quadro; animation-range: entry 0% cover 52%; }
    .q-viajante .q-selo { animation: carimba linear; animation-timeline: --quadro; animation-range: entry 0% cover 56%; }
    .q-cartao[data-pronta] { animation: pronta linear; animation-timeline: --quadro; animation-range: entry 0% cover 42%; }
  }
}
@keyframes viaja {
  0%, 40%   { translate: 0 0; }
  62%, 72%  { translate: calc(var(--q-meio) * var(--q-passo)) -.2em; }
  94%, 100% { translate: calc(var(--q-fim) * var(--q-passo)) 0; }
}
@keyframes carimba { 0%, 88% { opacity: 0; scale: 1.5; } 100% { opacity: 1; scale: 1; } }
@keyframes pronta { 0%, 70% { box-shadow: 0 0 0 0 transparent, var(--a-sombra-1); } }

/* ================================================== 6 · o bento */
/* Sete quadradinhos do iOS 26 (Fila, Quadro, Clientes, Campanhas,
   Indicadores, Persona, Lojas), uma palavra e uma microanimação cada, sem
   azul. O movimento anda com a rolagem (view()), uma vez, sem loop. */
.peca-bento {
  /* as cores dos quadradinhos (base.css), para os desenhos de dentro */
  --b-ametista: #6d3bcd; --b-musgo: #4f6b2a; --b-ambar: #c0660f; --b-coral: #b8431f;
  view-timeline: --bento block;
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "fila fila quadro clientes"
    "fila fila campanhas indicadores"
    "persona persona lojas lojas";
}
.bento-q {
  --raio-vidro: 24px;
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  min-block-size: 168px; padding: 16px;
}
.bento-q[data-q="fila"] { grid-area: fila; }
.bento-q[data-q="quadro"] { grid-area: quadro; }
.bento-q[data-q="clientes"] { grid-area: clientes; }
.bento-q[data-q="campanhas"] { grid-area: campanhas; }
.bento-q[data-q="indicadores"] { grid-area: indicadores; }
.bento-q[data-q="persona"] { grid-area: persona; }
.bento-q[data-q="lojas"] { grid-area: lojas; }
.bento-q .quadradinho { --quadradinho: 40px; }
.bento-nome { font-weight: 620; font-size: 1.0625rem; color: var(--tinta); letter-spacing: -.01em; }
.bento-q[data-q="fila"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: 20px;
}
.bento-q[data-q="fila"] > .bento-desenho { grid-column: 2; grid-row: 1 / 3; }
.bento-q[data-q="fila"] > .bento-texto { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 10px; }
/* no quadro largo, o texto da Fila sobe para o meio da coluna da esquerda,
   em vez de deixar um vão entre o ícone e o título */
@media (min-width: 901px) {
  .bento-q[data-q="fila"] > .bento-texto { grid-row: 1 / 3; align-self: center; padding-block-start: 56px; }
  .bento-q[data-q="fila"] > .quadradinho { grid-column: 1; grid-row: 1; align-self: start; }
  .bento-q[data-q="fila"] .bento-nome { font-size: 1.375rem; }
  .bento-q[data-q="fila"] .bento-apoio { font-size: 1rem; max-inline-size: 24ch; }
}
.bento-q[data-q="fila"] .mini-canais { flex-wrap: wrap; gap: 4px 12px; }
/* o nome da Fila é igual ao dos outros seis (sans, negrito, embaixo à
   esquerda); a serifa fica só nos títulos de cena */
.bento-apoio { font-size: var(--t-pequeno); color: var(--tinta-3); }
.bento-desenho { position: relative; align-self: center; min-block-size: 56px; }

/* fila: três linhas, os pontos passam do âmbar ao verde */
.mini-fila { display: grid; gap: 8px; }
.mini-fila > span {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--sup-1); box-shadow: 0 0 0 1px var(--linha);
}
.mini-fila > span::before { content: ""; grid-row: span 2; inline-size: 30px; aspect-ratio: 1; border-radius: 50%; background: var(--sup-3); }
.mini-fila i { block-size: 7px; border-radius: 4px; background: var(--sup-3); }
.mini-fila i:nth-child(1) { inline-size: 55%; background: var(--linha-forte); }
.mini-fila i:nth-child(2) { grid-column: 2; inline-size: 85%; }
.mini-fila b {
  grid-column: 3; grid-row: 1 / 3;
  padding: 3px 9px; border-radius: 99px;
  background: var(--a-ok-fundo); color: var(--a-ok-tinta); box-shadow: inset 0 0 0 1px var(--a-ok-borda);
  font: 650 .75rem/1.2 var(--a-fonte); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mini-canais { display: flex; gap: 12px; color: var(--tinta-3); font-size: var(--t-pequeno); }

/* quadro: três colunas, um cartão pula de uma para a outra */
.mini-quadro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; block-size: 64px; position: relative; max-inline-size: 300px; }
.mini-quadro > span {
  border-radius: 8px; box-shadow: inset 0 0 0 1px var(--linha);
  background: linear-gradient(var(--sup-1), var(--sup-1)) 4px 32px / calc(100% - 8px) 18px no-repeat, var(--sup-2);
}
.mini-quadro > span:nth-child(3) { background: var(--sup-2); }
.mini-quadro > b {
  position: absolute; top: 8px; left: 4px; inline-size: calc((100% - 10px) / 3 - 8px); block-size: 18px;
  border-radius: 5px; background: var(--b-ambar); translate: calc(200% + 2 * 13px) 0;
}
/* clientes: três rostos e o selo "voltou" */
.mini-clientes { display: flex; align-items: center; }
.mini-clientes > span {
  inline-size: 34px; aspect-ratio: 1; border-radius: 50%; margin-left: -8px;
  display: grid; place-items: center; font: 650 .8125rem/1 var(--a-fonte);
  box-shadow: 0 0 0 2px var(--sup-1);
}
.mini-clientes > span:first-child { margin-left: 0; }
.mini-clientes > span:nth-child(1) { background: var(--av-coral); color: var(--av-coral-t); }
.mini-clientes > span:nth-child(2) { background: var(--av-musgo); color: var(--av-musgo-t); }
.mini-clientes > span:nth-child(3) { background: var(--av-ambar); color: var(--av-ambar-t); }
.mini-clientes > b {
  margin-left: 10px; padding: 3px 9px; border-radius: 99px;
  background: var(--a-ok-fundo); color: var(--a-ok-tinta); box-shadow: inset 0 0 0 1px var(--a-ok-borda);
  font: 650 .75rem/1.2 var(--a-fonte);
}
/* campanhas: o avião de papel dispara pela linha tracejada */
.mini-campanha { block-size: 64px; }
.mini-campanha svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.mini-campanha .rastro { fill: none; stroke: var(--linha-forte); stroke-width: 1.5; stroke-dasharray: 3 5; }
.mini-campanha .aviao { fill: var(--b-coral); }
/* indicadores: as barras crescem */
.mini-barras { display: flex; align-items: flex-end; gap: 6px; block-size: 60px; }
.mini-barras > span { flex: 1; max-inline-size: 16px; border-radius: 4px 4px 2px 2px; background: var(--tinta-3); transform-origin: 50% 100%; }
.mini-barras > span:nth-child(1) { block-size: 36%; opacity: .45; }
.mini-barras > span:nth-child(2) { block-size: 52%; opacity: .55; }
.mini-barras > span:nth-child(3) { block-size: 46%; opacity: .7; }
.mini-barras > span:nth-child(4) { block-size: 74%; opacity: .85; }
.mini-barras > span:nth-child(5) { block-size: 100%; opacity: 1; background: var(--b-musgo); }
/* persona: o tom da marca num controle que para no ponto certo */
.mini-persona { display: grid; gap: 10px; max-inline-size: 340px; }
.mini-persona .bolha-mini {
  justify-self: start; padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--a-bolha-nossa); border-inline-end: 3px solid var(--b-ametista);
  font: 500 .875rem/1.35 var(--a-fonte); color: var(--a-tinta);
}
.mini-tom { position: relative; block-size: 6px; border-radius: 3px; background: var(--sup-3); }
.mini-tom::before { content: ""; position: absolute; inset: 0 32% 0 0; border-radius: inherit; background: var(--b-ametista); opacity: .5; }
.mini-tom::after {
  content: ""; position: absolute; top: 50%; left: 68%; translate: -50% -50%;
  inline-size: 18px; aspect-ratio: 1; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .18);
}
/* lojas: duas lojas trocam de lugar num toque */
.mini-lojas { display: grid; gap: 6px; max-inline-size: 280px; }
.mini-lojas > span {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px;
  background: var(--sup-1); box-shadow: 0 0 0 1px var(--linha);
  font: 600 .875rem/1.2 var(--a-fonte); color: var(--tinta-2);
}
.mini-lojas > span::before { content: ""; inline-size: 18px; aspect-ratio: 1; border-radius: 6px; background: var(--sup-3); }
.mini-lojas > span:first-child { color: var(--tinta); box-shadow: 0 0 0 1.5px var(--tinta-3); }
.mini-lojas > span:first-child::before { background: var(--tinta-2); }

@media (max-width: 900px) {
  .peca-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-wrap: anywhere;
    grid-template-areas:
      "fila fila"
      "quadro clientes"
      "campanhas indicadores"
      "persona lojas";
  }
  .mini-persona .bolha-mini { font-size: .8125rem; padding: 7px 10px; }
  .mini-lojas > span { font-size: .8125rem; padding: 6px 8px; }
  .bento-q { min-block-size: 150px; padding: 14px; }
  .bento-q[data-q="fila"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .bento-q[data-q="fila"] > :is(.bento-desenho, .bento-texto) { grid-column: 1; grid-row: auto; }
}
/* No celular o bento encolhe: a fila grande já está no herói, então o
   quadradinho da Fila fica só com o nome e os canais, e os outros ficam
   baixos. A /otto cabe em nove telas de 390 × 844. */
@media (max-width: 640px) {
  .peca-bento { gap: 10px; }
  .bento-q { min-block-size: 0; padding: 12px; gap: 8px; --raio-vidro: 20px; }
  .bento-q .quadradinho { --quadradinho: 34px; }
  .bento-q[data-q="fila"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .bento-q[data-q="fila"] > .bento-desenho { display: none; }
  .bento-q[data-q="fila"] > .bento-texto { grid-column: 1; grid-row: 2; align-self: end; gap: 4px; }
  .bento-desenho { min-block-size: 44px; }
  .mini-quadro, .mini-campanha { block-size: 48px; }
  .mini-quadro > span { background: linear-gradient(var(--sup-1), var(--sup-1)) 4px 26px / calc(100% - 8px) 14px no-repeat, var(--sup-2); }
  .mini-quadro > b { top: 6px; block-size: 14px; }
  .mini-barras { block-size: 44px; }
  .mini-persona { gap: 8px; }
  /* os rostos e o "voltou" quebram de linha em vez de vazar do quadradinho */
  .mini-clientes { flex-wrap: wrap; row-gap: 6px; }
  .mini-clientes > span { inline-size: 30px; }
  .mini-clientes > b { margin-left: 8px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .peca-bento :is(.mini-fila b, .mini-quadro > b, .mini-clientes > span, .mini-campanha .aviao, .mini-barras > span, .mini-lojas > span) {
      animation-timeline: --bento; animation-fill-mode: none; animation-timing-function: linear;
    }
    .mini-fila b { animation-name: ponto-verde; }
    .mini-fila > span:nth-child(1) b { animation-range: entry 0% cover 18%; }
    .mini-fila > span:nth-child(2) b { animation-range: entry 0% cover 22%; }
    .mini-fila > span:nth-child(3) b { animation-range: entry 0% cover 26%; }
    .mini-quadro > b { animation-name: pula-coluna; animation-range: entry 0% cover 40%; }
    .mini-clientes > span { animation-name: entra-lado; }
    .mini-clientes > span:nth-child(1) { animation-range: entry 0% cover 24%; }
    .mini-clientes > span:nth-child(2) { animation-range: entry 0% cover 27%; }
    .mini-clientes > span:nth-child(3) { animation-range: entry 0% cover 30%; }
    .mini-clientes > b { animation: surge linear; animation-timeline: --bento; animation-range: entry 0% cover 34%; }
    .mini-campanha .aviao { animation-name: dispara; animation-range: entry 0% cover 40%; }
    .mini-barras > span { animation-name: cresce; }
    .mini-barras > span:nth-child(1) { animation-range: entry 0% cover 30%; }
    .mini-barras > span:nth-child(2) { animation-range: entry 0% cover 32%; }
    .mini-barras > span:nth-child(3) { animation-range: entry 0% cover 34%; }
    .mini-barras > span:nth-child(4) { animation-range: entry 0% cover 36%; }
    .mini-barras > span:nth-child(5) { animation-range: entry 0% cover 38%; }
    .mini-tom::after { animation: tom linear; animation-timeline: --bento; animation-range: entry 0% cover 48%; }
    .mini-lojas > span:nth-child(1) { animation-name: troca-cima; animation-range: entry 0% cover 50%; }
    .mini-lojas > span:nth-child(2) { animation-name: troca-baixo; animation-range: entry 0% cover 50%; }
  }
}
/* As faixas começam todas em "entry 0%" e por isso cada quadro fica
   parado no ponto de partida no começo dela: o movimento só aparece com o
   bento já dentro da tela. */
@keyframes ponto-verde { 0%, 60% { opacity: 0; scale: .8; } }
@keyframes pula-coluna {
  0%, 40% { translate: 0 0; }
  62%, 72% { translate: calc(100% + 13px) -4px; }
  94%, 100% { translate: calc(200% + 26px) 0; }
}
@keyframes entra-lado { 0%, 60% { opacity: 0; translate: -10px 0; } }
@keyframes dispara { 0%, 45% { translate: -96px 44px; opacity: .3; } }
@keyframes cresce { 0%, 55% { scale: 1 .15; } }
@keyframes tom { 0%, 50% { left: 12%; } }
@keyframes troca-cima { 0%, 55% { translate: 0 calc(100% + 6px); } }
@keyframes troca-baixo { 0%, 55% { translate: 0 calc(-100% - 6px); } }

/* ============================================ 7 · cuidado com o dado */
.peca-cuidado {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 12px;
  max-inline-size: 60rem; margin-inline: auto;
}
.peca-cuidado li { display: grid; justify-items: center; gap: 12px; text-align: center; }
.peca-cuidado .quadradinho { --quadradinho: 60px; }
.peca-cuidado span:not(.quadradinho) { font-size: var(--t-pequeno); font-weight: 560; color: var(--tinta-2); line-height: 1.3; text-wrap: balance; max-inline-size: 12ch; }
@media (max-width: 720px) {
  .peca-cuidado { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .peca-cuidado .quadradinho { --quadradinho: 54px; }
}

/* sem transparência: os vidros viram cor sólida e o desfoque sai. O dock e
   o aviso do herói usam as superfícies do app. */
@media (prefers-reduced-transparency: reduce) {
  .app-dock { background: var(--a-elevado); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fila-aviso { background: var(--a-elevado); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* =================================================================== v3 */
/* As peças da /otto PT desde o plano do site v3 (docs/plano-site-v3.md).
   A EN continua nas peças de cima até o dono aprovar a PT; nada daqui
   muda a EN, porque tudo mora em classes novas (.peca-fila-v3, .ramos,
   .persona-v3, .ticket, .funil, .bento-v3, .cuidado-v3). */

/* ----------------------------------------------- v3 · 1 · a fila do herói */
/* Sem loop e sem "Pausar": os cartões entram em cascata uma vez, e uns
   1,2 s depois chega o aviso da Luana. O relógio mora na linha dela:
   "visualizou, sem resposta" riscado ao lado de "Otto · na hora". */
.peca-fila-v3 .fila-linha { min-height: 0; padding-block: .6em; }
.peca-fila-v3 .fila-linha[data-destaque] { background: var(--a-otto-veu); border-radius: 1.05em 1.05em 0 0; }
.peca-fila-v3 .fila-texto { gap: .1em; }
.peca-fila-v3 .fila-topo .selo-ok { font-size: .74em; }
.fila-hora { font-size: .78em; font-weight: 600; color: var(--a-tinta-3); font-variant-numeric: tabular-nums; }
.peca-fila-v3 :is(.fila-pergunta, .fila-resposta) {
  display: block; font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peca-fila-v3 .fila-pergunta { color: var(--a-tinta); font-weight: 500; }
/* na linha da Luana, a resposta cabe inteira (até duas linhas) e a foto do
   tênis aparece: é o herói que explica "foto" e "manda o link" */
.peca-fila-v3 [data-destaque] .fila-resposta {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  white-space: normal; line-height: 1.45;
}
.peca-fila-v3 [data-destaque] .fila-miniatura { inline-size: 1.9em; block-size: 1.9em; vertical-align: -.6em; margin-inline: .1em; }
.peca-fila-v3 .fila-resposta { color: var(--a-tinta-2); }
.peca-fila-v3 .fila-resposta b { color: var(--a-otto); font-weight: 650; }
.fila-espera { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .5em; margin-block: .2em .1em; font-size: .8em; }
.fila-espera s {
  position: relative; text-decoration: none;
  color: var(--a-urgente-tinta); font-weight: 600;
}
.fila-espera s::after {
  content: ""; position: absolute; left: -.1em; right: -.1em; top: 52%; block-size: 1.5px;
  background: currentColor; transform-origin: 0 50%;
}
.fila-espera .selo-ok { font-size: 1em; }

@media (prefers-reduced-motion: no-preference) {
  .peca-fila-v3 .fila-linha { animation: cascata .5s cubic-bezier(.16, 1, .3, 1) backwards; }
  .peca-fila-v3 .app-grupo .fila-linha:nth-child(1) { animation-delay: .1s; }
  .peca-fila-v3 .app-grupo .fila-linha:nth-child(2) { animation-delay: .22s; }
  .peca-fila-v3 .app-grupo .fila-linha:nth-child(3) { animation-delay: .34s; }
  .peca-fila-v3 .app-grupo ~ .app-grupo .fila-linha { animation-delay: .46s; }
  .peca-fila-v3 .fila-espera s::after { animation: risca .3s .7s ease-out backwards; }
  .peca-fila-v3 .fila-espera .selo-ok { animation: surge-baixo .35s .95s cubic-bezier(.16, 1, .3, 1) backwards; }
  /* o aviso da EN roda em loop de 15 s (aviso-desce); o da PT chega uma vez */
  .peca-fila-v3 .fila-aviso { animation: aviso-chega .55s 1.2s cubic-bezier(.2, .8, .2, 1) backwards; }
}
/* o aviso desce para o vão de baixo da fila, sem cobrir as linhas */
.peca-fila-v3 .fila-aviso { top: auto; bottom: 17%; }
@keyframes cascata { from { opacity: 0; translate: 0 -.6em; } }
@keyframes risca { from { scale: 0 1; } }
@keyframes aviso-chega { from { opacity: 0; translate: 0 -14px; scale: .96; } }

/* ----------------------------------------------- v3 · 2 · um celular, cinco ramos */
/* Abas em radio + :has(), sem script. O radio fica escondido (.so-leitor) e
   segue no Tab e nas setas; a pílula é o label. Sem :has(), as cinco
   conversas empilham e as abas somem.  */
.ramos { display: grid; gap: clamp(20px, 3vw, 32px); justify-items: center; }
.ramos-escolha { display: grid; gap: 14px; justify-items: center; }
.ramos-abas {
  position: relative; margin: 0; padding: 0; border: 0; min-inline-size: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.ramos-abas label {
  min-block-size: 44px; padding: 5px 16px 5px 6px; cursor: pointer;
  font-size: .9375rem; font-weight: 560; color: var(--tinta-2);
  transition: color .18s var(--ease-ui);
}
.ramos-abas label .quadradinho { --quadradinho: 32px; margin-inline-start: 0; }
.ramos-abas label:hover { color: var(--tinta); }
.ramos-abas input:checked + label {
  color: var(--tinta); font-weight: 650;
  box-shadow: inset 0 1px 0 var(--vidro-luz), 0 0 0 1.5px var(--otto), 0 8px 20px -12px var(--sombra-cor);
}
.ramos-abas input:focus-visible + label { outline: 2px solid var(--otto); outline-offset: 3px; }
.ramos-mais { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.ramos-mais ul { display: contents; }
.ramos-mais li {
  min-block-size: 30px; padding: 3px 11px 3px 4px;
  font-size: .8125rem; font-weight: 500; color: var(--tinta-3);
}
.ramos-mais .quadradinho { --quadradinho: 22px; margin-inline-start: 0; }

/* a coluna do celular tem largura própria: a moldura mede em % dela e,
   numa coluna que encolhe até o conteúdo, sumiria */
.ramos-telas { justify-self: stretch; }
.ramo-tela { margin: 0; display: none; }
.ramo-tela .celular { --celular: 336px; margin-inline: auto; }
/* a tela da cena é mais baixa que a de 390 × 844: a conversa mais longa
   (veículos) termina logo acima do composer, sem um palmo de tela vazia
   embaixo; o raio vertical acompanha a nova altura */
.ramo-tela .celular { border-radius: 15% / 8.4%; }
.ramo-tela .celular > .tela { aspect-ratio: 390 / 736; }
@supports selector(:has(*)) {
  .ramos:has(#ramo-moda:checked) .ramo-tela[data-ramo="moda"],
  .ramos:has(#ramo-colchoes:checked) .ramo-tela[data-ramo="colchoes"],
  .ramos:has(#ramo-otica:checked) .ramo-tela[data-ramo="otica"],
  .ramos:has(#ramo-estetica:checked) .ramo-tela[data-ramo="estetica"],
  .ramos:has(#ramo-veiculos:checked) .ramo-tela[data-ramo="veiculos"] { display: block; }
}
@supports not selector(:has(*)) {
  .ramos-abas { display: none; }
  .ramos-telas { display: grid; gap: 28px; justify-items: center; }
  .ramo-tela { display: block; }
}
@media (min-width: 960px) {
  .ramos {
    grid-template-columns: minmax(0, 1fr) 336px;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". telas" "titulo telas" "escolha telas" "fontes telas" ". telas";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 28px;
    justify-items: start; align-items: center;
    max-inline-size: 1120px; margin-inline: auto;
  }
  .ramos-escolha { grid-area: escolha; justify-items: start; }
  .ramos-abas, .ramos-mais { justify-content: flex-start; }
  .ramos-telas { grid-area: telas; }
  .ramos-fontes { grid-area: fontes; }
}

/* a conversa de cada ramo: mais enxuta que a da EN, para caber na tela */
.ramo-tela .conversa-corpo { gap: .5em; padding-top: .8em; }
.ramo-tela .bolha { max-inline-size: 86%; }
.ramo-tela .msg-nossa .bolha:has(.produto, .produtos-dois, .servico, .bolha-foto) { max-inline-size: 92%; }
.msg-story { display: flex; align-items: center; gap: .5em; margin-bottom: .15em; font-size: .72em; font-weight: 600; color: var(--a-tinta-3); }
.msg-story img { inline-size: 3.6em; block-size: auto; aspect-ratio: 4 / 5; border-radius: .45em; object-fit: cover; box-shadow: 0 0 0 1px var(--a-aro); }

.produto {
  display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: .7em; align-items: center;
  margin-top: .45em; padding: .4em .5em .4em .4em; border-radius: .8em;
  background: var(--a-papel); box-shadow: inset 0 0 0 1px var(--a-borda);
}
.produto > img { inline-size: 6.4em; block-size: auto; aspect-ratio: 4 / 5; border-radius: .5em; object-fit: cover; background: var(--a-midia); }
.produto > span { display: grid; gap: .15em; min-width: 0; justify-items: start; }
.produto b { font-size: .92em; font-weight: 650; line-height: 1.2; }
.produto-preco { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--a-tinta); }
.produto .bolha-ok { font-size: .8em; }
/* a régua do colchão: o ponto anda do macio ao firme */
.regua-mini { display: grid; gap: .3em; inline-size: 100%; margin-top: .15em; font-size: .72em; color: var(--a-tinta-3); }
.regua-mini-trilho { position: relative; block-size: .3em; border-radius: 99px; background: var(--a-borda-forte); margin-inline: .5em; }
.regua-mini-trilho i {
  position: absolute; top: 50%; left: 100%; translate: -50% -50%;
  inline-size: .95em; aspect-ratio: 1; border-radius: 50%;
  background: var(--a-otto); box-shadow: 0 0 0 .2em var(--a-otto-veu);
}
.regua-mini-rotulos { display: flex; justify-content: space-between; }
.regua-mini-rotulos [data-marcado] { color: var(--a-otto); font-weight: 700; }
.produtos-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4em; margin-top: .45em; }
.produto-mini {
  display: grid; gap: .1em; padding: .3em .3em .4em; border-radius: .7em;
  background: var(--a-papel); box-shadow: inset 0 0 0 1px var(--a-borda); font-size: .85em;
}
.produto-mini img { inline-size: 100%; block-size: auto; aspect-ratio: 2 / 1; border-radius: .45em; object-fit: cover; background: var(--a-midia); }
.produto-mini img[data-recorte="cima"] { object-position: 50% 0; }
.produto-mini img[data-recorte="baixo"] { object-position: 50% 100%; }
.produto-mini b { font-weight: 650; padding-inline: .2em; }
.produto-mini span { font-weight: 700; padding-inline: .2em; font-variant-numeric: tabular-nums; }
.bolha-foto-larga { inline-size: 100%; aspect-ratio: 4 / 3; }
.bolha-link { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: .6em; align-items: center; }
.link-icone {
  display: grid; place-items: center; inline-size: 2.2em; aspect-ratio: 1; border-radius: .65em;
  background: var(--a-otto-veu); color: var(--a-otto);
}
.link-icone svg { inline-size: 1.2em; block-size: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bolha-link > span:last-child { display: grid; min-width: 0; }
.bolha-link b { font-weight: 650; }
.bolha-link span span { font-size: .8em; color: var(--a-tinta-3); }
.ramo-tela .msg-assinatura { margin-top: .15em; }
/* a venda que chega pronta para a pessoa (passar_para_pessoa): ametista, a
   mesma cor da saída "Pronta para o time" do funil */
.pronta-cartao {
  align-self: stretch; display: grid; gap: .15em; margin-top: .15em;
  padding: .55em .8em .6em; border-radius: .85em;
  background: var(--a-otto-veu); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-otto) 30%, transparent);
  font-size: .82em; color: var(--a-tinta-2);
}
.pronta-titulo { display: flex; align-items: center; gap: .35em; font-weight: 700; color: var(--a-otto-selo); }
.pronta-titulo svg { inline-size: 1.05em; block-size: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Pergunta, três pontinhos, resposta: por tempo, não por rolagem. A tela
   ganha caixa quando a aba é escolhida (display), e isso reinicia as
   animações: cada troca de ramo escreve a conversa de novo. Sem movimento,
   a conversa já está inteira e os pontinhos não aparecem. */
.ramo-tela .digitando { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ramo-tela .digitando { display: flex; opacity: 0; animation: digitando-v3 1.1s .5s both; }
  .ramo-tela .digitando i { animation: pulo 1s ease-in-out 2; }
  .ramo-tela .digitando i:nth-child(2) { animation-delay: .15s; }
  .ramo-tela .digitando i:nth-child(3) { animation-delay: .3s; }
  .ramo-tela [data-t] { animation: surge-baixo .45s cubic-bezier(.16, 1, .3, 1) backwards; }
  .ramo-tela [data-t="1"] { animation-delay: .1s; }
  .ramo-tela [data-t="2"] { animation-delay: 1.6s; }
  .ramo-tela [data-t="3"] { animation-delay: 2.5s; }
  .ramo-tela [data-t="4"] { animation-delay: 3.3s; }
  .ramo-tela [data-t="5"] { animation-delay: 4.1s; }
  .ramo-tela .regua-mini-trilho i { animation: regua-anda .9s 2.2s cubic-bezier(.3, .7, .2, 1) backwards; }
  .ramo-tela .msg { transform-origin: 0 100%; }
  .ramo-tela .msg-nossa, .ramo-tela .pronta-cartao { transform-origin: 100% 100%; }
}
/* A Moda abre por padrão e, no carregamento, está fora da tela: a cascata
   dela segue a entrada do celular na tela, e não o relógio. A linha do
   tempo é a do próprio celular (--conversa-moda; a view() de cada fala não
   serve, porque a tela do app tem overflow: hidden e vira o rolador dela).
   Cada fala entra logo depois de aparecer e tudo termina quando o celular
   inteiro está à mostra (entry 100%); sem fill para trás, o que está fora
   da faixa fica inteiro. As outras abas seguem por tempo, que recomeça a
   cada troca. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ramo-tela[data-ramo="moda"] { view-timeline: --conversa-moda block; }
    .ramo-tela[data-ramo="moda"] [data-t] { animation: surge-baixo linear; animation-timeline: --conversa-moda; }
    /* cada faixa começa antes de a fala aparecer (a fala mora de 15 a 81%
       da altura do celular): nada surge fora de ordem */
    .ramo-tela[data-ramo="moda"] [data-t="1"] { animation-range: entry 13% entry 30%; }
    .ramo-tela[data-ramo="moda"] [data-t="2"] { animation-name: surge-depois; animation-range: entry 27% entry 66%; }
    .ramo-tela[data-ramo="moda"] [data-t="3"] { animation-range: entry 55% entry 76%; }
    .ramo-tela[data-ramo="moda"] [data-t="4"] { animation-range: entry 64% entry 84%; }
    .ramo-tela[data-ramo="moda"] [data-t="5"] { animation-range: entry 69% entry 96%; }
    .ramo-tela[data-ramo="moda"] .digitando { animation: digitando-v3 linear; animation-timeline: --conversa-moda; animation-range: entry 27% entry 50%; }
    .ramo-tela[data-ramo="moda"] .digitando i { animation: none; }
  }
}
/* a resposta espera os três pontinhos: parada até 55% da faixa, depois entra */
@keyframes surge-depois { 0%, 55% { opacity: 0; translate: 0 .8em; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes digitando-v3 { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes regua-anda { from { left: 0%; } 50% { left: 50%; } }

/* a faixa das fontes: o que sobrou do esquema "Como o Otto pensa" */
.ramos-fontes {
  display: grid; gap: 10px; justify-items: center; text-align: center;
  inline-size: min(100%, 560px); padding: 14px 18px 16px;
}
.fontes-frase {
  font-family: var(--serif); font-optical-sizing: auto; font-style: italic; font-weight: 380;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.3; color: var(--tinta); text-wrap: balance;
}
.fontes-fluxo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  font-size: .8125rem; font-weight: 500; color: var(--tinta-3);
}
.fontes-grupo { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 9px; }
.fontes-seta { color: var(--tinta-4); }
.fontes-otto { inline-size: 22px; block-size: 22px; border-radius: 6px; }
@media (min-width: 960px) {
  .ramos-fontes { inline-size: 100%; justify-items: start; text-align: left; }
  .fontes-fluxo { justify-content: flex-start; }
}
@media (max-width: 480px) {
  /* duas linhas: de onde vem · e por onde sai */
  .fontes-fluxo > .fontes-seta:last-of-type { display: none; }
  .fontes-fluxo > .fontes-grupo:last-child { flex-basis: 100%; }
}

/* ----------------------------------------------- v3 · 3 · persona com régua */
.persona-v3 { gap: clamp(18px, 2.6vw, 28px); max-inline-size: 62rem; }
.persona-v3 .persona-lado { gap: .9em; }
.persona-v3 .persona-otto { background: transparent; box-shadow: none; padding: 0; }
.tom { display: grid; gap: .6em; padding: .95em 1.1em 1.05em; border-radius: 18px; }
.tom-titulo {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.tom-titulo .otto-app { inline-size: 20px; block-size: 20px; border-radius: 5px; }
.regua {
  --pos: 50%;
  display: grid; grid-template-columns: minmax(0, 6.4em) minmax(2.5em, 1fr) minmax(0, 6.4em); align-items: center; gap: .7em;
  overflow-wrap: anywhere;
  font-size: .8125rem; color: var(--tinta-3);
}
.regua > span:last-child { text-align: right; }
.regua[data-pos="0"]  { --pos: 0%; }
.regua[data-pos="15"] { --pos: 15%; }
.regua[data-pos="40"] { --pos: 40%; }
.regua-trilho { position: relative; block-size: 4px; border-radius: 2px; background: var(--linha-forte); }
.regua-trilho::before { content: ""; position: absolute; inset: 0 calc(100% - var(--pos)) 0 0; border-radius: inherit; background: var(--otto-fio); }
.regua-trilho i {
  position: absolute; top: 50%; left: var(--pos); translate: -50% -50%;
  inline-size: 14px; aspect-ratio: 1; border-radius: 50%;
  background: var(--otto); box-shadow: 0 0 0 3px var(--otto-veu), 0 1px 3px rgb(0 0 0 / .2);
}
.persona-v3 .persona-quem { display: inline-flex; align-items: center; gap: .35em; }
.persona-v3 .persona-quem .otto-app { inline-size: 1.3em; block-size: 1.3em; border-radius: 24%; }
.persona-legenda {
  justify-self: center; text-align: center;
  font-family: var(--serif); font-optical-sizing: auto; font-style: italic; font-weight: 380;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.25; color: var(--tinta-2);
}

/* ----------------------------------------------- v3 · 4 · ticket e funil */
.ticket {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em;
  margin-top: 1em; padding-top: .9em; border-top: 1px solid var(--a-borda);
  font-size: .85em; color: var(--a-tinta-2);
}
.ticket-rotulo {
  font-family: var(--mono); font-size: .85em; font-stretch: var(--mono-l);
  letter-spacing: .06em; text-transform: uppercase; color: var(--a-tinta-3);
}
.ticket-barra { display: flex; block-size: 8px; border-radius: 4px; background: var(--a-borda); overflow: hidden; }
/* 69 de 119: o gel sozinho ocupa 58% da barra; o par, a barra toda */
.ticket-barra i[data-parte="gel"] { flex: 0 0 58%; background: var(--a-otto); opacity: .5; }
.ticket-barra i[data-parte="par"] { flex: 1 1 auto; background: var(--a-otto); transform-origin: 0 50%; }
.ticket-valores { display: inline-flex; align-items: baseline; gap: .4em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket-valores > span:first-child { color: var(--a-tinta-3); }
.ticket-seta { color: var(--a-tinta-3); }
.ticket-valores b { color: var(--a-tinta); font-weight: 700; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ticket-barra i[data-parte="par"] { animation: ticket-cresce linear; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes ticket-cresce { 0%, 50% { scale: 0 1; } }

/* O funil: Oi → Entendeu → Sugeriu → Link ou reserva → Comprou (musgo)
   ou Pronta para o time (ametista). Parado, tudo aceso; com movimento, um
   ponto acende etapa por etapa, em loop. */
.funil { display: grid; gap: 12px; inline-size: min(100%, 440px); margin-inline: auto; }
.funil-rotulo { text-align: center; }
.funil-etapas { position: relative; display: grid; gap: 8px; }
.funil-etapas::before {
  content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; inline-size: 1px;
  background: linear-gradient(var(--linha-forte), var(--otto-fio));
}
.funil-etapas li {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-block-size: 42px; padding: 10px 14px 10px 14px; border-radius: 14px;
  background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--tinta); font-weight: 560;
}
.funil-etapas small { font-size: .8125rem; font-weight: 400; color: var(--tinta-3); }
.funil-ponto {
  flex: none; align-self: center; inline-size: 14px; aspect-ratio: 1; border-radius: 50%;
  background: var(--otto); box-shadow: 0 0 0 1.5px var(--otto), 0 0 0 5px var(--fundo);
}
.funil-saidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-wrap: anywhere; }
.funil-saidas li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 12px; border-radius: 16px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.funil-saidas .quadradinho { --quadradinho: 38px; }
.funil-saidas b { display: block; font-weight: 620; line-height: 1.2; color: var(--tinta); }
.funil-saidas small { display: block; font-size: .8125rem; line-height: 1.3; color: var(--tinta-3); }
/* no celular, as etapas viram uma trilha de fichas que quebra de linha */
@media (max-width: 640px) {
  .funil-etapas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .funil-etapas::before { display: none; }
  .funil-etapas li { min-block-size: 36px; padding: 6px 12px 6px 9px; gap: 2px 8px; font-size: .9375rem; }
  .funil-ponto { inline-size: 10px; box-shadow: 0 0 0 1.5px var(--otto); }
  .funil-saidas li { padding: 10px; gap: 8px; }
  .funil-saidas .quadradinho { --quadradinho: 32px; }
}
/* uma passada só, pela entrada na tela quando dá (senão, pelo relógio),
   e tudo termina aceso: nada pisca por mais de 5 s (WCAG 2.2.2) */
@media (prefers-reduced-motion: no-preference) {
  .funil-ponto { animation: funil-acende 1.2s ease-out backwards; }
  .funil-etapas li:nth-child(2) .funil-ponto { animation-delay: .5s; }
  .funil-etapas li:nth-child(3) .funil-ponto { animation-delay: 1s; }
  .funil-etapas li:nth-child(4) .funil-ponto { animation-delay: 1.5s; }
  .funil-saidas li { animation: funil-chega 1.4s 2.1s ease-out backwards; }
  @supports (animation-timeline: view()) {
    .funil-ponto, .funil-saidas li { animation-timeline: view(); animation-fill-mode: none; animation-delay: 0s; animation-timing-function: linear; }
    .funil-etapas li:nth-child(1) .funil-ponto { animation-range: entry 40% cover 30%; }
    .funil-etapas li:nth-child(2) .funil-ponto { animation-range: entry 60% cover 34%; }
    .funil-etapas li:nth-child(3) .funil-ponto { animation-range: entry 80% cover 38%; }
    .funil-etapas li:nth-child(4) .funil-ponto { animation-range: entry 100% cover 42%; }
    .funil-saidas li { animation-range: entry 60% cover 40%; }
  }
}
@keyframes funil-acende {
  0% { background: var(--fundo); }
  45% { background: var(--otto); box-shadow: 0 0 0 1.5px var(--otto), 0 0 0 7px var(--otto-veu); }
}
@keyframes funil-chega {
  0% { box-shadow: inset 0 0 0 1px var(--linha-forte); }
  45% { box-shadow: inset 0 0 0 1.5px var(--otto), 0 0 0 5px var(--otto-veu); }
}

/* ----------------------------------------------- v3 · 6 · bento com verbos */
.bento-v3 .bento-texto { display: grid; gap: 2px; }
.bento-v3 .bento-apoio { font-size: .875rem; line-height: 1.35; }
.bento-v3 .mini-canais { gap: 10px; }
.bento-v3 .mini-canais svg {
  inline-size: 18px; block-size: 18px; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* a gota ametista sob a mini-fila: é o que o vidro tem para mostrar */
.bento-v3 [data-q="fila"] .bento-desenho::before {
  content: ""; position: absolute; inset: 8% 6% -4% 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(109 59 205 / .38), rgb(109 59 205 / 0));
  filter: blur(14px); pointer-events: none;
}
/* Os desenhos do bento mostram conteúdo de verdade, no mesmo estilo da
   Fila do herói: nome, a fala do Otto e o selo "na hora" (e não barras de
   esqueleto). Tudo aria-hidden: o nome e o apoio do bloco já dizem. */
.bento-v3 :is(.bf, .bq, .bc, .bl, .bp-rotulos) { font-family: var(--a-fonte); }

/* fila: três linhas reais, Instagram primeiro */
.bf { position: relative; display: grid; gap: 8px; }
.bf-linha {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--a-papel); box-shadow: 0 0 0 1px var(--linha), 0 6px 16px -12px var(--sombra-cor);
  font-size: .8125rem; line-height: 1.3;
}
.bf-linha:first-child { background: color-mix(in srgb, var(--a-otto-veu) 60%, var(--a-papel)); }
.bf .app-avatar { font-size: .8125rem; inline-size: 2.3em; }
.bf-texto { display: grid; gap: 1px; min-inline-size: 0; }
.bf-topo { display: flex; align-items: center; gap: 5px; color: var(--a-tinta); }
.bf-topo b { font-weight: 650; }
.bf-topo svg {
  inline-size: 13px; block-size: 13px; flex: none; color: var(--a-tinta-3);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bf-otto { color: var(--a-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-otto b { color: var(--a-otto); font-weight: 650; }
.bf-selo { font-size: .75rem; }

/* quadro: três colunas com cartões de verdade, e um cartão que anda até
   "Comprou" (o estado final, sem animação, é ele já em "Comprou") */
.bq { --bq-gap: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bq-gap); align-self: stretch; }
.bq-col {
  display: grid; align-content: start; gap: 5px; padding: 6px 5px 7px;
  border-radius: 10px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linha);
}
.bq-col > i {
  font-style: normal; font-size: .625rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); padding-inline: 3px;
}
.bq-col[data-col="comprou"] > i { color: var(--a-ok-tinta); }
.bq-card {
  display: grid; padding: 5px 6px; border-radius: 7px;
  background: var(--a-papel); box-shadow: 0 0 0 1px var(--linha), 0 3px 8px -6px var(--sombra-cor);
  font-size: .6875rem; font-weight: 620; line-height: 1.25; color: var(--a-tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bq-card small { font-size: .625rem; font-weight: 560; color: var(--a-tinta-3); font-variant-numeric: tabular-nums; }
.bq-col[data-col="comprou"] .bq-card { box-shadow: inset 2px 0 0 var(--a-ok-traco), 0 0 0 1px var(--linha); }

/* campanhas: a mensagem que a loja manda e quantos receberam, sem % */
.bc { display: grid; gap: 8px; justify-items: start; align-content: center; }
.bc-bolha {
  display: grid; gap: 2px; max-inline-size: 30ch; padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--a-bolha-nossa); box-shadow: inset 0 0 0 1px var(--linha);
  font-size: .8125rem; line-height: 1.35; color: var(--a-tinta);
}
.bc-bolha b { font-size: .6875rem; font-weight: 650; color: var(--a-tinta-3); }
.bc-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600; color: var(--a-ok-tinta); font-variant-numeric: tabular-nums;
}
.bc-meta svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* persona: os dois polos da régua, embaixo do controle */
.bp-rotulos { display: flex; justify-content: space-between; margin-top: -4px; font-size: .6875rem; font-weight: 560; color: var(--tinta-3); }

/* lojas: o seletor de loja do app, com a conversa esperando em cada uma */
.bl { display: grid; gap: 5px; align-content: center; }
.bl-cabeca { font-size: .625rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); padding-inline: 4px; }
.bl-loja {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 11px;
  background: var(--a-papel); box-shadow: 0 0 0 1px var(--linha);
  font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--a-tinta-2);
  overflow: hidden; white-space: nowrap;
}
.bl-loja[data-atual] { color: var(--a-tinta); box-shadow: 0 0 0 1.5px var(--a-otto), 0 6px 14px -10px var(--sombra-cor); }
.bl-marca {
  display: grid; place-items: center; inline-size: 22px; aspect-ratio: 1; border-radius: 7px;
  font-size: .6875rem; font-weight: 700; background: var(--av-lilas); color: var(--av-lilas-t);
}
.bl-marca[data-cor="coral"] { background: var(--av-coral); color: var(--av-coral-t); }
.bl-marca[data-cor="ambar"] { background: var(--av-ambar); color: var(--av-ambar-t); }
.bl-marca[data-cor="vinho"] { background: var(--av-vinho); color: var(--av-vinho-t); }
.bl-loja b {
  min-inline-size: 20px; padding: 1px 6px; border-radius: 99px; text-align: center;
  background: var(--a-otto); color: var(--a-papel); font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* No quadro largo: a Fila centra o ícone e o título na coluna da
   esquerda (sem o vão de antes), e os dois blocos largos de baixo põem o
   texto à esquerda e o desenho à direita, sem metade vazia. */
@media (min-width: 901px) {
  .bento-v3 .bento-q[data-q="fila"] { grid-template-rows: 1fr auto auto 1fr; row-gap: 16px; }
  .bento-v3 .bento-q[data-q="fila"] > .quadradinho { grid-column: 1; grid-row: 2; align-self: end; }
  .bento-v3 .bento-q[data-q="fila"] > .bento-texto { grid-column: 1; grid-row: 3; align-self: start; padding-block-start: 0; }
  .bento-v3 .bento-q[data-q="fila"] > .bento-desenho { grid-column: 2; grid-row: 1 / 5; }
  .bento-v3 .bento-q:is([data-q="persona"], [data-q="lojas"]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; column-gap: 20px;
  }
  .bento-v3 .bento-q:is([data-q="persona"], [data-q="lojas"]) > .quadradinho { grid-column: 1; grid-row: 1; }
  .bento-v3 .bento-q:is([data-q="persona"], [data-q="lojas"]) > .bento-texto { grid-column: 1; grid-row: 2; align-self: end; }
  .bento-v3 .bento-q:is([data-q="persona"], [data-q="lojas"]) > .bento-desenho { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}
/* no tablet a Fila ocupa a largura toda: três linhas bastam */
@media (max-width: 900px) {
  .bf-linha:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .bento-v3 .bento-apoio { font-size: .8125rem; }
  /* no quadradinho estreito ficam só Link e Comprou, com o nome inteiro */
  .bq { --bq-gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bq-col:first-child { display: none; }
  .bq-col { padding: 5px 3px; gap: 4px; }
  .bq-col > i { font-size: .5625rem; padding-inline: 2px; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
  .bq-card { padding: 4px 5px; font-size: .625rem; }
  .bq-card small, .bq-anda { display: none; }
  .bc-bolha { font-size: .75rem; padding: 7px 10px; }
  .bc-bolha b { display: none; }
  .bc-meta { font-size: .6875rem; }
  .bl-cabeca { display: none; }
  .bl-loja { font-size: .75rem; gap: 6px; padding: 5px 6px; }
  .bl-loja:nth-child(n+4) { display: none; }
  .bl-marca { inline-size: 18px; border-radius: 6px; font-size: .625rem; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento-v3 :is(.bf-selo, .bq-anda, .bc-meta, .bl-loja b) {
      animation-timeline: --bento; animation-fill-mode: none; animation-timing-function: linear;
    }
    .bf-selo { animation-name: ponto-verde; }
    .bf-linha:nth-child(1) .bf-selo { animation-range: entry 0% cover 18%; }
    .bf-linha:nth-child(2) .bf-selo { animation-range: entry 0% cover 22%; }
    .bf-linha:nth-child(3) .bf-selo { animation-range: entry 0% cover 26%; }
    .bf-linha:nth-child(4) .bf-selo { animation-range: entry 0% cover 30%; }
    .bf-linha:nth-child(5) .bf-selo { animation-range: entry 0% cover 34%; }
    .bq-anda { animation-name: anda-quadro; animation-range: entry 0% cover 40%; }
    .bc-meta { animation-name: ponto-verde; animation-range: entry 0% cover 36%; }
    .bl-loja b { animation-name: ponto-verde; animation-range: entry 0% cover 44%; }
  }
}
@keyframes anda-quadro {
  0%, 40% { translate: calc(-200% - 2 * (var(--bq-gap) + 10px)) 0; }
  62%, 72% { translate: calc(-100% - var(--bq-gap) - 10px) -3px; }
}

/* ----------------------------------------------- v3 · 7 · cuidado com o dado */
.cuidado-v3 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-inline-size: 52rem; }
@media (max-width: 720px) {
  .cuidado-v3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 8px; }
  .cuidado-v3 li { flex: 0 0 calc((100% - 16px) / 3); }
}

/* cores forçadas: a aba escolhida ganha um contorno de sistema (a sombra
   some nesse modo), e o risco do "visualizou" volta a aparecer */
@media (forced-colors: active) {
  .ramos-abas input:checked + label { outline: 3px solid Highlight; outline-offset: 1px; }
  .fila-espera s { text-decoration: line-through; }
  .fila-espera s::after { display: none; }
  .regua-trilho i, .regua-mini-trilho i, .funil-ponto { forced-color-adjust: none; background: CanvasText; }
}

/* sem transparência: o vidro das peças novas vira superfície sólida */
@media (prefers-reduced-transparency: reduce) {
  .funil-etapas li, .funil-saidas li { background: var(--sup-2); }
}

} /* @layer pecas */