/* =====================================================================
   Cognatus — site institucional (demonstração)

   Paleta: o verde-oliva da marca digital deles (#656A3C) e o cobre da
   placa do escritório. O creme é o papel; o oliva profundo, as seções
   escuras. A parede cáqui da placa aparece só na abertura.

   Movimento: texto nunca desliza — ele se materializa da esquerda para a
   direita (máscara que varre + desfoque que some). Imagens e cartões
   podem subir de leve.
   ===================================================================== */

:root {
  color-scheme: light;

  --oliva-funda:  hsl(66 30% 10%);
  --oliva-escura: hsl(66 28% 15%);
  --oliva-media:  hsl(67 27% 24%);
  --oliva:        hsl(67 28% 33%);
  --oliva-luz:    hsl(67 26% 42%);
  --oliva-clara:  hsl(68 24% 72%);

  --parede:       hsl(47 14% 50%);

  --papel:   hsl(46 30% 94%);
  --papel-2: hsl(46 24% 89%);
  --papel-3: hsl(46 18% 82%);

  --cobre:        hsl(24 38% 58%);
  --cobre-luz:    hsl(28 50% 76%);
  --cobre-sombra: hsl(22 34% 38%);
  --cobre-texto:  hsl(22 38% 36%);

  --tinta:   hsl(60 14% 10%);
  --tinta-2: hsl(55 8% 34%);

  --mola:    cubic-bezier(.32, .72, 0, 1);
  --saida:   cubic-bezier(.16, 1, .3, 1);
  --materia: cubic-bezier(.45, .05, .2, 1);

  --gut:   clamp(20px, 5vw, 72px);
  --maxw:  1320px;
  --r:     2rem;
  --secao: clamp(96px, 11vw, 176px);

  --f-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-texto:  "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-marca:  "Lexend Giga", "Geist", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-weight: 350;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--oliva); color: var(--papel); }
[hidden] { display: none !important; }

/* textura de reboco: fixa, fora do fluxo, nunca em container que rola */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pular-conteudo {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 80;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .5s var(--mola);
}
.pular-conteudo:focus { transform: none; }

/* =====================================================================
   ABERTURA
   ===================================================================== */

.intro { display: none; }

/* .rodando mantém a parede na tela mesmo depois que a rolagem e a
   navegação já foram liberadas, no fim do zoom */
.intro-ativa .intro,
.intro.rodando {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
  touch-action: none;          /* automática: arrastar o dedo não rola nada */
}

html.intro-ativa,
html.intro-ativa body { overflow: hidden; }

.intro-svg { width: 100%; height: 100%; }

.i-tag {
  font-family: var(--f-marca);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 2.4px;
}

.intro-pular {
  position: absolute;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  font: 500 12px/1 var(--f-texto);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(46 30% 94% / .82);
  background: hsl(47 16% 18% / .28);
  border: 1px solid hsl(46 30% 94% / .16);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .5s var(--mola);
}
.intro-pular:hover { background: hsl(47 16% 18% / .45); }
.intro-pular:focus-visible { outline: 2px solid var(--cobre-luz); outline-offset: 3px; }

/* =====================================================================
   ILHA DE NAVEGAÇÃO
   ===================================================================== */

.ilha {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  background: hsl(46 30% 96% / .76);
  border: 1px solid hsl(60 30% 20% / .08);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .65),
    0 22px 50px -24px hsl(66 30% 8% / .45);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transform: translateX(-50%);
  transition: opacity .9s var(--mola), transform .9s var(--mola);
}

.intro-ativa .ilha {
  opacity: 0;
  transform: translate(-50%, -28px);
}

.ilha-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--oliva);
  text-decoration: none;
}
.lg-marca   { width: 23px; height: 22px; }
.lg-palavra { width: 92px; height: 11px; }

.ilha-links { display: flex; gap: clamp(16px, 2vw, 28px); }

.ilha-links a {
  position: relative;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--tinta-2);
  text-decoration: none;
  padding: 6px 0;
  transition: color .5s var(--mola);
}
.ilha-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 1px;
  background: var(--cobre);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--mola);
}
.ilha-links a:hover,
.ilha-links a[aria-current="page"] { color: var(--tinta); }
.ilha-links a:hover::after,
.ilha-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.ilha-menu { display: none; }

