/* =====================================================================
   BELLE CHAMBRE — folha de estilo
   Mobile primeiro. As cores, tipos e medidas estão todas nas variáveis
   abaixo: para ajustar a aparência, mude-as aqui.
   ===================================================================== */

:root {
  /* ---- Cor do redesenho v1.0 (direção 5): as cores reais da fachada e do estúdio ---- */
  --areia: #EDE4D8;          /* fundo claro (abertura, página) */
  --areia-2: #E5D9CA;        /* fundo claro alternativo (Trabalhos, Marcação) */
  --cafe: #1B1511;           /* fundo escuro (Serviços, Estúdio, rodapé) */
  --texto-claro: #23201B;    /* texto sobre os fundos claros */
  --texto-claro-2: #5E5448;  /* texto secundário sobre os fundos claros */
  --texto-escuro: #F3ECE3;   /* texto sobre o café */
  --texto-escuro-2: #C8B9A7; /* texto secundário sobre o café */
  --acento-claro: #3B2A20;   /* acento nas partes claras (castanho da caixilharia); texto por cima: --texto-escuro */
  --acento-escuro: #C69C6D;  /* acento nas partes escuras (dourado da madeira); texto por cima: --cafe */
  --cartao: #FFFDFA;         /* cartões (publicações, ofertas) */

  /* Papéis que os componentes usam. Cada classe de secção (.sec-clara, .sec-clara-2, .sec-escura)
     redefine estes seis; aqui ficam os valores da parte clara, que é a da página. */
  --fundo: var(--areia);
  --texto: var(--texto-claro);
  --texto-2: var(--texto-claro-2);
  --acento: var(--acento-claro);
  --acento-texto: var(--texto-escuro);
  --linha: rgba(35, 32, 27, 0.16);

  /* Tipografia: Brown Sugar só em nome, títulos, números grandes e faixa (só tem maiúsculas);
     Belleza em todo o texto; Cormorant itálico só na frase francesa. */
  --fonte-marca: "Brown Sugar", "Brown Sugar reserva", Georgia, serif;
  --fonte-texto: "Belleza", "Belleza reserva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-acento: "Cormorant Garamond", "Cormorant reserva", Georgia, serif;

  /* Movimento e forma */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --raio-g: 28px;
  --sombra: 0 1px 2px rgba(60, 40, 25, 0.1), 0 14px 30px rgba(60, 40, 25, 0.14), 0 40px 80px rgba(60, 40, 25, 0.18); /* cartões sobre o claro */

  /* Medidas */
  --contentor: 76rem;
  --margem: 1.25rem;
  --cabecalho: 4.25rem;    /* altura do cabeçalho fixo (usada no scroll-padding) */
  --raio: 4px;
  --espaco-seccao: 4.5rem;

  /* Movimento: só transform, opacity e clip-path. As saídas duram cerca de 65% das entradas. */
  --ease-entrada: cubic-bezier(.22, 1, .36, 1);
  --ease-saida: cubic-bezier(.4, 0, 1, 1);
  --dur-curta: 200ms;
  --dur-media: 450ms;
  --dur-longa: 900ms;
  --dur-saida: 290ms;
}

@media (min-width: 900px) {
  :root {
    --margem: 3rem;
    --cabecalho: 4.75rem;
    --espaco-seccao: 7rem;
  }
}

/* ---------- Classes de secção: cada uma define o fundo e os papéis de cor ----------
   Os componentes usam só --fundo, --texto, --texto-2, --acento, --acento-texto e --linha. */
.sec-clara, .sec-clara-2 {
  --fundo: var(--areia);
  --texto: var(--texto-claro);
  --texto-2: var(--texto-claro-2);
  --acento: var(--acento-claro);
  --acento-texto: var(--texto-escuro);
  --linha: rgba(35, 32, 27, 0.16);
}
.sec-clara-2 { --fundo: var(--areia-2); }
.sec-escura {
  --fundo: var(--cafe);
  --texto: var(--texto-escuro);
  --texto-2: var(--texto-escuro-2);
  --acento: var(--acento-escuro);
  --acento-texto: var(--cafe);
  --linha: rgba(243, 236, 227, 0.14);
}
.sec-clara, .sec-clara-2, .sec-escura { background: var(--fundo); color: var(--texto); }

/* ---------- Tipos de letra alojados no site (licenças ao lado dos ficheiros) ----------
   Brown Sugar e Belleza têm preload no <head>. Se chegarem depois da primeira pintura, a troca
   ("swap") faz-se a partir de uma letra de reserva com as mesmas medidas (altura acima e abaixo
   da linha e largura aproximada, medidas no Chromium), para o texto não saltar (CLS 0). */
