/* ═══════════════════════════════════════════════════════════
   OFFSTUDIO — offstudio.css
   Bundle único com tudo o que o site precisa.

   Estrutura:
     1. TOKENS      → variáveis globais (cores, fontes, timings)
     2. BASE        → reset, tipografia, classes utilitárias
     3. SPLIT SCREEN → página de entrada (tattoo vs eyelashes)
     4. ANIMATIONS  → cursor, nav, hero, galeria, carrossel
═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. TOKENS
   Muda aqui para mudar tudo de uma vez.
   Se queres alterar uma cor, fonte ou velocidade,
   é sempre aqui o primeiro sítio a olhar.
═══════════════════════════════════════════════════════════ */

:root {

  /* ── Cores base ──────────────────────────────────────────
     --black  é o fundo de quase tudo no site.
     --off    é um preto ligeiramente mais claro, usado em cards hover.
     --white  não é branco puro — tem um tom quente (osso/creme)
              para não picar os olhos em écrans escuros.
     --muted  é o cinzento para texto secundário e labels pequenos.
     --line   é a cor das linhas divisórias subtis (quase invisível). */
  --black: #080808;
  --off: #0f0f0f;
  --white: #f0ede6;
  --muted: #555555;
  --line: rgba(255, 255, 255, 0.08);

  /* ── Mundo Tattoo (creme / neutro quente) ───────────────
     Fundo claro creme — mesma lógica light do eyelashes.
     --t-bg     → fundo principal (#ede8d0 creme claro)
     --t-mid    → tom intermédio para gradientes (#c4c0ab)
     --t-accent → cinzento-acastanhado médio — botões, destaques (#777567)
     --t-dark   → quase-preto da paleta — texto principal (#141410)
     --t-text   → texto secundário, labels (#545248)
     --t-light  → tom claro para fills e hoveres (#9d9988) */
  --t-bg: #ede8d0;
  --t-mid: #c4c0ab;
  --t-accent: #777567;
  --t-dark: #141410;
  --t-text: #545248;
  --t-light: #9d9988;

  /* ── Mundo Eyelashes (light / rosa) ─────────────────────
     Fundo claro rosado — inverte a lógica do tattoo (dark).
     --e-bg     → fundo principal da página (#ffcbdb rosa claro)
     --e-mid    → tom intermédio para gradientes e cards (#d0a6b3)
     --e-accent → mauve escuro — botões, borders, destaques (#a2828c)
     --e-dark   → quase-preto da paleta — texto principal (#292325)
     --e-text   → texto secundário, labels (#776067)
     --e-light  → usado para fills e hoveres claros (#ffcbdb = mesmo que bg) */
  --e-bg: #ffcbdb;
  --e-mid: #d0a6b3;
  --e-accent: #a2828c;
  --e-dark: #292325;
  --e-text: #776067;
  --e-light: #d0a6b3;

  /* ── Tipografia ──────────────────────────────────────────
     --f-serif → Cormorant Garamond para títulos, citações, display.
                 É a fonte editorial que dá o tom de luxo.
                 Fallback: Georgia (presente em todos os sistemas).
     --f-sans  → DM Sans para corpo de texto, labels, botões.
                 Limpa e legível a tamanhos pequenos. */
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Curvas de animação (easing) ─────────────────────────
     --expo   → entra rápido e abranda no final — sensação elástica.
                Usado em reveals, hover de painéis, logo do split.
     --smooth → começa e acaba suave — perfeito para transições de cor.
     --out    → desacelera no final — o standard do Material Design. */
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --smooth: cubic-bezier(0.76, 0, 0.24, 1);
  --out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Durações ────────────────────────────────────────────
     --fast → micro-interações (hover de botões, cor de links)
     --mid  → transições de estado (fade, escurecer painéis)
     --slow → animações de layout (expandir painel, reveal de label) */
  --fast: 0.25s;
  --mid: 0.55s;
  --slow: 0.95s;

  /* ── Espaçamento ─────────────────────────────────────────
     --pad-x  → padding horizontal das secções no desktop (3rem ≈ 48px)
     --pad-xs → versão mobile do padding horizontal */
  --pad-x: 3rem;
  --pad-xs: 1.5rem;

  /* ── Layout ──────────────────────────────────────────────
     --max-w → largura máxima do contentor central (.ctr).
               1300px mantém o conteúdo confortável em écrans grandes. */
  --max-w: 1300px;
}

/* No mobile, reduz o padding lateral automaticamente */
@media (max-width: 768px) {
  :root {
    --pad-x: 1.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   2. BASE
   Reset + utilitários que são usados em todas as páginas.
═══════════════════════════════════════════════════════════ */

/* Remove margin/padding padrão do browser em todos os elementos */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* base para rem — 1rem = 16px */
  background: var(--black);
  color: var(--white);
  font-family: var(--f-sans);
  cursor: auto;
  -webkit-font-smoothing: antialiased;
  /* suaviza fontes no Chrome/Safari macOS */
  -moz-osx-font-smoothing: grayscale;
  /* suaviza fontes no Firefox macOS */
}

body {
  overflow-x: hidden;
  /* garante que nada "escapa" para a direita e causa scroll horizontal */
  background: var(--black);
}

/* Remove decorações default dos links, herda cor do pai */
a {
  color: inherit;
  text-decoration: none;
}

/* Imagens e vídeos como bloco (evita espaço estranho em baixo) */
img,
video {
  display: block;
  max-width: 100%;
}

/* Botões sem estilos nativos — usamos sempre classes próprias */
button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}

/* Remove bullets de listas */
ul,
ol {
  list-style: none;
}


/* ── .ctr — Contentor centralizado ──────────────────────────
   Usa em todas as secções para limitar a largura e centrar.
   Exemplo: <div class="ctr"> ... </div> */
.ctr {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── .s — Secção genérica ────────────────────────────────────
   Espaçamento vertical consistente entre secções. */
.s {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

/* ── .s__two-col — Secção dividida em duas colunas ──────────
   Lado esquerdo: texto (.ctr com padding normal).
   Lado direito: imagem que ocupa o espaço restante até à borda.
   Em mobile colapsa para coluna única. */
.s__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 60vh;
}

.s__two-col__left {
  padding-top: 0;
  padding-bottom: 0;
}

.s__two-col__right {
  overflow: hidden;
  height: 100%;
  min-height: 480px;
  max-height: 600px;
}

.s__two-col__img {
  width: 100%;
  height: 130%;
  margin-top: -15%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 900px) {
  .s__two-col {
    grid-template-columns: 1fr 42%;
    align-items: start;
    gap: 2rem;
  }

  .s__two-col__left {
    align-self: start;
  }

  .s__two-col__right {
    min-height: unset;
    height: auto;
    position: sticky;
    top: 6rem;
  }

  .s__two-col__img {
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
  }
}

@media (max-width: 560px) {
  .s__two-col {
    grid-template-columns: 1fr 38%;
    gap: 1rem;
  }
}

/* ── .tag — Label pequeno de secção ─────────────────────────
   Ex: "O nosso trabalho", "Portfólio".
   Aparece acima dos títulos principais com dot colorido. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.58rem;
  /* propositalmente pequeno — é decorativo */
  letter-spacing: 0.25em;
  /* espaçamento generoso dá ar editorial */
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.8rem;
}