/* =====================================================================
   BOTÕES — pílula com o ícone aninhado
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 22px;
  border: 0;
  border-radius: 999px;
  font: 500 14.5px/1 var(--f-texto);
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .5s var(--mola), background .6s var(--mola), color .6s var(--mola);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }

.btn-escuro { background: var(--tinta); color: var(--papel); }
.btn-escuro:hover { background: var(--oliva-escura); }

.btn-claro { background: var(--papel); color: var(--tinta); }
.btn-claro:hover { background: #fff; }
.btn-claro .btn-ico { background: hsl(60 14% 10% / .08); }

.btn-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: hsl(46 30% 94% / .12);
  transition: transform .6s var(--mola), background .6s var(--mola), color .6s var(--mola);
}
.btn-ico svg { width: 14px; height: 14px; }
.btn:hover .btn-ico {
  transform: translate(2px, -2px) scale(1.06);
  background: var(--cobre);
  color: var(--papel);
}

.ilha-cta { padding: 6px 6px 6px 18px; font-size: 13.5px; }
.ilha-cta .btn-ico { width: 30px; height: 30px; }

.link-linha {
  position: relative;
  display: inline-block;
  font-size: 14.5px;
  font-weight: 450;
  color: var(--tinta);
  text-decoration: none;
  padding-bottom: 4px;
}
.link-linha::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .3;
  transition: opacity .5s, background .5s;
}
.link-linha:hover::after,
a:hover .link-linha::after { opacity: 1; background: var(--cobre); }
.link-claro { color: var(--papel); }
.link-claro:hover::after { background: var(--cobre-luz); }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 38px;
}
.acoes-centro { justify-content: center; }

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 6px 13px;
  border-radius: 999px;
  font: 500 10.5px/1.2 var(--f-texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cobre-texto);
  background: hsl(24 38% 58% / .08);
  border: 1px solid hsl(24 38% 45% / .22);
  white-space: nowrap;
}
.selo::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.selo-claro {
  color: var(--cobre-luz);
  background: hsl(28 50% 76% / .08);
  border-color: hsl(28 50% 76% / .24);
}

.display {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(3.1rem, 7.2vw, 7.2rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 144;
}

/* os títulos ganham um respiro embaixo para a máscara não cortar as
   descendentes (g, ç, p) — e devolvem o respiro na margem */
.titulo {
  margin: 0 0 calc(26px - .14em);
  padding-bottom: .14em;
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.titulo-pagina {
  margin: 0 0 calc(30px - .14em);
  padding-bottom: .14em;
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(2.8rem, 6.4vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.034em;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  max-width: 16ch;
}

.display em, .titulo em, .titulo-pagina em {
  font-style: italic;
  font-weight: 300;
  color: var(--cobre-texto);
  padding-right: .06em;
}
.titulo-claro { color: var(--papel); }
.titulo-claro em { color: var(--cobre-luz); }

p { margin: 0 0 18px; max-width: 60ch; }

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  color: var(--tinta-2);
  max-width: 50ch;
}

/* =====================================================================
   ENTRADAS — o repouso é visível sem JS e com movimento reduzido
   ===================================================================== */

/* texto: materializa da esquerda para a direita, sem sair do lugar */
.js:not(.reduz) .mt,
.js:not(.reduz) .hero-mt {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  filter: blur(8px);
  transition:
    -webkit-mask-position 1.5s var(--materia),
    mask-position 1.5s var(--materia),
    filter 1.3s var(--saida);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.js:not(.reduz) .mt.in,
.js:not(.reduz) .hero-mt.in {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  filter: none;
}

/* blocos de texto corrido: só surgem, sem deslizar */
.js:not(.reduz) .rv {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.1s var(--saida), filter 1.1s var(--saida), transform 1.2s var(--saida);
  transition-delay: calc(var(--d, 0) * 90ms);
}
/* imagens e cartões: também sobem um pouco */
.js:not(.reduz) .rv.sobe { transform: translateY(40px); }
.js:not(.reduz) .rv.in { opacity: 1; filter: none; transform: none; }

/* =====================================================================
   HERO DO INÍCIO — os sócios no verde-oliva
   ===================================================================== */

.hero-oliva {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(118px, 15vh, 160px) var(--gut) clamp(100px, 13vh, 130px);
  color: var(--papel);
  background: linear-gradient(100deg, hsl(66 30% 10%) 0%, hsl(66 29% 14%) 42%, hsl(67 28% 19%) 100%);
  overflow: hidden;
}

.hero-socios {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  height: min(92%, 980px);
  aspect-ratio: 615 / 903;
  margin: 0;
}
/* a luz do estúdio acompanha a foto. O fundo da foto é um oliva uniforme,
   hsl(67 27% 40%) — a mesma cor do miolo deste brilho —, então as bordas
   da foto somem nele */
.hero-socios::before {
  content: "";
  position: absolute;
  inset: -30% -48% -40% -48%;
  z-index: -1;
  background: radial-gradient(closest-side,
    hsl(67 27% 40%) 0%, hsl(67 27% 40%) 62%,
    hsl(67 27% 33%) 80%, hsl(67 28% 24% / .5) 92%, hsl(67 28% 20% / 0) 100%);
}
.hero-socios img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%);
          mask-composite: intersect;
}

.hero-txt {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}
.hero-txt > * { max-width: min(640px, 50vw); }

.hero-titulo {
  font-size: clamp(2.8rem, min(6.4vw, 11vh), 6.8rem);
  color: var(--papel);
}
.hero-titulo em { color: var(--cobre-luz); }
.hero-titulo .hl {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0 .12em .16em 0;
  margin-bottom: -.16em;
}

.hero-lead {
  margin: 30px 0 0;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: hsl(46 30% 94% / .78);
  max-width: 38ch;
}

