/* ==================== FONTS ==================== */
/* Avenir: so existem dois cortes verticais no acervo da marca, Light e o
   65 Medium. O Light cobre o texto corrido (300-400) e o Medium entra onde o
   layout pede peso (500-700) — nao ha um Avenir Bold de verdade para usar. */
@font-face {
  font-family: 'Avenir Maiz';
  src: url('../assets/fonts/Avenir-Light.ttf') format('truetype');
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Maiz';
  src: url('../assets/fonts/AvenirLTStd-Medium.otf') format('opentype');
  font-weight: 500 700;
  font-display: swap;
}
/* Comfortaa Regular e Bold (Google Fonts, licenca OFL), servidos localmente */
@font-face {
  font-family: 'Comfortaa Maiz';
  src: url('../assets/fonts/comfortaa-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa Maiz';
  src: url('../assets/fonts/comfortaa-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ==================== TOKENS ==================== */
:root{
  --yellow:#E9BF15;
  --purple:#A934B8;
  --teal:#14ADC6;
  --green:#BDCB0B;
  --red:#E61A2E;

  /* Tinta que se le sobre cada cor da marca, quando ela vira fundo cheio.
     Amarelo, verde e teal sao claros demais para texto branco (1.8, 1.8 e 2.7
     de contraste); com o ink batem 7.9, 7.8 e 5.2. Roxo e vermelho sao o
     contrario: 5.4 e 4.6 com branco. Todos passam o AA de 4.5. */
  --on-yellow:var(--ink);
  --on-purple:#fff;
  --on-teal:var(--ink);
  --on-green:var(--ink);
  --on-red:#fff;

  --ink:#2B2C2E;
  --gray-dark:#696B6D;
  --gray:#B3B5B7;
  --gray-light:#F1F1F1;
  --paper:#FFFFFF;

  --nav-w:84px;
  /* um tamanho so para todos os titulos de secao e de subsecao (Projetos,
     Quem somos, Nossos servicos, Clientes, Contato) */
  --title-size:1.5rem;
  --radius:16px;
  --radius-sm:10px;
  --font-head:'Comfortaa Maiz', 'Trebuchet MS', sans-serif;
  --font-body:'Avenir Maiz', 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1em; line-height:1.6; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* ==================== BUTTONS ==================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.9em 1.8em;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ box-shadow:0 8px 20px rgba(0,0,0,.2); }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-whats{ background:#25D366; color:#fff; width:100%; }
.btn-whats:hover{ box-shadow:0 8px 20px rgba(37,211,102,.4); }
.btn-small{ margin-top:1em; padding:.6em 1.4em; font-size:.85rem; }

/* ==================== NAV ==================== */
.site-nav{
  position:fixed; inset:0 auto 0 0;
  width:var(--nav-w);
  height:100vh;
  background:#fff;
  border-right:1px solid var(--gray-light);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 0;
  z-index:100;
}
.nav-mark{ display:block; }
.mark-plus{
  width:34px; height:34px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
/* gira o "+" no hover/foco do link — :focus-visible cobre navegacao por teclado */
.nav-mark:hover .mark-plus,
.nav-mark:focus-visible .mark-plus{
  transform:rotate(180deg);
}
@media (prefers-reduced-motion: reduce){
  .mark-plus{ transition:none; }
  .nav-mark:hover .mark-plus,
  .nav-mark:focus-visible .mark-plus{ transform:none; }
}

.nav-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.2rem;
}
.nav-links a{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gray-dark);
  padding:.25rem;
  border-radius:6px;
  transition:color .2s ease;
}
.nav-links a:hover,
.nav-links a.is-active{ color:var(--purple); }

.nav-whats{
  width:44px; height:44px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  /* 44x44 e o minimo confortavel para o dedo */
  padding:11px;
  min-width:44px;
  min-height:44px;
  justify-content:center;
  align-items:center;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:90;
}
.nav-scrim.is-visible{ opacity:1; pointer-events:auto; }

@media (max-width: 1023px){
  .site-nav{
    /* `inset:0 auto 0 0` na regra base deixa top E bottom em 0; com height:auto
       o elemento estica e a barra virava um painel branco da altura da tela.
       Soltar o bottom devolve a altura ao conteudo. */
    bottom:auto;
    width:100%; height:auto;
    flex-direction:row;
    padding:.85rem 1.25rem;
    border-right:none;
    border-bottom:1px solid var(--gray-light);
  }
  /* ancoras (#projetos, #contato...) parariam embaixo da barra fixa */
  html{ scroll-padding-top:5rem; }
  /* a gaveta (.nav-links, z-index 95) cobria o proprio botao que a abriu:
     sem ele por cima, so restava tocar no escurecido para fechar */
  .nav-toggle{ display:flex; order:3; position:relative; z-index:96; }
  .nav-whats{ order:2; margin-left:auto; margin-right:1rem; width:40px; height:40px; }
  .nav-links{
    position:fixed; top:0; right:0;
    width:min(78vw,320px);
    height:100vh;
    height:100dvh;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.75rem;
    padding:2rem 2.5rem;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:95;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{
    writing-mode:horizontal-tb;
    transform:none;
    font-size:1.1rem;
  }
  main, .site-footer{ margin-left:0 !important; }
}

/* ==================== LAYOUT SHELL ==================== */
main, .site-footer{ margin-left:var(--nav-w); }

/* ==================== HERO ==================== */
.hero{
  position:relative;
  min-height:100vh;
  /* svh = altura menor da janela: no celular o 100vh conta com a barra de
     endereco recolhida e empurra o conteudo para fora da tela */
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:6rem clamp(1.5rem,6vw,6rem);
  overflow:hidden;
  background:var(--gray-light);
}
/* ---- carrossel de fundo do hero ----
   Os slides sao camadas empilhadas que so trocam de opacidade. O conteudo
   (titulo, texto, botoes) fica por cima e nao muda de um slide para o outro. */
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
}
.hero-slide.is-active{ opacity:1; }

.hero-slide-pattern{
  /* Tres camadas, de cima para baixo:
     1. veu branco do lado do texto — a padronagem e miuda e colorida, e o
        titulo escuro por cima dela some. Mesma ideia do veu da foto abaixo,
        so que aqui o lado direito fica quase limpo para a arte aparecer.
     2. o clareamento que antes era opacity:.6 no elemento. Como camada de
        fundo ele nao enfraquece o veu nem atrapalha o crossfade, que volta a
        ser so a opacidade do slide.
     3. a padronagem oficial da marca (pagina 6 do padronagem.pdf). */
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.5) 68%, rgba(255,255,255,.12) 100%),
    linear-gradient(rgba(241,241,241,.4), rgba(241,241,241,.4)),
    url('../assets/img/padronagem-pagina6.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* no celular o texto ocupa a largura toda, entao o veu nao pode abrir para a
   direita: vira uma camada quase uniforme */
@media (max-width:760px){
  .hero-slide-pattern{
    background-image:
      linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.86)),
      linear-gradient(rgba(241,241,241,.4), rgba(241,241,241,.4)),
      url('../assets/img/padronagem-pagina6.png');
  }
}
/* a arte ja entra clara e com fundo proprio, entao o hero nao precisa mais do
   esvanecimento que suavizava a padronagem de bolinhas anterior */
/* a arte nao e um ladrilho emendavel, entao a deriva e feita na escala: a
   imagem cresce alguns por cento e volta, sem nunca descobrir a borda */
@keyframes hero-drift{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}
.hero-slide-photo{
  background-size:cover;
  background-position:center;
  /* a foto abre um pouco enquanto esta no ar: sai do estatico sem chamar
     atencao. Vale so o tempo do slide (6s), preso a mesma classe .is-active */
  transform:scale(1.02);
  /* repete a opacidade: esta regra vem depois de .hero-slide e substituiria a
     transicao dela, matando o crossfade */
  transition:opacity .9s ease, transform 7s ease-out;
}
.hero-slide-photo.is-active{ transform:scale(1.1); }
/* veu claro do lado do texto: o titulo e escuro e a foto e de tom medio */
.hero-slide-photo::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,.35) 70%, rgba(255,255,255,.2) 100%);
}

