/* =========================================================
   VARIÁVEIS GLOBAIS (paleta, fontes, medidas)
   Centralize aqui os ajustes de marca. Para mudar a cor de
   destaque do site, altere apenas --cor-destaque.
   ========================================================= */
:root {
  /* ---- Paleta oficial Desalina (manual DSLN_BRANDING_R00, pag. da paleta) ---- */
  --dsln-bordo:  #5d1e33; /* cor principal da marca */
  --dsln-nude:   #ddd0c8;
  --dsln-marrom: #482e1f;
  --dsln-creme:  #f7f4e3;
  --dsln-sage:   #c4c4b8;
  --dsln-azul:   #3e778f; /* cor de acento da marca */

  /* ---- Papéis semânticos (o restante do CSS usa estes nomes) ---- */
  --cor-fundo:              var(--dsln-bordo);  /* fundo da página */
  --cor-fundo-escuro:       var(--dsln-marrom); /* modal + banda de números (como no manual: creme sobre marrom) */
  --cor-superficie:         var(--dsln-creme);  /* superfícies claras */
  --cor-texto:              var(--dsln-marrom); /* texto escuro sobre superfícies claras */
  --cor-texto-suave:        rgba(72, 46, 31, 0.75);
  --cor-texto-sobre-fundo:      var(--dsln-creme);          /* texto claro direto sobre o bordô (títulos) */
  --cor-texto-suave-sobre-fundo: rgba(247, 244, 227, 0.75); /* texto claro suave sobre o bordô (parágrafos) */
  --cor-borda:              rgba(196, 196, 184, 0.5);   /* bordas sutis em superfícies claras (sage) */
  --cor-borda-sobre-fundo:  rgba(247, 244, 227, 0.16);  /* bordas sutis direto sobre o bordô */
  --cor-destaque:           var(--dsln-azul); /* acento: botões, detalhes "__", aspas */
  --cor-realce-claro:       var(--dsln-nude); /* rótulos pequenos/foco sobre o bordô (o azul não tem
                                                 contraste suficiente para texto pequeno em fundo bordô) */
  --cor-destaque-suave:     rgba(62, 119, 143, 0.35);

  /* Tipografia da marca (com fallback de sistema caso o Google Fonts não carregue):
     - Comfortaa: sans arredondada dos títulos do manual ("nosso propósito__")
     - EB Garamond: serifada clássica do corpo de texto do manual */
  --fonte-titulo: "Comfortaa", "Trebuchet MS", "Segoe UI", sans-serif;
  --fonte-texto:  "EB Garamond", Georgia, "Times New Roman", serif;

  /* Medidas reutilizáveis */
  --raio:       18px;           /* cantos arredondados (cards, modal, portfólio) */
  --sombra:     0 10px 32px rgba(15, 3, 8, 0.35);  /* sombra sutil (repouso) */
  --sombra-hover: 0 22px 48px rgba(15, 3, 8, 0.48); /* sombra mais forte (hover/foco) */
  --transicao:       0.3s ease;  /* transição padrão (hover, botões, links) */
  --transicao-lenta: 0.6s ease;  /* transição para zoom de imagens */
  --altura-navbar: 84px;         /* usado para compensar a navbar fixa (scroll-margin-top) */
  --largura-maxima: 1200px;      /* largura máxima do conteúdo em todas as seções */
}

/* =========================================================
   RESET BÁSICO
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-texto);
  font-weight: 400; /* EB Garamond não tem peso 300; 400 já é leve */
  color: var(--cor-texto-sobre-fundo);
  line-height: 1.7;
  overflow-x: hidden;

  /* Fundo bordô + gradiente radial extremamente sutil para dar
     profundidade, sem perder a identidade de cor já definida. */
  background-color: var(--cor-fundo);
  background-image:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(circle at 100% 15%, rgba(0, 0, 0, 0.22), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.28), transparent 60%);
}

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

ul,
ol {
  list-style: none;
}

svg {
  display: block;
}

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

/* =========================================================
   UTILITÁRIOS COMPARTILHADOS
   ========================================================= */

/* Rótulo pequeno antes de todo título de seção. Minúsculas espaçadas,
   como os títulos do manual da marca; em nude, porque o azul de acento
   não tem contraste suficiente para texto pequeno sobre o bordô. */
.eyebrow {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--cor-realce-claro);
  margin-bottom: 0.9rem;
}

/* Botão de destaque (CTAs: hero e contato) */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 2.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--fonte-titulo);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase; /* como os títulos do manual */
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), color var(--transicao);
}

.botao--destaque {
  background-color: var(--cor-destaque); /* azul petróleo da marca */
  color: var(--dsln-creme);
}

.botao--destaque:hover,
.botao--destaque:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px var(--cor-destaque-suave);
}

/* Wrapper genérico de seção: cuida do respiro vertical e da largura
   máxima do conteúdo — reutilizado por todas as seções abaixo da hero. */
