/* ===================================================
   Save Car Martelinho de Ouro — Landing Page
   =================================================== */

:root {
  --orange: #F68A2C;
  --orange-dark: #D96A12;
  --whatsapp: #25D366;
  --whatsapp-dark: #128C7E;
  --gray-light: #C9C9CF;
  --gray-dark: #333333;
  --black: #111111;
  --white: #F5F5F5;

  --bg: var(--black);
  --bg-panel: #181818;
  --bg-panel-2: #1e1e1e;
  --border: rgba(201, 201, 207, 0.14);

  --font-display: "Orbitron", sans-serif;
  --font-body: "Montserrat", sans-serif;

  --container: 1160px;
  --radius: 14px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(246, 138, 44, 0.4);
  background: rgba(246, 138, 44, 0.08);
  color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.section-head h2 span {
  color: var(--orange);
}

.section-head p {
  color: var(--gray-light);
  font-size: 16px;
}

section {
  padding: 96px 0;
  position: relative;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* All .btn-primary buttons are WhatsApp conversion actions, so they use
   WhatsApp's own brand green rather than the site's orange accent. */
.btn-primary {
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  color: var(--white);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
}

/* Instagram's own app-icon gradient — used only for the Instagram CTA so
   it reads as a real Instagram button rather than the site's WhatsApp green.
   Sized and lit a bit above the base .btn so it stands out in the banner. */
.btn-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: var(--white);
  font-size: 16px;
  padding: 18px 32px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 10px 28px rgba(214, 36, 159, 0.55),
    0 0 44px rgba(64, 93, 230, 0.3);
}

.btn-instagram svg {
  width: 22px;
  height: 22px;
}

.btn-instagram:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 14px 34px rgba(214, 36, 159, 0.65),
    0 0 54px rgba(64, 93, 230, 0.4);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(245, 245, 245, 0.25);
  color: var(--white);
}

.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.btn-block {
  width: 100%;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

.header.scrolled {
  background: rgba(17, 17, 17, 0.95);
  border-bottom-color: var(--border);
  padding: 10px 0;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  flex-shrink: 0;
}

.logo img {
  height: 46px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--orange);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-actions .btn {
  padding: 12px 22px;
  font-size: 13px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.menu-toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
}

/* ---------- Hero ---------- */
/* Same layout at every breakpoint: a clean full-bleed photo up top (the
   fixed header floats over it transparently), then the logo mark and all
   copy centered on solid dark background below — no text overlaid on the
   image itself. */
.hero {
  position: relative;
  padding: 0 0 96px;
  min-height: auto;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(246, 138, 44, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(246, 138, 44, 0.08), transparent 60%),
    radial-gradient(ellipse 65% 60% at 50% 45%, rgba(6, 6, 6, 0.35), transparent 70%),
    #060606;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 201, 207, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 201, 207, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black, transparent 80%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding-top: 8px;
}

.hero-photo {
  display: block;
  position: relative;
  width: 100%;
  /* Matches the source photo's own ratio exactly, so "cover" never has to
     crop anything away — at any viewport width the whole facade and every
     car stay in frame; the container simply gets proportionately taller
     on wider screens instead of zooming in. */
  aspect-ratio: 1086 / 480;
  overflow: hidden;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0) 70%, #060606 100%);
}

.hero-logo-mark {
  display: block;
  width: clamp(84px, 7vw, 120px);
  height: auto;
  margin: 28px auto 4px;
  filter: drop-shadow(0 0 22px rgba(246, 138, 44, 0.45));
}

/* Entrance animation: pure CSS, load-triggered (no JS/IntersectionObserver
   involved), and only enabled when the visitor hasn't asked for reduced
   motion. Elements have no opacity rule outside this block, so if the
   media query doesn't match, they simply render at full opacity — content
   can never get stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero .container > * {
    animation: heroFadeUp 0.7s ease both;
  }

  .hero .container > *:nth-child(1) { animation-delay: 0.05s; }
  .hero .container > *:nth-child(2) { animation-delay: 0.15s; }
  .hero .container > *:nth-child(3) { animation-delay: 0.25s; }
  .hero .container > *:nth-child(4) { animation-delay: 0.35s; }
  .hero .container > *:nth-child(5) { animation-delay: 0.45s; }
  .hero .container > *:nth-child(6) { animation-delay: 0.5s; }
}

.hero .eyebrow {
  margin-bottom: 28px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin-bottom: 22px;
}

.hero h1 span {
  color: var(--orange);
}

.hero .lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--gray-light);
  max-width: 640px;
  margin: 0 auto 36px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-light);
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  background: rgba(245, 245, 245, 0.03);
  padding: 10px 18px;
  border-radius: 999px;
}

.trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
  flex-shrink: 0;
}

/* ---------- Services ---------- */
.services {
  background: var(--bg);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.service-card {
  position: relative;
  min-height: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 138, 44, 0.4);
}

