/* ============================================
   SISTEMA DE DESIGN — "Darkroom / Contact Sheet"
   ============================================
   Cores, tipografia e componentes usados em TODO o site.
   Se você quiser mudar a cor de destaque do site inteiro,
   troca só o valor de --accent aqui embaixo. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #0b0b0a;
  --surface: #151412;
  --text: #ddd9d0;
  --text-muted: #8c877e;
  --accent: #ffffff;       /* branco puro — ponto de luz mais alto da paleta monocromática */
  --hairline: #2a2825;
  --frame-num-bg: rgba(0,0,0,0.55);

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Foco visível no teclado (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease,
    transform 0.25s ease, opacity 0.25s ease;
  border-bottom: 1px solid transparent;
}
.nav{transition:transform .28s ease,opacity .28s ease}.nav.nav-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}
.gallery-trails{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:18px;margin:0 0 38px}.gallery-trail-card{min-height:340px;display:flex;align-items:flex-end;padding:28px;border:1px solid var(--hairline);border-radius:6px;background-color:#1b150f;background-position:center;background-size:cover;color:var(--text);text-align:left;cursor:pointer}.gallery-trail-card.active{border-color:var(--text)}.gallery-trail-card span{display:grid;gap:9px}.gallery-trail-card strong{font:500 clamp(1.35rem,2.4vw,2rem)/1.1 var(--font-display)}.gallery-trail-card small{color:var(--text-muted);font:.72rem/1.6 var(--font-mono)}.gallery-adaptive-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))!important;align-items:start}.gallery-empty{grid-column:1/-1;padding:42px 0;color:var(--text-muted);font-family:var(--font-mono)}
.gallery-all-trails{display:flex;margin:0 0 16px}.gallery-all-button{min-width:180px}

/* Fase 23: cabeçalho, botões e rodapé inspirados na nova referência, mantendo a paleta. */
.nav{top:18px;padding:0;border:0;background:transparent!important;pointer-events:none}
.nav .container{min-height:78px;padding:0 38px;border:1px solid var(--hairline);border-radius:999px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);pointer-events:auto;box-shadow:0 16px 45px rgba(0,0,0,.16)}
.nav.is-solid{padding:0;border:0}.nav-logo{font-family:var(--font-display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em}.nav-logo em{color:var(--text);font-style:normal;font-weight:700}.nav-logo-photo,.nav-logo-sub{font-family:var(--font-display);font-size:.78em!important;font-weight:400!important;color:var(--text-muted)!important;letter-spacing:0!important}.nav-links{gap:38px}.nav-links a{font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.11em;color:var(--text-muted)}.nav-cta{border:0;padding:0!important}.nav-links a.active::after{bottom:-8px;background:var(--text)}
.btn,.filter-btn{border-radius:999px;font-weight:600;letter-spacing:.11em;padding:16px 34px}.btn-accent{background:var(--text);border-color:var(--text);color:var(--bg)}.btn-accent:hover{background:transparent;border-color:var(--text);color:var(--text)}
.footer{position:relative;overflow:hidden;min-height:460px;padding:70px 0 34px;border-top:1px solid var(--hairline)}.footer .footer-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(320px,1fr) 150px 190px;align-items:start;gap:70px}.footer-invitation{margin:0;font:500 clamp(2rem,3.2vw,3.5rem)/1.18 var(--font-display);letter-spacing:-.025em;color:var(--text)}.footer-column{display:grid;gap:12px;font:400 1rem/1.35 var(--font-sans)}.footer-column a{color:var(--text);transition:opacity .2s ease}.footer-column a:hover{opacity:.6}.footer-label{margin-bottom:8px;color:var(--text-muted);font:500 .72rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;margin-top:38px;padding-top:30px;border-top:1px solid var(--hairline)}.footer-watermark{position:absolute;z-index:-1;left:2%;right:0;bottom:-.18em;white-space:nowrap;font:400 clamp(8rem,19vw,22rem)/.8 var(--font-display);letter-spacing:-.065em;color:var(--text);opacity:.035;pointer-events:none}.footer-links{display:none}
@media(max-width:900px){.nav{top:10px}.nav .container{min-height:64px;padding:0 20px}.nav-links{gap:22px}.footer .footer-layout{grid-template-columns:1fr 1fr;gap:42px}.footer-invitation{grid-column:1/-1}.footer-bottom{margin-top:12px}}
@media(max-width:760px){.nav .container{border-radius:30px}.nav-links{top:0;width:min(82%,340px);gap:24px;padding:100px 34px;background:var(--surface);border-radius:0}.nav-cta{border:1px solid var(--hairline);padding:12px 18px!important;border-radius:999px}.btn,.filter-btn{padding:14px 25px}.footer{min-height:560px;padding-top:54px}.footer .footer-layout{grid-template-columns:1fr 1fr;gap:36px 24px}.footer-invitation{font-size:2.2rem}.footer-column{font-size:.92rem}.footer-bottom{flex-direction:column}.footer-watermark{font-size:8.5rem;bottom:.05em}}
.footer-column{font-family:var(--font-body)}
.nav.is-solid {
  background: rgba(11,11,10,0.92);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--hairline);
  padding: 16px 0;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.nav-logo em { color: var(--accent); font-style: normal; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
}
.nav-cta {
  border: 1px solid var(--hairline);
  padding: 8px 16px !important;
}
.nav-cta:hover { border-color: var(--accent); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 22px; height: 1px; background: var(--text); }
.nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  padding-bottom: 80px;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ponto focal no CELULAR: agora com espaço de sobra, o rosto fica
     bem acima do texto (a foto cortada especialmente para celular ajuda nisso) */
  object-position: center 80%;
  /* Escala (zoom) no CELULAR: 1 = tamanho normal.
     Menor que 1 (ex: 0.85) afasta a foto (mostra mais dela).
     Maior que 1 (ex: 1.15) aproxima ainda mais. */
  transform: scale(1);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11,11,10,0.97) 0%, rgba(11,11,10,0.55) 45%, rgba(11,11,10,0.75) 100%),
    linear-gradient(to right, rgba(11,11,10,0.5) 0%, rgba(11,11,10,0.1) 60%);
}
.hero .container { position: relative; z-index: 2; }
.hero-media picture { display: block; width: 100%; height: 100%; }

@media (min-width: 900px) {
  .hero-photo {
    /* Ponto focal no COMPUTADOR: alinha a linha dos olhos com o título */
    object-position: center 38%;
    /* Escala (zoom) no COMPUTADOR: mesma lógica do celular */
    transform: scale(1);
  }
}
.hero::before {
  /* textura de grão sutil, como filme analógico */
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.02;
  max-width: 14ch;
}
.hero-title em { font-style: italic; color: var(--accent); font-weight: 300; }
.hero-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: 22px;
}
.hero-meta {
  margin-top: 48px;
  display: flex;
  gap: 40px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.hero-meta strong { color: var(--text); display: block; font-size: 0.75rem; margin-bottom: 4px; }

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--text);
  transition: all 0.25s ease;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn-accent { border-color: var(--accent); color: var(--accent); }
.btn-accent:hover { background: var(--accent); color: var(--bg); }

/* ---------- SEÇÕES ---------- */
.section { padding: 120px 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 24px;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 4.4rem);
  font-weight: 400;
}

