/* ===== Overrides / melhorias v12 ===== */

section{ scroll-margin-top: calc(var(--header-h, 92px) + 10px) !important; }

/* Header: mais clean e um pouco mais claro */
.topbar.topbar-courser{
  background: rgba(14, 18, 26, .48) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.09) !important;
}
.logo-link{ display:block; }
.logo-link:focus-visible{ outline:2px solid rgba(0,179,255,.9); outline-offset:6px; border-radius:10px; }

/* Subcards logo abaixo */
.empresarial{ min-height:auto !important; padding:120px 56px 140px !important; gap:24px !important; }
.empresarial.residencial{ padding-top:120px !important; }
.card-main{ font-size:34px !important; padding:18px 22px !important; border-radius:22px !important; max-width:520px !important; }
.section-intro{ margin:8px auto 0 !important; font-size:16px !important; }
.services-grid{ margin-top:18px !important; }
@media (max-width:980px){ .empresarial{ padding:110px 18px 120px !important; } .card-main{ max-width:92vw !important; font-size:28px !important; } }

/* Hero cards tech */
.card-hero{ position:relative; overflow:hidden; }
.card-hero .hero-label{ position:relative; z-index:2; }
.card-hero::before{ content:""; position:absolute; inset:-40px; opacity:.40; background-size:cover; background-repeat:no-repeat; background-position:center; transform:rotate(-8deg) scale(1.05); pointer-events:none; }
#hero-empresarial.card-hero::before{ background-image:url("../../cards/Empresarial.png"); }
#hero-residencial.card-hero::before{ background-image:url("../../cards/Residencial.png"); }
.card-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,0)); pointer-events:none; }

/* Serviços */
.services-grid{ max-width:1240px; margin-left:auto; margin-right:auto; display:grid; grid-template-columns:repeat(2, minmax(260px,1fr)); gap:18px; }
.service{ background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18); border-radius:22px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden; min-height: 100%; display: flex; flex-direction: column; }
.service-summary{ list-style:none; cursor:pointer; padding:16px; display:flex; justify-content:space-between; gap:12px; }
.service-summary::-webkit-details-marker{ display:none; }
.service-title{ font-size:17px; font-weight:850; }
.service-subtitle{ font-size:13px; opacity:.86; margin-top:4px; }
.service-chevron{ font-size:12px; opacity:.9; border:1px solid rgba(255,255,255,.22); padding:10px 12px; border-radius:12px; background: rgba(255,255,255,.08); }
.service-body{ padding:0 16px 16px; flex-grow: 1; }
@media (max-width:980px){ .services-grid{ grid-template-columns:1fr; } }

/* Botão CTA melhorado */
.service-actions{ justify-content:flex-start !important; margin-top:16px !important; margin-top: auto; }
.service-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: 52px !important;
  padding: 0 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(90deg, #00B3FF 0%, #005BFF 100%) !important;
  color: #061024 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
  text-decoration:none !important;
  box-shadow: 0 18px 52px rgba(0,91,255,.28) !important;
}
.service-cta::after{ content:"  →"; font-weight: 900; }
.service-cta:hover{ transform: translateY(-1px) !important; box-shadow: 0 26px 70px rgba(0,179,255,.25) !important; filter: saturate(1.08) !important; }
@media (max-width:980px){ .service-cta{ width:100% !important; } }

/* Métricas */
.metrics{ max-width:1240px; margin:22px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.metric{ border-radius:18px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); padding:16px 14px; text-align:center; }
.metric-value{ font-size:22px; font-weight:900; }
.metric-label{ font-size:12px; opacity:.86; margin-top:6px; letter-spacing:.08em; text-transform:uppercase; }
.metric-extra{ margin-top:10px; font-size:12px; line-height:1.5; opacity:.92; }
@media (max-width:980px){ .metrics{ grid-template-columns:1fr; } }

/* WhatsApp flutuante: avatar corpo inteiro + ícone redimensionado */
.whatsapp-float{
  position:fixed !important;
  right: calc(18px + env(safe-area-inset-right)) !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  z-index:3000 !important;
  display:block !important;
  width: 92px;
  height: 128px;
  background: transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.wa-avatar-full{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.35));
}
.wa-icon{
  position:absolute;
  right: 0;
  bottom: 0;
  width: 38px;
  height: 38px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(10,14,20,.68);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  pointer-events:none;
}

