*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#04030a;
  --panel:#090713;
  --panel2:#0d0919;
  --purple:#a83cff;
  --purple2:#c15cff;
  --green:#16c957;
  --text:#fff;
  --muted:#a49baa;
  --line:rgba(198,157,255,.24)
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.container{width:min(1290px,calc(100% - 48px));margin:auto}

.header{
 position:sticky;top:0;z-index:50;
 background:rgba(4,3,10,.88);backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{height:76px;display:flex;align-items:center;gap:30px}
.logo{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:900;letter-spacing:.08em}
.logo-box{width:43px;height:43px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#8d29f2,#c76bff);font-size:22px}
.logo b{color:#bd52ff}.logo small{display:block;font-size:7px;letter-spacing:.25em;text-align:center;color:#ddd6e4;margin-top:3px}
nav{display:flex;gap:34px;margin:auto}
nav a{font-size:12px;font-weight:800;color:#d6cfdd;position:relative;padding:29px 0}
nav a.active,nav a:hover{color:#c05cff}
nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;background:#b54cff}
.header-whatsapp{
 display:flex;align-items:center;gap:7px;padding:12px 17px;border-radius:10px;
 background:var(--green);font-size:12px;font-weight:900;box-shadow:0 8px 24px rgba(22,201,87,.2)
}
.menu{display:none;background:#0c0815;border:5px solid var(--line);color:#fff;border-radius:8px;padding:20px}
.mobile-menu{display:none}

.hero{height:550px;position:relative;overflow:hidden}
.hero-image{
 position:absolute;inset:0;
 background:url("../assets/images/hero-bg.jpg") center/cover no-repeat
}
.hero-overlay{
 position:absolute;inset:0;
 background:
  linear-gradient(90deg,#04030a 0%,#04030a 27%,rgba(4,3,10,.82) 43%,rgba(4,3,10,.22) 74%,rgba(4,3,10,.02)),
  linear-gradient(0deg,#04030a 0%,transparent 30%);
}
.hero-inner{height:100%;display:flex;align-items:center;position:relative;z-index:2}
.hero-copy{width:54%;padding-top:15px}
.eyebrow{font-size:10px;letter-spacing:.18em;color:#c27aff;font-weight:900}
.hero h1{font-size:clamp(48px,5vw,76px);line-height:.97;letter-spacing:-.055em;margin:20px 0}
.hero h1 em{font-style:normal;color:#a943ff}
.hero p{font-size:15px;line-height:1.55;color:#e0dbe3}
.actions{display:flex;gap:14px;margin:27px 0}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:10px;padding:14px 20px;font-size:12px;font-weight:900;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.whatsapp-btn{background:var(--green);box-shadow:0 10px 30px rgba(22,201,87,.2)}
.whatsapp-btn span{font-size:20px;margin-left:10px}
.ghost{border:1px solid rgba(255,255,255,.35)}
.hero-trust{display:flex;gap:35px}
.hero-trust>div{display:flex;gap:10px;align-items:center}
.hero-trust b{font-size:28px;color:#b64cff}
.hero-trust strong,.hero-trust small{display:block}.hero-trust strong{font-size:10px}.hero-trust small{font-size:9px;color:#99919e}

.differentials{padding:0 0 20px;background:#04030a}
.diff-box{
 display:grid;grid-template-columns:1.2fr repeat(4,1fr);
 border:1px solid var(--line);border-radius:16px;background:rgba(9,7,19,.94);overflow:hidden
}
.diff-title{padding:27px}
.diff-title span,.heading span,.family-copy>span{color:#c16aff;font-size:10px;font-weight:900}
.diff-title h2{font-size:27px;line-height:1.08;margin-top:8px}.diff-title em,.heading em,.family-copy em{color:#b74eff;font-style:normal}
.diff-box article{text-align:center;padding:23px 18px;border-left:1px solid var(--line)}
.diff-box article i{font-style:normal;font-size:31px;color:#b74cff}.diff-box h3{font-size:13px;margin:7px 0}.diff-box p{font-size:10px;color:#aaa1ae;line-height:1.55}

.plans{padding:20px 0 34px;background:#04030a}
.heading{text-align:center;margin-bottom:18px}.heading h2{font-size:26px;margin-top:7px}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{
 min-height:170px;padding:20px 26px;border:1px solid rgba(184,77,255,.48);
 border-radius:14px;background:linear-gradient(145deg,#0b0715,#090611);position:relative
}
.plan.featured{box-shadow:0 0 30px rgba(170,54,255,.23);border-color:#b34cff}
.plan label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#9a2dff,#bd55ff);padding:5px 14px;border-radius:7px;font-size:8px;font-weight:900;white-space:nowrap}
.plan-icon{color:#b64cff;font-size:30px;float:left;margin-right:15px}
.plan h3{font-size:17px;padding-top:7px;margin-bottom:11px}
.plan ul{list-style:none;clear:both;padding-top:3px;margin-bottom:15px}
.plan li{font-size:10px;color:#d6cfda;margin:6px 0}.plan li:before{content:"✓";color:#be5bff;font-weight:900;margin-right:9px}
.plan-wa{display:inline-block;background:var(--green);border-radius:8px;padding:9px 17px;font-size:10px;font-weight:900}

.family-cta{padding:10px 0 20px;background:#04030a}
.family-box{
 min-height:190px;display:grid;grid-template-columns:1.05fr .95fr;
 border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0b0714
}
.family-photo{
 min-height:190px;
 background:
  linear-gradient(90deg,rgba(5,3,10,.03),rgba(75,17,116,.35)),
  url("../assets/images/familia-hd.jpg") center/cover no-repeat
}
.family-copy{padding:28px 36px;display:flex;flex-direction:column;justify-content:center}
.family-copy h2{font-size:30px;line-height:1.03;margin:8px 0}.family-copy p{font-size:11px;color:#aaa1ae;margin-bottom:16px}.family-copy .btn{width:max-content}

footer{padding:14px 0;border-top:1px solid var(--line);background:#04030a}
.footer-inner{display:flex;align-items:center;gap:25px}.footer-inner p{margin:auto;color:#7f7784;font-size:9px}.social{font-size:15px}.footer-logo{font-size:12px}.footer-logo .logo-box{width:32px;height:32px;font-size:16px}

.floating-wa{
 position:fixed;right:20px;bottom:18px;width:56px;height:56px;border-radius:50%;
 display:grid;place-items:center;background:var(--green);color:#fff;font-size:25px;
 box-shadow:0 10px 28px rgba(22,201,87,.35);z-index:100
}

@media(max-width:900px){
 nav{display:none}.header-whatsapp{margin-left:auto}.menu{display:block}
 .mobile-menu.open{display:grid;padding:12px 24px 18px;background:#07040e;border-top:1px solid var(--line)}
 .mobile-menu a{padding:10px;font-size:12px}.mobile-wa{background:var(--green);border-radius:8px;text-align:center;font-weight:900}
 .hero-copy{width:68%}.diff-box{grid-template-columns:1fr 1fr}.diff-title{grid-column:1/-1}.diff-box article:nth-child(3){border-left:0}
 .family-box{grid-template-columns:1fr}.family-photo{min-height:260px}
}
@media(max-width:600px){
 .container{width:calc(100% - 28px)}.nav{height:68px}.header-whatsapp{display:none}
 .hero{height:680px}.hero-image{background-position:62% center;opacity:.65}
 .hero-overlay{background:linear-gradient(90deg,#04030a 0%,rgba(4,3,10,.88) 45%,rgba(4,3,10,.38)),linear-gradient(0deg,#04030a,transparent 45%)}
 .hero-copy{width:100%;padding-top:25px}.hero h1{font-size:49px}.desktop{display:none}
 .actions{display:grid}.actions .btn{width:100%}.hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:13px}
 .diff-box,.plans-grid{grid-template-columns:1fr}.diff-title{grid-column:auto}.diff-box article{border-left:0;border-top:1px solid var(--line)}
 .heading h2{font-size:27px}.plan{min-height:200px}.family-copy{padding:26px 23px}.family-copy h2{font-size:29px}.family-copy .btn{width:100%;justify-content:center}
 .footer-inner{display:grid;gap:10px}.footer-inner p{margin:0}.social{display:none}
}

/* FOTO DA FAMÍLIA — versão HD */
.family-photo{
  min-height:240px;
  background-image:
    linear-gradient(90deg,rgba(5,3,10,.03),rgba(45,8,75,.20)),
    url("../assets/images/familia-hd.jpg") !important;
  background-size:cover !important;
  background-position:center 43% !important;
  background-repeat:no-repeat !important;
  image-rendering:auto;
}
@media(max-width:600px){
  .family-photo{
    min-height:260px;
    background-position:center center !important;
  }
}


/* =========================================================
   NOVA SEÇÃO DE SERVIÇOS — EXTENSÃO DE REDE + CÂMERA WI-FI
   ========================================================= */

.services-section{
  padding:62px 0 38px;
  background:
    radial-gradient(circle at 20% 20%,rgba(157,47,255,.10),transparent 28%),
    #04030a;
}

.services-heading{
  max-width:700px;
  margin:0 auto 30px;
  text-align:center;
}

.services-heading>span{
  color:#c16aff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
}

.services-heading h2{
  font-size:34px;
  line-height:1.05;
  margin:9px 0 12px;
  letter-spacing:-.035em;
}

.services-heading h2 em{
  color:#ae4cff;
  font-style:normal;
}

.services-heading p{
  color:#99909f;
  font-size:11px;
  line-height:1.65;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.service-card{
  min-height:245px;
  padding:25px 21px;
  border:1px solid rgba(190,91,255,.22);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(20,10,31,.95),rgba(8,5,15,.96));
  transition:.22s ease;
}

.service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(190,91,255,.65);
  box-shadow:0 16px 38px rgba(126,33,202,.16);
}

.service-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  margin-bottom:19px;
  color:#c15aff;
  font-size:28px;
  background:rgba(170,60,255,.10);
  border:1px solid rgba(190,91,255,.22);
}

.service-tag{
  color:#987aa9;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.service-card h3{
  margin:7px 0 9px;
  font-size:17px;
}

.service-card p{
  min-height:65px;
  color:#9e95a5;
  font-size:10px;
  line-height:1.65;
}

.service-link{
  display:inline-block;
  margin-top:14px;
  color:#c062ff;
  font-size:10px;
  font-weight:900;
}

.service-link:hover{
  color:#e1b5ff;
}

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

@media(max-width:600px){
  .services-section{
    padding:50px 0 30px;
  }

  .services-heading h2{
    font-size:29px;
  }

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

  .service-card{
    min-height:auto;
  }

  .service-card p{
    min-height:0;
  }
}


/* =========================================================
   QUEM SOMOS
   ========================================================= */
.about-section{
  padding:38px 0 42px;
  background:
    radial-gradient(circle at 78% 50%,rgba(150,48,255,.13),transparent 34%),
    #04030a;
}
.about-box{
  min-height:340px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  border:1px solid rgba(190,91,255,.25);
  border-radius:18px;
  background:linear-gradient(135deg,#0b0715,#080510);
}
.about-copy{padding:42px 48px}
.about-copy>span{
  color:#c16aff;font-size:10px;font-weight:900;letter-spacing:.18em
}
.about-copy h2{
  margin:9px 0 15px;font-size:37px;line-height:1.03;letter-spacing:-.04em
}
.about-copy h2 em{color:#ae4cff;font-style:normal}
.about-copy p{
  max-width:610px;color:#a9a0b0;font-size:11px;line-height:1.75;margin-bottom:11px
}
.about-copy strong{color:#ddd5e3}
.about-points{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 20px
}
.about-points div{font-size:10px;color:#d8d1dc}
.about-points b{color:#be55ff;margin-right:5px}
.instagram-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(190,91,255,.5);
  border-radius:9px;padding:11px 16px;
  color:#fff;font-size:10px;font-weight:900;
  background:rgba(170,60,255,.08)
}
.instagram-btn:hover{background:rgba(170,60,255,.18)}
.about-visual{
  position:relative;min-height:340px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(177,64,255,.32),transparent 28%),
    linear-gradient(145deg,#12071e,#06040c);
}
.about-visual:before,.about-visual:after{
  content:"";position:absolute;border:1px solid rgba(185,78,255,.25);border-radius:50%
}
.about-visual:before{width:420px;height:420px;left:10%;top:-40px}
.about-visual:after{width:280px;height:280px;left:25%;top:30px}
.about-glow{
  position:absolute;width:150px;height:150px;border-radius:50%;
  left:43%;top:28%;background:#a43cff;filter:blur(65px);opacity:.42
}
.about-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(290px,75%);padding:27px;text-align:center;
  border:1px solid rgba(209,147,255,.35);border-radius:15px;
  background:rgba(9,5,17,.76);backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.35)
}
.about-card strong{display:block;font-size:24px;letter-spacing:.12em}
.about-card span{display:block;color:#b99bc8;font-size:9px;letter-spacing:.15em;margin:8px 0 18px}
.about-card small{color:#c15aff;font-size:10px;font-weight:900}

@media(max-width:900px){
  .about-box{grid-template-columns:1fr}
  .about-visual{min-height:260px}
}
@media(max-width:600px){
  .about-copy{padding:30px 23px}
  .about-copy h2{font-size:30px}
  .about-points{display:grid}
  .instagram-btn{width:100%;justify-content:center}
}

.instagram-direct,
.social a{
  color:#d9c6e8;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  transition:.2s ease;
}
.instagram-direct:hover,
.social a:hover{
  color:#c15aff;
}

/* BOTÕES DE SERVIÇOS — cada um abre o WhatsApp com mensagem específica */
.service-link.service-wa{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border:1px solid rgba(190,91,255,.35);
  border-radius:8px;
  background:rgba(170,60,255,.07);
  transition:.2s ease;
}
.service-link.service-wa:hover{
  color:#fff;
  background:#8f2de8;
  border-color:#b84cff;
  transform:translateY(-1px);
}


/* =========================================================
   ANIMAÇÕES — IRANI CLOUD
   Desktop + Mobile
   ========================================================= */

.reveal-on-scroll{
  opacity:0;
  transform:translateY(35px);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.7,.2,1);
}

.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-card{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.7,.2,1),
    border-color .25s ease,
    box-shadow .25s ease;
}

.reveal-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-card:nth-child(2){transition-delay:.08s}
.reveal-card:nth-child(3){transition-delay:.16s}
.reveal-card:nth-child(4){transition-delay:.24s}
.reveal-card:nth-child(5){transition-delay:.32s}

.reveal-hero .hero-copy{
  animation:heroContent .9s cubic-bezier(.2,.7,.2,1) both;
}

.reveal-hero .hero-image{
  animation:heroImage 1.2s ease both;
}

.reveal-actions{
  animation:fadeUp .7s .35s ease both;
}

.reveal-trust{
  animation:fadeUp .7s .5s ease both;
}

.reveal-content{
  opacity:0;
  transform:translateX(30px);
  transition:opacity .8s ease,transform .8s ease;
}

.reveal-content.is-visible{
  opacity:1;
  transform:translateX(0);
}

.hero-image{
  animation:heroZoom 8s ease-in-out infinite alternate;
}

.header-whatsapp,
.whatsapp-btn,
.plan-wa{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.header-whatsapp:hover,
.whatsapp-btn:hover,
.plan-wa:hover{
  transform:translateY(-3px);
}

.header-whatsapp{
  animation:softGlow 2.8s ease-in-out infinite;
}

.floating-wa{
  animation:whatsappPulse 2.4s ease-in-out infinite;
}

.floating-wa:hover{
  animation:none;
  transform:scale(1.1);
}

.service-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 18px 42px rgba(157,47,255,.2);
}

.plan:hover{
  transform:translateY(-7px) !important;
}

.plan.featured{
  animation:featuredGlow 3s ease-in-out infinite;
}

.about-card{
  animation:floatCard 4s ease-in-out infinite;
}

.about-glow{
  animation:glowMove 5s ease-in-out infinite alternate;
}

@keyframes heroContent{
  from{opacity:0;transform:translateY(35px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes heroImage{
  from{opacity:.65}
  to{opacity:1}
}

@keyframes heroZoom{
  from{transform:scale(1)}
  to{transform:scale(1.045)}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes whatsappPulse{
  0%,100%{transform:scale(1);box-shadow:0 10px 28px rgba(22,201,87,.3)}
  50%{transform:scale(1.07);box-shadow:0 12px 36px rgba(22,201,87,.5)}
}

@keyframes softGlow{
  0%,100%{box-shadow:0 8px 24px rgba(22,201,87,.12)}
  50%{box-shadow:0 8px 28px rgba(22,201,87,.3)}
}

@keyframes featuredGlow{
  0%,100%{box-shadow:0 0 30px rgba(170,54,255,.18)}
  50%{box-shadow:0 0 44px rgba(170,54,255,.32)}
}

@keyframes floatCard{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 7px))}
}

@keyframes glowMove{
  from{transform:translate(0,0);opacity:.3}
  to{transform:translate(20px,-12px);opacity:.52}
}

@media(max-width:600px){
  /* Mobile: animações menores para manter a página rápida e confortável. */
  .hero-image{
    animation:heroZoomMobile 10s ease-in-out infinite alternate;
  }

  .reveal-card{
    transform:translateY(20px);
    transition-duration:.55s;
  }

  .service-card:hover,
  .plan:hover{
    transform:none !important;
  }

  .header-whatsapp{
    animation:none;
  }

  .about-card{
    animation:none;
  }
}

@keyframes heroZoomMobile{
  from{transform:scale(1)}
  to{transform:scale(1.025)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   LINHAS DE CONECTIVIDADE ANIMADAS
   Visual de rede/fibra passando sobre a imagem do hero.
   ========================================================= */

.hero-network{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:.85;
}

.network-line{
  position:absolute;
  display:block;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    rgba(177,69,255,0),
    rgba(190,83,255,.25) 15%,
    rgba(216,145,255,.95) 50%,
    rgba(166,58,255,.35) 82%,
    rgba(177,69,255,0)
  );
  box-shadow:0 0 9px rgba(180,70,255,.45);
  filter:blur(.1px);
}

.line-1{
  width:72%;
  left:32%;
  top:27%;
  transform:rotate(-12deg);
  animation:networkLine1 5s ease-in-out infinite;
}

.line-2{
  width:64%;
  left:42%;
  top:46%;
  transform:rotate(7deg);
  animation:networkLine2 6s ease-in-out infinite;
}

.line-3{
  width:58%;
  left:45%;
  top:67%;
  transform:rotate(-17deg);
  animation:networkLine3 5.5s ease-in-out infinite;
}

.line-4{
  width:48%;
  left:58%;
  top:82%;
  transform:rotate(14deg);
  animation:networkLine4 7s ease-in-out infinite;
}

.network-node{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d19aff;
  box-shadow:
    0 0 7px #bd5cff,
    0 0 20px rgba(177,65,255,.9);
  animation:networkNode 2.4s ease-in-out infinite;
}

.node-1{left:48%;top:25%;animation-delay:.2s}
.node-2{left:68%;top:44%;animation-delay:.8s}
.node-3{left:61%;top:68%;animation-delay:1.3s}
.node-4{left:83%;top:79%;animation-delay:1.9s}

@keyframes networkLine1{
  0%,100%{opacity:.25;transform:translateX(-18px) rotate(-12deg)}
  50%{opacity:1;transform:translateX(22px) rotate(-12deg)}
}

@keyframes networkLine2{
  0%,100%{opacity:.2;transform:translateX(20px) rotate(7deg)}
  50%{opacity:.9;transform:translateX(-24px) rotate(7deg)}
}

@keyframes networkLine3{
  0%,100%{opacity:.2;transform:translateX(-15px) rotate(-17deg)}
  50%{opacity:.85;transform:translateX(28px) rotate(-17deg)}
}

@keyframes networkLine4{
  0%,100%{opacity:.15;transform:translateX(25px) rotate(14deg)}
  50%{opacity:.8;transform:translateX(-18px) rotate(14deg)}
}

@keyframes networkNode{
  0%,100%{transform:scale(.7);opacity:.45}
  50%{transform:scale(1.45);opacity:1}
}

@media(max-width:600px){
  .hero-network{
    opacity:.58;
  }

  .network-line{
    height:1px;
  }

  .line-1{width:90%;left:30%;top:26%}
  .line-2{width:82%;left:35%;top:45%}
  .line-3{width:76%;left:38%;top:65%}
  .line-4{width:65%;left:48%;top:80%}

  .network-node{
    width:5px;
    height:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .network-line,
  .network-node{
    animation:none;
  }
}

/* =========================================================
   WHATSAPP — TODOS OS CTAs COM O MESMO BOTÃO DA REFERÊNCIA
   ========================================================= */
a[data-whatsapp]:not(.floating-wa),
a.header-whatsapp,
a.mobile-wa,
a.whatsapp-btn,
a.service-wa,
a.plan-wa{
  background:#16d900 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:7px !important;
  box-shadow:none !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-weight:800 !important;
  transition:background .2s ease, transform .2s ease !important;
}
a[data-whatsapp]:not(.floating-wa):hover,
a.header-whatsapp:hover,
a.mobile-wa:hover,
a.whatsapp-btn:hover,
a.service-wa:hover,
a.plan-wa:hover{
  background:#20df0a !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(22,217,0,.18) !important;
}
a[data-whatsapp]:not(.floating-wa) .wa-icon,
a.header-whatsapp .wa-icon,
a.mobile-wa .wa-icon,
a.whatsapp-btn .wa-icon,
a.service-wa .wa-icon,
a.plan-wa .wa-icon{
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  fill:#fff !important;
  color:#fff !important;
}

/* Mesma proporção visual do botão da primeira imagem */
.header-whatsapp{padding:11px 16px !important; min-height:40px !important; font-size:12px !important}
.whatsapp-btn{padding:13px 20px !important; min-height:46px !important}
.service-wa,.plan-wa{padding:10px 15px !important; min-height:38px !important; font-size:10px !important}
.mobile-wa{padding:11px 14px !important; min-height:42px !important}

/* Botão flutuante: mantém formato circular, mas mesma cor/ícone */
.floating-wa{
  background:#16d900 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 7px 20px rgba(22,217,0,.25) !important;
}

/* ==========================================================
   FINAL: 4 BOTÕES DOS SERVIÇOS — IGUAIS À SEGUNDA IMAGEM
   Estes quatro não são verdes. Somente os CTAs dos serviços.
   ========================================================== */
.services-grid a.service-link.service-wa,
.service-card a.service-link.service-wa,
.service-item a.service-link.service-wa{
  background:#12091f !important;
  background-image:none !important;
  color:#c45cff !important;
  border:1px solid #7b2aa8 !important;
  border-radius:9px !important;
  box-shadow:none !important;
  min-height:42px !important;
  height:42px !important;
  padding:0 15px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  transform:none !important;
  overflow:hidden !important;
}

/* Remove qualquer ícone verde/WhatsApp desses quatro */
.services-grid a.service-link.service-wa .wa-icon,
.service-card a.service-link.service-wa .wa-icon,
.service-item a.service-link.service-wa .wa-icon{
  display:none !important;
}

/* A seta fica exatamente no botão, em roxo */
.services-grid a.service-link.service-wa::before,
.service-card a.service-link.service-wa::before,
.service-item a.service-link.service-wa::before{
  display:none !important;
}
.services-grid a.service-link.service-wa::after,
.service-card a.service-link.service-wa::after,
.service-item a.service-link.service-wa::after{
  content:"→" !important;
  display:inline-block !important;
  color:#c45cff !important;
  margin-left:5px !important;
  font-size:14px !important;
  font-weight:700 !important;
}

/* Hover discreto, mantendo o mesmo visual da referência */
.services-grid a.service-link.service-wa:hover,
.service-card a.service-link.service-wa:hover,
.service-item a.service-link.service-wa:hover{
  background:#1b0d2b !important;
  color:#d06cff !important;
  border-color:#9b39cc !important;
  box-shadow:0 0 16px rgba(169,67,226,.15) !important;
  transform:translateY(-1px) !important;
}

.services-grid a.service-link.service-wa:hover::after,
.service-card a.service-link.service-wa:hover::after,
.service-item a.service-link.service-wa:hover::after{
  color:#d06cff !important;
}