/* ── .disp — Título display grande ──────────────────────────
   Para os títulos principais de secção.
   Usa Cormorant Garamond com peso leve — é o estilo editorial.
   .disp--sm → versão menor para sub-títulos.
   .disp em  → texto em itálico dentro do título.
   .em--t / .em--e → cor de accent para a parte em itálico. */
.disp {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* tracking negativo em títulos grandes — mais "tight" */
}

.disp--sm {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.disp em {
  font-style: italic;
}

.em--t {
  color: var(--t-light);
}

.em--e {
  color: var(--e-light);
}

/* ── .lead — Parágrafo de introdução ────────────────────────
   Texto descritivo principal abaixo de títulos.
   Cor reduzida para 48% de opacidade — não compete com o título.
   max-width: 50ch → limita a cerca de 50 caracteres por linha (confortável). */
.lead {
  font-size: 0.97rem;
  line-height: 1.9;
  /* line-height generoso = mais ar = mais premium */
  color: rgba(255, 255, 255, 0.48);
  max-width: 50ch;
  margin-top: 1.8rem;
}

/* Variante para assinatura/autor (itálico, mais pequeno) */
.lead--author {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-style: italic;
}

/* ── .richtext — Output do Rich Text Editor do Umbraco ──────
   Estilos para o HTML que o editor de conteúdo produz no backoffice.
   Engloba parágrafos, headings, links e listas vindos do CMS. */
.richtext {
  font-size: 0.97rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
  max-width: 65ch;
  margin-top: 1.5rem;
}

.richtext p {
  margin-bottom: 1.2em;
}

.richtext h2 {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 2rem;
  margin-bottom: 0.8em;
  color: var(--white);
}

.richtext h3 {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 1.5rem;
  margin-bottom: 0.6em;
  color: var(--white);
}

.richtext a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.2s;
}

.richtext a:hover {
  border-color: var(--white);
}

.richtext ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.richtext li {
  margin-bottom: 0.5em;
}

/* ── .stats — Barra de números (ex: "+500 Clientes") ────────
   Flex horizontal com wrap — em mobile empilha automaticamente.
   Os valores usam a fonte serif para dar peso visual. */
