/* =========================================================
   VITOR ELETRICISTA — VISUAL REFRESH
   Dark charcoal + electric amber
   ========================================================= */

/* ─── Custom Properties ───────────────────────────────── */
:root {
  --bg-base:      #09090E;
  --bg-elevated:  #0E0E16;
  --bg-card:      #131320;
  --bg-card-alt:  #111120;
  --border:       rgba(255, 255, 255, 0.065);
  --border-md:    rgba(255, 255, 255, 0.10);
  --border-amber: rgba(245, 158, 11, 0.22);

  --amber:        #F59E0B;
  --amber-bright: #FBBF24;
  --amber-dark:   #D97706;
  --amber-15:     rgba(245, 158, 11, 0.15);
  --amber-08:     rgba(245, 158, 11, 0.08);
  --amber-04:     rgba(245, 158, 11, 0.04);
  --amber-glow:   0 0 28px rgba(245, 158, 11, 0.35);

  --blue:         #3B82F6;
  --blue-12:      rgba(59, 130, 246, 0.12);

  --text-1:       #F1F5F9;
  --text-2:       #94A3B8;
  --text-3:       #475569;
}

/* ─── Global ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-base) !important;
  color: var(--text-1) !important;
}

* { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, .font-syne { font-family: 'Syne', sans-serif !important; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(245,158,11,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,158,11,.45); }

/* ─── Background overrides ─────────────────────────────── */
.bg-white       { background-color: var(--bg-base)     !important; }
.bg-slate-50    { background-color: var(--bg-elevated)  !important; }
.bg-slate-100   { background-color: var(--bg-card)      !important; }
.bg-slate-200   { background-color: rgba(255,255,255,.08) !important; }
.bg-slate-900   { background-color: #060608             !important; }
.bg-white\/95   { background-color: rgba(9,9,14,.88)    !important; }

/* ─── Text overrides ────────────────────────────────────── */
.text-slate-900 { color: var(--text-1) !important; }
.text-slate-800 { color: #CBD5E1       !important; }
.text-slate-700 { color: #94A3B8       !important; }
.text-slate-600 { color: #94A3B8       !important; }
.text-slate-500 { color: var(--text-2) !important; }
.text-slate-400 { color: var(--text-3) !important; }

/* ─── Border overrides ──────────────────────────────────── */
.border-slate-100 { border-color: var(--border)    !important; }
.border-slate-200 { border-color: var(--border-md) !important; }
.border-slate-800 { border-color: rgba(255,255,255,.07) !important; }

/* ─── Amber / Electric accent system ───────────────────── */
.bg-electric-500   { background-color: var(--amber)    !important; }
.bg-electric-50    { background-color: var(--amber-08) !important; }
.\!bg-electric-500\/10 { background-color: var(--amber-08) !important; }
.text-electric-500 { color: var(--amber)       !important; }
.text-electric-600 { color: var(--amber-dark)  !important; }
.text-electric-400 { color: var(--amber)       !important; }
.text-electric-100 { color: rgba(245,158,11,.55) !important; }
.border-electric-100 { border-color: var(--border-amber) !important; }
.\!border-electric-500\/25 { border-color: rgba(245,158,11,.25) !important; }

/* ─── Header ────────────────────────────────────────────── */
header.fixed {
  background-color: rgba(9,9,14,.88) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 var(--border);
}

/* Logo bolt glow */
header .bg-electric-500.rounded-lg {
  box-shadow: 0 0 18px rgba(245,158,11,.40);
  transition: box-shadow .2s;
}
header .bg-electric-500.rounded-lg:hover,
header a:hover .bg-electric-500.rounded-lg {
  box-shadow: 0 0 28px rgba(245,158,11,.65);
}

/* Nav link hover */
header .hover\:text-slate-900:hover { color: var(--text-1) !important; }

/* Mobile menu */
#mobileMenu {
  background-color: rgba(9,9,14,.97) !important;
  border-color: var(--border) !important;
}
#mobileMenu .hover\:bg-slate-50:hover {
  background-color: var(--amber-04) !important;
  color: var(--amber) !important;
}

/* ─── Hero section ──────────────────────────────────────── */
section.min-h-screen {
  background:
    radial-gradient(ellipse 70% 55% at 8% 90%,  rgba(245,158,11,.09)  0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 88% 15%,  rgba(59,130,246,.07)  0%, transparent 50%),
    var(--bg-base) !important;
  position: relative;
}

/* Subtle grid texture on hero */
section.min-h-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Hero badges */
.float > .absolute.bg-white,
.float > .absolute.bg-electric-500 { }

/* "Disponível agora" badge */
.absolute.-top-3.-right-3.bg-white {
  background-color: var(--bg-card) !important;
  border-color: var(--border-md) !important;
}
.absolute.-top-3.-right-3 .text-slate-700 { color: var(--text-1) !important; }

/* Photo frame */
.float > div.rounded-2xl.bg-white {
  background-color: var(--bg-card) !important;
  border-color: var(--border-md) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px var(--border-md) !important;
}

/* "15+ anos" badge on photo */
.absolute.-bottom-3.-left-3.bg-electric-500 {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%) !important;
  box-shadow: var(--amber-glow) !important;
}

/* Stats bar */
.border-t.border-slate-200 { border-color: var(--border) !important; }
.stat-item .text-electric-500 {
  text-shadow: 0 0 20px rgba(245,158,11,.35);
}

/* Stat dividers */
.w-px.bg-slate-200 { background-color: var(--border-md) !important; }

/* ─── Section badge ─────────────────────────────────────── */
.section-badge {
  background-color: var(--amber-08) !important;
  border-color: var(--border-amber) !important;
  color: var(--amber) !important;
  letter-spacing: .08em;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn-primary {
  background-color: var(--amber) !important;
  color: #08080D !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(245,158,11,.25) !important;
}
.btn-primary:hover {
  background-color: var(--amber-bright) !important;
  box-shadow: 0 6px 28px rgba(245,158,11,.45) !important;
}
.btn-primary:active {
  background-color: var(--amber-dark) !important;
}

.btn-outline {
  border-color: var(--border-md) !important;
  color: var(--text-1) !important;
}
.btn-outline:hover {
  border-color: var(--amber) !important;
  background-color: var(--amber-08) !important;
  color: var(--amber) !important;
}

/* ─── Service cards ─────────────────────────────────────── */
.service-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
}
.service-card:hover {
  border-color: var(--border-amber) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px var(--border-amber) !important;
  transform: translateY(-3px);
}
.service-card::before {
  background-color: var(--amber) !important;
}

/* Icon containers in service cards */
.service-card .bg-electric-50 {
  background-color: var(--amber-08) !important;
}

/* ─── Area de atendimento / Region links ────────────────── */
section#atendimento .bg-white.rounded-2xl {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
section#atendimento .bg-white.rounded-2xl:hover {
  border-color: var(--border-amber) !important;
  background-color: var(--bg-card-alt) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,.4) !important;
}
section#atendimento .rounded-full.bg-slate-50 {
  background-color: rgba(255,255,255,.05) !important;
}
section#atendimento .group:hover .rounded-full {
  background-color: var(--amber-08) !important;
}
.group:hover .group-hover\:bg-electric-500 { background-color: var(--amber)       !important; }
.group:hover .group-hover\:bg-electric-600 { background-color: var(--amber-dark)  !important; }
.group:hover .group-hover\:bg-electric-50  { background-color: var(--amber-08)    !important; }
.group:hover .group-hover\:text-electric-600 { color: var(--amber) !important; }
.group:hover .group-hover\:text-white        { color: #08080D !important; }

/* Map container */
section#atendimento .bg-white.rounded-3xl {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
/* De-saturate the light Google Maps iframe on dark bg */
section#atendimento iframe {
  filter: invert(0.92) hue-rotate(180deg) brightness(.9) contrast(.85);
  border-radius: .75rem;
}

