/* ======================================================
   RESET + BASE
====================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  overflow-x:hidden;
}

body{
  font-family:"Segoe UI", Arial, sans-serif;
  background:#f5f5f5;
  color:#333;
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

img,
video,
iframe{
  max-width:100%;
  height:auto;
  display:block;
}

/* ======================================================
   TOPO BRANCO
====================================================== */
.topo-branco{
  background:#fff;
  border-bottom:1px solid #ddd;
}

.topo-container{
  max-width:1200px;
  margin:auto;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.logo-area{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-area img{
  width:55px;
}

.logo-area h1{
  font-size:22px;
  color:#b00020;
}

.info-area{
  display:flex;
  gap:30px;
  font-size:14px;
}

.info-area strong{
  color:#b00020;
}

.whats{
  color:#25d366;
}

.piscando{
  animation:piscar 1.5s infinite;
}

@keyframes piscar{
  0%{opacity:1}
  50%{opacity:.4}
  100%{opacity:1}
}

/* CTA topo */
.top-cta-area{
  display:flex;
  align-items:center;
}

.top-cta-link{
  color:#b00020;
  font-weight:900;
  text-transform:lowercase;
  border:1px solid #b00020;
  padding:8px 12px;
  border-radius:6px;
  transition:.25s;
  white-space:nowrap;
}

.top-cta-link:hover{
  background:#b00020;
  color:#fff;
}

/* ======================================================
   MENU
====================================================== */
.menu-vermelho{
  background:#b00020;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 40px;
  gap:10px;
}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  color:#fff;
  font-size:28px;
  cursor:pointer;
  user-select:none;
}

.menu-links{
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  gap:6px;
  width:100%;
  max-width:1200px;
}

.menu-vermelho a{
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
  padding:10px 18px;
  border-radius:6px;
  transition:background .3s ease,color .3s ease,transform .25s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.menu-vermelho a:hover{
  background:#fff;
  color:#b00020;
  transform:scale(1.05) translateY(-2px);
}

.menu-vermelho a.ativo{
  background:#fff;
  color:#b00020;
}

.menu-destaque{
  border:2px solid rgba(255,255,255,.65);
}

.dropdown{
  position:relative;
}

.dropdown-link{
  cursor:pointer;
}

.caret{
  font-size:11px;
}

.dropdown-menu{
  position:absolute;
  top:110%;
  left:0;
  background:#fff;
  min-width:190px;
  display:none;
  flex-direction:column;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  border-radius:10px;
  overflow:hidden;
  z-index:999;
}

.dropdown-menu a{
  padding:12px 16px;
  color:#b00020;
  font-weight:700;
}

.dropdown-menu a:hover{
  background:#f2f2f2;
  transform:none;
}

@media (min-width:769px){
  .dropdown:hover .dropdown-menu{
    display:flex;
  }
}

.dropdown-menu.open{
  display:flex;
}

/* ======================================================
   HERO HOME
====================================================== */
.hero{
  min-height:520px;
  height:80vh;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url("../img/banner.jpg") no-repeat;
  background-size:cover;
  background-position:center top;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.hero-content{
  max-width:720px;
  padding:24px;
}

.hero-content h2{
  font-size:42px;
  margin-bottom:10px;
}

.hero-content p{
  font-size:18px;
  opacity:.95;
}

.btn-hero{
  display:inline-block;
  margin-top:18px;
  background:#25d366;
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  font-weight:800;
}

.btn-hero:hover{
  filter:brightness(.95);
}

/* ======================================================
   HOME INSTITUCIONAL
====================================================== */
.home-institucional{
  background:#fff;
  padding:70px 15px;
}

.home-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.home-texto h3{
  color:#b00020;
  font-size:28px;
  margin-bottom:15px;
}

.home-texto p{
  color:#444;
}

.home-cards{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.card{
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:transform .25s ease;
}

.card:hover{
  transform:translateY(-6px);
}

.card h4{
  color:#b00020;
  margin-bottom:8px;
}

.card p{
  color:#555;
}

.card img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* ======================================================
   RODAPÉ
====================================================== */
.rodape{
  background:#111;
  color:#eee;
  padding-top:40px;
}

.rodape-container{
  max-width:1200px;
  margin:auto;
  padding:20px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.rodape h4{
  color:#ff9800;
  margin-bottom:10px;
}

.rodape ul{
  list-style:none;
}

.rodape li{
  margin-bottom:6px;
}

.rodape a{
  color:#fff;
}

.rodape a:hover{
  text-decoration:underline;
}

.mapa-container iframe{
  width:100%;
  height:220px;
  border:0;
  margin-bottom:15px;
  border-radius:10px;
}

.btn-whatsapp{
  width:100%;
  background:#25d366;
  border:none;
  padding:12px;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  border-radius:8px;
  transition:transform .2s ease, filter .2s ease;
}

.btn-whatsapp:hover{
  transform:translateY(-1px);
  filter:brightness(.95);
}

.icones-seguranca{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
  font-size:14px;
}

.icones-seguranca div{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ddd;
}

.icones-seguranca i{
  color:#ff9800;
}

.rodape-copy{
  background:#000;
  text-align:center;
  padding:15px;
  font-size:13px;
}

/* ======================================================
   FORMULÁRIO WHATSAPP
====================================================== */
.whatsapp-form{
  display:none;
  position:fixed;
  right:22px;
  bottom:95px;
  width:330px;
  max-width:calc(100% - 44px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
  overflow:hidden;
  z-index:9999;
  border:1px solid rgba(0,0,0,.08);
}

.whatsapp-header{
  background:#b00020;
  color:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
}

.whats-close{
  border:none;
  background:transparent;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

#whatsForm{
  padding:14px;
  display:grid;
  gap:10px;
}

#whatsForm input,
#whatsForm textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  outline:none;
  font-size:14px;
}

#whatsForm textarea{
  min-height:90px;
  resize:vertical;
}

#whatsForm button{
  padding:12px;
  border-radius:12px;
  border:none;
  background:#25D366;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

#whatsForm button:hover{
  filter:brightness(1.03);
}

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  font-size:28px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  z-index:9999;
  transition:transform .15s ease, box-shadow .15s ease;
}

.whatsapp-float:hover{
  transform:scale(1.06);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}

/* ======================================================
   QUEM SOMOS
====================================================== */
.banner-pagina{
  background:
    linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.60)),
    url("../img/motos.jpeg") center/cover no-repeat;
  padding:80px 20px;
  text-align:center;
  color:#fff;
}