.stats {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  padding: 2.5rem var(--pad-x);
  border-bottom: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stat__val {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat__val--t {
  color: var(--t-light);
}

/* número dourado na página tattoo */
.stat__val--e {
  color: var(--e-light);
}

/* número roxo na página eyelashes */
.stat__lbl {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── .testi — Bloco de testemunho / review ───────────────────
   Grid 1/3 + 2/3: lado esquerdo tem a nota e meta, direito a citação.
   Em mobile colapsa para coluna única. */
.testi {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 768px) {
  .testi {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.testi__meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.testi__num {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}

.testi__num--t {
  color: var(--t-light);
}

.testi__num--e {
  color: var(--e-light);
}

.testi__lbl {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A citação em si — grande, itálico, serif */
.testi__quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}

/* "— Nome, Cidade · Técnica" */
.testi__author {
  margin-top: 1.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── .ctablock — Bloco final de call-to-action ───────────────
   Flex com texto à esquerda e botão à direita.
   Tem linha superior para separar visualmente da secção acima. */
.ctablock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 4rem;
  margin-top: 4rem;
  border-top: 1px solid var(--line);
}

.ctablock__left p {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.ctablock__left h3 {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.05;
}

/* ── .btn — Botão base ────────────────────────────────────────
   O efeito de fill ao hover funciona com um ::before que cresce
   da esquerda para a direita (scaleX 0 → 1).
   O texto fica em z-index 1 para ficar acima do fill.

   Variantes:
     .btn--t → fill âmbar, texto fica preto (contraste)
     .btn--e → fill roxo, borda roxa desde o início */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 2rem;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  /* garante que o fill não sai para fora */
  transition: border-color var(--fast);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  /* começa invisível (largura zero) */
  transform-origin: left;
  /* cresce da esquerda */
  transition: transform 0.45s var(--expo);
}

.btn>* {
  position: relative;
  z-index: 1;
}

/* texto por cima do fill */
.btn:hover::before {
  transform: scaleX(1);
}

/* no hover, expande para 100% */
.btn:hover {
  border-color: currentColor;
}

.btn--t::before {
  background: var(--t-accent);
}

.btn--t:hover {
  color: var(--black);
}

/* texto preto sobre fundo âmbar */

.btn--e::before {
  background: var(--e-accent);
}

.btn--e {
  border-color: rgba(162, 130, 140, 0.35);
}

/* borda mauve subtil logo de início */
.btn--e:hover {
  color: var(--white);
  border-color: var(--e-accent);
}

/* ── .ft — Footer ────────────────────────────────────────────
   Uma linha subtil no fundo: copyright + crédito de desenvolvimento. */
.ft {
  padding: 1.8rem var(--pad-x);
  border-top: 1px solid var(--line);
}

.ft__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ft__copy,
.ft__sep,
.ft__dev {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
}

.ft__dev-link {
  color: inherit;
  transition: color var(--fast);
}

.ft__dev-link:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* Na página eyelashes (fundo claro) o texto do footer ajusta */
[data-theme="eyelashes"] .ft__copy,
[data-theme="eyelashes"] .ft__sep,
[data-theme="eyelashes"] .ft__dev {
  color: rgba(41, 35, 37, 0.3);
}

[data-theme="eyelashes"] .ft__dev-link:hover {
  color: var(--e-accent);
}

/* ── .mq — Marquee (texto que corre horizontalmente) ─────────
   .mq__t contém o texto duplicado e anima translateX(-50%)
   — ao chegar a metade já está no início outra vez (seamless loop).
   Hover pausa a animação para o utilizador poder ler.

   Para mudar a velocidade: altera os 24s em mq-scroll. */
.mq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.mq__t {
  display: inline-flex;
  align-items: baseline;
  gap: 3rem;
  animation: mq-scroll 24s linear infinite;
  /* ← muda aqui a velocidade */
}

.mq:hover .mq__t {
  animation-play-state: paused;
}

@keyframes mq-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* Cada palavra do marquee — grande, itálico, quase transparente */
.mq__w {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  color: rgba(255, 255, 255, 0.18);
  /* bem apagado no estado normal */
  letter-spacing: 0.04em;
  transition: color 0.3s;
}

.mq:hover .mq__w:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* destaca a palavra sob o cursor */

/* Separadores ✦ entre palavras */
.mq__s {
  font-size: 0.4rem;
  opacity: 0.45;
}

.mq__s--t {
  color: var(--t-accent);
}

.mq__s--e {
  color: var(--e-accent);
}

/* ── [data-r] — Scroll reveal ────────────────────────────────
   Qualquer elemento com data-r começa invisível e deslocado.
   Quando o IntersectionObserver (JS) o vê entrar no viewport,
   adiciona a classe .in e o CSS faz a transição.

   data-d="1/2/3/4" → delay escalonado para grupos de elementos.
   Se quiseres que um elemento não revele, simplesmente remove data-r. */
[data-r] {
  opacity: 0;
  transform: translateY(1.8rem);
  transition: opacity 0.9s var(--expo), transform 0.9s var(--expo);
}

[data-r].in {
  opacity: 1;
  transform: translateY(0);
}

/* Delays para sequências (ex: título + texto + botão entram em cascata) */
[data-r][data-d="1"] {
  transition-delay: 0.10s;
}

[data-r][data-d="2"] {
  transition-delay: 0.22s;
}

[data-r][data-d="3"] {
  transition-delay: 0.38s;
}

[data-r][data-d="4"] {
  transition-delay: 0.54s;
}


/* Ajustes mobile para .stats e .ctablock */
@media (max-width: 768px) {
  .stats {
    padding: 2rem var(--pad-x);
    gap: 2rem;
  }

  .ctablock {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ═══════════════════════════════════════════════════════════
   3. SPLIT SCREEN GATEWAY
   A página de entrada do site — dois painéis lado a lado,
   tattoo à esquerda, eyelashes à direita.

   Lógica de estado (controlada pelo JS via data attributes):
     split[data-a="tattoo"]     → hover está no painel esquerdo
     split[data-a="eyelashes"]  → hover está no painel direito
     split__p[data-s="active"]  → este painel está em foco
     split__p[data-s="dimmed"]  → este painel está em segundo plano
═══════════════════════════════════════════════════════════ */

/* O wrapper dos dois painéis — fullscreen, flex horizontal */
.split {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100dvh;
  /* dvh = dynamic viewport height, evita o problema do Safari mobile */
  overflow: hidden;
}

/* ── Painel individual ───────────────────────────────────────
   Cada painel começa com flex: 1 (50/50).
   A transição de flex cria o efeito de "expansão" ao hover. */
.split__p {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  display: block;
  transition: flex var(--slow) var(--expo);
  /* ← muda --slow para controlar a velocidade */
}

/* Quando se faz hover num painel: activo cresce para 58%, inactivo encolhe para 42% */
.split[data-a="tattoo"] .split__p--t {
  flex: 1.16;
}

.split[data-a="tattoo"] .split__p--e {
  flex: 0.84;
}

.split[data-a="eyelashes"] .split__p--e {
  flex: 1.16;
}

.split[data-a="eyelashes"] .split__p--t {
  flex: 0.84;
}

/* ── Fundo de cada painel ────────────────────────────────────
   Gradientes radiais sobrepostos para criar profundidade.
   will-change: filter, transform avisa o browser para criar
   uma layer GPU — evita re-renders durante a transição. */
.split__bg {
  position: absolute;
  inset: 0;
  transition: filter var(--mid) var(--smooth), transform var(--slow) var(--expo);
  will-change: filter, transform;
}

/* Gradientes do painel tattoo (creme quente, foco no canto inferior esquerdo) */
.split__p--t .split__bg {
  background:
    radial-gradient(ellipse 90% 80% at 30% 60%, var(--t-mid), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%, #d8d2b8, transparent 55%),
    var(--t-bg);
}

/* Gradientes do painel eyelashes (rosa claro, foco no canto inferior direito) */
.split__p--e .split__bg {
  background:
    radial-gradient(ellipse 85% 80% at 70% 55%, var(--e-mid), transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 20%, #f0b8c8, transparent 55%),
    var(--e-bg);
}

/* O painel que não está em foco escurece muito (brightness 0.22 = quase preto)
   e perde saturação de cor */
.split__p[data-s="dimmed"] .split__bg {
  filter: brightness(0.22) saturate(0.35);
}

/* O painel activo faz um zoom subtil no fundo — dá sensação de "vida" */
.split__p[data-s="active"] .split__bg {
  transform: scale(1.055);
  /* ← aumenta para mais zoom, diminui para menos */
}

/* ── Grain (textura de granulado) ────────────────────────────
   SVG inline codificado em base64 — não precisa de ficheiro externo.
   mix-blend-mode: overlay faz com que o grain se misture com o fundo
   em vez de cobri-lo. */
.split__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  /* ← sobe para granulado mais visível */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Fallback para Safari < 15.4 que não suporta mix-blend-mode bem —
   o JS detecta e adiciona .no-mix-blend ao <html> */
.no-mix-blend .split__grain {
  mix-blend-mode: normal;
  opacity: 0.08;
}


/* ── Media real (vídeo ou imagem do Umbraco) ─────────────────
   Quando o backoffice tem media configurada, substitui o gradiente puro.
   O vídeo/imagem cobre o painel inteiro (object-fit: cover).
   O gradiente de cor fica como overlay escuro por cima via ::after. */
.split__bg--media {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.split__p--t .split__bg--media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 30% 60%, rgba(35, 21, 8, 0.55), transparent 60%),
    rgba(10, 8, 6, 0.35);
}

.split__p--e .split__bg--media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 80% at 70% 55%, rgba(19, 10, 28, 0.55), transparent 60%),
    rgba(7, 6, 11, 0.35);
}

/* ── Overlay central (contém o label) ───────────────────────
   pointer-events: none porque o clique tem de passar para o <a> por baixo */
.split__ov {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  pointer-events: none;
}

/* ── Label "Tattoo" / "Eyelashes" ────────────────────────────
   O efeito de reveal usa clip-path:
   inset(0 0 100% 0) = recortado completamente da base → invisível
   inset(0 0 0% 0)   = sem recorte → visível

   mix-blend-mode: difference inverte as cores por baixo do texto —
   em fundos escuros o texto aparece claro, em fundos claros aparece escuro.
   Isso cria o efeito "vivo" do label atravessar o divisor branco.

   Para mudar o tamanho da fonte: altera o clamp(3rem, 8vw, 9rem) */
.split__lbl {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3rem, 8vw, 9rem);
  /* ← muda aqui o tamanho do label */
  letter-spacing: 0.04em;
  color: var(--white);
  mix-blend-mode: difference;
  display: block;
  clip-path: inset(0 0 100% 0);
  /* começa escondido */
  transition: clip-path var(--slow) var(--expo);
}

/* Safari: usa sombra de texto como alternativa ao mix-blend-mode */
.no-mix-blend .split__lbl {
  mix-blend-mode: normal;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* Quando activo: remove o recorte → label aparece com animação de baixo para cima */
.split__p[data-s="active"] .split__lbl {
  clip-path: inset(0 0 0% 0);
}

/* ── Linha decorativa abaixo do label ────────────────────────
   Cresce de 0 para um tamanho fixo quando o painel está activo.
   O delay de 0.1s faz com que apareça ligeiramente depois do label. */
.split__rule {
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transition: width var(--slow) var(--expo) 0.1s;
  /* ← o último valor é o delay */
}

.split__p[data-s="active"] .split__rule {
  width: clamp(50px, 8vw, 100px);
  /* ← muda o tamanho da linha */
}

/* ── "Entrar" (CTA subtil) ───────────────────────────────────
   Aparece abaixo da linha com um fade + slide.
   Delay de 0.22s para criar a sequência: label → linha → cta */
.split__enter {
  font-size: 0.57rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--mid) 0.22s, transform var(--mid) 0.22s var(--expo);
}

.split__p[data-s="active"] .split__enter {
  opacity: 1;
  transform: translateY(0);
}

/* ── Divisor central ─────────────────────────────────────────
   Linha vertical de 1px no centro exato.
   Gradiente linear para que desapareça nos extremos.
   Quando há hover (split[data-a]) fica a 50% de opacidade. */
.split__div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 25%,
      rgba(255, 255, 255, 0.07) 75%,
      transparent 100%);
  z-index: 10;
  pointer-events: none;
  transition: opacity var(--mid);
}

.split[data-a] .split__div {
  opacity: 0.5;
}

/* fica mais subtil durante o hover */

/* ── Logo central ────────────────────────────────────────────
   Posicionado no cruzamento dos dois painéis.
   Quando há hover, desloca-se ligeiramente para o lado do painel activo
   e encolhe um pouco (scale 0.8) para não competir com o label.

   Para mudar o deslocamento lateral: altera o 5vw nas linhas abaixo.
   Para mudar o encolhimento: altera o scale(0.8). */
.split__logo {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  transition: transform var(--slow) var(--expo);
}

/* Desloca o logo para o lado do painel activo */
.split[data-a="tattoo"] .split__logo {
  transform: translate(calc(-50% - 5vw)) scale(0.9);
}

.split[data-a="eyelashes"] .split__logo {
  transform: translate(calc(-50% + 5vw)) scale(0.9);
}

/* Tamanho do símbolo/imagem do logo */
.split__logo-mark {
  width: clamp(150px, 8vw, 110px);
}

/* Nome "OFFSTUDIO" em texto — mix-blend-mode: difference para visibilidade em ambos os fundos */
.split__logo-name {
  font-family: var(--f-serif);
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: 300;
  letter-spacing: 0.55em;
  /* muito espaçado — estilo logotipo */
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  mix-blend-mode: difference;
}

.no-mix-blend .split__logo-name {
  mix-blend-mode: normal;
}

/* Subtítulo do logo (ex: "Lisboa") */
.split__logo-sub {
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  mix-blend-mode: difference;
}

.no-mix-blend .split__logo-sub {
  mix-blend-mode: normal;
}

/* ── Scroll hint ─────────────────────────────────────────────
   O indicador de scroll em baixo ao centro.
   Entra com fade após 2.2s (tempo de carregamento da página).
   A bolinha anima de cima para baixo dentro da linha vertical. */

/* ── Mobile: empilhar verticalmente ─────────────────────────
   Em vez de lado a lado, os painéis ficam um em cima do outro. */
@media (max-width: 768px) {
  .split {
    flex-direction: column;
  }

  /* O divisor passa a ser horizontal */
  .split__div {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
  }

  /* No mobile o logo volta ao centro */
  .split__logo {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .split[data-a] .split__logo {
    transform: translate(-50%, -50%) scale(0.78);
  }

  /* Expansão vertical em vez de horizontal */
  .split[data-a="tattoo"] .split__p--t {
    flex: 1.2;
  }

  .split[data-a="tattoo"] .split__p--e {
    flex: 0.8;
  }

  .split[data-a="eyelashes"] .split__p--e {
    flex: 1.2;
  }

  .split[data-a="eyelashes"] .split__p--t {
    flex: 0.8;
  }
}


/* ═══════════════════════════════════════════════════════════
   4. ANIMATIONS
   Cursor, nav, hero, galeria, cards de serviço, carrossel.
═══════════════════════════════════════════════════════════ */


/* ── .hn — Nav das páginas de serviço ────────────────────────
   Fixo no topo, com mix-blend-mode: difference para ser visível
   sobre o hero (que pode ter qualquer cor de fundo).

   .hn.solid é adicionado pelo JS quando o scroll passa 80px —
   adiciona fundo escuro + blur para ser legível sobre o conteúdo. */
.hn {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem var(--pad-x);
  mix-blend-mode: difference;
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s, mix-blend-mode 0.3s;
}

/* Estado "sólido" — activo após 80px de scroll */
.hn.solid {
  mix-blend-mode: normal;
  /* desliga o blend mode */
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(16px);
  /* blur no fundo (efeito vidro) */
  padding: 1.2rem var(--pad-x);
  /* fica mais compacto */
  border-bottom: 1px solid var(--line);
}

/* Botão "← Início" no canto esquerdo da nav */
.hn__back {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--fast);
}

.hn__back:hover {
  color: var(--white);
}

.hn__back svg {
  transition: transform 0.25s var(--expo);
}

.hn__back:hover svg {
  transform: translateX(-4px);
}

/* seta desliza para a esquerda */

/* Nome do estúdio ao centro */
.hn__logo {
  font-family: var(--f-serif);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

/* Botão "Marcar" no canto direito — tem o mesmo efeito de fill que .btn */
.hn__book {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.55rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: border-color var(--fast);
}

.hn__book::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--expo);
}

.hn__book>span {
  position: relative;
  z-index: 1;
}

.hn__book:hover::before {
  transform: scaleX(1);
}

.hn__book--t::before {
  background: var(--t-accent);
}

.hn__book--t:hover {
  border-color: var(--t-accent);
  color: var(--black);
}

.hn__book--e::before {
  background: var(--e-accent);
}

.hn__book--e:hover {
  border-color: var(--e-accent);
}

/* ── .hero — Secção hero fullscreen ─────────────────────────
   O conteúdo (título + tag) fica em baixo à esquerda,
   sobre um fundo de gradiente + grain + vignette.

   .hero__bg--tattoo / --eyelashes → gradientes diferentes para cada página */
.hero {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* empurra o conteúdo para o fundo */
  padding: 0 var(--pad-x) 5rem;
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg--tattoo {
  background: var(--t-bg);
}

.hero__bg--eyelashes {
  background: var(--e-bg);
}

/* ── Tema light para a página Eyelashes ─────────────────────
   Tudo dentro de [data-theme="eyelashes"] inverte:
   fundo claro, texto escuro. */
[data-theme="eyelashes"] {
  background-color: var(--e-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120'%3E%3Cpath d='M0 60 C240 20 480 100 720 60 C960 20 1200 100 1440 60 L1440 120 L0 120 Z' fill='rgba(162,130,140,0.07)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120'%3E%3Cpath d='M0 40 C360 80 720 0 1080 50 C1260 75 1380 30 1440 40 L1440 120 L0 120 Z' fill='rgba(162,130,140,0.05)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120'%3E%3Cpath d='M0 80 C200 40 500 100 800 60 C1100 20 1300 90 1440 70 L1440 120 L0 120 Z' fill='rgba(162,130,140,0.04)'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 100% 340px, 100% 280px, 100% 220px;
  background-position: 0 0, 0 120px, 0 240px;
  animation: wave-e 18s ease-in-out infinite alternate;
  color: var(--e-dark);
}

@keyframes wave-e {
  0% {
    background-position: 0 0, 0 120px, 0 240px;
  }

  100% {
    background-position: 0 340px, 0 500px, 0 620px;
  }
}

/* Texto base: dark em vez de white */
[data-theme="eyelashes"] .hero__title,
[data-theme="eyelashes"] .hero__tag,
[data-theme="eyelashes"] .disp,
[data-theme="eyelashes"] .lead,
[data-theme="eyelashes"] .richtext,
[data-theme="eyelashes"] .testi__quote,
[data-theme="eyelashes"] .rv-card__text,
[data-theme="eyelashes"] .contact-info__val {
  color: var(--e-dark);
}

/* Labels secundárias */
[data-theme="eyelashes"] .hero__tag,
[data-theme="eyelashes"] .stat__lbl,
[data-theme="eyelashes"] .testi__author,
[data-theme="eyelashes"] .rv-card__author,
[data-theme="eyelashes"] .cf__label {
  color: var(--e-text);
}

/* Stats: valor em acento escuro */
[data-theme="eyelashes"] .stat__val--e {
  color: var(--e-accent);
}

/* Secções: fundo ligeiramente mais claro que o bg */
[data-theme="eyelashes"] .s {
  background: transparent;
}

/* Linha divisória visível no light */
[data-theme="eyelashes"] .rv-section {
  border-top-color: rgba(41, 35, 37, 0.12);
}

/* Cards de review: fundo branco suave, borda visível */
[data-theme="eyelashes"] .rv-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(162, 130, 140, 0.25);
}

[data-theme="eyelashes"] .rv-card:hover {
  border-color: var(--e-accent);
}

/* Inputs do formulário de review */
[data-theme="eyelashes"] .cf__input,
[data-theme="eyelashes"] .cf__select {
  background: rgba(255, 255, 255, 0.6);
  color: var(--e-dark);
  border-color: rgba(162, 130, 140, 0.35);
}

[data-theme="eyelashes"] .cf__input:focus,
[data-theme="eyelashes"] .cf__select:focus {
  border-color: var(--e-accent);
}

[data-theme="eyelashes"] .cf__input::placeholder {
  color: var(--e-text);
}

/* Upload zone */
[data-theme="eyelashes"] .rv-upload {
  border-color: rgba(162, 130, 140, 0.35);
}

[data-theme="eyelashes"] .rv-upload:hover {
  border-color: var(--e-accent);
  background: rgba(255, 255, 255, 0.2);
}

/* Botão eyelashes: fundo acento, texto claro */
[data-theme="eyelashes"] .btn--e {
  border-color: var(--e-accent);
  color: var(--e-dark);
}

[data-theme="eyelashes"] .btn--e:hover {
  color: var(--white);
}

/* Marquee: palavras escuras */
[data-theme="eyelashes"] .mq__w {
  color: rgba(41, 35, 37, 0.15);
}

[data-theme="eyelashes"] .mq__s--e {
  color: var(--e-accent);
}

/* Header/nav quando sobre fundo claro */
[data-theme="eyelashes"] .site-nav {
  color: var(--e-dark);
}

[data-theme="eyelashes"] .site-nav__logo-img {
  filter: invert(0);
}

[data-theme="eyelashes"] .site-nav__logo-text,
[data-theme="eyelashes"] .site-nav__link {
  color: var(--e-dark);
}

[data-theme="eyelashes"] .site-nav__link:hover {
  color: var(--e-accent);
}

[data-theme="eyelashes"] .site-nav::before {
  background: rgba(255, 203, 219, 0.9);
}

/* Grain: mais subtil no light */
[data-theme="eyelashes"] .hero__grain {
  opacity: 0.04;
}

/* CTA block */
[data-theme="eyelashes"] .ctablock {
  border-top-color: rgba(41, 35, 37, 0.12);
}

[data-theme="eyelashes"] .ctablock__left p {
  color: var(--e-text);
}

[data-theme="eyelashes"] .ctablock__left h3 {
  color: var(--e-dark);
}

/* ── Tema light para a página Tattoo ────────────────────────
   Mesmo padrão do eyelashes — fundo creme, texto escuro. */
[data-theme="tattoo"] {
  background-color: var(--t-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120'%3E%3Cpath d='M0 60 C240 20 480 100 720 60 C960 20 1200 100 1440 60 L1440 120 L0 120 Z' fill='rgba(119,117,103,0.07)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120'%3E%3Cpath d='M0 40 C360 80 720 0 1080 50 C1260 75 1380 30 1440 40 L1440 120 L0 120 Z' fill='rgba(119,117,103,0.05)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120'%3E%3Cpath d='M0 80 C200 40 500 100 800 60 C1100 20 1300 90 1440 70 L1440 120 L0 120 Z' fill='rgba(119,117,103,0.04)'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 100% 340px, 100% 280px, 100% 220px;
  background-position: 0 0, 0 120px, 0 240px;
  animation: wave-t 18s ease-in-out infinite alternate;
  color: var(--t-dark);
}

@keyframes wave-t {
  0% {
    background-position: 0 0, 0 120px, 0 240px;
  }

  100% {
    background-position: 0 340px, 0 500px, 0 620px;
  }
}

[data-theme="tattoo"] .hero__title,
[data-theme="tattoo"] .hero__tag,
[data-theme="tattoo"] .disp,
[data-theme="tattoo"] .lead,
[data-theme="tattoo"] .richtext,
[data-theme="tattoo"] .rv-card__text,
[data-theme="tattoo"] .contact-info__val {
  color: var(--t-dark);
}

[data-theme="tattoo"] .hero__tag,
[data-theme="tattoo"] .stat__lbl,
[data-theme="tattoo"] .testi__author,
[data-theme="tattoo"] .rv-card__author,
[data-theme="tattoo"] .cf__label {
  color: var(--t-text);
}

[data-theme="tattoo"] .stat__val--t {
  color: var(--t-accent);
}

[data-theme="tattoo"] .rv-section {
  border-top-color: rgba(20, 20, 16, 0.12);
}

[data-theme="tattoo"] .rv-card {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(119, 117, 103, 0.25);
}

[data-theme="tattoo"] .rv-card:hover {
  border-color: var(--t-accent);
}

[data-theme="tattoo"] .cf__input,
[data-theme="tattoo"] .cf__select {
  background: rgba(255, 255, 255, 0.55);
  color: var(--t-dark);
  border-color: rgba(119, 117, 103, 0.35);
}

[data-theme="tattoo"] .cf__input:focus,
[data-theme="tattoo"] .cf__select:focus {
  border-color: var(--t-accent);
}

[data-theme="tattoo"] .cf__input::placeholder {
  color: var(--t-text);
}

[data-theme="tattoo"] .rv-upload {
  border-color: rgba(119, 117, 103, 0.35);
}

[data-theme="tattoo"] .rv-upload:hover {
  border-color: var(--t-accent);
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="tattoo"] .btn--t {
  border-color: var(--t-accent);
  color: var(--t-dark);
}

[data-theme="tattoo"] .btn--t:hover {
  color: var(--white);
}

[data-theme="tattoo"] .mq__w {
  color: rgba(20, 20, 16, 0.12);
}

[data-theme="tattoo"] .mq__s--t {
  color: var(--t-accent);
}

[data-theme="tattoo"] .site-nav__logo-img {
  filter: invert(0);
}

[data-theme="tattoo"] .site-nav__logo-text,
[data-theme="tattoo"] .site-nav__link {
  color: var(--t-dark);
}

[data-theme="tattoo"] .site-nav__link:hover {
  color: var(--t-accent);
}

[data-theme="tattoo"] .site-nav::before {
  background: rgba(237, 232, 208, 0.9);
}

[data-theme="tattoo"] .hero__grain {
  opacity: 0.04;
}

[data-theme="tattoo"] .ctablock {
  border-top-color: rgba(20, 20, 16, 0.12);
}

[data-theme="tattoo"] .ctablock__left p {
  color: var(--t-text);
}

[data-theme="tattoo"] .ctablock__left h3 {
  color: var(--t-dark);
}

/* Grain sobre o hero (igual ao do split screen) */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.hero__content {
  position: relative;
  z-index: 2;
}

/* Label pequena acima do título (ex: "Estúdio de Tatuagem · Lisboa") */
.hero__tag {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 1.8rem;
}

/* Traço decorativo antes do texto */
.hero__tag::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* O título principal do hero — enorme, itálico */
.hero__title {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(5rem, 14vw, 13rem);
  /* ← muda o 14vw para controlar a escala */
  line-height: 0.88;
  /* muito comprimido — títulos de display */
  letter-spacing: -0.03em;
  color: var(--white);
}


@media (max-width: 768px) {
  .hero {
    padding: 0 var(--pad-x) 4rem;
  }
}

/* ── .gal — Galeria masonry ──────────────────────────────────
   Grid de 3 colunas com aspect-ratios alternados para criar
   o efeito masonry sem JavaScript.
   Em tablet: 2 colunas. Em mobile: 1 coluna. */
.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  /* ← gap mínimo — as imagens quase se tocam */
}

@media (max-width: 900px) {
  .gal {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .gal {
    grid-template-columns: 1fr;
  }
}

/* Cada célula da galeria */
.gal__i {
  overflow: hidden;
  position: relative;
  background: #111;
  /* placeholder enquanto a imagem carrega */
}

/* Aspect ratios e deslocamentos alternados para efeito masonry manual */
.gal__i:nth-child(1) {
  aspect-ratio: 3/4;
}

.gal__i:nth-child(2) {
  aspect-ratio: 3/3;
  margin-top: 3rem;
}

/* desce 3rem */
.gal__i:nth-child(3) {
  aspect-ratio: 3/4;
}

.gal__i:nth-child(4) {
  aspect-ratio: 3/3;
}

.gal__i:nth-child(5) {
  aspect-ratio: 3/4;
  margin-top: -3rem;
}

/* sobe 3rem */
.gal__i:nth-child(6) {
  aspect-ratio: 3/3;
}

/* A imagem/vídeo dentro da célula — faz zoom no hover */
.gal__fill {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--expo);
}

.gal__i:hover .gal__fill {
  transform: scale(1.06);
}

/* ← muda o zoom aqui */

/* Overlay escuro com caption — aparece no hover */
.gal__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(transparent 50%, rgba(8, 8, 8, 0.7));
  opacity: 0;
  transition: opacity 0.35s;
}

.gal__i:hover .gal__overlay {
  opacity: 1;
}

.gal__caption {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ── .svcgrid — Grid de cards de serviço ─────────────────────
   3 colunas separadas por linhas de 1px.
   O truque do background no .svcgrid + gap de 1px cria as linhas divisórias.
   Em mobile: 1 coluna. */
.svcgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.05);
  /* cor das linhas divisórias */
  margin-top: 3rem;
}

@media (max-width: 900px) {
  .svcgrid {
    grid-template-columns: 1fr;
  }
}

/* Card individual */
.svc {
  background: var(--black);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.3s;
}

.svc:hover {
  background: #0d0d0d;
}

/* hover subtil — só clareia ligeiramente */

.svc__n {
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* número "01", "02", etc. */
}

.svc__t {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  /* título do serviço */
}

.svc__d {
  font-size: 0.8rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.38);
  flex: 1;
  /* ocupa o espaço disponível — empurra o preço para o fundo */
  /* descrição do serviço */
}

