/* ================================================
   GARAGEM DO AR — COMMON STYLES
   Design system shared across all pages
   ================================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* === DESIGN TOKENS === */
:root {
  --clr-bg:            #F4F5F7;
  --clr-white:         #FFFFFF;
  --clr-orange:        #F97316;
  --clr-orange-dark:   #EA580C;
  --clr-orange-light:  rgba(249,115,22,0.12);
  --clr-indigo:        #4F46E5;
  --clr-indigo-dark:   #4338CA;
  --clr-indigo-deeper: #1E1B4B;
  --clr-text:          #1B1D2A;
  --clr-muted:         #6B7280;
  --clr-border:        #E5E7EB;
  --ff-heading: 'Montserrat', sans-serif;
  --ff-body:    'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.09);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
  --t: 0.3s ease;
  --max-w: 1280px;
}

/* === RESET === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--ff-body); background:var(--clr-bg); color:var(--clr-text); line-height:1.6; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* === UTILITIES === */
.container { max-width:var(--max-w); margin:0 auto; padding:0 2rem; }

.lbl {
  display:inline-block;
  font-family:var(--ff-body);
  font-size:0.72rem; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--clr-orange); margin-bottom:0.75rem;
}

.sec-title {
  font-family:var(--ff-heading);
  font-size:clamp(1.75rem,4vw,2.6rem);
  font-weight:800; color:var(--clr-text);
  line-height:1.15; margin-bottom:1rem;
}

.sec-desc {
  font-size:1rem; color:var(--clr-muted);
  max-width:620px; line-height:1.75;
}

/* === NAVBAR === */
.navbar {
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--clr-border);
  transition:box-shadow var(--t);
}
.navbar.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.08); }

.navbar-container {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center;
  justify-content:space-between;
  height:120px; padding:0 2rem; gap:1.5rem;
}

/* Logo */
.navbar-logo {
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--ff-heading); font-weight:800;
  font-size:1.15rem; color:var(--clr-text); flex-shrink:0;
}
.logo-badge {
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg, var(--clr-orange), var(--clr-indigo));
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:1rem;
}
.logo-name span { color:var(--clr-orange); }

/* Nav links */
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-links li a {
  font-size:0.93rem; font-weight:500; color:var(--clr-muted);
  padding:0.45rem 0.875rem; border-radius:var(--radius-sm);
  transition:color var(--t), background var(--t);
}
.nav-links li a:hover,
.nav-links li a.active {
  color:var(--clr-indigo);
  background:rgba(79,70,229,0.07);
}

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:0.625rem; flex-shrink:0; }

.btn-outline-nav {
  font-family:var(--ff-body); font-size:0.82rem; font-weight:600;
  color:var(--clr-orange); border:2px solid var(--clr-orange);
  background:transparent; padding:0.45rem 1rem;
  border-radius:var(--radius-sm); cursor:pointer;
  transition:all var(--t); white-space:nowrap;
}
.btn-outline-nav:hover { background:var(--clr-orange); color:white; }

.btn-primary-nav {
  font-family:var(--ff-body); font-size:0.82rem; font-weight:600;
  color:white; background:var(--clr-orange);
  border:2px solid var(--clr-orange);
  padding:0.45rem 1rem; border-radius:var(--radius-sm);
  cursor:pointer; transition:all var(--t);
  white-space:nowrap; display:inline-flex; align-items:center; gap:0.35rem;
}
.btn-primary-nav:hover {
  background:var(--clr-orange-dark); border-color:var(--clr-orange-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(249,115,22,0.3);
}

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:0.5rem; background:none; border:none; z-index:1100;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--clr-text); border-radius:2px;
  transition:all 0.35s ease;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* === HERO BASE === */
.hero {
  position:relative; width:100%; min-height:88vh;
  display:flex; align-items:center;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(27,29,42,0.93) 0%,
    rgba(27,29,42,0.75) 45%,
    rgba(27,29,42,0.15) 75%,
    rgba(27,29,42,0) 100%);
  z-index:1;
}
.hero-content {
  position:relative; z-index:2;
  max-width:620px; color:white;
  padding:6rem 0 6rem 7%;
  opacity:0; animation:fadeUp 0.9s ease forwards 0.2s;
}
.hero-content .lbl { color:var(--clr-orange); }
.hero-content h1 {
  font-family:var(--ff-heading);
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:900; line-height:1.1; margin-bottom:1.25rem;
}
.hero-content p { font-size:1rem; color:rgba(255,255,255,0.8); line-height:1.75; margin-bottom:2rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.btn-hero-primary {
  font-family:var(--ff-body); font-size:0.95rem; font-weight:700;
  color:white; background:var(--clr-orange);
  padding:0.8rem 1.75rem; border-radius:var(--radius-sm);
  transition:all var(--t); display:inline-flex; align-items:center; gap:0.5rem;
  border:none; cursor:pointer;
}
.btn-hero-primary:hover {
  background:var(--clr-orange-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(249,115,22,0.35);
}
.btn-hero-secondary {
  font-family:var(--ff-body); font-size:0.95rem; font-weight:600;
  color:white; background:rgba(255,255,255,0.12);
  padding:0.8rem 1.75rem; border-radius:var(--radius-sm);
  border:1.5px solid rgba(255,255,255,0.35);
  transition:all var(--t); display:inline-flex; align-items:center; gap:0.5rem;
  cursor:pointer;
}
.btn-hero-secondary:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.6); }