.secao {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  scroll-margin-top: var(--altura-navbar); /* evita que a navbar fixa "corte" o topo da seção ao rolar via âncora */
}

.secao__interno {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  /* Garante que o conteúdo fique ACIMA das marcas d'água decorativas
     (os ::before das seções, logo abaixo) */
  position: relative;
  z-index: 1;
}

/* ---- Marcas d'água com os rabiscos da marca ----
   As páginas do manual têm desenhos da cadeirinha "sangrando" nos
   cantos. Reproduzimos o recurso: cada seção marcada recebe um rabisco
   grande e bem sutil num canto, numa cor da paleta. O conteúdo fica
   acima (z-index em .secao__interno); pointer-events: none garante que
   o desenho nunca atrapalhe cliques. */
.secao--sobre,
.secao--projetos,
.secao--processo,
.secao--numeros,
.secao--depoimentos {
  position: relative;
  overflow: hidden;
}

.secao--sobre::before,
.secao--projetos::before,
.secao--processo::before,
.secao--numeros::before,
.secao--depoimentos::before {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Sobre (bordô): cadeira nude no canto inferior esquerdo */
.secao--sobre::before {
  left: clamp(-90px, -6vw, -40px);
  bottom: -70px;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 800 / 839;
  background-image: url('assets/marca/cadeira-nude.png');
  opacity: 0.08;
}

/* Projetos (banda creme): cadeira azul no canto superior direito */
.secao--projetos::before {
  right: clamp(-80px, -5vw, -30px);
  top: -50px;
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 800 / 839;
  background-image: url('assets/marca/cadeira-azul.png');
  opacity: 0.12;
}

/* Processo (banda creme): cadeira bordô espelhada no canto superior
   direito (a nude não aparece sobre o fundo claro) */
.secao--processo::before {
  right: clamp(-90px, -6vw, -40px);
  top: -60px;
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 800 / 839;
  background-image: url('assets/marca/cadeira.png');
  transform: scaleX(-1);
  opacity: 0.07;
}

/* Números (banda marrom): estampa "dddd" creme à direita */
.secao--numeros::before {
  right: -60px;
  bottom: -30px;
  width: clamp(280px, 34vw, 460px);
  aspect-ratio: 1600 / 606;
  background-image: url('assets/marca/dddd-creme.png');
  opacity: 0.07;
}

/* Depoimentos (banda nude): cadeira bordô no canto inferior direito */
.secao--depoimentos::before {
  right: clamp(-80px, -5vw, -30px);
  bottom: -60px;
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 800 / 839;
  background-image: url('assets/marca/cadeira.png');
  opacity: 0.08;
}

.secao__cabecalho {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.secao__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  margin-bottom: 1rem;
  text-transform: lowercase; /* os títulos do manual são sempre em minúsculas */
}

/* Sufixo "__" que aparece em todos os títulos do manual da marca
   ("nosso propósito__", "compromisso__" etc.) */
.secao__titulo::after {
  content: "___";
  color: var(--cor-destaque);
}

.secao__subtitulo {
  color: var(--cor-texto-suave-sobre-fundo);
  font-size: 1.15rem;
  line-height: 1.8;
}

/* ---- Bandas de cor entre as seções ----
   O manual da marca alterna os fundos das páginas entre as cores da
   paleta (creme, nude, marrom, bordô). Reproduzimos esse ritmo aqui:
   algumas seções trocam o bordô por uma cor clara da paleta, com o
   texto escuro correspondente. */

/* Banda CREME (usada em "Projetos em Destaque") */
.secao--clara {
  background-color: var(--dsln-creme);
  color: var(--cor-texto); /* títulos herdam o marrom escuro */
}

.secao--clara .secao__subtitulo {
  color: var(--cor-texto-suave);
}

/* Sobre o creme, o azul da paleta tem contraste suficiente
   até para o rótulo pequeno */
.secao--clara .eyebrow {
  color: var(--dsln-azul);
}

/* Banda NUDE (usada em "Depoimentos") */
.secao--nude {
  background-color: var(--dsln-nude);
  color: var(--cor-texto);
}

.secao--nude .secao__subtitulo {
  color: var(--cor-texto-suave);
}

.secao--nude .eyebrow {
  color: var(--dsln-marrom);
}

/* =========================================================
   NAVBAR (fixa/sticky)
   Transparente no topo da hero; ganha fundo translúcido + blur
   assim que a classe ".navbar--rolado" é ativada pelo script.js.
   ========================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao);
}

.navbar--rolado {
  background-color: rgba(51, 16, 29, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--cor-borda-sobre-fundo);
  box-shadow: 0 12px 32px rgba(10, 2, 6, 0.25);
}

.navbar__interno {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  height: var(--altura-navbar);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo oficial (assets/marca/logo-creme.png) em versão compacta na navbar */
.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
}