@font-face {
  font-family: "Brown Sugar";
  src: url("../fonts/brown-sugar.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Belleza";
  src: url("../fonts/belleza-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Reservas com as medidas da Brown Sugar (subida 95%, descida 29%) e da Belleza (93%, 22%).
   O size-adjust também encolhe os overrides, por isso estes vão divididos por ele (95 / 0,896 = 106). */
@font-face {
  font-family: "Brown Sugar reserva";
  src: local("Georgia");
  size-adjust: 89.6%;
  ascent-override: 106%;
  descent-override: 32.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Belleza reserva";
  src: local("Arial"), local("Helvetica");
  size-adjust: 89%;
  ascent-override: 104.5%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}
/* Reserva da frase francesa (na abertura, à vista ao carregar): Georgia itálico com a largura do Cormorant
   itálico ("La vie est belle," mede 0,797 da Georgia no Chromium) e a sua altura (subida 92,4%, descida 28,7%). */
@font-face {
  font-family: "Cormorant reserva";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 79.7%;
  ascent-override: 116%;
  descent-override: 36%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

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

html {
  /* Altura do cabeçalho fixo + folga: as âncoras não ficam escondidas.
     Não usar também scroll-margin nas secções (somaria duas vezes). */
  scroll-padding-top: calc(var(--cabecalho) + 0.5rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Ecrãs pequenos: os controlos focados com Tab nunca ficam debaixo da barra fixa */
@media (max-width: 899.98px) {
  html { scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
main:focus:not(:focus-visible) { outline: none; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* Nada passa da largura do ecrã (os títulos enormes nunca criam scroll horizontal) */
  overflow-x: clip;
  /* Espaço para a barra fixa nunca tapar conteúdo (só em ecrãs pequenos) */
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; max-width: 62ch; }
/* Títulos de marca em Brown Sugar (só maiúsculas: o uppercase mantém o mesmo aspeto com a letra de reserva) */
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
h1, h2, h3 { font-family: var(--fonte-marca); text-transform: uppercase; letter-spacing: 0.005em; }
h4 { font-family: var(--fonte-texto); }
h2 { font-size: clamp(2.75rem, 8vw, 6.5rem); line-height: 0.9; margin-bottom: 1.5rem; }
h3 { font-size: 1.625rem; line-height: 1; }
@media (min-width: 900px) {
  h2 { margin-bottom: 2.25rem; }
}
/* A frase francesa ("La vie est belle,") é o único sítio do Cormorant itálico */
[lang="fr"] { font-family: var(--fonte-acento); font-style: italic; font-weight: 400; }

.contentor { width: 100%; max-width: var(--contentor); margin-inline: auto; padding-inline: var(--margem); }

/* Foco sempre visível (acento da secção: castanho no claro, dourado no escuro) */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.escuro :focus-visible { outline-color: var(--texto-escuro); }

.saltar {
  position: absolute; left: var(--margem); top: 0;
  transform: translateY(-120%);
  background: var(--texto-claro); color: var(--texto-escuro);
  padding: 0.75rem 1rem; z-index: 100; border-radius: 0 0 var(--raio) var(--raio);
}
.saltar:focus { transform: translateY(0); outline-color: var(--texto-escuro); }

/* Grão subtil por cima de tudo (matéria, como papel); não bloqueia cliques nem toques */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Botões em pílula ----------
   Cor do acento da secção; ao passar o rato, a cor do texto sobe de baixo (só transform). */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.5rem 1.5rem;
  background: var(--acento); color: var(--acento-texto);
  border: 1px solid var(--acento); border-radius: 999px;
  font: 400 1rem/1.2 var(--fonte-texto); letter-spacing: 0.02em;
  text-decoration: none; text-align: center; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-curta) var(--ease-entrada), translate var(--dur-curta) var(--ease-entrada);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--texto); border-radius: inherit;
  transform: translateY(101%);
  transition: transform var(--dur-media) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--fundo); }
.btn:active { transform: scale(0.98); }
.btn-sec { background: transparent; color: var(--texto); border-color: currentColor; }
.btn-sec::before { background: var(--texto); }
.btn-sec:hover, .btn-sec:focus-visible { color: var(--fundo); border-color: var(--texto); }
.btn-cabecalho { display: none; }

.botoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- Marcadores de proposta ---------- */
.faixa {
  background: var(--acento-claro); color: var(--texto-escuro);
  text-align: center; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.04em;
  padding: 0.5rem var(--margem);
}
.por-confirmar {
  display: inline-block; vertical-align: middle;
  margin-left: 0.4rem; padding: 0.05rem 0.55rem;
  background: var(--texto-escuro-2); color: var(--texto-claro);
  border-radius: 999px; font: 400 0.75rem/1.5 var(--fonte-texto);
}
.etiqueta {
  position: absolute; z-index: 2; left: 0.5rem; bottom: 0.5rem;
  background: rgba(243, 236, 227, 0.92); color: var(--texto-claro);
  padding: 0.1rem 0.5rem; border-radius: 2px;
  font: 400 0.75rem/1.5 var(--fonte-texto);
  pointer-events: none;
}

/* ---------- Cabeçalho ---------- */
/* Transparente no topo; ao descer (classe "solido", módulo "cabeçalho" em site.js) ganha fundo
   areia translúcido com desfoque. O fundo muda sem transição (só transform e opacity animam):
   no topo da página o que está por baixo é a mesma areia, por isso a troca não se vê; a linha
   inferior aparece com opacity. */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  height: var(--cabecalho);
  background: transparent;
  color: var(--texto);
  transition: transform var(--dur-media) var(--ease);
}
.cabecalho::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--linha); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-media) var(--ease);
}
.cabecalho.solido {
  background: rgba(237, 228, 216, 0.88); /* --areia a 88% */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cabecalho.solido::after { opacity: 1; }
.cabecalho.escondido {
  transform: translateY(-100%);
  transition-duration: var(--dur-saida);
  transition-timing-function: var(--ease-saida);
}
.cabecalho-interior { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; }

/* Logotipo: BELLE CHAMBRE em Brown Sugar, BEAUTY STUDIO pequeno e espaçado em Belleza */
.marca { display: flex; align-items: center; text-decoration: none; color: inherit; min-height: 3rem; }
.marca-texto { display: grid; line-height: 1; }
.marca-nome { font-family: var(--fonte-marca); font-size: 1.375rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.marca-sub { font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--texto); margin-top: 0.3rem; }
.cabecalho .marca-sub { color: var(--texto-2); }

.menu-botao {
  min-height: 3rem; min-width: 3rem; padding: 0 1.25rem;
  background: transparent; color: var(--texto);
  border: 1px solid var(--texto); border-radius: 999px;
  font: 400 1rem/1 var(--fonte-texto); letter-spacing: 0.02em; cursor: pointer;
}
.menu-botao[aria-expanded="true"] { background: var(--texto); color: var(--fundo); }

/* Navegação: sem JavaScript fica sempre visível, em linha */
.nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.nav a { display: inline-block; padding: 0.7rem 0; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

@media (max-width: 899.98px) {
  .cabecalho-interior { flex-wrap: nowrap; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--fundo); border-bottom: 1px solid var(--linha);
    padding: 0.5rem var(--margem) 1rem;
  }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: 0.9rem 0; min-height: 3rem; font-size: 1.125rem; border-bottom: 1px solid var(--linha); }
  .cabecalho.colapsavel .nav { display: none; }
  .cabecalho.colapsavel .nav.aberto { display: block; animation: surgir var(--dur-curta) var(--ease-entrada); }
}
@media (min-width: 900px) {
  .menu-botao { display: none !important; }
  .btn-cabecalho { display: inline-flex; min-height: 2.75rem; padding-inline: 1.25rem; }
  .cabecalho-interior { gap: 2rem; }
  .nav { margin-left: auto; }
}

@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Secções ---------- */
.seccao { padding-block: var(--espaco-seccao); }