/* Scroll indicator */
.scroll-indicator {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  color:rgba(255,255,255,0.5); font-size:0.75rem;
  animation:bounce 2s infinite;
}
.scroll-indicator i { font-size:1rem; }

/* === FALE CONOSCO (2 cards) === */
.contato-section {
  padding:5rem 0;
  background:var(--clr-white);
}
.contato-header { text-align:center; margin-bottom:3rem; }
.contato-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem; max-width:800px; margin:0 auto;
}
.contato-card {
  background:var(--clr-bg);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2.5rem 2rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  transition:all var(--t);
  box-shadow:var(--shadow-sm);
}
.contato-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--clr-orange);
}
.contato-card-icon {
  width:68px; height:68px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  background:var(--clr-orange-light);
  color:var(--clr-orange);
}
.contato-card h3 {
  font-family:var(--ff-heading); font-size:1.2rem; font-weight:700; color:var(--clr-text);
}
.contato-card p { font-size:0.93rem; color:var(--clr-muted); line-height:1.65; }
.contato-card .address-line { font-size:0.88rem; color:var(--clr-muted); }
.btn-contato {
  font-family:var(--ff-body); font-size:0.88rem; font-weight:700;
  padding:0.7rem 1.5rem; border-radius:var(--radius-sm);
  transition:all var(--t); cursor:pointer;
  display:inline-flex; align-items:center; gap:0.5rem;
  border:none; margin-top:0.5rem;
}
.btn-whats {
  background:var(--clr-orange); color:white;
}
.btn-whats:hover {
  background:var(--clr-orange-dark);
  box-shadow:0 4px 16px rgba(249,115,22,0.35);
  transform:translateY(-1px);
}
.btn-mapa {
  background:var(--clr-indigo); color:white;
}
.btn-mapa:hover {
  background:var(--clr-indigo-dark);
  box-shadow:0 4px 16px rgba(79,70,229,0.3);
  transform:translateY(-1px);
}

/* Map embed inline */
.mapa-inline {
  width:100%; height:160px; border-radius:var(--radius-md);
  border:0; margin-top:0.75rem; display:none;
  animation:fadeUp 0.4s ease;
}
.mapa-inline.show { display:block; }

