/* ==========================================================
   01. DESIGN TOKENS / VARIÁVEIS GLOBAIS
   Edite aqui cores, tamanhos, raios e sombras do projeto.
   ========================================================== */
:root {

  /* Cores principais (paleta da logo: preto, vermelho e branco) */
  --bg: #0a0b0d;
  --bg2: #14161a;
  --paper: #edecea;
  --white: #fff;
  --ink: #111316;
  --muted: #6b7076;

  --accent: #d81f1f;
  --accent2: #f04040;
  /* Bordas */
  --line: rgba(255, 255, 255, .13);
  --line-dark: rgba(17, 19, 22, .12);

  /* Layout */
  --max: 1200px;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .16);
}

/* ==========================================================
   02. RESET E ESTILOS GLOBAIS
   ========================================================== */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden
}

.noise {
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  z-index:99;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")
}

.container {
  width:min(var(--max), calc(100% - 40px));
  margin:auto
}

.section {
  padding:110px 0
}

.section-dark {
  background:var(--bg);
  color:#fff
}

.light {
  background:#edecea
}

/* ==========================================================
   03. HEADER E NAVEGAÇÃO
   ========================================================== */
.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  border-bottom:1px solid transparent;
  transition:.3s
}

.site-header.scrolled {
  background:rgba(10, 11, 13, .88);
  backdrop-filter:blur(16px);
  border-color:var(--line)
}

.nav-wrap {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:#fff
}

.brand-mark {
  width:40px;
  height:40px;
  display:block;
  object-fit:contain;
  flex:0 0 auto
}

.footer-brand .brand-mark {
  width:46px;
  height:46px
}

.brand>span:last-child {
  display:flex;
  flex-direction:column;
  line-height:1
}

.brand strong {
  font-family:Inter;
  font-size:21px
}

.brand small {
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:9px;
  margin-top:5px;
  color:#c3c6ca
}

.nav {
  display:flex;
  align-items:center;
  gap:28px
}

.nav a {
  color:#d9e0e5;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  transition:color .2s ease
}

.nav a:hover {
  color:#fff
}

/* O hover vale em qualquer ponto da página. */
.nav a:not(.nav-cta):not(.instagram-link):hover,
.nav a:not(.nav-cta):not(.instagram-link):focus-visible {
  color:var(--accent2)
}

/* Já o vermelho fixo do link marcado só vale no trecho coberto pelo
   menu: fora dele (hero, processo, contato) o body recebe .nav-plain. */
body:not(.nav-plain) .nav a:not(.nav-cta):not(.instagram-link).active {
  color:var(--accent2)
}

.nav-cta {
  border:1px solid rgba(255, 255, 255, .25);
  padding:11px 16px;
  border-radius:999px
}

.nav-cta:hover {
  background:rgba(255, 255, 255, .06)
}

/* Atalho para o Instagram no menu principal */
.instagram-link {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border:1px solid rgba(255, 255, 255, .25);
  border-radius:50%;
  color:var(--accent2);
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease
}

.instagram-link svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.instagram-link:hover {
  background:rgba(255, 255, 255, .06)
  /*color:var(--bg);
  background:var(--accent2);
  border-color:var(--accent2);
  transform:translateY(-2px)*/
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:26px
}

/* ==========================================================
   04. HERO / DESTAQUE PRINCIPAL
   ========================================================== */
