/* ==============================
   VARIÁVEIS GLOBAIS
   ============================== */
:root {
  /* --- Brand / Highlight --- */
  --brand-gold: #c8a34a;          /* cor principal */
  --brand-gold-dark: #a7822f;     /* hover/active */
  --brand-gold-light: #e3c380;    /* detalhes/acento */

  /* --- Base Colors --- */
  --bg-900: #0b0b0f;              /* fundo principal */
  --bg-800: #14141a;              /* cartões, glass */
  --ink-100: #f1f1f4;             /* texto primário */
  --ink-200: #d8d8dd;             /* texto secundário */
  --ink-muted: rgba(255,255,255,.55);

  /* --- Typography --- */
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* --- Sizing / Layout --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container-max: 1180px;
  --section-padding: clamp(40px, 8vw, 90px);

  /* --- Effects --- */
  --shadow-md: 0 4px 20px rgba(0,0,0,.25);
  --transition-fast: .25s ease;
}

html { box-sizing: border-box; font-size: var(--font-size-base); }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--bg-900);
  color: var(--ink-100);
  font-family: var(--font-sans);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink-100);
  margin: 0 0 0.4em;
}
a {
  color: var(--brand-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--brand-gold-dark); }

/* ==============================
   BASE / UTILITÁRIOS (se ainda não tiveres)
   ============================== */
.container{ max-width: var(--container-max); margin-inline:auto; padding-inline:16px; }
.section{ padding-block: var(--section-padding); }
.kicker{ font-size: 13px; text-transform: uppercase; letter-spacing:.14em; color: var(--ink-200); }
.lead{ font-size: clamp(16px, 2.2vw, 18px); color: var(--ink-100); opacity:.92; }
.maxw-md{ max-width: 60ch; }
.stack-3{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); color: var(--ink-100); font-size:13px; background: rgba(255,255,255,.03); }

/* Botões (herdam do teu setup) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; border-radius: var(--radius-md); }
.btn--lg{ padding:12px 18px; }

/* ==============================
   HEADER / NAV
   ============================== */
:root { --nav-h: 64px; }

/* Wrapper sticky com blur */
.header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(11,11,15,.72);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Grid interno */
.header__inner{
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: max(8px, env(safe-area-inset-top)) 16px;
}

/* Logo */
.logo{ display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.logo__title{
  font-family: var(--font-serif);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--brand-gold);
  letter-spacing: .5px;
}
.logo__subtitle{ font-size: 14px; color: var(--ink-200); }

