/* =========================================================
   MOTORINDUSTRIAL — DESIGN TOKENS
   Conceito: identidade técnica alinhada à logomarca oficial —
   preto/grafite de fundo, aço/cromado como estrutura neutra,
   e o duo azul + vermelho (as duas cores do símbolo da marca)
   como assinatura de destaque e ação.
   ========================================================= */
:root{
  /* Cor — base preta/grafite (estrutura) */
  --graphite-900:#0A0E15;
  --graphite-800:#121926;
  --graphite-700:#1C2534;

  /* Cor — cinza metálico / aço (cromado da logo) */
  --steel-700:#3E4753;
  --steel-500:#7B8494;
  --steel-300:#B7BEC9;

  /* Cor — azul (INDUSTRIAL) */
  --blue-700:#0E3A66;
  --blue-600:#1B5C9E;
  --blue-500:#3078C2;
  --blue-300:#8FC0EA;

  /* Cor — vermelho (MOTOR / bandeira do símbolo) */
  --red-700:#7A171B;
  --red-600:#AE2126;
  --red-500:#D5333A;
  --red-300:#F0A3A6;

  /* Cor — neutros claros */
  --paper-50:#F5F6F8;
  --paper-100:#E9ECF0;
  --ink-900:#12161C;
  --ink-600:#4B5460;

  --whatsapp:#25D366;
  --success:#3A8A4E;
  --danger:#C24444;

  /* Aliases usados nos componentes (mantêm o mesmo papel visual
     de antes, agora resolvendo para a nova paleta azul/vermelho) */
  --accent-500:var(--blue-500);
  --accent-600:var(--blue-600);
  --accent-strong:var(--red-600);

  /* Tipografia */
  --font-display:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* Layout */
  --max-width:1220px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:22px;
  --gap:1.5rem;

  --shadow-md:0 12px 30px -12px rgba(18,22,28,0.25);
  --shadow-lg:0 24px 60px -20px rgba(18,22,28,0.35);
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--ink-900);background:var(--paper-50);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:.01em;}
p{margin:0;line-height:1.65;}
ul{list-style:none;margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
input,textarea{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

:focus-visible{outline:3px solid var(--blue-300);outline-offset:3px;}

.container{max-width:var(--max-width);margin:0 auto;padding:0 10px;}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-sm);border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(100deg, var(--blue-600) 0%, var(--blue-600) 45%, var(--red-600) 130%);
  color:#fff;
}
.btn-primary:hover{background:linear-gradient(100deg, var(--blue-700) 0%, var(--blue-700) 45%, var(--red-700) 130%);}
.btn-ghost{background:transparent;color:var(--paper-50);border-color:rgba(246,244,240,.4);}
.btn-ghost:hover{border-color:var(--blue-300);color:var(--blue-300);}
.btn-sm{padding:.6rem 1.1rem;font-size:.85rem;}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.site-header{
  position:fixed;top:18px;
  left:17px;right:17px;margin:0 auto;
  max-width:1820px;z-index:200;
  border-radius:999px;
  transition:top .3s ease;
  /* SEM backdrop-filter e SEM transform aqui */
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(10,14,21,.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  transition:background .3s ease, box-shadow .3s ease;
}

.site-header.is-scrolled{top:10px;}
.site-header.is-scrolled::before{
  background:rgba(8,11,16,.88);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
}

.header-inner{
  position:relative;z-index:1; /* fica acima do ::before */
  display:flex;align-items:center;justify-content:space-between;height:68px;
}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--paper-50);}
.logo-img{display:flex;align-items:center;justify-content:center;width:200px;height: 100px;}
/*.logo-mark{color:var(--steel-300);display:flex;}
.logo-text{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.06em;font-weight:600;}
.logo-word-motor{color:var(--red-500);}
.logo-word-industrial{color:var(--blue-300);margin-left:.15em;}
*/
.main-nav{display:flex;align-items:center;gap:2.2rem;}
.main-nav ul{display:flex;gap:2rem;}
.main-nav ul a{
  color:var(--steel-300);font-weight:500;font-size:.95rem;position:relative;padding:.3rem 0;
  transition:color .18s ease;
}
.main-nav ul a:hover{color:var(--paper-50);}
.main-nav ul a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue-300);
  transition:width .2s ease;
}
.main-nav ul a:hover::after{width:100%;}
.nav-cta{padding:.65rem 1.3rem;}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:transparent;border:none;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--paper-50);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
.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);}

