/* ═══════════════════════════════════════════════════════════════
   STRIORT — legal pages (privacy / terms)
   Reuses the style.css tokens; only adds the document typography.
   ═══════════════════════════════════════════════════════════════ */

.legal {
  padding-top: 7.5rem;              /* room for the fixed nav */
  padding-bottom: 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal__head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.6rem;
  margin-bottom: 2.4rem;
}

.legal__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.8rem;
}

.legal h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--ink);
}

.legal__updated {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.legal__body { max-width: 46rem; }

.legal__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--brand-deep);
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
}

.legal__body p {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.legal__body a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__body a:hover { color: var(--brand-deep); }

.legal__intro p { color: var(--ink-soft); }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
}

.legal__back:hover { color: var(--brand-deep); }

/* ══ PROTOCOLOS E METODOLOGIAS ════════════════════════════════ */
.prot__lead {
  font-size: 1.12rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  font-weight: 500;
  margin-bottom: 2rem !important;
}
.prot h2 { margin-top: 2.2rem; }

/* Índice: um cartão por protocolo. Sem imagem e sem preço — quem
   chega aqui está escolhendo um assunto, não um produto. */
.prot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin: 1.6rem 0 0;
}
.prot__card {
  display: flex; align-items: center;
  min-height: 4.6rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none !important;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--ink) !important;
}
.prot__card:hover { border-color: var(--brand); color: var(--brand-deep) !important; }

.prot__cta {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin: 2.6rem 0 1.8rem;
}
.prot__cta .btn { text-decoration: none !important; }
/* A COR TEM DE SER REDITA AQUI. `.legal__body a` (uma classe + um
   elemento) vence `.btn--brand` (uma classe) na cascata, e pintava o
   texto do botao cheio de verde sobre verde -- invisivel. Dois nomes
   de classe bastam para virar o jogo; nao precisa de !important. */
.prot__cta .btn--brand { color: #ffffff; }
.prot__cta .btn--ghost { color: var(--ink); }
.prot__cta .btn--ghost:hover { color: var(--brand-deep); }

/* O aviso fecha toda página de protocolo. Pequeno, mas presente: os
   Termos dizem na cláusula 4.1 que estes produtos não são
   medicamentos, e uma página chamada "Lipedema" que não repetisse
   isso contradiria o contrato do próprio site. */
.prot__aviso {
  font-size: 0.78rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}

/* ── A trava do protocolo ─────────────────────────────────────
   Não é um erro nem uma porta na cara: é um convite. Por isso tem
   fundo de destaque e um botão, e não a cor de aviso. */
.proto__trava {
  background: var(--cream);
  border-radius: 0.8rem;
  padding: 1.3rem 1.4rem 1.5rem;
  margin-top: 1.2rem;
}
.proto__trava-tit {
  font-family: var(--font-display);
  font-size: 1rem !important; font-weight: 700;
  color: var(--ink) !important;
  margin: 0 0 0.4rem !important;
}
.proto__trava-txt {
  font-size: 0.9rem !important;
  color: var(--ink-soft) !important;
  margin: 0 0 1.1rem !important;
  max-width: 34rem;
}
.proto__trava .btn { text-decoration: none !important; }
.proto__trava .btn--brand { color: #ffffff; }
.proto__trava .btn--ghost { color: var(--ink); }
.proto__carregando {
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
  margin: 1.2rem 0 0 !important;
}
/* Botao pequeno. Vive aqui desde que so' copiar-e-salvar o usava;
   hoje e' o botao de todo cartao de protocolo e de kit. */
.btn--sm {
  padding: 0.45rem 0.9rem !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.09em;
}

/* A folha só existe durante a impressão. */
.proto-print { display: none; }

@media print {
  /* ESCONDE A PÁGINA, MOSTRA A FOLHA. Esconder por seletor de classe
     deixaria de fora qualquer bloco novo que alguém acrescentasse
     depois; esconder tudo e reabrir um só não deixa. */
  body > * { display: none !important; }
  body > .proto-print { display: block !important; }

  @page { margin: 18mm 16mm; }

  .proto-print {
    font-family: var(--font-body, system-ui), sans-serif;
    color: #000; font-size: 11pt; line-height: 1.5;
  }
  .proto-print__head {
    display: flex; align-items: baseline; gap: 0.6rem;
    border-bottom: 2px solid #000; padding-bottom: 6pt; margin-bottom: 14pt;
  }
  .proto-print__head strong { font-size: 13pt; letter-spacing: 0.04em; }
  .proto-print__head span { font-size: 13pt; }
  .proto-print h2 {
    font-size: 8.5pt; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; margin: 14pt 0 3pt;
  }
  .proto-print p { margin: 0; }
  .proto-print ol { margin: 4pt 0 0; padding-left: 16pt; }
  /* O passo não pode ser cortado ao meio pela quebra de página: quem
     lê isto está com as mãos ocupadas e lê de relance. */
  .proto-print li { margin-bottom: 5pt; break-inside: avoid; }
  .proto-print__nota {
    border: 1px solid #000; padding: 6pt 8pt; margin-bottom: 12pt;
    font-weight: 700; break-inside: avoid;
  }
  .proto-print__pe {
    margin-top: 18pt; padding-top: 6pt; border-top: 1px solid #999;
    font-size: 8pt; color: #444;
  }
}

/* ── Protocolo e kit no mesmo retangulo ───────────────────────
   Um retangulo por protocolo: o nome no alto, a foto a esquerda, e a
   direita as duas portas do protocolo mais a compra do kit.

   ANTES ERAM TRES BLOCOS SOLTOS -- o acordeao, uma lista de kits
   metros abaixo, e dois botoes de rodape. Numa pagina com dois
   protocolos, saber qual cartao pertencia a qual protocolo era
   adivinhacao pela ordem.

   A OFERTA CONTINUA FORA DA TRAVA. O botao de comprar nao pergunta
   quem e' voce; so' as duas portas do protocolo perguntam. Trancar a
   venda atras de um login e' esconde-la de quem a fecharia. */
.pk__lista { display: grid; gap: 1rem; margin: 1.2rem 0 0; }
.pk {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 1.2rem 1.3rem 1.3rem;
}
.pk:hover { border-color: var(--brand-soft); }
.pk__tit {
  margin: 0 0 0.3rem !important;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.02rem !important; font-weight: 700;
  color: var(--ink) !important;
}
/* O rendimento -- "enough for 60 sessions" -- e' o unico numero que
   diz o que a caixa rende. Fica sob o titulo, centralizado, onde os
   olhos ja estao. */
.pk__sub {
  margin: 0 auto 1.2rem !important;
  max-width: 30rem;
  text-align: center;
  font-size: 0.84rem !important;
  color: var(--ink-soft) !important;
}
.pk__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.3rem;
  align-items: center;
}

/* PLACEHOLDER, e assumido como tal. Nao ha foto destes kits, e usar a
   de outra caixa seria mostrar o produto errado a quem esta decidindo
   gastar algumas centenas de dolares. O kits.js troca por <img>
   sozinho assim que a foto existir no painel -- ninguem precisa
   voltar aqui. */
.pk__foto {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--cream);
  border-radius: 0.8rem;
}
.pk__foto svg {
  width: 2.4rem; height: 2.4rem;
  fill: none; stroke: var(--brand); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Com foto de verdade a moldura some: a caixa clara existia para o
   icone nao flutuar sozinho. */
.kit__foto--real { background: transparent; }
.kit__img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.6rem; }

