/* Varden — componentes do site de uma página.
   Carregar depois de tokens.css. Aqui não há valores soltos: cores, espaços,
   cantos, letra e medidas vêm todos das variáveis de tokens.css.
   Telemóvel primeiro; dois pontos de quebra: 40rem (640 px) e 64rem (1024 px). */

/* ------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--altura-barra-computador);
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: var(--espessura-foco) solid var(--foco);
  outline-offset: var(--espessura-foco);
}

.v-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- Letra
   As classes .titulo-topo, .subtitulo… vêm de tokens.css com o tamanho do
   telemóvel (o <body> leva .texto-base). A partir de 64rem, oito delas
   crescem para os tamanhos da família letraNoComputador. */

@media (min-width: 64rem) {
  .titulo-topo { font-size: var(--letra-titulo-topo-computador); line-height: var(--entrelinha-titulo-topo-computador); }
  .titulo-seccao { font-size: var(--letra-titulo-seccao-computador); line-height: var(--entrelinha-titulo-seccao-computador); }
  .subtitulo { font-size: var(--letra-subtitulo-computador); line-height: var(--entrelinha-subtitulo-computador); }
  .texto-base { font-size: var(--letra-texto-base-computador); line-height: var(--entrelinha-texto-base-computador); }
  .numero-grande { font-size: var(--letra-numero-grande-computador); line-height: var(--entrelinha-numero-grande-computador); }
  .numero-telefone { font-size: var(--letra-numero-telefone-computador); line-height: var(--entrelinha-numero-telefone-computador); }
  .titulo-etapa { font-size: var(--letra-titulo-etapa-computador); line-height: var(--entrelinha-titulo-etapa-computador); }
  .numero-preco { font-size: var(--letra-numero-preco-computador); line-height: var(--entrelinha-numero-preco-computador); }
}

.etiqueta { text-transform: uppercase; }
.numero-grande, .numero-telefone, .v-numero__valor { font-variant-numeric: tabular-nums; }
.v-destaque { color: var(--marca); }
/* Títulos com linhas equilibradas; a frase de destaque não parte. */
.titulo-topo,
.titulo-seccao { text-wrap: balance; }
.titulo-topo .v-destaque,
.titulo-seccao .v-destaque { white-space: nowrap; }

/* ---------------------------------------------------------- Estrutura */

.v-contentor {
  width: 100%;
  max-width: calc(var(--largura-maxima) + 2 * var(--espaco-4));
  margin-inline: auto;
  padding-inline: var(--espaco-4);
}

.v-seccao { padding-block: var(--espaco-6); }
.v-seccao--superficie { background: var(--superficie); }

.v-cabecalho {
  display: grid;
  gap: var(--espaco-3);
  max-width: var(--largura-texto);
  margin-bottom: var(--espaco-5);
}
.v-cabecalho .etiqueta,
.v-cabecalho .subtitulo { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-contentor {
    max-width: calc(var(--largura-maxima) + 2 * var(--espaco-5));
    padding-inline: var(--espaco-5);
  }
  .v-seccao { padding-block: var(--espaco-7); }
  .v-cabecalho {
    justify-items: center;
    margin-inline: auto;
    margin-bottom: var(--espaco-6);
    text-align: center;
  }
}

/* --------------------------------------------------------------- Ícones */

.v-icone {
  width: var(--tamanho-icone);
  height: var(--tamanho-icone);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------- Botões
   A letra vem da classe .botao, posta no próprio botão. */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--altura-controlo);
  padding: 0 var(--espaco-4);
  border: var(--espessura-linha) solid transparent;
  border-radius: var(--raio-medio);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duracao), border-color var(--duracao), color var(--duracao);
}

.v-btn--principal { background: var(--marca); color: var(--sobre-marca); }
.v-btn--principal:hover { background: var(--marca-escura); }

.v-btn--secundario { background: var(--branco); border-color: var(--linha); color: var(--texto); }
.v-btn--secundario:hover { background: var(--superficie); border-color: var(--linha-forte); }

.v-btn--pequeno { min-height: var(--altura-controlo-pequeno); padding: 0 var(--espaco-3); }
.v-btn--bloco { display: flex; width: 100%; padding-inline: var(--espaco-3); }

.v-btn:disabled,
.v-btn[aria-disabled="true"] {
  background: var(--superficie);
  border-color: var(--superficie);
  color: var(--texto-secundario);
  cursor: not-allowed;
}