/* O arco em amêndoa: usado só na abertura, no estúdio e no símbolo */
.arco {
  position: relative; overflow: hidden;
  background: var(--areia-2);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
.arco img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Abertura (direção 5: protótipo .ab-4) ----------
   Fundo areia com uma luz dourada atrás do arco. Telemóvel: uma coluna (nome, texto e botão, e por baixo
   o arco com a publicação). A partir de 960 px: nome e texto à esquerda, arco à direita; o nome nunca se
   sobrepõe ao arco nem à publicação (ferramentas/qa/qa-abertura.js mede-o a 1440, 1280, 1024, 768 e 390). */
.abertura { position: relative; overflow: clip; padding-top: 2.5rem; }
.abertura::before {
  content: ""; position: absolute; right: -8%; top: 5%;
  width: min(950px, 115vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(198, 156, 109, 0.4), transparent);
  pointer-events: none;
}
.abertura .contentor { position: relative; }
.abertura-grelha { display: grid; gap: 2.5rem; }
.titulo-marca { margin: 0; font-size: clamp(3.5rem, 14vw, 12.5rem); line-height: 0.88; letter-spacing: 0.005em; }
.abertura-lado { display: grid; gap: 1.5rem; max-width: 30rem; }
.abertura-frase { margin: 0; font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.5; color: var(--texto-2); }
/* A caixa da frase francesa fica dentro da altura da linha: a troca Georgia → Cormorant não muda a linha (CLS 0) */
.abertura-frase [lang="fr"] { line-height: 1; }
.abertura .botoes { margin-top: 0; align-items: center; }

/* O arco grande (3:4, meia-volta perfeita em cima) com a publicação inclinada no canto inferior esquerdo */
.abertura-arco { position: relative; justify-self: end; width: min(24rem, 74vw); margin-bottom: 3rem; }
.arco-abertura { aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.ab-publicacao { position: absolute; z-index: 2; left: -12%; bottom: -8%; width: 56%; rotate: -5deg; }

/* textos.introducao: logo por baixo, em letra grande, ainda dentro da abertura (último filho da secção) */
.introducao {
  margin: 0; padding: 1rem 0 var(--espaco-seccao);
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.35; max-width: 40ch;
}

@media (min-width: 960px) {
  .abertura { padding-top: 2rem; }
  .abertura-grelha {
    grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto;
    column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 2.5rem;
    min-height: calc(100svh - var(--cabecalho) - 4rem); padding-bottom: 3rem;
    align-content: center; align-items: center;
  }
  .titulo-marca { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(4rem, 8.2vw, 8.25rem); }
  .abertura-lado { grid-column: 1; grid-row: 2; align-self: start; }
  .abertura-arco { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: min(24rem, 100%); margin-bottom: 0; }
  .ab-publicacao { left: -14%; bottom: -6%; width: 54%; }
}

/* Entrada (uma vez, ao carregar; também com "reduzir movimento"). Só com JavaScript (html.js, definido no
   <head> antes da primeira pintura); sem JS, tudo aparece de imediato. Só transform e opacity.
   O nome usa a mesma máscara e o mesmo ritmo dos outros títulos de marca (.rev .p, 1 s, 45 ms por palavra),
   mas entra ao carregar em vez de esperar pelo IntersectionObserver: está sempre à vista. */
@keyframes nome-sobe { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ab-sobe { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
html.js #titulo-principal .p > span {
  transition: none;
  animation: nome-sobe 1s var(--ease) both;
  animation-delay: calc(80ms + var(--i, 0) * 45ms);
}
.js .ab-entra { animation: ab-sobe 1.1s var(--ease) both; animation-delay: var(--d, 250ms); }
.js .abertura-arco { --d: 400ms; }
/* Parallax suave da fachada só no computador com rato (site.js define a propriedade translate) */
@media (min-width: 900px) and (pointer: fine) {
  .arco-abertura img { position: absolute; left: 0; top: -6%; height: 112%; will-change: translate; }
}

/* ---------- Janela de publicação do Instagram (criarPublicacao em site.js) ----------
   Abertura e Trabalhos. O cartão é sempre claro (--cartao), também em secções escuras. */
.post {
  display: block; position: relative; text-decoration: none;
  color: var(--texto-claro); background: var(--cartao);
  border-radius: 16px; overflow: hidden; box-shadow: var(--sombra);
  transform: translateY(var(--py, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease);
}
.post b { font-weight: 400; } /* a Belleza só tem um peso: sem negrito simulado */
.post-topo { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; }
.avatar {
  flex: none; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--cafe); color: var(--texto-escuro);
  font: 400 0.8rem/1 var(--fonte-marca);
  box-shadow: 0 0 0 2px var(--cartao), 0 0 0 3.5px var(--acento-escuro);
}
.quem { display: grid; min-width: 0; line-height: 1.2; }
.quem b { font-size: 0.82rem; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem span { font-size: 0.72rem; color: var(--texto-claro-2); }
.post .mais { flex: none; width: 1.2rem; height: 1.2rem; margin-left: auto; }
.foto { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--areia-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease); }
@media (hover: hover) {
  /* 1,022: a foto mais ampliada (tooth gem, 576 px, a 1440 com DPR 2) está a 1,222x; 1,25 / 1,222 = 1,0227 */
  a.post:hover .foto img { scale: 1.022; }
}
.acoes { display: flex; gap: 0.85rem; padding: 0.65rem 0.8rem 0.2rem; }
.acoes svg { width: 1.45rem; height: 1.45rem; }
.acoes .guardar { margin-left: auto; }
/* Legenda "conta legenda": no máximo 2 linhas. Margem em vez de padding, para a 3.ª linha cortada
   não aparecer no espaço interior; nomes compridos partem em vez de sair do cartão. */
.legenda {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; margin: 0.25rem 0.8rem 0;
  font: 400 0.86rem/1.4 var(--fonte-texto); overflow-wrap: anywhere;
}
.legenda b { letter-spacing: 0.02em; }
.legenda:last-child { margin-bottom: 0.9rem; }
.ver { display: block; padding: 0.35rem 0.8rem 0.9rem; font-size: 0.78rem; color: var(--texto-claro-2); }

/* Títulos de marca que sobem palavra a palavra (revelarPalavras em site.js: .p > span, --i).
   A máscara deixa espaço para acentos (Ú, É) e cedilhas, que passam da altura das maiúsculas;
   a margem negativa devolve esse espaço, por isso a linha não muda de altura. */
.rev .p { display: inline-block; overflow: hidden; overflow: visible clip; vertical-align: top; padding: 0.2em 0 0.12em; margin: -0.2em 0 -0.12em; }
.rev .p > span { display: inline-block; }
.js.revelar .rev .p > span {
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js.revelar .rev.dentro .p > span { transform: none; }
/* Blocos que sobem e aparecem quando entram no ecrã (uma vez cada) */
/* overflow-anchor: none nos blocos que sobem (.sobe, .entra): o Firefox escolhia uma âncora de scroll dentro deles e
   corrigia o scroll da página em frações de píxel durante a subida, até desligar a ancoragem com um aviso na consola */
.js.revelar .sobe {
  overflow-anchor: none;
  opacity: 0; translate: 0 40px;
  transition: opacity 1s var(--ease), translate 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js.revelar .sobe.dentro { opacity: 1; translate: 0 0; }

/* Arcos e mosaicos (v0.2) revelados ao fazer scroll */
.js.revelar .rev-arco:not(.visto) { clip-path: inset(100% 0 0 0); }
.js.revelar .rev-arco:not(.visto) img { scale: 1.12; }
.rev-arco.visto { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-longa) var(--ease-entrada); }
.rev-arco.visto img { transition: scale 1400ms var(--ease-entrada); }
.rev-arco.visto.fim { clip-path: none; }

/* ---------- Serviços + Preçário (fundo claro, .sec-clara) ----------
   Uma coluna centrada: o título "Serviços", a introdução, as faixas das ofertas (uma por campanha ativa), a vista
   do computador (fila de áreas e um painel por área) e a faixa escura de marcação. Valores copiados do protótipo docs/opcoes-blocos/precario/prototipos/r2-misto/
   (misto.css, vista A2). Brown Sugar só no título e no nome da área; todos os algarismos em Belleza, alinhados
   (.preco). */
#servicos .contentor > h2 { text-align: center; }
.servicos-intro { font-size: 1.125rem; color: var(--texto-2); text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
/* Reserva sem preçário (servicos.areas), como antes, com as cores da secção */
.areas { display: grid; gap: 1.5rem; margin: 2rem 0; }
.area { border-top: 1px solid var(--linha); padding-top: 1rem; }
.area h3 { margin-bottom: 0.5rem; }
.area p { margin: 0; color: var(--texto-2); }
@media (min-width: 700px) {
  .areas { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.convite { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.convite p { margin: 0; }

/* Faixa das Ofertas glow (uma por campanha ativa, antes da fila de áreas): barra dourada (#C69C6D) com texto café
   (#1B1511); o botão castanho abre por baixo as ofertas num cartão claro (.of-regiao, escondida até abrir).
   O nome em Brown Sugar; todos os algarismos em Belleza (.preco, com algarismos alinhados). Valores do protótipo
   (r2-misto/misto.css). Só opacity e transform animam (a abertura está em site.js, abrirOfertas). */
.ofertas-faixa { max-width: 52rem; margin: 0 auto 2.5rem; }
.ofertas-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  background: var(--acento-escuro); color: var(--cafe);
  border-radius: 999px; padding: 0.7rem 0.7rem 0.7rem 1.75rem;
}
.ofertas-nome {
  margin: 0; font-family: var(--fonte-marca); font-size: clamp(1.7rem, 3.4vw, 2.1rem); line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase;
}
.ofertas-frase { margin: 0; flex: 1 1 16rem; font-size: 0.9375rem; line-height: 1.4; }
.ofertas-preco { margin: 0; flex: none; font-size: 1.75rem; line-height: 1; }
.ver-ofertas {
  appearance: none; font: inherit; cursor: pointer; flex: none;
  min-height: 44px; padding: 0 1.4rem; border-radius: 999px; border: 0;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--acento-claro); color: var(--texto-escuro);
  transition: transform var(--dur-curta) var(--ease); /* a cor troca de imediato: só transform anima */
}
.ver-ofertas:hover { background: var(--cafe); transform: translateY(-2px); }
.ver-ofertas:focus-visible { outline: 2px solid var(--cafe); outline-offset: 3px; }
@media (max-width: 40rem) {
  .ofertas-barra { border-radius: 18px; padding: 1rem 1.1rem 1.1rem; }
  .ver-ofertas { width: 100%; }
}

/* As ofertas abertas: cartão claro por baixo da faixa */
.of-regiao { margin-top: 0.75rem; }
.of-regiao[hidden] { display: none; }
.of-cartao {
  background: var(--cartao); color: var(--texto-claro); border: 1px solid var(--acento-escuro); border-radius: 22px;
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.1rem; text-align: left;
}
.of-validade { margin: 0 0 0.9rem; max-width: none; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-claro-2); }
.of-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.of-lista li { border-top: 1px solid var(--acento-escuro); padding-top: 0.75rem; }
.of-preco { display: block; font-size: 2.1rem; line-height: 1.05; color: var(--acento-claro); }
.of-lista h4 { margin: 0.4rem 0 0.2rem; font-size: 1rem; line-height: 1.25; color: var(--texto-claro); }
.of-lista p { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--texto-claro-2); }
.of-cond { margin-top: 1.1rem; border-top: 1px dotted var(--acento-escuro); padding-top: 0.9rem; }
.of-cond h4 { margin: 0 0 0.4rem; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-claro-2); }
.of-cond ul { columns: 2; column-gap: 2rem; font-size: 0.9375rem; color: var(--texto-claro-2); }
.of-cond li { break-inside: avoid; margin-bottom: 0.35rem; padding-left: 0.9rem; position: relative; }
.of-cond li::before { content: "·"; position: absolute; left: 0.15rem; }
.of-chamada { margin: 0.6rem 0 0; max-width: none; color: var(--acento-claro); font-size: 1rem; }
@media (max-width: 899px) {
  .of-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .of-cond ul { columns: 1; }
}

/* Faixa escura que fecha o bloco (#1B1511, texto #F3ECE3): a frase de marcação em Brown Sugar, o resto da nota e as
   ligações Ligar, WhatsApp e (se houver) Marcar online. A primeira ligação é cheia (dourado), as outras só com
   contorno. O contorno de foco é claro: o fundo é escuro. */
.faixa-marcar {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 54rem;
  background: var(--cafe); color: var(--texto-escuro); border-radius: var(--raio-g);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
}
.marcar-texto {
  margin: 0; font-family: var(--fonte-marca); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1;
  text-transform: uppercase; color: var(--acento-escuro);
}
.marcar-nota { margin: 0; max-width: 32rem; font-size: 0.9375rem; color: var(--texto-escuro-2); }
.marcar-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }
.marcar-botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.5rem 2rem;
  color: var(--texto-escuro); background: transparent; border: 1.5px solid var(--texto-escuro); border-radius: 999px;
  text-decoration: none; font-size: 1.0625rem; letter-spacing: 0.04em;
  transition: transform var(--dur-curta) var(--ease); /* a cor troca de imediato: só transform anima */
}
.marcar-botao:first-child { background: var(--acento-escuro); border-color: var(--acento-escuro); color: var(--cafe); }
.marcar-botao:hover { background: var(--texto-escuro); border-color: var(--texto-escuro); color: var(--cafe); transform: translateY(-2px); }
.marcar-botao:focus-visible { outline: 2px solid var(--texto-escuro); outline-offset: 3px; }

/* Vista do computador (plano do preçário; só a partir de 768 px, abaixo fica hidden e vê-se a da gaveta).
   Coluna de leitura de 54rem ao centro. */
.vista-computador { max-width: 54rem; margin: 2.5rem auto 0; }
.areas-intro {
  margin: 0 auto 0.9rem; max-width: none; text-align: center; color: var(--texto-2);
  font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.preco { font-family: var(--fonte-texto); font-variant-numeric: tabular-nums; }

/* Fila de áreas (separadores): numa só linha; se não couber, desliza para o lado (scroll-snap), sem barra.
   As margens automáticas do primeiro e do último centram a fila quando cabe, sem esconder nada quando desliza.
   O padding deixa caber o contorno de foco (o overflow cortava-o). position: relative → offsetLeft dos botões
   (site.js centra a área escolhida). */
.areas-fila {
  position: relative; display: flex; flex-wrap: nowrap; gap: 0.5rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 0.6rem 0.5rem;
  border-top: 1px solid var(--acento-escuro); border-bottom: 1px solid var(--acento-escuro);
}
.areas-fila::-webkit-scrollbar { display: none; }
.area-aba {
  flex: none; scroll-snap-align: center;
  appearance: none; background: none; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  min-height: 48px; padding: 0.3rem 1rem;
  font: 400 1.0625rem/1.1 var(--fonte-texto); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--acento-claro); /* sem transição: só transform e opacity animam; a cor troca de imediato */
}
.area-aba:first-child { margin-left: auto; }
.area-aba:last-child { margin-right: auto; }
.area-aba:hover { background: rgba(255, 253, 250, 0.6); }
.area-aba[aria-selected="true"] { background: var(--acento-claro); color: var(--texto-escuro); }
.area-aba:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
@media (min-width: 900px) {
  .area-aba { font-size: 1.1875rem; }
}

/* Um painel por área; só o da área escolhida se vê. Entra com "entra" (só opacity e transform). */
.area-painel { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 6px; }
.area-painel[hidden] { display: none; }
.area-painel:not([hidden]) { animation: entra var(--dur-media) var(--ease-entrada) both; }
.area-painel:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 6px; }