.svc__p {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  /* preço — fica sempre no fundo do card graças ao flex: 1 no .svc__d */
}

/* ── Carrossel (Splide) ──────────────────────────────────────
   Overrides do Splide.js para o design do site.
   Os controlos nativos do Splide (.splide__arrow) estão desactivados —
   usamos os nossos próprios botões (.carousel-arrow--prev / --next). */
.splide {
  margin-top: 0;
}

.carousel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(163, 163, 163, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
  color: #f5f5f0;
  font-family: var(--font-body, sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  padding: 10px 22px;
  opacity: 0;
  transition: opacity .2s;
  will-change: transform;
  text-transform: uppercase;
}

/* overflow: visible permite que os slides saiam para fora do container
   sem serem cortados — importante para o layout "peek" */
.splide__track {
  overflow: visible;
}

@media (max-width: 640px) {
  .splide__track {
    overflow: hidden;
  }
}

/* Cada slide: ratio 3/4 (portrait) para fotos de tattoo/pestanas */
.carousel-slide {
  overflow: hidden;
  aspect-ratio: 3/4;
}

.carousel-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--expo);
}

.splide__slide:hover .carousel-slide__img {
  transform: scale(1.04);
}

/* Área dos botões de navegar */
.splide__arrows {
  position: static;
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
}

