/* ==========================================================================
   Essence Tântric · grelha e cartão de equipa (27/09/2026)

   Este ficheiro nasceu de um pedido do dono: «eles [os cartões] devem ser iguais
   em termos de layout/estilo para todos os locais onde massagistas são listados».
   O cartão existia só na home, com as classes `h-*` e a folha `home.css` — que
   nenhuma outra página carrega. Agora vive aqui, com o nome do que é
   (`cartao-terapeuta`), e é pedido por todas as páginas que listam equipa: a
   home, a lista de massagistas, os arquivos de etiqueta, as modalidades, o spa e
   as páginas de cidade e serviço.

   As regras são as mesmas que estavam medidas em `home.css` (24 e 25/09/2026):
   nada aqui foi redesenhado, só mudou de casa e de nome. O que se ganhou é que
   um cartão só existe uma vez no sítio onde é usado — antes havia dois desenhos
   de cartão de massagista no mesmo site, e o da lista era o antigo.

   Anatomia: a fotografia é o cartão. Em cima a categoria do legado, em baixo o
   pé com o nome e as duas ações (Agendar agora / Ver fotos), assentes sobre a
   imagem a partir de 640 px e por baixo dela abaixo disso. Grelha de 2 colunas
   no telemóvel e 3 a partir de 1 024 px, com gavetas de medição `--2/--3/--4`.
   ========================================================================== */

/* Prólogo. Esta folha é pedida sozinha pelas páginas que não carregam o bundle
   (lista de massagistas, arquivos de etiqueta, cidade e serviço, modalidade,
   spa). Nesses sítios não existe `home.css`, onde estes três valores nascem, e
   sem eles o véu do cartão ficava sem cor e o movimento sem curva. Os valores
   são os mesmos; se um dia mudarem em `home.css`, mudam aqui. */
:root {
  --ec-noite: color-mix(in srgb, var(--cor-fundo-escuro) 92%, var(--cor-acento));
  --ec-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ec-dur-media: 620ms;
}

.grelha-terapeutas {
  --terapeutas-colunas: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--terapeutas-colunas), minmax(0, 1fr));
  gap: var(--esp-6) var(--esp-4);
}

/* A partir dos 640 px há largura para separar melhor as colunas (o número de
   colunas muda a 1 024 px, não aqui). */
@media (min-width: 640px) {
  .grelha-terapeutas { gap: var(--esp-8) var(--esp-6); }
}

/* Duas colunas até 1023 px, três a partir daí (24/09/2026 — pedido do dono:
   «aumente mais as fotos do card, precisamos deixar as massagistas mais
   visíveis»). Medido antes e depois, no renderizado:

   1 440 px  · 4 colunas: cartão 266x354 · fotografia 264x352  (a pessoa tem
               36% menos pixels do que passa a ter)
   1 440 px  · 3 colunas: cartão 363x483 · fotografia 360x480
   768 px    · 3 colunas: cartão 229x305 · pé com 44% da fotografia e os dois
               botões em duas filas (não cabiam numa)
   768 px    · 2 colunas: cartão 356x473 · pé com 18% e os botões numa fila

   Ou seja: o cartão de 768 px ficava mais pequeno do que o de 1 024 px, e o
   pé comia quase metade da fotografia. Duas colunas abaixo de 1 024 px resolve
   as duas coisas de uma vez e dá à fotografia um chão: nunca menos de 276 px de
   largura em ecrã nenhum.

   O custo é comprimento de página, e é real: a 1 440 px a secção passa de 7
   para 9 filas (+1 933 px numa página de 14 088 px) e a 768 px de 9 para 14
   filas (14 831 -> 18 376 px, ainda abaixo dos 19 524 px que o telemóvel já
   tinha). É o preço de ver a equipa e é a troca que o dono pediu.

   O número de colunas passa a viver numa só variável em todos os ecrãs: antes
   havia uma regra por breakpoint e outra para as variantes, e a variante perdia
   por ordem de ficheiro. Agora a variável é uma e as variantes escrevem-na por
   cima (`?cartoes=2|3|4` continua a servir a comparação). */
@media (min-width: 1024px) {
  .grelha-terapeutas { --terapeutas-colunas: 3; }
}

/* Variantes de medição: `?cartoes=` serve a mesma página com outro número de
   colunas, para a escolha ser feita com números e não a olho. O valor por omissão
   é o que fica. */
.grelha-terapeutas--2 { --terapeutas-colunas: 2; }
.grelha-terapeutas--3 { --terapeutas-colunas: 3; }
.grelha-terapeutas--4 { --terapeutas-colunas: 4; }