.hero-dots{
  position:absolute;
  left:clamp(1.5rem,6vw,6rem);
  bottom:2.2rem;
  display:flex;
  gap:.55rem;
  z-index:2;
}
/* o marcador ativo vira uma pilula que se preenche no tempo do slide: mostra
   quanto falta para virar, em vez de so dizer onde voce esta */
.hero-dot{
  position:relative;
  width:.65rem; height:.65rem;
  padding:0;
  border:0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(43,44,46,.28);
  cursor:pointer;
  transition:width .45s cubic-bezier(.2,.7,.3,1), background .2s ease;
}
/* o desenho fica em 10px, mas a area clicavel vai a 44px */
.hero-dot::before{
  content:'';
  position:absolute;
  inset:-17px -6px;
}
.hero-dot:hover{ background:rgba(43,44,46,.5); }
.hero-dot.is-active{
  width:2.4rem;
  background:rgba(43,44,46,.2);
}
.hero-dot.is-active::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--ink);
  transform-origin:left;
  transform:scaleX(1);
}
@keyframes hero-dot-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }


@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
  .hero-slide-photo{ transition:none; transform:none; }
  .hero-slide-photo.is-active{ transform:none; }
}

.hero-content{ position:relative; max-width:760px; }

/* fio das cinco cores: a primeira coisa que se desenha na tela */
.hero-rule{
  display:block;
  width:78px;
  height:6px;
  margin-bottom:1.5rem;
  transform-origin:left;
  background:linear-gradient(
    to right,
    var(--yellow) 0 20%,
    var(--purple) 20% 40%,
    var(--teal) 40% 60%,
    var(--green) 60% 80%,
    var(--red) 80% 100%
  );
}
.eyebrow{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  color:var(--purple);
  font-weight:700;
}
.hero h1{
  /* Comfortaa Bold e bem mais largo que o Avenir que estava aqui antes: em
     3.6rem a segunda linha estourava os 760px do bloco e quebrava em tres */
  font-size:clamp(2.2rem,5vw,3.3rem);
  line-height:1.12;
  text-transform:uppercase;
}
/* no celular o titulo quebra em 4 linhas: mais entrelinha abre o vao onde a
   cota de "estrutura" precisa caber */