/* =========================================================
   HERO (Novo Design — Baseado na Referência)
   O Hero ocupa toda a tela e a imagem de fundo é o destaque.
   ========================================================= */
.hero {
  padding:0px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;

  background-image: url('../IMG/imagem-hero.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding-top: 110px;
  padding-bottom: 170px; /* espaço reservado dentro da própria foto pro cartão flutuante */
}

/* Novo Contêiner para alinhar o conteúdo à esquerda sobre a foto */
.hero-container-content {
  width: 100%;
  position: relative;
  z-index: 5; /* Fica acima do gradiente de fade */
}

/* Efeito de Fade / Gradiente Escuro no Lado Esquerdo */
.hero-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3; /* Abaixo do texto, acima da foto */
  
  /* Gradiente linear: preto (sólido na esquerda) -> transparente (na direita) */
  background: linear-gradient(
    to right, 
    rgba(10, 14, 21, 0.95) 0%, 
    rgba(10, 14, 21, 0.8) 40%, 
    rgba(10, 14, 21, 0) 100%
  );
}

/* Garante que o texto fique focado na esquerda e não ultrapasse o fade */
.hero-content-left {
  max-width: 700px; /* Limita a largura do texto para focar no fade */
  text-align: left;
}

/* Ajustes de Tipografia */
.hero-title-large {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.8rem); /* Texto grande e impactante */
  line-height: 1.1;
  color: #ffffff; /* Texto branco puro sobre o fundo escuro */
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}
.hero-title-large .hero-title-highlight {
  color: var(--red-500); /* Vermelhopara destaque */
}
.hero-desc-bright {
  color: #e0e0e0; /* Cinza claro para descrição */
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.eyebrow-eyebrow-white {
  color: var(--blue-300); /* Mantém o azul técnico */
  opacity: 0.9;
}

/* Ajustes do Botão */
.hero-actions-left {
  display: flex;
  justify-content: flex-start;
}

.btn-icon-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}



/* Removemos a SVG de Coil e os estilos de grid antigos */
.hero-coil, .coil-path, .hero-grid, .hero-media { display: none; }

/* =========================================================
   RESPONSIVE — MOBILE (Ajuste do Fade)
   ========================================================= */
