/*!
 * © 2026 Tiago Ferreira — Todos os direitos reservados.
 * Website desenvolvido por Tiago Ferreira para Athenas Studio Tattoo.
 * É proibida a cópia, reprodução ou reutilização deste código, total ou parcial,
 * sem autorização escrita do autor.
 */
/* =========================================================
   Athenas Studio Tattoo — Estilos
   Mobile-first: os estilos base são para telemóvel e as
   media queries (min-width) acrescentam o tablet e o desktop.
   ========================================================= */

/* ---------- 1. Variáveis (cores, letras, espaços) ---------- */
:root {
  /* Paleta do logótipo */
  --taupe: #A07E70;
  --rose-brown: #8A5E50;
  --dark-brown: #4A2E26;
  --ink: #2A1A15;
  --cream: #F5EEE8;

  /* Cores medidas no logótipo original (logo athenas.jpeg) */
  --pearl: #FCF9F7;       /* letras do logótipo */
  --logo-light: #BCA090;  /* brilhos claros */
  --logo-mid: #8E6151;    /* tom médio */
  --logo-dark: #5B372E;   /* zona escura */

  /* Tons auxiliares */
  --cream-2: #EDE2D9;
  --brown-mid: #75493D;
  --error: #9A2F23;
  --line-dark: rgba(42, 26, 21, .2);
  --line-light: rgba(252, 249, 247, .26);
  --text-soft: rgba(42, 26, 21, .72);
  --text-soft-light: rgba(252, 249, 247, .84);

  /* Gradiente do logótipo: brilho claro em cima à esquerda e em baixo à direita,
     zonas escuras em cima à direita e em baixo à esquerda (afinado a partir do original) */
  --grad-logo:
    radial-gradient(ellipse 58% 30% at 4% 22%, rgba(188, 160, 144, .95) 0%, rgba(188, 160, 144, 0) 100%),
    radial-gradient(ellipse 30% 14% at 24% 4%, rgba(166, 136, 126, .8) 0%, rgba(166, 136, 126, 0) 100%),
    radial-gradient(ellipse 58% 21% at 78% 72%, rgba(182, 152, 140, .95) 0%, rgba(182, 152, 140, 0) 100%),
    radial-gradient(ellipse 34% 16% at 56% 86%, rgba(160, 120, 106, .9) 0%, rgba(160, 120, 106, 0) 100%),
    radial-gradient(ellipse 62% 42% at 80% 18%, rgba(91, 55, 46, 1) 0%, rgba(91, 55, 46, .85) 40%, rgba(91, 55, 46, 0) 100%),
    radial-gradient(ellipse 22% 26% at 50% 18%, rgba(110, 72, 62, .9) 0%, rgba(110, 72, 62, 0) 100%),
    radial-gradient(ellipse 62% 36% at 0% 100%, rgba(104, 61, 51, 1) 0%, rgba(104, 61, 51, 0) 100%),
    radial-gradient(ellipse 22% 14% at 100% 100%, rgba(108, 68, 57, .85) 0%, rgba(108, 68, 57, 0) 100%),
    linear-gradient(160deg, #A07A6B 0%, #8F6352 45%, #845A4B 100%);
  --grad-section: linear-gradient(165deg, var(--logo-mid) 0%, var(--brown-mid) 48%, var(--logo-dark) 100%);
  --grad-ink: linear-gradient(180deg, var(--ink) 0%, #1F130F 100%);

  /* Textura de grão (ruído SVG de 180px, repetido) sobre os fundos castanhos.
     Nota: os gradientes ficam com background-size automático e o grão usa o seu tamanho próprio. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");

  /* Tipografia */
  --font-sans: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espaçamentos e medidas */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5.5rem, 12vw, 10rem);
  --header-h: 4.5rem;
  --max-w: 76rem;

  /* Animação */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Cor do contorno de foco (muda nos fundos escuros) */
  --focus: var(--rose-brown);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Sem JavaScript, os links internos deslizam com CSS (com JS, quem trata é o Lenis) */
html:not(.js) { scroll-behavior: smooth; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }

::selection { background: var(--rose-brown); color: var(--cream); }

/* Foco visível para navegação por teclado */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}
[tabindex="-1"]:focus { outline: none; }

/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.scroll-locked, html.scroll-locked body { overflow: hidden; }

/* ---------- 3. Utilitários ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--max-w));
  margin-inline: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 300;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
  font-size: .85rem;
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fundos das secções (alternância castanho / creme) */
.section--cream { background: var(--cream); color: var(--ink); }

.section--brown,
.section--ink,
.hero,
.preloader,
.mobile-menu,
.site-footer {
  --focus: var(--pearl);
  color: var(--pearl);
}
.section--brown { background-color: var(--logo-dark); background-image: var(--grain), var(--grad-section); }
.section--ink { background-color: var(--ink); background-image: var(--grain), var(--grad-ink); }

/* Títulos e textos comuns */
.eyebrow {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rose-brown);
  margin-bottom: 1.1rem;
}
.section--brown .eyebrow,
.section--ink .eyebrow { color: var(--text-soft-light); }