.hero-rodape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 4vh, 40px);
  width: calc(100% - 2 * var(--gut));
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 36px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(46 30% 94% / .5);
}
.rola { display: inline-flex; align-items: center; gap: 12px; }
.rola::after {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: rola 2.6s var(--materia) infinite;
}
@keyframes rola {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* =====================================================================
   ESTRUTURA DAS SEÇÕES
   ===================================================================== */

.miolo { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.secao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.secao-topo .titulo { margin-bottom: 0; max-width: 20ch; }
.secao-topo > .btn, .secao-topo > .link-linha { margin-bottom: 10px; }

/* A COGNATUS — a frase acende com a leitura */
.apresenta { padding-block: var(--secao); }
.apresenta-grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px clamp(40px, 6vw, 110px);
  align-items: end;
}
.nome-latim {
  margin: 0 0 18px;
  padding-bottom: .1em;
  font-size: 14px;
  color: var(--tinta-2);
}
.nome-latim span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--oliva);
  font-variation-settings: "opsz" 144;
}
.manifesto-txt {
  margin: 0;
  max-width: 24ch;
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(2rem, 3.9vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-variation-settings: "opsz" 144;
}
.apresenta-lado p { color: var(--tinta-2); }
.pilares-mini {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 30px;
  padding: 0;
}
.pilares-mini li {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid hsl(67 28% 33% / .3);
  color: var(--oliva);
  font-size: 13.5px;
  font-weight: 500;
}

/* =====================================================================
   PROJETOS — cartões com moldura dupla
   ===================================================================== */

.destaques { padding-block: var(--secao); background: var(--papel-2); }
.grupo + .grupo { margin-top: clamp(56px, 7vw, 96px); }
.grupo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid hsl(60 20% 20% / .12);
}
.grupo-titulo {
  margin: 0;
  padding-bottom: .1em;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  letter-spacing: -.015em;
}
.grupo-titulo span {
  margin-right: 10px;
  font-style: italic;
  font-weight: 300;
  color: var(--cobre);
}

.bento { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.bento-2 { grid-template-columns: 1.45fr 1fr; }
.bento-3 { grid-template-columns: 1.45fr 1fr 1fr; }
.bento .card-img { aspect-ratio: auto; height: clamp(380px, 40vw, 580px); }

.card-proj {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: var(--r);
  background: hsl(60 20% 20% / .05);
  border: 1px solid hsl(60 20% 20% / .08);
  color: var(--papel);
  text-decoration: none;
}
.card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--r) - 6px);
  overflow: hidden;
  background: var(--papel-3);        /* enquanto a foto chega: papel, não um bloco verde */
  box-shadow: inset 0 1px 1px hsl(0 0% 100% / .12);
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--mola);
}
.card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(66 30% 7% / .86) 0%, hsl(66 30% 7% / .3) 34%, hsl(66 30% 7% / 0) 58%);
  pointer-events: none;
}
.card-proj:hover .card-img img { transform: scale(1.05); }
.card-proj:focus-visible { outline: 2px solid var(--cobre); outline-offset: 4px; }

.card-info {
  position: absolute;
  left: 28px;
  right: 84px;
  bottom: 26px;
  z-index: 1;
}
.card-sit {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel);
  background: hsl(46 30% 94% / .14);
  border: 1px solid hsl(46 30% 94% / .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card-nome {
  margin: 0 0 4px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.card-grande .card-nome { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.card-tipo { margin: 0; font-size: 13.5px; color: hsl(46 30% 94% / .7); }
.card-seta {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: hsl(46 30% 94% / .14);
  border: 1px solid hsl(46 30% 94% / .22);
  transition: transform .8s var(--mola), background .6s var(--mola);
}
.card-seta svg { width: 16px; height: 16px; }
.card-proj:hover .card-seta { transform: rotate(45deg); background: var(--cobre); border-color: var(--cobre); }

/* =====================================================================
   CASA PETRA
   ===================================================================== */

.petra {
  padding-block: var(--secao);
  background:
    radial-gradient(70% 90% at 85% 40%, hsl(67 26% 20%) 0%, transparent 70%),
    var(--oliva-funda);
  color: var(--papel);
  overflow: hidden;
}
.petra-grade {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.petra-nome {
  margin-bottom: calc(22px - .14em);
  font-size: clamp(3.6rem, 8.4vw, 8.4rem);
  line-height: .9;
  letter-spacing: -.045em;
}
.petra-txt > p { color: hsl(46 30% 94% / .74); }
.petra-nota { margin-top: 30px; font-size: 12.5px; color: hsl(46 30% 94% / .45) !important; }

.petra-imgs { position: relative; aspect-ratio: 1.02; }
.petra-imgs figure {
  position: absolute;
  margin: 0;
  padding: 6px;
  border-radius: var(--r);
  background: hsl(46 30% 94% / .06);
  border: 1px solid hsl(46 30% 94% / .1);
  box-shadow: 0 50px 90px -45px hsl(66 40% 2% / .8);
}
.petra-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r) - 6px);
}
.petra-a { right: 0; top: 0; width: 56%; aspect-ratio: 3 / 4; }
.petra-b { left: 0; bottom: 0; width: 41%; aspect-ratio: 3 / 4; }
.petra-c { left: 12%; top: 0; width: 29%; aspect-ratio: 3 / 4; }

/* =====================================================================
   O QUE FAZEMOS — resumo no Início
   ===================================================================== */

.frentes { padding-block: var(--secao); }
.frentes-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}
.frente-card {
  display: block;
  text-decoration: none;
  transition: transform .9s var(--mola);
}
.frente-card:hover { transform: translateY(-4px); }
.frente-card .nucleo { padding: clamp(22px, 3vw, 44px); }
.frente-card-txt { padding: 28px 8px 0; }
.frente-n {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--cobre);
}
.frente-card h3 {
  margin: 6px 0 10px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -.02em;
}
.frente-card p { color: var(--tinta-2); }