/* ---------- GRID DE FOTOS ("CONTACT SHEET") ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--hairline);
}
.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}
img {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.frame:hover img { transform: scale(1.04); }
.frame-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #4a463f;
  text-align: center;
  padding: 12px;
  letter-spacing: 0.05em;
}
.frame-num {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  background: var(--frame-num-bg);
  padding: 3px 7px;
}
.frame-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
}
.frame-caption span:last-child { color: var(--text-muted); }
.frame:hover .frame-caption { transform: translateY(0); }

.frame-count {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  background: var(--frame-num-bg);
  padding: 3px 7px;
}
.frame-title-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  transition: opacity 0.25s ease;
}
.frame:hover .frame-title-bar { opacity: 0; }

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

/* ---------- VISUALIZADOR EM TELA CHEIA (LIGHTBOX) ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: #060605;
  z-index: 1000;
  display: none;
  flex-direction: column;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px;
}
.lightbox-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text);
}
.lightbox-counter {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.lightbox-close {
  background: none; border: 1px solid var(--hairline);
  color: var(--text);
  width: 40px; height: 40px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.lightbox-close:hover { border-color: var(--accent); }
.lightbox-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: 20px 0;
}
.lightbox-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.lightbox-placeholder {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #4a463f;
  text-align: center;
  border: 1px dashed var(--hairline);
  padding: 80px 60px;
}
.lightbox-arrow {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-muted);
  font-size: 2.5rem;
  font-family: var(--font-display);
  cursor: pointer;
  padding: 12px 18px;
  transition: color 0.2s ease;
  z-index: 1001;
}
.lightbox-arrow:hover { color: var(--text); }
.lightbox-arrow-left { left: 8px; }
.lightbox-arrow-right { right: 8px; }

@media (max-width: 760px) {
  .lightbox-arrow { font-size: 2rem; padding: 8px 10px; }
  .lightbox-title { font-size: 1rem; max-width: 60vw; }
}

/* ---------- FILTROS DE GALERIA ---------- */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  background: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active { border-color: var(--accent); color: var(--accent); }

/* ---------- SOBRE ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-portrait {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #1c1a17, #0e0d0c);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-text p { color: var(--text-muted); margin-bottom: 20px; max-width: 60ch; }
.about-text p:first-child { color: var(--text); font-size: 1.1rem; }
.specs { margin-top: 40px; border-top: 1px solid var(--hairline); }
.specs dt {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.specs > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.specs dd { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); text-align: right; }

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

/* ---------- CONTATO ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 0;
  transition: border-color 0.2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); outline: none;
}
.field select option { background: var(--surface); }
.contact-info dt { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 28px; }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin-top: 6px; color: var(--text-muted); }

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

/* ---------- ÁREA DO CLIENTE (placeholder) ---------- */
.locked {
  min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 20px; padding: 40px 24px;
}
.locked-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--accent);
}

/* ---------- FOOTER ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 0;
}
.footer .container {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-links { display: flex; gap: 24px; }
.footer-mono { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; }

/* ---------- RESPONSIVO: NAV MOBILE ---------- */
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: 70%;
    background: var(--surface);
    flex-direction: column; align-items: flex-start;
    padding: 100px 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-left: 1px solid var(--hairline);
  }
  .nav-links.is-open { transform: translateX(0); }
  .section { padding: 80px 0; }
}


/* =========================================================
   SITE PÚBLICO — LAYOUT FLUIDO / RESPONSIVO FULL WIDTH
   Mantém a identidade Darkroom, tipografia e botões atuais.
   ========================================================= */

html, body {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(18px, 4vw, 76px);
}

.nav .container,
.footer .container {
  width: 100%;
}

.section {
  width: 100%;
  padding-block: clamp(76px, 8vw, 132px);
}

.section[style*="padding-top:160px"] {
  padding-top: clamp(124px, 11vw, 176px) !important;
}

.section-head {
  margin-bottom: clamp(34px, 4vw, 60px);
  gap: clamp(18px, 3vw, 42px);
}

.section-title {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: .98;
}

/* HOME */
.hero {
  min-height: max(720px, 100svh);
  padding-bottom: clamp(48px, 7vh, 90px);
}

.hero .container {
  width: 100%;
}

.hero-title {
  font-size: clamp(3rem, 6.4vw, 7.4rem);
  max-width: 13ch;
}

.hero-sub {
  max-width: min(52ch, 60vw);
  font-size: clamp(.96rem, 1.2vw, 1.18rem);
}

.hero-meta {
  max-width: 100%;
  gap: clamp(22px, 4vw, 56px);
}

/* Galerias: cresce junto com a tela sem deixar o conteúdo preso no centro. */
.grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filters {
  width: 100%;
}

/* SOBRE */
.about-grid {
  width: 100%;
  grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr);
  gap: clamp(38px, 5vw, 100px);
  align-items: center;
}

.about-portrait {
  width: 100%;
  min-height: 520px;
  max-height: 82vh;
}

.about-text {
  width: 100%;
  max-width: 900px;
}

.about-text p {
  max-width: 68ch;
  font-size: clamp(.94rem, 1vw, 1.08rem);
}

/* CONTATO */
.contact-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(44px, 7vw, 120px);
}

.contact-grid > * {
  min-width: 0;
}

/* FOOTER */
.footer {
  width: 100%;
  padding-block: clamp(30px, 4vw, 52px);
}

/* Monitores largos: usa a largura disponível de forma elegante. */
@media (min-width: 1600px) {
  .container {
    padding-inline: clamp(64px, 5vw, 120px);
  }
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .about-grid {
    grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr);
  }
}

@media (min-width: 2400px) {
  .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .container {
    padding-inline: clamp(18px, 3.5vw, 34px);
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .about-portrait {
    width: min(100%, 760px);
    min-height: 0;
    max-height: none;
  }
  .about-text {
    max-width: none;
  }
  .hero-sub {
    max-width: 52ch;
  }
}

@media (max-width: 760px) {
  .nav {
    padding: 16px 0;
  }
  .nav.is-solid {
    padding: 12px 0;
  }
  .nav-links {
    width: min(86vw, 390px);
    padding: 94px 28px 36px;
  }
  .section {
    padding-block: 72px;
  }
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .section-head .btn {
    align-self: flex-start;
  }
  .hero {
    min-height: 100svh;
    padding-bottom: 42px;
  }
  .hero-title {
    font-size: clamp(2.65rem, 12vw, 4.8rem);
  }
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px 22px;
    margin-top: 36px;
  }
  .about-grid,
  .contact-grid {
    gap: 30px;
  }
  .footer .container {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 12px 20px;
  }
}

@media (max-width: 520px) {
  .container {
    padding-inline: 16px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }
  .frame-title-bar {
    font-size: .84rem;
  }
  .frame-num,
  .frame-count {
    top: 7px;
    font-size: .55rem;
  }
  .frame-num { left: 7px; }
  .frame-count { right: 7px; }
  .specs > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .specs dd {
    text-align: left;
  }
  .btn {
    padding: 12px 18px;
  }
}


/* =========================================================
   HOME — AJUSTE EXCLUSIVO PARA CELULAR
   Mantém desktop/tablet intactos.
   Objetivos:
   - título do hero em apenas 2 linhas
   - informações "Baseado em / Especialidade / Disponibilidade"
     mais compactas e horizontais
   - proporções mais equilibradas no celular
   ========================================================= */

@media (max-width: 520px) {

  /* Hero: melhor proporção vertical no telefone */
  .hero {
    min-height: 100svh;
    padding-bottom: 30px;
  }

  /* Eyebrow um pouco menor, sem perder o estilo mono/editorial */
  .hero-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    margin-bottom: 13px;
  }

  /*
     O JS já insere uma quebra antes da última palavra.
     white-space: nowrap impede a primeira metade de quebrar novamente,
     fazendo "Você, como sempre" ficar na primeira linha e "foi." na segunda.
  */
  .hero-title {
    width: max-content;
    max-width: calc(100vw - 32px);
    font-size: clamp(2.05rem, 9.8vw, 2.55rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .hero-sub {
    max-width: 34ch;
    margin-top: 17px;
    font-size: 0.88rem;
    line-height: 1.62;
  }

  /* Mantém os dois botões elegantes, mas menos dominantes no celular */
  .hero .btn {
    padding: 11px 16px;
    font-size: 0.64rem;
    letter-spacing: 0.07em;
  }

  /*
     Cada informação fica em uma linha:
     Baseado em  Vale de Cambra, Portugal
     Especialidade  Retrato Feminino
     Disponibilidade  Agenda 2026 aberta
  */
  .hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 28px;
    padding-top: 14px;
    font-size: 0.62rem;
  }

  .hero-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
  }

  .hero-meta strong {
    flex: 0 0 auto;
    display: inline;
    margin: 0;
    font-size: 0.61rem;
    line-height: 1.45;
    white-space: nowrap;
  }

  .hero-meta > div:not(:has(strong)) {
    font-size: 0.62rem;
  }

  .hero-meta > div {
    line-height: 1.45;
  }
}