.section-title {
  font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.section-intro {
  max-width: 34rem;
  color: var(--text-soft);
  font-size: 1.02rem;
}
.section--brown .section-intro,
.section--ink .section-intro { color: var(--text-soft-light); }

.section-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
}
.section-head .section-intro { margin-inline: auto; }

/* Ornamentos Fine Line (SVG que se desenham) */
.ornament {
  width: 9.5rem;
  height: auto;
  margin: 1.6rem 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .55;
}
.section-head .ornament,
.footer__inner .ornament { margin-inline: auto; }
.draw { overflow: visible; }

/* ---------- 4. Botões ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: 1.1em 2.3em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out), background-color .5s var(--ease-out);
}
/* Preenchimento que sobe ao passar o rato */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }

.btn--light { color: var(--pearl); }
.btn--light:hover { color: var(--rose-brown); }
.btn--light::before { background: var(--cream); }

.btn--outline { color: inherit; }
.btn--outline::before { background: var(--rose-brown); }
.btn--outline:hover { color: var(--cream); border-color: var(--rose-brown); }

.btn--dark { color: var(--cream); background: var(--ink); border-color: var(--ink); }
.btn--dark::before { background: var(--rose-brown); }
.btn--dark:hover { border-color: var(--rose-brown); }

.btn--sm { padding: .9em 1.6em; font-size: .68rem; }

.btn--chip {
  padding: .85em 1.35em;
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--cream);
  border-color: var(--line-light);
}
.btn--chip::before { background: var(--cream); }
.btn--chip:hover { color: var(--dark-brown); border-color: var(--cream); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s;
}
.icon-btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- 5. Logótipo (SVG vetorizado a partir do original) ---------- */
/* As letras estão definidas uma vez no fim do index.html (<symbol id="logo">) */
.logo {
  display: inline-block;
  margin: 0;
  line-height: 0;
  color: var(--pearl);
}
.logo-svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
  fill-rule: evenodd;
  overflow: visible;
}

.logo--hero { width: min(84vw, 50rem); }
.logo--preloader { width: min(68vw, 21rem); }

