:root{
  /* Cores base */
  --bg: #07080B;
  --text: #ffffff;
  --muted: #cfe9f9;

  /* Acentos (tech + sua preferência em laranja) */
  --accent: #05a1d1;      /* ciano */
  --accent-warm: #ff7a1a; /* laranja */

  /* Glass e bordas */
  --glass-bg: rgba(0,0,0,.38);
  --glass-brd: rgba(0,255,255,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:62.5%}
body{
  background: var(--bg);
  color: var(--text);
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  line-height:1.4;
}

/* HEADER FLUTUANTE PREMIUM */
.header{
  position:fixed; inset-block-start:20px; inset-inline-start:50%;
  transform:translateX(-50%);
  width:min(1250px,92%); height:74px;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0,255,255,.15), 0 6px 25px rgba(0,0,0,.55);
  z-index: 1000;
}
.header__inner{width:100%;height:100%;padding:0 2.4rem;display:flex;align-items:center;justify-content:space-between}
.logo img{height:52px;filter:drop-shadow(0 0 8px var(--accent));transition:.25s ease}
.logo img:hover{transform:scale(1.05);filter:drop-shadow(0 0 16px #22e1ff)}

.navbar{display:flex;gap:2.4rem;justify-content:center;flex:1}
.navbar a{
  position:relative;
  font-size:1.6rem; color:#dcdcdc; text-decoration:none; transition:.25s ease;
  padding:.4rem .2rem;
}
.navbar a:hover{color:#fff}
.navbar a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; opacity:.0; transform:scaleX(.5);
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  transition:.25s ease;
}
.navbar a:hover::after{opacity:1; transform:scaleX(1)}

/* HERO BASE */
.home-container{
  position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  isolation:isolate;
}
.home-container .fundo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; /* cobre a tela toda */
  z-index:-2;
}

/* Camadas decorativas */
.home-container::before,
.home-container::after{
  content:""; position:absolute; inset-inline:0; z-index:0; pointer-events:none;
}
.home-container::before{
  inset-block-start:0; height:52%;
  background:linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%);
}
.home-container::after{
  inset-block-end:0; height:52%;
  background:linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
}

/* Glow ambiente suave */
.ambient-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,161,209,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(255,122,26,.15), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,161,209,.10), transparent 60%);
  filter: blur(2px);
}

/* Grid tecnológico animado */
.tech-grid{
  position:absolute; inset:0; z-index:-1; opacity:.18; pointer-events:none;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size: 32px 32px;
  mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}
@keyframes gridFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-10px)}
}

/* Orbes sutis */
.orb{
  position:absolute; width:320px; height:320px; border-radius:50%;
  filter: blur(32px); opacity:.25; z-index:-1;
}
.orb-a{ background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); inset-block-start:20%; inset-inline-start:5%; animation: driftA 18s ease-in-out infinite alternate }
.orb-b{ background: radial-gradient(circle at 60% 60%, var(--accent-warm), transparent 60%); inset-block-end:10%; inset-inline-end:0%; animation: driftB 22s ease-in-out infinite alternate }
@keyframes driftA{from{transform:translate(0,0)} to{transform:translate(22px, -16px)}}
@keyframes driftB{from{transform:translate(0,0)} to{transform:translate(-28px, 12px)}}

/* HERO LAYOUT */
.home-container section{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  padding:clamp(1.2rem,3vw,3rem); padding-top:clamp(7rem,10vh,12rem);
  z-index:2;
}
.content{max-width:clamp(680px,60vw,900px); text-align:left}

/* PILLS */
.service-pills{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:.6rem .8rem; backdrop-filter: blur(8px);
  max-width:min(1100px,92%); overflow:auto; scrollbar-width:none;
}
.service-pills::-webkit-scrollbar{display:none}

.pill{
  background:transparent; border:1px solid rgba(255,255,255,.14);
  color: var(--muted); font-size:1.35rem; padding:.5rem .95rem; border-radius:999px; cursor:pointer; transition:.2s ease;
  white-space:nowrap;
}
.pill:hover{color:#fff; border-color:rgba(5,161,209,.55); box-shadow:0 0 10px rgba(5,161,209,.18)}
.pill.is-active{
  color:#fff; border-color:rgba(5,161,209,.7);
  background:
    linear-gradient(180deg, rgba(5,161,209,.22), rgba(5,161,209,.08)),
    linear-gradient(90deg, rgba(255,122,26,.16), transparent 60%);
}

/* TIPOGRAFIA HERO */
h1#hero-title{
  font-weight:900; letter-spacing:.2px;
  font-size:clamp(2.6rem, 3.6vw + 1rem, 5.4rem); line-height:1.08;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
#hero-sub{
  margin-top:1rem; color:#e7f2ff; opacity:.95;
  font-size:clamp(1.6rem, 1.1vw + 1rem, 2.1rem); line-height:1.5;
}
.bullets{display:grid; gap:.35rem; margin-top:1rem}
.bullets li{color:var(--muted); font-size:clamp(1.35rem, .8vw + .8rem, 1.7rem); list-style:disc; margin-left:1.6rem}

/* CTA com efeito spotlight/shine */
.btn{
  position:relative; display:inline-block; text-decoration:none; cursor:pointer;
  border-radius:.8rem; overflow:hidden; isolation:isolate;
  font-size:clamp(1.6rem,1vw + 1rem,1.9rem); font-weight:700;
  padding:clamp(.95rem,1.2vw,1.1rem) clamp(1.9rem,2.4vw,2.8rem);
  color:#fff; transition:.25s ease;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
  box-shadow: 0 10px 28px rgba(5,161,209,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}

.btn-spotlight::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background: conic-gradient(from 0deg, rgba(5,161,209,.35), rgba(255,122,26,.35), rgba(5,161,209,.35));
  filter: blur(16px); opacity:.0; transition:.35s ease;
}
.btn-spotlight:hover::before{opacity:.8}

.btn-shine{
  position:absolute; inset-block:-20%; inset-inline-start:-40%;
  width:50%; height:140%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
  animation: none; pointer-events:none;
}
.btn-spotlight:hover .btn-shine{animation: shine 1.1s ease}
@keyframes shine{ from{transform:translateX(0) skewX(-20deg)} to{transform:translateX(280%) skewX(-20deg)} }

/* ANIMAÇÕES DE ENTRADA */
.fade-in{animation:fadeIn .48s ease both}
.fade-out{animation:fadeOut .18s ease both}
.delay-1{animation-delay:.08s} .delay-2{animation-delay:.16s} .delay-3{animation-delay:.24s}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
@keyframes fadeOut{from{opacity:1} to{opacity:0}}

/* SEÇÕES BASE (antigo about genérico que você tinha) */
section{max-width:1200px;margin:auto;padding:4rem 2rem}
.title{text-align:center;font-size:4.0rem;margin-bottom:3rem;color:var(--accent)}
.title span{color:#fff}
.row{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.container-image{
  background:url("./Fotos/Nodus Slogan.jpg") center/cover no-repeat;
  border-radius:14px; min-height:380px; position:relative; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.container-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.5))}

.about-content h3{font-size:2.4rem;margin-bottom:1rem}
.about-content p{font-size:1.7rem;color:#e7f2ff;opacity:.95}

/* ====== SOBRE NÓS — ESTILO NOVO (usa as suas variáveis) ====== */
.sobre-nos{
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 35%, transparent) , transparent 60%),
    radial-gradient(1200px 600px at 90% 110%, color-mix(in oklab, var(--accent-warm) 28%, transparent), transparent 60%),
    #0b0d12;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding: clamp(56px, 6vw, 96px) 0;
}
.sobre-nos .container{width:min(1100px, 92%); margin:0 auto}

.sobre-head .badge{
  display:inline-block;
  padding:.4rem .7rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--muted);
  backdrop-filter: blur(6px);
}
.sobre-head h2{
  margin:.6rem 0 .4rem;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height:1.15;
}
.sobre-head .lead{
  color:var(--muted);
  max-width:65ch;
}

