/* ========================================
   CNC Auto Center - Dark Mode Design System
   Mobile-First | High-Tech Branding
======================================== */

/* CSS Custom Properties */
:root {
  /* Dark Mode Palette */
  --color-primary: #E30613;
  --color-primary-dark: #B8050F;
  --color-primary-light: #FF1A27;
  --color-accent: #E30613;

  /* Dark Theme Colors */
  --color-bg-dark: #0D0D0D;
  --color-bg-darker: #000000;
  --color-bg-card: #1A1A1A;
  --color-bg-card-hover: #242424;
  --color-bg-elevated: #2A2A2A;

  /* Chrome/Silver Accents */
  --color-chrome: linear-gradient(135deg, #C0C0C0 0%, #808080 50%, #C0C0C0 100%);
  --color-silver: #A0A0A0;
  --color-silver-light: #D0D0D0;

  /* Text Colors */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #707070;

  --color-white: #FFFFFF;
  --color-success: #22c55e;
  --color-whatsapp: #25d366;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Inter', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  --shadow-glow-red: 0 0 40px rgba(227, 6, 19, 0.4);
  --shadow-glow-red-intense: 0 0 60px rgba(227, 6, 19, 0.6);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

address {
  font-style: normal;
}

/* Headings - Bold Italic Style */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-primary);
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }
}

/* Chrome Divider */
.chrome-divider {
  height: 2px;
  background: var(--color-chrome);
  border: none;
  margin: var(--space-8) 0;
}

/* ========================================
   HEADER
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.logo__img {
  height: 50px;
  width: auto;
}

.logo__text {
  font-weight: 800;
  font-style: italic;
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
}

.logo__text span {
  color: var(--color-primary);
}

/* Navigation */
.nav {
  display: none;
}

.nav--open {
  display: block;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  background: var(--color-bg-darker);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-4);
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-primary);
  background: rgba(227, 6, 19, 0.1);
}

.nav__link--cta {
  background: var(--color-primary);
  color: var(--color-white) !important;
  text-align: center;
}

.nav__link--cta:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-glow-red);
}

/* Mobile Nav Toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }

  .nav--open {
    position: static;
    padding: 0;
    border: none;
    background: transparent;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .nav__link {
    padding: var(--space-2) var(--space-3);
  }

  .nav-toggle {
    display: none;
  }
}

/* ========================================
   HERO SECTION
======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(70px + var(--space-12)) 0 var(--space-12);
  overflow: hidden;
  z-index: 0;
  /* Create stacking context */
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-bg-dark) 50%, #1A0A0A 100%);
  z-index: 1;
}

.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(227, 6, 19, 0.15) 0%, transparent 50%);
}

.hero__bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--color-bg-dark) 0%, transparent 100%);
}

.hero__content {
  text-align: center;
  color: var(--color-text-primary);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(227, 6, 19, 0.15);
  border: 1px solid rgba(227, 6, 19, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-6);
  backdrop-filter: blur(10px);
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

.hero__title .highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.trust-item__icon {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--font-size-5xl);
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ========================================
   BUTTONS
======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-lg), var(--shadow-glow-red);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-glow-red-intense);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
}

.btn--whatsapp {
  background: linear-gradient(135deg, var(--color-whatsapp) 0%, #1da851 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(37, 211, 102, 0.4);
}

/* ========================================
   SYMPTOM CHECKER SECTION
======================================== */
.symptom-checker {
  padding: var(--space-16) 0;
  background: var(--color-bg-darker);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.symptom-checker__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.symptom-checker__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.symptom-checker__subtitle {
  color: var(--color-text-muted);
}

.symptom-checker__grid {
  display: grid;
  gap: var(--space-4);
}

.symptom-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
  cursor: pointer;
}

.symptom-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  transform: translateX(8px);
  box-shadow: var(--shadow-glow-red);
}

.symptom-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.2) 0%, rgba(227, 6, 19, 0.1) 100%);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.symptom-card__content {
  flex: 1;
}

.symptom-card__question {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.symptom-card__action {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: 600;
}

.symptom-card__arrow {
  color: var(--color-primary);
  font-size: 1.25rem;
  transition: transform var(--transition-fast);
}

.symptom-card:hover .symptom-card__arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .symptom-checker__title {
    font-size: var(--font-size-3xl);
  }

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

/* ========================================
   SECTION HEADERS
======================================== */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: rgba(227, 6, 19, 0.15);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--font-size-4xl);
  }
}

/* ========================================
   SERVICES SECTION
======================================== */
.services {
  padding: var(--space-20) 0;
  background: var(--color-bg-dark);
}

.services__grid {
  display: grid;
  gap: var(--space-6);
}

.service-card {
  background: var(--color-bg-card);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(227, 6, 19, 0.5);
  box-shadow: var(--shadow-lg), var(--shadow-glow-red);
}