/* ─── Portfolio ─────────────────────────────────────────── */
section#portfolio .bg-white.rounded-2xl {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
}
section#portfolio .bg-white.rounded-2xl:hover {
  border-color: var(--border-amber) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.5) !important;
}
section#portfolio .border-slate-100 { border-color: var(--border) !important; }
section#portfolio .text-slate-600   { color: var(--text-2) !important; }

/* ─── FAQ ───────────────────────────────────────────────── */
.faq-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.faq-item summary:hover {
  background-color: rgba(255,255,255,.025) !important;
}
.faq-item[open] {
  border-color: var(--border-amber) !important;
}
.group-open\:text-electric-600 { color: var(--amber) !important; }
.group-open\:text-electric-500 { color: var(--amber) !important; }
.faq-item .text-slate-600 { color: var(--text-2) !important; }
.faq-item strong { color: var(--amber); }

/* ─── About / Trust ─────────────────────────────────────── */
.trust-icon {
  background-color: var(--amber-08) !important;
  color: var(--amber) !important;
}

/* About photo */
section#sobre .rounded-2xl.shadow-card-lg {
  border-color: var(--border-md) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
section#sobre .absolute.-bottom-4.-right-4 {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%) !important;
  box-shadow: var(--amber-glow) !important;
}

/* ─── Reviews ───────────────────────────────────────────── */
section#avaliacoes .bg-white.rounded-2xl {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
}
section#avaliacoes .text-slate-600 { color: var(--text-2) !important; }

