/* =========================================================
   BM7WEB: folha de estilo única
   Sem dependências externas. Editar as variáveis abaixo
   muda o visual do site inteiro.
   ========================================================= */

:root{
  --red:        #e50505;   /* vermelho da marca (vem do logo) */
  --red-dark:   #b70404;
  --ink:        #0c0c0c;   /* preto quase puro */
  --ink-soft:   #2f2e2e;
  --grey:       #6b6b6b;
  --line:       #e6e6e6;
  --paper:      #ffffff;
  --paper-alt:  #f7f7f7;

  --wrap:       1180px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --radius:     4px;
  --ease:       cubic-bezier(.22,.61,.36,1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ line-height:1.1; letter-spacing:-.02em; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }

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

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.75rem 1rem;
}
.skip:focus{ left:0; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px rgba(0,0,0,.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px;
}
.brand img{ width:160px; height:auto; }

.nav ul{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  display:block; padding:.55rem .9rem;
  font-size:.9375rem; font-weight:600; text-decoration:none;
  color:var(--ink-soft); border-radius:var(--radius);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover,
.nav a.is-active{ color:var(--red); }
.nav .nav-cta{
  background:var(--ink); color:#fff; margin-left:.5rem;
}
.nav .nav-cta:hover{ background:var(--red); color:#fff; }

.nav-toggle{
  display:none; width:44px; height:44px; padding:10px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span + span{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; inset:76px 0 auto 0;
    background:var(--paper); border-bottom:1px solid var(--line);
    display:none; padding:1rem var(--gutter) 1.5rem;
  }
  .nav.is-open{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav a{ padding:.9rem .25rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav .nav-cta{ margin:1rem 0 0; text-align:center; border-radius:var(--radius); border-bottom:0; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding:clamp(5rem, 14vh, 9rem) 0 clamp(4rem, 10vh, 7rem);
}
.hero-bg{
  position:absolute; inset:0;
  background:url("../img/hero.jpg") center/cover no-repeat;
}
/* véu escuro por cima da textura, para o texto ficar sempre legível */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(12,12,12,.94) 0%, rgba(12,12,12,.72) 48%, rgba(12,12,12,.42) 100%),
    radial-gradient(70% 90% at 78% 12%, rgba(229,5,5,.30), transparent 62%);
}
.hero-inner{ position:relative; }
.eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin:0 0 1rem;
}
.hero h1{
  font-size:clamp(2.75rem, 7.5vw, 5.5rem);
  max-width:16ch; margin-bottom:.35em;
}
.hero h1 em{
  font-style:normal; color:var(--red);
  position:relative; white-space:nowrap;
}
.hero .lede{
  font-size:clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  color:rgba(255,255,255,.72); max-width:46ch; margin-bottom:2rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:3rem; }

.btn{
  display:inline-block; padding:.9rem 1.75rem;
  font-size:.9375rem; font-weight:700; text-decoration:none;
  border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease),
    background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn-ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ border-color:#fff; }

.tags{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.14);
}
.tags li{
  font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  padding:.35rem .8rem; border-radius:100px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.7);
}

/* ---------- seções ---------- */
.section{ padding:clamp(4rem, 11vh, 7.5rem) 0; }
.section-dark{ background:var(--ink); color:#fff; }

.section-head{ max-width:46ch; margin-bottom:clamp(2.5rem, 6vh, 4rem); }
.section-head h2,
.col-head h2{ font-size:clamp(1.875rem, 1.4rem + 2vw, 3rem); }
.sub{ font-size:1.125rem; color:var(--grey); margin:0; }
.section-dark .sub{ color:rgba(255,255,255,.6); }

.grid-2{
  display:grid; gap:clamp(2rem, 5vw, 4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .grid-2{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; }
  .col-head{ position:sticky; top:110px; }
}
.col-body .big{
  font-size:clamp(1.1875rem, 1.1rem + .6vw, 1.5rem);
  line-height:1.45; letter-spacing:-.01em; color:var(--ink);
}
.col-body p:not(.big){ color:var(--grey); }

/* ---------- cards de serviço ---------- */
.cards{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  position:relative; padding:2.25rem 1.75rem 2rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover{
  border-color:var(--red);
  background:rgba(229,5,5,.06);
  transform:translateY(-4px);
}
.card-num{
  display:block; font-size:.75rem; font-weight:700;
  letter-spacing:.18em; color:var(--red); margin-bottom:1rem;
}
.card h3{ font-size:1.375rem; margin-bottom:1.25rem; }
.card ul li{
  padding:.55rem 0; font-size:.9375rem;
  color:rgba(255,255,255,.66);
  border-top:1px solid rgba(255,255,255,.09);
}

/* ---------- trabalhos / carrossel ---------- */
.section-works{ background:var(--paper-alt); overflow:hidden; }

.carousel{
  position:relative;
  /* altura da área de imagem, usada como medida explícita no <img>,
     porque percentual dentro do grid não resolve de forma confiável */
  --altura-slide:clamp(240px, 40vh, 420px);
}

/* A trilha usa scroll-snap: o arrasto no celular sai de graça,
   sem biblioteca e sem listener de touch. */
.track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  outline:none;
}
.track::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion: reduce){ .track{ scroll-behavior:auto; } }

/* O slide ocupa a largura inteira da trilha (senão o vizinho vaza na
   borda e o snap desalinha). Quem centraliza o conteúdo na mesma
   coluna do resto da página é o padding, não um max-width. */
.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:grid; gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
  width:100%;
  padding-inline:max(4.5rem, calc((100% - var(--wrap)) / 2));
}
@media (min-width:900px){
  .slide{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
}

.slide-img{
  margin:0;
  display:flex; align-items:center; justify-content:center;
  height:var(--altura-slide);
}
/* max-height em medida absoluta (não %): assim a arte inteira aparece,
   sem corte, seja qual for a proporção do arquivo. */
.slide-img img{
  width:auto; height:auto;
  max-width:100%;
  max-height:var(--altura-slide);
}

.slide-info h3{
  font-size:clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  margin-bottom:.35em;
}
.slide-info p{ color:var(--grey); margin-bottom:1.25rem; }

.tags-light{ padding-top:0; border-top:0; }
.tags-light li{ background:rgba(12,12,12,.06); color:var(--ink-soft); }

/* setas */
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line); border-radius:50%;
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), opacity .2s var(--ease);
}
.car-btn svg{ width:22px; height:22px; }
.car-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.car-btn:focus-visible{ outline:3px solid rgba(229,5,5,.35); outline-offset:2px; }
.car-prev{ left:clamp(.5rem, 2vw, 1.5rem); }
.car-next{ right:clamp(.5rem, 2vw, 1.5rem); }