/* Telefones muito estreitos: mantém segurança contra overflow. */
@media (max-width: 360px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-meta > div {
    gap: 7px;
  }

  .hero-meta strong,
  .hero-meta {
    font-size: 0.57rem;
  }
}


/* =========================================================
   MARCA DO TOPO — RANGEL SANTOS FOTOGRAFIA
   Mantém a marca completa sem alterar a responsividade geral.
   ========================================================= */
.nav-logo {
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  white-space: nowrap;
}

.nav-logo-photo {
  color: inherit;
  font-family: var(--font-display);
  font-size: .82em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 560px) {
  .nav-logo {
    gap: .22em;
    font-size: 1.08rem;
  }

  .nav-logo-photo {
    font-size: .74em;
  }
}


/* =========================================================
   BOTÃO ENVIAR MENSAGEM — MESMO COMPORTAMENTO VISUAL DO CTA
   Normal: fundo preto, borda branca, texto branco.
   Hover/foco: fundo branco, borda branca, texto preto.
   ========================================================= */
#contato-submit {
  appearance: none;
  -webkit-appearance: none;
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

#contato-submit:hover,
#contato-submit:focus-visible {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

#contato-submit:active {
  background: #e9e9e9 !important;
  border-color: #e9e9e9 !important;
  color: #000 !important;
}


/* HERO — FOTO ESTÁTICA + SLIDESHOW CONFIGURÁVEL */
.hero-slideshow {
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:opacity .35s ease;
}

.hero-slideshow.is-active.is-ready {
  opacity:1;
}

.hero-slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  object-fit:cover;
  opacity:0;
  transform:translate3d(0,0,0) scale(1);
  transition:
    opacity var(--hero-slide-transition,1200ms) ease-in-out,
    transform var(--hero-slide-transition,1200ms) cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}

.hero-slide.is-visible {
  opacity:1;
  z-index:2;
}

.hero-media[data-slide-fit="contain"] .hero-photo {
  object-fit:contain;
  background:#0b0b0a;
}

.hero-slideshow[data-fit="contain"] .hero-slide {
  object-fit:contain;
  background-size:contain;
  background-repeat:no-repeat;
  background-color:#0b0b0a;
}

.hero-media[data-slide-width="standard"] {
  left:max(24px, calc((100vw - 1200px) / 2));
  right:max(24px, calc((100vw - 1200px) / 2));
}

.hero[data-slide-ratio="16-9"] {
  min-height:clamp(560px,56.25vw,900px);
}

.hero[data-slide-ratio="2.4-1"] {
  min-height:clamp(500px,41.666vw,760px);
}

.hero[data-slide-ratio="4-1"] {
  min-height:clamp(440px,25vw,620px);
}

.hero[data-slide-ratio="fullscreen"] {
  min-height:100vh;
}

.hero.hero-not-behind-menu {
  padding-top:88px;
}

.hero.hero-not-behind-menu .hero-media {
  top:88px;
}

.hero-slideshow[data-animation="fade"] .hero-slide {
  transform:none;
}

.hero-slideshow[data-animation="slide-horizontal"] .hero-slide {
  opacity:1;
  transform:translate3d(100%,0,0);
}

.hero-slideshow[data-animation="slide-horizontal"] .hero-slide.is-visible {
  transform:translate3d(0,0,0);
}

.hero-slideshow[data-animation="slide-horizontal"] .hero-slide.is-prev {
  transform:translate3d(-100%,0,0);
  z-index:1;
}

.hero-slideshow[data-animation="slide-horizontal"] .hero-slide.is-from-right {
  transform:translate3d(100%,0,0);
}

.hero-slideshow[data-animation="slide-vertical"] .hero-slide {
  opacity:1;
  transform:translate3d(0,-100%,0);
}

.hero-slideshow[data-animation="slide-vertical"] .hero-slide.is-visible {
  transform:translate3d(0,0,0);
}

.hero-slideshow[data-animation="slide-vertical"] .hero-slide.is-prev {
  transform:translate3d(0,100%,0);
  z-index:1;
}

.hero-slideshow[data-animation="slide-vertical"] .hero-slide.is-from-bottom {
  transform:translate3d(0,-100%,0);
}

.hero-slideshow[data-animation="kenburns"] .hero-slide {
  transform:scale(1.065);
  transition:
    opacity var(--hero-slide-transition,1200ms) ease-in-out,
    transform var(--hero-slide-interval,5000ms) ease-out;
}

.hero-slideshow[data-animation="kenburns"] .hero-slide.is-visible {
  transform:scale(1);
}

@media (max-width:899px) {
  .hero-media[data-slide-width="standard"] {
    left:12px;
    right:12px;
  }

  .hero.hero-not-behind-menu {
    padding-top:76px;
  }

  .hero.hero-not-behind-menu .hero-media {
    top:76px;
  }

  .hero[data-slide-ratio="16-9"],
  .hero[data-slide-ratio="2.4-1"],
  .hero[data-slide-ratio="4-1"] {
    min-height:clamp(560px,120vw,780px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   HOME — INFORMAÇÕES DO HERO
   Título em cima + texto de apoio embaixo.
   ========================================================= */

.hero-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start;
  gap: clamp(18px, 4vw, 56px) !important;
}

.hero-meta > div {
  display: block !important;
  min-width: 0;
  line-height: 1.5;
}

.hero-meta strong {
  display: block !important;
  margin: 0 0 6px !important;
  line-height: 1.3;
}

@media (max-width: 520px) {
  .hero-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 28px !important;
    padding-top: 14px !important;
  }

  .hero-meta > div {
    display: block !important;
    min-width: 0;
    font-size: clamp(.52rem, 2.45vw, .64rem) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  .hero-meta strong {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: clamp(.5rem, 2.3vw, .61rem) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .hero-meta {
    gap: 7px !important;
  }

  .hero-meta > div,
  .hero-meta strong {
    font-size: .5rem !important;
  }
}


/* QA V11 — conteúdo público resistente a textos longos */
.hero-title, .hero-sub, .hero-meta, .hero-meta > div,
.section-title, .about-text, .contact-info, .footer {
  overflow-wrap: anywhere;
}
@media (max-width: 390px) {
  .hero-meta { width:100%; min-width:0; }
  .hero-meta > div { min-width:0; }
}


/* =========================================================
   GALERIA + CONTATO — ESPAÇAMENTO SUPERIOR MAIS EQUILIBRADO
   ========================================================= */

.inner-page-section {
  padding-top: clamp(112px, 8vw, 148px) !important;
}

/* Campo anti-spam invisível do formulário de contato */
.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .inner-page-section {
    padding-top: 104px !important;
  }
}

@media (max-width: 390px) {
  .inner-page-section {
    padding-top: 100px !important;
  }
}


/* =========================================================
   ÁREA DO CLIENTE — BOTÕES COM CONTRASTE
   Evita botão branco com texto branco.
   ========================================================= */

.cliente-wrap .btn.btn-accent,
#lightbox-selecao .btn.btn-accent {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: rgba(8,8,7,.88) !important;
  color: #f4f1eb !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  text-shadow: none !important;
}

.cliente-wrap .btn.btn-accent:hover,
.cliente-wrap .btn.btn-accent:focus-visible,
#lightbox-selecao .btn.btn-accent:hover,
#lightbox-selecao .btn.btn-accent:focus-visible {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #0b0b0a !important;
}

.cliente-wrap .btn.btn-accent:active,
#lightbox-selecao .btn.btn-accent:active {
  transform: translateY(1px);
}