.banner-pagina h2{
  font-size:42px;
  margin-bottom:10px;
}

.banner-pagina p{
  font-size:18px;
  opacity:.9;
}

.quem-somos{
  background:#f4f4f4;
  padding:80px 20px;
}

.quem-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.quem-texto h3{
  font-size:32px;
  color:#b00020;
  margin-bottom:20px;
}

.quem-texto p{
  font-size:17px;
  line-height:1.7;
  margin-bottom:20px;
  color:#333;
}

.quem-valores{
  display:flex;
  gap:25px;
  margin-top:30px;
  flex-wrap:wrap;
}

.valor{
  background:#fff;
  padding:20px;
  border-radius:10px;
  text-align:center;
  flex:1;
  min-width:220px;
  box-shadow:0 5px 15px rgba(0,0,0,0.10);
  transition:transform .3s ease;
}

.valor i{
  font-size:32px;
  color:#b00020;
  margin-bottom:10px;
}

.valor span{
  display:block;
  font-weight:900;
}

.valor:hover{
  transform:translateY(-8px);
}

.quem-imagem{
  position:relative;
}

.quem-imagem img{
  width:100%;
  max-width:420px;
  max-height:520px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
  object-fit:cover;
}

.btn-whatsapp-flutuante{
  position:absolute;
  right:-30px;
  bottom:22px;
  background:#25D366;
  color:#fff;
  padding:14px 20px;
  border-radius:50px;
  font-weight:800;
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
  transition:transform .3s ease, box-shadow .3s ease;
  white-space:nowrap;
}

.btn-whatsapp-flutuante:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(0,0,0,0.35);
}

