/* ============================================================
   WSLASHES — wslashes.pt
   Design: AvanceUp · V3 · 2026-09-18
   Redesign completo: atelier de beleza editorial —
   ivory quente + dourado rosado + tinta espresso.
   ============================================================ */

/* ---------- Tipos de letra (alojados no próprio site) ----------
   Estavam a ser pedidos ao Google Fonts. Alojá-los aqui tem duas
   vantagens: o navegador deixa de fazer uma ligação a um terceiro antes
   de conseguir pintar a página (é mais rápido), e o site deixa de
   enviar o IP das visitantes para a Google — que era a única coisa na
   política de cookies que obrigava a um aviso.
   Só os pesos mesmo usados: Cormorant 500 (normal e itálico) para os
   títulos, Jost 400/500/600 para o resto.
   ------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond Light — o título da abertura. O letreiro de ouro na
   parede do estúdio tem traço fino; o 500 ficava encorpado ao lado dele. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jost-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jost-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --ink: #241a14;
  --ink-soft: #5a4d43;
  --paper: #fdf8f4;
  --blush: #f6e9e2;
  --blush-deep: #eeded3;
  --gold: #b8905c;
  --gold-deep: #8f6a3e;
  --gold-soft: #ddb583;
  --rose: #c17c68;
  --line: rgba(36, 26, 20, 0.13);
  --line-light: rgba(253, 248, 244, 0.22);
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -26px rgba(36, 26, 20, 0.32);
  --shadow-soft: 0 14px 34px -18px rgba(36, 26, 20, 0.22);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  width: min(1160px, 92%);
  margin-inline: auto;
}

/* ---------- Tipografia ---------- */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.7rem, 6.5vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.95rem); }
h3 { font-size: 1.45rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}

.section-head.center .eyebrow::before { display: none; }
.section-head.center .eyebrow { justify-content: center; }

.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

em.fancy {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rose);
}

.hero em.fancy, .page-hero em.fancy, .cta-banner em.fancy { color: var(--gold-soft); }

/* ---------- Botões ---------- */

/* O botão é o objeto que a cliente toca para marcar — merece ser a peça
   mais bem acabada da página. Deixou de ser uma pílula de cor lisa: é
   agora uma placa de canto vivo, com o ouro em gradiente (o mesmo metal
   do monograma) e um brilho que atravessa só quando lá se passa. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  /* o espaçamento largo sobra à direita da última letra; o padding
     assimétrico devolve o texto ao centro ótico */
  letter-spacing: 0.24em;
  padding: 1.12rem 2.3rem 1.12rem 2.55rem;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid var(--gold);
  transition: color 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* O ouro é escuro na faixa do meio — onde a legenda assenta — e claro nos
   bordos, como uma chapa de metal apanha a luz. Não é só estética: com o
   gradiente claro anterior, o branco sobre o ouro dava 3,3:1 de contraste
   e falhava o mínimo legal de acessibilidade (4,5:1) para texto deste
   tamanho. Assim dá mais de 5:1 e o botão ficou até mais rico. */
/* Ouro chapado, não botão em relevo.
   O que aqui estava tinha sete paradas de gradiente e dois insets — um
   claro em cima, um escuro em baixo — que é a receita do bisel de 2010.
   O volume passa a vir só da sombra projectada, como no resto do site. */