/* ---------- 6. Preloader ---------- */
.preloader { display: none; }
.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2rem;
  background-color: var(--logo-mid);
  background-image: var(--grain), var(--grad-logo);
  /* Segurança: se o JavaScript falhar, o preloader desaparece sozinho */
  animation: preloader-failsafe .6s ease 3s forwards;
}
.preloader .logo { animation: preloader-in 1.2s var(--ease-out) both; }
.preloader__line {
  position: relative;
  width: 7rem;
  height: 1px;
  overflow: hidden;
  background: var(--line-light);
}
.preloader__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform-origin: left;
  animation: preloader-bar 1.8s var(--ease-in-out) forwards;
}
.js .preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .9s var(--ease-out), visibility 0s linear .9s;
}
@keyframes preloader-in { from { opacity: 0; transform: scale(.96); filter: blur(6px); } }
@keyframes preloader-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- 7. Menu fixo ---------- */
.site-header {
  --focus: var(--pearl);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  color: var(--pearl);
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease-out), border-color .5s, -webkit-backdrop-filter .5s, backdrop-filter .5s;
}
.site-header.is-scrolled {
  background-color: rgba(74, 46, 38, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(245, 238, 232, .08);
}
.menu-open .site-header {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  display: block;
  width: clamp(7.5rem, 22vw, 8.75rem);
  padding-block: .4rem;
}

.nav__links { display: none; }
.nav__links a,
.lang-switch__btn {
  position: relative;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.nav__links a { padding: .5em 0; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: .2em; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__cta { display: none; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.lang-switch__btn {
  padding: .5em .25em;
  opacity: .55;
  transition: opacity .3s;
}
.lang-switch__btn[aria-pressed="true"] { opacity: 1; }
.lang-switch__btn:hover { opacity: 1; }
.lang-switch__sep { opacity: .4; font-size: .7rem; }

/* Botão hambúrguer (duas linhas finas que viram X) */
.nav__toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.5rem;
}
.nav__toggle-line {
  position: absolute;
  left: .65rem; right: .65rem;
  height: 1px;
  background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.nav__toggle-line:first-child { top: calc(50% - 4px); }
.nav__toggle-line:last-child { top: calc(50% + 4px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:first-child { top: 50%; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:last-child { top: 50%; transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .nav__links { display: flex; gap: 2.4rem; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* ---------- 8. Menu de ecrã inteiro (telemóvel) ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  background-color: var(--logo-mid);
  background-image: var(--grain), var(--grad-logo);
  clip-path: circle(0% at calc(100% - 2.6rem) 2.25rem);
  visibility: hidden;
  transition: clip-path .9s var(--ease-in-out), visibility 0s linear .9s;
}
.mobile-menu.is-open {
  clip-path: circle(150% at calc(100% - 2.6rem) 2.25rem);
  visibility: visible;
  transition: clip-path .9s var(--ease-in-out), visibility 0s;
}
.mobile-menu__list { display: grid; gap: .35rem; }
.mobile-menu__link {
  display: inline-block;
  font-weight: 300;
  font-size: clamp(2rem, 8.5vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.mobile-menu__link.is-active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.mobile-menu__list li,
.mobile-menu__cta,
.mobile-menu__foot {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__list li,
.mobile-menu.is-open .mobile-menu__cta,
.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(.3s + var(--i) * .07s);
}
.mobile-menu__cta { align-self: flex-start; }
.mobile-menu__foot {
  display: grid;
  gap: .4rem;
  font-size: .85rem;
  color: var(--text-soft-light);
}
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 7rem;
  overflow: hidden;
  text-align: center;
  background-color: var(--logo-mid);
  /* Mesmo gradiente do logótipo + sombra suave ao centro para o texto ter bom contraste */
  background-image:
    var(--grain),
    radial-gradient(ellipse 46% 30% at 50% 54%, rgba(74, 44, 36, .3) 0%, rgba(74, 44, 36, 0) 100%),
    var(--grad-logo);
}

.hero__ornament {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(94vw, 44rem);
  height: min(94vw, 44rem);
  fill: none;
  stroke: rgba(245, 238, 232, .34);
  stroke-width: .8;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mesmo estilo do menu: maiúsculas finas e espaçadas */
.hero__tagline {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-right: -.32em;
  font-weight: 400;
  font-size: clamp(.78rem, 1.6vw, 1rem);
  line-height: 1.6;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.hero__cta {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  /* Fundo translúcido: garante contraste mesmo sobre as zonas claras do gradiente */
  background-color: rgba(74, 44, 36, .22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Indicador de scroll animado */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  transform: translateX(-50%);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft-light);
}
.scroll-indicator__text { margin-right: -.32em; }
.scroll-indicator__line {
  position: relative;
  width: 1px;
  height: 3.5rem;
  overflow: hidden;
  background: var(--line-light);
}
.scroll-indicator__line::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 45%;
  background: var(--cream);
  animation: scroll-line 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(240%); }
}

/* ---------- 10. Sobre mim ---------- */
.about { padding-block: var(--section-y); overflow: hidden; }

.about__grid {
  display: grid;
  gap: clamp(3.5rem, 8vw, 5rem);
}

.about__media {
  position: relative;
  isolation: isolate;
  width: min(100%, 30rem);
  margin-inline: auto;
}
/* Moldura de linha fina deslocada atrás da foto */
.about__media::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1rem -1.25rem 1rem;
  z-index: -1;
  border: 1px solid var(--taupe);
  opacity: .7;
}
.about__img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--grad-logo);
}
.about__img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
}
.about__img-wrap.is-missing .about__img { visibility: hidden; }

.about__branch {
  position: absolute;
  left: -1.5rem;
  bottom: -3.4rem;
  width: 11rem;
  fill: none;
  stroke: var(--rose-brown);
  stroke-width: 1;
}

.about__text {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--ink);
}
/* Linhas criadas pelo JavaScript para a revelação linha a linha */
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line__inner { display: block; }

.about__signature {
  margin-top: 1.6rem;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rose-brown);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}
/* O número aparece por cima da legenda (ordem visual invertida) */
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .5rem; }
.stat__value {
  font-weight: 200;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--rose-brown);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__suffix { font-size: .7em; margin-left: .05em; }
.stat__label {
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-soft);
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
  }
  .about__media { width: 100%; margin: 0; }
  .about__branch { left: -3rem; width: 13rem; }
}

