/* Brener Auto Center — style.css */

:root{
  --bg: #0a0d12;
  --panel: #10151c;
  --panel-2: #151c25;
  --line: #232b36;
  --blue: #17b4ec;
  --blue-deep: #0868a8;
  --ink: #eef3f7;
  --ink-dim: #9fb0bd;
  --steel: #c7d1da;
  --header-h: 68px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-weight:600;
  line-height:1.05;
}

a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font:inherit; cursor:pointer;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::selection{background:var(--blue); color:#04121a;}

section[id]{scroll-margin-top:var(--header-h);}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--blue); color:#03141d; padding:10px 16px; font-weight:600;
}
.skip-link:focus{left:16px; top:16px;}

/* focus visível para acessibilidade */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px;
}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  background:rgba(10,13,18,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.headbar{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  gap:12px;
}
.headbar .logo img{height:34px; width:auto;}
nav{display:flex; gap:28px; font-size:14px; color:var(--steel);}
nav a:hover, nav a:focus-visible{color:var(--blue);}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#03141d;
  font-weight:600; font-size:14px;
  padding:11px 20px;
  border:1px solid var(--blue);
  transition:background .15s ease, color .15s ease;
}
.btn:hover{background:transparent; color:var(--blue);}
.btn-outline{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}
.btn-outline:hover{border-color:var(--blue); color:var(--blue);}

.nav-toggle{
  display:none;
  width:38px; height:38px;
  background:transparent; border:1px solid var(--line);
  align-items:center; justify-content:center;
  color:var(--ink);
}
.nav-toggle svg{width:18px; height:18px;}

