/* ======================================================
   CSS PROFISSIONAL — JR MOURA AUTO CENTER
   Visual automotivo premium + performance otimizada
   ====================================================== */

/* ======================================================
   RESET + VARIÁVEIS GLOBAIS
   ====================================================== */

:root{
  --preto:#0a0a0a;
  --preto-sec:#111111;
  --cinza:#1c1c1c;
  --vermelho:#e10600;
  --vermelho-hover:#ff1a1a;
  --branco:#ffffff;
  --transition: all .3s ease;
}

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

/* ======================================================
   BODY
   ====================================================== */

html{
  scroll-behavior: smooth;
}

body{
  font-family:'Montserrat',sans-serif;
  background:var(--preto);
  color:var(--branco);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ======================================================
   NAVBAR (TOPO FIXO)
   ====================================================== */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(10,10,10,0.9);
  backdrop-filter:blur(12px);
  z-index:1000;
  padding:1rem 8%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.navbar-inner{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.logo img{
  height:120px;
  width:auto;
  object-fit:contain;
  display:block;
}

/* MENU (NAV) */
.navbar-nav{
  display:flex;
  align-items:center;
  gap:2rem;
}

.navbar nav a{
  text-decoration:none;
  color:var(--branco);
  font-weight:500;
  position:relative;
  transition:var(--transition);
}

.navbar nav a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--vermelho);
  transition:var(--transition);
}

.navbar nav a:hover::after{
  width:100%;
}

/* AÇÕES (botão do WhatsApp no topo) */
.navbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:max-content;
}

.btn-whatsapp-header{
  padding:.6rem 1.2rem;
  border-radius:8px;
  font-weight:700;
  white-space:nowrap;
}

/* ======================================================
   HERO
   ====================================================== */

.hero{
height:100vh;
min-height:600px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
background:
radial-gradient(900px 380px at 50% 15%, rgba(225, 6, 0, 0.12), transparent 60%),
linear-gradient(180deg, #0c0c0c 0%, #080808 55%, #050505 100%);
}

.hero::after{
content:"";
position:absolute;
inset:0;
background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,0.35) 100%);
pointer-events:none;
}

.hero h1{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:1rem;
  line-height:1.2;
}

.hero p{
  margin-bottom:2rem;
  opacity:.9;
}

/* ======================================================
   BOTÕES
   ====================================================== */

.btn-main{
  background:var(--vermelho);
  padding:1rem 2rem;
  border-radius:8px;
  color:white;
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
  display:inline-block;
}

.btn-main:hover{
  transform:translateY(-3px);
  background:var(--vermelho-hover);
  box-shadow:0 15px 35px rgba(225,6,0,.4);
}

.btn-whatsapp{
  background:var(--vermelho);
  padding:.9rem 1.4rem;
  border-radius:10px;
  color:white;
  text-decoration:none;
  font-weight:700;
  transition:var(--transition);
  white-space:nowrap;
  display:inline-block;
}

.btn-whatsapp:hover{
  transform:translateY(-2px);
  background:var(--vermelho-hover);
  box-shadow:0 10px 25px rgba(225,6,0,.4);
}

.btn-map{
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  color:var(--branco);
  padding:.8rem 1.2rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
  display:inline-block;
}

.btn-map:hover{
  transform:translateY(-2px);
  border-color:rgba(225,6,0,.6);
  box-shadow:0 10px 25px rgba(225,6,0,.18);
}

/* ======================================================
   SERVIÇOS
   ====================================================== */

.services{
  padding:6rem 8%;
  text-align:center;
}

.services h2{
  font-size:clamp(1.8rem,4vw,2.5rem);
  margin-bottom:2rem;
  position:relative;
  display:inline-block;
}

.services h2::after{
  content:'';
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:3px;
  background:var(--vermelho);
}

/* ======================================================
   CARROSSEL SERVIÇOS
   ====================================================== */

.carousel-container{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
}

.carousel{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:.5rem 0;
  flex:1;
}

.carousel::-webkit-scrollbar{
  display:none;
}

.service-card{
  min-width:280px;
  background:var(--cinza);
  padding:1.5rem;
  border-radius:12px;
  transition:var(--transition);
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(225,6,0,.2);
}

.service-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:1rem;
}

.service-card h3{
  color:var(--vermelho);
  margin-bottom:.5rem;
}

.service-card p{
  opacity:.8;
  font-size:.95rem;
}

.nav{
  background:var(--vermelho);
  border:none;
  color:white;
  width:50px;
  height:50px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.8rem;
  transition:var(--transition);
}

.nav:hover{
  transform:scale(1.1);
  background:var(--vermelho-hover);
}

/* ======================================================
   CONTATO + MAPA
   ====================================================== */

.contact{
  padding:6rem 8%;
  background:var(--preto-sec);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  text-align:center;
}

.map-container{
  width:100%;
  max-width:900px;
  border-radius:12px;
  overflow:hidden;
}

.map-container iframe{
  width:100%;
  height:420px;
  border:0;
}

/* ======================================================
   FADE SUAVE EM IMAGENS
   ====================================================== */

img{
  opacity:0;
  transition:opacity .4s ease;
}

img[src]{
  opacity:1;
}

/* ======================================================
   3D BRANDS CAROUSEL
   ====================================================== */

.brands-3d-wrapper{
  padding:70px 20px;
  text-align:center;
  background:var(--preto-sec);
  overflow:hidden;
}