.hero {
  /* Altura da tela menos a faixa de tecnologias: no topo da página
     a faixa aparece inteira, sem sobra da próxima seção. */
  min-height:calc(100vh - 82px);
  padding:150px 0 80px;
  display:grid;
  align-items:center;
  position:relative;
  overflow:hidden;
  /* Croqui do projeto ao fundo, sob camadas escuras: a da esquerda é
     mais densa porque é onde fica o texto. */
  background-color:var(--bg);
  background-image:linear-gradient(100deg, rgba(10, 11, 13, .9) 26%, rgba(10, 11, 13, .66) 58%, rgba(10, 11, 13, .5)), linear-gradient(to bottom, var(--bg), rgba(10, 11, 13, .1) 30%, rgba(10, 11, 13, .55) 82%, var(--bg)), url("assets/projeto-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat
}

.hero-grid {
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:70px;
  align-items:center;
  position:relative
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:11px;
  font-weight:800;
  color:var(--accent2);
  margin-bottom:18px
}

.eyebrow.dark {
  color:#a81616
}

.hero h1, .section-heading h2, .contact-copy h2, .portfolio-head h2 {
  font-family:Inter, sans-serif;
  letter-spacing:-.045em;
  line-height:1.04;
  margin:0
}

.hero h1 {
  font-size:clamp(38px, 4.9vw, 64px);
  max-width:14ch;
  text-wrap:balance
}

.hero h1 span {
  color:var(--accent2)
}

/* Hierarquia: o parágrafo de apoio recua em peso e opacidade
   para que o título concentre o foco. */
.hero-copy>p {
  max-width:54ch;
  color:rgba(255, 255, 255, .58);
  font-size:16.5px;
  font-weight:500;
  line-height:1.7;
  margin:24px 0 34px
}

.hero-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  border:0;
  font:800 13px/1 Inter;
  cursor:pointer;
  transition:.25s
}

.btn-primary {
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 30px rgba(216, 31, 31, .18)
}

.btn-primary:hover {
  transform:translateY(-2px);
  background:var(--accent2)
}

.btn-ghost {
  border:1px solid rgba(255, 255, 255, .2);
  color:#fff;
  background:transparent
}

.btn-ghost:hover {
  background:rgba(255, 255, 255, .06)
}

.full {
  width:100%
}

.hero-metrics {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  max-width:620px;
  margin-top:54px;
  padding-top:26px;
  border-top:1px solid var(--line)
}

.hero-metrics div {
  display:flex;
  flex-direction:column
}

.hero-metrics strong {
  font:700 24px Inter;
  color:#fff
}

.hero-metrics span {
  color:#87939d;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em
}

.hero-visual {
  position:relative
}

/* Brilho e assentamento atrás do retrato. Sem filter:blur aqui — um
   filtro nesta camada faz o Chrome descartar a imagem mascarada ao
   lado; os próprios gradientes já entregam a suavidade. */
.hero-visual:before {
  content:"";
  position:absolute;
  inset:24% 4% 0 8%;
  z-index:0;
  background:radial-gradient(48% 42% at 54% 48%, rgba(216, 31, 31, .18), transparent 74%), radial-gradient(40% 32% at 52% 82%, rgba(6, 7, 9, .7), transparent 72%)
}

/* Retrato recortado. A foto é um JPEG comum e o recorte vem de uma
   máscara PNG em tons de cinza aplicada por cima: junto, o par pesa
   cerca de um quinto de um PNG com transparência, sem perder nitidez.
   A sombra fica no <figure> porque o filtro é aplicado antes da
   máscara — no <img> ela sairia retangular. */
.hero-photo {
  position:relative;
  z-index:1;
  /* Largura calculada para a foto ocupar ~668px de altura: mais que
     isso empurra a faixa de tecnologias para fora da primeira tela. */
  width:min(100%, 530px);
  margin:0 auto -80px
}

.hero-photo img {
  position:relative;
  display:block;
  width:100%;
  height:auto
}
/* ==========================================================
   05. FAIXA DE TECNOLOGIAS / CONFIANÇA
   ========================================================== */
.trust-strip {
  background:#15171a;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.trust-grid {
  min-height:82px;
  display:flex;
  gap:38px;
  align-items:center;
  justify-content:space-between;
  overflow:auto;
  color:#7e8c96;
  font:700 10px Inter;
  letter-spacing:.15em;
  white-space:nowrap
}

/* ==========================================================
   06. QUEM SOMOS
   ========================================================== */
/* Texto à esquerda, foto dos sócios à direita. A foto encosta na
   base da seção e se dissolve nela, como o retrato do hero. */