.cliente-wrap .btn.btn-accent:disabled,
#lightbox-selecao .btn.btn-accent:disabled {
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.56) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Botões sobre as fotografias finais precisam continuar legíveis
   independentemente da luminosidade da imagem. */
.cliente-wrap .frame .frame-caption .btn.btn-accent {
  background: rgba(8,8,7,.86) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cliente-wrap .frame .frame-caption .btn.btn-accent:hover,
.cliente-wrap .frame .frame-caption .btn.btn-accent:focus-visible {
  background: #ffffff !important;
  color: #0b0b0a !important;
}


/* =========================================================
   BUILD V25 — FUNDO LIMPO NAS GALERIAS PÚBLICAS
   ========================================================= */

/*
   A grade pública usa 2px de gap e antes tinha background:
   var(--hairline). Isso funcionava como divisória, mas também
   pintava todo o espaço vazio da última linha de cinza.
*/
.grid {
  background: transparent !important;
}

/* Mantém a separação fina sem preencher os espaços vazios. */
.grid > .frame {
  box-shadow: 0 0 0 1px var(--hairline);
}

/* Salvaguarda para os dois usos públicos: home e galeria. */
#recent-work,
#recent-works,
.recent-work,
.recent-works,
.trabalhos-recentes,
.gallery-page .grid,
.gallery-section .grid {
  background: transparent !important;
}


/* =========================================================
   BUILD V36 — LIGHTBOX COM PRÉVIAS LATERAIS UM POUCO MAIORES
   ========================================================= */

#lightbox {
  padding: 20px clamp(10px, 1.8vw, 30px);
  overflow: hidden;
}

#lightbox .lightbox-stage {
  position: relative;
  width: 100%;
  padding: 12px 0 18px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

#lightbox .lightbox-carousel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns:
    minmax(180px, .92fr)
    minmax(300px, 1.16fr)
    minmax(180px, .92fr);
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
}

#lightbox .lightbox-slide {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-width: 0;
  height: min(72vh, 760px);
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

#lightbox .lightbox-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

#lightbox .lightbox-slide-current {
  z-index: 3;
  cursor: default;
}

#lightbox .lightbox-slide-current img {
  filter: none;
  opacity: 1;
  transform: scale(1);
}

#lightbox .lightbox-slide-prev,
#lightbox .lightbox-slide-next {
  z-index: 1;
  opacity: .38;
  filter: brightness(.52);
  transition:
    opacity .22s ease,
    filter .22s ease,
    transform .22s ease;
}

#lightbox .lightbox-slide-prev:hover,
#lightbox .lightbox-slide-next:hover {
  opacity: .58;
  filter: brightness(.68);
}

#lightbox .lightbox-slide-prev {
  justify-content: flex-end;
  transform: translateX(-6%);
}

#lightbox .lightbox-slide-next {
  justify-content: flex-start;
  transform: translateX(6%);
}

#lightbox .lightbox-carousel.is-next .lightbox-slide-current,
#lightbox .lightbox-carousel.is-prev .lightbox-slide-current {
  animation: publicGalleryFocusIn .22s ease both;
}

@keyframes publicGalleryFocusIn {
  from {
    opacity: .72;
    transform: scale(.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#lightbox .lightbox-arrow {
  z-index: 1010;
  width: 48px;
  height: 68px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92);
}

#lightbox .lightbox-arrow:hover {
  background: rgba(0,0,0,.42);
}

@media (max-width: 760px) {
  #lightbox {
    padding: 12px 8px 14px;
  }

  #lightbox .lightbox-top {
    padding: 0 6px;
  }

  #lightbox .lightbox-stage {
    padding: 8px 0 12px;
  }

  #lightbox .lightbox-carousel {
    grid-template-columns: 23vw minmax(0, 54vw) 23vw;
    gap: 8px;
  }

  #lightbox .lightbox-slide {
    height: min(72vh, 660px);
  }

  #lightbox .lightbox-slide-prev {
    transform: translateX(-18%);
  }

  #lightbox .lightbox-slide-next {
    transform: translateX(18%);
  }

  #lightbox .lightbox-slide-prev,
  #lightbox .lightbox-slide-next {
    opacity: .28;
    filter: brightness(.46);
  }

  #lightbox .lightbox-arrow {
    width: 38px;
    height: 56px;
    font-size: 1.9rem;
    background: rgba(0,0,0,.30);
  }

  #lightbox .lightbox-arrow-left {
    left: 4px;
  }

  #lightbox .lightbox-arrow-right {
    right: 4px;
  }
}

@media (max-width: 420px) {
  #lightbox .lightbox-carousel {
    grid-template-columns: 18vw minmax(0, 64vw) 18vw;
    gap: 5px;
  }

  #lightbox .lightbox-slide {
    height: min(70vh, 590px);
  }
}

/* BUILD V65 — WhatsApp flutuante premium (3 estilos: editorial/minimal/classic) */
.rs-whatsapp-float{
  --wa-bg:rgba(12,12,11,.92);
  --wa-fg:#f4f1ea;
  --wa-border:rgba(202,181,142,.48);
  position:fixed;right:24px;bottom:24px;z-index:9998;
  display:flex;align-items:center;justify-content:center;gap:0;
  width:56px;height:56px;padding:0;overflow:hidden;
  border:1px solid var(--wa-border);border-radius:999px;
  background:var(--wa-bg);color:var(--wa-fg);text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:width .32s cubic-bezier(.2,.75,.25,1),transform .25s ease,
             border-color .25s ease,background .25s ease,box-shadow .25s ease;
  animation:rsWaEntrance .55s cubic-bezier(.2,.75,.25,1) both;
}
.rs-whatsapp-float.is-left{right:auto;left:24px}
.rs-whatsapp-float .rs-wa-icon{width:23px;height:23px;display:grid;place-items:center;flex:0 0 23px}
.rs-whatsapp-float .rs-wa-icon svg{display:block;width:100%;height:100%}
.rs-whatsapp-float b{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.10em;text-transform:uppercase;
  transition:max-width .32s ease,opacity .2s ease,margin .32s ease;
}
.rs-whatsapp-float:hover{width:154px;gap:10px;transform:translateY(-2px);border-color:rgba(218,198,158,.78);box-shadow:0 18px 46px rgba(0,0,0,.38)}
.rs-whatsapp-float:hover b{max-width:92px;opacity:1}