.sobre-nos .grid{
  margin-top:2rem;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}

.sobre-nos .card{
  grid-column: span 6;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.sobre-nos .card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(400px 120px at 20% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
  pointer-events:none;
}
.sobre-nos .card h3{font-size:1.05rem; margin:0 0 .4rem}
.sobre-nos .card .muted{color:var(--muted)}

.sobre-nos .card.destaque{
  grid-column: span 12;
  border-color: color-mix(in oklab, var(--accent) 45%, rgba(255,255,255,.12));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent) inset,
    0 20px 60px rgba(0,0,0,.35);
}

.sobre-nos blockquote{
  margin:0;
  padding-left:1rem;
  border-left:3px solid var(--accent);
  color:#fff;
}

.sobre-nos .list{margin:.2rem 0 0; padding-left:1rem}

.sobre-nos .valores{
  margin-top:1.5rem;
  border-top:1px dashed rgba(255,255,255,.08);
  padding-top:1rem;
}
.sobre-nos .valores ul{
  display:flex; flex-wrap:wrap; gap:.6rem .8rem;
  list-style:none; margin:0; padding:0;
}
.sobre-nos .valores li{
  border:1px solid rgba(255,255,255,.1);
  padding:.5rem .75rem;
  border-radius:999px;
  font-size:.9rem;
  color:var(--muted);
}

/* Responsivo da sessão Sobre Nós */
@media (max-width: 900px){
  .sobre-nos .card{ grid-column: span 12; }
}

/* RESPONSIVO GERAL */
@media (max-width:1400px){
  .header{height:68px}
  .navbar a{font-size:1.5rem}
}
@media (max-width:1024px){
  .header{height:64px}
  .navbar{gap:1.8rem}
  .navbar a{font-size:1.4rem}
  .home-container section{padding-top:clamp(6rem,9vh,10rem)}
  .row{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:640px){
  .navbar{display:none} /* simplificação em mobile; pode virar menu hambúrguer depois */
  .title{font-size:3.2rem}
  .service-pills{justify-content:flex-start}
}

/* ===== FIX: SOBRE NÓS em tela cheia + chips visíveis ===== */

/* 1) Remove a limitação do <section> e deixa a seção #about ocupar toda a largura */
#about.sobre-nos{
  max-width: none;   /* ignora section{max-width:1200px} */
  width: 100%;
  margin: 0;         /* remove margin:auto centralizada do section base */
  padding: clamp(56px, 6vw, 96px) 0; /* mantém o respiro vertical */
  display: block;
}

/* 2) Aumenta contraste dos “O que nos move” */
.sobre-nos .valores h3{
  color: #ffffff;
}

.sobre-nos .valores li{
  color: #eaf7ff;                            /* texto mais claro */
  background: rgba(255,255,255,.06);         /* leve preenchimento pra destacar */
  border: 1px solid rgba(255,255,255,.18);   /* borda um pouco mais forte */
  font-weight: 600;
}

/* Se quiser um pouco mais de brilho nas cartas da grade: */
.sobre-nos .card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.12);
}
.sobre-nos .card.destaque{
  border-color: color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.18));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent) inset,
    0 24px 72px rgba(0,0,0,.45);
}

/* ==== SEÇÃO SOBRE: O Que Nos Move + Missão/Visão/Diferencial ==== */

.sobre-extra{
  margin-top: 3rem;
  display: grid;
  gap: 2.4rem;
}

/* Título */
.sobre-extra h3{
  font-size: 1.45rem;
  margin-bottom: .6rem;
  font-weight: 600;
  color: #ffffff;
}

/* Lista de valores */
.sobre-extra .valores ul{
  display:flex; flex-wrap:wrap;
  gap:.75rem .9rem;
  list-style:none; margin:0; padding:0;
}
.sobre-extra .valores li{
  padding:.55rem 1.25rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-size:1.25rem;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  color:#eaf7ff;
  font-weight:500;
}

/* Blocos Missão / Visão / Diferencial */
.info-bloco{
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:1.4rem 1.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  backdrop-filter: blur(6px);
}
.info-bloco p{
  margin-top:.25rem;
  color: var(--muted);
  font-size:1.35rem;
  line-height:1.55;
}
.sobre-tagline {
  text-align: center;
  max-width: 900px;
  margin: 3rem auto 4.5rem auto;
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  line-height: 1.28;
  font-weight: 600;
  color: #e9f6ff;
  opacity: 0;
  transform: translateY(20px);
  transition: .6s ease;
  position: relative;
}

.tagline-underline {
  display: block;
  width: 120px;
  height: 3px;
  margin: 1.6rem auto 0 auto;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  opacity: .85;
}

/* Animação ao entrar na tela */
.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ajusta bloco "Nossos Valores" para ficar igual ao estilo dos outros textos */
.valores-list {
  margin-top: 1rem;
  display: grid;
  gap: 6px;
}

.valores-list li {
  color: #e7f2ff; /* mesma cor usada nos textos da Missão/Visão */
  font-size: 1.7rem; /* mesma proporção das outras descrições */
  line-height: 1.45;
  list-style: none;
  position: relative;
  padding-left: 1.6rem;
}

/* marcador estilizado igual ao restante do site */
.valores-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--main-color2, #05a1d1);
  opacity: .85;
}

/* === Padronização de tipografia do bloco "Nossos Valores" === */
.valores-list {
  margin-top: 1rem;
  display: grid;
  gap: 6px;
}

.valores-list li {
  /* mesmo tamanho/ritmo da Missão/Visão */
  font-size: 1.35rem;
  line-height: 1.55;
  color: #e7f2ff;
  font-weight: 400;
  list-style: none;
  position: relative;
  padding-left: 1.6rem;
}

/* rótulo em negrito, mas sem exagero */
.valores-list li strong {
  font-weight: 600;   /* era 700 no render do navegador */
  color: #ffffff;     /* leve contraste como nos títulos */
}

/* marcador no padrão do site */
.valores-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72rem;        /* alinhado ao novo line-height */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent); /* usa sua cor de acento */
  opacity: .9;
}
/* Centraliza e amplia o texto de introdução do SOBRE */
#about .sobre-head { 
  text-align: center;              /* título + parágrafo centralizados */
}

#about .sobre-head .lead{
  max-width: 90ch;                 /* aumenta a largura do texto (antes era 65ch) */
  margin: 0.8rem auto 0 auto;      /* centraliza horizontalmente */
  font-size: 1.6rem;               /* mesmo ritmo dos outros textos */
  line-height: 1.6;                /* leitura confortável */
  color: #e7f2ff;                  /* mesma cor usada na seção */
}

/* (opcional) Deixa o bloco do SOBRE visualmente centrado dentro do container */
#about.sobre-nos .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.whatsapp-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 68px;
  height: 68px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.06) inset,
    0 8px 28px rgba(0,0,0,0.45),
    0 0 16px rgba(37, 211, 102, 0.55);
  z-index: 9999;
  transition: .25s ease;
}

.whatsapp-btn img {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

.whatsapp-btn:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.12) inset,
    0 12px 34px rgba(37, 211, 102, 0.55),
    0 0 24px rgba(37,211,102,0.85);
}

/* Ajuste para Mobile */
@media (max-width: 600px) {
  .whatsapp-btn {
    bottom: 18px;
    right: 18px;
    width: 60px;
    height: 60px;
  }

  .whatsapp-btn img {
    width: 32px;
    height: 32px;
  }
}
.whatsapp-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 68px;
  height: 68px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.06) inset,
    0 8px 28px rgba(0,0,0,.45),
    0 0 16px rgba(37,211,102,.55);
  z-index: 9999;
  transition: .25s ease;
}

.whatsapp-btn:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.12) inset,
    0 12px 34px rgba(37,211,102,.55),
    0 0 24px rgba(37,211,102,.85);
}

.whatsapp-btn svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}