/* ======================================================
   BLOG
====================================================== */
.blog-hero{
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url("../img/blog-hero.jpg") center/cover no-repeat;
  padding:80px 20px;
  color:#fff;
  text-align:center;
}

.blog-hero h1{
  font-size:42px;
  margin-bottom:10px;
}

.blog-hero p{
  font-size:18px;
  opacity:.95;
}

.blog-posts{
  max-width:1200px;
  margin:0 auto;
  padding:60px 20px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:25px;
}

.post-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
}

.post-card:hover{
  transform:translateY(-8px);
}

.post-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  background:#f5f5f5;
}

.post-card h3{
  padding:15px 15px 8px;
  color:#b00020;
  font-size:18px;
}

.post-card p{
  padding:0 15px 15px;
  color:#555;
  font-size:14px;
  flex:1;
}

.btn-post{
  margin:0 15px 18px;
  align-self:flex-start;
  background:#b00020;
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  font-weight:800;
  transition:.3s;
}

.btn-post:hover{
  background:#8c0000;
}

/* Página do post */
.post-container{
  max-width:900px;
  margin:50px auto;
  padding:0 20px;
}

.voltar-blog{
  display:inline-block;
  margin-bottom:20px;
  color:#b00020;
  font-weight:800;
}

.voltar-blog:hover{
  text-decoration:underline;
}

.post-meta{
  color:#888;
  font-size:14px;
  display:block;
  margin-bottom:20px;
}

.post-imagem{
  width:100%;
  max-height:400px;
  object-fit:contain;
  background:#f5f5f5;
  border-radius:12px;
  margin-bottom:30px;
}

.post-conteudo h2{
  margin-top:30px;
  color:#b00020;
}

.post-conteudo p{
  margin-top:15px;
  line-height:1.7;
  color:#444;
  font-size:16px;
}

/* Blog info */
.blog-info{
  background:#e5e5e5;
  padding:60px 20px;
}

.blog-info-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:25px;
}

.blog-info-card{
  background:#fff;
  border-radius:12px;
  padding:30px 25px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:transform .3s ease, box-shadow .3s ease;
}

.blog-info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.blog-info-card h3{
  color:#b00020;
  margin-bottom:12px;
  font-size:20px;
}

.blog-info-card p{
  color:#444;
  line-height:1.6;
  font-size:15px;
}

/* ======================================================
   SOLUÇÕES / MOTOBOY / MOTOS
====================================================== */
.banner-img{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:top;
}

.banner-overlay{
  background:rgba(0,0,0,0.55);
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
}

.banner-overlay h1{
  font-size:42px;
  margin-bottom:10px;
}

.banner-overlay p{
  font-size:18px;
}

.motos-cards{
  max-width:1200px;
  margin:60px auto;
  padding:0 20px 60px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;
}

.moto-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  overflow:hidden;
  text-align:center;
  transition:transform .3s ease;
}

.moto-card:hover{
  transform:translateY(-8px);
}

.moto-card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.moto-card h3{
  color:#b00020;
  margin:20px 0 10px;
}

.moto-card p{
  padding:0 20px 25px;
  color:#444;
  font-size:15px;
}

.motoboy-conteudo{
  padding:60px 20px;
  background:#f5f5f5;
}

.motoboy-container{
  max-width:1100px;
  margin:0 auto;
}

.motoboy-container h2{
  color:#b00020;
  font-size:28px;
}

.motoboy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
  margin-top:30px;
}