/* Editorial — padrão recomendado */
.rs-whatsapp-float.is-editorial{--wa-bg:rgba(13,13,12,.93);--wa-fg:#f3efe6;--wa-border:rgba(202,181,142,.52)}
.rs-whatsapp-float.is-editorial:hover{background:rgba(18,18,16,.97)}

/* Minimalista */
.rs-whatsapp-float.is-minimal{--wa-bg:rgba(10,10,10,.72);--wa-fg:#f4f1ea;--wa-border:rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.rs-whatsapp-float.is-minimal:hover{border-color:rgba(255,255,255,.48);background:rgba(10,10,10,.9)}

/* Clássico — opção de maior reconhecimento imediato */
.rs-whatsapp-float.is-classic{--wa-bg:#25D366;--wa-fg:#fff;--wa-border:rgba(255,255,255,.32);box-shadow:0 12px 34px rgba(0,0,0,.28)}
.rs-whatsapp-float.is-classic:hover{background:#20bd5a;border-color:rgba(255,255,255,.58)}

@keyframes rsWaEntrance{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:640px){
  .rs-whatsapp-float{right:16px;bottom:18px;width:52px;height:52px}
  .rs-whatsapp-float.is-left{left:16px;right:auto}
  .rs-whatsapp-float:hover{width:52px;gap:0;transform:none}
  .rs-whatsapp-float b,.rs-whatsapp-float:hover b{display:none;max-width:0;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .rs-whatsapp-float{animation:none;transition:none}
}
/* O editor visual do Admin adiciona esta classe apenas dentro da prévia. */
[contenteditable="true"].design-inline-editing{outline:2px solid rgba(255,255,255,.85)!important;outline-offset:7px!important;background:rgba(15,15,14,.18)!important;cursor:text!important}
[data-design-inline-editable="1"]{cursor:text}
[data-design-inline-editable="1"]:hover{outline:1px dashed rgba(255,255,255,.48);outline-offset:6px}

/* Fase 23 — acabamento editorial global (mantém a paleta configurável do site) */
.nav{padding:24px clamp(18px,5vw,72px);background:transparent;border-bottom:0}
.nav.is-solid{padding:16px clamp(18px,5vw,72px);background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:0}
.nav .container{max-width:1770px;min-height:78px;padding:0 38px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 94%,transparent);box-shadow:0 12px 36px rgba(0,0,0,.08)}
.brand{font-family:var(--font-display);font-size:clamp(1.25rem,1.8vw,1.85rem);font-weight:600;letter-spacing:-.025em;text-transform:none}
.brand span{font-weight:400;color:var(--muted)}
.nav-links a{padding:10px 2px;font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nav-links a::after{left:0;right:0;bottom:3px}

.btn,.filter-btn{min-height:50px;padding:0 28px;border:1px solid var(--line);border-radius:999px;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;background:transparent;color:var(--text);box-shadow:none}
.btn:hover,.filter-btn:hover,.filter-btn.active{background:var(--text);border-color:var(--text);color:var(--bg);transform:translateY(-1px)}
.btn.btn-accent{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.btn-accent:hover{background:transparent;color:var(--text)}
.cliente-wrap .btn.btn-accent,#lightbox-selecao .btn.btn-accent{border-color:var(--text)!important;border-radius:999px!important;background:var(--text)!important;color:var(--bg)!important}
.cliente-wrap .btn.btn-accent:hover,#lightbox-selecao .btn.btn-accent:hover{background:transparent!important;color:var(--text)!important}

.footer{position:relative;overflow:hidden;margin-top:clamp(70px,10vw,150px);padding:clamp(64px,8vw,120px) 0 44px;border-top:1px solid var(--line);background:var(--bg);color:var(--text)}
.footer-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(320px,1.8fr) minmax(150px,.55fr) minmax(180px,.65fr);gap:clamp(36px,7vw,130px);align-items:start;min-height:390px}
.footer-invitation{max-width:580px;margin:0;font-family:var(--font-display);font-size:clamp(2.15rem,3.4vw,4.25rem);font-weight:500;line-height:1.12;letter-spacing:-.025em}
.footer-column{display:flex;flex-direction:column;gap:12px;font-family:var(--font-body);font-size:clamp(1rem,1.25vw,1.35rem)}
.footer-column a{color:var(--text);text-decoration:none;transition:opacity .2s ease}
.footer-column a:hover{opacity:.58}
.footer-label{margin-bottom:8px;color:var(--muted);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;align-self:end;padding-top:34px;border-top:1px solid var(--line)}
.footer-mono{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--muted)}
.footer-watermark{position:absolute;z-index:0;left:3%;right:0;bottom:-.29em;overflow:hidden;white-space:nowrap;pointer-events:none;color:var(--text);opacity:.035;font-family:var(--font-display);font-size:clamp(8rem,20vw,24rem);line-height:.8;letter-spacing:-.07em}
.footer-layout>*:not(.footer-watermark){position:relative;z-index:1}

@media(max-width:820px){
  .nav{padding:14px 12px}.nav.is-solid{padding:10px 12px}.nav .container{min-height:62px;padding:0 18px}.brand{font-size:1.18rem}
  .footer-layout{grid-template-columns:1fr 1fr;min-height:0}.footer-invitation{grid-column:1/-1}.footer-bottom{margin-top:28px}.footer-watermark{bottom:-.12em}
}
@media(max-width:560px){
  .nav .container{border-radius:28px}.btn,.filter-btn{min-height:46px;padding:0 21px}
  .footer{padding-top:58px}.footer-layout{grid-template-columns:1fr;gap:34px}.footer-invitation,.footer-bottom{grid-column:1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:10px}.footer-watermark{display:none}
}

/* Fase 24 — composição final conforme a referência visual */
.nav,
.nav.is-solid{
  top:24px;
  padding:0 clamp(24px,5.8vw,145px);
  border:0;
  background:transparent!important;
  pointer-events:none;
}
.nav .container{
  width:100%;
  max-width:1770px;
  min-height:80px;
  margin-inline:auto;
  padding-inline:38px;
  border:1px solid color-mix(in srgb,var(--text) 24%,transparent);
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  pointer-events:auto;
}
.nav-links{gap:clamp(25px,2.6vw,46px)}
.nav-links a,
.nav-links .nav-cta{
  min-height:0;
  padding:10px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.btn,
.filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  padding:0 36px;
  border:1px solid color-mix(in srgb,var(--text) 34%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--bg) 94%,#000);
  color:var(--text);
  text-align:center;
  line-height:1;
}
.btn:hover,
.filter-btn:hover,
.filter-btn.active{
  border-color:color-mix(in srgb,var(--text) 72%,transparent);
  background:var(--text);
  color:var(--bg);
}
.btn.btn-accent{
  border-color:color-mix(in srgb,var(--text) 72%,transparent);
  background:var(--text);
  color:var(--bg);
}
.btn.btn-accent:hover{background:color-mix(in srgb,var(--bg) 94%,#000);color:var(--text)}

.footer{
  min-height:500px;
  margin-top:clamp(80px,10vw,155px);
  padding:76px 0 34px;
  border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent);
}
.footer .footer-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(430px,1.65fr) minmax(160px,.52fr) minmax(220px,.72fr);
  gap:clamp(70px,8.5vw,180px);
  min-height:388px;
  align-items:start;
}
.footer-invitation{
  max-width:690px;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(3rem,3.45vw,5.25rem);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.035em;
}
.footer-column{
  gap:13px;
  padding-top:6px;
  font-family:var(--font-body);
  font-size:clamp(1.05rem,1.15vw,1.45rem);
  line-height:1.18;
}
.footer-label{
  margin-bottom:10px;
  font-size:.7rem;
  letter-spacing:.16em;
}
.footer-bottom{
  position:absolute!important;
  right:0;
  bottom:8px;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:26px;
  width:auto;
  margin:0;
  padding:0;
  border:0;
}
.footer-watermark{
  left:50%;
  right:auto;
  bottom:-.27em;
  z-index:0;
  transform:translateX(-50%);
  overflow:visible;
  font-family:var(--font-display);
  font-size:clamp(10rem,20vw,25rem);
  font-weight:400;
  font-style:normal;
  line-height:.8;
  letter-spacing:-.075em;
  opacity:.035;
}

@media(max-width:900px){
  .nav,.nav.is-solid{top:12px;padding:0 14px}.nav .container{min-height:64px;padding-inline:20px}
  .footer{min-height:600px;padding-top:58px}.footer .footer-layout{grid-template-columns:1fr 1fr;gap:44px 28px;min-height:500px}.footer-invitation{grid-column:1/-1;font-size:clamp(2.5rem,8vw,4.2rem)}.footer-bottom{left:0;right:auto;flex-direction:column;align-items:flex-start;gap:8px}.footer-watermark{bottom:.08em;font-size:clamp(8rem,23vw,13rem)}
}
@media(max-width:760px){
  .nav-links .nav-cta{padding:10px 0!important;border:0!important}.btn,.filter-btn{min-height:54px;padding-inline:27px}
}
@media(max-width:560px){
  .footer{min-height:auto}.footer .footer-layout{grid-template-columns:1fr;min-height:650px}.footer-invitation{grid-column:1}.footer-bottom{bottom:0}.footer-watermark{display:block;bottom:90px;font-size:7.5rem}
}

/* Fase 25 — refinamentos finais de proporção e visualização */
.nav .container{
  min-height:58px;
  padding-inline:30px;
}
.nav-logo{font-size:1.22rem}
.nav-links{gap:clamp(22px,2.35vw,42px)}
.nav-links a{font-size:.69rem}

.footer{
  min-height:440px;
  padding-top:68px;
}
.footer .footer-layout{
  grid-template-columns:minmax(350px,40%) minmax(130px,15%) minmax(190px,20%) 1fr;
  gap:0;
  min-height:340px;
}
.footer-invitation{
  max-width:570px;
  font-size:clamp(2.25rem,2.8vw,4rem);
  line-height:1.1;
}
.footer-column{
  gap:10px;
  font-size:clamp(.88rem,.92vw,1.08rem);
  line-height:1.18;
}
.footer-label{font-size:.62rem;margin-bottom:8px}
.footer-bottom{
  left:0;
  right:auto;
  bottom:5px;
  flex-direction:row;
  align-items:center;
  gap:24px;
}
.footer-mono{font-size:.66rem}
.footer-watermark{
  bottom:-.08em;
  font-weight:300;
  letter-spacing:.012em;
  opacity:.032;
}

#lightbox .lightbox-stage{height:calc(100vh - 105px);padding:4px 0 12px}
#lightbox .lightbox-carousel{
  grid-template-columns:minmax(140px,1fr) clamp(300px,48vw,720px) minmax(140px,1fr);
  gap:clamp(12px,2vw,30px);
}
#lightbox .lightbox-slide{height:min(68vh,720px)}
#lightbox .lightbox-slide-current img{max-width:100%;max-height:100%;object-fit:contain}
#lightbox .lightbox-slide-prev img,
#lightbox .lightbox-slide-next img{max-height:64%;max-width:100%;object-fit:contain}

@media(max-width:900px){
  .nav .container{min-height:54px}.footer .footer-layout{grid-template-columns:1fr 1fr;gap:42px 28px}.footer-bottom{left:0;right:auto;flex-direction:row}.footer-watermark{bottom:-.02em}
  #lightbox .lightbox-stage{height:calc(100vh - 86px)}
}
@media(max-width:760px){
  #lightbox .lightbox-carousel{grid-template-columns:18vw minmax(0,64vw) 18vw;gap:5px}
  #lightbox .lightbox-slide{height:min(66vh,590px)}
  #lightbox .lightbox-slide-prev img,#lightbox .lightbox-slide-next img{max-height:58%}
}
@media(max-width:560px){
  .footer .footer-layout{grid-template-columns:1fr;min-height:590px}.footer-bottom{bottom:0;flex-direction:column;align-items:flex-start}.footer-watermark{bottom:72px}
}

/* Visualizador público — fotografia principal ampla e sempre proporcional */
#lightbox .lightbox-stage{
  height:calc(100dvh - 82px);
  min-height:0;
  padding:2px 0 8px;
}
#lightbox .lightbox-carousel{
  grid-template-columns:minmax(72px,13vw) minmax(0,1fr) minmax(72px,13vw);
  gap:clamp(6px,1.2vw,20px);
}
#lightbox .lightbox-slide{
  height:min(86dvh,1100px);
}
#lightbox .lightbox-slide-current img{
  width:auto;
  height:auto;
  max-width:min(74vw,1500px);
  max-height:86dvh;
  object-fit:contain;
}
#lightbox .lightbox-slide-prev img,
#lightbox .lightbox-slide-next img{
  max-width:100%;
  max-height:68dvh;
  object-fit:contain;
}