/* bolinhas */
.dots{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:clamp(1.5rem, 4vh, 2.5rem);
}
.dots button{
  width:9px; height:9px; padding:0;
  background:rgba(12,12,12,.2); border:0; border-radius:50%;
  cursor:pointer;
  transition:background-color .25s var(--ease), width .25s var(--ease);
}
.dots button[aria-selected="true"]{ background:var(--red); width:26px; border-radius:100px; }
.dots button:focus-visible{ outline:3px solid rgba(229,5,5,.35); outline-offset:3px; }

/* No celular as setas sobrepostas roubariam espaço da imagem,
   descem para a mesma linha das bolinhas. */
@media (max-width:899px){
  .carousel{
    display:flex; flex-wrap:wrap;
    justify-content:center; align-items:center;
    column-gap:.75rem; row-gap:clamp(1.5rem, 4vh, 2.5rem);
  }
  .track{ flex:0 0 100%; order:1; }
  .slide{ padding-inline:var(--gutter); }
  .car-btn{ position:static; transform:none; }
  .car-prev{ order:2; }
  .dots{ order:3; margin-top:0; }
  .car-next{ order:4; }
}

/* ---------- clientes ---------- */
/* Linhas desenhadas nas próprias células (e não via gap colorido):
   assim as sobras da última fileira ficam brancas, sem blocos cinza. */
.brands{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  background:var(--paper);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.brands li{
  display:grid; place-items:center;
  padding:2rem 1rem; min-height:148px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* Os logos originais são cinza-claro sobre fundo branco e quase somem.
   invert → brightness → invert escurece só os traços e mantém o fundo
   branco intacto (branco puro não é afetado pelo brightness invertido). */
.brands img{
  width:130px;
  filter:invert(1) brightness(2.6) invert(1);
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
.brands li:hover img{
  filter:invert(1) brightness(4.6) invert(1);
  transform:scale(1.06);
}

/* ---------- rodapé ---------- */
.site-footer{
  background:var(--ink); color:rgba(255,255,255,.55);
  padding:3rem 0;
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.5rem;
}
.footer-logo{ width:150px; }
.copy{ margin:0; font-size:.875rem; }

/* ---------- animação de entrada ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}