/* Ligação de texto */
.v-ligacao {
  color: var(--texto);
  text-decoration-line: underline;
  text-decoration-color: var(--marca);
  text-decoration-thickness: var(--espessura-linha);
  text-underline-offset: var(--afastamento-sublinhado);
  transition: color var(--duracao), text-decoration-color var(--duracao);
}
.v-ligacao:hover {
  color: var(--marca-escura);
  text-decoration-color: var(--marca-escura);
  text-decoration-thickness: var(--espessura-foco);
}
.v-ligacao:focus-visible { border-radius: var(--raio-pequeno); }
.v-ligacao[aria-disabled="true"] {
  color: var(--texto-secundario);
  text-decoration-line: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------ Barra do topo */

.v-barra {
  position: sticky;
  top: 0;
  z-index: var(--camada-barra);
  background: var(--fundo);
  border-bottom: var(--espessura-linha) solid transparent;
  transition: border-color var(--duracao);
}
.v-barra--rolada { border-bottom-color: var(--linha); }

.v-barra__dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: var(--altura-barra);
}

.v-nome { color: var(--texto); text-decoration: none; }
.v-nome:focus-visible { border-radius: var(--raio-pequeno); }

.v-barra__ligacoes { display: none; }
.v-barra__ligacao {
  color: var(--texto);
  text-decoration: none;
  text-underline-offset: var(--afastamento-sublinhado);
}
.v-barra__ligacao:hover { text-decoration-line: underline; text-decoration-color: var(--marca); }
.v-barra__ligacao:focus-visible { border-radius: var(--raio-pequeno); }

@media (min-width: 64rem) {
  .v-barra__dentro { min-height: var(--altura-barra-computador); }
  .v-barra__ligacoes { display: flex; gap: var(--espaco-5); margin-inline: auto; }
}

/* ----------------------------------------------------------------- Topo */

.v-topo { padding-block: var(--espaco-5); }

.v-topo__grelha { display: grid; gap: var(--espaco-5); }

.v-topo__texto { display: grid; gap: var(--espaco-3); justify-items: start; }
.v-topo__subtitulo { color: var(--texto-secundario); max-width: var(--largura-texto); }

.v-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-3);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-redondo);
  background: var(--branco);
  color: var(--texto);
}
.v-etiqueta__ponto {
  width: var(--espaco-2);
  height: var(--espaco-2);
  border-radius: var(--raio-redondo);
  background: var(--marca);
}

@media (min-width: 64rem) {
  .v-topo { padding-block: var(--espaco-7); }
  .v-topo__grelha {
    grid-template-columns: minmax(0, 1fr) var(--largura-bloco);
    align-items: center;
    gap: var(--espaco-6);
  }
}

/* ---------------------------------------------------- Bloco Experimente */

.v-experimente {
  display: grid;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-leve);
}

.v-experimente__rotulo { color: var(--texto-secundario); }

.v-experimente__numero {
  justify-self: start;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}

.v-experimente__acoes { display: grid; gap: var(--espaco-2); }
.v-experimente__nota { color: var(--texto-secundario); }

/* No telemóvel, "Ligar agora" é uma ligação tel:. Com rato (computador),
   o mesmo botão abre um painel com o número e um código QR. */
.v-so-rato { display: none; }

@media (hover: hover) and (pointer: fine) {
  .v-so-toque { display: none; }
  .v-so-rato { display: block; }
}

.v-marcar > summary { list-style: none; }
.v-marcar > summary::-webkit-details-marker { display: none; }
.v-marcar[open] > summary { background: var(--marca-escura); }

.v-marcar__painel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-2);
  padding: var(--espaco-3);
  background: var(--superficie);
  border-radius: var(--raio-medio);
}
.v-marcar__qr {
  width: var(--tamanho-qr);
  height: var(--tamanho-qr);
  padding: var(--espaco-2);
  background: var(--branco);
  border-radius: var(--raio-pequeno);
  color: var(--texto);
}
.v-marcar__qr svg { width: 100%; height: 100%; }
.v-marcar__texto { display: grid; gap: var(--espaco-1); }
.v-marcar__texto .texto-pequeno { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-experimente { gap: var(--espaco-3); padding: var(--espaco-5); }
}

/* --------------------------------------------------------------- Números */

.v-numeros { display: grid; gap: var(--espaco-5); }

.v-numero-principal { display: grid; gap: var(--espaco-3); }
.v-numero-principal__legenda { max-width: 20ch; }
.v-numero-principal__fonte { color: var(--texto-secundario); }

.v-numeros__lista {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: var(--espessura-linha) solid var(--linha);
}
.v-numero {
  display: grid;
  gap: var(--espaco-1);
  padding-block: var(--espaco-4);
  border-bottom: var(--espessura-linha) solid var(--linha);
}
.v-numero__legenda { color: var(--texto-secundario); }

/* O número do estudo vai em marca. Cada número pequeno leva um medidor:
   uma barra de 0 a 100 %, para comparar os canais de relance. */
.v-numero-principal .numero-grande { color: var(--marca); }