@media (max-width: 600px) {
  .whatsapp-btn {
    bottom: 18px;
    right: 18px;
    width: 60px;
    height: 60px;
  }

  .whatsapp-btn svg {
    width: 28px;
    height: 28px;
  }
}
/* =========================
   SERVIÇOS
   ========================= */
.servicos{
  background:
    radial-gradient(1200px 600px at 8% -10%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 95% 110%, color-mix(in oklab, var(--accent-warm) 22%, transparent), transparent 60%),
    #0a0d12;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding: clamp(56px, 6vw, 96px) 0;
}

.servicos .container{width:min(1200px, 92%); margin:0 auto}

.servicos-head{
  text-align:center;
}
.servicos-head h2{
  margin:.6rem 0 .4rem;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height:1.15;
}
.servicos-head .lead{
  color:var(--muted);
  max-width: 80ch;
  margin: .4rem auto 0;
  font-size: 1.6rem;
}

/* Grid de cards */
.servicos-grid{
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.svc-card{
  grid-column: span 4;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .5s ease, opacity .5s ease, box-shadow .25s ease, border-color .25s ease;
  outline: none;
}
.svc-card:focus-visible{
  border-color: color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.18));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent) inset, 0 0 0 3px rgba(255,255,255,.06) inset, 0 20px 50px rgba(0,0,0,.4);
}
.svc-card.reveal{
  transform: translateY(0);
  opacity: 1;
}
.svc-card:hover{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent) inset,
    0 24px 72px rgba(0,0,0,.45);
  border-color: color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.14));
}

/* Ícone circular com gradiente */
.svc-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05)),
    linear-gradient(90deg, var(--accent), var(--accent-warm));
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  margin-bottom: .9rem;
}
.svc-icon svg{ width: 28px; height: 28px; fill: #0b0f14 }

/* Títulos e descrição */
.svc-card h3{
  margin: .2rem 0 .2rem;
  font-size: 1.6rem;
}
.svc-desc{
  color: var(--muted);
  font-size: 1.35rem;
}

/* Lista de bullets */
.svc-list{
  margin: .8rem 0 0;
  padding-left: 1.2rem;
  display: grid; gap: .25rem;
}
.svc-list li{
  font-size: 1.25rem;
  color: #e7f2ff;
}

/* Tags */
.svc-tags{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  margin: .9rem 0 1.1rem;
}
.svc-tags span{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: 1.1rem;
  color:#eaf7ff;
}

/* CTA menor dentro do card */
.btn-small{
  font-size: 1.4rem;
  padding: .8rem 1.6rem;
}

/* CTA final */
.servicos-cta{
  margin-top: 2.4rem;
  display:flex; justify-content:center;
}

/* Responsivo */
@media (max-width: 1100px){
  .svc-card{ grid-column: span 6; }
}
@media (max-width: 700px){
  .svc-card{ grid-column: span 12; }
}

/* ====== SERVIÇOS — FULL-BLEED + FUNDO IGUAL AO HERO ====== */

/* 1) Ignora o section{max-width:1200px} e abre a seção */
#servicos.servicos{
  max-width: none;   /* remove a limitação do section base */
  width: 100%;
  margin: 0;
  padding: clamp(56px, 6vw, 96px) 0; /* mantém respiro vertical */
  display: block;
}

/* 2) Fundo em camadas como o do HERO */
.servicos{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0d12; /* base escura */
}

/* Conteúdo fica acima das camadas */
.servicos .container{
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Camada 1: glows + degradês topo/rodapé (igual ao hero) */
.servicos::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* glows coloridos */
    radial-gradient(1200px 600px at 15% 20%, rgba(5,161,209,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(255,122,26,.15), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,161,209,.10), transparent 60%),
    /* degradê superior e inferior como no hero */
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  background-blend-mode: normal;
  filter: blur(2px);
}

/* Camada 2: grid tecnológica animada (igual ao hero) */
.servicos::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size: 32px 32px;
  /* mascara para suavizar nas bordas como no hero */
  -webkit-mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
          mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}

/* (já existe no seu CSS; deixo aqui por garantia)
@keyframes gridFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-10px)}
}
*/
@media (prefers-reduced-motion: reduce){
  .sobre-tagline{ opacity:1; transform:none; }
}

/* ===== SOBRE — INTRO + CARDS (estilo Serviços) ===== */

/* Abre a seção em largura total, como Servicos */
#about.sobre{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(56px, 6vw, 96px) 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0d12;
}

/* Fundo com glows + degradês + grid tech (igual ao hero/servicos) */
#about.sobre::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,161,209,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(255,122,26,.15), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,161,209,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  filter: blur(2px);
}
#about.sobre::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size:32px 32px;
  -webkit-mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
          mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}

#about.sobre .container{ position:relative; z-index:2; width:min(1200px,92%); margin:0 auto; }

/* Cabeçalho (igual ao de Serviços) */
.about-head{ text-align:center; }
.about-head h2{
  margin:.6rem 0 .4rem;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height:1.15;
}
.about-head .lead{
  color: var(--muted);
  max-width: 85ch;
  margin:.4rem auto 0;
  font-size: 1.6rem;
}

/* Grid de cards */
.about-grid{
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Card base — espelha o .svc-card */
.about-card{
  grid-column: span 4;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .5s ease, opacity .5s ease, box-shadow .25s ease, border-color .25s ease;
  outline: none;
}
.about-card:focus-visible{
  border-color: color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.18));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent) inset, 0 0 0 3px rgba(255,255,255,.06) inset, 0 20px 50px rgba(0,0,0,.4);
}
.about-card.reveal{ transform: translateY(0); opacity: 1; }
.about-card:hover{
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent) inset, 0 24px 72px rgba(0,0,0,.45);
  border-color: color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.14));
}

/* Ícone circular */
.about-icon{
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05)),
    linear-gradient(90deg, var(--accent), var(--accent-warm));
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  margin-bottom: .9rem;
}
.about-icon svg{ width:28px; height:28px; fill:#0b0f14; }

/* Títulos/descrição/lista */
.about-card h3{ margin:.2rem 0 .2rem; font-size:1.6rem; }
.about-desc{ color:var(--muted); font-size:1.35rem; }
.about-list{
  margin:.8rem 0 0; padding-left:1.2rem; display:grid; gap:.25rem;
}
.about-list li{ font-size:1.25rem; color:#e7f2ff; }

/* Tags */
.about-tags{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:.9rem 0 0; }
.about-tags span{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: 1.1rem;
  color:#eaf7ff;
}

/* Responsivo */
@media (max-width:1100px){ .about-card{ grid-column: span 6; } }
@media (max-width:700px){ .about-card{ grid-column: span 12; } }

/* ===== SOBRE — Mesmo visual dos Serviços ===== */

#about.sobre{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(56px, 6vw, 96px) 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0d12;
}

/* Fundo com "glow" + grid tech igual serviços */
#about.sobre::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,161,209,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(255,122,26,.15), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,161,209,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  filter: blur(2px);
}

#about.sobre::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size:32px 32px;
  -webkit-mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
          mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}

#about.sobre .container{
  position:relative;
  z-index:2;
  width:min(1200px,92%);
  margin:0 auto;
}

/* Cabeçalho */
.about-head{
  text-align:center;
}
.about-head h2{
  margin:.6rem 0 .4rem;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height:1.15;
}
.about-head .lead{
  color: var(--muted);
  max-width: 85ch;
  margin:.4rem auto 0;
  font-size: 1.6rem;
}

/* GRID */
.about-grid{
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* CARD */
.about-card{
  grid-column: span 4;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(14px);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}
.about-card.reveal{
  transform: translateY(0);
  opacity: 1;
}
.about-card:hover{
  border-color: color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.14));
  box-shadow: 0 24px 72px rgba(0,0,0,.45);
}