/* Medida da secção de equipa (27/09/2026). Pedido do dono: «os cards podem ser
   ainda um pouco maiores, tem espaço para mantermos três colunas e aumentarmos
   o máximo dentro das três colunas, sem permitir que as fotos sejam cortadas».
   O espaço existe e é medido: com a medida de prosa do contrato (1 200 px)
   sobram 240 px de ecrã a 1 440 px — 120 de cada lado — e o cartão fica com
   362,7 px de lado. Com uma medida própria da grelha de equipa, 1 360 px, o
   cartão passa a 416 px e a fotografia a 414x517 px: +23% de pixels de pessoa
   por cartão, com as mesmas três colunas e o mesmo gap de 24 px.

   Isto é uma medida de grelha de fotografias, não de texto: `--largura-conteudo`
   continua em 1 200 px em todo o resto do site, e nenhum bloco de prosa muda de
   linha por causa disto. A medida só custa entre 1 264 px e 1 440 px de ecrã;
   abaixo disso o ecrã é o limite e não a medida.

   `?equipa=1` (1 200, como estava) e `?equipa=3` (1 440, o máximo do ecrã) só
   existem em ensaio — servem a escolha feita com números, como as `?cartoes=`. */
:root { --largura-equipa: 1360px; }
.limite--equipa { max-width: var(--largura-equipa); }
html[data-equipa='1'] { --largura-equipa: 1200px; }
html[data-equipa='3'] { --largura-equipa: 1440px; }

/* Cartão de equipa (24/09/2026). Duas revisões no mesmo dia: a primeira deu-lhe
   retrato, nome e duas ações por baixo da imagem; a segunda mudou-lhe a
   anatomia por pedido do dono — «eles podessem ser a imagem completa com os
   botões na parte inferior, uma categoria na parte superior».

   O quadro tem duas peças: a caixa da fotografia (`__foto`), com a proporção e
   o recorte, e o pé (`__pe`), com o nome e as duas ações. A partir de 640 px o
   pé assenta sobre a fotografia; abaixo disso flui por baixo dela. A razão é
   medida, não gosto: a 390 px o pé tem 133 px e o cartão 228 px, ou seja 58% da
   fotografia tapada por texto. Entre 640 e 1440 px são 25% a 30%.

   Os dois véus não são decoração: são o que permite ler texto sobre 25
   fotografias diferentes, cada uma com a sua luz. Estão ancorados ao que
   protegem (véu próprio da etiqueta em cima, véu próprio do pé em baixo) em vez
   de serem percentagens fixas do cartão: assim acompanham o texto quando ele
   cresce, em vez de o deixarem a descoberto. O que fica medido é o pixel
   renderizado, não a intenção.

   Não há ligações aninhadas: o retrato é ligação com `tabindex="-1"` e
   `aria-hidden` porque o nome vai ao mesmo sítio e dois tabuladores para a
   mesma sala é ruído para quem navega por teclado. As ações são os botões do
   contrato (`x-ui.botao`): um cartão de equipa não inventa uma linguagem de
   botão só para si. */
.cartao-terapeuta { display: block; }

.cartao-terapeuta__quadro {
  position: relative;
  display: block;
  overflow: clip;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-fio);
  background: var(--ec-noite);
  color: var(--cor-texto-escuro);
}

/* A caixa da fotografia. 4:5 (27/09/2026). É a proporção dos ficheiros que
   servimos — as fotografias das massagistas são recortadas a 4:5 na origem
   (799x999, 1200x1500) — por isso, com a caixa na mesma proporção, o `cover`
   deixa de cortar: mostra 100% da fotografia, contra os 94% que o 3:4 mostrava.
   Era o pedido do dono: «sem permitir que as fotos sejam cortadas».

   O 3:4 existia por outro motivo (o pé, com o nome e dois botões de 44 px,
   tomava metade do cartão). A caixa mais alta resolve os dois lados ao mesmo
   tempo: o pé desce de 17,4% para 15,6% do cartão. */
.cartao-terapeuta__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: clip;
  background: var(--ec-noite);
}

.cartao-terapeuta__foto .placa {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* O recorte olha para o rosto: as capas do legado são retratos de corpo inteiro
   e o enquadramento a 20% do topo é o que mantém a cara dentro do quadro. */
.cartao-terapeuta__foto .placa img { width: 100%; height: 100%; object-position: 50% 20%; }

.cartao-terapeuta__retrato { position: absolute; inset: 0; display: block; color: inherit; }

/* O véu da fotografia: um assentamento leve em baixo, para a imagem não brigar
   com o véu do pé. O trabalho de contraste está nos dois véus ancorados. */
.cartao-terapeuta__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ec-noite) 42%, transparent) 0,
    transparent 46%
  );
}