@media (max-width:760px){
  .hero h1{ line-height:1.26; }
  .hero{ padding-top:5rem; padding-bottom:4rem; }
  .hero-lead{ font-size:1.05rem; }
}
/* cada linha e uma janela: o texto sobe de dentro dela na entrada. O padding
   com margem negativa devolve o espaco que o recorte comeria do til e da
   cedilha sem deslocar o bloco. */
.hero-line{
  display:block;
  overflow:hidden;
  /* A janela precisa caber a tinta que passa do topo da caixa de linha. No
     Comfortaa Bold o A-til e o A-crase sobem ate 1.065em da base, contra um
     ascendente de .881em, ou seja .184em para fora; .24em cobre com folga.
     A margem negativa devolve esse espaco, entao o bloco nao se desloca. */
  padding:.24em 0 .16em;
  margin:-.24em 0 -.16em;
}
.hero-line > span{ display:block; }

/* "estrutura" recebe uma cota, como a de uma prancha: fio com marcacao nas
   duas pontas, desenhado da esquerda para a direita depois que o titulo assenta */
.hero-key{
  position:relative;
  font-style:normal;
  color:var(--teal);
}
.hero-key::after{
  content:'';
  position:absolute;
  left:0; right:0;
  /* colada na palavra: com o titulo quebrado em varias linhas, um recuo maior
     jogava a cota em cima da linha de baixo e virava um risco no texto */
  bottom:-.08em;
  height:.2em;
  border:3px solid var(--teal);
  border-top:0;
  transform-origin:left;
}
.hero-lead{ font-size:1.15rem; max-width:56ch; color:var(--gray-dark); }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:1.5rem; color:var(--gray-dark);
  animation:bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ==================== ENTRADA DO HERO ====================
   Um unico momento coreografado no carregamento, em cascata: fio da marca,
   olho, as duas linhas do titulo subindo, texto, botoes e por fim a cota sob
   "estrutura". Tudo vive dentro do `no-preference`: quem pede menos movimento
   recebe o estado final direto, sem nada piscando. */