/* ---------- 11. Portfólio (grelha com troca automática de fotos) ---------- */
.portfolio { padding-block: var(--section-y); }

/* O número de colunas (--cols) é definido pelo JS: metade das fotos visíveis (2 filas) */
.gallery {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: .6rem;
  max-width: calc(var(--cols) * 20rem);
  margin-inline: auto;
}
.gallery.is-empty { display: none; }

/* Cada quadrado tem duas imagens sobrepostas para o crossfade */
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: zoom-in;
  background: rgba(252, 249, 247, .06);
}
.gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--fade, 1s) ease, transform 1.1s var(--ease-out);
}
.gallery__img.is-active { opacity: 1; }

/* Escurecer + zoom ligeiro ao passar o rato */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 26, 21, .3);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .gallery__item:hover .gallery__img { transform: scale(1.05); }
  .gallery__item:hover::after { opacity: 1; }
}
.gallery__item:focus-visible { outline-offset: 3px; }
.gallery__item:focus-visible::after { opacity: 1; }

/* Quadrados acrescentados depois (fotos do Instagram) entram com um fade */
.gallery__item.is-new { animation: tile-in .9s var(--ease-out) both; }
@keyframes tile-in { from { opacity: 0; } }

@media (min-width: 768px) {
  .gallery { gap: 1rem; }
}
@media (min-width: 1024px) {
  .gallery { gap: 1.25rem; }
}

/* ---------- 12. Em Ação (um vídeo vertical) ---------- */
.action {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}
.action__grid {
  display: grid;
  gap: clamp(3.5rem, 9vw, 4.5rem);
  align-items: center;
}
.action__cta { margin-top: 2.25rem; }

/* Vídeo com moldura de linha fina deslocada (como a foto do Sobre, mas espelhada) */
.action__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100% - 1rem, 22rem);
}
.action__media::before {
  content: '';
  position: absolute;
  inset: 1.25rem 1rem -1.25rem -1rem;
  z-index: -1;
  border: 1px solid var(--taupe);
  opacity: .6;
}
.action__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-color: var(--logo-mid);
  background-image: var(--grad-logo);
}
.action__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sombra suave em baixo para o botão ser legível sobre o vídeo */
.action__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 26, 21, 0) 70%, rgba(42, 26, 21, .45) 100%);
  pointer-events: none;
}
.action__ctrl {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(252, 249, 247, .6);
  border-radius: 50%;
  color: var(--pearl);
  background: rgba(42, 26, 21, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .3s, transform .3s var(--ease-out);
}
.action__ctrl:hover { background: rgba(42, 26, 21, .6); transform: scale(1.06); }
.action__ctrl .icon { width: 1.1rem; height: 1.1rem; }
.action__ctrl .i-pause,
.action__media.is-playing .i-play { display: none; }
.action__media.is-playing .i-pause { display: block; }

@media (min-width: 900px) {
  .action__grid { grid-template-columns: 6fr 5fr; gap: clamp(4rem, 8vw, 8rem); }
  .action__media { width: min(100%, calc(min(76vh, 44rem) * 9 / 16)); }
}

/* ---------- 13. Marcação (formulário) ---------- */
.booking { padding-block: var(--section-y); }

.booking__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}
.booking__flower {
  display: none;
  width: 5.5rem;
  margin-top: 3rem;
  fill: none;
  stroke: var(--rose-brown);
  stroke-width: 1;
}