/* Cabeçalho único da área: o nome em Brown Sugar grande, o resumo e o "a partir de" (Belleza) */
.area-cab { text-align: center; }
.area-titulo { font-size: clamp(2rem, 5vw + 1rem, 3.8rem); line-height: 1.05; color: var(--acento-claro); }
.area-resumo { margin: 0.6rem auto 0; max-width: 34rem; color: var(--texto-2); }
.area-desde {
  margin: 0.6rem 0 0; max-width: none; color: var(--acento-claro);
  font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase;
}
/* Os "◦" são decorativos: o texto depois da barra é o texto alternativo, vazio */
.area-desde::before, .area-desde::after { content: "\25E6" / ""; margin-inline: 0.6em; }

/* Grupos de preços: título pequeno em maiúsculas com um fio até à margem */
.prec-grupo { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.grupo-titulo {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem;
  font-size: 0.875rem; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento-claro);
}
.grupo-titulo::after { content: ""; flex: 1; height: 1px; background: var(--acento-escuro); opacity: 0.7; }

/* Lista: nome, pontinhos e preço; listas longas (6 linhas ou mais, os Extras) em duas colunas a partir de 768 px */
.prec-linhas li { break-inside: avoid; padding-block: 0.45rem; }
.l-topo { display: flex; align-items: baseline; gap: 0.6rem; }
.l-nome { flex: 0 1 auto; min-width: 0; color: var(--texto); }
.l-pontos { flex: 1 1 1rem; min-width: 0.75rem; border-bottom: 2px dotted var(--acento-escuro); transform: translateY(-0.25em); }
.l-preco { flex: none; white-space: nowrap; text-align: right; font-size: 1.0625rem; color: var(--acento-claro); }
.l-consulta { color: var(--texto-2); }
.l-nota { margin: 0.15rem 0 0; max-width: 32rem; font-size: 0.9375rem; line-height: 1.45; color: var(--texto-2); }
@media (min-width: 768px) {
  .prec-linhas.duas { columns: 2; column-gap: 2.5rem; }
}

