:root{
  --ink:#12171a;
  --bege: #f1ebe2;
  --ink-soft:#1b2226;
  --paper:#F8F8F8;
  --paper-soft:#ffb0b0;
  --brass:#a10005;
  --brass-light:#e22f35;
  --teal:#8c0000;
  --text-dark:#1a1e1f;
  --text-light:#f4efe2;
  --muted-dark: rgba(10,10,10,.64);
  --muted-light: rgba(255,255,255,.66);
  --line-dark: rgba(255,255,255,.14);
  --line-light: rgba(17,17,17,.14);
  --radius: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--text-dark);
  background:var(--paper);
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-font{
  font-family:'Bricolage Grotesque', sans-serif;
  letter-spacing:-0.01em;
}
section{scroll-margin-top:110px;}
a{text-decoration:none;}
.btn{border-radius:2px; font-weight:600; padding:.75rem 1.6rem; letter-spacing:.01em;}
.btn-brass{background:var(--brass); color:#F4F4F4; border:1px solid var(--brass);}
.btn-brass:hover{background:var(--brass-light); color:#FFFFFF;}
.btn-outline-light-custom{border:1px solid rgba(244,239,226,.4); color:var(--text-light); background:transparent;}
.btn-outline-light-custom:hover{border-color:var(--text-light); background:rgba(244,239,226,.08); color:var(--text-light);}
.btn-outline-dark-custom{border:1px solid rgba(26,30,31,.35); color:var(--text-dark); background:transparent;}
.btn-outline-dark-custom:hover{border-color:var(--text-dark); background:rgba(26,30,31,.06);}

.btn-danger {background-color: #a10005!important}
.btn-danger:hover {background-color: #8c0000!important}

/* ===== Floating pill nav ===== */
.floating-nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:1000; width:min(1120px, 94%);
  background:rgba(18,23,26,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(244,239,226,.1);
  border-radius:999px;
  padding:.5rem .6rem .5rem 1.3rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .3s ease, box-shadow .3s ease;
}
.floating-nav.scrolled{ box-shadow:0 12px 30px rgba(0,0,0,.28); }
.nav-brand{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.05rem; color:var(--text-light); display:flex; align-items:center; gap:.5rem;}
.nav-links{display:flex; align-items:center; gap:1.7rem; margin:0 auto;}
.nav-links a{color:var(--muted-light); font-size:.9rem; font-weight:500; position:relative; padding:.3rem 0; transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--brass);transition:width .25s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--text-light);}
.nav-links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:.6rem;}
.nav-toggle{display:none; background:transparent;border:none;color:var(--text-light);font-size:1.4rem;}

@media (max-width: 991.98px){
  .nav-links{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    background:rgba(18,23,26,.96); border:1px solid rgba(244,239,226,.1); border-radius:18px;
    flex-direction:column; align-items:stretch; gap:0; padding:.6rem; display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.75rem 1rem; border-radius:10px;}
  .nav-links a:hover{background:rgba(244,239,226,.06);}
  .nav-toggle{display:block;}
  .nav-cta .btn-text{display:none;}
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100vh; background:var(--ink); color:var(--text-light);
  display:flex; align-items:center; overflow:hidden;
  padding-top:120px;
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.eq-wrap{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  gap:6px; opacity:.35; padding-bottom:0; pointer-events:none;
}
.eq-bar{ width:5px; background:linear-gradient(to top, var(--brass), transparent); border-radius:2px 2px 0 0; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 20%, rgba(255, 56, 56, 0.2), transparent 55%), linear-gradient(180deg, rgba(248, 220, 171, 0) 0%, var(--ink) 92%);
  z-index:1;
}
.hero-content{position:relative; z-index:2;}
.eyebrow-line{display:flex;align-items:center;gap:.6rem;color:rgba(255, 255, 255, 0.6);font-size:.85rem;font-weight:600;margin-bottom:1.4rem;}
.eyebrow-line .rule{width:34px;height:1px;background:rgba(255, 255, 255, 0.6);}
.eyebrow-line em {font-style:normal!important;}
.hero h1{font-size:clamp(2.4rem, 5.4vw, 4.4rem); font-weight:700; line-height:1.04; max-width:16ch;}
.hero p.lead-text{font-size:1.15rem; color:var(--muted-light); max-width:46ch; margin:1.6rem 0 2.2rem;}
.hero-stats{display:flex; gap:2.6rem; margin-top:3.4rem; flex-wrap:wrap;}
.hero-stats .num{font-family:'Bricolage Grotesque',sans-serif; font-size:2rem; font-weight:700; color:var(--brass-light);}
.hero-stats .lbl{font-size:.8rem; color:var(--muted-light); max-width:16ch;}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:var(--muted-dark); font-size:.75rem; display:flex; flex-direction:column; align-items:center; gap:.5rem;}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--brass-light), transparent); animation:pulse-line 1.8s ease-in-out infinite;}
@keyframes pulse-line{0%,100%{opacity:.3;} 50%{opacity:1;}}