/* Botões base do header */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none; border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-icon{ width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; }
.btn--ghost{ background: transparent; color: var(--ink-100); border-color: rgba(255,255,255,.16); }
.btn--ghost:hover{ border-color: rgba(255,255,255,.32); }
.btn--outline{ background: transparent; color: var(--brand-gold); border-color: var(--brand-gold); }
.btn--outline:hover{ background: var(--brand-gold); color: #0b0b0f; }
.btn:not(.btn--outline):not(.btn--ghost){ background: var(--brand-gold); color: #0b0b0f; border-color: color-mix(in oklab, var(--brand-gold) 70%, black 30%); }
.btn:not(.btn--outline):not(.btn--ghost):hover{ filter: brightness(1.05); }

/* ===== Header / Nav base ===== */
.header{ position: sticky; top:0; z-index:999; }

.nav{ position: relative; }

/* ===== Header / Nav base ===== */
.header{ position: sticky; top: 0; z-index: 999; }
.nav{ position: relative; }

/* Menu fechado por defeito (mobile) */
.nav__menu{
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 18px; align-items: center;
}
.nav__menu a{
  color: var(--ink-100);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}
.nav__menu a:focus-visible{
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* CTA direita (desktop) */
.header__cta{ display: none; gap: 10px; }

/* ===== Backdrop (tap-fora) ===== */
.nav__backdrop{
  display: none;                 /* só aparece quando aberto */
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 1000;                 /* abaixo do menu, acima do conteúdo */
  pointer-events: none;          /* evita capturar cliques quando fechado */
}
.nav--open .nav__backdrop{
  display: block;
  pointer-events: auto;
}

/* ===== Menu móvel aberto (overlay fixo ao viewport) ===== */
#navToggle{ position: relative; z-index: 1002; } /* botão acima do menu */
.nav--open #navMenu{
  position: fixed;                                   /* abre em qualquer posição */
  top: calc(var(--nav-h, 56px) + 8px);               /* alinhado ao header (fallback) */
  right: max(12px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 0;
  min-width: 240px; max-width: min(92vw, 360px);
  max-height: 80vh;
  overflow-y: auto;                                   /* scroll ativo... */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* esconder scrollbar cross-browser */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge antigo */
}
.nav--open #navMenu::-webkit-scrollbar{ width: 0; height: 0; } /* Chrome/Safari */

.nav--open #navMenu{
  background: rgba(20,20,26,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1001;                                     /* acima do header/backdrop */
}
.nav--open #navMenu a{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav--open #navMenu li:last-child a{ border-bottom: 0; }

/* ===== Scroll-lock estável (não quebrar sticky) ===== */
.no-scroll{
  overflow: hidden;
  touch-action: none;
  /* sem height:100dvh; evita bugs no sticky em iOS/Android */
}

/* ===== Breakpoints ===== */
@media (min-width: 768px){
  .header__cta{ display: flex; }
}
@media (min-width: 992px){
  .nav__menu{
    display: flex !important;
    position: static;
    max-height: none; overflow: visible;
    background: transparent; border: 0; box-shadow: none;
  }
  #navToggle{ display: none; }
  .nav__backdrop{ display: none !important; }
}

/* ===== Acessibilidade & motion ===== */
@media (prefers-reduced-motion: reduce){
  .header, .btn, .nav__menu a{ transition: none !important; }
}

/* ==============================
   HERO
   ============================== */
/* ===== HERO – layout base (maior e proporcional) ===== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* altura: maior no desktop, segura no mobile */
  min-height: clamp(560px, 86svh, 920px);
  padding-block: clamp(40px, 10svh, 120px);
  color: var(--ink-100);
  overflow: clip;
}

/* Título e espaçamentos */
.hero__title{
  font-family: var(--font-serif);
  line-height: 1.05;
  margin: 10px 0 12px;
  font-size: clamp(32px, 6vw, 64px);
  text-wrap: balance;
}
.hero__actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.hero__trust{ margin-top:24px; }

/* ===== Camada de vídeo ===== */
.hero__bg{
  position: absolute; inset: 0;
  z-index: -1;               /* conteúdo sempre por cima */
  overflow: hidden;
}
.hero__video{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;  /* foca o corte/cabeça */
  display: block; pointer-events: none;
}

/* ===== Overlay para legibilidade ===== */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.50) 40%, rgba(11,11,13,.65) 100%),
    radial-gradient(60% 80% at 20% 10%, rgba(200,163,74,.08), transparent 60%);
}

/* ===== Mobile / dados reduzidos ===== */
@media (max-width: 640px){
  .hero{
    min-height: clamp(520px, 78svh, 760px);
    padding-block: clamp(32px, 8svh, 80px);
  }
  /* usa poster no mobile (poupa dados e arranque mais rápido) */
  .hero__video{ display:none; }
  .hero__bg{ background: url("assets/img/hero-poster.jpg") center 35% / cover no-repeat; }
}

/* ===== Preferências do utilizador ===== */
@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}
@media (max-width: 640px){
  .hero__video{ display:block; }
  .hero__bg{ background: none; }
}

/* ===== Fallback para browsers sem svh ===== */
@supports not (height: 1svh){
  .hero{ min-height: clamp(560px, 86vh, 920px); }
}

/* ==============================
   SOBRE
   ============================== */

/* Grid 2 colunas responsivo */
#sobre .grid-2{
  display:grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px){
  #sobre .grid-2{ grid-template-columns: 1.1fr 1fr; }
}