.navbar__links a {
  position: relative;
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: lowercase; /* coerente com os títulos do manual */
  color: var(--cor-texto-sobre-fundo);
  opacity: 0.85;
  padding-bottom: 0.25rem;
  transition: opacity var(--transicao);
}

/* Sublinhado que "cresce" da esquerda para a direita no hover/foco */
.navbar__links a:not(.navbar__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--cor-destaque);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  opacity: 1;
}

.navbar__links a:not(.navbar__cta):hover::after,
.navbar__links a:not(.navbar__cta):focus-visible::after {
  transform: scaleX(1);
}

/* Último link da navbar em destaque, no estilo de um pequeno botão */
.navbar__cta {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--cor-destaque);
  border-radius: 999px;
}

/* Botão hambúrguer — só aparece em telas estreitas (ver responsividade) */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--cor-texto-sobre-fundo);
  transition: transform var(--transicao), opacity var(--transicao);
}

.navbar__toggle--aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle--aberto span:nth-child(2) { opacity: 0; }
.navbar__toggle--aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO — primeira dobra, ocupa quase a tela inteira
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;  /* fallback para navegadores sem suporte a svh */
  min-height: 100svh; /* altura "pequena" da viewport: estável no celular (barra de URL) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  isolation: isolate; /* garante que o overlay/imagem não vazem sobre outras seções */
}

/* Fundo da hero: duas cadeirinhas da marca "sangrando" nas laterais —
   só metade de cada desenho aparece, cortado pela borda da tela (como
   os rabiscos nas bordas das páginas do manual). A da direita (azul) é
   maior e mais alta; a da esquerda (nude) é menor e mais baixa.
   O truque: a largura da cadeira ≈ 0,954 × altura; o deslocamento
   horizontal de ~metade disso esconde metade do desenho.
   Se o cliente preferir uma foto de projeto no futuro, basta trocar
   tudo por um url() único com background-size: cover. */
.hero__imagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    url('assets/marca/cadeira-azul.png'),   /* direita */
    url('assets/marca/cadeira-nude.png');   /* esquerda */
  background-repeat: no-repeat;
  background-size: auto 72vh, auto 52vh;
  background-position:
    calc(100% + 34.5vh) 80%,  /* metade para fora da borda direita */
    -25vh 85%;                /* metade para fora da borda esquerda */
}

/* No celular, uma cadeira só (a azul), menor, para não poluir a tela
   estreita */
@media (max-width: 640px) {
  .hero__imagem {
    background-image: url('assets/marca/cadeira-azul.png');
    background-size: auto 46vh;
    background-position: calc(100% + 22vh) 60%;
  }
}

/* Escurece o pattern para o logo e o texto permanecerem legíveis */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(43, 10, 22, 0.5) 0%,
    rgba(43, 10, 22, 0.66) 55%,
    rgba(28, 6, 14, 0.9) 100%);
}

.hero__conteudo {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Logo oficial em destaque na hero (como na capa do manual da marca:
   logo creme sobre fundo bordô) */
.hero__logo {
  width: min(440px, 72vw);
  height: auto;
}

/* Lema da marca em serifada espaçada, como na página do manual em que
   ele aparece ("TODO TRAÇO COMEÇA COM UMA HISTÓRIA") */
.hero__titulo {
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__texto {
  max-width: 560px;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.8;
  color: var(--cor-texto-suave-sobre-fundo);
}

/* =========================================================
   SOBRE — grid de 6 boxes interativos (conteúdo institucional)
   ========================================================= */
/* Grid em "bento" (formatos variados), no mesmo espírito do
   ".portfolio" — um box em destaque (2x2) e os demais em tamanhos
   menores. Em telas menores (ver responsividade), volta a ser um
   grid simples e uniforme. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 220px);
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f";
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.box--a { grid-area: a; } /* Nossa História — box em destaque */
.box--b { grid-area: b; } /* Missão */
.box--c { grid-area: c; } /* Visão */
.box--d { grid-area: d; } /* Valores */
.box--e { grid-area: e; } /* Nossa Equipe */
.box--f { grid-area: f; } /* Contato */

/* ----- O BOX EM SI -----
   Mesmo tratamento visual dos cards de "Projetos em Destaque" (imagem
   de fundo + legenda com gradiente na base), mas SEMPRE colorido —
   o efeito preto e branco -> cor ficou exclusivo do portfólio. No
   hover, o box só eleva (e abre o modal ao ser clicado/ativado; ver
   .conteudo-completo e script.js). */
.box {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  cursor: pointer;
  outline: none;

  /* Transição suave para hover (elevação + sombra) */
  transition: transform var(--transicao),
              box-shadow var(--transicao);
}

/* Fundos dos boxes: patterns oficiais da marca (assets/marca/), cada um
   em um colorway diferente da paleta, sempre coloridos. */
.box__imagem {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transicao-lenta);
}

/* Nossa História — cadeiras sobre creme, uma bordô destacada no centro */
.box__imagem--1 {
  background-image: url('assets/marca/cadeiras-creme.png');
}

/* Propósito — estampa de "d" bordô sobre creme */
.box__imagem--2 {
  background-image: url('assets/marca/estampa-bordo.png');
}

/* O que defendemos — estampa de "d" azul sobre creme */
.box__imagem--3 {
  background-image: url('assets/marca/estampa-azul.png');
}

/* Compromisso — estampa de "d" nude sobre marrom */
.box__imagem--4 {
  background-image: url('assets/marca/estampa-marrom.png');
}

/* As Carolinas — assinatura "design carolina" sobre nude */
.box__imagem--5 {
  background-color: var(--dsln-nude);
  background-image: url('assets/marca/carolinas.png');
  background-size: 88% auto;
  background-repeat: no-repeat;
}

/* Contato — cadeiras sobre sage, uma bordô destacada */
.box__imagem--6 {
  background-image: url('assets/marca/cadeiras-sage.png');
}

/* Legenda com gradiente na base — igual a ".portfolio__legenda" */
.box__legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(0deg, rgba(10, 2, 6, 0.9) 0%, rgba(10, 2, 6, 0) 100%);
  color: var(--cor-texto-sobre-fundo); /* sempre claro sobre o gradiente escuro */
}