/* The service photo fills the whole card and sits behind the text,
   like the hero photo — not a separate strip above a solid panel. */
.service-card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.5s ease;
}

.service-card:hover .service-card-img img {
  transform: scale(1.07);
}

/* This photo's subject (car + buffer) sits low in the frame, with a
   blurred poster filling the top — crop lower so the car reads clearly. */
.service-card-img img.pos-car-low {
  object-position: center 82%;
}

/* Dark scrim over the photo so the title/text stay legible, echoing the
   hero section's treatment of its own background photo. */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(8, 8, 8, 0.95) 100%);
  z-index: 1;
  pointer-events: none;
}

.service-card-body {
  position: relative;
  z-index: 2;
  padding: 22px 24px 26px;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.service-card p {
  color: var(--gray-light);
  font-size: 13.5px;
  margin-bottom: 20px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease, gap 0.2s ease;
}

.card-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.card-link:hover {
  gap: 8px;
  border-color: var(--orange);
}

/* ---------- About / PUV ---------- */
.about {
  background: linear-gradient(180deg, var(--bg) 0%, #0c0c0c 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-copy .eyebrow {
  margin-bottom: 20px;
}

.about-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.3;
  margin-bottom: 20px;
}

.about-copy h2 span {
  color: var(--orange);
}

.about-copy p {
  color: var(--gray-light);
  font-size: 15.5px;
  margin-bottom: 28px;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.diff-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.diff-item svg {
  width: 26px;
  height: 26px;
  color: var(--orange);
  margin-bottom: 14px;
}

.diff-item h4 {
  font-size: 15px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.diff-item p {
  color: var(--gray-light);
  font-size: 13.5px;
}

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  counter-reset: step;
  position: relative;
}

.process-step {
  text-align: center;
  padding: 0 12px;
}

.process-step .step-number {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid rgba(246, 138, 44, 0.4);
  background: rgba(246, 138, 44, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--orange);
}

.process-step h4 {
  font-size: 16px;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

.process-step p {
  color: var(--gray-light);
  font-size: 14px;
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: #0c0c0c;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}

.review-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(246, 138, 44, 0.3);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg-panel-2);
}

.review-head strong {
  display: block;
  font-size: 13.5px;
  letter-spacing: 0.2px;
}

.review-head span {
  font-size: 12px;
  color: var(--gray-light);
}

.review-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.review-stars {
  display: flex;
  gap: 3px;
}

.review-stars svg {
  width: 15px;
  height: 15px;
  color: var(--orange);
}

.review-time {
  font-size: 12px;
  color: var(--gray-light);
}

.review-text {
  color: var(--gray-light);
  font-size: 14px;
  line-height: 1.7;
  flex: 1;
}

.review-cta {
  text-align: center;
}

/* ---------- Instagram banner ---------- */
.instagram-banner {
  background: var(--bg);
}

.instagram-banner-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(214, 36, 159, 0.12), rgba(253, 89, 73, 0.04));
  border: 1px solid rgba(214, 36, 159, 0.3);
  border-radius: var(--radius);
  padding: 36px 40px;
}

/* Instagram's own app-icon gradient, used here (and on .btn-instagram)
   instead of the site's orange accent so this section reads as Instagram. */
.instagram-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.instagram-icon svg {
  width: 28px;
  height: 28px;
  color: var(--white);
}

.instagram-copy {
  flex: 1;
  min-width: 220px;
}

.instagram-copy h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin-bottom: 6px;
}

.instagram-copy p {
  color: var(--gray-light);
  font-size: 14px;
}

/* ---------- Location ---------- */
.location {
  background: #0c0c0c;
  border-top: 1px solid var(--border);
}