/* Tabela: todas as colunas lado a lado, cada valor por baixo do cabeçalho da sua coluna (a etiqueta) */
.prec-tabela { width: 100%; border-collapse: collapse; }
.prec-tabela th, .prec-tabela td { padding: 0.55rem 0.5rem; font-weight: 400; text-align: left; vertical-align: baseline; }
.prec-tabela th:first-child { padding-left: 0; }
.prec-tabela th:last-child, .prec-tabela td:last-child { padding-right: 0; }
.prec-tabela thead th {
  padding-block: 0 0.45rem; border-bottom: 1px solid var(--acento-escuro);
  font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2);
}
.prec-tabela tbody tr + tr > * { border-top: 1px dotted rgba(59, 42, 32, 0.3); }
.prec-tabela .prec-num { width: 1%; text-align: right; white-space: nowrap; }
.prec-tabela td .preco { font-size: 1.125rem; color: var(--acento-claro); }
.prec-tabela td.prec-nd { color: var(--texto-2); }
@media (min-width: 768px) {
  .prec-tabela thead th { font-size: 0.8125rem; letter-spacing: 0.14em; }
  .prec-tabela .prec-num { padding-left: 2rem; }
}

.prec-notas { display: grid; gap: 0.25rem; margin-top: 1rem; }
.prec-notas li { font-size: 0.9375rem; line-height: 1.5; color: var(--texto-2); }
.prec-notas li::before { content: "\25E6\00A0" / ""; color: var(--acento-claro); }

/* ---------- Telemóvel (abaixo de 768 px): cartões e gaveta ----------
   site.js (módulo "serviços") deixa só uma vista fora de hidden: a do computador a partir de 768 px, a da gaveta
   abaixo. Valores do protótipo (r2-misto/misto.css, vista Gaveta), com as cores do site: cartões e folha #FFFDFA
   (--cartao), o "+" num círculo #3B2A20 com texto #F3ECE3, véu café a 50 %. Texto de serviços e preços >= 16 px.
   Só transform e opacity animam (a folha e o véu são movidos por site.js, criarGaveta). */
.vista-computador[hidden], .vista-gaveta[hidden], .gaveta[hidden], .folha-pe[hidden], #folha-sub[hidden] { display: none; }
.vista-gaveta { max-width: 52rem; margin: 2.5rem auto 0; }
.gavetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
.frente {
  appearance: none; font: inherit; color: var(--texto-claro); text-align: left; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 5.25rem; padding: 1rem 1.25rem 1rem 1.5rem;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 2px 0 rgba(60, 40, 25, 0.06), 0 10px 18px -12px rgba(60, 40, 25, 0.35);
  transition: transform var(--dur-curta) var(--ease);
}
.frente:active { transform: translateY(1px); }
.frente:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }
.f-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* O nome da área em Brown Sugar grande (28–37 px); o "a partir de" em Belleza (.preco) */
.f-nome { font-family: var(--fonte-marca); font-size: clamp(1.75rem, 7vw, 2.3rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.005em; }
.f-preco { color: var(--texto-claro-2); font-size: 1rem; }
/* O "+" (decorativo: o nome do botão é o texto do cartão) */
.puxador {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding-bottom: 0.1em; box-sizing: border-box;
  border-radius: 50%; background: var(--acento-claro); color: var(--texto-escuro);
  font: 400 1.6rem/1 var(--fonte-texto); box-shadow: 0 1px 2px rgba(60, 40, 25, 0.3);
  transition: transform var(--dur-media) var(--ease);
}
@media (min-width: 40rem) {
  .f-texto { flex-direction: row; align-items: baseline; gap: 1.5rem; flex: 1; justify-content: space-between; padding-right: 1.25rem; }
}

/* A camada da gaveta (fim de body, por cima do cabeçalho, da barra fixa e do grão), o véu e a folha que sobe do fundo */
.gaveta { position: fixed; inset: 0; z-index: 100; }
.veu { position: absolute; inset: 0; background: rgba(27, 21, 17, 0.5); opacity: 0; }
.folha {
  position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto; width: 100%; max-width: 40rem;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--cartao); color: var(--texto-claro);
  border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(27, 21, 17, 0.28);
  will-change: transform; outline: none;
}
/* O gesto de arrastar a folha (site.js, criarGaveta) trata a pega e o cabeçalho (touch-action: none: o navegador não
   rola nada por baixo do dedo), o rodapé (só pinch-zoom) e deixa o corpo rolar na vertical (pan-y); o corpo e o
   rodapé mantêm o zoom por pinça (pinch-zoom), como o resto da página */
.pega-zona { flex: none; display: flex; justify-content: center; padding: 0.6rem 0 0.1rem; touch-action: none; cursor: grab; }
.pega { width: 2.75rem; height: 0.3125rem; border-radius: 999px; background: rgba(59, 42, 32, 0.3); }
.folha-cab {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: start;
  padding: 0.15rem 1rem 0.85rem 1.25rem; border-bottom: 1px solid var(--linha); touch-action: none; user-select: none;
}
#folha-titulo { grid-column: 1; grid-row: 1; padding-top: 0.35rem; font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.05; outline: none; }
#folha-sub { grid-column: 1 / -1; grid-row: 2; margin: 0.35rem 0 0; color: var(--texto-claro-2); font-size: 1rem; line-height: 1.4; }
.folha-fechar {
  grid-column: 2; grid-row: 1; appearance: none; width: 44px; height: 44px; padding: 0 0 0.15rem;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha);
  background: transparent; color: var(--texto-claro); font: 400 1.6rem/1 var(--fonte-texto); cursor: pointer;
}
.folha-fechar:hover { background: rgba(59, 42, 32, 0.08); }
.folha-fechar:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.folha-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
  padding: 1.1rem 1.25rem 1.5rem;
}
/* Rodapé fixo da folha: Ligar (cheio), WhatsApp e, se houver, Marcar online (com contorno) */
.folha-pe {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--cartao); border-top: 1px solid var(--linha); box-shadow: 0 -10px 16px -12px rgba(60, 40, 25, 0.25);
  touch-action: pinch-zoom;
}
.folha-acao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.25rem 0.5rem;
  font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--acento-claro); border: 1.5px solid var(--acento-claro); border-radius: 999px;
}
.folha-acao:first-child { background: var(--acento-claro); color: var(--texto-escuro); }
.folha-acao:nth-child(3) { grid-column: 1 / -1; }
.folha-acao:hover { background: var(--cafe); border-color: var(--cafe); color: var(--texto-escuro); }
.folha-acao:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }
/* Ecrãs muito estreitos (320 px): a palavra mais comprida dos nomes ("SOBRANCELHAS", cerca de 202 px a 28 px) cabe ao
   lado do "+" com menos margem e um círculo mais pequeno; o rodapé da folha passa a uma coluna */