.motoboy-card{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.motoboy-card h3{
  color:#b00020;
  margin-bottom:8px;
}

.motoboy-card p{
  color:#555;
}

.cta-motoboy{
  background:#b00020;
  color:#fff;
  text-align:center;
  padding:60px 20px;
}

.cta-content{
  max-width:1000px;
  margin:0 auto;
}

.btn-whats{
  display:inline-block;
  margin-top:18px;
  padding:12px 26px;
  background:#fff;
  color:#b00020;
  border-radius:999px;
  font-weight:900;
}

.btn-whats:hover{
  filter:brightness(.95);
}

.post-cta{
  background:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.post-cta h2{
  color:#b00020;
}

/* ======================================================
   SEÇÕES TG
====================================================== */
:root{
  --tg-red:#b0001a;
  --tg-dark:#111;
  --tg-gray:#f4f4f6;
  --tg-white:#fff;
  --tg-text:#222;
}

.tg-section{
  padding:60px 0;
}

.tg-container{
  width:min(1100px, 92%);
  margin:0 auto;
}

.tg-title{
  text-align:center;
  font-size:clamp(22px, 3vw, 34px);
  font-weight:900;
  color:var(--tg-dark);
  margin:0 0 10px;
}

.tg-title-sm{
  text-align:center;
  font-size:26px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--tg-dark);
  margin:0 0 10px;
}

.tg-subtitle{
  text-align:center;
  color:#444;
  font-size:16px;
  max-width:780px;
  margin:0 auto;
  line-height:1.6;
}

/* serviços */
.tg-servicos{
  background:var(--tg-gray);
}

.tg-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:26px;
}

.tg-card{
  background:var(--tg-white);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}

.tg-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

.tg-card h4{
  margin:12px 0 8px;
  font-size:18px;
  font-weight:900;
  color:var(--tg-dark);
}

.tg-card p{
  margin:0 0 14px;
  color:#444;
  line-height:1.6;
  font-size:14px;
}

.tg-ico{
  width:46px;
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(176, 0, 26, .10);
  color:var(--tg-red);
  font-size:20px;
}

.tg-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--tg-red);
  font-weight:900;
  text-decoration:none;
}

.tg-link:hover{
  text-decoration:underline;
}

/* sobre */
.tg-sobre{
  background:#fff;
}

.tg-sobre-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  align-items:center;
}

.tg-sobre-img img{
  width:100%;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.tg-lista{
  list-style:none;
  padding:0;
  margin:16px 0 18px;
}

.tg-lista li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:10px 0;
  color:#333;
  line-height:1.5;
}

.tg-lista i{
  color:var(--tg-red);
  margin-top:2px;
}

.tg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  background:var(--tg-red);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  border:0;
  box-shadow:0 12px 26px rgba(176,0,26,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.tg-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(176,0,26,.32);
  filter:brightness(1.03);
}

.tg-btn-dark{
  background:#0b2f3a;
  box-shadow:0 12px 26px rgba(11,47,58,.25);
}

.tg-btn-dark:hover{
  box-shadow:0 16px 34px rgba(11,47,58,.32);
}

/* faixa preço */
.tg-faixa-preco{
  background:var(--tg-red);
  padding:70px 0;
  color:#fff;
}

.tg-preco-box{
  text-align:center;
  max-width:820px;
}

.tg-preco-box h3{
  font-size:clamp(26px, 3vw, 40px);
  font-weight:900;
  margin:0 0 10px;
}

.tg-preco-box p{
  opacity:.95;
  line-height:1.6;
  margin:0 auto 16px;
}

.tg-preco-box small{
  display:block;
  margin-top:14px;
  opacity:.9;
}

/* depoimentos */
.tg-depoimentos{
  background:var(--tg-gray);
}

.tg-grid.depo{
  grid-template-columns:repeat(3, 1fr);
}

.tg-card-depo p{
  font-size:15px;
  color:#333;
}

.tg-card-depo strong{
  display:block;
  margin-top:12px;
  color:var(--tg-dark);
  font-weight:900;
}

/* depoimentos estilo google */
.tg-depo-top{
  text-align:center;
  padding-bottom:30px;
}

.tg-stars{
  display:inline-flex;
  gap:6px;
  color:#f5b400;
  font-size:16px;
  margin-bottom:12px;
}

.tg-stars.mini{
  font-size:14px;
  margin-bottom:10px;
}

.tg-depo-quote{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:900;
  color:var(--tg-dark);
  margin:6px 0 10px;
}

.tg-depo-sub{
  max-width:760px;
  margin:0 auto 18px;
  color:#444;
  line-height:1.6;
}

.tg-google-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:8px 0 8px;
  color:#444;
  font-weight:800;
}