.form { display: grid; gap: 2.1rem; }
.form__required-note { font-size: .78rem; color: var(--text-soft); margin-bottom: -.6rem; }
.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form__row { display: grid; gap: 2.1rem; }

/* Campo com label que sobe ao escrever */
.field { position: relative; }
.field__control { position: relative; padding-top: 1.15rem; }
.field__input {
  display: block;
  width: 100%;
  padding: .65rem 0 .6rem;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s;
}
.field__input::-webkit-outer-spin-button,
.field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.field__label {
  position: absolute;
  left: 0;
  top: 1.8rem;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.2;
  transform-origin: left top;
  pointer-events: none;
  transition: transform .4s var(--ease-out), color .3s;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field--select .field__label {
  transform: translateY(-1.65rem) scale(.78);
  color: var(--rose-brown);
}
/* Linha que se desenha ao focar o campo */
.field__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rose-brown);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.field__input:focus ~ .field__line { transform: scaleX(1); }
.field__input:focus-visible ~ .field__line { height: 2px; }

.field--textarea .field__input { resize: vertical; min-height: 7.5rem; line-height: 1.6; }

/* Campo com unidade (cm) à direita */
.field--unit .field__input { padding-right: 2.5rem; }
.field__unit {
  position: absolute;
  right: 0;
  bottom: .7rem;
  font-size: .9rem;
  color: var(--text-soft);
  pointer-events: none;
}

.field--select .field__input {
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5E50' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: 1.1rem;
}
.field--select option { color: var(--ink); background: var(--cream); }

/* Lista "Zona do corpo" personalizada (computador): abre sempre para baixo */
.field--enhanced select { display: none; }
.has-open-select { position: relative; z-index: 30; }
.select__button { text-align: left; }
.select__list {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: .4rem 0;
  background: var(--cream);
  border: 1px solid var(--line-dark);
  box-shadow: 0 18px 40px rgba(42, 26, 21, .14);
  outline: none;
  animation: fade-up .25s var(--ease-out);
}
.select__list:focus-visible { box-shadow: 0 0 0 2px var(--focus), 0 18px 40px rgba(42, 26, 21, .14); }
.select__option {
  padding: .6rem 1.1rem;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .15s;
}
.select__option.is-active { background: var(--cream-2); }
.select__option[aria-selected="true"] { color: var(--rose-brown); font-weight: 500; }

/* Mensagens de erro */
.field__error {
  min-height: 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--error);
}
.field__error:not(:empty) { margin-top: .5rem; animation: fade-up .35s var(--ease-out); }
.is-invalid .field__input { border-bottom-color: var(--error); }
.is-invalid .field__line { background: var(--error); transform: scaleX(1); }
.is-invalid .field__label { color: var(--error); }

.form__hint { margin-top: .6rem; font-size: .78rem; color: var(--text-soft); }
.form__group-email { margin-top: 2.1rem; }