.about-section {
  --about-h2:clamp(32px, 4.1vw, 52px)
}

.about-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:40px
}

.about-text .about-copy {
  margin-top:32px
}

/* O topo da foto é preso à base da 2ª linha do título: altura do
   eyebrow (~36px) + duas linhas do h2 (line-height 1.04). A foto
   ocupa dali até a base da seção e pode avançar até a borda direita
   da tela; o max-width evita que cresça demais em telas largas. */
.about-photo {
  position:relative;
  max-width:820px;
  margin:calc(36px + 2.08 * var(--about-h2)) calc((min(var(--max), 100vw - 40px) - 100vw) / 2) -110px 28px
}

.about-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* Preenche sempre da linha do título até a divisa da seção, ancorada
     à esquerda (junto do texto). Se faltar largura, o excesso sai pela
     direita, na borda da tela, como no enquadramento da foto original. */
  object-fit:cover;
  object-position:left top
}

.section-heading h2, .portfolio-head h2, .contact-copy h2 {
  font-size:clamp(38px, 5vw, 66px);
  max-width:860px
}

/* Título do "Quem somos" em 3 linhas. A largura em em acompanha a
   fonte: cabe "Tradição familiar," mas não "engenharia de ponta.". */
.about-text .section-heading h2 {
  font-size:var(--about-h2);
  max-width:8.6em
}

.section-heading.center {
  text-align:center;
  max-width:920px;
  margin:0 auto 56px
}

.section-heading.center p {
  max-width:660px;
  margin:18px auto 0;
  color:var(--muted)
}

.about-copy {
  max-width:720px
}

.about-copy p {
  color:#4f5a63
}

.about-copy .lead {
  font-size:22px;
  color:#1b232a
}

/* ==========================================================
   07. SERVIÇOS
   ========================================================== */
.services-section {
  background:#e1e0dd
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px
}

.service-card {
  background:#fff;
  border:1px solid var(--line-dark);
  border-radius:20px;
  padding:28px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:start;
  cursor:pointer;
  transition:.25s
}

.service-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(20, 22, 26, .08);
  border-color:rgba(216, 31, 31, .3)
}

.service-number {
  font:700 13px Inter;
  color:#c22020
}

.service-card h3 {
  margin:0 0 8px;
  font:700 21px Inter
}

.service-card p {
  margin:0;
  color:#707a83;
  font-size:13px
}

.service-arrow {
  width:34px;
  height:34px;
  border:1px solid var(--line-dark);
  border-radius:50%;
  display:grid;
  place-items:center
}

/* ==========================================================
   08. DIFERENCIAIS
   ========================================================== */
.differentials-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:50px
}

.diff-card {
  padding:32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01))
}

.diff-card span {
  color:var(--accent2);
  font:700 12px Inter
}

.diff-card h3 {
  font:700 27px Inter;
  margin:50px 0 14px
}

.diff-card p {
  color:#98a3ac
}

/* ==========================================================
   09. PORTFÓLIO
   ========================================================== */
.portfolio-section {
  background:#e1e0dd
}

.portfolio-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:36px
}

.filter-group {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end
}

.filter {
  border:1px solid var(--line-dark);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font:700 11px Inter;
  cursor:pointer
}

.filter.active, .filter:hover {
  background:#15171a;
  color:#fff
}

/* 3 colunas: o card alto ocupa 2x2 em destaque; os demais seguem em
   linhas de três, com a imagem em 16:10 para as linhas ficarem iguais. */
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px
}

.portfolio-card:not(.tall):not(.wide) .portfolio-meta {
  flex-direction:column;
  gap:4px;
  padding:16px 18px
}

.portfolio-card:not(.tall):not(.wide) .portfolio-meta small {
  text-align:left
}

.portfolio-card:not(.tall):not(.wide) .portfolio-media,
.portfolio-card:not(.wide) .project-placeholder {
  min-height:0;
  flex:none;
  aspect-ratio:16/10
}

.portfolio-card {
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line-dark);
  transition:.25s
}