/* Botão seta (prev / next) — quadrado 42px com borda subtil
   No hover: fundo branco + texto preto (invert total) */
.carousel-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--fast), border-color var(--fast);
  position: static;
  transform: none;
  background: transparent;
}

.carousel-arrow:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* Esconde as setas built-in do Splide (usamos as nossas) */
.splide__arrow {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   NAVEGAÇÃO (site-nav)
   Barra fixa no topo — fundo transparente que escurece ao scroll
   ══════════════════════════════════════════════════════════ */

/* Wrapper fixo no topo, z-index acima de tudo */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 var(--pad-x);
  transition: background var(--slow), backdrop-filter var(--slow);
}

/* Quando a página fez scroll: fundo semi-opaco com blur */
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.site-nav.is-scrolled::before {
  opacity: 1;
}

/* Row interior — logo ao centro, menu à direita, 64px de altura */
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 64px;
  position: relative;
}

/* Logo — centrado absolutamente */
.site-nav__logo {
  text-decoration: none;
  color: var(--white);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Texto do logo — fonte display, pequena, tracking largo */
/* Logo como imagem — altura fixa, largura automática */
.site-nav__logo-img {
  height: 55px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: invert(1);
  transition: filter 0.3s ease;
}

.site-nav__logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Menu horizontal no desktop */
.site-nav__menu {
  display: flex;
}

/* Lista de links sem bullets */
.site-nav__list {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 0;
  margin: 0;
}

/* Cada link — sem sublinhado, cor muted, hover → branco */
.site-nav__link {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.6);
  text-decoration: none;
  transition: color var(--fast);
}

