:root {
     --gc-primary: #34e17a;
     --gc-primary-700: #22c45e;
     --gc-dark: #11221a;
     --gc-light: #f0fff7;
 }

 html,
 body {
     background: #ffffff;
     color: #24372d;
 }

 .navbar {
     box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
 }

 .brand-logo {
     font-weight: 800;
     letter-spacing: .4px;
     color: var(--gc-dark);
 }

 .btn-gc {
     background: var(--gc-primary);
     color: #fff;
     border: none;
 }

 .btn-gc:hover {
     background: var(--gc-primary-700);
     color: #fff;
 }

 .btn-outline-gc {
     border-color: var(--gc-primary);
     color: var(--gc-primary);
 }

 .btn-outline-gc:hover {
     background: var(--gc-primary);
     color: #fff;
 }

 /* Hero */
 .hero {
     background: radial-gradient(1200px 500px at 80% -10%, rgba(46, 191, 107, .18), transparent),
         radial-gradient(900px 400px at -10% 0%, rgba(46, 191, 107, .12), transparent),
         linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
 }

 .hero-badge {
     background: #eafff3;
     color: var(--gc-primary-700);
 }

 .hero img {
     filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .15));
 }

 /* Cards */
 .service-card {
     transition: transform .25s ease, box-shadow .25s ease;
     height: 100%;
     border: 1px solid #eaf5ef;
 }

 .service-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
 }

 .icon-pill {
     width: 28px;
     height: 28px;
     display: grid;
     place-items: center;
     border-radius: 10px;
     background: #e9fbf0;
     color: var(--gc-primary-700);
     overflow: hidden;
 }

 .icon-pill img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 /* Sections */
 section {
     scroll-margin-top: 80px;
 }

 .section-muted {
     background: var(--gc-light);
 }

 /* Process steps */
 .step {
     position: relative;
 }

 .step::before {
     content: attr(data-step);
     position: absolute;
     left: 0;
     top: 0;
     transform: translate(-50%, -50%);
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--gc-primary);
     color: #fff;
     display: grid;
     place-items: center;
     font-weight: 700;
     box-shadow: 0 4px 10px rgba(46, 191, 107, .35);
 }

 /* Floating WhatsApp */
 .float-whatsapp {
     position: fixed;
     right: 18px;
     bottom: 18px;
     z-index: 1040;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #25D366;
     color: #fff;
     box-shadow: 0 14px 28px rgba(37, 211, 102, .35);
 }

 .float-whatsapp:hover {
     color: #fff;
     background: #1ebe5a;
 }

 footer {
     background: #0f1a14;
     color: #b7d2c3;
 }

 footer a {
     color: #d7ffe9;
 }

 /* UX refinements */
 html {
     scroll-behavior: smooth;
 }

 .navbar .nav-link.active {
     color: var(--gc-primary-700) !important;
     font-weight: 600;
 }

 .navbar .nav-link:hover {
     color: var(--gc-primary-700);
 }

 .btn:focus-visible {
     box-shadow: 0 0 0 .2rem rgba(46, 191, 107, .35);
     outline: 0;
 }
 
/*----------------------------------------------------------
------DADOS DO BOTÃO DE CHAMADA DE AÇÃO PARA CRIAR PAGINA
-----------------------------------------------------------*/
.glow-on-hover {
    width: 300px;
    height: 70px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #02aa02, #ffffff, #02aa02, #ffffff, #02aa02, #02aa02, #110f13, #02aa02, #ffffff);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:before {
    opacity: 1;
}
.glow-on-hover:hover{
    color: rgb(253, 227, 227) !important;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #02aa02;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Cookie banner */
.cookie-banner[hidden] { display: none !important; }
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  padding: 14px 0;
  background: #0f1a14; /* matches footer */
  color: #b7d2c3;
  border-top: 1px solid rgba(231, 255, 241, 0.08);
  box-shadow: 0 -10px 24px rgba(0,0,0,.12);
}
.cookie-banner a { color: #d7ffe9; }
.cookie-banner .btn-gc { background: var(--gc-primary); color: #fff; }
.cookie-banner .btn-gc:hover { background: var(--gc-primary-700); }
.cookie-banner .btn-outline-gc { border-color: var(--gc-primary); color: var(--gc-primary); background: transparent; }
.cookie-banner .btn-outline-gc:hover { background: var(--gc-primary); color: #fff; }

/*---------------------------Botão de chamadado zap---------------------*/
.glow-on-hover-zap {
    width: 70px;
    height: 70px;
    color: #fff;
    border-radius: 50%;
    background: #111;
   
}

.glow-on-hover-zap:before {
    content: '';
    background: linear-gradient(45deg, #02aa02, #ffffff, #02aa02, #ffffff, #02aa02, #02aa02, #110f13, #02aa02, #ffffff);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 40px;
}

.glow-on-hover-zap:active {
    color: #000
}

.glow-on-hover-zap:active:after {
    background: transparent;
}

.glow-on-hover-zap:before {
    opacity: 1;
}
.glow-on-hover-zap:hover{
    color: rgb(253, 227, 227) !important;
    
}

.glow-on-hover-zap:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #02aa02;
    left: 0;
    top: 0;
    border-radius: 50px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@media (max-width: 576px) {
  footer .d-flex.gap-3 a {
    font-size: 0.95rem; /* ajuste fino: 0.9rem ~ 0.95rem */
  }
  footer .d-flex.gap-3 i {
    font-size: 1rem; /* opcional: diminui um pouco o ícone também */
  }
}