/* ==========================================================================
   PATRICIA PICETTI FOTOGRAFIA — style.css
   Papel claro, grafite e o turquesa do logotipo · Noto Serif Display (títulos) + Montserrat (rótulos e corpo)
   Mobile-first. Breakpoints: sm 40rem (640px) · md 48rem (768px) · lg 64rem (1024px) · xl 75rem (1200px)

   Regras do visual (valem para qualquer bloco novo):
   - As fotos mandam: fundo neutro, poucas cores e nada competindo com a imagem.
   - Cantos retos: nada de border-radius em fotos, cartões, botões e campos. Só três sinais são redondos:
     o botão do WhatsApp, o retrato da Patricia (a "lente") e os pontos da ficha.
   - Sem sombras nem degradês decorativos: a separação é feita por fios de 1px e por respiro.
   - Um só botão preenchido, o de orçamento (petróleo). As outras ações são contorno ou "traço + rótulo".
   - Títulos em serifada leve, com no máximo um trecho em itálico (<em>) por título.
   - Rótulos em Montserrat maiúscula espaçada (--texto-rotulo), nunca abaixo de 11px; os que são ação
     (botões e "traço + rótulo") usam --texto-acao (12px).
   - Textos corridos alinhados à esquerda (nunca justificados) e com no máximo ~65 caracteres por linha.
   - Toda distância sai da escala --sp-* e de --sp-secao.
   - O ALT das fotos nunca aparece na tela: as legendas visíveis são o título e o cliente.
   ========================================================================== */

/* 0. FONTES ----------------------------------------------------------------
   As duas famílias ficam no próprio site (assets/fonts, subconjunto latino, variáveis no peso): chegam junto
   com a página, sem depender de outro domínio. As famílias "Reserva" são fontes do aparelho ajustadas às
   medidas das originais: enquanto o arquivo não chega, o texto ocupa o mesmo espaço e nada salta.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

@font-face {
  font-family: 'Picetti Sans Reserva';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 109.5%;
  ascent-override: 88.4%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Picetti Serif Reserva';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 102.2%;
  ascent-override: 104.6%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Paleta da marca (Conteudo/LOGO): o turquesa do nome e o cinza de "FOTOGRAFIA" */
  --turquesa: #00a8a8;
  --turquesa-clara: #5fc9c6;
  --petroleo: #0b6b6c;
  --petroleo-profundo: #084f50;
  --cinza-logo: #606062;
  --grafite: #1d2526;
  --noite: #121819;

  /* Papéis (fundos claros) */
  --papel: #f7f5f1;
  --papel-escuro: #eeebe4;
  --bruma: #e3ecea;

  /* Texto */
  --tinta: var(--grafite);
  --tinta-suave: #5c6466;
  --tinta-clara: var(--papel);
  --tinta-clara-suave: #b9c4c3;
  --fio: rgba(29, 37, 38, 0.16);
  --fio-claro: rgba(247, 245, 241, 0.22);

  /* Tipografia */
  --fonte-serifada: 'Noto Serif Display', 'Picetti Serif Reserva', Georgia, 'Times New Roman', serif;
  --fonte-sans: 'Montserrat', 'Picetti Sans Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --texto-display: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  --texto-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);
  --texto-h2: clamp(1.95rem, 1.45rem + 2.2vw, 3.25rem);
  --texto-h3: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --texto-lead: clamp(1.375rem, 1.08rem + 1.3vw, 2.125rem);
  --texto-corpo: 1rem;
  --texto-pequeno: 0.875rem;
  --texto-rotulo: 0.6875rem;
  --texto-acao: 0.75rem;

  /* Espaços */
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-secao: clamp(4.5rem, 3rem + 6.4vw, 9rem);
  --margem: clamp(1.25rem, 0.5rem + 3.8vw, 5rem);
  --largura: 82rem;
  --largura-texto: 36rem;
  --header-h: 4rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 64rem) {
  :root { --header-h: 5rem; }
}

/* 2. BASE ------------------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--fonte-sans);
  font-size: var(--texto-corpo);
  line-height: 1.7;
  color: var(--tinta);
  background-color: var(--papel);
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

ul, ol { list-style: none; }

img, svg, video, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

/* Proteção das fotos: sem o menu de "salvar imagem" do toque longo (iPhone), sem seleção e sem arrastar.
   O botão direito, o toque longo no Android e os atalhos ficam em src/modules/protecao.ts. */
a { -webkit-touch-callout: none; }

img, picture, video, svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

button { cursor: pointer; }

[hidden] { display: none !important; }

/* Anel de foco: petróleo sobre os fundos claros e turquesa clara sobre os escuros (--foco). */
:focus-visible {
  outline: 2px solid var(--foco, var(--petroleo));
  outline-offset: 3px;
}

.fundo-grafite,
.fundo-petroleo,
.topo:not(.topo--claro),
.chamada,
.menu,
.footer,
.lightbox,
body[data-cabecalho='sobre-foto'] .header:not(.is-scrolled) { --foco: #9fe0dd; }

::selection {
  background-color: var(--turquesa);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: var(--margem);
  top: 0;
  z-index: 100;
  padding: var(--sp-xs) var(--sp-sm);
  background-color: var(--grafite);
  color: var(--papel);
  font-size: var(--texto-pequeno);
  transform: translateY(-120%);
}

.skip-link:focus { transform: translateY(var(--sp-2xs)); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sem-quebra { white-space: nowrap; }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.section { padding-block: var(--sp-secao); }
.section--colada { padding-top: 0; }

/* Faixas de cor: o texto e os fios acompanham o fundo */
.fundo-papel-escuro { background-color: var(--papel-escuro); }
.fundo-bruma { background-color: var(--bruma); }

.fundo-grafite,
.fundo-petroleo {
  --tinta: var(--papel);
  --tinta-suave: var(--tinta-clara-suave);
  --fio: var(--fio-claro);
  --destaque: var(--turquesa-clara);
  color: var(--tinta);
}

.fundo-grafite { background-color: var(--grafite); }
/* Cor livre, escolhida no painel: a cor e as tintas calculadas para ela vêm no atributo style da seção. */
.fundo-livre { background-color: var(--fundo-secao); color: var(--tinta); }
/* Sobre o petróleo o destaque é mais claro, para os rótulos pequenos terem contraste. */
.fundo-petroleo { background-color: #0b5e5f; --tinta-suave: #d6e6e5; --destaque: #9fe0dd; }

/* Foto que preenche o bloco inteiro */
.cover {
  position: absolute;
  inset: 0;
}

.cover img,
.cover picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cover img { object-fit: cover; }

/* 4. TIPOGRAFIA ------------------------------------------------------------ */
/* Rótulo acima dos títulos: ecoa a assinatura "FOTOGRAFIA" do logotipo */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--texto-rotulo);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--destaque, var(--petroleo));
}

.eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 2rem;
  height: 1px;
  background-color: currentColor;
}

.eyebrow--centro { justify-content: center; }
.eyebrow--simples::before { content: none; }

.titulo {
  font-family: var(--fonte-serifada);
  font-size: var(--texto-h2);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.titulo em,
.lead em {
  font-style: italic;
  color: var(--destaque, var(--petroleo));
}

.titulo--display { font-size: var(--texto-display); line-height: 1.02; }
.titulo--h1 { font-size: var(--texto-h1); line-height: 1.04; }
.titulo--h3 { font-size: var(--texto-h3); line-height: 1.15; letter-spacing: -0.005em; }

/* Frase de abertura em serifada grande */
.lead {
  font-family: var(--fonte-serifada);
  font-size: var(--texto-lead);
  font-weight: 300;
  line-height: 1.36;
  letter-spacing: -0.005em;
}

.texto {
  max-width: var(--largura-texto);
  color: var(--tinta-suave);
}

.texto > * + * { margin-top: var(--sp-sm); }
.texto strong { font-weight: 600; color: var(--tinta); }

.texto a,
.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--destaque, var(--turquesa));
  transition: color 0.25s var(--ease-suave), text-decoration-color 0.25s var(--ease-suave);
}