.v-medidor {
  grid-column: 1 / -1;
  display: block;
  height: var(--espaco-2);
  margin-top: var(--espaco-1);
  border-radius: var(--raio-redondo);
  background: var(--marca-suave);
  overflow: hidden;
}
.v-medidor__valor {
  display: block;
  width: calc(var(--valor) * 100%);
  height: 100%;
  border-radius: var(--raio-redondo);
  background: var(--marca);
}

@media (min-width: 64rem) {
  .v-numeros {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--espaco-6);
  }
  .v-numero {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: baseline;
    gap: var(--espaco-2) var(--espaco-4);
  }
  .v-medidor { margin-top: 0; }
}

/* ----------------------------------------------------------------- Passos */

.v-passos { display: grid; gap: var(--espaco-3); padding: 0; list-style: none; }

.v-passo {
  display: grid;
  grid-template-columns: var(--tamanho-medalha) minmax(0, 1fr);
  align-content: start;
  gap: var(--espaco-1) var(--espaco-3);
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
}
.v-passo__numero {
  display: grid;
  place-items: center;
  width: var(--tamanho-medalha);
  height: var(--tamanho-medalha);
  grid-row: span 2;
  border-radius: var(--raio-redondo);
  background: var(--marca-suave);
  color: var(--marca);
}
.v-passo__texto { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-4); }
  .v-passo { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-2); }
  .v-passo__numero { grid-row: auto; margin-bottom: var(--espaco-3); }
}

/* ----------------------------------------------------------------- Preços */

.v-preco {
  display: grid;
  gap: var(--espaco-4);
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-leve);
}

.v-preco__tabela {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-medio);
  overflow: hidden;
}
.v-preco__coluna { display: grid; align-content: start; gap: var(--espaco-1); padding: var(--espaco-3); }
.v-preco__coluna--lancamento {
  background: var(--marca-suave);
  border-left: var(--espessura-linha) solid var(--linha);
}
.v-preco__rotulo { color: var(--texto-secundario); }
.v-preco__valor { white-space: nowrap; }
.v-preco__valor--normal {
  color: var(--texto-secundario);
  text-decoration-line: line-through;
  text-decoration-thickness: var(--espessura-foco);
}
.v-preco__valor--lancamento { color: var(--marca); }
.v-preco__periodo,
.v-preco__condicao { color: var(--texto-secundario); }

.v-preco__lado { display: grid; align-content: start; gap: var(--espaco-4); }
.v-preco__acoes { display: grid; gap: var(--espaco-3); justify-items: center; }
.v-preco + .v-garantia { margin-top: var(--espaco-3); }

.v-lista-visto { display: grid; gap: var(--espaco-2); padding: 0; list-style: none; }
.v-lista-visto li {
  display: grid;
  grid-template-columns: var(--tamanho-icone) minmax(0, 1fr);
  gap: var(--espaco-2);
  align-items: start;
}
.v-lista-visto .v-icone { margin-top: var(--espaco-1); color: var(--texto); }

@media (min-width: 64rem) {
  .v-preco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--espaco-6);
    padding: var(--espaco-5);
  }
}

/* -------------------------------------------------------------- Garantia */

.v-garantia {
  display: grid;
  grid-template-columns: var(--tamanho-medalha) minmax(0, 1fr);
  gap: var(--espaco-3);
  align-items: start;
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
}
.v-garantia__icone {
  display: grid;
  place-items: center;
  width: var(--tamanho-medalha);
  height: var(--tamanho-medalha);
  border-radius: var(--raio-redondo);
  background: var(--marca-suave);
  color: var(--marca);
}
.v-garantia__corpo { display: grid; gap: var(--espaco-1); }
.v-garantia__texto { color: var(--texto-secundario); }

/* ---------------------------------------------------- Conversa WhatsApp */

.v-conversa {
  display: grid;
  gap: var(--espaco-2);
  max-width: var(--largura-bloco);
  padding: var(--espaco-3);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
}

.v-conversa__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-2);
  padding-bottom: var(--espaco-3);
  border-bottom: var(--espessura-linha) solid var(--linha);
}
.v-conversa__avatar {
  display: grid;
  place-items: center;
  width: var(--tamanho-medalha);
  height: var(--tamanho-medalha);
  border-radius: var(--raio-redondo);
  background: var(--texto);
  color: var(--fundo);
}
.v-conversa__quem { display: grid; }
.v-conversa__estado { color: var(--texto-secundario); }

.v-balao {
  display: grid;
  gap: var(--espaco-1);
  max-width: 85%;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-grande);
}
.v-balao--varden {
  justify-self: start;
  background: var(--superficie);
  border-bottom-left-radius: var(--raio-pequeno);
}
.v-balao--paciente {
  justify-self: end;
  background: var(--marca-suave);
  border-bottom-right-radius: var(--raio-pequeno);
}
.v-balao__hora {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--espaco-1);
  color: var(--texto-secundario);
}
.v-balao__hora .v-icone { width: var(--espaco-3); height: var(--espaco-3); }

