/* ==========================================================================
   Rok Ads — Scripts de Atendimento para Clínicas (/scripts-clinicas)
   Folha de UMA página só. Carrega DEPOIS de site.css e não redefine nada dela.
   Todo valor sai dos tokens de site.css: aqui não existe cor literal nova.

   O elemento assinatura da página é a CONVERSA. Ela é o fio: abre no
   "quanto custa", trava, e volta a andar quando entra a mensagem do material.
   Por isso a hierarquia de cor das falas carrega informação, e não decoração:

     superfície + hairline  = o paciente (quem chega)
     vinho                  = a voz da clínica, nos dois temas
     fio carmim + etiqueta  = essa fala saiu do material (o produto)
     tracejado              = ausência, silêncio, conversa parada

   O carmim aqui é MARCA, não preenchimento. Preencher três falas seguidas de
   carmim afogava a seção e ainda quebrava a leitura de que o vinho é a voz da
   clínica: no fio resgatado TODA fala da clínica vem do material, então a cor
   cheia não separaria nada. O fio de 3px na borda de fora, mais a etiqueta em
   carmim acima do balão, marcam a procedência sem gritar.

   O tracejado é o mesmo sinal que a .trail da página da Auditoria usa para
   "trecho às cegas". Reaproveitar o sinal mantém o site falando uma língua só.

   Nada aqui imita a interface do WhatsApp de propósito: sem verde, sem check
   duplo, sem barra de aplicativo. É a conversa desenhada com o alfabeto do
   site — hairline, mono, carmim, vinho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O FIO — bloco de conversa
   -------------------------------------------------------------------------- */
.conv{
  max-width:640px;
  margin-top:clamp(30px,4vw,44px);
}
.conv-wide{max-width:720px}

/* etiqueta do fio: diz quando estamos na conversa. É o que faz os blocos
   espalhados pela página lerem como UMA conversa, e não como vários exemplos. */
.conv-label{
  display:block;
  padding-bottom:1rem;
  margin-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.conv-label b{color:var(--accent-text);font-weight:500}

.conv-thread{display:flex;flex-direction:column;gap:.7rem}

/* ---------- a fala ---------- */
.msg{display:flex;align-items:flex-end;gap:.75rem;min-width:0}
.msg-in{justify-content:flex-start}
.msg-out{flex-direction:row-reverse}

/* a fala e a etiqueta de procedência viajam juntas e dividem a mesma largura */
.msg-body{
  min-width:0;
  max-width:min(30rem,calc(100% - 3.4rem));
  display:flex;flex-direction:column;align-items:flex-start;
}
.msg-out .msg-body{align-items:flex-end}

.msg-b{
  min-width:0;max-width:100%;
  padding:.76rem 1.05rem;
  font-size:.9688rem;line-height:1.55;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--body);
  /* canto vivo do lado de quem fala: dá direção sem precisar de rabicho */
  border-radius:var(--radius-sm) var(--radius-sm) var(--radius-sm) 3px;
}
.msg-b p{margin-bottom:.55em}
.msg-b p:last-child{margin-bottom:0}

.msg-out .msg-b{
  background:var(--vinho);
  border-color:var(--vinho);
  color:#FFFFFF;
  border-radius:var(--radius-sm) var(--radius-sm) 3px var(--radius-sm);
}
/* o vinho é o mesmo nos dois temas de propósito: é a voz da clínica,
   e trocar de cor com o tema faria a leitura mudar de significado. */