/* Card base (se ainda não tiveres) */
.card{
  background: var(--bg-800);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card__body{ padding: clamp(14px, 2.4vw, 20px); }

/* Media à esquerda */
.sobre__media{
  background: rgba(255,255,255,.02);
  border-radius: var(--radius-lg, 16px);
  overflow: clip;
}
.sobre__media picture, .sobre__media img{ display:block; width:100%; height:auto; }
.sobre__media img{
  aspect-ratio: 4/5; object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}

/* Glass card (fundador) */
.card--glass{
  background: rgba(20,20,26,.45);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,.08);
}
.sobre__fundador__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
.sobre__fundador__title{ margin:0; font-size: clamp(18px, 2.2vw, 22px); }
.btn--subtle{
  background: transparent; color: var(--ink-100);
  border:1px solid rgba(255,255,255,.18);
  padding: 10px 14px; border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.btn--subtle:hover{ border-color: rgba(255,255,255,.32); }

/* Reveal (on-scroll) */
.reveal{
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* Utilitários (se precisares nestas páginas) */
.stack-4{ display:flex; flex-direction:column; gap: clamp(12px, 2.2vw, 16px); }
.stack-3{ display:flex; flex-wrap:wrap; gap: 10px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color: var(--ink-100); font-size:13px; background: rgba(255,255,255,.03);
}
.muted{ color: var(--ink-200); opacity:.9; }
.visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  padding:0!important; border:0!important; height:1px!important; width:1px!important; overflow:hidden;
}

gera-me uma estrutura atualizada, que centre sempre o modal ao meio, organize uma estrutura minimalista do modal, colocando os botões simples no bottom do modal e estruture visualmente bonito: /* =========================================================
   EQUIPA — Grid, Overlays, Modais e Animações (otimizado)
   ========================================================= */

/* ------------------------------
   Tokens de fallback (opcional)
   ------------------------------ */
:root{
  --bg-900: #0e0e12;
  --bg-800: #14141a;
  --ink-100: #f1f1f3;
  --ink-200: #cfcfd6;
  --accent: var(--cor-dourado, #c8a96a);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.45);
  --transition-fast: .18s ease;
  --transition-med: .28s ease;
  --transition-slow: .45s ease;
}

/* ============================
   Secção EQUIPA (escopo seguro)
   ============================ */
section#equipa{
  position: relative;
  z-index: 1;
  padding: clamp(28px, 6vw, 72px) 0;
  background: linear-gradient(180deg, var(--bg-900), var(--bg-800));
  color: var(--ink-100);
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Fallbacks locais de transições/raios/sombras caso não existam */
  --transition-fast: .16s ease;
  --transition-med:  .22s ease;
  --transition-slow: .35s ease;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --shadow-md: 0 10px 24px rgba(0,0,0,.28);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.45);
}
/* Modelo de caixa consistente em todo o subtree (evita “saltos” cross-browser) */
section#equipa, section#equipa *{ box-sizing: border-box; }

/* ------------------------------
   Header e Tipografia
   ------------------------------ */
section#equipa header{
  text-align: center;
  margin-bottom: clamp(18px, 4vw, 36px);
}
section#equipa .kicker{
  letter-spacing:.08em; text-transform:uppercase;
  font-size:.85rem; color: var(--ink-200); opacity:.9;
}
section#equipa h2{
  margin:.35rem 0 .5rem;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.4rem);
  line-height:1.15;
}
section#equipa .muted{ color: var(--ink-200); opacity:.9; }

/* ------------------------------
   Grid
   ------------------------------ */
section#equipa .equipa-grid{
  display:grid;
  gap: clamp(14px, 2.4vw, 24px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 780px){
  section#equipa .equipa-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------
   Cards
   ------------------------------ */
section#equipa .card{
  background: var(--bg-800);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* clip > wider support */
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
  will-change: transform, box-shadow;
}
section#equipa .card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,.14);
}

/* ------------------------------
   Media (imagem com overlay)
   ------------------------------ */
