/* ==========================================================================
   Essence Tântric · coluna de leitura
   Autor: DEVOPS (Coneki) · 27/09/2026 · cliente Essence Tântric

   Pedido do dono, 27/09/2026: «a área de leitura dos artigos e algumas páginas
   ocupa apenas metade da página, haverá um sidebar à direita? Qual ideia?»

   A medição que originou isto, feita no ar a 1 440 px: o corpo de texto mede
   **654 px** dentro de um limite de **1 200 px** — 546 px de branco à direita,
   em todas as páginas de corpo corrido. A modalidade de massagem tântrica tem
   17 `<h2>` e 834 palavras; nada disso se anuncia em lado nenhum, e quem procura
   «preço» ou «como decorre» tem de rolar a página inteira.

   A resposta NÃO é alargar a linha de texto. A medida de 58 caracteres é o que
   mantém a leitura confortável (e é camada 3: verifica-se, não se opina). O que
   muda é a coluna que estava vazia passar a ter função:

     1. índice do que está escrito abaixo (só quando há dois títulos ou mais);
     2. o caminho para falar com o estúdio (WhatsApp, telefone e horário);
     3. as peças seguintes — nos artigos, os relacionados, que antes eram uma
        secção inteira no fim da página.

   Factos que decidem o desenho:

   1. Abaixo de 1 024 px não há coluna nenhuma, e o índice NÃO desce para baixo do
      corpo: uma lista de 17 títulos no fim de um texto que já foi lido não serve
      para nada. Em telemóvel fica o corpo e, por baixo, o bloco de contacto (com
      o horário, que a barra fixa da base não mostra) e as peças seguintes. Ver
      `acoes-mobile.css` para os dois botões fixos.
   2. A coluna da direita é `position: sticky` a acompanhar a leitura, com o mesmo
      afastamento da barra fixa que o painel da ficha de massagista já usa
      (`--altura-cabecalho` + um degrau): são a mesma ideia e devem medir o mesmo.
   3. Os `id` das âncoras são escritos no momento de renderizar (ver
      `App\Support\Indice`). O `[id] { scroll-margin-top: … }` do `cabecalho.css`
      já garante que a terraagem não esconde o título debaixo da barra.
   ========================================================================== */

.leitura-duas {
  display: grid;
  gap: var(--esp-10);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .leitura-duas {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--esp-16);
    align-items: start;
  }
}

/* O corpo mantém a medida de leitura do contrato: a coluna tem 1 200 − 300 − 64
   px, mas o texto continua travado nos 58 caracteres. */
.leitura__corpo { max-width: var(--medida-prosa); }

.leitura__lado {
  display: grid;
  gap: var(--esp-8);
  align-content: start;
}

@media (min-width: 1024px) {
  .leitura__lado {
    position: sticky;
    top: calc(var(--altura-cabecalho, 88px) + var(--esp-8));
  }
}

.leitura__bloco {
  display: grid;
  gap: var(--esp-3);
  align-content: start;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.leitura__rotulo {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--fs-legenda);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.leitura__lista {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.leitura__lista a {
  display: block;
  padding-block: var(--esp-2);
  min-height: var(--alvo-minimo);
  color: var(--cor-texto);
  font-size: var(--fs-corpo);
  line-height: 1.35;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.leitura__lista a:hover { border-bottom-color: var(--cor-acento); }

.leitura__item--fundo { padding-left: var(--esp-4); }

.leitura__item--fundo a {
  color: var(--cor-texto-suave);
  font-size: var(--fs-legenda);
}

.leitura__lista time {
  display: block;
  color: var(--cor-texto-suave);
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
}

.leitura__contacto .botao { width: 100%; }

.leitura__nota {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--fs-legenda);
  max-width: none;
}

.leitura__nota .ligacao-acao {
  color: var(--cor-marca);
  font-size: var(--fs-corpo);
}

/* --------------------------------------------------------------------------
   TELEMÓVEL — no fim da folha de propósito. Uma regra de telemóvel escrita a
   meio perde para as regras de bloco que vêm depois (mesma especificidade,
   última ganha) — foi o que aconteceu aqui na primeira tentativa: o índice
   continuava visível a 390 px.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* O índice não viaja para o fim da página: chega depois de o texto estar lido. */
  .leitura__indice { display: none; }

  /* O primeiro bloco da coluna empilhada não leva o fio de cima — fica a marcar
     uma separação onde já há espaço. */
  .leitura__lado > .leitura__bloco:first-child { border-top: 0; padding-top: 0; }
}