.site-nav__link:hover {
  color: var(--white);
}

/* Botão hambúrguer */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
  position: relative;
}

.site-nav__toggle-bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--expo), opacity 0.3s, width 0.3s var(--expo);
  transform-origin: center;
}

/* Animação X quando aberto */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile */
@media (max-width: 768px) {
  .site-nav__toggle {
    display: flex;
  }

  /* Overlay que cobre o ecrã inteiro — clicar fora fecha o menu */
  .site-nav__menu {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    justify-content: flex-end;
    background: transparent;
    pointer-events: none;
    transition: background 0.4s var(--expo);
  }

  .site-nav__menu.is-open {
    background: rgba(0, 0, 0, 0.45);
    pointer-events: auto;
  }

  /* Painel que desliza da direita */
  .site-nav__panel {
    width: min(300px, 80vw);
    height: 100%;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.5s var(--expo);
  }

  .site-nav__menu.is-open .site-nav__panel {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
    text-align: left;
  }

  .site-nav__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  .site-nav__list li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-nav__link {
    display: block;
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--white);
    padding: 1.1rem 0;
    transform: translateX(1.5rem);
    opacity: 0;
    transition: transform 0.5s var(--expo), opacity 0.4s var(--expo), color var(--fast);
    text-transform: none;
  }

  .site-nav__menu.is-open .site-nav__link {
    transform: translateX(0);
    opacity: 1;
  }

  .site-nav__list li:nth-child(1) .site-nav__link {
    transition-delay: 0.12s;
  }

  .site-nav__list li:nth-child(2) .site-nav__link {
    transition-delay: 0.20s;
  }

  .site-nav__list li:nth-child(3) .site-nav__link {
    transition-delay: 0.28s;
  }

  .site-nav__link:hover {
    color: rgba(255, 255, 255, 0.45);
  }
}