.brands-title{
  margin-bottom:40px;
  font-size:clamp(1.6rem,3vw,2rem);
  font-weight:600;
  position:relative;
  display:inline-block;
}

.brands-title::after{
  content:'';
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:3px;
  background:var(--vermelho);
}

.brands-stage{
  width:100%;
  height:260px;
  perspective:1200px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.brands-ring{
  position:relative;
  width:220px;
  height:220px;
  transform-style:preserve-3d;
}

.brand{
  position:absolute;
  width:220px;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
}

.brand img{
  width:170px;
  height:auto;
  object-fit:contain;
  transition:transform .3s ease;
}

.brand img:hover{
  transform:scale(1.08);
}

/* ======================================================
   ANIMAÇÃO
   ====================================================== */

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ======================================================
   ACESSIBILIDADE: SKIP LINK
   ====================================================== */

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--vermelho);
  color:#fff;
  padding:.7rem 1rem;
  border-radius:10px;
  text-decoration:none;
  z-index:2000;
}

.skip-link:focus{
  left:10px;
}

/* ======================================================
   FOOTER PREMIUM (ALINHADO + FUNDO PREMIUM)
   ====================================================== */
/*
  Corrige:
  - duplicações de media queries
  - cor do texto do botão (antes estava #111 em fundo vermelho => baixa leitura)
  - desalinhamento no desktop
  - “torto” no footer-bottom
  - visual premium (profundidade + glow + textura sutil)
*/

.site-footer{
  position: relative;
  padding: 80px 8% 40px;

  background:
    radial-gradient(circle at 15% 10%, rgba(225, 6, 0, 0.18), transparent 35%),
    radial-gradient(circle at 85% 90%, rgba(225, 6, 0, 0.12), transparent 40%),
    linear-gradient(180deg, #0e0e0e 0%, #080808 60%, #050505 100%);

  border-top: 1px solid rgba(225, 6, 0, 0.25);
  overflow: hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 6px
    );
  pointer-events:none;
}

.footer-inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.footer-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.footer-logo img{
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-text{
  margin: 14px 0 18px;
  opacity: .85;
  max-width: 320px;
}

.footer-title{
  font-size: 1.02rem;
  margin-bottom: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .9;
}

.footer-link{
  display: block;
  width: 100%;
  color: var(--branco);
  text-decoration: none;
  opacity: .75;
  margin: 8px 0;
  transition: var(--transition);
}

.footer-link:hover{
  opacity: 1;
  transform: translateX(4px);
  color: var(--vermelho);
}

.footer-item{
  margin: 7px 0;
  opacity: .78;
}

.footer-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 8px;

  background: linear-gradient(145deg, #ff1a1a, #c40000);
  color: #fff;                 /* corrigido: alta leitura */
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: .35px;
  text-decoration: none;

  transition: var(--transition);
  box-shadow: 0 12px 30px rgba(225, 6, 0, .25);
}

.footer-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.footer-divider{
  position: relative;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 28px auto 18px;
  max-width: 1200px;
}

.footer-bottom{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;   /* centro */
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.footer-copy{
  margin: 0;
  opacity: .60;
  font-size: .85rem;
}

.footer-dev{
  margin: 0;
  opacity: .70;
  font-size: .72rem;
}

/* ======================================================
   BOTÕES FLUTUANTES (Suporte + Topo)
   ====================================================== */

.fab-support{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;

  background: linear-gradient(145deg, #ff1a1a, #c40000);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transition: var(--transition);
  white-space: nowrap;
}

.fab-support:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.fab-top{
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 1200;

  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff1a1a, #c40000);
  color: #fff;
  text-decoration: none;
  font-weight: 900;

  display: grid;
  place-items: center;

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transition: var(--transition);
}

.fab-top:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ======================================================
   RESPONSIVIDADE (única, sem duplicar)
   ====================================================== */

@media(max-width: 900px){
  .footer-inner{
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:768px){
  .navbar nav{display:none}

  .navbar{ padding:.8rem 5%; }
  .navbar-inner{ gap:.75rem; }

  .logo img{ height:84px; }

  .btn-whatsapp-header{
    padding:.55rem 1rem;
    font-size:.95rem;
  }

  .hero{min-height:500px}

  .services,
  .contact{padding:4rem 5%}

  .service-card{min-width:240px}

  .map-container iframe{height:320px}

  .brands-stage{
    height:210px;
    perspective:900px;
  }

  .brands-ring{ width:170px; height:170px; }
  .brand{ width:170px; height:170px; }
  .brand img{ width:130px; }
}

@media(max-width:520px){
  .site-footer{ padding: 54px 6% 26px; }

  .footer-inner{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* colunas à esquerda no mobile */
  .footer-col{
    align-items: flex-start;
    text-align: left;
  }

  /* faixa final central (como você quis) */
  .footer-bottom{
    align-items: center;
    text-align: center;
  }

  .fab-support{
    right: 12px;
    bottom: 12px;
    padding: 11px 14px;
    font-size: .88rem;
  }

  .fab-top{
    right: 12px;
    bottom: 68px;
  }
}

@media(max-width:480px){
  .service-card{min-width:200px}
  .hero h1{font-size:1.8rem}
  .hero .btn-main{width:100%}
  .logo img{ height:74px; }

  .btn-whatsapp-header{
    padding:.5rem .9rem;
    font-size:.9rem;
  }

  .brands-stage{
    height:185px;
    perspective:750px;
  }

  .brands-ring{ width:145px; height:145px; }
  .brand{ width:145px; height:145px; }
  .brand img{ width:110px; }
}