@media (max-width:520px){
  .whatsapp-float{ width: 82px; height: 116px; right: calc(12px + env(safe-area-inset-right)) !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  .wa-icon{ width: 34px; height: 34px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* v12.3 — WhatsApp: correção final (sem borda, sem duplicidade) */
.whatsapp-float{ background: transparent !important; border:0 !important; box-shadow:none !important; outline:none !important; }
.whatsapp-float *{ background: transparent !important; border:0 !important; box-shadow:none !important; outline:none !important; }
.wa-avatar-full{ background: transparent !important; border:0 !important; box-shadow:none !important; filter:none !important; opacity:.72 !important; }




/* === r3 — Métricas no mesmo padrão + WhatsApp com ícone visível === */

/* Métricas: garantir mesmo padrão dos demais cards (maior especificidade) */
section .metrics .metric,
.empresarial .metrics .metric,
.residencial .metrics .metric{
  background: rgba(255,255,255,.28) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 22px !important;
  padding: 18px 16px !important;
  text-align: center !important;
}
section .metrics .metric:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
section .metrics .metric .metric-value{ font-size:22px !important; font-weight:900 !important; letter-spacing:-.2px; color:#fff }
section .metrics .metric .metric-label{ font-size:12px !important; opacity:.92 !important; margin-top:6px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:rgba(255,255,255,.95) }
section .metrics .metric .metric-extra{ margin-top:10px !important; font-size:12px !important; line-height:1.5 !important; opacity:.92 !important; color:rgba(255,255,255,.95) }

/* WhatsApp: botão compacto com ícone */





/* Novos ícones nos cards de serviço */
.service-summary{ align-items:center; }
.service-icon{ width: 56px; height: 56px; margin-right: 16px; flex-shrink: 0; }

/* === r4 — Botão CTA mais clean === */

.service-cta{
  /* Resetando o estilo anterior */
  background: transparent !important;
  box-shadow: none !important;
  color: #00B3FF !important; /* Cor primária da Ubiquiti */
  border: 1px solid #00B3FF !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
  border-radius: 8px !important; /* Mais clean */
  height: 42px !important; /* Mais compacto */
  padding: 0 18px !important;
  transition: all .2s ease-in-out;
}

.service-cta::after{ content:" →" !important; font-weight: 700 !important; }

.service-cta:hover{
  transform: translateY(-1px) !important;
  background: #00B3FF !important;
  color: #061024 !important;
  box-shadow: 0 8px 20px rgba(0,179,255,.25) !important;
  filter: none !important;
}

/* === r5 — Ajuste de Layout para Cards Ímpares === */

/* Centraliza o último item se for ímpar */
.services-grid:has(> .service:last-child:nth-child(odd)) {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    justify-content: center;
}

.services-grid:has(> .service:last-child:nth-child(odd)) > .service:last-child {
    grid-column: 1 / -1; /* Ocupa as duas colunas */
    max-width: 50%; /* Limita a largura para centralizar */
    margin: 0 auto; /* Centraliza o card */
}

/* Garante que em telas pequenas o comportamento padrão de 1 coluna seja mantido */
@media (max-width:980px){
    .services-grid:has(> .service:last-child:nth-child(odd)) > .service:last-child {
        grid-column: auto;
        max-width: 100%;
        margin: 0;
    }
}

/* === r6 — Ajuste para 3 Cards Principais (Hero) e novo card Rural === */

/* Ajuste do grid para 3 colunas */
.hero-cards {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Novo card Rural */
#hero-rural.card-hero::before {
    background-image: url("../../cards/ConectividadeRural.png");
    opacity: .40; /* Padronizando a opacidade conforme os outros cards */
}

/* Ajuste para telas menores com 3 cards */
@media (max-width: 980px) {
    .hero-cards {
        grid-template-columns: 1fr !important; /* Volta para 1 coluna em telas pequenas */
    }
}

/* Nova seção Rural */
.rural{
    /* A seção rural deve ter o fundo transparente para mostrar o vídeo de fundo. */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Ajuste para o card principal da seção rural, se necessário */
.rural .card-main {
    background: rgba(255,255,255,.28) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}


/* v13j — Hero: imagens com presença equilibrada */
#hero-empresarial.card-hero::before,
#hero-residencial.card-hero::before,
#hero-rural.card-hero::before{
  opacity:.22 !important;
  filter:saturate(.85) contrast(.98) brightness(1.02) blur(.8px) !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}
#hero-empresarial.card-hero::after,
#hero-residencial.card-hero::after,
#hero-rural.card-hero::after{
  background:linear-gradient(135deg, rgba(6,16,36,.10), rgba(6,16,36,0)) !important;
}


/* v13k — Hero: cards mais translúcidos (frosted glass mais leve) */
.hero-cards .card, .card-hero{
  background: rgba(255,255,255,.16) !important; /* antes ~.28/.22 */
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 32px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}



/* === v13k_emp_uniform_r2 — Serviços Empresariais com altura e propriedades padronizadas === */
:root{ --service-min-h: 132px; } /* altura mínima aproximada dos 2 primeiros cards */

/* Grid força esticar todos os itens igualmente */
.services-grid{ align-items: stretch !important; }

/* Card de serviço com layout flex padronizado e mesma aparência dos 2 primeiros */
.services-grid .service{
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0 !important;
  min-height: var(--service-min-h) !important;
  background: rgba(255,255,255,.18) !important; /* mantém como nos primeiros */
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Cabeçalho com mesmo espaçamento dos primeiros */
.service-summary{
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.service-title{ font-size: 17px !important; font-weight: 850 !important; }
.service-subtitle{ font-size: 13px !important; opacity: .86 !important; margin-top: 4px !important; }
.service-chevron{ font-size: 12px !important; opacity: .9 !important; border: 1px solid rgba(255,255,255,.22) !important; padding: 10px 12px !important; border-radius: 12px !important; background: rgba(255,255,255,.08) !important; }

/* Corpo ocupa o restante para igualar alturas */
.service-body{
  flex: 1 1 auto !important;
  padding: 0 16px 16px !important;
  display: block !important;
}

/* Em mobile, mantém consistência */
@media (max-width:980px){
  :root{ --service-min-h: 120px; }
}

/* Otimização de Performance e Responsividade - Adicionado em 27/12/2025 */
@media (max-width: 768px) {
    .bg-video.video-optimized {
        display: none !important;
    }

    body {
        background-image: url('../img/bg_mobile.webp') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
}