@media(max-width:760px){
  #lightbox{
    padding:8px 0 max(8px,env(safe-area-inset-bottom));
  }
  #lightbox .lightbox-top{
    padding:0 12px;
  }
  #lightbox .lightbox-stage{
    height:calc(100dvh - 78px);
    padding:0;
  }
  #lightbox .lightbox-carousel{
    grid-template-columns:7vw minmax(0,86vw) 7vw;
    gap:0;
  }
  #lightbox .lightbox-slide{
    height:calc(100dvh - 92px);
  }
  #lightbox .lightbox-slide-current img{
    max-width:86vw;
    max-height:calc(100dvh - 92px);
  }
  #lightbox .lightbox-slide-prev img,
  #lightbox .lightbox-slide-next img{
    max-height:54dvh;
  }

  .gallery-trails{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:20px;
  }
  .gallery-trail-card{
    min-height:148px;
    padding:14px;
    border-radius:5px;
  }
  .gallery-trail-card span{
    gap:5px;
  }
  .gallery-trail-card strong{
    font-size:clamp(.98rem,4.5vw,1.22rem);
  }
  .gallery-trail-card small{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:.58rem;
    line-height:1.35;
  }
  #gallery-filters{
    scroll-margin-block:24vh;
  }
}

@media(max-width:380px){
  .gallery-trail-card{
    min-height:132px;
    padding:11px;
  }
}

@media(min-width:1800px){
  #lightbox .lightbox-carousel{
    grid-template-columns:minmax(180px,16vw) minmax(0,1fr) minmax(180px,16vw);
  }
  #lightbox .lightbox-slide-current img{
    max-width:66vw;
    max-height:88dvh;
  }
  #lightbox .lightbox-slide{
    height:min(88dvh,1320px);
  }
}

/* Visualizador público premium — foco central com fotografias vizinhas recortadas */
#lightbox .lightbox-carousel{
  grid-template-columns:minmax(92px,17vw) minmax(0,66vw) minmax(92px,17vw);
  gap:0;
}
#lightbox .lightbox-slide-current{
  padding-inline:clamp(10px,1.2vw,24px);
}
#lightbox .lightbox-slide-current img{
  max-width:100%;
  max-height:86dvh;
  box-shadow:0 22px 70px rgba(0,0,0,.34);
}
#lightbox .lightbox-slide-prev img,
#lightbox .lightbox-slide-next img{
  width:clamp(300px,34vw,760px);
  max-width:none;
  max-height:70dvh;
  opacity:.72;
}
#lightbox .lightbox-slide-prev{
  justify-content:flex-end;
  transform:translateX(-10%);
}
#lightbox .lightbox-slide-next{
  justify-content:flex-start;
  transform:translateX(10%);
}

@media(max-width:900px){
  #lightbox .lightbox-carousel{
    grid-template-columns:10vw minmax(0,80vw) 10vw;
  }
  #lightbox .lightbox-slide-current{
    padding-inline:6px;
  }
  #lightbox .lightbox-slide-prev img,
  #lightbox .lightbox-slide-next img{
    width:44vw;
    max-height:58dvh;
  }
  #lightbox .lightbox-slide-prev{transform:translateX(-16%)}
  #lightbox .lightbox-slide-next{transform:translateX(16%)}
}

@media(max-width:560px){
  #lightbox .lightbox-carousel{
    grid-template-columns:7vw minmax(0,86vw) 7vw;
  }
  #lightbox .lightbox-slide-prev img,
  #lightbox .lightbox-slide-next img{
    width:52vw;
  }
}

/* Fase 26 — rodapé alinhado integralmente à composição de referência */
.footer{
  min-height:500px;
  padding:70px 0 34px;
}
.footer .footer-layout{
  grid-template-columns:minmax(430px,1fr) 150px 190px;
  gap:70px;
  min-height:396px;
}
.footer-invitation{
  max-width:610px;
  font-size:clamp(2.65rem,3.2vw,4.6rem);
  line-height:1.12;
  letter-spacing:-.03em;
}
.footer-column{
  gap:12px;
  padding-top:0;
  font-size:clamp(.95rem,1vw,1.18rem);
  line-height:1.25;
}
.footer-label{margin-bottom:9px;font-size:.68rem}
.footer-bottom{
  position:relative!important;
  left:auto;
  right:auto;
  bottom:auto;
  grid-column:1/-1;
  align-self:end;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin:30px 0 0;
  padding:30px 0 0;
  border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent);
}
.footer-watermark{
  bottom:-.18em;
  font-weight:300;
  letter-spacing:-.035em;
  opacity:.035;
}