.msg-out .msg-b strong{color:#FFFFFF}

/* a fala que veio do material: fio carmim na borda de fora do balão.
   inset em vez de border para o fio acompanhar o arredondamento. */
.msg-script .msg-b{box-shadow:inset -3px 0 0 var(--accent)}

.msg-t{
  font-family:var(--mono);font-size:.6875rem;line-height:1.4;
  color:var(--muted);flex-shrink:0;padding-bottom:.42rem;
  white-space:nowrap;
}

/* etiqueta de procedência: fica FORA do balão, sobre o papel, onde o carmim de
   texto tem contraste de verdade. Dentro do vinho ela reprovaria em AA. */
.msg-tag{
  display:block;
  font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:.45rem;
}
.msg-out .msg-tag{text-align:right}

/* ---------- o silêncio ----------
   Mesma geometria da fala, sem preenchimento e com a borda tracejada:
   lê como o lugar onde uma mensagem caberia e não veio. */
.msg-mudo .msg-b{
  background:transparent;
  border:1px dashed var(--line-strong);
  color:var(--muted);
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.15rem;
}

/* ---------- o que acontece depois do silêncio ---------- */
.lapso{
  margin-top:1.5rem;
  border-top:1px solid var(--line);
}
.lapso li{
  display:grid;grid-template-columns:6.5rem 1fr;gap:.2rem .9rem;
  padding-block:.85rem;
  border-bottom:1px solid var(--line);
  font-size:.9375rem;color:var(--muted);
}
@media (max-width:479px){ .lapso li{grid-template-columns:1fr} }
.lapso b{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.06em;color:var(--accent-text);
  padding-top:.18em;
}

/* legenda embaixo do fio */
.conv-cap{
  margin-top:1.6rem;padding-top:1.15rem;
  border-top:1px solid var(--line);
  max-width:56ch;
}

/* --------------------------------------------------------------------------
   AS SETE PARADAS
   Os sete pontos são as paradas da mesma conversa. A coluna do meio mostra o
   que o paciente escreve — ou o tracejado, quando o que acontece é ele sumir.
   -------------------------------------------------------------------------- */
.paradas{margin-top:2.6rem;border-top:1px solid var(--line)}
.parada{
  display:grid;gap:.7rem 1.5rem;
  grid-template-columns:auto 1fr;
  align-items:start;
  padding-block:1.25rem;
  border-bottom:1px solid var(--line);
}
@media (min-width:860px){
  .parada{grid-template-columns:auto minmax(0,20rem) 1fr;align-items:center}
}
.parada-n{
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.06em;color:var(--accent-text);
  padding-top:.42em;
}
@media (min-width:860px){ .parada-n{padding-top:0} }
.parada-fala{grid-column:2;min-width:0}
.parada p{margin:0;font-size:.9688rem;line-height:1.6;color:var(--muted);grid-column:2}
@media (min-width:860px){ .parada p{grid-column:3} }

.chip{
  display:inline-block;max-width:100%;
  padding:.5rem .85rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm) var(--radius-sm) var(--radius-sm) 3px;
  font-size:.9375rem;line-height:1.45;color:var(--body);
}
.chip-mudo{
  background:transparent;border:1px dashed var(--line-strong);
  color:var(--muted);
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.62rem .85rem;
}

/* --------------------------------------------------------------------------
   O MIOLO DO MATERIAL
   Trecho do PDF com os campos variáveis marcados. Ver a mensagem já escrita
   é o argumento — por isso o trecho é texto de verdade, e não uma miniatura.
   -------------------------------------------------------------------------- */
.mat{
  margin-top:2.5rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.mat-head{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;
  padding:1rem clamp(20px,2.6vw,28px);
  border-bottom:1px solid var(--line);
  background:var(--shade);
}
.mat-head .eyebrow{margin-bottom:0}
.mat-pag{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-left:auto}
.mat-body{padding:clamp(20px,2.6vw,28px)}
.mat-item + .mat-item{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.mat-item h4{margin-bottom:.7rem}
.mat-item p{
  font-size:.9688rem;line-height:1.65;color:var(--body);margin:0;
}
/* campo que a secretária troca antes de enviar */
.campo{
  font-family:var(--mono);font-size:.85em;
  color:var(--accent-text);
  border-bottom:1px solid var(--accent);
  padding:.05em .18em;
  white-space:nowrap;
}
.mat-foot{
  padding:1rem clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line);
  background:var(--shade);
}
.mat-foot .note{margin:0}

/* --------------------------------------------------------------------------
   VOZES DE QUEM USA
   Mesma gramática de grade de .fit e .sintomas: hairline como separador,
   fundo do papel, sem cartão flutuante.
   -------------------------------------------------------------------------- */
.vozes{
  display:grid;gap:1px;margin-top:2.5rem;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
@media (min-width:820px){ .vozes{grid-template-columns:1fr 1fr} }
.voz{background:var(--bg);padding:clamp(24px,3vw,34px);margin:0}
.voz blockquote{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,1.5vw,1.14rem);letter-spacing:-.015em;
  line-height:1.45;color:var(--heading);
}
.voz figcaption{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.75rem;color:var(--muted);
}

/* --------------------------------------------------------------------------
   OFERTA E PREÇO
   -------------------------------------------------------------------------- */
.oferta-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem 1.3rem;align-items:center}
.preco-nota{margin-top:1.6rem;max-width:46ch}

/* --------------------------------------------------------------------------
   FECHO — a conversa recomeça
   -------------------------------------------------------------------------- */
.fecho .conv{margin-top:clamp(26px,3.5vw,38px)}
.fecho-nota{margin-top:1.4rem}

/* --------------------------------------------------------------------------
   MOVIMENTO
   A conversa entra em cascata: cada fala um pouco depois da anterior, para a
   leitura acompanhar a ordem em que as mensagens chegaram. É o mesmo .reveal
   de site.css, só com atraso — e some inteiro em prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.js .conv-thread .reveal:nth-child(2){transition-delay:.10s}
.js .conv-thread .reveal:nth-child(3){transition-delay:.20s}
.js .conv-thread .reveal:nth-child(4){transition-delay:.30s}
.js .conv-thread .reveal:nth-child(5){transition-delay:.40s}
.js .conv-thread .reveal:nth-child(6){transition-delay:.50s}
@media (prefers-reduced-motion:reduce){
  .js .conv-thread .reveal{transition-delay:0s !important}
}