.texto a:hover,
.link:hover { color: var(--destaque, var(--petroleo)); }

/* Cabeçalho de seção: rótulo, título e texto com as distâncias padrão */
.section-head { max-width: 46rem; }
.section-head > .eyebrow { margin-bottom: var(--sp-md); }
.section-head > .texto { margin-top: var(--sp-md); }

.section-head--centro {
  margin-inline: auto;
  text-align: center;
}

.section-head--centro > .texto { margin-inline: auto; }
.section-head--centro > .eyebrow { justify-content: center; }

/* 5. ANIMAÇÕES --------------------------------------------------------------
   [data-reveal]  → aparece ao entrar na tela (valor = margem em px).
   [data-stagger] → aplica atraso progressivo aos filhos com data-reveal.
   Um único gesto para o site inteiro: subir 18px e aparecer; as fotos assentam de 1,05 para 1.
   Sem JavaScript (sem a classe "js") nada fica escondido. Se os scripts demorarem ou falharem, o <head>
   põe a classe "js-atrasou" depois de 4 s e tudo aparece do mesmo jeito.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease) var(--reveal-delay, 0s), transform 0.9s var(--ease) var(--reveal-delay, 0s);
}

/* Foto que assenta dentro da moldura */
.js [data-reveal-foto] {
  opacity: 1;
  transform: none;
  overflow: hidden;
}

.js [data-reveal-foto] img {
  opacity: 0;
  transform: scale(1.05);
}

.js [data-reveal-foto].is-visible img {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-suave) var(--reveal-delay, 0s), transform 1.6s var(--ease) var(--reveal-delay, 0s);
}

.js-atrasou [data-reveal],
.js-atrasou [data-reveal-foto] img {
  opacity: 1;
  transform: none;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* 6. BOTÕES E LINKS DE AÇÃO ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3.25rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  font-size: var(--texto-acao);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-suave), color 0.35s var(--ease-suave), border-color 0.35s var(--ease-suave);
}

.btn .icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
}

.btn__seta { transition: transform 0.45s var(--ease); }
.btn:hover .btn__seta { transform: translateX(4px); }

/* Preenchido: só para pedir orçamento */
.btn--solid {
  background-color: var(--petroleo);
  border-color: var(--petroleo);
  color: #fff;
}

.btn--solid:hover {
  background-color: var(--petroleo-profundo);
  border-color: var(--petroleo-profundo);
  color: #fff;
}

/* Contorno: ações secundárias */
.btn--outline {
  border-color: currentColor;
  color: var(--tinta);
}

.btn--outline:hover {
  background-color: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.fundo-grafite .btn--outline:hover,
.fundo-petroleo .btn--outline:hover,
.fundo-livre--escuro .btn--outline:hover { color: var(--grafite); }

/* Sobre os fundos escuros e sobre as fotos o botão de orçamento clareia ao passar o mouse */
.fundo-grafite .btn--solid:hover,
.fundo-petroleo .btn--solid:hover,
.fundo-livre--escuro .btn--solid:hover,
.menu .btn--solid:hover,
.footer .btn--solid:hover,
.topo:not(.topo--claro) .btn--solid:hover,
.chamada--foto .btn--solid:hover {
  background-color: var(--papel);
  border-color: var(--papel);
  color: var(--petroleo-profundo);
}

/* Sobre o petróleo o botão cheio fica claro (senão se perderia no fundo) */
.fundo-petroleo .btn--solid {
  background-color: var(--papel);
  border-color: var(--papel);
  color: var(--petroleo-profundo);
}

.fundo-petroleo .btn--solid:hover {
  background-color: #fff;
  border-color: #fff;
}

/* Contorno claro sobre fotos */
.btn--ghost {
  border-color: rgba(247, 245, 241, 0.7);
  color: var(--papel);
}

.btn--ghost:hover {
  background-color: var(--papel);
  border-color: var(--papel);
  color: var(--grafite);
}

.btn--sm {
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  font-size: var(--texto-rotulo);
  letter-spacing: 0.18em;
}

.btn--block { width: 100%; }

/* Traço + rótulo: a ação secundária padrão (o traço cresce ao passar o mouse) */
.acao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 2.75rem;
  font-size: var(--texto-acao);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta);
}

.acao::before {
  content: '';
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1px;
  background-color: var(--destaque, var(--turquesa));
  transition: width 0.45s var(--ease);
}

.acao:hover::before { width: 3.75rem; }
.acao--clara { color: var(--papel); }
.acao--clara::before { background-color: currentColor; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm) var(--sp-md);
}

/* 7. ÍCONES E MARCA -------------------------------------------------------- */
.icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.25;
}

.marca {
  display: block;
  width: 100%;
  height: auto;
}

/* Logotipo enviado pelo painel em PNG, WebP ou JPG (o SVG é embutido e segue a regra abaixo). */
img.marca { object-fit: contain; }

/* Logotipo desenhado: o nome e a assinatura FOTOGRAFIA. Sem cor própria, os dois seguem a cor do texto
   (claros sobre a foto); onde há --logo-nome e --logo-assinatura, ficam nas cores da marca. */
.marca--logotipo .logo__nome,
.marca--assinatura .logo__nome { fill: var(--logo-nome, currentColor); }

.marca--logotipo .logo__assinatura,
.marca--assinatura .logo__assinatura { fill: var(--logo-assinatura, currentColor); }

.header.is-scrolled,
body[data-cabecalho='claro'] .header,
.pagina-bio {
  --logo-nome: var(--turquesa);
  --logo-assinatura: var(--cinza-logo);
}

.menu,
.footer {
  --logo-nome: var(--turquesa);
  --logo-assinatura: #c9d1d0;
}

/* O símbolo (diafragma) em traço mantém a espessura de fio em qualquer tamanho */
.marca--simbolo-traco circle,
.marca--simbolo-traco path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

/* 8. CABEÇALHO -------------------------------------------------------------
   Transparente sobre a foto do topo; ganha fundo de papel assim que a página rola
   (.is-scrolled) e nas páginas sem foto no topo (body[data-cabecalho="claro"]).
   Celular: logotipo · Orçamento + Menu (o logotipo é largo: fica à esquerda, com espaço próprio).
   Computador (xl): logotipo · links · Área do Cliente + Orçamento.
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--papel);
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease-suave), color 0.45s var(--ease-suave), border-color 0.45s var(--ease-suave);
}

.header.is-scrolled,
body[data-cabecalho='claro'] .header {
  background-color: var(--papel);
  border-bottom-color: var(--fio);
  color: var(--grafite);
}

/* A barra tem a mesma caixa do .container: menu e botão alinham com o conteúdo em qualquer largura. */
.header__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-sm);
  max-width: calc(var(--largura) + 2 * var(--margem));
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.header__menu {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-right: -0.25rem;
  padding-inline: 0.25rem;
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.header__menu-icone,
.menu__fechar-icone {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 0.5rem;
}

.header__menu-icone span,
.menu__fechar-icone span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}

.header__menu-icone span:first-child { top: 0; }
.header__menu-icone span:last-child { bottom: 0; width: 66%; }
.header__menu:hover .header__menu-icone span:last-child { width: 100%; }

/* No celular estreito o botão do menu mostra só o ícone; a palavra continua lá para os leitores de tela. */
.header__menu-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.header__nav { display: none; }

/* Sem JavaScript o botão do menu não abre nada: fica só o atalho (dentro de <noscript>) para os links do rodapé. */
html:not(.js) .header__menu[data-menu-abrir] { display: none; }

.header__logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  width: calc(7.25rem * var(--logo-escala, 1));
  max-width: 100%;
  min-height: 2.75rem;
  transition: width 0.45s var(--ease);
}

/* Na página inicial, enquanto o cabeçalho está sobre a foto, o Orçamento fica em contorno:
   o botão cheio da primeira dobra é o do topo. Ao rolar, volta ao petróleo. */