/* === CTA SECTION === */
.cta-section {
  background:linear-gradient(135deg, var(--clr-indigo) 0%, #312E81 100%);
  padding:5.5rem 2rem; text-align:center;
  position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute;
  top:-40%; right:-5%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(249,115,22,0.18) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
}
.cta-section::after {
  content:''; position:absolute;
  bottom:-30%; left:-5%; width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
}
.cta-section .container { position:relative; z-index:2; }
.cta-section .lbl { color:rgba(249,115,22,0.85); }
.cta-section .sec-title { color:white; margin:0 auto 1rem; max-width:660px; }
.cta-section > .container > p {
  color:rgba(255,255,255,0.72); font-size:1rem;
  max-width:520px; margin:0 auto 2.5rem;
}
.cta-btns { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.btn-cta-main {
  font-family:var(--ff-body); font-size:0.97rem; font-weight:700;
  color:var(--clr-text); background:var(--clr-orange);
  padding:0.875rem 2.25rem; border-radius:var(--radius-sm);
  border:none; cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:0.5rem;
}
.btn-cta-main:hover {
  background:var(--clr-orange-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(249,115,22,0.4);
}
.btn-cta-ghost {
  font-family:var(--ff-body); font-size:0.97rem; font-weight:600;
  color:white; background:transparent;
  padding:0.875rem 2.25rem; border-radius:var(--radius-sm);
  border:1.5px solid rgba(255,255,255,0.45);
  cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:0.5rem;
}
.btn-cta-ghost:hover { border-color:white; background:rgba(255,255,255,0.1); }

/* === FOOTER === */
.footer {
  background:var(--clr-indigo-deeper);
  color:rgba(255,255,255,0.65);
  padding:4rem 2rem 0;
}
.footer-grid {
  max-width:var(--max-w); margin:0 auto;
  display:grid;
  grid-template-columns:1.8fr 1fr 1.4fr 1.4fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand-logo {
  display:flex; align-items:center; gap:0.5rem;
  font-family:var(--ff-heading); font-size:1.2rem; font-weight:800;
  color:white; margin-bottom:1rem;
}
.footer-brand-logo .logo-badge { width:34px; height:34px; font-size:0.9rem; }
.footer-brand-logo span { color:var(--clr-orange); }
.footer-brand p { font-size:0.88rem; line-height:1.7; color:rgba(255,255,255,0.55); margin-bottom:1.5rem; }
.footer-social { display:flex; gap:0.625rem; }
.footer-social a {
  width:34px; height:34px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.55); font-size:0.82rem;
  transition:all var(--t);
}
.footer-social a:hover { background:var(--clr-orange); border-color:var(--clr-orange); color:white; }
.footer-col h5 {
  font-family:var(--ff-heading); font-size:0.8rem; font-weight:700;
  color:white; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:1.25rem;
}
.footer-col ul li { margin-bottom:0.6rem; }
.footer-col ul li a {
  font-size:0.88rem; color:rgba(255,255,255,0.55);
  transition:color var(--t); display:flex; align-items:center; gap:0.45rem;
}
.footer-col ul li a:hover { color:var(--clr-orange); }
.footer-col ul li a i { font-size:0.65rem; color:var(--clr-orange); }
.footer-contact ul li {
  display:flex; align-items:flex-start; gap:0.65rem;
  font-size:0.88rem; color:rgba(255,255,255,0.55); margin-bottom:0.75rem;
}
.footer-contact ul li i { color:var(--clr-orange); margin-top:0.15rem; flex-shrink:0; width:14px; }
.footer-map-embed {
  width:100%; height:150px; border:0;
  border-radius:var(--radius-md); margin-top:0.5rem;
  filter:saturate(0.6) contrast(1.05);
}
.footer-bottom {
  max-width:var(--max-w); margin:0 auto;
  padding:1.5rem 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.82rem; color:rgba(255,255,255,0.35);
  flex-wrap:wrap; gap:0.5rem;
}
.footer-bottom a { color:var(--clr-orange); }

/* === WHATSAPP FLOAT === */
.whatsapp-float {
  position:fixed; bottom:2rem; right:2rem; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:1.5rem;
  box-shadow:0 8px 24px rgba(37,211,102,0.45);
  transition:all var(--t);
}
.whatsapp-float:hover {
  transform:scale(1.1);
  box-shadow:0 12px 32px rgba(37,211,102,0.55);
}
.whatsapp-tooltip {
  position:absolute; right:calc(100% + 12px);
  background:var(--clr-text); color:white;
  font-family:var(--ff-body); font-size:0.8rem; font-weight:600;
  padding:0.35rem 0.75rem; border-radius:6px; white-space:nowrap;
  opacity:0; transform:translateX(8px);
  transition:all var(--t); pointer-events:none;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }

/* === DEPOIMENTOS GOOGLE === */
.depoimentos-section {
  position:relative; padding:5rem 2rem;
  background-image:url('./Images/hero-bg.png');
  background-size:cover; background-position:center;
  background-attachment:fixed;
}
.depoimentos-section::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(31,27,75,0.92) 0%, rgba(79,70,229,0.82) 100%);
  z-index:1;
}
.depoimentos-section .container { position:relative; z-index:2; text-align:center; }
.depoimentos-section .lbl { color:rgba(249,115,22,0.9); }
.depoimentos-section .sec-title { color:white; margin:0 auto 1rem; }
.depoimentos-section > .container > p { color:rgba(255,255,255,0.72); max-width:540px; margin:0 auto 2.5rem; }
.rating-stars { font-size:1.5rem; margin-bottom:0.5rem; color:var(--clr-orange); letter-spacing:4px; }
.google-badge {
  display:inline-flex; align-items:center; gap:0.75rem;
  background:white; color:var(--clr-text);
  padding:0.625rem 1.25rem; border-radius:var(--radius-md);
  margin-bottom:2rem;
  font-family:var(--ff-body); font-size:0.9rem; font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.google-badge img { width:20px; }
.btn-google {
  font-family:var(--ff-body); font-size:0.97rem; font-weight:700;
  color:var(--clr-text); background:white;
  padding:0.875rem 2.25rem; border-radius:var(--radius-sm);
  border:none; cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:0.625rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.btn-google:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,0.2);
}

/* === KEYFRAMES === */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}

/* === RESPONSIVIDADE === */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .navbar-container { padding:0 1rem; }
  .nav-links {
    display:none; flex-direction:column; align-items:flex-start;
    position:absolute; top:72px; left:0; right:0;
    background:white; padding:1rem 1.5rem 1.5rem;
    border-bottom:1px solid var(--clr-border);
    box-shadow:0 8px 24px rgba(0,0,0,0.1);
    gap:0.25rem;
  }
  .nav-links.open { display:flex; }
  .nav-links li a { width:100%; padding:0.625rem 0.75rem; }
  .nav-actions { display:none; }
  .hamburger { display:flex; }
  .hero { min-height:100vh; }
  .hero-content { padding:5rem 0 4rem 5%; max-width:90%; }
  .contato-grid { grid-template-columns:1fr; max-width:440px; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

@media (max-width:480px) {
  .container { padding:0 1.25rem; }
  .hero-content { padding:4rem 0 3.5rem 5%; }
  .hero-content h1 { font-size:clamp(1.75rem,8vw,2.25rem); }
  .cta-section { padding:4rem 1.25rem; }
  .cta-btns { flex-direction:column; align-items:stretch; }
  .btn-cta-main, .btn-cta-ghost { justify-content:center; }
}