/* Ícones */
.about-icon{
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05)),
    linear-gradient(90deg, var(--accent), var(--accent-warm));
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  margin-bottom: .9rem;
}
.about-icon svg{ width:28px; height:28px; fill:#0b0f14; }

/* Conteúdo */
.about-card h3{ margin:.2rem 0 .2rem; font-size:1.6rem; }
.about-desc{ color:var(--muted); font-size:1.35rem; }
.about-list{
  margin:.8rem 0 0;
  padding-left:1.2rem;
  display:grid;
  gap:.25rem;
}
.about-list li{
  font-size:1.25rem;
  color:#e7f2ff;
}

/* Tags */
.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  margin:.9rem 0 0;
}
.about-tags span{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: 1.1rem;
  color:#eaf7ff;
}

/* RESPONSIVO */
@media (max-width:1100px){
  .about-card{ grid-column: span 6; }
}
@media (max-width:700px){
  .about-card{ grid-column: span 12; }
}

/* =========================
   THEME OVERRIDE — Azul #05a2d3 → #045879
   ========================= */

/* 1) Troca a paleta base (tudo que usa var(--accent / --accent-warm)) */
:root{
  --accent: #05a2d3;     /* ciano novo */
  --accent-warm: #045879;/* segundo tom do gradiente (antes era laranja) */
}

/* 2) Ajustes de locais que tinham rgba "na unha" com laranja antigo */

/* Shine/conic da CTA */
.btn-spotlight::before{
  background: conic-gradient(
    from 0deg,
    rgba(5,162,211,.35),     /* #05a2d3 */
    rgba(4,88,121,.35),      /* #045879 */
    rgba(5,162,211,.35)
  );
}

/* Pílula ativa do herói (tira o laranja do fundo sutil) */
.pill.is-active{
  color:#fff; 
  border-color: rgba(5,162,211,.70);
  background:
    linear-gradient(180deg, rgba(5,162,211,.22), rgba(5,162,211,.08)),
    linear-gradient(90deg, rgba(4,88,121,.16), transparent 60%);
}

/* Sub-linhado da tagline já usa as vars, mas garantimos a opacidade */
.tagline-underline{
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  opacity: .9;
}

/* Ícones circulares, botões, underlines do menu, etc.
   já puxam var(--accent) e var(--accent-warm), então
   só a troca de variáveis acima já atualiza tudo: 
   .svc-icon, .about-icon, .btn, .navbar a::after, .orb-a/.orb-b...
*/

/* 3) (opcional) leve reforço no hover de botões com o novo tom */
.btn:hover{
  box-shadow:
    0 10px 28px rgba(5,162,211,.28),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* 4) (opcional) se quiser o gradiente da página de Serviços ainda mais visível */
.servicos::before{
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,162,211,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(4,88,121,.18), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,162,211,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
}

/* ===== REMOVE LARANJA E TROCA POR GLOW AZUL ===== */

#about.sobre::before,
.servicos::before {
  background:
    /* Glow forte à esquerda */
    radial-gradient(1200px 600px at 15% 20%, rgba(5,162,211,0.22), transparent 60%),
    /* Glow suave à direita (onde estava o laranja) */
    radial-gradient(900px 500px at 90% 60%, rgba(4,88,121,0.18), transparent 55%),
    /* Glow inferior */
    radial-gradient(700px 400px at 50% 100%, rgba(5,162,211,0.10), transparent 60%),
    /* Degradês escuros para profundidade */
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  filter: blur(2px);
}
/* ==== PATCH: Remove o laranja do HERO (.ambient-glow) ==== */
.ambient-glow{
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,162,211,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(4,88,121,.18), transparent 55%), /* era o laranja */
    radial-gradient(700px 400px at 50% 100%, rgba(5,162,211,.10), transparent 60%);
  filter: blur(2px);
}

/* (garantia) mantém o orb secundário no azul novo */
.orb-b{
  background: radial-gradient(circle at 60% 60%, var(--accent-warm), transparent 60%) !important;
}
/* HERO CTA com mesma pegada dos botões de Serviços */
#hero-cta{
  border-radius: 12px;
  box-shadow:
    0 10px 28px rgba(5,162,211,.25),
    0 0 0 1px rgba(255,255,255,.06) inset;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

#hero-cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 34px rgba(5,162,211,.32),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* garante o “shine” passar como nos demais */
#hero-cta.btn-spotlight::before{
  background: conic-gradient(from 0deg,
    rgba(5,162,211,.35),
    rgba(4,88,121,.35),
    rgba(5,162,211,.35)
  );
}

/* HERO: transição suave (não interfere no efeito do botão) */
#hero-title,
#hero-sub,
#hero-cta,
#hero-bullets {
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}

.hero-transitioning #hero-title,
.hero-transitioning #hero-sub,
.hero-transitioning #hero-cta,
.hero-transitioning #hero-bullets {
  opacity: 0;
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  #hero-title, #hero-sub, #hero-cta, #hero-bullets {
    transition: none;
  }
}

/* ===== PATCH: evita que o HERO cubra o conteúdo abaixo ===== */
/* colocar no final do style.css */

.home-container { position: relative; z-index: 1; }

/* força pseudo/camadas decorativas para trás */
.home-container::before,
.home-container::after,
.ambient-glow,
.tech-grid,
.orb,
.fundo {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* garante que o conteúdo 'real' do hero fique acima das camadas */
.home-container .content { position: relative; z-index: 2; }

/* Seções abaixo sempre acima do hero decorations */
#about, #servicos, section {
  position: relative;
  z-index: 3;
}