/* =====================================================================
   MOLDURA DUPLA — casca externa + núcleo, raios concêntricos
   ===================================================================== */

.casca {
  padding: 8px;
  border-radius: var(--r);
  background: hsl(60 20% 20% / .045);
  border: 1px solid hsl(60 20% 20% / .07);
}
.casca > .nucleo {
  position: relative;
  border-radius: calc(var(--r) - 8px);
  background: var(--papel);
  box-shadow:
    inset 0 1px 1px hsl(0 0% 100% / .75),
    0 1px 2px hsl(60 30% 10% / .05);
  overflow: hidden;
}
.casca-escura {
  background: hsl(66 30% 10% / .07);
  border-color: hsl(66 30% 10% / .1);
}
.casca-escura > .nucleo {
  background: var(--oliva-escura);
  box-shadow: inset 0 1px 1px hsl(68 40% 90% / .09);
}

/* desenhos que se traçam com a rolagem */
.traco { width: 100%; height: auto; overflow: visible; }
.traco path { fill: none; stroke: var(--cobre); stroke-linecap: butt; stroke-linejoin: miter; }
.traco .fino path { stroke: var(--cobre-luz); }
.traco .moveis path, .traco .cota path { stroke: hsl(28 40% 70% / .7); }
.traco .eixo path { stroke: hsl(28 45% 75% / .45); stroke-dasharray: 6 4; }
.traco text {
  fill: var(--cobre-luz);
  font-family: var(--f-texto);
  font-size: 9px;
  font-weight: 450;
}
.traco .rotulo { font-size: 6.5px; letter-spacing: 1.5px; }

.legenda {
  margin: 14px 0 0;
  padding-left: 10px;
  font-size: 12px;
  color: var(--tinta-2);
}

/* =====================================================================
   CHAMADA — o logo se desenha de novo
   ===================================================================== */

.chamada {
  padding-block: var(--secao);
  text-align: center;
  color: var(--papel);
  background:
    radial-gradient(80% 70% at 50% 0%, hsl(67 26% 30%) 0%, transparent 70%),
    var(--oliva-escura);
}
.chamada .titulo { margin-inline: auto; max-width: 18ch; }
.chamada p { margin-inline: auto; color: hsl(46 30% 94% / .74); }

.contato-logo {
  width: min(360px, 72vw);
  height: auto;
  margin: 0 auto clamp(40px, 5vw, 64px);
  overflow: visible;
  filter: drop-shadow(.5px 1.2px .8px hsl(66 40% 4% / .5));
}
.contato-tag {
  font-family: var(--f-marca);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 2.4px;
  fill: var(--cobre-luz);
}

/* =====================================================================
   TOPO DAS PÁGINAS INTERNAS
   ===================================================================== */

.topo-pagina {
  padding: clamp(150px, 20vh, 210px) 0 clamp(64px, 8vw, 110px);
}
.topo-oliva {
  color: var(--papel);
  background:
    radial-gradient(60% 90% at 78% 40%, hsl(67 27% 30%) 0%, transparent 70%),
    linear-gradient(100deg, hsl(66 30% 10%), hsl(66 29% 15%) 55%, hsl(67 28% 19%));
}
.topo-oliva .lead { color: hsl(46 30% 94% / .76); }
/* no Contato o formulário é o conteúdo: o topo encolhe para ele aparecer já */
.topo-curto { padding: clamp(124px, 15vh, 156px) 0 clamp(36px, 4.4vw, 60px); }
.topo-curto .titulo-pagina { font-size: clamp(2.5rem, 4.6vw, 4.6rem); max-width: 20ch; }
.topo-curto .lead { margin-bottom: 0; }
.topo-grade {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: end;
}
.topo-foto { margin: 0; max-width: 460px; justify-self: end; width: 100%; }
.topo-foto .nucleo { aspect-ratio: 615 / 903; }
.topo-foto img { width: 100%; height: 100%; object-fit: cover; }

.atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* =====================================================================
   DIFERENCIAIS — no Início (textos do site antigo)
   ===================================================================== */