/* HOVER e FOCO via teclado: eleva e aumenta levemente */
.box:hover,
.box:focus-visible {
  transform: translateY(-6px) scale(1.05);    /* eleva + aumenta levemente */
  box-shadow: var(--sombra-hover);
  /* Sem isto, o card ampliado é pintado POR BAIXO dos vizinhos
     seguintes no DOM (o transform cria stacking context e a ordem
     de pintura vira a ordem do documento), cortando a borda dele. */
  z-index: 1;
}

/* Leve zoom na imagem ao passar o mouse/focar no card (igual ao portfólio) */
.box:hover .box__imagem,
.box:focus-visible .box__imagem {
  transform: scale(1.08);
}

/* Anel de foco visível para navegação por teclado (acessibilidade) —
   em nude, que se destaca bem sobre o fundo bordô */
.box:focus-visible {
  outline: 2px solid var(--cor-realce-claro);
  outline-offset: 4px;
}

.box__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem; /* Comfortaa é mais larga; compensa com corpo menor */
  font-weight: 600;
  text-transform: lowercase;
  margin-bottom: 0.2rem;
}

.box__resumo {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--cor-texto-suave-sobre-fundo);
}

/* O box em destaque (2x2) ganha uma legenda um pouco maior,
   proporcional ao seu tamanho. */
.box--a .box__titulo {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}

.box--a .box__resumo {
  font-size: 1.1rem;
}

/* =========================================================
   MODAL (overlay + janela central)
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;                         /* cobre a tela inteira */
  background-color: rgba(15, 3, 8, 0.6); /* overlay escurecendo o fundo, no mesmo tom do site */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;

  /* Animação de entrada do overlay (fade) */
  opacity: 0;
  transition: opacity var(--transicao);
}

/* IMPORTANTE: sem esta regra, o atributo HTML "hidden" do modal é
   ignorado. "display: flex" acima é uma regra do autor (nosso CSS) e
   sempre vence a regra "[hidden] { display: none }" do navegador,
   mesmo com especificidade igual — então o overlay ficaria SEMPRE
   presente (só invisível, com opacity: 0) cobrindo a tela inteira e
   bloqueando clique/hover em tudo por baixo dele. Aumentamos a
   especificidade para garantir que, com o atributo "hidden" presente,
   o modal realmente saia do fluxo de renderização. */
.modal[hidden] {
  display: none;
}

/* Estado aberto do overlay (classe controlada pelo script.js) */
.modal.is-aberto {
  opacity: 1;
}

/* A "janelinha" central — segue a paleta da marca (fundo marrom +
   texto creme + sufixo azul no título), em vez de um popup branco
   genérico. */
.modal__janela {
  position: relative;
  background-color: var(--cor-fundo-escuro);
  color: var(--cor-texto-sobre-fundo);
  border: 1px solid var(--cor-borda-sobre-fundo);
  border-radius: var(--raio);
  box-shadow: var(--sombra-hover);
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;                 /* rola se o conteúdo for grande */
  padding: clamp(1.75rem, 4vw, 3rem);

  /* Marca d'água da cadeirinha no canto (como nas páginas do manual).
     A opacidade já vem "assada" no PNG (cadeira-creme-suave), porque
     background-image não tem controle de opacity em CSS. */
  background-image: url('assets/marca/cadeira-creme-suave.png');
  background-repeat: no-repeat;
  background-position: right -40px bottom -50px;
  background-size: 200px auto;

  /* Animação de zoom a partir do centro */
  transform: scale(0.92);
  transition: transform var(--transicao);
}

.modal.is-aberto .modal__janela {
  transform: scale(1);
}