/* ══════════════════════════════════════════════════════════
   CAROUSEL — wrapper da secção
   ══════════════════════════════════════════════════════════ */

/* Contentor externo da secção de carrossel */
.carousel-section {
  padding: 0 var(--pad-x);
}

.carousel-swipe-hint { display: none; }

@media (max-width: 640px) {
  .carousel-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.2rem;
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  .carousel-swipe-hint.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .carousel-swipe-hint__text {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: currentColor;
    opacity: 0.45;
    text-transform: uppercase;
  }
  .carousel-swipe-hint__line {
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
  }
}

/* Mobile: 3 slides visíveis em grelha */
@media (max-width: 640px) {
  .splide__arrows {
    display: none;
  }

  .carousel-slide {
    aspect-ratio: 1 / 1;
  }
}

/* ══════════════════════════════════════════════════════════
   MEDIA PLAYER — vídeo ou imagem responsivo
   ══════════════════════════════════════════════════════════ */

/* Base: bloco, sem overflow, objectivo é preencher o espaço pai */
.media-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Vídeo: sem controlos, auto-loop */
.media-player--video {
  background: var(--black);
}

/* Imagem: já herdado do base, aqui por semântica */
.media-player--image {
  background: var(--black);
}

/* ══════════════════════════════════════════════════════════
   PÁGINA DE CONTACTOS
   Layout em duas colunas: formulário à esquerda, info + mapa à direita.
   Em mobile empilha verticalmente.
   ══════════════════════════════════════════════════════════ */

/* Hero da página de contactos — fundo neutro escuro sem cor de acento */
.hero--contact {
  background: var(--black);
}

.hero__bg--contact {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, #1a1410 0%, var(--black) 70%);
}

/* Grid principal: formulário | info+mapa */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  padding-top: 5rem;
  padding-bottom: 6rem;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
}

/* ── Formulário ──────────────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* Campo individual: label em cima, input em baixo */
.cf__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Label pequena, muted, uppercase */
.cf__label {
  font-family: var(--f-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cf__optional {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
  text-transform: lowercase;
}

/* Input e textarea — fundo escuro, borda subtil, foco com linha de acento */
.cf__input {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--white);
  background: var(--off);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color var(--fast);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.cf__input::placeholder {
  color: var(--muted);
}

.cf__input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Textarea: não redimensionável horizontalmente */
.cf__textarea {
  resize: vertical;
  min-height: 140px;
}

/* Select wrapper para controlar o ícone de seta */
.cf__select-wrap {
  position: relative;
}

.cf__select {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--white);
  background: var(--off);
  border: 1px solid var(--line);
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  outline: none;
  transition: border-color var(--fast);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.cf__select:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Opção placeholder (valor vazio) — muted */
.cf__select option[value=""] {
  color: var(--muted);
}

.cf__select option {
  color: var(--white);
  background: #1a1a1a;
}

/* Seta SVG posicionada à direita do select */
.cf__select-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* Quando o select tem valor escolhido muda a cor do acento consoante o serviço.
   Feito via JS adicionando data-service ao form. */
.contact-form[data-service="tattoo"] .cf__select {
  border-color: var(--t-accent);
}

.contact-form[data-service="eyelashes"] .cf__select {
  border-color: var(--e-accent);
}

/* Mensagem de erro por campo */
.cf__err {
  font-size: 0.7rem;
  color: #e07070;
  min-height: 1em;
}

/* Botão de envio — neutro, fica com cor do serviço escolhido via JS */
.btn--contact {
  align-self: flex-start;
  background: var(--white);
  color: var(--black);
  padding: 0.9rem 2.2rem;
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), opacity var(--fast);
}

.btn--contact:hover {
  opacity: 0.85;
}

.btn--contact:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Estado de loading nos botões de submit */
.btn--loading {
  position: relative;
  pointer-events: none;
}

.btn--loading span {
  opacity: 0;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Feedback de sucesso / erro após envio */
.cf__success {
  color: #70c090;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.cf__fail {
  color: #e07070;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ── Info de contacto ────────────────────────────────────── */

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-bottom: 3rem;
}

/* Item individual: label + valor em coluna */
.contact-info__item {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.contact-info__lbl {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-info__val {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  color: var(--white);
  line-height: 1.5;
}

/* Links de contacto — sem sublinhado, hover com opacidade */
.contact-info__link {
  text-decoration: none;
  transition: opacity var(--fast);
}

.contact-info__link:hover {
  opacity: 0.65;
}

.contact-info__ig-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-info__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity var(--fast);
}

.contact-info__ig:hover {
  opacity: 0.65;
}

.contact-info__ig-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.contact-info__ig--lash {
  color: #ffcbdb;
}

/* ── Mapa ────────────────────────────────────────────────── */

/* Contentor do mapa com cantos cortados e filtro escuro para tema coerente */
.contact-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* O iframe do Google Maps / embed ocupa todo o espaço */
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* Filtro que escurece e dessatura o mapa — combina com o tema dark */
  filter: invert(0.9) hue-rotate(180deg) saturate(0.4) brightness(0.85);
}

@media (max-width: 900px) {
  .contact-map {
    aspect-ratio: 16 / 9;
  }
}

/* ══════════════════════════════════════════════════════════
   REVIEWS — secção de avaliações da comunidade
   Grid de cards + formulário de submissão inline
   ══════════════════════════════════════════════════════════ */

/* Secção exterior */
.rv-section {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--line);
}

/* Header: título à esquerda, botão "Deixar avaliação" à direita */
.rv-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

/* Botão/link para abrir o formulário — sem fundo, só texto com acento */
.rv-write-trigger {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--fast);
  cursor: pointer;
}