/* Segurança extra: imagem de fundo atrás de tudo */
.fundo { z-index: -1 !important; position: absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ===== animação: limitar slide apenas ao .content ===== */
.home-slide-out .content { transform: translateX(-32px); opacity:0; transition: transform .35s cubic-bezier(.2,.9,.2,1), opacity .35s ease; }
.home-slide-in .content  { transform: translateX(18px); opacity:0; transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .42s ease; }

/* quando a classe slide-in é removida o transform volta a none e a opacidade sobe (entrada) */
.home-slide-reset .content { transform: none; opacity:1; transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .42s ease; }

/* reduced-motion: desliga animações */
@media (prefers-reduced-motion: reduce){
  .home-slide-out .content, .home-slide-in .content, .home-slide-reset .content {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== CONTATO (escopo: #contato) ===== */
#contato { padding: clamp(36px,6vw,72px) 6%; background: transparent; color: #eaf7ff; }

.contato-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* card do formulário */
.contato-form-card {
  background: linear-gradient(180deg, rgba(2,20,28,0.7), rgba(2,20,28,0.45));
  border: 1px solid rgba(255,255,255,0.03);
  padding: 22px;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
#contato h3 { margin: 0 0 6px; font-size: 22px; text-align:center; }
.contato-sub { margin:0 0 10px; color: #cfeefc; text-align:center; font-size:13px; }

/* contato rápido (WhatsApp / email) */
.contato-quick { margin: 10px 0 14px; color:#bfeaf6; font-size:14px; }
.contato-quick a { color: #05a1d1; text-decoration:none; font-weight:700 }

/* formulário */
.contato-form { display:flex; flex-direction:column; gap:10px; }
.contato-form input,
.contato-form textarea { width:100%; padding:10px 12px; border-radius:6px; border:none; font-size:14px; background:#ffffff; color:#111; }
.contato-form textarea { min-height:120px; resize:vertical }

/* botão */
.contato-btn {
  display:inline-block;
  background: linear-gradient(90deg,#05a1d1,#045879);
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 10px 26px rgba(5,161,209,0.12);
}

/* área de localizações (lado direito) */
.contato-locacoes { display:flex; flex-direction:column; gap:14px; }

/* cada local */
.loc-card {
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:8px;
  padding:8px;
  border: 1px solid rgba(255,255,255,0.03);
}
.loc-card iframe { width:100%; height:180px; border:0; border-radius:6px; display:block; }
.loc-info { padding:6px 4px; color: #d8f5ff; font-size:13px; background: rgba(0,0,0,0.02); border-radius:6px; }
.loc-info h4 { margin:0 0 6px; color:#eaf7ff; font-size:15px }

/* responsivo */
@media (max-width:1000px) {
  .contato-inner { grid-template-columns: 1fr; }
  .contato-locacoes { order: 2; }
  .contato-form-card { order: 1; }
  .loc-card iframe { height:200px; }
}

/* ===========================
   CONTATO - estilo igual serviços
   Cole este bloco no seu style.css (substitui/acompanha regras de #contato)
   =========================== */

/* Base do container (mantém responsividade) */
#contato {
  padding: clamp(40px, 6vw, 80px) 6%;
  color: #eaf7ff;
  background: transparent;
}

/* Grid principal: formulário à esquerda, localizações à direita */
.contato-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
  z-index: 5;
}

/* ---- Card (formulário) no mesmo estilo dos svc-card ---- */
.contato-form-card {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, rgba(6,25,29,0.78), rgba(8,18,20,0.5));
  border-radius: 12px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* pequeno efeito de "card interno" (bordas arredondadas finas) */
.contato-form-card::after {
  content: "";
  position: absolute;
  inset: 10px 10px auto auto;
  width: 220px;
  height: 120px;
  border-radius: 10px;
  pointer-events: none;
  /* leve brilho interior similar ao serviço */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  opacity: .04;
}

/* círculo-ícone no canto superior esquerdo (como nos svc-cards) */
.contato-form-card::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(6,154,215,0.95), rgba(6,124,180,0.95));
  box-shadow: 0 6px 18px rgba(4,90,120,0.35);
  border: 3px solid rgba(0,0,0,0.18);
}

/* Títulos / subtítulo do formulário */
#contato h3 { margin: 0 0 6px; font-size: 22px; text-align:center; letter-spacing:.6px; color:#e9f6ff; }
.contato-sub { margin:0 0 12px; color: #cfeefc; text-align:center; font-size:13px; }

/* contato rápido (WhatsApp / email) */
.contato-quick { margin: 8px 0 14px; color:#bfeaf6; font-size:14px; text-align:center; }
.contato-quick a { color: #05a1d1; text-decoration:none; font-weight:700 }

/* formulário - inputs com cantos arredondados brancos (visual como no print) */
.contato-form { display:flex; flex-direction:column; gap:10px; }
.contato-form input,
.contato-form textarea {
  width:100%;
  padding:10px 12px;
  border-radius:6px;
  border:none;
  font-size:14px;
  box-sizing:border-box;
  background:#fff;
  color:#111;
  outline: none;
  transition: transform .08s ease, box-shadow .12s ease;
}
.contato-form input:focus,
.contato-form textarea:focus { box-shadow: 0 6px 20px rgba(5,161,209,0.06); transform: translateY(-2px); }

/* botão no padrão (gradiente azul / leve brilho) */
.contato-btn {
  display:inline-block;
  background: linear-gradient(90deg,#05a1d1,#045879);
  color:#fff;
  padding:10px 20px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 12px 36px rgba(5,161,209,0.12);
  transition: transform .14s ease, box-shadow .14s ease;
}
.contato-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(5,161,209,0.18); }

/* ---- Localizações (lado direito) ---- */
.contato-locacoes { display:flex; flex-direction:column; gap:14px; }

/* cada loc-card com estilo de card escuro e borda como o serviço */
.loc-card {
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  background: linear-gradient(180deg, rgba(2,20,24,0.55), rgba(2,20,24,0.36));
  border-radius:8px;
  padding:8px;
  align-items:start;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* iframe do mapa com cantos arredondados */
.loc-card iframe {
  width:100%;
  height:180px;
  border:0;
  border-radius:6px;
  display:block;
}

/* painél de detalhes da unidade — fundo mais escuro/azulado parecido com print */
.loc-info {
  padding:10px;
  background: linear-gradient(180deg, rgba(3,24,30,0.35), rgba(2,16,20,0.15));
  border-radius:6px;
  color: #d8f5ff;
  border: 1px solid rgba(255,255,255,0.02);
}
.loc-info h4 { margin:0 0 6px; font-size:15px; color:#eaf7ff; }
.loc-info p { margin: 4px 0; font-size:13px; color: #bfeaf6; }

/* responsivo: empilha (form acima, mapas abaixo) */
@media (max-width: 1000px) {
  .contato-inner { grid-template-columns: 1fr; }
  .contato-locacoes { order: 2; }
  .contato-form-card { order: 1; }
  .loc-card iframe { height:220px; }
}

/* ============================
   CONTATO — fundo no mesmo padrão do SERVIÇOS / SOBRE
   Cole este bloco no final do seu style.css
   ============================ */

#contato {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0d12; /* base escura igual às seções */
  padding: clamp(56px, 6vw, 96px) 6%;
  color: var(--text);
}

/* garante que o conteúdo fique acima das camadas decorativas */
#contato .contato-inner,
#contato .contato-container {
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Camada 1: glows + degradês topo/rodapé (igual ao hero/servicos) */
#contato::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% 20%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, color-mix(in oklab, var(--accent-warm) 18%, transparent), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,161,209,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  filter: blur(2px);
}

/* Camada 2: grid tecnológico animado (igual ao hero) */
#contato::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size: 32px 32px;
  -webkit-mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
          mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}

/* reusa keyframes se necessário (já presentes no seu CSS) */
@keyframes gridFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-10px)}
}

/* certifica-se que os elementos decorativos do HERO não cubram o contato */
.home-container, .servicos, #about { z-index: 0; }

/* mantém o conteúdo do contato legível acima das camadas */
#contato .contato-form-card,
#contato .contato-locacoes,
#contato .loc-card {
  position: relative;
  z-index: 2; /* garante que os cards fiquem sobre o fundo */
}

/* responsivo: mesma regra que o resto do site */
@media (max-width: 1000px) {
  #contato { padding: clamp(36px,5.5vw,72px) 4%; }
  #contato .contato-inner { width: 92%; }
}

/* ============================
   CONTATO — FORÇAR FULL-BLEED (TELA CHEIA)
   Cole este bloco no final do style.css
   ============================ */

/* faz a seção ocupar toda a largura da viewport
   sem afetar o container interno (que permanece centralizado) */
#contato {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
  padding: clamp(56px, 6vw, 96px) 6%;
  background: #0a0d12; /* mantém o mesmo visual já configurado */
  z-index: 0;
}

/* garante que as camadas decorativas (::before/::after) cubram toda a tela */
#contato::before,
#contato::after {
  left: 0;
  right: 0;
  width: 100vw;
}

/* o conteúdo interno continua centralizado e com largura controlada */
#contato .contato-inner,
#contato .contato-container {
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* reforça que os cards fiquem acima do fundo/full-bleed */
#contato .contato-form-card,
#contato .contato-locacoes,
#contato .loc-card {
  position: relative;
  z-index: 3;
}

/* corrige possíveis overflow horizontais (em casos de scroll) */
html, body {
  overflow-x: hidden;
}

/* responsivo: empilha corretamente em telas menores */
@media (max-width:1000px) {
  #contato {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: clamp(36px,5.5vw,72px) 4%;
  }
  #contato .contato-inner { grid-template-columns: 1fr; width: 92%; }
}

/* ============================
   CONTATO — TELA CHEIA (CORRIGIDO, CENTRALIZADO)
   ============================ */

#contato {
  position: relative;
  width: 100%;
  min-width: 100vw; /* ocupa toda a largura da viewport */
  margin: 0;
  left: 0;
  right: 0;
  padding: clamp(56px, 6vw, 96px) 0;
  background: #0a0d12;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

/* Fundo com glows + degradês + grid (mesmo padrão de serviços/sobre) */
#contato::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,162,211,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(4,88,121,.18), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,162,211,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  filter: blur(2px);
}

#contato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size: 32px 32px;
  -webkit-mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
          mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}

/* garante que o conteúdo fique acima das camadas decorativas */
#contato .contato-inner {
  position: relative;
  z-index: 3;
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* mantém os cartões e mapas sobre o fundo */
#contato .contato-form-card,
#contato .contato-locacoes,
#contato .loc-card {
  position: relative;
  z-index: 3;
}