@media(max-width:900px){
  .footer .footer-layout{grid-template-columns:1fr 1fr;gap:42px 28px;min-height:500px}.footer-invitation{grid-column:1/-1}.footer-bottom{grid-column:1/-1;margin-top:12px}.footer-watermark{bottom:.03em}
}
@media(max-width:560px){
  .footer .footer-layout{grid-template-columns:1fr;min-height:650px}.footer-invitation,.footer-bottom{grid-column:1}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}.footer-watermark{bottom:85px}
}

/* Fase 27 — medidas uniformes dos botões públicos */
.btn{
  width:205px;
  min-width:205px;
  max-width:100%;
  height:66px;
  min-height:66px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--text) 34%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--bg) 94%,#000);
  color:var(--text);
  text-align:center;
  line-height:1;
  white-space:nowrap;
}
.btn.btn-accent{
  width:240px;
  min-width:240px;
  border-color:color-mix(in srgb,var(--text) 74%,transparent);
  background:var(--text);
  color:var(--bg);
}
.filter-btn{
  width:205px;
  min-width:205px;
  max-width:100%;
  height:66px;
  min-height:66px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
  white-space:nowrap;
}
.filter-btn.active{
  width:240px;
  min-width:240px;
}
.hero-actions{gap:20px!important}

@media(max-width:520px){
  .btn,.btn.btn-accent,.filter-btn,.filter-btn.active{width:100%;min-width:0}
  .hero-actions{width:100%;gap:12px!important}
}

/* Fase 28 — cápsula do cabeçalho mais próxima do conteúdo */
.nav .container{
  min-height:48px;
  padding-inline:24px;
}
.nav-logo{font-size:1.12rem}
.nav-links a,
.nav-links .nav-cta{padding:7px 0!important}
@media(max-width:900px){
  .nav .container{min-height:48px;padding-inline:18px}
}

/* Fase 29 — contorno compacto ao redor da marca e da navegação */
.nav .container{
  width:max-content;
  max-width:calc(100vw - 48px);
  min-height:42px;
  padding-inline:20px;
  column-gap:clamp(110px,24vw,560px);
}
.nav-links a,
.nav-links .nav-cta{padding:5px 0!important}
@media(max-width:900px){
  .nav .container{
    width:calc(100vw - 28px);
    max-width:none;
    min-height:44px;
    padding-inline:16px;
    column-gap:20px;
  }
}

/* Fase 37 — prioridade final para o encaixe móvel */
@media(max-width:900px){
  .nav,.nav.is-solid{padding-inline:8px}
  .nav .container{width:100%;max-width:none}
}

/* Fase 38 — rodapé mais discreto e Trabalhos recentes responsivos */
@media(min-width:901px){
  .footer .footer-layout{
    grid-template-columns:minmax(360px,1fr) 132px 168px;
    column-gap:30px;
  }
  .footer-invitation{
    max-width:540px;
    font-size:clamp(2.15rem,2.65vw,3.7rem);
  }
  .footer-column{
    gap:9px;
    font-size:clamp(.78rem,.82vw,.94rem);
  }
  .footer-label{
    margin-bottom:7px;
    font-size:.57rem;
  }
  .footer-mono{font-size:.6rem}
}
.recent-work-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(1px,.16vw,3px);
}
.recent-work-grid .frame:nth-child(n+9){display:none}
@media(min-width:2200px){
  .recent-work-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .recent-work-grid .frame:nth-child(n+9){display:block}
}
@media(max-width:1200px){
  .recent-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .recent-work-grid .frame:nth-child(n+7){display:none}
}
@media(max-width:760px){
  .recent-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px}
  .recent-work-section .section-head{align-items:flex-start;gap:22px}
}
@media(max-width:380px){
  .recent-work-grid{grid-template-columns:1fr!important}
}

/* Fase 39 — Todas as galerias segue a mesma escala responsiva */
.gallery-all-selected-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(min-width:2200px){
  .gallery-all-selected-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:1200px){
  .gallery-all-selected-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .gallery-all-selected-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px}
}
@media(max-width:380px){
  .gallery-all-selected-grid{grid-template-columns:1fr!important}
}

/* Fase 40 — trilhas e categorias seguem a mesma grade de Todas */
.inner-page-section .gallery-adaptive-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
@media(min-width:2200px){
  .inner-page-section .gallery-adaptive-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:1200px){
  .inner-page-section .gallery-adaptive-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .inner-page-section .gallery-adaptive-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px}
}
@media(max-width:380px){
  .inner-page-section .gallery-adaptive-grid{grid-template-columns:1fr!important}
}

/* Fase 41 — tipografia menor e colunas mais próximas no rodapé */
.footer-invitation{
  max-width:500px;
  font-size:clamp(1.85rem,2.25vw,3.1rem);
}
.footer-column{
  gap:8px;
  font-size:clamp(.7rem,.74vw,.84rem);
}
.footer-label{
  margin-bottom:6px;
  font-size:.53rem;
}
.footer-mono{font-size:.57rem}
@media(min-width:901px){
  .footer .footer-layout{
    grid-template-columns:minmax(360px,1fr) 112px 150px;
    column-gap:12px;
  }
}
@media(max-width:900px){
  .footer-invitation{font-size:clamp(1.85rem,5.8vw,2.75rem)}
  .footer-column{font-size:.76rem}
}

/* Fase 30 — cápsulas proporcionais ao conteúdo */
.btn,
.btn.btn-accent,
.filter-btn,
.filter-btn.active{
  width:auto;
  min-width:0;
  max-width:100%;
  height:58px;
  min-height:58px;
  padding:0 32px;
}
@media(max-width:520px){
  .btn,
  .btn.btn-accent,
  .filter-btn,
  .filter-btn.active{
    width:auto;
    min-width:0;
    max-width:100%;
    height:54px;
    min-height:54px;
    padding-inline:25px;
  }
}

/* Fase 33 — cabeçalho um pouco mais amplo e navegação agrupada */
.nav .container{
  width:min(1180px,calc(100vw - 48px));
  max-width:1180px;
  column-gap:48px;
  justify-content:space-between;
}
.nav-logo{margin-right:auto}
.nav-links{
  margin-left:auto;
  gap:20px;
}
@media(max-width:900px){
  .nav .container{
    width:calc(100vw - 28px);
    max-width:none;
    column-gap:18px;
  }
  .nav-links{gap:22px}
}

/* Fase 32 — medida final das cápsulas e acesso da cliente */
.btn,
.btn.btn-accent,
.filter-btn,
.filter-btn.active{
  height:48px;
  min-height:48px;
  padding-inline:22px;
}
.cliente-wrap .client-access-submit{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:48px!important;
  min-height:48px!important;
  padding-inline:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
@media(max-width:520px){
  .btn,
  .btn.btn-accent,
  .filter-btn,
  .filter-btn.active{
    height:48px;
    min-height:48px;
    padding-inline:22px;
  }
}

/* Fase 31 — cápsulas públicas um pouco mais compactas */
.btn,
.btn.btn-accent,
.filter-btn,
.filter-btn.active{
  height:52px;
  min-height:52px;
  padding-inline:26px;
}

/* Fase 34 — cabeçalho mais largo, preservando a altura compacta */
.nav .container{
  width:min(1360px,calc(100vw - 32px));
  max-width:1360px;
}

/* Fase 35 — cabeçalho ainda mais amplo e ligeiramente mais alto */
.nav .container{
  width:min(1480px,calc(100vw - 20px));
  max-width:1480px;
  min-height:48px;
}

/* Fase 36 — dimensão final solicitada para o cabeçalho */
.nav .container{
  width:min(1800px,calc(100vw - 20px));
  max-width:1800px;
  min-height:52px;
}

/* Fase 37 — cabeçalho fluido e menu móvel navegável */
.nav,
.nav.is-solid{padding-inline:clamp(10px,1.5vw,48px)}
.nav .container{box-sizing:border-box;width:100%;max-width:1800px}
.nav-menu-close{display:none}
html[data-admin-design-device="mobile"] [data-design-inline-editable="1"]{cursor:pointer}
html[data-admin-design-device="mobile"] [data-design-inline-editable="1"]:hover{outline:0}
@media(max-width:760px){
  .nav,.nav.is-solid{padding-inline:8px}
  .nav .container{width:100%;max-width:none}
  .nav-links{padding:78px 28px 38px}
  .nav-menu-close{
    position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--hairline);border-radius:999px;padding:8px 12px;background:transparent;
    color:var(--text);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
    text-transform:uppercase;cursor:pointer
  }
  .nav-menu-close span{font:400 1.25rem/1 var(--font-sans)}
  .nav-menu-close b{font:inherit}
}
@media(max-width:900px){
  .nav .container{
    width:calc(100vw - 16px);
    max-width:none;
    min-height:46px;
    padding-inline:14px;
  }
}
@media(max-width:900px){
  .nav .container{
    width:calc(100vw - 16px);
    max-width:none;
    min-height:46px;
  }
}
@media(max-width:900px){
  .nav .container{
    width:calc(100vw - 20px);
    max-width:none;
  }
}
@media(max-width:520px){
  .btn,
  .btn.btn-accent,
  .filter-btn,
  .filter-btn.active{
    height:50px;
    min-height:50px;
    padding-inline:22px;
  }
}