.v-confirmado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  justify-self: center;
  margin-top: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-redondo);
  background: var(--apoio-suave);
  color: var(--apoio);
}
.v-confirmado .v-icone { width: var(--espaco-3); height: var(--espaco-3); stroke-width: 3; }

@media (min-width: 64rem) {
  .v-conversa { margin-inline: auto; }
}

/* ------------------------------------------------- Perguntas frequentes */

.v-perguntas {
  max-width: var(--largura-texto);
  margin-inline: auto;
  border-top: var(--espessura-linha) solid var(--linha);
}
.v-pergunta { border-bottom: var(--espessura-linha) solid var(--linha); }

.v-pergunta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding-block: var(--espaco-4);
  list-style: none;
  cursor: pointer;
}
.v-pergunta > summary::-webkit-details-marker { display: none; }
.v-pergunta > summary:focus-visible { border-radius: var(--raio-pequeno); }
.v-pergunta > summary .v-icone { color: var(--texto-secundario); transition: transform var(--duracao); }
.v-pergunta[open] > summary .v-icone { transform: rotate(45deg); }

.v-pergunta__resposta { padding-bottom: var(--espaco-4); color: var(--texto-secundario); }

/* ------------------------------------------------------------ Formulário */

.v-formulario { display: grid; gap: var(--espaco-3); max-width: var(--largura-bloco); }

.v-campo { display: grid; gap: var(--espaco-2); }
.v-campo__opcional { color: var(--texto-secundario); }

.v-campo__entrada {
  width: 100%;
  min-height: var(--altura-controlo);
  padding: 0 var(--espaco-3);
  border: var(--espessura-linha) solid var(--linha-forte);
  border-radius: var(--raio-medio);
  background: var(--branco);
  color: var(--texto);
  transition: border-color var(--duracao);
}
textarea.v-campo__entrada {
  min-height: var(--altura-area-texto);
  padding-block: var(--espaco-3);
  resize: vertical;
}
.v-campo__entrada::placeholder { color: var(--texto-secundario); opacity: 1; }
.v-campo__entrada:hover { border-color: var(--texto-secundario); }
.v-campo__entrada:focus-visible { border-color: var(--foco); outline-offset: var(--espessura-linha); }

.v-campo--erro .v-campo__entrada { border-color: var(--erro); }
.v-campo__erro { display: flex; align-items: center; gap: var(--espaco-1); color: var(--erro); }
.v-campo__erro .v-icone { width: var(--espaco-3); height: var(--espaco-3); }

.v-campo__entrada:disabled {
  background: var(--superficie);
  border-color: var(--linha);
  color: var(--texto-secundario);
  cursor: not-allowed;
}

.v-formulario__nota { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-formulario { margin-inline: auto; }
}

/* ---------------------------------------------------------------- Rodapé */

.v-rodape {
  padding-block: var(--espaco-6) var(--espaco-5);
  background: var(--fundo);
  border-top: var(--espessura-linha) solid var(--linha);
}

.v-rodape__grelha { display: grid; gap: var(--espaco-5); }
.v-rodape__marca { display: grid; align-content: start; gap: var(--espaco-2); justify-items: start; }
.v-rodape__lema { color: var(--texto-secundario); }

.v-rodape__titulo { margin-bottom: var(--espaco-3); color: var(--texto-secundario); }
.v-rodape__lista { display: grid; gap: var(--espaco-2); padding: 0; list-style: none; }
.v-rodape__lista a { color: var(--texto); text-decoration: none; text-underline-offset: var(--afastamento-sublinhado); }
.v-rodape__lista a:hover { text-decoration-line: underline; text-decoration-color: var(--marca); }
.v-rodape__lista a:focus-visible { border-radius: var(--raio-pequeno); }

.v-rodape__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  margin-top: var(--espaco-5);
  padding: var(--espaco-4) 0 0;
  border-top: var(--espessura-linha) solid var(--linha);
  color: var(--texto-secundario);
  list-style: none;
}
.v-rodape__legal a { color: var(--texto-secundario); text-underline-offset: var(--afastamento-sublinhado); }
.v-rodape__legal a:hover { color: var(--texto); }