.service-card--highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: none;
}

.service-card--highlight .service-card__desc {
  color: rgba(255, 255, 255, 0.8);
}

.service-card--highlight .service-card__link {
  color: var(--color-white);
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.2) 0%, rgba(227, 6, 19, 0.1) 100%);
  border-radius: var(--radius-lg);
  font-size: 1.75rem;
  margin-bottom: var(--space-4);
}

.service-card--highlight .service-card__icon {
  background: rgba(255, 255, 255, 0.2);
}

.service-card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.service-card__desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.service-card__link {
  font-weight: 700;
  font-style: italic;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.service-card__link:hover {
  color: var(--color-primary-light);
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   SERVICE AREAS SECTION - LOCAL SEO DIRECTORY
======================================== */
.service-areas {
  padding: var(--space-20) 0;
  background: var(--color-bg-darker);
}

.service-areas__intro {
  max-width: 800px;
  margin: 0 auto var(--space-12);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-primary);
  text-align: center;
}

.service-areas__intro p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.service-areas__intro strong {
  color: var(--color-text-primary);
}

.service-areas__grid {
  display: grid;
  gap: var(--space-6);
}

.area-zone {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.area-zone__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.area-zone__icon {
  font-size: 1.25rem;
}

.area-zone__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.area-zone__list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.area-zone__list li:last-child {
  border-bottom: none;
}

.area-zone__list a {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.area-zone__list a:hover {
  color: var(--color-primary);
  background: rgba(227, 6, 19, 0.1);
  padding-left: var(--space-3);
}

/* Full width zone for Grande São Luís */
.area-zone--full {
  grid-column: 1 / -1;
}

/* ========================================
   HIGH-END UI ANIMATIONS
======================================== */

/* 1. Chrome Glow / Border Beam */
@keyframes border-beam {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

.border-beam,
.service-card--highlight,
.btn--primary {
  position: relative;
  /* Ensure z-index allows pseudo-element to be behind content if needed, 
     but for border effect we might use `::after` overlaid with pointer-events: none */
}

/* Add a glowing border effect */
.service-card--highlight::after,
.btn--primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(60deg,
      rgba(227, 6, 19, 0.1),
      rgba(227, 6, 19, 0.4),
      rgba(227, 6, 19, 0.1),
      rgba(227, 6, 19, 0.4),
      rgba(227, 6, 19, 0.1));
  background-size: 300% 300%;
  border-radius: inherit;
  animation: border-beam 4s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card--highlight:hover::after,
.btn--primary:hover::after {
  opacity: 1;
}

/* Force the beam to be visible on the specific Highlight card always? 
   User request: "Apply a dynamic 'Border Beam' to the 'Garantia 48 Horas' card... "
   Let's make it always active for the highlight card but subtle. */
.service-card--highlight::after {
  opacity: 0.6;
  animation-duration: 3s;
}

.btn--primary::after {
  /* Only on hover/focus for buttons to avoid distraction, or constant? 
       Request said: "A subtle, high-speed light beam... tracing the container edges." 
       Let's keep it constant but subtle for buttons too, or maybe just hover. 
       Let's stick to hover for buttons to avoid UI overwhelming, unless 'active technology' implies constant.
       Re-reading: "Apply a dynamic 'Border Beam' to the ... primary CTA buttons." implies constant.
    */
  opacity: 0.4;
  animation-duration: 2s;
}


/* 2. Conversion Shimmer */
@keyframes shimmer {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

.shimmer-effect,
.btn--primary,
.nav__link--cta {
  /* Create the shimmer gradient on top of base color */
  background: linear-gradient(120deg,
      transparent 30%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 70%);
  background-size: 200% 100%;
  /* We need to combine this with the existing background. 
     Since we can't easily multi-layer background-image with CSS variables in a clean way without overwriting,
     we'll use a pseudo-element for the shimmer specifically.
     The .btn--primary already has a ::after for the border beam. user `::before` for shimmer.
  */
  background: var(--color-primary);
  /* Fallback */

  /* Reset background property to use pseudo-element approach for safety, 
     OR effectively use multiple backgrounds if variable support allows. 
     Let's use ::before for the shimmer overlay to keep it clean. */
}

/* Reset base background for btn--primary to allow pseudo element shimmer */
.btn--primary,
.nav__link--cta {
  position: relative;
  overflow: hidden;
  /* Contain the shimmer */
  z-index: 1;
}

.btn--primary::before,
.nav__link--cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg,
      transparent 35%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 65%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite linear;
  /* "Every 2.5 seconds" */
  pointer-events: none;
}

/* Ensure text is above shimmer */
.btn--primary span,
.nav__link--cta span {
  position: relative;
  z-index: 2;
}


/* 3. Interactive Tilt Support */
/* The JS adds transform inline, but we need smooth transition for the mouseleave reset */
.service-card,
.symptom-card {
  transition: transform 0.1s ease-out, border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  /* Optimize performance */
}

/* When resetting (mouseleave), we want it smoother */
/* We can handle this logic in JS or CSS. 
   If we set transition: transform 0.1s, it might be laggy for mousemove.
   Usually for mousemove tilt, we remove transition or keep it very fast.
   Let's rely on the JS reset function setting the style to specific value 
   and maybe adding a class for transition if needed. 
   actually, 0.1s is often fine for tilt sluggishness.
*/


/* 4. Number Ticker Styles */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  /* Prevents jumping width */
  font-weight: 800;
  color: var(--color-primary);
}

.area-zone__list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.area-zone__list--inline li {
  padding: 0;
  border-bottom: none;
}

.area-zone__list--inline a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
}

.area-zone__list--inline a:hover {
  background: rgba(227, 6, 19, 0.15);
  padding-left: var(--space-3);
}

.service-areas__cta {
  text-align: center;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.service-areas__cta p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
}

.service-areas__cta strong {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .service-areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .area-zone__list {
    max-height: 400px;
    overflow-y: auto;
  }

  .area-zone__list::-webkit-scrollbar {
    width: 4px;
  }

  .area-zone__list::-webkit-scrollbar-track {
    background: var(--color-bg-elevated);
    border-radius: 2px;
  }

  .area-zone__list::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 2px;
  }
}

@media (min-width: 1200px) {
  .service-areas__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .area-zone__list {
    max-height: 350px;
  }
}

/* ========================================
   CTA SECTION
======================================== */
.cta {
  padding: var(--space-20) 0;
  background: linear-gradient(135deg, var(--color-bg-darker) 0%, #1A0505 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(227, 6, 19, 0.1) 0%, transparent 60%);
}

.cta__content {
  position: relative;
}

.cta__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.cta__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

@media (min-width: 768px) {
  .cta__title {
    font-size: var(--font-size-4xl);
  }

  .cta__actions {
    flex-direction: row;
  }
}

/* ========================================
   FOOTER
======================================== */
.footer {
  background: var(--color-bg-darker);
  color: var(--color-text-muted);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__grid {
  display: grid;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.logo--footer .logo__text {
  color: var(--color-text-primary);
}

.footer__tagline {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.footer__heading {
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__nav a {
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__nav a:hover {
  color: var(--color-primary);
}

.footer__contact p {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.footer__contact a:hover {
  color: var(--color-primary);
}

.footer__bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: var(--font-size-sm);
}

.footer__location-note {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(227, 6, 19, 0.08);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
}

.footer__location-text {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.footer__location-text strong {
  color: var(--color-primary);
}

.footer__badge {
  margin-top: var(--space-4);
}

.footer__guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-style: italic;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glow-red);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ========================================
   STICKY WHATSAPP BUTTON
======================================== */
.whatsapp-sticky {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 999;
}

.whatsapp-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-whatsapp) 0%, #1da851 100%);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-base);
}

.whatsapp-sticky__btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl), 0 0 50px rgba(37, 211, 102, 0.6);
}

.whatsapp-sticky__icon {
  font-size: 1.75rem;
}

.whatsapp-sticky__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-dark);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* ========================================
   SERVICE PAGE STYLES
======================================== */

/* Service Hero */
.service-hero {
  position: relative;
  padding: calc(70px + var(--space-12)) 0 var(--space-16);
  overflow: hidden;
}

.service-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-bg-dark) 50%, #1A0A0A 100%);
  z-index: -1;
}