@media (max-width: 768px) {
  .logo-img{ width:200px; height:auto; }
  .header-inner{ height:80px; }
  .hero {
    background-position: center;
    padding-top: 100px;
    padding-bottom: 50px; /* era 260px — não precisa mais reservar espaço pro cartão */
  }

  .hero-overlay-gradient {
    background: rgba(8, 11, 16, 0.85);
  }

  .hero-content-left { max-width: 100%; padding: 0 10px; }
  .hero-title-large { font-size: 2.2rem; }

  .info-strip{
    background: #23262a;
    margin-top: 0; /* era -140px — a faixa sai do hero e vira seção normal */
    padding: 24px 0 0;
  }

  .info-strip-grid{
    background: #0B1524; /* sólida — não fica mais sobre a foto pra justificar o vidro */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0; /* zera o arredondamento só no mobile */
  }
  .hero-title-large { font-size: 2.2rem; }
}
.whatsapp-fab{
  position:fixed;right:28px;bottom:28px;z-index:200;
  width:58px;height:58px;border-radius:50%;background:var(--whatsapp);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:transform .2s ease;
}
.whatsapp-fab:hover{transform:scale(1.08);}
.whatsapp-tooltip{
  position:absolute;right:70px;top:50%;transform:translateY(-50%);
  background:var(--whatsapp);color:#fff;font-size:.85rem;font-weight:600;
  padding:.55rem 1rem;border-radius:999px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
.whatsapp-fab:hover .whatsapp-tooltip{opacity:1;transform:translateY(-50%) translateX(-6px);}

/* =========================================================
   INFO STRIP — cartão flutuante entre o hero e a história
   ========================================================= */
.info-strip{
  position:relative;z-index:20;
  margin-top:-140px; /* puxa o cartão pra dentro da área da foto do hero */
  padding:0 24px;
}
.info-strip-grid{
  max-width:var(--max-width);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(18,22,28,0.45);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.info-item{
  position:relative;
  padding:1.5rem 1.8rem;
  text-align:left;
  display:flex;
  align-items:center;
  gap:1.1rem;
  justify-content: center;
}

.info-item::after{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  right:0;
  width:1px;
  background:rgba(255,255,255,.16);
}

.info-item:last-child::after{
  display:none;
}

.info-index{
  font-family:var(--font-display); /* Oswald, já usada nos títulos */
  font-weight:700;
  color:#fff;
  font-size:2.6rem;
  line-height:1;
  letter-spacing:0;
  display:flex;
  align-items:flex-start;
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.info-index .info-index-highlight{
  font-size:1.5rem;
  font-weight:600;
  color:var(--red-500); /* cor distinta, puxando a identidade da marca */
  margin-left:2px;
  line-height:1.4;}
.info-item p{font-family:var(--font-mono); /* mesma fonte técnica usada nos labels do formulário */
  color:var(--paper-100);
  font-weight:500;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  line-height:1.45;
  max-width:14ch;}

/* =========================================================
   SECTION HEADINGS (shared)
   ========================================================= */
.section-heading{max-width:56ch;margin-bottom:rem;}
.section-heading.center{max-width:60ch;margin-left:auto;margin-right:auto;text-align:center;}
.section-heading h2{font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink-900);margin-bottom:.6rem;}
.section-sub{color:var(--ink-600);margin-top:.6rem;}

/* =========================================================
   NOSSA HISTÓRIA
   ========================================================= */
.historia{padding:5rem;
height: 960px; min-height: 100svh; /* Garante altura mínima de 100% da viewport */
align-items: center; justify-content: center; position: relative; display: flex; flex-direction: column; text-align: center;
}
.historia-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:center;}
.historia-text .eyebrow{color:var(--blue-600);}
.historia-text h2{font-size:clamp(2rem,3vw,3rem); margin-bottom:1.2rem;}
.historia-text p:not(.eyebrow){color:var(--ink-600);margin-bottom:1.8rem;}

/* =========================================================
   SERVIÇOS
   ========================================================= */
.servicos{padding:6rem 0;background:var(--paper-100);}
.servicos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
p.eyebrow{text-transform:uppercase;color:var(--ink-600);margin-bottom:1rem; font-size: 0.70em; text-align: center; }
.service-card{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-md);isolation:isolate;
}
h2.titulo-servicos{font-size:clamp(2rem, 3vw, 3rem);margin-bottom:2.6rem;color:var(--ink-900); text-align:center;}
.service-card-face{padding:1.6rem 1.6rem 1.8rem;}
.service-card-face h3{font-size:1.15rem;margin-bottom:.6rem;color:var(--ink-900);}
.service-card-face p{color:var(--ink-600);font-size:.92rem;}



.service-card-overlay{
  position:absolute;inset:0;padding:1.8rem;
  background:linear-gradient(165deg, var(--graphite-900) 0%, var(--blue-700) 75%, var(--red-700) 145%);
  color:var(--paper-50);
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease;
}
.overlay-tag{
  font-family:var(--font-mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;
  color:var(--blue-300);
}
.service-card-overlay ul{display:flex;flex-direction:column;gap:.6rem;}
.service-card-overlay li{font-size:.9rem;line-height:1.5;color:var(--paper-100);position:relative;padding-left:1rem;}
.service-card-overlay li::before{content:"—";position:absolute;left:0;color:var(--red-300);}
.service-card-overlay .btn{align-self:flex-start;}

.service-card:hover .service-card-overlay,
.service-card:focus-within .service-card-overlay{opacity:1;transform:translateY(0);}

.img-placeholder.small{
  width:100%;
  height:170px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-bottom:1.2rem;
  background:var(--paper-100);
  display:flex;
  align-items:center;
  justify-content:center;
}
.img-placeholder.small img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.img-placeholder.small svg{
  color:var(--blue-600);
}
/* =========================================================
   FAQ — ACCORDION
   ========================================================= */
.faq{padding:6rem 0;background:var(--paper-50);}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}

.faq-item{
  position:relative;
  background:#fff;
  border:1px solid var(--paper-100);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}