@media (min-width: 40rem) {
  .v-rodape__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-rodape__marca { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .v-rodape { padding-block: var(--espaco-7) var(--espaco-5); }
  .v-rodape__grelha { grid-template-columns: 2fr 1fr 1fr; }
  .v-rodape__marca { grid-column: auto; }
}

/* =====================================================================
   Acrescentos de 11/11/2026: os oito componentes que faltavam ao site.
   Só tokens; nenhum valor solto.
   ===================================================================== */

/* -------------------------------------------- Topo: bloco com ligação
   O bloco Experimente e, por baixo, uma ligação de texto centrada.
   A ligação fica fora do bloco (o bloco não leva mais nada). */

.v-topo__lado { display: grid; gap: var(--espaco-3); align-content: start; }
.v-topo__lado > .v-ligacao { justify-self: center; }

/* ------------------------------------------------------ Nota de secção
   Uma linha solta depois do conteúdo de uma secção (por exemplo, por
   baixo dos passos). */

.v-nota-seccao {
  max-width: var(--largura-texto);
  margin-block: var(--espaco-5);
  color: var(--texto);
}
.v-nota-seccao:last-child { margin-bottom: 0; }

@media (min-width: 64rem) {
  .v-nota-seccao { margin-inline: auto; margin-block: var(--espaco-6); text-align: center; }
  .v-nota-seccao:last-child { margin-bottom: 0; }
}

/* ---------------------------------------------------- Tabela de preços
   Várias linhas (um produto por linha), preço normal riscado e coluna do
   lançamento em marca-suave. Vive dentro do cartão de preço (.v-preco). */

.v-tabela-precos {
  width: 100%;
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-medio);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.v-tabela-precos th,
.v-tabela-precos td {
  padding: var(--espaco-2);
  text-align: left;
  vertical-align: baseline;
  border-top: var(--espessura-linha) solid var(--linha);
}
.v-tabela-precos thead th {
  border-top: 0;
  vertical-align: bottom;
  color: var(--texto-secundario);
}
.v-tabela-precos .v-tabela-precos__num { text-align: right; }
.v-tabela-precos td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-tabela-precos .v-tabela-precos__lancamento {
  background: var(--marca-suave);
  border-left: var(--espessura-linha) solid var(--linha);
}
.v-tabela-precos td.v-tabela-precos__lancamento { color: var(--marca); }
.v-tabela-precos__normal {
  color: var(--texto-secundario);
  text-decoration-line: line-through;
  text-decoration-thickness: var(--espessura-foco);
}

@media (min-width: 64rem) {
  .v-tabela-precos th,
  .v-tabela-precos td { padding: var(--espaco-2) var(--espaco-3); }
}

/* ------------------------------------------------------------- Selo
   Etiqueta pequena e neutra («Em breve»). Nunca em marca (é ação) nem em
   apoio (é confirmado). Junto de um título, dentro de .v-com-selo. */

.v-com-selo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }

.v-selo {
  display: inline-flex;
  align-items: center;
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-redondo);
  background: var(--superficie);
  color: var(--texto-secundario);
}

/* ------------------------------------------------- Grelha de garantias
   Três cartões .v-garantia: empilhados no telemóvel, três colunas no
   computador, com o escudo por cima. */

.v-garantias { display: grid; gap: var(--espaco-3); }

@media (min-width: 64rem) {
  .v-garantias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-4); }
  .v-garantias .v-garantia { grid-template-columns: minmax(0, 1fr); align-content: start; }
}

/* ------------------------------------------------- Texto com assinatura
   Texto corrido (dois ou três parágrafos) e a assinatura de quem fala. */

.v-texto { display: grid; gap: var(--espaco-3); max-width: var(--largura-texto); }

.v-assinatura {
  display: grid;
  gap: var(--espaco-1);
  margin-top: var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: var(--espessura-linha) solid var(--linha);
}
.v-assinatura__nota { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-texto { margin-inline: auto; }
}

/* ---------------------------------------------- Ver todas as perguntas
   Um <details> no fim de .v-perguntas que guarda as restantes perguntas.
   Abre e fecha sem JavaScript; o sinal roda como nas perguntas. */

.v-perguntas__mais > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  padding-block: var(--espaco-4);
  list-style: none;
  cursor: pointer;
  color: var(--texto);
}
.v-perguntas__mais > summary::-webkit-details-marker { display: none; }
.v-perguntas__mais > summary:focus-visible { border-radius: var(--raio-pequeno); }
.v-perguntas__mais > summary > span {
  text-decoration-line: underline;
  text-decoration-color: var(--marca);
  text-decoration-thickness: var(--espessura-linha);
  text-underline-offset: var(--afastamento-sublinhado);
  transition: color var(--duracao), text-decoration-color var(--duracao);
}
.v-perguntas__mais > summary:hover > span {
  color: var(--marca-escura);
  text-decoration-color: var(--marca-escura);
  text-decoration-thickness: var(--espessura-foco);
}
.v-perguntas__mais > summary .v-icone { color: var(--texto-secundario); transition: transform var(--duracao); }
.v-perguntas__mais[open] > summary { border-bottom: var(--espessura-linha) solid var(--linha); }
.v-perguntas__mais[open] > summary .v-icone { transform: rotate(45deg); }

