:root{
  --bg:#0b0b0d; 
  --bg-2:#111114; 
  --surface:#16161a; 
  --text:#f5f5f7; 
  --text-dark:#333333; 
  --muted:#a1a1aa;
  --accent:#1297FA; 
  --accent-2:#B4B4B4; 
  --accent-3:#0078d2;
  --border:#26262c;
}

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

html{
  scroll-behavior:smooth
}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px
}

a{
  color:var(--text);
  text-decoration:none
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 1.25rem
}

h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  line-height:1.15;
  letter-spacing:-0.02em
}

h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin-bottom:1rem}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;margin-bottom:1rem}
h3{font-size:1.2rem;font-weight:600;margin-bottom:.5rem}

p{color:var(--muted)}
.muted{color:var(--muted)}
.center{text-align:center;margin-top:2rem}

/* ====================== HEADER ====================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.4s ease;
  background: transparent;
  border-bottom: none;
}

.brand img{height:64px;width:auto;object-fit:contain}

.site-header.scrolled {
  background: rgba(11, 11, 13, 0.98) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #26262c;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
}

.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:.02em
}

.brand-accent{color:var(--accent)}
.brand-mark{color:var(--accent);margin-right:.25rem}

.nav-links{
  display:flex;
  gap:1.5rem;
  list-style:none;
  align-items:center
}

.nav-links a{
  color:var(--text);
  font-weight:500;
  font-size:.95rem
}

.nav-links a:hover{color:var(--accent-2)}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--text);
  font-size:1.5rem;
  cursor:pointer
}

/* ====================== BUTTONS ====================== */
.btn{
  display:inline-block;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  transition:transform .15s,background .15s;
  cursor:pointer;
  border:none
}

.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}

.btn-sm{padding:.5rem 1rem;font-size:.85rem;background:var(--accent);color:#fff}
.btn-lg{padding:1rem 2rem;font-size:1.05rem}

/* ====================== HERO PREMIUM MODERNA ====================== */
.hero-premium {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
  overflow: hidden;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/img/hero-contactcar.jpg');
  background-size: cover;
  background-position: center 35%;
  z-index: 1;
  filter: brightness(0.75) contrast(1.1);
}
.hero-bg_1 {
  position: absolute;
  inset: 0;
  background-image: url('https://blog.garciaautopecas.com.br/wp-content/uploads/2026/01/image1-1.png');
  background-size: cover;
  background-position: center 35%;
  z-index: 1;
  filter: brightness(0.75) contrast(1.1);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(18, 151, 250, 0.18), transparent 70%);
  z-index: 2;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11,11,13,0.35) 0%,
    rgba(11,11,13,0.75) 50%,
    rgba(11,11,13,0.95) 80%,
    #0b0b0d 100%
  );
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 950px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.hero-copy-premium {
  max-width: 100%;
}

.hero-mini {
  display: inline-block;
  background: rgba(18, 151, 250, 0.15);
  color: #5dd4ff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  padding: 0.3rem 1.8rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  border: 1px solid rgba(93, 212, 255, 0.2);
  box-shadow: 0 0 25px rgba(18, 151, 250, 0.3);
}