section#equipa .equipa-media{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(255,255,255,.02);
}
section#equipa .equipa-img{
  display:block; width:100%; height:auto;
  aspect-ratio: 4/5; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
  filter: saturate(1.02) contrast(1.02);
  transform: translateZ(0);
  transition: transform var(--transition-slow), filter var(--transition-med);
  cursor: zoom-in;
}
section#equipa .equipa-media:hover .equipa-img{
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.05);
}

/* Gradiente de leitura */
section#equipa .equipa-media::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:22%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  transition: opacity var(--transition-med);
  opacity:.75;
}
@media (prefers-reduced-motion: reduce){
  section#equipa .equipa-media:hover .equipa-img{ transform:none; }
}

/* ------------------------------
   Botão de Redes (ícone overlay)
   ------------------------------ */
section#equipa .equipa-social-btn{
  position:absolute; right:.75rem; top:.75rem; z-index:3;
  width:42px; height:42px; display:grid; place-items:center;
  border:none; border-radius:999px; cursor:pointer;
  background: rgba(0,0,0,.55); color:#fff;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))){
  section#equipa .equipa-social-btn{ background: rgba(0,0,0,.65); }
}
section#equipa .equipa-social-btn:hover{
  background: rgba(0,0,0,.7);
  transform: scale(1.06);
}
section#equipa .equipa-social-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(200,169,106,.45);
}

/* ------------------------------
   Popover de Redes
   ------------------------------ */
section#equipa .equipa-social-popover{
  position:absolute; right:.75rem; top:3.25rem; z-index:4;
  background: #111; color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding:.5rem;
  min-width: 180px;
  display:none;
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: popIn var(--transition-med);
}
section#equipa .equipa-social-popover.is-open{ display:block; }
section#equipa .equipa-social-popover a{
  display:block; padding:.55rem .7rem;
  border-radius: var(--radius-sm);
  color:#fff; text-decoration:none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
section#equipa .equipa-social-popover a:hover{
  background: rgba(255,255,255,.08);
}
@keyframes popIn{
  from{ opacity:0; transform: translateY(-8px) scale(.98); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}

/* ------------------------------
   Meta (nome + cargo) + botão Agendar
   ------------------------------ */
section#equipa .equipa-meta{ padding: clamp(12px, 2vw, 18px); }
section#equipa .equipa-nome{
  margin:0 0 .25rem 0;
  font-size: clamp(1.05rem, 1.1vw + .9rem, 1.35rem);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
section#equipa .badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color: var(--ink-100); font-size:.85rem; background: rgba(255,255,255,.03);
}

/* Botão "Agendar" (subtil e blindado contra CSS globais) */
section#equipa .equipa-agendar-btn{
  font: inherit; font-weight:600; line-height:1;
  padding:.35rem .7rem; border-radius:.5rem;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--ink-100); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
  position: static !important; inset:auto !important; /* anula plugins que “fixam” wa.me */
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
section#equipa .equipa-agendar-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-1px);
}
section#equipa .equipa-agendar-btn:focus-visible{
  outline: 2px solid var(--accent, #c8a96a);
  outline-offset: 2px;
}
@media (prefers-color-scheme: light){
  section#equipa .equipa-agendar-btn{
    color:#222; background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.1);
  }
  section#equipa .equipa-agendar-btn:hover{
    background:rgba(0,0,0,.1); border-color:rgba(0,0,0,.2);
  }
}

/* ==============================
   GALERIA
   ============================== */
#galeria .stack-3{ margin-bottom: clamp(18px, 4vw, 28px); }