.btn-solid {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(168deg, #b58a51 0%, #9c7643 54%, #87643a 100%);
  box-shadow: 0 12px 30px -18px rgba(64, 42, 20, 0.8);
}

/* O brilho especular: fica parado fora do botão e atravessa-o ao passar
   o rato. É o mesmo gesto do monograma na abertura do site. */
.btn-solid::after {
  content: "";
  position: absolute;
  inset: -50% -65%;
  z-index: -1;
  background: linear-gradient(104deg,
    transparent 42%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 58%);
  transform: translateX(-115%);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 16px 34px -16px rgba(64, 42, 20, 0.85);
}

.btn-solid:hover::after,
.btn-solid:focus-visible::after { transform: translateX(115%); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(184, 144, 92, 0.55);
}

/* O ouro sobe de baixo para cima em vez de aparecer de repente. */
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* mesmo metal do botão cheio, para o branco continuar legível ao passar */
  background: linear-gradient(177deg,
    #c9a06a 0%, #a87d4b 18%, #8b6639 32%, #7d5a30 52%,
    #856135 74%, #a87f4d 92%, #c09765 100%);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-ghost:hover,
.btn-ghost:focus-visible { color: #fff; border-color: var(--gold); }

.btn-ghost:hover::before,
.btn-ghost:focus-visible::before { transform: scaleY(1); }

/* Sobre fundo escuro (hero, faixa de marcação, barra de cookies) o
   contorno tem de vir da luz, não da tinta. */
.hero .btn-ghost,
.cta-banner .btn-ghost,
.cookie-banner .btn-ghost {
  color: var(--paper);
  border-color: rgba(253, 248, 244, 0.34);
}

.hero .btn-ghost:hover,
.hero .btn-ghost:focus-visible,
.cta-banner .btn-ghost:hover,
.cta-banner .btn-ghost:focus-visible,
.cookie-banner .btn-ghost:hover,
.cookie-banner .btn-ghost:focus-visible { color: #fff; border-color: var(--gold); }

.btn-small {
  padding: 0.7rem 1.4rem 0.7rem 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.btn-block { width: 100%; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-solid::after,
  .btn-ghost::before { transition: none; }
  .btn-solid::after { display: none; }
}

/* ---------- Saltar para o conteúdo ----------
   Quem navega por teclado (ou com leitor de ecrã) teria de passar pelos
   seis links do menu em cada página antes de chegar ao conteúdo. Este
   link está escondido até receber foco, que é quando passa a fazer falta. */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus { top: 0; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 248, 244, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.3em;
  text-decoration: none;
  line-height: 1.2;
}

/* Monograma em vetor (images/monograma.svg): fica nítido em qualquer
   ecrã e já vem com fundo transparente — não precisa do truque do
   mix-blend-mode que a versão em PNG obrigava. */
.brand img {
  height: 52px;
  width: auto;
}

.brand .brand-text span {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-nav a:not(.btn) {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}

.burger span {
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ============================================================
   HERO — Monograma em metal
   Abertura cerimonial: o "WS" em ouro polido, centrado, com
   reflexo no chão e um brilho que atravessa devagar. O texto
   entra em cascata por baixo, depois do emblema assentar.
   ============================================================ */

.hero {
  position: relative;
  color: var(--paper);
  overflow: hidden;
  min-height: clamp(620px, 94vh, 940px);
  display: flex;
  align-items: center;
  /* O palco, em três camadas de luz e nenhuma de sujidade:
     1) a luz que desce de cima, como a que bate no letreiro de ouro na
        parede do estúdio;
     2) a poça quente que assenta o emblema (era um ::before a pulsar de
        9 em 9 segundos — o movimento chamava a atenção para o fundo, que
        é precisamente onde ela não deve estar);
     3) o corpo do fundo, que escurece do centro para os cantos. */
  background:
    /* filete de ouro a fechar a abertura: o mesmo gesto da régua sob o
       emblema, a marcar a passagem do escuro para o creme em vez de a
       deixar como um corte a direito */
    linear-gradient(90deg, transparent, rgba(184, 144, 92, 0.5), transparent)
      bottom center / min(440px, 58%) 1px no-repeat,
    radial-gradient(ellipse 150% 58% at 50% -12%, rgba(178, 134, 78, 0.20) 0%, transparent 64%),
    radial-gradient(ellipse 62% 46% at 50% 30%, rgba(92, 68, 40, 0.5) 0%, transparent 72%),
    radial-gradient(ellipse 104% 78% at 50% 32%, #2b2016 0%, #1a130d 54%, #0d0906 100%);
}

/* Vinheta — fecha as bordas sem estrangular: era 72% de preto a partir
   dos 42%, o que empurrava o olhar para um túnel. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 96% 86% at 50% 42%, transparent 58%, rgba(6, 4, 2, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Dither, não grão.
   O grão anterior era uma textura preto-e-branco (desvio de 127 níveis)
   a 50% de opacidade: lia-se como chuvisco e apagava o "LASH DESIGNER",
   que é a parte mais fina do lockup. Este ruído é neutro — ±7 níveis em
   torno de 128, o ponto morto do modo overlay — e faz o trabalho que o
   grão devia estar a fazer: matar o "escadote" que os gradientes grandes
   deixam em ecrãs de 8 bits, sem se dar por ele. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/dither.png") repeat 0 0 / 128px 128px;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Nada de width: 100% aqui — anulava a margem lateral do .container e,
   no telemóvel, os botões encostavam aos bordos do ecrã. */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(1.8rem, 3.5vw, 3rem);
}

/* ---------- O emblema ---------- */

.hero-emblem {
  --emblem-w: clamp(155px, 18vw, 240px);
  --emblem-ratio: 1.0341; /* proporção do monograma-lockup.svg (largura/altura) */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(1rem, 2.2vw, 1.7rem);
  perspective: 1500px;
}

.emblem-mount {
  animation: emblem-in 1.6s cubic-bezier(0.16, 0.8, 0.3, 1) 0.15s both;
}

@keyframes emblem-in {
  from { opacity: 0; transform: scale(0.93); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.emblem-stage {
  transform-style: preserve-3d;
  animation: emblem-tilt 16s ease-in-out infinite;
}

@keyframes emblem-tilt {
  0%, 100% { transform: rotateY(-6deg) rotateX(1.5deg); }
  50% { transform: rotateY(6deg) rotateX(-1.5deg); }
}

/* A forma vem do lettermark real da marca, em vetor
   (images/monograma-lockup.svg). O ficheiro serve de máscara — o que
   se vê é o gradiente de ouro por baixo, nítido em qualquer tamanho. */
.emblem {
  position: relative;
  width: var(--emblem-w);
  aspect-ratio: var(--emblem-ratio);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.55));
}

.emblem-metal,
.emblem-sheen,
.emblem-reflection i {
  -webkit-mask-image: url("../images/monograma-lockup.svg");
  mask-image: url("../images/monograma-lockup.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Ouro polido: faixa escura no meio (o "horizonte" do metal),
   luz forte em cima e luz refletida a voltar por baixo. */
.emblem-metal {
  position: absolute;
  inset: 0;
  background: linear-gradient(177deg,
    #fdf6e4 0%,
    #efd9ab 16%,
    #d0aa6b 32%,
    #8d6837 45%,
    #553e22 51%,
    #9d7543 57%,
    #ddb981 71%,
    #f7ebd0 85%,
    #b8905c 100%);
}

/* Brilho especular que atravessa o metal de tempos a tempos */
.emblem-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 46%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.1) 54%,
    transparent 60%);
  background-size: 320% 100%;
  animation: emblem-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes emblem-sheen {
  0% { background-position: 170% 0; }
  45% { background-position: -70% 0; }
  100% { background-position: -70% 0; }
}

/* Reflexo no chão polido */
.emblem-reflection {
  width: var(--emblem-w);
  height: calc(var(--emblem-w) / var(--emblem-ratio) * 0.3);
  overflow: hidden;
  margin-top: 0.15rem;
  opacity: 0.22;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 26%, transparent 62%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 26%, transparent 62%);
}

.emblem-reflection i {
  display: block;
  width: 100%;
  aspect-ratio: var(--emblem-ratio);
  transform: scaleY(-1);
  background: linear-gradient(177deg, #fdf6e4 0%, #d0aa6b 32%, #8d6837 60%, #4a3620 100%);
  filter: blur(1.1px);
}

.emblem-rule {
  width: min(300px, 48vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
  transform-origin: center;
  animation: rule-in 1.2s cubic-bezier(0.16, 0.8, 0.3, 1) 0.95s both;
}

@keyframes rule-in {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* ---------- Texto do hero, em cascata ---------- */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.hero-copy {
  max-width: 720px;
  margin-inline: auto;
}

.hero .eyebrow {
  color: var(--gold-soft);
  justify-content: center;
}

.hero .eyebrow::before { display: none; }

/* Mais fino e maior ao mesmo tempo: ganha presença sem ganhar peso, e
   passa a falar a mesma língua que o letreiro de ouro do estúdio. */
.hero h1 {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  letter-spacing: 0.012em;
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* "pronta" leva o mesmo ouro polido do monograma que está logo acima —
   o brilho percorre a palavra em vez de a pintar de uma cor só.
   O gradiente vive dentro de um @supports porque `color: transparent`
   sem `background-clip: text` a apagaria por completo: sem suporte,
   fica o dourado chapado que já estava. */
.hero h1 em.fancy { font-weight: 400; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em.fancy {
    background: linear-gradient(174deg,
      #fdf6e4 0%, #efd9ab 20%, #d0aa6b 40%, #a87d43 52%,
      #ddb981 72%, #f7ebd0 88%, #c09765 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero p {
  margin: 1.2rem auto 0;
  font-size: 1.08rem;
  color: rgba(253, 248, 244, 0.76);
  max-width: 48ch;
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* (as variantes sobre fundo escuro estão junto aos botões, no topo) */

.hero-trust {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  justify-content: center;
}

.hero-trust .stat {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 248, 244, 0.55);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hero-trust .stat strong {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--gold-soft);
  letter-spacing: 0;
  text-transform: none;
}

.hero .eyebrow { animation: hero-rise 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) 1.15s both; }
.hero h1 { animation: hero-rise 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) 1.3s both; }
.hero-copy > p { animation: hero-rise 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) 1.45s both; }
.hero-actions { animation: hero-rise 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) 1.6s both; }
.hero-trust { animation: hero-rise 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) 1.75s both; }

@media (max-width: 900px) {
  .hero { min-height: clamp(600px, 92vh, 860px); }
  .hero-emblem { --emblem-w: clamp(150px, 42vw, 210px); }
  .hero h1 { font-size: clamp(1.9rem, 6.4vw, 2.4rem); }
  .hero p { font-size: 1.02rem; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .emblem-mount,
  .emblem-stage,
  .emblem-sheen,
  .emblem-rule,
  .hero .eyebrow,
  .hero h1,
  .hero-copy > p,
  .hero-actions,
  .hero-trust {
    animation: none;
  }
  .emblem-sheen { opacity: 0; }
}

/* Um traço que desce, em vez do desenho de um rato com a roda a andar:
   o segundo é um ícone de interface, e esta é uma abertura de marca. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  transform: translateX(-50%);
  z-index: 1;
  width: 26px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.hero-scroll span {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--gold-soft) 45%, transparent);
  animation: scrollcue 2.2s ease-in-out infinite;
}

@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* ---------- Hero interno (páginas) ---------- */

.page-hero {
  background: var(--ink);
  background-image: radial-gradient(ellipse 110% 130% at 80% -30%, #4a3a2a 0%, transparent 55%);
  color: var(--paper);
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.page-hero .eyebrow { color: var(--gold-soft); justify-content: center; }
.page-hero .eyebrow::before { display: none; }

.page-hero p {
  margin: 1.2rem auto 0;
  max-width: 58ch;
  color: rgba(253, 248, 244, 0.78);
}

/* ---------- Secções ---------- */

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-sand { background: var(--blush); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 640px; margin-bottom: 3.2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1rem; color: var(--ink-soft); }

/* ---------- Passos (como marcar) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 2.2rem 1.8rem 1.8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Um disco de ouro cheio era o elemento mais pesado da secção. Passou a
   um aro fino com o número em ouro e um halo suave à volta — lê-se como
   um selo, não como um autocolante. */
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  background: var(--paper);
  border: 1px solid rgba(184, 144, 92, 0.5);
  box-shadow: 0 0 0 5px rgba(184, 144, 92, 0.09);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1.45rem;
}

.step h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.step p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Cards ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.7rem;
}

/* O cartão tinha um filete dourado em cima e um "01" minúsculo a
   servir de decoração. O número passou a ser o elemento gráfico do
   cartão — grande, em fantasma, atrás do texto — e o filete saiu. Mais
   editorial, e o cartão deixa de ser uma caixa como outra qualquer. */
.card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.6rem 2.1rem 2.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(184, 144, 92, 0.45);
}

.card .num {
  position: absolute;
  top: 0.7rem;
  right: 1.5rem;
  font-family: var(--font-serif);
  font-size: 4.6rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.17;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.card:hover .num { opacity: 0.3; transform: translateY(-2px); }

.card h3 { position: relative; padding-bottom: 0.9rem; }

.card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 1px;
  background: var(--gold);
  transition: width 0.35s ease;
}

.card:hover h3::after { width: 60px; }

.card p { color: var(--ink-soft); font-size: 0.98rem; flex-grow: 1; }

.card .card-link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-deep);
}

.card .card-link:hover { color: var(--ink); }

/* ---------- Menu de preços ---------- */

.price-group { margin-bottom: 3.4rem; }
.price-group:last-child { margin-bottom: 0; }

.price-group-title {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.price-group-title::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--line);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 1.1rem;
  border-bottom: 1px dashed var(--line);
}

.price-row:last-child { border-bottom: 0; }

.price-name { font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; }

.price-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-dots {
  flex-grow: 1;
  border-bottom: 1px dotted rgba(36, 26, 20, 0.28);
  transform: translateY(-4px);
  min-width: 2rem;
}

.price-value {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--gold-deep);
  white-space: nowrap;
}

.price-note {
  margin-top: 2.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Guia de estilos (diagramas do olho) ---------- */

.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.style-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.style-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* A placa escura vai de bordo a bordo, como a chapa de um catálogo — é
   sobre o escuro que o fio de ouro do diagrama ganha brilho. */
.style-figure {
  background:
    radial-gradient(ellipse 85% 90% at 50% 20%, #372a1c 0%, transparent 65%),
    linear-gradient(170deg, #241a12 0%, #17110c 100%);
  border-bottom: 1px solid rgba(184, 144, 92, 0.28);
  padding: 1.15rem 1rem 0.9rem;
}

.style-figure img {
  width: 100%;
  height: auto;
}

.style-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.35rem 1.4rem 1.5rem;
}

.style-card h3 {
  font-size: 1.28rem;
  margin-bottom: 0.5rem;
}

.style-card p {
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
  flex-grow: 1;
}

.style-price {
  display: block;
  margin-top: 1.2rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}

.style-price i {
  font-style: normal;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.style-note {
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

@media (max-width: 1000px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .style-grid { grid-template-columns: 1fr; }
  .style-body { padding: 1.2rem 1.25rem 1.35rem; }
}



/* ---------- Estilos em destaque (página inicial) ----------
   Aqui estava uma lista de quatro preços em linhas finas, que repetia —
   pior — o que a página de Serviços já faz. Passou a mostrar os próprios
   diagramas: é a peça gráfica mais forte do site e não fazia sentido
   estar fechada numa página interior.
   ------------------------------------------------------------------ */

.estilo-fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.estilo-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "figura figura"
    "nome   preco"
    "nota   nota";
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  text-decoration: none;
  min-width: 0;
}

.estilo-mini img {
  grid-area: figura;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse 85% 90% at 50% 20%, #372a1c 0%, transparent 65%),
    linear-gradient(170deg, #241a12 0%, #17110c 100%);
  border: 1px solid rgba(184, 144, 92, 0.22);
  padding: 0.7rem 0.6rem 0.5rem;
  margin-bottom: 0.9rem;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.estilo-mini:hover img,
.estilo-mini:focus-visible img {
  transform: translateY(-4px);
  border-color: rgba(184, 144, 92, 0.6);
  box-shadow: var(--shadow);
}

.estilo-nome {
  grid-area: nome;
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.2;
}

.estilo-preco {
  grid-area: preco;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}

.estilo-nota {
  grid-area: nota;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .estilo-fila { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .estilo-fila { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Textura e profundidade ----------
   O site era plano: creme, creme e mais creme, com o escuro só na
   abertura e na faixa de marcação. Estas três camadas dão-lhe corpo sem
   acrescentar ruído visual — nenhuma delas se vê conscientemente, todas
   se notam se forem retiradas.
   ------------------------------------------------------------------- */

/* 1. Dither sobre os fundos escuros — o mesmo da abertura, pela mesma
      razão: mata o "escadote" que os gradientes grandes fazem em ecrãs de
      8 bits. O grão que aqui estava era a mesma textura preto-e-branco a
      50% que sujava o hero, e sujava também a faixa de marcação e o topo
      de todas as páginas interiores. */
.cta-banner::after,
.page-hero::after {
  background-image: url("../images/dither.png");
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
}

.cta-banner,
.page-hero { position: relative; }

.cta-banner::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cta-banner > *,
.page-hero > * { position: relative; z-index: 1; }

/* 2. O monograma como marca de água nas secções claras. Quase não se lê —
      é isso mesmo: dá a sensação de papel timbrado em vez de um fundo
      liso, e repete a marca sem a martelar. */
.section-sand {
  position: relative;
  overflow: hidden;
}

.section-sand::before {
  content: "";
  position: absolute;
  right: -9%;
  top: 50%;
  width: min(560px, 48vw);
  aspect-ratio: 0.874;
  transform: translateY(-50%);
  background: var(--ink);
  opacity: 0.028;
  -webkit-mask-image: url("../images/monograma.svg");
  mask-image: url("../images/monograma.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.section-sand > * { position: relative; }

/* 3. Moldura de ouro deslocada por trás dos retratos — o gesto clássico
      de emoldurar sem moldura. Dá profundidade à fotografia e liga-a à
      paleta sem lhe pôr nada por cima. */
/* A moldura de ouro do retrato.
   Era deslocada 14px para baixo e para a direita, por trás da foto, para dar
   profundidade. Só que assim assomava apenas em dois lados — e isso não se
   lê como intenção, lê-se como impressão desalinhada. Agora coincide com a
   aresta da foto e passa por cima dela: um filete nítido a toda a volta.
   (Com z-index positivo já não é preciso o isolation: isolate que antes
   segurava o -1.) */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 144, 92, 0.55);
  border-radius: var(--radius);
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 900px) {
  .section-sand::before { width: 70vw; opacity: 0.028; }
}

/* ---------- Sobre ---------- */

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.split.reverse { grid-template-columns: 7fr 5fr; }
.split.reverse .portrait { order: 2; }

.portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, #4a3a2a 0%, transparent 60%),
    var(--ink);
  display: grid;
  place-items: center;
  position: relative;
}

.portrait .monogram {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(4rem, 9vw, 7rem);
  color: var(--gold);
}

.portrait img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; border-radius: inherit; }

.split-text h2 { margin-bottom: 1.2rem; }
.split-text p { color: var(--ink-soft); margin-bottom: 1.1rem; }
.split-text .btn { margin-top: 0.8rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  border-radius: 999px;
  padding: 0.48rem 1.15rem;
  margin-bottom: 1.4rem;
}

/* A bandeira dos Estados Unidos, desenhada em ouro em vez de a cores.
   O site inteiro cabe numa faixa de 20 graus de matiz (13° a 34°); o
   azul da bandeira a cores cai a 145 graus dela e passaria a ser o
   único ponto saturado da página. Em ouro, fica a 6-9 graus do centro
   — lê-se como relevo em metal, na linguagem do monograma. */
.badge img,
.hero-trust .stat img {
  height: 0.92em;
  width: auto;
  display: block;
  flex: none;
}
.badge img { border: 1px solid rgba(36, 26, 20, 0.18); }
.hero-trust .stat img { border: 1px solid rgba(253, 248, 244, 0.22); }

/* ---------- Listas de destaque ---------- */

.feature-list { list-style: none; margin-top: 1.4rem; }

.feature-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}

.feature-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ---------- Dicas / cuidados ---------- */

.tip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.3rem 2.1rem;
}

.tip h3 { margin-bottom: 0.8rem; }

.tip h3 .tip-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
  margin-right: 0.6rem;
}

.tip p { color: var(--ink-soft); font-size: 0.98rem; }

.tip ul { margin-top: 0.8rem; padding-left: 1.2rem; color: var(--ink-soft); font-size: 0.98rem; }
.tip ul li { margin-bottom: 0.4rem; }

/* ---------- Mapa / localização ---------- */

.map-box {
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--blush);
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  padding: 2rem;
  color: var(--ink-soft);
}

.map-placeholder .map-link {
  color: var(--gold-deep);
  font-size: 0.9rem;
}

/* ---------- Calendário de marcação (Google Agenda) ---------- */

.calendar-embed {
  min-height: 640px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--blush);
}

.calendar-embed iframe {
  width: 100%;
  height: 640px;
  border: 0;
  display: block;
}

.calendar-placeholder {
  height: 100%;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  padding: 2rem;
  color: var(--ink-soft);
}

.calendar-placeholder .map-link {
  color: var(--gold-deep);
  font-size: 0.9rem;
}

@media (max-width: 560px) {
  .calendar-embed, .calendar-embed iframe, .calendar-placeholder { min-height: 560px; height: 560px; }
}

/* ---------- Galeria / portfólio (mosaico editorial) ---------- */

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 1.2rem;
}

.gallery-mosaic figure {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}

/* Posições fixas (linha/coluna) em vez de spans automáticos: com seis
   fotos de alturas diferentes, o preenchimento automático deixava
   buracos na grelha. */
.gallery-mosaic figure:nth-child(1) { grid-area: 1 / 1 / 5 / 3; }
.gallery-mosaic figure:nth-child(2) { grid-area: 1 / 3 / 4 / 5; }
.gallery-mosaic figure:nth-child(3) { grid-area: 1 / 5 / 5 / 7; }
.gallery-mosaic figure:nth-child(4) { grid-area: 4 / 3 / 8 / 5; }
.gallery-mosaic figure:nth-child(5) { grid-area: 5 / 1 / 8 / 3; }
.gallery-mosaic figure:nth-child(6) { grid-area: 5 / 5 / 8 / 7; }

.gallery-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-mosaic figure:hover img { transform: scale(1.06); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.gallery figure {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.gallery figure:hover img { transform: scale(1.05); }


/* ---------- Visualizador de fotografias ---------- */

/* O botão que o JavaScript põe à volta de cada foto não deve alterar o
   mosaico — é só a camada que torna a foto clicável e focável. */
.lightbox-abrir {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}

.lightbox-abrir:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

/* Pista de que a foto abre: um sinal discreto que só aparece ao passar. */
.lightbox-abrir::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(to right, currentColor 0 100%) center/11px 1px no-repeat,
    linear-gradient(to bottom, currentColor 0 100%) center/1px 11px no-repeat,
    rgba(20, 14, 10, 0.55);
  color: var(--paper);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.lightbox-abrir:hover::after,
.lightbox-abrir:focus-visible::after { opacity: 1; transform: scale(1); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 10, 7, 0.94);
  backdrop-filter: blur(6px);
  animation: lightbox-entra 0.28s ease both;
}

/* Sem isto o visualizador fica SEMPRE visível: o atributo hidden do HTML
   vale display:none, mas vem da folha do navegador e qualquer seletor de
   classe ganha-lhe. Tem de ser dito explicitamente. */
.lightbox[hidden] { display: none; }

@keyframes lightbox-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.lightbox-aberto { overflow: hidden; }

.lightbox-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.lightbox-palco img {
  max-width: min(100%, 900px);
  max-height: 78vh;
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

.lightbox-palco figcaption {
  color: rgba(253, 248, 244, 0.72);
  font-size: 0.86rem;
  text-align: center;
  max-width: 60ch;
}

.lightbox-fechar,
.lightbox-nav {
  border: 1px solid rgba(253, 248, 244, 0.28);
  background: rgba(253, 248, 244, 0.06);
  color: var(--paper);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.lightbox-fechar:hover,
.lightbox-nav:hover,
.lightbox-fechar:focus-visible,
.lightbox-nav:focus-visible {
  background: rgba(253, 248, 244, 0.16);
  border-color: var(--gold);
}

.lightbox-nav {
  width: 52px;
  height: 52px;
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.lightbox-fechar {
  position: absolute;
  top: clamp(0.8rem, 2.5vw, 1.6rem);
  right: clamp(0.8rem, 2.5vw, 1.6rem);
  width: 46px;
  height: 46px;
  font-size: 1.7rem;
  line-height: 1;
}

@media (max-width: 640px) {
  /* Em telemóvel as setas passam para baixo da foto: ao lado, roubavam
     largura à imagem, que é o que interessa ver. */
  .lightbox { flex-wrap: wrap; align-content: center; }
  .lightbox-palco { order: 1; flex-basis: 100%; }
  .lightbox-antes { order: 2; }
  .lightbox-depois { order: 3; }
  .lightbox-nav { width: 46px; height: 46px; }
  .lightbox-palco img { max-height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .lightbox-abrir::after { transition: none; }
}

/* ---------- CTA banner ---------- */

.cta-banner {
  background:
    radial-gradient(ellipse 100% 140% at 50% -40%, #4a3a2a 0%, transparent 60%),
    var(--ink);
  color: var(--paper);
  text-align: center;
}

.cta-banner .eyebrow { color: var(--gold-soft); justify-content: center; }
.cta-banner .eyebrow::before { display: none; }

.cta-banner p {
  margin: 1.2rem auto 2.2rem;
  max-width: 52ch;
  color: rgba(253, 248, 244, 0.78);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(253, 248, 244, 0.72);
  padding-block: 3.6rem 6.5rem;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-light);
}

.footer-brand {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  color: var(--paper);
  margin-bottom: 0.8rem;
}

.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  text-decoration: none;
  margin-bottom: 0.55rem;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--paper); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: rgba(253, 248, 244, 0.45);
}

.footer-bottom a { color: inherit; }

@media (min-width: 601px) {
  .site-footer { padding-block: 3.6rem 2rem; }
}

/* ---------- Botão flutuante WhatsApp ---------- */

.whatsapp-fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

.whatsapp-fab svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

/* ---------- Barra fixa de marcação (mobile) ---------- */

.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: rgba(253, 248, 244, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  gap: 0.7rem;
}

.mobile-cta-bar .btn { flex: 1; padding-block: 0.85rem; }

@media (max-width: 640px) {
  .mobile-cta-bar { display: flex; }
  .whatsapp-fab { display: none; }
  body { padding-bottom: 4.4rem; }
}

/* ---------- Barra de consentimento de cookies ---------- */

.cookie-banner {
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  z-index: 70;
  max-width: 430px;
  background: var(--ink);
  color: rgba(253, 248, 244, 0.86);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 22px 55px -18px rgba(0, 0, 0, 0.55);
  font-size: 0.92rem;
  line-height: 1.55;
}

.cookie-banner a { color: var(--gold-soft); }
.cookie-banner strong { color: var(--paper); }

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.cookie-banner .btn-ghost {
  color: rgba(253, 248, 244, 0.86);
  border-color: var(--line-light);
}

.cookie-banner .btn-ghost:hover { border-color: var(--gold); }

body.cookie-open .whatsapp-fab,
body.cookie-open .mobile-cta-bar { opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .cookie-banner { left: 1rem; right: 1rem; bottom: 5.2rem; max-width: none; }
}

/* ---------- Formulário de marcação ---------- */

.booking-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: flex-start;
}

/* Sem isto, o tamanho mínimo automático dos itens (min-content) estica
   as colunas e o site ganha scroll horizontal no telemóvel. */
.booking-layout > * { min-width: 0; }

.booking-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}

.field { margin-bottom: 1.3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 144, 92, 0.18);
}

.field textarea { resize: vertical; min-height: 90px; }

.field-hint { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.4rem; }

.form-note {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 1.2rem;
}

.booking-info {
  background: var(--blush);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.4rem);
  position: sticky;
  top: 100px;
}

.booking-info h2 { margin-bottom: 1.2rem; }

/* Na página de marcação os dois passos são as secções principais, por isso
   são <h2>. Mantêm o tamanho de um h3 — a hierarquia é semântica, não
   tipográfica. */
.booking-form h2,
.booking-info h2 { font-size: 1.45rem; }

.booking-steps { list-style: none; counter-reset: bstep; }

.booking-steps li {
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.booking-steps li::before {
  counter-increment: bstep;
  content: counter(bstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(184, 144, 92, 0.5);
  box-shadow: 0 0 0 4px rgba(184, 144, 92, 0.08);
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  display: grid;
  place-items: center;
}

.booking-steps strong { color: var(--ink); }

.mbway-box {
  margin-top: 1.6rem;
  background: #fff;
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.mbway-box .mbway-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}

/* Um número que alguém vai copiar à mão tem de ser lido sem esforço:
   sem serifa, com peso, e com algarismos de largura fixa. */
.mbway-box .mbway-number {
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}

.mbway-box button {
  border: 0;
  background: none;
  color: var(--gold-deep);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
}

.policy-note {
  margin-top: 1.6rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}

.form-success {
  display: none;
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.form-success.show { display: block; }
.form-success h3 { color: var(--gold-deep); margin-bottom: 0.6rem; }
.form-success p { color: var(--ink-soft); margin-bottom: 1.2rem; }

/* ---------- Animações de entrada ---------- */

/* O estado de repouso é VISÍVEL. A animação só passa a existir quando o
   JavaScript confirma que está vivo (põe a classe .js no <html> ainda
   antes da primeira pintura).

   Antes era ao contrário: .reveal nascia com opacity: 0 e só o
   IntersectionObserver a punha a 1. Bastava o main.js falhar, ser
   bloqueado por uma extensão de privacidade ou dar erro numa linha
   acima, e a página inteira ficava em branco por baixo do cabeçalho —
   preços, galeria, textos, tudo. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll span { animation: none; }
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .portrait { order: 0; }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-info { position: static; }
  .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 0.9rem; }
  .gallery-mosaic figure:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
  .gallery-mosaic figure:nth-child(2) { grid-area: 3 / 1 / 5 / 2; }
  .gallery-mosaic figure:nth-child(3) { grid-area: 3 / 2 / 5 / 3; }
  .gallery-mosaic figure:nth-child(4) { grid-area: 5 / 1 / 7 / 2; }
  .gallery-mosaic figure:nth-child(5) { grid-area: 5 / 2 / 7 / 3; }
  .gallery-mosaic figure:nth-child(6) { grid-area: 7 / 1 / 9 / 3; }
  .gallery { grid-template-columns: 1fr; }
  .brand img { height: 44px; }
  .portrait { max-width: 420px; }
  /* A seta de "descer" caía por cima da última linha de confiança — e no
     telemóvel ninguém precisa que lhe digam para deslizar. (Tem de estar
     aqui, depois da regra base, senão a cascata desfaz o display: none.) */
  .hero-scroll { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .field-row { grid-template-columns: 1fr; }

  .burger { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 4% 1.4rem;
    display: none;
  }

  .site-nav.open { display: flex; }

  .site-nav a:not(.btn) {
    width: 100%;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line);
  }

  .site-nav .btn { margin-top: 1.2rem; }

  body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  .price-desc { display: none; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-trust { gap: 1.2rem 1.8rem; }
  /* Em ecrãs estreitos os botões podem partir a linha em vez de
     empurrar a largura da página. */
  .btn { white-space: normal; }
}