.modal__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 600;
  text-transform: lowercase; /* como os títulos do manual */
  margin-bottom: 1rem;
  padding-right: 2.5rem;            /* espaço para não colidir com o "X" */
  border-bottom: 1px solid var(--cor-borda-sobre-fundo);
  padding-bottom: 0.75rem;
}

/* Mesmo sufixo "__" dos títulos de seção */
.modal__titulo::after {
  content: "___";
  color: var(--cor-destaque);
}

.modal__corpo p {
  margin-bottom: 1rem;
  color: var(--cor-texto-suave-sobre-fundo);
  font-size: 1.08rem;
  line-height: 1.75;
}

.modal__corpo ul {
  list-style: disc;
  margin: 0 0 1rem 1.25rem;
  color: var(--cor-texto-suave-sobre-fundo);
}

.modal__corpo li {
  margin-bottom: 0.4rem;
}

.modal__corpo strong {
  color: var(--cor-texto-sobre-fundo);
  font-weight: 600;
}

/* Galeria de fotos usada no modal dos cards de "Projetos em Destaque"
   (ver <template class="conteudo-completo"> de cada ".portfolio__item"). */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Cada foto da galeria é um <button> (clicável e acessível por
   teclado) que abre a foto ampliada no lightbox. */
.galeria__item {
  padding: 0;
  border: none;
  background: none;
  border-radius: calc(var(--raio) / 2);
  cursor: zoom-in;
  transition: transform var(--transicao);
}

.galeria__item:hover {
  transform: scale(1.02);
}

.galeria__item:focus-visible {
  outline: 2px solid var(--cor-realce-claro);
  outline-offset: 3px;
}

.galeria__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--raio) / 2);
}

.galeria__legenda {
  color: var(--cor-texto-suave-sobre-fundo);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* Botão de fechar (X) */
.modal__fechar {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cor-texto-suave-sobre-fundo);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}

.modal__fechar:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--cor-texto-sobre-fundo);
}

/* Foco via teclado ganha um anel visível (acessibilidade) */
.modal__fechar:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--cor-texto-sobre-fundo);
  outline: 2px solid var(--cor-realce-claro);
  outline-offset: 2px;
}

/* Trava o scroll do fundo quando o modal está aberto
   (classe aplicada ao <body> pelo script.js). */
body.sem-scroll {
  overflow: hidden;
}

/* =========================================================
   LIGHTBOX — foto da galeria ampliada, por cima do modal
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100; /* acima do modal (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: rgba(15, 3, 8, 0.88); /* mais escuro que o modal, para a foto saltar */

  opacity: 0;
  transition: opacity var(--transicao);
}

/* Mesmo motivo da regra .modal[hidden]: o display acima venceria o
   atributo "hidden" do navegador e o lightbox bloquearia a tela. */
.lightbox[hidden] {
  display: none;
}

.lightbox.is-aberto {
  opacity: 1;
}

.lightbox__quadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 0; /* permite a foto encolher dentro do flex */
}

.lightbox__foto {
  max-width: min(1000px, 88vw);
  max-height: 82vh;
  border-radius: var(--raio);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);

  /* Zoom suave de entrada, como a janela do modal */
  transform: scale(0.95);
  transition: transform var(--transicao);
}

.lightbox.is-aberto .lightbox__foto {
  transform: scale(1);
}

/* Contador "2 / 4" abaixo da foto */
.lightbox__contador {
  font-family: var(--fonte-titulo);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave-sobre-fundo);
}

.lightbox__fechar {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--cor-texto-sobre-fundo);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transicao);
}

.lightbox__seta {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 0.2rem; /* centraliza opticamente o glifo ‹ › */
  color: var(--cor-texto-sobre-fundo);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transicao);
}

.lightbox__fechar:hover,
.lightbox__seta:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.lightbox__fechar:focus-visible,
.lightbox__seta:focus-visible {
  outline: 2px solid var(--cor-realce-claro);
  outline-offset: 2px;
}

/* =========================================================
   PROJETOS EM DESTAQUE — portfólio em grade assimétrica (bento)
   ========================================================= */
.portfolio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 280px);
  grid-template-areas:
    "a a b c"
    "a a d d";
  gap: clamp(1rem, 2vw, 1.5rem);
}

.portfolio__item--a { grid-area: a; }
.portfolio__item--b { grid-area: b; }
.portfolio__item--c { grid-area: c; }
.portfolio__item--d { grid-area: d; }

/* Cards do portfólio: preto e branco em repouso, ganham cor + elevação
   no hover/foco (efeito exclusivo desta seção) e abrem o modal com a
   galeria de fotos ao serem clicados ou ativados via teclado (ver
   .conteudo-completo e configurarModal() em script.js). */
.portfolio__item {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  cursor: pointer;
  outline: none;

  /* ESTADO PADRÃO: preto e branco */
  filter: grayscale(1);

  transition: transform var(--transicao),
              filter var(--transicao),
              box-shadow var(--transicao);
}