body[data-page='inicio'] .header:not(.is-scrolled) .header__cta {
  background-color: transparent;
  border-color: rgba(247, 245, 241, 0.7);
  color: var(--papel);
}

body[data-page='inicio'] .header:not(.is-scrolled) .header__cta:hover {
  background-color: var(--papel);
  border-color: var(--papel);
  color: var(--grafite);
}

.header__acoes {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.header__cliente { display: none; }

@media (max-width: 22.49rem) {
  .header__cta { padding-inline: 0.75rem; letter-spacing: 0.12em; }
}

@media (min-width: 25rem) {
  .header__logo { width: calc(8.25rem * var(--logo-escala, 1)); }
}

@media (min-width: 34rem) {
  .header__menu-texto {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

@media (min-width: 48rem) {
  .header__logo { width: calc(9.5rem * var(--logo-escala, 1)); }
}

@media (min-width: 75rem) {
  .header__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-lg); }
  .header__menu { display: none; }
  .header__acoes { grid-column: 3; }

  .header__logo {
    grid-column: 1;
    width: calc(10.5rem * var(--logo-escala, 1));
  }

  .header.is-scrolled .header__logo { width: calc(9.5rem * var(--logo-escala, 1)); }

  .header__nav {
    grid-column: 2;
    grid-row: 1;
    display: block;
    justify-self: center;
  }

  .header__links {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, calc(1.25rem + (100vw - 75rem) * 0.06), 2.25rem);
  }

  .header__link {
    position: relative;
    display: block;
    padding-block: 0.75rem;
    font-size: var(--texto-rotulo);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .header__link::after,
  .header__cliente::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.4rem;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
  }

  .header__link:hover::after,
  .header__link.is-current::after,
  .header__cliente:hover::after { transform: scaleX(1); }

  /* Submenus (Portfólio e Serviços): abrem ao passar o mouse ou ao receber o foco, sem JavaScript. O item ocupa
     a altura do cabeçalho, para a caixa nascer encostada no fio de baixo e o mouse não a perder no caminho. */
  .header__grupo {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-h);
  }

  .header__grupo > .header__link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .header__grupo .icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .header__sub {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--sp-md) - 1px);
    padding: var(--sp-2xs) var(--sp-md);
    background-color: var(--papel);
    border: 1px solid var(--fio);
    color: var(--grafite);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-suave), visibility 0s linear 0.3s;
  }

  .header__grupo:hover .header__sub,
  .header__grupo:focus-within .header__sub {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .header__sublink {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--texto-rotulo);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.25s var(--ease-suave);
  }

  .header__sublink:hover { color: var(--petroleo); }

  /* Área do Cliente: link discreto ao lado do botão de orçamento */
  .header__cliente {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    font-size: var(--texto-rotulo);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .header__cliente .icon { width: 1rem; height: 1rem; }
}

/* 9. MENU EM TELA CHEIA (celular e tablet) --------------------------------- */
html.menu-aberto,
html.menu-aberto body { overflow: hidden; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background-color: var(--grafite);
  color: var(--papel);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.4s var(--ease-suave);
}

.menu.is-open { opacity: 1; }
.menu.is-closing { opacity: 0; pointer-events: none; }

/* O "Fechar" fica no mesmo lugar do botão do menu (à direita) e o logotipo, à esquerda, como no cabeçalho. */
.menu__topo {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-sm);
  height: var(--header-h);
  padding-inline: var(--margem);
  border-bottom: 1px solid var(--fio-claro);
}

.menu__fechar {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  margin-right: -0.25rem;
  padding-inline: 0.25rem;
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.menu__fechar-icone span { top: 50%; }
.menu__fechar-icone span:first-child { transform: rotate(24deg); }
.menu__fechar-icone span:last-child { transform: rotate(-24deg); }

.menu__logo {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: calc(8.25rem * var(--logo-escala, 1));
  max-width: 100%;
}

.menu__nav {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  padding: var(--sp-lg) var(--margem) var(--sp-md);
}

.menu__item {
  border-bottom: 1px solid var(--fio-claro);
  padding-block: 0.4rem;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding-block: 0.6rem;
  font-family: var(--fonte-serifada);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
}

.menu__link[aria-current='page'] { font-style: italic; color: var(--turquesa-clara); }

.menu__numero {
  flex: 0 0 1.75rem;
  font-family: var(--fonte-sans);
  font-size: var(--texto-rotulo);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--turquesa-clara);
}

.menu__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-md);
  padding: 0 0 0.6rem calc(1.75rem + var(--sp-sm));
}

.menu__sublink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-clara-suave);
}

.menu__sublink:hover { color: var(--turquesa-clara); }

.menu__base {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 0 var(--margem) max(var(--sp-md), env(safe-area-inset-bottom));
}

.menu__contatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-md);
  margin-top: var(--sp-md);
}

.menu__contatos a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: var(--texto-pequeno);
  color: var(--tinta-clara-suave);
}

.menu__contatos .icon { width: 1.05rem; height: 1.05rem; }

/* O telefone ocupa a linha inteira; a Área do Cliente e as redes ficam lado a lado na de baixo. */
.menu__contato-fone { flex-basis: 100%; }

.menu__simbolo {
  position: absolute;
  right: -18%;
  bottom: -6%;
  width: 78%;
  max-width: 26rem;
  color: var(--papel);
  opacity: 0.05;
  pointer-events: none;
}

/* Itens entram em sequência curta quando o menu abre */
.js .menu__item,
.js .menu__base {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.js .menu.is-open .menu__item,
.js .menu.is-open .menu__base {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease) calc(0.08s + var(--i, 0) * 0.045s), transform 0.7s var(--ease) calc(0.08s + var(--i, 0) * 0.045s);
}

@media (min-width: 48rem) {
  .menu__logo { width: calc(9.5rem * var(--logo-escala, 1)); }

  .menu__nav,
  .menu__base {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
  }

  .menu__simbolo { right: -6%; width: 44%; }
}

/* 10. RODAPÉ --------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  background-color: var(--grafite);
  color: var(--tinta-clara-suave);
  font-size: var(--texto-pequeno);
}

.footer .container { position: relative; }

.footer__simbolo {
  position: absolute;
  right: -5rem;
  top: -2rem;
  width: 22rem;
  color: var(--papel);
  opacity: 0.045;
  pointer-events: none;
}

.footer__topo {
  display: grid;
  gap: var(--sp-sm);
  padding-block: var(--sp-lg) var(--sp-md);
  border-bottom: 1px solid var(--fio-claro);
}

.footer__logo {
  display: block;
  width: calc(12rem * var(--logo-escala, 1));
  color: var(--papel);
}

.footer__sobre {
  max-width: 24rem;
  font-family: var(--fonte-serifada);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--papel);
}

.footer__cta { justify-self: start; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  padding-block: var(--sp-md) var(--sp-lg);
}

.footer__col:last-child { grid-column: 1 / -1; }

.footer__title {
  margin-bottom: var(--sp-2xs);
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--turquesa-clara);
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  transition: color 0.25s var(--ease-suave);
}

.footer__col a:hover,
.footer__col a[aria-current='page'] { color: var(--papel); }

/* Contatos em duas colunas no celular (o endereço ocupa a linha inteira) */
.footer__contatos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-md);
}

.footer__contato-endereco { grid-column: 1 / -1; }

.footer__contatos a,
.footer__endereco {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  min-height: 2.75rem;
  padding-block: 0.4rem;
  line-height: 1.5;
}

.footer__contato-endereco span { max-width: 19rem; }

.footer__contatos .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  color: var(--turquesa-clara);
}

.footer__rotulo {
  display: block;
  font-size: 0.75rem;
  color: var(--tinta-clara-suave);
  opacity: 0.8;
}

.footer__contatos a > span:last-child { color: var(--papel); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2xs) var(--sp-md);
  padding-block: var(--sp-md) calc(var(--sp-md) + 4rem);
  border-top: 1px solid var(--fio-claro);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Assinatura da agência (rodapé do site e da página de bio) */
.footer__credito a,
.bio__credito a { transition: color 0.25s var(--ease-suave); }