/* Carousel controls */
button[onclick^="scrollCarousel"],
button[onclick^="scrollPortfolioCarousel"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border-md) !important;
  color: var(--text-2) !important;
}
button[onclick^="scrollCarousel"]:hover,
button[onclick^="scrollPortfolioCarousel"]:hover {
  background-color: var(--bg-elevated) !important;
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}
button[onclick^="scrollCarousel"] svg,
button[onclick^="scrollPortfolioCarousel"] svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Dots */
#reviewsDots button,
#reviewsDots span,
#portfolioDots button,
#portfolioDots span {
  background-color: rgba(255,255,255,.2) !important;
}
#reviewsDots .carousel-dot--active,
#portfolioDots .carousel-dot--active {
  background-color: var(--amber) !important;
}

/* Google reviews link */
#googleReviewsLink {
  border-color: var(--border-md) !important;
  color: var(--text-2) !important;
}
#googleReviewsLink:hover {
  border-color: var(--amber) !important;
  background-color: var(--amber-04) !important;
  color: var(--amber) !important;
}

/* ─── Emergency CTA ─────────────────────────────────────── */
section.bg-electric-500 {
  background: linear-gradient(135deg, #7C2D12 0%, #9A3412 30%, #C2410C 65%, #D97706 100%) !important;
  position: relative;
  overflow: hidden;
}
section.bg-electric-500::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
section.bg-electric-500 .text-electric-100 {
  color: rgba(255,220,180,.75) !important;
}
section.bg-electric-500 a.bg-white {
  background-color: #fff !important;
  color: #7C2D12 !important;
}
section.bg-electric-500 a.bg-white:hover {
  background-color: #FEF3C7 !important;
}

/* ─── Contact ───────────────────────────────────────────── */
section#contato .bg-white.rounded-2xl.p-8 {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.45) !important;
}

.input-field {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-md) !important;
  color: var(--text-1) !important;
}
.input-field::placeholder { color: var(--text-3) !important; }
.input-field:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
  outline: none !important;
}

select.input-field option {
  background-color: var(--bg-card);
  color: var(--text-1);
}

section#contato .border-t.border-slate-100 { border-color: var(--border) !important; }