.location .container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: stretch;
}

.location-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.location-info h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.3;
}

.location-info h2 span {
  color: var(--orange);
}

.location-info p {
  color: var(--gray-light);
  font-size: 15px;
}

.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.location-detail svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.location-detail strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.location-detail span {
  color: var(--gray-light);
  font-size: 14px;
}

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 340px;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  filter: grayscale(0.3) invert(0.92) contrast(0.9);
}

/* ---------- Final CTA ---------- */
.final-cta {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(246, 138, 44, 0.14), transparent 70%),
    var(--bg);
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  margin-bottom: 16px;
  line-height: 1.3;
}

.final-cta h2 span {
  color: var(--orange);
}

.final-cta p {
  color: var(--gray-light);
  margin-bottom: 32px;
  font-size: 15.5px;
}

/* ---------- Footer ---------- */
.footer {
  background: #0a0a0a;
  border-top: 1px solid var(--border);
  padding: 72px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.footer-brand img {
  height: 42px;
  margin-bottom: 18px;
}

.footer-brand p {
  color: var(--gray-light);
  font-size: 13.5px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
  color: var(--gray-light);
}

.footer-social a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.footer-social svg {
  width: 17px;
  height: 17px;
}

.footer h5 {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--gray-light);
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--orange);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--gray-light);
}

.footer-contact svg {
  width: 17px;
  height: 17px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  font-size: 12.5px;
  color: rgba(201, 201, 207, 0.6);
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  z-index: 90;
  animation: pulse 2.6s infinite;
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  color: var(--white);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ====================================================
   Service detail pages
   ==================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-light);
  margin-bottom: 24px;
}

.breadcrumb a {
  color: var(--gray-light);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb span.sep {
  opacity: 0.5;
}

.breadcrumb span.current {
  color: var(--orange);
}

.page-hero {
  position: relative;
  padding-top: 96px;
  padding-bottom: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Split layout: copy on the left, the service's own photo filling the
   right half edge-to-edge — like a poster panel rather than a backdrop. */
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}

.page-hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* page-hero-grid runs edge-to-edge (no .container), so on wide viewports
     the left inset is computed to match where .container content starts —
     keeping headings flush with the header logo instead of drifting left. */
  padding: 48px 56px 48px max(56px, calc((100vw - 1160px) / 2 + 16px));
  background: radial-gradient(ellipse 70% 60% at 10% 20%, rgba(246, 138, 44, 0.16), transparent 60%);
}

.page-hero-photo {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Absolutely positioned so the photo's own (tall, portrait) aspect ratio
   never contributes to the grid row's auto height — without this, the
   row stretched to fit the image's intrinsic size instead of the text. */
.page-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Soft seam so the photo doesn't cut hard against the dark text panel. */
.page-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0) 16%);
  z-index: 1;
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(246, 138, 44, 0.18), rgba(217, 106, 18, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon svg {
  width: 28px;
  height: 28px;
  color: var(--orange);
}

.page-hero .service-icon {
  margin-bottom: 26px;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.2;
  max-width: 720px;
  margin-bottom: 18px;
}

.page-hero h1 span {
  color: var(--orange);
}

.page-hero .lead {
  color: var(--gray-light);
  font-size: 16.5px;
  max-width: 620px;
  margin-bottom: 32px;
}

.page-hero .hero-actions {
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Tighter type in the split layout's narrower column, so the heading
   wraps to fewer lines and the whole hero (photo included) stays compact. */
.page-hero-text h1 {
  font-size: clamp(24px, 3vw, 36px);
  max-width: 480px;
}

.page-hero-text .lead {
  font-size: 15px;
  max-width: 460px;
  margin-bottom: 24px;
}

.detail-section {
  padding: 88px 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}

.detail-content h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  margin: 48px 0 18px;
  line-height: 1.3;
}

.detail-content h2:first-child {
  margin-top: 0;
}

.detail-content h2 span {
  color: var(--orange);
}

.detail-content p {
  color: var(--gray-light);
  font-size: 15.5px;
  margin-bottom: 16px;
}

.detail-content > .lead-block {
  font-size: 17px;
  color: var(--white);
  border-left: 3px solid var(--orange);
  padding-left: 20px;
  margin-bottom: 8px;
}

.subservice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}