@media (max-width: 22rem) {
  .frente { padding: 1rem 0.75rem 1rem 1rem; gap: 0.5rem; }
  .puxador { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; }
  .f-nome { letter-spacing: 0; }
  .folha-pe { grid-template-columns: 1fr; }
  .folha-acao:nth-child(3) { grid-column: auto; }
}

/* Conteúdo da folha: os grupos da área (desenharGrupo) e as ofertas (conteudoOfertas), com notas a 16 px */
.folha-corpo .prec-grupo { margin: 0 0 1.75rem; }
.folha-corpo .prec-grupo:last-child { margin-bottom: 0; }
.folha-corpo .l-nota, .folha-corpo .prec-notas li, .folha-corpo .prec-detalhes summary, .folha-corpo .prec-detalhes-lista li { font-size: 1rem; }
/* Todo o texto do telemóvel a 16 px ou mais (spec 4.2): as etiquetas da folha (títulos dos grupos, cabeçalhos das
   tabelas, validade e "Condições") e, na vista da gaveta, a introdução e a frase das ofertas. Só existem abaixo de
   768 px (a vista da gaveta fica hidden acima, e a gaveta não abre): o computador fica como estava. */
.folha-corpo .grupo-titulo, .folha-corpo .of-validade, .folha-corpo .of-cond h4,
.vista-gaveta .areas-intro, .vista-gaveta .ofertas-frase { font-size: 1rem; }

/* Tabelas da folha: um interruptor (Aplicação | Manutenção, Mulher | Homem) por cima de uma só coluna de preços; os
   algarismos que mudam viram como placas (site.js, criarPlacas). Os botões do interruptor são as etiquetas da coluna:
   Belleza em maiúsculas espaçadas, a 16 px, e repartem a largura da folha (cabem a 320 px). Só transform e opacity
   animam: o botão escolhido troca de cor de imediato. */