.hero-premium h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  margin-bottom: 1rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.hero-premium h1 span {
  background: linear-gradient(90deg, #1297FA, #5dd4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 1.45rem;
  color: #f0f0f5;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.hero-subtext {
  font-size: 1.15rem;
  color: #b0b0b8;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

.hero-buttons {
  margin-bottom: 3rem;
}

.btn-hero {
  background: linear-gradient(135deg, #1297FA, #00d4ff);
  color: white;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 1.15rem 2.8rem;
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(18, 151, 250, 0.4);
  transition: all 0.3s ease;
}

.btn-hero:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 40px rgba(18, 151, 250, 0.5);
  background: linear-gradient(135deg, #00d4ff, #1297FA);
}

/* Hero Cards */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.hero-card {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 1.4rem 1rem;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.hero-card:hover {
  transform: translateY(-8px);
  border-color: rgba(18, 151, 250, 0.4);
  background: rgba(18, 151, 250, 0.08);
}

.hero-card strong {
  font-size: 1.35rem;
  display: block;
  margin-bottom: 0.4rem;
  color: #fff;
}

/* ====================== NÚMEROS ====================== */
.section-numbers {
  background: var(--bg-2);
  padding: 4rem 0 3rem;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.number-item {
  text-align: center;
}

.number-item strong {
  font-size: 2.8rem;
  font-family: 'Space Grotesk', sans-serif;
  display: block;
  margin-bottom: 0.5rem;
  color: #1297FA;
}

/* ====================== OUTROS ESTILOS (mantidos) ====================== */
.hero{padding:4rem 0 5rem;background:radial-gradient(ellipse at top,rgba(225,29,72,.15),transparent 60%)}
.hero-sm{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.hero-copy .eyebrow{display:inline-block;color:var(--accent-2);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-bottom:1rem}
.lead{font-size:1.15rem;color:var(--muted);margin-bottom:2rem;max-width:55ch}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.trust div{display:flex;flex-direction:column}
.trust strong{font-family:'Space Grotesk';font-size:1.15rem}
.trust span{color:var(--muted);font-size:.8rem}
.hero-media img{aspect-ratio:4/3;object-fit:cover;border-radius:20px}

/* Sections */
.section{padding:5rem 0}
.section-dark{background:var(--bg-2)}
.section-title{text-align:center;margin-bottom:.5rem}
.section-sub{text-align:center;color:var(--muted);margin-bottom:3rem}

/* Cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.card,.pillar,.feature{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.75rem;transition:border-color .2s,transform .2s}
.card:hover,.pillar:hover,.feature:hover{border-color:var(--accent);transform:translateY(-3px)}
.card .tag{display:inline-block;background:var(--accent);color:#fff;padding:.2rem .7rem;border-radius:999px;font-size:.75rem;font-weight:600;margin-bottom:.75rem}
.card a,.pillar a{color:var(--accent-3);font-weight:600;display:inline-block;margin-top:.75rem}

/* Split */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.checks{list-style:none;margin:1.5rem 0}
.checks li{padding:.5rem 0 .5rem 1.75rem;position:relative;color:var(--muted)}
.checks li::before{content:"✕";position:absolute;left:0;color:var(--accent);font-weight:700}

/* Quote */
.quote{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem}
.quote .stars{color:#fbbf24;margin-bottom:.75rem}
.quote p{color:var(--text);font-size:1.05rem;margin-bottom:1rem}
.quote cite{color:var(--muted);font-style:normal;font-weight:600;font-size:.9rem}

/* CTA final */
.cta-final{padding:5rem 0;background:linear-gradient(135deg,#1297fa,#006dbe);text-align:center}
.cta-final h2,.cta-final p{color:#fff}
.cta-final .btn-primary{background:#fff;color:var(--accent);margin-top:1.5rem}
.cta-final .btn-primary:hover{background:#f5f5f7}

/* Form */
.form{display:flex;flex-direction:column;gap:1rem}
.form label{display:flex;flex-direction:column;gap:.4rem;font-weight:500;color:var(--text-dark);font-size:.9rem}
.form input,.form textarea{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;color:var(--text);font-family:inherit;font-size:1rem}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.alert{padding:1rem;border-radius:10px;margin-bottom:1rem}
.alert.success{background:rgba(34,197,94,.15);border:1px solid #22c55e;color:#86efac}
.alert.error{background:rgba(239,68,68,.15);border:1px solid #ef4444;color:#fca5a5}

/* Footer */
.site-footer{background:var(--bg-2);border-top:1px solid var(--border);padding:3rem 0 1.5rem;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:2rem}
.footer-grid h4{margin-bottom:.75rem;font-size:.95rem}
.footer-grid ul{list-style:none}
.footer-grid li{color:var(--muted);font-size:.9rem;padding:.2rem 0}
.brand-lg{font-size:1.4rem;margin-bottom:.5rem}
.copyright{border-top:1px solid var(--border);margin-top:2rem;padding-top:1.5rem;color:var(--muted);font-size:.85rem;text-align:center}

/* WhatsApp float */
.whats-float{position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.5);z-index:100;transition:transform .2s}
.whats-float:hover{transform:scale(1.08)}

/* ====================== RESPONSIVO ====================== */
@media (max-width: 880px){
  .hero-grid,.split-grid{grid-template-columns:1fr}
  .cards-3,.cards-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg-2);flex-direction:column;padding:1.5rem;gap:1rem;border-bottom:1px solid var(--border)}
  .nav-links.open{display:flex}
  .nav{position:relative}
  .section{padding:3.5rem 0}
  .brand img{height:44px;width:auto;object-fit:contain}
}

@media (max-width:768px){
  .hero-premium {
    min-height: 92vh;
    padding-top: 70px;
  }
  .hero-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav-links{
    background:#000;
    top:90px;
  }
  .brand img{height:44px;width:auto;object-fit:contain}
  
  .cta-final h2 {
  font-size: clamp(2rem, 3vw, 2rem);
  line-height: 1;
  margin-bottom: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 25px rgba(0,0,0,0.6);
}
}

@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
    .brand img{height:44px;width:auto;object-fit:contain}
}





/* ====================== TRÊS PILARES ====================== */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.pillar-card {
  background: var(--surface);
  border: 1px solid rgba(18,151,250,0.2);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(18,151,250,0.08), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.pillar-card:hover {
  transform: translateY(-10px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(18,151,250,0.15);
}

.pillar-card:hover::before { opacity: 1; }

.pillar-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  display: block;
}

/* ====================== SERVIÇOS COM IMAGENS ====================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.8rem;
}

.service-card {
  border-radius: 24px;
  overflow: hidden;
  background: #111;
  position: relative;
  height: 480px;
  display: flex;
  flex-direction: column;
}

.service-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

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

.service-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 2rem;
  background: linear-gradient(180deg, transparent, rgba(11,11,13,0.95));
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.service-content h3 {
  color: white;
  margin: 0.8rem 0 0.6rem;
  font-size: 1.5rem;
}

/* ====================== STATS CLIENTES ====================== */
.stats-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.stat-box {
  background: rgba(18,151,250,0.08);
  border: 1px solid rgba(18,151,250,0.3);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  text-align: center;
  min-width: 180px;
  box-shadow: 0 0 25px rgba(18,151,250,0.15);
}

.stat-icon {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
}

.stat-box strong {
  font-size: 2rem;
  color: #5dd4ff;
  display: block;
}

/* ====================== MINI CARDS ====================== */
.why-grid {
  gap: 4rem;
}

.features-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.mini-card {
  background: var(--surface);
  border: 1px solid rgba(18,151,250,0.2);
  border-radius: 16px;
  padding: 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.mini-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

/* ====================== CTA FINAL ====================== */
.cta-final {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 4rem 0;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/img/hero-contactccar_servicos.jpg?auto=format&fit=crop&w=2000&q=85');
  background-size: cover;
  background-position: center 40%;
  z-index: 1;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11,11,13,0.45) 0%,
    rgba(11,11,13,0.75) 50%,
    rgba(11,11,13,0.92) 100%
  );
  z-index: 2;
}

.cta-final .container {
  position: relative;
  z-index: 3;
  max-width: 820px;
}

.cta-final h2 {
  font-size: clamp(3rem, 5vw, 3rem);
  line-height: 1;
  margin-bottom: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 25px rgba(0,0,0,0.6);
}

.cta-final p {
  font-size: 1.35rem;
  color: #e5e5e5;
  max-width: 580px;
  margin: 0 auto 2.8rem;
  font-weight: 500;
}

.btn-hero.btn-lg {
  padding: 1.3rem 3rem;
  font-size: 1.2rem;
}

/* ====================== TRÊS PILARES ====================== */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.pillar-card {
  background: var(--surface);
  border: 1px solid rgba(18, 151, 250, 0.15);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
}

.pillar-card:hover {
  transform: translateY(-12px);
  border-color: var(--accent);
  box-shadow: 0 25px 50px -12px rgba(18, 151, 250, 0.15);
}

.icon-box {
  width: 68px;
  height: 68px;
  background: rgba(18, 151, 250, 0.08);
  border: 1px solid rgba(0, 120, 210, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.8rem;
  transition: all 0.3s ease;
}

.pillar-card:hover .icon-box {
  background: rgba(18, 151, 250, 0.15);
  transform: scale(1.08);
}

.icon-box svg {
  color: #0078d2;
  transition: all 0.3s ease;
}

.pillar-card:hover .icon-box svg {
  color: #ffd700;
}

/* Ajustes de texto */
.pillar-card h3 {
  font-size: 1.55rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.pillar-card p {
  color: var(--muted);
  margin-bottom: 1.8rem;
  line-height: 1.6;
}

.pillar-card a {
  color: var(--accent);
  font-weight: 600;
}







/* ====================== SPLIT SECTION ====================== */
.split-grid .section-title {
  text-align: left !important;
  margin-bottom: 1.5rem;
}

/* ====================== TESTIMONIALS ====================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.8rem;
  margin: 3rem 0;
}

.quote {
  background: var(--surface);
  border: 1px solid rgba(18,151,250,0.15);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
}

.quote .stars {
  color: #F5C800;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.quote p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.quote cite {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* ====================== STATS DISCRETOS ====================== */
.stats-grid {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 4rem;
}

.stat-box {
  background: rgba(18,151,250,0.07);
  border: 1px solid rgba(18,151,250,0.25);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;
  font-size: 0.95rem;
}

.stat-box svg {
  color: #5dd4ff;
}

.stat-box strong {
  color: #5dd4ff;
  font-size: 1.35rem;
}

.stat-box span {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ====================== WHY CHOOSE ====================== */
.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}

.mini-feature {
  display: flex;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid rgba(18,151,250,0.15);
  border-radius: 16px;
  padding: 1.4rem;
  transition: all 0.3s ease;
}

.mini-feature:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.mini-icon-box {
  width: 42px;
  height: 42px;
  background: rgba(18,151,250,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.mini-feature strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.mini-feature p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}




/* ====================== DESKTOP ====================== */
.fade-in-up,
.slide-in-left {
    opacity: 0;
    transition: all 0.1s;
}

.fade-in-up {
    transform: translateY(30px);
}

.slide-in-left {
    transform: translateX(-50px);
}

.fade-in-up.in-view {
    animation: fadeInUp 0.9s forwards;
}

.slide-in-left.in-view {
    animation: slideInLeft 0.9s forwards;
}

/* ====================== MOBILE ====================== */
@media (max-width: 768px) {

    .fade-in-up,
    .slide-in-left {

        /* MOBILE MAIS LEVE */
        opacity: 1;
        transform: none;

        animation: none;
        transition: none;
    }

    .fade-in-up.in-view,
    .slide-in-left.in-view {

        /* animação simples no mobile */
        animation: mobileFade 0.6s ease forwards;
    }
}

/* ====================== KEYFRAMES ====================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* MOBILE */
@keyframes mobileFade {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}



/* =========================================================
   PÁGINA DE LISTAGEM DE SERVIÇOS (servicos.php)
========================================================= */

.services-page {
  background: #fff;
  position: relative;
  padding: 5rem 0;
}

/* Cabeçalho da seção */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
}

.section-head h2 {
  color: #111114;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.section-head h2 span {
  color: var(--accent); /* Cor azul de destaque */
}

.section-head p {
  color: #66666f;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Grid de Serviços - 3 colunas perfeitas no desktop */
.services-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Estrutura do Card individual */
.service-page-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(18, 151, 250, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

/* Efeito de Hover no Card (sobe com sombra suave) */
.service-page-card:hover {
  transform: translateY(-10px);
  border-color: rgba(18, 151, 250, 0.35);
  box-shadow: 0 25px 50px rgba(18, 151, 250, 0.12);
}

/* Container da Imagem do Card */
.service-card-image {
  display: block;
  position: relative;
  overflow: hidden;
  height: 240px; /* Altura ideal fixa para alinhar os cards horizontalmente */
  background: #000;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px; /* Reseta o padrão global apenas dentro do card */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Zoom suave na imagem ao passar o mouse */
.service-page-card:hover .service-card-image img {
  transform: scale(1.06);
}

/* Bloco de conteúdo (Textos e Botão) */
.service-card-content {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Força os botões a ficarem alinhados na base se os textos mudarem de tamanho */
}

.service-card-content h3 {
  font-size: 1.4rem;
  color: #111114;
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.service-card-content p {
  color: #52525b;
  margin-bottom: 2rem;
  line-height: 1.65;
  font-size: 0.98rem;
}

/* Botão "Saiba mais →" */
.btn-service {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto; /* Empurra para o rodapé do card */
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1297FA, #00d4ff);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(18, 151, 250, 0.15);
  text-align: center;
}

.btn-service:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(18, 151, 250, 0.25);
  background: linear-gradient(135deg, #00d4ff, #1297FA);
}




/* =========================================================
   RESPONSIVO DA LISTAGEM DE SERVIÇOS
========================================================= */

@media (max-width: 980px) {
  /* Altera de 3 para 2 colunas em tablets */
  .services-page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  /* Força 1 coluna em celulares */
  .services-page-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .service-card-image {
    height: 210px; /* Reduz ligeiramente a altura da foto no mobile */
  }

  .service-card-content {
    padding: 1.6rem; /* Reduz o espaçamento interno para telas menores */
  }
}







/* =========================================================
   SINGLE SERVIÇOS PREMIUM
========================================================= */

.service-hero-premium{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.service-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
}

.service-hero-overlay{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    180deg,
    rgba(11,11,13,.45) 0%,
    rgba(11,11,13,.82) 75%,
    #0b0b0d 100%
  );
}

.service-hero-container{
  position:relative;
  z-index:5;
  width: 100%; /* Garante total expansão do container */
}

.service-hero-content{
  max-width:1140px; /* Alterado de 760px para ir mais para as laterais */
}




.service-mini-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.3rem;
  border-radius: 999px;
  background: rgba(18,151,250,.12);
  border: 1px solid rgba(18,151,250,.18);
  color: #73d7ff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 5;
}


.service-hero-content h1{
  font-size:clamp(2.2rem,4.5vw,3.2rem); /* Diminuído para ficar elegante com títulos maiores */
  line-height:1.1;
  margin-bottom:1.5rem;
  margin-top: 0.8rem;
  font-weight:800;
  max-width:100%; /* Removida a limitação antiga de 10ch para expandir o texto livremente */
}

.service-hero-content p{
  font-size:1.15rem;
  color:#d7d7dc;
  max-width:68ch; /* Expandido levemente para acompanhar o título */
  line-height:1.8;
}

.service-hero-buttons{
  display:flex;
  gap:1rem;
  margin-top:2rem;
  flex-wrap:wrap;
}

.btn-service{
  padding:.9rem 1.7rem;
  font-size:.92rem;
}

.btn-outline-light{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:#fff;
  backdrop-filter:blur(10px);
}

.btn-outline-light:hover{
  background:rgba(255,255,255,.1);
}

.service-hero-infos{
  display:flex;
  gap:1rem;
  margin-top:3rem;
  flex-wrap:wrap;
}

.service-info-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:1.2rem 1.4rem;
  min-width:170px;
}

.service-info-card strong{
  display:block;
  font-size:1.2rem;
  color:#fff;
  margin-bottom:.3rem;
}

.service-info-card span{
  color:#cfcfd4;
  font-size:.92rem;
}

/* LAYOUT */
.service-single-wrap{
  background:#fff;
}

.service-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:3rem;
  align-items:start;
}

.service-content-area{
  color:#111;
}

.service-content-area h2{
  color:#111827;
  font-size:clamp(1.6rem,3vw,2.2rem); /* Diminuído ligeiramente para melhor legibilidade */
  line-height:1.2;
  margin-bottom:1.4rem;
}

.service-content-area p{
  color:#52525b;
  line-height:1.9;
  margin-bottom:1.5rem;
}

.service-content-area img{
  margin-top:2rem;
  border-radius:24px;
  width:100%;
}

.section-badge{
  display:inline-block;
  margin-bottom:1rem;
  color:#1297FA;
  font-weight:700;
  letter-spacing:.12em;
  font-size:.82rem;
}

/* BENEFÍCIOS */
.service-benefits{
  margin-top:5rem;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.4rem;
  margin-top:2rem;
}

.benefit-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:2rem;
  transition:.3s;
}

.benefit-card:hover{
  transform:translateY(-6px);
  border-color:#1297FA;
  box-shadow:0 20px 40px rgba(18,151,250,.08);
}

.benefit-card h3{
  color:#111827;
  margin-bottom:.8rem;
}

/* CTA */
.service-cta{
  margin-top:5rem;
  border-radius:34px;
  overflow:hidden;
  background:
  linear-gradient(
    135deg,
    #0d172d 0%,
    #0b2348 50%,
    #1297FA 100%
  );
  padding:4rem;
  position:relative;
}

.service-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:
  radial-gradient(circle at top right,
  rgba(255,255,255,.18),
  transparent 40%);
}

.service-cta-content{
  position:relative;
  z-index:2;
  max-width:620px;
}

.service-cta h2{
  color:#fff;
}

.service-cta p{
  color:#d6e8ff;
}

/* SIDEBAR */
.services-sidebar{
  position:sticky;
  top:120px;
}

.sidebar-card,
.sidebar-contact-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:24px;
  padding:2rem;
  margin-bottom:1.5rem;
}

.sidebar-mini{
  display:block;
  color:#1297FA;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  margin-bottom:1rem;
}

.sidebar-card h3,
.sidebar-contact-card h3{
  color:#111827;
  margin-bottom:1rem;
  line-height:1.2;
}

.sidebar-services-nav{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top:1.5rem;
}

.sidebar-services-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.2rem;
  border-radius:14px;
  background:#f8fafc;
  color:#111827;
  transition:.25s;
  border:1px solid transparent;
  font-weight:500;
}

.sidebar-services-nav a:hover,
.sidebar-services-nav a.active{
  border-color:#1297FA;
  background:rgba(18,151,250,.06);
  color:#1297FA;
}

.sidebar-contact-card p{
  margin-bottom:1.5rem;
}

/* RESPONSIVO */
@media(max-width:980px){
  .service-layout{
    grid-template-columns:1fr;
  }
  .services-sidebar{
    position:relative;
    top:auto;
  }
}

@media(max-width:768px){
  .service-hero-premium{
    min-height:92vh;
  }
  .service-hero-content h1{
    max-width:100%;
  }
  .benefits-grid{
    grid-template-columns:1fr;
  }
  .service-cta{
    padding:2.4rem;
    border-radius:24px;
  }
  .service-info-card{
    width:100%;
  }
  .service-hero-premium {
    padding-top: 100px; /* dá mais espaço pro header */
  }
  
  .service-hero-content {
    padding-top: 20px; /* afasta o conteúdo do header */
  }
  
  .service-mini-title {
    margin-top: 10px;
    margin-bottom: 1.2rem;
    font-size: .78rem;
    padding: .45rem 1.2rem;
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .service-hero-content h1 {
    margin-top: 0.8rem;
  }
}