/* StarFibra — camada de identidade "blog" aplicada ao site (carrega depois do tema). */
:root{
  --sf-navy:#0b2a45; --sf-navy2:#0e3a63; --sf-blue:#1483c7; --sf-blue-d:#0b6bb0; --sf-orange:#f28c1d;
  --sf-ink:#14243a; --sf-muted:#5b6b7e; --sf-line:#e5ebf1;
}
body{font-family:"Nunito","Open Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;color:var(--sf-ink);-webkit-font-smoothing:antialiased;letter-spacing:.1px}
/* títulos navy, mais fortes e limpos (como o blog) */
h1,h2,h3,.section-title h2,.sf-sectitle{letter-spacing:-.01em}
h1 strong,h2 strong{font-weight:800}
.section-title h2{font-weight:800 !important}
a{transition:color .15s}
/* CTA laranja arredondado (identidade do blog) */
.btn-primary2,.btn.btn-primary2,.call-to-action-btn .btn,.btn-lg.btn-primary2{
  background:var(--sf-orange) !important;border-color:var(--sf-orange) !important;color:#fff !important;
  border-radius:999px !important;font-weight:800 !important;letter-spacing:.01em;box-shadow:0 8px 22px rgba(242,140,29,.28) !important;
  border:0 !important;transition:filter .15s,transform .15s}
.btn-primary2:hover,.btn.btn-primary2:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* botão "EU QUERO" dentro dos cards de plano */
.panel-footer .btn-primary2{width:auto}
/* Central do Cliente — pill navy com contorno */
.call-to-action-btn.central .btn{background:var(--sf-navy) !important;border-radius:999px !important;font-weight:700 !important}
/* cards / painéis mais limpos */
.panel,.panel-info{border-radius:16px !important;overflow:hidden;border:1px solid var(--sf-line) !important;box-shadow:0 10px 30px rgba(11,42,69,.08)}
/* header: sombra suave + respiro (mantém a marca) */
#header .header-body{box-shadow:0 2px 18px rgba(11,42,69,.08)}
/* COLAR NO TOPO (web): o tema empurra o header-body 25px p/ baixo no desktop
   (transform translate3d 0,25px,0), deixando uma faixa cinza acima do menu.
   Remove o recuo p/ o menu branco encostar no topo desde o inicio. (2026-07-09) */
@media (min-width:992px){
  html #header.header-semi-transparent-light .header-body{transform:none !important}
}
/* links de menu mais legíveis */
#mainNav .nav-link{font-weight:700;color:var(--sf-navy)}
#mainNav .nav-link:hover,#mainNav .nav-link.active{color:var(--sf-blue-d)}
/* chips/badges e detalhes ficam com o azul/laranja da marca */
.yellowColor{color:var(--sf-navy)}
/* Faixa de ícones: quadrado uniforme (evita deformar o SVG) — global e seguro */
.square-border-icon{width:74px !important;height:74px !important;object-fit:contain !important;padding:15px !important;box-sizing:border-box !important;display:block;margin-left:auto;margin-right:auto}
/* Layout flex limpo SÓ no tablet/mobile (desktop mantém o original 5-em-linha) */
@media(max-width:991px){
  /* externa: deixa empilhar faixa (col-md-7) e foguete (col-md-5) */
  .blueGradient>.container-fluid>.verticalFlex{flex-wrap:wrap !important;display:flex !important}
  .col-md-7.col-sm-12{width:100% !important;max-width:100% !important;flex:0 0 100% !important}
  .col-md-5.combo-final-price{width:100% !important;max-width:100% !important;flex:0 0 100% !important;text-align:center;margin-top:10px}
  /* INTERNA (os 5 ícones): linha limpa, ícone em cima, sem sobrepor */
  .col-md-7 .verticalFlex{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:flex-start !important;gap:10px !important;width:100%}
  .col-md-7 .verticalFlex>.service{position:static !important;float:none !important;left:auto !important;top:auto !important;transform:none !important;flex:0 0 auto !important;width:auto !important;max-width:135px;min-width:108px;margin:0 !important;padding:10px !important;text-align:center;display:flex !important;flex-direction:column !important;align-items:center !important}
  .col-md-7 .verticalFlex .service-icon{display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px}
  .col-md-7 .verticalFlex .square-border-icon{width:60px !important;height:60px !important;padding:12px !important}
  .col-md-7 .verticalFlex .service-text{display:block;margin-top:6px;font-size:12px;line-height:1.25}
}
/* Botão "Chame no WhatsApp" -> ícone WhatsApp redondo verde, pulsando */
a.btn.btn-primary3{display:inline-flex !important;align-items:center;justify-content:center;width:78px !important;height:78px !important;padding:0 !important;border-radius:50% !important;background:#25d366 !important;color:#fff !important;font-size:0 !important;border:0 !important;box-shadow:0 8px 24px rgba(37,211,102,.5) !important;animation:sf-wa-pulse 1.7s ease-out infinite;vertical-align:middle}
a.btn.btn-primary3 .fab,a.btn.btn-primary3 i{font-size:40px !important;line-height:1;margin:0 !important}
a.btn.btn-primary3:hover{filter:brightness(1.05);transform:scale(1.05)}
@keyframes sf-wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 24px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){a.btn.btn-primary3{animation:none}}

/* ============================================================
   SIMETRIA — bandas WhatsApp e blocos de ação (08/07)
   ============================================================ */
/* Bandas CTA: texto + ícone WhatsApp JUNTOS e CENTRALIZADOS */
.call-to-action,.call-to-action2{
  display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 26px;text-align:center;width:100%;box-sizing:border-box;
}
.call-to-action>[class*="col-"],.call-to-action2>[class*="col-"]{
  float:none !important;width:auto !important;max-width:100% !important;
  flex:0 1 auto !important;padding-left:0 !important;padding-right:0 !important;margin:0 !important;
}
.call-to-action .call-to-action-content,.call-to-action2 .call-to-action-content{text-align:center}
.call-to-action .call-to-action-content h2,.call-to-action2 .call-to-action-content h2{margin-bottom:4px}
.call-to-action .call-to-action-btn,.call-to-action2 .call-to-action-btn{margin:0;text-align:center}
@media(max-width:575px){
  .call-to-action .call-to-action-content h2,.call-to-action2 .call-to-action-content h2{font-size:20px;line-height:1.25}
}

/* 4 blocos de ação (Cadastro/Contrato/Velocidade/Boleto): botões alinhados na base */
section.space--xs .container>.row{display:flex !important;flex-wrap:wrap !important}
section.space--xs .container>.row>[class*="col-"]{display:flex !important;flex-direction:column}
section.space--xs .text-block{display:flex !important;flex-direction:column;align-items:center;flex:1 1 auto;width:100%}
section.space--xs .text-block>img{margin-left:auto;margin-right:auto}
section.space--xs .text-block>p{flex:1 1 auto;margin-bottom:14px}
section.space--xs .text-block .call-to-action-btn{margin-top:auto;padding-top:2px}
/* remove 404 de background decorativo ausente (home-concept-small.png) */
.home-concept-construction{background-image:none !important}

/* ============================================================
   BARRA CINZA (faixa de título EMPRESA/COBERTURA…) — 08/07 noite
   dono: centralizar o texto + reduzir ~30% a altura
   ============================================================ */
/* centralizacao do texto do banner (altura fica na regra COMPACTA mais abaixo) */
html body section.section.section-tertiary .row{justify-content:center !important}
html body section.section.section-tertiary [class*="col-"]{text-align:center !important;flex:0 0 100% !important;max-width:100% !important}

/* ============================================================
   BANNER (wowslider) — nunca deformar no mobile
   desktop mantém; no mobile a imagem escala proporcional (height:auto)
   ============================================================ */
@media(max-width:767px){
  #wowslider-container1,
  #wowslider-container1 .ws_images,
  #wowslider-container1 .ws_images ul,
  #wowslider-container1 .ws_images ul li,
  #wowslider-container1 .ws_images ul li a{height:auto !important;max-height:none !important}
  #wowslider-container1 .ws_images ul li img,
  #wowslider-container1 .ws_images > div > img,
  #wowslider-container1 img{width:100% !important;height:auto !important;max-height:none !important;object-fit:contain !important;display:block}
  /* setas/legendas do slider não forçam altura */
  #wowslider-container1 .ws_bullets,#wowslider-container1 .ws-title{position:relative}
}

/* ============================================================
   Remove badge do desenvolvedor original (JMS Designer/Júnior) —
   injetado via JS de URL externa. Site é StarFibra/Integrador.
   ============================================================ */
a[href*="jmsdesigner"],img[src*="jmsdesigner"]{display:none !important;visibility:hidden !important;pointer-events:none !important}

/* ============================================================
   AJUSTES 08/07 (noite-2): bandas WhatsApp inline + fonte menor;
   Central do Cliente no header mobile; menu mobile mais limpo
   ============================================================ */
/* Bandas WhatsApp: texto + ícone LADO A LADO (inline), fonte menor */
.call-to-action,.call-to-action2{flex-wrap:nowrap !important;gap:10px 18px !important;justify-content:center !important}
.call-to-action .call-to-action-content,.call-to-action2 .call-to-action-content{text-align:left}
.call-to-action .call-to-action-content h2,.call-to-action2 .call-to-action-content h2{font-size:20px !important;line-height:1.25 !important;margin:0 !important}
.call-to-action .call-to-action-content p,.call-to-action2 .call-to-action-content p{font-size:14px !important;margin:3px 0 0 !important}
.call-to-action a.btn.btn-primary3,.call-to-action2 a.btn.btn-primary3{width:58px !important;height:58px !important}
.call-to-action a.btn.btn-primary3 .fab,.call-to-action a.btn.btn-primary3 i,.call-to-action2 a.btn.btn-primary3 .fab,.call-to-action2 a.btn.btn-primary3 i{font-size:28px !important}
@media(max-width:575px){
  .call-to-action .call-to-action-content h2,.call-to-action2 .call-to-action-content h2{font-size:15px !important}
  .call-to-action .call-to-action-content p,.call-to-action2 .call-to-action-content p{font-size:12.5px !important}
  .call-to-action,.call-to-action2{gap:8px 12px !important}
  .call-to-action a.btn.btn-primary3,.call-to-action2 a.btn.btn-primary3{width:50px !important;height:50px !important}
  .call-to-action a.btn.btn-primary3 .fab,.call-to-action2 a.btn.btn-primary3 .fab{font-size:24px !important}
}

/* Central do Cliente: ÍCONE no header do mobile (fora do hambúrguer) */
.sf-central-mob{display:none}
@media(max-width:991px){
  /* os DOIS ícones do topo mobile: círculos brancos iguais, ícone navy, sombra */
  .sf-central-mob,.header-btn-collapse-nav{
    display:inline-flex !important;align-items:center;justify-content:center;
    width:46px !important;height:46px !important;min-height:0 !important;padding:0 !important;
    border-radius:50% !important;background:#fff !important;border:0 !important;
    box-shadow:0 3px 12px rgba(0,0,0,.28) !important;margin:0 0 0 10px !important;
    flex:0 0 auto;text-decoration:none;vertical-align:middle;transition:transform .12s,background .15s}
  .sf-central-mob i,.header-btn-collapse-nav i{color:#0b2a45 !important;font-size:20px !important;line-height:1}
  .sf-central-mob:hover,.header-btn-collapse-nav:hover{background:#eaf4fb !important;transform:translateY(-1px)}
}

/* Menu mobile mais limpo (evita o "largura inteira feio") */
@media(max-width:991px){
  #mainNav{padding:4px 2px}
  #mainNav .nav-link{padding:12px 16px !important;font-size:15px;border-radius:8px}
  #mainNav>li>.nav-link.active{background:#0b2a45 !important;color:#fff !important;border-radius:8px}
  #mainNav>li{border-bottom:1px solid #eef2f6}
  #mainNav>li:last-child{border-bottom:0}
  .sf-navdd .sf-ddmenu a{padding-left:30px !important;font-weight:600;color:#0b2a45}
}

/* Faixa "Praticidade/Suporte/Cobertura/Economia" contida: fecha as pontas
   com linha lateral (a 1ª ganha borda esquerda, a última borda direita) */
.section-dark.section-angled .row.border>[class*="col-"]:first-child{border-left:1px solid rgba(255,255,255,.14)}
.section-dark.section-angled .row.border>[class*="col-"]:last-child{border-right:1px solid rgba(255,255,255,.14)}

/* H1 SEO do índice (promovido do título de planos) — visual de título de seção */
.section-title h1.sf-h1{font-size:2.1rem;line-height:1.15;font-weight:800 !important;color:var(--sf-navy);margin:0 0 .2em;letter-spacing:-.01em}
.section-title h1.sf-h1 span{display:block;font-size:1rem;font-weight:400;color:var(--sf-muted);margin-top:.45em;line-height:1.45}

/* ============================================================
   HEADER 40% MAIS BAIXO (dono 08/07) — a altura (106px) vinha do
   min-height:90px dos .nav-link; reduzo p/ 54px e escalo o logo junto.
   ============================================================ */
@media(min-width:992px){
  #header #mainNav>li>.nav-link{min-height:50px !important;display:flex !important;align-items:center;justify-content:center}
  #header .header-nav-main{padding-top:0 !important;padding-bottom:0 !important}
  #header .header-nav.header-nav-stripe{padding-top:0 !important;padding-bottom:0 !important}
  #header .header-logo .logo-default{width:185px !important;height:auto !important}
}

/* Barra cinza (titulo de pagina) PADRONIZADA + COMPACTA (-35%) em TODAS as
   paginas, desktop E mobile (2026-07-09). Alta especificidade p/ vencer o tema. */
html body section.section.section-tertiary{padding-top:22px !important;padding-bottom:15px !important}
html body section.section.section-tertiary .container,
html body section.section.section-tertiary .row,
html body section.section.section-tertiary [class*="col-"],
html body section.section.section-tertiary .campo{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important}
html body section.section.section-tertiary h1{margin:0 !important;line-height:1.12 !important}

/* Setas de navegação entre seções na faixa de Planos (‹ NOME ›) — 2026-07-09.
   Clicando, cicla Residencial→Empresarial→Links→Serviços→SVAs sem abrir o menu. */
/* setas FIXAS nas bordas do container central (posição igual em toda seção);
   título sempre centralizado. */
.sf-secnav{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px}
.sf-secnav__title{margin:0 !important;text-align:center;padding:0 64px}
.sf-secnav__btn{position:absolute;top:50%;transform:translateY(-50%);
  display:inline-flex !important;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--sf-navy);color:#fff !important;
  font-size:26px;line-height:1;text-decoration:none;box-shadow:0 6px 16px rgba(11,42,69,.28);
  transition:background .15s,transform .12s}
.sf-secnav__prev{left:0}
.sf-secnav__next{right:0}
.sf-secnav__btn:hover{background:var(--sf-blue-d);color:#fff;transform:translateY(-50%) scale(1.06)}
@media(max-width:575px){
  .sf-secnav__btn{width:38px;height:38px;font-size:22px}
  .sf-secnav__title{padding:0 46px;font-size:1.1rem}
}