.footer__credito a { color: var(--papel); }
.footer__credito a:hover { color: var(--turquesa-clara); }

.footer__credito strong,
.bio__credito strong {
  font-weight: 600;
  color: #e96b20; /* laranja da agênciaLOCAL */
}

@media (min-width: 48rem) {
  .footer__topo {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-xl);
  }

  .footer__topo { padding-block: var(--sp-xl) var(--sp-lg); }
  .footer__cta { justify-self: end; }
  .footer__grid { grid-template-columns: 1fr 1fr 1.4fr; gap: var(--sp-lg) var(--sp-md); padding-block: var(--sp-lg); }
  .footer__col:last-child { grid-column: auto; }
  .footer__contatos { grid-template-columns: 1fr; }
  .footer__base { padding-bottom: var(--sp-md); }
  .footer__simbolo { width: 30rem; right: -4rem; }
}

@media (min-width: 64rem) {
  .footer__grid { grid-template-columns: 1fr 1fr 1.2fr; gap: var(--sp-xl); }
}

/* 11. WHATSAPP FLUTUANTE ---------------------------------------------------- */
/* 48px e encostado no canto: é o menor tamanho que ainda é um bom alvo de toque e o que menos cobre o texto. */
.whats {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(247, 245, 241, 0.5);
  border-radius: 50%;
  background-color: var(--petroleo);
  color: #fff;
  transition: background-color 0.35s var(--ease-suave), transform 0.45s var(--ease), opacity 0.3s var(--ease-suave);
}

.whats .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.whats:hover {
  background-color: var(--petroleo-profundo);
  transform: translateY(-3px);
}

html.menu-aberto .whats,
html.janela-aberta .whats,
html.lb-aberto .whats {
  opacity: 0;
  pointer-events: none;
}

/* No computador o botão cabe na margem lateral, fora da coluna de conteúdo. */
@media (min-width: 64rem) {
  .whats {
    right: max(0.5rem, calc((var(--margem) - 3rem) / 2));
    bottom: 1.5rem;
  }
}

@media (min-width: 100rem) {
  .whats {
    right: 2rem;
    bottom: 2rem;
    width: 3.5rem;
    height: 3.5rem;
  }

  .whats .icon { width: 1.6rem; height: 1.6rem; }
}

/* 12. JANELA "PEDIR ORÇAMENTO" ----------------------------------------------
   <dialog> aberto por [data-orcamento]. Celular: folha que sobe da base da tela.
   A partir de md: painel na lateral direita.
   -------------------------------------------------------------------------- */
html.janela-aberta { overflow: hidden; }

.janela {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: 94dvh;
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* O campo com foco nunca fica atrás da barra fixa do fim da janela. */
  scroll-padding-bottom: 12rem;
}

.janela[open] { animation: janela-sobe 0.5s var(--ease) both; }
.janela.is-closing { animation: janela-desce 0.32s var(--ease-suave) both; }

.janela::backdrop {
  background-color: rgba(18, 24, 25, 0.6);
  animation: fade-in 0.4s var(--ease-suave) both;
}

.janela.is-closing::backdrop { animation: fade-out 0.32s var(--ease-suave) both; }

@keyframes janela-sobe {
  from { transform: translate3d(0, 100%, 0); }
}

@keyframes janela-desce {
  to { transform: translate3d(0, 100%, 0); }
}

.janela__form {
  display: grid;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--margem) max(var(--sp-md), env(safe-area-inset-bottom));
}

.janela__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.janela__topo .eyebrow { margin-bottom: var(--sp-xs); }

.janela__titulo {
  font-family: var(--fonte-serifada);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
}

.janela__titulo em {
  font-style: italic;
  color: var(--petroleo);
}

.janela__fechar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.4rem -0.6rem 0 0;
}

.janela__fechar .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1; }

.janela__texto,
.janela__rodape {
  font-size: var(--texto-pequeno);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.janela__rotulo {
  display: block;
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.janela__rotulo small {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--tinta-suave);
}

.janela__grupo > .janela__rotulo { margin-bottom: var(--sp-xs); }

/* Tipos de trabalho: botões de escolha em duas colunas, colados pelos fios */
.janela__opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 0 1px;
}

.janela__opcao {
  position: relative;
  margin: -1px 0 0 -1px;
}

.janela__opcao input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.janela__opcao span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  height: 100%;
  padding: 0.5rem;
  border: 1px solid var(--fio);
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.3s var(--ease-suave), color 0.3s var(--ease-suave), border-color 0.3s var(--ease-suave);
}

.janela__opcao input:checked + span {
  position: relative;
  background-color: var(--grafite);
  border-color: var(--grafite);
  color: var(--papel);
}

.janela__opcao input:focus-visible + span {
  position: relative;
  outline: 2px solid var(--foco, var(--petroleo));
  outline-offset: 2px;
}

/* Grupo sem escolha na hora de enviar */
.janela__grupo[aria-invalid='true'] .janela__opcao span { border-color: var(--petroleo); }

.janela__campo {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.janela__campo input,
.janela__campo textarea {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tinta);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.janela__campo textarea {
  min-height: 5.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--fio);
  border-bottom-color: var(--tinta);
  resize: vertical;
  line-height: 1.5;
}

.janela__campo ::placeholder { color: #8b9294; opacity: 1; }

.janela__final {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: var(--sp-xs);
  margin: 0 calc(-1 * var(--margem)) calc(-1 * max(var(--sp-md), env(safe-area-inset-bottom)));
  padding: var(--sp-sm) var(--margem) max(var(--sp-sm), env(safe-area-inset-bottom));
  border-top: 1px solid var(--fio);
  background-color: var(--papel);
}

.janela__aviso {
  min-height: 1.3em;
  font-family: var(--fonte-serifada);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--petroleo);
}

.janela__aviso:empty { display: none; }
.janela__rodape { font-size: 0.8125rem; }

/* Em telas baixas (celular deitado, zoom alto) a barra do fim deixa de ser fixa: senão cobriria os campos. */
@media (max-height: 43rem) {
  .janela { scroll-padding-bottom: 1rem; }
  .janela__final { position: static; }
}

@media (min-width: 48rem) {
  .janela {
    inset: 0 0 0 auto;
    width: 31rem;
    height: 100dvh;
    max-height: none;
  }

  .janela__form { padding: var(--sp-lg); gap: var(--sp-md); }

  .janela__final {
    margin: 0 calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-lg));
    padding: var(--sp-md) var(--sp-lg);
  }

  .janela__titulo { font-size: 2.375rem; }

  @keyframes janela-sobe {
    from { transform: translate3d(100%, 0, 0); }
  }

  @keyframes janela-desce {
    to { transform: translate3d(100%, 0, 0); }
  }
}

/* 13. TOPO -----------------------------------------------------------------
   Página inicial: tela inteira, fotos que se alternam e o texto na base, à esquerda.
   Páginas internas (.topo--interno): mais baixo. Sem foto (.topo--claro): só texto, sobre o papel.
   -------------------------------------------------------------------------- */
.topo {
  --destaque: #9fe0dd;
  --tinta: var(--papel);
  --tinta-suave: rgba(247, 245, 241, 0.86);
  --fio: var(--fio-claro);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--noite);
  color: var(--papel);
  overflow: hidden;
}

.topo__midia,
.topo__slide,
.topo__veu {
  position: absolute;
  inset: 0;
}

.topo__midia picture,
.topo__midia img {
  display: block;
  width: 100%;
  height: 100%;
}

.topo__midia img { object-fit: cover; }

/* Celular em pé: o topo recebe o recorte em pé da foto (<picture>), que fica centralizado. Enquanto o
   recorte não existe, a própria foto é enquadrada no ponto escolhido no painel (--foco-celular). */
@media (max-width: 47.99rem) and (orientation: portrait) {
  .topo__midia img { object-position: var(--foco-celular, 50% 50%) !important; }
}

.topo--home .topo__slide {
  opacity: 0;
  transition: opacity 1.8s var(--ease-suave);
}