.portfolio__item:hover,
.portfolio__item:focus-visible {
  filter: grayscale(0);                       /* volta a ter cor */
  transform: translateY(-6px);                /* leve elevação */
  box-shadow: var(--sombra-hover);
  z-index: 1; /* pinta por cima dos vizinhos (mesmo motivo do .box) */
}

.portfolio__item:focus-visible {
  outline: 2px solid var(--cor-realce-claro);
  outline-offset: 4px;
}

/* TESTE: fotos genéricas (assets/projeto-N.jpg, via Picsum Photos) só
   para visualizar o layout com imagens reais. TROCAR cada uma pela foto
   real do respectivo projeto — o gradiente por cima é só um véu nos
   tons oficiais da paleta para as fotos aleatórias não destoarem da
   identidade visual (pode ser removido quando as fotos forem reais). */
.portfolio__imagem {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--transicao-lenta);
}

.portfolio__imagem--1 {
  background-image:
    linear-gradient(135deg, rgba(93, 30, 51, 0.5), rgba(43, 10, 20, 0.6)),
    url('assets/projeto-1.jpg');
}

.portfolio__imagem--2 {
  background-image:
    linear-gradient(135deg, rgba(72, 46, 31, 0.5), rgba(30, 17, 9, 0.6)),
    url('assets/projeto-2.jpg');
}

.portfolio__imagem--3 {
  background-image:
    linear-gradient(135deg, rgba(62, 119, 143, 0.45), rgba(24, 50, 62, 0.6)),
    url('assets/projeto-3.jpg');
}

.portfolio__imagem--4 {
  background-image:
    linear-gradient(135deg, rgba(196, 196, 184, 0.35), rgba(93, 30, 51, 0.6)),
    url('assets/projeto-4.jpg');
}

/* Leve zoom na imagem ao passar o mouse/focar no card.
   Usamos :focus-visible (e não :focus-within) para casar com a regra
   de cor acima — senão, após um clique de mouse o card mantinha o foco
   e ficava num estado residual estranho: imagem ampliada, porém ainda
   em preto e branco. */
.portfolio__item:hover .portfolio__imagem,
.portfolio__item:focus-visible .portfolio__imagem {
  transform: scale(1.08);
}

.portfolio__legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(0deg, rgba(10, 2, 6, 0.85) 0%, rgba(10, 2, 6, 0) 100%);
  /* Cor explícita: a legenda fica sobre um gradiente escuro, mas a
     seção usa a banda creme (texto marrom) — sem isto, o título do
     projeto herdaria o marrom e sumiria sobre o gradiente. */
  color: var(--cor-texto-sobre-fundo);
}

.portfolio__legenda h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: lowercase;
  margin-bottom: 0.2rem;
}

.portfolio__legenda p {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--cor-texto-suave-sobre-fundo);
}

/* =========================================================
   SERVIÇOS
   ========================================================= */
.servicos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.servico {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--cor-borda-sobre-fundo);
  border-radius: var(--raio);
  background-color: rgba(255, 255, 255, 0.03);
  transition: transform var(--transicao), border-color var(--transicao),
              background-color var(--transicao), box-shadow var(--transicao);
}

.servico:hover {
  transform: translateY(-6px);
  border-color: rgba(62, 119, 143, 0.65); /* azul da paleta no hover */
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: var(--sombra);
}

.servico__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  /* nude, como os rabiscos claros do manual sobre fundos escuros
     (o azul não tem contraste suficiente sobre o bordô) */
  border: 1px solid var(--cor-realce-claro);
  color: var(--cor-realce-claro);
}

.servico__icone svg {
  width: 22px;
  height: 22px;
}

.servico h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: lowercase;
  margin-bottom: 0.6rem;
}

.servico p {
  color: var(--cor-texto-suave-sobre-fundo);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* =========================================================
   NOSSO PROCESSO
   ========================================================= */
.processo__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

.processo__etapa {
  padding-top: 1.5rem;
  border-top: 2px solid var(--cor-borda-sobre-fundo);
}

/* Cada etapa recebe uma cor da paleta na linha superior (vira a linha
   lateral no mobile) — um toque de cor discreto, no ritmo do manual. */
.processo__etapa:nth-child(1) { border-color: var(--dsln-nude); }
.processo__etapa:nth-child(2) { border-color: var(--dsln-sage); }
.processo__etapa:nth-child(3) { border-color: var(--dsln-azul); }
.processo__etapa:nth-child(4) { border-color: var(--dsln-creme); }

/* ---- Processo dentro da banda creme (.secao--clara) ----
   Ajusta os tons que foram pensados para o fundo bordô e sumiriam
   sobre o fundo claro. */
.secao--clara .processo__numero {
  color: var(--dsln-azul); /* números grandes: o azul funciona sobre creme */
}

.secao--clara .processo__etapa p {
  color: var(--cor-texto-suave); /* marrom suave no lugar do creme translúcido */
}

/* Bordas nude/creme não aparecem sobre o creme: remapeia as duas */
.secao--clara .processo__etapa:nth-child(1) { border-color: var(--dsln-bordo); }
.secao--clara .processo__etapa:nth-child(4) { border-color: var(--dsln-marrom); }

.processo__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 600;
  color: var(--cor-realce-claro); /* nude: legível sobre o bordô */
  margin-bottom: 0.75rem;
}