/* ------------------------------------------------------ Contacto direto
   Nome e email de quem responde, por baixo do formulário. */

.v-contacto {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  max-width: var(--largura-bloco);
  margin-top: var(--espaco-5);
  padding-top: var(--espaco-4);
  border-top: var(--espessura-linha) solid var(--linha);
}

.v-contacto__quem { display: grid; gap: var(--espaco-1); justify-items: start; }

/* Espaço redondo para a fotografia de quem responde. Vazio, é um círculo
   branco com contorno; com a fotografia, passa a <img class="v-retrato">. */
.v-retrato {
  flex: none;
  display: block;
  width: var(--tamanho-retrato);
  height: var(--tamanho-retrato);
  border-radius: var(--raio-redondo);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  object-fit: cover;
}

@media (min-width: 64rem) {
  .v-contacto { margin-inline: auto; }
}

/* ---------------------------------------------------- Experimente curto
   O bloco Experimente repetido antes do rodapé: sem a nota, centrado e da
   largura do bloco. A secção leva uma linha em cima, para se separar da
   secção anterior quando as duas estão em fundo. */

.v-seccao--experimente { border-top: var(--espessura-linha) solid var(--linha); }

.v-experimente--curto { max-width: var(--largura-bloco); margin-inline: auto; }
.v-experimente--curto .v-experimente__rotulo,
.v-experimente--curto .v-experimente__numero { justify-self: center; text-align: center; }

/* =====================================================================
   Acrescentos de 11/11/2026, segunda ronda: a voz no topo e os relatórios
   da secção de diagnóstico. Só tokens; nenhum valor solto.
   ===================================================================== */

/* -------------------------------------------------- Experimente com voz
   O bloco do topo mostra a AI a falar: o número como num ecrã de chamada,
   a onda da voz e a frase que a AI está a dizer. Por baixo, os botões de
   sempre. A onda é um SVG em linha (barras), sem animação. */

.v-chamada { display: grid; gap: var(--espaco-3); }

.v-chamada__cabecalho { display: flex; align-items: center; gap: var(--espaco-2); }
.v-chamada__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tamanho-medalha);
  height: var(--tamanho-medalha);
  border-radius: var(--raio-redondo);
  background: var(--texto);
  color: var(--fundo);
}
.v-chamada__quem { display: grid; min-width: 0; }
.v-chamada__numero {
  justify-self: start;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.v-chamada__numero:focus-visible { border-radius: var(--raio-pequeno); }
.v-chamada__clinica { color: var(--texto-secundario); }
.v-chamada__tempo {
  align-self: start;
  margin-left: auto;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}

.v-onda { width: 100%; height: auto; color: var(--marca); }
.v-onda rect { fill: currentColor; }

.v-chamada__fala { color: var(--texto); }

/* ------------------------------------------------------------ Documento
   Base dos relatórios mostrados no site: folha branca com título, data e
   o selo «Exemplo» à direita. */

.v-documento {
  display: grid;
  gap: var(--espaco-4);
  align-content: start;
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
}
.v-documento__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding-bottom: var(--espaco-3);
  border-bottom: var(--espessura-linha) solid var(--linha);
}
.v-documento__cabecalho > .v-selo { flex: none; }
.v-documento__titulo { display: grid; gap: var(--espaco-1); }
.v-documento__sub,
.v-documento__nota { color: var(--texto-secundario); }
.v-documento__destaque {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-1) var(--espaco-2);
}
.v-documento__destaque > .texto-pequeno { color: var(--texto-secundario); }

/* --------------------------------------------- Registo do diagnóstico
   Tabela dos contactos feitos à clínica: quando, canal e resultado.
   «Atendida» vai em apoio, sempre com o visto e a palavra. */

.v-registo { width: 100%; border-collapse: collapse; }
.v-registo th,
.v-registo td {
  padding: var(--espaco-2) var(--espaco-2) var(--espaco-2) 0;
  text-align: left;
  vertical-align: baseline;
  border-top: var(--espessura-linha) solid var(--linha);
}
.v-registo th:last-child,
.v-registo td:last-child { padding-right: 0; }
.v-registo thead th { padding-top: 0; border-top: 0; color: var(--texto-secundario); }
.v-registo__quando { white-space: nowrap; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.v-registo__ok { display: inline-flex; align-items: baseline; gap: var(--espaco-1); color: var(--apoio); }
.v-registo__ok .v-icone { align-self: center; width: var(--espaco-3); height: var(--espaco-3); stroke-width: 3; }
.v-registo__tarde { color: var(--texto-secundario); }

/* -------------------------------------------------------- Resumo semanal
   Uma mensagem de WhatsApp com os números da semana, dentro de
   .v-conversa. O balão ocupa a largura toda. */

.v-conversa__cabecalho > .v-selo { margin-left: auto; }
.v-balao--largo { max-width: 100%; }

.v-resumo { display: grid; gap: var(--espaco-1); padding: 0; list-style: none; }
.v-resumo li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-3); }
.v-resumo__valor { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- Relatório mensal
   Quatro números do mês e um gráfico de barras: as chamadas atendidas
   pela AI, por hora. Fora do horário em texto, no horário em linha-forte
   (3,3:1 sobre branco); a legenda diz qual é qual. */

.v-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-3) var(--espaco-4);
  padding: 0;
  list-style: none;
}
.v-kpi { display: grid; gap: var(--espaco-1); align-content: start; }
.v-kpi__legenda { color: var(--texto-secundario); }