.service-hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(227, 6, 19, 0.15) 0%, transparent 50%);
}

.service-hero__content {
  text-align: center;
}

.service-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(227, 6, 19, 0.15);
  border: 1px solid rgba(227, 6, 19, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.service-hero__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.service-hero__title .highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.service-hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

.service-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.service-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.trust-badge__icon {
  font-size: 1.25rem;
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: var(--space-6);
}

.breadcrumb ol {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb li::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--color-text-muted);
}

.breadcrumb li:last-child::after {
  display: none;
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

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

.breadcrumb span[aria-current] {
  color: var(--color-text-primary);
}

/* Problem/Solution Section */
.problem-solution {
  padding: var(--space-16) 0;
  background: var(--color-bg-dark);
}

.problem-solution__grid {
  display: grid;
  gap: var(--space-8);
}

.problem-block,
.solution-block {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}

.problem-block {
  background: var(--color-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.solution-block {
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.1) 0%, rgba(227, 6, 19, 0.05) 100%);
  border: 1px solid rgba(227, 6, 19, 0.3);
}

.problem-block__icon,
.solution-block__icon {
  display: block;
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.problem-block__title,
.solution-block__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.problem-block__text,
.solution-block__text {
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.problem-block__symptoms {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.problem-block__symptoms li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

.solution-block__guarantee {
  margin-top: var(--space-6);
}

.guarantee-badge {
  display: inline-flex;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 700;
  font-style: italic;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow-red);
}

/* Services Detail Grid */
.services-detail {
  padding: var(--space-20) 0;
  background: var(--color-bg-darker);
}

.services-detail__grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.service-item {
  background: var(--color-bg-card);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-base);
}

.service-item:hover {
  border-color: rgba(227, 6, 19, 0.5);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-red);
}

.service-item__icon {
  font-size: 2rem;
  margin-bottom: var(--space-4);
}

.service-item__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.service-item__desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.service-item__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-item__includes li {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.services-detail__cta {
  text-align: center;
}

/* Gallery */
.gallery {
  padding: var(--space-16) 0;
  background: var(--color-bg-dark);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.gallery__item--placeholder {
  aspect-ratio: 4/3;
}

.gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  text-align: center;
  padding: var(--space-4);
}

.gallery__placeholder-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
  opacity: 0.5;
}

.gallery__placeholder-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.gallery__video {
  margin-top: var(--space-8);
}

.gallery__video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  background: var(--color-bg-card);
  border: 2px dashed rgba(227, 6, 19, 0.3);
  border-radius: var(--radius-xl);
  text-align: center;
}