/* A categoria do legado, em cima. Texto simples, sem pastilha: a etiqueta é a
   mesma em 26 dos 27 cartões e uma pastilha repetida 26 vezes vira padrão. O véu
   é do próprio rótulo (::before com z-index -1), não do cartão inteiro: assim
   segue o texto mesmo quando ele parte em duas linhas. */
.cartao-terapeuta__categoria {
  position: absolute;
  z-index: 2;
  top: var(--esp-4);
  left: var(--esp-4);
  right: var(--esp-4);
  margin: 0;
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  color: var(--cor-texto-escuro);
}

.cartao-terapeuta__categoria::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4)) calc(-1 * var(--esp-12));
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ec-noite) 94%, transparent) 0,
    color-mix(in srgb, var(--ec-noite) 90%, transparent) 52%,
    transparent 100%
  );
}

/* O rótulo tem duas casas e cada uma existe num só lado do breakpoint de
   640 px (27/09/2026, pedido do dono: no telemóvel o rótulo sai de cima da
   fotografia e vai para baixo do nome). Em ecrã grande vale o de cima; o do pé
   não é desenhado — nem ele, nem o véu que só faz sentido sobre fotografia. */
.cartao-terapeuta__categoria--pe,
.cartao-terapeuta__categoria--pe::before { display: none; content: none; }

/* O pé: nome e ações. `pointer-events: none` no embrulho e `auto` nas peças com
   destino — assim o vazio entre o nome e os botões também leva à ficha, e o
   cartão não tem zonas mortas. */
.cartao-terapeuta__pe {
  position: absolute;
  z-index: 2;
  inset: auto var(--esp-4) var(--esp-4);
  display: grid;
  gap: var(--esp-2);
  pointer-events: none;
}

.cartao-terapeuta__pe :is(a, .botao) { pointer-events: auto; }

/* O véu do pé, ancorado ao próprio pé e a sangrar até às arestas do cartão: é o
   que sustenta o nome sobre qualquer uma das 27 fotografias. Medido pixel a
   pixel, no quarto mais claro de cada caixa. */
.cartao-terapeuta__pe::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--esp-24)) calc(-1 * var(--esp-4) - 1px) calc(-1 * var(--esp-4) - 1px);
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--ec-noite) 0,
    color-mix(in srgb, var(--ec-noite) 96%, transparent) 38%,
    color-mix(in srgb, var(--ec-noite) 76%, transparent) 62%,
    transparent 100%
  );
}

.cartao-terapeuta__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-leve);
  font-size: clamp(1.3rem, 1.6vw, 1.75rem);
  line-height: 1.08;
  /* O tracking vem da composição em uso: o DM Serif e o Lora não querem o
     mesmo aperto do Cormorant. */
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--cor-texto-escuro);
}

.cartao-terapeuta__nome a {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ec-dur-media) var(--ec-ease);
}

/* Sobre fotografia não há hierarquia por esbatimento: o texto secundário do
   cartão continua osso, e a diferença faz-se no tamanho e no tracking. Um cinza
   a 3,5:1 sobre o véu seria bonito e ilegível. */
.cartao-terapeuta__zona,
.cartao-terapeuta__legenda {
  margin: 0;
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  color: var(--cor-texto-escuro);
}

/* As duas ações. O alvo tem 44 px de altura útil e cada botão cresce para
   ocupar a linha; em colunas estreitas (3 ou 4 por linha) os dois passam a duas
   linhas em vez de se espremerem — medido, não adivinhado. */
.cartao-terapeuta__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

.cartao-terapeuta__accoes .botao {
  flex: 1 1 auto;
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--fs-legenda);
}

/* O secundário do contrato é contorno de bordéus sobre papel (11,89:1). Sobre
   fotografia o mesmo contorno desaparece; aqui leva vidro escuro com texto osso,
   medido pixel a pixel por cima das capas. */
.cartao-terapeuta__accoes .botao--secundario {
  background: color-mix(in srgb, var(--ec-noite) 62%, transparent);
  color: var(--cor-texto-escuro);
  border-color: color-mix(in srgb, var(--cor-texto-escuro) 42%, transparent);
}

.cartao-terapeuta__accoes .botao--secundario:hover {
  background: color-mix(in srgb, var(--ec-noite) 80%, transparent);
}

/* O cartão é um contexto escuro: o anel de foco do papel (bordéus) não se vê
   sobre fotografia. Aqui vale o do contrato para fundo escuro. */
.cartao-terapeuta__quadro :focus-visible { outline-color: var(--cor-foco-escuro); }

/* Retrato que não existe: monograma dourado sobre a noite, nunca caixa vazia
   (§regra do contrato dos retratos). */