/* previne rolagem horizontal */
html, body {
  overflow-x: hidden;
}

/* Responsivo */
@media (max-width: 1000px) {
  #contato .contato-inner {
    grid-template-columns: 1fr;
    width: 92%;
  }
}

/* ===========================
   CONTATO — PADRÃO IGUAL SERVIÇOS / SOBRE
   Substitua todas as regras antigas de contato por este bloco
   =========================== */

#contato{
  /* full-bleed visual idêntico a #servicos / #about */
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(56px, 6vw, 96px) 0;
  background: #0a0d12;
  color: var(--text);
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
}

/* camadas decorativas (glow + grid) */
#contato::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,162,211,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(4,88,121,.18), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(5,162,211,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.92), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent 70%);
  filter: blur(2px);
}
#contato::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,.12) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.12) 32px);
  background-size:32px 32px;
  -webkit-mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
          mask: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 55%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 90%);
  animation: gridFloat 12s ease-in-out infinite alternate;
}

/* container interno centralizado (mantém conteúdo alinhado e não empurra para direita) */
.contato-inner{
  position: relative;
  z-index: 3;
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px; /* evita overflow horizontal, minmax(0,1fr) importante */
  gap: 28px;
  align-items: start;
  box-sizing: border-box;
  padding: 0 2%;
}

/* cartão do formulário — estilo idêntico aos cards de serviço/sobre */
.contato-form-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: visible;
}

/* ícone circular similar ao .svc-icon */
.contato-form-card::before{
  content:"";
  position:absolute;
  left:20px; top:-22px;
  width:56px; height:56px; border-radius:50%;
  background:
    radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05)),
    linear-gradient(90deg, var(--accent), var(--accent-warm));
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* título / subtítulo */
#contato h3{
  text-align:center;
  margin: 0 0 8px;
  font-size:2.2rem;
  color: #e9f6ff;
  letter-spacing: .6px;
}
.contato-sub{ text-align:center; margin-bottom:12px; color:var(--muted); }

/* contato rápido (whatsapp / e-mail) */
.contato-quick{ text-align:center; color:#bfeaf6; margin-bottom:12px; font-size:1.4rem; }
.contato-quick a{ color:var(--accent); font-weight:700; text-decoration:none; }

/* inputs — visual limpo igual ao print (branco) */
.contato-form{ display:flex; flex-direction:column; gap:10px; }
.contato-form input,
.contato-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:6px;
  border:none;
  font-size:14px;
  background:#fff;
  color:#111;
  box-sizing:border-box;
  outline:none;
  transition: transform .08s ease, box-shadow .12s ease;
}
.contato-form textarea{ min-height:140px; resize:vertical; }
.contato-form input:focus,
.contato-form textarea:focus{ box-shadow: 0 8px 28px rgba(5,162,211,0.06); transform: translateY(-2px); }

/* botão no padrão (gradiente azul) */
.contato-btn{
  display:inline-block;
  background: linear-gradient(90deg,var(--accent),var(--accent-warm));
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 18px 46px rgba(5,162,211,0.12);
  transition: transform .14s ease, box-shadow .14s ease;
  width: 100%;
}
.contato-btn:hover{ transform: translateY(-3px); box-shadow: 0 26px 56px rgba(5,162,211,0.18); }

/* seção de localizações — cards iguais aos svc-card */
.contato-locacoes{ display:flex; flex-direction:column; gap:14px; align-self:start; }
.loc-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.loc-card iframe{
  width:100%;
  height:180px;
  border:0;
  border-radius:8px;
  display:block;
}

/* painel de detalhes com fundo azulado como no print */
.loc-info{
  margin-top:8px;
  background: linear-gradient(180deg, rgba(3,24,30,0.35), rgba(2,16,20,0.15));
  padding:12px;
  border-radius:8px;
  border: 1px solid rgba(255,255,255,0.02);
  color: #d8f5ff;
}
.loc-info h4{ margin:0 0 6px; color:#eaf7ff; font-size:1.05rem; }
.loc-info p{ margin:4px 0; color:#bfeaf6; font-size:13px; }

/* hover / foco — mesmo comportamento dos cards de serviços */
.contato-form-card:hover,
.loc-card:hover{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent) inset,
    0 24px 72px rgba(0,0,0,.45);
  border-color: color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.14));
}

/* responsivo: empilha e mantém espaçamentos corretos */
@media (max-width:1000px){
  .contato-inner{
    grid-template-columns: 1fr;
    width: 92%;
    gap: 20px;
  }
  .contato-locacoes{ order: 2; }
  .contato-form-card{ order: 1; }
  .loc-card iframe{ height:220px; }
}

/* segurança contra overflow horizontal */
html, body { overflow-x: hidden; }

/* === ÍCONE DISCRETO E ELEGANTE NO CARD DE CONTATO ===
   Cole este bloco NO FINAL do style.css, substitui regras antigas. */

#contato .contato-form-card {
  position: relative;
  z-index: 3;
}

/* círculo pequeno com o logo centralizado — sem halo exagerado */
#contato .contato-form-card::before{
  content: "";
  position: absolute;
  left: 22px;         /* ajuste fino da posição horizontal */
  top: -22px;         /* posiciona parcialmente fora do card */
  width: 48px;        /* tamanho do círculo */
  height: 48px;
  border-radius: 50%;
  display: block;
  z-index: 6;

  /* fundo sutil com gradiente (mesma paleta) */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(90deg, var(--accent), var(--accent-warm));
  background-blend-mode: overlay;

  /* logo centralizado (ajuste o caminho se necessário) */
  background-image: url('./Fotos/Logo Nodus.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;

  /* borda e sombra discretas para contraste */
  border: 2px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 2px 8px rgba(5,161,209,0.035);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* leve interação ao passar o mouse (opcional, discreta) */
#contato .contato-form-card:hover::before{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.5), 0 4px 12px rgba(5,161,209,0.05);
}

/* ajuste para telas pequenas */
@media (max-width: 900px){
  #contato .contato-form-card::before{
    left: 16px;
    top: -18px;
    width: 44px;
    height: 44px;
    background-size: 62% 62%;
  }
}

/* se preferir esconder o círculo em telas muito pequenas */
@media (max-width: 520px){
  #contato .contato-form-card::before{ display: none; }
}

/* === ÍCONE AJUSTADO E ALINHADO AO TÍTULO === */
#contato .contato-form-card {
  position: relative;
  z-index: 3;
}

/* Ícone redondo com o logo, alinhado visualmente */
#contato .contato-form-card::before {
  content: "";
  position: absolute;
  left: 26px;        /* desloca levemente à direita */
  top: 12px;         /* abaixa o círculo para alinhar com o título */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 6;
  display: block;

  /* Fundo e gradiente azul */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(90deg, var(--accent), var(--accent-warm)),
    url('./Fotos/Logo Nodus.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 100% 100%, 100% 100%, 58% 58%;

  border: 2px solid rgba(255,255,255,0.04);
  box-shadow:
    0 8px 22px rgba(0,0,0,0.45),
    0 2px 8px rgba(5,161,209,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* efeito hover sutil */
#contato .contato-form-card:hover::before {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.5),
    0 4px 12px rgba(5,161,209,0.05);
}

/* Responsivo: ajusta proporções */
@media (max-width: 900px) {
  #contato .contato-form-card::before {
    left: 18px;
    top: 8px;  /* levemente mais alto em telas pequenas */
    width: 44px;
    height: 44px;
    background-size: 62% 62%;
  }
}

@media (max-width: 520px) {
  #contato .contato-form-card::before { display: none; }
}