@media (prefers-reduced-motion: no-preference){
  @keyframes hero-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  @keyframes hero-rise{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }
  @keyframes hero-fade-up{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes hero-cue-in{ from{ opacity:0; } to{ opacity:1; } }

  .hero-rule{ animation:hero-draw .7s cubic-bezier(.2,.7,.3,1) .1s both; }
  .hero .eyebrow{ animation:hero-fade-up .8s cubic-bezier(.16,1,.3,1) .3s both; }

  .hero-line > span{ animation:hero-rise .9s cubic-bezier(.16,1,.3,1) both; }
  .hero-line:nth-of-type(1) > span{ animation-delay:.42s; }
  .hero-line:nth-of-type(2) > span{ animation-delay:.54s; }

  /* a cota so aparece depois que a linha dela terminou de assentar */
  .hero-key::after{ animation:hero-draw .65s cubic-bezier(.2,.7,.3,1) 1.15s both; }

  .hero-lead{ animation:hero-fade-up .8s cubic-bezier(.16,1,.3,1) .95s both; }
  .hero-actions .btn{ animation:hero-fade-up .7s cubic-bezier(.16,1,.3,1) both; }
  .hero-actions .btn:nth-child(1){ animation-delay:1.12s; }
  .hero-actions .btn:nth-child(2){ animation-delay:1.2s; }

  .hero-dots{ animation:hero-fade-up .7s ease 1.45s both; }
  .scroll-cue{ animation:hero-cue-in .8s ease 1.6s both, bounce 2s 2.4s infinite; }

  /* movimento de fundo, continuo e lento */
  .hero-slide-pattern{ animation:hero-drift 70s ease-in-out infinite alternate; }
  .hero-dot.is-active::after{ animation:hero-dot-fill 6s linear both; }
  /* o carrossel pausa no hover (ver stopHero no main.js); a barrinha acompanha */
  .hero:hover .hero-dot.is-active::after{ animation-play-state:paused; }
}

/* ==================== SECTIONS ==================== */
/* o padding vertical de duas secoes vizinhas se soma, entao 6rem+6rem
   abria um vao de ~190px entre elas; 4rem+4rem mantem o ar sem o buraco */
.section{ padding:clamp(3rem,5vw,4rem) clamp(1.5rem,6vw,6rem); }
.section-yellow{ background:var(--yellow); }

/* Secoes com fundo proprio e empilhadas no fluxo normal. (Existiu aqui um
   efeito de "sticky" que travava Projetos no topo enquanto as secoes seguintes
   subiam por cima; foi removido a pedido.) */
.section-overlap{
  position:relative;
  z-index:1;
  background:var(--paper);
}
.section-overlap.section-yellow{ background:var(--yellow); }
.site-footer{ position:relative; z-index:1; }
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head h2{
  font-size:var(--title-size);
  text-transform:uppercase;
}
.section-head p{ color:var(--gray-dark); font-size:1.05rem; }
.section-yellow .section-head p{ color:#4a3d05; }

/* ==================== TABS / PROJECTS ==================== */
.tabs{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.tab{
  background:#fff;
  border:2px solid transparent;
  padding:.7em 1.6em;
  border-radius:999px;
  font-family:var(--font-head);
  font-weight:700;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em;
  cursor:pointer;
  color:var(--ink);
}
.tab.is-active{ border-color:var(--ink); }

/* ---- trilho horizontal ----
   O catalogo cresce, entao o painel rola para o lado. A rolagem e nativa
   (overflow-x + scroll-snap): funciona com trackpad, toque e teclado sem JS —
   as setas so empurram esse mesmo container. */
.project-panel[hidden]{ display:none; }

.project-rail{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* sangra ate a borda direita da tela: os cards cortados no limite sao o
     aviso de que existe mais coisa para o lado, sem precisar de sombra */
  margin-right:calc(-1 * clamp(1.5rem,6vw,6rem));
  padding-right:clamp(1.5rem,6vw,6rem);
  padding-bottom:2px;
  /* a barra nativa duplicaria a regua do rodape */
  scrollbar-width:none;
}
.project-rail::-webkit-scrollbar{ display:none; }
.project-rail:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:4px;
}
.project-rail > .project-card{
  flex:0 0 clamp(255px,31vw,430px);
  scroll-snap-align:start;
}

.project-panel-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.5);
  border-radius:var(--radius);
  padding:3rem;
  text-align:center;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* card = so a foto; o texto aparece no hover/foco, por cima de um veu escuro */
.project-card{
  position:relative;
  display:block;
  margin:0;
  padding:0;
  border:0;
  width:100%;
  aspect-ratio:4/3;
  background:#fff;
  border-radius:var(--radius-sm);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
}
/* nada de levitar: quem se move e a foto por dentro do proprio recorte */
.project-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.project-card:hover img,
.project-card:focus-visible img{ transform:scale(1.06); }

.project-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.15rem;
  padding:1.4rem 1.5rem;
  color:#fff;
  /* o veu escuro: transparente em repouso, some/aparece junto com o texto */
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 55%, rgba(0,0,0,.15));
  opacity:0;
  transition:opacity .25s ease;
}
.project-card:hover .project-overlay,
.project-card:focus-visible .project-overlay{ opacity:1; }

.project-overlay strong{
  font-family:var(--font-head);
  font-size:clamp(1.05rem,1.4vw,1.5rem);
  font-weight:700;
  line-height:1.2;
}

.project-place{ font-size:.85rem; opacity:.85; }
.project-count{
  margin-top:.6rem;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  opacity:.8;
}

/* marca "+" no canto: sinaliza que o card abre alguma coisa mesmo em repouso,
   e gira junto com o hover, igual a marca do menu */
.project-plus{
  position:absolute;
  right:1.1rem;
  bottom:1.1rem;
  z-index:1;
  width:26px; height:26px;
  /* sem pastilha branca atras: virava adesivo colado na foto. A sombra sozinha
     ja segura a marca em cima de fotos claras */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.project-card:hover .project-plus,
.project-card:focus-visible .project-plus{ transform:rotate(180deg); }

@media (max-width:560px){
  .project-rail > .project-card{ flex-basis:min(80vw,340px); }
}

/* ---- rodape do trilho: regua + indice + setas ----
   Uma escala graduada aguenta 40 projetos; um punhado de bolinhas nao. O
   cursor colorido mostra ao mesmo tempo onde voce esta e o quanto do catalogo
   cabe na tela — a largura dele e a fracao visivel. */
.rail-foot{
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2.25rem);
  margin-top:1.5rem;
}
.rail-scale{
  position:relative;
  flex:1;
  height:8px;
  /* tracinhos de regua a cada 22px */
  background:
    repeating-linear-gradient(to right,
      rgba(43,44,46,.3) 0 1px, transparent 1px 22px),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(43,44,46,.22) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  /* clicavel e arrastavel como barra de rolagem (ver main.js) */
  cursor:pointer;
  touch-action:none;
  user-select:none;
}
/* 8px e pouco para acertar com o mouse ou o dedo: a area de toque cresce
   para cima e para baixo sem mudar o desenho */