.portfolio-card:hover {
  transform:translateY(-3px)
}

.portfolio-card.tall {
  grid-row:span 2;
  grid-column:span 2
}

/* Cards com imagem real: a foto preenche a área do card (no card alto,
   as duas linhas da grade) e é recortada pelo centro. */
.portfolio-card {
  display:flex;
  flex-direction:column
}

.portfolio-media {
  position:relative;
  flex:1;
  min-height:275px;
  overflow:hidden;
  background:#d7d5d2
}

.portfolio-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease
}

.portfolio-card:hover .portfolio-media img {
  transform:scale(1.03)
}

.portfolio-card.wide .portfolio-media {
  min-height:340px
}

/* No card alto o recorte é quase quadrado; deslocado à esquerda para
   manter a coluna de pedra e a entrada da casa no quadro. */
.portfolio-card.tall .portfolio-media img {
  object-position:36% center
}

.media-tag {
  position:absolute;
  left:16px;
  top:16px;
  z-index:1;
  color:#fff;
  font:700 11px Inter;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(0, 0, 0, .5);
  padding:7px 11px;
  border-radius:999px;
  backdrop-filter:blur(6px)
}

.portfolio-card.wide {
  grid-column:1/-1
}

/* Zoom do portfólio: a imagem sai do card e cresce até caber na tela,
   trocando para a versão em alta (assets/portfolio/full/). */
.zoom-view {
  position:fixed;
  inset:0;
  z-index:110;
  pointer-events:none;
  visibility:hidden;
  background:rgba(10, 11, 13, 0);
  transition:background .35s ease
}

.zoom-view.active {
  visibility:visible
}

/* O fundo escuro nunca bloqueia a página: um toque fora da imagem fecha o
   zoom e já chega ao menu, filtro ou link que estiver embaixo. */
.zoom-view.open {
  background:rgba(10, 11, 13, .72)
}

.zoom-view.open .zoom-box {
  pointer-events:auto;
  cursor:zoom-out
}

.portfolio-media img {
  cursor:zoom-in
}

.zoom-box {
  position:fixed;
  overflow:hidden;
  border-radius:24px;
  background:#d7d5d2;
  box-shadow:0 30px 80px rgba(0, 0, 0, .45);
  transition:left .38s cubic-bezier(.2, .8, .2, 1), top .38s cubic-bezier(.2, .8, .2, 1),
    width .38s cubic-bezier(.2, .8, .2, 1), height .38s cubic-bezier(.2, .8, .2, 1),
    border-radius .38s ease
}

.zoom-view.open .zoom-box {
  border-radius:14px
}

.zoom-box img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.zoom-box .zoom-hd {
  opacity:0;
  transition:opacity .25s ease
}

.zoom-box .zoom-hd.ready {
  opacity:1
}

@media (prefers-reduced-motion: reduce) {
  .zoom-view, .zoom-box, .zoom-box .zoom-hd {
    transition:none
  }
}

.project-placeholder {
  min-height:275px;
  display:grid;
  place-items:end start;
  padding:24px;
  position:relative;
  overflow:hidden;
  color:#fff;
  font:700 13px Inter
}

.project-placeholder:before, .project-placeholder:after {
  content:"";
  position:absolute;
  inset:0
}