/* === ÍCONE TRANSPARENTE, APENAS COM O LOGO E CONTORNO SUTIL === */
#contato .contato-form-card {
  position: relative;
  z-index: 3;
}

/* Ícone do logo no topo do card */
#contato .contato-form-card::before {
  content: "";
  position: absolute;
  left: 26px;        /* alinhamento horizontal */
  top: 12px;         /* alinhamento vertical */
  width: 50px;
  height: 50px;
  border-radius: 14px; /* mesmo formato do print (não 100% redondo) */
  z-index: 6;
  display: block;

  /* fundo transparente, apenas o logo */
  background: transparent url('./Fotos/Logo Nodus.png') center/60% no-repeat;

  /* contorno e sombra sutis */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.45),
    0 0 8px rgba(5,161,209,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* leve animação ao passar o mouse */
#contato .contato-form-card:hover::before {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    0 0 10px rgba(5,161,209,0.08);
}

/* Responsivo */
@media (max-width: 900px) {
  #contato .contato-form-card::before {
    left: 18px;
    top: 8px;
    width: 44px;
    height: 44px;
    background-size: 62%;
  }
}

@media (max-width: 520px) {
  #contato .contato-form-card::before { display: none; }
}

/* ==========================
   CONTATO - OVERRIDES / BADGE
   Cole no final do style.css
   ========================== */

/* garante container centralizado (força o mesmo centro dos .servicos/#about) */
#contato .contato-inner {
  width: min(1200px, 92%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 28px !important;
  align-items: start;
  justify-items: stretch;
  z-index: 3;
}

/* Card do formulário: aparência igual aos svc-cards (reforço) */
#contato .contato-form-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  padding: 26px 24px 22px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
  position: relative;
  overflow: visible;
}

/* Remove o "círculo azul" antigo (se usa ::before) e neutraliza efeitos */
#contato .contato-form-card::before{
  /* neutraliza a bola azul antiga */
  display: none !important;
}

/* novo badge (ícone da Nodus) - transparente atrás e apenas o logo visível */
#contato .contato-form-card .card-badge {
  position: absolute;
  left: 20px;                /* distância da borda esquerda do card */
  top: 8px;                  /* ajuste para ficar esteticamente mais baixo */
  width: 56px;
  height: 56px;
  border-radius: 10px;       /* ligeiro arredondado como no resto dos cards */
  background: transparent;   /* sem cor sólida atrás */
  display: block;
  z-index: 6;
  pointer-events: none;
  /* sombra sutil para destaque (sem preencher com azul) */
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset;
}

/* coloca o logo dentro do badge (substitua a URL) */
#contato .contato-form-card .card-badge::after{
  content: "";
  position: absolute;
  inset: 6px;                /* pequeno padding interno para respirar */
  background-image: url('URL-DO-ICONE.png'); /* <-- substitua pela sua imagem */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  border-radius: 6px;
}

/* se preferir o ícone redondo, use isto em vez do border-radius acima:
   #contato .contato-form-card .card-badge { border-radius: 50%; }
   #contato .contato-form-card .card-badge::after { inset: 8px; border-radius:50%; }
*/

/* Ajeita espaçamento interno do h3/subtítulo para compensar o badge */
#contato .contato-form-card h3 {
  margin-top: 8px; /* garante que o título apareça ligeiramente abaixo do badge */
  text-align: center;
  font-size: 2.0rem;
}

/* Garante que o formulário não "salte" para a esquerda (corrige offset) */
#contato {
  box-sizing: border-box;
  padding-left: 0;  /* o grid interno já centraliza; se necessário ajuste globalmente */
  padding-right: 0;
}

/* Cards de localização: mesmo padrão dos svc-card */
#contato .loc-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45) !important;
  overflow: hidden;
}

/* painel de detalhes estilo print (mais escuro) */
#contato .loc-info{
  margin-top:8px;
  background: linear-gradient(180deg, rgba(3,24,30,0.35), rgba(2,16,20,0.15));
  padding:12px;
  border-radius:8px;
  border: 1px solid rgba(255,255,255,0.02);
  color: #d8f5ff;
}

/* hover / foco igual aos serviços */
#contato .contato-form-card:hover,
#contato .loc-card:hover{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent) inset,
    0 24px 72px rgba(0,0,0,.45);
  border-color: color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.14));
}

/* mobile: garante empilhamento correto (mantém seu comportamento) */
@media (max-width:1000px){
  #contato .contato-inner{ grid-template-columns: 1fr; width: 92%; gap:20px; }
  #contato .contato-locacoes{ order: 2; }
  #contato .contato-form-card{ order: 1; }
  #contato .loc-card iframe{ height:220px; }
}

/* ===== CONTATO (PADRÃO UNIFICADO) ===== */
#contato {
  padding: clamp(60px, 6vw, 100px) 0;
  color: var(--text);
}

#contato .contato-inner {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* CARD DO FORMULÁRIO */
#contato .contato-form-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 32px 24px 26px;
  overflow: visible;
}

/* ÍCONE DA NODUS (sem fundo azul) */
#contato .contato-form-card .card-badge {
  position: absolute;
  left: 22px;
  top: 20px;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: transparent;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 8px rgba(5,161,209,0.1);
}

#contato .contato-form-card .card-badge::after {
  content: "";
  position: absolute;
  inset: 5px;
  background-image: url('./Fotos/Logo Nodus.png'); /* seu logo aqui */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 4px rgba(5,161,209,0.4));
}

/* TÍTULO */
#contato .contato-form-card h3 {
  margin-top: 12px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

#contato .contato-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
}

#contato .contato-quick {
  font-size: 1rem;
  margin-bottom: 1rem;
}

#contato .contato-quick a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* FORMULÁRIO */
#contato .contato-form input,
#contato .contato-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

#contato .contato-form textarea {
  min-height: 130px;
  resize: vertical;
}

#contato .contato-btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 0.9rem 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#contato .contato-btn:hover {
  background: var(--accent-warm);
}

/* LOCALIZAÇÕES */
#contato .loc-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  margin-bottom: 1rem;
}

#contato .loc-card iframe {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  border: none;
}

#contato .loc-info {
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(3,24,30,0.35), rgba(2,16,20,0.15));
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  color: #d8f5ff;
  font-size: 0.95rem;
}

/* MOBILE */
@media (max-width: 1000px) {
  #contato .contato-inner {
    grid-template-columns: 1fr;
  }
  #contato .contato-form-card {
    order: 1;
  }
  #contato .contato-locacoes {
    order: 2;
  }
}

/* ====== RODAPÉ (estilo padrão do site) ====== */
#site-footer {
  background: #07090b;
  color: var(--text);
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(255,255,255,0.03);
  padding-top: 36px;
  padding-bottom: 12px;
}

/* top area com glows iguais às seções */
#site-footer .footer-top{
  padding: clamp(32px, 4.5vw, 56px) 0 18px;
  position: relative;
}
#site-footer .footer-top::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(5,161,209,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(255,122,26,.06), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.85), transparent 40%);
  filter: blur(10px);
  opacity: .95;
}

/* container grid */
.footer-container{
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

/* Brand */
.footer-brand { grid-column: 1 / span 1; }
.footer-brand .footer-logo img { width: 54px; height: 54px; object-fit:contain; filter: drop-shadow(0 6px 14px rgba(5,161,209,0.12)); }
.footer-desc { margin-top: 8px; color: var(--muted); font-size: 1.05rem; line-height:1.45; }

/* social */
.footer-social { margin-top: 12px; display:flex; gap:10px; }
.footer-social .social-link { display:inline-grid; width:38px; height:38px; place-items:center; border-radius:8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); transition: transform .18s ease, box-shadow .18s ease; }
.footer-social .social-link svg { width:18px; height:18px; fill:#cfe9f9; opacity:.95; }
.footer-social .social-link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.45), 0 0 12px rgba(5,161,209,0.06); }