/* faixa lateral com o gradiente da marca, aparece quando o item está ativo */
.faq-item::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg, var(--blue-500), var(--red-500));
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.faq-item.active::before{transform:scaleY(1);}
.faq-item.active{border-color:var(--blue-300);box-shadow:var(--shadow-lg);}

.faq-question{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:transparent;border:none;cursor:pointer;
  padding:1.4rem 1.8rem;
  text-align:left;
  font-family:var(--font-body);font-weight:600;font-size:1.02rem;
  color:var(--ink-900);
  transition:color .18s ease;
}
.faq-question:hover{color:var(--blue-600);}
.faq-question span:first-child{flex:1;}

.faq-icon{
  flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:1.1rem;line-height:1;
  background:var(--paper-100);color:var(--ink-600);
  transition:background .25s ease, color .25s ease, transform .3s ease;
}
.faq-item.active .faq-icon{
  background:linear-gradient(135deg, var(--blue-600), var(--red-600));
  color:#fff;
  transform:rotate(180deg);
}

/* animação suave via CSS Grid (sem precisar medir altura em JS) */
/* --- ANIMAÇÃO --- */
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faq-answer > p{
  margin:0;
  padding:1rem 1.8rem 1.6rem;
  border-top:1px solid var(--paper-100);
  color:var(--ink-600);
  font-size:.95rem;
  line-height:1.6;
}
@media (max-width:768px){
  .container{ padding:0 20px; }
  .orcamento{ padding:3.5rem 0; }
  .faq-question{padding:1.2rem 1.4rem;font-size:.96rem;}
  .faq-answer > p{padding:0 1.4rem 1.3rem;}

  /* CORREÇÃO: remove a altura fixa que causava o overflow escondido */
  .historia{
    height:auto;
    min-height:auto;
    padding:3rem 1.5rem;
    display:block;           /* sai do flex centralizado */
  }
  .historia-text.eyebrow{
    margin-bottom:1.5rem;
  }
  .historia-grid{
    gap:2rem;
  }
}



/* =========================================================
   CLIENTES / CARROSSEL
   ========================================================= */
.clientes{padding:5.5rem 0;overflow:hidden;}
.clientes .section-heading{margin-bottom:2.6rem;}
.clientes-carousel{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.clientes-track{display:flex;gap:2.4rem;width:max-content;animation:scroll-clientes 50s linear infinite;}
.clientes-carousel:hover .clientes-track{animation-play-state:paused;}
.cliente-logo{
  width:170px;height:90px;border-radius:var(--radius-sm);flex:0 0 auto;
  background:#ffffff;
  border:1px solid var(--paper-100);
  display:flex;align-items:center;justify-content:center;
  padding:14px;
}
.cliente-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

@keyframes scroll-clientes{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* =========================================================
   FORMULÁRIO DE ORÇAMENTO
   ========================================================= */
.orcamento{padding: 150px;background:var(--graphite-900);padding-bottom:400px;}
.orcamento .section-heading h2{color:var(--paper-50);}
.orcamento .section-sub{color:var(--steel-300);}
.orcamento .eyebrow{color:var(--blue-300);}

.orcamento-form{
  max-width:820px;margin:0 auto;background:var(--graphite-800);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  padding:2.6rem;display:flex;flex-direction:column;gap:1.3rem;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;}
.form-field{display:flex;flex-direction:column;gap:.5rem;}
.form-field label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-300);
}
.form-field input,.form-field textarea{
  background:var(--graphite-700);border:1.5px solid rgba(255,255,255,.09);border-radius:var(--radius-sm);
  padding:.85rem 1rem;color:var(--paper-50);font-size:.95rem;resize:vertical;
  transition:border-color .18s ease;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--steel-500);}
.form-field input:focus,.form-field textarea:focus{border-color:var(--blue-300);outline:none;}
.form-field-full{width:100%;}

.form-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.form-status{font-size:.9rem;color:var(--steel-300);}
.form-status.success{color:var(--success);}
.form-status.error{color:var(--danger);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--graphite-900);color:var(--steel-300);padding-top:4rem;}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand .logo-footer{margin-bottom:1.2rem;}
.footer-social{display:flex;gap:.9rem;margin-top:1.4rem;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;color:var(--steel-300);
  transition:border-color .18s ease, color .18s ease;
}
.footer-social a:hover{border-color:var(--blue-300);color:var(--blue-300);}