.troca { display: flex; width: 100%; box-sizing: border-box; margin: 0 0 0.35rem; padding: 3px; gap: 2px; background: rgba(59, 42, 32, 0.08); border-radius: 999px; }
.troca button {
  appearance: none; flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: 0 0.35rem; border: 0; border-radius: 999px;
  font: inherit; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--texto-claro); background: transparent; cursor: pointer;
}
.troca button[aria-pressed="true"] { background: var(--acento-claro); color: var(--texto-escuro); }
.troca button:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 2px; }
.prec-tabela thead th.so-leitor { padding: 0; border: 0; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.folha-corpo .prec-tabela th, .folha-corpo .prec-tabela td { vertical-align: middle; }
.prec-tabela td.valor { position: relative; width: 1%; text-align: right; white-space: nowrap; }
.valor-txt { color: var(--texto-2); }

/* Placas que viram (r2-misto/placas.css). Cada placa: 1,2em x 1,65em (a do vídeo: 32 x 44 px), largura fixa */
.placas { display: inline-flex; align-items: center; gap: 0.12em; font-size: 1.125rem; line-height: 1; white-space: nowrap; vertical-align: middle; }
.placa { position: relative; display: block; flex: none; width: 1.2em; height: 1.65em; perspective: 7em; color: var(--cafe); }
.p-meia {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--placa-fundo, #EFE6DA);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.p-meia[hidden] { display: none; }
.p-topo, .p-aba-topo { top: 0; border-radius: 0.16em 0.16em 0 0; transform-origin: 50% 100%; background: linear-gradient(#F3EBE0, var(--placa-fundo, #EFE6DA)); }
.p-fundo, .p-aba-fundo { bottom: 0; border-radius: 0 0 0.16em 0.16em; transform-origin: 50% 0; }
.p-g {
  position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center;
  letter-spacing: 0; box-sizing: border-box; padding-bottom: 0.16em; /* a Belleza assenta baixo: sobe o glifo ao centro */
}
.p-topo .p-g, .p-aba-topo .p-g { top: 0; }
.p-fundo .p-g, .p-aba-fundo .p-g { bottom: 0; }
.placa::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: rgba(27, 21, 17, 0.14); z-index: 3; pointer-events: none; }
.p-aba { z-index: 2; }
.p-sombra { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; } /* véu da aba a virar (site.js, Placa) */
.p-euro { margin-left: 0.3em; }
.folha-corpo .of-lista { grid-template-columns: 1fr; gap: 0; margin-bottom: 0.5rem; }
.folha-corpo .of-lista li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1rem; padding: 0.9rem 0; border-top: 1px dotted rgba(59, 42, 32, 0.3); }
.folha-corpo .of-lista li:first-child { border-top: 0; }
.folha-corpo .of-preco { grid-row: 1 / span 2; font-size: 1.75rem; line-height: 1.1; white-space: nowrap; }
.folha-corpo .of-lista h4, .folha-corpo .of-lista p { grid-column: 2; }
.folha-corpo .of-lista h4 { margin: 0 0 0.15rem; font-size: 1.0625rem; }
.folha-corpo .of-lista p, .folha-corpo .of-cond li { font-size: 1rem; }
.folha-corpo .of-cond ul { columns: 1; }


/* ---------- Trabalhos (fundo claro alternativo, .sec-clara-2): publicações do Instagram ---------- */
.sec-rotulo { margin: 0 0 0.75rem; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2); }
/* Abaixo de 960 px: carrossel que desliza, com a publicação seguinte a espreitar. Só desliza na horizontal
   (overflow-y: hidden): um gesto vertical por cima dele faz sempre scroll à página, também enquanto as publicações
   ainda estão a entrar (deslocadas para baixo). Vai de uma borda à outra do ecrã (margem negativa e o mesmo valor
   em padding: as colunas de 80% medem-se na caixa de conteúdo, com a largura de sempre), para o corte do scroll
   ficar nas bordas do ecrã e não a meio da sombra. A sombra é mais curta e cabe no espaço de cima e de baixo,
   que também deixa ver o contorno de foco.
   Largura de cada publicação: 80% (protótipo), mas no máximo 15rem (240 px). O spec manda que nenhuma foto seja
   ampliada mais de 1,25× (ferramentas/qa/qa-galeria.js), e os ficheiros maiores são capturas do Instagram de
   576 px (tooth gem), 640 px (chocolate) e 655 px (pés): num ecrã de densidade 3, 240 × 3 ÷ 576 = 1,25. Quando a
   marca enviar as fotografias originais (maiores), gerar ficheiros maiores e voltar a grid-auto-columns: 80%. */
.feed {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 15rem); gap: 1rem;
  margin: 0 calc(-1 * var(--margem)); padding: 1rem var(--margem) 2.5rem; scroll-padding-inline: var(--margem);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed > li { scroll-snap-align: center; min-width: 0; perspective: 900px; }
.feed .post { box-shadow: 0 1px 2px rgba(60, 40, 25, 0.1), 0 10px 24px rgba(60, 40, 25, 0.14); }
/* A partir de 960 px: 3 colunas desfasadas (a 2.ª mais baixa, a 3.ª a meio). A paralaxe (--py, até cerca de 30 px)
   e a inclinação (--rx, --ry) são de site.js, módulo "galeria". A folga do scroll-margin deixa a publicação focada
   com Tab toda à vista, mesmo depois de a paralaxe a deslocar. */
@media (min-width: 960px) {
  .feed {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible; gap: 2rem; margin: 0; padding: 0; align-items: start;
  }
  .feed .post { box-shadow: var(--sombra); }
  .feed > li:nth-child(3n+2) { margin-top: 5rem; }
  .feed > li:nth-child(3n) { margin-top: 2rem; }
  .feed .post { scroll-margin-block: 3rem; }
}
/* Entrada: cada publicação sobe e endireita-se, uma a uma (--d, de site.js). Só transform e opacity. */
.js.revelar .entra {
  overflow-anchor: none; /* ver .sobe */
  opacity: 0; translate: 0 60px; rotate: -2deg;
  transition: opacity 0.9s var(--ease), translate 1.1s var(--ease), rotate 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js.revelar .entra.dentro { opacity: 1; translate: 0 0; rotate: 0deg; }
/* No carrossel, a subida é mais curta: cabe no espaço de baixo do .feed, sem criar scroll vertical dentro dele
   (nem deixar o .feed deslocado na vertical quando o foco chega a uma publicação que ainda não entrou) */
@media (max-width: 959.98px) {
  .js.revelar .feed > .entra:not(.dentro) { translate: 0 1rem; }
}

/* ---------- O estúdio ---------- */
/* Fundo escuro (.sec-escura). Colagem de 3 fotos (protótipo: .estudio-fotos .e1/.e2/.e3): a 1.ª em arco, as outras
   duas sobrepostas. A paralaxe (site.js, data-par) só muda --py, e a transform só desloca em Y: nada muda de layout. */
.estudio-grelha { display: grid; gap: 2.5rem; }
.estudio-fotos { position: relative; height: clamp(26rem, 60vw, 40rem); }
.estudio-fotos figure {
  position: absolute; margin: 0; overflow: hidden; background: rgba(243, 236, 227, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transform: translateY(var(--py, 0px)); will-change: transform;
}
.estudio-fotos img { width: 100%; height: 100%; object-fit: cover; }
.estudio-fotos .etiqueta { left: 0.5rem; bottom: 0.5rem; }
.estudio-fotos .e1 { left: 0; top: 0; width: 58%; height: 82%; border-radius: 999px 999px var(--raio-g) var(--raio-g); }
.estudio-fotos .e2 { right: 0; top: 18%; width: 40%; height: 46%; border-radius: var(--raio-g); }
.estudio-fotos .e3 { right: 10%; bottom: 0; width: 34%; height: 34%; border-radius: var(--raio-g); }
.estudio-texto p { font-size: 1.125rem; }
.estudio-extra { display: grid; gap: 1rem; margin-top: 1.5rem; }

.citacao {
  margin: 4rem auto 0; max-width: 24ch; text-align: center;
  /* Belleza não tem itálico: o português fica direito; só o [lang="fr"] é Cormorant itálico (como no protótipo) */
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: 2.25rem; line-height: 1.15;
}
.citacao p { margin: 0 auto; max-width: none; }
.citacao p > span { display: block; }

.equipa { margin-top: 4rem; }
.equipa h3 { margin-bottom: 1.5rem; }
.equipa-lista { display: grid; gap: 2rem; }
.membro img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--raio); margin-bottom: 0.75rem; }
.membro h4 { font-size: 1.375rem; }
.membro-funcao { color: var(--texto-2); font-size: 0.875rem; margin: 0 0 0.5rem; }
/* Cartão da equipa sobre o escuro: o fundo é o da secção, com um traço fino à volta */
.membro { padding: 1.5rem; border: 1px solid var(--linha); border-radius: var(--raio-g); }

@media (min-width: 900px) {
  .estudio-grelha { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; align-items: start; }
  .estudio-texto { padding-top: 2rem; }
  .estudio-texto p { font-size: 1.1875rem; }
  .estudio-grelha { margin-bottom: 3rem; }
  .citacao { font-size: 3.5rem; margin-top: 6rem; max-width: 26ch; }
  .equipa-lista { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Marcações ---------- */
/* Fundo claro alternativo (.sec-clara-2): título grande ao centro e os canais em pílula.
   O telefone (o primeiro canal) é o principal: acento da secção; os outros têm só o contorno. */
#marcacoes .contentor { text-align: center; }
#marcacoes h2 { font-size: clamp(3.25rem, 12vw, 10rem); }
.nota-marcacao { font-size: 1.125rem; margin-inline: auto; }
.canais { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 2rem 0 4rem; }
.canal {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-height: 3.25rem; padding: 0.5rem 1.6rem;
  border: 1px solid var(--texto-2); border-radius: 999px;
  text-decoration: none; background: transparent; color: var(--texto);
  transition: background-color var(--dur-media) var(--ease-entrada), color var(--dur-media) var(--ease-entrada);
}
.canal:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.canal:first-child { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.canal:first-child:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.canal-titulo { font-size: 1.0625rem; }
.canal-detalhe { font-size: 0.875rem; }

.info-grelha { display: grid; gap: 2.5rem; max-width: 46rem; margin-inline: auto; text-align: left; }
.info-bloco h3 { margin-bottom: 0.75rem; }
.info-bloco address { font-style: normal; margin-bottom: 1rem; }
.horario-lista { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; margin: 0; }
.horario-lista dt { font-weight: 400; color: var(--texto); } /* a Belleza só tem o peso 400: o dia distingue-se pela cor, não por negrito simulado */
.horario-lista dd { margin: 0; color: var(--texto-2); }
.info-bloco .btn { margin-top: 0.25rem; }
@media (min-width: 700px) {
  .info-grelha { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- Rodapé ---------- */
/* Fundo escuro: vem de .sec-escura (café); aqui só o espaçamento e o texto */
.rodape { color: var(--texto); padding-block: 3.5rem 2.5rem; font-size: 0.9375rem; }
.rodape a { color: var(--texto-escuro); }
.rodape-topo { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
.rodape-marca { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rodape .marca-nome { font-size: 2rem; }
.rodape .marca-sub { color: var(--texto-escuro-2); font-size: 0.875rem; margin-top: 0; }
.rodape-contactos li, .rodape-nav li { margin: 0; }
.rodape-contactos a, .rodape-nav a { display: inline-block; padding: 0.6rem 0; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.rodape-legal { border-top: 1px solid var(--linha); padding-top: 1.5rem; } /* --linha do .sec-escura: creme a 14 % sobre o café */
.rodape-legal p { margin: 0 0 0.4rem; color: var(--texto-escuro-2); }
.rodape-legal a { display: inline-block; padding: 0.4rem 0; }
.rodape-legal .legal-ligacoes { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 0.75rem; }
.creditos { margin-top: 1.5rem; color: var(--texto-escuro-2); }
.creditos summary { cursor: pointer; padding: 0.6rem 0; min-height: 2.75rem; display: flex; align-items: center; }
.creditos ul { margin-top: 0.5rem; display: grid; gap: 0.75rem; }
.creditos li { font-size: 0.8125rem; line-height: 1.5; }
.creditos-nota { font-size: 0.8125rem; margin-top: 0.75rem; }
.rodape-proposta { margin: 2rem 0 0; font-size: 0.8125rem; color: var(--texto-escuro-2); }
@media (min-width: 900px) {
  .rodape-topo { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
}

/* ---------- Barra fixa de marcação (ecrãs pequenos) ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0.75rem var(--margem) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--texto-escuro); border-top: 1px solid var(--linha);
  transition: transform var(--dur-media) var(--ease-entrada), opacity var(--dur-media) var(--ease-entrada), visibility var(--dur-media);
}
.barra .btn { width: 100%; }
.barra.escondida {
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition-duration: var(--dur-saida); transition-timing-function: var(--ease-saida);
}
@media (min-width: 900px) {
  .barra { display: none; }
}

/* ---------- Página 404 ---------- */
.pagina-404 { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--margem); text-align: left; }
.pagina-404 .caixa { max-width: 32rem; }
.pagina-404 h1 { font-size: 3rem; margin-bottom: 1rem; }

/* ---------- Elementos de proposta ----------
   Escondidos por omissão e mostrados só com html.proposta (definido por um script no <head>,
   logo depois de dados/conteudo.js, a partir de modoProposta). Assim nada pisca nem desloca o
   layout quando modoProposta é false. Sem JavaScript (sem a classe "js") ficam visíveis:
   o site é, por agora, uma proposta. */
.faixa, .por-confirmar, .etiqueta, .rodape-proposta { display: none; }
html.proposta .faixa, html:not(.js) .faixa { display: block; }
html.proposta .por-confirmar, html:not(.js) .por-confirmar { display: inline-block; }
html.proposta .etiqueta, html:not(.js) .etiqueta { display: block; }
html.proposta .rodape-proposta, html:not(.js) .rodape-proposta { display: block; }
.etiqueta[hidden] { display: none !important; }
html.heroi-confirmado #frase-heroi-pc { display: none; } /* ver o script no <head> do index.html */

/* ---------- Passagem 2: acabamentos ---------- */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Ligações com sublinhado que se desenha ao passar o rato ou ao focar */
.nav a, .rodape-contactos a, .rodape-nav a, .legal-ligacoes a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0 1px;
  transition: background-size var(--dur-media) var(--ease-entrada);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="true"],
.rodape-contactos a:hover, .rodape-contactos a:focus-visible,
.rodape-nav a:hover, .rodape-nav a:focus-visible,
.legal-ligacoes a:hover, .legal-ligacoes a:focus-visible { background-size: 100% 1px; }
@media (max-width: 899.98px) {
  .nav a { background: none; }
  .nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: 0.35em; } /* sem negrito simulado (Belleza só tem o peso 400) */
}

.estudio-extra figure { position: relative; margin: 0; aspect-ratio: 4 / 5; max-width: 22rem; overflow: hidden; border-radius: var(--raio); background: var(--areia-2); }
.morada-ref { margin: -0.5rem 0 1rem; font-size: 0.9375rem; color: var(--texto-claro-2); }
.creditos-simples { margin: 1.5rem 0 0; color: var(--texto-escuro-2); }
.estudio-extra img { width: 100%; height: 100%; object-fit: cover; }


/* Faixa com os serviços, logo a seguir à abertura (fundo no acento escuro, texto e arcos em café) */
.marquee {
  --acento: var(--cafe); --acento-texto: var(--acento-escuro);
  background: var(--acento-escuro); color: var(--cafe);
  padding-block: 1.25rem; overflow: clip;
}
.marquee[hidden] { display: none; }
.marquee-janela { overflow: hidden; }
.marquee-pista { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-grupo, .marquee-enchimento { display: flex; align-items: center; flex: none; }
.marquee-item {
  font-family: var(--fonte-marca); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; color: var(--cafe);
  white-space: nowrap; padding-inline: 1.25rem;
}
.marquee-sep { flex: none; width: 1.1rem; height: 1.4rem; color: var(--cafe); margin-inline: 0.25rem; }
/* Pausa ao passar o rato pela faixa. Sem botão "Pausar animação": retirado a pedido do dono (2026-11-10). */
.marquee-janela:hover .marquee-pista { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Nome gigante do rodapé (decorativo) */
.rodape-gigante {
  margin: 0 0 2rem; max-width: none; overflow: hidden; white-space: nowrap;
  font-family: var(--fonte-marca); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(1.75rem, 11.5vw, 9rem); line-height: 0.95; color: var(--texto-escuro);
  user-select: none;
}

/* ---------- Movimento reduzido ----------
   Decisão do dono do projeto (2026-11-09): as animações correm mesmo com
   "reduzir movimento" ligado no dispositivo, por isso já não há aqui um bloco
   @media (prefers-reduced-motion: reduce). A faixa já não tem botão de pausa
   (retirado a pedido do dono, 2026-11-10); para ao passar o rato.
   Para voltar atrás, ver o comentário junto de reduzido() em site.js. */

/* ---------- Passagem 4: testemunhos, equipa sem foto, detalhes do preçário ---------- */
/* Testemunhos, por baixo das publicações: citações em letra grande (Belleza, sem itálico simulado);
   as aspas vêm do CSS, o texto fica o de conteudo.js */
.testemunhos:empty { display: none; }
.testemunhos { margin-top: clamp(4rem, 8vw, 7rem); }
.testemunhos h3 { margin-bottom: 1.5rem; }
.testemunhos-lista { display: grid; gap: 2.5rem; }
.testemunhos figure { margin: 0; }
.testemunhos blockquote { margin: 0; }
.testemunhos blockquote p { margin: 0; max-width: none; font: 400 clamp(1.5rem, 3.4vw, 2.6rem)/1.25 var(--fonte-texto); color: var(--texto); }
.testemunhos blockquote p::before { content: "\201C"; }
.testemunhos blockquote p::after { content: "\201D"; }
.testemunhos figcaption { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--texto-2); }
@media (min-width: 960px) {
  .testemunhos-lista { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
}
.membro-arco { display: block; width: 1.5rem; height: 1.9rem; color: var(--acento); margin-bottom: 0.75rem; }
/* Retrato da equipa: a fotografia de perfil do Instagram (ficheiro de 150 px) num círculo de 3,75rem (60 px), com um
   anel fino #C69C6D (contraste 7,2:1 com o fundo #1B1511), ao lado do nome e da função.
   Quadrado, sem recorte: a ampliação máxima é 56 (a imagem dentro do anel) × 3 / 150 = 1,12 (limite 1,25).
   Nunca aumentar sem um ficheiro maior. */
.membro-cab { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.membro-id { min-width: 0; }
.membro-id .membro-funcao { margin-bottom: 0; }
.membro-foto { flex: none; width: 3.75rem; height: 3.75rem; box-sizing: border-box; border-radius: 50%; border: 2px solid #C69C6D; overflow: hidden; }
.membro .membro-foto img { width: 100%; height: 100%; aspect-ratio: 1 / 1; margin: 0; border-radius: 0; object-fit: cover; display: block; }
.membro-ig { margin: 0.5rem 0 0; font-size: 0.875rem; }
.membro-ig-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--acento); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.membro-ig-link:hover { text-decoration-thickness: 2px; }
.prec-detalhes { margin-top: 1rem; border-top: 1px solid var(--linha); }
.prec-detalhes summary {
  cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.9375rem; list-style: none;
}
.prec-detalhes summary::-webkit-details-marker { display: none; }
/* O segundo valor (depois da barra) é o texto alternativo vazio: o "+" não entra no nome do botão */
.prec-detalhes summary::after { content: "+" / ""; font: 400 1.5rem/1 var(--fonte-texto); }
.prec-detalhes[open] summary::after { content: "\2212" / ""; }
.prec-detalhes-lista { display: grid; gap: 0.5rem; padding-bottom: 0.5rem; }
.prec-detalhes-lista li { font-size: 0.875rem; line-height: 1.5; color: var(--texto-2); padding-left: 1rem; position: relative; }
.prec-detalhes-lista li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--acento); }