.topo--home .topo__slide.is-active { opacity: 1; }

/* A foto assenta devagar enquanto está em cena */
.js .topo--home .topo__slide img {
  transform: scale(1.07);
  transition: transform 9s linear;
}

.js .topo--home .topo__slide.is-active img { transform: none; }

/* Véu em três camadas: uma faixa firme atrás do cabeçalho (medida em rem, para valer em qualquer altura
   de topo), o reforço da base, onde fica o texto, e um tom leve na foto inteira. O meio fica quase livre. */
.topo__veu {
  background:
    linear-gradient(180deg, rgba(18, 24, 25, 0.66) 0, rgba(18, 24, 25, 0.66) calc(var(--header-h) + 0.5rem), rgba(18, 24, 25, 0) calc(var(--header-h) + 7rem)),
    linear-gradient(180deg, rgba(18, 24, 25, 0) 30%, rgba(18, 24, 25, 0.6) 52%, rgba(18, 24, 25, 0.88) 100%),
    rgba(18, 24, 25, 0.14);
}

.topo__conteudo {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-lg));
  padding-bottom: var(--sp-lg);
}

.topo__conteudo > .eyebrow { margin-bottom: var(--sp-md); }

/* Sobre a foto o rótulo vai em papel (o turquesa perde contraste nas fotos claras); o traço guarda o acento. */
.topo:not(.topo--claro) .eyebrow { color: var(--papel); }
.topo:not(.topo--claro) .eyebrow::before { background-color: var(--destaque); }

/* Sobre a foto, o texto ganha uma sombra larga e leve (não aparece como sombra, só firma a leitura) */
.topo:not(.topo--claro) .topo__conteudo { text-shadow: 0 1px 22px rgba(18, 24, 25, 0.5); }
.topo:not(.topo--claro) .btn { text-shadow: none; }

/* No celular o rótulo do topo dispensa o traço para caber em uma linha */
@media (max-width: 39.99rem) {
  .topo__conteudo > .eyebrow::before { content: none; }
}

.topo__titulo { max-width: 15ch; }

.topo__texto {
  max-width: 28rem;
  margin-top: var(--sp-md);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(247, 245, 241, 0.92);
}

.topo__acoes { margin-top: var(--sp-lg); }

.topo__base {
  position: relative;
  display: none;
}

.topo__marcadores { display: none; }

/* Entrada do topo: uma vez, ao abrir a página. Curta e sem partir do invisível, para a foto e o título
   (o conteúdo principal da primeira dobra) serem pintados logo. */
@keyframes entrar-topo {
  from { opacity: 0.3; transform: translate3d(0, 16px, 0); }
}

@keyframes clarear-topo {
  from { opacity: 0.4; }
}

.js .topo__conteudo > * { animation: entrar-topo 0.9s var(--ease) both; }
.js .topo__conteudo > :nth-child(2) { animation-delay: 0.06s; }
.js .topo__conteudo > :nth-child(3) { animation-delay: 0.12s; }
.js .topo__conteudo > :nth-child(4) { animation-delay: 0.18s; }
.js .topo__midia { animation: clarear-topo 0.9s var(--ease-suave) both; }

/* Internas */
.topo--interno {
  min-height: 34rem;
  min-height: min(76svh, 44rem);
}

.topo--interno .topo__conteudo { padding-bottom: var(--sp-xl); }
.topo--interno .topo__titulo { max-width: 18ch; }

/* Nas internas o texto ocupa mais da altura da foto: a base do véu começa mais cedo e é mais fechada. */
.topo--interno .topo__veu {
  background:
    linear-gradient(180deg, rgba(18, 24, 25, 0.68) 0, rgba(18, 24, 25, 0.68) calc(var(--header-h) + 0.5rem), rgba(18, 24, 25, 0) calc(var(--header-h) + 6rem)),
    linear-gradient(180deg, rgba(18, 24, 25, 0) 14%, rgba(18, 24, 25, 0.7) 44%, rgba(18, 24, 25, 0.92) 100%),
    rgba(18, 24, 25, 0.24);
}

/* No computador o texto ocupa só a esquerda: o véu escurece esse lado e deixa o resto da foto com a cor dela. */
@media (min-width: 64rem) {
  .topo--interno .topo__veu {
    background:
      linear-gradient(180deg, rgba(18, 24, 25, 0.66) 0, rgba(18, 24, 25, 0.66) calc(var(--header-h) + 0.5rem), rgba(18, 24, 25, 0) calc(var(--header-h) + 6rem)),
      linear-gradient(90deg, rgba(18, 24, 25, 0.8) 0%, rgba(18, 24, 25, 0.56) 30%, rgba(18, 24, 25, 0) 64%),
      linear-gradient(180deg, rgba(18, 24, 25, 0) 55%, rgba(18, 24, 25, 0.45) 100%);
  }
}

/* Sem foto */
.topo--claro {
  --destaque: var(--petroleo);
  --tinta: var(--grafite);
  --tinta-suave: #5c6466;
  --fio: rgba(29, 37, 38, 0.16);
  min-height: 0;
  background-color: transparent;
  color: var(--tinta);
  border-bottom: 1px solid var(--fio);
}

.topo--claro .topo__conteudo {
  padding-top: calc(var(--header-h) + var(--sp-xl));
  padding-bottom: var(--sp-xl);
}

.topo--claro .topo__texto { color: var(--tinta-suave); }

@media (min-width: 48rem) {
  .topo__texto { font-size: 1.125rem; }

  /* Faixa de fatos na base do topo */
  .topo__base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding-block: var(--sp-md);
  }

  .topo__base::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--margem);
    right: var(--margem);
    height: 1px;
    background-color: var(--fio-claro);
  }

  .topo__fatos { color: rgba(247, 245, 241, 0.85); }

  .topo__marcadores {
    display: flex;
    gap: var(--sp-2xs);
    margin-right: 5rem;
  }

  .topo__marcador {
    position: relative;
    width: 2rem;
    height: 2rem;
  }

  .topo__marcador::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.4;
    transition: opacity 0.4s var(--ease-suave);
  }

  .topo__marcador.is-active::before { opacity: 1; }
}

/* Ficha: linha de dados curtos separados por pontos. O ponto fica na borda esquerda de cada item e a
   lista corta a própria borda esquerda: assim, quando a linha quebra, nenhum ponto sobra pendurado. */
.ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin-left: -0.9em;
  clip-path: inset(0 0 0 0.5em);
  font-size: var(--texto-rotulo);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ficha li {
  position: relative;
  padding-inline: 0.9em;
}

.ficha li::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: calc(50% - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--destaque, var(--turquesa));
}

/* Moldura de proporção fixa para as fotos */
.moldura {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--papel-escuro);
}

.moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moldura--4x5 { aspect-ratio: 4 / 5; }
.moldura--3x2 { aspect-ratio: 3 / 2; }
.moldura--1x1 { aspect-ratio: 1; }

/* Ações no fim de um bloco */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-lg);
}

.section-cta--esquerda { justify-content: flex-start; }

/* Cabeçalho de seção com uma ação ao lado (no computador) */
.section-linha {
  display: grid;
  gap: var(--sp-md);
}

@media (min-width: 48rem) {
  .section-linha {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* 14. PÁGINA INICIAL ------------------------------------------------------- */

/* 14.1 Manifesto e números */
.manifesto__corpo {
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

.manifesto__simbolo {
  width: 3.25rem;
  margin: 0 auto var(--sp-md);
  color: var(--turquesa);
}

.manifesto__corpo .eyebrow { margin-bottom: var(--sp-md); }

.numeros {
  display: grid;
  margin-top: var(--sp-xl);
  border-top: 1px solid var(--fio);
}

.numeros__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-block: var(--sp-sm);
  border-bottom: 1px solid var(--fio);
}

.numeros__valor {
  font-family: var(--fonte-serifada);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--destaque, var(--petroleo));
  white-space: nowrap;
}

.numeros__legenda {
  max-width: 14rem;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-align: right;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

@media (min-width: 48rem) {
  .numeros {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--fio);
  }

  .numeros__item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-xs);
    padding: var(--sp-lg) var(--sp-md);
    border-bottom: 0;
  }

  .numeros__item + .numeros__item { border-left: 1px solid var(--fio); }

  .numeros__legenda {
    max-width: none;
    text-align: center;
  }
}