.gallery{
  display: grid;
  gap: clamp(8px, 1.8vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

/* Imagens */
.gallery img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: zoom-in;
  transition: transform .35s ease, box-shadow .35s ease;
}
.gallery img:hover{
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Reveal animation */
.reveal{
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ===== Lightbox (dialog) — estado base FECHADO ===== */
.lightbox{
  margin: 0; padding: 0; border: 0;
  background: transparent;
}

/* ===== Aberto: ocupa o viewport e centra o conteúdo ===== */
.lightbox[open]{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 2000;
  /* pequenas margens seguras, inclusive em iOS */
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
.lightbox::backdrop{
  background: rgba(0,0,0,.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Palco (limita largura/altura dentro da viewport) */
.lightbox__inner{
  position: relative;
  width: min(96vw, 1100px);
  height: min(86vh, calc(100vh - 64px));
  border-radius: var(--radius-lg, 16px);
}

/* Imagem: preenche o palco sem distorcer nem cortar */
#lightbox-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b0d12;
  border-radius: inherit;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* Controles */
.lightbox__nav,
.lightbox__close{
  position: absolute;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(16,18,28,.6);
  color: #fff; cursor: pointer;
  transition: background .25s ease;
}
.lightbox__close{ top: 12px; right: 12px; }
.lightbox__nav{ top: 50%; transform: translateY(-50%); }
.lightbox__prev{ left: 8px; }
.lightbox__next{ right: 8px; }
@media (min-width: 900px){
  .lightbox__prev{ left: -48px; }
  .lightbox__next{ right: -48px; }
}
.lightbox__nav:hover,
.lightbox__close:hover{ background: rgba(16,18,28,.8); }


/* ==============================
   SERVIÇOS / PRICING
   ============================== */

/* Layout da grelha */
#servicos .grid-2{
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px){
  #servicos .grid-2{ grid-template-columns: 1fr 0.9fr; }
}

/* Lista de preços */
.pricing{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}
.pricing li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pricing li:last-child{ border-bottom: none; }

.pricing strong{
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink-100);
}
.price{
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--brand-gold);
}

/* Botão pequeno “Detalhes” */
.btn--sm{
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: var(--radius-sm, 8px);
}

/* Badge “Mais pedido” */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--brand-gold);
}

/* ==============================
   MODAIS
   ============================== */
.modal{
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  max-width: 500px;
  width: calc(100% - 32px);
  border: none;
  border-radius: var(--radius-lg,16px);
  background: rgba(20,20,26,.92);
  color: var(--ink-100);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.modal::backdrop{
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal__panel{
  padding: clamp(20px, 4vw, 28px);
}
.modal h3{
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
}
.modal p{ margin: 0 0 14px; color: var(--ink-200); }

[data-modal-close]{
  margin-top: 4px;
}

/* Estado de animação */
.modal[open]{ opacity: 1; transform: translateY(0); }
.modal:not([open]){ opacity: 0; transform: translateY(-12px); }

/* ==============================
   Animação de entrada (reveal)
   ============================== */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ==============================
   HORÁRIOS
   ============================== */

/* Grid 2 colunas responsivo */
#horarios .grid-2{
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px){
  #horarios .grid-2{ grid-template-columns: 1fr 1fr; }
}

/* Lista de horários */
#horarios .list{
  list-style: none;
  margin: 0;
  padding: 0;
}
#horarios .list li{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#horarios .list li:last-child{ border-bottom: 0; }
#horarios .list strong{
  min-width: 88px;
  font-family: var(--font-serif);
  color: var(--ink-100);
}

/* Botão subtil (se ainda não existir) */
.btn--subtle{
  background: transparent;
  color: var(--ink-100);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  transition: border-color .25s ease;
}
.btn--subtle:hover{ border-color: rgba(255,255,255,.32); }

/* Mapa */
#horarios .map{
  position: relative;
  aspect-ratio: 4 / 3;                 /* responsivo, evita layout shift */
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px){
  #horarios .map{ aspect-ratio: 3 / 2; }
}
#horarios .map iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;                          /* fade-in quando carrega */
  transition: opacity .35s ease;
}
#horarios .map.is-loaded iframe{ opacity: 1; }

/* Placeholder suave enquanto carrega */
#horarios .map::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(200,163,74,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  filter: saturate(105%);
  transition: opacity .35s ease;
}
#horarios .map.is-loaded::before{ opacity: 0; }

/* Reveal (caso ainda não tenhas) */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ==============================
   TESTEMUNHOS
   ============================== */
#testemunhos .stack-3{ margin-bottom: clamp(12px, 2vw, 16px); }

.testi-wrapper{ position: relative; }

.testi-track{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.2vw, 16px);
  outline: none;
}