/* Fase 37 — prioridade final para o encaixe móvel */
@media(max-width:900px){
  .nav,.nav.is-solid{padding-inline:8px}
  .nav .container{width:100%;max-width:none}
}
/* Fase 50 — hierarquia do herói no celular */
@media(max-width:520px){
  .hero .hero-title{
    font-size:clamp(2.4rem,11.4vw,3rem);
    line-height:.94;
    letter-spacing:-.035em;
  }
  .hero .hero-sub{
    max-width:36ch;
    margin-top:15px;
    font-size:.76rem;
    line-height:1.55;
  }
}
/* Fase 52 — enquadramento independente da imagem estática */
.hero-photo{object-position:var(--hero-focus-desktop,50% 50%)}
@media(max-width:899px){.hero-photo{object-position:var(--hero-focus-mobile,var(--hero-focus-desktop,50% 50%))}}

/* Fase 54 — composição editorial completa do rodapé no celular */
@media(max-width:560px){
  .footer{min-height:520px;padding:46px 0 26px}
  .footer .footer-layout{
    grid-template-columns:minmax(0,1.25fr) minmax(62px,.62fr) minmax(76px,.72fr);
    grid-template-rows:auto 1fr auto;
    align-items:start;
    column-gap:14px;
    row-gap:24px;
    min-height:448px;
  }
  .footer-invitation{
    grid-column:1;
    max-width:9.5ch;
    font-size:clamp(1.28rem,6.2vw,1.65rem);
    line-height:1.13;
    letter-spacing:-.025em;
  }
  .footer-column{
    grid-row:1;
    gap:8px;
    padding-top:2px;
    font-size:clamp(.57rem,2.55vw,.7rem);
    line-height:1.28;
  }
  .footer-column:nth-of-type(1){grid-column:2}
  .footer-column:nth-of-type(2){grid-column:3}
  .footer-label{margin-bottom:4px;font-size:.47rem;letter-spacing:.09em}
  .footer-bottom{
    grid-column:1/-1;
    grid-row:3;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    margin:0;
    padding-top:18px;
  }
  .footer-bottom .footer-mono{font-size:.54rem}
  .footer-watermark{
    display:block;
    z-index:0;
    left:50%;
    right:auto;
    bottom:72px;
    width:max-content;
    max-width:none;
    transform:translateX(-50%);
    font-size:clamp(5.4rem,27vw,7.1rem);
    line-height:.8;
    letter-spacing:-.035em;
    text-align:center;
  }
}
@media(max-width:360px){
  .footer .footer-layout{grid-template-columns:minmax(0,1.05fr) minmax(58px,.62fr) minmax(70px,.72fr);column-gap:9px}
  .footer-invitation{font-size:1.18rem}
  .footer-column{font-size:.54rem}
}

/* Fase 55 — encaixe final do rodapé e fim da galeria no celular */
@media(max-width:560px){
  .inner-page-section{padding-bottom:28px!important}
  .footer{min-height:390px;padding:18px 0 18px}
  .footer .footer-layout{
    grid-template-rows:minmax(42px,1fr) auto auto;
    min-height:352px;
    row-gap:18px;
  }
  .footer-invitation,.footer-column{grid-row:2}
  .footer-bottom{
    grid-row:3;
    position:relative!important;
    z-index:2;
    padding-top:15px;
  }
  .footer-watermark{
    bottom:2px;
    width:auto;
    max-width:96vw;
    font-size:clamp(3.45rem,15vw,4.8rem);
    line-height:.78;
    letter-spacing:-.045em;
    opacity:.032;
  }
}

/* Fase 57 — aproximação da grade e das colunas no rodapé móvel */
@media(max-width:560px){
  .recent-work-section{padding-bottom:42px!important}
  .recent-work-section .container{padding-bottom:0}
  .footer{min-height:300px;margin-top:0;padding-top:12px}
  .footer .footer-layout{grid-template-rows:62px auto auto;min-height:270px;row-gap:9px}
  .footer-bottom{margin-top:0;padding-top:10px}
  .footer-column:nth-of-type(2){position:relative;left:-16px}
}
@media(max-width:360px){
  .footer-column:nth-of-type(2){left:-11px}
}

/* Fase 59 — linha do rodapé encaixada entre fotos e textos no celular */
@media(max-width:560px){
  .recent-work-section+.footer{margin-top:0}
  .recent-work-section+.footer .footer-layout{grid-template-rows:62px auto auto;min-height:270px}
  .recent-work-section+.footer{min-height:300px}
}

/* Fase 60 — transição compacta entre o herói e Trabalhos recentes */
@media(max-width:560px){
  .hero+.recent-work-section{padding-top:30px!important}
  .hero .hero-title{max-width:100%;overflow-wrap:anywhere;word-break:normal}
}
.cookie-consent{position:fixed;z-index:99999;left:20px;right:20px;bottom:20px;max-width:760px;margin:auto;padding:20px;border:1px solid var(--hairline);background:#111;color:#f4f1e9;box-shadow:0 18px 60px #000a}.cookie-consent p{margin:0 0 14px;line-height:1.6}.cookie-consent div{display:flex;gap:10px;flex-wrap:wrap}.cookie-consent a{color:inherit;text-decoration:underline}.legal-page{max-width:900px;margin:auto;padding:150px 24px 80px}.legal-page h1,.legal-page h2{font-family:var(--font-display)}.legal-page h2{margin-top:36px}.legal-page p,.legal-page li{line-height:1.75;color:var(--text-muted)}

/* Visualizador público — composição final aprovada para prévia */
#lightbox .lightbox-carousel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1vw,18px);
}
#lightbox .lightbox-slide-current{
  flex:0 1 auto;
  padding-inline:clamp(6px,.65vw,12px);
}
#lightbox .lightbox-slide-prev,
#lightbox .lightbox-slide-next{
  flex:1 1 0;
  min-width:0;
  max-width:27vw;
}
#lightbox .lightbox-slide-prev img,
#lightbox .lightbox-slide-next img{
  width:clamp(300px,32vw,700px);
  max-width:none;
  max-height:70dvh;
}
#lightbox .lightbox-slide-prev{justify-content:flex-end;transform:none}
#lightbox .lightbox-slide-next{justify-content:flex-start;transform:none}

@media(max-width:760px){
  #lightbox .lightbox-carousel{display:grid;grid-template-columns:minmax(0,1fr)}
  #lightbox .lightbox-slide-prev,
  #lightbox .lightbox-slide-next{display:none}
  #lightbox .lightbox-slide-current{padding-inline:8px}
  #lightbox .lightbox-slide-current img{max-width:calc(100vw - 16px)}
}