.difs { padding-block: var(--secao); background: var(--papel-2); }
.difs-intro { margin: 0 0 10px; max-width: 42ch; color: var(--tinta-2); }
.difs-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.dif .casca { height: 100%; }
.dif .nucleo { height: 100%; padding: clamp(28px, 3vw, 44px); }
.dif-n {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cobre);
}
.dif h3 {
  margin: 34px 0 12px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -.02em;
}
.dif p { margin: 0; font-size: 15.5px; color: var(--tinta-2); }

/* =====================================================================
   QUEM SOMOS — os sócios
   ===================================================================== */

.socios { padding-block: var(--secao); }
.socios-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: 1120px;
}
.socio-foto { aspect-ratio: 4 / 5; }
.socio-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.socio-txt { padding: 30px 6px 0; }
.socio-cargo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oliva);
}
.socio h3 {
  margin: 0 0 20px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.socio-frase {
  margin: 0 0 20px;
  padding-left: 18px;
  border-left: 2px solid var(--cobre);
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.35;
  color: var(--tinta);
}
.socio-txt > p { color: var(--tinta-2); font-size: 16px; }
.socio-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.socio-tags li {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid hsl(67 28% 33% / .28);
  color: var(--oliva);
  font-size: 13px;
  font-weight: 500;
}

/* =====================================================================
   QUEM SOMOS — como trabalhamos
   O título fica parado à esquerda (sticky, nada de travar a rolagem) e
   as etapas passam à direita; a que está no centro da tela acende.
   ===================================================================== */

.metodo { padding-block: var(--secao); background: var(--papel-2); scroll-margin-top: 80px; }
.metodo-grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.metodo-lado { position: sticky; top: clamp(120px, 22vh, 200px); }
.metodo-lado > p:not(.selo) { color: var(--tinta-2); max-width: 40ch; }
.metodo-marcador {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  max-width: 340px;
  margin-top: clamp(28px, 4vw, 48px);
}
.metodo-atual {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--cobre);
  font-variation-settings: "opsz" 144;
}
.metodo-total {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.metodo-barra {
  position: relative;
  flex-basis: 100%;
  height: 2px;
  margin-top: 18px;
  background: hsl(60 20% 20% / .12);
  overflow: hidden;
}
.metodo-barra span {
  position: absolute;
  inset: 0;
  background: var(--cobre);
  transform: scaleX(0);
  transform-origin: left;
}

.metodo-etapas { list-style: none; margin: 0; padding: 0; }
.metodo-etapa {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 84px) 1fr;
  gap: 0 clamp(16px, 2vw, 28px);
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 1px solid hsl(60 20% 20% / .14);
  transition: opacity 1s cubic-bezier(.25, .1, .25, 1);
}
.metodo-etapa:last-child { border-bottom: 1px solid hsl(60 20% 20% / .14); }
.metodo-n {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: 1;
  color: var(--cobre);
  font-variation-settings: "opsz" 144;
}
.metodo-etapa h3 {
  margin: 4px 0 10px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.metodo-etapa p { margin: 0; font-size: 16px; color: var(--tinta-2); max-width: 46ch; }

/* com JS, três níveis de clareza: a etapa no meio da tela, as vizinhas
   dela e as mais distantes — nada some de uma vez */
.metodo-vivo .metodo-etapa { opacity: .2; }
.metodo-vivo .metodo-etapa.perto { opacity: .52; }
.metodo-vivo .metodo-etapa.ativa { opacity: 1; }

/* =====================================================================
   O QUE FAZEMOS
   ===================================================================== */

.topo-servicos { padding-bottom: clamp(48px, 6vw, 80px); }
.topo-servicos-grade {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 32px clamp(40px, 6vw, 110px);
  align-items: end;
}
.topo-servicos .lead { margin-bottom: 0; }
.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
}
.cifras div { padding-top: 18px; border-top: 1px solid hsl(60 20% 20% / .16); }
.cifras dt {
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--cobre);
  font-variation-settings: "opsz" 144;
}
.cifras dd { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.topo-servicos .atalhos { margin-top: clamp(32px, 4vw, 48px); }

.frente { padding-block: clamp(72px, 8vw, 120px); scroll-margin-top: 80px; }
.frente-inversa { background: var(--papel-2); }
.frente-cabeca {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px clamp(40px, 6vw, 110px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.frente-cabeca .titulo { margin-bottom: 0; }
.frente-cabeca > p { margin: 0 0 6px; color: var(--tinta-2); }

/* desenho e lista lado a lado, com a mesma altura */
.frente-corpo {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: stretch;
}
.frente-inversa .frente-corpo { grid-template-columns: 1.1fr .9fr; }
.frente-inversa .desenho { order: 2; }
.desenho { margin: 0; display: flex; flex-direction: column; }
.desenho .casca { flex: 1; display: flex; }
.desenho .nucleo {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 36px);
}
.desenho .traco { max-height: 380px; }

.servicos-lista {
  list-style: none;
  align-self: start;
  margin: 0;
  padding: 0;
  border-top: 1px solid hsl(60 20% 20% / .12);
}
.servico {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 24px 0;
  border-bottom: 1px solid hsl(60 20% 20% / .12);
}
.servico-n {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--cobre);
}
.servico h3 {
  margin: 0 0 6px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.servico p { margin: 0; font-size: 15.5px; color: var(--tinta-2); }

.bim {
  padding-block: clamp(80px, 9vw, 130px);
  background: var(--oliva-funda);
  color: var(--papel);
  scroll-margin-top: 80px;
}
.bim-grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px clamp(40px, 6vw, 110px);
  align-items: center;
}
.bim-frase {
  margin: 0 0 24px;
  padding-bottom: .14em;
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 16ch;
  font-variation-settings: "opsz" 144;
}
.bim-frase em { font-style: italic; color: var(--cobre-luz); }
.bim-txt > p:not(.bim-frase) { color: hsl(46 30% 94% / .74); }
.bim-ganhos { list-style: none; margin: 0; padding: 0; }
.bim-ganhos li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid hsl(46 30% 90% / .14);
}
.bim-ganhos li:last-child { border-bottom: 1px solid hsl(46 30% 90% / .14); }
.bim-ganhos span {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--cobre-luz);
}
.bim-ganhos h3 {
  margin: 0 0 4px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  letter-spacing: -.01em;
}
.bim-ganhos p { margin: 0; font-size: 15px; color: hsl(46 30% 94% / .7); }

