/* ==================================================================
   Thai Massage by Jin Machado — folha de estilos principal
   ------------------------------------------------------------------
   1. Fontes          6. Massagens (faixa, cartões, carrossel)
   2. Cores e medidas 7. Sobre nós e Jin Machado
   3. Base            8. Marcações
   4. Peças comuns    9. Rodapé
   5. Cabeçalho e abertura  10. Páginas simples (privacidade, 404)
   As animações estão em animacoes.css.
   Pontos de quebra: 640px · 768px · 1024px · 1280px · 1648px
   ================================================================== */

/* ---------- 1. Fontes (guardadas no próprio site, sem pedidos ao Google) ---------- */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fontes/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fontes/fraunces.woff2") format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fontes/fraunces-italic.woff2") format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("../fontes/great-vibes.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Allura"; src: url("../fontes/allura.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- 2. Cores e medidas ---------- */
:root {
  --creme: #fbf7f2;        /* fundo */
  --branco: #ffffff;       /* cartões */
  --areia-clara: #f5ece1;  /* secções alternadas */
  --areia: #eadccb;
  --linha: #ebe0d3;
  --dourado: #b07e4f;      /* cor do logótipo: flores, filetes, destaques */
  --caramelo: #8f6237;     /* botões e escolhas */
  --caramelo-escuro: #7a5230;
  --cafe: #2b1f16;         /* títulos e fundos escuros */
  --texto-suave: #6e5f52;
  --verde: #1f6b44;        /* WhatsApp */
  --verde-escuro: #175535;

  --cafe-rgb: 43, 31, 22;
  --caramelo-rgb: 143, 98, 55;
  --dourado-rgb: 176, 126, 79;

  --letra: "Plus Jakarta Sans", system-ui, sans-serif;
  --letra-serifa: "Fraunces", Georgia, serif;
  --letra-logo: "Great Vibes", cursive;
  --letra-assinatura: "Allura", cursive;

  --suave: cubic-bezier(0.22, 0.61, 0.36, 1);
  --altura-barra: 4rem;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background: var(--creme);
  color: var(--cafe);
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.65;
  word-spacing: 0.12em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; word-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
fieldset { border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--areia); }
[hidden] { display: none !important; }

.so-leitores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar {
  position: fixed; top: .5rem; left: .5rem; z-index: 60;
  padding: .5rem 1rem; border-radius: 999px; background: var(--cafe); color: #fff;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* ---------- 4. Peças comuns ---------- */
.contentor { width: 100%; max-width: 108rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 40rem) { .contentor { padding-inline: 2rem; } }
@media (min-width: 64rem) { .contentor { padding-inline: 3rem; } }
@media (min-width: 80rem) { .contentor { padding-inline: 4rem; } }

/* palavras em destaque nos títulos: serifado fino, itálico, dourado */
.destaque { font-family: var(--letra-serifa); font-weight: 300; font-style: italic; color: var(--dourado); }

/* etiqueta pequena com ponto dourado */
.etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .75rem; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--branco); color: var(--texto-suave); font-size: .75rem; line-height: 1rem;
}
.etiqueta::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--dourado); }
.etiqueta--clara { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }

.titulo-seccao { max-width: 42rem; }
.titulo-seccao .etiqueta { margin-bottom: 1rem; }
.titulo-seccao h2 { font-size: 2rem; color: var(--cafe); }
.titulo-seccao--claro h2 { color: #fff; }
@media (min-width: 40rem) { .titulo-seccao h2 { font-size: 2.6rem; } }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding-inline: 1.5rem; border-radius: 999px;
  font-size: .95rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s;
}
.botao svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.botao--principal { background: var(--caramelo); color: #fff; }
.botao--principal:hover { background: var(--caramelo-escuro); }
.botao--contorno { border: 1px solid rgba(var(--caramelo-rgb), .4); color: var(--cafe); }
.botao--contorno:hover { border-color: var(--caramelo); background: var(--branco); }
.botao--whatsapp { background: var(--verde); color: #fff; }
.botao--whatsapp:hover { background: var(--verde-escuro); }
.botao--claro { border: 1px solid rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.botao--claro:hover { background: rgba(255,255,255,.15); }
.botao--largo { width: 100%; }

.vidro {
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.15); color: #fff;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}

/* seta que sai pelo canto e volta a entrar ao passar o rato */
.seta-desliza { position: relative; display: block; width: 1rem; height: 1rem; overflow: hidden; }
.seta-desliza svg { position: absolute; inset: 0; width: 1rem; height: 1rem; transition: transform .3s var(--suave); }
.seta-desliza svg + svg { transform: translate(-1rem, 1rem); }
a:hover > .seta-desliza svg, a:hover .seta-desliza svg { transform: translate(1rem, -1rem); }
a:hover > .seta-desliza svg + svg, a:hover .seta-desliza svg + svg { transform: none; }

/* ---------- Logótipo ---------- */
.lotus { color: var(--dourado); flex-shrink: 0; }
.ornamento { display: flex; align-items: center; gap: .5rem; color: var(--dourado); }
.ornamento::before, .ornamento::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6; }
.ornamento svg { width: .75rem; height: .75rem; fill: currentColor; flex-shrink: 0; }

.logo { display: inline-flex; align-items: center; gap: .625rem; line-height: 1; color: var(--cafe); }
.logo .lotus { width: 2.5rem; transition: width .3s; }
.logo__texto { display: flex; flex-direction: column; align-items: center; }
.logo__nome { padding-inline: .5rem; font-family: var(--letra-logo); font-size: 1.3rem; line-height: 1.3; white-space: nowrap; transition: font-size .3s; }
.logo .ornamento { width: 86%; }
.logo__assinatura { margin-top: .125rem; padding-inline: .25rem; font-family: var(--letra-assinatura); font-size: .9rem; line-height: 1.1; white-space: nowrap; color: rgba(var(--cafe-rgb), .8); transition: font-size .3s; }
@media (min-width: 40rem) {
  .logo { gap: .875rem; }
  .logo .lotus { width: 3.25rem; }
  .logo__nome { font-size: 1.6rem; }
  .logo__assinatura { font-size: 1rem; }
}

/* logótipo grande do rodapé (composição do cartão de visita) */
.logo-grande { display: inline-flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; color: var(--areia); }
.logo-grande .lotus { width: 7rem; }
.logo-grande__nome { margin-top: 1.75rem; font-family: var(--letra-logo); font-size: 15vw; }
.logo-grande .ornamento { width: 100%; max-width: 30rem; margin-top: -.25rem; }
.logo-grande__assinatura { margin-top: .5rem; font-family: var(--letra-assinatura); font-size: 2.2rem; color: rgba(255,255,255,.7); }
.logo-grande__lema { margin-top: .75rem; font-size: .875rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (min-width: 40rem) {
  .logo-grande .lotus { width: 8rem; }
  .logo-grande__nome { font-size: 7.5rem; }
  .logo-grande .ornamento { max-width: 34rem; }
  .logo-grande__assinatura { font-size: 2.6rem; }
}

/* ---------- 5. Cabeçalho ---------- */
.cabecalho { position: absolute; inset: 0 0 auto; z-index: 50; transition: background-color .3s; }
.cabecalho__barra { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; height: 5rem; }
.cabecalho__logo { justify-self: start; }
.cabecalho .logo { color: #fff; }
.cabecalho .logo__assinatura { color: rgba(255,255,255,.85); }

/* barra clara fixa (ao descer a página, com o menu aberto ou em páginas sem fotografia) */
.cabecalho.is-fixo { position: fixed; background: var(--creme); border-bottom: 1px solid var(--linha); }
.cabecalho.is-simples { position: sticky; top: 0; background: var(--creme); border-bottom: 1px solid var(--linha); }
.cabecalho.is-fixo .cabecalho__barra, .cabecalho.is-simples .cabecalho__barra { height: var(--altura-barra); }
.cabecalho.is-fixo .logo, .cabecalho.is-simples .logo { color: var(--cafe); }
.cabecalho.is-fixo .logo__assinatura, .cabecalho.is-simples .logo__assinatura { color: rgba(var(--cafe-rgb), .8); }
.cabecalho.is-fixo .logo .lotus, .cabecalho.is-simples .logo .lotus { width: 2.25rem; }
.cabecalho.is-fixo .logo__nome, .cabecalho.is-simples .logo__nome { font-size: 1.15rem; }
.cabecalho.is-fixo .logo__assinatura, .cabecalho.is-simples .logo__assinatura { font-size: .8rem; }
.cabecalho.is-menu { border-bottom-color: transparent; transition: none; }
@media (min-width: 40rem) {
  .cabecalho.is-fixo .logo .lotus, .cabecalho.is-simples .logo .lotus { width: 2.5rem; }
  .cabecalho.is-fixo .logo__nome, .cabecalho.is-simples .logo__nome { font-size: 1.25rem; }
  .cabecalho.is-fixo .logo__assinatura, .cabecalho.is-simples .logo__assinatura { font-size: .85rem; }
}

.menu { display: none; align-items: center; gap: 2rem; }
.menu a {
  position: relative; padding-block: .5rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85); transition: color .2s;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--dourado);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.menu a:hover, .menu a[aria-current] { color: #fff; }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.is-fixo .menu a, .is-simples .menu a { color: rgba(var(--cafe-rgb), .75); }
.is-fixo .menu a:hover, .is-fixo .menu a[aria-current], .is-simples .menu a:hover { color: var(--cafe); }

.cabecalho__acoes { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }

/* troca de língua PT | EN */
.lingua {
  display: flex; align-items: center; gap: .25rem; height: 2.25rem; padding-inline: .25rem; border-radius: 999px;
  font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: background-color .2s;
}
.lingua:hover { background: rgba(255,255,255,.1); }
.lingua span { padding: .25rem .625rem; border-radius: 999px; line-height: 1.25; }
.lingua .is-ativa { background: #fff; color: var(--cafe); }
.lingua--escura, .is-fixo .lingua, .is-simples .lingua { color: var(--cafe); box-shadow: inset 0 0 0 1px rgba(var(--caramelo-rgb), .25); }
.lingua--escura:hover, .is-fixo .lingua:hover, .is-simples .lingua:hover { background: var(--branco); }
.lingua--escura .is-ativa, .is-fixo .lingua .is-ativa, .is-simples .lingua .is-ativa { background: var(--cafe); color: #fff; }
.cabecalho .lingua { display: none; }

.botao-menu { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.botao-menu > span { display: flex; flex-direction: column; gap: .375rem; width: 1.25rem; }
.botao-menu i { display: block; height: 1px; background: #fff; transition: transform .2s; }
.is-fixo .botao-menu, .is-simples .botao-menu { border: 1px solid var(--linha); background: var(--branco); backdrop-filter: none; }
.is-fixo .botao-menu i, .is-simples .botao-menu i { background: var(--cafe); }
.botao-menu[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.botao-menu[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 40rem) { .cabecalho .lingua { display: flex; } }
@media (min-width: 64rem) {
  .cabecalho__barra { grid-template-columns: 1fr auto 1fr; }
  .menu { display: flex; }
  .botao-menu { display: none; }
}

/* menu do telemóvel: painel por baixo da barra, o resto da página escurece */
.menu-movel { position: fixed; inset: var(--altura-barra) 0 0; z-index: 40; }
.menu-movel__fundo { position: absolute; inset: 0; width: 100%; background: rgba(var(--cafe-rgb), .45); cursor: default; }
.menu-movel__painel {
  position: relative; max-height: 100%; overflow-y: auto; background: var(--creme);
  border-radius: 0 0 1.75rem 1.75rem; box-shadow: 0 30px 60px -30px rgba(var(--cafe-rgb), .6);
}
.menu-movel__painel .contentor { display: flex; flex-direction: column; padding-top: .25rem; padding-bottom: 1.5rem; }
.menu-movel li { border-bottom: 1px solid rgba(var(--caramelo-rgb), .1); }
.menu-movel nav a { display: flex; align-items: center; gap: .85rem; padding-block: .85rem; font-size: 1.12rem; font-weight: 500; line-height: 1.3; color: var(--cafe); transition: color .2s; }
@media (min-width: 40rem) { .menu-movel nav a { font-size: 1.25rem; padding-block: 1rem; } }
.menu-movel nav a:hover, .menu-movel nav a[aria-current] { color: var(--dourado); }
.menu-movel nav a b { width: 1.5rem; font-family: var(--letra-serifa); font-size: .85rem; font-style: italic; font-weight: 400; color: var(--dourado); }
.menu-movel nav a span { flex: 1; }
.menu-movel nav a i { font-size: .95rem; font-style: normal; color: var(--dourado); transition: transform .2s; }
.menu-movel nav a:hover i { transform: translateX(.25rem); }
.menu-movel .botao--whatsapp { margin-top: 1.5rem; }
.menu-movel__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; font-size: .875rem; color: var(--texto-suave); }
@media (max-width: 22.4375rem) { .menu-movel .numero { display: none; } }
@media (min-width: 40rem) { .menu-movel__rodape .lingua { display: none; } }
@media (min-width: 64rem) { .menu-movel { display: none; } }

/* ---------- Abertura ---------- */
.abertura { position: relative; isolation: isolate; min-height: max(34rem, 80svh); overflow: hidden; background: var(--cafe); color: #fff; }
.abertura__fotos { position: absolute; inset: 0; z-index: -10; }
.abertura__foto { position: absolute; inset: 0; overflow: hidden; visibility: hidden; z-index: 0; }
.abertura__foto.is-ativa { visibility: visible; z-index: 2; }
.abertura__foto.is-anterior { visibility: visible; z-index: 1; }
.abertura__foto img { width: 100%; height: 100%; object-fit: cover; }
.abertura::before, .abertura::after, .abertura__sombra { content: ""; position: absolute; z-index: -9; pointer-events: none; }
.abertura::before { inset: 0; background: linear-gradient(90deg, rgba(var(--cafe-rgb), .85), rgba(var(--cafe-rgb), .45), rgba(var(--cafe-rgb), .05)); }
.abertura::after { inset: 50% 0 0; background: linear-gradient(0deg, rgba(var(--cafe-rgb), .7), transparent); }
.abertura__sombra { inset: 0; background: rgba(var(--cafe-rgb), .35); }
@media (min-width: 40rem) { .abertura__sombra { display: none; } }

.abertura__conteudo { display: flex; flex-direction: column; justify-content: flex-end; min-height: max(34rem, 80svh); padding-top: 8rem; padding-bottom: 2.5rem; }
.abertura__texto { max-width: 42rem; }
.abertura .etiqueta { margin-bottom: 1.25rem; }
.abertura h1 { font-size: 2.6rem; line-height: 1.04; }
.abertura__texto > p:not(.etiqueta) { margin-top: 1.25rem; max-width: 32rem; color: rgba(255,255,255,.8); }
.abertura__botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (min-width: 40rem) {
  .abertura h1 { font-size: 3.8rem; }
  .abertura__texto > p:not(.etiqueta) { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 64rem) {
  .abertura h1 { font-size: 4.6rem; }
  .abertura__conteudo { padding-bottom: 4rem; }
}

/* botão principal: o círculo da seta cresce até encher o botão */
.botao-abertura {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 1rem; height: 3.5rem; padding: 0 .5rem 0 1.75rem; border-radius: 999px;
  background: #fff; color: var(--cafe); font-size: .98rem; font-weight: 500;
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.55); transition: color .5s;
}
.botao-abertura::before {
  content: ""; position: absolute; top: 50%; right: .5rem; z-index: -1; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--dourado); transform: translateY(-50%); transition: transform .5s var(--suave);
}
.botao-abertura:hover { color: #fff; }
.botao-abertura:hover::before { transform: translateY(-50%) scale(12); }
.botao-abertura__circulo { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: #fff; }
.botao-abertura--vidro {
  display: none; gap: .75rem; padding: 0 1.75rem; background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: background-color .3s, box-shadow .3s;
}
.botao-abertura--vidro::before { content: none; }
.botao-abertura--vidro:hover { background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
@media (min-width: 40rem) { .botao-abertura--vidro { display: inline-flex; } }

/* botão de pausa das fotografias: só aparece com o teclado */
.abertura__pausa { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 10; padding: .5rem 1rem; border-radius: 999px; background: #fff; color: var(--cafe); font-size: .875rem; }
.abertura__pausa:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

/* ---------- 6. Massagens ---------- */
/* faixa com as razões para marcar, sempre em movimento */
.faixa { overflow: hidden; padding-block: 1.25rem; border-bottom: 1px solid var(--linha); background: var(--creme); }
.faixa__mascara { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa__pista { display: flex; width: max-content; }
.faixa__grupo { display: flex; flex-shrink: 0; align-items: center; }
.faixa__nome { display: flex; align-items: center; white-space: nowrap; font-family: var(--letra-serifa); font-size: 1.125rem; font-style: italic; color: rgba(var(--cafe-rgb), .45); }
.faixa__nome .lotus { width: 1.75rem; margin-inline: 2.25rem; }
@media (min-width: 40rem) { .faixa__nome { font-size: 1.25rem; } }

.seccao { scroll-margin-top: var(--altura-barra); }
.massagens { padding-block: 3rem; background: var(--creme); }
.massagens__topo { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; text-align: center; }
.massagens__topo h2 { max-width: 48rem; font-size: 2.3rem; line-height: 1.08; color: var(--cafe); }
.massagens__topo > p { max-width: 36rem; margin-top: 1rem; color: var(--texto-suave); }
.chips { display: none; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 56rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1rem .375rem .5rem;
  border: 1px solid var(--dourado); border-radius: 999px; background: var(--branco); font-size: .875rem; line-height: 1.25rem; color: var(--cafe);
}
.chip__icone { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: 1px solid rgba(var(--dourado-rgb), .6); border-radius: 50%; color: var(--dourado); }
.chip__icone svg { width: .875rem; height: .875rem; }
@media (min-width: 40rem) {
  .massagens { padding-block: 4rem; }
  .massagens__topo h2 { font-size: 3.2rem; }
  .massagens__topo > p { font-size: 1.125rem; line-height: 1.75rem; }
  .chips { display: flex; }
}

/* carrossel em movimento contínuo */
.carrossel {
  position: relative; display: flex; gap: 1.25rem; overflow-x: auto; padding-top: .5rem; padding-bottom: 3rem;
  scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel.is-a-arrastar { cursor: grabbing; }
.carrossel > li { flex-shrink: 0; width: 66%; padding-top: .5rem; }
@media (min-width: 40rem) { .carrossel > li { width: calc((100% - 1.25rem) / 2); } }
@media (min-width: 64rem) { .carrossel > li { width: calc((100% - 2 * 1.25rem) / 3); } }
@media (min-width: 80rem) { .carrossel > li { width: calc((100% - 3 * 1.25rem) / 4); } }
@media (min-width: 103rem) { .carrossel > li { width: calc((100% - 4 * 1.25rem) / 5); } }

/* forma em arco, inspirada nas janelas dos templos tailandeses (3:4 → semicírculo perfeito) */
.arco-34 { border-radius: 50% 50% 1.5rem 1.5rem / 37.5% 37.5% 1.5rem 1.5rem; }
.arco-34-interior { border-radius: 50% 50% 1.1rem 1.1rem / 38.5% 38.5% 1.1rem 1.1rem; }
.arco-35 { border-radius: 50% 50% 1.75rem 1.75rem / 30% 30% 1.75rem 1.75rem; }
.arco-35-interior { border-radius: 50% 50% 1.35rem 1.35rem / 30% 30% 1.35rem 1.35rem; }

.cartao {
  position: relative; isolation: isolate; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; outline: none;
  background: var(--cafe); color: #fff; text-align: center;
  box-shadow: 0 22px 36px -26px rgba(var(--cafe-rgb), .7); transition: transform .5s var(--suave), box-shadow .3s;
}
.cartao:hover { transform: translateY(-.375rem); }
.cartao:focus-visible { box-shadow: 0 0 0 4px var(--creme), 0 0 0 6px var(--dourado); }
.cartao__foto { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); -webkit-user-drag: none; }
.cartao::before { content: ""; position: absolute; inset: 0; z-index: -10; background: linear-gradient(180deg, rgba(58,38,23,.1), rgba(58,38,23,.2), rgba(var(--cafe-rgb), .95)); }
.cartao__camada { position: absolute; inset: 0; z-index: -10; background: linear-gradient(180deg, rgba(176,126,79,.95), rgba(138,90,51,.95), rgba(74,45,27,.97)); transform: translateY(100%); transition: transform .5s var(--suave); }
.cartao__moldura { position: absolute; inset: .625rem; border: 1px solid var(--dourado); pointer-events: none; transition: border-color .5s; }
.cartao__preco {
  position: absolute; top: 11%; left: 50%; transform: translateX(-50%); padding: .25rem .875rem;
  border: 1px solid var(--dourado); border-radius: 999px; background: rgba(var(--cafe-rgb), .55); font-size: .75rem; line-height: 1rem; white-space: nowrap;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity .3s;
}
.cartao__corpo { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 19% 1rem 1.25rem; }
.cartao__base { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; }
.cartao__icone {
  display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: .75rem;
  border: 1px solid var(--dourado); border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cartao__icone svg { width: 1.25rem; height: 1.25rem; }
.cartao h3 { font-family: var(--letra-serifa); font-size: 1.35rem; font-weight: 400; line-height: 1.1; letter-spacing: normal; }
.cartao__filete { width: 2.5rem; height: 1px; margin-block: .625rem; background: rgba(255,255,255,.5); }
.cartao__resumo-movel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: .8rem; line-height: 1.375; color: rgba(255,255,255,.85); }
.cartao__duracoes { display: none; flex-wrap: wrap; justify-content: center; gap: .375rem; }
.cartao__duracoes li { padding: .125rem .625rem; border: 1px solid var(--dourado); border-radius: 999px; font-size: .75rem; line-height: 1rem; color: rgba(255,255,255,.9); }
.cartao__dica {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: .625rem; padding: .25rem .75rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.1);
  font-size: .7rem; font-weight: 500; line-height: 1rem; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cartao__dica b { color: var(--dourado); font-weight: 500; }
.cartao__revela {
  width: 100%; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: max-height .5s var(--suave), opacity .5s var(--suave), transform .5s var(--suave), margin .5s var(--suave);
}
.cartao__resumo { display: none; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .875rem; line-height: 1.375; color: rgba(255,255,255,.9); }
.cartao__precos { margin-top: .25rem; text-align: left; font-size: .875rem; line-height: 1.6; }
.cartao__precos li { display: flex; align-items: baseline; gap: .5rem; }
.cartao__precos li span:first-child { color: rgba(255,255,255,.8); }
.cartao__precos li i { flex: 1; border-bottom: 1px dotted rgba(255,255,255,.4); }
.cartao__precos li span:last-child { font-weight: 500; }
.cartao__marcar {
  position: relative; z-index: 10; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; margin-top: .75rem; padding-inline: 1.25rem;
  border-radius: 999px; background: #fff; color: var(--cafe); font-size: .875rem; font-weight: 500; transition: background-color .2s;
}
.cartao__marcar:hover { background: var(--areia); }
.cartao__marcar svg { width: 1rem; height: 1rem; }

/* cartão aberto: ao passar o rato, com o teclado ou com um toque */
.cartao:hover .cartao__foto, .cartao:focus-within .cartao__foto { transform: scale(1.1); }
.cartao:hover .cartao__camada, .cartao:focus-within .cartao__camada { transform: none; }
.cartao:hover .cartao__moldura, .cartao:focus-within .cartao__moldura { border-color: rgba(255,255,255,.45); }
.cartao:hover .cartao__preco, .cartao:focus-within .cartao__preco { opacity: 0; }
.cartao:hover .cartao__icone, .cartao:focus-within .cartao__icone,
.cartao:hover .cartao__resumo-movel, .cartao:focus-within .cartao__resumo-movel,
.cartao:hover .cartao__duracoes, .cartao:focus-within .cartao__duracoes,
.cartao:hover .cartao__dica, .cartao:focus-within .cartao__dica { display: none; }
.cartao:hover .cartao__filete, .cartao:focus-within .cartao__filete { margin-block: .5rem; }
.cartao:hover .cartao__revela, .cartao:focus-within .cartao__revela { max-height: 20rem; margin-top: .25rem; opacity: 1; transform: none; pointer-events: auto; }

@media (min-width: 40rem) {
  .cartao__corpo { padding-inline: 1.25rem; padding-bottom: 1.5rem; }
  .cartao__icone { display: flex; }
  .cartao h3 { font-size: 1.55rem; }
  .cartao__resumo-movel { display: none; }
  .cartao__duracoes { display: flex; }
  .cartao__dica { display: none; }
  .cartao__resumo { display: -webkit-box; }
  .cartao__precos { margin-top: .75rem; }
  .cartao__marcar { min-height: 2.75rem; margin-top: 1rem; }
}
/* ecrãs táteis grandes (tablets): também mostram a dica do toque */
@media (min-width: 40rem) and (pointer: coarse) { .cartao__dica { display: inline-flex; } }

/* barra de deslocamento do carrossel */
.carrossel__controlo { display: flex; align-items: center; gap: 1.25rem; margin-top: -1rem; user-select: none; -webkit-user-select: none; }
.carrossel__pista-texto { display: flex; flex-shrink: 0; align-items: center; gap: .625rem; font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--cafe-rgb), .7); }
.carrossel__pista-texto svg { width: 1.5rem; height: .75rem; color: var(--dourado); }
.carrossel__pista-texto .toque { display: none; }
@media (pointer: coarse) { .carrossel__pista-texto .rato { display: none; } .carrossel__pista-texto .toque { display: inline; } }
.carril { position: relative; display: flex; flex: 1; align-items: center; height: 2rem; border-radius: 999px; cursor: grab; touch-action: none; outline: none; }
.carril:focus-visible { box-shadow: 0 0 0 2px rgba(var(--caramelo-rgb), .4); }
.carril.is-a-arrastar { cursor: grabbing; }
.carril__linha { width: 100%; height: 1px; background: rgba(var(--dourado-rgb), .25); transition: height .2s; }
.carril__indicador { position: absolute; top: 50%; left: 0; height: 3px; border-radius: 999px; background: var(--dourado); transform: translateY(-50%); transition: height .2s; }
.carril:hover .carril__linha { height: 2px; }
.carril:hover .carril__indicador, .carril.is-a-arrastar .carril__indicador { height: 5px; }
@media (min-width: 40rem) { .carrossel__controlo { gap: 2rem; } }

/* ---------- 7. Sobre nós ---------- */
.sobre { overflow: hidden; padding-block: 3.5rem; background: var(--areia-clara); }
.sobre__grelha { display: grid; align-items: center; gap: 3rem; }
.sobre__texto > p { max-width: 36rem; margin-top: 1.5rem; color: var(--texto-suave); }
/* razões em cartões, cada um com um pequeno desenho (2 largos em cima, 3 estreitos em baixo);
   no computador ocupam a largura toda, por baixo do texto e das fotografias */
.razoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.razao { display: flex; flex-direction: column; grid-column: span 1; padding: .75rem .75rem 1rem; border: 1px solid var(--linha); border-radius: 1.25rem; background: var(--branco); }
.razao--larga, .razao:last-child { grid-column: span 2; }
.razao__desenho { display: grid; place-items: center; min-height: 7.5rem; margin-bottom: 1rem; padding: .875rem; overflow: hidden; border-radius: .875rem; background: var(--areia-clara); color: var(--dourado); }
.razao h3 { margin-top: auto; padding-inline: .25rem; font-size: 1.05rem; color: var(--cafe); }
.razao p { margin-top: .25rem; padding-inline: .25rem; font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }
.razao--escura { border-color: var(--cafe); background: var(--cafe); }
.razao--escura .razao__desenho { background: rgba(255,255,255,.06); }
.razao--escura h3 { color: var(--creme); }
.razao--escura p { color: rgba(251,247,242,.72); }
.razao__precos { display: grid; gap: .375rem; width: 100%; }
.razao__precos li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .4rem .875rem; border-radius: 999px; background: var(--branco); font-size: .8rem; color: var(--cafe); }
.razao__precos b { font-family: var(--letra-serifa); font-size: .95rem; font-weight: 400; color: var(--caramelo); white-space: nowrap; }
.razao__conversa { display: grid; gap: .375rem; width: 100%; font-size: .78rem; line-height: 1.4; }
.razao__conversa span { justify-self: end; max-width: 88%; padding: .5rem .75rem; border-radius: 1rem 1rem .25rem 1rem; background: #dcefe3; color: var(--verde-escuro); }
.razao__conversa small { justify-self: start; padding: .375rem .75rem; border-radius: 1rem 1rem 1rem .25rem; background: var(--branco); font-size: .75rem; color: var(--texto-suave); }
.razao .lotus { width: 5.5rem; }
.razao__icone { width: 4.25rem; height: 4.25rem; }
.razao__aneis {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--cafe); color: var(--areia);
  box-shadow: 0 0 0 .875rem rgba(var(--dourado-rgb), .08), 0 0 0 calc(.875rem + 1px) rgba(var(--dourado-rgb), .25), 0 0 0 1.875rem rgba(var(--dourado-rgb), .05), 0 0 0 calc(1.875rem + 1px) rgba(var(--dourado-rgb), .18);
}
.razao__aneis svg { width: 1.375rem; height: 1.375rem; }
.sobre__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sobre__foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--cafe); }
.sobre__foto:first-child { margin-bottom: 2rem; }
.sobre__foto:last-child { margin-top: 2rem; }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.sobre__foto:hover img { transform: scale(1.05); }
.sobre__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(58,38,23,.35), transparent 50%); }
.sobre__foto::after { content: ""; position: absolute; inset: .625rem; z-index: 2; border: 1px solid rgba(255,255,255,.45); border-radius: 999px 999px 0 0; pointer-events: none; }
@media (min-width: 40rem) {
  .sobre { padding-block: 5rem; }
  .sobre__texto > p { font-size: 1.125rem; line-height: 1.75rem; }
  .razoes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .razao, .razao:last-child { grid-column: span 2; }
  .razao--larga { grid-column: span 3; }
  .sobre__fotos { gap: 1.25rem; }
  .sobre__foto:first-child { margin-bottom: 5rem; }
  .sobre__foto:last-child { margin-top: 5rem; }
}
@media (min-width: 64rem) {
  .sobre__grelha { grid-template-columns: 1.1fr 1fr; gap: 3.5rem 5rem; }
  .sobre__texto { grid-area: 1 / 1; }
  .sobre__fotos { grid-area: 1 / 2; }
  .razoes { grid-area: 2 / 1 / 3 / 3; gap: 1rem; }
}

/* ---------- Jin Machado ---------- */
.jin { padding-block: 3.5rem; background: var(--creme); }
.jin__grelha { display: grid; align-items: center; gap: 2.5rem; }
.jin__retrato { position: relative; width: 100%; max-width: 12rem; margin-inline: auto; }
.jin__arco { position: relative; isolation: isolate; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cafe); box-shadow: 0 30px 60px -35px rgba(var(--cafe-rgb), .75); }
.jin__monograma { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: linear-gradient(180deg, #3b2a1d, var(--cafe)); text-align: center; }
.jin__monograma span:first-child { font-family: var(--letra-logo); font-size: 3.75rem; line-height: 1; color: var(--dourado); }
.jin__monograma span:last-child { margin-top: 1.5rem; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.jin__moldura { position: absolute; inset: .625rem; border: 1px solid rgba(255,255,255,.3); pointer-events: none; }
.jin__bio { max-width: 42rem; margin-top: 1.5rem; color: var(--texto-suave); }
@media (min-width: 40rem) {
  .jin { padding-block: 5rem; }
  .jin__retrato { max-width: 24rem; }
  .jin__arco { aspect-ratio: 3 / 5; }
  .jin__monograma span:first-child { font-size: 7rem; }
  .jin__monograma span:last-child { margin-top: 2.5rem; }
  .jin__bio { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 64rem) {
  .jin__grelha { grid-template-columns: minmax(0, 26rem) 1fr; gap: 5rem; }
  .jin__retrato { margin-inline: 0; }
}

/* ---------- 8. Marcações (estilos em marcacoes.css) ---------- */
.marcar { padding-block: 3.5rem; background: var(--areia-clara); }
.marcar .titulo-seccao { margin-bottom: 2.5rem; }
.marcar__intro { max-width: 36rem; margin-top: 1rem; color: var(--texto-suave); }
@media (min-width: 40rem) { .marcar { padding-block: 5rem; } }

/* ---------- 9. Rodapé ---------- */
.rodape { position: relative; isolation: isolate; overflow: hidden; background: var(--cafe); color: rgba(255,255,255,.75); scroll-margin-top: var(--altura-barra); }
.rodape__fundo { position: absolute; inset: 0; z-index: -10; }
.rodape__fundo img { width: 100%; height: 100%; object-fit: cover; }
.rodape__fundo::before, .rodape__fundo::after, .rodape::before { content: ""; position: absolute; pointer-events: none; }
.rodape__fundo::before { inset: 0; background: linear-gradient(90deg, rgba(var(--cafe-rgb), .85), rgba(var(--cafe-rgb), .55), rgba(var(--cafe-rgb), .85)); }
.rodape__fundo::after { inset: 0 0 50%; background: linear-gradient(180deg, rgba(var(--cafe-rgb), .6), transparent); }
.rodape::before { inset: 66.6% 0 0; z-index: -9; background: linear-gradient(0deg, rgba(var(--cafe-rgb), .9), transparent); }

.rodape__grelha { display: grid; align-items: center; gap: 3rem; padding-block: 4rem; }
.rodape__local { width: 100%; }
.rodape__cartao { margin-top: 1.5rem; padding: 1rem; border-radius: 1.25rem; }
.rodape__dados { padding: 1rem .25rem 0; }
.rodape__morada { display: block; font-weight: 500; color: #fff; }
.rodape__nota { display: block; margin-top: .25rem; font-size: .875rem; color: rgba(255,255,255,.7); }
.rodape__dados .botao { margin-top: 1rem; }
.rodape__horario { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); color: #fff; }
.rodape__horario > p { margin-bottom: .5rem; font-size: .875rem; font-weight: 500; }
.horario { font-size: .875rem; }
.horario div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .1875rem; }
.horario dt { color: rgba(255,255,255,.6); }
.horario dd { text-align: right; white-space: nowrap; }
.horario-vazio { font-size: .875rem; color: rgba(255,255,255,.6); }

.rodape__marca { display: flex; flex-direction: column; align-items: center; width: fit-content; margin-inline: auto; text-align: center; }
.rodape__lema { max-width: 28rem; margin-top: 2rem; font-size: .875rem; }
.rodape__contactos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2rem; margin-top: 1.25rem; font-size: .875rem; }
.rodape__contactos a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: #fff; transition: color .2s; }
.rodape__contactos a:hover { color: var(--dourado); }
.rodape__contactos svg { width: 1rem; height: 1rem; }

.rodape__fim { border-top: 1px solid rgba(255,255,255,.1); }
.rodape__fim .contentor { display: flex; flex-direction: column; gap: .25rem; padding-block: 1rem; font-size: .75rem; color: rgba(255,255,255,.6); }
.rodape__fim nav { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.rodape__fim nav a { display: inline-flex; align-items: center; min-height: 2.75rem; transition: color .2s; }
.rodape__fim nav a:hover { color: #fff; }
@media (min-width: 40rem) {
  .rodape__grelha { padding-block: 6rem; }
  .rodape__cartao { padding: 1.25rem; }
}
@media (min-width: 48rem) { .rodape__fim .contentor { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 64rem) {
  .rodape__grelha { grid-template-columns: auto 1fr; gap: 4rem; }
  .rodape__local { width: 30rem; }
  .rodape__marca { margin-right: 0; margin-left: auto; }
}

/* mapa: só carrega depois de o visitante o pedir (o Google pode guardar cookies) */
.mapa { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .75rem; background: rgba(var(--cafe-rgb), .6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__botao { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding-inline: 1.5rem; color: #fff; text-align: center; }
.mapa__desenho { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255,255,255,.07); }
.mapa__pino { position: relative; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #fff; color: var(--cafe); box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); transition: transform .2s; }
.mapa__pino svg { width: 1.5rem; height: 1.5rem; }
.mapa__botao:hover .mapa__pino { transform: translateY(-.25rem); }
.mapa__botao strong { position: relative; font-size: .875rem; font-weight: 500; }
.mapa__botao small { position: relative; font-size: .75rem; color: rgba(255,255,255,.6); }

/* ---------- 10. Páginas simples ---------- */
.pagina { max-width: 48rem; padding-block: 3.5rem; }
.migalhas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; font-size: .875rem; color: var(--texto-suave); }
.migalhas a:hover { color: var(--caramelo); }
.migalhas [aria-current] { color: var(--cafe); }
.pagina h1 { font-size: 2.25rem; color: var(--cafe); }
.texto-legal { margin-top: 2rem; }
.texto-legal p, .texto-legal ul { margin-bottom: 1rem; color: var(--texto-suave); }
.texto-legal h2 { margin: 2.5rem 0 .75rem; font-size: 1.5rem; color: var(--cafe); }
.texto-legal ul { list-style: disc; padding-left: 1.25rem; }
.texto-legal li + li { margin-top: .25rem; }
.texto-legal a { color: var(--caramelo); text-decoration: underline; text-decoration-color: var(--dourado); text-underline-offset: 4px; }
.texto-legal strong { color: var(--cafe); font-weight: 600; }
.erro { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding-block: 5rem; text-align: center; }
.erro .lotus { width: 6rem; }
.erro .etiqueta { margin-top: 1.5rem; }
.erro h1 { margin-top: .75rem; font-size: 2.25rem; }
.erro > p:not(.etiqueta) { max-width: 28rem; margin-top: 1rem; color: var(--texto-suave); }
.erro__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
@media (min-width: 40rem) {
  .pagina { padding-block: 5rem; }
  .pagina h1, .erro h1 { font-size: 3rem; }
}
/* páginas simples: só logótipo e botão, sem menu ao centro */
@media (min-width: 64rem) { .cabecalho.is-simples .cabecalho__barra { grid-template-columns: 1fr auto; } }

/* Jin Machado: fotografia carregada no painel (substitui o monograma) */
.jin__foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.jin__arco.tem-foto .jin__monograma { display: none; }
.jin__moldura { z-index: 1; }
.jin__bio p + p { margin-top: 1rem; }

/* ---------- Perguntas frequentes ---------- */
.perguntas { padding-block: 3.5rem; background: var(--creme); }
.perguntas__grelha { display: grid; gap: 2rem; }
.perguntas__texto { max-width: 26rem; margin-top: 1rem; color: var(--texto-suave); }
.perguntas__texto a { font-weight: 500; color: var(--caramelo); text-decoration: underline; text-underline-offset: 3px; }
.perguntas__texto a:hover { color: var(--caramelo-escuro); }
.perguntas__foto img { display: none; }
/* cada pergunta num cartão, com o "+" num círculo escuro */
.perguntas__lista { display: grid; gap: .625rem; }
.pergunta { padding-inline: 1.25rem .75rem; border: 1px solid var(--linha); border-radius: 1.25rem; background: var(--branco); }
.pergunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 1.15rem;
  font-size: 1.05rem; font-weight: 500; line-height: 1.35; color: var(--cafe); cursor: pointer; list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { color: var(--caramelo); }
.pergunta summary i {
  display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--cafe); color: var(--creme);
  transition: transform .3s var(--suave), background-color .3s, color .3s;
}
.pergunta summary i svg { width: 1rem; height: 1rem; }
.pergunta[open] summary i { transform: rotate(45deg); background: var(--dourado); color: #fff; }
.pergunta__resposta { padding: 0 3rem 1.25rem 0; color: var(--texto-suave); animation: aparece .35s ease both; }
.pergunta__resposta p + p { margin-top: .75rem; }
@media (min-width: 40rem) {
  .perguntas { padding-block: 5rem; }
  .pergunta summary { font-size: 1.12rem; padding-block: 1.1rem; }
}
@media (min-width: 64rem) {
  .perguntas__grelha { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; }
  .perguntas__topo { position: sticky; top: calc(var(--altura-barra) + 2rem); }
  /* fotografia por baixo do texto */
  .perguntas__foto { position: relative; aspect-ratio: 4 / 3; margin-top: 2rem; overflow: hidden; border-radius: 1.5rem; background: var(--areia); }
  .perguntas__foto img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* horário agrupado ("Segunda a Sexta · 10:00–13:00 · 14:00–20:00") */
.horario div { align-items: baseline; padding-block: .45rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.horario div:last-child { border-bottom: 0; }
.horario dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .45rem; white-space: normal; }
.horario dd span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.horario dd i { font-style: normal; color: var(--dourado); }
.horario .is-fechado dd { color: rgba(255,255,255,.55); }
.horario .is-hoje dt { color: var(--dourado); font-weight: 500; }
.horario .is-hoje dt::after { content: attr(data-hoje); margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: rgba(var(--dourado-rgb), .2); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); }

/* ---------- espaços entre secções: o mesmo em todas ---------- */
:root { --espaco-seccao: 2.5rem; }
@media (min-width: 40rem) { :root { --espaco-seccao: 3rem; } }
.massagens, .sobre, .jin, .marcar, .perguntas, .rodape__grelha { padding-block: var(--espaco-seccao); }
/* massagens: menos espaço à volta da barra "Arraste" */
.carrossel__controlo { margin-top: -1.5rem; }
.massagens__topo { margin-bottom: 1.5rem; }
/* retrato da Jin mais baixo no computador, para a secção não parecer maior que as outras */
@media (min-width: 40rem) {
  .jin__retrato { max-width: 22rem; }
  .jin__arco { aspect-ratio: 3 / 4; }
}
/* menu com 6 itens: numa só linha também em ecrãs de 1024 px */
.menu a { white-space: nowrap; }
@media (min-width: 64rem) and (max-width: 79.99rem) { .menu { gap: 1.25rem; } .menu a { letter-spacing: .1em; } }

/* ---------- contraste (texto pequeno em dourado sobre fundo claro) ---------- */
.faixa__nome { color: rgba(var(--cafe-rgb), .65); }
.menu-movel nav a b, .menu-movel nav a i, .menu-movel nav a:hover, .menu-movel nav a[aria-current] { color: var(--caramelo); }
.lingua .so-leitores { padding: 0; }
.cabecalho .lingua--sempre { display: flex; }
.erro > p.erro__ingles { margin-top: 2.5rem; font-size: .9rem; }
.erro__ingles a { color: var(--caramelo); text-decoration: underline; text-underline-offset: 3px; }
/* páginas simples (privacidade): logótipo, PT/EN e botão cabem no telemóvel */
@media (max-width: 39.99rem) {
  .is-simples .cabecalho__acoes { gap: .375rem; }
  .is-simples .cabecalho__acoes .botao { padding-inline: .9rem; font-size: .85rem; }
  .is-simples .lingua span:not(.so-leitores) { padding: .2rem .5rem; }
}
.texto-legal a[href^="tel:"] { white-space: nowrap; }