/* ─── Footer ────────────────────────────────────────────── */
footer.bg-slate-900 {
  background-color: #060608 !important;
  border-top: 1px solid var(--border);
}
footer .text-slate-400 { color: #64748B !important; }
footer .text-white     { color: var(--text-1) !important; }
footer .text-slate-500 { color: #475569 !important; }

.footer-link            { color: #475569 !important; }
.footer-link:hover      { color: var(--amber) !important; }

footer .text-electric-400            { color: var(--amber) !important; }
footer .hover\:text-electric-300:hover { color: var(--amber-bright) !important; }

footer .bg-electric-500.rounded-lg {
  box-shadow: 0 0 12px rgba(245,158,11,.3);
}
footer .border-slate-800 { border-color: rgba(255,255,255,.06) !important; }

/* ─── Shadows ───────────────────────────────────────────── */
.shadow-card    { box-shadow: 0 2px 16px rgba(0,0,0,.4)  !important; }
.shadow-card-lg { box-shadow: 0 8px 40px rgba(0,0,0,.55) !important; }
.shadow-blue    { box-shadow: var(--amber-glow)           !important; }
.shadow-lg      { box-shadow: 0 10px 32px rgba(0,0,0,.5) !important; }

/* ─── Hover utilities ───────────────────────────────────── */
.hover\:bg-slate-50:hover   { background-color: rgba(255,255,255,.03) !important; }
.hover\:bg-slate-100:hover  { background-color: rgba(255,255,255,.06) !important; }
.hover\:text-slate-900:hover { color: var(--text-1) !important; }
.hover\:text-electric-600:hover { color: var(--amber)       !important; }
.hover\:text-electric-700:hover { color: var(--amber-dark)  !important; }
.hover\:border-electric-100:hover { border-color: var(--border-amber) !important; }
.hover\:border-electric-500:hover { border-color: var(--amber) !important; }
.hover\:shadow-card:hover    { box-shadow: 0 2px 16px rgba(0,0,0,.4)  !important; }
.hover\:shadow-card-lg:hover { box-shadow: 0 12px 48px rgba(0,0,0,.55) !important; }

/* ─── Animations ────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Amber pulse on the "disponível" green dot */
.animate-pulse {
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* Reveal-up stays intact */
.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Float animation on hero image */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.float { animation: float 4.5s ease-in-out infinite; }

/* Slide-in on hero text */
.animate-in {
  animation: slideInDown .7s ease-out both;
}
@keyframes slideInDown {
  from { opacity:0; transform:translateY(-22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Mapa interativo (index) ───────────────────────────── */

/* Região ativa destaca com borda âmbar */
[data-map-active] {
  border-color: var(--amber) !important;
  background-color: var(--bg-card-alt) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
}
[data-map-active] .group-hover\:bg-electric-500,
[data-map-active] .w-12.h-12.bg-electric-50 {
  background-color: var(--amber) !important;
}
[data-map-active] .group-hover\:text-white {
  color: #08080D !important;
}
[data-map-active] h3 {
  color: var(--amber) !important;
}
[data-map-active] .w-10.h-10.rounded-full {
  background-color: var(--amber-08) !important;
  color: var(--amber) !important;
}

/* Label do mapa */
#regionMapLabel {
  background-color: rgba(19,19,32,.92) !important;
  border-color: var(--border-md) !important;
  color: var(--text-1) !important;
}

/* Seção de localização nas páginas regionais */
section#localizacao .rounded-2xl.overflow-hidden {
  border-color: var(--border) !important;
}
section#localizacao iframe {
  filter: invert(0.92) hue-rotate(180deg) brightness(.9) contrast(.85);
}

/* ─── Accessibility ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,::before,::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Hero stat cards ───────────────────────────────────── */
.stat-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ─── Carousel dots ─────────────────────────────────────── */
.carousel-dot {
  background-color: #CBD5E1;
  transition: background-color 0.2s, transform 0.2s;
}

.carousel-dot--active {
  background-color: #F59E0B;
  transform: scale(1.25);
}