/* =====================================================================
   PROJETOS — filtros e grade
   ===================================================================== */

.lista-proj { padding-bottom: var(--secao); }

.filtros {
  position: sticky;
  top: 86px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: 10px;
  border-radius: 999px;
  background: hsl(46 30% 94% / .8);
  border: 1px solid hsl(60 20% 20% / .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.filtro-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filtro-rotulo {
  margin: 0 8px 0 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid hsl(60 20% 20% / .16);
  background: transparent;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 450;
  text-decoration: none;
  cursor: pointer;
  /* troca rápida: numa transição longa, o botão que sai e o que entra ficam
     os dois cinza-esverdeados e sem texto ao mesmo tempo */
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out, opacity .3s;
}
.chip span {
  font-size: 11px;
  font-weight: 500;
  color: var(--tinta-2);
  transition: color .16s ease-out;
}
.chip:hover { border-color: var(--oliva); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.chip[aria-pressed="true"] span { color: var(--cobre-luz); }
.chip-leve[aria-pressed="true"] { background: var(--oliva); border-color: var(--oliva); }
/* combinação sem nenhum projeto: o filtro continua clicável, só apagado */
.chip-zero:not([aria-pressed="true"]) { opacity: .42; }
.chip:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }

.grade-proj {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.vazio-filtro { padding: 60px 0; color: var(--tinta-2); text-align: center; max-width: none; }
.aviso-nomes { margin-top: 34px; font-size: 12.5px; color: var(--tinta-2); }

/* =====================================================================
   PÁGINA DE PROJETO
   ===================================================================== */

.proj-topo { padding: clamp(140px, 18vh, 190px) 0 clamp(64px, 8vw, 110px); }
.proj-topo-grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.proj-topo .titulo-pagina { font-size: clamp(2.6rem, 5.4vw, 5.4rem); }

.migalha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--tinta-2);
}
.migalha a { text-decoration: none; }
.migalha a:hover { color: var(--cobre-texto); }

.ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid hsl(60 20% 20% / .12);
  max-width: 520px;
}
.ficha dt {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.ficha dd { margin: 0; font-size: 15.5px; font-weight: 450; }

.proj-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 36px; }
.proj-nota { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--tinta-2); }

.proj-capa { margin: 0; }
.proj-capa .nucleo { max-height: 78vh; }
.proj-capa img { width: 100%; height: auto; max-height: calc(78vh - 16px); object-fit: cover; }

.proj-galeria { padding-block: var(--secao); background: var(--papel-2); }
.galeria { columns: 3 280px; column-gap: clamp(12px, 1.4vw, 20px); }
.galeria-item {
  display: block;
  margin-bottom: clamp(12px, 1.4vw, 20px);
  break-inside: avoid;
  border-radius: calc(var(--r) - 8px);
  overflow: hidden;
  cursor: zoom-in;
}
.galeria-item img { width: 100%; height: auto; transition: transform 1.2s var(--mola); }
.galeria-item:hover img { transform: scale(1.04); }
.galeria-item:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }

.proj-nav { padding-block: 56px; border-top: 1px solid hsl(60 20% 20% / .1); }
.proj-nav-grade {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.proj-nav-ant, .proj-nav-prox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  font-family: var(--f-titulo);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  letter-spacing: -.01em;
  transition: color .5s;
}
.proj-nav-ant span, .proj-nav-prox span {
  font-family: var(--f-texto);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.proj-nav-prox { text-align: right; }
.proj-nav-ant:hover, .proj-nav-prox:hover { color: var(--cobre-texto); }

/* imagem ampliada */
.luz {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: hsl(66 30% 6% / .96);
  color: var(--papel);
}
.luz::backdrop { background: hsl(66 30% 6% / .7); }
.luz[open] { display: grid; place-items: center; }
.luz img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 14px;
}
.luz-legenda {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 13px;
  color: hsl(46 30% 94% / .7);
}
.luz button {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid hsl(46 30% 94% / .2);
  background: hsl(46 30% 94% / .08);
  color: var(--papel);
  border-radius: 999px;
  cursor: pointer;
  transition: background .5s var(--mola);
}
.luz button:hover { background: hsl(46 30% 94% / .18); }
.luz-fecha { top: 20px; right: 20px; padding: 10px 18px; font-size: 13px; }
.luz-ant, .luz-prox { top: 50%; width: 54px; height: 54px; margin-top: -27px; }
.luz-ant { left: 20px; }
.luz-prox { right: 20px; }
.luz-ant svg, .luz-prox svg { width: 18px; height: 18px; }
.luz-ant svg { transform: rotate(-135deg); }
.luz-prox svg { transform: rotate(45deg); }

/* =====================================================================
   CONTATO
   ===================================================================== */

.contato-sec { padding-block: clamp(36px, 4.4vw, 56px) var(--secao); }
.contato-grade {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.form .nucleo { padding: clamp(26px, 3.4vw, 48px); }
.form h2 {
  margin: 0 0 8px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  letter-spacing: -.02em;
}
.form-nota { font-size: 14px; color: var(--tinta-2); margin-bottom: 28px; }
.campo { display: block; margin-bottom: 18px; }
.campo > span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
}
.campo small { font-weight: 400; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid hsl(60 20% 20% / .16);
  background: hsl(46 30% 98%);
  font-size: 16px;
  transition: border-color .4s, box-shadow .4s;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--oliva);
  box-shadow: 0 0 0 4px hsl(67 28% 33% / .14);
}
.campo [aria-invalid="true"] { border-color: var(--cobre-sombra); }
.form-erro { color: var(--cobre-sombra); font-size: 14px; }
.form .btn { margin-top: 8px; }

.canais { display: flex; flex-direction: column; gap: 10px; }
.canal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 70px 22px 24px;
  border-radius: 22px;
  border: 1px solid hsl(60 20% 20% / .1);
  background: hsl(46 30% 97%);
  text-decoration: none;
  transition: border-color .5s var(--mola), transform .7s var(--mola);
}
a.canal:hover { border-color: var(--oliva); transform: translateY(-2px); }
.canal-rot {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.canal-v { font-size: 16px; font-weight: 450; line-height: 1.5; }
.canal-v a { text-decoration: none; }
.canal-v a:hover { color: var(--cobre-texto); }
.canal-seta {
  position: absolute;
  right: 22px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: hsl(60 14% 10% / .06);
  transition: transform .7s var(--mola), background .5s;
}
.canal-seta svg { width: 14px; height: 14px; }
a.canal:hover .canal-seta { transform: rotate(45deg); background: var(--cobre); color: var(--papel); }

/* =====================================================================
   RODAPÉ
   ===================================================================== */

.rodape {
  padding: clamp(64px, 8vw, 104px) var(--gut) 32px;
  background: var(--oliva-funda);
  color: hsl(46 30% 94% / .72);
  font-size: 14.5px;
}
.rodape a { text-decoration: none; transition: color .4s; }
.rodape a:hover { color: var(--cobre-luz); }
.rodape-topo {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: 40px;
}
.rodape-marca { color: var(--cobre-luz); }
.rodape-marca .lg-marca { width: 34px; height: 33px; margin-bottom: 14px; }
.rodape-marca .lg-palavra { width: 150px; height: 18px; }
.rodape-tag { margin: 12px 0 18px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.rodape-frase {
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.35;
  color: hsl(46 30% 94% / .8);
  max-width: 26ch;
}
.rodape-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rodape-col h2 {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cobre-luz);
}
.rodape-col p { margin: 0 0 6px; }
.rodape-redes { display: flex; gap: 16px; margin-top: 6px; }
.rodape-fim {
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 1px solid hsl(46 30% 90% / .1);
  font-size: 12.5px;
  color: hsl(46 30% 94% / .45);
}

/* =====================================================================
   FLUTUANTES — WhatsApp e o aviso de demonstração
   ===================================================================== */

.zap {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 38;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--oliva);
  color: var(--papel);
  border: 1px solid hsl(68 30% 80% / .25);
  box-shadow: 0 20px 40px -18px hsl(66 40% 4% / .7), inset 0 1px 0 hsl(68 40% 90% / .2);
  transition: transform .7s var(--mola), background .5s, opacity .9s var(--mola);
}
.zap svg { width: 26px; height: 26px; }
.zap:hover { transform: scale(1.06); background: var(--oliva-luz); }
.zap:focus-visible { outline: 2px solid var(--cobre-luz); outline-offset: 3px; }
.intro-ativa .zap { opacity: 0; pointer-events: none; }