/* ===== section headers ===== */
.sec-head{max-width:640px; margin-bottom:3rem;}
.sec-tag{font-size:.8rem; font-weight:600; color:var(--brass); display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem;}
.sec-tag .rule{width:24px;height:1px;background:var(--brass);}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:700; line-height:1.12;}
.sec-head p{color:var(--muted-dark); font-size:1.05rem; margin-top:1rem;}
.on-dark .sec-tag{color:var(--brass-light);}
.on-dark .sec-head p{color:var(--muted-light);}

/* ===== About ===== */
#sobre,#about{padding:7rem 0;}
.stat-row{border-top:1px solid var(--line-light); margin-top:3.5rem;}
.stat-cell{border-right:1px solid var(--line-light); padding:1.8rem 1.4rem;}
.stat-cell:last-child{border-right:none;}
.stat-cell .num{font-family:'Bricolage Grotesque',sans-serif; font-size:2.4rem; font-weight:700; color:var(--ink);}
.stat-cell .lbl{font-size:.85rem; color:var(--muted-dark); margin-top:.3rem;}
.value-item{display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line-light);}
.value-item i{font-size:1.3rem; color:var(--brass); flex:0 0 auto; margin-top:.15rem;}
.value-item h4{font-size:1.02rem; margin-bottom:.25rem;}
.value-item p{color:var(--muted-dark); font-size:.92rem; margin:0;}

/* ===== Services — mixing-console style list ===== */
#servicos,#services{background:var(--bege); color:var(--text-dark); padding:7rem 0;}
.svc-row{
  display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:start;
  padding:1.9rem 0; border-top:1px solid var(--line-dark);
}
.svc-row:last-child{border-bottom:1px solid var(--line-dark);}
.svc-tag-name{display:flex; align-items:center; gap:.7rem; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.08rem;}
.svc-tag-name i{color:var(--brass); font-size:1.15rem;}
.svc-row p{color:var(--muted-dark); margin:0; font-size:.96rem; max-width:62ch;}
@media (max-width: 767.98px){ .svc-row{grid-template-columns:1fr;} }

/* ===== Diferenciais ===== */
#diferenciais,#features{padding:7rem 0;}
.diff-card{padding:2rem 1.7rem; border:1px solid var(--line-light); height:100%; transition:border-color .25s ease, transform .25s ease;}
.diff-card:hover{border-color:var(--brass); transform:translateY(-4px);}
.diff-card .num{font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; color:var(--brass); font-weight:700; margin-bottom:1rem;}
.diff-card h4{font-size:1.05rem; margin-bottom:.6rem;}
.diff-card p{color:var(--muted-dark); font-size:.92rem; margin:0;}

/* ===== Produtos ===== */
#produtos,#products{background:var(--bege); color:var(--text-dark); padding:7rem 0;}
.prod-cat{border-left:2px solid var(--brass); padding-left:1.2rem; margin-bottom:2.2rem;}
.prod-cat h4{font-size:1.05rem; margin-bottom:.4rem; font-family:'Bricolage Grotesque',sans-serif;}
.prod-cat p{color:var(--muted-dark); font-size:.92rem; margin:0;}

/* ===== Portfolio ===== */
#portfolio{padding:7rem 0; overflow:hidden;}
#portfolio .btn-danger {background-color: #a10005!important}
#portfolio .btn-danger:hover {background-color: #8c0000!important}
.segment-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); margin-bottom:3rem;}
.segment-cell{background:var(--paper); padding:1.7rem 1.4rem;}
.segment-cell i{font-size:1.4rem; color:var(--brass); margin-bottom:.7rem; display:block;}
.segment-cell h4{font-size:.98rem; margin-bottom:.35rem;}
.segment-cell p{font-size:.85rem; color:var(--muted-dark); margin:0;}
@media (max-width: 767.98px){ .segment-grid{grid-template-columns:repeat(2,1fr);} }

.marquee{position:relative; 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);}
.marquee-track{display:flex; gap:2.6rem; width:max-content; animation:scroll-x 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-family:'Bricolage Grotesque',sans-serif; font-size:1.15rem; font-weight:600; color:var(--muted-dark); white-space:nowrap;}
@keyframes scroll-x{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== Social ===== */
#social{color:var(--text-light); padding:6rem 0;}
#social .sec-tag{color:#FFF;}
#social .rule {background-color: #ff4d53!important;}
#social p{color:rgba(255,255,255,.82);}

/* ===== Instagram CTA ===== */
#instagram{background:var(--bege); color:var(--text-dark); padding:7rem 0;}
.pillar{border:1px solid var(--line-dark); padding:1.6rem 1.4rem; height:100%;}
.pillar i{font-size:1.3rem; color:var(--brass-light); margin-bottom:.8rem; display:block;}
.pillar h4{font-size:.98rem; margin-bottom:.4rem;}
.pillar p{font-size:.86rem; color:var(--muted-dark); margin:0;}
.insta-cta{border:1px solid var(--line-dark); padding:2.2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:2.6rem;}
.insta-handle{font-family:'Bricolage Grotesque',sans-serif; font-size:1.3rem; font-weight:700;}

/* ===== Contato ===== */
#contato,#contact{padding:7rem 0;}
.contact-info-row{display:flex; gap:1.1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--line-light);}
.contact-info-row i{font-size:1.2rem; color:var(--brass); margin-top:.15rem;}
.contact-info-row a{color:var(--text-dark); font-weight:600;}
.contact-info-row span{display:block; font-size:.82rem; color:var(--muted-dark);}
.form-control, .form-select{
  background:transparent; border:none; border-bottom:1px solid var(--line-light); border-radius:0;
  padding:.7rem .2rem; color:var(--text-dark);
}
.form-control:focus, .form-select:focus{ box-shadow:none; border-color:var(--brass); background:transparent; }
.form-control::placeholder{color:var(--muted-dark);}
label.form-label{font-size:.8rem; text-transform:none; color:var(--muted-dark); margin-bottom:.2rem;}