.subservice-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.subservice-item h4 {
  font-size: 14.5px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  color: var(--orange);
}

.subservice-item p {
  font-size: 13.5px;
  margin-bottom: 0;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 24px 0 8px;
}

.partner-logo-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.partner-logo-card img {
  height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.benefit-list {
  display: grid;
  gap: 14px;
  margin: 20px 0 32px;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  color: var(--gray-light);
}

.benefit-list li svg {
  width: 20px;
  height: 20px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-list li strong {
  color: var(--white);
}

.steps-list {
  display: grid;
  gap: 20px;
  margin: 24px 0 8px;
  counter-reset: step;
}

.steps-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.steps-list .step-num {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(246, 138, 44, 0.4);
  background: rgba(246, 138, 44, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--orange);
}

.steps-list h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

.steps-list p {
  font-size: 14px;
  margin-bottom: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-item h4 {
  font-size: 15.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.faq-item h4 svg {
  width: 18px;
  height: 18px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-item p {
  font-size: 14.5px;
  color: var(--gray-light);
  margin: 0 0 0 28px;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin-bottom: 14px;
}

.sidebar-card p {
  color: var(--gray-light);
  font-size: 14px;
  margin-bottom: 20px;
}

.sidebar-list {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.sidebar-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--gray-light);
}

.sidebar-list li svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
  flex-shrink: 0;
}

.sidebar-card.dark {
  background: linear-gradient(160deg, rgba(246, 138, 44, 0.14), rgba(217, 106, 18, 0.04));
  border-color: rgba(246, 138, 44, 0.3);
}

.sidebar-nav {
  display: grid;
  gap: 4px;
}

.sidebar-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--gray-light);
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: rgba(246, 138, 44, 0.1);
  color: var(--orange);
}

/* Related services */
.related-services {
  background: #0c0c0c;
  border-top: 1px solid var(--border);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.related-card {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(246, 138, 44, 0.35);
}

.related-card .service-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
}

.related-card .service-icon svg {
  width: 22px;
  height: 22px;
}

.related-card h4 {
  font-family: var(--font-display);
  font-size: 15px;
  margin-bottom: 8px;
}

.related-card p {
  color: var(--gray-light);
  font-size: 13.5px;
}

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

  .sidebar {
    position: static;
  }

  .page-hero {
    padding-top: 0;
  }

  .page-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .page-hero-photo {
    order: -1;
    height: 420px;
  }

  .page-hero-photo::before {
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.75) 0%, rgba(13, 13, 13, 0.1) 30%, rgba(13, 13, 13, 0) 60%);
  }

  .page-hero-text {
    padding: 40px 24px 48px;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(246, 138, 44, 0.16), transparent 60%);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .about .container,
  .location .container {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Nav switches to the hamburger dropdown well before the header actually
   runs out of room (logo + 5 links + button need ~950px+ to sit on one
   line without the logo getting squeezed out by flexbox). */
@media (max-width: 1024px) {
  .nav {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(17, 17, 17, 0.98);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav.open {
    max-height: 300px;
  }

  .nav a {
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
  }

  .menu-toggle {
    display: flex;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 780px) {
  /* On short mobile renders the tightly-cropped photo has no room left to
     crop away (aspect-ratio already keeps the whole facade visible), so
     the fixed header's own height would otherwise sit directly over the
     "SAVE CAR" sign. Push the photo below the header instead of letting
     it float on top, just for this breakpoint. */
  .hero-photo {
    margin-top: 70px;
  }

  .detail-section {
    padding: 56px 0;
  }

  .diff-grid {
    grid-template-columns: 1fr;
  }

  .instagram-banner-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .instagram-banner-inner .btn {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  section {
    padding: 72px 0;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  /* Slightly smaller on phones so it covers less of whatever CTA button
     happens to be scrolled underneath it. */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 18px;
    right: 18px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }

  /* Logo + "Fale Conosco" button + hamburger all need to fit on one line
     at phone widths — trim each one down instead of dropping the text. */
  .logo img {
    height: 36px;
  }

  .header .container {
    gap: 10px;
  }

  .header-actions .btn-primary {
    padding: 9px 12px;
    gap: 6px;
    font-size: 12px;
  }

  .header-actions .btn-primary svg {
    width: 16px;
    height: 16px;
  }
}