/* container já vem do seu site.css (max-width:1120px) */

/* espaçamento grande entre seções */
.section{ padding-block: clamp(56px, 10vw, 120px); }
.section + .section{ border-top: 1px solid var(--line); }

/* HERO — texto à ESQ, imagem à DIR; no mobile: uma coluna (texto antes da imagem) */
.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 36px);
  align-items: center;
}
.hero-left{ display: grid; gap: 14px; }
.hero-left .tag{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background: rgba(61,161,255,.12);
  border: 1px solid rgba(61,161,255,.35);
  color:#a5ccff; font-weight:800;
}
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.preview{ border:1px solid var(--card-border); border-radius:.75rem; overflow:hidden; background:var(--card); }
.preview img{ width:100%; height:100%; object-fit:contain; }
.badge{ position:absolute; top:12px; right:12px; }

/* desktop */
@media (min-width: 992px){
  .hero-grid{ grid-template-columns: 1.1fr .9fr; gap: 56px; min-height: 76vh; }
}

/* SOBRE */
.about-grid{
  display:grid; gap: clamp(24px, 4vw, 36px); grid-template-columns:1fr; align-items:center;
}
.about-copy{ display:grid; gap:14px; max-width:64ch; }
@media (min-width:992px){ .about-grid{ grid-template-columns:.9fr 1.1fr; } }

/* DEPOIMENTOS */
.depo-grid{ display:grid; gap:24px; }
.depo-card{ margin:0; padding:18px; border-left:4px solid var(--button-bg); background:var(--card); border-radius:.75rem; }

/* FAQ */
.faq-item{
  border:1px solid var(--card-border); border-radius:.75rem; padding:18px; background:var(--card); margin-bottom:16px;
}
.faq-item summary{ cursor:pointer; font-weight:800; list-style:none; }

/* MARCAS */
.logo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:center; }
.logo-row img{ width:100%; height:auto; background:var(--card); border:1px solid var(--card-border); border-radius:.5rem; padding:12px; filter:saturate(.95); }

/* FORM */
.lead-form .form-grid{ display:grid; gap:18px; }
.lead-form label{ display:grid; gap:6px; max-width:640px; }
.lead-form .full{ grid-column:1/-1; }
@media (min-width:760px){ .lead-form .form-grid{ grid-template-columns:1fr 1fr; } }

/* utilitária */
.measure{ max-width:64ch; }
.muted{ color: var(--muted); }

/* ==========================================================
   BOTÕES — aparência refinada e integrada ao tema
   ========================================================== */