.rv-write-trigger.rv--t {
  color: var(--t-accent);
}

.rv-write-trigger.rv--e {
  color: var(--e-accent);
}

.rv-write-trigger:hover {
  opacity: 0.7;
}

/* Grid de cards: 3 colunas no desktop, 1 no mobile */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

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

@media (max-width: 600px) {
  .rv-grid {
    grid-template-columns: 1fr;
  }
}

/* Card individual */
.rv-card {
  background: var(--off);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--fast);
}

.rv-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Imagem / vídeo do card — ratio 4/3 portrait */
.rv-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.rv-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--expo);
}

.rv-card:hover .rv-card__img {
  transform: scale(1.04);
}

/* Corpo do card: estrelas + texto + autor */
.rv-card__body {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

/* Estrelas no card */
.rv-card__stars {
  display: flex;
  gap: 0.2rem;
}

.rv-star {
  font-size: 0.9rem;
}

.rv-star--t {
  color: var(--t-light);
}

.rv-star--e {
  color: var(--e-light);
}

.rv-star--off {
  color: rgba(255, 255, 255, 0.15);
}

/* Texto da review */
.rv-card__text {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(245, 245, 240, 0.85);
  flex: 1;
}

/* Autor */
.rv-card__author {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Mensagem quando não há reviews */
.rv-empty {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 3rem;
}

/* ── Formulário de review ───────────────────────────────── */

/* Wrapper do formulário — escondido por default, abre via JS */
.rv-form-wrap {
  max-width: 560px;
  border-top: 1px solid var(--line);
  padding-top: 3rem;
  margin-top: 1rem;
}

.rv-form-wrap[hidden] {
  display: none;
}

.rv-form__title {
  font-family: var(--f-serif);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 2rem;
}

/* Selector de estrelas — botões clicáveis */
.rv-stars-input {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.rv-star-btn {
  font-size: 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.2);
  transition: color var(--fast), transform var(--fast);
  padding: 0;
  line-height: 1;
}

.rv-star-btn:hover,
.rv-star-btn.is-active {
  transform: scale(1.15);
}

.rv-star-btn.is-active.rv-star--t {
  color: var(--t-light);
}

.rv-star-btn.is-active.rv-star--e {
  color: var(--e-light);
}

/* Upload de ficheiro — zona de drag-and-drop */
.rv-upload {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}

.rv-upload:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
}

.rv-upload__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.rv-upload__lbl {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.rv-upload__hint {
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* Preview do ficheiro escolhido */
.rv-upload__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
  width: 100%;
}

/* Tag individual para cada ficheiro escolhido */
.cf-file-tag {
  font-size: 0.65rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.04em;
}

/* Nas páginas light as tags ajustam */
[data-theme="tattoo"] .cf-file-tag,
[data-theme="eyelashes"] .cf-file-tag {
  color: inherit;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.rv-form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.rv-form__submit {
  align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════
   BIO DA ARTISTA
   Secção com texto à esquerda e foto à direita.
═══════════════════════════════════════════════════════════ */

.artist-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.artist-bio__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  opacity: 0.5;
  text-transform: uppercase;
}

.artist-bio__body {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.75;
  opacity: 0.85;
  max-width: 52ch;
}

.artist-bio__photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 2px;
}

.artist-bio__photo img {
  width: 100%;
  height: 130%;
  margin-top: -15%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .artist-bio {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .artist-bio__photo {
    aspect-ratio: 4/3;
  }
}


/* ═══════════════════════════════════════════════════════════
   FEATS — Lista editorial estilo Codrops
   Cada item é uma linha horizontal com número, título e corpo.
   Reveal: clip-path da esquerda para a direita ao entrar no viewport.
═══════════════════════════════════════════════════════════ */

.feats-list {
  display: flex;
  flex-direction: column;
}

.feat-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 3rem;
  padding: 2.8rem 0;
  border-top: 1px solid currentColor;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: background 0.5s var(--expo);
}

.feat-item:last-child {
  border-bottom: 1px solid currentColor;
}

/* Linha de fundo animada que expande no hover */
.feat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.04;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--expo);
}

.feat-item:hover::before {
  transform: scaleX(1);
}

.feat-item__num {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1;
  opacity: 0.25;
  transition: opacity 0.5s var(--expo), transform 0.5s var(--expo);
}

.feat-item:hover .feat-item__num {
  opacity: 1;
  transform: translateX(0.5rem);
}

.feat-item__title {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  transition: transform 0.5s var(--expo);
}

.feat-item:hover .feat-item__title {
  transform: translateX(0.5rem);
}

.feat-item__body {
  font-family: var(--f-sans);
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: 1.7;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s var(--expo) 0.1s, transform 0.4s var(--expo) 0.1s;
}

.feat-item:hover .feat-item__body {
  opacity: 0.7;
  transform: translateY(0);
}

/* Animação de entrada */
.js-ready .feat-item {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity 0.9s var(--expo), transform 0.9s var(--expo);
}

.js-ready .feat-item.in {
  opacity: 1;
  transform: translateX(0);
}

.feat-item:nth-child(1) {
  transition-delay: 0.00s;
}

.feat-item:nth-child(2) {
  transition-delay: 0.14s;
}

.feat-item:nth-child(3) {
  transition-delay: 0.28s;
}

.feat-item:nth-child(4) {
  transition-delay: 0.42s;
}

@media (max-width: 768px) {
  .feat-item {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 2rem 0;
  }

  .feat-item__body {
    opacity: 0.6;
    transform: none;
  }

  .feat-item:hover .feat-item__body {
    opacity: 0.6;
  }
}


/* ═══════════════════════════════════════════════════════════
   CONTACT INTRO
═══════════════════════════════════════════════════════════ */

.contact-intro-section {
  padding-bottom: 0;
}

.contact-intro-text {
  font-family: var(--f-sans);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  opacity: 0.7;
  text-align: right;
  max-width: 60ch;
  margin-left: auto;
}