.structural {
  background:#15171b;
  background-image:linear-gradient(rgba(216, 31, 31, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(216, 31, 31, .18) 1px, transparent 1px);
  background-size:28px 28px
}

.structural:before {
  inset:18% 15%;
  border:1px solid #e03535;
  box-shadow:40px 30px 0 -39px #e03535, -45px 45px 0 -44px #e03535
}

.case-grid {
  display:grid;
  grid-template-columns:1fr 1fr
}

.project-placeholder span {
  position:relative;
  z-index:2;
  background:rgba(0, 0, 0, .46);
  padding:8px 10px;
  border-radius:999px;
  backdrop-filter:blur(6px)
}

.portfolio-meta {
  padding:20px;
  display:flex;
  justify-content:space-between;
  gap:20px
}

.portfolio-meta span {
  font:700 17px Inter
}

.portfolio-meta small {
  color:#7a848c;
  text-align:right
}

.portfolio-note {
  color:#747e86;
  font-size:12px;
  margin-top:18px
}

/* ==========================================================
   10. PROCESSO DE TRABALHO
   ========================================================== */
.process-section {
  background:#fff
}

.timeline {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin-top:40px
}

.step {
  padding:28px;
  border-top:1px solid var(--line-dark);
  position:relative
}

.step:before {
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  position:absolute;
  top:-5px;
  left:28px;
  box-shadow:0 0 0 6px #f7d6d6
}

.step span {
  font:700 11px Inter;
  color:#c22020
}

.step h3 {
  font:700 20px Inter;
  margin:24px 0 8px
}

.step p {
  color:#6b747c;
  font-size:13px
}

/* ==========================================================
   11. CONTATO E FORMULÁRIO
   ========================================================== */
.contact-section {
  background:#0d141b;
  color:#fff
}

.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start
}

.contact-copy>p {
  color:#9ca7b0;
  font-size:17px;
  max-width:560px
}

.hours-card {
  display:flex;
  flex-direction:column;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  max-width:430px;
  margin-top:34px;
  background:rgba(255, 255, 255, .025)
}

.hours-card strong {
  font:700 16px Inter;
  margin-bottom:12px
}

.hours-card span {
  font-size:14px
}

.hours-card small {
  margin-top:10px;
  color:#7f8b95
}

.contact-form {
  background:#edecea;
  color:#111820;
  border-radius:24px;
  padding:28px
}

.contact-form label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:800;
  font-size:12px;
  margin-bottom:16px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.contact-form input, .contact-form select, .contact-form textarea {
  width:100%;
  border:1px solid #d7d5d2;
  border-radius:12px;
  background:#fff;
  padding:13px 14px;
  font:500 13px Inter;
  outline:none
}

.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color:#d81f1f;
  box-shadow:0 0 0 3px rgba(216, 31, 31, .1)
}

.form-hint {
  display:block;
  color:#7b847f;
  margin-top:12px;
  text-align:center
}

/* ==========================================================
   12. RODAPÉ
   ========================================================== */
.footer {
  background:#08090b;
  color:#ccd3d8;
  padding:62px 0 22px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.5fr .7fr .7fr;
  gap:60px
}

.footer-grid>div {
  display:flex;
  flex-direction:column;
  gap:10px
}

.footer-brand {
    align-self: flex-start;
    width: fit-content;
}

.footer-grid p {
  max-width:460px;
  color:#74818b
}

.footer-grid a, .footer-grid span {
  color:#8f9aa3;
  text-decoration:none;
  font-size:13px
}

.footer-grid strong {
  color:#fff;
  font:700 14px Inter
}

.footer-bottom {
  margin-top:46px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#65727c;
  font-size:11px
}


/* Redes sociais do rodapé */
.footer-socials {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  width:100%;
  max-width:460px;
  margin-top:18px
}

.footer-grid .footer-social-link {
  min-height:54px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid rgba(240, 64, 64, .42);
  border-radius:10px;
  color:var(--accent2);
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease
}

.footer-grid .footer-social-link svg {
  width:20px;
  height:20px;
  flex:0 0 20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.footer-grid .footer-social-link.facebook-link,
.footer-grid .footer-social-link:nth-child(2) svg { fill:currentColor; stroke:none }

.footer-grid .footer-social-link span {
  color:inherit;
  font:600 13px Inter
}

.footer-grid .footer-social-link:hover {
  color:#fff;
  background:var(--accent2);
  border-color:var(--accent2);
  transform:translateY(-2px)
}

/* ==========================================================
   13. MODAL DE SERVIÇOS
   ========================================================== */
.service-modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:none
}

.service-modal.open {
  display:block
}

.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(6, 7, 9, .74);
  backdrop-filter:blur(8px)
}