.aviso-demo {
  position: fixed;
  left: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--papel);
  background: hsl(66 30% 8% / .82);
  pointer-events: none;
}

/* =====================================================================
   COMPUTADOR ESTREITO — texto e foto do hero dividem a largura
   ===================================================================== */

@media (min-width: 901px) {
  .menu-cheio { display: none; }

  /* no computador o aviso vira etiqueta vertical na margem direita */
  .aviso-demo {
    left: auto;
    right: 10px;
    top: 50%;
    bottom: auto;
    padding: 12px 7px;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .hero-socios { height: min(80%, 900px); }
  .hero-txt > * { max-width: 54vw; }
  .hero-titulo { font-size: clamp(2.8rem, min(6vw, 10vh), 5.6rem); }
}

/* =====================================================================
   CELULAR
   ===================================================================== */

@media (max-width: 900px) {
  .ilha { gap: 14px; padding: 6px 6px 6px 16px; }
  .ilha-links, .ilha-cta { display: none; }

  .ilha-menu {
    display: block;
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--tinta);
    cursor: pointer;
  }
  .ilha-menu span {
    position: absolute;
    left: 13px;
    right: 13px;
    height: 1.5px;
    background: var(--papel);
    transition: transform .6s var(--mola);
  }
  .ilha-menu span:nth-child(1) { top: 17px; }
  .ilha-menu span:nth-child(2) { top: 24px; }
  .menu-aberto .ilha-menu span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .menu-aberto .ilha-menu span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

  .menu-cheio {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px var(--gut) 60px;
    background: hsl(46 30% 94% / .92);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s var(--mola), visibility 0s linear .6s;
  }
  .menu-aberto .menu-cheio {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s var(--mola);
  }
  .menu-cheio nav { display: flex; flex-direction: column; gap: 6px; }
  .menu-cheio a, .menu-rodape {
    opacity: 0;
    filter: blur(6px);
    transition: opacity .8s var(--mola), filter .8s var(--mola);
    transition-delay: calc(var(--i) * 60ms + 80ms);
  }
  .menu-cheio a {
    font-family: var(--f-titulo);
    font-weight: 300;
    font-size: clamp(2.3rem, 10vw, 3.4rem);
    line-height: 1.14;
    letter-spacing: -.03em;
    text-decoration: none;
  }
  .menu-cheio a[aria-current="page"] { font-style: italic; color: var(--cobre-texto); }
  .menu-rodape { margin-top: 40px; font-size: 13px; color: var(--tinta-2); }
  .menu-aberto .menu-cheio a,
  .menu-aberto .menu-rodape { opacity: 1; filter: none; }

  /* hero: os sócios em cima, o texto embaixo sobre o oliva escuro */
  .hero-oliva {
    align-items: flex-end;
    padding: 0 var(--gut) calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .hero-socios {
    left: 0;
    right: 0;
    top: 74px;
    bottom: auto;
    height: 60svh;
    margin-inline: auto;
  }
  .hero-socios::before { inset: -18% -60% -30%; }
  /* sombra que sobe do pé da tela para o texto ficar legível */
  .hero-oliva::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    z-index: -1;
    background: linear-gradient(to top, hsl(66 30% 9%) 35%, hsl(66 30% 9% / 0));
    opacity: 0;
    transition: opacity 1.4s var(--saida);
  }
  .hero-oliva.texto-in::after,
  html:not(.js) .hero-oliva::after,
  .reduz .hero-oliva::after { opacity: 1; }

  .aviso-demo span { display: none; }

  .hero-txt > * { max-width: 100%; }
  .hero-titulo { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .hero-lead { margin-top: 18px; font-size: 1rem; }
  .hero-oliva .acoes { margin-top: 26px; }
  .hero-rodape { display: none; }

  .apresenta-grade,
  .petra-grade,
  .frentes-grade,
  .topo-grade,
  .socios-grade,
  .difs-grade,
  .metodo-grade,
  .topo-servicos-grade,
  .frente-cabeca,
  .frente-corpo,
  .frente-inversa .frente-corpo,
  .bim-grade,
  .contato-grade,
  .proj-topo-grade,
  .rodape-topo { grid-template-columns: 1fr; }

  .bento-2, .bento-3 { grid-template-columns: 1fr; }
  .bento .card-img { height: auto; aspect-ratio: 4 / 5; }

  /* no celular o método vira lista simples: nada fica preso, tudo aceso */
  .metodo-lado { position: static; }
  .metodo-marcador { display: none; }
  .metodo-vivo .metodo-etapa { opacity: 1; }

  .frente-inversa .desenho { order: 0; }
  .desenho .traco { max-height: none; }
  .cifras dt { font-size: 3rem; }

  .petra-imgs { aspect-ratio: 1 / 1.05; margin-top: 12px; }

  .topo-foto { justify-self: start; max-width: 360px; }

  .filtros { position: static; border-radius: 26px; }
  .filtro-grupo { width: 100%; }

  .proj-nav-grade { grid-template-columns: 1fr 1fr; }
  .proj-nav-todos { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}