.processo__etapa h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: lowercase;
  margin-bottom: 0.5rem;
}

.processo__etapa p {
  color: var(--cor-texto-suave-sobre-fundo);
  font-size: 1rem;
  line-height: 1.7;
}

/* =========================================================
   NÚMEROS — contadores animados ao entrar na tela
   (ver iniciarContador() em script.js)
   ========================================================= */
/* Banda em marrom sólido, como as páginas do manual em que o texto
   creme aparece sobre o marrom da paleta */
.secao--numeros {
  background-color: var(--dsln-marrom);
  border-block: 1px solid var(--cor-borda-sobre-fundo);
}

.numeros__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  color: var(--cor-texto-sobre-fundo);
}

.numero__rotulo {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--cor-texto-suave-sobre-fundo);
}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.depoimento {
  position: relative;
  padding-top: 2.25rem;
}

/* Aspas grandes decorativas (caractere tipográfico, sem uso de imagens) */
.depoimento::before {
  content: "\201C";
  position: absolute;
  top: -0.75rem;
  left: 0;
  font-family: var(--fonte-titulo);
  font-size: 4rem;
  line-height: 1;
  color: var(--cor-destaque);
  opacity: 0.55;
}

.depoimento__texto {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.depoimento__autor {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda-sobre-fundo);
}

.depoimento__nome {
  font-weight: 600;
  font-size: 0.95rem;
}

.depoimento__cargo {
  font-size: 0.85rem;
  color: var(--cor-texto-suave-sobre-fundo);
}

/* Ajustes dos depoimentos quando a seção usa a banda nude: os tons
   creme-translúcidos acima sumiriam sobre o fundo claro. */
.secao--nude .depoimento__cargo {
  color: var(--cor-texto-suave);
}

.secao--nude .depoimento__autor {
  border-top-color: rgba(72, 46, 31, 0.25);
}

/* =========================================================
   CONTATO — seção completa
   ========================================================= */
.contato__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}

.contato__lista {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.contato__lista li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contato__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--cor-realce-claro);
  color: var(--cor-realce-claro);
}

.contato__icone svg {
  width: 20px;
  height: 20px;
}

.contato__rotulo {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave-sobre-fundo);
  margin-bottom: 0.25rem;
}

.contato__lista a,
.contato__texto {
  font-size: 1.05rem;
  color: var(--cor-texto-sobre-fundo);
}

.contato__lista a {
  transition: color var(--transicao);
}

.contato__lista a:hover,
.contato__lista a:focus-visible {
  color: var(--cor-realce-claro); /* nude: mantém contraste sobre o bordô */
}

/* Cartão-link do Instagram (a empresa não tem escritório fixo, então
   ele ocupa o lugar que seria do mapa). Pattern oficial das cadeiras
   sobre sage com um véu claro; o cartão inteiro é clicável e leva ao
   perfil @desalina___. */
.contato__instagram {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem;
  border-radius: var(--raio);
  border: 1px solid rgba(72, 46, 31, 0.25);
  background-image:
    linear-gradient(rgba(196, 196, 184, 0.78), rgba(196, 196, 184, 0.78)),
    url('assets/marca/cadeiras-sage.png');
  background-size: cover;
  background-position: center;
  color: var(--cor-texto); /* marrom sobre o fundo claro */
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}

.contato__instagram:hover,
.contato__instagram:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: rgba(62, 119, 143, 0.6); /* azul da paleta */
}

/* Foco via teclado ganha um anel visível (acessibilidade) */
.contato__instagram:focus-visible {
  outline: 2px solid var(--dsln-azul);
  outline-offset: 4px;
}

.contato__instagram-icone {
  display: inline-flex;
  color: var(--dsln-bordo);
}

.contato__instagram-icone svg {
  width: 44px;
  height: 44px;
}

.contato__instagram-arroba {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 600;
}

.contato__instagram-texto {
  max-width: 300px;
  font-size: 1rem;
  color: var(--cor-texto-suave);
}

/* Pequeno botão-pílula, no mesmo estilo dos CTAs do site */
.contato__instagram-cta {
  margin-top: 0.5rem;
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  background-color: var(--dsln-azul);
  color: var(--dsln-creme);
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  border-top: 1px solid var(--cor-borda-sobre-fundo);
  padding-block: 2.5rem;
}

.rodape__interno {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave-sobre-fundo);
}

.rodape__logo img {
  height: 26px;
  width: auto;
  display: block;
}

.rodape__topo {
  transition: color var(--transicao);
}