.modal-panel {
  position:absolute;
  right:24px;
  top:24px;
  bottom:24px;
  width:min(560px, calc(100% - 48px));
  background:#f7f6f5;
  border-radius:26px;
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 20px 80px rgba(0, 0, 0, .34)
}

.modal-close {
  position:absolute;
  right:22px;
  top:18px;
  border:0;
  background:none;
  font-size:32px;
  cursor:pointer
}

.modal-index {
  font:700 12px Inter;
  color:#c22020
}

.modal-panel h3 {
  font:700 42px/1.05 Inter;
  letter-spacing:-.03em;
  margin:18px 0
}

.modal-panel p {
  color:#5e6971;
  margin:0 0 28px
}

/* ==========================================================
   14. ANIMAÇÕES / REVEAL
   ========================================================== */
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity:1;
  transform:none
}

.delay-1 {
  transition-delay:.1s
}

.delay-2 {
  transition-delay:.2s
}

.delay-3 {
  transition-delay:.3s
}

/* ==========================================================
   15. RESPONSIVIDADE — TABLETS / NOTEBOOKS
   ========================================================== */
@media(max-width:960px) {
  .nav {
    position:absolute;
    top:82px;
    left:20px;
    right:20px;
    background:#0d0f12;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    display:none;
    /* Linha com quebra: cada link de texto ocupa a linha inteira e os
       ícones sociais dividem a última, lado a lado. */
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    row-gap:28px;
    column-gap:12px
  }
.nav.open {
    display:flex
  }
  .nav>a:not(.instagram-link) {
    flex:1 0 100%
  }
.menu-toggle {
    display:block
  }
.hero {
    padding-top:130px
  }
.hero-grid, .about-grid, .contact-grid {
    grid-template-columns:1fr
  }
.about-photo {
    max-width:620px;
    margin:0 auto -110px
  }
.about-photo img {
    position:static;
    height:auto
  }
.hero-copy, .hero-visual {
    min-width:0
  }
.hero-visual {
    max-width:720px
  }
.services-grid, .differentials-grid {
    grid-template-columns:1fr
  }
.portfolio-grid {
    grid-template-columns:repeat(2, 1fr)
  }
.portfolio-card.tall {
    grid-row:auto
  }
.portfolio-head {
    align-items:flex-start;
    flex-direction:column
  }
.filter-group {
    justify-content:flex-start
  }
.timeline {
    grid-template-columns:1fr 1fr
  }
.footer-grid {
    grid-template-columns:1fr 1fr
  }
.footer-grid>div:first-child {
    grid-column:1/-1
  }

}

/* ==========================================================
   16. RESPONSIVIDADE — CELULARES
   ========================================================== */
@media(max-width:640px) {
  .container {
    width:min(100% - 24px, var(--max))
  }
.section {
    padding:78px 0
  }
.about-photo {
    margin-bottom:-78px
  }
.hero {
    min-height:auto
  }
.hero h1 {
    font-size:40px;
    max-width:none
  }
.hero-copy>p {
    font-size:15.5px;
    max-width:none
  }
.hero-grid {
    gap:42px
  }
.hero-metrics {
    gap:12px
  }
.services-grid {
    grid-template-columns:1fr
  }
.service-card {
    grid-template-columns:auto 1fr
  }
.service-arrow {
    display:none
  }
.portfolio-grid {
    grid-template-columns:1fr
  }
.portfolio-card.tall, .portfolio-card.wide {
    grid-row:auto;
    grid-column:auto
  }
.case-grid {
    grid-template-columns:1fr
  }
.timeline, .form-row, .footer-grid {
    grid-template-columns:1fr
  }
.footer-grid>div:first-child {
    grid-column:auto
  }
.footer-bottom {
    flex-direction:column;
    gap:8px
  }
.modal-panel {
    right:12px;
    top:12px;
    bottom:12px;
    width:calc(100% - 24px);
    padding:28px
  }
.modal-panel h3 {
    font-size:34px
  }

}

@media (max-width: 560px) {
  .footer-socials { grid-template-columns:1fr; }
}