.v-grafico { display: grid; gap: var(--espaco-2); }
.v-grafico__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-3);
  padding: 0;
  list-style: none;
  color: var(--texto-secundario);
}
.v-grafico__legenda li { display: inline-flex; align-items: center; gap: var(--espaco-2); }
.v-grafico__chave {
  flex: none;
  width: var(--espaco-2);
  height: var(--espaco-3);
  border-radius: var(--raio-barra) var(--raio-barra) 0 0;
  background: var(--linha-forte);
}
.v-grafico__chave--fora { background: var(--texto); }

.v-grafico__barras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-rows: 100%;
  align-items: end;
  gap: var(--espaco-1);
  height: var(--altura-grafico);
  padding-top: var(--espaco-4);
  border-bottom: var(--espessura-linha) solid var(--linha);
}
.v-grafico__barra {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: var(--largura-barra);
  height: calc(var(--valor) * 100%);
  border-radius: var(--raio-barra) var(--raio-barra) 0 0;
  background: var(--linha-forte);
}
.v-grafico__barra--fora { background: var(--texto); }
.v-grafico__valor {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: var(--espaco-1);
  color: var(--texto);
  white-space: nowrap;
}
.v-grafico__eixo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--espaco-1);
  padding: 0;
  list-style: none;
  color: var(--texto-secundario);
}
.v-grafico__eixo li { justify-self: center; white-space: nowrap; }

/* ---------------------------------------------- Secção de diagnóstico
   O relatório do diagnóstico ao lado do formulário; por baixo, o resumo
   semanal e o relatório mensal, cada um com a sua legenda. */

.v-diagnostico { display: grid; gap: var(--espaco-5); align-items: start; }
.v-relatorios { display: grid; gap: var(--espaco-5); margin-top: var(--espaco-6); }
.v-figura { display: grid; gap: var(--espaco-3); align-content: start; }
.v-figura > .v-conversa { max-width: none; margin-inline: 0; }
.v-figura__legenda { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-experimente--voz .v-chamada { padding: var(--espaco-4); background: var(--superficie); border-radius: var(--raio-medio); }
  .v-documento { padding: var(--espaco-5); }
  .v-diagnostico { grid-template-columns: minmax(0, 1fr) var(--largura-bloco); gap: var(--espaco-6); }
  .v-relatorios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); margin-top: var(--espaco-7); }
}

/* =====================================================================
   Acrescentos de 11/11/2026, terceira ronda: topo com o bloco a meio,
   passos em linhas alternadas com ecrãs e cartão de preço.
   Só tokens; nenhum valor solto.
   ===================================================================== */

/* -------------------------------------------------------- Topo com voz
   No computador, o bloco Experimente ocupa metade da largura. No
   telemóvel vem logo a seguir ao título e o subtítulo passa para baixo
   dele, para «Ligar agora» caber no primeiro ecrã. */

.v-topo__grelha--voz {
  grid-template-areas: "cabeca" "bloco" "sub" "ligacao";
  row-gap: var(--espaco-4);
}
.v-topo__cabeca { grid-area: cabeca; display: grid; gap: var(--espaco-3); justify-items: start; }
.v-topo__grelha--voz > .v-experimente { grid-area: bloco; }
.v-topo__grelha--voz > .v-topo__subtitulo { grid-area: sub; }
.v-topo__ligacao { grid-area: ligacao; justify-self: start; }

@media (min-width: 64rem) {
  .v-topo__grelha--voz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "cabeca bloco" "sub bloco" ". ligacao";
    align-items: start;
    gap: var(--espaco-3) var(--espaco-6);
  }
  .v-topo__cabeca { align-self: end; }
  .v-topo__ligacao { justify-self: center; }
}

/* -------------------------------------------------------------- Etapas
   Como funciona em três linhas alternadas: texto de um lado e um ecrã
   grande do outro. No telemóvel, o ecrã vem por baixo do texto. O número
   do passo é o de sempre (.v-passo__numero, marca sobre marca-suave). */