.gallery__video-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.gallery__video-text {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.gallery__video-duration {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

/* Local SEO Section */
.local-seo {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--color-bg-darker) 0%, #1A0505 100%);
}

.local-seo__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.local-seo__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.local-seo__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.8;
}

.local-seo__neighborhoods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.neighborhood-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-fast);
}

.neighborhood-chip:hover {
  background: rgba(227, 6, 19, 0.15);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.local-seo__cta-text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

/* Button Modifiers */
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

.nav__link--active {
  color: var(--color-primary) !important;
}

/* Responsive */
@media (min-width: 768px) {
  .service-hero__title {
    font-size: var(--font-size-4xl);
  }

  .service-hero__actions {
    flex-direction: row;
    justify-content: center;
  }

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

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

  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-detail__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefits__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Benefits Section */
.benefits {
  padding: var(--space-16) 0;
  background: var(--color-bg-dark);
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.benefit-card {
  background: var(--color-bg-card);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: all var(--transition-base);
}

.benefit-card:hover {
  border-color: rgba(227, 6, 19, 0.4);
  transform: translateY(-4px);
}

.benefit-card__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-4);
}

.benefit-card__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.benefit-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Featured Service Item */
.service-item--featured {
  border-color: rgba(227, 6, 19, 0.4);
  background: linear-gradient(135deg, var(--color-bg-card) 0%, rgba(227, 6, 19, 0.05) 100%);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

.services,
.service-areas,
.cta,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Gallery Enhancements */
.gallery__item img {
  border: 1px solid rgba(227, 6, 19, 0.4);
  box-shadow: var(--shadow-glow-red);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  object-fit: cover;
  aspect-ratio: 4/3;
  width: 100%;
}

.gallery__item img:hover {
  box-shadow: var(--shadow-glow-red-intense);
  border-color: var(--color-primary);
  transform: scale(1.02);
}

/* ========================================
   ACCESSORY SCAN REVEAL - HERO BACKGROUND
======================================== */
.hero__content {
  position: relative;
  z-index: 20;
  /* Texto e botões na frente de tudo */
}

.hero__scan-container {
  position: absolute;
  top: 60%;
  left: -15%;
  width: 110%;
  z-index: 5;
  opacity: 0.6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: scale(1.4);
}

.scan-car-svg {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: visible;
  /* Removed border/outline per user request */
  border: none;
  outline: none;
}

/* Remove a luz branca e a animação */
.scan-beam,
.car-reveal {
  animation: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Base Silhouette (Dark Gray Stroke, 30% Opacity) */
/* Moving opacity to SVG attribute per request, but keeping fallback here */
.car-base path {
  vector-effect: non-scaling-stroke;
}

/* Reveal Layer (Red Glow Stroke) */
.car-reveal path {
  vector-effect: non-scaling-stroke;
}

/* The vertical beam light (Laser) - Now Hidden/Static */
.scan-beam {
  display: none;
  /* Explicitly hide since animation is removed */
}

@keyframes scan-loop {
  0% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }

  100% {
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
  }
}

@keyframes beam-move {
  0% {
    left: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .hero__scan-container {
    width: 100%;
    bottom: 15%;
    opacity: 0.5;
  }

  .scan-car-svg {
    transform: scale(1.1);
  }
}