.rodape__topo:hover,
.rodape__topo:focus-visible {
  color: var(--cor-realce-claro);
}

/* =========================================================
   MICROINTERAÇÕES — animação de entrada ao rolar a página
   (classe "reveal" observada via IntersectionObserver no script.js;
   "reveal--visivel" é adicionada quando o elemento entra na tela)
   ========================================================= */
/* O estado "escondido" só vale quando o <html> tem a classe "js"
   (adicionada por um mini-script no <head> do index.html). Sem
   JavaScript, nada é escondido e a página inteira permanece visível
   — a animação é um extra, nunca uma condição para ver o conteúdo. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .reveal--visivel {
  opacity: 1;
  transform: none;
}

/* Entrada sequencial (stagger) dos itens dentro de grids/listas */
.grid .reveal:nth-child(1),
.servicos__grid .reveal:nth-child(1),
.portfolio .reveal:nth-child(1),
.processo__lista .reveal:nth-child(1),
.numeros__grid .reveal:nth-child(1),
.depoimentos__grid .reveal:nth-child(1) { transition-delay: 0s; }

.grid .reveal:nth-child(2),
.servicos__grid .reveal:nth-child(2),
.portfolio .reveal:nth-child(2),
.processo__lista .reveal:nth-child(2),
.numeros__grid .reveal:nth-child(2),
.depoimentos__grid .reveal:nth-child(2) { transition-delay: 0.08s; }

.grid .reveal:nth-child(3),
.servicos__grid .reveal:nth-child(3),
.portfolio .reveal:nth-child(3),
.processo__lista .reveal:nth-child(3),
.numeros__grid .reveal:nth-child(3),
.depoimentos__grid .reveal:nth-child(3) { transition-delay: 0.16s; }

.grid .reveal:nth-child(4),
.servicos__grid .reveal:nth-child(4),
.portfolio .reveal:nth-child(4),
.processo__lista .reveal:nth-child(4),
.numeros__grid .reveal:nth-child(4) { transition-delay: 0.24s; }

.grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.grid .reveal:nth-child(6) { transition-delay: 0.4s; }

/* Entrada sequencial do texto da hero (rótulo -> título -> texto -> CTA) */
.hero__conteudo .reveal:nth-child(1) { transition-delay: 0s; }
.hero__conteudo .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero__conteudo .reveal:nth-child(3) { transition-delay: 0.3s; }
.hero__conteudo .reveal:nth-child(4) { transition-delay: 0.45s; }

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

/* Telas médias: reorganiza grids de 4 colunas para 2 */
@media (max-width: 1000px) {
  .servicos__grid { grid-template-columns: repeat(2, 1fr); }
  .processo__lista { grid-template-columns: repeat(2, 1fr); }
  .depoimentos__grid { grid-template-columns: repeat(2, 1fr); }
  .numeros__grid { grid-template-columns: repeat(2, 1fr); }

  .portfolio {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 240px);
    grid-template-areas:
      "a a"
      "b c"
      "d d";
  }
}

/* Tablet: o "bento" do grid institucional não cabe bem em 2 colunas —
   volta a ser um grid simples e uniforme, com todos os boxes no
   mesmo formato (a proporção 4:3 substitui as áreas nomeadas). */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
  }

  .box {
    aspect-ratio: 4 / 3;
  }

  .box--a,
  .box--b,
  .box--c,
  .box--d,
  .box--e,
  .box--f {
    grid-area: auto;
  }

  .box--a .box__titulo { font-size: 1.05rem; }
  .box--a .box__resumo { font-size: 0.98rem; }
}

/* Menu mobile: some a navegação inline, aparece o hambúrguer */
@media (max-width: 860px) {
  .navbar__toggle {
    display: flex;
  }

  .navbar__nav {
    position: fixed;
    top: var(--altura-navbar);
    left: 0;
    right: 0;
    background-color: rgba(51, 16, 29, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cor-borda-sobre-fundo);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }

  .navbar__nav--aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem clamp(1.5rem, 4vw, 3rem) 2rem;
  }

  .navbar__cta {
    align-self: flex-start;
  }

  .contato__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: 1 coluna nos grids principais */
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .servicos__grid { grid-template-columns: 1fr; }
  .processo__lista { grid-template-columns: 1fr; }
  .depoimentos__grid { grid-template-columns: 1fr; }
  .numeros__grid { grid-template-columns: repeat(2, 1fr); }

  .portfolio {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 220px);
    grid-template-areas:
      "a"
      "b"
      "c"
      "d";
  }

  /* Em coluna única, a linha do topo de cada etapa vira uma linha à
     esquerda, lembrando uma linha do tempo vertical. */
  .processo__etapa {
    border-top: none;
    border-left: 2px solid var(--cor-borda-sobre-fundo);
    padding-top: 0;
    padding-left: 1.25rem;
  }

  .rodape__interno {
    flex-direction: column;
    text-align: center;
  }
}

/* Respeita usuários que preferem menos animação (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}