/* Desktop: 2 colunas */
@media (min-width: 900px){
  .testi-track{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: carrossel scroll-snap */
@media (max-width: 899px){
  .testi-track{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .testi{ min-width: 88%; scroll-snap-align: start; }
}

/* Card interno */
.testi .card__body{ display: flex; flex-direction: column; gap: 10px; }

/* Header do testemunho */
.testi__head{ display: flex; gap: 10px; align-items: center; }
.testi__avatar{
  width: 48px; height: 48px; border-radius: 999px;
  object-fit: cover; background: rgba(255,255,255,.06);
}

/* Estrelas */
.stars{ display:inline-flex; gap:3px; margin-top:2px; }
.stars svg{ width:16px; height:16px; fill: var(--brand-gold, #c8a34a); }

/* Navegação (apenas mobile) */
.testi-nav{
  position: absolute; top: 45%; transform: translateY(-50%);
  background: rgba(16,18,28,.6); color:#fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 8px 10px; cursor: pointer;
  display: none; user-select: none;
}
.testi-nav:focus-visible{ outline: 2px solid var(--brand-gold); outline-offset: 2px; }
@media (max-width: 899px){
  .testi-nav{ display:block; }
  .testi-nav.prev{ left: 6px; }
  .testi-nav.next{ right: 6px; }
}

/* Reveal (se já usas nas outras secções, mantém) */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .testi-track{ scroll-behavior: auto !important; }
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ==============================
   CTA FINAL
   ============================== */
.section--tight{
  padding-block: clamp(28px, 4.8vw, 44px);
}

/* Card “glass” (seguro para iOS/Safari) */
.card--glass{
  background: rgba(20,20,26,.45);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg, 16px);
}

/* Grid e alinhamento */
#cta-final .cta{
  display: grid;
  gap: clamp(12px, 2.2vw, 18px);
  grid-template-columns: 1fr;
  align-items: center;
}
#cta-final .center{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
@media (min-width: 900px){
  #cta-final .cta{ grid-template-columns: 1fr auto; }
  #cta-final .center{ justify-content: flex-end; }
}

/* Botões maiores e confortáveis no toque */
.btn--lg{
  padding: 12px 18px;
  font-size: clamp(15px, 1.6vw, 16px);
  border-radius: var(--radius-md, 12px);
}
#cta-final .btn svg{
  width: 18px; height: 18px;
  margin-right: 6px;
}

/* Foco visível e acessível */
#cta-final .btn:focus-visible{
  outline: 2px solid var(--brand-gold, #c8a34a);
  outline-offset: 2px;
}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  #cta-final .btn, .card--glass{ transition: none !important; }
}

/* ==============================
   FOOTER — Gold Studio
   ============================== */
.footer{
  margin-top: clamp(28px, 6vw, 64px);
  padding-block: clamp(26px, 5vw, 44px);
  color: var(--ink-100, #f1f1f4);
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in oklab, var(--brand-gold, #c8a34a) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%),
    #0b0b0f;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}

/* filete dourado subtil no topo */
.footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--brand-gold, #c8a34a) 30%, transparent 70%);
  opacity:.3;
}

/* Grid */
.footer__grid{
  display:grid;
  gap: clamp(16px, 3vw, 28px);
  align-items:start;
}
@media (min-width: 900px){
  .footer__grid{ grid-template-columns: 1.2fr 1fr; }
}

/* Marca + tipografia */
.footer__brand{
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-weight: 600;
  letter-spacing:.2px;
  color: var(--ink-200, #d8d8dd);
  font-size: clamp(18px, 2.2vw, 20px);
  display:block;
  margin-bottom: 4px;
}

/* Parágrafos */
.footer p{ margin: 0; }
.footer .stack-3 > * + *{ margin-top: 10px; }

/* ------- Links ------- */
.footer__link{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--ink-100, #f1f1f4);
  text-decoration: none;
  border-bottom: 1px solid transparent;     /* sem sublinhado feio */
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}
.footer__link svg{
  width: 16px; height: 16px; flex: 0 0 auto;
  opacity: .85;
}
.footer__link:hover{
  color: var(--brand-gold, #c8a34a);
  border-bottom-color: color-mix(in oklab, var(--brand-gold, #c8a34a) 60%, transparent);
}

/* Navegação (redes/políticas) */
.footer__links nav{
  display:flex; flex-direction:column; gap: 10px;
  padding-top: 2px;
  border-top: 1px dashed rgba(255,255,255,.12);
  border-bottom: 1px dashed rgba(255,255,255,.12);
  padding-bottom: 10px;
}
@media (min-width: 900px){
  .footer__links nav{ border-top: none; }
}

/* Muted dentro do footer */
.footer .muted{ color: var(--ink-200, #d8d8dd); opacity:.92; }

/* Créditos */
.footer__credits{ opacity:.9; }

/* A11y util */
.visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  width:1px!important; height:1px!important; overflow:hidden;
}

/* ------- Botão Voltar ao Topo ------- */
.backtotop{
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(16,18,28,.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  z-index: 60;
}
.backtotop.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.backtotop:hover{ background: rgba(16,18,28,.9); }
.backtotop:focus-visible{
  outline: 2px solid var(--brand-gold, #c8a34a);
  outline-offset: 2px;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .backtotop, .footer__link{ transition: none !important; }
}

/* ===== Tokens ===== */
:root{
  --bg:#0B0B0F;       /* preto-base */
  --bg-1:#0F1016;     /* mesh */
  --bg-2:#13141C;     /* mesh */
  --gold:#C7A14A;     /* dourado */
}

/* ===== Base ===== */
html,body{ height:100%; background:var(--bg); }
body{
  position:relative;
  isolation:isolate;          /* cria contexto p/ z-index negativo do ::before */
  color:#F5F5F7;
}

/* ===== Background global (fixo) ===== */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;

  /* Mesh + spotlights dourados */
  background:
    radial-gradient(60% 80% at 12% 8%,  rgba(199,161,74,.16), transparent 60%),
    radial-gradient(40% 50% at 88% 28%, rgba(199,161,74,.08), transparent 60%),
    radial-gradient(90% 120% at 50% 110%, var(--bg-1), transparent 52%),
    radial-gradient(120% 120% at 0% 85%,  var(--bg-2), transparent 62%),
    var(--bg);
  will-change: transform;
}

/* Grão subtil (textura leve) */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>');
  mix-blend-mode:soft-light;
}

/* “Light sweep” muito discreto (micro-animação) */
@keyframes sweep{
  0%  { transform: translateX(-25%) translateY(-8%) rotate(8deg); }
  50% { transform: translateX(40%)  translateY(0)   rotate(8deg); }
  100%{ transform: translateX(105%) translateY(8%) rotate(8deg); }
}
.page-sheen{
  position:fixed; inset:-40% -60% auto -60%; height:60%;
  background: radial-gradient(60% 80% at 50% 50%, rgba(199,161,74,.14), transparent 60%);
  mix-blend-mode:screen; opacity:.35; z-index:-1; pointer-events:none;
  animation: sweep 14s linear infinite;
}

/* Acessibilidade: desliga animação para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .page-sheen{ animation:none; opacity:.18; }
}

/* Opcional: padrão “barbershop” fantasma só nas áreas de conteúdo largo */
.container::before{
  content:""; position:absolute; inset:-2rem; z-index:-1; pointer-events:none;
  background: repeating-linear-gradient(135deg, #0C0D12 0 14px, #0A0A10 14px 28px);
  opacity:.06; border-radius:1rem; filter:blur(1px);
}
.container{ position:relative; }

/* mapa responsivo + botão “Abrir no Google Maps” */
.map{ position:relative; border-radius:14px; overflow:hidden; background:#0b0b0f; }
.map::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
.map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter: saturate(.9) contrast(1.05);
}
.map__cta{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,0,0,.65); color:#fff; padding:8px 12px;
  border-radius:999px; text-decoration:none; font-size:.9rem; backdrop-filter: blur(4px);
}
.map__cta:hover{ background:rgba(0,0,0,.8); }