.btn-click{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:999px;border:none;
  background: linear-gradient(90deg, var(--button-bg, #3DA1FF), var(--button-bg-2, #00E0B8));
  color: var(--button-tx, #fff);
  font-weight:700;font-size:1rem;letter-spacing:.3px;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
  cursor:pointer;
}
.btn-click:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 28px rgba(0,0,0,.25); }
.btn-click:active{ transform:translateY(0); filter:brightness(.95); box-shadow:0 4px 10px rgba(0,0,0,.15); }

/* Versão secundária usa borda, mas herda as variáveis para hover */
.btn-click.secondary{
  background:transparent; color:var(--text,#fff);
  border:1px solid rgba(255,255,255,.25); box-shadow:none;
}
.btn-click.secondary:hover{
  border-color:var(--button-bg,#3DA1FF);
  color:var(--button-bg,#3DA1FF);
  background: color-mix(in srgb, var(--button-bg,#3DA1FF) 8%, transparent);
}


/* =======================
   TOPBAR — correções finais
   ======================= */

/* Glass real (com fallback por tema) */
.theme-dark .topbar{
  position: sticky; top:0; z-index:999;
  background: rgba(11,18,32,.55);               /* fundo translúcido */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.theme-light .topbar{
  position: sticky; top:0; z-index:999;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Layout em linha SEM quebrar para baixo */
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:10px 0; flex-wrap:nowrap; min-height:64px;
}

/* Logo não força altura gigante */
.brand{ display:flex; align-items:center; gap:px; text-decoration:none; color:inherit; font-weight:800; white-space:nowrap }
.brand img{ display:block; max-height:120px; width:auto }   /* usa logo_size inline como limite superior */

/* Menu à direita, alinhado ao centro vertical */
.topbar .nav{
  display:flex; align-items:center; justify-content:flex-end;
  gap:22px; flex:1 1 auto; min-width:0; white-space:nowrap;
}

/* Links com sublinhado animado + estado ativo */
.topbar .nav a{ position:relative; text-decoration:none; color:var(--text); font-weight:600; line-height:1 }
.topbar .nav a[data-link]::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: linear-gradient(90deg, var(--button-bg), var(--button-bg-2));
  transition: width .25s ease;
}
.topbar .nav a[data-link]:hover::after{ width:100% }
.topbar .nav a.active{ color: var(--button-bg); }

/* Botão CTA dentro do menu */
.topbar .nav-cta{ padding:10px 16px; border-radius:999px }

/* Botão hambúrguer só no mobile */
.nav-toggle{ display:none; }

/* MOBILE */
@media (max-width: 992px){
  .brand img{ max-height:40px }
  .nav-toggle{
    display:flex; width:44px; height:44px; border:none; background:transparent; border-radius:10px;
    align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-toggle:hover{ background: color-mix(in srgb, var(--text) 8%, transparent) }
  .nav-toggle .bar{ display:block; width:22px; height:2px; margin:3px 0; background:var(--text); transition:.2s }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(5px) rotate(45deg) }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg) }

  /* Menu vira card flutuante */
  .topbar .nav{
    position: fixed; inset: 64px 16px auto 16px;
    flex-direction:column; gap:14px; padding:16px;
    background: var(--card); border:1px solid var(--card-border);
    border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transform: translateY(-8px); transition:.2s ease;
    white-space:normal; /* pode quebrar em mobile */
  }
  .topbar .nav.show{ opacity:1; pointer-events:auto; transform: translateY(0) }
  .topbar .nav a{ padding:10px 6px }
  .topbar .nav-cta{ width:100%; text-align:center }
}

/* SOBRE — grid sólido e anti-quebra */
.about-grid{
  display:grid;
  align-items:center;
  gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 1fr;         /* mobile */
}
.about-grid > *{ min-width:0 }        /* evita overflow que força quebra de linha */

/* texto e botão */
.about-copy .measure{ max-width:60ch }
#sobre .cta-row{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:12px }

/* mídia */
.about-media{ width:100% }
.about-figure{
  position:relative; display:block; width:100%;
  aspect-ratio: 4/3;
  border-radius:16px; overflow:hidden;
  background: var(--card);
  border:1px solid var(--card-border);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.about-figure img{ width:100%; height:100%; object-fit:cover; display:block }

/* respiro da seção */
#sobre.section{ padding-block: clamp(56px, 8vw, 112px) }

/* breakpoint cedo (tablet) — vira 2 colunas lado a lado */
@media (min-width: 768px){
  .about-grid{ grid-template-columns: 1fr 1fr }
}

/* desktops maiores — dá um pouco mais de espaço ao texto */
@media (min-width: 1200px){
  .about-grid{ grid-template-columns: 1.1fr .9fr }
}


/* ====== CATÁLOGO (estável, sem scale) ====== */
.x3d-section { --gap: 16px; }

.x3d-container{
  position:relative;
  width:100%;
  margin-inline:auto;
  max-width: min(1100px, 92vw);
}

.x3d-viewport{
  overflow:hidden;
  border-radius:16px;
  padding:12px 0;
}

.x3d-track{
  display:flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Cada card tem tamanho fixo (responsivo) */
.x3d-card{
  flex:0 0 clamp(240px, 30vw, 340px);
  background: var(--card);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:14px;
  color:var(--text);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.x3d-figure{
  aspect-ratio: 1/1;             /* 1:1 constante */
  border-radius:14px;
  overflow:hidden;
  background:#0a0f18;
  margin:0 0 10px 0;
}
.x3d-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.x3d-title{
  font-size:clamp(16px, 2.3vw, 18px);
  margin:6px 0 0 0;text-align:center;
}

/* descrições colapsáveis ficam abaixo — opcional */
.x3d-desc{ display:none }

/* vizinhos ficam só um pouco “apagados” (sem scale) */
.x3d-card.is-dimmed{ filter: blur(1.2px) saturate(.8); opacity:.75; }

/* Navegação */
.x3d-nav{
  position:absolute; inset-block:0;
  width:46px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); border:none; background:transparent;
  font-size:28px; cursor:pointer; z-index:2; transition:.2s;
}
.x3d-nav:hover{ color:#fff; transform:translateY(-1px); }
#x3d-prev{ left:-2px; } 
#x3d-next{ right:-2px; }

/* CTA abaixo */
.x3d-cta{ display:flex; justify-content:center; margin-top:16px; }



/* ===== Carrossel de Logos (Marcas) — Isolado ===== */
.partners-section{
  position:relative;
  width:100%;
  padding: clamp(16px,3.5vw,26px) 0;
  overflow:hidden;
}
.partners-section::before,
.partners-section::after{
  content:""; position:absolute; top:0; bottom:0; width:12%;
  pointer-events:none; z-index:10;
}
.theme-dark .partners-section::before{ left:0; background:linear-gradient(to right, var(--bg) 28%, transparent) }
.theme-dark .partners-section::after { right:0; background:linear-gradient(to left,  var(--bg) 28%, transparent) }
.theme-light .partners-section::before{ left:0; background:linear-gradient(to right, #fff 28%, transparent) }
.theme-light .partners-section::after { right:0; background:linear-gradient(to left,  #fff 28%, transparent) }

/* faixa */
.partners-section .logo-carousel{
  display:flex; align-items:center; gap: clamp(10px,2vw,18px);
  transition: transform .6s cubic-bezier(.86,0,.07,1);
  will-change: transform;
}

/* item: baseline “dim” (fica desfocado/opaco por padrão) */
.partners-section .logo-item{
  min-width: clamp(120px, 18vw, 220px);
  padding: 0 clamp(6px,1vw,10px);
  display:flex; justify-content:center; align-items:center;
  transform: scale(.86);
  opacity:.55;
  filter: grayscale(70%) blur(.5px);
  transition: transform .6s cubic-bezier(.86,0,.07,1), opacity .3s, filter .3s;
  text-decoration:none;
}
.partners-section .logo-item img{
  max-width: 100%; height: auto; display:block; object-fit: contain;
}

/* ativo */
.partners-section .logo-item.is-active{
  transform: scale(1);
  opacity:1;
  filter: none;
}

/* nav */
.partners-section .carousel-nav{
  position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center;
  pointer-events:none; padding: 0 clamp(4px,1vw,12px); z-index:15;
}
.partners-section .carousel-nav .brands-prev,
.partners-section .carousel-nav .brands-next{
  pointer-events:auto; background:transparent; border:none; cursor:pointer;
  color: var(--text); opacity:.35;
  font-size: clamp(28px, 4vw, 40px); line-height:1;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  transition: opacity .25s, transform .2s;
}
.partners-section .carousel-nav .brands-prev:hover,
.partners-section .carousel-nav .brands-next:hover{ opacity:.9; transform:scale(1.08) }

/* acesso */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0 }