/* Links úteis */
.footer-links { grid-column: 2 / span 1; }
.footer-links h4, .footer-contact h4, .footer-newsletter h4 { color: #eaf7ff; margin-bottom:10px; font-size:1.05rem; }
.footer-links ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a { color: var(--muted); text-decoration:none; font-size:0.98rem; }
.footer-links a:hover { color: var(--accent); text-decoration:underline; }

/* Contato rápido */
.footer-contact { grid-column: 3 / span 1; color: var(--muted); font-size:0.98rem; }
.footer-contact a { color: var(--accent); text-decoration:none; font-weight:600; }

/* Newsletter */
.footer-newsletter { grid-column: 4 / span 1; }
.footer-news-form{ display:flex; gap:10px; margin-top:8px; }
.footer-news-form input{ flex:1; padding:10px 12px; border-radius:8px; border:none; background: rgba(255,255,255,0.06); color:#fff; outline:none; }
.newsletter-btn{ background: linear-gradient(90deg,var(--accent),var(--accent-warm)); color:#fff; padding:10px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:700; }

/* bottom area */
.footer-bottom{
  margin-top:18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.025);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}
.footer-bottom-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width: min(1200px, 92%); margin: 0 auto; z-index:2;
}
.footer-bottom-inner small{ color: #bfeaf6; font-size:0.92rem; }
.footer-bottom-right{ display:flex; gap:12px; align-items:center; }
.footer-bottom-right a{ color: var(--muted); font-size:0.92rem; text-decoration:none; }
.footer-bottom-right a:hover{ color: var(--accent); text-decoration:underline; }

/* back-to-top */
#back-to-top{
  padding:6px 10px; border-radius:6px; background: rgba(255,255,255,0.02);
}

/* MOBILE: empilhamento e ajustes */
@media (max-width:1000px){
  .footer-container{ grid-template-columns: 1fr; }
  .footer-brand, .footer-links, .footer-contact, .footer-newsletter { grid-column: auto; }
  .footer-desc{ max-width: 62ch; }
  .footer-bottom-inner{ flex-direction:column; gap:8px; text-align:center; }
}

/* pequeno ajuste para inputs/links focados (acessibilidade) */
.footer-news-form input:focus, .footer-news-form button:focus, .footer-social .social-link:focus{ outline: 3px solid rgba(5,161,209,0.12); outline-offset: 2px; }

/* evita overflow horizontal quando full-bleed */
html, body { overflow-x: hidden; }

.hero-logo{
  width: 250px;                    /* tamanho ideal premium */
  height: auto;
  display: block;

  /* espaçamento perfeito entre o logo e o título */
  margin-bottom: 2.2rem;

  /* microajuste que alinha o logo exatamente com a margem do texto */
  margin-left: 4px;

  /* sombra sutil profissional */
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.38));

  /* animação leve e elegante */
  transition: transform 0.25s ease, filter 0.25s ease;
}

.hero-logo:hover{
  transform: translateY(-3px);                /* movimento sutil */
  filter: drop-shadow(0 14px 32px rgba(0,0,0,0.45));
}

@media (max-width: 700px){
  .hero-logo{
    width: 140px;              /* tamanho premium em mobile */
    margin-bottom: 1.6rem;
    margin-left: 1px;
  }
}

/* Permitir clique normalmente */
.home-container {
  pointer-events: auto !important;
}

/* Apenas o fundo decorativo não recebe clique */
.home-container::before,
.home-container::after,
.ambient-glow,
.tech-grid,
.orb,
.fundo {
  pointer-events: none !important;
}

/* ====== FIX DEFINITIVO + CENTRALIZAR MENU ====== */

/* Header sempre acima de tudo */
.header {
  position: relative;
  z-index: 999999 !important;
}

/* Mantém o header organizado */
.header__inner {
  display: flex;
  justify-content: center;  /* <-- CENTRALIZA O MENU */
  align-items: center;
  gap: 40px;                 /* espaço entre logo e menu */
  width: 100%;
  position: relative;
}

/* NAVBAR corretamente centralizado */
.navbar {
  display: flex;
  justify-content: center;   /* <-- CENTRALIZA OS LINKS */
  align-items: center;
  gap: 32px;                 /* espaçamento entre itens */
  pointer-events: auto !important;
  flex: 0 0 auto !important; /* evita esticar e empurrar para a direita */
}

/* Área clicável perfeita */
.navbar a {
  display: inline-block;
  padding: 12px 10px;
  line-height: 1;
  pointer-events: auto !important;
}

/* Remove qualquer overlay do HERO sobre o menu */
.home-container::before,
.home-container::after,
.fundo,
.ambient-glow,
.tech-grid,
.orb {
  pointer-events: none !important;
}

/* ===== FIX HEADER — GRID (RECOMENDADO) ===== */
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | centro (navbar) | espaço à direita */
  align-items: center;
  gap: 24px;
  width: 100%;
  height: 100%;
  padding: 0 2.4rem;
  position: relative;
  justify-items: stretch;
}

/* força o logo no canto esquerdo sem afetar o centro */
.header__inner .logo {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* centraliza o navbar no meio da grade */
.header__inner .navbar {
  grid-column: 2 / 3;
  display: flex;
  justify-content: center;   /* centraliza os links */
  align-items: center;
  gap: 2.4rem;
  pointer-events: auto !important;
}

/* permite itens à direita (se tiver) sem empurrar o navbar */
.header__inner .actions, /* exemplo: botoes à direita */
.header__inner .right {
  grid-column: 3 / 4;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
}

/* garante que o logo não aumente demais e empurre */
.header__inner .logo img {
  max-height: 52px;
  width: auto;
  display: block;
}

.header__inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important; /* logo | navbar centrada | ações direita */
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 0 2.4rem !important;
  position: relative !important;
}

/* Navbar: ocupa a coluna do meio e força centralização absoluta */
.header__inner .navbar {
  grid-column: 2 / 3 !important;
  display: flex !important;
  width: 100% !important;               /* garante espaço para centrar */
  justify-content: center !important;   /* aqui: centro absoluto */
  align-items: center !important;
  gap: 2.4rem !important;
  margin: 0 auto !important;
  flex: 0 1 auto !important;            /* remove efeitos de flex:1 antigos */
  pointer-events: auto !important;
}

/* Zera margens/paddings que possam empurrar itens isolados */
.header__inner .navbar > * { margin: 0 !important; padding: 0 !important; }
.header__inner .navbar a { margin: 0 !important; }

/* Logo à esquerda, sem interferir na centralização */
.header__inner .logo {
  grid-column: 1 / 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.header__inner .logo img { max-height: 52px !important; width: auto !important; }

/* Área direita (ações) — fica à direita sem empurrar o centro */
.header__inner .actions,
.header__inner .right {
  grid-column: 3 / 4 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Segurança: anula regras problemáticas conhecidas */
.navbar { flex: unset !important; }
.navbar a { display: inline-block !important; }

/* Evita wrap estranho que coloca alguns itens deslocados */
.header__inner, .header__inner .navbar { white-space: nowrap !important; }

/* Se alguns links têm margin-left:auto escondida por outro seletor, remove aqui */
.header__inner .navbar *[style*="margin-left:auto"] { margin-left: 0 !important; }

/* Responsivo: mantém centralizado em mobile */
@media (max-width: 700px){
  .header__inner { grid-template-columns: auto 1fr auto !important; padding: 0 1.2rem !important; }
  .header__inner .navbar { gap: 1rem !important; justify-content: center !important; }
}

/* GARANTE QUE O MENU FIQUE SEMPRE POR CIMA */
.header {
    position: fixed !important;
    z-index: 9999 !important; /* sempre acima de tudo */
}

/* garante que nada do hero bloqueie o clique */
.home-container,
.home-container * {
    z-index: 0 !important;
    pointer-events: auto !important;
}

.home-container::before,
.home-container::after,
.ambient-glow,
.tech-grid,
.orb,
.fundo {
    pointer-events: none !important; /* elementos decorativos não bloqueiam clique */
    z-index: -1 !important;
}