.v-etapas { display: grid; gap: var(--espaco-6); padding: 0; list-style: none; }
.v-etapa { display: grid; gap: var(--espaco-5); align-items: center; }
.v-etapa__texto {
  display: grid;
  gap: var(--espaco-3);
  justify-items: start;
  align-content: start;
  max-width: var(--largura-texto);
}
.v-etapa__texto > .v-passo__numero { grid-row: auto; }
.v-etapa__descricao { color: var(--texto-secundario); }
.v-etapa__ecra > .v-conversa { max-width: none; margin-inline: 0; }

@media (min-width: 64rem) {
  .v-etapas { gap: var(--espaco-7); }
  .v-etapa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espaco-6); }
  .v-etapa:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .v-etapa:nth-child(even) > .v-etapa__texto { order: 2; }
}

/* ---------------------------------------------------------------- Ecrã
   Um ecrã do produto, grande: folha branca com contorno, sem sombra.
   Dentro, só peças do sistema. */

.v-ecra {
  display: grid;
  gap: var(--espaco-4);
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
}
.v-ecra__voz {
  display: grid;
  gap: var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: var(--espessura-linha) solid var(--linha);
}

/* Linha do tempo de uma chamada: a entrar, a tocar na receção sem
   resposta, atendida pela AI (apoio, sempre com o visto e a palavra). */
.v-linha-tempo { display: grid; padding: 0; list-style: none; }
.v-linha-tempo__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tamanho-medalha) minmax(0, 1fr);
  align-items: center;
  gap: var(--espaco-3);
  padding-bottom: var(--espaco-4);
}
.v-linha-tempo__item:last-child { padding-bottom: 0; }
.v-linha-tempo__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--tamanho-medalha);
  bottom: 0;
  left: calc(var(--tamanho-medalha) / 2);
  border-left: var(--espessura-linha) solid var(--linha);
}
.v-linha-tempo__icone {
  display: grid;
  place-items: center;
  width: var(--tamanho-medalha);
  height: var(--tamanho-medalha);
  border-radius: var(--raio-redondo);
  background: var(--superficie);
  color: var(--texto);
}
.v-linha-tempo__texto { display: grid; }
.v-linha-tempo__nota { color: var(--texto-secundario); }
.v-linha-tempo__item--falhou .v-linha-tempo__icone { color: var(--texto-secundario); }
.v-linha-tempo__item--ok .v-linha-tempo__icone { background: var(--apoio-suave); color: var(--apoio); }
.v-linha-tempo__item--ok .v-linha-tempo__titulo { color: var(--apoio); }

/* Pedido para a receção: o pedido de um paciente, já escrito e resumido,
   dentro de um balão da conversa. */
.v-pedido__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.v-balao .v-selo { background: var(--branco); }
.v-pedido {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--espaco-2) var(--espaco-3);
}
.v-pedido dt { color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .v-ecra { padding: var(--espaco-5); }
}

/* ----------------------------------------------------- Cartão de preço
   No topo da secção de preço: o preço de lançamento em grande, o normal
   riscado ao lado, os destaques e o botão. Leva a sombra, como o bloco
   Experimente. */

.v-cartao-preco {
  display: grid;
  gap: var(--espaco-4);
  max-width: var(--largura-bloco);
  margin-inline: auto;
  padding: var(--espaco-4);
  background: var(--branco);
  border: var(--espessura-linha) solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-leve);
}
.v-cartao-preco__cabeca { display: grid; gap: var(--espaco-1); }
.v-cartao-preco__rotulo,
.v-cartao-preco__periodo,
.v-cartao-preco__nota { color: var(--texto-secundario); }
.v-cartao-preco__precos { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espaco-1) var(--espaco-3); }
.v-cartao-preco__valor { color: var(--marca); white-space: nowrap; }
.v-cartao-preco__antes {
  color: var(--texto-secundario);
  white-space: nowrap;
  text-decoration-line: line-through;
  text-decoration-thickness: var(--espessura-foco);
}

/* Por baixo do cartão, mais discretos: a tabela completa e o que está
   incluído, em duas colunas no computador. */
.v-oferta-detalhes { display: grid; gap: var(--espaco-5); margin-top: var(--espaco-6); }
.v-oferta-detalhes__coluna { display: grid; gap: var(--espaco-3); align-content: start; }

.v-lista-visto--discreta { gap: var(--espaco-1); color: var(--texto-secundario); }
.v-lista-visto--discreta li { grid-template-columns: var(--espaco-3) minmax(0, 1fr); }
.v-lista-visto--discreta .v-icone {
  width: var(--espaco-3);
  height: var(--espaco-3);
  margin-top: calc(var(--espaco-1) / 2);
  color: var(--texto-secundario);
}

@media (min-width: 64rem) {
  .v-cartao-preco { padding: var(--espaco-5); }
  .v-oferta-detalhes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-6); margin-top: var(--espaco-7); }
}