/* Botões selecionáveis (Sim/Não, tamanhos) */
.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice__legend {
  padding: 0;
  margin-bottom: .9rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.choice__options { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill { position: relative; cursor: pointer; }
.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pill span {
  display: inline-block;
  padding: .75em 1.6em;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: .85rem;
  transition: background-color .35s var(--ease-out), color .35s, border-color .35s;
}
.pill:hover span { border-color: var(--rose-brown); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Notas (menor de idade, Instagram) */
.form__notice {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-left: 1px solid var(--rose-brown);
  background: var(--cream-2);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink);
}
.form__notice .icon { margin-top: .15rem; color: var(--rose-brown); }
.form__notice a { color: var(--rose-brown); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.form__notice--warn { border-left-color: var(--error); margin-top: -1rem; animation: fade-up .45s var(--ease-out); }
.form__notice--warn .icon { color: var(--error); }

/* Checkbox RGPD */
.check { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; font-size: .9rem; line-height: 1.55; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: .1rem;
  border: 1px solid var(--rose-brown);
  transition: background-color .3s;
}
.check__box svg {
  width: .9rem;
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.6;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset .4s var(--ease-out);
}
.check input:checked + .check__box { background: var(--rose-brown); }
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.is-invalid .check__box { border-color: var(--error); }

/* Botão de envio e estados */
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form__btn { min-width: 13rem; }
.form__btn[disabled] { cursor: progress; opacity: .85; }
.btn__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(245, 238, 232, .35);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.form__btn.is-loading .btn__spinner { display: inline-block; }
.form__status { font-size: .88rem; color: var(--error); }
.form__status:not(:empty) { animation: fade-up .35s var(--ease-out); }

/* Mensagem de sucesso */
.form-success {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--line-dark);
  background: var(--cream-2);
}
.form-success[hidden] { display: none; }
.form-success__icon {
  width: 4.5rem;
  fill: none;
  stroke: var(--rose-brown);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-success__icon circle { stroke-dasharray: 233; stroke-dashoffset: 233; }
.form-success__icon path { stroke-dasharray: 50; stroke-dashoffset: 50; }
.form-success.is-visible { animation: fade-up .7s var(--ease-out); }
.form-success.is-visible .form-success__icon circle { animation: draw 1.1s var(--ease-in-out) .15s forwards; }
.form-success.is-visible .form-success__icon path { animation: draw .6s var(--ease-out) 1s forwards; }
.form-success__title {
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.form-success__text { color: var(--text-soft); max-width: 32rem; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--align-end { align-items: end; }
}
@media (min-width: 1024px) {
  .booking__grid { grid-template-columns: 4fr 7fr; gap: clamp(4rem, 7vw, 7rem); align-items: start; }
  .booking__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .booking__flower { display: block; }
}

/* ---------- 14. Contacto e localização ---------- */
.contact { padding-block: clamp(4.5rem, 9vw, 7rem); }

/* Título a toda a largura; por baixo, informação à esquerda e mapa à direita */
.contact__head { margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.contact__grid { display: grid; gap: clamp(2.5rem, 6vw, 3.5rem); }

.contact__block {
  padding-block: 1.35rem;
  border-top: 1px solid var(--line-light);
}
.contact__block:last-child { padding-bottom: 0; }
.contact__label {
  margin-bottom: .75rem;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft-light);
}
.contact__address {
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  font-weight: 300;
  line-height: 1.55;
}
.contact__sub { margin-top: .9rem; font-size: .85rem; color: var(--text-soft-light); }
.nav-apps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }

.hours { display: grid; gap: .55rem; max-width: 24rem; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed rgba(252, 249, 247, .16);
}
.hours dd { font-variant-numeric: tabular-nums; }

.contact__links { display: grid; gap: .7rem; }
.contact__links a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .5s var(--ease-out);
}
.contact__links a:hover { background-size: 100% 1px; }

.contact__map {
  position: relative;
  height: clamp(16rem, 60vw, 22rem);
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--logo-dark);
}
.contact__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Aproxima as cores do mapa à paleta castanha */
  filter: grayscale(1) sepia(.55) saturate(1.35) hue-rotate(-12deg) contrast(.92) brightness(.93);
}

@media (min-width: 960px) {
  .contact__grid { grid-template-columns: 5fr 6fr; gap: clamp(3.5rem, 6vw, 5rem); align-items: stretch; }
  /* O mapa acompanha a altura do bloco de informação, sem crescer demasiado */
  .contact__map { height: auto; min-height: 20rem; max-height: 36rem; }
}

/* ---------- 15. Rodapé ---------- */
.site-footer {
  padding: clamp(2.75rem, 5vw, 3.75rem) 0 calc(1.75rem + env(safe-area-inset-bottom));
  background-color: var(--ink);
  background-image: var(--grain), var(--grad-ink);
  text-align: center;
}
.footer__inner { display: flex; flex-direction: column; align-items: center; }
.logo--footer { width: 10rem; }
.footer__tagline {
  margin-top: 1rem;
  margin-right: -.32em;
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft-light);
}
.footer__inner .ornament { width: 7.5rem; margin: 1rem auto 1.25rem; }
.footer__social { display: flex; gap: .7rem; margin-bottom: 1.4rem; }
.footer__social .icon-btn { width: 2.6rem; height: 2.6rem; }
.footer__copy { font-size: .78rem; color: rgba(252, 249, 247, .7); }
.footer__credit {
  margin-top: .5rem;
  font-size: .7rem;
  letter-spacing: .1em;
  color: rgba(252, 249, 247, .55);
}
.footer__credit a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .3s;
}
.footer__credit a:hover { color: var(--pearl); }