.rail-scale::after{ content:""; position:absolute; inset:-14px 0; }
.rail-scale-thumb{ cursor:grab; z-index:1; }
.rail-scale.is-dragging,
.rail-scale.is-dragging .rail-scale-thumb{ cursor:grabbing; }
/* durante o arraste o cursor segue o ponteiro sem atraso */
.rail-scale.is-dragging .rail-scale-thumb{ transition:none; }
.rail-scale-thumb{
  position:absolute;
  top:0;
  height:100%;
  left:var(--thumb-left,0%);
  width:var(--thumb-width,25%);
  min-width:26px;
  background:linear-gradient(
    to right,
    var(--yellow) 0 20%,
    var(--purple) 20% 40%,
    var(--teal) 40% 60%,
    var(--green) 60% 80%,
    var(--red) 80% 100%
  );
  transition:left .25s ease, width .25s ease;
}
.rail-count{
  display:flex;
  align-items:baseline;
  gap:.35rem;
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.rail-count i{ font-style:normal; opacity:.4; }
.rail-count span:last-child{ opacity:.55; }

.rail-arrows{ display:flex; gap:.5rem; }
.rail-arrow{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  padding:0;
  border:2px solid var(--ink);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.rail-arrow:hover{ background:var(--ink); color:#fff; }
.rail-arrow[aria-disabled="true"]{
  opacity:.28;
  cursor:default;
  background:transparent;
  color:var(--ink);
}

@media (max-width:560px){
  .rail-foot{ gap:1rem; }
  .rail-arrow{ width:40px; height:40px; }
}

/* rolagem suave so para quem nao pediu menos movimento */
@media (prefers-reduced-motion: no-preference){
  .project-rail{ scroll-behavior:smooth; }
}
@media (prefers-reduced-motion: reduce){
  .rail-scale-thumb{ transition:none; }
}

/* em telas de toque nao existe hover: mostra o texto sempre */
@media (hover: none){
  .project-overlay{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .project-card img,
  .project-plus{ transition:none; }
  .project-card:hover img,
  .project-card:focus-visible img{ transform:none; }
  .project-card:hover .project-plus,
  .project-card:focus-visible .project-plus{ transform:none; }
}

/* ==================== GALERIA (modal) ==================== */
body.has-modal{ overflow:hidden; }

.gallery{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.gallery[hidden]{ display:none; }

.gallery-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}
.gallery-dialog{
  position:relative;
  z-index:1;
  width:min(880px, 100%);
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  border-radius:var(--radius);
}
.gallery-close{
  position:absolute;
  top:.5rem; right:.75rem;
  z-index:2;
  width:2.25rem; height:2.25rem;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}
.gallery-close:hover{ background:rgba(0,0,0,.75); }

.gallery-stage{ position:relative; background:#000; }
.gallery-photo{
  display:block;
  width:100%;
  max-height:65vh;
  object-fit:contain;
}
.gallery-photo-caption{
  margin:0;
  padding:.6rem 1rem;
  background:#000;
  color:rgba(255,255,255,.75);
  font-size:.85rem;
  text-align:center;
}

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:2.75rem; height:2.75rem;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.gallery-nav:hover{ background:rgba(0,0,0,.7); }
.gallery-prev{ left:.75rem; }
.gallery-next{ right:.75rem; }

.gallery-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  padding:.9rem;
}
.gallery-dot{
  width:.6rem; height:.6rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--gray-light);
  cursor:pointer;
}
.gallery-dot.is-active{ background:var(--ink); }

.gallery-info{ padding:0 1.75rem 1.75rem; }
.gallery-info h3{
  font-size:1.4rem;
  margin-bottom:.2rem;
}
.gallery-place{
  color:var(--gray-dark);
  margin-bottom:1rem;
}
.gallery-description{
  color:var(--gray-dark);
  line-height:1.6;
  white-space:pre-line;
}

@media (max-width:600px){
  .gallery{ padding:0; }
  .gallery-dialog{
    max-height:100vh;
    max-height:100dvh;
    border-radius:0;
  }
  .gallery-photo{ max-height:46svh; }
  .gallery-info{ padding:0 1.15rem 1.5rem; }
  .gallery-info h3{ font-size:1.15rem; }
  /* dedo, nao mouse: setas e fechar maiores e mais afastados da borda */
  .gallery-nav{ width:3rem; height:3rem; }
  .gallery-close{ width:2.75rem; height:2.75rem; top:.75rem; right:.75rem; }
  .gallery-dot{ width:.7rem; height:.7rem; }
}

/* ==================== SERVICES ==================== */
/* Blocos de segundo nivel dentro de uma secao (Serviços, Clientes). Recebem
   o mesmo respiro por cima para marcar a virada de assunto sem precisar de
   outra faixa de fundo. */
/* Bloco de segundo nivel dentro de uma secao. A regua no topo repete a que ja
   fecha a bio, entao os assuntos de "Quem somos" ficam separados do mesmo
   jeito. A margem abre o vao antes do fio, o padding abre o vao depois dele. */
.subsection{
  margin-block:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--gray-light);
}
.subsection-title{
  text-transform:uppercase;
  font-size:var(--title-size);
  margin-bottom:1.5rem;
}
/* a linha de apoio do titulo fica colada nele: o espaco que conta e o de baixo,
   ja dado pela margem do proprio titulo */
.subsection-title + .subsection-lead{ margin-top:-1rem; }
.subsection-lead{ color:var(--gray-dark); font-size:1.05rem; max-width:640px; }

/* Grade de 4 colunas: o primeiro card (Arquitetura) ocupa duas e deita o
   icone ao lado do texto; os outros seis empilham icone, titulo e texto. */
.service-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.25rem;
}
/* O card inteiro na cor da marca. A tinta vem junto com o fundo, pelo par
   --accent/--on-accent, entao nao existe combinacao que caia abaixo do AA. */
.service-card{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  border-radius:calc(var(--radius) + 8px);
  padding:clamp(1.5rem,2.5vw,2.25rem);
  background:var(--accent, var(--purple));
  color:var(--on-accent, #fff);
}
.service-card:first-child{
  grid-column:span 2;
  flex-direction:row;
  align-items:center;
  gap:1.75rem;
}
/* quadrado do icone sempre branco, com o icone na cor do card */
.service-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:16px;
  background:#fff;
  color:var(--accent, var(--purple));
}
.service-body{ display:flex; flex-direction:column; gap:.6rem; }
.service-card h4{
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0;
}
/* herda a tinta do card: o cinza de antes sumia sobre fundo colorido */
.service-card p{ color:inherit; font-size:.95rem; line-height:1.6; margin:0; }
.service-card:first-child p{ font-size:1.02rem; }

@media (max-width:1100px){
  .service-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .service-grid{ grid-template-columns:1fr; gap:1rem; }
  .service-card:first-child{ grid-column:auto; flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .service-icon{ width:48px; height:48px; border-radius:14px; }
}

/* ==================== QUEM SOMOS — texto institucional ====================
   Numero de anos como ancora a esquerda, coluna de leitura estreita a direita.
   Sem a ancora o texto vira um paragrafo largo solto no meio da secao. */
.about{
  display:grid;
  grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
  margin-bottom:clamp(3rem,6vw,4.5rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--gray-light);
}
.about-mark{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding-top:.4rem;
  border-left:6px solid var(--yellow);
  padding-left:1.4rem;
}
.about-years{
  font-family:var(--font-head);
  font-size:clamp(3.2rem,7vw,5rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.03em;
}
.about-years-label{
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.5;
  color:var(--gray-dark);
}
.about-text p{
  color:var(--gray-dark);
  font-size:1rem;
  line-height:1.75;
  max-width:62ch;
  margin:0 0 1.15rem;
}
.about-text p:last-child{ margin-bottom:0; }
/* primeiro paragrafo em corpo maior e cor cheia: entrada da leitura */
.about-text .about-lead{
  color:var(--ink);
  font-size:clamp(1.05rem,1.9vw,1.25rem);
  line-height:1.6;
}

@media (max-width:860px){
  .about{ grid-template-columns:1fr; gap:2rem; }
  .about-mark{
    flex-direction:row;
    align-items:baseline;
    gap:1rem;
    border-left:0;
    border-top:6px solid var(--yellow);
    padding:1rem 0 0;
  }
  .about-years-label{ text-align:left; }
  .about-text p{ max-width:none; }
}

/* ==================== EQUIPE — "carimbo" ====================
   Bloco de identificacao de prancha tecnica: retrato de um lado, ficha de
   credenciais do outro, separados por um fio. Assimetrico de proposito — uma
   pessoa so centralizada deixava a secao inteira vazia. */
.team{
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
  margin-bottom:3.5rem;
}

/* ---- retrato ----
   Circulo de novo, mas o realce sai de tras da foto e vira um anel segmentado
   ao redor dela. O disco amarelo antigo encostava no amarelo do fundo da
   propria foto e as duas coisas viravam uma mancha so; com o anel afastado e
   quebrado em cinco arcos isso nao acontece. */
.team-portrait{
  position:relative;
  justify-self:center;
  width:min(330px,100%);
  aspect-ratio:1;
  margin:0;
}
/* cinco arcos com folga entre eles: 16% de cor, 4% de vao */
.team-ring{
  position:absolute;
  inset:-22px;
  border-radius:50%;
  background:conic-gradient(
    from -90deg,
    var(--yellow) 0 16%, transparent 16% 20%,
    var(--purple) 20% 36%, transparent 36% 40%,
    var(--teal)   40% 56%, transparent 56% 60%,
    var(--green)  60% 76%, transparent 76% 80%,
    var(--red)    80% 96%, transparent 96% 100%
  );
  /* vaza o miolo e sobra so a faixa externa de 7px */
  -webkit-mask:radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
          mask:radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
/* um arco de avanco no hover: gira exatamente um segmento */
.team:hover .team-ring{ transform:rotate(72deg); }

/* mascara separada da img para o zoom acontecer dentro do circulo */
.team-photo-mask{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 22px 45px -28px rgba(43,44,46,.7);
}
.team-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  filter:saturate(.94);
  transform:scale(1.01);
  transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.team:hover .team-photo{ transform:scale(1.07); filter:saturate(1.06); }

/* ---- ficha ---- */
.team-overline{
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--gray-dark);
  margin-bottom:1.4rem;
}
.team-name{
  font-family:var(--font-head);
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:.35rem;
}
/* o sobrenome em peso alto: contraste dentro da mesma linha, sem virar duas */
.team-name em{
  display:block;
  font-style:normal;
  font-weight:700;
}
.team-role{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:1.05rem;
  color:var(--gray-dark);
  margin-bottom:2.4rem;
}
.team-plus{
  width:17px; height:17px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.team:hover .team-plus{ transform:rotate(180deg); }

/* linhas da ficha: rotulo curto a esquerda, valor a direita, fio no meio */
.team-specs{ margin:0 0 2.4rem; }
.team-spec{
  display:grid;
  grid-template-columns:minmax(120px,.4fr) 1fr;
  gap:.5rem 1.5rem;
  align-items:baseline;
  padding:1rem 0 1rem 1.1rem;
  border-top:1px solid var(--gray-light);
  position:relative;
}
.team-spec:last-child{ border-bottom:1px solid var(--gray-light); }
/* marcador na cor da linha, alinhado ao topo do rotulo */
.team-spec::before{
  content:'';
  position:absolute;
  left:0;
  top:1.35rem;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent);
}
.team-spec dt{
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-dark);
}
.team-spec dd{
  margin:0;
  font-size:1.02rem;
  line-height:1.4;
}

.team-note{
  max-width:46ch;
  color:var(--gray-dark);
  font-size:.98rem;
  line-height:1.6;
  margin:0;
}

/* reveal escalonado quando a secao entra na tela */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (max-width:860px){
  .team{
    grid-template-columns:1fr;
    gap:2.5rem;
    text-align:center;
  }
  .team-portrait{ width:min(260px,64vw); }
  .team-role{ justify-content:center; }
  .team-spec{
    grid-template-columns:1fr;
    justify-items:center;
    padding-left:0;
    gap:.25rem;
  }
  .team-spec::before{ display:none; }
  .team-note{ margin-inline:auto; }
}

@media (prefers-reduced-motion: reduce){
  .team-ring, .team-photo, .team-plus, [data-reveal]{ transition:none; }
  .team:hover .team-ring{ transform:none; }
  .team:hover .team-photo{ transform:scale(1.01); filter:saturate(.94); }
  .team:hover .team-plus{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* Faixa de clientes: rolagem infinita da direita para a esquerda.
   A lista e renderizada duas vezes (.clients-row) e a faixa desliza -50%,
   ou seja, exatamente a largura de uma copia — no fim do ciclo a segunda
   copia esta na posicao inicial da primeira, entao nao ha salto visivel. */
.clients-marquee{
  overflow:hidden;
  margin-bottom:clamp(2rem,6vw,4rem);
  /* suaviza a entrada/saida dos logos nas bordas */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients-track{
  display:flex;
  width:max-content;
  animation:clients-scroll 60s linear infinite;
}
.clients-row{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:3rem;
  /* o padding faz o vao da emenda entre as duas copias ser igual ao gap */
  padding-right:3rem;
}
.clients-row img{
  flex:0 0 auto;
  /* limita altura E largura: logos muito largos (o Spoleto e 366x38, quase
     10:1) esticavam ate ~540px so com o limite de altura e dominavam a faixa */
  max-height:56px;
  max-width:150px;
  width:auto;
  height:auto;
  object-fit:contain;
}
@keyframes clients-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:560px){
  /* 3rem de vao com logo de 150px cabia so 2 marcas por tela */
  .clients-row{ gap:1.75rem; padding-right:1.75rem; }
  .clients-row img{ max-height:40px; max-width:110px; }
}

.counters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:1.5rem;
  text-align:center;
  background:var(--gray-light);
  border-radius:var(--radius);
  padding:2.5rem 1.5rem;
}
.counter strong{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(2rem,4vw,2.8rem);
  color:var(--purple);
}
.counter span{ color:var(--gray-dark); text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; }

/* ==================== CONTACT ==================== */
/* Duas colunas: texto + cartoes de contato a esquerda, formulario num cartao
   a direita. Mantem o fundo amarelo da secao; cartoes brancos por cima. */
.contact-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}

.contact-side{ display:flex; flex-direction:column; }
.contact-eyebrow{
  display:flex;
  align-items:center;
  gap:.9em;
  margin:0 0 1.25rem;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.contact-eyebrow::before{ content:""; width:2.2em; height:2px; background:currentColor; }
/* caixa alta e mesmo tamanho dos titulos das outras secoes */
.contact-title{
  font-size:var(--title-size);
  text-transform:uppercase;
  line-height:1.15;
  max-width:22ch;
  margin-bottom:1.25rem;
}
.contact-lead{ font-size:1.1rem; color:#4a3d05; max-width:34rem; margin-bottom:2.25rem; }

.contact-info{ display:flex; flex-direction:column; gap:.9rem; }
.contact-info li{
  display:flex;
  align-items:center;
  gap:1.1rem;
  background:#fff;
  border-radius:999px;
  padding:.85rem 1.5rem .85rem .85rem;
}
.contact-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  color:#fff;
}
/* tons um pouco mais fechados que os da marca no verde e no amarelo: com o
   puro o icone branco quase some */
.contact-icon-whats{ background:#1FA855; }
.contact-icon-mail{ background:#C9A00F; }
.contact-icon-insta{ background:var(--purple); }
.contact-icon-pin{ background:var(--red); }
.contact-text{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.contact-text strong{ text-transform:uppercase; font-size:.72rem; color:var(--gray-dark); letter-spacing:.14em; }
.contact-text a{ font-weight:700; font-size:1.1rem; }
.contact-text a:hover{ color:var(--purple); }
.contact-copy{
  flex:none;
  font:inherit;
  font-weight:700;
  font-size:.85rem;
  padding:.5em 1.1em;
  border-radius:999px;
  border:1px solid var(--gray);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.contact-copy:hover{ background:var(--gray-light); border-color:var(--gray-dark); }

.contact-form{
  background:#fff;
  border-radius:calc(var(--radius) + 8px);
  padding:clamp(1.5rem,3.5vw,3rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem 1.25rem;
}
.contact-full{ grid-column:1 / -1; }
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-dark);
}
.contact-form input,
.contact-form textarea{
  font-family:var(--font-body);
  font-size:1rem;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
  padding:1em 1.1em;
  border-radius:12px;
  border:1px solid #E2E2E2;
  background:var(--gray-light);
  resize:vertical;
  transition:border-color .15s ease, background .15s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#8C8E90; }
.contact-form input:focus,
.contact-form textarea:focus{ outline:2px solid var(--teal); outline-offset:1px; background:#fff; }
.contact-form textarea{ min-height:10rem; }

.contact-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }
.contact-actions .btn{ padding:1em 2em; font-size:1rem; }
.contact-actions .btn-primary{ background:var(--yellow); color:var(--on-yellow); }
.contact-actions .btn-primary:hover{ box-shadow:0 8px 20px rgba(233,191,21,.45); }
.contact-actions .btn-whats{ width:auto; color:var(--ink); }
.contact-actions .btn:disabled{ opacity:.6; cursor:wait; transform:none; }

.form-note{ font-weight:700; color:#6F7700; margin:0; }
/* verde e claro demais para um aviso de erro; o vermelho da marca no fundo
   branco do cartao bate 4.6 de contraste */
.form-note.is-error{ color:var(--red); }
.contact-hint{ margin:0; font-size:.9rem; color:var(--gray-dark); }
/* armadilha de robo: fora da tela, mas nao display:none nem hidden — campo
   escondido desse jeito alguns robos ignoram, e leitor de tela tambem pularia */
.form-trap{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width: 900px){
  .contact-wrap{ grid-template-columns:1fr; }
  .contact-title{ max-width:none; }
}
@media (max-width: 560px){
  .contact-form{ grid-template-columns:1fr; padding:1.25rem; }
  .contact-info li{ padding:.7rem 1.1rem .7rem .7rem; gap:.9rem; }
  .contact-icon{ width:42px; height:42px; }
  .contact-actions .btn{ width:100%; }
}

/* ==================== FOOTER ==================== */
/* cinza medio no lugar do --ink: o rodape para de virar um bloco preto sob a
   faixa amarela. Branco sobre #696B6D da 5.3:1, ainda AA para texto normal. */
.site-footer{ background:var(--gray-dark); color:#fff; padding:4rem clamp(1.5rem,6vw,6rem) 2rem; }
/* Versao do lockup feita para fundo escuro: o lettering foi passado para
   branco no proprio arquivo e o "+" ficou colorido. Nada de brightness/invert
   aqui — o filtro achataria justamente as cinco cores da marca. A sombra
   afasta o desenho do cinza do rodape sem precisar de caixa em volta. */
.footer-logo{
  display:block;
  width:auto;
  max-width:132px;
  height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(3, 1fr);
  gap:2rem;
  margin-bottom:3rem;
}
.footer-grid h4{
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.1em;
  color:rgba(255,255,255,.72);
  margin-bottom:1rem;
}
.footer-grid a{ display:block; padding:.35rem 0; color:#fff; opacity:.85; }
.footer-grid a:hover{ opacity:1; color:var(--teal); }
/* o seletor generico acima transforma todo link do rodape em bloco: o botao
   precisa voltar a ser flex para centralizar o rotulo. */
.footer-grid a.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:.6em 1.4em;
  opacity:1;
}
.footer-grid a.btn-whats:hover{ color:#fff; }
.footer-copy{ text-align:center; color:rgba(255,255,255,.72); font-size:.8rem; margin:0; }

/* e-mail e telefone sao palavras longas sem espaco: em coluna estreita
   vazariam para fora do card em vez de quebrar */
.footer-grid a, .contact-info a, .contact-info li{ overflow-wrap:anywhere; }

@media (max-width: 720px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .site-footer{ padding-top:3rem; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns:1fr; gap:1.75rem; margin-bottom:2rem; }
  .footer-logo{ max-width:112px; }
}