/* ===== Footer ===== */
footer{background:var(--ink); color:var(--muted-light); padding:3.4rem 0 2rem;}
footer h5{color:var(--text-light); font-family:'Bricolage Grotesque',sans-serif;}
footer a{color:var(--muted-light);}
footer a:hover{color:var(--brass-light);}
.social-icons a{width:38px;height:38px; border:1px solid var(--line-dark); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; transition:border-color .2s, color .2s;}
.social-icons a:hover{border-color:var(--brass-light); color:var(--brass-light);}
.foot-bottom{border-top:1px solid var(--line-dark); margin-top:2.4rem; padding-top:1.4rem; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;}

/* ===== Floating buttons ===== */
.fab-wrap{position:fixed; right:22px; bottom:22px; z-index:1000; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;}
.fab{width:56px;height:56px;border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 10px 26px rgba(0,0,0,.28); transition:transform .2s ease;}
.fab:hover{transform:translateY(-3px) scale(1.04);}
.fab-whats{background:#25D366; color:#fff;}
.fab-top{width:42px;height:42px; background:var(--ink); color:var(--text-light); font-size:1.1rem; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .2s ease;}
.fab-top.show{opacity:1; pointer-events:auto;}

/* ===== reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.logo-cliente {width: auto; height: 60px}

#gridClientes .nav-link {width: 100%; display: table; color:#a10005; text-align: start; padding-left: 20px; transition: background 0.3s;}
#gridClientes .nav-link:hover {color:#F1F1F1; background-color: #a10005!important;}
#gridClientes button.active {color:#F1F1F1; background-color: #a10005;}

#gridClientes .nav-tabs.flex-column .nav-link {border: 1px solid #DDD; border-radius: 8px; background-color: #f8f9fa;}
#gridClientes .nav-tabs.flex-column .nav-link.active {color:#FFF; border-right: 1px solid #a10005; background-color: #a10005;}
#gridClientes h2 {color: #a10005;}

.floating-nav select, .floating-nav option {border: 0; font-size: 13px!important;}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none; opacity:1; transform:none;}
  .marquee-track, .eq-bar, .scroll-cue .line{animation:none !important;}
}

/* MOBILE */
@media only screen and (max-width : 767px){
  .header-logo {width: auto; height: 30px; vertical-align: middle;}
  .itemDesktop {display:none;}

  .hero .lead-text {font-size: 13px!important;}

  .tab-pane .row {display: flex; flex-wrap: wrap;}
  .tab-pane .row div {width: 33.33%!important; padding: 10px!important;}

  #gridClientes {padding-top: 100px!important; padding-bottom: 50px!important;}
  #gridClientes .nav-link i {color:#a10005; float: right;}
  #gridClientes .active i {color:#FFF!important;}
  #gridClientes .nav-tabs {width: 88%; margin-left: 6%!important; margin-right: 6%!important; padding: 0; margin-top: 0!important;}
  #gridClientes .nav-item {margin-bottom: 5px; display: none;}
  #gridClientes .main-item {display: block!important;}
  #gridClientes button {border-radius: 8px!important;}
  #gridClientes p {font-size: 13px;}
  
  #instalacoes {margin: 0 auto!important; display: flex; justify-content: center;}
}

/* DESKTOP */
@media only screen and (min-width : 768px){
  .header-logo {width: 100px; vertical-align: middle;}
  #footer p.small {max-width: 64%;}
  #footer .col-lg-3 {display: flex; flex-direction: column; justify-content: start; align-items: end;}
  #footer .col-lg-3 p {text-align: end!important;}

  .footer-logo {width: 160px; margin-bottom: 1rem;}

  #gridClientes {min-height:70vh; padding-top: 175px!important; padding-bottom: 150px!important;}
  #gridClientes .nav-tabs.flex-column .nav-link {border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; border-right: 1px solid transparent; }
  #gridClientes .nav-item {margin-bottom: 15px;}
  #gridClientes .tab-pane .row div {padding: 0 40px 40px 40px;}
  #clienteTabs {border-right: 1px solid #DDD; border-bottom: none!important; border-top: none!important; padding: 0;}

  .itemMobile {display: none!important;}
}