/* ---------- 16. Botão flutuante de contacto ---------- */
.fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}
.fab__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
.fab.is-open .fab__list { visibility: visible; transition: none; }

.fab__link {
  display: flex;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  transform: translateY(.9rem) scale(.92);
  transform-origin: right center;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.fab.is-open .fab__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * .06s);
}
.fab__label {
  padding: .5em 1em;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  box-shadow: 0 6px 22px rgba(42, 26, 21, .18);
}
.fab__icon,
.fab__toggle {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cream);
  box-shadow: 0 8px 26px rgba(42, 26, 21, .3);
}
.fab__icon {
  width: 2.9rem;
  height: 2.9rem;
  background: var(--dark-brown);
  border: 1px solid rgba(245, 238, 232, .2);
  transition: background-color .3s;
}
.fab__link:hover .fab__icon { background: var(--rose-brown); }
.fab__toggle {
  --focus: var(--rose-brown);
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--grad-logo);
  border: 1px solid rgba(245, 238, 232, .25);
  transition: transform .4s var(--ease-out);
}
.fab__toggle:hover { transform: scale(1.06); }
.fab__toggle .icon {
  position: absolute;
  width: 1.45rem;
  height: 1.45rem;
  transition: opacity .3s, transform .45s var(--ease-out);
}
.fab__icon-close { opacity: 0; transform: rotate(-90deg); }
.fab.is-open .fab__icon-open { opacity: 0; transform: rotate(90deg); }
.fab.is-open .fab__icon-close { opacity: 1; transform: none; }
.menu-open .fab { opacity: 0; pointer-events: none; }

/* ---------- 17. Lightbox ---------- */
.lightbox {
  --focus: var(--cream);
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 4.5rem 1rem 5.5rem;
  background: rgba(26, 16, 13, .96);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
  touch-action: pan-y;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out); }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(100%, 68rem);
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  max-height: calc(100svh - 12rem);
  width: auto;
  object-fit: contain;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-out);
}
.lightbox.is-open .lightbox__img { animation: lb-in .6s var(--ease-out); }
.lightbox__img.is-changing { opacity: 0; transform: scale(.98); }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } }

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  transition: background-color .3s, color .3s, border-color .3s;
}
.lightbox__btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; bottom: 1.25rem; }
.lightbox__next { right: 1rem; bottom: 1.25rem; }
.lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  transform: translateX(-50%);
  font-size: .75rem;
  letter-spacing: .25em;
  color: var(--text-soft-light);
}
@media (min-width: 768px) {
  .lightbox { padding: 4.5rem 6rem; }
  .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__prev { left: 1.5rem; }
  .lightbox__next { right: 1.5rem; }
  .lightbox__close { top: 1.5rem; right: 1.5rem; }
}

/* ---------- 18. Troca de língua (transição suave) ---------- */
main, .site-header .nav, .site-footer, .fab, .mobile-menu__list {
  transition: opacity .28s ease;
}
.is-lang-switching main,
.is-lang-switching .site-header .nav,
.is-lang-switching .site-footer,
.is-lang-switching .fab,
.is-lang-switching .mobile-menu__list { opacity: 0; }

/* ---------- 19. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
  /* Mantém apenas fades simples: sem zooms nem deslocações */
  .btn::before { transition: none; }
  .gallery__img,
  .gallery__item:hover .gallery__img { transform: none; }
  .mobile-menu,
  .mobile-menu.is-open { clip-path: none; transition: opacity .3s ease, visibility 0s; }
  .mobile-menu { opacity: 0; }
  .mobile-menu.is-open { opacity: 1; }
  .mobile-menu__list li, .mobile-menu__cta, .mobile-menu__foot,
  .fab__link, .lightbox__img { transform: none !important; }
  .scroll-indicator__line::after { animation: none; height: 100%; opacity: .5; }
  .form-success__icon circle, .form-success__icon path { stroke-dashoffset: 0; }
}