.tg-google-g{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  font-weight:900;
  font-size:22px;
  color:#4285F4;
}

.tg-depo-nome{
  margin-top:6px;
  font-weight:900;
  color:#333;
}

.tg-depo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:16px;
}

.tg-depo-card{
  background:#fff;
  border-radius:16px;
  padding:18px 18px 16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  text-align:center;
}

.tg-depo-card p{
  color:#444;
  line-height:1.6;
  font-size:14px;
  margin:0 0 14px;
  min-height:74px;
}

.tg-g-mini{
  width:52px;
  height:52px;
  margin:0 auto 10px;
  border-radius:50%;
  background:#f4f4f6;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:28px;
  color:#555;
}

.tg-depo-card strong{
  display:block;
  font-weight:900;
  color:#333;
}

.tg-depo-link{
  display:block;
  text-align:center;
  margin-top:18px;
  color:#1a73e8;
  text-decoration:none;
  font-weight:800;
}

.tg-depo-link:hover{
  text-decoration:underline;
}

/* CTA final */
.tg-cta-final{
  background:#0b2f3a;
  color:#fff;
  padding:70px 0;
}

.tg-cta-box{
  text-align:center;
  max-width:820px;
}

.tg-cta-box h3{
  font-size:34px;
  font-weight:900;
  margin:0 0 8px;
}

.tg-cta-box p{
  opacity:.95;
  margin:0 0 18px;
  line-height:1.6;
}