.cartao-terapeuta__monograma {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fonte-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--cor-acento-claro);
}

/* Fio de ouro que cresce a partir da esquerda: é o sinal de rato do cartão.
   Vive na caixa da fotografia (z-index 3), não no cartão: fica sempre no fundo
   da imagem, com ou sem o pé lá dentro. */
.cartao-terapeuta__fio {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ec-dur-media) var(--ec-ease);
}

/* --------------------------------------------------------------------------
   Telemóvel: a fotografia fica com a categoria em cima e o nome e as ações
   passam a fluir por baixo dela, sobre papel. É a resposta medida ao cartão de
   171 px por 228 px com um pé de 133 px: com o texto lá dentro, 58% da imagem
   ficava sob o véu. Fora da fotografia, o nome volta à tinta da marca e o
   secundário volta ao contorno do contrato (11,89:1 sobre papel).
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* O fundo do cartão deixa de ser a noite: com o pé fora da fotografia, o
     escuro do quadro ficava por trás do nome (medido: bordéus sobre noite,
     1,49:1). Aqui o escuro é só da caixa da fotografia. */
  .cartao-terapeuta__quadro { background: transparent; color: var(--cor-texto); }

  .cartao-terapeuta__pe {
    position: static;
    inset: auto;
    gap: var(--esp-3);
    margin-top: var(--esp-3);
    pointer-events: auto;
  }

  .cartao-terapeuta__pe::before { content: none; }

  /* O rótulo sai de cima da fotografia (27/09/2026, pedido do dono): a faixa
     escura comia o topo do retrato e era a primeira coisa que se via no cartão.
     Passa a viver no pé, por baixo do nome, sobre papel — onde não precisa de
     véu nenhum e a fotografia fica inteira à vista. O rótulo é longo
     («Massagem Tântrica», 15 caracteres) e a 171 px de cartão partia em duas
     linhas por 2 mm: com o tracking mais curto cabe numa. */
  .cartao-terapeuta__categoria--foto { display: none; }

  .cartao-terapeuta__categoria--pe {
    display: block;
    position: static;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
  }

  .cartao-terapeuta__nome { color: var(--cor-marca); }

  .cartao-terapeuta__zona,
  .cartao-terapeuta__legenda { color: var(--cor-texto-suave); letter-spacing: normal; text-transform: none; }

  .cartao-terapeuta__accoes .botao--secundario {
    background: transparent;
    color: var(--cor-marca);
    border-color: var(--cor-marca);
  }

  .cartao-terapeuta__accoes .botao--secundario:hover {
    background: color-mix(in srgb, var(--cor-marca) 8%, transparent);
  }

  .cartao-terapeuta__quadro :focus-visible { outline-color: var(--cor-foco); }
}

.cartao-terapeuta__quadro img { transition: transform var(--ec-dur-media) var(--ec-ease); }

.cartao-terapeuta__quadro { transition: border-color var(--ec-dur-media) var(--ec-ease); }

@media (hover: hover) and (pointer: fine) {
  /* O cartão responde inteiro, não só a ligação: o cursor em qualquer ponto do
     cartão (retrato, nome, ações) acende o mesmo gesto. E o teclado recebe o
     mesmo sinal por `:focus-within` — um efeito que só existe para quem tem
     rato é meia casa. */
  .cartao-terapeuta:hover .cartao-terapeuta__quadro img,
  .cartao-terapeuta:focus-within .cartao-terapeuta__quadro img { transform: scale(1.045); }

  .cartao-terapeuta:hover .cartao-terapeuta__fio,
  .cartao-terapeuta:focus-within .cartao-terapeuta__fio { transform: scaleX(1); }

  .cartao-terapeuta:hover .cartao-terapeuta__nome a,
  .cartao-terapeuta:focus-within .cartao-terapeuta__nome a { border-bottom-color: var(--cor-acento); }

  .cartao-terapeuta:hover .cartao-terapeuta__quadro,
  .cartao-terapeuta:focus-within .cartao-terapeuta__quadro {
    border-color: color-mix(in srgb, var(--cor-borda) 45%, var(--cor-acento));
  }

}

@media (prefers-reduced-motion: reduce) {
  .cartao-terapeuta__quadro img,
  .cartao-terapeuta__quadro,
  .cartao-terapeuta__fio,
  .cartao-terapeuta__nome a,
  .h-ato__placa .placa,
  .h-ato__placa .placa img { transition: none; }

  .cartao-terapeuta:hover .cartao-terapeuta__quadro img,
  .cartao-terapeuta:focus-within .cartao-terapeuta__quadro img { transform: none; }
}