/* 14.2 Por que a foto importa (faixa escura com os gatilhos) e o jeito de trabalhar (Sobre) */
.faixa-gatilhos {
  position: relative;
  overflow: hidden;
}

.faixa-gatilhos__simbolo {
  position: absolute;
  right: -8rem;
  top: -6rem;
  width: 26rem;
  color: var(--papel);
  opacity: 0.06;
  pointer-events: none;
}

.faixa-gatilhos__corpo { position: relative; }

.gatilhos {
  display: grid;
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--fio);
}

.gatilhos__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: var(--sp-sm);
  padding-block: var(--sp-md);
  border-bottom: 1px solid var(--fio);
}

.gatilhos__numero {
  grid-row: 1 / span 2;
  padding-top: 0.5rem;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--destaque, var(--petroleo));
}

.gatilhos__icone {
  grid-row: 1 / span 2;
  padding-top: 0.2rem;
  color: var(--destaque, var(--petroleo));
}

.gatilhos__icone .icon { width: 1.5rem; height: 1.5rem; }

.gatilhos__titulo {
  font-family: var(--fonte-serifada);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.gatilhos__texto {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}

@media (min-width: 48rem) {
  .gatilhos {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

@media (min-width: 75rem) {
  .gatilhos {
    grid-template-columns: repeat(4, 1fr);
    border-top: 0;
  }

  .gatilhos--tres { grid-template-columns: repeat(3, 1fr); }

  .gatilhos__item {
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--sp-sm);
    padding: var(--sp-md) 0 0;
    border-top: 1px solid var(--fio);
    border-bottom: 0;
  }

  .gatilhos__numero,
  .gatilhos__icone { grid-row: auto; padding-top: 0; }

  .gatilhos__texto { margin-top: 0; }
  .faixa-gatilhos__simbolo { width: 36rem; right: -6rem; }
}

/* 14.3 Trilho horizontal (cartões que rolam de lado) */
.trilho { margin-top: var(--sp-lg); }

.trilho__faixa {
  display: flex;
  gap: var(--sp-sm);
  padding-inline: var(--margem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.trilho__faixa::-webkit-scrollbar { display: none; }

.trilho__faixa.is-arrastando {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.trilho__item {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.cartao-foto { display: block; }
.cartao-foto__corpo { display: block; padding-top: var(--sp-sm); }

.cartao-foto__titulo {
  display: block;
  font-family: var(--fonte-serifada);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.cartao-foto__texto {
  display: block;
  max-width: 22rem;
  margin-top: 0.35rem;
  font-size: var(--texto-pequeno);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.cartao-foto__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-xs);
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--petroleo);
}

.cartao-foto__acao .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.45s var(--ease);
}

.cartao-foto--link .moldura img { transition: transform 1.4s var(--ease), opacity 1s var(--ease-suave); }
.cartao-foto--link:hover .moldura.is-visible img { transform: scale(1.035); }
.cartao-foto--link:hover .cartao-foto__acao .icon { transform: translateX(4px); }

.trilho__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.trilho__controles {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
}

.trilho__contador {
  margin-right: var(--sp-xs);
  white-space: nowrap;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--tinta-suave);
}

.trilho__seta {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--fio);
  transition: background-color 0.3s var(--ease-suave), color 0.3s var(--ease-suave), opacity 0.3s var(--ease-suave);
}

.trilho__seta:hover:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--tinta);
  color: var(--papel);
}

.trilho__seta:disabled,
.trilho__seta[aria-disabled='true'] {
  opacity: 0.3;
  cursor: default;
}

/* Sem JavaScript as setas e o contador não fazem nada: a faixa continua rolando com o dedo ou o mouse. */
html:not(.js) .trilho__controles { display: none; }

.trilho.is-estatico .trilho__controles { display: none; }

@media (min-width: 40rem) {
  .trilho__item { flex-basis: 44%; }
}

@media (min-width: 64rem) {
  .trilho__faixa { gap: var(--sp-md); }
  /* Quatro cartões fecham com a largura do conteúdo (o 100% já desconta as margens da faixa). */
  .trilho__item { flex-basis: calc((100% - 3 * var(--sp-md)) / 4); }
  .trilho__seta { display: flex; }
}

/* Alinha a faixa ao contêiner em telas muito largas */
@media (min-width: 92rem) {
  .trilho__faixa {
    padding-inline: calc((100vw - var(--largura)) / 2);
    scroll-padding-inline: calc((100vw - var(--largura)) / 2);
  }

  .trilho__item { flex-basis: calc((var(--largura) - 3 * var(--sp-md)) / 4); }
}

/* 14.4 Duo: foto de um lado, texto do outro */
.duo {
  display: grid;
  gap: var(--sp-lg);
}

.duo > * { min-width: 0; }

.duo__foto + .duo__texto { margin-top: calc(-1 * var(--sp-xs)); }

/* Foto + texto já ficam lado a lado no tablet; os blocos só de texto (.duo--texto) esperam mais largura. */
@media (min-width: 48rem) {
  .duo:not(.duo--texto) {
    grid-template-columns: 5fr 6fr;
    align-items: center;
  }

  .duo--inverso .duo__foto { order: 2; }
  .duo__foto + .duo__texto { margin-top: 0; }
}

@media (min-width: 64rem) {
  .duo {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 8rem);
    align-items: center;
  }

  .duo--inverso .duo__foto { order: 2; }
  .duo--texto { align-items: start; }
  .duo__foto + .duo__texto { margin-top: 0; }
}

/* Retrato da Patricia: a "lente" (um dos três sinais redondos do site), com um fio turquesa em volta */
.retrato {
  width: min(100%, 20rem);
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  outline: 1px solid var(--turquesa);
  outline-offset: 0.85rem;
  background-color: var(--grafite);
}

.retrato img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .duo--retrato:not(.duo--texto) { grid-template-columns: 4fr 7fr; }
}

/* 14.5 Mosaico do portfólio (página inicial) */
.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md) var(--sp-2xs);
  margin-top: var(--sp-lg);
}

.mosaico .obra__foto { aspect-ratio: 1; }

.mosaico .obra:first-child { grid-column: 1 / -1; }
.mosaico .obra:first-child .obra__foto { aspect-ratio: 3 / 2; }

@media (min-width: 64rem) {
  .mosaico {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--sp-md) var(--sp-xs);
  }

  .mosaico .obra:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
  }

  .mosaico .obra:first-child .obra__foto {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }
}

/* 14.6 Clientes: logotipo, nome, cidade e desde quando é cliente */
/* Os cartões dividem os fios (margem de -1px) e a última linha, quando incompleta, fica centralizada. */
.clientes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-lg);
  padding: 1px 0 0 1px;
}

.cliente {
  flex: 0 0 50%;
  margin: -1px 0 0 -1px;
  border: 1px solid var(--fio);
}

.cliente__cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--sp-md) var(--sp-sm);
  text-align: center;
}

.cliente__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.5rem;
  margin-bottom: var(--sp-sm);
}

/* Os logotipos chegam em cores e fundos diferentes: em tons de cinza, misturados ao papel, ficam no mesmo tom.
   Ao passar o mouse, voltam às cores originais. */
.cliente__logo {
  width: auto;
  max-width: min(100%, 9.5rem);
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.78;
  transition: filter 0.45s var(--ease-suave), opacity 0.45s var(--ease-suave);
}

.cliente__cartao:hover .cliente__logo,
a.cliente__cartao:focus-visible .cliente__logo {
  filter: none;
  opacity: 1;
}

.cliente__nome-marca {
  font-family: var(--fonte-serifada);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  color: var(--tinta-suave);
}