.pk__lado { display: grid; gap: 0.45rem; justify-items: start; }
.pk__rot {
  margin: 0 !important;
  font-size: 0.62rem !important; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-deep) !important;
}
/* O segundo rotulo -- o do kit -- precisa respirar do bloco de cima.
   O primeiro nao, porque ja tem o titulo acima dele. */
.pk__rot:not(:first-child) { margin-top: 0.75rem !important; }
.pk__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* O !important nao e' preguica: .legal__body a tem especificidade
   (0,1,1) e venceria .pk__kit (0,1,0), pintando o texto do botao
   verde de verde. Ja aconteceu uma vez nesta folha. */
.pk__btns .btn { color: var(--ink) !important; text-decoration: none !important; }
.pk__btns .btn:hover { color: var(--brand-deep) !important; }
.pk__kit { color: #ffffff !important; text-decoration: none !important; }
/* ── O protocolo, aberto na coluna da direita ──────────────────
   Copiar e PDF levam a folha para FORA da tela. Ler e' outra coisa, e
   a coluna da direita estava vaga.

   UMA CAIXA SO', para recusa e para texto. Duas seriam dois lugares
   para a mesma pergunta -- o que o servidor respondeu? -- e um deles
   ficaria desatualizado.

   O TEXTO CONTINUA SEM EXISTIR NO HTML. Ele chega do servidor no
   clique, exatamente como nas outras duas portas. Abrir na tela nao
   afrouxa a trava; so' muda para onde o texto vai depois de liberado. */
.pk__saida { width: 100%; }
.pk__saida:not([hidden]) {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.pk__saida .proto__trava { margin-top: 0; }
.pk__saida h3 {
  font-size: 0.7rem !important; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft) !important; margin: 1.2rem 0 0.4rem !important;
}
.pk__saida h3:first-child { margin-top: 0 !important; }
.pk__saida p { font-size: 0.92rem !important; margin: 0 !important; }
/* Nomes de frasco, nao frase: monoespacado separa o que se pega da
   prateleira do que se le. */
.proto__prods {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem !important;
  color: var(--brand-deep) !important;
  line-height: 1.7 !important;
}
.proto__steps { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.proto__steps li {
  font-size: 0.92rem; line-height: 1.65;
  color: var(--ink); margin-bottom: 0.5rem;
}
.proto__steps li::marker { color: var(--brand); font-weight: 700; }
/* Aviso de sequencia ou de seguranca: primeira coisa dentro do bloco. */
.proto__nota {
  background: var(--cream); border-left: 3px solid var(--brand);
  padding: 0.7rem 0.9rem; margin: 0 0 1.2rem !important;
  font-size: 0.85rem !important;
}
/* Aberto, o texto fica muito mais alto que a foto. Alinhar pelo centro
   deixaria a foto boiando no meio de uma coluna de um metro. */
.pk--aberto .pk__row { align-items: start; }

@media (max-width: 34rem) {
  /* Em coluna a foto encolhe e centraliza: ocupar a largura toda
     empurraria os botoes para fora da primeira olhada. */
  .pk__row { grid-template-columns: 1fr; gap: 1rem; }
  .pk__foto { width: 6rem; justify-self: center; }
  .pk__lado { justify-items: stretch; }
  .pk__btns .btn, .pk__kit { flex: 1; justify-content: center; }
}