@media (max-width:760px){
  .headbar{padding:0 16px;}
  .headbar .logo img{height:26px;}
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  nav{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:var(--header-h); left:0; right:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    transform:translateY(-8px);
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  nav.open{opacity:1; visibility:visible; transform:translateY(0);}
  nav a{padding:16px 20px; border-top:1px solid var(--line); font-size:15px;}
  nav .nav-cta{padding:16px 20px 20px;}
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:640px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero img.bg{
  position:absolute; inset:-4%;
  width:108%; height:108%; object-fit:cover;
  object-position:center 30%;
  filter:saturate(1.05) contrast(1.03) brightness(.72);
  animation:heroPan 24s ease-in-out infinite alternate;
}
@keyframes heroPan{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.07) translate(-1%, -0.8%);}
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(4,6,9,.98) 0%, rgba(4,6,9,.94) 34%, rgba(4,6,9,.62) 60%, rgba(4,6,9,.28) 100%),
    linear-gradient(0deg, rgba(4,6,9,.97) 0%, rgba(4,6,9,.35) 46%, rgba(4,6,9,.1) 100%);
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, transparent 42%, rgba(23,180,236,.09) 49%, transparent 56%);
  background-size:260% 100%;
  animation:heroSweep 9s linear infinite;
  mix-blend-mode:screen;
}
@keyframes heroSweep{
  0%{background-position:120% 0;}
  100%{background-position:-40% 0;}
}
.hero-content{
  position:relative; z-index:2;
  padding:64px 32px 56px;
  max-width:640px;
  background:linear-gradient(90deg, rgba(4,6,9,.55) 0%, rgba(4,6,9,.25) 75%, transparent 100%);
}
.hero-kicker{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--blue); font-weight:600;
  margin-bottom:18px;
}
.hero-kicker .dot{
  width:7px; height:7px; background:var(--blue); border-radius:50%;
  animation:dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(23,180,236,.5);}
  70%{box-shadow:0 0 0 8px rgba(23,180,236,0);}
  100%{box-shadow:0 0 0 0 rgba(23,180,236,0);}
}
.hero h1{
  font-size:clamp(34px, 5.4vw, 58px);
  color:#fff;
  margin-bottom:18px;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero h1 span{color:var(--blue);}
.hero p{
  color:var(--steel); font-size:16px; max-width:480px; margin-bottom:30px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;}
.hero-services{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid rgba(255,255,255,.14);
  max-width:560px;
}
.hero-services span{
  font-size:12.5px; color:var(--ink-dim);
  padding:12px 16px 0 0; margin-right:16px;
  border-right:1px solid rgba(255,255,255,.14);
  padding-right:16px;
}
.hero-services span:last-child{border-right:none; margin-right:0;}

.rating-badge{
  position:absolute; z-index:3; top:28px; right:28px;
  background:rgba(16,21,28,.9); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  padding:16px 20px;
  display:flex; align-items:center; gap:14px;
  animation:badgeGlow 3.6s ease-in-out infinite;
}
@keyframes badgeGlow{
  0%,100%{border-color:var(--line); box-shadow:0 0 0 0 rgba(23,180,236,0);}
  50%{border-color:rgba(23,180,236,.6); box-shadow:0 0 20px rgba(23,180,236,.16);}
}
.rating-badge .score{font-family:'Oswald',sans-serif; font-size:30px; font-weight:600; color:#fff;}
.rating-badge .stars{color:var(--blue); font-size:13px; letter-spacing:2px;}
.rating-badge .meta{font-size:11.5px; color:var(--ink-dim); margin-top:2px;}

@media (max-width:760px){
  .rating-badge{position:static; margin:16px 20px 0; z-index:2; width:fit-content;}
  .hero{min-height:auto; flex-direction:column-reverse;}
  .hero-content{padding:28px 20px 32px;}
}

/* ===== SECTION SHARED ===== */
.eyebrow{font-size:13px; color:var(--blue); font-weight:600; margin-bottom:10px;}
section{padding:88px 0;}
section.tight{padding:60px 0;}
.section-head{max-width:620px; margin-bottom:52px;}
.section-head h2{font-size:clamp(26px,3.4vw,40px); color:#fff;}
.section-head p{color:var(--ink-dim); margin-top:14px; font-size:15.5px;}

@media (max-width:760px){
  .wrap{padding:0 20px;}
  section{padding:60px 0;}
}

/* leve entrada ao rolar — só nos títulos de seção, não em cada card */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.reveal.is-visible{opacity:1; transform:none;}

/* ===== SERVICES ===== */
.services{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.svc-card{
  background:var(--panel); padding:32px 28px;
  border-left:2px solid transparent;
  transition:border-color .15s ease, background .15s ease;
}
.svc-card:hover{border-left-color:var(--blue); background:var(--panel-2);}
.svc-num{font-family:'Oswald',sans-serif; font-size:12px; color:var(--blue-deep); margin-bottom:14px;}
.svc-card h3{font-size:19px; color:#fff; margin-bottom:10px; text-transform:none; letter-spacing:0;}
.svc-card p{font-size:14px; color:var(--ink-dim);}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr;}}

/* ===== DIFERENCIAIS ===== */
.diff-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.diff-list{display:flex; flex-direction:column;}
.diff-item{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.diff-item:first-child{padding-top:0;}
.diff-mark{
  flex:none; width:34px; height:34px; border:1px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  color:var(--blue); font-family:'Oswald',sans-serif; font-size:14px;
}
.diff-item h3{font-size:16px; color:#fff; text-transform:none; letter-spacing:0; margin-bottom:6px;}
.diff-item p{font-size:14px; color:var(--ink-dim);}
.diff-quote{background:var(--panel); border:1px solid var(--line); padding:36px; position:relative;}
.diff-quote .mark{font-family:'Oswald',sans-serif; font-size:52px; color:var(--blue-deep); line-height:1;}
.diff-quote p{font-size:19px; color:var(--steel); margin:14px 0 18px; font-family:'Oswald',sans-serif; font-weight:400; text-transform:none; letter-spacing:0; line-height:1.4;}
.diff-quote .who{font-size:13px; color:var(--ink-dim);}
@media (max-width:820px){.diff-wrap{grid-template-columns:1fr; gap:40px;}}

/* ===== REVIEWS ===== */
.reviews{background:var(--panel);}
.rev-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:44px;}
.rev-score{display:flex; align-items:center; gap:16px;}
.rev-score .num{font-family:'Oswald',sans-serif; font-size:52px; color:#fff;}
.rev-score .stars{color:var(--blue); font-size:16px; letter-spacing:3px;}
.rev-score .count{font-size:13px; color:var(--ink-dim); margin-top:4px;}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.rev-card{background:var(--bg); padding:28px;}
.rev-card .stars{color:var(--blue); font-size:13px; letter-spacing:2px; margin-bottom:14px;}
.rev-card p{font-size:14.5px; color:var(--steel); margin-bottom:18px;}
.rev-card .who{font-size:13px; color:var(--ink-dim); border-top:1px solid var(--line); padding-top:14px;}
.rev-card .who b{color:#fff; font-weight:500;}
@media (max-width:820px){.rev-grid{grid-template-columns:1fr;}}

/* ===== CONTATO / LOCALIZAÇÃO ===== */
.contact{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.contact-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line);}
.contact-left{padding:52px; background:var(--bg);}
.contact-left h2{font-size:clamp(24px,3vw,34px); color:#fff; margin-bottom:16px;}
.contact-left p{color:var(--ink-dim); font-size:15px; margin-bottom:30px; max-width:420px;}
.contact-row{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line);}
.contact-row:last-of-type{border-bottom:1px solid var(--line);}
.contact-row .k{width:110px; flex:none; font-size:12px; color:var(--blue); font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding-top:2px;}
.contact-row .v{font-size:14.5px; color:var(--steel);}
.contact-right{background:var(--panel); border-left:1px solid var(--line); min-height:320px;}
.contact-right iframe{width:100%; height:100%; min-height:320px; border:0; filter:grayscale(.25) contrast(1.05);}
@media (max-width:820px){
  .contact-wrap{grid-template-columns:1fr;}
  .contact-left{padding:36px 24px;}
  .contact-right{border-left:none; border-top:1px solid var(--line);}
}

/* ===== FOOTER ===== */
footer{padding:40px 0; background:var(--bg);}
.foot-wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.foot-wrap img{height:26px;}
.foot-links{display:flex; gap:22px; font-size:13px; color:var(--ink-dim); flex-wrap:wrap;}
.foot-links a:hover{color:var(--blue);}
.foot-copy{font-size:12px; color:#5a6774; margin-top:18px; border-top:1px solid var(--line); padding-top:18px;}

/* ===== WHATSAPP FLUTUANTE (mobile) ===== */
.wa-float{
  display:none;
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:var(--blue); color:#03141d;
  align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.wa-float svg{width:24px; height:24px;}
@media (max-width:760px){.wa-float{display:flex;}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hero img.bg, .hero::after, .hero-kicker .dot, .rating-badge{animation:none !important;}
  .reveal{opacity:1; transform:none; transition:none;}
}