.cliente__nome {
  font-family: var(--fonte-serifada);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.3;
}

.cliente__info {
  margin-top: 0.3rem;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--destaque, var(--petroleo));
}

@media (min-width: 40rem) {
  .cliente { flex-basis: 33.333%; }
}

@media (min-width: 64rem) {
  .cliente { flex-basis: 25%; }
}

@media (min-width: 85rem) {
  .cliente { flex-basis: 20%; }
}

/* 14.7 Chamada final */
.chamada {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.chamada--foto {
  --tinta: var(--papel);
  --destaque: #9fe0dd;
  background-color: var(--noite);
  color: var(--papel);
}

/* Véu firme: o texto fica centralizado sobre a foto inteira, inclusive nas fotos claras. */
.chamada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(18, 24, 25, 0.68);
}

.chamada__simbolo {
  position: absolute;
  right: -6rem;
  top: 50%;
  width: 26rem;
  color: var(--papel);
  opacity: 0.08;
  transform: translateY(-50%);
  pointer-events: none;
}

.chamada__conteudo {
  position: relative;
  padding-block: clamp(5.5rem, 4rem + 8vw, 11rem);
}

.chamada__conteudo .eyebrow { margin-bottom: var(--sp-md); }

.chamada__titulo {
  max-width: 18ch;
  margin-inline: auto;
}

.chamada__texto {
  max-width: 30rem;
  margin: var(--sp-md) auto 0;
  color: var(--papel);
}

.chamada__acoes {
  justify-content: center;
  margin-top: var(--sp-lg);
}

.chamada__nota {
  margin-top: var(--sp-md);
  font-size: var(--texto-pequeno);
  letter-spacing: 0.02em;
  color: var(--papel);
}

/* 15. BLOCOS DAS PÁGINAS INTERNAS ------------------------------------------ */

/* 15.1 Abertura: frase em serifada grande, centralizada */
.abertura__corpo {
  max-width: calc(52rem + 2 * var(--margem));
  text-align: center;
}

.abertura__corpo .eyebrow { margin-bottom: var(--sp-md); }

/* 15.2 Lista separada por fios (onde as fotos trabalham, onde já fotografamos) */
.lista-fios { border-top: 1px solid var(--fio); }

.lista-fios li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
  border-bottom: 1px solid var(--fio);
  color: var(--tinta-suave);
  line-height: 1.6;
}

.lista-fios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 0.875rem;
  height: 1px;
  background-color: var(--destaque, var(--turquesa));
}

@media (min-width: 40rem) {
  .lista-fios--dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-md);
  }
}

/* 15.3 Par de fotos: uma grande e uma menor, deslocada */
.par { position: relative; }

.par__segunda {
  position: relative;
  width: 52%;
  margin: calc(-1 * var(--sp-xl)) 0 0 auto;
  border: var(--sp-2xs) solid var(--papel);
  border-right: 0;
}

@media (min-width: 64rem) {
  .par--duas { padding-right: 18%; padding-bottom: var(--sp-xl); }

  .par__segunda {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44%;
    margin: 0;
    border-right: var(--sp-2xs) solid var(--papel);
  }
}

/* 15.4 Números em lista (dentro de uma coluna de texto) */
.numeros--lista {
  grid-template-columns: 1fr;
  margin-top: var(--sp-lg);
  border-bottom: 0;
}

.numeros--lista .numeros__item {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  border-left: 0;
  border-bottom: 1px solid var(--fio);
}

.numeros--lista .numeros__valor { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }

.numeros--lista .numeros__legenda {
  max-width: none;
  text-align: right;
}

/* 15.5 Serviços: botões abaixo do texto de cada serviço */
.servico__acoes { margin-top: var(--sp-lg); }

/* 16. PORTFÓLIO ------------------------------------------------------------ */
.galeria { padding-top: var(--sp-lg); }

/* Os filtros acompanham a rolagem, logo abaixo do cabeçalho */
.filtros {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  gap: var(--sp-2xs);
  margin: 0 calc(-1 * var(--margem)) var(--sp-md);
  padding: var(--sp-2xs) var(--margem);
  background-color: var(--papel);
  overflow-x: auto;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}

html:not(.js) .filtros { display: none; }

.filtros::-webkit-scrollbar { display: none; }

.filtros__botao {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--fio);
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease-suave), color 0.3s var(--ease-suave), border-color 0.3s var(--ease-suave);
}

.filtros__botao span {
  margin-left: 0.35em;
  font-weight: 400;
  color: var(--tinta-suave);
}

.filtros__botao.is-active span { color: var(--tinta-clara-suave); }

.filtros__botao:hover { border-color: var(--tinta); }

.filtros__botao.is-active {
  background-color: var(--grafite);
  border-color: var(--grafite);
  color: var(--papel);
}

/* Foto do portfólio: a foto (que amplia) e a legenda em duas linhas e duas cores: o cliente (nome | cidade –
   cliente desde), na cor da marca, e a referência da foto (descrição · ano), em cinza */
.zoom {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--papel-escuro);
}

.zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.zoom:hover img { transform: scale(1.04); }

.obra { min-width: 0; }

.obra__legenda {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.6rem;
}

.obra__cliente {
  font-family: var(--fonte-serifada);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--destaque, var(--petroleo));
}

/* A cidade e o "cliente desde" não se partem no meio: se não couberem, descem inteiros */
.obra__local,
.obra__desde,
.obra__ano { white-space: nowrap; }

.obra__separador { color: var(--turquesa); }

.obra__referencia {
  font-size: var(--texto-pequeno);
  line-height: 1.5;
  color: var(--tinta-suave);
}

.obra__referencia .obra__separador { color: inherit; }

/* Celular: duas colunas de fotos em pé e, a cada três, uma deitada de ponta a ponta (dá ritmo e encurta
   a página). A contagem ignora as fotos escondidas pelo filtro. */
.galeria__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md) var(--sp-2xs);
}

.galeria__grade .obra__foto { aspect-ratio: 4 / 5; }

.galeria__grade .obra:nth-child(3n + 1 of :not([hidden])) { grid-column: 1 / -1; }
.galeria__grade .obra:nth-child(3n + 1 of :not([hidden])) .obra__foto { aspect-ratio: 3 / 2; }

/* No celular as duas colunas são estreitas: a legenda fica menor */
@media (max-width: 39.99rem) {
  .galeria__grade .obra:not(:nth-child(3n + 1 of :not([hidden]))) .obra__cliente { font-size: 0.9375rem; }
  .galeria__grade .obra:not(:nth-child(3n + 1 of :not([hidden]))) .obra__referencia { font-size: 0.8125rem; }
}

/* A partir do tablet: colunas com as fotos na proporção original */
@media (min-width: 40rem) {
  .galeria__grade {
    display: block;
    columns: 2;
    column-gap: var(--sp-2xs);
  }

  .galeria__grade .obra,
  .galeria__grade .obra:nth-child(3n + 1 of :not([hidden])) {
    margin-bottom: var(--sp-md);
    break-inside: avoid;
  }

  .galeria__grade .obra__foto,
  .galeria__grade .obra:nth-child(3n + 1 of :not([hidden])) .obra__foto { aspect-ratio: auto; }

  .galeria__grade .obra__foto img { height: auto; }
}

@media (min-width: 64rem) {
  .galeria__grade {
    columns: 3;
    column-gap: var(--sp-xs);
  }
}

/* 17. CONTATO -------------------------------------------------------------- */
.contato__acoes { margin-top: var(--sp-lg); }

@media (max-width: 29.99rem) {
  .contato__acoes .btn { width: 100%; }
}

.passos { border-top: 1px solid var(--fio); }

.passos__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-sm);
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--fio);
}

.passos__numero {
  padding-top: 0.45rem;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--petroleo);
}

.passos__titulo,
.canais__titulo {
  font-family: var(--fonte-serifada);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.passos__texto {
  margin-top: 0.3rem;
  color: var(--tinta-suave);
  line-height: 1.6;
}

.canais { border-top: 1px solid var(--fio); }

.canais__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--sp-sm);
  align-items: start;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--fio);
}