/* ======================================================
   RESPONSIVO
====================================================== */
@media (max-width:1000px){
  .blog-posts{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:980px){
  .tg-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .tg-grid.depo{
    grid-template-columns:1fr;
  }

  .tg-depo-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:900px){
  .topo-container{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
  }

  .logo-area{
    justify-content:center;
    flex-wrap:wrap;
  }

  .info-area{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }

  .top-cta-area{
    justify-content:center;
    width:100%;
  }

  .top-cta-link{
    width:100%;
    max-width:280px;
    text-align:center;
  }

  .home-container,
  .quem-container,
  .tg-sobre-grid,
  .rodape-container,
  .blog-info-container{
    grid-template-columns:1fr;
  }

  .home-cards,
  .tg-grid,
  .tg-depo-grid,
  .blog-posts,
  .motos-cards,
  .motoboy-grid{
    grid-template-columns:1fr !important;
  }

  .rodape-container{
    text-align:center;
  }

  .icones-seguranca{
    flex-direction:column;
    align-items:center;
  }

  .btn-whatsapp-flutuante{
    position:static;
    display:inline-flex;
    margin-top:18px;
  }

  .quem-imagem img{
    margin:0 auto;
  }
}

@media (max-width:768px){
  .menu-vermelho{
    flex-direction:column;
    align-items:stretch;
    padding:12px 14px;
  }

  .menu-toggle{
    display:block;
    align-self:center;
    font-size:30px;
  }

  .menu-links{
    display:none;
    flex-direction:column;
    width:100%;
    gap:8px;
    padding-top:10px;
  }

  .menu-links.open,
  .menu-links.is-open{
    display:flex;
  }

  .menu-vermelho a{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:12px 14px;
  }

  .dropdown{
    width:100%;
  }

  .dropdown-link{
    width:100%;
    justify-content:center;
  }

  .dropdown-menu{
    position:static;
    min-width:unset;
    width:100%;
    box-shadow:none;
    border-radius:10px;
    margin-top:6px;
  }

  .dropdown-menu a{
    width:100%;
    text-align:center;
  }

  .hero{
    min-height:380px;
    height:auto;
    padding:36px 14px;
    background-position:center center;
  }

  .hero-content{
    padding:8px;
  }

  .hero-content h2{
    font-size:28px;
    line-height:1.2;
  }

  .hero-content p{
    font-size:16px;
  }

  .btn-hero{
    width:100%;
    max-width:280px;
    text-align:center;
  }

  .banner-pagina,
  .blog-hero{
    padding:54px 14px;
  }

  .banner-pagina h2,
  .blog-hero h1,
  .banner-overlay h1{
    font-size:28px;
    line-height:1.2;
  }

  .banner-pagina p,
  .blog-hero p,
  .banner-overlay p{
    font-size:15px;
  }

  .banner-img{
    height:240px;
    object-fit:cover;
    object-position:center;
  }

  .home-institucional,
  .quem-somos,
  .blog-info,
  .motoboy-conteudo,
  .tg-section,
  .rodape{
    padding-left:14px;
    padding-right:14px;
  }

  .card,
  .moto-card,
  .post-card,
  .tg-card,
  .blog-info-card,
  .valor,
  .post-cta{
    border-radius:14px;
  }

  .post-card img,
  .moto-card img{
    height:220px;
    object-fit:cover;
  }

  .rodape-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
  }

  .icones-seguranca{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .mapa-container iframe{
    height:220px;
  }

  .whatsapp-form{
    right:12px;
    left:12px;
    width:auto;
    max-width:none;
    bottom:84px;
  }

  .whatsapp-float{
    right:14px;
    bottom:14px;
    width:56px;
    height:56px;
    font-size:24px;
  }
}

@media (max-width:560px){
  .tg-grid{
    grid-template-columns:1fr;
  }

  .tg-depo-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  .topo-container,
  .tg-container,
  .post-container,
  .home-institucional,
  .quem-somos,
  .blog-info,
  .motoboy-conteudo{
    padding-left:12px;
    padding-right:12px;
  }

  .logo-area img{
    width:44px;
  }

  .logo-area h1{
    font-size:17px;
  }

  .hero-content h2,
  .banner-pagina h2,
  .blog-hero h1,
  .banner-overlay h1{
    font-size:24px;
  }

  .hero-content p,
  .banner-pagina p,
  .blog-hero p,
  .banner-overlay p,
  .tg-subtitle{
    font-size:14px;
  }

  .btn-hero,
  .tg-btn,
  .btn-whatsapp,
  .btn-post,
  .btn-whats,
  .top-cta-link{
    width:100%;
    justify-content:center;
  }

  .banner-img{
    height:210px;
  }

  .whatsapp-float{
    width:52px;
    height:52px;
    font-size:22px;
  }
}
/* =========================================
   PATCH MOBILE - SEÇÕES DE BAIXO DO SITE
   Cole no FINAL do style.css
========================================= */

@media (max-width: 768px) {
  /* segurança geral */
  html, body {
    overflow-x: hidden;
  }

  .tg-container,
  .home-container,
  .quem-container,
  .rodape-container,
  .blog-info-container,
  .post-container {
    width: 100%;
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
    margin-left: auto;
    margin-right: auto;
  }

  /* serviços cards */
  .tg-grid,
  .tg-depo-grid,
  .home-cards,
  .blog-posts,
  .motos-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* seção imagem + texto */
  .tg-sobre-grid,
  .home-container,
  .quem-container {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 20px;
    align-items: center;
  }

  .tg-sobre-img,
  .quem-imagem,
  .home-imagem {
    width: 100%;
  }

  .tg-sobre-img img,
  .quem-imagem img,
  .home-imagem img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* texto ao lado da imagem */
  .tg-sobre .tg-title,
  .tg-sobre .tg-title-sm,
  .tg-sobre .tg-subtitle,
  .home-texto,
  .quem-texto {
    text-align: center;
  }

  .tg-lista {
    margin-top: 14px;
  }

  .tg-lista li {
    font-size: 15px;
    line-height: 1.5;
  }

  /* faixa vermelha do preço */
  .tg-faixa-preco {
    padding: 48px 16px;
    text-align: center;
  }

  .tg-preco-box h3 {
    font-size: 32px;
    line-height: 1.2;
  }

  .tg-preco-box p,
  .tg-preco-box small {
    font-size: 15px;
    line-height: 1.5;
  }

  .tg-preco-box .tg-btn,
  .tg-preco-box .btn-whats,
  .tg-preco-box .btn-hero {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* depoimentos */
  .tg-depoimentos {
    padding: 50px 14px;
  }

  .tg-depo-top {
    padding-bottom: 18px;
  }

  .tg-depo-quote {
    font-size: 28px;
    line-height: 1.2;
  }

  .tg-depo-sub {
    font-size: 15px;
  }

  .tg-google-badge {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  .tg-depo-card {
    text-align: center;
    padding: 18px 16px;
  }

  .tg-depo-card p {
    min-height: auto;
    font-size: 14px;
  }

  /* CTA final */
  .tg-cta-final {
    padding: 50px 14px;
    text-align: center;
  }

  .tg-cta-box h3 {
    font-size: 30px;
    line-height: 1.2;
  }

  .tg-cta-box p {
    font-size: 15px;
    line-height: 1.5;
  }

  .tg-cta-box .tg-btn,
  .tg-cta-box .btn-whats,
  .tg-cta-box .btn-hero {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* rodapé */
  .rodape-container {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
    text-align: center;
  }

  .mapa-container iframe {
    width: 100%;
    height: 240px;
  }

  .icones-seguranca {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* botões gerais dessas seções */
  .tg-btn,
  .btn-whats,
  .btn-whatsapp,
  .btn-post,
  .btn-hero {
    display: inline-flex;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* evita imagem ou bloco vazando */
  img,
  iframe,
  video {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .tg-preco-box h3,
  .tg-cta-box h3,
  .tg-depo-quote {
    font-size: 24px;
  }

  .tg-lista li,
  .tg-preco-box p,
  .tg-preco-box small,
  .tg-cta-box p,
  .tg-depo-sub {
    font-size: 14px;
  }

  .tg-container,
  .rodape-container,
  .post-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* =========================================
   PATCH MENU MOBILE TG EXPRESS
========================================= */

@media (max-width: 768px) {
  .menu-vermelho {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 42px;
    cursor: pointer;
    margin: 0;
    padding: 0;
  }

  .menu-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0 14px 14px;
    gap: 8px;
  }

  .menu-links.open {
    display: flex;
  }

  .menu-links a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    text-align: center;
    border-radius: 10px;
  }

  .dropdown {
    width: 100%;
  }

  .dropdown-link {
    width: 100%;
    justify-content: center;
  }

  .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 100%;
    box-shadow: none;
    margin-top: 6px;
  }

  .dropdown-menu a {
    width: 100%;
    text-align: center;
  }
}
/* =========================================
   AJUSTE FINO MOBILE - TOPO E MENU
   Cole no FINAL do style.css
========================================= */

@media (max-width: 768px) {
  /* TOPO BRANCO */
  .topo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 18px 14px 20px;
  }

  .logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .logo-area img {
    width: 48px;
  }

  .logo-area h1 {
    font-size: 18px;
    margin: 0;
  }

  .info-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }

  .info-bloco {
    width: 100%;
    max-width: 280px;
    text-align: center;
    line-height: 1.5;
  }

  .top-cta-area {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .top-cta-link {
    width: 100%;
    max-width: 280px;
    text-align: center;
    padding: 11px 14px;
    font-size: 15px;
  }

  /* FAIXA VERMELHA / HAMBÚRGUER */
  .menu-vermelho {
    position: relative;
    padding: 0;
    min-height: 64px;
  }

  .menu-toggle {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: #fff;
    z-index: 20;
  }

  /* menu aberto */
  .menu-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 68px 14px 14px;
    gap: 8px;
  }

  .menu-links.open {
    display: flex;
  }

  .menu-links a {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 13px 14px;
  }

  .dropdown {
    width: 100%;
  }

  .dropdown-link {
    width: 100%;
    justify-content: center;
  }

  .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 100%;
    box-shadow: none;
    margin-top: 6px;
  }

  .dropdown-menu a {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .topo-container {
    padding: 16px 12px 18px;
  }

  .logo-area img {
    width: 44px;
  }

  .logo-area h1 {
    font-size: 17px;
  }

  .info-area {
    gap: 12px;
    font-size: 14px;
  }

  .info-bloco {
    max-width: 260px;
  }

  .top-cta-link {
    max-width: 260px;
    font-size: 14px;
  }

  .menu-toggle {
    left: 12px;
    font-size: 36px;
  }
}