.footer-nav h4,.footer-contact h4{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-50);margin-bottom:1.1rem;
}
.footer-nav ul,.footer-contact ul{display:flex;flex-direction:column;gap:.7rem;font-size:.92rem;}
.footer-nav a{transition:color .18s ease;}
.footer-nav a:hover{color:var(--blue-300);}

.footer-bottom{padding:1.6rem 0;text-align:center;font-size:.8rem;color:var(--steel-500);}

/* =========================================================
   RESPONSIVE — TABLET (≤1024px)
   ========================================================= */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;}
  .hero-media{order:-1;}
  .historia-grid{grid-template-columns:1fr;}
  .historia-media{order:-1;}
  .servicos-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}

/* =========================================================
   RESPONSIVE — MOBILE (≤768px)
   ========================================================= */
@media (max-width:768px){
  .main-nav{
    position:fixed;inset:98px 0 0 0;background:var(--graphite-900);
    flex-direction:column;align-items:flex-start;padding:2rem 24px;gap:2rem;
    transform:translateX(100%);transition:transform .28s ease;
    height:calc(100vh - 98px);overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:1.4rem;}
  .main-nav ul a{font-size:1.1rem;}
  .nav-cta{width:100%;text-align:center;}
  .nav-toggle{display:flex;}

  .info-strip-grid{grid-template-columns:1fr;}  
  .info-item{
  border-right:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:1.4rem;
  justify-content:center; /* centraliza a linha número+texto no mobile */
}
.info-item:last-child{border-bottom:none;}

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

  .service-card-face{padding-bottom:0;}

  .service-card-overlay{
    position:static;
    opacity:1;
    transform:none;
    background:transparent;      /* tira o gradiente do container "cheio" */
    padding:0 1.6rem 1.6rem;     /* mesmo recuo lateral do resto do card */
    margin-top:.4rem;
    display:flex;
    flex-direction:column;
    gap:1.1rem;
  }

  .service-card-overlay ul{
    background:linear-gradient(165deg, var(--graphite-900) 0%, var(--blue-700) 75%, var(--red-700) 145%);
    color:var(--paper-50);
    border-radius:var(--radius-md);
    padding:1.3rem 1.4rem;
    gap:.7rem;
  }

  .service-card-overlay .btn{
    align-self:flex-start;
  }
  .form-row{grid-template-columns:1fr;}
  .orcamento-form{padding:1.8rem;}

  .footer-grid{grid-template-columns:1fr;gap:2.2rem;}

  .whatsapp-fab{right:18px;bottom:18px;width:52px;height:52px;}
}

@media (max-width:480px){
   .container{padding:0 18px;}
  .hero{padding:104px 0 50px;} /* era 104px 0 260px */
  .info-strip{
    margin-top: 0; /* era -140px — a faixa sai do hero e vira seção normal */
    padding: 0 0 0;} /* era -220px */
  .info-strip-grid{border-radius:0;} /* zera o arredondamento só no mobile */
  .servicos,.orcamento{padding:3.5rem 0;}
}

#netlify-badge,
.netlify-badge,
a[href*="netlify.com"] {
  display: none !important;
}
/* =========================================================
   SCROLL REVEAL — Seção História
   ========================================================= */
.reveal{
  opacity:0;
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
}
.reveal-left{ transform:translateX(-60px); }
.reveal-right{ transform:translateX(60px); }

.reveal.is-visible{
  opacity:1;
  transform:translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}

.reveal-up{ transform:translateY(50px); }

.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Stagger — cada card seguinte anima com um pequeno atraso */
.servicos-grid .reveal-up:nth-child(1){ transition-delay:0s; }
.servicos-grid .reveal-up:nth-child(2){ transition-delay:.1s; }
.servicos-grid .reveal-up:nth-child(3){ transition-delay:.2s; }
.servicos-grid .reveal-up:nth-child(4){ transition-delay:.1s; }
.servicos-grid .reveal-up:nth-child(5){ transition-delay:.2s; }
.servicos-grid .reveal-up:nth-child(6){ transition-delay:.3s; }