.canais__item > .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.3rem;
  color: var(--destaque, var(--petroleo));
}

.canais__valor {
  margin-top: 0.2rem;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

.canais__acao { grid-column: 2; }

@media (min-width: 48rem) {
  .canais__item { grid-template-columns: auto 1fr auto; align-items: center; }
  .canais__item > .icon { margin-top: 0; }
  .canais__acao { grid-column: auto; }
}

/* 18. FOTO AMPLIADA (lightbox) ---------------------------------------------- */
/* Com a foto ampliada aberta a página por trás não rola (inclusive no iPhone) */
html.lb-aberto,
html.lb-aberto body { overflow: hidden; }

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  height: 100dvh;
  color: var(--papel);
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.35s var(--ease-suave), visibility 0.35s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* Fundo em camada própria: clareia enquanto a foto é arrastada para baixo para fechar */
.lightbox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--noite);
  opacity: var(--lb-fundo, 1);
}

/* O símbolo da marca fica ao fundo, atrás da foto, com a altura da área dela (a mesma folga do palco):
   aparece no espaço que sobra quando a foto não ocupa a tela toda (foto deitada no celular em pé) e some
   atrás dela quando ocupa. */
.lightbox__simbolo {
  position: absolute;
  top: var(--lb-topo);
  left: 50%;
  z-index: -1;
  width: auto;
  max-width: none;
  height: calc(100% - var(--lb-topo) - var(--lb-base));
  color: var(--papel);
  opacity: 0.1;
  transform: translateX(-50%);
  pointer-events: none;
}

.lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  transition: color 0.3s var(--ease-suave);
}

.lightbox__close:hover { color: var(--turquesa-clara); }

.lightbox__close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.lightbox__counter {
  position: absolute;
  top: 1.5rem;
  left: 1.25rem;
  z-index: 3;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--tinta-clara-suave);
}

/* A legenda da foto ampliada, como a do portfólio: o cliente numa cor e a descrição com o ano em outra */
.lightbox__caption {
  flex: 0 0 auto;
  display: grid;
  gap: 0.15rem;
  padding: 0 1.25rem 0.25rem;
  font-size: var(--texto-pequeno);
  text-align: center;
  color: var(--tinta-clara-suave);
}

.lightbox__cliente {
  font-family: var(--fonte-serifada);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--turquesa-clara);
}

/* No celular a foto usa a largura toda; as setas ficam por cima */
.lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  --lb-topo: 4rem;
  --lb-base: 0.75rem;
  padding: var(--lb-topo) 0 var(--lb-base);
  overflow: hidden;
  touch-action: none;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s var(--ease-suave), transform 0.3s var(--ease);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  will-change: transform;
}

.lightbox__img:not([src]) { visibility: hidden; }
.lightbox__img.is-loaded { opacity: 1; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(18, 24, 25, 0.5);
  transform: translateY(-50%);
  transition: background-color 0.3s var(--ease-suave), color 0.3s var(--ease-suave), opacity 0.3s var(--ease-suave);
}

.lightbox__nav:hover {
  background-color: var(--papel);
  color: var(--grafite);
}

.lightbox__nav:disabled,
.lightbox__nav[aria-disabled='true'] {
  opacity: 0;
  pointer-events: none;
}

.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }

.lightbox__nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox__thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.75rem 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}

.lightbox__thumbs::-webkit-scrollbar { display: none; }

.lightbox__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease-suave);
}

.lightbox__thumb:hover { opacity: 0.75; }

.lightbox__thumb.is-active {
  opacity: 1;
  outline: 1px solid var(--turquesa-clara);
  outline-offset: 2px;
}

.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .lightbox__stage { --lb-topo: 3.5rem; --lb-base: 1rem; padding-inline: 5rem; }
  .lightbox__nav { background-color: transparent; border: 1px solid var(--fio-claro); }
  .lightbox__nav:disabled,
  .lightbox__nav[aria-disabled='true'] { opacity: 0.25; }
  .lightbox__nav--prev { left: 1.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
  .lightbox__thumbs { padding: 0.75rem 1.5rem 1.25rem; }
  .lightbox__thumb { width: 4rem; height: 4rem; }
}

/* Celular deitado: a foto usa a altura toda (sem miniaturas; troca pelas setas ou arrastando) */
@media (max-height: 30rem) and (orientation: landscape) {
  .lightbox__stage { --lb-topo: 0.75rem; --lb-base: 0.75rem; padding-inline: 4.5rem; }
  .lightbox__thumbs { display: none; }
}

/* 19. PÁGINA DE BIO (o link que vai na bio das redes sociais) -----------------
   Página à parte, sem o cabeçalho, o menu e o rodapé do site: logotipo, uma frase e a lista de botões,
   em uma coluna estreita. Os botões são retângulos de fio; só o de destaque (o orçamento) é preenchido.
   -------------------------------------------------------------------------- */
.pagina-bio {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-lg) var(--sp-md) max(var(--sp-md), env(safe-area-inset-bottom));
}

.bio {
  flex: 1 0 auto;
  width: 100%;
  max-width: 26rem;
}

.bio__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bio__marca {
  width: calc(14rem * var(--logo-escala, 1));
  max-width: 80%;
}

.bio__rotulo { margin-top: var(--sp-md); }

.bio__frase {
  max-width: 22rem;
  margin-top: var(--sp-xs);
  font-family: var(--fonte-serifada);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  text-wrap: balance;
}

.bio__frase em {
  font-style: italic;
  color: var(--petroleo);
}

/* Traço entre a apresentação e os botões (o mesmo traço dos rótulos do site) */
.bio__topo::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  margin-block: var(--sp-md);
  background-color: var(--turquesa);
}

.bio__lista {
  display: grid;
  gap: var(--sp-xs);
}

.bio__link {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 4.25rem;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--fio);
  transition: background-color 0.35s var(--ease-suave), color 0.35s var(--ease-suave), border-color 0.35s var(--ease-suave);
}

.bio__link:hover { border-color: var(--tinta); }

.bio__link > .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--petroleo);
}

.bio__texto {
  flex: 1;
  min-width: 0;
}

.bio__titulo {
  display: block;
  text-wrap: balance;
  font-family: var(--fonte-serifada);
  font-size: 1.3125rem;
  font-weight: 300;
  line-height: 1.25;
}

.bio__link > .bio__seta {
  width: 1rem;
  height: 1rem;
  color: var(--tinta-suave);
  transition: transform 0.45s var(--ease);
}

.bio__link:hover > .bio__seta { transform: translateX(4px); }

/* Destaque: o único botão preenchido da página */
.bio__link--destaque {
  background-color: var(--petroleo);
  border-color: var(--petroleo);
  color: #fff;
}

.bio__link--destaque > .icon,
.bio__link--destaque > .bio__seta { color: inherit; }

.bio__link--destaque:hover {
  background-color: var(--petroleo-profundo);
  border-color: var(--petroleo-profundo);
  color: #fff;
}

.bio__rodape {
  margin-top: var(--sp-lg);
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* A assinatura da agência mantém a grafia dela (agênciaLOCAL), sem as maiúsculas do rodapé */
.bio__credito {
  margin-top: var(--sp-2xs);
  letter-spacing: 0.04em;
  text-transform: none;
}

.bio__credito a { color: var(--tinta); }
.bio__credito a:hover { color: var(--petroleo); }

@media (min-width: 48rem) {
  .pagina-bio { padding-top: var(--sp-xl); }
}

/* 20. MOVIMENTO REDUZIDO E IMPRESSÃO ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal],
  .js [data-reveal-foto] img,
  .js .topo--home .topo__slide img,
  .js .menu__item,
  .js .menu__base {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .header,
  .menu,
  .whats,
  .janela,
  .chamada,
  .trilho__controles,
  .filtros { display: none !important; }

  body { background: #fff; }

  .js [data-reveal],
  .js [data-reveal-foto] img {
    opacity: 1 !important;
    transform: none !important;
  }
}